由 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-ill.png

WAT 實作

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

image

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

image

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

image

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

image

透過 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 功能如以下,未來能實現的功能還會不斷增加。

image

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

image

實際案例

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

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

image 

1 of 3 2 of 3 3 of 3

回饋及討論

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

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

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

WAT 的未來

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

image

由 Web 到 App 之路小結

image

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

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

 

延伸閱讀:

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

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

Comments (0)

Skip to main content