How to Build Firebase Chat Using Ionic

How to Build Firebase Chat using Ionic

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.

add firebase to your app

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

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:

realtime database

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:

table structure

Chats:

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

Structure of this table will be as given below:

Ionicchat table

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:

ChatUserList
ChatUserList structure

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.

The following two tabs change content below.

Shailesh Rohit

Software Developer at Dev Information Technology Ltd.
I am Android Application Developer having 4 year of experience. I am expert at social integration of applications with Facebook & Twitter. I have also integrated real time user tracking apps like UBER. I have worked on different payment gateway integration with applications.

Latest posts by Shailesh Rohit (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *