Hello Friends,
This is my first post on how to create a chat app using Ionic 3 and Firebase. This is going to be a series of posts covering how to create a complete chat app with real-time chatting and group chat features. You could also send images in your chat leveraging the power of firebase storage that allows you to store and serve images.
To see how this app would look click here.
Enough talk, let’s write some code.
A screencast of this post.
The code for this post is available here.
The complete code for this post is available here . (Please note that I will be committing code from all the episodes as and when the posts are made on this site. So this is a work in progress.)
First let’s scaffold out an Ionic 3 application using the below command.
|
1 |
ionic start ionic3chat blank |
Install the firebase and angularfire2 libraries using the below command.
|
1 |
npm install firebase angularfire2 --save |
Now go ahead and delete the home page found in your src/pages directory. Let’s start from scratch.
Now open up your terminal again and give the below commands to generate two new pages.
|
1 2 |
ionic g page login ionic g page tabs |
Now get into app directory and create a new file called app.firebaseconfig.ts and the below code into it.
|
1 2 3 4 5 6 7 8 |
export var config = { apiKey: <apiKey>, authDomain: <yourauthDomain>, databaseURL: <yourdatabaseURL>, projectId: <yourprojectId>, storageBucket: <yourstoragebucket>, messagingSenderId: <yoursenderIdhere> }; |
Replace the <> values with your actual values from firebase.
Now open up app.module.ts and add imports for firebaseconfig. Also add imports for Angularfire2 and it should look as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { SplashScreen } from '@ionic-native/splash-screen'; import { StatusBar } from '@ionic-native/status-bar'; import { config } from './app.firebaseconfig'; import { AngularFireAuth } from 'angularfire2/auth'; import { AngularFireModule } from 'angularfire2'; import { MyApp } from './app.component'; import { AuthProvider } from '../providers/auth/auth'; @NgModule({ declarations: [ MyApp ], imports: [ BrowserModule, IonicModule.forRoot(MyApp, {tabsPlacement: 'top'}), AngularFireModule.initializeApp(config) ], bootstrap: [IonicApp], entryComponents: [ MyApp ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler}, AuthProvider, AngularFireAuth ] }) export class AppModule {} |
Note the AuthProvider in the providers and tabsPlacement option (which basically places the tabs at the top of the screen).
Generate a provider using the below command.
|
1 |
ionic g provider auth |
Now open up login.html and add the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<ion-content class="background"> <ion-card> <ion-card-header> Login </ion-card-header> <ion-card-content> <ion-list no-lines> <div class="spacer" style="height: 10px;"></div> <ion-item> <ion-input type="email" placeholder="Email" [(ngModel)]="credentials.email"></ion-input> </ion-item> <div class="spacer" style="height: 5px;"></div> <ion-item> <ion-input type="password" placeholder="Password" [(ngModel)]="credentials.password"></ion-input> </ion-item> <div class="spacer" style="height: 10px;"></div> <a (click)="passwordreset()">Forgot login details ? <b> Get Help </b></a> <div class="spacer" style="height: 10px;"></div> <button ion-button block round outline color="light" (click)="signin()">Login</button> <div class="spacer" style="height: 10px;"></div> <p>OR</p> <div class="spacer" style="height: 10px;"></div> <button ion-button clear full color="light" (click)="signup()">Don't have an account? Sign up</button> </ion-list> </ion-card-content> </ion-card> </ion-content> |
Now open login.scss and add the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
page-login { .background { background-image: url('<yoururlhere>'); } .scroll-content { align-content: center; display: flex; flex-direction: column; justify-content: center; text-align: center; } ion-card.card { box-shadow: none; background: rgba(0, 0, 0, 0.5); border-radius: 5px; } a, p, ion-card-header.card-header { color: #fff!important; } .list > .item-block:first-child { border: medium none; } .item { margin-bottom: 10px; background: rgba(255, 255, 255, 0.5); border: medium none; .text-input, { color: #fff; } input::-moz-placeholder{ color: #fff!important; } input:-moz-placeholder { color: #fff!important; } *:-moz-placeholder{ color: #fff!important; } *:-ms-input-placeholder{ color: #fff!important; } *::-webkit-input-placeholder{ color: #fff!important; } } .icon { padding-right: 10px; } .bottom { bottom: 0; } .input-cover { position: static; } } |
Ensure that you are giving a proper URL for the background image and that image is actually present in your assets folder.
If there are no errors, then your login screen would look like as shown below.
Let’s create an interface for our user credentials. Create a new directory inside the src directory and name it as models. Inside it create another directory called interfaces. Now create a file called usercreds.ts and add the below code in it.
|
1 2 3 4 |
export interface usercreds { email: string; password: string; } |
Now open up login.ts file and add the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { usercreds } from '../../models/interfaces/usercreds'; import { AuthProvider } from '../../providers/auth/auth'; /** * Generated class for the LoginPage page. * * See http://ionicframework.com/docs/components/#navigation for more info * on Ionic pages and navigation. */ @IonicPage() @Component({ selector: 'page-login', templateUrl: 'login.html', }) export class LoginPage { credentials = {} as usercreds; constructor(public navCtrl: NavController, public navParams: NavParams, public authservice: AuthProvider) { } ionViewDidLoad() { console.log('ionViewDidLoad LoginPage'); } signin() { this.authservice.login(this.credentials).then((res: any) => { if (!res.code) this.navCtrl.setRoot('TabsPage'); else alert(res); }) } passwordreset() { } signup() { } } |
We are simply calling the login() function present in the auth provider and passing on the entered email and password to it.
(We will be seeing about the signup() and passwordreset() functions in the upcoming videos).
Open up auth.ts in your provider directory and add the below code into it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
import { Injectable } from '@angular/core'; import { AngularFireAuth } from 'angularfire2/auth'; import { usercreds } from '../../models/interfaces/usercreds'; /* Generated class for the AuthProvider provider. See https://angular.io/docs/ts/latest/guide/dependency-injection.html for more info on providers and Angular 2 DI. */ @Injectable() export class AuthProvider { constructor(public afireauth: AngularFireAuth) { } /* For logging in a particular user. Called from the login.ts file. */ login(credentials: usercreds) { var promise = new Promise((resolve, reject) => { this.afireauth.auth.signInWithEmailAndPassword(credentials.email, credentials.password).then(() => { resolve(true); }).catch((err) => { reject(err); }) }) return promise; } } |
Okay now that this is done. our login should work fine. Kindly ensure that in the app.component.ts file you are setting the rootPage to our login page as shown below.
|
1 |
rootPage: any = 'LoginPage'; |
Okay now if you login you will see a blank page with just a header saying tabs right. Let’s go ahead and create the pages that we want in these tabs.
Generate three pages with the commands below.
|
1 2 3 |
ionic g page chats ionic g page groups ionic g page profile |
Now that we have the pages, let’s go ahead and include them in our tabs page.
Open up tabs.ts and add the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; /** * Generated class for the TabsPage page. * * See http://ionicframework.com/docs/components/#navigation for more info * on Ionic pages and navigation. */ @IonicPage() @Component({ selector: 'page-tabs', templateUrl: 'tabs.html', }) export class TabsPage { tab1: string = "ChatsPage"; tab2: string = "GroupsPage"; tab3: string = "ProfilePage"; constructor() { } } |
Now open up tabs.html and add the below code.
|
1 2 3 4 5 |
<ion-tabs color="hcolor"> <ion-tab [root]="tab1" tabTitle="Chats" tabIcon="chatbubbles"></ion-tab> <ion-tab [root]="tab2" tabTitle="Groups" tabIcon="contacts"></ion-tab> <ion-tab [root]="tab3" tabTitle="Profile" tabIcon="contact"></ion-tab> </ion-tabs> |
Now that the tabs are coded in. Let’s bring that nice teal color into the hcolor variable.
Open up variables.scss inside the theme directory and the hcolor to the $colors variable as shown below.
|
1 2 3 4 5 6 7 8 |
$colors: ( primary: #488aff, secondary: #32db64, danger: #f53d3d, light: #f4f4f4, dark: #222, hcolor: #03b6b3, ); |
Now just add this hcolor to each of the navbars in the chats, groups and profile page so that they blend in with the tabs color.
Also to get the titles in the center just open up app.scss inside the app directory and add the below code.
|
1 2 3 4 5 6 7 8 9 |
.title.title-md { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 100%; width: 70%; text-align: center; } |
(In iOS the default behaviour would be to display the title in the center).
If everything goes fine, as soon as you login you should see a screen like this.
Note that when you click the tabs the corresponding pages get loaded.
It’s cool right. In our next post let’s see how to create a sign up page that enables the user to sign up and choose a profile picture for his account. We’ll also see how to enable a provision to reset the password for a specific user.
Hope this helped you guys, if you found this helpful kindly consider supporting me by becoming my patron on patreon (Costs a couple of bucks and you get early access to all my videos). Click here.
If you can’t become my patron, that’s fine just share / tweet this post and help someone else out who is looking for quality content.
Thanks for reading guys. Stay tuned for episode 2.
Peace., 
