Building a website and mobile application for tourist vehicles rental

MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION GRADUATION THESIS INFORMATION TECHNOLOGY BUILDING A WEBSITE AND MOBILE APPLICATION FOR TOURIS

INTRODUCTION

Scientific and practical significance

2 APPLICATION REVIEW AND CURRENT SURVEY

- Implement case design and project specifications

- Learn about the JavaScript React library and nodeJS

- Learn about React Native framework

- Learn how to use JSON Web Tokens for system API authentication and permission

- Learn how to use MongoDB for user data storage

- Learn how to intergrate Google Maps API into the project

- Proceed to create the system's user interface

- Integrate the built elements (interface, API, database)

- Perfect the system through continuous learning and modification

6 09/06/2024 – 18/06/2024 - Test the system and fix errors

THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom – Happiness

Ho Chi Minh City, July 2024

Student name 1: TRAN TIEN THANH Student ID: 20110567

Student name 2: NGO THANH PHU Student ID: 20110541

Project name: BUILDING A WEBSITE AND MOBILE APPLICATION

Advisor: NGUYEN DUC KHOAN, M.Sc.IT

Ho Chi Minh City, July …, 2024

Ho Chi Minh City, July…, 2024

I hereby declare that this graduation thesis is my own and autonomous work All sources and aids used have been indicated as such All texts either quoted directly or paraphrased have been indicated by in-text citations Full bibliographic details are given in the reference list which also contains internet sources containing URL and access date This work has not been submitted to any other examination authority

We would want to express our appreciation to the instructor, M.Sc.IT Nguyen Duc Khoan, who worked closely with us to develop a project that enabled us to successfully finish our report Throughout this course, you have constantly assisted us with our difficulties in the study process as well as provided us with excellent feedback and recommendations to help us grow as developers in the future As a result, you have become our inspiration for this final project, and we would like to express our gratitude for the opportunity to learn from you in this course Everyone on our team has various talents, and we have discovered our shortcomings in each other over this final assignment, but we've all managed to face this challenge as a team As a result, everyone on our team is really grateful for the opportunity to collaborate

We now have all we need to learn about this subject and do well in it Additionally, we want to thank our classmates for supplying us with a plethora of knowledge and pertinent facts that helped us to strengthen our thesis

We finished the project and report in a short measure of time, with restricted information and numerous different limitations regarding philosophies and skill with programming execution As a consequence of this, there will undoubtedly be flaws in the process of creating the topic; consequently, we eagerly await your significant feedback so that we can increase the number of our experts and perform better the following time This final project is the result of our tireless efforts throughout the semester Because we are still novices, we are aware that our design has numerous shortcomings We welcome any feedback as well as suggestions for improving our project We appreciate it Sincerely!

CHAPTER 2: APPLICATION REVIEW AND CURRENT SURVEY 4

2.2.1 What is the conclusion after reviewing? 10

3.1.2.3 Car renter use case diagram 21

3.1.2.4 Car owner use case diagram 22

3.1.3.2 Use case Search for cars description 24

3.1.3.3 Use case View car information description 25

3.1.3.5 Use case Forgot password description 27

3.1.3.6 Use case Log out description 28

3.1.3.7 Use case Edit profile description 29

3.1.3.8 Use case Verify phone number description 30

3.1.3.9 Use case Add car to favorites description 32

3.1.3.10 Use case Remove car from favorites description 33

3.1.3.11 Use case View list of favorite cars description 33

3.1.3.12 Use case Change password description 34

3.1.3.13 Use case Book a trip description 35

3.1.3.14 Use case Make a payment description 37

3.1.3.15 Use Case View trip list description 38

3.1.3.16 Use case View trip details description 39

3.1.3.18 Use case Become a Car owner description 40

3.1.3.19 Use case Chat with Car owner description 41

3.1.3.20 Use case Chat with Car renter description 42

3.1.3.21 Use case Delete the conversation description 43

3.1.3.23 Use case Compile revenue statistics description 44

3.1.3.24 Use case View car list description 45

3.1.3.25 Use case Search for a car description 46

3.1.3.26 Use case View car details description 47

3.1.3.27 Use case Add a car description 48

3.1.3.28 Use case Edit car description 49

