Google Assistantの反応と同時にPush通知を出す

# この記事は何？
Google Assistantと外部のサービスを自前で接続します。ブラウザ好きなので、今旬なPWA(Progressive Web App)の中でも実装した達成感が出る**Push通知**と連携させます。今回はFirebase Cloud Messageを使います。

# 実装すること
Google Assistantで作ったシナリオの中にFCMでPush通知を送るように仕掛けます。シナリオは前回の[Google Assistantを超デキるVoice Recognition Systemとして使う](https://qiita.com/ryoyakawai/items/0960ef3b5cbc7f4f87dd)と全く同じなので、最初にそちらを実装しておいてください。

# 実装
## Firebase



### データベースの設定
Push通知を送るためには、通知を送る側が、クライアント側で生成されるユニークなキーを知っておく必要があります。今回はサーバ側が送りますので、Firebaseのデータベースを記憶領域として利用します。
<img width="600" alt="Screen Shot 2017-10-22 at 5.03.19 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/9903b026-2003-19c3-9ad5-fbcb5f04fea7.png">

真ん中の青色の「GET STARTED」をクリックするだけです👍

<img width="600" alt="Screen Shot 2017-10-22 at 5.03.37 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/6189cbd5-eff5-24ec-40c0-08c0f710559d.png">

### データベースの権限
Read、Writeの権限を設定します。お試しなので、どちらも**ザル**にします。
<img width="600" alt="Screen Shot 2017-10-22 at 5.05.31 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/628371f9-7a88-512e-8016-6974b629a086.png">

### Firebase Hostingを設定
前回はDialogflowのFulfillmentに用意されているブラウザ上に用意されたエディタに書き込みましたが、今回はリモートからファイルのアップロード（デプロイ）を行います。ここではFirebaseのHostingサービスを利用するので、ここで利用できるようにします。
<img width="600" alt="Screen Shot 2017-10-22 at 5.42.44 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/a86f36f2-53f5-02c2-573c-854fb075c23c.png">

ここでも青色の「GET STARTED」をクリックします。

<img width="600" alt="Screen Shot 2017-10-22 at 5.42.53 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/90f265f2-7dcc-46f4-007f-784132b819f3.png">

続いて、ターミナルからLocalの環境の準備をします。
`Node.js`のインストール等を画面の指示通りに行ってください。

````shell
$ npm install -g firebase-tools;
````

までできたら「CONTINUE」ボタンを押して次に進みます。

<img width="600" alt="Screen Shot 2017-10-22 at 5.45.41 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/1aed115b-b6ce-75d7-9458-68b4a5e3973c.png">

ここも画面の指示通りに、

````shell
$ firebase login;
$ firebase init;
$ firebase deploy;
````
`firebase init`をするとターミナルで対話型のセットアップが始まります。
1つ目は、
` > Hosting: Configure and deploy Firebase Hosting sites`
を、
2つ目は、[前回作成したプロジェクト](https://qiita.com/ryoyakawai/items/0960ef3b5cbc7f4f87dd)を指定してください。
ここまで完了したら「FINISH」ボタンを押して完了です。

<img width="600" alt="Screen Shot 2017-10-22 at 6.03.29 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/653ebcfe-6cd8-ae64-61c7-b87673987c4d.png">


## ソースの取得とデプロイ
### ソースの取得
次にソースをダウンロードします。
GitHubの[ここ](https://github.com/ryoyakawai/assistant_factaboutgoogle_fcm)に用意したので使ってください。

````shell
$ git pull https://github.com/ryoyakawai/assistant_factaboutgoogle_fcm.git;
$ cd assistant_factaboutgoogle_fcm;
````
`git pull` が終わったら先程`firebase init`をしたときにできたディレクトリの中身を、そっくりそのまま`assistant_factaboutgoogle_fcm`に上書きしてください。
こでれ`assistant_factaboutgoogle_fcm`ディレクトリからでも`deploy`ができるようになったはずです。（ちょっと自信ないですが・・・😓）


### キーとかを書き込む
2種類あります。
Firebaseを動かすためのキー。
左ペインのメニューから`Overview`を選択すると下の画面になりますので、赤丸の画像をクリックしてください。
<img width="600" alt="Screen Shot 2017-10-22 at 7.20.56 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/580fb219-b1b2-8e28-ff77-44c78bf7dd47.png">

するとこんな画面が出てきます。`config`のみをコピーして、[`assistant_factaboutgoogle_fcm/apps/keys.js`](https://github.com/ryoyakawai/assistant_factaboutgoogle_fcm/blob/master/apps/keys.js)にコピーしてください。
<img width="600" alt="Screen Shot 2017-10-22 at 7.23.41 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/af0e1818-90eb-c5b2-5086-e2019a867ee3.png">



次に便宜上（本来はサーバには上げないでくださいね）、サーバキーをコピーします。左ペインのメニューの[Overview]の隣にある歯車のアイコンをクリックして「Project settings」をクリック。

<img width="600" alt="Screen Shot 2017-10-22 at 6.23.01 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/6bbc81f0-0f8f-8b8e-338c-9b59f9d047bf.png">

表示された画面「CLOUD MESSAGING」のタブを表示すると`Server Key`を確認することが可能です。
<img width="600" alt="Screen Shot 2017-10-22 at 6.23.17 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/bb9bec3b-7f78-a002-b25d-3fffaa99979e.png">

キーのコピー（[`assistant_factaboutgoogle_fcm/apps/keys.js`](https://github.com/ryoyakawai/assistant_factaboutgoogle_fcm/blob/master/apps/keys.js)の作成）が完成したら、もう1度デプロイします。
`assistant_factaboutgoogle_fcm`の中にいることを確認して以下のコマンドをターミナルから行ってください。ここでは`functions`と`hosting`のみをデプロイしていますが、`--only　functions, hosting`はつけなくてもOKです。

````shell
$ firebase deploy　--only functions,hosting;
````

完成するとweb側のせってい画面はこんな感じになります。既にデプロイをしているので、この状態で見るとDeployHistoryにその履歴が表示されているはずです。
<img width="600" alt="Screen Shot 2017-10-22 at 6.03.29 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/889bb484-b14f-6c71-835d-eb7c1370d548.png">





## 認証の有効化
テストとはいえ誰が来たのか分かるようにしておきます。
左ペインのメニューから`Authentication`をクリックして、`SIGN-IN METHOD`のタブを表示します。選択肢はいろいろありますが、ここでは`Google`の認証のみ有効にします。
<img width="600" alt="Screen Shot 2017-10-22 at 6.18.37 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/5bf1e975-d8d5-7c7e-a0b1-24c2e1cdf9ef.png">
最後の`SAVE`ボタンを押すのを忘れずに。

ここで実装は終了です。お疲れ様でした。

## テストサイトの表示
デプロイをしたときにターミナルに以下の3つが表示されるはずです。

````shell
Project Console: https://console.firebase.google.com/project/hogehoge/overview
Hosting URL: https://hoge.firebaseapp.com
Function URL (dialogflowFirebaseFulfillment): https://hoge.cloudfunctions.net/dialogflowFirebaseFulfillment````
````

ここの「**`Hosting URL`**」にアクセスしてください。

### ログインとPush通知の許可
「**`Hosting URL`**」にアクセスすると以下のような画面が出てきます。のでログインをしてください。

<img width="600" alt="Screen Shot 2017-10-22 at 7.49.39 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/fdf276d7-9455-9775-1f5b-51a8d8983dd3.png">

ログインが完了すると以下の画面、Push通知を許可するボタンの画面になりますので、クリックしてPush通知を許可してください。
<img width="600" alt="Screen Shot 2017-10-22 at 7.53.17 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/a7dc9e0e-e618-93ed-1ac7-8474e3f01a0d.png">

これで、ブラウザはサーバによって特定されましたのでPush通知が飛んで来るはずです。
ここからGoogle Assistantからのテストになります。前回の[動作のテストを行う準備をする](https://qiita.com/ryoyakawai/items/0960ef3b5cbc7f4f87dd#%E5%8B%95%E4%BD%9C%E3%81%AE%E3%83%86%E3%82%B9%E3%83%88%E3%82%92%E8%A1%8C%E3%81%86%E6%BA%96%E5%82%99%E3%82%92%E3%81%99%E3%82%8B)に従ってSimulatorでテストを行ってください。

アプリの内容はGoogleさんの**歴史**と**本社**を教えてくれるものでした。どちらを聞いてもなんらかのPush通知が届くようになっています。

### Push通知を受け取る
先程ログインしたページのタブが閲覧できるようにになっていた場合は、ページの下にPush通知の内容が表示されます。
<img width="600" alt="Screen Shot 2017-10-22 at 8.01.32 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/cb945f3c-a706-e6c5-d609-30df2e164f96.png">

先程ログインしたページのタブが閲覧できない場合は、OSによって違いますがmacOSの場合は以下の画像のようになります。
<img width="600" alt="Screen Shot 2017-10-22 at 6.44.34 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/5a1b819a-73bc-2bb8-8069-26bc402754b9.png">


#まとめ
スクリプトも説明せずにザザッときてしまいましたが、応用例として例えばGoogle Assistantの説明に従って画像を表示するとか、そういったブラウザ経由で何かをすることが可能になりました。アイデア次第ではいろいろ楽しめると思います。

# おまけ
## 誰がログインしてきたかを確認
左ペインのメニューの`Authentication`の「USERS」のタブで確認可能です。
<img width="600" alt="Screen Shot 2017-10-22 at 8.12.48 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/8bacc965-413e-ef44-4766-50eafa89696d.png">

## どれだけの人がPush通知を受け取るか確認
左ペインのメニューの`Database`の「DATA」のタブで確認可能です。
通知を送った時についでに受け取れなかったユーザのTokenは削除するようなスクリプトになっていますので、ここにいるのは通知を受け取れるアクティブなユーザのみとなります。
<img width="600" alt="Screen Shot 2017-10-22 at 8.15.06 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/61221/decde225-6579-8190-375e-35eff9f2e4a3.png">