Building an application for finding tourist attraction in vietnam based on mern stack

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 Instructor: Ph.D Le Vinh Thinh COMMENT 1.Regarding the content of the topic and the volume of implementation: ………………………………………………………………………………………… Advantages:………………………………………………………………………… ………………………………………………………………………………………… Disadvantages:……………………………………………………………………… ………………………………………………………………………………………… Approval for oral defense? (Approved or denied)……………………………………… Rating: ……………………………………………………………………………… Mark:………………………………………………………………………………… Ho Chi Minh city, ………………… 2022 Instructor teacher (Sign & write fullname) HCMC University of Technology and Education Faculty of Information Technology SOCIALIST REPUBLIC 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: Regarding the content of the topic and the volume of implementation: ………………………………………………………………………………………… ………………………………………………………………………………………… Advantages:…………………………………………………………………… ………………………………………………………………………………………… Disavantages:……………………………………………………………………… ………………………………………………………………………………………… Approval for oral defense? (Approved or denied) …………………………………… Rating: ……………………………………………………………………………… Mark: ……………………………………………………………………………… 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 Instructor: Ph.D Le Vinh Thinh Thesis task: Theory: Learn about technologies: MERN Stack 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 PLAN No Date Tasks Product - Search, research and Functional diagram of 16- brainstorm ideas for topics the application 24/8/2021 -Learn about MERN Stack technology ● Make a plan to implement the 25/8-30/8 topic ● Database Design ● Interface design for web and 1/9-10/9 app mobile, ● Building APIs using nodejs 11/9-20/9 21/9- 20/10 ● Build a website for admins 21/10-20/12 ● Build mobile apps for users 20/12-26/12 ● Testing and debugging 10 27/12- ● Complete report ● Complete Alan function 20/2/2022 21/02 – 27/02/2022 The APIs have been deployed to heroku 5/1/2022 14/02- Mockup ● Research and development direction Website for admin deployed to netlify Apps running on android Applications run smoothly on devices Essay report Note CHAPTER 4: INSTALL AND TEST Variable Description RECOMMENDEE The connection id to the Recombee suggestion system RECOMMENDBEE_REGION Server location on Recombee RECOMMENDBEE_APP The project name is created on the Recombee suggestion system 4.1.2.2 Web application The file environment has a absolute path: “.env” Variable Description REACT_APP_GOOGLE_CLIE Google client id to connect to Google NT_ID REACT_APP_GOONG_MAPS Goong map key to connect to Goong.io _KEY 4.1.3 Install app The app is publicly saved at: includes main folders, corresponding to Server API, Web application, Mobile application Server api: - Open terminal at server directory, run the following command to install support libraries: npm install - Create the environment file "config.env" with the following parameters: GRADUATION THESIS 178 CHAPTER 4: INSTALL AND TEST Figure 120 Config instruction - Use the following command to run the server: npm run server Web application - Open terminal at server directory, run the following command to install support libraries: npm install - Create an environment file ".env" with the following parameters: Figure 121 Config instruction - Use the following command to build the application: npm start Mobile application - Open terminal at server directory, run the following command to install support libraries: npm install - Use the following command to build the app: npx react-native run-android GRADUATION THESIS 179 CHAPTER 4: INSTALL AND TEST 4.2 Test 4.2.1 Test admin login function Table 96 Test admin login function Id TC_001 Testcase Test step Test data Login with admin role -Go to page: https://vntravelg uide.netlify.app/ admin/login Username: thaole301 000@gma il.com Valid data -Enter username Password: and password 12345 Expected result Actua l result Fail/ Pass Logged in Expec successfully ted , direct to Dashboard page (admin) Pass Login Expec unsuccessfu ted l, system shows notification “Username or password incorrect” Pass -Click “Login” TC_002 Login with admin role Invalid data -Go to page:https://vntr avelguide.netlif y.app/admin/log in Password: -Enter username 12345 and password -Click “Login” TC_003 Login admin page with user rights account -Go to page: https://vntravelg uide.netlify.app/ admin/login - Enter username and password -Click “Login” GRADUATION THESIS Username: thaole301 000@gma il.com Username: Login nhungle@ unsuccessfu gmail.com l, system Mật khẩu: shows notification 12345 “Role of user is not allowed” Expec ted Pass 180 CHAPTER 4: INSTALL AND TEST 4.2.2 Test admin’s new content creation features Table 97 Test admin’s new content creation features Id Testcase TC_00 Create new place Test step Test data -Go to page: https://vntravelg uide.netlify.app/ admin/places -Name: “Đia đao Cu Chi” -Click button + -Province: TP HCM -Fill in all the form -Click button “Submit” Description: “Thêm sau” Expected result Actual result Fail / Pass Create Expect successfully, ed direct to Edit details page of this place Pass Show successfully update message Pass -Category: Di tích lịch sử -Open time: 9:00 AM -Close: 7:00 PM TC_00 Update the content of the place -Go to page https://vntravelg uide.netlify.app/ admin/places -At the object to be edited, select edit (pen-shaped button) Object was edited: Bien long Information update: Lowest price: 30,000 Expect ed -At the Edit details page, update information -Click button “Save” GRADUATION THESIS 181 CHAPTER 4: INSTALL AND TEST TC_00 Create new province -Go to page: https://vntravelg uide.netlify.app/ admin/settings -Name: Lao Cai Show successfully update -Color: message The #20c200 list of provice -Click “New -ImageUrl: has been provinces” https://vietna loaded, and -Fill in the form mdailytravel district has vn/wpjust been -Click “Save” content/uploa added ds/2021/05/T rang-Anhavatravel.jp g Expect ed Pass TC_00 Update the content of the province -Go to page: https://vntravelg uide.netlify.app/ admin/settings -Province Show edit: Lao Cai successfully -Information update to be edited: message The -Tại quận,huyện Color: #ffff list of provice has been cần chỉnh sửa, loaded, and chọn button hình edited bút At the properties are object to be displayed edited, select edit (pen-shaped button) Expect ed Pass -Fill in form -Click “Save” GRADUATION THESIS 182 CHAPTER 4: INSTALL AND TEST 4.2.3 Test the admin’s reporting and violation management functions Table 98 Test the admin's reporting and violation management functions Id Testcase Test step TC_001 Mark the contribute approved -Go to page: https://vntravelguide.n etlify.app/admin/dashb oard Expected result Actual result Display successful update message Contribute selected will be moved to the seen of contribution section Expect ed Pass Pass click , select “Contributor info” contribute Expect Go to the user ed management page, in the table display information about a user correspondin g to the creator of the contribution -Go to page: https://vntravelguide.n etlify.app/admin/dashb oard Go to Edit details page of reported location Pass -At the newest in contribute, choose a random contribute, click , select “Mark as read” TC_002 TC_003 View contributo r's informatio n View informatio n of the reported GRADUATION THESIS - Go to page: https://vntravelguide.n etlify.app/admin/dashb oard - At the newest in contribute, choose a random contribute, Test data Expect ed 183 Fail/ Pass CHAPTER 4: INSTALL AND TEST location (contribut e) - At the newest in contribute, choose a random contribute, click , select “Go to this place” TC_004 Hidden contributi ons -Do to page: https://vntravelguide.n etlify.app/admin/dashb oard Display successful update message Contributions selected will no longer appear in both the newest and seen contribute - At the newest in contribute, choose a random contribute, click , select “Hide this contribute” Expect ed Pass 4.2.4 Test the user’s location search feature Table 99 Test the user’s location search feature Id TC001 Testcase Search location by name exists in the app GRADUATION THESIS Test step Test data - Click the Search Name box, the screen will go : to the search page -Enter a place name Expe cted result Actual result Show search result for “Hai Dang” Fail/ Pass Expecte Pass d “Hai Dang” 184 CHAPTER 4: INSTALL AND TEST TC002 Search location by name which not in the app - Click the Search Name box, the screen will go : “ho to the search page suoi lup” -Enter a place name Show “No result s for “ho suoi lup” Expected Pass 4.2.5 Test the user’s review creation feature Table 100 Test the user’s review creation feature Id TC_00 Testcase Create review Test step Test data Expected result Actual result -Sign into the app -Account login: Display a Expected Pass nhungle@gmail.com, message of password: 12345 successful -Search save, return selected -Selected location: to the location Vinh long review - At the -Information fill in section of Details the review: rate (4), the place, screen, tour date: 5/1/2022, information select Title: “Happy”, about the “Reviews” Content: “I will be last review back” is -Select displayed “Write review” -Fill in form -Click “Save” GRADUATION THESIS Fail/ Pass 185 CHAPTER 4: INSTALL AND TEST TC_00 Create review when not login -Search selected location -Selected place: Vinh Displays long message that the user is not - At the logged in, Details so cannot screen, create a select review “Reviews” And there -Select is a button “Write to go to the review” login page Expected Pass 4.2.6 Test the user’s plan creation feature Table 101 Test the user’s plan creation feature Id Testcase Test step Test data TC_001 Create -Sign into plan the app (Logged) -In the navigation bar, select the “Plan” tab -Username: Display Expected Pass nhungle@gmail.com, successful password: 12345 save message, -Trip information: go to the Name: “Dating”, detailed Description: “Go view of with him”, the trip background: -Select “Create plan” Expected result Actual result image1.png -Fill in information of trip -Click “Create” GRADUATION THESIS 186 Fail/ Pass CHAPTER 4: INSTALL AND TEST TC_002 Create plan (Not logged in yet) -In the app, at the navigation bar, select the “Plan” tab -Select “Create plan” GRADUATION THESIS Displays Expected Pass a message that the user is not logged in so cannot create a review, there is a button to go to the login page 187 CONCLUSION CONCLUSION Achievements After a period of ideation and realization, the team has created a complete application that can meet the essential needs of users Besides, we also have specialized knowledge as well as necessary skills: Know the new technology is MERN Stack and apply it in the project Practice teamwork skills, divide work and manage time appropriately Make the application more accessible to users by using virtual assistants to help us better understand the importance of AI Advantages User-friendly interface, compatible on many different devices (except IOS) In addition to providing the basic features of travel applications, our project also supports smart virtual assistants Create convenience for users when traveling Users can also create schedules, invite friends to their trips The application also supports bilingual, flexible names for foreign visitors Disavantages All possible circumstances have not been tested Because Alan's virtual assistant's server does not support Vietnamese, finding famous places is still difficult The friend feature has not been completed yet, users not have much connection GRADUATION THESIS 188 CONCLUSION In terms of performance, some screens still load a bit slow, performance is not very optimal Development In the future, we want the application to be more accessible to users through Ai Focusing on developing travel virtual assistants, supporting users more in collecting desired destinations, especially foreign tourists when coming to Vietnam Besides, we also want to create more connection between users through sharing travel experiences And develop more on many languages, not only Vietnamese and English GRADUATION THESIS 189 REFERENCES JOB ASSIGNMENT Table 102 Job assignment Task ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● Member Lavel of completion Database design Design UI for web admin Code server – create api for admin Development of web admin functions Develop Map function for mobile application Create UML Diagrams Develop friend function (search for friends, send friend requests) Finding and implementing solutions to analyze user behavior (Recombee) Write report Le Thi Phuong Thao 100% Survey and find out the situation Mobile app UI design Code server – create api for users Develop basic user app functions Learn the Alan voice virtual assistant platform to integrate into the app Develop the function to receive notifications (new friend requests, trip invitations ) Finding solutions to analyze user behavior Create UML Diagrams Write report Nguyen Thi Minh Hoang 100% GRADUATION THESIS 190 REFERENCES REFERENCES [1] Greeksforgreeks (2021), What is MongoDB – Working and Features [Online] Available: https://www.geeksforgeeks.org/what-is-mongodb-working-and-features/ [2] Hong Nhi, “React Native gì? Tổng quan ưu nhược điểm React Native” [Online] Available: https://wiki.tino.org/react-native-la-gi/ [3] Do Khanh Toan (2017), “Giới thiệu ReactJS - Phần I (Các khái niệm bản)” [Online] Available: https://viblo.asia/p/gioi-thieu-ve-reactjs-phan-i-cac-khainiem-co-ban-V3m5WzjblO7 [4] Machine learning (2017), Content-based Recommendation Systems [Online] Available: https://machinelearningcoban.com/2017/05/17/contentbasedrecommendersy [5] Pham Van Toan (2017), “Làm để xây dựng Recommender System (RS) - Phần 1” [Online] Available: https://viblo.asia/p/lam-the-nao-de-xay-dungmot-recommender-system-rs-phan-1-aWj53V2Gl6m GRADUATION THESIS 191