Embed Size (px)
DESCRIPTION
「分享」(Share Contract) 「搜尋」(Search Contract) 右側工具列 (Charms Bar) 如何儲存使用者個人設定? (Roaming 應用) 取得目前位置 (Geolocation) 使用 WebView 的眉角 取得及處理 JSON 資料 播放音樂或音效 (MediaElement) 選取本地或需端檔案 (FilePicker) 背景執行或下載 (Background Task/Transfer)
Citation preview
Windows 市集應用程式最佳實踐
蔡孟儒 (Raymond)技術推廣協理台灣微軟http://blogs.msdn.com/mengtsai
活用 WinRT 元件
妥善利用 Windows 8 系統功能
主題• 「分享」 (Share Contract)• 「搜尋」 (Search Contract)• 右側工具列 (Charms Bar)• 如何儲存使用者個人設定 ? (Roaming 應用 )• 取得目前位置 (Geolocation)• 使用 WebView 的眉角• 取得及處理 JSON 資料• 其他 :
– 播放音樂或音效 (MediaElement)– 選取本地或需端檔案 (FilePicker)– 背景執行或下載 (Background Task/Transfer)– 動態磚 (Live Tile)– 銷定畫面資訊 (RTC Apps)
「分享」 Share Contract
Windows Store App 可以「分享」出去的內容格式包括以下七種 :• 純文字 (Plain Text)• 格式化文字• 統一資源識別元 (URI)• HTML• 點陣圖 (Bitmap)• 檔案• 開發人員定義的資料
你可以任意組合以上的幾種內容來作分享，比如你想分享一段純文字加上一個 URI 連結、或是想分享一張圖片；那麼可以接受這個組合的 Targeted Apps 就會出現在右方，讓使用者作選擇。
只需要處理一個事件 + 設定一個物件…
• DataTransferManager.DataRequested 事件
• DataPackage 物件– 許多的 Set 方法 !
實作 Share Contract• 在你想要提供分享功能的某個頁面 (.xaml) ，其中的 LoadState() 方法，
加入 OnDataRequested 事件 event handler:
• 再實作這個 OnDataRequested() 方法 - 把資料塞進 DataPackaget 物件
「搜尋」 Search Contract
一致的 Search 介面
Search 解析
1. 搜尋功能在 App 內、或甚至未打開 App 時都能執行
2. 能提供搜尋建議及歷史查詢記錄
3. 所以提供「搜尋」功能的 Apps 預設皆會被列出 使用者可自由釘選，或是經由”電腦設定”來開
啟、隱藏某 App 的搜尋功能
1
2
3
Search Contract 實作 ( 一 )
• 在專案中新增一個「搜尋合約」的新項目，預設會產生一個新頁面 (SearchResultsPage1.xaml) ，拉入你想呈現的 UI 控制項 :
Search Contract 實作 ( 一 )
• 實作新頁面 Filter_SelectionChanged() 方法 :
Search Contract 實作 ( 二 )
• 更常見的搜尋，是讓使用者能直接搜尋此 App 的內容 (context)1. 在欲提供搜尋功能的頁面中加入 QuerySubmitted() event hander2. 再實作此 QuerySubmitted() 方法即可
Search Contract 實作 ( 二 )
• 以 Blog Reader App 為例，我想在二個不同的頁面實作搜尋 :
實作 Charms Bar 的「設定」
最常見的退件原因 - 隱私權宣告• 4.1.1 如果您的應用程式具備網路通訊功能，則必須包含隱私權聲明
– 簡單來說，只要您的 App 內有宣告使用網際網路 (Internet) 、網路攝影機 (WebCam) 或個人文件庫 (Documents Library) ，就必預提供隱私權聲明
– 而您若是以 Visual Studio 2012 的範本來開發的話，請注意使用網際網路的宣告預設是打開的喔 !
實作 : 在 Charms Bar 「設定」中加入隱私權條款的連結• 在 App.xaml.cs 中加入 SettingsPane.OnCommandsRequested() event
handler ，並實作此方法即可
如何儲存使用者個人設定 ? (Roaming 應用 )
App 所需的資料 (App data) vs. 使用者資料 (User data)
User data
Documents Photos Music Videos
App data
Settings FilesSession State
Local Cache
漫遊 (Roaming)
App 正常的存取資料
資料與使用者的帳號 (Microsoft Account)
進行同步
LocalStorage
Roaming 範例var localSettings = Windows.Storage.ApplicationData.Current.LocalSettings;
localSettings.Values["currentPage"] = MyBook.CurrentPage;
var roamingSettings = Windows.Storage.ApplicationData.Current.RoamingSettings;
roamingSettings.Values["currentPage"] = MyBook.CurrentPage;
取得目前位置 (Geolocation)
如何取得所在位置經緯度 ?• 只需要 GetGeopositionAsync()
取得位置，再以 Coordinate.Latitude/Longtitude 取得緯度及經度。• 由於這個方法是一個 Async call ，所以你需要在呼叫這個方法的函式之前加
上 async 的宣告，否則會發生編譯錯誤
咦 ? Compile error?
WinRT 資訊 : The required device capability has not been declared in the manifest.其他資訊 : 存取被拒。 ( 發生例外狀況於 HRESULT: 0x80070005 (E_ACCESSDENIED))
Manifest 宣告• 請記得於 .manifest 中勾選位置 (Location) 的設定
請記得處理無 GPS服務或未開啟的情形
• 否則會被退件…
使用 WebView 的眉角
Ten Things You Need to Know About WebView By Matt Small
1. WebView is not a general-purpose browser– WebView 這個控制項的目的，是讓你能在 App 裡，連結到
某特定的網頁，以達到此 App 所欲提供的功能；而非讓使用者能任意瀏覽任何網頁。
– 舉例來說，如果有些特定資訊可能會時常變動 ( 如即時路況等 ) ，與其重新上架你的 App ，將這資訊放在 WebView 當然比較適當；
– 但如果你的 App 只是純粹作為一個入口，僅是讓使用者透過 WebView 瀏覽到某個網站首頁，再讓使用者在網站中任意點選連結的話，是非常有可能在上架審查中被退件的。
中文提要: http://blogs.msdn.com/b/mengtsai/archive/2013/03/12/webview-10.aspx
Ten Things You Need to Know About WebView By Matt Small
3. WebView doesn’t do Flash. Or Silverlight. Or PDF. Or any other ActiveX control or plugin.
– 如第 1點， WebView 並非被設計成為一個完整的瀏覽器，也為了穩定性及效能的原因並不支援 Flash, Silverlight, PDF or ActiveX ，「目前」亦不支援某些 HTML5 的功能，如 AppCache, IndexedDB, programmatic access to the Clipboard, or geolocation.
中文提要: http://blogs.msdn.com/b/mengtsai/archive/2013/03/12/webview-10.aspx
Ten Things You Need to Know About WebView By Matt Small
4. How to invoke Javascript inside the displayed webpage of a Webview
– 簡單來說 WebView 可以透過 ms-appx-web 讀取並展示已包含在你的 App 專案中的 HTML 檔案，甚至執行其中的 JavaScript 副程式。
中文提要: http://blogs.msdn.com/b/mengtsai/archive/2013/03/12/webview-10.aspx
取得及處理 JSON 資料
以台北市政府公開資料平台為例
取得 JSON 資料
• 同時發現此 JSON 為一含多個物件 (objects) 之陣列 (arrays)"[{\"name\":\"?陽百貨事業股份有限公司松山運動中心分公司 \",\"certification_category\":\"游泳場所
業 \",\"tel\":\"66176789\",\"traffic_info\":null,\"display_addr\":\" 敦化北路 1 號 \",\"poi_addr\":\" 台北市敦化北路 1號 \",\"X\":\"121.55009632378471\",\"Y\":\"25.04896725734926\"},{\"name\":\"臺北市大同運動中心 游泳館 \",\"certification_category\":\"游泳場所業 \",\"tel\":\"25920055\",\"traffic_info\":null,\"display_addr\":\" 大龍街 51號 \",\"poi_addr\":\" 台北市大龍街 51 號 \",\"X\":\"121.5160557692793\",\"Y\":\"25.064827690815896\"},{\"name\":\"博嘉運動公園 \",\"certification_category\":\"游泳場所業 \",\"tel\":\"22395494\",\"traffic_info\":null,\"display_addr\":\" 木柵路 4 段 159巷 16 號\",\"poi_addr\":\" 台北市木柵路四段 159巷 16 號 \",\"X\":\"121.5755454950648\",\"Y\":\"25.001056913828617\"},{\"name\":\"洲美運動公園游泳館 \",\"certification_category\":\"游泳場所業 \",\"tel\":\"28340998\",\"traffic_info\":null,\"display_addr\":\" 洲美街271 號 \",\"poi_addr\":\" 台北市洲美街 271 號 \",\"X\":\"121.49910262885395\",\"Y\":\"25.108741884078757\"}
Parsing JSON – 使用 Windows.Data.Json
http://msdn.microsoft.com/zh-tw/library/windows/apps/xaml/hh770289.aspx
Windows Store Apps 之背景執行
背景音樂播放 (Playback)
Apps can play audio in the background Developers must specify background audio in the app manifest
Each audio stream is given a type (communication, media, game)
Only one audio stream type may play at a given time
MediaElement 之背景播放 + FilePicker
MediaElement 提供多種前景 or 背景，音樂 or 音效設定
背景上傳或下載
Use the BackgroundTransfer API to upload or download data over HTTP in the background
Initiate upload/download from the foreground and it can continue even though your app is suspended
Windows 8 開發平台
Windows Store Apps
HTMLJavaScrip
t
CC++
C#VB
Desktop Apps
Win32
.NET / SL
Internet Explore
r
Communication
& Data
Application Model
Devices & Printing
WinRT APIsGraphics &
Media
Syst
em
Serv
ices
JavaScript(Chakra)
CC++
C#VB
XAML HTML / CSSVie
wM
odel
Contr
olle
r
Windows Core OS ServicesCore
Windows Store application APIs
FundamentalsApplication
Services Threading/Timers Memory Management Authentication Cryptography Globalization
DevicesGeolocation Portable Sensors NFC
User Interface
SVG Tiles Input Accessibility Printing
HTML5/CSS XAML DirectX Controls Data Binding
Communications & Data
Memory Management XML Networking SMS
Notifications Streams
Contracts Local & Cloud Storage Web
MediaPlayback Capture PlayTo Visual Effects
活用 WinRT 元件
妥善利用 Windows 8 系統功能
小結• 「分享」 (Share Contract)• 「搜尋」 (Search Contract)• 右側工具列 (Charms Bar)• 如何儲存使用者個人設定 ? (Roaming 應用 )• 取得目前位置 (Geolocation)• 使用 WebView 的眉角• 取得及處理 JSON 資料• 其他 :
– 播放音樂或音效 (MediaElement)– 選取本地或需端檔案 (FilePicker)– 背景執行或下載 (Background Task/Transfer)– 動態磚 (Live Tile)– 銷定畫面資訊 (RTC Apps)
存取 user-specific 資料 ;可結合 Microsoft ID 跨裝置同步
注意 Manifest 宣告 , async/await 及例外處理非完整瀏覽器
Json.Net or Windows.Data.Json
宣告合適的 event handler, 再實作其事件處理方法
最困難的，不是 coding…
而是創意
再加上永遠可以更好的使用者經驗 (UX)
Reference
• MSDN Windows 8 開發總站 (sample code, 文件 , Apps 上架 , etc.):– http://dev.windows.com
• 部落格 ( 中文 , sample code, 上架眉角 , etc.) – http://blogs.msdn.com/mengtsai
APPENDIX
Windows Store Apps 現況• Windows 8 到底賣的好不好 ?• Windows Store 上有多少 Apps?• 有排名嗎 ? Distimo.com, MetroScan, MSN, etc.• Windows Store 上架秘訣 ?
Using Live Tiles to Appear Always Running
Use Live Tiles to Appear Running Provide value to users even when they are not using your app
Gives the user the sense that there is something going on with your app, and is an invitation to go back
Two mechanisms available to update tiles on the Start screen Local tile
updates Push
notification
RTC Apps
Lock Screen Apps
Apps that can run in the background
Designed for real-time communications apps (Mail, IM, VoIP)
Run code periodically Run code in response
to system events
