Ionic Chat app using Firebase

Published in

codesundar

3 min readApr 19, 2017

This article, I’m going to explain how to create realtime chat application using Firebase Backend ( A Simple Group Chat)

Download Source: https://github.com/codesundar/ionic2-chat-with-firebase

Technologies used:

Ionic Framework (v3)
Firebase JS SDK(we’re not going to use AngularFire)

Creating new project in Firebase

First, we need to create new project in firebase

Step 1: Login with your Firebase (https://firebase.google.com) & create new project

step 2: Click “add firebase to your web app” & get keys

step 3: Add Rules with your database

{
 “rules”: {
 “.read”: “auth == null”,
 “.write”: “auth == null”
 }
}

Note: we changed authentication to null; so anyone can access to your database

Creating Ionic Project

Once we created project from firebase, we can setup new ionic project for our chat application

Create new Ionic project

ionic start ionicfirechat blank

Change your working directory

cd ionicfirechat

Add your platform (if required)

ionic platform add androidionic platform add ios

Installing & Setup Firebase (app.component.ts)

Add firebase node_modules to your project

npm install firebase --save

import firbase in app.component.ts

import * as firebase from ‘firebase’;

Add configuration to app.component.ts; Replace with your Firebase Configuration

let config = {
 apiKey: “YOUR_APIKEY”,
 authDomain: “YOUR_AUTH_DOMAIN”,
 databaseURL: “YOUR_DATABASE_URL",
 projectId: “YOUR_PROJECT_ID”,
 storageBucket: “YOUR_STORAGE_BUCKET”,
 };
firebase.initializeApp(config);

Creating UI for chat (home.html)

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic 2 Firebase Chat
    </ion-title>
  </ion-navbar>
</ion-header><ion-content padding>
 <ion-list no-lines>
  <ion-item *ngFor="let message of messagesList">
   <h3>{{message.name}}</h3>
   <p>{{message.message}}</p>
  </ion-item>
 </ion-list>
</ion-content>
<ion-footer>
 <ion-item>
  <ion-input type="text" placeholder="type here..." [(ngModel)]="newmessage"></ion-input>
  <button ion-button clear item-right (click)="send()">Send</button>
 </ion-item>
</ion-footer>

Here, we need to create a prompt for getting username;

this.alert.create({
  title: 'Username',
  inputs:[{
    name: 'username',
    placeholder: 'username'
  }],
  buttons:[{
    text: 'Continue',
    handler: username =>{
      this.name = username
   }
  }]
 }).present();

Sending Messages to Firebase

When user clicks send button we need to call send() to insert messages in to firebase & clear existing messages

send(){
 this.ref.push({
    name: this.name.username,
    message: this.newmessage
 });
}

Reading Messages from Firebase

When user created new message, we need to display inside <ion-content>

this.ref.on('value',data => {
    let tmp = [];
    data.forEach( data => {
     tmp.push({
      key: data.key,
      name: data.val().name,
      message: data.val().message
     })
    });
    this.messagesList = tmp;
 });