What I built

A mobile application that allows users share their location using Google map widgets. On clicking a Share Location button, a map widget containing the users current location is rendered in realtime to all connected users within a central chatbox. To identify each individual users location, i placed the supplied username on the map marker pointing down to their locations.

Usefulness

Well, I may have done a lengthy work there but how is this of any use to anyone ?. Well lets consider a situation where maybe your family members are all signed up on the app, y'all can share locations in realtime, If for instance, someone goes missing in the park or for some other serious cases like kidnap, all you have to do is click a button and it'll broadcast your current location to every member of your family who will then receive your location in realtime. It's just that simple. Not a big deal maybe but, it's a really useful tool to have.

Demo Link

Download the apk and try out the app

Link to Code

View Project on Github

How I built it

To best explain how i built this application, i'll like to first tell you how it works. When the app is launched, it displays an input for username to get the name of the particular user.

Once the username is supplied, the user can then click a Share Location button on the screen which will then send a request to our server with the provided username of the user and his/her current longitude and latitude. Then, the server will respond with the username, longitude and latitude of the user which we'll then use to create a Google map widget with a pin dropped on the users current location.

This will place the provided username of the user on the map marker. This widget is now rendered on the central layout where every connected user can see previously shared locations from other users.

If you are already familiar with Pusher, I bet you can already imagine how i did it. But if that's not the case, I'll provide some brief explanation to shine more light on it.

The technical bit

This will be an Android application built with Kotlin to monitor the activities of a Node.js REST API. Each time the endpoint of the API is hit, Pusher will publish an event with some information (the location shared by the user) to a channelfeed

First, i created the Android client that will communicate with our REST API. In the client, I defined a LoginActivity class and layout to handle signing users into the app when they supply a username on launching the app, no authentications necessary.

Then to render the location widget of the users from the server into a central layout in the app, I made use of Recyclerview which gave me access to an adapter class that served as the connection between my server and the client.

But first, to render the response from the server into the viewHolders in my app, i created a model class that served as a schema to define the content structure. After that i created an array list from this model in the Adapter class and then used it to populate my recyclerview object.

To make requests and get responses from the server, I used retrofit. First I initialized Pusher in the project and set it up in my MainActivity class. Then using retrofit, it was very simple for me to send a send a request with the users provided username, longitude, and latitude to the server and get a response i.e a JSONObject containing the current (longitude, latitude and username) of the user.

Then i passed this response into the Adapter and displayed it on the layout file i have modelled for it. Finally, I rendered the layout file containing the data on the recyclerview.

Then on the server side,
First i created a Node.js server and configured it with my pusher credentials such that whenever our API endpoint is reached, we’ll publish an event to a Pusher channel feed. Then send back the response as an object so we can show it in an activity feed on the client side.

Pusher events have an eventChannel, which allows them to relate to a particular topic, an eventName that is used to identify the type of the event, and a payload, which you can attach any additional information to and send back to the client.

In my case, i published an event to a Pusher channel feed when the endpoint of my API is called. Then send the response back as an object and from there pass data into my Adapter and display it

Conclusion

That's it guys. Hopefully by extension someone will extend the application from here on and build something more spectacular. The project is available on Github and i've also linked the apk for download. If you have an android device, download and give it a spin. Lastly before you log out, click the heart icon.