Ionic 3 – Phone Auth with Accountkit

Hi Friends,

Hope you are all well. In this post, let’s talk about authentication in your ionic apps using just a phone number. For this post we’ll be using accountkit through the facebook developer portal.

Let’s begin.

A video screencast of this post.

 

First visit Facebook Developer Portal and create a new app. (Kindly watch the video to get more clarity on this).

Now that you have the app id, app name and client token, install the cordova-plugin-accountkit using the below command.

This plugin will help us a lot in authenticating our app. Now that you have installed it, let’s create two pages namely login and dashboard page.

Open up app.component.ts file and change the root page to our LoginPage.

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

Open up login.ts and add the below code.

That’s it now we could login with our mobile number simply into our app.

Run the app on a device. If you get an error simply follow the below steps.

Open up platforms -> android -> app -> src -> main -> res -> strings.xml

In this file add the below lines of code inside <resources> block

This would fix the error (This is a quick fix and should be used only when you get an error).

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

Thanks for reading, Peace.. :)

 

Ionic 3 – Leaflet maps – Geolocation & Markers

Hi Friends,

Hope you are all well. This is one of the most requested posts on this site. In this post let’s see how to use leaflet.js library to include a map inside your Ionic apps. We’ll also see how to do a simple geolocation and place a marker at a co-ordinate on the map.

Let’s begin.

A screencast of this post

The code for this post is available – here. (leave a star if you liked the repo !! )

Before trying to run this on a device, kindly scroll down and read the instructions for running this on devices. Thanks.

First let’s create a new project using the below command.

Next let’s install leaflet.

Now open up index.html (inside src directory) and add the below link to the leaflet css file.

Now open up home.html and modify it as shown below.

We have simply added a container using the div tags with id as map.

Open up home.ts and modify it as shown below.

This will add a map to the device.

Now let’s add geolocation. To add geolocation we can simply call the locate() function.

Open home.ts file again and modify it as shown below.

Now when you run the app, you will see that you are being taken to your location on the (or rather the location where your device is currently.

Let’s add a marker to the map as well.

Modify home.ts again as shown below.

Now we have added a featuregroup, created a marker and added the marker to the feature layer. Then we add this layer to the map.

We can similarly add shapes, markers of different colors etc., to our map.

Running it on devices:

Now if you try running this on your device you won’t get the desired features. To do that one has to install the cordova-geolocation plugin first.

Use the below command to install cordova-geolocation plugin

Now use the below command to install the wrapper.

Add Geolocation import to the app.module.ts file as shown below.

Now you would see the below screens.

The initial map:

Screenshot_2017-10-05-23-05-27

With Geolocation:

Screenshot_2017-10-06-16-55-32

With Markers.

Screenshot_2017-10-06-17-47-13

Try clicking on the marker and see what happens.

Explore the mapbox product for more customised maps and a ton of other cool features that can be added to your leaflet maps.

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

Thanks for reading. Peace.. :)

Chat app with Ionic 3 & Firebase – Ep. 16 – Sending messages in groups

Hi Friends,

Hope everyone’s fine. In this episode we’ll see how to send messages in groups. We’ll also see how to send images and show time in messages.

I assume that you all have read the previous posts in the series and have a copy of the repo of what we have achieved so far.

Let’s begin.

A screencast of this post:

Code for this episode is available – here.

Code for this entire app is available – here.

Open up groupchat.html and add the below code.

We have simply added a text area in the footer along with a button, an area for showing all the messages in the group and a new button at the top for sending images.

Open up groupchat.scss and add the below css code as well.

This is for the clean chat interface that I showed you in one-to-one chatting. Let’s move on.

(There is a lot of code in this post & video guys, So in order to keep it short, I’ll move a bit quicker).

Open up groupchat.ts file and add the below code into it.

As the name suggests the first function is to add a message to the group. The scrollTo() function is to provide a smooth scrolling interface whereas the sendpicmsg() function is to send a picture message.

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

Let’s break this down.

  1. First I am getting the owner of the group in which the message is being sent.
  2. Then I am pushing the message to the msgboard of the member.
  3. Once that is done, I am pushing the message to the msgboard of the owner as well. I have added a check for evaluating whether the owner is the sender of the message as well. In that case, I don’t post on his msgboard since it would be a duplicate.
  4. Then I am getting the list of all the members in the group, traversing to all their msgboards and pushing a copy of this message there as well.
  5. Since step 4 required multiple async calls to happen, I simply wrote them in a separate function and called the function with an instance of resolve. Once each and every call was resolved, I used a promise.all() to denote the end of all successful calls.
  6. The getgroupmsgs() function simply gets the msgboard of the logged-in user and publishes an event which denotes that the msgs are available.

Now go back to groupchat.ts file and add the below code. The final groupchat.ts file should look as shown below.

As you guessed, I am using some code to iterate through the timestamps in all the messages here and then display the suitable time in a readable format.

This is actually for just a demonstration. The good practice would be to write it as a pipe and invoke the pipe directly in the html.