3.1.3.29 Use case Delete car description 51

3.1.3.30 Use case View trip list description 52

3.1.3.32 Use case Update trip status description 54

3.1.3.33 Use case Delete trip description 55

3.1.3.34 Use case Search for trips description 56

3.1.3.35 Use case View review list description 57

3.1.3.36 Use case Reply a comment description 58

3.1.3.37 Use case Search for reviews description 59

3.1.3.38 Use case View invoice description 60

3.1.3.39 Use case Export contract description 61

3.1.3.40 Use case Compile Revenue statistics of the whole system description 62

3.1.3.41 Use case View Car owner list description 63

3.1.3.42 Use case View Car owner details description 64

3.1.3.43 Use case View request list description 64

3.1.3.44 Use case View request details description 65

3.1.3.45 Use case Accept request description 66

3.1.3.46 Use case Decline request description 67

3.1.3.47 Use case View all accounts description 68

3.1.3.48 Use case View user details description 69

3.1.3.49 Use case Delete account description 70

3.1.3.50 Use case View all categories description 71

3.1.3.51 Use case Add category description 72

3.1.3.52 Use case Edit category description 73

3.1.3.53 Use case Delete category description 74

3.1.3.54 Use case View all cars description 75

3.1.3.55 Use case View all trips description 76

3.1.3.56 Use Case View all reviews description 77

Figure 3.1: Guest use case diagram 20

Figure 3.2: Car renter use case diagram 21

Figure 3.3: Car owner use case diagram 22

Figure 3.4: Admin use case diagram 23

Figure 4.6: Forgot Password sequence diagram 95

Figure 4.7: Search for cars sequence diagram 96

Figure 4.8: Log out sequence diagram 96

Figure 4.10: Update Profile sequence diagram 98

Figure 4.11: Verify phone number sequence diagram 99

Figure 4.12: Add a car to favorite list sequence diagram 100

Figure 4.13: Change password sequence diagram 101

Figure 4.14: Book a trip sequence diagram 102

Figure 4.15: Make a payment sequence diagram 103

Figure 4.16: Become a Car owner sequence diagram 104

Figure 4.17: Chat with Car owner sequence diagram 105

Figure 4.18: Chat with Car renter sequence diagram 106

Figure 4.19: Delete conversation sequence diagram 107

Figure 4.20: Revenue Statistics sequence diagram 107

Figure 4.21: Add car sequence diagram 108

Figure 4.22: Edit car sequence diagram 109

Figure 4.23: Delete car sequence diagram 110

Figure 4.24: Update trip status sequence diagram 110

Figure 4.25: Delete trip sequence diagram 111

Figure 4.26: Reply to a comment sequence diagram 112

Figure 4.27: Accept the request sequence diagram 113

Figure 4.28: Delcine the request sequence diagram 114

Figure 4.29: Delete account sequence diagram 115

Figure 4.30: Add category sequence diagram 116

Figure 4.31: Edit category sequence diagram 117

Figure 4.32: Delete category sequence diagram 118

Figure 4.38: Car renter profile interface 123

Figure 4.40: View list trip interface 125

Figure 4.41: View list of favorite cars interface 126

Figure 4.42: Verify diver license interface 127

Figure 4.43: Chat with Car owner interface 128

Figure 4.44: Search for cars interface 129

Figure 4.45: Search for cars by map interface 130

Figure 4.50: Car owner information interface 135

Figure 4.54: Confirm and payment interface 139

Figure 4.57: Become car owner interface 142

Figure 4.58: Sign up modal interface 143

Figure 4.59: Car owner-Admin homepage 144

Figure 4.60: Car owner-Admin login interface 145

Figure 4.61: Car owner-Admin forgot password interface 145

Figure 4.62: Car owner-Admin profile interface 146

Figure 4.63: Owner-Admin change password interface 148

Figure 4.65: Owner-Admin car list interface 150

Figure 4.66: Add-Edit car interface 1 151

Figure 4.71: Chat with Car renter interface 157

Figure 4.76: Car owner list interface 161

Figure 4.77: Car owner details interface 162

Figure 4.80: Car renter list interface 164

Figure 4.81: Car renter details interface 165

Figure 4.82: Add-Update category interface 167

