During an internal hackathon at InfluxData, I set out to work on a project that would help me improve my skills with Telegraf and Flux, while also using InfluxData’s Giraffe to visualize the results in a React application. I was inspired by a blog post by Sean Brickley, which detailed how to track the International Space Station (ISS) using InfluxDB. I decided to build on this idea and create a React application that could track the ISS in real-time, documenting its journey with the help of InfluxDB, ExpressJS, Telegraf, and Giraffe.
This project consists of three main components: the Telegraf configuration, the ExpressJS API server, and the React application. Each plays a crucial role in gathering, processing, and displaying data. First, let’s dive into the Telegraf configuration, which forms the foundation of the project.
To track the ISS, I used a public API that provides the current position of the space station. Using Telegraf, I set up a polling system to fetch this data periodically. Telegraf’s HTTP plugin allowed me to retrieve the API data, and then I used the Converter plugin to parse the JSON data, converting the coordinate values from strings to floats. The final step was sending this parsed data to my InfluxDB cloud instance on AWS using Telegraf’s InfluxDB plugin. With the Telegraf config in place, I ran the system to start collecting live ISS location data.
Once the data collection was set up, I focused on querying it and providing a way for the React app to access the information. To do this, I built an API using ExpressJS, which interacts with the InfluxDB instance using the InfluxDB JavaScript client. The goal was to create an API that the React app could use to retrieve ISS location data and visualize the flight path. To connect to InfluxDB, I passed the necessary URL and token to the InfluxDB object, and then I used the client to run queries, such as retrieving location data for the ISS. This API is a key step in enabling the React app to visualize the ISS’s movement using the Giraffe library.