Windows上でAVDを用いたMeteorアプリ動作確認環境の構築

## Introduction

Web、iOS、Android、デスクトップ用のアプリケーションを構築する際、
コードを一元化できるのはとても魅力的です。**Meteor** はそれができる
ということなので色々試そうと思います。

Windows端末でAndroidの動作確認を行えるまで環境構築を行ってみます。
手持ちのMacbookが古過ぎるので…

## Goal

Windows上でAndroid仮想デバイス(AVD)を用いたMeteorアプリケーションの動作確認環境を整える。

## How to

### 環境情報

- Windows 10
- Java JDK 1.8.0_144

**今回インストールするもの**

- Meteor 1.6
- Android Studio 3.0

### Meteor のインストール

[https://install.meteor.com/windows](https://install.meteor.com/windows) からインストーラをダウンロードし実行します。インストールが完了するとコマンドプロンプトで `meteor` コマンドが使えるようになります。

他にもChocolatey (Windowsのパッケージマネージャ) を用いた方法がありますが、ここでは割愛します。詳しくは[Install Meteor.js](https://www.meteor.com/install)をご参照ください。

### Android Studio for Windows のインストール

[Android Studio と SDK ツールをダウンロードする | Android Studio](https://developer.android.com/studio/index.html)からインストーラをダウンロードし実行します。

このとき「Chose Components」で **Android Virtual Device** をインストールに含めるようにします。

### 環境変数の設定

以下を追加します。

#### PATH

- %USERPROFILE%\AppData\Local\Android\Sdk\platform-tools
- C:\Program Files\Java\jdk1.x.x_xxx\bin (x: JDKのバージョン)

#### JAVA_HOME

- C:\Program Files\Java\jdk1.x.x_xxx (x: JDKのバージョン)

#### ANDROID_HOME

- %USERPROFILE%\AppData\Local\Android\Sdk

### AVD (Android 仮想 デバイス) の作成

AVD ManagerはAndroid StudioのIDEの中からでないと遷移できない場所にあります。
空のプロジェクトを作成してからAVDの作成を行います。

1. Android Studio を起動し「Configure」を選択します。
2. Configure 画面で「SDK Manager」を選択します。
3. 必要な Android OS のパッケージを選択してインストールします。
4. 再度 Android Studio を起動し「Start a new Android Project」を選択し空のプロジェクトを作成します。
5. ビルドされるまで待ちます。ビルド中にエラーが発生した場合はエラーメッセージ直下のリンクをクリックします。
6. ビルドが完了すると `Tool→Android→AVD Manager` がツールバーに表示されます。Create Virtual Deviceで新しいAVDを作成します。

### Meteor アプリケーションの作成・実行

```
> meteor create myapp
> cd myapp
> meteor add-platform android
> meteor run android
```

`meteor run android` にて別のコンソールが立ち上がり AVD が起動されます。

このとき2種類のエラーで処理が停止しました。

#### Cannot read property ‘replace’ of undefined

作成した Meteor プロジェクトの中にある emulator.js を下記のように修正します。

> /platforms/android/cordova/lib/emulator.js line 202:
```
var num = target.split('(API level ')[1].replace(')', '');
```
I replaced it with a regex search and extraction:
```
var num = target.match(/\d+/)[0];
```

[[CB-12981] Error: Cannot read property ‘replace’ of undefined [Android]](https://issues.apache.org/jira/browse/CB-12981?jql=text%20~%20%22cannot%20read%20property%20%27%22)

#### This adb server's $ADB_VENDOR_KEYS is not set

AVD側のDeveloper Optionsの中にある `Revoke USB debugging authorization` を実行します。
Developer Optionsは以下の手順で有効化できます。

> On Android 4.1 and lower, the Developer options screen is available by default. On Android 4.2 and higher, you must enable this screen as follows: 
1. Open the Settings app.
2. (Only on Android 8.0 or higher) Select System.
3. Scroll to the bottom and select About phone.
4. Scroll to the bottom and tap Build number 7 times.
5. Return to the previous screen to find Developer options near the bottom.

[usb - ADB Android Device Unauthorized - Stack Overflow](https://stackoverflow.com/questions/23081263/adb-android-device-unauthorized)

[Configure On-Device Developer Options | Androrid Studio](https://developer.android.com/studio/debug/dev-options.html)

## Conclusion

MacOSでなければiOSアプリへのビルドができないので、
Windowsでやるのは賢明ではないですが、
ひとまずの環境を整えることはできました。

ちなみにDesktopアプリケーションは [meteor-desktop](https://www.npmjs.com/package/meteor-desktop)  パッケージを用いると作成できるようです。

Meteorの所感として日本語のドキュメントが少ないと感じました。1年前の記事を多かった印象です。プロダクトには不向きというご意見も。

学習し始めのため少なくとも一気通貫してみて、自身の目で見極めていきます。

## Reference

[Developing Android mobile app with Meteor on Windows](https://medium.com/@borissevo/developing-android-mobile-app-with-meteor-on-windows-7c62e6be7e27)