Figure 4.86: Search for cars by filter interface 172

Figure 4.96: My Account – Edit interface 183

Figure 4.99: Become Car owner interface 186

Figure 4.100: My Favorite Cars interface 188

Figure 4.102: My Driver license interface 190

Figure 4.108: Add – Edit car interface 197

Figure 4.111: Conversation – Chat with Car renter interface 201

Figure 5.1: Configure Deployment Front-end 210

Figure 5.3: Manage Deployments Front-end 212

Figure 5.5: Configure Deployment Back-end 214

Figure 5.7: Manage Deployments Back-end 216

Table 3.3: Use case Search for cars 24

Table 3.4: Use case View car information 25

Table 3.6: Use case Forgot Password 27

Table 3.7: Use case Log out 28

Table 3.8: Use case Edit profile 29

Table 3.9: Use case Verify phone number 30

Table 3.10: Use case Add car to favorites 32

Table 3.11: Use case Remove car from favorites 33

Table 3.12: Use case View list of favorite cars 33

Table 3.13: Use case Change password 34

Table 3.14: Use case Book a trip 35

Table 3.15: Use case Make a payment 37

Table 3.16: Use case View trip list 38

Table 3.17: Use case View trip details 39

Table 3.19: Use case Sign up to become a Car owner 40

Table 3.22: Use case Delete the conversation 43

Table 3.24: Use case Compile revenue statistics 44

Table 3.25: Use case View list cars 45

Table 3.26: Use case Search for a car 46

Table 3.27: Use case View car details 47

Table 3.28: Use case Add a car 48

Table 3.29: Use case Edit car 49

Table 3.30: Use case Delete car 51

Table 3.31: Use case View list bookings 52

Table 3.32: Use case View booking details 53

Table 3.33: Use case Update trip status 54

Table 3.34: Use case Delete trip 55

Table 3.35: Use case Search for trips 56

Table 3.36: Use case View review list 57

Table 3.37: Use case Reply a comment 58

Table 3.38: Use case Search for reviews 59

Table 3.39: Use case View invoice 60

Table 3.40: Use case Export contract 61

Table 3.41: Use case Compile revenue statistics of the whole website 62

Table 3.42: Use case View list Car owners 63

Table 3.43: Use case View Car owner details 64

Table 3.44: Use case View the list requests 64

Table 3.45: Use cases View request details 65

Table 3.46: Use case Accept request 66

Table 3.47: Use case Decline request 67

Table 3.48: Use case View all accounts 68

Table 3.49: Use case View Car user details 69

Table 2.51: Use case View all categories 71

Table 3.52: Use case Add category 72

Table 3.53: Use case Edit category 73

Table 3.54: Use case Delete category 74

Table 3.55: Use case View all cars 75

Table 3.56: Use cases View all trips 76

Table 3.57: Use case View all reviews 77

Table 4.18: Forgot password interface description 121

Table 4.19: Car renter homepage description 122

Table 4.19: Car renter profile interface description 123

Table 4.20: Change password interface description 125

Table 4.21: View list trip interface description 125

Table 4.22: View list of favorite cars interface description 126

Table 4.23: Verify driver license interface description 127

Table 4.24: Chat with Car owner interface description 128

Table 4.25 Search for cars interface description 129

Table 4.26: Search for cars by map interface description 130

Table 4.27: List cars interface description 131

