KHÓA LUẬN tốt NGHIỆP xây DỰNG ỨNG DỤNG QUẢN lý QUY TRÌNH THỰC HIỆN KHÓA LUẬN tốt NGHIỆP

HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TINKHOA CÔNG NGHỆ PHẦN MỀM NGUYỄN ĐÌNH PHÚ THỊNH KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG QUẢN LÝ QUY TRÌNH THỰC HIỆN KHÓA LUẬN TỐT NGHIỆP BU

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

NGUYỄN ĐÌNH PHÚ THỊNH

KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG QUẢN LÝ QUY TRÌNH THỰC

HIỆN KHÓA LUẬN TỐT NGHIỆP

BUILD AN APP TO MANAGE THE THESIS

IMPLEMENTATION PROCESS

KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM

TP HỒ CHÍ MINH, 2021

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

NGUYỄN ĐÌNH PHÚ THỊNH – 16521178

KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG QUẢN LÝ QUY TRÌNH THỰC

HIỆN KHÓA LUẬN TỐT NGHIỆP

BUILD AN APP TO MANAGE THE THESIS

THÔNG TIN HỘI ĐỒNG CHẤM KHÓA LUẬN TỐT NGHIỆP

Hội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số ……… ngày

……… của Hiệu trưởng Trường Đại học Công nghệ Thông tin

ĐHQG TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC

CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc Lập - Tự Do - Hạnh Phúc

TP HCM, ngày… tháng… năm……

NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP (CỦA CÁN BỘ HƯỚNG DẪN)

Tên khóa luận:

XÂY DỰNG ỨNG DỤNG QUẢN LÝ QUY TRÌNH THỰC HIỆN KHÓA LUẬN

TỐT NGHIỆP

Nguyễn Đình Phú Thịnh 16521178 ThS Lê Thanh Trọng

Đánh giá Khóa luận:

1 Về cuốn báo cáo:

Số trang: Số chương:

Số bảng số liệu: Số hình vẽ:

Số tài liệu tham khảo: Sản phẩm:

Một số nhận xét về hình thức cuốn báo cáo:

ĐHQG TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC

CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc Lập - Tự Do - Hạnh Phúc

TP HCM, ngày… tháng… năm……

NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP (CỦA CÁN BỘ PHẢN BIỆN)

Tên khóa luận:

XÂY DỰNG ỨNG DỤNG QUẢN LÝ QUY TRÌNH THỰC HIỆN KHÓA LUẬN

TỐT NGHIỆP

Nguyễn Đình Phú Thịnh 16521178

Đánh giá Khóa luận:

1 Về cuốn báo cáo:

Số trang: Số chương:

Số bảng số liệu: Số hình vẽ:

Số tài liệu tham khảo: Sản phẩm:

Một số nhận xét về hình thức cuốn báo cáo:

Em xin chân thành cảm ơn thầy Lê Thanh Trọng và cô Trần Hạnh Xuân đã hướng dẫn tận tình, đã không ngần ngại bỏ thời gian để giải thích về quy trình nghiệp vụ, và đóng góp ý kiến để em có thể hoàn thành khóa luận tốt nghiệp một cách tốt nhất

Bên cạnh sự giúp đỡ của thầy cô, trong quá trình thực hiện Khóa luận em còn nhận được những lời góp ý, những lời động viên từ bạn bè, các anh chị đồng nghiệp cũng như gia đình của mình Em xin cảm ơn tất cả mọi người

Trong suốt quá trình em tìm hiểu và thực hiện khóa luận, do sử dụng những công nghệ mới tìm hiểu, thời gian và nhân lực lại có hạn, nên không thể tránh những sai sót Do

đó em rất mong nhận được sự thông cảm và những ý kiến đóng góp chân thành từ quý thầy cô và các bạn Một lần nữa, em xin chân thành cảm ơn mọi người

Thành phố Hồ Chí Minh, ngày tháng năm 2021

Nguyễn Đình Phú Thịnh

ĐHQG TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC

CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc Lập - Tự Do - Hạnh Phúc

ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG QUẢN LÝ QUY TRÌNH THỰC HIỆN

KHÓA LUẬN TỐT NGHIỆP

Cán bộ hướng dẫn: Ths Lê Thanh Trọng

Thời gian thực hiện:Từ ngày 08/03/2021 đến ngày 30/06/2021

Sinh viên thực hiện:

thực hiện đề tài cũng như quá trình phản biện và chấm đề tài

