Bloombugs HMAR Application

Table of contents

Overview

For HACC 2021, we decided to choose the challenge proposed by NIC Hawaii, the Hawaii Marine Animal Response (HMAR) Sighting & Reporting App. Currently HMAR handles all animal sighting reports by phone. HMAR and NIC mentioned that they would like to have the ability to handle reports via an application as well - to decrease the amount of phone traffic and confusion as well as make it easier to record each sighting.

Our solution for HMAR HACC’s problem is the Kahukai web browser application that will be accessible on both mobile and computer. We have different landing pages for the public users who are reporting animal sightings on the go and for the admin users accounts who are the HMAR staff that are managing the sighting reports database. There is a login page for the admin users to access these additional capabilities. The public users are shown a landing page with a link to the animal in distress form, animal sighting forms, and a more information page. The admin users have a landing page with a link to submitting a report, and a link to view logs of all past submitted reports. When a report is submitted it will be added to the list of records that the admin users view. We are using Meteor to create the application and MongoDB will be used to store the animal sightings. Using Meteor will allow the application to be supported on a web browser and mobile devices. The application will be hosted on a Digital Ocean droplet.

For our Bloombugs project in ICS 314 we built off our HMAR HACC solution where we have each user including the public users register and log in, to have an individual state for each account. It is individualized through having the public users being able to view their history of past submitted reports. We also added a function of admin users being able to edit and delete the submitted reports. We use the same tech stack as the HMAR HACC and also additional technologies such as ESLint, IDPM, Semantic UI/React; the application is stylized aesthetically and optimized for access on selected standard devices.

User Guide

This section provides a walk-through of the HMAR application user interface and its capabilities.

Landing Page

The landing page is presented to all users when they visit the top-level URL to the site.

Sign In, Sign Up, Admin Sign Up

Click on the “Login” dropdown in the right hand corner of the navbar, then select the “Sign In” navigation. This will bring you to the “Login to your account” page and login with your credentials.

In the “Login” dropdown there is also a “Sign Up” navigation to go to the “Register your account” page which lets new regular users create a new account.

In the “Login” dropdown there is also a “Admin Sign Up” navigation to go to the “Register your admin account” page which lets new admins create new a new account. There is a unique “Admin Password” that is required to sign up as a new admin user which will only be known to the admin organization.

Public User Landing Page

After logging in as a public user, you are taken to public user landing page which will display three buttons: “Animal in Distress”, “Animal Sighting”, and “Click Here”. Currently, the “Report a Sighting” button on the admin landing page will redirect to this same public user landing page.

Animal in Distress

This page shows a red “Click for Phone Call” button alongside HMAR’s phone number which encourages users to first call to report an animal distress. Below that there is a green “Click for Online Form” button which will let the user fill out an animal distress form in the case they cannot call the number provided.

Animal Sighting

This page show four different buttons with images for sighting reports according to the animal being reported: “Hawaiian Monk Seal”, “Turtle”, “Bird” and “Other”. The forms all take in the date, time, animal name (species), name of person (reporting), phone number, location, description, markers, number of people (in the area of the animal), and image (preferably as a URL).

As there is only one species of Hawaiian Monk Seal, there is no option to specify the type of seal spotted. There is an option to choose whether it is an adult, baby, or seal with pups in the “Animal name” field.

The Turtle and Bird forms allow for the user to click on the photo to specify the type of turtle or birds spotted.

The Other form page will let the user know that HMAR does not respond to reportings of any other animals besides Hawaiian Monk Seals, Turtles, and Birds, but there are other organizations that can be contacted if wishing to make a report.

Click Here

This page shows four different buttons for information on how to tell if the Hawaiian Monk Seal, Turtle, or Bird are in distress and an Other page.

The distress information pages will give the user a general bullet-pointed list on telling whether an animal is distressed. Below the lists there is a warning to not approach the animal and to keep a distance in accordance with federal and state laws. There is also a button to call the HMAR phone number as well a button to submit a distress form.

The Other information page will let the user know that HMAR does not respond to reportings of any other animals besides Hawaiian Monk Seals, Turtles, and Birds, but there are other organizations that can be contacted if wishing to make a report.

User Reports

The users that have an account can view their past submissions. If the user has yet to make any reports, their tables will appear empty.

Below are examples of the User Report page for two different users. The reports that appear on the tables are unique to them.

The admin users also are able to view reports that they have submitted. Since they submit reports that people call in, the admin user’s report page will have different names associated with the different reports.

