More details on this is available at Devpost and GitHub
Wahi, named after the Hawaiian word for place, is a two-part system that enables users to assist with preserving and recording Hawaii’s marine protected species. By using this application, we aim to save the time of Hawaii Marine Animal Response volunteers by streamlining their data collection and reporting process for endangered animal sighting reports.
Wahi Mobile The Wahi Mobile app allows the public to report sightings of Hawaii’s protected animal species such as the monk seal, sea turtles, sea birds and other species such as dolphins, and whales. Additionally, if there is an animal in distress, the mobile app will direct users to the proper hotline to call. The mobile app collects user’s location data and images to help volunteers be better prepared for any required field response. The app has helpful images in the Species Guides section to assist the user in answering questions within the report.
Wahi Web As sightings are reported to the app, the website is dynamically updated without any refreshing of the page needed. HMAR volunteers will be able to utilize the website to monitor new sightings in both a table view and a map view. Additionally, the application will aggregate related sightings and ask the user to confirm these aggregations. HMAR volunteers can also view charts based on the data in the application to gain more insights. To be compatible with HMAR’s current reporting system, this application also has an exporting feature. Volunteers can easily choose which ranges of dates to export and press a button to start downloading a csv file.
Wahi Mobile The mobile app is built with React Native using Expo in development. The Meteor React Native package is used to connect the mobile app to the Meteor/Mongo backend to insert new sighting reports. We also implemented Expo functions to grab the user’s location and pick images. It uses React Navigation to pass data between each of the pages in the multi-step form. At the end of the form, the client connects to the backend via websockets and submits the report, which can be viewed on Wahi Web.
WebView The web application is built with React and Semantic-UI. Most of the pages were built as class-based components and were based on the meteor-react-template.
Backend The backend for this app uses MongoDB for the database as well as Meteor. This application’s database includes four similar collections: one for each animal type. There are slight differences in each collection due to HMAR’s different requirements needed per animal.
We spent the first couple of days at the beginning of this hackathon setting up our development environments. The most troubling part was the mobile emulation. We all ran into issues, some emulating IOS and others emulating Android. In the end, we all ended up using an IOS emulator once we figured it out because none of us could get an Android emulator working. It was fortunate that we all had Macs we could work on for this.
One challenge that we initially faced at first was attempting to connect the React Native frontend with the Meteor/Mongo backend. After some experimentation using the Meteor React Native library, we were able to get it talking to each other via websockets.
Another challenge we had was deciding what to do with related sightings. In the end, we decided to not merge records in order to preserve the integrity of each record.
Data for this project was split across 4 similar collections/tables (Turtles, Seals, Birds, and Others) but with slight differences. We often wanted to display data from all 4 collections, all in one table or on one page, which quickly became troublesome. Even combining all 4 collections was an issue as we wanted this data sorted independently of the animal type.
##Accomplishments that we’re proud of [everyone] “In my opinion, I think teamwork, communication, and the division of tasks went really well. Alyssia is a good manager overseeing everything to get it all done in time. I believe planning went well and we stuck to a good schedule of meeting up and updating our statuses throughout the weeks.” - Bela
“I was proud at just how much functionality we got working in just a few weeks. We have many different pages for displaying different information or for different tasks. Also the fact that our project is split into two parts (the mobile app and web view) with completely different functionalities to meet the needs of the two types of users was something I found very impressive.” - Mujtaba
We all took away different things from this project, but for most of us, it was our first time working on a mobile app. We used react-native for the mobile view where all of us previously were only familiar with React. The database tables in this project had many fields/columns – more than any of us had likely worked with – which was a challenge to manage whenever we had to work with the collections. This was also (for most of us) our first longer-term hackathon; we had participated in the Meteor Hackathon immediately before this but that hackathon was shorter than a week. We had to reorganize and work around people’s schedules to be able to not burn out working on this project with a bigger scope.
To further enhance our app, we can add more charts to visualize the data for different types of filters, such as percentage of animals tagged, number of distress calls over time, and high frequency sectors on the island.
Mobile: React Native, MeteorReact Native, Expo, UI Kitten, react-native-maps Web: React.js, Meteor, Mongo, Semantic UI, Google Maps, Victory Project Management: Notion, Discord, Github Projects, Miro board
https://daaj.meteorapp.com/