● Giúp Sinh viên dễ dàng theo dõi các thông tin quan trọng liên quan đến khóa

luận, đăng ký đề tài, nộp file và ghi lại quá trình thực hiện đề tài

2 Phạm vi:

● Ứng dụng sẽ được triển khai trên môi trường Web

● Ứng dụng sẽ có những tính năng:

○ Quản lý thông tin Sinh viên thực hiện khóa luận, Giảng viên hướng dẫn

○ Quản lý quá trình đề xuất, xét duyệt, thay đổi thông tin đề tài

○ Hỗ trợ Cán bộ khoa đăng thông báo, quản lý các file nộp của Sinh viên, Giảng viên

○ Quản lý Hội đồng chấm Phản biện

○ Giảng viên có thể thực hiện đề xuất Đề tài, nộp file bằng cách tương tác trực tiếp với bài đăng thông báo

○ Tương tự, Sinh viên có thể thực hiện đăng ký Đề tài, nộp file dễ dàng bằng cách tương tác trực tiếp với bài đăng thông báo

○ Sinh viên có thể ghi lại quá trình thực hiện khóa luận của mình để dễ dàng theo dõi

3 Đối tượng sử dụng:

Đối tượng sử dụng phần mềm là Sinh viên, Giảng viên, Cán bộ Khoa

4 Phương pháp thực hiện:

● Nghiên cứu nghiệp vụ:

○ Quy trình triển khai và thực hiện khóa luận tốt nghiệp ở UIT

○ Vai trò của các đơn vị thực hiện trong từng bước của quy trình

○ Điểm cần cải thiện của việc thực hiện quy trình hiện tại

● Nghiên cứu công nghệ:

○ Front-end: React

○ Back-end: NodeJS

○ Database: MongoDB

5 Kết quả mong đợi:

● Hoàn thiện tính năng đã đặt ra

● UI/UX tốt, mang lại trải nghiệm tốt nhất cho người dùng

● Dễ dàng bảo trì, mở rộng, có khả năng đưa vào thực tiễn

Kế hoạch thực hiện:

1 Nghiên cứu, phân

tích yêu cầu

03/2021 - Tìm hiểu quy trình thực hiện khóa

luận tốt nghiệp ở UIT

- Xác định các chức năng cần thiết

2 Thiết kế hệ thống 03/2021 –

04/2021

- Đặc tả yêu cầu, usecase

- Thiết kế sơ đồ lớp và Cơ sở dữ liệu

- Thiết kế Wireframe cho giao diện

3 Khởi tạo hệ thống 04/2021 - Khởi tạo project front-end

- Khởi tạo project back-end

- Khởi tạo database

- Hoàn thành UI mockup cho các tính năng chính

4 Xây dựng hệ

thống

04/2021 – 06/2021

Hoàn thiện design chi tiết, front-end và back-end cho từng tính năng

5 Thực nghiệm 06/2021 Tiến hành thực nghiệm, kiểm thử và

MỤC LỤC

Chương 1 MỞ ĐẦU 2

1.1 Giới thiệu đề tài 2

1.2 Lý do chọn đề tài 2

Chương 2 TỔNG QUAN ĐỀ TÀI 4

2.1 Mục tiêu 4

2.2 Phạm vi 4

2.3 Phương pháp thực hiện 4

2.4 Kết quả mong đợi 5

2.5 Hiện trạng 6

2.5.1 Đánh giá hiện trạng Error! Bookmark not defined. 2.5.2 Hướng giải quyết Error! Bookmark not defined. Chương 3 CÔNG NGHỆ SỬ DỤNG 8

3.1 React 8

3.2 Node.Js 10

3.2.1 Blocking I/O (Đồng bộ) 11

3.2.2 Non-Blocking I/O (Bất đồng bộ) 11

3.3 MongoDB 12

3.4 Express.js 13

3.5 Google Drive API 14

Chương 4 THIẾT KẾ HỆ THỐNG 16

4.1 Xác định và phân tích yêu cầu 16

4.1.1 Danh sách các Actor 18

4.1.2 Danh sách các Usecase 19

4.2 Thiết kế cơ sở dữ liệu 53

4.3 Thiết kế kiến trúc hệ thống 66

4.4 Thiết kế giao diện 68

4.4.1 Màn hình đăng nhập 68

4.4.2 Màn hình trang chủ 69

4.4.3 Màn hình Chi tiết thông báo 70

4.4.4 Màn hình Log tiến độ 71

