Leon Steenkamp

Building small satellites on the tip of Africa. My other ride is a CubeSat.

Open water swim tracker - end user web application

This post is part of the series detailing the Open water swim tracker project - more info here.

The implemented web application displays the position reports generated by the tracker hardware to the end user (viewer) over the Internet. The tracker hardware, placed on the boat accompanying the swimmer, periodically sends GPS data via its LTE link to the web application.

This section gives more detail on the Django web application (website) for the swim tracker project.

Software components/technologies:

Python
Docker Compose
Django REST framework
Traefik
MariaDB
AWS - EC2, Route 53
Mapbox
ChatGPT

The tracker web application is implemented using Django and the Django REST framework. It performs two main functions. The first being the main interface where users can follow, on a map, the location reports for the swimmer as generated by the swim tracker. The second function of the web app is being the REST endpoint where the Python script on the tracker writes location information to.

Various options for the application architecture were considered but having the tracker write location data directly to the web app seemed the simplest, even though these interfaces would be facing the Internet.

The user has to log in to the web app before being able to access the page that contains the map with swimmer location data. As part of the login process the user completes a simple CAPTCHA, which is added to provide some protection against rudimentary automated login attempts. Currently user login credentials are created manually. The web app has various users, each with limited permissions.


Web app main page with map and swimmer track

The REST endpoints are all authenticated. These include the endpoints used by the Python script running on the swim tracker to write location data to the web app database. The Django app uses a MariaDB database. The main web page uses JavaScript and Mapbox to retrieve and display the swimmer location data.


Basic diagram of architecture

The web app is deployed as Docker containers with the help of Docker Compose. Docker containers are used for Traefik, the MariaDB database, the web app, and Apache to serve the Django app. Traefik is used for TLS for the HTTPS connection to the app. The Docker containers run from an AWS EC2 instance (in af-south-1) with DNS provided by Route 53.

During the development of the web application, it was the first time I used ChatGPT in the development process. As a tool, it was quite useful, but the trick is to notice at which point it tries to drive you straight off a cliff without missing a beat.

One outstanding task is to automate the deployment of the web application using Ansible and maybe the AWS infrastructure using Terraform.

Open water swim tracker - end user web application

Other posts in the series