賈維斯的智慧工坊

  • Home
  • About
  • Note
  • Project
  • Experience
  • Service
  • Sitemap


MY | NOTES

  1. 首頁
  2. >
  3. 筆記

[Ionic] Set up environment

安裝Ionic作業環境
Dec, 2015
Ionic與Cordova是個能夠將網頁轉成手機APP的平台
這裡要介紹如何架設使用環境

第一步 安裝node

安裝node.jsv4.23版本,Ionic官網是說v5還不支援(但有同學能用)
將你的安裝資料夾中的bin路徑,新增到電腦環境變數中
例 C:\Program Files\nodejs

【環境變數】
1、從「開始」功能表選取「電腦」
2、從內容功能表中選擇「系統內容」
3、按一下「進階系統設定」>「進階」標籤
4、按一下「環境變數」,在「系統變數」下尋找 PATH,並對其按一下。
5、在「編輯」視窗中,將類別的位置新增至 PATH 的值以修改 PATH。
6、如果沒有項目 PATH,您可選擇新增變數,並將 PATH 新增為名稱,將類別的位置新增為值。

第二步 安裝java

安裝Java SE Development Kit 8u65, 中間有個Accept License Agreement要記得點
將你的安裝資料夾中的bin路徑,新增到電腦環境變數中
例 C:\Program Files\Java\jre7\bin

這時候在cmd.exe裡輸入java,可以看到使用指令介紹,那就代表安裝成功

第三步 安裝Apache Ant

安裝Apache Ant, 將你的安裝資料夾中的bin路徑,新增到電腦環境變數中
例 D:\apache-ant-1.9.6\bin

第四步 安裝Android SDK

安裝SDK tools only, 將你的安裝資料夾中的主目錄和platform-tools和tools路徑,新增到電腦環境變數中
例 D:\AndroidSDK
    D:\AndroidSDK\platform-tools
    D:\AndroidSDK\tools

在cmd.exe中輸入android
會出現SDK manager,並勾選以下幾個安裝
Ionic目前只支援到API22的版本

Tools > Android SDK Tools
Tools > Android SDK Platform-tools
Tools > Android SDK Build-tools(API22)
Android 5.1.1(API22) > SDK Platform

第五步 安裝Ionic與Cordova

開啟cmd.exe,輸入

npm install -g cordova
npm install -g ionic
安裝完成後,可以輸入cordova和ionic
如果有成功,即會出現指令

第六步 開始專案

開啟cmd.exe,輸入

//開啟一個名為myApp的專案,並且為tabs形式。(可選blank / tabs / sidemenu)
//此時在C:\Users\user就會建立myApp的資料夾,內含專案內容

ionic start myApp tabs

//將路徑轉移到myApp資料夾
cd myApp

//我們使用Ardroid系統
ionic platform add android

第七步 建立APP

在cmd.exe中的myApp路徑輸入

ionic serve
並且addressSelection選擇2
可以看到APP的介面
接下來只要去目標資料夾
例 C:\Users\user\myApp\www
找到index去進行修改即可

第八步 輸出APP

在cmd.exe中的myApp路徑輸入

ionic build android
就能在
C:\Users\user\myApp\platforms\android\build\outputs\apk
找到APK檔囉


Reference

1、Start building with Ionic!
2、Installing Cordova and the Android SDK on Windows 7 and 8

← Back to note