4.4.5 Màn hình Quản lý Kỳ thực hiện Khóa luận 72

4.4.6 Màn hình Quản lý Giảng viên 74

4.4.7 Màn hình Quản lý Sinh viên 74

4.4.8 Màn hình Quản lý Đề tài 75

4.4.9 Màn hình Thông tin Đề tài 76

4.4.10 Màn hình Quản lý Thông báo 78

4.4.11 Màn hình Quản lý file nộp 79

4.4.12 Màn hình Danh sách File của Thư mục 80

4.4.13 Màn hình Quản lý Hội đồng chấm 80

4.4.14 Màn hình Quản lý Biểu mẫu 81

4.4.15 Màn hình Quản lý User 81

4.5 Triển khai hệ thống 81

Chương 5 KẾT LUẬN 84

5.1 Kết quả đạt được 84

5.2 Thuận lợi và khó khăn 84

5.2.1 Thuận lợi 84

5.2.2 Khó khăn 85

5.3 Hướng phát triển 85

▪ Tài liệu Tiếng Việt 87

▪ Tài liệu Tiếng Anh 87

DANH MỤC HÌNH

Hình 2.1 Ví dụ về một file Excel biểu mẫu Khóa luận Tốt nghiệp 6

Hình 2.2 Một thư mục nộp file thường thấy 7

Hình 3.1 ReactJs 8

Hình 3.2 Node.Js 10

Hình 3.3 Blocking I/O và Non-Blocking I/O 11

Hình 3.4 MongoDB 12

Hình 3.5 Express.js 13

Hình 3.6 Sơ đồ mối quan hệ của Google Drive API 14

Hình 4.1 Sơ đồ Usecase tổng quát của Admin (1) 16

Hình 4.2 Sơ đồ Usecase tổng quát của Admin (2) 17

Hình 4.3 Sơ đồ Usecase tổng quát của User 18

Hình 4.4 Usecase Quản lý Kỳ thực hiện Khóa luận 19

Hình 4.5 Usecase Quản lý Giảng viên 23

Hình 4.6 Usecase Quản lý Sinh viên Thực hiện Khóa luận 25

Hình 4.7 Usecase Quản lý Đề tài 28

Hình 4.8 Usecase Quản lý Thông báo 31

Hình 4.9 Usecase Quản lý Nộp file 33

Hình 4.10 Quản lý Hội đồng chấm 36

Hình 4.11 Usecase Quản lý Biểu mẫu 39

Hình 4.12 Usecase Quản lý User 41

Hình 4.13 Usecase Xem thông báo 44

Hình 4.14 Usecase Log tiến độ 46

Hình 4.15 Usecase Quản lý Đề tài Hướng dẫn 48

Hình 4.16 Lược đồ xử lý thao tác Đăng ký Đề tài 50

Hình 4.17 Lược đồ xử lý thao tác Đề xuất Đề tài 51

Hình 4.18 Lược đồ xử lý thao tác Nộp file 52

Hình 4.19 Class diagram 54

Hình 4.20 Collection KyThucHien 55

Hình 4.21 Collection GiangVien 56

Hình 4.22 Collection SinhVien 57

Hình 4.23 Collection DeTai 58

Hình 4.24 Collection ThongBao 60

Hình 4.25 Collection FileNop 61

Hình 4.26 Collection ThuMuc 62

Hình 4.27 Collection HoiDong 63

Hình 4.28 Collection BieuMau 64

Hình 4.29 Collection User 64

Hình 4.30 Kiến trúc hệ thống 66

Hình 4.31 Màn hình đăng nhập 68

Hình 4.32 Xác thực Google 68

Hình 4.33 Màn hình trang chủ 69

Hình 4.34 Màn hình Chi tiết thông báo 70

Hình 4.35 Màn hình Log tiến độ 71

Hình 4.36 Màn hình Quản lý Kỳ thực hiện Khóa luận 72

Hình 4.37 Màn hình các Đề tài của Kỳ thực hiện Khóa luận 73

Hình 4.38 Màn hình Quản lý Giảng viên 74

Hình 4.39 Màn hình Quản lý Sinh viên 74

Hình 4.40 Màn hình Quản lý Đề tài 75

Hình 4.41 Màn hình Thông tin Đề tài (1) 76

Hình 4.42 Màn hình Thông tin Đề tài (2) 77

Hình 4.43 Màn hình Thông tin Đề tài (3) 77

