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

FACULTY FOR HIGH QUALITY TRAINING

Ho Chi Minh City, June 2022

CAPSTONE PROJECT INFORMATION TECHNOLOGY

BUILDING A WEB-BASED AND MOBILE SYSTEM FOR

FACULTY FOR HIGH QUALITY TRAINING

-🙞🙜🕮🙞🙜 -

BUILDING A WEB-BASED AND MOBILE

SYSTEM FOR YOUTH HCMUTE

INSTRUCTOR : MSc NGUYEN TRAN THI VAN STUDENTS : BUI THANH PHUONG 18110179 DIEP THUY VI 18110237

Ho Chi Minh City, June 2022

CAPSTONE PROJECT

i

SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom – Happiness

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Ho Chi Minh City,day month year 2022

CAPSTONE PROJECT OBJECTIVES

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 tocheck-

in 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

ii

Execute time : 15 weeks (Start date from 7/3/2022 to 27/6/2022)

Hồ Chí Minh City, day month year 2022

iii

SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom – Happiness

*******

ASSESSMENT FORM FOR INSTRUCTOR

Students’ names:

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: 1 Project’s contents and workload: Theory: ………

………

………

………

Implementation: ………

………

………

………

Results: ………

………

………

………

2 Advantages:

iv

………

………

………

………

3 Disadvantages: ………

………

………

………

4 Approving for dissertation defence or not? ………

………

5 Achievement level: ………

………

Hồ Chí Minh City, day month year 2022

(Signed with full name)

v

SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom – Happiness

*******

ASSESSMENT FORM FOR REVIEWER

Students’ names:

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: 1 Project’s contents and workload: Theory: ………

………

………

………

Implementation: ………

………

………

………

Results: ………

………

………

………

2 Advantages:

vi

………

………

………

………

3 Disadvantages: ………

………

………

………

4 Approving for dissertation defence or not? ………

………

5 Achievement level: ………

………

Hồ Chí Minh City, day month year 2022

(Signed with full name)

vii

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

viii

TABLE OF CONTENTS

CHAPTER 1 STUDY OF STATUS AND DETERMINATION OF

REQUIREMENTS 2

1.1 The reason for choosing the topic 2

1.2 Project objectives 2

1.3 Current status survey 3

1.4 Overall description 3

1.4.1 Product background 3

1.4.2 Operating environment 3

1.5 Research Methods 4

CHAPTER 2 BASIC THEORY 5

2.1 Introduction about MERN stack 5

2.2 ReactJS 5

2.3 React Native 6

2.4 NodeJS + Express 6

2.5 MongoDB 6

CHAPTER 3 REQUIREMENTS ANALYSIS AND MODELING 7

3.1 Non-functional requirements analysis 7

3.1.1 Security 7

3.1.2 Safety 7

3.2 Requirement modeling 7

3.2.1 General usecase 7

3.2.2 Usecase details and Sequence diagram 8

CHAPTER 4 HANDLING DESIGN 69

ix

4.1 Basic design 69

4.1.1 Back end 69

4.1.2 Front end 73

4.2 Detailed design 79

4.2.1 Database Schema 79

4.2.2 Design UI/UX 80

CHAPTER 5 IMPLEMENT AND TESTING 95

5.1 Implement code 95

5.1.1 Clone project 95

5.1.2 Install frontend and backend 95

5.1.3 Install mobile 96

5.2 Testing 97

5.2.1 Test create request news 97

5.2.2 Check validation of input field when create request news 97

5.2.3 Test get all news data 98

5.2.4 Create request activity 98

5.2.5 Test get all activities data 99

CHAPTER 6 RESULT 100

CHAPTER 7 CONCLUSION 101

7.1 Roles of team members 101

7.1.1 Bui Thanh Phuong - 18110179 101

7.1.2 Diep Thuy Vi - 18110237 102

7.2 Advantages and disadvantages of the program 102

7.3 Difficulties encountered 103

7.4 How to overcome difficulties 103

x

7.5 Self-assess results 104 7.6 Theme development direction 104

CHAPTER 8 REFERENCES 105

xi

LIST OF TABLES

Table 3.1 Usecase detail “register” 9

Table 3.2 Usecase detail “login” 10

Table 3.3 Usecase detail “read news” 12

Table 3.4 Usecase detail “Read Activities” 13

Table 3.5 Usecase detail “Search news” 15

