Skip to content

HACC2023/Mana-o

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Manaʻo: Mālama Honua

Deployment

Our code is deployed at https://malamahonua.space/

11/13/2023 3:24 am Code was pushed from private repository to test-03 branch of this repository

11/13/2023 10:48 pm Code was brought from test-03 branch into main. So, you can use main if you choose to clone this project.

To test out a regular user (Contractor) login, you can use jane.doe@gmail.com and password is "janepass". You can also create your own regular user by registering. However, please contact the developers (Team: Mana-o; tarynet@hawaii.edu) if you want to be approved as a new user. All new users must be approved by existing administrators (as shown in the Registration process below) for security purposes.

To test out an Admin, you can use tarynet@hawaii.edu and password is "tarynpass".

Table of Contents

About Mālama Honua

Our team name is Manaʻo meaning “thought” or “idea”, as our goal is to gain insight in solving complex real-world problems through software engineering. Our application, Mālama Honua, meaning “to take care of the Earth”, is a responsive web application with multiple levels of user access, allowing for real-time updates on large marine debris reports and the seven steps it takes to dispose or repurpose the trash into useful products. It features a relational database with an easy UI for administrative access and a chat feature that allows for communication between the removal organization staff. Technologies used: React with JWT Authentication, Node.js Express, PostgreSQL, Bootstrap and socket.io for the in-app chat.

Technologies

Back-end: PostgreSQL Database

  • Open-source

  • Underlying scripting language, allowing solving at the database level Replaces the need for middleware that blocks requests that cause the server to halt

  • Why a Relational Database? The data involves different kinds of objects so a relational database that links these objects makes it more efficient to query the data

Front-end: React.js, Bootstrap, CSS, DataTables

  • React.js allows for pages that are responsive and highly user-interactive
  • Can make changes on the Client side without needing to re-render from the backend, leading to a more satisfying user experience
  • Bootstrap: Default styling gives uniform appearance that can be customized with CSS
  • DataTables: Allows for easy filtering and sorting without needing to query database directly

Security: Node.js, Express.js, JWT Authentication, PL/pgSQL functions

  • Node.js Express server: Can configure service to only accept requests from a particular domain
  • JWT Authentication: The access tokens created prevents visiting important pages without logging in, preventing CSRF attacks. Can control which pages each type of user can access.
  • When inserting into the PostgreSQL database, PL/pgSQL functions filter any text input from users to prevent SQL injection attacks
  • Database is being served on a different server from the application server
  • Passwords are salted and hashed

Chat Functionality: socket.io, WhatsApp

  • Built a simple chat application using Socket.io and Express.js to allow users to converse with each other more easily.This is to fulfil the sponsor’s request for a dispatch communication tool
  • Also allow for accessing WhatsApp because this is what the sponsor used to use for communications

How To Use

The following is a walk-through guide of Mālama Honua's features.

Landing Page

On the landing page, public users of the app will be able to view an interactive map (map is still in progress) and be able to go to an "About" page describing the app and navigate to a Login page.

Landing Page About Page Login Page

Reset Password

Users can request to reset their password. They will receive a verification code via email. They can enter in this code and are able to reset their password.

Reset Password Step 1 Reset Password Step 2 Reset Password Step 3

Registration (Requires Admin Approval for New User Access)

Users can register as a user if they want to be able to assist with debris removal themselves (i.e. Removal/Transport Contractors and Storage Contractors). After filling out the registration form, users must undergo an approval process. Existing administrators can log in to Mālama Honua and view unapproved users. They can choose to approve a single user or multiple users at a time.

Registration Unapproved Users

DOBOR Form: Split the Results of Form into Multiple Records

Currently, marine debris is reported and handled by the DLNR Division of Boating and Ocean Recreation DOBOR Form. From the sponsor's request, we replicated this form. Since this is the only existing form that is used to gather initial debris reports, we were not allowed to change the DOBOR form. But this posed an additional challenge for us in collecting the data for measurement purposes because the DOBOR can treat multiple items as a single report. Whereas, CMDR needs to be able to quantify the type and quantity of each debris item.

We took the DOBOR Form and kept the form number. But we generated sub-reports with unique IDs for DOBOR submissions with multiple items. For example, if OAH_1 is a debris reporting on Oahu with 2 debris items, we take the output of OAH_1 and store the 2 items as 2 separate item reports with the OAH_1 designation.

DOBOR-form Detections

Admin: View All Users and Edit Roles

Admins can view all users so that they contact contrators easily via phone or the built-in message system. Additionally, Admins can make someone an Admin.

(Note: New users are automatically added as a regular user. But existing admins can assign a new user to an admin role.)

Admins can also delete users from the system.

All Users Edit User

Admin: View All Detection Records, Modify Existing Values and Add Missing Values

CMDR requested flexibility in being able to modify and add to their records. Administrators can view all detection records, correct mistakes in records, and add to fields that are missing values.

Detections Detections Edit

Chat: Two-person Chats and Multiple-Person Chats in Rooms

CMDR requested the ability to keep track of their chats more easily. So, we built an in-app chat system.

Users can choose to chat with another user (Two-person Chat).

In App Message Options Person 1 Chat Person 2 Chat

Users can also chat with multiple other users in Rooms.

Room Chat

WhatsApp

Additionally, CMDR mentioned that they used WhatsApp previously for communicating with contractors. So, we also allow for the ability to bring up WhatsApp from our App.

All Users WhatsApp open

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published