由 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)來作日常網站的維護及修改。