The Techies' pub

Chat app with Ionic 3 and firebase – Ep. 1 – Sign in & tabs.

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.

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

exportinterfaceusercreds{

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

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

ionicgpage chats

ionicgpage groups

ionicgpage 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',

})

exportclassTabsPage{

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.