POST OFFICE MOBILE APP PROJECT

Project for Mobile Computing Application (CS 284 at St. Olaf College)

Overview

Our project is developed for the Post Office in St. Olaf. Now, the Post Office write all the package informations manually. Each carrier has a notebook and student needs to sign each row for packages. Our app is aimed to create a management system for both PO workers and students.
Workers could add packages and change the status(signed/unsigned) for students and students have the ability to check their own packages and receive notifications when package has arrived.

Tarball

https://drive.google.com/file/d/10RnSd_cxpkvovKYJApoDTTUBn-Sez2RP/view?usp=sharing

Feature List

https://docs.google.com/document/d/1x4ajkkesxAFCFDFlh2HI7EPHaFgmnq2lYTTIvUUreI4/edit?usp=sharing

Technology List

https://docs.google.com/document/d/1QqsOCVStnS97WUplR70KoeFJw1YMeVP9zVZbXYLcNNI/edit?usp=sharing

ER Diagram

https://docs.google.com/document/d/1B8MmJepryUJjrpg3yOF1nNSKmGUZQy7T1E7RQAn2BYg/edit?usp=sharing

Presentation slides

https://docs.google.com/presentation/d/1wP13iPEVHYkRnpK6GhXjS6K-sKgXOWZ7HRJLGG3msZI/edit?usp=sharing

Technologies

We use react-native and expo for the app development and use Rest Api to do the backend server.
Postgresql as database. We also use Postman for testing notification

Structure and functions

SignIn page

Views: Has one button 'Sign in'
Purposes:
    Lead to google account. Verify through Google/OAuth authentication
    Only allow St.Olaf account
    Connect to the database to verify student/worker in order to open corresponding page (Home2/Home)
    Check the database to insert the token of the device if necessary
Function:
    _singInWithGoogleAsync: Sign in with google
    _check: check if it is St.Olaf account
    _isWorker: send email and token to database to verify account/add token

Corresponding backend models:
    ExampleRestModel: verifyUser
        retrieve the role of the user
        check token of that user to the database
        add token if necessary

Home and Home2 page

Home: for worker use, has both student page and worker page
Home2: for student user, only has the student page
Functionality:   
Both pages get user information from sign in page, to show Welcome, {user_name}. Also has the sign out feature to go back.

student page and Detail page, NotFound page

Views: Has a searching bar and hit search on keyboard to search
Functions:
Clicking on list item to go to detail page to see all the detail information
componentDidMount: when open the page, app will fetch from the server to get package data belongs to the user
_onRefresh: refresh the page to fetch data
search: searching by carrier, tracking number or status from already fetched data, ordered data by date, send the list to search page
        searching by carrier and status returns a list view, tracking number returns a detail view for the specifc package
        Jump to the Not Found page if entering invalid info

Corresponding backend models:
PackageHandler: doGet function to retrieve data from the database

Signature page

Views: Listview with click to jump to detail2 page. Also when retrieving data, shows the activity indicator. Has pull down to call refresh.
        Also implemented the slide to right to mark a single package
Functions:
componentDidMount: get data when open page, list is ordered by date, showing status on side
_search: searching by full name or last name, fetch data from backend server. Ordered data by date, send the list to search page
_onRefresh: refresh the page to fetch data. When search bar is empty, fetch all data from the backend.
        When there's something in the search bar, just refresh the data for corresponding items
_sign: Signing for slide list item. Get the trackno for of this list item and go to backend server to change corresponding status to 1
_slide: A helper function, calling _sign and _onRefresh. To auto-refresh when status changed.
_update: When entering full name in search bar and search, patch to the backend server to change all package status belongs to that person to 1 
_mark: A helper function, calling _update and _onRefresh. To auto-refresh when status changed.

Corresponding backend models:
SignatureHandler: doGet function to get data from searching, doPatch function to change status by name
SignHandler: doPatch to change status with a specific tracking number.

Detail2 page

Views: Card view to see all the details of one package
Functions:
_update: update status by patch to the backend server with the trackno send from the signature page.
_mark: A helper function, calling _update and _onRefresh. To auto-refresh when status changed.(haven't implemented _onRefresh)

Corresponding backend models:
SignHandler: doPatch to change status with a specific tracking number.

Search page

Views: ListView with click to jump corresponding detail page.
Functionality:
Showing all results search by a keyword, sended from the student page, signature page and filter page.

Worker page

Views: Has three buttons for adding, searching and signing packages.
Fuctionality:
When user presses the button, navigate to the corresponding page.

AddPack page

Views: ScrollView with a form for the workers to enter the package info and one button 'Submit'.
Functionality: Add information of the packages to database and notify the student
Functions:
    Each validate function for each box in order to check whether the information there is valid
    notification:
        notifyExpo: send the token( retrieved from getToken ) to Expo with the message in order to notify the user 
        getToken: get the token of the student from database 
    addPackage: get values from the formInput and use the 'POST' method to send these values to server
    _add: call functions addPackage and notification

 Corresponding backend models:
    AddPackagesHandler: doPost to insert packages to database.
    ExampleRestModel: getToken to get token of the student in order to notify them.

Filter page

Views: ScrollView with a search bar on the top and three main components(Filter by date, carrier and package status).
       Has a DatePick for filtering by data and checkboxes for filtering by carrier and status.
Functions:
    _search:  Filtering the already fetched data by tracking number, date, carrier or status. Can be filtered by multiple values. 
              Send the list to search page. Filtering by date, carrier and status returns a list view. Searching tracking number 
              returns a detail view for the specifc package. Navigate to the Not Found page if entering invalid info.
setDate: Get the date object(month,day,year) from the DatePick part.
_changeText: Get value from the search bar.

Tracking page

Views: Has one text input box for filling the tracking number and one button 'Track'
Purpose: Open google page with that tracking id
Functions:
    _tracking: Open google page with that tracking id