Drone Operator Dashboard

This dashboard is capable of rendering real-time coordinates of drones along with a timestamp of when the coordinates were produced to the Apache Kafka pipeline.

Apache Kafka Producer (Python Script)

Messages are produced by executing drone_location_producer.py, which parses the JSON files found in ./tempDroneData. The content in these files were generated by drawing routes on geojson.io.

After parsing the files and extracting the coordinates, a loop infinitely produces a new message every half-second to the droneBusData Kafka topic created locally.

This file could later be a Flask app itself that connects to the Raspberry Pi chips and generates its messages from there instead of the JSON files.

Apache Kafka Consumer (Flask App)

On initialization, the consumer app sets up a web socket to emit Kakfa messages to the React app.

The sendMessage function with a SocketIO annotation runs every time the equivalent socketIO.on() method gets called in React.

React App

All relevant state variables for now are stored in DashParent.js and passed as props to the map and table components accordingly. Putting all this processing power in the parent component takes a toll on the front-end performance, and these socket tasks can be delegated to subcomponents later on to make it run smoothly.

Since the useEffect hook merges the previous functionality of componentDidMount and componentDidUpdate, a counter state variable was made to always make sure another SocketIO call is made, even if drone data values don't change between two calls.

Reproducing the Current Functionality

1. Open CMD and go to the local Kafka folder. Then get zookeeper up and running with ./bin/windows/zookeeper-server-start.bat ../../config/zookeeper.properties

2. Open a new CMD, go to the same path and get the Kafka server running with kafka-server-start.bat ../../config/server.properties

3. Open new CMD -> same path, then create a topic called droneBusData with the command kafka-topics.bat --zookeeper 0.0.0.0:2181 --topic droneBusData --create --partitions 1 --replication-factor 1

4. Start the React development server (can be done at any point)

5. Open another CMD and run drone_location_producer.py

6. Start consumer_app.py Flask app. Leave it on localhost:5000 to avoid having to change any code. Open a browser window at localhost:5000 as well.