Hình 4.44 Màn hình Quản lý Thông báo 78

Hình 4.45 Màn hình Quản lý File nộp 79

Hình 4.46 Màn hình Danh sách File của Thư mục 80

Hình 4.47 Màn hình Quản lý Hội đồng chấm 80

Hình 4.48 Màn hình Quản lý Biểu mẫu 81

Hình 4.49 Màn hình Quản lý User 81

Hình 4.50 Cài đặt biến môi trường trên Heroku 83

DANH MỤC BẢNG

Bảng 3.1 So sánh một số khải niệm của SQL và MongoDB 13

Bảng 4.1 Danh sách các Actor 18

Bảng 4.2 Mô tả Usecase Quản lý Kỳ thực hiện Khóa luận 20

Bảng 4.3 Mô tả Usecase Quản lý Giảng viên 23

Bảng 4.4 Mô tả Usecase Quản lý Sinh viên thực hiện Khóa luận 26

Bảng 4.5 Mô tả Usecase Quản lý Đề tài 29

Bảng 4.6 Mô tả Usecase Quản lý Thông báo 31

Bảng 4.7 Mô tả Usecase Quản lý Nộp file 33

Bảng 4.8 Mô tả Usecase Quản lý Hội đồng chấm 36

Bảng 4.9 Mô tả Usecase Quản lý Biểu mẫu 39

Bảng 4.10 Mô tả Usecase Quản lý User 42

Bảng 4.11 Mô tả Usecase Xem thông báo 44

Bảng 4.12 Mô tả Usecase Log tiến độ 46

Bảng 4.13 Mô tả Usecase Quản lý Đề tài Hướng dẫn 49

Bảng 4.14 Collection KyThucHien 55

Bảng 4.15 Collection GiangVien 56

Bảng 4.16 Collection SinhVien 57

Bảng 4.17 Collection DeTai 59

Bảng 4.18 Collection Thong Bao 61

Bảng 4.19 Collection FileNop 61

Bảng 4.20 Collection ThuMuc 62

Bảng 4.21 Collection HoiDong 63

Bảng 4.22 Collection BieuMau 64

Bảng 4.23 Collection User 65

Information Technology

Trường Đại học Công nghệ Thông tin – Đại học Quốc gia Thành phố Hồ Chí Minh

5 UX User Experience Trải nghiệm người dùng

6 HTML HyperText Markup

Language

Một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web trên World Wide Web

7 REST Representational State

Transfer

Một dạng chuyển đổi cấu trúc dữ liệu, một kiểu kiến trúc để viết API

1

TÓM TẮT KHÓA LUẬN

Khóa luận với đề tài “Xây dựng ứng dụng quản lý quy trình thực hiện khoá luận tốt nghiệp” tập trung vào tìm hiểu, nghiên cứu quy trình thực hiện Khóa luận hiện tại ở Khoa Công nghệ Phần mềm UIT, rút ra các điểm cần cải thiện từ đó xây dựng nên một ứng dụng tự động hóa phần nào quy trình này, giúp quy trình được thực hiện dễ dàng hơn

Đề tài mở đầu bằng việc khảo sát thực trạng, tìm hiểu những vấn đề của quy trình thực hiện khóa luận hiện tại ở Khoa Công nghệ Phần mềm UIT Trong quá trình nghiên cứu nghiệp vụ, tác giả đã nhận được sự giúp đỡ từ các Giảng viên và Cán bộ của Khoa, giúp hiểu rõ hơn về quy trình và các vấn đề hiện có cũng như nhận được những góp ý về phân tích thiết kế của mình, từ đó rút ra được những mục tiêu, chức năng của đề tài

Sau khi tìm hiểu, nghiên cứu nghiệp vụ và xác định được những tính năng cần thiết, ứng dụng được xây dựng qua từng công đoạn Xây dựng đặc tả yêu cầu, Usecase, thiết kế sơ đồ lớp và Cơ sở dữ liệu, thiết kế wireframe sử dụng công cụ Figma Trong quá trình xây dựng, client và server cũng như nghiên cứu các thư viện,

framework như Google Drive API, mongoose Paginate v2, React Quill, Recoil được thực hiện song song với nhau Cuối cùng, ứng dụng được triển khai trên Heroku Kết quả của quá trình thực hiện Khóa luận được tổng hợp lại vào báo cáo, đưa ra kết luận và hướng phát triển cho ứng dụng trong tương lai

2

Chương 1 MỞ ĐẦU

