RIDEMAP: Passenger Count through Manual Passenger Counting

Description

This mobile app allows registered smartphones to collect data on number of passengers boarding and leaving vehicles in the different stations of EDSA Busway.

Requirements

Free Expo account
React Native and Expo for mobile app development
Smartphones with internet

The Laravel backend for the Ridemap already supports this app. The endpoint for submission of face detection is /api/passenger-count. The backend accepts a single input with the following attributes: station_id, passenger_in, passenger_out, and scanned_at. user_id is extracted from the token used to authenticate the device.

Building the App

Since this app has been created with expo, the app can also be built with it through the Expo Application Services. To do this make sure that eas-cli is installed in your computer with npm i -g eas-cli. Then, in your app's root directory, just run eas build and follow the instruction. You can view the progress in expo.dev website, i.e. dashboard. Afterwards, you can download the app bundle which you can distribute to users or submit to app / play store.

Important: Do not forget to update the api configuration in the utils.js file to point to the url of the API of the backend. Specifically, this line:

export const api = axios.create({
   baseURL: 'https://ridemap-php.herokuapp.com/api'
})

Workflow

Device Authentication

To use this app, devices must be registered in the server. To do this, follow the instructions below:

Download the app
Open the app to connect to the server for the first time
The app will show an invalid device message along with the device ID. Use this device ID to register the device in the server.

Note: The device ID does not refer to the actual device ID of the device but rather the device ID of the app tied to the server. This is unique for every app that is installed in the device.

Getting Started

Install the necessary tools:

Any IDE (Webstorm is preferred but you can also use Atom and VS Code)
Install Nodejs
Install Expo
Install Expo Go in IOS/Android
Install Git

Follow the following steps to get set up:

Clone this repository

git clone https://github.com/mlab817/ridemap-counter.git

Change directory to ridemap-counter

cd ridemap-counter

Install dependencies

npm install

Update the API endpoint in utils.js file

export const api = axios.create({
   baseURL: 'https://ridemap-php.herokuapp.com/api'
})

Start expo dev server

expo start

expo r -c

The second command is used when you cannot connect your device to the webserver.

Follow the instructions in the CLI message to connect your simulator or physical device.

Building and Distributing the App

To build the app, install the Expo Application Services.

Create a free account in Expo.
Install eas-cli to use eas in command prompt and/or terminal.

npm i -g eas-cli

From the root directory, run:

eas build

Follow the on-screen instructions. You will find the android/ios bundles in your Expo account under Build menu, e.g. https://expo.dev/accounts/{accountName}/projects/ridemap-counter/builds. You may also integrate submission to Play Store and App Store.

Note: Unfortunately, to build IOS applications, you will need to apply and register to Apple Developer Program which costs $99 yearly. Android build is free and can be downloaded for distribution.

Using the App

Open app
Device connects to server
Server verifies that device is registered
1. If device is not registered, display invalid device message along with the device ID. Note that the device ID is not the actual device ID but rather the ID of the device tied with the app.
2. If device is registered, proceed
Prompt user to select station where it is located
Input passenger in and out
Press submit

After succesful submission, the form will be reset and the user can immediately input the next passenger count.

Table Structure

- users

Stores data of users of the system

Attribute	Type	Description
id	int autoincrement	Primary key of the table
name	varchar	Name of the user
email	varchar	Email of the user
email_verified_at	timestamp	Timestamp when the user validated their email
password	varchar	Hashed password of the user
device_id	varchar	Device ID of the user
created_at	timestamp	Timestamp when the record was saved in the database
updated_at	timestamp	Timestamp when the record was updated in the database

- stations

Stores data of stations in EDSA Busway

Attribute	Type	Description
id	int autoincrement	Primary key of the table
name	varchar	Name of the station
created_at	timestamp	Timestamp when the record was saved in the database
updated_at	timestamp	Timestamp when the record was updated in the database

- passenger_counts

Stores data on scanned QR codes

Attribute	Type	Description
id	int autoincrement	Primary key of the table
station_id	int	Foreign key referencing stations table
passenger_in	int	Count of passengers entering the vehicle
passenger_out	int	Count of passengers leaving the vehicle
scanned_at	timestamp	Timestamp when the entry was generated
user_id	int	Foreign key referencing users table (user that submitted the data)
created_at	timestamp	Timestamp when the record was saved in the database
updated_at	timestamp	Timestamp when the record was updated in the database

Screenshots

Screen 1 - Splash screen
Screen 2 - QR Code for the Device ID which can be scanned to easily copy the device ID
Screen 3 - Select station where device is located
Screen 4 - Input data on passenger entering vehicles and leaving vehicles and submit

Author

This mobile app is developed by Mark Lester Bolotaolo.

mlab817 / ridemap-counter Goto Github PK

ridemap-counter's Introduction