create ionic chat app with firebase
create ionic chat app with firebase
create ionic chat app with firebase

This tutorial we’re going to create simple Ionic chat app with firebase backend

Technologies used:

  • Ionic Framework (v3)
  • Firebase 3 (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

create-new-firebase-prject
create-new-firebase-prject

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

get-firebase-key
get-firebase-key

step 3: Add Rules with your database

{
 "rules": {
 ".read": "auth == null",
 ".write": "auth == null"
 }
}
add rule
add rule

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

Creating Ionic Project

Once we created project from firebase, we can set up new Ionic project for our chat application

Create new Ionic project

ionic start  --v2 ionicfirechat blank

Change your working directory

cd ionicfirechat

Add your platform (if required)

ionic platform add android
ionic platform add ios

Installing & Setup Firebase (app.component.ts)

Add firebase node_modules to your project

npm install firebase --save

import firebase 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>

We’re getting a username in prompt box inside ionicViewDidLoad()

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 into 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;
 });
Please login to download source code Login Here
Sundaravel M

About the author: Hey! It's me sundar. (Yea, I'm the founder of codesundar.com). I'm a passionate computer programmer who loves modern web and mobile development. feel free to reach me : Facebook - Twitter - YouTube