LoginSignup
7
4

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-10-17

はじめに

この記事は3編構成になっていて、
①環境構築編
②Functions編
③アプリ編
になっています。

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

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

cloneできたらAndroid StudioでImport Projectをして読み込みます。
Firebaseを使用するアプリのため各自のgoogle-services.jsonを追加しないとビルドは通らないです。

導入 

アプリの追加

google-services.jsonの追加を行います。
まず、Firebaseの画面を開いて下の画像のように設定ボタンを押し、[プロジェクトの設定]を開きます。
スクリーンショット 2018-10-17 15.23.40.png

全般を開いて下の方にスクロールします。
スクリーンショット 2018-10-17 15.25.44.png

すると、プロジェクトほにゃほにゃには現在アプリがありません。
となっているはずなので、真ん中の[AndroidアプリにFirebaseを追加]を押します。
スクリーンショット 2018-10-17 15.26.00.png

アプリの登録

アプリの登録をします。 com.sample.jankenを入力します。
その他の項目は任意なので空白でいいです。
スクリーンショット 2018-10-17 15.43.25.png

google-sevices.jsonのダウンロード

次に行くと、google-sevices.jsonのダウンロードができます。
これが取れたら後は簡単です。
スクリーンショット 2018-10-17 15.43.46.png

Android Studioで一番上の赤線部分がProjectになるように選択します。app配下にgoogle-sevices.jsonを配置します。
スクリーンショット 2018-10-17 17.27.55.png

アプリの動作確認

これでビルドが通ると思うのでエミュレーターや実機にアプリを入れて起動します。
名前を入力して部屋を作ります。

部屋名と部屋のMAX人数を入力し、作成を押します。

FirebaseのRealtime Databaseを開くと、さっき作成した部屋のデータが追加されています!
スクリーンショット 2018-10-17 15.58.28.png

アプリに戻って今度はじゃんけんの手を選択します。その後[確定]ボタンを押します。
(結局グーを選びました。)

oheya/hand が追加されて、その中に選択したグーが追加されています。
スクリーンショット 2018-10-17 15.59.13.png

一つのエミュレータや端末では一人分の手しか勿論出せない仕様なので、データベース側でもうひとりのユーザーを追加します。
スクリーンショット 2018-10-17 15.59.36.png

追加し終わると部屋のMAX人数は2に設定しているので、みんな手を出したことになります。

結果を見ると、Functionsが出した勝ち負けを受け取って表示します。勝ちです。

これでどうにかしてアプリをインストールしてもらえば、オンラインで友達とじゃんけんすることができます。
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/

7
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
4