1.1 Giới thiệu đề tài

Ngày nay, với sự phát triển nhanh chóng của công nghệ, thói quen làm việc và vận hành của các công ty, cơ quan, trường học cũng dần thay đổi để bắt kịp sự thay đổi

ấy Các dữ liệu ngày nay dần được số hóa và các quy trình cũng được chuẩn hóa bằng các phần mềm quản lý nhằm đem lại độ chính xác và tốc độ cao hơn Với một quy trình phức tạp và đòi hỏi độ chính xác như quy trình thực hiện khóa luận tốt nghiệp, việc áp dụng xu hướng này chắc chắn cũng sẽ đem lại hiệu quả cao, giảm bớt công việc cho các cán bộ nhà trường cũng như sinh viên

Quy trình thực hiện Khóa luận là một quy trình phức tạp với nhiều giai đoạn, nhiều bên tham gia và đòi hỏi sự chính xác Tuy nhiên, hiện nay ở khoa Công nghệ Phần mềm UIT, quy trình hiện nay đang được thực hiện hầu hết là thủ công, không có sự trợ giúp của phần mềm quản lý nào, từ đó dẫn đến việc đặt nhiều gánh nặng lên giáo viên với những vấn đề như phải duyệt sheet một cách thủ công, khó quản lý được đề tài đã được đăng ký trong quá khứ chưa, khó quản lý được việc phân hội đồng và thời gian phản biện

Nhận ra những khó khăn và bất cập trên, để hỗ trợ Cán bộ Khoa cũng như các bạn sinh viên trong quá trình thực hiện Khóa luận, đề tài đã được lên ý tưởng và thực hiện

ở nhiều nơi như phòng kế hoạch tài chính, cổng thông tin sinh viên, cổng thông tin

Giúp Sinh viên dễ dàng theo dõi các thông tin quan trọng liên quan đến khóa luận, đăng ký đề tài, nộp file và ghi lại quá trình thực hiện đề tài

Ứng dụng sẽ được triển khai trên môi trường Web

Ứng dụng sẽ có những tính năng:

● Quản lý thông tin Sinh viên thực hiện khóa luận, Giảng viên hướng dẫn

● Quản lý quá trình đề xuất, xét duyệt, thay đổi thông tin đề tài

● Hỗ trợ Cán bộ khoa đăng thông báo, quản lý các file nộp của Sinh viên, Giảng viên

● Quản lý Hội đồng chấm Phản biện

● Giảng viên có thể thực hiện đề xuất Đề tài, nộp file bằng cách tương tác trực tiếp với bài đăng thông báo

● Tương tự, Sinh viên có thể thực hiện đăng ký Đề tài, nộp file dễ dàng bằng cách tương tác trực tiếp với bài đăng thông báo

● Sinh viên có thể ghi lại quá trình thực hiện khóa luận của mình để dễ dàng theo dõi

Tìm hiểu Quy trình triển khai và thực hiện Khóa luận tốt nghiệp hiện nay ở Khoa Công nghệ Phần mềm UIT

5

Sau khi tìm hiểu, rút ra những điểm hạn chế cần cải thiện, từ những điểm đó rút ra những tính năng cơ bản mà một ứng dụng Quản lý Quy trình thực hiện Khóa luận tốt nghiệp cần có

Tìm hiểu các công nghệ cần thiết để hoàn thiện ứng dụng: React cho Front-end, NodeJS cho back-end và MongoDB cho Cơ sở dữ liệu

Rèn luyện tính độc lập, chủ động Biết lên kế hoạch và quản lý thời gian

Vận dụng những kiến thức đã được học được cũng như học hỏi thêm nhiều Công nghệ mới, giúp bản thân phát triển

Ứng dụng làm ra hoàn thiện, đủ các tính năng đã đặt ra, UI/UX tốt mang lại trải nghiệm tốt cho người dùng Dễ dàng bảo trì, mở rộng, có khả năng đưa vào thực tiễn

6

Thực hiện Khóa luận là một cột mốc rất quan trọng của một Sinh viên, nó đánh giá kết quả thu được trong quá trình học tập của Sinh viên cũng như trau dồi những kỹ năng đã có để chuẩn bị cho tương lai Chính vì vậy, công việc quản lý quy trình này cũng rất quan trọng