I presume you would understand the flow now.

If you hadn’t understood any of the above code or explanations, I will try to say it in a simple sentence.

When you speak in a group of friends, each and everyone’s memory registers a copy of what you said along with your own memory. This is exactly what I have replicated here.

I have used a msgboard field in every group instance under each and every group member. I have simply pushed our messages under this msgboard field and then displaying them onto the screen of the group chat.

Improvements that you can try on your own.

  1. Use the ‘child_added’ event instead of value so that each and every time you add a message the entire collection doesn’t get pulled.
  2. Move the logic onto a pipe instead of hard-coding it.
  3. Write a better logic to filter out images instead of finding out all url’s and classifying them as images.

That’s it guys. Hope you enjoyed this series. If you found this helpful, kindly share it with someone and help them too.

Thanks for reading. Peace.. :)

Chat app with Ionic 3 & Firebase – Ep. 15 – Leaving / deleting groups

Hi Friends,

Hope you are all well. In this post let’s see how to add the leave group functionality for a member and the delete group functionality for the owner of the group.

I assume you have read the previous posts in this series and you have a copy of the code with you.

Let’s begin.

 

The code for this episode is available – here

The complete code for this series is available – here. (Would highly appreciate it if you could leave a star to this repo. Thanks)

Leaving a group:

Open up groupchat.ts and add the below code to the handler function of the leave group option in the member sheet.

We are simply calling a leavegroup() function in the groups provider.

Open up groups.ts file (in the provider directory) and then add the code shown below.

Let’s break this down.

We need to perform two steps to leave a group.

  1. Remove the instance of the group under the uid of the person who leaves the group.
  2. Remove his details from the members list of that group under the group owner’s uid.

That’s exactly is what’s being done in the above snippet of code.

Deleting a group:

First of all, this option is available only to group owners. Group owners can’t leave a group that they created, they can only delete it.

Open up groupschat.ts file and add the below code in the presentOwnerSheet() function

Open up groups.ts (in the providers directory) so that we can write the deletegroup() method there.

Deleting a group involves two steps as well.

  1. Get the members list under the group instance, remove the group instance under each member’s uid.
  2. Remove the group instance under the owner’s uid.

This is what we are doing with the above snippet of code.

DB structure before deleting a group.

deletinggroups

The group being deleted. (First group)

deletedgroups

 

In our next part we’ll see how to send messages in the group.

Thanks for all the support you have been showing me on patreon guys. If you would like to support me on patreon kindly click here.

To donate click here.

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

Thanks for reading.. Peace.. :)

Chat app with Ionic 3 & Firebase – Ep. 14 – Removing members and group info

Hi Friends,

Hope you are all well. In this post, we’ll continue from where we left off in our previous part and add features such as removing members and viewing group info in our groups.

I presume you have already read my previous posts in this series and you have a copy of the repo of the code so far with you.

Let’s begin.

A screencast of this post.

 

The code for this part is available – here.

The complete code for this series is available – here. (Would highly appreciate it if you could leave a star to this repo. Thanks.)

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

Nothing new to explain, I guess. We are just getting all the members of the group and displaying them as a (searchable) list. The owner can remove the members off the group when he slides the member’s name to the left.

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

Next let’s write the actual deletemember() function in the groups provider.

Open the groups.ts (inside the providers directory) and add the below function in it.

Let’s break this down.

  1. We are first getting a reference of the member under the members list of the group’s instance under the group owner’s id and removing that instance.
  2. Then we are navigating to the member’s uid and removing the group instance from there as well.
  3. Then we are calling the getintogroup() function once to provide an updated list of members to the list.
  4. Note that we have subscribed to the gotintogroup event in groupmembers.ts file which is the event that getintogroup() publishes after pulling all the current members of the group.

Now run the app, if everything goes fine you should see a screen as shown below.

Screenshot_2017-09-28-01-13-46

Okay, let’s move on to group info.

Open up groupinfo.html file and add the below code.

This is just to display the members in the group as a list.

Open up groupinfo.ts and add the below code.

Wait, what’s with the ownership..?

We have the members list only under the owner’s uid right ? But we have the group info option under the member’s action sheet as well remember..?

Screenshot_2017-09-20-23-31-06

So, we need to get the member’s list for the group member as well.

This is where the getgroupmembers() function comes in. Open groups.ts (in the providers directory) and add the below code.

The above code is pretty much simple. We are simply navigating to the instance of the group under the person’s uid and then getting the value of the owner field in that.

Then using that uid, we are simply traversing to the owner’s uid and getting the list of members under his instance of the same group.

Now run the app, if everything goes fine then you would see a screen like the one shown below.

Screenshot_2017-09-28-01-13-53

That’s it for this part guys. In our next episode, we’ll see how to delete the group and also how a member can leave the group.

Finally, a word of thanks to all my supporters on patreon. If you would like to keep such content free of charge, kindly consider supporting me by clicking here.

if you would like to donate via paypal click here.

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

Thanks for reading. Peace.. :)