Table 3.6 Usecase detail “Logout” 16

Table 3.7 Usecase detail “Register activity” 18

Table 3.8 Usecase detail “Tracking acitivity” 19

Table 3.9 Usecase detail “Scan QR Code” 21

Table 3.10 Usecase detail “Change Information” 23

Table 3.11 Usecase detail “Contact rating” 25

Table 3.12 Usecase detail “Create request news” 27

Table 3.13 Usecase detail “Edit request news” 28

Table 3.14 Usecase detail “Delete request news” 30

Table 3.15 Usecase detail “Create request activity” 32

Table 3.16 Usecase detail “edit request Activities” 33

Table 3.17 Usecase detail “delete request Activities” 35

Table 3.18 Usecase detail “Manage User” 36

xii

Table 3.19 Usecase detail “Create User” 38

Table 3.20 Usecase detail “Edit User” 39

Table 3.21 Usecase detail “Delete User” 41

Table 3.22 Usecase detail “Reset Password user” 43

Table 3.23 Usecase detail “Reset Password user” 45

Table 3.24 Usecase detail “Create Activity” 46

Table 3.25 Usecase detail “Edit Activity” 48

Table 3.26 Usecase detail “Delete Activity” 50

Table 3.27 Usecase detail “Approve Requested Activity” 52

Table 3.28 Usecase detail “Export participant” 54

Table 3.29 Usecase detail “Export participant” 56

Table 3.30 Usecase detail “Manage News” 57

Table 3.31 Usecase detail “Edit News” 58

Table 3.32 Usecase detail “Edit News” 60

Table 3.33 Usecase detail “Approve Request News” 62

Table 3.34 Usecase detail “Create Slider” 63

Table 3.35 Usecase detail “Edit Slider” 65

Table 3.36 Usecase detail “Delete Slider” 67

Table 4.1 Libraries used in the Back end 72

Table 4.2 Front end directory structure (1) 73

xiii

Table 4.3 Front end folder structure (2) 74

Table 4.4 Front end folder structure (3) 75

Table 4.5 Libraries used in the front end 79

Table 4.6 Describe design login page 80

Table 4.7 Design home page 81

Table 4.8 Describe home page 83

Table 4.9 Describe list of activity 86

Table 4.10 Describe detail activity 87

Table 4.11 Describe request activity from base union 87

Table 4.12 Describe admin dashboard 88

Table 4.13 Describe manage activity 89

Table 4.14 Describe login mobile 91

Table 4.15 Describe home screen mobile 92

Table 4.16 Describe sidebar mobile 93

Table 4.17 Describe setting screen mobile 94

xiv

LIST OF PICTURES

Picture 2.1 Mern stack workflow 5

Picture 2.2 Logo Reactjs 5

Picture 3.1 System overall usecase 7

Picture 3.2 Register Sequence diagram 9

Picture 3.3 login sequence diagram 11

Picture 3.4 Read news sequence diagram 12

Picture 3.5 Read Activities sequence diagram 14

Picture 3.6 Search news sequence diagram 15

Picture 3.7 Logout sequence diagram 17

Picture 3.8 Register activity 18

Picture 3.9 Tracking acitivity sequence diagram 20

Picture 3.10 Scan QR Code sequence diagram 22

Picture 3.11 Change Information sequence diagram 24

Picture 3.12 Contact rating sequendiagram 25

Picture 3.13 Create request news sequendiagram 27

Picture 3.14 Edit request news sequence diagram 29

Picture 3.15 Delete request news sequence diagram 30

Picture 3.16 Create request activity sequence diagram 32

xv

Picture 3.17 edit request Activities 34

Picture 3.18 delete request Activities 35

Picture 3.19 Create User sequence diagram 38

Picture 3.20 Edit User sequence diagram 40

Picture 3.21 Delete User sequence diagram 42

Picture 3.22 Reset Password user sequence diagram 44

Picture 3.23 Create Activity sequence diagram 47

Picture 3.24 Edit Activity sequence diagram 49

Picture 3.25 Delete Activity sequence diagram 51

Picture 3.26 Approve Requested Activity sequence diagram 53

Picture 3.27 Export participant sequence diagram 55

Picture 3.28 Export participant sequence diagram 56

Picture 3.29 Edit News sequence diagram 59

Picture 3.30 Edit News sequence diagram 60

