Tableau Mobile Bootstrap React Nativeを利用してWindowsで素敵オリジナルAndroidアプリをつくる

スクラッチでアプリ開発するのは好きだけど、時間ないのよね～な方に、何かテンプレートほしぃわ～な方に、まずは最低限機能が入った素敵Bootstrapはいかがかしら。
データをVisualizationしたTableauのダッシュボードをスマホで見るには、ふつうのブラウザ、Tableau Mobileアプリ、そして自作アプリ、という方法があります。素敵カワイイがテーマのnoteなので自作しちゃいましょう。
以前はReact Native版がなくって、Objective-CでiOSアプリを作ったりしてたんですが、せっかくなので今回はReact Native使ってAndroidでいっちゃいましょう♪

レシピ

１．GitHubのレポジトリからコードをいただきましょう
　　https://github.com/tableau/mobile-app-bootstrap-react-native
２．IDEを入れましょう（Visual Studio Codeを利用）
　　https://code.visualstudio.com/
３．JDK、Node、Android Studioを用意しましょう
　　https://www.oracle.com/java/technologies/javase-downloads.html
　　https://nodejs.org/en/download/
　　https://developer.android.com/studio
　　Versionメモ：
       　　JDK=14.0.2
       　　Node=12.9.1 (12.18.3 LTSだとエラーがでるのでダウングレードしました)
       　　Android Studio=4.0.1
       PATHメモ：環境変数も入れてしまいましょう

JAVA_HOME: C:\〇〇〇\JavaSDK
ANDROID_HOME: C:\〇〇〇\AndroidSDK

Android StudioのFile -> Project Structureでパスを確認できます。

環境確認

こちらが私のお遊びSurfaceマシンの環境です。

GitHubレポジトリからコードをダウンロードしてあるのでそこのパスまで移動してから、話しかけます（＝コマンドラインを流します）。

react-native info

料理（コーディング）開始～

GitHubのレポジトリからダウンロードしたコードを見ると、SRCフォルダにメインのスクリプトが入っています。
Visual Studio Codeを利用してどんどんカスタマイズしていきます。
ここではいったんデフォルトで実行しておきます。

試食（シミュレーターで実行）

Android StudioでAVD(Android Virtual Device)を作って起動しておきます。

左下のCreate Virtual Deviceから新規で作成します。各種パラメータはシミュレートしたいものに合わせて設定です。

▶でVirtual Device開始！

ちなみに、adb devicesコマンドで今接続されているデバイスが見れますよ。

adb devices

いよいよ実行！

react-native run-android

はい、これでビルドされて配置されてシミュレーターが実行します。

カワイイ。あとはダッシュボードをかわいくして（ちゃんと意味あるダッシュボードでね！）、アプリも可愛くすればOKです。

実食（リアルデバイスで実行）

せっかくなので、Android実機を開発者オプションの設定をして、実際触ってみましょう。思わず素敵！と叫ぶこと間違いないです。

開発者オプション
https://developer.android.com/studio/debug/dev-options

実機をUSBでつないだ状態

最後の一行！

react-native run-android

素敵なマイアプリができるといいですね～♡

リファレンス

tableau/mobile-app-bootstrap-react-native

Running On Device 揃 React Native