上方廣告

2014年9月19日 星期五

[Cordova Hybrid APP] (一) Visual Studio 2013開發跨平台APP環境設定

筆者最近這一年都忙著為公司進行專案導入,對於技術的研究沒有太多的著墨,最近Ian哥剛好到TechDays 2014擔任Cordova Hybrid APP開發的講師,跟他請教了一些相關的資訊,也重新燃起對於開發的熱情。

Cordova的前身也就是鼎鼎大名PhoneGap,2012那年剛上來台北的時就有與PhoneGap進行了第一次的親密接觸,但後來因為當時高效能的智慧型手機普及率不佳,加上需要針對各平台進行額外的開發設定等種種因素,因此就直接學習了原生程式的開發,最近Visual Studio 2013正式把Hybrid App納入了產品的功能(雖然目前還只是CTP2.0版 ,尚有許多改善的空間,CTP3.0版已發佈,若先前已有安裝過2.0的話需移除,可參考No.18的說明),且目前幾乎人手一隻高階智慧型手機,再不考慮效能的情況之下,筆者本人也湊熱鬧的下載下來開發玩玩。

目前要開發Multi-Device Hybrid Apps,必須先安裝Visual Studio 2013,並且更新到Update3版,並且下載安裝VS2013擴展套件後才可以開始進行開發。雖然官方網站有特別說明如何安裝開發環境,但全部都是英文的,這裡還是簡單的說明一下設定步驟。

1. 更新完Update3後開始進行跨平台開發擴展的套件的安裝,因為這裡是使用Winodws7進行開發,因此執行安裝會跳出錯誤視窗必須先安裝Windows Management Framework 3.0以後才可繼續安裝(如下圖),這裡不探討WMF3.0的功能,因此請自行去下載安裝,再重新進行擴展套件的安裝。


2. 執行套件安裝會跳出安裝第三方擴展套件的選擇畫面(如下圖),如果開發的電腦已經有安裝需要的套件,根據MSDN的說法,必須手動去調整一些設定,為了避免麻煩,這裡直接選擇全部選取安裝即可,這些第三方套件加起來大概要5GB,請確保你的網路連線是快速的否則會裝很久。套件的功能說明如下,請自行參閱,就不另行翻譯了。

P.S 因為Corodva開發出來的Hybrid App也算是一個原生程式,因此App編譯的時候依然需要用到這些系統平台的SDK,因此必須另外下載。
  • Joyent Node.js enables Visual Studio to integrate with the Apache Cordova Command Line Interface (CLI) and Apache Ripple Emulator.
  • Git CLI is required only if you need to manually add Git URIs for specific Cordova plug-ins.
  • Google Chrome is required to run the Apache Ripple emulator for iOS and Android.
  • Apache Ant 1.8.0 or later is required for the Android build process.
  • Oracle Java JDK 7 is required for the Android build process.
  • Android SDK is required for the Android build process and Ripple.
  • SQLite for Windows Runtime is required to add SQL connectivity to Windows apps (for the WebSQL Polyfill plugin).
  • Apple iTunes is required for deploying an app to an iOS device connected to your Windows PC.

3. Android開發環境安裝,此版本對於Android的開發環境配置的設定可以說是一鍵安裝,原則上上個步驟如果全部選取後按下安裝,且開發本機先前沒有安裝它版本的Java開發工具,就不需進行額外的設定。

4. iOS開發環境安裝,由於iPhone的開發環境不像Andriod一樣可以跨平台開發,而是必須相依在Mac的Xcode來進行開發,因此若要進行iPhone模擬器的測試就必須要有Mac的電腦,且需要安裝額外的工具,底下筆者簡單的說明一下iOS開發環境的設定,詳細的步驟還是請參閱MSDN的說明。

