我愛微笑單車 Windows Phone App 開發心得分享

I Love YouBike

最近一方面為了自用,另一方面為了實驗新的 Windows Phone Store 的開發後台,所以做了一個「我愛微笑單車」(英文版: I Love YouBike) 的 Windows Phone app,同時支援 WP7 及 WP8,雖然還有很多功能沒做完,不過應該可以把我完成這個 App 的心得分享給大家。

同時支援 WP7/WP8 的問題

若您在 Windows Phone 7 時期就已經開發過 Windows Phone app,那不論是否有更新 app 或是特別對 WP8 做新的版本,WP8 的使用者還是能夠在市集裡找到你的應用程式,並且安裝來使用都不會有什麼問題,而且 WP7 的 app 即使不做任何的調整,由於 WP8 機器效能不錯,執行這些 WP7 app 甚至感覺變快了不少,硬要說有什麼美中不足的地方 (先撇開不能用 WP8 的新功能),那就是解析度的小問題了。

在 WP7 時代,所有的 Windows Phone 手機的螢幕解析度都是 WVGA (800x480),不過到了 WP8 之後,系統除了 WVGA 之外還支援了 WXGA (1280x768) 以及 720p (1280x720),如果你數學不錯的話,應該可以很快看得出來 WVGA/WXGA 都是 15:9 的螢幕比例,而 720p 則是 16:9,這會造成什麼現象呢?當 720p 的 WP8 (如: hTC 8x) 使用者在執行 WP7 app 時,因為畫面會被鎖在 15:9 的比例,所以會在 720p 的 WP8 螢幕上方留一塊黑邊,不過不影響 app 的操作。而 WXGA/WVGA 的手機就不會有這個黑邊的問題,不過雖然 WXGA/WVGA 都是 15:9,但像素還是有差,所以真的要做好全面的解析度問題,可以好好讀官方教學文件的這一篇文章:「Multi-resolution apps for Windows Phone 8」。

還好目前 Windows Phone Store 的開發後台支援一個很重要的功能: 「你可以在同一個 app 下上傳不同 WP 版本的封裝檔 (.xap),Windows Phone Store 會根據使用者的手機而給他合適的版本」 ,所以我的微笑單車 app 就做了兩個版本,一個給 WP7 的使用者使用,另一個則是給 WP8 的使用者,我可以在開發後台裡各別為兩個不同的 xap 設定 app 的說明、截圖等等。

Dashbaord
在同一個 app 裡上傳不同系統使用的 app 封裝檔

這麼做最大的好處就是可以在 WP8 上用新的 API 處理一些操作 (或是用新功能,如: NFC),但又不必特別煩惱為了向下相容而不敢用新 API/controls (比方說在 WP8 的 Panorama 控制項變成系統內建,而不是套件掛上來的,效能更好等等) 的問題。

好用的 async/await

Windows Phone 8 的 WinPRT Lib. (Windows Phone Runtime Library) 跟 Windows 8 的 WinRT 很類似,除了用 C++ 來實作有很好的效能之外,在程式的語法上也支援了 .NET 4.5 中的 async/await 撰寫方式,所以像是抓取使用者地理位置的程式碼,過去在 Windows Phone 7 時要這樣寫:

,而到了 WP8 僅須這樣:

是不是簡單很多呢?

至於最常用的 HTTP Request,不知道為什麼在 Windows Phone 8 還是必須用 callback function 的寫法,於是我自製了一個 function 讓 HTTP Request (GET) 這件事也可以用 async/await 的方式來完成:

,如此一來我就可以 var result = await LoadSomething(1234); 來做完 HTTP Request 了!

Bing Map 還是 Nokia Here Map?

WP8 app 中若要使用地圖的功能,Bing Maps 控制項已經會自動根據應用程式的執行環境的語系來顯示該語系的圖資,對於開發台灣在地應用的開發人員來說真是省下不少麻煩,只要按照官方教學文件中「Maps and navigation for Windows Phone 8」的指示,就可以輕易完成地圖顯示的功能。不過若是在 WP7 的 app 中,Bing Maps 控制項還只能讀取到英文版本的 Bing Maps 圖資 (雖然現在 Bing Maps 早就有了中文版的圖資),這時候可以參考網路上許多前輩的作法:還是用 Bing Maps 控制項,但是把圖資的來源換成別的供應商。這裡你可以選擇換成 Google Maps 或是 Nokia Here Maps 的圖資,由於網路上有些文章的範例程式碼還在用 ovi maps,我花了點時間換成比較新的 here maps,一樣具有中文的圖資,這點倒是不必擔心。以下是比較簡單的步驟:

  1. 首先到 here developers 註冊你的應用程式,這樣才會取得讀取 maps 的 application id 以及 secret token。

  2. 在專案中新增一個 Class,這裡提供我的程式碼供參考:

    ,因為我的 app 有做兩個語系的版本,所以我必須要在英文語系時顯示英文的圖資,而正體中文語系時顯示正體中文的圖資,於是在 constructor 時判斷該帶哪個參數讀取 tile 。

  3. 在使用 Bing Maps 的 XAML 檔時,加上這樣的語法:

    ,其中使用的 NokiaMapsRoadTileSource 的部份可以視你需要的圖資形態來更換

大功告成後,即使是 WP7 的 Bing Maps 控制項還是可以顯示 Nokia Here Maps 的圖資囉。

幾個被退件過的經驗

其實我在做這個 app 時也不是一次就上架成功,目前審核到結果出來差不多是四天 (包括週六週日),我也不吝將我幾次被退件的原因跟大家分享:

  • 使用 Bing Maps 控制項會因為 China 還不支援 Bing Maps (我還不知道為什麼),若 app 發佈至 China 的話就會被退件。

  • 如果做了多語系的 app,那不只是 UI 要根據語系做變化之外,地圖的圖資也算是 UI 的一部份,因為我在 WP7 中雖然用了 Bing Maps 控制項,但圖資是手動換成 Nokia Here Maps 的,第一次送審時沒有判斷使用者是用英文還是正體中文的環境執行,都會顯示中文的圖資,即使我在說明裡加入會顯示中文,但圖資顯示是被審查員判斷為 UI 而不是內容。後來我加入判斷後才通過

  • 因為用到了 Location API 來抓使用者的位置,除了在第一次進入應用程式要顯示隱私聲明 (就是說我不會拿你的位置去做壞事之類的,另外也要做一個設定讓使用者可以自己決定要不要被你的程式 track 位置) 之外,也要在 app 裡做一頁來顯示,審查員說應該要讓使用者永遠都看得到隱私聲明,而不是只有在第一次顯示。

結論

WP8 好多新的 API (.net 4.5) 而且又有 WinPRT Lib. (Windows Phone Runtime Library)、C++ 的支援,快用這些新的 APIs 來寫東西吧!若要支援 WP7 的手機,那就另外開一個 7.1 的專案來開發就可以了