Table 4.28: Car details interface 1 description 132Table 4.29: Car details interface 2 description 133Table 4.30: Car details interface 3 description 134Table 4.31: Car owner information description 135Table 4.32: Chat with Car owner description 136Table 4.33: Change location interface description 137Table 4.34: Review interface description 138Table 4.35: Confirm and payment interface description 139Table 4.36: VNPay interface description 140Table 4.37: Paydone interface description 141Table 4.38: Become car owner interface description 142Table 4.39: Sign up modal interface description 143Table 4.40: Car owner-Admin homepage description 144Table 4.41: Car owner-Admin login interface description 145Table 4.42: Car owner-Admin forgot password interface description 146Table 4.43: Car owner-Admin profile interface description 146Table 4.44: Owner-Admin change password interface description 148Table 4.45: Owner homepage interface description 149Table 4.46: Owner-Admin car list interface description 150Table 4.47: Add-Edit car interface 1 description 151Table 4.48: Add-Edit car interface 2 description 152Table 4.49: Add-Edit car interface 3 description 154Table 4.50: Trip list description 155Table 4.51: Trip detail description 156Table 4.52: Chat with Car renter description 157Table 4.53: Review list description 158Table 4.54: Reply description 159Table 4.55: Contract description 159Table 4.56: Admin homepage interface description 160Table 4.57: Car owner list interface description 161Table 4.58: Car owner details interface description 162Table 4.59: Request list interface description 163Table 4.60: Request details interface description 164Table 4.61: Car renter list interface description 164Table 4.62: Car renter details interface description 165Table 4.62: Category list interface description 166Table 4.63: Add-Update category interface description 167Table 4.64: Guest homepage interface description 168Table 4.65: Search for cars interface description 169Table 4.66: Search for cars by map interface description 171Table 4.67: Search for cars by filter interface description 172Table 4.68: Car details interface description 173Table 4.69: Car owner information interface description 175

Table 4.70: Chat with Car owner interface description 176Table 4.71: Book a trip interface description 177Table 4.72: Register interface description 178Table 4.73: Verify OTP interface description 179Table 4.74: Login interface description 180Table 4.75: Forgot Password interface description 181Table 4.76: My Profile interface description 182Table 4.77: My Account – Edit interface description 183Table 4.78: My Trip interface description 184Table 4.79: Trip details interface description 186Table 4.80: Become Car owner interface description 186Table 4.81: My Favorite Cars interface description 188Table 4.82: My Message interface description 189Table 4.83: My Driver license interface description 190Table 4.84: Change Password interface description 191Table 4.85: Dashboard interface description 192Table 4.86: Revenue Statistics interface description 193Table 4.87: Store Profile interface description 194Table 4.88: List car interface description 195Table 4.89: Add – Edit car interface description 197Table 4.90: List trip interface description 199Table 4.91: Review interface description 200Table 4.92: Conversation – Chat with Car renter interface description 201Table 4.93: Export contract interface description 202Table 5.1: Test case admin description 203Table 5.2: Test case car owner description 204Table 5.3: Test case Car renter description 205Table 5.4: Test case guest description 207Table 5.5: Hardware requirements 208

The tourist vehicle rental industry faces significant challenges in ensuring seamless and efficient services for customers Traditional methods of booking and managing rentals, often reliant on phone calls or in-person visits, are cumbersome and time-consuming These methods can lead to errors, double bookings, and customer dissatisfaction due to the lack of real-time availability information Additionally, tourists, especially those unfamiliar with the local language or customs, may find it difficult to navigate these traditional systems As the demand for travel and tourism grows, there is an increasing need for a streamlined, user-friendly platform that can handle the complexities of vehicle rentals, ensuring a smooth experience for both customers and service providers

The core problem is the lack of an integrated digital solution that can address the needs of modern travelers Existing platforms, if any, often lack essential features such as real-time chatting, user-friendly interfaces, secure payment gateways, and reliable customer support Moreover, the absence of a centralized system makes it difficult for rental companies to manage their fleet, track bookings, and analyze customer data for better service delivery The topic "Building a website and mobile application for tourist vehicles rental." goal is to eliminate these pain points This solution aims to provide a seamless booking process, real-time availability checks, multiple payment options, and personalized customer support, enhancing the overall rental experience and operational efficiency

The main purpose of building the car rental website is to create convenience, save time and costs while still ensuring high efficiency In addition, the team aims to achieve the following objectives after implementation:

- Apply acquired knowledge in the project execution process

- Build a "User-Friendly" website and application

- Facilitate users in easily performing actions such as viewing and renting vehicles

- Quickly update information on new cars and owner details

- Design store management for easy operation

- Ensure the security of customer information

For Customers: The website and application developed by our team may not be entirely complete, but it can assist users in easily renting vehicles, providing a space for efficient and reputable business operations

For Our Team: This project serves to enhance our skills in website design and analysis of a car rental platform Additionally, it helps us gain in-depth knowledge of languages and software that support us throughout the project development process

