SightSea Module Summary

https://docs.google.com/document/d/1if6AkJ7-xKHHGZxh93Y02oD7eEPRgdCOW18OcWLfzLU/edit?usp=sharing

Inspiration

Allowing non-profits to more efficiently use of volunteers is always important. For this project, we designed a user-friendly and cross-platform application that will provide beachgoers with a streamlined system to report native animal sightings to HMAR.

What it does

SightSea allows for anyone to submit reports form either IOS or Android devices. There is also a web application that allows for administrators and dispatchers to verify the incoming reports. From IOS and Andriod you are able to see the verified reports.

How we built it

We used react-native to build a cross-platform application. We did this using node, expo for development and testing, and GitHub for version control.

Challenges we ran into

There were numerous issues that we ran into during this project.

First, the map package that was used to display the google maps view on mobile simply did not work on the web application. To resolve this issue, we used a different package for mobile and for web. The code to modify each on the pages was slightly different causing numerous errors. This was rectified to only allow maps to be seen on the Web application as getting one map to work was a big enough challenge.

Second was package version compatibility. To resolve deployment errors, we had to downgrade our react version causing numerous other packages to no longer be compatible. This was resolved by slowly bringing all of the broken components down to be in line with expo and react.

Third was deploying to IOS. Deploying a test application to IOS requires a paid membership to Apple's Developer Program, but we are still searching for a free way to test an expo application on an IOS device. The application can still be run locally on an iPhone, and to do so, please see the "iOS Demo" section below. However, for now, the deployed app is only available on web and Android.

Lastly was getting reports to be viewable as well as editable. Placing this functionality into its own componet was good for division of work, but ended up with a lot of duplicate code. Additionally this ended up introducing bugs that were hard to debug as they were in relation to individual actions per each animaltype in the database.

Accomplishments that we're proud of

Getting the maps to display the pins for the reports. Additionally, the map pins update based on the type of database you currently have selected from the verified reports database. This was most troublesome as different packages were needed to display the map on mobile versus on the Web.
Query efficiency, scalability, and organization.
Our staff page efficiently pulls only required reports to be displayed at any given moment. Each table page displays two, three, or four reports at a time, and the table's pagination options also dynamically adapt to the database change in size. The table also auto-organizes reports by animal type, and can change its display depending on which animal type is selected. This approach will scale to any size while staying efficient and practical.
Ease of reporting.
Our application's report page provides a simple reporting experience for everyone. The page dynamically changes depending on the animal type and can be filled out through drop-downs and text inputs.
Database Export functionality Staff members are able to export a chosen database and save it to their Android device or Desktop computer. The export function does not work on IOS.

What we learned

We learned that building a cross-platform application is much more challenging than we thought. While it is true that you can use one code repository for all three applications it makes bug finding/fixing more the three times as challenging. If we were to approach this project again, we would probably do it in raw react-native and simply display a web-friendly application instead of using expo to deploy to IOS, Andriod, and Web.

What's next for SightSea

For SightSea, we sea the future as a bright one as we hope the HMAR selects our project to go forward so we can have more time to deploy our applications to IOS and android. We also hope to push additional user-friendly features such as: search functionality for reports, document deletion, better web navigation, and a single push put export of the database for NOAA data as well exporting of the database on IOS as well.

Below we will preview the pages and how we anticipate them being used for this project.

Main Page

This page has 3 buttons, the "Report an Animal" button takes you to the form page to allow volunteers, staff, and users to submit reports on the sightings. The "Report a Distressed Animal" button opens a dialog box that has the HMAR hotline number, on IOS and Andriod you can click "Call" and it will open the dialer with the number displayed. The Staff page will take you to the staff page only if you are an administrator. If you aren't or are not logged in it will take you to the login page first.

Form Page

This page allows anyone to submit a report about a sighting of a native bird, seal, or turtle. Dropdowns are used to ensure a clean aesthetic as well as we have the correct values pushed into the database. The page is intended to be used by either volunteers or the dispatcher if they need to create new reports. Additionally, the submitter will get a chance to send an email to an assigned email address.

Staff Login

This page allows dispatchers, and volunteers to log in so that they can have access to the Staff Page. There is currently only one account (username: admin@gmail.com, password: admin1).

Staff Page

This page has a table for all new incoming reports. After the reports have been verified they will move down to the lower table to allow for grouping and assignment. The reports are verified by checking the box and clicking the "Verify" button.

The lower table shows all confirmed reports. This will have the data filtered based on the type of report, seal, turtle, or bird. This will allow for quicker inspection of visual reports that are clustered together. You can also change the number of items that are being displayed, you can choose from two, three, or four.

The related button works as follows, click the check box on the left-hand side for all the reports that you want to relate. You are unable to relate different animal type reports. Then click the "Related" button. This will mark all the reports as related.

There is also an export function to export the currently selected database to a csv file. The export works on both Web, and Andriod.

View Report

To view a single report in greater detail simply click on a report. The new unverified reports can also be viewed for accuracy prior to approval. Staff are also able to add and edit data on any of the reports that have been verified.

If the selected report is related to other reports, then all the related reports will be displayed in a table below the selected report.

View New Report

This page allows for dispatchers to view and edit un-verified reports. Instead of showing related table, it instead shows the verify button which performs the same as the verify button does on the Staff Portal page.

Andriod Demo

To view our application on an Android device download the Expo Go application from the Google Play Store. Once it is installed then simply scan the QR found at: https://expo.dev/@jimanaka/sightsea, and the application will start.

Web Demo

To view our application on a web browser, please follow this link: https://sightsea-57e15.web.app/ . There is currently no way to go back to a previous page as it is a port from the web application. We do plan to implement a web-only back button, but for now, please refresh the page to return to the home screen.

iOS / Local Demo

As previously mentioned, we are currently unable to remotely deploy to iOS devices due to monetary costs; however, the application does work on iOS devices. To run on an iOS device, first download the ExpoGo application on your mobile device. Then, download the source code from https://github.com/HACC2021/SightSea/tree/production with nodejs installed. Then run 'npm install' and 'expo start' to start the app on the local machine. You can then scan the QR code with your camera (iPhone) or in the ExpoGo app (Android) to open the app. We understand that this is difficult, but we are unable to provide an iOS deployment without paying to do so at this time. We recommend the web application as an alternative as it has all the same functionality.