Wiaan Duvenhage

200307

DV300 | Term 4

SerenGuard

A mobile application that helps officers better label their crime reports with AI, whilst informing the public


· Report Bug · Request Feature

Table of Contents

• About the Project
  • Project Description
  • Built With
• Getting Started
  • Prerequisites
  • How to install
• Features and Functionality
• Concept Process
  • Wireframes
• Development Process
  • Implementation Process
    • Highlights
    • Challenges
  • Future Implementation
• Final Outcome
  • Mockups
• Conclusion
• License
• Contact
• Acknowledgements

About the Project

Project Description

SerenGuard is the perfect app for officers to create a close connection with their community with keeping their community up to date with reports in the area. That can range anything from smash and grabs to arson. Officers would be able to submit reports and AI would assist in labelling the images from the reports, civilians would be able to view these reports be informed to stay away from these marked locations on the map.

DISCLAIMER

- The SerenGuard application is designed to enhance personal safety and security by providing users with tools and
- information for their safety. While we encourage the community to utilize this platform for sharing information
- related to their safety concerns, we want to make it clear that the SerenGuard application is not a reliable source
- for accurate crime reporting in your area.

Built With

                                   

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

For development, the latest version of Android Studio is required. The latest version can be downloaded from Android Studio

Installation

1. Clone the repo

git clone https://github.com/wiaandev/SerenGuard.git

2. Open the project

Locate and drag file into Visual studio code.

3. Install Node on machine Visit https://nodejs.org/en/download and install the latest version of node for your system

4. Install Yarn

   npm install --global yarn

   or

   sudo npm install --global yarn

5. Install Packages

yarn install

4. Run Project

yarn ios

5. Download Expo Go on Android or iOS

• iOS
• Android

5.1 You can also run the iOS simulator or Android emulator. NOTE: Android studio is required for the Android emulator

• For Android Emulator

expo run:android 

• For iOS simulator

expo run:ios 

Features and Functionality

Register & Login Account

Users can create their account and sign up as either officers or civilians. When you register as an officer you need to have a valid Officer ID and you need to select your rank as an officer. All users would be authenticated and registered on Firestore with a default blue profile image.

Onboarding

When users load onto SerenGuard for the very first time. They would need to go through an onboarding process that explains to them what SerenGuard is all about and some key features about the application

Viewing Reports

Users would be able to view reports made by other officers that would be pinned on the map. Users would be able to tap on a pin so they can read more information about the reports

Searching for neighbourhoods

If a user wants more information about what's going on in their neightbourhood. They can search for their neighbourhood which would take them to a seperate screen where they can view an overview of their neighbourhood and see statistics like the most reported crime and the total amount of reports in their area.

Adding Reports

As an officer, you have the ability to add reports. Which will add a report based on your phone's current location and pin it to the map. The AI will analyse your uploaded image of your report and append labels to it.

Concept Process

I've put a lot of thought into the look feel and aesthetic of SerenGuard. I felt like a dark-mode application would be the best choice considering I am developing a crime-reporting application. I also wanted to pick a color to go with my dark-mode application and I first decided on red but a peer pointed it out that it may have been too aggressive, so they suggested orange and I thought that it was an amazing choice because it's not too difficult on the eyes and still maintains that strong accent that is easy to catch in a dark-mode application.

Wireframes

Firestore Database Structure

User Flow

Development Process

The Development Process is the technical implementations and functionality done for the app.

Implementation Process

For the entirety of the project, I have used Expo CLI and the entire project was built in JSX. For my front-end I have utilised React Native Elements, UI Toolkit for cross-platform development. All the UI elements seen on my application was built and implemented using React Native Paper.

Front-End

• I used react-native-maps package and its <MapView/>, <Callout/> and <Marker/> API's to show the map, markers and callouts of each report.

• Using a <FlatList/> I was able to map my data from my Cloud Firestore database to my front-end.

• I used a <SafeAreaView> to prevent my front-end from going above the screen and into the status bar.

Navigation

• I have made use of a Stack and Tab Navigation during the development of my application.
• In my App.tsx I created my stack navigation with the createNativeStackNavigator() method.

Firebase

• I created a firebaseAuth.js, firebaseDb.js & firebaseStorage.js which held all the back-end functionality and API calls I made with my application.
• In my firebaseAuth.js I handled all my data in regards with signing up and logging in a user and getting the currently logged in user.
• In my firebaseDb.js I handled all my data in regards with the CRUD functionality of the application
• In my firebaseStorage.js I handled my image uploading functionality
• Using createContext() and useContext() hooks in conjunction with wrapping my App with a <Provider> element from React I was able to pass state down to any component and then just calling the firestore functions inside of the context files.

Highlights

• Implementing google maps into my project
• Working with Google Cloud!
• Showcasing my pins based on my reports
• Creating a regex that checks for a certain officer ID pattern, otherwise it would not register the officer to the database.
• Creating a cool application that solves a certain aspect of a social problem in South Africa!

Challenges

• Signing in with Google was a big pain-point. It would sometimes sign me in and other times not. In the future I could maybe add it in a context.
• I struggled a lot with the onboarding because my AsyncStorage get() method kept returning undefined, which resulted in the user having to go through the onboarding process every time. To address this issue, I will explore an alternative async storage package that could help save the user's state and determine if they had launched the application before.

Future Implementation

• Adding Sign in with google
• Removing Reports
• Adding heatmaps to my application
• Creating my own custom AI model that will help with labelling crime scenes
• Adding a admin role that will approve reports
• Adding notifications when new reports have been added
• Adding AI generated content for each neighbourhood based on report type and total amount of reports

Final Outcome

Mockups

Authors

• Wiaan Duvenhage - Github

License

Distributed under the MIT License. See LICENSE for more information.\

Contact

• Wiaan Duvenhage - wiaanduvenhage.dev@gmail.com - @wiaan.dev
• Project Link - https://github.com/wiaandev/SerenGuard

Acknowledgements

• Stack Overflow
• Expo Location
• Figma
• Lecturer
• Anthony Boyd Mockups
• unDraw
• Uploading Media to Firebase Storage
• React Native Onboarding
• React Native Maps & Custom Markers
• Wepik & Storyset Illustrations
• Google Sign in