K5 Playground

Firebase Realtime Databaseを使ってチャットアプリを作る

40 min
Saito
  1. 1. 概要
    1. 1.1. 材料
    2. 1.2. 機能
  2. 2. アプリの開発
    1. 2.1. Frontend
    2. 2.2. Backend
  3. 3. アプリのデプロイ
    1. 3.1. Backend
    2. 3.2. Frontend
  4. 4. ダウンロード
  5. 5. Version

K5 Playgroundで、Firebase Realtime Databaseを使ったチャットアプリを作る方法を説明します。

概要

材料

  • テンプレート: Chat
  • APIロジック: Firebase Realtime Database

機能

  • チャットUI
  • Firebase Realtime Databaseでのチャットメッセージ管理

アプリの開発

K5 Playgroundにアクセスします。

Frontend

  1. Chatテンプレートを選択します。

Backend

  1. POST /sample_streamsエンドポイントを編集します。

    1. MongoDB Stream Channel APIロジックを削除します。

    2. 右側のDatabaseメニューからFirebaseのUpdate JSONを追加して、次のように修正します。

      1
      2
      3
      4
      var dataPath = 'users/[auth user id]/streams';
      var newPostKey = firebase.database().ref(dataPath).push().key;
      var newData = {};
      newData[newPostKey] = req.body.name;
      1
      2
      3
      4
      next({
         _id: newPostKey,
         name: req.body.name,
      });

  2. GET /sample_streamsエンドポイントを編集します。

    1. MongoDB Stream Channel APIロジックを削除します。

    2. 右側のDatabaseメニューからFirebaseのFetch JSONを追加して、次のように修正します。

      1
      var dataPath = 'users/[auth user id]/streams';
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      firebase.database().ref(dataPath).once('value').then(function(snapshot){
           var streamList = snapshot.val();
           var result = Object.keys(streamList).reduce(function(prev, key){
             prev.push({
               _id: key,
               name: streamList[key]
             });
             return prev;
           }, []);
           next(result);          
      }).catch(function(error){
           next({});
      });

  3. POST /sample_messages エンドポイントを編集します。

    1. MongoDB Stream APIロジックを削除します。

    2. 右側のDatabaseメニューからFirebaseのUpdate JSONを追加して次のように修正します。

      1
      2
      3
      4
      var dataPath = 'users/[auth user id]/messages';
      var newData = {}
      var newPostKey = firebase.database().ref(messagePath).push().key;
      newData[newPostKey] = req.body;
      1
      next(Object.assign({_id: newPostKey}, req.body));

  4. GET /sample_messages エンドポイントを編集します。

    1. MongoDB Streamロジックを削除します。

    2. 右側のDatabaseメニューからFetch JSON APIロジックを追加して次のように修正します。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      firebase.database().ref(dataPath).once('value').then(function(snapshot) {
          var messageList = snapshot.val();
          var where = JSON.parse(req.query.filter).where;
          var result = Object.keys(messageList).reduce(function(prev, key) {
            if (messageList[key].stream_id === where.stream_id) {
              prev.push(Object.assign({ _id: key }, messageList[key]));
            }
            return prev;
          }, [])
          next(result);
      }).catch(function(error){});

  5. アプリをダウンロードします。

アプリのデプロイ

Backend

1
2
cd backend
cf push [APP_NAME]

Frontend

1
2
3
4
5
6
cd frontend
npm install
set API_URL=[Backend URL] # for Windows
export API_URL=[Backend URL] # for Mac/Linux
npm run build
cf push [APP_NAME] -p public

ダウンロード

Version

  • Chat Template: v1.0.0
Tutorial Chat React.js Flux Node.js Swagger BFF SPA Microservice K5 K5 CF Firebase