Với sự giúp đỡ của thầy cô Khoa trong việc điều tra nghiệp vụ, tác giả nhận thấy hiện nay ở Khoa Công nghệ Phần mềm UIT, công việc Quản lý Quy trình Thực hiện Khóa luận hầu hết được thực hiện thủ công Việc Giảng viên đề xuất Đề tài hay Sinh viên đăng ký Đề tài được thực hiện bằng cách điền vào file excel Sau đó, Cán bộ Khoa sẽ phải tổng hợp các thông tin này một cách thủ công Tương tự, các công việc xuất báo cáo cũng được thực hiện thủ công như vậy Phải xử lý tay một lượng thông tin nhiều và đỏi hỏi sự chính xác cao như vậy là một công việc rất vất

vả cho các thầy cô của Khoa

Hình 2.1 Ví dụ về một file Excel biểu mẫu Khóa luận Tốt nghiệp1

Bên cạnh đó, phương pháp nộp file hiện nay là người nộp sẽ đặt tên file theo format

và nộp lên một thư mục Google Drive public Cách này tuy tiện lợi nhưng cũng có khả năng xảy ra các sự cố như xóa nhầm file, đổi tên nhầm file

1 https://se.uit.edu.vn/images/thongbao/Bieu%20mau%20KLTN%202020.rar

7

Hình 2.2 Một thư mục nộp file thường thấy2

Như vậy, cần thiết phải xây dựng một ứng dụng giúp tự động hóa một phần của công việc Quản lý Quy trình thực hiện Khóa luận Ứng dụng sẽ hỗ trợ việc tổng hợp, lưu trữ thông tin và xuất báo cáo, giúp việc thực hiện quy trình được dễ dàng hơn

2 https://drive.google.com/drive/u/2/folders/1cD11bk0SJS6Xx0t65xTMvhaB_Oe7gjQj

React cung cấp cho lập trình viên khả năng gói các thành phần giao diện thành các component để dễ dàng tái sử dụng cũng như giúp quá trình sửa lỗi được nhanh hơn React có hai tính năng chính khiến công nghệ này thu hút các lập trình viên

JavaScript: JSX và Virtual DOM

3.1.1 JSX

Thành phần chính của các website là HTML, các trình duyệt web sẽ đọc HTML và hiển thị trang web lên máy tính, điện thoại, Trong quá trình này trình duyệt tạo nên một dạng caay dữ liệu gọi là DOM (Document Object Model) để thể hiện bố cục của các thành phần trang web Các lập trình viên sau đó có thể điều khiển các thành phần này để đưa dữ liệu động vào trang web bằng JavaScript

3 https://logos-download.com/9747-react-logo-download.html

9

JSX (JavaScriptXML) là một dạng cú pháp mở rộng cho JavaScript, được viết theo dạng XML Mã lệnh JSX sẽ được chuyển thành JavaScript nên nó được hỗ trợ trên tất cả các trình duyệt Sử dụng JSX không chỉ tiện lợi mà còn giúp công việc update DOM hiệu quả hơn nhờ vào Virtual DOM

3.1.2 Virtual DOM

Một trang web được viêt bằng HTML, JavaScript thuần sẽ dùng HTML để cập nhật DOM Đối với những trang web tĩnh và đơn giản thì khồn có vấn đề gì nhưng với những trang web động và đòi hỏi tương tác với người dùng nhiều thì việc này có thể ảnh hưởng lớn đến hiệu suất vì mỗi lần thay đổi một thành phần thì cả DOM sẽ phải reload

Đối với ReactJs, nếu lập trình viên sử dụng JSX để điều khiển và cập nhật DOM, ReactJS sẽ tạo một bản copy của DOM gọi là Virtual DOM và sử dụng bản copy này để xác định chính xác thành phần nào cần phải cập nhật và chỉ cập nhật đúng thành phần đó Tính năng này làm cho công việc update DOM tốn ít thời gian và chi phí tính toán hơn, dẫn đến sự cải thiện đáng kể nếu áp dụng cho những trang web lớn

Ngoài những điểm mạnh cơ bản trên, ReactJS còn có hệ sinh thái đa dạng, với rất nhiều các thư viện và tiệc ích được phát triển để hỗ trợ cho công nghệ này Cộng đồng lập trình viên ReactJS cũng rất lớn mạnh, khiến cho việc tìm kiếm giải đáp cho những thắc mắc, lỗi trên các trang web như StackOverFlow là rất dễ dàng Cùng với đó là sự chống lưng của công ty lớn như Facebook, có thể chắc chắn ràng, trong tương lai ReactJS sẽ còn phát triển hơn nữa

