MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION CAPSTONE PROJECT INFORMATION TECHNOLOGY Ho Chi Minh City, August, 2021 S KL0 0 9 1 5 9 LE DUC THINH DEVELOPIN[.]
MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION CAPSTONE PROJECT INFORMATION TECHNOLOGY DEVELOPING A LAB MANAGEMENT SYSTEM USING MERN STACK INSTRUCTOR: THINH LE VINH, PhD STUDENT: TRINH MINH ANH LE DUC THINH S K L0 9 Ho Chi Minh City, August, 2021 HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING CAPSTONE PROJECT DEVELOPING A LAB MANAGEMENT SYSTEM USING MERN STACK STUDENT NAME: ANH TRINH MINH ID: 17110003 STUDENT NAME: THINH LE DUC ID: 17110076 ACADEMIC YEAR: 2017-2021 MENTOR: THINH LE VINH Ph.D Ho Chi Minh City, July 2021 HCM University of Technology and Education SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom - Happiness FACULTY FOR HIGH QUALITY TRAINING ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ ⎯⎯⎯⎯⎯⎯⎯⎯⎯ PROJECT CONTENT Name of student: Anh Trinh Minh Student ID: 17110003 Name of student: Thinh Le Duc Student ID: 17110076 Major: Information Technology Topic: Developing a lab management system using MERN Stack Project title: Lab Management Instructor: Thinh Le Vinh Ph.D Content: Theory: - Survey the current needs of a system to manage the labs - Investigate related systems that existed in the market Practice: Apply earned knowledge to develop a system managing the labs Execution time: Phase from October 5, 2020, to January 4, 2021 Phase from February 22, 2021, to June 30, 2021 Signature of student: Signature of student: Ho Chi Minh, June 30, 2021 HEAD OF INFORMATION TECHNOLOGY INSTRUCTOR (Name and signature) (Name and signature) SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom - Happiness *** COMMENTARY OF INSTRUCTOR Student name: Anh Trinh Minh Student ID: Thinh Le Duc 17110003 17110076 Major: Information Technology Topic: Developing a lab management system using MERN Stack Project title: Lab Management Name of instructor: Thinh Le Vinh Ph.D COMMENTARY On content of topic & workload done: Advantage: Disadvantage: Recommend for defense or not? 5.Rating type: Mark: (By word: ) Ho Chi Minh, ……………………………… 2021 INSTRUCTOR (Name and signature) SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom - Happiness *** COMMENTARY OF REVIEWER Student name: Anh Trinh Minh Student ID: Thinh Le Duc 17110003 17110076 Major: Information Technology Topic: Developing a lab management system using MERN Stack Project title: Lab Management Name of reviewer: COMMENTARY On content of topic & workload done: Advantage: Disadvantage: Recommend for defense or not? 5.Rating type: Mark: (By word: ) Ho Chi Minh, ……………………………… 2021 REVIEWER (Name and signature) ACKNOWLEDGMENTS The team would like to express our sincere thanks to Mr Thinh Le Vinh, the most enthusiastic lecturer that gave us the chance to meet this project He always stays close to our ideas to give us the best advice that helps our thoughts come to practical products Thank Mr Thinh, we have never given up on any challenging tasks and features On behalf of the time, Mr Van Nguyen Tran Thi saved the project by giving precise requirements and adjusting the wrong features Without his help, we went on the wrong way so far The system occurred in two phases, the initial idea has come from the course new technologies on software engineering, and Mr Thinh encouraged us to develop this potential material for the capstone project However, the limitation of experiences in technologies and social work might prevent us from making perfect software that satisfies everyone We would love to receive feedbacks to make the software better Sincerely thanks TABLE OF CONTENTS Acknowledgments i Table of Contents ii List of figures v List of tables x Preface xiii Chapter 1: Introduction 1.1 Related works 1.2 Project objectives Chapter 2: Backgrounds 2.1 Overview of React 2.1.1 Introduction to React 2.1.2 Features 2.1.3 Advantages 2.1.4 Disadvantages 2.2 Redux 2.3 React Native 2.3.1 Introduction to React Native 2.3.2 Advantages 2.3.3 Disadvantages 2.4 Express.JS 2.5 MongoDB Chapter 3: Requirements analysis 3.1 System description 3.1.1 Lab management web app 3.1.2 Mobile application 3.1.3 Node.JS server 3.1.4 Python Flask server 3.2 Requirement analysis 10 3.2.1 Administration web module 10 3.2.1.1 Business functional requirements 10 3.2.1.2 System functional requirements 14 3.2.1.3 Non-functional requirements 14 3.2.2 Lecturer web module 15 3.2.2.1 Business functional requirements 15 3.2.2.2 System functional requirements 16 3.2.2.3 Non-functional requirements 16 3.2.3 Lecturer mobile application 17 3.2.3.1 Business functional requirements 17 3.2.3.2 System functional requirements 17 3.2.3.3 Non-functional requirements 17 3.3 Requirement modeling 18 3.3.1 Use-case diagram 18 3.3.1.1 Administration web module 18 3.3.1.2 Lecturer web module 19 3.3.1.3 Lecturer mobile module 20 3.3.2 Scenarios 20 3.3.2.1 Administration web module 20 3.3.2.2 Lecturer web module 63 3.3.2.3 Lecturer mobile module 80 Chapter 4: Software design 87 4.1 Sequence diagrams 88 4.1.1 Administration web module 88 4.1.2 Lecturer web module 127 4.1.3 Lecturer mobile module 144 4.2 Class diagram 151 4.3 Database design 152 4.3.1 Logical diagram 152 4.3.2 Table detail 152 4.4 User interface design 164 4.4.1 Administration web module 164 4.4.2 Lecturer web module 206 4.4.3 Lecturer mobile module 221 Chapter 5: Implementation and testing 228 5.1 Implementation 229 5.2 Test plan 229 5.2.1 Test scenarios 229 5.2.2 Test result 231 Chapter 6: Conclusion 248 4.1 Results 249 4.2 Strengths 249 4.3 Drawbacks 249 4.4 Source code 249 4.5 Future works 250 References 251 Task Distribution 252 LIST OF FIGURES Figure Use case diagram (admin) 18 Figure Use case diagram (lecturer web) 19 Figure Use case diagram (lecturer mobile) 20 Figure Search academic year sequence diagram 88 Figure Start an academic year sequence diagram 89 Figure Close an academic year sequence diagram 90 Figure Edit an academic year sequence diagram 91 Figure Start a semester sequence diagram 92 Figure Close a semester sequence diagram 93 Figure 10 Edit semester sequence diagram 94 Figure 11 Search teachings sequence diagram 95 Figure 12 Open registration sequence diagram 96 Figure 13 Close registration sequence diagram 97 Figure 14 Generate schedule sequence diagram 98 Figure 15 Search courses sequence diagram 99 Figure 16 Create new course sequence diagram 100 Figure 17 Import courses sequence diagram 101 Figure 18 Export courses sequence diagram 102 Figure 19 Download courses template 102 Figure 20 Edit a course sequence diagram 103 Figure 21 Delete a course 104 Figure 22 Search labs 105 Figure 23 Create new lab 106 Figure 24 Import labs sequence diagram 107 Figure 25 Export labs sequence diagram 108 Figure 26 Download lab template sequence diagram 108 Figure 27 Edit a lab sequence diagram 109 Figure 28 Delete a lab sequence diagram 110 Figure 29 Search requests sequence diagram 111 CHAPTER 5: IMPLEMENTATION AND TESTING Table 74 Test results generate schedule function ID Description Test steps Test data Expected result Actual result Status TC_GS_01 Test response + Open generate of application modal when admin + Click generate clicks Generate button when there an opening registration Display message “A registration is opening Cannot create schedule” As expected Pass TC_GS_02 Test response + Open generate of application modal when admin + Click generate clicks Generate button when all registrations are closed Schedule is created successfully and displays a message “Generate schedule successfully” As expected Pass 239 CHAPTER 5: IMPLEMENTATION AND TESTING Figure 126 Expected & Actual result of TC_GS_01 240 CHAPTER 5: IMPLEMENTATION AND TESTING Figure 127 Expected & Actual result of TC_GS_02 241 CHAPTER 5: IMPLEMENTATION AND TESTING Table 75 Test result make request to change lab usage function ID Description Test steps TC_MR_01 Test response + Enter request of application title when the user + Click “Submit” enters request information and clicks “Submit button” TC_MR_02 Test response of application when the user enters request information and clicks “Submit button” Test data Expected result Actual result Request title: Change from A5103 to A5103 Display a message “The lab you choose is not idle at the present” As expected Pass New request is created and displays a message “Request created successfully” As expected Pass + Enter request title Request title: + Change to an idle Change from A5lab 103 to A5+ Click “Submit” 201 Status + Select another lab 242 CHAPTER 5: IMPLEMENTATION AND TESTING Figure 128 Expected & Actual result of TC_GS_01 243 CHAPTER 5: IMPLEMENTATION AND TESTING Figure 129 Expected & Actual result of TC_GS_02 244 CHAPTER 5: IMPLEMENTATION AND TESTING Table 76 Test result check in function ID Description TC_CI_01 Test response of application when the user checks in with right face ID + Go to check in screen Test response of application when the user checks in with wrong face ID + Go to check in screen TC_CI_02 Test steps Test data Expected result Actual result Status Display a message “Check in successfully” As expected Pass Display a message “Wrong face ID” As expected Pass + Press takes picture button + Press takes picture button 245 CHAPTER 5: IMPLEMENTATION AND TESTING Figure 130 Expected & Actual result of TC_CI_01 246 CHAPTER 5: IMPLEMENTATION AND TESTING Figure 131 Expected & Actual of TC_CI_02 247 CHAPTER 6: CONCLUSION CHAPTER 6: CONCLUSION 248 CHAPTER 6: CONCLUSION 4.1 Results • The team has completed the system in the middle of June 2021 Web app, Node server, and Face ID server have been deployed successfully on the Internet The mobile application runs well with the system The team could extract the apk file for users to install • The system has solved the problem discussed in section This is an outstanding solution for comprehensive features, modern and accurate technologies • The system satisfied all requirements of the instructor from phase and phase • Design of application under the Object-Oriented Programming paradigm • The system provides many platforms for the user (web, android, iOS) • The source code is available for future work • The cost to operate is manageable, less than 1$, including deploying a web app (Firebase), functioning feature (Firebase), and Face ID server (Google cloud platform) 4.2 Strengths • • • • The face ID feature works excellent All features passed the testing scheme The web app and mobile app have a friendly user interface and are easy to use The response time of the Face ID server is acceptable in the developing stage; this can be improved by buying fast-speed hosting • This system can be used for practical purposes and implemented to easily integrate more features thanks to good documentation and database design; the team already had a developer guide for this point 4.3 Drawbacks • • • • 4.4 Internet dependency The React Native environment is hard to debug The connection to MongoDB is slow The Face ID server costs a lot of memory and cloud infrastructure to operate Source code You can find the solution by the following links: • Web app: https://github.com/peterburgs/lab-management-web-v2 • Mobile App: https://github.com/peterburgs/lab-management-mobile-v3 • Face ID server: https://github.com/peterburgs/lab-management-face-id • Node server: https://github.com/peterburgs/lab-management-server-v2 If there are any issues, please contact the team support at peterburgs.vn@gmail.com 249 CHAPTER 6: CONCLUSION 4.5 Future works • Add more roles such as student, parent, manager • Upgrade the user interface on the verification screen • Implement more methods to recognize identity such as voice, fingerprint integrated on the mobile phone • Connect with existing services in the university 250 REFERENCES REFERENCES Wikipedia Contributors (2019, November 17) React (web framework) Retrieved from Wikipedia website: https://en.wikipedia.org/wiki/React_(web_framework) React JS - AWeb4Devs https://aweb4devs.com/frontend/React-JS The Path with React - zerogravity.cc https://zerogravity.cc/technology/the-path-withreact/ ReactJS and React Native: Overview & Pros and Cons | AltexSoft https://www.altexsoft.com/blog/engineering/the-good-and-the-bad-of-reactjs-andreact-native/ ReactJS and React Native: Overview & Pros and Cons | AltexSoft https://www.altexsoft.com/blog/engineering/the-good-and-the-bad-of-reactjs-andreact-native/ ReactJS and React Native - Key Difference, Advantages, and https://medium.com/geekculture/reactjs-and-react-native-key-difference-advantagesand-disadvantages-ceb197f4d31d Express.js - Wikipedia https://en.wikipedia.org/wiki/Expressjs ScaffoldHub - React Material-UI https://scaffoldhub.io/scaffolds/react-material-ui 251 TASK DISTRIBUTION TASK DISTRIBUTION Table 77 Task distribution Member Anh Minh Trinh Thinh Le Duc Tasks • Make plan weekly • Design database • Design Mobile app GUI • Integrate logic business of mobile app • Implement backend for Mobile app • Implement Node.JS server • Deploy system on Firebase and Google Cloud • Write report • Implement database with types and interfaces • Implement business logic of Web app • Design Web app GUI • Design Mockup for Mobile and Web app • Implement Face ID server • Research on deploying with Firebase and Google Cloud • Design UML Done 100% 100% 252