Group Project - Drive Time Application

-- RMIT University - Saigon South Campus

Table of Contents

Table of Contents

1. Description
2. Built With
3. Features
4. Installation
   • Prerequisites
   • Installation
5. Features
6. Credits
   • Contributors
   • Third-party Attributions
   • Other Acknowledgements
7. Contact

Description

The team project re-builds taxi booking app using React Native - cross platform framework, and Firebase to store the database. For frontend, the team uses React Native Paper and Tailwind CSS to style following the available design from Uber app.

Inside this app, the user can login as an admin, or as a customer. As an admin, the user can view the statistics of the app, perform CRUD actions to user list, membership list, or voucher list. The user can also filter or sort the list based on category, date, or any other values. As a customer, the user can perform booking, transaction action, view nearby places, SOS, and so on.

Build With

Backend

Frontend

Others

• And stripe API for transaction performance.

Features

Boarding Screen

• This boarding screen has 3 subpages. We can choose either skip to move to Home screen or next to explore the app.

Authentication Screen

Signin Screen

• In this screen, the user is required to input username or password to continue using the app. Besides, they can renew their password, login using Google account, or register a new account.

• Below screen is if they choose to login using Google account

Signup Screen

• From login screen, after clicking register, the current page now is Register Screen. Firstly, they need to register account with two input fields, including email, and password first.

• Then the user has to enter the rest information of the account, including: name, username, phone, data of birth, gender (because our system is in primary version, so there are not many choices for genders),

Home Screen

• We required the user location to ensure the app can track to get the customer to the driver.

• This is our home screen. In home screen, the user can search destinations through search bar, or perform booking actions through Suggestions section.

• They can also view nearby popular places through Explore nearby:

• There is also instruction section where the customer can see how to book the app, or how to use the app.

Explore Nearby Screen

• This screen is navigated from Home Screen.
• The users can view nearby popular places or filter the nearby places based on store types, and rating, and any other categories:

Booking Screen

• This screen is navigated from Home Screen
• In this screen, there are currently 2 input fields, icluding pick-up place and destination, and a displayed map rendered from Google Map API.

• When inputting a place, there is place suggestion section:

• Then the screen will display route from pick-up location to destination, and the distance between those places.
• It also prompts the customer to choose car among the option, vouchers, and transaction method.
• The customer can also interact with the map by dradding, zoom in, or zoom out.

• Here is the UI after choosing a vehicle option:

• After clicking to confirm booking, the screen displays searching driver.
• There is also pulsing animation when searching a driver.

• After found a driver:

• The customer is required to input transaction information to pay before performing booking. Inside this, we can also have card validation.

• We skip the riding process. Then, click, Done to finish the drive. Now, we navigate to Review screen.

Chat Screen

• From Booking Screen, when found a driver, the customer can chat with driver by pressing Chat with Driver. The below screen is chat driver.

Review Screen

• After finishing the drive, the customer now is in Review Screen.

Voucher Screen

• The user can view list of available vouchers, and filter these vouchers based on car category.

Profile Screen

• This is our profile screen.

• The user can update their user profile information.

• Besides, they can also view their message history by clicking on messages section.
• We can navigate to About Us screen from this section.
• Or can use SOS functionality after clicking Safety Report:

• With 2 options, the first one Edit/add SOS to prompt user to input their Emergency contact information or edit the old contact one.

• The second option is Trigger SOS, which counting down from 120 seconds to provide music for this feature:

Admin Homepage

• To go to this, first the user has to logout and login as an admin account.

• From this, they can view user list and perform CRUD action:

• Or view and perform CRUD action on voucher list. They can also filter the list based on vehicle category.

• Or view and perform CRUD action on membership list, or sort based on membership point, created data, etc.

• Next is navigating to Admin Dashboard:

Admin Dashboard

• This is navigating from admin section homepage.

• The admin can ban a driver:

• Or view insight of users:

• Or insight services:

• And insight finance:

About Us

• This is navigated from Profile Screen. We can view team members, license, copyright, contact information and some statistics.

Installation

• Clone this project
• Open Project Folder
• Open terminal in root directory:
  • Run npm install to install all dependencies
  • Run one of the following commands npm start: for expo build -> then run s -> a npm run dev: for android development build -> then run a If there is error No development build available -> run s -> run a Please wait for at least 30 minutes to allow it to run Please assure your computer is charging when running this

Cautions

• On MacOS and possibly in Windows:
  • If you have error with npm run android:
    • Make sure you have installed Android Studio and run device emulator
    • Run: echo 'export PATH=$PATH:~/Library/Android/sdk/platform-tools' >> ~/.zshrc source ~/.zshrc to update echo adb devices to check if your device is connected
    • Make sure java version is 11 by typing java --version:
      • If not version 11, install it by brew install openjdk@11 and brew install jenv to set java version
      • Run brew --prefix openjdk@11 to find location of java 11
      • Run jenv add /result-of-above-command/libexec/openjdk.jdk/Contents/Home to add java 11 to jenv
      • Move terminal to root directory of this project and run jenv local 11 to set java version to 11 (if 11 is not valid, run specified version of java 11)
    • Run npm install -g expo-cli
    • Also run npm update
    • Now rerun npx expo start
  • If there is error which is relevant to CommandError: No development build (com.drivetimeapp) for this project is installed. Please make and install a development build on the device first.:
    • Rerun expo run:android
  • If still cannot rerun: run npm run --reset-cache and rerun npx expo start

Other Commands Usage

• Check if any code error: npm run check-typescript
• Check any error with eslint: npm run check-eslint -> If there is any error, run npm run check-eslint --fix to fix it automatically
• Combine both commands above: npm run lint

Features

• If driver has not register car -> they cannot receive passenger
• Filter inside account: filter list of drivers, list of customers, list of admins, filter based on membership
• Sort account list (by name, by created, by updated, by review rate)
• Update account, update nested entity - transport inside account
• Delete account
• More in proposal

Technologies

• For database and backend: Firestore, firebase auth, firebase

• For frontend: React Native Android and Expo

• Styling: react native paper, unsplash images, google map api, stripe for payment

• Admin: user284@mail.com

• Customer: user424@mail.com

Credits

Contributors

Name	Student ID	GitHub Profile	Contribution (%)	Work
Tran Mai Nhung	s3879954	Puppychan	20%	Backend and front end - multi destinations booking
Tran Nguyen Ha Khanh	s3877707	hakhanhne	20%	Backend and front end - sos, authentication
Nguyen Dinh Viet	s3927291	felix101003	20%	Backend and frontend - google map
Doan Huu Quoc	s3927776	Mudoker	20%	Backend and front end - algorithms, call
Tran Vu Quang Anh	s3916566	tranvuquanganhRMIT87	20%	Backend and front end - voucher, payment

Third-party Attributions

Flowbite

Other Acknowledgements

• Map Image on Home Screen

Contact

• Tran Mai Nhung - s3879943:

  • Email: s3879954@rmit.edu.vn - nhungmaitran1412@gmail.com
  • Github profile: Puppychan
  • Linkedin: Nhung Tran

• Tran Nguyen Ha Khanh - s3877707:

  • Email: s3877707@rmit.edu.vn

• Nguyen Dinh Viet - s3927291:

  • Email: s3927291@rmit.edu.vn

• Doan Huu Quoc - s3927776:

  • Email: s3927776@student.rmit.edu.au

• Tran Vu Quang Anh - s3916566

  • Email: s3916566@rmit.edu.vn