このノートは授業中に随時更新します。URLやコードスニペットを随時貼り付けます。授業で作成したコードは[Github](https://github.com/TakashiSasaki/Android2019)にあります。（HackMDはリアルタイムにオンラインで共同編集できるMarkdownエディタです。） ###### tags: `firebase` `android` # 20200114 FirebaseをAndroidで使う復習 1. 冬休み前の復習として HelloKbcSasaki プロジェクトを見直す 2. ウェブアプリの開発環境として、Glitchにアカウントを作成する 3. Glitchでウェブページを書いてみる 4. GlitchからFirebase Hostingにデプロイしてみる # Glitch - オンラインでのウェブアプリケーション開発環境 - Firebase Hosting Serviceにデプロイできる - Github にプッシュプルできる - サーバ側でNode.jsのExpressなどを動かせる - コンテナのコンソールにアクセスできる # Glitchに類似のオンラインサービス - https://glitch.com/ - https://stackblitz.com/ - https://jsfiddle.net/ - https://codepen.io/ - https://paiza.io/ # Androidプロジェクトのビルドでエラーが出る場合のチェックリスト FirebaseをAndroidから使用するために必要なの多くはAndroid StudioのFirebase Assistantが行ってくれますが、その後の作業により開発環境やライブラリがアップデートされプロジェクトがビルドできなくなることがあります。 * Android Studio および SDKを更新する * gradle pluginを更新する（ビルドすると自動的にダウンロードされる） * Project Structureで外部ライブラリを更新する * 正しい google-services.json をFirebase Developer Consoleから app/google-services.json にダウンロードする # HelloKbcSasaki FirebaseのRealtime Databaseに対するデータの読み書きと、Firebase Authenticationによるユーザー認証のサンプル。 https://github.com/TakashiSasaki/Android2019/tree/master/HelloKbcSasaki このgitリポジトリにはgoogle-services.json は含まれていませんので、各自で[Firebase Developer Console](https://console.firebase.google.com/)からgoogle-services.json をダウンロードして app ディレクトリの直下に配置してください。 パッケージ名は com.gmail.takashi316.hello_kbc_sasaki になっていますので、自分のパッケージ名に変更してください。ディレクトリ構造の変更を伴うためAndroid Studioのリファクタリング機能が便利です。google-services.json に記述されているパッケージ名と一致している必要があります。 # FriendlyChat for Android CodelabsにFirebaseを使ったAndroidアプリケーションのサンプルがあります。チュートリアルを見ながら作業を進めてもかまいませんが、コマンドラインでの操作が必要となりますので、授業ではGithubから完成版のコードをコピー＆ペーストしながら作業を進めます。 * Codelabsのチュートリアル https://codelabs.developers.google.com/codelabs/firebase-android/#0 * Githubにある完成したコード https://github.com/firebase/friendlychat-android/tree/master/build-android # FriendlyChat for Web Android版のFriendlyChatアプリと同じ機能をウェブサイトで実現したサンプルです。Android版と同様にCodelabsのチュートリアルに加え完成版のコードがGithubにあります。 このままチュートリアルを進めても構いませんが、コマンドラインでの操作が必要となりますので、授業ではより簡便にウェブアプリケーションを作成できるglitchというサービスを使った方法をご紹介します。具体的にはglitchでHTML, CSS, JavaScriptのコードを記述し、動作を確認した後、Firebase Hostingにデプロイします。 * Codelabsのチュートリアル https://codelabs.developers.google.com/codelabs/firebase-web/#0 * Githubにあるコード https://github.com/firebase/friendlychat-web # 過去の関連プロジェクト ## FirebaseRealtimeDatabaseSample FirebaseのRealtime Databaseにデータを読み書きするサンプル。 ## FirebaseAuthenticationSample Fireabseの認証機能を使ってユーザーを認証するサンプル。