This is simple web app that enables Manager¹ of a Cooperative Organization to track their marketers²’ transactions both historical and realtime.

Below is the demo video.

Use

This application is used by multiple organization or usually called as multi-tenant. Every organization has their own users and login.

This application helps visualize data to be more friendly and easier to read. So it’s more likely read-only.

There is desktop app and android app for the organization to run their business. The android app is used by marketer² to make transaction process and push to server along side with coordinate where transaction happened.

This app then will read the data and visualize it. Also some data fixing (if possible) like reversed coordinate, since I’m not the person who understands the whole organization’s data structure and flow. I just came and was given task with no clear explanation just access to the database.

So guessing skill was used here.

Features

There is list of marketers² in organization or tenant. The list should be selected to make menu appear. Once appear the menu belongs to that selected marketer².

Timeline

The timeline is per-day based. Timeline begins from dawn to dusk. When a point (dot with time) clicked it will zoom to that point.

Opening transaction detail can be done in two ways. First by clicking the crosshair on map. Second by double-clicking the point on timeline.

Live Location

Live Location tracks marketer position in real-time. This is the feature that I think like hacking.

Live Location works by contacting the phone (the android app) and ask to send location to server. Sounds simple right? It is. I’m not the android app developer here, I just do backend and it was pretty simple to me but not for the android dev.

Others

There is link to download apk that I kind of cheating by using share feature and consistent naming in FileBrowser because I don’t want make the server too bloated.

Engineering

Let’s talk about the tech stack first.

Of course I use my favorite language for the server, it’s Go. The server will call to another API Server which provides data. That API Server reads data from MariaDB. So this server, the map server acts pretty much like proxy but with goodies.

Secondly, in the view layer I uses VueJS for the framework. Why? Because I already know it and make it faster to develop this app, remember that I’m the only person crafting this. So choosing what already familiar is best.

Server

The web server is crafted with go standard http with the built frontend embedded to the binary. This make easier to deploy actually. Nothing special here, just some auto renew token.

As I said before, this server will proxy to an API Server that provide data. That API Server has authentication with Bearer token and refresh token. So to make frontend easier, I make auto renew and set tokens to cookie. It’s like translate machine between bearer and cookie.

View

The map I used is provided by Mapbox. It was the first time to me dealing with map things on the web development. That made me excited…kinda. That’s it, you know the rest, how frontend development looks like.

More about live location

There is websocket handler dedicated for this feature. Once the live location menu entered, it will connect to server through websocket protocol. In that menu, a button is use to do locating.

When the client (frontend) init that locate button, the server will contact the device. The server has http handler to catch location sent by device.

I use Firebase FCM to contact device. Instead of sending to single device, I just broadcast to a topic, of course the app should subscribe first. The broadcasted data contains user id to be located.

Here’s the flaw, the validation is done in android app. If logged user id match then send location to server. But at least the android app is not for public and not available in store.

The server is not designed to be working with multiple instance, but It should work when needed.

Every locate session (where locate button pressed / locate request sent) the server will send FCM broadcast within interval (20s maybe). At the same time waiting for the respond from device. To make as real-time as possible I used go chan to wait for response.

Here’s one flaw, when websocket initialized the chan that will used to receive data from device is stored in memory (variable) making it not possible to receive response if multiple instance is deployed. Imagine instance A is web app websocket connection and instance B is where device send respond. But it can be solved by using Redis in case multi instances is required.

Also when websocket is disconnected the done channel is closed making all operation cleared, no trace and making reconnect not possible (reconnect means start from beginning). I made this to be per session, no history involved here. So if two websocket connections ask to locate same user, the device will send to both connections independently. This should also be fixable with the Redis PubSub thing, or this already good maybe.

Thank you for reading, somethings may unclear…