Build a realtime location-based chat feed.
Tags: pushercontest, realtime, kotlin, mobile
Published: 2018-05-21 17:22:41

---
title: Build a realtime location-based chat feed.
published: true
description: An app/hack submitted to the first-ever DEV Community contest. 
tags: pushercontest, realtime, kotlin, mobile
---

# 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.

![alt google images](https://thepracticaldev.s3.amazonaws.com/i/zhbrqoqw6x0j5z7b9zu0.jpg)

## 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](https://drive.google.com/file/d/1VMMz9qKeWPMH1GdT_90_9iTJtmdHLQli/view?usp=sharing)

### Link to Code

[View Project on Github](https://github.com/Kennypee/pusher-location-feeds/tree/dev)

### 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 channel`feed`

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.