Admin User Landing Page

After logging in as an admin user, you are taken to the admin user landing page which will display two buttons: “Report a Sighting” and “Look at Records”. The “Report a Sighting” button redirects the admin user to the public user landing page as described above. In the Navbar the admin can look through the Seal, Turtle, Bird, and Distress records.

Look at Records

This page redirects to the record tables for the Seal, Turtle, Sea Bird, and Distress Animals sightings. The record table shows the information that was submitted on the forms by all users.

There are editing and deleting capabilities for the all the reports. For example, edit a specific distress report, the admin user can click on the “Edit” hyperlink which is below the red underlined Edit category which will direct the user to the “Edit Report” page. For example, delete a specific distress report, the admin user can click on the “Delete” hyperlink which is below the red underlined Delete category which will direct the user to the “Delete Report” page.

Community Feedback

The feedback asked what people liked and disliked about our app and what could be added or changed to make the app better. Below are the comments of some members of the community:

Deployment Guide

Currently the app can be accessed via the deployed application running on Digital Ocean or by deploying locally on your machine.

Here is the link to the deployed application running on Digital Ocean. You can log in as an admin with “admin@foo.com” with password “changeme” or as a regular user with “john@foo.com” with password “changeme”. You can also create a new regular user by clicking on “Login” on the right hand corner of the Navbar and selecting “Sign up” from the dropdown menu.

To deploy locally on your machine, clone the application repository to your machine. After cloning the repository, open Terminal on Mac or Command Shell on PC. To access the cloned repository type “cd” into the path of its folder in Terminal/Command Shell. Then, once in the local repository folder, “cd app” to begin deployment.

Once in the app folder, type “meteor npm install” in Terminal/Command Shell to install meteor which runs the application. You may have to wait for a while for meteor to finish installing. After meteor installation, type “meteor reset” in Terminal/Command Shell which resets the database and also initializes two default users, 1) “admin@foo.com”, an admin user and 2) “john@foo.com”, a regular user. Currently, the default passwords for both of the users is “changeme” on the application. To then run the application, type “meteor npm run start” in Terminal/Command Shell and the application will begin to run. Once “App running at: http://localhost:3000/” shows up on the Terminal/Command Shell, you can access your locally deployed application in a web browser, preferably Chrome, at http://localhost:3000/. If deployment is successful, the landing page should show up in your web browser.

To modify the system, first make a branch on whichever GitHub client you are using; make sure not to make any changes on the “master” branch. Change to the newly made branch then open IntelliJ IDEA and open the cloned repository directory. Please do not change anything in any folder other than “app”. Once the project is opened in IntelliJ IDEA, you can change anything as required. Most of the functionality will be located in folders “app/client”, “app/imports”, and “app/public”. Folder “app/client” contains the main HTML and Javascript files, along with the style.css file. Folder “app/imports” contains the folders “api”, “startup”, and “ui”, which is where the bulk of the application is located, i.e. the components/layout/pages in “ui”. Folder “app/public” contains all of the images that are on the application.

Please refrain from deleting anything or changing the names of any files or exports as the application is very modular and multiple components will import/access different files and exports. Once you have made any changes to the application, feel free to push the changes on the branch that you have checked out.

Development History

Milestone 1: Finish HACC application

The goal of Milestone 1 is to finish the HACC application. The link to our Milestone 1 project page can be found here.

The issues that we have completed for Milestone 1 have all been merged with the HACC branch and are as follows:

Milestone 2: Add users / admin functionality, “Beyond the Basics”

The goal of Milestone 2 is to add public user and admin user functionality. “Beyond the basics” includes: database filter functionality; standardizing date, time, and locations, reporting seal identifying markings, identification of seabird species, updating “click for more information”. The link to our Milestone 2 project page can be found here

The issues that we have completed for Milestone 2 are as follows:

Milestone 3: User functionality and UI/UX, “Secret Sauce”

The goal of Milestone 3 is to add more user functionality, improve the UI/UX, and add our special “secret sauce” that makes our application truly unique. The link to our Milestone 3 project page can be found here.

The immediate issues that we have completed for Milestone 3 are as follows:

Contact Us

Our Team

HMAR application is designed, implemented, and maintained by Jacob Hardy, Kelly Hwang, Kiana Walters, Kylie Higashionna, and Taryn Takebayashi.

In the News

The HACC version of the HMAR application won 2nd place in the Hawai’i Annual Code Challenge 2021.