軟體安裝

XCode

使用macOS中的App Store搜尋xcode後就可以安裝最新版，如下圖中的第一個，點選後安裝即可

Git

macOS系統預設是沒有安裝git，但安裝xcode後，啟用終端機，並輸入「git --version」就可以看到已安裝完成

Java SE Development

下載網址：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

進入網站後，在點選下載前要先點選「Accept License Agreement」，目前使用macOS系統所以點選下載 「jdk-8u152-macosx-x64.dmg 」

檢查java安裝版本java -version

allen-mba:moodlemobile2 allen$ java -version
java version "1.8.0_152"
Java(TM) SE Runtime Environment (build 1.8.0_152-b16)
Java HotSpot(TM) 64-Bit Server VM (build 25.152-b16, mixed mode)

Nvm(Node Version Manager)

安裝nvm主要是用來管理Node.js，如果在一台電腦中要安裝不同版本的Node.js就可以透過nvm切換目前要使用那個版本，所以也是可以從Node.js官方網站下載，因為MoodleMobile2目前官方文件有說明目前使用v6.9.1版是沒有問題，若使用其他版本可能會有問題。

安裝

指令

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.6/install.sh | bash

設定.bash_profile

vim ~/.bash_profile

加入以下的指令後儲存檔案

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"

重新載入.bash_profile

source .bash_profile

檢查nvm安裝版本 nvm --version

執行指令後，確認有顯示版本資訊，如目前安裝的是v0.33.6

allen-mba:moodlemobile2 allen$ nvm --version
0.33.6

使用

nvm install <version>

安裝Node.js，後面帶版本編號，目前MoodleMobile2需要使用6.9.1，安裝內容如下，如果要安裝最新版本請執行nvm install node即可

allen-mba:~ allen$ nvm install 6.9.1
Downloading and installing node v6.9.1...
Downloading https://nodejs.org/dist/v6.9.1/node-v6.9.1-darwin-x64.tar.gz...
######################################################################## 100.0%
Computing checksum with shasum -a 256
Checksums matched!
Now using node v6.9.1 (npm v3.10.8)
Creating default alias: default -> 6.9.1 (-> v6.9.1)
allen-mba:~ allen$ nvm install node
Downloading and installing node v9.2.0...
Downloading https://nodejs.org/dist/v9.2.0/node-v9.2.0-darwin-x64.tar.gz...
######################################################################## 100.0%
Computing checksum with shasum -a 256
Checksums matched!
Now using node v9.2.0 (npm v5.5.1)

nvm current

查詢目前所使用的Node.js版本

allen-mba:~ allen$ nvm current
v6.9.1

nvm use <version>

設定目前電腦要使用的Node.js版本，如下測試一開始的版本為v9.2.0透過指令nvm use 6.9.1，切換到所設定的版本

allen-mba:~ allen$ nvm current
v9.2.0
allen-mba:~ allen$ nvm use 6.9.1
Now using node v6.9.1 (npm v3.10.8)
allen-mba:~ allen$ nvm current
v6.9.1
allen-mba:~ allen$

nvm ls

查詢目前電腦中所安裝的Node.js，如下圖，目前安裝了v6.9.1與v9.2.0，而且目前是使用

allen-mba:~ allen$ nvm ls
->       v6.9.1
         v9.2.0
