Firestore + Cloud Functions + Hangouts Chatで簡易メッセージフォームを作る

2. Firestoreへの書き込み

普通にaddする。
Cloud Firestore にデータを追加する  |  Firebase

以下疑似コード。
今後運営からお返事を書くかもしれないので、データにはユーザー情報も持たせておく。あと最新順に並び替えるようにtimestampも持たせておく。

const postCardData = {
  content: message,
  author: {
    uid: user.uid,
    email: user.email
  },
  timestamp: firebase.firestore.FieldValue.serverTimestamp()
}
// {uid}は仮、ちゃんと入れないとダメ
db.collection('/userdir/{uid}/postcards/').add(postCardData)

3. Hangouts ChatのWEB Hook URLを取得

チャットルームを作り、左上のところからつくれる。場所は分かりづらいけど、名前とオプションでアイコンを設定するだけで作れる。

4. FunctionsのonCreateで2を受け取ってChatのAPIにPOST

公式通り、Firebase Functions環境を準備する。
Firebase Cloud Functions  |  Firebase

Hangouts ChatのWEB Hookについては公式参照。
Using incoming webhooks  |  Hangouts Chat API  |  Google Developers

リクエストにはrequestを使った。
www.npmjs.com

jsonという専用パラメータで送るのが分からずしばらくハマった。
jsonにオブジェクトを入れるとstringifyして送ってくれる。

まだログもいろいろ出してて、完成じゃないけどコードは下記のような感じ。
本文を作るところは何かしらテンプレート的なものを使った方がよさそう。

const functions = require('firebase-functions');
const request = require('request');
// https://firebase.google.com/docs/functions/manage-functions?hl=ja
const runtimeOptions = {
  timeoutSeconds: 30,
  memory: '128MB'
}

const WEBHOOK_URL = "https://chat.googleapis.com/v1/spaces/XXXXXXXXXXXXXXXXXXXXXXX"

exports.sendPostCard2Chat = functions
  .runWith(runtimeOptions)
  .firestore
  .document('/userdir/{uId}/postcards/{postCardId}')
  .onCreate((snap, context) => {
      console.log('snap', snap)
      console.log('context', context)
      const val = snap.data();
      console.log('bodyText', bodyText)
      const options = {
        url: WEBHOOK_URL,
        headers: {
           'Content-Type': 'application/json; charset=UTF-8'
        },
        json: {text: 'email: ' + val.author.email + ' \n' + 'uid: ' + val.author.uid + ' \n' + 'site: ' + val.site + ' \n' +  'message:\n' + val.content}
      };
      request.post(options,
        (e, r, body) => {
          console.log('callback e:', e)
          console.log('callback r:', r)
          console.log('callback body:', body)
        }
      )
    });

ハマりどころとして、タイムアウトとか、メモリ、リージョンもこのコード上で指定できるが、リージョンを日本にしてしまうと動かなかった。
おそらくFirestoreがus-centralだからかなぁと思ったがよく調べてない。

これで、いまどきのサーバーレス＆チャットで簡単なメッセージフォームができた。
データもチャットだけでなくFirestoreにも残せるので夢が広がる。

問題としてはこれだけのために普段使ってないHangouts Chatを開かねばいけないところ。

あと注意点としてFirestoreもFunctionsもβなので、大事なお問合せには使わない方がよさそう。