WAT- 將既有網站快速轉為 Windows 8.1 App 或 Windows Phone App 的免費工具

詳細說明請見: http://blogs.msdn.com/b/johnshews_blog/archive/2014/01/28/websites-to-apps-the-web-app-template-simplifies-windows-app-development.aspx

這個工具 (Web App Template- WAT) 為微軟 RD 所開發,目的是要善用現有網站上的豐富資訊,同時提供簡單的 config 方式快速實作如: Live Tiles, Notifications by Azure, App Bar, Search 等 Windows App 上的獨有功能。

WAT-ill.png

個人認為 WAT 與 App Studio (for WP App)及 Project Sienna (for W8) 類似,不但能成為非程式開發者及網頁開發人員建制 Windows Apps 的入口,同時也能讓程式開發人員快速實作雛型 (prototyping) App。

這工具是 Visaul Studio 2013 的 擴充功能 (extension),可免費在codeplex (http://wat.codeplex.com/)下載。

安裝完成後,在 Visual Studio 2013 中「新增專案->範本 (Template) –> JavaScript」, 即可發現多了一個 “Web-App-Template” 的範本。

image

以此範本建立一個專案後,只要更動 config.json 檔案中的幾項設定,就能很快將您的網頁轉為 App 了。 (config.json 檔修改攻略: http://wat-docs.azurewebsites.net/Json)

開始實作吧!

以下以 Bill Gates 的網站為例,其網址為: http://www.thegatesnotes.com/,我們打開 config.json 檔並將 homeURL 改成此網址:

image

之後直接執行就可以了! (XD 會不會太簡單…)

image

當然,你可以開始進行進一步的整合跟修改,例如:

1. 整合網站的搜尋功能: 我們發現此網站的 Search URL 為 http://www.thegatesnotes.com/Search?search=,那就直接在 config.json 中修改 SearchURL 參數即可:

image

2. 實作 App 的 Navigation Bar: 我們以該網站下方的 Books, Education 及 Energy 等連結為例,在 config.json 檔案中的 navBar 區塊中作設定即可,如以下:

image

以下是執行後 Navigation Bar 滑出後的畫面:

image

3. 實作 Live Tiles 及 Notifications: 在 config.Jason 檔中修改 feed URL, secret 等參數:

image

4. 修改 CSS 檔以改變在 App 中的版型: 可修改 injected-styles.css, wrapper-styles.css 等檔案以套用你喜歡的版型。

image

以上僅是些許範例。所有的實作方法及說明文件請見: http://wat-docs.azurewebsites.net/

以 WAT 工具為出發點,對熟悉 HTML5/JavsScript 的開發者將其進一步修改為更有品質的 App 會是較簡單的。如以下兩個以 WAT 為啟始點所製作出來的 Apps 皆取得很高的下載數及評分!

英國的房屋買賣租賃 App: Zoopla Property

image

美國的居家工具零售商: Low’s

image 

Project Siena: 非開發者也能打造 Windows 8.1 App

[本文完全不涉及程式開發,請慎入]
微軟最近上架了一個 “Project Siena” 的 Windows Store App,讓沒有開發經驗的人也能快速發揮自己的創意,透過類似操作 PowerPoint 或 Excel 的方式,輕鬆打造出一個 Windows 8.1 App。有點類似之前針對 Windows Phone App 之 AppStudio 的做法,提供了更簡易入門的 App 製作方式。讓使用者能更專注於創意及內容的展現,開發出專屬自己、並且能支援平板觸控使用的 Windows Store App。
微軟官方表示 Project Siena 的目的,即是要讓製作 App 像編輯文件一樣容易,僅需透過簡單地操作、連上合適的資料內容,即可輕鬆完成。支援的內容格式上,包含了 SharePoint 表單、Excel、Azure Mobile Services 表格、RSS 及 RESTful 服務等。
製作完成後,不但可將 App 直接安裝至本機或其他機器,同時會產生出一個完整的 Html/JavsScript專案,也就是能夠進一步以 Visual Studio 2013 進行程式修改,就如同編修其他 Windows Store App 專案一樣,在編譯後上架 Windows Store。簡易的操作加上彈性的應用方式,即便是一般的開發者應該也可以考慮將其善加利用,比如在進入程式開發前的設計階段,Siena 即可視為一個好用的雛型(prototyping) 及 UX 規劃的設計工具
Project Siena 目前釋出的雖是 Beta 版本,但個人把玩的經驗,在穩定性、內容連結、使用者經驗上都已達到相當高的水平。可期待的是未來在: 動態組成 RESTful service URI (如查詢某產品資訊)、支援 HTTP Post (如更新購物車內的項目) 等功能上會有更多的加強。
– Siena 下載: https://aka.ms/GetProjectSiena
官網: http://www.microsoft.com/en-us/projectsiena/default.aspx (建議點入 “Help Topics” 直接進入教學;另還提供 Sample Apps 供參考)