SpaceX Droneship Bot

Frontend
Google Static Map image w/ Pillow ship info overlay thats posted on Twitter with updates
The Twitter Account

Inspiration

SpaceX droneships are barges SpaceX use to land there rockets on after the rocket has gone to space and comes back to land. The droneships are tracked by many on marine tracking sites but we wanted to make it automated since manually tracking takes time. Many SpaceX fans are on Twitter so we figured making a bot that updates on the drone ship status would be great.

What it does

The SpaceX droneship bot posts tweet updates to a Twitter account about the SpaceX droneship ‘A short fall of gravitas’. It posts with a map location and information about the ships whereabouts. The web end is a live web end of the current location of the ship for those without Twitter.

How we built it

Twitter bot

Using Python the bot pulls data frequently from the MarineTraffic API and compares it to previous data on the SpaceX Droneship to check for status changes, if a new status is determined a map image is created and tweeted with the status. The map is created with the coordinates of the ship using the Google Static Map API, the image is then put into Pillow to add a information box that adds ship info to the image. Finally the image and status are tweeted using the Twitter Tweepy library to @SpaceXFleetBot. The bot runs on a Google Cloud VM instance.

Website and Backend

We created a backend in Flask for serving data to a frontend built with React that uses Google Maps to show the drone ships location.

Challenges we ran into

We tried setting a custom marker icon on Google Static Maps API It wasn’t working. Turned out Google Static Maps only accepts up to 64x64 res. We resized in Photoshop works great. Couldn’t pull JSON from our backend due to being on a different host CORS prevented it, we changed to CORS headers to fix it.

Accomplishments that we're proud of

It all actually works; we thought the website wouldn’t work because of the CORS issue but we solved that and everything is working.

What we learned

CORS policies are annoying but can be setup on backend to allow specific origins to access the resources. Google Static Maps API only accepts up to 64x64 custom marker icons. How to integrate a frontend and backend with a REST API passing data between the ends.