K5 Playground

Chat application with Firebase Realtime Database

40 min
Saito
  1. 1. Information
    1. 1.1. Ingredients
    2. 1.2. Functions
  2. 2. Create the application
    1. 2.1. Frontend
    2. 2.2. Backend
  3. 3. Deploy the application
    1. 3.1. Backend
    2. 3.2. Frontend
  4. 4. Download
  5. 5. Version

Everyone loves to chat. When you do one, it’s fun. But when you build the application, it is not as easy as you think.

The Chat Template comes in handy when it comes to building the chat application.
See this tutorial and you’ll get it done in 40 minutes.

Information

Ingredients

  • Template: Chat
  • API Loigcs: Firebase Realtime Database CRUD

Functions

  • Storing chat data in Firebase Realtime Database.
  • Loading chat data from Firebase Realtime Database.

Create the application

Frontend

  1. Choose the Chat Template.

  2. Customize the UI in K5 Playground.

Backend

  1. Replace every API Logic with Firebase API Logic and edit the codes.

    1. Select the POST /sample_streams endpoint.

      1. Delete the Stream Channel API Logic.

      2. Add the Update JSON API Logic from Database menu at the right pane.

      3. Set up the client by setting API key, project id and bucket name.

        1
        2
        3
        4
        5
        firebase.initializeApp({
          apiKey: '[API key]',
          authDomain: '[project id].firebaseapp.com',
          databaseURL: 'https://[bucket name].firebaseio.com'
        });

      4. Set an email and password for signInWithEmailAndPassword authentication .

        1
        2
        var authEmail = '[email]';
        var authPassword = '[password]';

      5. Set the streamPath into which you insert a name of new stream. 

        1
        var streamPath = 'users/[auth user id]/streams';

      6. Set the newData to save the name.

        1
        2
        3
        4
        5
        6
        7
        // generate key(id) for new stream
        var newPostKey = firebase.database().ref(streamPath).push().key;

        // Note:
        //  Firebase has no native support for arrays.
        //  The name should be stored as json under the path.
        newData[newPostKey] = req.body.name;

      7. Create the response data. 

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        firebase
          .database()
          .ref(streamPath)
          .update(newData)
          .then(function() {
            // success: return the response data.
            next({
              _id: newPostKey,
              name: req.body.name,
            });
          })
          .catch(function(error) {
            // @todo handle error
            next({});
          });

    2. Select the GET /sample_streams endpoint

      1. Delete the Stream Channel API Logic.

      2. Add the Fetch JSON API Logic from Database menu at the right pane.

      3. Create the response data. 

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        firebase.database().ref(streamPath).once('value').then(function(snapshot) {
          var streamList = snapshot.val();
          // Create a list of chat room.
          var result = Object.keys(streamList).reduce((prev, key) => {
            prev.push({
              _id: key,
              name: streamList[key]
            });
            return prev;
          }, []);

          // success: return the response data.
          next(result);
        }).catch(function(error){
          // @todo handle error
          next({});
        });

    3. Select the POST /sample_messages endpoint

      1. Delete the Stream API Logic.

      2. Add the Update JSON API Logic from Database menu at the right pane.

      3. Set the messagePath into which you insert a message. 

        1
        var messagePath = 'users/[auth user id]/messages';

      4. Set the newData to save a massage.

        1
        2
        3
        4
        // generate key(id) for new stream
        var newPostKey = firebase.database().ref(messagePath).push().key;

        newData[newPostKey] = req.body;

      5. Create the response data. 

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        firebase
          .database()
          .ref(messagePath)
          .update(newData)
          .then(function() {
            // success: return the response data.
            next(
              Object.assign({_id: newPostKey}, req.body)
            );
          })
          .catch(function(error) {
            // @todo handle error
          });

    4. Select the GET /sample_messages endpoint

      1. Delete the Stream API Logic.

      2. Add the Fetch JSON API Logic from Database menu at the right pane.

      3. Create the response data. 

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        firebase.database()
          .ref(messagePath)
          .once('value')
          .then(function(snapshot) {
            var messageList = snapshot.val();
            var where = JSON.parse(req.query.filter).where;

            var result = Object.keys(messageList).reduce((prev, key) => {
              if (messageList[key].stream_id === where.stream_id) {
                prev.push(
                  Object.assign({ _id: key }, messageList[key])
                );
              }
              return prev;
            }, [])

            // success: return the response data.
            next(result);
          }).catch(function(error){
            // @todo handle error
          });

  2. Download the application.

Deploy the application

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

Download

Version

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