MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION GRADUATION THESIS INFORMATION TECHNOLOGY BUILDING AN APPLICATION FOR FINDING TOURIST ATTRACTION IN VIETNAM BASED ON MERN STACK LECTURER: Ph.D LE VINH THINH STUDENT: NGUYEN THI MINH HOANG LE THI PHUONG THAO SKL 009859 Ho Chi Minh City, Jan 2022 HO CHI MINH UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY OF INFORMATION TECHNOLOGY SOFTWARE TECHNOLOGY SUBJECT □🕮□ GRADUATION THESIS BUILDING AN APPLICATION FOR FINDING TOURIST ATTRACTION IN VIETNAM BASED ON MERN STACK STUDENT NAME STUDENT ID NGUYEN THI MINH HOANG 18110285 LE THI PHUONG THAO 18110366 ADVISOR Ph.D LE VINH THINH HO CHI MINH – 1/1/2022 HO CHI MINH UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY OF INFORMATION TECHNOLOGY □🕮□ GRADUATION THESIS BUILDING AN APPLICATION FOR FINDING TOURIST ATTRACTION IN VIETNAM BASED ON MERN STACK STUDENT NAME STUDENT ID NGUYEN THI MINH HOANG 18110285 LE THI PHUONG THAO 18110366 ADVISOR Ph.D LE VINH THINH HO CHI MINH – 1/1/2 HCMC University of Technology and Education SOCIALIST REPUBLIC VIETNAM Faculty of Information Technology Independence – Liberty – Happiness ******* ******* INSTRUCTOR COMMENT SHEET Full name of the first student: Nguyen Thi Minh Hoang………….ID: 18110285 Full name of the second student: Le Thi Phuong Thao …….ID: 18110366 Majors: Information technology. Subject: Building an application for finding tourist attraction in Vietnam based on MERN Stack.D Le Vinh Thinh COMMENT 1.Regarding the content of the topic and the volume of implementation: ………………………………………………………………………………………… 2. Approval for oral defense? (Approved or denied)………………………………………. Ho Chi Minh city, ………………….
2022 Instructor teacher (Sign & write fullname) HCMC University of Technology and Education SOCIALIST REPUBLIC Faculty of Information Technology VIETNAM ******* Independence – Liberty – Happiness ******* REVIEWER TEACHER 'S SCORECARD Full name of the first student: Nguyen Thi Minh Hoang. ID: 18110285 Full name of the second student: Le Thi Phuong Thao………….ID: 18110366 Majors: Information technology. Subject: Building an application for finding tourist attraction in Vietnam based on MERN Stack. Reviewer teacher: Huynh Xuan Phung COMMENTS: 1.
Regarding the content of the topic and the volume of implementation: ………………………………………………………………………………………… ………………………………………………………………………………………… 2. Approval for oral defense? (Approved or denied). Ho Chi Minh city, …………………. 2022 Reviewer teacher (Sign & write fullname) ACKNOWLEDGEMENT First, our group would like to send our sincere and most profound thanks to the Faculty of Information Technology – Ho Chi Minh City University of Technology and Education for creating conditions for our group to study, develop a deep knowledge base and carry out this topic.
Besides, our team would like to thank M. Le Vinh Thinh, who has supported us a lot. The teacher gave us ideas to help us improve the product better and more realistic; Besides, he also shared valuable tips to enhance the group’s presentation. Thanks to his enthusiastic support, we could complete this essay well.
However, the amount of knowledge is endless, and with the limited capacity, we have tried very hard to complete it the best way. Therefore, the occurrence of errors is inevitable. We hope to receive your enthusiastic comments so we can learn from experience, improve and upgrade our products in the best way possible. We sincerely thank you! Implement group Nguyen Thi Minh Hoang – 18110285 Le Thi Phuong Thao – 18110366 HCMC University of Technology and Education Faculty of Information Technology GRADUATE THESE SUBJECTS Full name of the first student: Nguyen Thi Minh Hoang……………ID: 18110285 Full name of the second student: Le Thi Phuong Thao ………….ID: 18110366 Dissertation time: Specialized: Software technology.
Project name: Building an application for finding tourist attraction in Vietnam based on MERN Stack.D Le Vinh Thinh Thesis task: 1. Theory: Learn about technologies: MERN Stack 2. Implementation: Build a travel app with features: - Web admin: + Manage locations, contributors, user reviews and related information. + Manage users, statistics.
- Mobile application with basic feature: + View information and search for tourist attractions. + Rate places, virtual voice guides. + Create plan for trip. + Manage user profile.
+ Search for places and routes on the map. + Connect with friends. Date Tasks Product Note - Search, research and Functional diagram of 16- brainstorm ideas for topics. 1 24/8/2021 -Learn about MERN Stack technology ● Make a plan to implement the 2 25/8-30/8 topic.
● Interface design for web and Mockup 3 1/9-10/9 app mobile, ● Building APIs using nodejs. The APIs have been 4 11/9-20/9 deployed to heroku Website for admin 5 21/9- 20/10 ● Build a website for admins. deployed to netlify Apps running on 6 21/10-20/12 ● Build mobile apps for users. android Applications run 7 20/12-26/12 ● Testing and debugging.
smoothly on devices 27/12- 8 ● Complete report Essay report 5/1/2022 14/02- 9 ● Complete Alan function. 20/2/2022 21/02 – ● Research and development 10 27/02/2022 direction 28/02 – ● Add friend and notification 11 27/3/2022 features. ● Research user behavior and 28/03 – individualized application 12 17/04/2022 solutions based on each specific user. 13 08/05/2022 ● Write Power point.
09/05 – Essay report and 14 ● Test the app and debug. 09/07/2022 powerpoint ● Write a report. Ho Chi Minh, ……………. 2022 Instructor Reporter (Sign and fullname) (Sign and fullname) TABLE OF CONTENT TABLE OF CONTENT.
10 LIST OF ACRONYMS. 17 LIST OF TABLES. 18 LIST OF FIGURES. The urgency of the topic.
Scientific and practical significance. 4 CHAPTER 1: THEORETICAL BASIS. Some main features. Advantages of React.
The disadvantage of React. Overview React Native. Concept of redux toolkit. 10 CHAPTER 2: STATUS SURVEY AND DETERMINATION OF REQUIREMENTS.
Travel apps available. Non-functional requirements. Functional Decomposition Diagram. User functional decomposition diagram.
Administrator functional decomposition diagram. Systems usecase diagrams. Usecase web module. Usecase app module.
Usecase description for mobile application. 23 Create a plan with a voice assistant (Alan). 52 View user’s announcements. 53 Add new friend.
Usecase description for web application. 55 CHAPTER 3: SOFTWARE DESIGNATION. Sequence diagram in mobile application. 75 6) Search place in map.
76 7) Find the route. 77 8) View detail information about place. 78 9) View created plan. 80 11) View detail plan.
83 14) Create detail places for each day in plan. 84 15) Delete detail place in each day of plan. 85 16) Create place review. 86 17) Create contribution for place.
87 18) Report invalid report. 88 19) Add favorite place. 89 20)View all places. 90 21) Create new plan.
94 26) Log in with Google. Sequence diagram of Web app. 98 1) Manage places: Add new place. 98 2) Manage places: Edit place.
99 3) Manage tags, categories, provinces: Create new. 100 4) Manage tags, categories, provinces: Edit. 101 5) Manage explores: Create new. 102 6) Manage explores: Edit.
103 7) Manage users: Lock/unlock account. 103 8) Manage contributes: Mask as read/Hide. 104 9) Manage contributes: View related infomation. 104 10) Manage reported review: Mask as read/hide.
105 11) Manage Reported review: View related information. User interface design. Mobile application interface. Application start interface.
Login screen interface. Registration screen interface. Forgot password screen interface. Location details page.
Location details screen ( tab views reviews). Report creation screen. User review creation screen. Location search screen.
Plan view screen when not logged in. Plan view screen. Plan details screen. Plan creation screen.
Day planner screen. User Collection Screen. Location search screen on map. User profile screen when not logged in.
User profile screen. Language change screen. Favorite places screen. Password change screen.
Friend search screen. User management page. Settings management page. Tag management page.
Category management page. Location management screen. Place creation screen. Location information editing page.
173 CHAPTER 4: INSTALL AND TEST .1 Environment and Software used:. Test admin login function. Test admin’s new content creation features. Test the admin’s reporting and violation management functions.
Test the user’s location search feature. Test the user’s review creation feature. Test the user’s plan creation feature. 191 LIST OF ACRONYMS LIST OF TABLES Table 1.
Normal account registration usecase. See user reviews usecase. View places usecase. Search for places usecase.
Search the place on the map usecase. Find the route between two places usecase. View details of place usecase. View created trip planner.
Create a trip plan usecase.View plan details usecase. Edit plan information usecase. Delete trip plan usecase. Create a plan for each day usecase.
Clear plans for each day usecase. Create a place review usecase. Make suggestions for the place usecase. Report rating inappropriate usecase.
Add places to favorites usecase. Remove places from favorites usecase. Sign out the app usecase. Password change usecase.
Forgot password usecase. Edit personal information usecase. Change language usecase. Sign in with Google usecase.
Create a plan with a voice assistant usecase. View user’s announcements. Add location usecase. Edit information usecase.
Manage cards; types; districts: Create usecase. Manage cards; types; districts: Update. Manage explore – create usecase. Manage explore – update usecase.
Lock/unlock the user's account - usecase. Manage Contributes: Mark viewed, hidden usecase. Manage Contributes: View related information usecase. Manage reported view: mark viewed, hidden usecase.
Manage reported review: view related information. Description of login screen. Description of the registration screen interface. Description of the forgot password screen.
Description of the navigation bar. Description of the home screen. Description of the location detail screen. Description of the location tab screen interface.
Description of the review tab screen interface. Description of the evaluation report creation screen interface. Description of the review screen. Description of the review creation screen.
Description of the location search screen. Description of the plan screen when not logged in. Description of plan view screen. Description of the plan overview screen.
Description of plan creation screen. Description of the day plan screen. Description of the screen of the processing buttons. Screen description of the collection of favorite places.
Description of location search screen on map. Description of the location selection screen on the map. Description of the route screen on the map. Description of user profile screen when not logged in.
Description of the user profile screen. Description of the user information change screen. Description of the language switching screen. Description of the password change screen.
Description of the notification screen. Description of Friend search screen. Description of the admin login page screen. Description of home page.
Description of the statistics page. Description of the user management page. Description of the provincial management and setting page. Description of the provincial information editing page.
Description of the tag management page. Description of the site type management page. Description of banner management page. Description of the site management page.
Description of the site creation page. Describe of the page to find the location of the place on the map. Description of the location information editing page. Test admin login function.
Test admin’s new content creation features. Test the admin's reporting and violation management functions. Test the user’s location search feature. Test the user’s review creation feature.
Test the user’s plan creation feature. 190 LIST OF FIGURES Figure 1. Organize storage in MongoDB. User functional decomposition diagram.
Administrator functional decomposition diagram. Usecase web module. Usecase app module. Sequence diagram of feature Sign up.
Sequence diagram of feature Login. Sequence diagram of feature View review. Sequence diagram of feature Search places. Sequence diagram of feature View places.
Sequence diagram of feature Search places in map. Sequence diagram of feature Find the route. Sequence diagram of feature View detail information about place. Sequence diagram of feature View created plan.
Sequence diagram of feature Log out.