Cordovaを導入してIBM Bluemixと連携させてみる（第1回）



# 1. Node.jsのインストール

Node.jsをインストールしてみる。
環境はMacです。

まずはnodejsのサイトへGo!!
https://nodejs.org/en/

以下のような画面になるのでDownload for OSX (x64)をクリック。
![Node_js.png](https://qiita-image-store.s3.amazonaws.com/0/87213/ffa4d95b-38d1-0413-6b5a-f99804d196d4.png)


node-v4.2.1.pkgがダウンロードされるので、そのままインストールを実行する。

![Node_js_のインストール.png](https://qiita-image-store.s3.amazonaws.com/0/87213/ccaf3ed3-7278-5bf1-25b8-b8b4cd94c483.png)

# 2. Cordovaのインストール

次にnode.jsのnpmからCordovaをインストールする。

```
mxm-air:009 DevTest mxm-user$ sudo npm install -g cordova
Password: 
```

cordovaのcreateコマンドでプロジェクトを作成します。

```
mxm-air:cordova001 mxm-user$ cordova create demo com.ibm.demo MyDemo
Creating a new cordova project.
mxm-air:cordova001 mxm-user$ 
```

これはdemoディレクトリ以下にアプリの識別子としてcom.ibm.demoを持つ「MyDemo」という名前のアプリのプロジェクトを作成します。

```
mxm-air:cordova001 mxm-user$ cd demo
mxm-air:demo mxm-user$ ls
config.xml	hooks		platforms	plugins		www
```

問題なさそうです。

# 3. Android環境の作成

さてAndroidの環境を作成します。Cordovaはコマンド一つでiOSやAndroidの環境ができてしまうのだ。今回はAndroidの環境で稼働確認してみます。


```
mxm-air:demo mxm-user$ cordova platform add android
Adding android project...
Creating Cordova project for the Android platform:
	Path: platforms/android
	Package: com.ibm.demo
	Name: MyDemo
	Activity: MainActivity
	Android target: android-22
Copying template files...
Android project created with cordova-android@4.1.1
Discovered plugin "cordova-plugin-whitelist" in config.xml. Installing to the project
Fetching plugin "cordova-plugin-whitelist@1" via npm
Installing "cordova-plugin-whitelist" for android
```

これでAndroidのプラットフォームができました!

ここで注意が必要なのですが、事前にAndroid SDKはインストールしておく必要があります。
Android Studioの設定をせずにSDKのみダウンロードした場合はパスを追加する必要があります。

## 3.1 PATHの通し方（Mac編）
ホームディレクトリ直下にある設定ファイル.bash_profileに通したいPATHを記入する。
設定ファイルはsudoで開く。例えばviエディタであれば以下の通り。

```
sudo vi .bash_profile
```

PATHを通すには.bash_profileに下記を記入する。

```
export PATH=$PATH:通したいPATH
```

## 3.2 Android SDKへのPATH設定（Mac編）

Android SDKを利用するには、SDK配下のtoolsおよび/platform-tools にPATHを設定する必要がある。
例えば/Users/hogehoge/android-sdk-macosx/　にSDKがある場合は以下のように .bash_profileに追加する。

```
export PATH=$PATH:/Users/hogehoge/android-sdk-macosx/tools
export PATH=$PATH:/Users/hogehoge/android-sdk-macosx/platform-tools
```



# 4. Pluginの導入

CordovaにはPluginが数多く用意されており、特にネイティブ（AndroidのJavaやiOSのSwift、Object-c）の機能を利用する場合、Pluginによって実装します。

CordovaのPluginは以下のサイトから見つけることができます。

https://cordova.apache.org/plugins/

さてPluginの導入を実行します。ここでは、まず最低限必要なdeviceとconsoleを導入します。

```
mxm-air:demo mxm-user$ cordova plugin add cordova-plugin-device
Fetching plugin "cordova-plugin-device" via npm
Installing "cordova-plugin-device" for android
mxm-air:demo mxm-user$ cordova plugin add cordova-plugin-console
Fetching plugin "cordova-plugin-console" via npm
Installing "cordova-plugin-console" for android
mxm-air:demo mxm-user$ 

```

# 5. エミュレーターによる稼働確認

その後、エミュレーターが稼働するか確認する。

```
mxm-air:demo mxm-user$ cordova emulate android
Running command: "/Users/mxm-user/Documents/009 DevTest/cordova001/demo/platforms/android/cordova/run" --emulator
ERROR: Error: Please install Android target: "android-22".

Hint: Open the SDK manager by running: /Users/mxm-user/Library/Android/sdk/tools/android
You will require:
1. "SDK Platform" for android-22
2. "Android SDK Platform-tools (latest)
3. "Android SDK Build-tools" (latest)
Error: /Users/mxm-user/Documents/009 DevTest/cordova001/demo/platforms/android/cordova/run: Command failed with exit code 2
    at ChildProcess.whenDone (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/cordova/superspawn.js:139:23)
    at emitTwo (events.js:87:13)
    at ChildProcess.emit (events.js:172:7)
    at maybeClose (internal/child_process.js:818:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
mxm-air:demo mxm-user$ 
```

エラー。cordovaでセットされたsdkターゲット番号と実際にAndroid SDKでセットされているSDKのバージョンが違いますよという趣旨のエラーです。

## 5.1 回避策

### Android SDKのバージョン確認

Android Studioを起動。この場合、API Levelが23なので、Android SDKのバージョンがCordovaで指定されたものと異なっています。

![Preferences.png](https://qiita-image-store.s3.amazonaws.com/0/87213/655b344b-9752-ac60-846c-d532bc656bdf.png)

### AndroidManifest.xmlの変更

次に、以下のファイルを変更します。
/Cordovaのプロジェクトフォルダ/platforms/android/AndroidManifest.xml
Cordovaのプロジェクトフォルダはcordova createで作成済みのフォルダになります。

さっそくAndroidManifest.xmlをテキストエディタかviエディタで開いてみます。すると・・・・いたいた。。。

```
<uses-sdk android:minSdkVersion="14" android:targetSdkVersion="22" />
```

以下の通りにSDKのVersionを変更します。
```
<uses-sdk android:minSdkVersion="14" android:targetSdkVersion="23" />
```

### project.propertiesの変更

さらに、以下のファイルを変更します。
/Cordovaのプロジェクトフォルダ/platforms/android/project.properties
さっそくテキストエディタあるいはviエディタで開いてみます。すると・・・・いたいた。。。

```
target=android-22
```

これを同様にSDKのVersionを変更します。

```
target=android-23
```

さっそくandroidをエミュレートして実行してみる。

・・・
![2015_10_19_23_20.png](https://qiita-image-store.s3.amazonaws.com/0/87213/58d38ddb-715a-fb16-2321-d3c057ce962a.png)

お、うまくいった。

# 6. サンプルアプリの実行

こちらのサンプルアプリを実行してみることにする。DevOps Servicesにある[bluemix-mobiledata](https://hub.jazz.net/project/shiqif/bluemix-mobiledata/overview?utm_source=dwjapan&utm_medium=article&utm_content=mo-cordova-md-app&utm_campaign=bluemix)のプロジェクトからダウンロードする。

![bluemix-mobiledata_-_IBM_Bluemix_DevOps_Services.png](https://qiita-image-store.s3.amazonaws.com/0/87213/b02d13c8-239f-e28e-ef86-30a9ad8030c1.png)

www-raw.zipを解凍して、/Cordovaのプロジェクトフォルダ内のwwwフォルダとそっくり入れ替える。

その後、buildし直し、エミュレートを実行する。

```
cordova build
```

```
cordova emulate android
```

![2015_10_20_0_42.png](https://qiita-image-store.s3.amazonaws.com/0/87213/a5714110-df22-bee9-1e61-6355d1d83279.png)


お。


空欄に文字を入れ込んでみます。すると名前が出てきました。

![2015_10_20_0_45.png](https://qiita-image-store.s3.amazonaws.com/0/87213/c969f685-f869-2ce2-974e-ff5df7b4645b.png)

クリックすると詳細の連絡先が出てきました。

![2015_10_20_0_45_1.png](https://qiita-image-store.s3.amazonaws.com/0/87213/8b4627c6-534c-fa24-0604-b31a9731b0a1.png)


今回はここまで。次回は、このデータをBluemixと連携してみます。