grunt
yoman
ionic

generator-ionicのAndroid環境設定とproxyの設定

More than 3 years have passed since last update.


generator-ionicのAndroid環境設定

generator-ionic を紹介します の記事ではiOSしか紹介されていないのでAndroidについて補足する。

1.まず、npm update -g でnpmを最新にする。

2.次に、ionicのインストール

npm install -g cordova

npm install -g phonegap
npm install -g generator-ionic
mkdir ionic && cd $_
yo ionic

パラメータを適当に設定して導入完了。

3.次にAndroid SDKのインストール(mac osxを前提)

ダウンロードしたものを解凍してandroid-sdk-macosxをApplicationsフォルダにコピー、ターミナルからtools/android update sdk でインストーラ実行、必要パッケージを選択する。

(ちなみに、私は以下を選択した)

    Tools

Android SDK Tools
Android SDK Platforms-tools
Android SDK Build-tools (最新のもの21.1.2を一つだけ選択)
Android 4.4.2(API 19)
SDK Platform
Google APIs(x86 System Image)
Intel x86 Atom System Image
Android 4.2.2(API 17)
SDK Platform
Google APIs
Intel x86 Atom System Image
Extras

4.antが入っていない場合、インストールする

curl -O http://ftp.jaist.ac.jp/pub/apache//ant/binaries/apache-ant-1.9.4-bin.tar.gz

tar zxvf apache-ant-1.9.4-bin.tar.gz
sudo mv apache-ant-1.9.4 /usr/bin/

5.~/.bash_profile の編集して以下を追加

eport ANT_HOME=/usr/bin/apache-ant-1.9.4

export ANDROID_HOME=/Applications/android-sdk-macosx
export ANDROID_TOOLS=/Applications/android-sdk-macosx/tools/
export ANDROID_PLATFORM_TOOLS=/Applications/android-sdk-macosx/platform-tools/
export PATH=$ANT_HOME/bin:$ANDROID_HOME:$ANDROID_TOOLS:$ANDROID_PLATFORM_TOOLS:$PATH

PATHの反映と確認



source ~/.bash_profile

ant -version

6.androidプラットフォームの選択



grunt platform:add:android

7.avdの作成(私の場合はandroid17を選択)



android list targets (android17のIDを確認する)

android create avd --name android17 --target 1

8.ブラウザ起動

~/.ionic/ionic.configに以下を追記する

"ionicServeAddress": "localhost"

IPは2つ以上検知されると聞いてくるのでlocalhostを選択する



grunt serve

9.エミュレータ起動



grunt emulate:android --livereload


proxyの設定

ionicサーバはreverse proxy機能があり、grunt-connect-proxyは使う必要がありません(使えません)

以下のようにionic.project にproxiesを追加するだけで使えるようになります。


In the ionic.project file you can add a property with an array of proxies you want to add. The proxies are object with two properties:



  • path: string that will be matched against the beginning of the incoming request URL.


  • proxyUrl: a string with the url of where the proxied request should go.

{

"name": "appname",
"email": "",
"app_id": "",
"proxies": [
{
"path": "/v1",
"proxyUrl": "https://api.instagram.com/v1"
}
]
}