Picture 3.31 Approve Request News diagram 62

Picture 3.32 Create Slider sequence diagram 64

Picture 3.33 Edit Slider sequence diagram 66

Picture 3.34 Delete Slider sequence diagram 68

Picture 4.1 Back end directory structure 69

Picture 4.2 Database Schema 79

xvi

Picture 4.3 Design login page 80

Picture 4.4 Design Introduce general 83

Picture 4.5 Design introduce university level officials 84

Picture 4.6 Design List of activity 85

Picture 4.7 Design detail of activity 86

Picture 4.8 Design request activity from base union 87

Picture 4.9 Design admin dashboard 88

Picture 4.10 Design manage activity 89

Picture 4.11 Design login mobile 90

Picture 4.12 Design home screen mobile 91

Picture 4.13 Design sidebar mobile 92

Picture 4.14 Design setting screen mobile 93

Picture 5.1 Folder project frontend 95

Picture 5.2 Folder project mobile 96

Picture 5.3 Test create request news 97

Picture 5.4 Check validation of input field when create request news 97

Picture 5.5 Test get all news data 98

Picture 5.6 Create request activity 98

Picture 5.7 Test get all activities data 99

However, according to the research of the author group, Ho Chi Minh City University of Technology and Education still does not have any specialized software

or website to manage the program system, activities as well as a portal to look up the information activities or programs for youth union members While the number of students at the school is increasing, so the amount of information stored will be very large, difficulties in information retrieval are inevitable and inaccurate information is inevitable With the knowledge and skills gained after studying the subject in the training program of the Information Technology industry, the authors decided to choose the topic Building a portal website and managing the program of the Union - Hall with the hope that I would like to be able to help the student affairs department and the Union staff to manage the activities and programs more effectively and accurately in the management work

With the guidance of Master Nguyen Tran Thi Van, the authors have tried their best to complete the essay However, mistakes are inevitable, the group wishes to receive the input of teachers and friends to make the essay more complete

Student group made

2

CHAPTER 1 STUDY OF STATUS AND DETERMINATION

OF REQUIREMENTS

1.1 The reason for choosing the topic

With the number of students, each year increasing, while the number of lecturers and staff members of the school is limited Therefore, the management of operational programs poses many problems that need to be solved

In the era of increasingly expanding and developing technology, to avoid wasting time and to increase the efficiency of program management for youth union members, it is advisable to computerize management Therefore, it is necessary to build a website to manage active programs, as well as a portal to help save effort and time

It is the above reasons that prompted the authors to urgently build a website and mobile app to manage active programs as well as a portal that can do all the management tasks quickly and accurately helps to improve work efficiency At the same time, through the management program on the group, the author also wants to choose this will be the topic to report on the group's essay on Information Technology

1.2 Project objectives

- Learn about writing web interfaces using HTML/CSS

- Build a website based on the MERN Stack model

- The authors want to create a program that can solve the problems of managing the program, activities, and portal that the Youth Union of the school is currently facing Help improve work productivity, reduce personnel for management by books instead of a program that can do everything such as managing program activities, managing articles

- Wish to be able to apply the useful knowledge learned in the subject to make the program implementation easier, understand more deeply about the learned knowledge, apply it to solve many problems other than reality Not only limited to the subject area

3

1.3 Current status survey

The number of students of Ho Chi Minh City University of Technology and Education Ho Chi Minh City is very large, according to the survey data of the author group, it is about 30000 students Those are the figures that show that we cannot lack

an activity program management program and student portal while still meeting basic needs such as Add, Delete, Edit, Statistics, That's because Therefore, the new group

of authors decided to build this website for the school, both to help the group learn a lot in the process of working, and to be able to apply the knowledge learned in the subject to math problems The team made sure the program could work well for such

The program allows lecturers and school staff to know the participation information of all students in the school Can add, delete, edit student information In addition, there are many other functions such as student statistics, article statistics, activity statistics for easy management

Manually managing such information is time-consuming and risky, so management programs such as growing groups are born to help manage mistakes or errors Helps reduce management time

4

1.5 Research Methods

- Choosing a research topic: The research when implementing the Portal and

Management program helps the authors to apply the knowledge they have learned in the subject to solve the problem Specifically, applying the

knowledge learned to write a complete program that can be used in practice

- Planning implementation: In order to well implement the proposed topic, the

