Apache Cordova是一個用HTML、CSS、JavaScript打造行動裝置App的開發平台,點滿網頁開發技能的前端攻城獅也能快速轉職為App開發人員,不必從頭苦學Objectivc-C/Swift/Java也能為手機、平板寫App,實在是一大福音。

期待以久VS2015終於在7/20 RTM,手上的網站專案有轉成手機App的潛在需求,因此我特别關注VS2015內建支援Cordova專案,不必砍掉重練(都到這把年紀,還能砍幾次呢?orz)就能寫好App,功德無量。而號稱地表最強開發工具的Visual Studio,是否仍沿襲一貫傳統,將原本令人頭皮發麻的複雜操作細節,包裝成One-Click搞定?頗令人期待!拿到VS2015,當然要試試Cordova專案。

由於Cordova不在預設安裝選項,安裝時記得選自訂安裝,需額外勾選「HTML/JavaScript(Apache Cordova)」,勾選時VS2015後一併幫你選取Emulator for Android等必要選項:

安裝好VS2015,就可以準備新增Cordova專案。VS2015提供兩種Cordova專案範本,JavaScript及TypeScript,它們被歸整類在Other Language/JavaScript及Other Language/TypeScript下,我花了點時間才找到,另外也可以在下圖右上角「Search Installed Templates」搜尋欄輸入「Cordova」快速找到它們:

即便有JavaScript與TypeScript兩種Cordova專案選項,對我而言,有雞腿誰要吃菜脯蛋?二話不說就選TypeScript囉~

VS2015所新增的空白Cordova專案結構如下,merges用來存放各平台(Android、iOS、Windows Phone...)專屬的程式碼、res為平台專屬的圖示及載入畫面(Splash)圖檔、www則為CSS/圖檔/HTML/Scripts等打造UI要用的網站程式,TypeScript部分則被集中於scripts目錄。底下還有bowser.json、confit.xml、taco.json、package.json等檔案。先不用擔心這堆新東西,現階段還不需要深入了解,一樣能用VS2015寫出Cordova App。

空白Cordova專案有一個非常簡單的index.html,裡面只有一行文字「Hello, your application is ready!」,但具備Cordva基本的JavaScript架構,可以做為衍生各式應用的基礎。我們先不做修改,直接執行它體驗VS2015提供的巧妙整合。

如下圖,在Debug工具列可選擇要執行測試的平台。除了Android模擬器,VS2015也整合了Ripple,值得大力推薦!

Apache Ripple是Apache開發的一組Chrome擴充模組,可模擬Cordova App行動裝置執行環境,提供手機/平板解析度、裝置實體翻轉、搖動、電池電量、網路頻寬、地理位置…等多項控制參數,大幅簡化測試複雜度。

而最棒的一點,Ripple也支援Chrome F12偵錯!(身為網頁開發老鳥,看到這裡忍不住起立鼔掌)

註:在機器上第一次編譯Cordova專案,花費的時間會遠超過你的預期,理由是編譯Cordova專案需要下載安裝一堆node.js模組,但是放心,一如往例,VS2015會在背後打理一切,不勞開發者費心,請放鬆心情耐心等待。

Ripple啟動速度快,又相容Chrome F12開發工具,有利草創時期的開發測試。但使用Chome檢視畢竟與實機有段差距(例如:行動裝置有其專屬的輸入法操作UI),免不了還是需要用模擬器驗證。VS2015內建了Hyper-V Anroid模擬器,VS2015再一次展現它的貼心,不用費心下載、安裝、設定,只需選取Debug平台「VS Emulaotr 7" Kitkat (4.4) XHDPI Table」或「VS Emulator 5" Kitkat (4.4) XXHDPI Phone」,就能自動啟動Android VM、部署程式進行測試,值得一提的是VS2015還提供類似瀏覽器F12開發者工具的DOM檢視器及JavaScript Console,在JavaScript Console下個alert(),會在模擬器彈出對話框,等於在模擬器上也有F12開發者工具可用,甚至可以在TypeScript上設定中斷點,除錯找碴射茶包很方便。

歷經初步小試,VS2015沒讓人失望,Cordova專案開發及測試的整合性維持了一貫的流暢與貼心,初學者也能快速上手,不愧是Visual Studio!

不過,即使VS2015帶來極為順暢的入門體驗,大幅消除初學者的挫折感,但要在真實戰場生存,搞懂Visual Studio背後默默做掉的那一堆骯髒粗活兒,是邁向進階開發的不二法門,這代表又有一拖拉庫的新東西要學了,加油。


Comments

# by Evan

Good!!

# by 宅宅

Hi 黑大, 請問您開新專案執行的時候會出現 Could not create the Java Virtual Machine 的錯誤嗎,這是不是安裝過程少勾選了什麼? 謝謝

# by Jeffrey

to 宅宅, 選擇在Ripple或VS Emulator執行都會出現相同錯誤嗎?由於無法重現相同的錯誤,有賴你提供詳細一點的錯誤訊息。

# by 宅宅

是跑VS Emulator會出錯,但後來解決了,要用系統管理員身分開啟VS,謝謝 :)

# by 范德萨

发范德萨范德萨

# by Ben

Hi 黑大, 我建立一個新專案,加入中文字結果顯示亂碼 請問是哪個部分錯誤呢 謝謝

# by Ben

我的問題解決了一半 似乎預設樣板產生的html or js不是用utf8編碼 重新建立一個相同的檔案就解決了 不過如何使預設建立的檔案為utf8則尚未找到解答

# by Tom

請問暗黑大 是否能將現有的asp.net mvc專案直接包進手機專案呢

# by Jeffrey

to Tom, 如果你說的 MVC 專案包含 Controller 等後端邏輯,我沒聽過類似的解決方案,技術上很難實現。

Post a comment