Simplifying IT, Empowering Businesses

In this blog, we shall build a chat application using Ionic and Firebase as the backend service. Developers do not have to manage servers or write APIs to work on Firebase chat. If you want to create a simple app using firebase and ionic, building firebase chat is easy to achieve and powerful at the same time.

Getting started:

First, we will set up the firebase and table structure needed to build a chat application:

Firebase Project Setup:

Step 1: Open https://console.firebase.google.com/

Step 2: Create Project

Step 3: Go to Project Overview and select Project Settings.

Step 4: click on “Add app,” and below, a popup will appear.

First is used for iOS.

The second is used for Android.

The third is used web.

Forth one is used for UNITY.

Step 5: Click on Add WEB app and copy firebaseConfig, and past to your project.

Config file code:

config = {
    apiKey: 'AIzaSyDYOiCmoH-5HAYWT7ODcUg-qG-YkdzPnck',
    authDomain: 'ionicchat-6e260.firebaseapp.com',
    databaseURL: 'https://ionicchat-6e260.firebaseio.com',
    projectId: 'ionicchat-6e260',
    storageBucket: 'ionicchat-6e260.appspot.com',
  };

Step 6: Select Realtime Database, which is available on the left side menu in FIREBASE

Step 7: Tap on “Rules,”  which is available topside in Realtime Database 

Step 8: Change Rules and allow read and write permission as given below:

Step 9: Install the below plugin:

“npm I firebase.”

Step 10: Need below structures for firebase chat into Real-time Database 

Users:

In this table, we will do the entry of users, and based on this table user will act in Firebase chat.

The structure of this table will be as given below:

Chats:

In this table, we will do the entry of user messages.

Structure of this table will be as given below:

ChatUserList:

In this table, we will do an entry of all user’s last messages. 

 For example: if USER A is doing chat with USER B, then their latest message entry will appear here into their respective user ID’s as given below:

Groups:

In this table, we will add access to the group.

The structure of this table will be as given below:

Now you know the basics of how firebase and Ionic works. Making a chat application using Ionic will be easy. However, if you still require any assistance, do not hesitate to contact an expert at DEV IT.