Chat app with Ionic 3 & Firebase – Ep. 5 – Adding Friends

Hi Friends,

Hope you are all well. This is Part 5 of my chat app with Ionic 3 and firebase series. In this post we’ll see how to get all the users from firebase and show them to the user so that the can add his friends from the list. We’ll also show a searchbar using which he can quickly search through the list.

Let’s begin.

A screencast of this post

 

The code for this post – here.

The complete code for this series can be found here. (Please note that this is a work in progress).

I assume you already have the code till the 4th episode of this series.

Let’s start from where we left off..

Open up chats.html and add the below code.

Note that I am adding the button in the header. That’s right we are going to have a button on the top right corner in the chats page that will enable us to add friends.

Screenshot_2017-06-29-19-28-58

Now open up chats.ts and add the below code.

Go ahead and create the buddies page now.

Now we are going to display the list of users registered in our application on the buddies page from which the user can add people to his friends list.

Open up buddies.ts and add the below code.

Two things to notice here. Why are we storing the response in two arrays ? Also we don’t have getallusers() function in our user Provider right..? Let’s go ahead and create that.

Open up user.ts and add the below code.

We are simply getting all the users from the users collection and returning an array.

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

We have written code for a searchbar and a list of users (which we get from user provider).

Also, note that we are using a sliding list which will enable us to give options to the user to add friends. (Refer screenshot at the end of the post).

Now let’s add code for the searchbar as well in buddies.ts. Open up buddies.ts file and add the below code.

Now, I believe you would have understood why I have stored the list in two different arrays. We need to refresh the filteredusers array whenever the searchbar is in focus. (When the user does some search and then tries to do another, then we need to ensure that he is able to see the whole list right..? )

Just try running the code now and if everything goes fine, you would see a screen as shown below.

Screenshot_2017-06-29-19-29-09

Screenshot_2017-06-29-19-29-26

Also try sliding the list item or the user to the left and you would see an add button as shown below.

Screenshot_2017-06-29-19-30-33

 

So far, so good right. Now let’s write some code to add a friend. Wait.. Whoa the post has gone too long already. Alright. Let’s continue coding in our next part.

 

Hope this helped you guys. If you found this helpful, kindly consider becoming my patron on patreon by clicking here.

Thanks for reading guys. Peace.. :)

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

    Hi Mr. Raja ,I am a patron.May I get ur email id please.

    • Sure.. Please mail to admin@tphangout.com

      • Sudip Lahiri

        i sent you a email..kindly take a look.

        • Sudip Lahiri

          Incredible tutorial.You are the one of the best ionic developer for me.
          Happy to be joined as patron.

  • adesinamark

    Thanks for this tutorial!. When are you planning to do the episode 6?

    • Soon bro.. There is some painting work going on at my house.. So, I am unable to concentrate on this..

  • Jeetu Choudhary

    Very good Tutorials.
    I have followed the tutorials and created an app. But in my app profile pic is not showing. Only placeholder images show. When I select an image then it just shows broken image sign. What am I doing wrong?

    • Maybe check your firebase storage and see if the image is actually being saved..?

      • Jeetu Choudhary

        Yes, Image is being saved in firebase, but it doesn’t appear in app.

  • Kuldeep Μaurya

    Wonderful buddy!! Cant wait for the next episode.. This has helped me alot.
    Waiting for the next tutorial.. :)