由 Web 到 App 之路 (三): 使用 WAT (Web App Template)

WAT (Web App Template) 是微軟所開發，專門設計將既有的網站轉成 App 的免費 Visual Studio 擴充元件，此前的文章已有簡介: WAT- 將既有網站快速轉為 Windows 8.1 App 或 Windows Phone App 的免費工具。上個月也剛推出了 Universal Apps v2.0 的版本 (http://wat.codeplex.com/)。

WAT 的目標定義明確，即是要讓企業能完全延用在既有網站上的投資、同時還能以直覺簡易的 config 方式讓 App 實作出平台功能 (如 Windows Live Tile、App Bar 等)、而且無需每次網站改版即需重新編譯。

WAT 實作

在 Visual Studio 2013 中開啟 Web App Template for Universal Apps- JavaScript 範本

可以看到此方案已預設包含 Windows 8.1 及 Windows Phone 8.1 的 Universal Apps 專案

要快速將 Web 轉為 App，需要 config 的地方只有一個，就是 Shared 中的 config.json 檔。

將其中的 homeURL 改為 Bill Gates 的網址 (http://www.gatesnotes.com/) 之後，同時以 Windows Phone 及 Windows 8.1 模擬器執行的畫面如下，可見到已符合 Responsive Web Design (RWD) 規範的網站轉為 App 之後，即能因應不同尺寸螢幕大小作適當的版面配置:

透過 config.json 客製化 App

所有 App 功能面的實作，全部是透過修改這個 config.json 檔來完成的，包含最重要的無網際網路時的離線 Offline 支援、給定 RSS Feed 即能達到 Live Tile 的效果、給定 Search URL 即實作出 Search Charm Bar、給定外部連結即可實作 App Bar 及 Navigation Bar 等等。

完整的說明文件可見: http://wat-docs.azurewebsites.net/JsonWindows

目前能透過 config 方式即能實現的 App 功能如以下，未來能實現的功能還會不斷增加。

除了功能面外，WAT 也提供了讓您修改 CSS 檔以改變 App 呈現時的版型 (但不影響原有網站的版型)

實際案例

有愈來愈多的國外網站在維護網站的同時、經由 WAT 建置 App 以因應行動化的需求，除了前文中介紹的 Low’s 及 Zoopla Property 之外，我們再以著名旅遊規劃網站 Expedia.com 為例。

以下可看到其網站及在 Windows Phone App 上各自的呈現:

1 of 3 2 of 3 3 of 3

回饋及討論

利用 WAT 將既有網站轉為 App 的過程可說是最簡單的，config 的方式易於操作、維護及偵錯門檻也低。

但最最重要的一點是，網站作了任何更新或變動，其 App 即能立即反應最新的內容；也就是企業本來即正常運行的網站維運流程幾乎不用作調整，在最大化既有投資的同時還能以 App 打開另一個市場。

當然，為了因應各種不同尺寸的行動裝置，亦強烈建議採行此方法的網站符合 Responsive Web Design (RWD) 的設計準則，以達到最好的使用者經驗。

WAT 的未來

微軟設計 WAT 的原始精神是將 Web Experience 作最佳化的運用，短期目標即是讓各客戶能延用在人力、技術及維護上的既有投資、同時能滿足市場行動化的需求；長遠而言微軟會在 Web Experience 上作更進一步的投資!

由 Web 到 App 之路小結

簡單來說，無論是否要走向 App 化，建議各網站可先行實作「釘選」的功能，畢竟簡單又容易測試。

往 App 發展之路，若跨平台是現階段的急迫性需求，可走 Apache Cordova 的方式，但其客製化及維運成本就相對高些；若無跨平台的急迫需求，建議可先走 WAT 的方式，對未來整體維運考量上應能達到最好的 ROI 成效。

延伸閱讀:

由 Web 到 App 之路 (一): 釘選網站 Pinned Site

由 Web 到 App 之路 (二): 使用 Apache Cordova (PhoneGap)

看看自己及周遭，App 世代早已經造成使用者習慣的改變:

當然也有統計數據告訴我們這件事實，例如：若觀察使用者每日花在 Web 及 App 上的時間，可以看到在2011年即已發生死亡交叉，而且差距只有逐年愈拉愈大。(2012年底的數據: Web : App = 70 mins: 127 mins)

http://gigaom.com/2012/12/05/us-spends-35-percent-more-time-using-apps-in-2012-while-web-usage-drops/

使用 Cordova (PhoneGap)

Apache Cordova (也就是市場上熟知的 PhoneGap 引擎) 已在今年 5 月即與 Visual Studio 整合了，可參見 Eric 的文章: 跨行動裝置 App 開發: 使用 Visual Studio 2013 + Apache Cordova (PhoneGap)。而在日前釋出 Visual Studio Update 3 RTM，也同時釋出了 Multi-Device Hybrid Apps CTP 2.0 的版本。

Cordova 與 Visual Studio 整合的意義就是，您可以在 Visual Studio 使用 HTML/JavaScript 技術來開發橫跨 Windows、iOS 及 Android 的 App；不僅如此，您既有的網站也能輕易透過 Cordova 產出跨平台的 App。

以下範例我選擇以 Bill Gate’s 的個人網站 http://www.gatesnotes.com (一個顯然我沒有 source code 的網站) 為例。

首先將完整網頁儲存至本機:

在 Visual Studio 中打開 Blank App (Apache Cordova)-JavaScript 範本

將剛存檔的 Bill Gates 網站檔案 (Home Bill Gates_com-.htm)及資料夾(Home Bill Gates_com-_files)拉入專案中

打開 index.xml 檔並將 Start Page 改為 “Home Bill Gates_com-.htm"

然後按 F5 執行，預設會以 Ripple Emulator 在 Google Chrome 瀏覽器中模擬於不同載具執行的情形。

由於此網站本身已符合 Responsive Web Design (RWD 響應式網頁設計)，各位可以在選擇以不同載具之後，看到 App 自動因應螢幕尺寸大小所作的改變。

選擇 iPhone 5:

選擇 Nexus 7 (Tablet):

Cordova 在市場存在已久，已有許多 platform-specific features 及 plugins 可使用，可以針對 Windows、iOS 或 Android 的平台作客製化

完整的Config、測試、上架等文件可見: http://msdn.microsoft.com/en-us/library/dn757051.aspx，也有活躍的論壇可供發問及討論: http://stackoverflow.com/questions/tagged/multi-device-hybrid-apps

回饋及討論

Cordova 的精神即在於一次製作出橫跨 Windows、iOS 及 Android 上的原生 App，無論您的網站是以何種技術開發 (ASP.NET, JSP, etc.)，透過 Cordova 整合的難度都被大幅降低。

考慮到維運成本，相較於外包或自組團隊從頭撰寫 App，使用 Cordova 的客製化及維運成本自然是較小的。但是，需要多作的事情還是至少有兩件，其一是將每次改版後的網站內容整合拉進 Cordova 後進行測試、其二是針對各平台的客製化(例如 Windows 平台的 Live Tile等)。

當然為了因應各種不同尺寸的行動裝置，強烈建議採行此方法的網站符合 Responsive Web Design (RWD) 的設計準則，以達到最好的使用者經驗。

延伸閱讀:

由 Web 到 App 之路 (一): 釘選網站 Pinned Site

由 Web 到 App 之路 (三): 使用 WAT (Web App Template)

由 Web 到 App 之路 (一): 釘選網站 Pinned Site

現況:

– 我已有一個運作良好的網站

挑戰:

– 如何因應現今行動裝置大普及，以及方興未艾的 App 需求?

以上是現在絕大部份的企業所面臨的難題：決策者在延用既有的投資(如：網站維護人力及技術)的同時，又要因應來自市場上行動化趨勢所帶來的改變。面對以上的難題，有哪些作法可以供決策者作參考? 從 Web 到 App 之路有哪些選擇呢?

首先我們來看一個典型的網站維運架構: 如下圖，開發團隊使用設計工具(如: Sublime) 編修網頁 (Application UI)、使用習慣的程式碼控制工具 (如: GitHub)、並使用熟悉的開發框架 (如: Node.js)及網站伺服器 (如: Azure Web sites)來作日常網站的維護及修改。

釘選網站 Pinned Site

既有的網站要因應現實中的行動化趨勢，最簡單的作法就是提供使用者「釘選」的功能了。

以 iOS 而言，要加入如以下的程式碼:

<link href="touch-icon-iphone.png" rel="apple-touch-icon">

<link href="img/touch-icon-ipad.png" rel="apple-touch-icon" sizes="76×76">

<link href="img/touch-icon-iphone-retina.png" rel="apple-touch-icon" sizes="120×120">

<link href="img/touch-icon-ipad-retina.png" rel="apple-touch-icon" sizes="152×152">

而針對 Windows 平台，也是插入類似的程式碼，不過您可以利用以下的網站直接幫您產出，還能同時達到動態磚 (Live Tile) 的效果:

http://www.buildmypinnedsite.com/

簡單的三步驟，即可產出程式碼供您使用:

步驟1: 設定 Tile 的文字、背景顏色及圖片

步驟2: 設定 Live Tile (RSS Feed)

步驟3: 程式碼就自動產生了．同時也提供連同圖片一起打包好的 package 讓您一次上傳至網站根目錄。

回饋及討論

「釘選網站」最大的優勢就是簡單，同時又不會影響到開發團隊維運既有網站的方式。

但由於執行起來還是傳統的網頁，當然無法善用裝置端的特性(如所在位置、照相功能等)，也無法處理無網路時的離線情境，因此我們發現不論是在 iOS 或 Windows 平台，無論是被「釘選」的網站數量或是會使用「釘選」網站的使用者人數都是不多的。

延伸閱讀:

由 Web 到 App 之路 (二): 使用 Apache Cordova (PhoneGap)

由 Web 到 App 之路 (三): 使用 WAT (Web App Template)

UnityVS (Visual Studio Tools for Unity) 免費下載

目前許多的 Unity 開發者是採用內建的 MonoDevelop 來編寫程式，但其實有很多開發者比較習慣用 Visual Studio 來當作編輯環境，UnityVS 即由此而生，透過 UnityVS 你就可以用 Visual Studio 來當作Unity的編譯環境。

微軟於 2014/07 宣布收購 SyntaxTree，也就是開發 UnityVS 的公司的同時，亦宣佈將進一步優化後讓開發者免費下載，並更名為 Visual Studio Tools for Unity。目前的版本為 v1.9，重要的更新如以下:

Faster debugger. Attaching and detaching the debugger as well as expanding local variables is now faster.
Faster startup. Opening VSTU projects is now faster.
Better handling of C# constructs. The local variables window is now properly populated when debugging iterators or when variables are accessed inside closures.
Start your game and your debugging session in one click. This feature is one of our most-requested: you can now attach the debugger and start the game by simply changing the debug target. This is only available in Visual Studio 2012 and 2013.

目前提供三種不同版本的 Visual Studio add-ons 讓開發者免費下載:

進一步說明請見: http://blogs.msdn.com/b/visualstudio/archive/2014/07/29/visual-studio-tools-for-unity-1-9.aspx

【推薦序】Windows 8．x App市集應用程式開發－使用C#/章立民

作者：章立民

出版社：碁峰

出版日期：2014/05/09

博客來: http://www.books.com.tw/products/0010634550

2014年四月初，就在我正要啟程前往美國舊金山，參加微軟一年一度的開發者大會BUILD之前，欣聞章立民老師(我們私下敬稱為「章公」)即將發表這本新書，時機正巧，同時也別具意義。

這次的BUILD大會中不但宣佈了微軟將擁抱各類型裝置的決定，同時更朝Open Source及Cross-Platform (跨平台)的方向邁進一大步。而針對 Windows Apps 的開發者而言，有幾點特別值得介紹:

1. 對台灣開發者最有感的，大概是取消了註冊 Windows Store 開發者中心時的「信用卡」驗證吧。不但馬上嘉惠了全台9成以上沒有信用卡的學生族群，也簡化了註冊流程，讓開發者能更容易將App上架，同時也增加了以 PayPal 付款的機制。

2. 付費App多了兩種價格可以設定: $0.99 (NT$30) 及 $1.29(NT$40)。這項改變是來自於在 Windows Phone 市場上的學習—這兩種價格即涵蓋了一半以上 (55%) 的付費交易量。

3. 而最重要的，應該是微軟在 WinRT (Windows Runtime) 上的持續投資及未來方向。BUILD上宣佈了 Universal Apps 這個新模版，開發者將可以一次開發出 Windows Phone 及 Windows Store App；而這背後的意義，即在於WinRT 亦成為開發Windows Phone App的核心機制了；不僅如此，WinRT 也將成為未來不同裝置，如 Xbox One Apps等的重要基礎。

目前在台灣 Windows 市集中有許多廣為人知、下載量名列前茅的 App 皆出自章老師的直接參與。章老師以其豐富的教學經驗及諸多專案的實務經驗，在本書中由淺入深，以實例帶領開發者學習各項 Windows Store 開發及 WinRT 知識，而本人尤其喜愛第七章資料繫結、第十三章使用Azure服務及第十五章JSON的整合運用，期待各位在學習基礎知識之後能發揮創意，將您的 App 拓展到世界各地!

延伸閱讀: //BUILD/ 開發者大會- Windows Apps 課程 10 大重點

微軟 Hackathon 熱血黑客松又來了啊! //publish/

歡迎跟我們一起參加由微軟所舉辦的 //publish/ 活動。在這個充滿開發趣味的免費跨夜活動中，您可以帶著您的 app 或遊戲專案與世界上其它地方的開發人員一起撰寫程式！活動中，您除了可以找其它夥伴一起合作完成，也可與現場的技術專家討論 app 的設計、如何提升品質、或是任何關於移植專案的想法 (如: Unity 專案)，讓你們能在這密集的 32 小時活動中，順利將你的作品移植到 Windows Phone、平板或是 PC 平台上！

活動現場有來自微軟以及社群中的專家，他們將能協助參加者解決開發 app 上的一切困難。在您完成專案後，現場也提供測試環境、測試機器等，讓您確保您的 app 有最好的品質，向全世界展現您自豪的作品！

這個活動提供了 Surface及Windows Phone來獎勵現場展示的優秀作品，也會獎勵活動後完成 app 上架的作品。更重要的是 – 若您的作品是在 2014 年 6 月 1 日前完成上架的 Windows 市集應用程式（包含 Windows Phone 應用程式），將可以角逐更大的獎項!

Register Now!

請上 //publish/ Developer Contest 網站瞭解更多訊息！

Taipei, Taiwan
Overnight Event: May 16 – 17

華山1914文化創意產業園區

台北市八德路一段1號

Taipei,

100

Taiwan

第一天
10:00 AM – 11:-00 AM	報到及開場
11:00 AM – 12:-30 PM	專心寫程式與專家交流
12:30 PM – 1:30 PM	午餐/Webcast
1:30 PM – 6:00 PM	專心寫程式與專家交流
6:00 PM – 7:00 PM	晚餐/Webcast
7:00 PM – 11:00 PM	專心寫程式與專家交流
11:00 PM – 12:00 AM	宵夜
第二天
12:00 AM – 9:00 AM	熬夜寫程式與專家交流
9:00 AM – 10:00 AM	早餐/Webcast
10:00 AM – 1:00 PM	專心寫程式與專家交流
1:00 PM- 2:00 PM	午餐/Webcast
2:00 PM – 5:00 PM	專心寫程式與專家交流
5:00 PM – 6:00 PM	App 展示/評分及頒獎

Register Now!

您可至 http://dev.windows.com/ 或 http://dev.windowsphone.com/ 取得開發工具。

更多訊息: 從 //build/ -> //learn/ 到 //publish/

報名若有任何問題，請聯絡 dpetwaa@microsoft.com

//BUILD/ 開發者大會- Windows Apps 課程 10 大重點

微軟在此三天的研討會中密集進行了近 200 堂的課程，以下整理出 10 個 Windows Apps (Windows Store App 或 Windows Phone App) 相關課程的重點資訊給各位參考:

1. 取消了註冊 Windows Store 開發者中心時的「信用卡」驗證!

也就是全台9成以上沒有信用卡的學生族群，不但能透過 DreamSpark 取得一年免費上架的帳號，現在起無需信用卡即能建立自己的市集帳號，並上傳自己的 App 。同時也增加了以 PayPal 付款的機制。

2. 付費 Windows Store App 多了兩種價格(包含IAP)可以設定: $0.99 (NT$30) 及 $1.29(NT$40)

這項改變是來自於在 Windows Phone 市場上的學習–這兩種價格即涵蓋了7成的付費交易量! 同時，Windows Phone App 也新增了 $500 以上的價格可供選擇。

3. 開發者即將能夠直接回應使用者的回應了! (要等 Dev Center 更新)

(以上 1.~3. 點來源: Maximizing Revenue for Phone, Tablet and PC Apps in the Windows Store)

4. 上架審核時間大幅縮短! Windows Phone App 由原本的 2~5天縮短至只要數個小時

這點有許多台灣的開發者已體驗到了，甚至有在一天之內完成 App 上架並完成多次 update 的經驗；至於 Windows Store App 的審核時間也即將有相同的加速。

5. Universal Apps 的宣佈是本次 BUILD 的重點之一，這個 Visual Studio 2013 的新模板讓開發者能一次開發出 Windows Store 及 Windows Phone 的 App

除了是因為 Windows Phone 底層開發架構 (Application Model) 轉為與 Windows Store App 一致 (使用 WinRT- Windows RunTime)，以及開發工具的支援之外，在二個市集也作了以下整合:

可指定一個橫跨 Windows Store 及 Windows Phone 市集的 App 名稱
付費 App 只需購買一次 (Buy once, get on both Stores)
統一的應用程式內購買 (適用於 ‘durables’)
資料漫遊 (適用 8.1 Apps)
單一的通知機制，使用WNS (適用 8.1 Apps)

6. 針對 Windows Phone App 而言，由於使用者可能使用 7.X/8.0/8.1 的作業系統，將會有單一 App擁有多個 packages 的情形:

所有既有的 7.1/8.0 的 Apps 可相容於 WP8.1 的機器
針對既有的 7.1/8.0 的 Apps，開發者可新增一個 8.1 的 package
使用者升級至 8.1 時即可取得此新增的 8.1 package 更新
開發者可各別更新不同版本的 packages

(以上4.~6.來源: Windows Phone and Windows: Dev Center and App Submission Deep Dive)

7. 使用者是如何使用您的 App 的? 利用 Application Insights 可進行深入了解

自己實測了一下，通過 Visual Studio Online 的免費服務，設定上很簡單，約5~10分鐘後就能看到報表了。如:

每天的活躍使用者數: (也許 Apps 下載量很高但沒人在用?)

回鍋使用者 vs. 全新使用者比例: (可搭配上圖來分析，發現 App 使用者的黏著度)

(以上第 7. 點來源: Make Data-Driven, High-Impact Improvements to an Application with Application Insights)

8. 「Windows Store App 如何和桌面應用程式溝通?」「可以在 Windows Store App 裡呼叫以前寫的程式嗎?」

在 Windows 8.1 或之前的版本，第一個問題的解答是: 通過 Contract 分享，或是透過”剪貼簿”的方式，但兩者都是透過間接方式來作溝通；而第二個問題的解答就是：「很難，大部份要重寫…><」

Windows 8.1 Update 1推出之後這兩個問題都有較好的解答，首先是針對 side-loaded (側載) 的 Windows Store Apps，將能透過 Network Loopback 的方式「直接」與其他應用程式溝通；同時，已可以透過 Brokered Windows Runtime Components (類似 proxy/stub)，讓 Windows Store App 可以呼叫以前的程式。

以下是 Network Loopback 及 Brokered WinRT 兩種方式的比較:

(以上第 8. 點來源: Respecting Your Investments: How to Leverage Your Existing Code In a New Windows Runtime LOB App)

9. 到底是 Web 好還是 App 好?

Strategies for Developing Cross-Device Applications with Visual Studio 2013 這堂課作了非常好的討論，並給予了開發者一些準則及實務作法:

首先提到開發者們都在尋找一個同時能最佳化使用者經驗 (UX)、又能減少開發難度的「聖杯」(Holy Grail)

如果客戶已經有 Web Applications 了，如何因應不同種類的裝置提昇使用者經驗? 四種方式:

如果要在各平台使用不同的語言、不同的工具開發 Native App 以達到滿意的使用者經驗，客戶能負擔開發及維護成本嗎?

可以使用一種工具 (Visual Studio + Xamarin)，使用一種程式語言 (C#)，就是「聖杯」了!

10. Xbox One 的 OS 架構中，請注意你可以找到三個 OS:

底層的 OS 是類似 Hyper-V 的 hosting OS，其上左邊的 OS core 即為 Windows 8.1，處理 Xbox One 的選擇介面，提供如 Streaming, Storage 等系統服務之外，當然也可以跑 Apps! 右邊的即是用來跑遊戲用的 OS (講師的話中提到 Windows 9…)。

各位可以在 https://channel9.msdn.com/Events/Build/2014 觀看或下載所有的課程錄影及投影片，內容包含 Windows 8.1, Windows Phone 8.1, Xbox One, ASP.NET, .NET/C# 的未來等。

針對 Windows Phone 8.1 的重點整理可見我同事 Herman Wu 的分享: http://blogs.msdn.com/b/hermanwu/archive/2014/04/07/build-2014-windows-phone-8-1-session.aspx

至於 BUILD 的 Keynote 精華，則可見我另一同事上官神人的整理:

//Build/ 2014 第一天 Keynote 重點整理 (上)

//Build/ 2014 第一天 Keynote 重點整理 (下)

//Build/ 2014 第二天 Keynote 重點整理 (上)

//Build/ 2014 第二天 Keynote 重點整理 (下)

微軟年度開發者大會 //BUILD/ April 2-4

BUILD 是微軟承繼 PDC (Professional Developer Conference)以來在每年舉辦的全球開發者大會，第一手揭露 Windows, Windows Phone, Azure, Visual Studio, XBox, Kienct 等最新技術課程之外，大會進行中的每一天 Keynote 都會宣佈微軟技術最新消息，您可以在 http://www.buildwindows.com 或 https://channel9.msdn.com 線上即時收看。

若您想和大家一起線上收看第一天的 Keynote，歡迎來台灣微軟參加//BUILD/ 2014 台北午夜趴!

請報名: http://1drv.ms/1dAqG4t

免費電子書下載: 「Location Intelligence for Windows Store apps」

Table of Contents

· Chapter 1: Getting Started

· Chapter 2: The Sensor and Location Platform

· Chapter 3: Bing Maps JavaScript API

· Chapter 4: Bing Maps Native API

· Chapter 5: Bing Maps REST Services

· Chapter 6: Bing Spatial Data Services

· Chapter 7: Working with Spatial Data

· Chapter 8: Drawing on the Map

· Chapter 9: Creating an Augmented Reality App

· Chapter 10: Creating a Templatable Compass Control

· Chapter 11: Cross Platform Development

下載點: http://rbrundritt.files.wordpress.com/2014/02/location_intelligence_for_windows_store_apps.pdf

本書範例程式碼: http://code.msdn.microsoft.com/Location-Intelligence-for-1c691d0e

Unity X Windows 實作營成果

2014 年首次，由資策會、奇銳科技及台灣微軟共同舉辦的 Unity X Windows 實作營已於 2月22日 (六) 順利完成，總計有 13 個團隊帶著他們的 Unity 專案前來參加，其中 9 成以上都是已上架至 iOS 或 Android 平台的 Apps。

當天奇銳科技技術主任 Angus Ko 的簡報:

我的簡報:

實作營當天的環境為 Unity 4.3.4 Pro + Windows 8.1 + Visual Studio 2013 Ultimate，移轉的結果如以下:

未能當場移轉成功的4組中: 全是因為於 Unity Editor 中 Build 之後出現 “Missing namespaces/classes/methods” 的錯誤訊息。這類錯誤在不更動既有程式下的最佳解決方法描述在: [Unity Game to Windows Store] Compile error- missing namespaces/classes 文章中；然而，例如 “Timer”, “Encoding” 等 classes 因為尚未實作在 MyPlugin.dll，故無法移植成功；有2組表示會回去作相對應的修改以相容於 Windows 平台。

另外，有3組團隊提到 Facebook plugin 尚未支援 Windows Apps，這部份還待 plugin 廠商下一個版本的支援。

現場展示

當天最吸引我的 App，是個解謎遊戲，故事完整且背景音樂太好聽了，當天雖然是展示 Windows Phone 8 版本，但之前即已成功移轉為 Windows Store App，期待它的上架!