2015年9月1日 星期二

建立 Cordova APP + ionic Framework 開發環境

開發以 Hybrid App 也一陣子了,一開始自然免不了花一陣子時間摸索
在開發過程中自然也碰到不少問題,以後有時間再慢慢把碰到的問題記錄下來
廢話就不多說了回歸正題
開發 Cordova App 所需的環境如下

1、nodejs
首先安裝 nodejs ,可以到 nodejs 官網下載安裝包安裝,安裝包也包含了 Git 套件 App 開發過程中會需要外掛一些 plugin ,這些 plugin 都是從 GitHub 下載安裝的。

2、Java SDK
再來安裝 Java SDK,可以直接到 Oracle 官網下載,下載後執行安裝即可。

3、Android SDK
請到 android developer 下載,可以選擇 android studio 安裝包,裡面就包含了 android SDK ,或是選擇獨立 SDK 安裝

4、Apache ant
請到 apache ant 官網下載格式為 zip 檔,下載後解壓縮到指定的目錄即可

開發所需的工具準備好後還要為 windows 設定預設路徑
1、"控制台"=> "系統" => "進階系統設定" => "進階" => "環境變數" => 新增使用者變數
     ANT_HOME: apache-ant 目錄
     ADT_HOME: android sdk 目錄
     JAVA_HOME : java jdk 目錄



2、修改"系統變數" Path 內容,加入 ;%ANT_HOME%\bin;%ADT_HOME%\tools;%ADT_HOME%\platform-tools;%JAVA_HOME%\bin



以上步驟都做完了就可以開發 接下來要安裝 Cordova, 打開 command mode, 輸入以下指令
C:\npm install -g cordova
Cordova 安裝完成後接著安裝 ionic , 輸入 npm install -g ionic ,
C:\npm install -g ionic
安裝完成就大功告成了接著就可以來開發 app 嘍,建立 ionic app 超簡單,只要輸入以下指令
C:\ionic start appname
 就能建立 app 專案(appname 為 app 專案名稱,請自行命名)
專案建立完成後進入專案目錄,輸入以下指令就可以直接開啟瀏覽器進行預覽及除錯
C:\appname\ionic serve

 若要在模擬器或手機上預覽則要替專案加上執行平臺,在專案目錄下輸入
C:\appname\cordova platform add android

android 平台加入後可以先 build app 輸入
C:\appname\ionic build android

 顯示 BUILD SUCCESSFUL 表示 build app 完成,打包好的 apk 檔會存放在  C:\appname\platforms\android\build\outputs\apk\android-debug.apk 這裡,這個 apk 檔可以直接放到手機安裝執行,另外一些偵錯的方法就以後再介紹囉~