Mọi trình duyệt đều có engine JavaScript riêng để chuyển đổi JavaScript sang ngôn ngữ máy Trước đây, JavaScript chỉ có thể chạy trên các trình duyệt nhưng vào năm

2009, Ryan Dahl đã nảy ra ý tưởng chạy JavaScript bên ngoài phạm vi các trình duyệt và đã dùng engine JavaScript của Google Chrome lúc bấy giờ là V8 Engine

để đóng gói vào một phần mềm C++ và đặt tên cho nó là Node Hiện nay, Node có thể chạy trên hầu hết các hệ điều hành phổ biến như Microsoft Windows, OS X, Linux Node cũng được sử dụng rộng rãi bởi các công ty lớn trên thế giới như

Netflix, Paypal, NASA, eBay, Linkedin 5

Node thường được sử dụng để xây dựng các service , các API để giao tiếp với phần client của ứng dụng

Hiện nay, có rất nhiều công cụ và framework hỗ trợ công việc xây dựng back-end service như ASP.NET, Rails và Django, nhưng điểm nổi bật của Node là ở bản chất bất đồng bộ của công nghệ này

4 https://vi.wikipedia.org/wiki/Node.js

5 https://medium.com/nerd-for-tech/5-major-companies-that-use-node-js-and-why-211fb5cc267d

11

3.2.1 Blocking I/O (Đồng bộ)

Blocking I/O có nghĩa là xử lý đơn luồng, đây là xử lý mặc định của nhiều web server như ASP.NET Khi có một công việc cần tốn thời gian xử lý như là đọc file hay đọc dữ liệu từ database, các xử lý sau đó sẽ bị chặn lại cho đến khi công việc đó hoàn thành Một số phần mềm server sẽ tạo thêm thread để thực hiện những xứ lý

đó nhưng việc này tuy giải quyết được vấn đề thời gian nhưng lại làm tốn bộ nhớ

3.2.2 Non-Blocking I/O (Bất đồng bộ)

Đây là hình thức xử lý của Node, chỉ sử dụng một thread để xử lý tất cả các request Khi các request như truy xuất dữ liệu từ database được gửi tới server, nó sẽ gửi callback vào một hàng đợi khác và các request tiếp theo tiếp tục được xử lý mà không cần chờ request đó Khi tác vụ truy xuất dữ liệu thừ database được thực hiện xong, callback lại được đưa vào hàng đợi thứ ba, chờ thread rảnh để được thực thi Hình thức xử lý này giúp cho server có thể thực thi rất nhiều request mà không cần

phải tăng yêu cầu về hardware

Hình 3.3 Blocking I/O và Non-Blocking I/O6

Node.Js là một lựa chọn cho một lập trình viên web bới vì chỉ cần biết một ngôn ngữ và JavaScript là đã có thể xây dựng được một ứng dụng với cả front-end và back-end hoàn chỉnh

6 https://topdev.vn/blog/node-js-la-gi/

MongoDB được sử dụng rộng rãi bởi các công ty lớn trên thế giới như: EA, Adobe, Cisco, eBay, Google 9

Các cơ sở dữ liệu quan hệ truyền thống lưu trữ data dưới dạng table và dùng

structured query language (SQL) để truy xuất data Ngoài ra các cơ sở dữ liệu dạng này có các ràng buộc, điều kiện để định nghĩa mối quan hệ chứa các field trong một table và giữa table này với table khác Không như vậy, MongoDB lưu trữ data vào các document Với cấu trúc JSON và khả năng thêm xóa field dễ dàng, MongoDB giúp lập trình viên lưu các kiểu dữ liệu phức tạp vào một document như Array, Object, thậm chí là nested Array, nested Object MongoDB còn có hiệu suất tốt, dễ

Joining Linking & Embedding

Bảng 3.1 So sánh một số khải niệm của SQL và MongoDB

Hình 3.5 Express.js10

Express.js là một framework miễn phí mã nguồn mở cho Node.js, được tạo ra bởi

TJ Holowaychuk vào năm 2010 Nó được sử dụng để thiết kế và xây dựng các ứng dụng web nhanh chóng và dễ dàng hơn là chỉ sử dụng Node.js Express hỗ trợ tính năng điều hướng các request của client một cách đơn giản và cũng cung cấp một middleware có vai trò xử lý trả response cho các request đó Nếu không sử dụng Express thì lập trình viên sẽ phải tự viết các component điều hướng request, một công việc rất mất thời gian Thêm vào đó, vì là một framework của Node.js nên Express cũng có hiệu suất rất tốt