default -> 6.9.1 (-> v6.9.1)
node -> stable (-> v9.2.0) (default)
stable -> 9.2 (-> v9.2.0) (default)
iojs -> N/A (default)
lts/* -> lts/carbon (-> N/A)
lts/argon -> v4.8.6 (-> N/A)
lts/boron -> v6.12.1 (-> N/A)
lts/carbon -> v8.9.2 (-> N/A)

nvm uninstall <version>

移除所設定的Node.js版本，測試如下…

allen-mba:~ allen$ nvm uninstall node
Uninstalled node v9.2.0
allen-mba:~ allen$ nvm ls
->       v6.9.1
default -> 6.9.1 (-> v6.9.1)
node -> stable (-> v6.9.1) (default)
stable -> 6.9 (-> v6.9.1) (default)
iojs -> N/A (default)
lts/* -> lts/carbon (-> N/A)
lts/argon -> v4.8.6 (-> N/A)
lts/boron -> v6.12.1 (-> N/A)
lts/carbon -> v8.9.2 (-> N/A)

Ionic & Cordova

安裝Ionic及Cordova行動裝置開發框架，注意，@後方的版本編號，這為MoodleMobile2官方目前所指定，若使用其他版本可能會出現錯誤

安裝

npm cache clean
npm install -g cordova@6.5.0 ionic@2.2.3

檢查cordova安裝版本cordova -v

allen-mba:~ allen$ cordova -v
? May Cordova anonymously report usage statistics to improve the tool over time? (Y/n) 
You have been opted out of telemetry. To change this, run: cordova telemetry on.
6.5.0

檢查ionic安裝版本 ionic -v

allen-mba:~ allen$ ionic -v
******************************************************
 Dependency warning - for the CLI to run correctly,      
 it is highly recommended to install/upgrade the following:     

 Install ios-sim to deploy iOS applications.`npm install -g ios-sim` (may require sudo)
 Install ios-deploy to deploy iOS applications to devices.  `npm install -g ios-deploy` (may require sudo)

******************************************************
2.2.3

在ionic這邊有出現訊邊要安裝ios-sim及ios-deploy

安裝ios-sim sudo npm install -g ios-sim

allen-mba:~ allen$ sudo npm install -g ios-sim
Password:
/Users/allen/.nvm/versions/node/v6.9.1/bin/ios-sim -> /Users/allen/.nvm/versions/node/v6.9.1/lib/node_modules/ios-sim/bin/ios-sim
/Users/allen/.nvm/versions/node/v6.9.1/lib
└─┬ ios-sim@6.1.2 
  ├── bplist-parser@0.0.6 
  ├─┬ nopt@1.0.9 
  │ └── abbrev@1.1.1 
  ├─┬ plist@1.2.0 
  │ ├── base64-js@0.0.8 
  │ ├── util-deprecate@1.0.2 
  │ ├─┬ xmlbuilder@4.0.0 
  │ │ └── lodash@3.10.1 
  │ └── xmldom@0.1.27 
  └─┬ simctl@1.1.1 
    ├── shelljs@0.2.6 
    └── tail@0.4.0

安裝 ios-deploysudo npm install -g ios-deploy --unsafe-perm=true

allen-mba:~ allen$ sudo npm install -g ios-deploy --unsafe-perm=true

> ios-deploy@1.9.2 preinstall /Users/allen/.nvm/versions/node/v6.9.1/lib/node_modules/.staging/ios-deploy-c74a4967
> ./src/scripts/check_reqs.js && xcodebuild

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!! WARNING: You are on OS X 10.11 El Capitan or greater, you may need to add the
!!!! WARNING:   `--unsafe-perm=true` flag when running `npm install`
!!!! WARNING:   or else it will fail.
!!!! WARNING: link:
!!!! WARNING:   https://github.com/phonegap/ios-deploy#os-x-1011-el-capitan
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
=== BUILD TARGET ios-deploy-lib OF PROJECT ios-deploy WITH THE DEFAULT CONFIGURATION (Release) ===

Check dependencies

Write auxiliary files
...
...
...    
export variant=normal
/bin/sh -c /Users/allen/.nvm/versions/node/v6.9.1/lib/node_modules/.staging/ios-deploy-c74a4967/build/ios-deploy.build/Release/ios-deploy.build/Script-C0CD3D9B1F59DA8300F954DB.sh

** BUILD SUCCEEDED **

/Users/allen/.nvm/versions/node/v6.9.1/bin/ios-deploy -> /Users/allen/.nvm/versions/node/v6.9.1/lib/node_modules/ios-deploy/build/Release/ios-deploy
/Users/allen/.nvm/versions/node/v6.9.1/lib
└── ios-deploy@1.9.2

安裝 bower

執行指令 sudo npm install -g bower

allen-mba:~ allen$ sudo npm install -g bower
Password:
npm WARN deprecated bower@1.8.2: ...psst! Your project can stop working at any moment because its dependencies can change. Prevent this by migrating to Yarn: https://bower.io/blog/2017/how-to-migrate-away-from-bower/
/Users/allen/.nvm/versions/node/v6.9.1/bin/bower -> /Users/allen/.nvm/versions/node/v6.9.1/lib/node_modules/bower/bin/bower
/Users/allen/.nvm/versions/node/v6.9.1/lib
└── bower@1.8.2

檢查安裝版本 bower -v

allen-mba:~ allen$ bower -v
1.8.2

安裝 gulp

執行指令 sudo npm install -g gulp

allen-mba:~ allen$ sudo npm install -g gulp
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
/Users/allen/.nvm/versions/node/v6.9.1/bin/gulp -> /Users/allen/.nvm/versions/node/v6.9.1/lib/node_modules/gulp/bin/gulp.js
/Users/allen/.nvm/versions/node/v6.9.1/lib
└─┬ gulp@3.9.1 
  ├── archy@1.0.0 

...
...
...
  ├─┬ through2@0.6.5 
  │ └─┬ readable-stream@1.0.34 
  │   ├── isarray@0.0.1 
  │   └── string_decoder@0.10.31 
  └─┬ vinyl@0.4.6 
    └── clone@0.2.0

檢查安裝版本gulp -v

allen-mba:~ allen$ gulp -v
[14:33:29] CLI version 3.9.1

安裝cocoapods

執行指令 sudo gem install cocoapods

allen-mba:~ allen$ sudo gem install cocoapods
Fetching: concurrent-ruby-1.0.5.gem (100%)
Successfully installed concurrent-ruby-1.0.5
Fetching: i18n-0.9.1.gem (100%)
Successfully installed i18n-0.9.1
Fetching: thread_safe-0.3.6.gem (100%)
Successfully installed thread_safe-0.3.6
...
...
...
Installing ri documentation for ruby-macho-1.1.0
Parsing documentation for cocoapods-1.3.1
Installing ri documentation for cocoapods-1.3.1
Done installing documentation for concurrent-ruby, i18n, thread_safe, tzinfo, activesupport, nap, fuzzy_match, cocoapods-core, claide, cocoapods-deintegrate, cocoapods-downloader, cocoapods-plugins, cocoapods-search, cocoapods-stats, netrc, cocoapods-trunk, cocoapods-try, molinillo, CFPropertyList, colored2, nanaimo, xcodeproj, escape, fourflusher, gh_inspector, ruby-macho, cocoapods after 31 seconds
27 gems installed

檢查安裝版本pod --version

allen-mba:~ allen$ pod --version
1.3.1

執行指令pod setup

allen-mba:~ allen$ pod setup
Setting up CocoaPods master repo
  $ /usr/bin/git clone https://github.com/CocoaPods/Specs.git master --progress
  Cloning into 'master'...
  remote: Counting objects: 1776874, done.        
  remote: Compressing objects: 100% (199/199), done.        
  remote: Total 1776874 (delta 89), reused 47 (delta 38), pack-reused 1776632        
  Receiving objects: 100% (1776874/1776874), 498.44 MiB | 2.35 MiB/s, done.
  Resolving deltas: 100% (966806/966806), done.
  Checking out files: 100% (201449/201449), done.

CocoaPods 1.4.0.beta.2 is available.
To update use: `sudo gem install cocoapods --pre`
[!] This is a test version we'd love you to try.

For more information, see https://blog.cocoapods.org and the CHANGELOG for this version at https://github.com/CocoaPods/CocoaPods/releases/tag/1.4.0.beta.2

Setup completed

一定要執行pod setup，要不然在接著執行「npm run setup」的過程中，安裝套件「phonegap-plugin-push」時會出現以下的錯誤訊息

Installing "phonegap-plugin-push" for ios
Failed to install 'phonegap-plugin-push':undefined
Failed to restore plugin "phonegap-plugin-push" from config.xml. You might need to try adding it again. Error: The CocoaPods repo has not been synced yet, this will take a long time (approximately 500MB as of Sept 2016). Please run `pod setup` first to sync the repo.

有執行pod setup的話，會出現以下的訊息

Installing "phonegap-plugin-push" for ios
     % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                    Dload  Upload   Total   Spent    Left  Speed


     0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
   100 1085k  100 1085k    0     0  1987k      0 --:--:-- --:--:-- --:--:-- 1988k

     % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                    Dload  Upload   Total   Spent    Left  Speed


     0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
     0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
   100 1596k  100 1596k    0     0  2181k      0 --:--:-- --:--:-- --:--:-- 2181k

     % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current

                                    Dload  Upload   Total   Spent    Left  Speed

     0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
   100  119k  100  119k    0     0   782k      0 --:--:-- --:--:-- --:--:--  783k

     % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current

                                    Dload  Upload   Total   Spent    Left  Speed

     0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
    98 1850k   98 1824k    0     0  1969k      0 --:--:-- --:--:-- --:--:-- 1967k
   100 1850k  100 1850k    0     0  1979k      0 --:--:-- --:--:-- --:--:-- 1979k

     % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current

                                    Dload  Upload   Total   Spent    Left  Speed

     0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
   100 13396  100 13396    0     0   141k      0 --:--:-- --:--:-- --:--:--  142k

     % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current

                                    Dload  Upload   Total   Spent    Left  Speed

     0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
   100 1171k  100 1171k    0     0  1749k      0 --:--:-- --:--:-- --:--:-- 1750k

Android SDK (25.2.5)

安裝Android SDK主要讓程式可以打編譯成Android行動裝置的App，也可以透過Androis SDK管理要下載那些版本的sdk及建立android模擬器，這邊在title上特別加上版本編號25.2.5，目前Android SDK官方網站的版本已經更新到26，經過測試，在版本25.3刪除了templates這個資料夾(Android SDK Tools Revision 25.3.0)，所以造成在執行編譯(ionic build android)時會出現以下的訊息…

Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK.
Looked here: /Users/allen/Applications/Android/sdk/tools/templates/gradle/wrapper

有測試把舊版的templates資料夾複製到版本26的sdk tools資料夾中，再執行ionic build android是可以編過，但不確定執行時會有什麼問題，所以最後下載版本25.2.5，官網上所提供的都是新版本連結，請到此網址下載 http://dl-ssl.google.com/android/repository/tools_r25.2.5-macosx.zip，此版本還保有圖型介面(GUI)的操作方式，而新版的sdk tools只有command line(sdkmanager)

下載完tools_r25.2.5-macosx.zip，請解壓縮，把tools資料夾放到使用者目錄中的「應用程式->Android->sdk」下，此路徑可以自訂，需要和~/.bash_profile內的路徑設定相同，如下圖

用終端機開啟的路徑為「/Users/使用者/Applications/Android/sdk/tools」

allen-mba:~ allen$ cd /Users/allen/Applications/Android/sdk/tools/
allen-mba:tools allen$ ls
NOTICE.txt            jobb
android                lib
ant                lib64
apps                lint
bin                mksdcard
bin64                monitor
ddms                monkeyrunner
draw9patch            proguard
emulator            qemu
emulator-check            screenshot2
emulator64-arm            source.properties
emulator64-crash-service    support
emulator64-mips            templates
emulator64-x86            traceview
hierarchyviewer            uiautomatorviewer
allen-mba:tools allen$

設定.bash_profile

vim ~/.bash_profile

加入以下的指令

如果JAVA只有安裝一個版本JAVA_HOME可以不用設定，安裝好系統就抓得到，如果有多個版本，可以`export JAVA_HOME=/usr/libexec/java_home -v 1.8`` 指定要使用的版本；platform-tools\這個資料夾是要安裝後才會出現，就先設定好，等一下就不需設定

export JAVA_HOME=`/usr/libexec/java_home -v 1.8`
export ANDROID_HOME=$HOME/Applications/Android/sdk
export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin:$ANDROID_HOME/platform-tools

重新載入.bash_profile

source ~/.bash_profile

測試android sdk tools

執行指令 android -h，顯示如下的內容代表安裝設定完成…，功能說明如下…

allen-mba:tools allen$ android -h

       Usage:
       android [global options] action [action options]
       Global options:
  -s --silent     : Silent mode, shows errors only.
  -v --verbose    : Verbose mode, shows errors, warnings and all messages.
     --clear-cache: Clear the SDK Manager repository manifest cache.
  -h --help       : Help on a specific command.

                                                                    Valid
                                                                    actions
                                                                    are
                                                                    composed
                                                                    of a verb
                                                                    and an
                                                                    optional
                                                                    direct
                                                                    object:
-    sdk              : Displays the SDK Manager window.
-    avd              : Displays the AVD Manager window.
-   list              : Lists existing targets or virtual devices.
-   list avd          : Lists existing Android Virtual Devices.
-   list target       : Lists existing targets.
-   list device       : Lists existing devices.
-   list sdk          : Lists remote SDK repository.
- create avd          : Creates a new Android Virtual Device.
-   move avd          : Moves or renames an Android Virtual Device.
- delete avd          : Deletes an Android Virtual Device.
- update avd          : Updates an Android Virtual Device to match the folders
                        of a new SDK.
- create project      : Creates a new Android project.
- update project      : Updates an Android project (must already have an
                        AndroidManifest.xml).
- create test-project : Creates a new Android project for a test package.
- update test-project : Updates the Android project for a test package (must
                        already have an AndroidManifest.xml).
- create lib-project  : Creates a new Android library project.
- update lib-project  : Updates an Android library project (must already have
                        an AndroidManifest.xml).
- create uitest-project: Creates a new UI test project.
- update adb          : Updates adb to support the USB devices declared in the
                        SDK add-ons.
- update sdk          : Updates the SDK by suggesting new platforms to install
                        if available.
allen-mba:tools allen$

Android SDK Manager 安裝所需的套件

在終端機下執行指令「android」，就會啟動Android SDK Manager的設定畫面，此GUIx在新版的Android SDK Tools是沒有的，剩下指令模式，執行android指令後就會看到如下圖的畫面…

請先取消預設勾選要安裝的套件，然後勾選以下套件

Tools
    Android SDK Tools             25.2.5
    Android SDK Platform-tools        27
    Android SDK Build-tools        25.0.3

Android 7.1.1(API 25)
    SDK Platform                 25

EXtras
    Android Support Repository        47
    Google Repository            58

勾選完後，點選右下角的「Install 5 packages...」

接著在新增出的視窗中，點選「Android SDK License」再點選右下角的「Accept License」，左邊的packages就會變綠的的勾，如下圖...點選「Install」後，就會看到如下圖的安裝畫面，最後看到「Done loading packages」代表安裝完成，請點「close」，關閉視窗

回到Android SDK Manager主畫面，可取消勾選下方的「Updates/New」，就會列出目前所安裝的套件，確認完後就可以關閉視窗

Previous開發環境及軟體清單Next源始碼及編譯

Last updated

Was this helpful?