Microsoft //Publish 2014 Hackathon 駭客松

今年微軟終於推出了 Universal App,讓 Windows 8.1 和 Windows Phone 8.1 可以直接以同一個專案開發,也終於可以在 Windows Phone 上面透過 JavaScript 寫 App,由於之前已經用 JavaScript 寫過 Windows 8 App,要轉到 Windows Phone 的入門門檻也相對小很多。

這次會去參加主要是公司想組隊去玩一玩,原本有另外三個同事要一起來,但有兩個人最近有點忙,只有另一個比較有空可以參加,也剛好他在公司主要負責網頁前端,透過 HTML/CSS 加上 jQuery 直接幫忙 UI 的部分,完全無負擔,而我主要寫後端。

活動共兩天,最後的評選分四組:

  • Best Windows 8.1 App
  • Best Windows Phone 8.1 App
  • Best Cross-Platform (Windows and Windows Phone) App
  • Best Innovation & Design

第一天中午才決定好要做什麼題目,目標也直接朝 Universal App 設計,因此一開始討論 UI 時就同時考慮 Desktop/Tablet 及 Phone 的設計,也直接拿內建的 Hub/Pivot App (Universal Apps) 樣板來用,這個樣板已經同時根據 Desktop/Tablet 及 Phone 的操作方式最佳化,照著架構設計 UI,出來的成果也可以和 Windows Store App 所要求的一致。

以 Visual Studio 2013 Update 2 的內建樣板建立 Universal App 後,會在一個 Solution 裡面建立三個專案:Windows 8.1、Windows Phone 8.1 以及 Share Project,其中 Share Project 為共用的 HTML/CSS/JavaScript,因此一份 Solution 可以分別編譯出 Windows 8.1 以及 Windows Phone 8.1,相似的 UI 只需要寫一份,底層網路及資料處理的部分,更是能只寫一份程式碼就能讓兩個平台共用,對於專案的開發可以節省下不少的時間。

Screen Shot 2014-05-21 at 10.03.33 AM

這次活動,我們想要做到兩隻 App 在前景執行的情況之下,可以互相傳送訊息,達到歌曲同步播放的效果,類似聽廣播的感覺,當 DJ 換歌時,聽眾也會一起跟著換歌,由於這技術在網頁上已經頗為成熟,想說試試看放到 App 上看到底會不會動。用 JavaScript 寫 Web 和寫 App 最大的不同,主要在於網頁通常是在瀏覽器讀 HTML 時,再發出其他的網路傳輸去向伺服器下載 JavaScript 檔案,而 App 則是 HTML/CSS/JS 等檔案全部放在本機端直接拿來用,因此當某些服務提供的 JavaScript Framework/Client 在執行時,如果需要額外去網路上下載其他 .js 檔案來用,這在 JavaScript Windows Store Apps 上是禁止的,導致整個 JavaScript 無法使用。

一開始找了 Firebase 來用,就遇到了上述的問題,花了一些時間終究要放棄 Firebase,向外求援問了一個學弟,他推薦 Pusher,放進去之後雖然一樣有一些錯誤訊息,不過至少會動。

App 之間的資料存取則是透過 Parse 來完成,Parse 有完整支援 JavaScript 的 Windows Store Apps,用起來非常順利,推播到 Windows 8.1 及 Windows Phone 8.1 的功能也正常,不過推播功能最後沒有派上用場,頗為可惜。

兩天加起來,構想加上開發時間兩個人大約各用了 18 個小時(第一天晚上沒待在會場),由於在公司已經習慣用 Git,一開始就有先去 Bitbucket 開一個 Private Repo,然後把 Hub/Pivot App 樣板 commit 上去後,我主要負責後端,另一個同事負責 UI,就各自開始開發了!另一個同事主要懂前端,他完全沒寫過 Windows Store App,真的是現學現賣,一開始搞懂哪些頁面放在 Shared Project 裡面,以及剩下的放在哪(或是用全域搜尋來找),加上和瀏覽器的 Developer Tools 一樣強大的即時 debug 方式,他改起 UI 來非常順手。

最後 demo 的作品大致上就長這樣:

Windows 8.1 Desktop/Tablet
MUZIK_Together_1

Windows Phone 8.1
MUZIK_Together_2

Store 網址:

新聞報導:

大概是樣板的畫面設計的太棒了(完全沒改),介面看起來非常的符合 Windows Store 風格,不小心獲得了 Dell Venue Pro 8 Tablet 一台 + Nokia Lumia 1520 一台。

其他插曲

第二天帶了公司的 Nokia Lumia 820,上面跑 Windows Phone 8,問了會場的技術支援,才知道要升級 Windows Phone 8.1 前要先安裝 Preview for Developers App,然後更新並重開幾次之後,終於變成 Windows Phone 8.1。接下來要進行手機解鎖卻一直失敗,出現錯誤訊息,會場的技術人員也遇到一樣的問題,都無法成功幫手機解鎖,一直出現錯誤訊息「登入 Windows Phone 開發人員中心時發生錯誤」,最後同事只好搬電腦去測試區借手機來測手機版的 UI。

Screen Shot 2014-05-17 at 12.57.08 PM

Leave a Reply

Your email address will not be published. Required fields are marked *