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チュートリアル](https://codelabs.developers.google.com/codelabs/firebase-web/index.html#0)

[Google Cloud Platform(GCP)]
(https://console.cloud.google.com/getting-started?hl=ja)

[完成したもの]
(https://friendlychat-8d0aa.firebaseapp.com/)

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



#4. Install the Firebase command line interface
## ポイント1
```console
firebase login --no-localhost
````
と入力してください。localhostは、Cloud Shellではなく実際に自分が動かしているPCのためlocalhostに誘導されてログインページにアクセスできません。
## ポイント2
次の問題として、上記のように入力すると
![image.png](https://qiita-image-store.s3.amazonaws.com/0/295196/953e2c8a-733b-7910-1dc9-349071807ef3.png)
このような画面となり、Visit this URL on any device to log inの下のURLをクリックしても、ログインページは開きません。このURLは3行ほどあるのですが、よく見るとこの画像では白塗りしていない部分しかURLに入力できていません。3行のURL全てをコピーしてブラウザのアドレスバーに張り付けてログインページを開いてください。
## ポイント3
```console
firebase use --add
````
はweb-startに移動してから入力してください。
#5 Run the starter app locally
## ポイント1
4で

```console
firebase init
````
を実行していない場合は実行してください。（Firebaseコンソールのスタートガイドに記載があるのですが、このチュートリアルには記載がありません）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/295196/7193037c-096d-1a48-c7f8-bd498ad7eda5.png)

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

## ポイント2

```console
firebase serve -p 8080
````

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

```console
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リクエストの

```console
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チャットを作ろうチュートリアルでハマった箇所メモ]
(https://qiita.com/msrx9/items/547ef6856e8501b60d54)
[お手軽Firebase Codelab を Google Cloud Shell で試す時のメリット・落とし穴と解決策]
(https://qiita.com/Yatima/items/f550951ceb830f934dfd)