author team has made a specific plan for each job right from the beginning of the idea Planning to help the author team have a more specific view of what

the team is about to do helps save time and work more effectively

- Search for documents: Always actively search for documents and information

on forums, social networking sites, books, friends, and even send emails to ask the lecturer to guide the group's topic The group does not want to rely on and depend on what others give them, but the group must actively explore and

learn to get the desired result

- Apply knowledge: Apply knowledge learned in the subject to solve problems

Stick to the topic and the contents learned to exploit and deepen research The written program must be put to practical use and suitable for the environment that the author group wants to target In addition, the authors also use the knowledge learned in other subjects to help make the essay faster and more effective, namely Database, Web Programming, Software Engineering, and New Software Technology thanks to studying those subjects, the author

group can use the queries in the database fluently

- Select and organize documents: After having obtained a relative amount of

documents, the group needs to read to re-select Need to read all existing articles Highlight important ideas Take notes, summarize systematically

Arrange in an order that suits the group's habits or intentions

5

CHAPTER 2 BASIC THEORY

2.1 Introduction about MERN stack

MERN stands for MongoDB, Express, React, Node, after the four key technologies that make up the stack.

MongoDB - document database

Express(.js) - Node.js web framework

React(.js) - a client-side JavaScript framework

Node(.js) - the premier JavaScript web server

Picture 2.1 Mern stack workflow

Express and Node make up the middle (application) tier Express.js is a server-side web framework, and Node.js the popular and powerful JavaScript server platform Regardless of which variant you choose, ME(RVA)N is the ideal approach to working with JavaScript and JSON, all the way through

2.2 ReactJS

Picture 2.2 Logo Reactjs

ReactJS is understood as a library that contains a lot of open source JavaScript and the father of ReactJS is a big man with a well-known name that is Facebook The

6

purpose of creating ReactJS was to create attractive web applications with high speed and efficiency with minimal coding And the main purpose of ReactJS is that every website when using ReactJS must run smoothly, quickly, and be highly extensible and simple to implement

2.3 React Native

It is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript Initially, Facebook only developed React Native to support iOS However, with its recent support of the Android operating system, the library can now render mobile UIs for both platforms

2.4 NodeJS + Express

Express is a minimal and flexible Node.js web application framework that provides a robust set of features to develop web and mobile applications It facilitates the rapid development of Node based Web applications Following are some of the core features of Express framework

● Allows to set up middlewares to respond to HTTP Requests

● Defines a routing table which is used to perform different actions based on HTTP Method and URL

● Allows to dynamically render HTML Pages based on passing arguments to templates

2.5 MongoDB

MongoDB, the most popular NoSQL database, is an open-source oriented database The term ‘NoSQL’ means ‘non-relational’ It means that MongoDB isn’t based on the table-like relational database structure but provides an altogether different mechanism for storage and retrieval of data This format of storage is called BSON ( similar to JSON format)

8

3.2.2 Usecase details and Sequence diagram

3.2.2.1 Register

Name Register for an account

Brief description Guest register an account to do action of student at

HCMUTE such as register activities, tracking activities,…

Actor(s) Guest

Pre-conditions Guest access to the browers

Post-conditions If successful: the system returns the login permission of that

account to the website for that guest

If it fails: the system reports an error about the account information and the account is not created

1 User selects the corresponding gmail account

2 The system checks the entered information and compares it with the database

3 Add an account to the database

4 Show notification when successful account registration

re-9

2 User re-enters information

3 Go back to step 3 in Basic flow to be executed

Extension point Not available

Table 3.1 Usecase detail “register”

Picture 3.2 Register Sequence diagram

3.2.2.2 Login

Name Log in to your account

Brief description Users log in to their personal accounts to see and edit their

information, regiter activity,…

Actor(s) Guest

Pre-conditions Guest access to the system

Post-conditions If successful: the system allows the Guest to access the

system with the rights of that account

1 User selects the account login button

2 Select the corresponding email of the department

3 The system checks the login information and compares it with the database

4 Show a message when you successfully log in to your account

re-2 User re-enters information

3 Go back to step 3 in Basic flow to be executed

Extension point Not available

Table 3.2 Usecase detail “login”

11

Picture 3.3 login sequence diagram

3.2.2.3 Read News

Brief description User views any news on the website

Actor(s) Guest, Student, Admin, Base union

