This app gave us an opportunity to work with data directly from an Apple Watch, something that we have been wanting to do for a while now. One of our team members is fluent in React, and he really wanted to integrate a map into the 8base API.
What it does
HealthTrak takes heart rate and GPS data from an Apple Watch and pushes it into an 8base table. This data is then rendered onto a custom map using the react-apollo library used by 8base. This made it very simple to integrate into an 8base dashboard.
How we built it
The final project consisted of several parts.
The iOS application was written in Swift for the iPhone and Apple Watch. This allowed for real-time access of the health and GPS sensors in the Apple Watch and the iPhone. This data was then sent via a websocket to a server.
The server received then runs GraphQL queries against 8Base to load the data into their database.
The web dashboard used React and was based on the 8base demo application. This dashboard uses the 8base login methods. The graphing library used to render maps is Deck.gl.
Challenges we ran into
This project had several difficult aspects to it. The first was creating the custom React component that automatically populates the 8base data onto the map. Another difficult part was creating the custom HealthKit class for the Apple Watch that automatically updates GPS location and heart rate.
What we learned
We learned the initial steps to setup and access data from an Apple Watch, and now we can use this information to access more data from it (not just heart rate and GPS coordinates).
We also learned a new way to store and fetch data using React, which made working with tables and our maps much easier.
What's next for HealthTrak
We would like to add more data tables and maps with the all the data from the Apple Watch that we haven't even looked at yet! We would also like to add the ability for external health devices, like scales and blood pressure cuffs, to talk directly to our dashboard.