Newer Post

We just released CommitList: Curated tutorials for devs

Older Post

Procedural Generation and Possible Worlds

Ionic 3 and Firebase Cloud Firestore Chat App - Part I

TL;DR Chat applications have been around for quite a while. The emergence and popularity of the Facebook chat made chat applications almost a necessity for every collaboration platform as people saw it as a faster and cheaper way of communicating with peers, customers, businesses, etc. all over the world.

However, over the years, different technologies with the aim of reducing the latency between the sending and delivery of messages have emerged.

One revolutionary technology that has been making giant strides in the world of real-time is Google's Firebase real-time databases. Firebase offers two real-time database options; The real-time DB and the new Cloud Firestore.

In this article, we will be creating a mobile chat application with Ionic (version 3) and the Firebase Cloud Firestore database.

Below is a preview of the end result of our application:
End Result Preview

Before we begin building our chat application, below are some prerequisites you should fulfill before continuing with this article:

  • Ensure you have Nodejs installed on your system. If you don't, you can find installation instructions here.
  • An up-to-date installation of Ionic using npm (or yarn). If you don't, you can find installation instructions here.
  • A basic knowledge of Angular (not AngularJS).

Let's dive right into it:

Setting Up Firestore

Creating a new Firebase project

Log into the Firebase console at firebase.google.com and create a new project by clicking the Add Project button

Add Firebase Project

Enter the necessary details for your project

Project Details

Create a new app under the project

Click the Add Another App link and select Add Firebase to your Web App

Add Firebase to your Web App

Selecting this option pops up the configuration for the firebase application. Copy out the config object, we will be needing this later.

Firebase Configuration

Creating the Firestore Database

Setting up the chat database

Now scroll down the project page and click Getting Started on the Database tab.

Database

The next page presents you with Firebase’s two real-time database options; select the Cloud Firestore option.

Add Firestore

A dialog pops up for you to select the Security level for your database. For this project, we will keep things open as selected below:

Security rules

You are now presented with the dashboard of your Firestore database.

The Chat Schema

Firebase Cloud Firestore stores data in collections. A collection similar to an array. Each collection contains a number of documents. A document in Firestore is simply an object. Thus a collection can be seen as an array containing one or more objects.

For this project, we are going to work with two collections.

  • The users collection: To hold all our user information objects
  • The chats collection: To hold chat data

For our users, we will need the following information to represent each user

  • email : email of the user; this will serve as the unique identifier
  • name : chat name of the user
  • time : timestamp of the user registration

For our chats, the following data will constitute each chat object

  • message: the chat message
  • sender: email of the user sending the message
  • pair: a unique identifier representing the chat between two users
  • time: timestamp of the chat message

Creating the Collections in Our Database

Click the Add Collection link, and fill in the dialog as shown below for the users collection.

Adding the users collection

Then click Next and add your first document in this collection. For now, simply ignore the id field. Enter only the email field as shown below. Firestore requires that a collection contains at least one document upon creation - we can always delete this document later.

Add mock data

Similarly, add a chats collection, and fill in only a message field in the first document.

Awesome!
Now we have everything setup to use the Firebase Cloud Firestore real-time database.

Setting Up the Ionic Project

Creating a new Ionic project

Let's get started on the Ionic mobile application.
The first thing we need to do is create a new ionic project and set it up to use the Firebase Cloudstore service.

To create the ionic project, simply run the following command:

`ionic start firebase-chat sidemenu`

This will create a new Ionic 3 project by default (as of the time of this writing).

Setting up AngularFire to Connect with and use Firebase

Ionic is an Angular-based mobile framework. Fortunately, the firebase team already developed the AngularFire library, which makes working with Firebase in an Angular application a breeze.

To install this library in our project, simply run the following command in the root of your ionic project:

npm install firebase angularfire2 --save

After successfully installing the library, we then need to set up the library in our project.
Go to src->app, and create a file named app.config.ts.

Then, enter the following in the file:

export const appconfig = {
  firebase: {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    databaseURL: "YOUR_DATABASE_URL",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "",
    messagingSenderId: "YOUR_MESSAGING_ID"
  },
  users_endpoint: "users",
  chats_endpoint: "chats"
};

In the Firebase portion of the appconfig object, simply replace the placeholders with your own credentials (NB: The entire Firebase object can be retrieved from the Add another App -> Add Firebase to your Web App link on your project dashboard).

Now we need to configure our application's module to use the AngularFire library.
Open the app.module.ts file and import the following modules from the angularfire2 module:

import { AngularFireModule } from "angularfire2";
import { AngularFirestoreModule } from "angularfire2/firestore";

Then, import the configuration from the app.config.ts file created earlier:

import { appconfig } from "./app.config";

Then, in the @NgModule imports array, we set up the library with the configuration object:

@NgModule({
...
  imports: [
    ....
    AngularFireModule.initializeApp(appconfig.firebase),
    AngularFirestoreModule,
    ....
  ]
...
})

Great!

Now we are all set to use the AngularFire library to work with our Firebase Cloud Firestore database.

In Part 2 of this series, we will dive into the main action as we start developing our chat application. Let's go.

We'll help you unleash.

Join the 30,000 developers who subscribe to our newsletter.

Scale your
Development team

We help you execute projects by providing trusted developers who can join your team and immediately start delivering high-quality code.

Hire Developers
code, ionic