How to make chat app in ionic

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

Technologies used:

• Ionic Framework
• Firebase (we’re not going to use AngularFire)

Creating a new project in Firebase

First, we need to create a new project in firebase

Step 1: Log in with your Firebase (http://firebase.google.com) & create a new project

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

Step 3: Add Rules with your database

{
  <span class="hljs-attr">"rules"</span>: {
  <span class="hljs-attr">".read"</span>: <span class="hljs-string">"auth == null"</span>, 
  <span class="hljs-attr">".write"</span>: <span class="hljs-string">"auth == null"</span>
  }
}

Add a rule

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

Creating Ionic Project

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

Create a new Ionic project

ionic <span class="hljs-literal">start</span> ionicfirechat blank

Change your working directory

<span class="hljs-built_in">cd</span> ionicfirechat

Add your platform (if required)

ionic platform <span class="hljs-keyword">add</span><span class="bash"> android
</span>ionic platform <span class="hljs-keyword">add</span><span class="bash"> ios</span>

Installing & Setup Firebase (app.component.ts)

Add firebase node_modules to your project

npm <span class="hljs-keyword">install</span> firebase <span class="hljs-comment">--save</span>

import firebase in app.component.ts

<span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> firebase <span class="hljs-keyword">from</span> <span class="hljs-string">'firebase'</span>;

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

let config = {
<span class="hljs-attr">  apiKey:</span> “YOUR_APIKEY”,
<span class="hljs-attr">  authDomain:</span> “YOUR_AUTH_DOMAIN”,
<span class="hljs-attr">  databaseURL:</span> “YOUR_DATABASE_URL<span class="hljs-string">",
  projectId: “YOUR_PROJECT_ID”,
  storageBucket: “YOUR_STORAGE_BUCKET”,
  };
firebase.initializeApp(config);</span>

Creating UI for chat (home.html)

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

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

<span class="hljs-keyword">this</span>.alert.create({
<span class="hljs-string">title:</span><span class="hljs-string">'Username'</span>, 
<span class="hljs-string">inputs:</span>[{
<span class="hljs-symbol">
  name:</span><span class="hljs-string">'username'</span>, 
<span class="hljs-symbol">  placeholder:</span> <span class="hljs-string">'username'</span>

}], 
<span class="hljs-string">buttons:</span>[{
<span class="hljs-symbol">
  text:</span> <span class="hljs-string">'Continue'</span>, 
<span class="hljs-symbol">  handler:</span> username =><span class="hljs-keyword">this</span>.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(){
  <span class="hljs-keyword">this</span>.ref.push({
    name: <span class="hljs-keyword">this</span>.name.username, 
    message: <span class="hljs-keyword">this</span>.newmessage
  }); 
}

Reading Messages from Firebase

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

<span class="hljs-keyword">this</span>.ref.on(<span class="hljs-string">'value'</span>, <span class="hljs-keyword">data</span> => {
    let tmp = [];
    <span class="hljs-keyword">data</span>.forEach(<span class="hljs-keyword">data</span> => {
        tmp.push({
            key: <span class="hljs-keyword">data</span>.key,
            name: <span class="hljs-keyword">data</span>.<span class="hljs-keyword">val</span>().name,
            message: <span class="hljs-keyword">data</span>.<span class="hljs-keyword">val</span>().message
        })
    });
    <span class="hljs-keyword">this</span>.messagesList = tmp;
});

Download