Create a website (utilizing MongoDB and ReactJS) and a mobile app (built with MongoDB, React Native, Expo) featuring intuitive interfaces tailored for seamless car search, trip booking, secure payments, and car owner collaboration

Implement car renters features such as user authentication, car search, car location, car rental, payment, personal information management, trip history, favorite car management, and driver license verification

Car owners can list their cars for rent, manage them, respond to comments, update trip statuses, trip management, create rental contracts, statistics on each car’s revenue and total revenue

The administrator will manage accounts, car owners, cars, categories and grant permission to cooperate with the system

After completing the project, our team has honed and acquired many valuable skills and knowledge, especially in the use of current emerging technologies Through

3 this process, the team has gained experience for future projects When our work is applied in practice, it will effectively meet the goal of connecting people through social networks, particularly the younger generation in today's technological era

APPLICATION REVIEW AND CURRENT SURVEY

Technology review

CHAPTER 2: APPLICATION REVIEW AND CURRENT SURVEY 2.1 Application review

• Display cars posted by owners

• Owners post their cars for rent

• Search for cars by city, time

• Simple and user-friendly for both new and experienced User

• Diverse car model and price

• Support for renting cars on multiple routes and cities

• Various forms of car rental

• Only direct payment is supported.

• Car owners post their cars for rent

• The partner registration process is relatively complex.

• Display cars posted by car owners

• Support car rental in many cities

• The interface is not eye-catching

• Simple, eye-catching interface for easy operation

After conducting a status survey, the team has drawn valuable experiences to design and implement from the interface and logic to support users to meet the basic needs of car rental and car owner registration

2.2.1 What is the conclusion after reviewing?

The conclusion is based on the content of the website and mobile application that supports the need of the project’s requirement These websites and mobile applications are very good and have many experiences about car rental But if we can combine a part of each website and mobile application then we can serve as a useful car rental system

REQUIREMENT SPECIFICATION

Non-functional requirements

SYSTEM DESIGN

Interface design

VALIDATION AND DEPLOYMENT

Deploy website process

CONCLUSION

Evaluation

In the context of technology, we have succeeded in using many technologies smoothly From a technical perspective, after the writing of the essay, we have learned a lot of lessons about the process of building a product To build a good and perfect product is a long process of effort and effort

About the product itself, we tried to build a complete product, and from the consumer's perspective, we found it to be suitable for all Car renters We have built a Car renter- friendly system, the UI/UX is designed to be minimal to reach more potential customers

Through this product, we have learned a lot of lessons in terms of technique, and the spirit of teamwork.

Difficulties

This is the first time our team has integrated online payment to develop a website, mobile app so we encountered many difficulties during the implementation process The car rental process and verification of relevant documents are quite complex, making it more challenging to model the requirements

In the process of writing the report, we had to change a lot about the product, but we also learned many lessons from it.

Future plan

In the future, this product can expand more than that, for example:

- The current system does not yet manage the payment of services like Momo, Zalo Pay

- We want to develop for Car renters to be able to verify citizen identity card verification, points function, changing points to get discount codes

[1] Itviec Blogs, “MongoDB - Definition and Comprehensive Overview A-Z”, What is mongoDB, accessed 06/09/2024

[2] Topdev Blog, “Understanding Express.js and its Pros and Cons”, Understanding Express.js and its Pros and Cons, accessed 06/09/2024

[3] Topdev Blog, "ReactJS – What You Need to Know", ReactJS - The basics you need to know | TopDev , accessed 06/09/2024

[4] Linh Tran, "Basics of Database Management Systems", Basics of Relational Database

Management Systems (viblo.asia), accessed 06/09/2024

[5] Topdev Blog, "What is React Natice? ", What is React Native?, accessed 06/09/2024

Tiêu đề	Building A Website And Mobile Application For Tourist Vehicles Rental
Tác giả	Tran Tien Thanh, Ngo Thanh Phu
Người hướng dẫn	Nguyen Duc Khoan, M.Sc.IT
Trường học	Ho Chi Minh City University of Technology and Education
Chuyên ngành	Information Technology
Thể loại	Graduation Thesis
Năm xuất bản	2024
Thành phố	Ho Chi Minh City

Định dạng
Số trang	242
Dung lượng	10,72 MB