Dev camps Windows Store App 市集應用程式最佳實踐

Windows市集應用程式最佳實踐

蔡孟儒 (Raymond)
技術推廣協理
台灣微軟
http://blogs.msdn.com/mengtsai

主題
• 「分享」(Share Contract)
• 「搜尋」(Search Contract) 妥善利用 Windows 8
• 右側工具列 (Charms Bar) 系統功能
• 如何儲存使用者個人設定? (Roaming 應用)
• 取得目前位置 (Geolocation)
• 使用 WebView 的眉角
• 取得及處理 JSON 資料
• 其他:
– 播放音樂或音效 (MediaElement) 活用 WinRT 元件
– 選取本地或需端檔案 (FilePicker)
– 背景執行或下載 (Background Task/Transfer)
– 動態磚 (Live Tile)
– 銷定畫面資訊 (RTC Apps)

Windows Store App 可以「分享」出
去的內容格式包括以下七種:
• 純文字 (Plain Text)
• 格式化文字
• 統一資源識別元 (URI)
• HTML
• 點陣圖 (Bitmap)
• 檔案
• 開發人員定義的資料

你可以任意組合以上的幾種內容來作分享，比如你想分享一段
純文字加上一個URI連結、或是想分享一張圖片；那麼可以接
受這個組合的 Targeted Apps 就會出現在右方，讓使用者作選
擇。

只需要處理一個事件 + 設定一個物件…

• DataTransferManager.DataR
equested 事件

• DataPackage 物件
– 許多的 Set 方法!

實作 Share Contract
• 在你想要提供分享功能的某個頁面(.xaml)，其中的LoadState()方法，
加入OnDataRequested 事件 event handler:

• 再實作這個 OnDataRequested() 方法- 把資料塞進DataPackaget 物件

Search Contract 實作 (一)
• 在專案中新增一個「搜尋合約」的新項目，預設會產生一個新頁面
(SearchResultsPage1.xaml)，拉入你想呈現的UI控制項:

Search Contract 實作 (一)
• 實作新頁面Filter_SelectionChanged() 方法:

Search Contract 實作 (二)
• 更常見的搜尋，是讓使用者能直接搜尋此 App 的內容
(context)
1. 在欲提供搜尋功能的頁面中加入QuerySubmitted() event hander
2. 再實作此 QuerySubmitted() 方法即可

Search Contract 實作 (二)
• 以 Blog Reader App 為例，我想在二個不同的頁面實作搜尋:

最常見的退件原因- 隱私權宣告
• 4.1.1 如果您的應用程式具備網路通訊功能，則必須包含隱私權聲明
– 簡單來說，只要您的App內有宣告使用網際網路(Internet)、網路攝影機
(WebCam)或個人文件庫(Documents Library)，就必預提供隱私權聲明
– 而您若是以Visual Studio 2012的範本來開發的話，請注意使用網際網路的
宣告預設是打開的喔!

實作: 在Charms Bar 「設定」中加入
隱私權條款的連結
• 在App.xaml.cs 中加入SettingsPane.OnCommandsRequested() event
handler，並實作此方法即可

var localSettings =
Windows.Storage.ApplicationData.Current.LocalSettings;
localSettings.Values["currentPage"] = MyBook.CurrentPage;

var roamingSettings =
Windows.Storage.ApplicationData.Current.RoamingSettings;
roamingSettings.Values["currentPage"] = MyBook.CurrentPage;

如何取得所在位置經緯度?
• 只需要 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服務或未開啟的情
形
• 否則會被退件…

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

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.


By Matt Small

4. How to invoke Javascript inside the displayed webpage of a
Webview
– 簡單來說 WebView 可以透過 ms-appx-web 讀取並展示已包含在你
的 App 專案中的 HTML 檔案，甚至執行其中的 JavaScript 副程式。


以台北市政府公開資料平台為例

取得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號

Parsing JSON
– 使用Windows.Data.Json

http://msdn.microsoft.com/zh-
tw/library/windows/apps/xaml/hh770289.aspx

http://json2csharp.com
- 將JSON obejcts 轉為C# objects 的小工具

小結宣告合適的event handler, 再實作
其事件處理方法

存取 user-specific 資料;
• 「分享」(Share Contract) 可結合Microsoft ID 跨裝置同步
• 「搜尋」(Search Contract) 妥善利用 Windows 8
• 右側工具列 (Charms Bar) 系統功能
• 如何儲存使用者個人設定? (Roaming 應用)
• 取得目前位置 (Geolocation) 注意 Manifest 宣告, async/await 及例外處理
• 使用 WebView 的眉角
非完整瀏覽器
• 取得及處理 JSON 資料
• 其他: Json.Net or
– 播放音樂或音效 (MediaElement) Windows.Data.Json 活用 WinRT 元件
– 選取本地或需端檔案 (FilePicker)
– 背景執行或下載 (Background Task/Transfer)
– 動態磚 (Live Tile)
– 銷定畫面資訊 (RTC Apps)

而是創意

再加上永遠可以更好的使用者經驗 (UX)

Reference
• MSDN Windows 8 開發總站 (sample code, 文
件, Apps 上架, etc.):
– http://dev.windows.com
• 部落格 (中文, sample code, 上架眉角, etc.)
– http://blogs.msdn.com/mengtsai

Windows Store Apps 現況
• Windows 8 到底賣的好不好?
• Windows Store 上有多少 Apps?
• 有排名嗎? Distimo.com, MetroScan, MSN, etc.
• Windows Store 上架秘訣?

Dev camps Windows Store App 市集應用程式最佳實踐

More Related Content

Viewers also liked (8)

Similar to Dev camps Windows Store App 市集應用程式最佳實踐 (20)

More from Meng-Ru (Raymond) Tsai (20)

Dev camps Windows Store App 市集應用程式最佳實踐

Editor's Notes