Building a web based and mobile system for youth hcmute

• Deploy project to EC2 with Docker, Firebase Practice: • Build website and mobile with the following main features: o Student read hot news, activities, register activities to plus poi

MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING CAPSTONE PROJECT INFORMATION TECHNOLOGY BUILDING A WEB-BASED AND MOBILE SYSTEM FOR YOUTH HCMUTE ADVISOR : MSC NGUYEN TRAN THI VAN STUDENTS: BUI THANH PHUONG DIEP THUY VI SKL009611 Ho Chi Minh City, June 2022 HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING -🙞🙜🕮🙞🙜 - CAPSTONE PROJECT BUILDING A WEB-BASED AND MOBILE SYSTEM FOR YOUTH HCMUTE INSTRUCTOR : MSc NGUYEN TRAN THI VAN STUDENTS : BUI THANH PHUONG 18110179 DIEP THUY VI Ho Chi Minh City, June 2022 18110237 SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom – Happiness ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Ho Chi Minh City,day month year 2022 CAPSTONE PROJECT OBJECTIVES Full name of student: Bui Thanh Phuong MSSV: 18110179 Full name of student: Diep Thuy Vi MSSV: 18110237 Major: Information technology Name project: Building a web-based and mobile system for youth HCMUTE Objectives: Theory: • Research MERN Stack: MongoDB, ExpressJS, ReactJS, NodeJS • Research technology relative to React like Redux, Rredux-Saga • Research React Native • Research about AWS, Docker, Nginx, EC2, • Deploy project to EC2 with Docker, Firebase Practice: • Build website and mobile with the following main features: o Student read hot news, activities, register activities to plus points Besides they can track activities that they register, scan qr code tocheckin the vent o Base union creates new request news or activities to show on the website, check and export list attendance, o Admin manage user, activity, news, check student’s attendance • Deploy frontend and backend to EC2 by using Docker • Deploy mobile with Google Firebase i Execute time : 15 weeks (Start date from 7/3/2022 to 27/6/2022) Head of industry Hồ Chí Minh City, day month year 2022 Instructor’s name (Signed with full name) (Signed with full name) ii SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom – Happiness ******* ASSESSMENT FORM FOR INSTRUCTOR Students’ names: Bui Thanh Phuong Student ID: 18110179 Diep Thuy Vi Student ID: 18110237 Major: Information Technology Project’s name: Building a web-based and mobile system for youth HCMUTE Instructor’s full name: MSc Nguyen Tran Thi Van COMMENTARY: Project’s contents and workload: Theory: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Implementation: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Results: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Advantages: iii …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… Disadvantages: …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… Approving for dissertation defence or not? …………………………………………………………………………… …………………………………………………………………………… Achievement level: …………………………………………………………………………… …………………………………………………………………………… Hồ Chí Minh City, day month year 2022 Instructor’s name (Signed with full name) iv SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom – Happiness ******* ASSESSMENT FORM FOR REVIEWER Students’ names: Bui Thanh Phuong Student ID: 18110179 Diep Thuy Vi Student ID: 18110237 Major: Information Technology Project’s name: Building a web-based and mobile system for youth HCMUTE Reviewer’s full name: MSc Nguyen Thanh Phuoc COMMENTARY: Project’s contents and workload: Theory: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Implementation: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Results: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Advantages: v …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… Disadvantages: …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… Approving for dissertation defence or not? …………………………………………………………………………… …………………………………………………………………………… Achievement level: …………………………………………………………………………… …………………………………………………………………………… Hồ Chí Minh City, day month year 2022 Reviewer’s name (Signed with full name) vi ACKNOWLEDGMENTS First of all, I would like to express my love and gratitude to Mr Nguyen Tran Thi Van – a lecturer from the Faculty of Information Technology - Ho Chi Minh City University of Technology and Education, who has given me a lot of precious time, direct guidance, dedicated help, and guidance throughout the process of making specialized essays The authors also sincerely thank all the teachers in the Faculty of Information Technology - Ho Chi Minh City University of Technology and Education, sincerely thank the teachers and teachers who participated in teaching and imparting knowledge During our time at school, reading and reviewing our essay helped us better understand the issues we researched, so that we could complete this essay I would like to thank the University Board of Directors, the Faculty of Information Technology and Faculty for High Quality Training, as other Functional Departments for creating the best conditions for my study and graduation In spite of great efforts we made in the learning process, during the internship period as well as in the process of writing the essay, shortcomings are inevitable Our group is looking forward to valuable comments from teachers as well as all friends so that we can improve the project results Thanks again! Ho Chi Minh City, June 2022 Student group made Bui Thanh Phuong Diep Thuy Vi vii TABLE OF CONTENTS CHAPTER STUDY OF STATUS AND DETERMINATION OF REQUIREMENTS 1.1 The reason for choosing the topic 1.2 Project objectives 1.3 Current status survey 1.4 Overall description 1.4.1 Product background 1.4.2 Operating environment 1.5 Research Methods CHAPTER BASIC THEORY 2.1 Introduction about MERN stack 2.2 ReactJS 2.3 React Native 2.4 NodeJS + Express 2.5 MongoDB CHAPTER REQUIREMENTS ANALYSIS AND MODELING 3.1 Non-functional requirements analysis 3.1.1 Security 3.1.2 Safety 3.2 Requirement modeling 3.2.1 General usecase 3.2.2 Usecase details and Sequence diagram CHAPTER HANDLING DESIGN 69 viii No Name Type Note Sidebar Text input Includes shortcuts system features Logout Button Logout account Data activity and news Item activity , Displays activity and news component news sent from the base union and the system administrator Navigation bar Navigation component bar Shortcuts features to to main Table 4.15 Describe home screen mobile 4.2.2.11 Design side bar mobile Picture 4.13 Design sidebar mobile 92 No Name Type Note QR code scan QR code scant component Scan the QR code for event attendance Information user Button Press here to navigate to Informatio user screen Activity for user Button what activities the user has signed up for and the status of their performance Logout Button Logout account Table 4.16 Describe sidebar mobile 4.2.2.12 Design setting screen mobile Picture 4.14 Design setting screen mobile 93 No Name Type Note Information App Button Show application information Contact Button Show admin contact information Rate app Button Rate the application after experience Change password Button Change password for user Table 4.17 Describe setting screen mobile 94 CHAPTER IMPLEMENT AND TESTING 5.1 Implement code 5.1.1 Clone project - Get source code of project from github: • Frontend: https://gitlab.com/thanhphuong468/yfhq_portal_frontend.git • Backend: https://gitlab.com/thanhphuong468/yfhq_portal_backend.git • Mobile: https://gitlab.com/vithuydiep/hcmute_portal_mobile.git - Run the following command to get source code git clone 5.1.2 Install frontend and backend - After cloning the source code, open it with Visual Studio Code Picture 5.1 Folder project frontend 95 - Start project by running the following command: • npm i • npm start 5.1.3 Install mobile - Open android virtual device to select the emulator Then open the source code with Visual Studio Code Picture 5.2 Folder project mobile - Then open terminal and run the following command • npm start • npm run android 96 5.2 Testing 5.2.1 Test create request news Test Case Description Test Case ID Created By Create request news 1.0 Vi Reviewed By Phương Version Vi Date Tested May 15, 2022 Test Case (Pass/Fail/Not Executed) QA Tester’s Log Tester's Name S# S# Prerequisites: Pass Test Data Access to yhcmute.online title = Thông báo đăng ký môn học Login as base union tag = tin bật 3 4 content = Khoa ĐT CLC gửi Thông báo đăng ký môn học HK3/2021-2022 dành cho SV Khoa ĐT Chất lượng cao (SV hệ CLC Tiếng Việt CLC Việt- Test Scenario Verify on entering valid userid and password, the customer can login As Expected Pass As Expected Pass System send request submit As Expected of user and alert that user create request successfully Pass User choose open create request button User fill out the name, content, thumnail, tag,,, of news The form will be shown for user System receive information of user User press submit button Pass / Fail / Not executed / Suspended Actual Results Expected Results Step Details Step # Picture 5.3 Test create request news 5.2.2 Check validation of input field when create request news Test Case ID Test Case Description Created By Check validation of input field when create request news Vi Reviewed By Phương Version 1.0 Vi Date Tested May 15, 2022 Test Case (Pass/Fail/Not Executed) QA Tester’s Log Tester's Name S# Prerequisites: S# Pass Test Data Access to yhcmute.online Title = Thông báo đăng ký học phần Login as base union Name = Diệp Thúy Vi 3 Phone = fbhfh 4 Content = Thông báo sinh viên đăng ký học phần năm 2022 … Test Scenario Verify on entering valid userid and password, the customer can login Step # Step Details Expected Results Actual Results Pass / Fail / Not executed / Suspended User choose open create request button The form will be shown for user As Expected Pass User fill out the name, content, thumnail, tag,,, of news Alert error due to error of phone's field As Expected Pass Picture 5.4 Check validation of input field when create request news 97 5.2.3 Test get all news data Test Case ID Test Case Description Created By Test get all news data Phương Reviewed By Vi Version 1.0 Phương Date Tested May 15, 2022 Test Case (Pass/Fail/Not Executed) QA Tester’s Log Tester's Name S# Prerequisites: S# Access to yhcmute.online Pass Test Data 2 3 4 Test Scenario Step # Step Details Expected Results Actual Results Pass / Fail / Not executed / Suspended Access to website yhcmute.online Website will be shown As Expected Pass Press button to get all news All list news will be loaded and shown into website As Expected Pass Picture 5.5 Test get all news data 5.2.4 Create request activity Test Case ID Test Case Description Created By Create request activity Vi Reviewed By Phương Version 1.0 Vi Date Tested May 15, 2022 Test Case (Pass/Fail/Not Executed) QA Tester’s Log Tester's Name S# Prerequisites: S# Pass Test Data Access to yhcmute.online name = Thông báo đăng ký môn học Login as base union tag = lãnh đạo kỹ thuật 3 content =Chương trình nhằm mục đích tạo mơi trường hoạt động cho sinh viên hồn thành mơn học lãnh đạo kinh doanh kỹ thuật 4 benefit = Điểm công tác xã hội Test Scenario Verify on entering valid userid and password, the customer can login Step # Step Details Expected Results User choose open create request button User fill out the name, content, thumnail, tag,,, of activity The form will be shown for user System receive information of user User press submit button Actual Results Pass / Fail / Not executed / Suspended As Expected Pass As Expected Pass System send request submit As Expected of user and alert that user create request successfully Pass Picture 5.6 Create request activity 98 5.2.5 Test get all activities data Test Case ID Test Case Description Created By Test get all activities data Phương Reviewed By Vi Version 1.0 Phương Date Tested May 15, 2022 Test Case (Pass/Fail/Not Executed) QA Tester’s Log Tester's Name S# Prerequisites: S# Access to yhcmute.online Pass Test Data 2 3 4 Test Scenario Step # Step Details Expected Results Actual Results Pass / Fail / Not executed / Suspended Access to website yhcmute.online Website will be shown As Expected Pass Press button to get all acitivities All list acitivites will be loaded and shown into website As Expected Pass Picture 5.7 Test get all activities data 99 CHAPTER RESULT After studying, researching and building website Our team has accomplished the following points: • Learn and capture a lot of information about the online sales process • Stronger knowledge of system analysis and design • Understand how the university works to plus point for students Our website publish on server with link yhcmute.online and mobile publish on firebase to download it, please provide your email We will add you in the firsebase and send apk file to you via email Our group found that in the process of researching, building and defending the graduation thesis topic, it helped our group better master the knowledge, skills to handle and analyze situations to become better However, due to limited knowledge, ability, as well as time Therefore, the product still has some insignificant limitations Our group is looking forward to receiving suggestions and criticisms from teachers so that our group can further improve our topic 100 CHAPTER CONCLUSION The group's "Building a portal website and managing the Youth Union - Hall program" is the clearest proof of having learned and applied the knowledge that the authors have learned during the years of the University of Technology information technology of the school to solve a real problem Apply acquired knowledge to program implementation And this report is the clearest demonstration of how the team applied that knowledge to the work Through the process of research and implementation to complete this topic, the authors have seen the importance and advantages that specialized subjects bring Time is limited, so the program is not really perfect, but the author team still tries to update the program's features according to users' contributions until the program works stably Finally, the author team will always try to improve their thinking ability as well as programming skills to make more and more progress in the field of Information Technology Once again, the authors would like to thank you for helping the group complete this thesis 7.1 Roles of team members 7.1.1 Bui Thanh Phuong - 18110179 - Being the main Dev of the whole project, designing the interfaces for the project - Provide ideas on business design, from which the remaining members follow and implement - Frontend architecture builder for the entire program - Stick to business requirements and design appropriate user interfaces - Backend architecture builder for the entire program - Code the main functions of the program such as: Create an activity program, register an active program, the functions of managing the admin's program,… 101 - Being the one to build documents related to the topic such as: Draw Usecase, write Scenario, write reports, 7.1.2 Diep Thuy Vi - 18110237 - Being the main Dev of the whole project, designing the interfaces for the project - Provide ideas on business design, from which the remaining members follow and implement - Frontend architecture builder for the entire program - Stick to business requirements and design appropriate user interfaces - Backend architecture builder for the entire program - Code the main functions of the program such as: Create articles, register articles, admin post management functions, - Being the one to build documents related to the topic such as: Draw Usecase, write Scenario, write reports, 7.2 Advantages and disadvantages of the program - Advantages: ● The program has an easy-to-see, intuitive, and lively interface that helps users feel comfortable when using ● Meet the basic functions of a portal such as: Posting articles, displaying articles, ● Decentralized login rights according to types of users ● The program has Verify according to the school's gmail provided ● The data resides on the host - Disadvantages: ● The program is still incomplete and solves some management problems ● There are not many extended functions yet ● Use only in an enclosed environment 102 ● Unencrypted data 7.3 Difficulties encountered - Due to the implementation of the project, however, it is hindered by the epidemic situation, so there are not many conditions to discuss with the teacher about the knowledge learned The program that the author team worked on did not have many online documents or other sources, but they had to learn from A-Z by themselves, which greatly reduced the progress of the essay as planned - There is not much time to work together, due to online learning, most of the time is also working online However, the free time is not much and the schedule is not the same, it is difficult to find the time when the whole group is free to work Therefore, the work performed did not achieve the desired results - Disagreeing with personal opinions, at first, the group did not listen to anyone, always thinking that their opinions were correct, so they did not have a common voice, and the work was not effective Everyone wants to contribute to making the program better, but the other party feels that it is not suitable for the program, which leads to friction 7.4 How to overcome difficulties - In the process of working, if there is a problem, the group will go to the Internet to find out, if not, the group will ask friends or send an email to the teacher to ask - In order to avoid wasting time in the process of writing the essay and to have high work efficiency, the authors will discuss on the Internet first, list the things that need to be solved in the next session, when doing so, video calls will be made to work more effectively and with the right focus, avoiding the loss of time that the work is not effective 103 - In order not to cause controversy during the writing of the essay, all three had to sit down and talk to each other clearly, each person will lower a part of their ego to exchange Although each person has their own opinion, they just want the final product to be better, but working as a team, it is necessary to listen to the opinions of the team members, so the three will choose what is the best option for the project the judgment that is consistent with the opinions of all three 7.5 Self-assess results - Apply knowledge of Software Engineering to project implementation - Meet the basic requirements of the course - User-friendly interface, easy to use, effective application in practice - However, there are still a few functions that are not really stable, the team has not been able to thoroughly solve the errors that may occur during use So the team will further upgrade the program based on user feedback - The group of authors self-assessed the group's work as 8/10 7.6 Theme development direction - Optimize the code in some positions - Publish Android and IOS to CHPlay and AppStore - Expand website with some features: Student of merits, Emulation and Reward 104 CHAPTER REFERENCES -********** [1] MUI (n.d.) MUI: The React component library you always wanted https://mui.com/ [2] React – A JavaScript library for building user interfaces (n.d.) React https://reactjs.org/ [3] GeeksforGeeks (n.d.) GeeksforGeeks | A computer science portal for geeks https://www.geeksforgeeks.org [4] Online Tutorials Library (n.d.) Online Tutorials Library https://www.tutorialspoint.com/index.htm 105 S K L 0