Chat app with Ionic 3 & Firebase – Ep. 11 – Creating groups

Hi Friends,

Apologies for the delay in-between posts. In this post let’s see how to create groups in your chat app.

I assume that you already have read all the previous posts in this series and have a copy of the code as well. So let me continue from where I left off previously.

Let’s begin.

Screencast of this post – Part 1

 

Screencast of this post – Part 2

The code for this episode – here.

The complete code for this series – here.(would appreciate it very much if you could add a star to the repo. Thanks)

Open up groups.html. We’ll be writing code to place a small button on the top right corner which upon clicking will help us create a new group.

In groups.html add the code as shown below.

This will add a small icon button on the right corner of the navbar.

Open up groups.ts file and add the below code.

If you notice we have a groupservice in the above lines of code, but we don’t have a groups provider. So let’s go ahead and create a provider.

This provider file will have all our logic to create a new group.

Before writing code in that, let’s first get our code in the newgroup page.

Create a page called newgroup using the below command.

Open up this newgroup.html file and add the below code.

Yes, this interface is pretty much similar to the interface we used for our profile page. It will have a image, a text field and a button. These correspond to the group image and group name and the button is used to create a group.

Add styling the newgroup.scss file as shown below.

Now your screen would look as shown below..

Screenshot_2017-09-11-16-35-37

Now open up newgroup.ts file and add the below code.

The code will be almost similar to the one which we wrote for profile page. Tapping on the image will let you choose an image from your phone’s file system whereas tapping on the group name will open a prompt in which you can change the group name.

Screenshot_2017-09-11-16-49-14

Wait, we haven’t written code to create the group yet right..?

Open groups.ts (inside the providers directory and add the below code)

Things to notice:

  1. We have a separate collection called groups which would store all our groups.
  2. We are storing each group under the creator’s uid (which would then get stored under all the members uid’s too, we’ll see that later).
  3. We are adding a owner field as well in each node in which we are storing the UID of the person who created the group.

Now that this is done let’s write some code to store the image as well. Open imghandler.ts and add the below code.

This is to store the group image under the groupimages directory in firebase storage. (Under the creator’s uid and name)

Okay now that we have code to create a group, let’s write some code to get all the groups that the user has created or is a part of into the user’s groups screen.

Open up groups.ts (in the providers directory) and add the below code.

The getmygroups() function will push all the groups under the user’s id into a mygroups array and then publish an event called allmygroups.

Open up groups.ts in the pages/groups directory (Sorry for naming both the files that way).

Now add the below code in that.

We are just subscribing to the allmygroups event and getting all the events stored under it.

Now open up groups.html and add the below code.

This will show the groups which the user has created or is a part of in a list.

You would see a screen as shown below.

Screenshot_2017-09-11-19-08-13

In our next post, we’ll see how to add/remove members to this group.

Hope this helped you guys, if you found it helpful kindly share it with someone and help them too.

If you really loved the content of this site and you would like to help me to keep it alive kindly consider supporting by clicking here – Donate.

Thanks for reading guys. Peace.. :)

Liked it? Take a second to support admin on Patreon!