Firebase Web Codelab をGoogle Cloud Platformで。詰まった箇所メモ

FirebaseをWebアプリで使用するチュートリアルであるFirebase Web CodelabをCloud Shellでやってみました。簡略化するため、インスタンスは作らずにCloud Shellを使いました。74分で終わるという目安だったのですが、私自身がWebに関する知識が乏しいこともあり、結構かかりました。Firebase Web Codelabの進め方は公式ページに書いてあるため、こんなに時間がかかった原因と詰まった部分をメモしておきます。
Firebase Web CodelabのFriendly Chatチュートリアル

Google Cloud Platform(GCP)

完成したもの

• 時間がかかった原因
  
  • 公式ページを見て進めてなかった（英語を読めなかった）。
    • 解説ページの手順を見て進めており、手順を間違えていました。公式ページの英語が嫌な人は、Google Chromeのページ翻訳機能を使うと簡単に日本語訳できます。しかし、機械翻訳なのでおかしい部分も出ます。
      
  • Cloud Shellにおけるlocalhostの意味が分かってなかった。
    
    • 加えてポート番号とか、URLをきちんと確認していませんでした。
      
  • Javascriptコンソールが何かわかってなかった
    
    • 知識不足でした。
      

4. Install the Firebase command line interface

ポイント1

firebase login --no-localhost

と入力してください。localhostは、Cloud Shellではなく実際に自分が動かしているPCのためlocalhostに誘導されてログインページにアクセスできません。

ポイント2

次の問題として、上記のように入力すると

このような画面となり、Visit this URL on any device to log inの下のURLをクリックしても、ログインページは開きません。このURLは3行ほどあるのですが、よく見るとこの画像では白塗りしていない部分しかURLに入力できていません。3行のURL全てをコピーしてブラウザのアドレスバーに張り付けてログインページを開いてください。

ポイント3

firebase use --add

はweb-startに移動してから入力してください。

5 Run the starter app locally

ポイント1

4で

firebase init

を実行していない場合は実行してください。（Firebaseコンソールのスタートガイドに記載があるのですが、このチュートリアルには記載がありません）

上下キーでカーソル移動、スペースキーでチェックが入ります。すべてをチェック状態にしてからEnterを押します。その後の項目はEnter連打で。

ポイント2

firebase serve -p 8080

としないとlocalhostに誘導されるため開きません。このように入力することでCloud Shellの8080ポートで開くことができます。4のログイン時とは違い、こちらはコンソールのURLクリックで開きます。
エラーが出る場合は、

firebase use --add

をweb-startで入力したか、現在のディレクトリがweb-startかどうかを確認してください。この時のエラーメッセージではディレクトリ間違いと連想できないです。

7. Setup user Sign in

作成した後のテストで実際にSIGN-INをしようとすると、開いたウィンドウがログイン途中で閉じてログインできません。これはFirebaseコンソールの[authentication]-[ログイン方法]の承認済みドメインにCloud Shellで開くページが登録されていないことが原因です。「ドメインの追加」でCloud Shellで開くページのURLを登録してください。

8. Read messages

今回使うデータベースはCloud FirestoreではなくRealtime Databaseです。

11. Show notifications

javascriptコンソールは、ブラウザでF12キーを押すと出る項目の「console(コンソール）」のことです。

HTTPリクエストの

curl -H "Content-Type: application/json" \
     -H "Authorization: key=YOUR_SERVER_KEY" \
     -d '{
           "notification": {
             "title": "New chat message!",
             "body": "There is a new message in FriendlyChat",
             "icon": "/images/profile_placeholder.png",
             "click_action": "http://localhost:5000"
           },
           "to": "YOUR_DEVICE_TOKEN"
         }' \
     https://fcm.googleapis.com/fcm/send

サーバーキーとデバイストークンの文字列は長いので、\ごとに分けて入力すると間違えにくいです。click_actionのURLは自分のFriendlyChatのURLにしてください。
チャットが入力されるたびに通知を出す機能は実装してません。上記のコマンドで通知が出ればOKです。

終わりに

先人の知恵に感謝します。先人の知恵を借り、何とか完遂しました。Webの知識も少し勉強する形となりました。Firebaseを使って何か作りたいですが、その前にWebアプリの作り方やWebの勉強をしなければと思いました。

先人の知恵

Firebase入門のWebチャットを作ろうチュートリアルでハマった箇所メモ
お手軽Firebase Codelab を Google Cloud Shell で試す時のメリット・落とし穴と解決策