Chat app with Ionic 3 & Firebase – Ep. 4 – Profile tab

Hi Friends,

Hope you are all well. This is part 4 of my chat app with firebase & Ionic series. In this part, we’ll see how to bring in data to the profile tab and then create provisions for the user to edit his nick name or profile picture.

The screencast for this part.

 

The code for this part is available – here.

The complete code for this series is available here. (Please note that this is a work in progress and new code will be added to this repo in every part)

I presume you either have the code of the previous 3 episodes, or have pulled the combined repo of the previous three episodes and have it ready. So, I’ll start from there.

Now open up profile.scss and add the below code.

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

Add the above code inbetween the <ion-content> tags.

As you can see we have 5 divs. One of it is a spacer and one is an instructional message. So let’s ignore them.

Apart from that, we have an image, a header to display our nick name and a button to log out.

But we need data to get populated when this tab loads or when the user navigates to this tab right ?

Open up profile.ts and add the below function to do the same.

The code is pretty much self-explanatory. I have added a loaduserdetails() method that attempts to load the user details whenever the user enters this tab.

Wait, we don’t have a getuserdetails() method in user Provider right. So, let’s create that.

Open user.ts (in the providers directory) and add the getuserdetails function()

We are simply making a call directly to the node (since we are using the uid as the key) and getting the values which we are then passing to profile tab.

Now run the app and you will see a screen as shown below, when you try to visit the profile tab.

Screenshot_2017-06-21-20-30-41

As you can see our nick name and profile pic has been loaded.

Now first let’s finish off the log out button.

Logout:

Open up profile.ts and add the below code.

Now the logout button should work fine.

Editing the Nick name:

Now let’s write some code to update the nick name. Open up profile.ts and add the below code.

This might look big, but in reality it’s not. I am just creating an alert that has an input field and a couple of buttons. Just enter a new name in the input field and click on edit. If you notice in the handler for the edit button we are calling a new method called updatedisplayname(). Let’s go ahead and create that.

Open up user.ts file and add the below method.

As you can see, I am simply updating the profile of the user based on this uid. Nothing complicated in this right ?

Your final user.ts file would look like this.

Now that we have the code in place. Let’s run the app again. If everything goes fine, you would see the below screens.

Screenshot_2017-06-21-20-30-55

 

Screenshot_2017-06-21-20-31-12

 

Cool, Now that you can edit your nick name, let’s write some code to change the profile picture as well.

Editing the profile pic:

If you remember, in the previous episode we wrote code to choose and image from the phone’s file system and store it in firebase storage and update it in the user’s collection. Why not reuse the same code ?

Open up profile.ts and add code. Your profile.ts should look like this now.

 

Kindly refer to the previous part where I have given detailed info on how we are choosing and storing an image. We are simply making use of the uploadimage() from image handler provider and update image from user provider to achieve our desired functionality here.

If everything goes fine, you would see that you would be able to update the profile image as well.

Screenshot_2017-06-21-20-31-40

Screenshot_2017-06-21-20-31-44

 

Now we have a profile tab where we can change our nick name and profile picture and also log out of our application.

That’s all for this part guys. Now if you notice, we have a complete user management system that we can make use of for any application that we are building (provided you use Ionic 3 and firebase).

Hope you found this helpful guys. If you found this helpful kindly consider supporting me on patreon by clicking here. This will help me keep this content free for all.

Kindly share it with someone and help others too.

Thanks for reading guys. Peace.. :)

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

    Hello,

    I appreciate your nice work. keep it up buddy. hope the next episode soon.

    somehow I faced a problem in image upload. when creating account, unable to pass the profile picture page if I try to set it, the loading never ends.
    In profile page when try to change picture, nothing happens.

    so I tried using “‘@ionic-native/camera’;” in uploadimage function following way and now it works fine without any problem.

    uploadimage() {
    let loader = this.loadingCtrl.create({
    content: ‘Please wait’
    });
    const options: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.DATA_URL,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE,
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
    }
    var promise = new Promise((resolve, reject) => {
    //alert(“1”);

    this.camera.getPicture(options).then((imageData) => {
    loader.present();
    var imageStore = this.firestore.ref(‘/profileimages’).child(firebase.auth().currentUser.uid);
    imageStore.putString(imageData, ‘base64’).then((res) => {
    this.firestore.ref(‘/profileimages’).child(firebase.auth().currentUser.uid).getDownloadURL().then((url) => {
    loader.dismiss()
    resolve(url);
    }).catch((err) => {
    reject(err);
    })
    }).catch((err) => {
    reject(err);
    })

    }, (err) => {
    }).catch((err) => {
    reject(err);
    });
    loader.dismiss();
    })
    return promise;
    }

    And another suggestion, I added below code in app.component.ts to keep the user logged in while app reopens until he intentionally sign out.

    this.afAuth.authState.subscribe(auth => {
    if(auth)
    this.rootPage = ‘TabsPage’;
    });

    I assume this may be helpful to others too. So, please consider adding this feature in a future episode.

    Thank a lot for bringing such nice and valuable videos. the way you work is interesting.
    Wish you all the very best.

    • Thanks man..

      • Thilina Ranathunga

        😉 you are very welcome.

    • Kuldeep Μaurya

      Damn..thanks alottttt buddy!!!!
      Was facing this pblm with image thing.. and the login snippet is a great addition.
      I also added that in my code.
      Cheers!!

      • Kuldeep Μaurya

        Hey @thilinaranathunga:disqus
        I am still facing the image problem
        during signup its showing please wait on and on
        and edit image in profile tab, when clicked is not doing anything.
        Any ideas?

        • Thilina Ranathunga

          Okay, good.
          :)

      • Thilina Ranathunga

        I am Glad being helpful. 😉

  • Mayank Chaudhari

    Does this app show the chat offline too? Is this app “PROGRESSIVE WEB APP”? If not then can you show the demo of progressive web app with ionic 3 and firebase?

    • Nope.. The engine of this app is firebase and you need a working internet connection to play around.. Progressive web app is just a fancy term given to web apps.. There’s nothing new in that.. Normal web apps run in a browser.. Hybrid mobile apps run inside browsers too.. but they are wrapped with a framework like cordova which opens the browser and runs the app inside it thereby tricking the user to believe that it’s a mobile app.. Progressive web app is a common term used to denote both..