Building an internal social network website for schools

13Table 3.3: Table describes the usecase to view the list of accounts .... 17Table 3.7: Table describes the usecase to change user information of admin .... 22Table 3.13: Table describes

MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION CAPSTONE PROJECT INFORMATION TECHNOLOGY BUILDING AN INTERNAL SOCIAL NETWORK WEBSITE FOR SCHOOLS LECTURER: PHD LÊ VĨNH THỊNH STUDENTS: NGUYỄN CƯỚC THIÊN TU NGỌC YẾN VY SKL 009444 Ho Chi Minh City, June 2022 HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY OF HIGH QUALITY CAPSTONE PROJECT BUILDING AN INTERNAL SOCIAL NETWORK WEBSITE FOR SCHOOLS Student : NGUYỄN CƯỚC THIÊN Student ID: 18110204 Student : TU NGỌC YẾN VY Student ID: 18110243 Course year: K18 Major : INFORMATION TECHNOLOGY Instructor : PhD LÊ VĨNH THỊNH Hồ Chí Minh City, June 2022 SOCIALIST REPUBLIC OF VIETNAM Independence - Freedom – Happiness *********** Hồ Chí Minh city, .June, 2022 TASK FOR PERFORMANCE OF THE CAPSTONE PROJECT Student 1: Nguyễn Cước Thiên Student Id 1: 18110204 Student 2: Tu Ngọc Yến Vy Student Id 2: 18110243 Instructor: PhD Lê Vĩnh Thịnh Phone number: Project receiving date: 07/03/2022 Project submission date: 20/06/2022 Project name: Building an internal social network website for schools Initial figures: No Project implementation: Learn and develop websites using Mean stack technology Product: Building an internal social network website for schools PROGRAM LEADER INSTRUCTOR SOCIALIST REPUBLIC OF VIETNAM Independence - Freedom – Happiness *********** INSTRUCTOR COMMENT SHEET Student 1: Nguyễn Cước Thiên Student Id 1: 18110204 Student 2: Tu Ngọc Yến Vy Student Id 2: 18110243 Major: Information technology Project name: BUILDING AN INTERNAL SOCIAL NETWORK WEBSITE FOR SCHOOLS Instructor name: PhD Lê Vĩnh Thịnh Comment: About the content of the topic and the block of work done: Advantages: Disadvantages: Recommend for protection or not? Rating: Point: (Text: ) Hồ Chí Minh city, ……June, 2022 Instructor (Sign, write full name) SOCIALIST REPUBLIC OF VIETNAM Independence - Freedom – Happiness *********** REVIEWER COMMENT SHEET Student 1: Nguyễn Cước Thiên Student Id 1: 18110204 Student 2: Tu Ngọc Yến Vy Student Id 2: 18110243 Major: Information technology Project name: BUILDING AN INTERNAL SOCIAL NETWORK WEBSITE FOR SCHOOLS Reviewer name: M.Sc Nguyễn Trần Thi Văn Comment: About the content of the topic & the block of work done: Advantages: Disadvantages: Recommend for protection or not? Rating: Point: .(Text: ) Hồ Chí Minh city, ……June, 2022 reviewer (Sign, write full name) ACKNOWLEDGEMENT First of all, my team would like to thank Mr Le Vinh Thinh, who directly guided us in the implementation and completion of the report in the best and most effective way The instructions, guidance, comments, and suggestions of the teacher have made a very important contribution in helping us complete the project most completely We also would like to express our sincere thanks to the teachers in the Faculty of High-Quality in general and the Information Technology industry in particular for their dedication to imparting necessary knowledge, always enthusiastically answering questions, and wholeheartedly supporting us to have a foundation to make this topic, created conditions for us to learn and perform well on the topic Along with that, we would like to thank our classmates and the seniors who provided a lot of useful information and knowledge to help us improve our thesis Since the project is done in a limited time, mistakes are inevitable We look forward to receiving valuable comments and suggestions from teachers so that we can have more experience for ourselves in the future We sincerely thank you! SUMMARY IN VIETNAMESE Các vấn đề nghiên cứu - Tìm hiểu cơng nghệ MEAN Stack - Tìm hiểu vấn đề nghiệp vụ liên quan việc sử dụng mạng nội cho trường học Các vấn đề phát sinh - Khơng hiểu rõ số mong muốn phía người dùng - Thay đổi số nghiệp vụ so với ban đầu Các phương pháp giải vấn đề - Tiến hành thảo luận để giải vấn đề đưa Tham khảo ý kiến từ giảng viên hướng dẫn Tái sử dụng thêm số chức để đáp ứng vấn đề nghiệp vụ đưa Kết đạt - Xây dựng trang mạng xã hội nội dành cho trường học Xây dựng hệ thống dễ dàng bảo trì, mở rộng phát triển SUMMARY IN ENGLISH Research issues - Learn about MEAN Stack technology - Learn about professional issues related to using the intranet for schools Problems arise - Do not clearly understand some of the user's wishes - Changed some operations compared to the original Problem solving methods - Conduct discussions to resolve the issue raised - Consult with instructors - Reuse and add some new functions to meet the given business Results achieved - Built an internal social networking site for schools - Build a system that is easy to maintain, expand and develop ABBREVIATIONS - API : Application Programming Interface - DBMS HTML : Database Management System : HyperText Markup Language - ID I/O : Identification : Input/Output - MIT MSG : Massachusetts Institute of Technology : Message - MVC : Model-View-Controller MVVM : Model – View – ViewModel - OTP PhD RDBMS SQL URL : One Time Password : Doctor of Philosophy : Relational Database Management System : Structured Query Language : Uniform Resource Locator LIST OF IMAGE Image 2.1: Overview of MEAN Stack Image 3.1: General usecase diagram 11 Image 3.2: Usecase actor admin diagram 12 Image 3.3: Usecase actor student/teacher diagram 12 Image 3.4: Usecase actor dean diagram 12 Image 3.5: Usecase actor admin group diagram 13 Image 3.6: Usecase actor company diagram 13 Image 3.7: Usecase manage account of admin 13 Image 3.8: Usecase to manage announcements of admin and dean 20 Image 3.9: Usecase to manage faculty of admin 21 Image 3.10: Usecase to manage category 24 Image 3.11: Usecase to manage report 28 Image 3.12: Usecase to manage enterprise 30 Image 3.13: Usecase to manage recruitment news 33 Image 3.14: Usecase to manage group 36 Image 3.15: Usecase to manage group you joined 40 Image 3.16: Usecase to manage comments, replies 43 Image 3.17: Registration sequence diagram 45 Image 3.18: Login sequence diagram 45 Image 3.19: Updating information sequence diagram 46 Image 3.20: Forgotting password sequence diagram 47 Image 3.21: Logout sequence diagram 48 Image 3.22: Read post detail sequence diagram 48 Capstone Project Report 4.2.4.10 SSP010: Add member Image 4.42: Add member screen Table 4.61: Add member screen description No Name Required Type Reference Note Search box Text Enter the information the user is looking for Search Icon Click to search Add member Button Click members group 4.2.4.11 SSP10: Manage group joined Image 4.43: Manage group joined screen 98 to add to the Capstone Project Report Table 4.62: Manage group joined screen description No Name Search box Required Type Reference Note Text Enter the name of the group you are looking for Search Icon Click to search Create group Button Clicking will go to screen SSP11 All group Button Click to see all groups in the system Join now Button Click to join the group Suggest Component Suggested groups Your group Component Groups joined that have 4.2.4.12 SSP11: Create group Image 4.44: Create group screen Table 4.63: Create group screen description No Name Required Type Reference Category True Select option Data from Select the category API of the group Group name True Text Group name Description Text Description Submit Button Click group 99 Note to create Capstone Project Report Button X Icon Clicking will go back to SSP10 screen 4.2.4.13 SSP12: Read recruitment news Image 4.45: Read recruitment news screen Table 4.64: Read recruitment news screen description No Name Required Type Reference Note Search box Text Enter the company you want to search for Search Icon Click to search News Component Clicking will go to screen SSP13 4.2.4.14 SSP13: Read recruitment news detail Image 4.46: Read recruitment news detail screen 100 Capstone Project Report Table 4.65: Read recruitment news detail screen description No Name News Required Type Reference Tabs Note Recruitment news details Other job Tabs Recruitment news from the same company Company Component Company information 4.2.4.15 SSP14: New feed Image 4.47: New feed screen Table 4.66: New feed screen description No Name Required Type Reference Note Posts Component List of posts News Component List of recruitment news Load Button Click to see recruitment news 101 more Capstone Project Report 4.2.4.16 SSP15: Manage profile Image 4.48: Manage profile screen Table 4.67: Manage profile screen description No Name Choose file Fullname Phone Request OTP Required Type Reference Note Button Click to choose avatar True Text Fullname True Text Phone number Button Click to request OTP code when you want to change phone number OTP True Text Submit Dob True Date Date of birth Address True Text Address Email True Text Email 10 Update Button Click to udpate information 11 Button X Icon Clicking will go back to screen SSP17 Button 102 OTP Data from Click to verify the API code and change the phone number Capstone Project Report 4.2.4.17 SSP16: Change password Image 4.49: Change password screen Table 4.68: Change password screen description No Name Required Type Reference Note Old password True Text Current password New password True Text New password Confirm password True Text Confirm new password Submit Button Click to change password Dấu x Icon Clicking will go back to screen SSP17 4.2.4.18 SSP17: User homepage Image 4.50: User homepage screen 103 Capstone Project Report Table 4.69: User homepage screen description No Name Required Type Reference Note Category Slidebar Categories of the site Notification Component Announcements by category Information a Click to read the announcement details 4.2.4.19 SSP18: Search user Image 4.51: Search user screen Table 4.70: Search user screen description No Name Required Type Information Component Information users need to find Chat Button Clicking will go to screen SSP01 104 Reference Note Capstone Project Report CHAPTER INSTALL AND TEST THE APPLICATION 5.1 Install application Clone or download project from github link Frontend: https://github.com/CuocThien/SchoolSocialNetwork_FE Backend: https://github.com/Tungocyenvy/SocialNetwork_BE 5.1.1 Libraries and development environment Table 5.1: List of libraries and environments required in the product STT Library/Software Link Nodejs Download | Node.js (nodejs.org) MongoDB Download MongoDB Software Locally for Free | MongoDB Angular cli v12 Angular - CLI Overview and Command Reference 5.1.2 Command to install and run the program Table 5.2: List of commands to install and run the program STT Library/Software Description Npm install To install library of nodejs backend ng serve | yarn start Run project frontend npm start Run project backend 5.1.3 Installation steps Step 1: Download the libraries above Step 2: Using visual code to opent Backend project, then run command “npm install” to install library nodejs for project Finally, run command “npm start” to run Backend project 105 Capstone Project Report Image 5.1: Results after running the backend project Bước 3: Next, also using visual code to open Frontend project Run command “yarn” to install library for angular Finnally run command “yarn start” to run Frontend project Image 5.2: Results after running frontend project Finally, the interface after running both the backend and frontend projects Image 5.3: Results after running the project 106 Capstone Project Report 5.2 Software testing After completing the testing, the team would like to present some typical test cases: 5.2.1 Function to add category Table 5.3: Test function add category ID Test Case Test Steps Expected Output Result Description CreateCat Check out the new Enter the The message Pass e_01 addition of category English “Create category categories with full name information Enter successful!” is the displayed Close category the Vietnamese name Press the “Submit” button CreateCat Test for adding a Enter e_02 return to category management page the The Function to edit recruitment post 107 and the message Pass new category with a category English "Please fill required field name form!" missing Press the “Submit” button CreateCat Check adding a new Enter the existed e_03 category with the category English same name as an name existing category Enter the category Vietnamese name Press the “Submit” button 5.2.2 form the The message Pass "This category name already exists!" appears Capstone Project Report Table 5.4: Test the recruitment news editing function ID Test Case Description Test Steps Expected Output Result UpdateNe Check out the edit Enter information The message Pass ws _01 of the article with to edit news "Update full information articles with full recruitment news information Click the button successful!" Close the form and “Update return recruitment recruitment page news” Display to the newly edited recruitment news information UpdateNe Check for post Enter editing The message Pass ws_02 editing with a information for "Please fill the required field recuitment news form!" missing and let some fields blank Click the button “Update recruitment news” UpdateNe Check ws_03 recruitment renewal the Edit the job news posting deadline to be larger than the current date Click the button “Update recruitment news” 108 The message " Pass Update recruitment news successful!" Close the form and the edited recruitment news will be moved to the "Recruiting" tab Capstone Project Report CHAPTER CONCLUSION 6.1 Achievements - Learn new technology: MEAN stack and know how to apply it to the subject project - Practice self-study skills, document search skills, and skills to find solutions to solve - problems encountered during project implementation Improve working skills, group discussion, and division of work among team - members Completing the initial objectives set for the topic 6.2 Advantages and disadvantages 6.2.1 - Advantages Interface can be compatible on many different devices There is a clear backend - frontend structure The basic website has a complete structure and can be easily upgraded or maintained Website has completed the following functions: + Help students promptly receive notifications from the school from the faculty + Create a website that connects school members through groups + Students can easily find each other or find subject instructors + There is a chat bot to support and advise students' questions + Provide chat and call features to help members communicate with each other + The website also helps bring businesses closer to students, when businesses join the website and post job advertisements + It also makes it easier for the school to contact alumni 6.2.2 Disadvantages - The interface still has many shortcomings and has not been optimized - Due to poor handling experience, some features may still fail 6.2.3 Difficulties 6.2.3.1 Technology 109 Capstone Project Report Table 6.1: Technological difficulties STT Difficulties Overcome As new technology, almost - Learn from free online resources, unknown youtube, etc Read technology documents 6.2.3.2 Implementation Procedure Table 6.2: Difficulty in implementation process STT Difficulties Overcome Business analysis and handling - Frequent career - Try to find a solution, limit to the minimum changes correct the code but still meet the requirements Arrange working time together Discuss with each other to find solutions Consult with instructors - - Using messages is the main method to communicate and exchange with each other Set a fixed schedule to meet weekly 6.3 Experience gained - Learn how to manage time, break down tasks, complete tasks within deadlines - Learn how to solve problems that happen while working between frontend and backend 6.4 Development - Develop website into mobile application - Improved user interface to be more optimized - Develop group chat feature - Add filters for job postings 110 Capstone Project Report REFERENCES [1] MongoDB Retrieved from: https://www.tutorialspoint.com/mongodb/index.htm [2] Node.js MongoDB Get Started Retrieved from: https://www.w3schools.com/nodejs/nodejs_mongodb.asp [3] AngularJS Tutorial Retrieved from: https://www.w3schools.com/angular/ [4] Angular - Tour of Heroes app and Tutorial Retrieved from: https://angular.io/tutorial [5] JWT.IO - JSON web tokens introduction Retrieved from: https://jwt.io/introduction 111