4.1 要編譯可以在iOS裝置或iOS模擬有個重要的前提就是必須要有Mac的電腦並且要符合底下幾個重要的條件。

  • Mac OS X Mavericks => 新版的麥金塔作業系統,筆者的電腦原本為Lion版本,但為了安裝新版的Xcode開發工具,只好升級到新版的OS。
  • Xcode 5.1 => 目前Xcode開發工具已經6.1版,但注意此版套件目前不支援新版的Xcode開發工具,會有額外的問題,以後有機會在說明會遇到什麼問題。
  • Xcode command-line tools (from Terminal app, use xcode-select --install) => 命令提示字元工具,請參閱How to Install Command Line Tools in OS X Mavericks
  • Node.js => 請參閱Installing node.js on OSX 10.9 Mavericks,安裝完此文章說明的軟件後就一併會安裝後續會使用到的npm(Node Package Manager)套件管理工具。

4.2 為了讓Visual Studio可以呼叫遠端的Mac電腦內的iOS模擬器,必須先安裝vs-mda-remote,VisualStuido2015已改用remotebuild,要安裝此工具就必須要使用到剛剛的套件管理工具,輸入安裝套件的指令,並輸入Mac帳號密碼後即完成安裝(下圖二畫面代表已完成安裝)。

sudo npm install -g remotebuild



底下為舊版套件的安裝方式,目前已失效
sudo npm install -g vs-mda-remote --user=$USER
PS. (-g)代表安裝到NODE_PATH裡的lib裏面
※ CTP3.0 額外說明
由於先前Mac的環境是在CTP2.0版本的時候安裝,因此更新完CTP2.0,執行編譯系統出現了下圖的錯誤訊息,意思是說無法使用cordova3.5.x的版本來建置cordova4.x的版本。
查詢了Mac上的cordova版,確實是較舊版本的cordova,查詢了一下MSDN,MSDN提到如果您已將電腦更新為新版 Visual Studio,也必須將遠端代理程式更新為目前版本。CTP3.0針對遠端建置專案檔新增了一個新的屬性Security PIN,並且貌似出現可以直接在Windows環境下編譯iPhone的程式(但我沒手機進行測試)。
調整方式其實很簡單,4.2的安裝步驟,就會自行下載最新的遠端伺服器所需的cordova版本了。

4.3 安裝完後在Mac電腦上運行底下的語法,就會再Mac建立一個提供給Visual Studio建置用的伺服器,但前提是開發機器必須要跟Mac電腦在相同網段底下,否則會無法正常連線,執行完畢的畫面如下圖。

remotebuild --secure false



底下為舊版套件的安裝方式,目前已失效
vs-mda-remote --buildDir <建置路徑> --allowsEmulate=true
P.S <建置目錄>設定為Mac電腦內的實際資料夾路徑,後續如果建置iOS的程式,Visual Studio會將產生的程式先發佈到此路徑,再從此處編譯並呼叫iOS模擬器。
4.4 vs-mda-remote伺服器建立完畢後,預設會監聽3000Port號,若要進行調整資訊請自行參閱MSDN,筆者這邊直接用另外一種方式來進行測試,打開瀏覽器並輸入http://<Mac主機的IP>:3000/files,會看到下圖的網頁即代表正常監聽中,並且回到Mac電腦上會看到終端機的監聽程式跑出【GET /files 200 8ms - 6.69kb】的log資訊。
4.5 最後回到Visual Studio設定遠端代理參數設定。
  • 開啟Visual Studio 2013。
  • 到選單工具列->工具->選項->Multi-Device Hybrid Apps->Remote Agent Configuration。
  • 設定允許遠端存取iOS為True。
  • 設定Host為Mac的IP。
  • 設定監聽Port(default 3000)。


4.6 下圖為Visual Studio開啟iPhone模擬器的示意畫面。


5. 安裝完畢後重新開機,並開啟Visual Studio2013,因為本機的環境可能有先安裝過其他套件,或有多種本機上有多種套件的版本,為了確保系統的環境變數不會影響開發環境,建議調整一下Visual Studio2013的環境變數設定(開啟VS後【工具->選項】可開啟下圖的設定)。

6. 上述步驟完成後,基本上我們就可以開始開發跨平台的APP程式了,後面有空筆者在來分享一下個平台的開發及上架方式。

※因為開發Windwos Phone必須要依賴在Hyper-V上面,筆者手上沒有環境,這裡暫時無法確定要如何設定,有興趣的可以上Google上找找看。


這裡特別感謝Ian的技術指導(P.S MVP果然不是混假的)