Pre-conditions User has access to the system

Post-conditions If successful: the system displays the entire news content

If it fails: the system reports an error about the news’s information does not exist

Flow of events

Basic flow

(Success)

The use case starts when the user selects an news

1 User selects the poster of the news on the website

2 The system loads content from the database

1 System to check information in the database

2 The system notifies the screen that the content has been deleted

Extension point Not available

Table 3.3 Usecase detail “read news”

Picture 3.4 Read news sequence diagram

3.2.2.4 Read Activities

Name Read Activities

Brief description User views any activities on the website

Actor(s) Guest, Student, Admin, Base union

13

Pre-conditions User has access to the system

Post-conditions If successful: the system displays the entire activities’s

The use case starts when the user selects an activities

1 User selects the poster of the activities on the website

2 The system loads content from the database

3 The system displays the entire activities’s content Alternative flow

(Failure)

If the post has been deleted The following works are performed:

1 System to check information in the database

2 The system notifies the screen that the content has been deleted

Extension point Not available

Table 3.4 Usecase detail “Read Activities”

14

Picture 3.5 Read Activities sequence diagram

3.2.2.5 Search News

Brief description User searches for any information about news on the

website

Actor(s) Guest, Student, Base union

Pre-conditions User has access to the system

Post-conditions If successful: the system displays all content related to the

15

1 User selects any keyword on the toolbar

2 System to check information in the database

3 The system loads content from the database

4 The system displays all the results related to the search keyword

Alternative flow

(Failure)

If the news doesn’t exist The following works are performed:

1 System to check information in the database

2 The system notifies to user at the screen that no have news relatives to this keywords

Extension point Not available

Table 3.5 Usecase detail “Search news”

Picture 3.6 Search news sequence diagram

16

3.2.2.6 Logout

Name Log out of your account

Brief description User logs out of the account

Actor(s) Student, Base union, Admin

Pre-conditions User has logged into the system

Post-conditions If successful: the system displays the home page as a user

when not logged in and this user will be removed from this system

1 User selects the button to log out of the account

2 The system will delete the entire session of the account

3 Navigate the system to the home page

4 The system displays a successful logout message Alternative flow

(Failure)

Extension point Not available

Table 3.6 Usecase detail “Logout”

17

Picture 3.7 Logout sequence diagram

3.2.2.7 Register activity

Name Register activity

Brief description Student registers activities to earn points which depend on

each activity

Actor(s) Student

Pre-conditions Guest has logged into the system as student

Post-conditions If successful: System notify student that you register

18

2 The system will delete the entire session of the account

3 Navigate the system to the home page

4 The system displays a successful logout message Alternative flow

(Failure)

Extension point Not available

Table 3.7 Usecase detail “Register activity”

Picture 3.8 Register activity

3.2.2.8 Tracking Activity

Name Tracking Activity

Brief description Student can follow activities’s log about time, process of

this activities, their status,…

19

Actor(s) Student

Pre-conditions Guest has logged into the system as student

Post-conditions If successful: System show information about this activity

It includes process of activities, status, start time, end time,…

Flow of events

Basic flow

(Success)

The use case starts when the user chooses to their activities

1 User selects the button to see their activities

2 System shows information relative to this information for user

Alternative flow

(Failure)

Extension point Not available

Table 3.8 Usecase detail “Tracking acitivity”

20

Picture 3.9 Tracking acitivity sequence diagram

3.2.2.9 Scan QR Code

Brief description Student scan qr code which is provied by base union to

check in the activities,

Actor(s) Student

Pre-conditions Guest has logged into the system as student with mobile app

Post-conditions If successful: app notifies to user that user checkin event

21

1 User selects the button to scan qr code

2 Scan screen will be shown

3 User scan with qr code which is provided by base union

4 App notifies user that user checks in event successfully

Alternative flow

(Failure)

If this code is not available, the following works are performed:

1 User scan qr code which is provided by base union

2 App notifies user that code is not exist

3 App show button for user to rescan code

4 Go back to step 3 in Basic flow to be executed

Extension point Not available

Table 3.9 Usecase detail “Scan QR Code”

22

Picture 3.10 Scan QR Code sequence diagram

3.2.2.10 Change information

Name Change information

Brief description Student changes their information

Actor(s) Student

Pre-conditions Guest has logged into the system as student

Post-conditions If successful: app notifies to user that user change