Các công ty lớn sử dụng Express.js hiện nay có thể kể đến như: IBM, UBER, Yandex 11

10 https://en.wikipedia.org/wiki/Express.js

11 https://expressjs.com/en/resources/companies-using-express.html

14

Các nền tảng lưu trữ file như Google Drive hay Dropbox rất tiện lợi cho các ứng dụng web, cung cấp cho các ứng dụng này một nguồn khác để lưu trữ data, giúp giảm bớt gánh nặng cho database Các nền tảng này cũng cung cấp dịch vụ thực hiện những thao tác như lưu trữ, sửa, xóa, chia sẻ file thông qua các API Các API này có thể được ứng dụng cho các nền tảng khác nhau như web, Android, iOS Google API là một dịch vụ như vậy

Dưới đây là sơ đồ thể hiện mối quan hệ của ứng dụng sử dụng Google Drive,

Google Drive và Google Drive API

Hình 3.6 Sơ đồ mối quan hệ của Google Drive API12

Trong đó:

Google Drive: dịch vụ lưu trữ file trên cloud của Google Cung cấp cho người dùng

không gian lưu trữ riêng gọi là My Drive cũng như lựa chọn để chia sẻ file trên các thư mục chung gọi là Shared Drives

Google Drive API: REST API giúp lập trình viên sử dụng dịch vụ của Google

Drive trong ứng dụng của mình

Google Drive app: Ứng dụng sử dụng Google Drive để lưu trữ file

12 https://developers.google.com/drive/api/v3/about-sdk

15

Google Drive UI: Giao diện quản lý file của Google Drive Được sử dụng trong

những ứng dụng dạng trình chỉnh sửa văn bản như các ứng dụng thao tác với file word hay excel

My Drive: Không gian lưu trữ riêng của một người dùng Google File được lưu

trong My Drive có thể được chia sẻ với những người khác nhưng quyền sở hữu của file vẫn thuộc về người dùng đó

OAuth 2.0: Giao thức mà Google Drive API yêu cầu để xác thực người dùng

Shared drive: Một không gian lưu trữ file chung của những người dùng Một người dùng có quyền truy cập vào một shared drive thì sẽ có quyền truy cập vào tất cả các file trong shared drive đó

Với Google Drive API, một lập trình viên có thể upload file cũng như download file

từ Google Drive, tìm kiếm file, folder và trả về thông tin của những file và folder

đó Google Drive API là một công cụ mạnh mẽ và là một lựa chọn không thể không

kể đến cho các ứng dụng cần thao tác với lượng file lớn

17 Hình 4.2 Sơ đồ Usecase tổng quát của Admin (2)

18

Hình 4.3 Sơ đồ Usecase tổng quát của User

4.1.2 Danh sách các Actor

Danh sách các Actor

1 BCN Khoa Ban chủ nhiệm Khoa, sẽ có quyền thực hiện những chức

năng cao như duyệt đề tài, cấp quyền duyệt đề tài

2 CB Nội vụ Cán bộ Nội vụ, sẽ là người thực hiện hầu hết các chức

năng quản lý của ứng dụng

3 Giảng viên Giảng viên

4 Sinh viên Sinh viên

Bảng 4.1 Danh sách các Actor

19

4.1.3 Danh sách các Usecase

4.1.3.1 Quản lý Kỳ thực hiện Khóa luận

Hình 4.4 Usecase Quản lý Kỳ thực hiện Khóa luận

Bảng 4.2 Mô tả Usecase Quản lý Kỳ thực hiện Khóa luận

(b) Đặc tả

Thêm Kỳ thực hiện Khóa luận

Tiền điều kiện Đăng nhập với phân quyền Cán bộ Nội vụ trở lên

Hậu điều kiện Thêm Kỳ thực hiện Khóa luận thành công

Luồng sự kiện

chính

1 Truy cập màn hình Quản lý Kỳ thực hiện Khóa luận

2 Bấm nút “Thêm Kỳ thực hiện Khóa luận”

3 Nhập thông tin

4 Nhấn nút “Thêm”

Luồng sự kiện phụ Tạo không thành công do thông tin không hợp lệ

Dừng xử lý do lỗi hệ thống

Sửa Kỳ thực hiện Khóa luận

Tiền điều kiện Đăng nhập với phân quyền Cán bộ Nội vụ trở lên