Firebase Functionsを使って簡単にサーバー処理のAndroidアプリを作る ③アプリ開発編

#はじめに
この記事は3編構成になっていて、
[①環境構築編](https://qiita.com/Om0m/items/916a1252d2f34a6222e2)
[②Functions編](https://qiita.com/Om0m/items/afcb1a24d1667da60aa4)
[③アプリ編](https://qiita.com/Om0m/items/b3eec25d71941cd0d623)
になっています。

最後です。アプリを作ります。
アプリをソースコードで貼るのは面倒なので、githubから取ってきます。
AndroidStuduioProjects配下で以下のコマンドを実行します。

```
git clone https://github.com/Om0m/janken-android
```
https://github.com/Om0m/janken-android

cloneできたらAndroid StudioでImport Projectをして読み込みます。
Firebaseを使用するアプリのため各自のgoogle-services.jsonを追加しないとビルドは通らないです。
#導入　
##アプリの追加
google-services.jsonの追加を行います。
まず、Firebaseの画面を開いて下の画像のように設定ボタンを押し、[プロジェクトの設定]を開きます。
<img width="416" alt="スクリーンショット 2018-10-17 15.23.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/256383/b33d868e-2170-0047-5056-4275822603b3.png">

全般を開いて下の方にスクロールします。
<img width="590" alt="スクリーンショット 2018-10-17 15.25.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/256383/7c928034-06cc-9054-dbcc-ff4a31056a49.png">

すると、プロジェクトほにゃほにゃには現在アプリがありません。
となっているはずなので、真ん中の[**AndroidアプリにFirebaseを追加**]を押します。
<img width="965" alt="スクリーンショット 2018-10-17 15.26.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/256383/8a0f02b6-8609-5a58-f4ea-ca7a546da526.png">

##アプリの登録
アプリの登録をします。 **com.sample.janken**を入力します。
その他の項目は任意なので空白でいいです。
![スクリーンショット 2018-10-17 15.43.25.png](https://qiita-image-store.s3.amazonaws.com/0/256383/b5d53719-3ed0-e0ec-f2f1-634efcdc9f2a.png)

##google-sevices.jsonのダウンロード
次に行くと、google-sevices.jsonのダウンロードができます。
これが取れたら後は簡単です。
![スクリーンショット 2018-10-17 15.43.46.png](https://qiita-image-store.s3.amazonaws.com/0/256383/aa747396-b312-1e9d-f6dc-e6cec7323fda.png)

Android Studioで一番上の赤線部分がProjectになるように選択します。app配下にgoogle-sevices.jsonを配置します。
<img width="289" alt="スクリーンショット 2018-10-17 17.27.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/256383/bc5e0fec-8483-ea03-eb95-bf8ab32221ca.png">

#アプリの動作確認
これでビルドが通ると思うのでエミュレーターや実機にアプリを入れて起動します。
名前を入力して部屋を作ります。
<img width="289" src="https://qiita-image-store.s3.amazonaws.com/0/256383/bfa4a234-4002-2446-30c8-8d00b7f9c022.png">

部屋名と部屋のMAX人数を入力し、作成を押します。
<img width="289" src="https://qiita-image-store.s3.amazonaws.com/0/256383/33952b67-d068-0b34-41b5-60b5dfde080f.png">

FirebaseのRealtime Databaseを開くと、さっき作成した部屋のデータが追加されています！
![スクリーンショット 2018-10-17 15.58.28.png](https://qiita-image-store.s3.amazonaws.com/0/256383/306aa778-d96f-c6d2-f864-dc0ca503d590.png)

アプリに戻って今度はじゃんけんの手を選択します。その後[確定]ボタンを押します。
（結局グーを選びました。）
<img width="289" src="https://qiita-image-store.s3.amazonaws.com/0/256383/58efefb1-07c3-fa79-e73a-fb03653db06e.png">

oheya/hand が追加されて、その中に選択したグーが追加されています。
![スクリーンショット 2018-10-17 15.59.13.png](https://qiita-image-store.s3.amazonaws.com/0/256383/7e30746e-50b4-db5b-e77d-f3e518d3d840.png)

一つのエミュレータや端末では一人分の手しか勿論出せない仕様なので、データベース側でもうひとりのユーザーを追加します。
![スクリーンショット 2018-10-17 15.59.36.png](https://qiita-image-store.s3.amazonaws.com/0/256383/5c353013-ff0c-45dc-9e71-fdba5b4336c1.png)

追加し終わると部屋のMAX人数は2に設定しているので、みんな手を出したことになります。
<img width="289" src="https://qiita-image-store.s3.amazonaws.com/0/256383/3b490363-ffac-b336-dba1-6cecb44daf01.png">

結果を見ると、Functionsが出した勝ち負けを受け取って表示します。勝ちです。
<img width="289" src="https://qiita-image-store.s3.amazonaws.com/0/256383/e8a59aee-590c-05f7-20ae-b9f1b255bb31.png">

これでどうにかしてアプリをインストールしてもらえば、オンラインで友達とじゃんけんすることができます。
Functionsのjsを書き換えれば他のゲームやアプリにも使用することができます。
わざわざFunctionsで処理をするメリットと言えば結果を不正に改竄されたりしにくいところ？？

# まとめ
- Firebase Cloud Functionsでじゃんけんの手を判定した。
- Firebase Realtime Databaseを使ってアプリを作った。

#参考
###Firebase
Firebase
https://qiita.com/tetotetote/items/7272bcfac14d29fbca57

Firebase functions
https://firebase.google.com/docs/functions/get-started?authuser=1

Firebase ローカルでの実行
https://firebase.google.com/docs/functions/local-emulator?hl=ja

Cloudシェルの使い方
https://developers-jp.googleblog.com/2017/10/testing-functions-locally-with-cloud.html

Datasnapshot リファレンス
https://firebase.google.com/docs/reference/node/firebase.database.DataSnapshot?hl=ja

アロー関数は無名関数の省略記法
https://e-yota.com/webservice/js_ecma6_arrow_function/

###アプリ側
アクティビティ遷移
https://www.usaco-pg.com/2017/05/01/kotlin-android-intent/

ラジオボタン
http://buildbox.net/2018/01/kotlin-radiobutton/

aync/await
https://hacklifeinfo.com/kotlin-async-await/