Đồ án tốt nghiệp Công nghệ thông tin: Xây dựng hệ thống mạng xã hội

JS JavaScript: Một ngôn ngữ lập trình thường được sử dụng để tạo các hiệu ứng tương tác trong các trình duyệt web.. Giới thiệu về ngôn ngữ C# C#, một ngôn ngữ lập trình bậc cao được p

Trang 1

THÀNH PHỐ HỒ CHÍ MINH

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN

XÂY DỰNG HỆ THỐNG MẠNG XÃ HỘI

GVHD: Th.S TRƯƠNG THỊ KHÁNH DỊP SVTH: NGUYỄN PHƯỚC CÔNG

PHAN DUY KHÁNH TRẦN NGUYỄN HUY TRƯỜNG

Trang 2

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM

KHOA CÔNG NGHỆ THÔNG TIN

BỘ MÔN CÔNG NGHỆ PHẦN MỀM



NGUYỄN PHƯỚC CÔNG – 20110447 PHAN DUY KHÁNH – 20110502 TRẦN NGUYỄN HUY TRƯỜNG - 20110590

XÂY DỰNG HỆ THỐNG

MẠNG XÃ HỘI

KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIÁO VIÊN HƯỚNG DẪN ThS TRƯƠNG THỊ KHÁNH DỊP

KHÓA 2020 - 2024

Trang 3

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

Họ và Tên sinh viên

Họ và tên Sinh viên 1 : Nguyễn Phước Công MSSV 1: 20110447

Họ và tên Sinh viên 2 : Phan Duy Khánh MSSV 2: 20110502

Họ và tên Sinh viên 3 : Trần Nguyễn Huy Trường MSSV 3: 20110590

Ngành: Công nghệ Thông tin

Tên đề tài: Xây dựng hệ thống mạng xã hội

Họ và tên Giáo viên hướng dẫn: ThS Trương Thị Khánh Dịp

NHẬN XÉT

1 Về nội dung đề tài khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

4 Đề nghị cho bảo vệ hay không ?

5 Đánh giá loại :

6 Điểm :

Trang 4

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN

Họ và Tên sinh viên

Họ và tên Sinh viên 1 : Nguyễn Phước Công MSSV 1: 20110447

Họ và tên Sinh viên 2 : Phan Duy Khánh MSSV 2: 20110502

Họ và tên Sinh viên 3 : Trần Nguyễn Huy Trường MSSV 3: 20110590

Tên đề tài: Xây dựng hệ thống mạng xã hội

Họ và tên Giáo viên phản biện: TS Huỳnh Xuân Phụng

NHẬN XÉT

1 Về nội dung đề tài & khối lượng thực hiện

2 Ưu điểm:

3 Khuyết điểm

4 Đề nghị cho bảo vệ hay không ?

5 Đánh giá loại :

6 Điểm :

Tp Hồ Chí Minh, ngày tháng năm 2024

Giáo viên phản biện

(Ký & ghi rõ họ tên)

Trang 5

LỜI CẢM ƠN

Là một sinh viên trường đại học Sư Phạm Kỹ Thuật TP Hồ Chí Minh, đồ án tốt nghiệp là một minh chứng cho những kiến thức, kinh nghiệm, trải nghiệm có được sau 4 năm học tập Trong thời gian hoàn thành đồ án tốt nghiệp, ngoài sự cố gắng của nhóm chúng em, còn có sự chỉ bảo tận tình của TS Trương Thị Khánh Dịp Nếu không có sự hướng dẫn tận tình của cô thì chúng em đã không thể hoàn thành tốt đồ án tốt nghiệp Chúng em xin gửi lời cảm ơn chân thành nhất đến cô

Ngoài ra nhóm chúng em cũng xin cảm ơn những cán bộ giảng viên, nhân viên của Khoa Công Nghệ Thông Tin đã truyền tải những kiến thức, kinh nghiệm, trải nghiệm của mình cho chúng em trong 4 năm vừa qua, để rồi từ những nền tảng đó để chúng em có thể hoàn thành tốt đề tài

Cuối cùng, nhóm xin gửi lời cảm ơn đến gia đình, bạn bè đã giúp đỡ, sẻ chia kiến thức cùng chúng em trong suốt quá trình học tập và hoàn thành đồ án của nhóm

Nhóm xin chân thành cảm ơn

Trang 6

Trường ĐH Sư Phạm Kỹ Thuật TP.HCM

Khoa: CNTT

ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP

Họ và Tên SV thực hiện 1 : Nguyễn Phước Công MSSV 1: 20110447

Họ và Tên SV thực hiện 2 : Phan Duy Khánh MSSV 2: 20110502

Họ và Tên SV thực hiện 3 : Trần Nguyễn Huy Trường MSSV 3: 20110590 Thời gian làm luận văn: từ: 04/03/2024 Đến 15/06/2024

Chuyên ngành: Công nghệ phần mềm

Tên luận văn: Xây dựng hệ thống mạng xã hội sử dụng công nghệ NET 7.0 và ReactJS

GV hướng dẫn: THS Trương Thị Khánh Dịp

Nhiệm vụ của Luận Văn:

1 Tìm hiểu công nghệ NET 7.0 và ReactJS

2 Xây dựng trang web mạng xã hội

3 Xây dựng app mobile mạng xã hội

4 Hiểu được quy trình và cách thức hoạt động của một sản phẩm thực tế

Đề cương viết luận văn:

CHƯƠNG 1 MỞ ĐẦU

1.1 Lý do chọn đề tài

1.2 Mục đích nghiên cứu đề tài

1.3 Yêu cầu nghiên cứu đề tài

1.4 Cách tiếp cận và phương pháp nghiên cứu

1.5 Phân tích những công trình có liên quan

1.6 Dự kiến kết quả đạt được

CHƯƠNG 2 KHẢO SÁT HIỆN TRẠNG

CHƯƠNG 3 CƠ SỞ LÝ THUYẾT

CHƯƠNG 4 PHÂN TÍCH VÀ THIẾT KẾ PHẦN MỀM

4.1 GIỚI THIỆU

Trang 7

4.1.1 Mục đích tài liệu

4.1.2 Thông tin chung

4.2 TỔNG QUAN

4.2.1 Sơ đồ tổng quan Database Diagram

4.2.2 Sơ đồ use case

4.2.3 Danh sách các chức năng

4.2.4 Các yêu cầu phi chức năng

4.2.5 Các giả thiết, ràng buộc và rủi ro

4.3 ĐẶC TẢ CÁC CHỨC NĂNG

CHƯƠNG 5 CÀI ĐẶT VÀ KIỂM THỬ

CHƯƠNG 6 KẾT LUẬN

Tài liệu tham khảo

KẾ HOẠCH THỰC HIỆN

1 04/03/2024 -

10/03/2024

Tiếp nhận đề tài, tìm hiểu các nghiệp vụ để xây dựng đề tài

Hiểu được các trang mạng xã hội cần những chức năng cơ bản gì và các công cụ để thực hiện các chức năng đó

2 11/03/2024 -

17/03/2024

Tìm hiểu và thiết kế tabase cho dự án một cách hợp lý

da-Biết được một trang mạng xã hội thì cần những table nào để lưu trữ dữ liệu và quan hệ giữa các bảng với nhau

3 18/03/2024 -

24/03/2024

Liệt kê các chức năng và

vẽ lược đồ hoạt động cho các chức năng

Liệt kê các chức năng và sắp xếp độ khó của các chức năng để hình dung trình tự thực hiện sao cho hiệu quả Vẽ lược đồ để xác định luồng chạy hiệu quả cho các chức năng

Trang 8

5 01/04/2024 -

07/04/2024

Viết các API, giao diện front end và mobile cần thiết cho các chức năng

Các chức năng thực hiện: Đăng nhập, đăng

ký, quên mật khẩu, Xem bài viết và bài share

6 08/04/2024 -

14/04/2024

Các chức năng thực hiện: Like bài viết, Tìm kiếm người dùng, Tạo Reel, Tạo bài Share

7 15/04/2024 -

21/04/2024

Các chức năng thực hiện: Bình luận bài viết, Nhắn tin, Đăng bài viết

8 22/04/2024 -

28/04/2024

Các chức năng thực hiện: Kết bạn, Gọi điện

cá nhân, Gọi điện nhóm, Sửa bài viết, Xóa bài viết

9 29/04/2024 -

05/05/2024

Các chức năng thực hiện:Like bài share, Bình luận bài share, Gợi ý kết bạn, Xóa real, Xóa bài share

10 06/05/2024 -

12/05/2024

Kiểm thử và sửa lỗi Viết các test case để kiểm thử các chức năng

của chương trình và sửa lỗi các chức năng phát hiện lỗi

11 13/05/2024 -

19/05/2024

Viết báo cáo Viết các use case, sequence diagram và

activ-ity diagram, mô tả chức năng, cấu trúc và viết các mục cho báo cáo, v.v…

Ngày … tháng … năm 2024

Ý kiến của giảng viên hướng dẫn

(Ký và ghi rõ họ tên)

Ngày … tháng…năm 2024 Người viết đề cương (Ký và ghi rõ họ tên)

Trang 9

MỤC LỤC

CHƯƠNG 1 MỞ ĐẦU 1

1.1 LÝ DO CHỌN ĐỀ TÀI 1

1.2 MỤC ĐÍCH NGHIÊN CỨU CỦA ĐỀ TÀI 1

1.3 YÊU CẦU NGHIÊN CỨU ĐỀ TÀI 2

1.4 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU 2

1.5 PHÂN TÍCH NHỮNG CÔNG TRÌNH CÓ LIÊN QUAN 2

1.6 DỰ KIẾN KẾT QUẢ ĐẠT ĐƯỢC 3

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG 4

2.1 THỰC TRẠNG SỬ DỤNG MẠNG XÃ HỘI TRỰC TUYẾN CỦA VIỆT NAM 2023 4

2.2 KHẢO SÁT INSTAGRAM( HTTPS :// WWW INSTAGRAM COM ) 6

2.3 KHẢO SÁT FACEBOOK( HTTPS :// WWW FACEBOOK COM ) 7

2.4 KHẢO SÁT TIKTOK ( HTTPS :// WWWTIKTOK COM ) 8

CHƯƠNG 3 CƠ SỞ LÝ THUYẾT 10

3.1 NGÔN NGỮ C# 10

3.1.1 GIỚI THIỆU VỀ NGÔN NGỮ C# 10

3.1.2 ĐẶC TRƯNG CỦA NGÔN NGỮ C# 10

3.1.3 ƯU ĐIỂM CỦA C# 11

3.2 ASP.NET CORE 12

3.2.1 LỊCH SỬ HÌNH THÀNH 12

3.2.2 LỊCH SỬ CÁC PHIÊN BẢN VÀ KẾ HOẠCH PHÁT TRIỂN NET CORE 13

3.2.3 NET SỬ DỤNG ĐỂ XÂY DỰNG WEB API 13

Trang 10

3.3.4 NHƯỢC ĐIỂM CỦA TYPESCRIPT LÀ GÌ? 19

3.4 GIỚI THIỆU VỀ REACTJS 20

3.4.1 GIỚI THIỆU 20

3.4.2 REACT LÀ GÌ? 20

CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ PHẦN MỀM 21

4.1 GIỚI THIỆU 21

4.1.1 MỤC ĐÍCH TÀI LIỆU 21

4.1.2 THÔNG TIN CHUNG 21

4.2 TỔNG QUAN 22

4.2.1 SƠ ĐỒ TỔNG QUAN DATABASE DIAGRAM 22

4.2.2 SƠ ĐỒ USE CASE 23

4.2.3 DANH SÁCH CÁC CHỨC NĂNG 24

4.2.4 CÁC YÊU CẦU PHI CHỨC NĂNG 26

4.2.5 CÁC GIẢ THIẾT, RÀNG BUỘC VÀ RỦI RO 26

4.3 ĐẶC TẢ CÁC CHỨC NĂNG 27

4.3.1 ĐĂNG NHẬP 27

4.3.2 ĐĂNG KÝ 31

4.3.3 QUÊN MẬT KHẨU 36

4.3.4 XEM BÀI VIẾT VÀ BÀI SHARE 40

4.3.5 LIKE BÀI VIẾT 45

4.3.6 BÌNH LUẬN BÀI VIẾT 50

4.3.7 NHẮN TIN 55

4.3.8 ĐĂNG BÀI VIẾT 60

4.3.9 KẾT BẠN 64

4.3.10 GỌI ĐIỆN CÁ NHÂN 69

4.3.11 GỌI ĐIỆN NHÓM 73

4.3.12 SỬA BÀI VIẾT 77

4.3.13 XÓA BÀI VIẾT 81

4.3.14 TÌM KIẾM NGƯỜI DÙNG 85

4.3.15 TẠO REEL 89

4.3.16 TẠO BÀI SHARE 93

Trang 11

4.3.17 LIKE BÀI SHARE 97

4.3.18 BÌNH LUẬN BÀI SHARE 101

4.3.19 GỢI Ý KẾT BẠN 105

4.3.20 XÓA BÀI REEL 109

4.3.21 XÓA BÀI SHARE 113

4.3.22 QUẢN LÝ TRANG CÁ NHÂN 117

4.3.23 QUẢN LÝ BÀI VIẾT (ADMIN) 123

4.3.24 QUẢN LÝ NGƯỜI DÙNG (ADMIN) 128

CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 133

5.1 CÔNG CỤ DÙNG TRONG DỰ ÁN 133

5.2 CÀI ĐẶT ỨNG DỤNG 133

5.2 KIẾM THỬ 134

5.2.1 MỤC ĐÍCH 134

5.2.2 PHẠM VI KIỂM THỬ 136

5.3.3 QUY TRÌNH KIỂM THỬ 137

5.3.4 KẾT QUẢ KIỂM THỬ 139

CHƯƠNG 6 KẾT LUẬN 146

6.1 KẾT QUẢ ĐẠT ĐƯỢC 146

6.1.1 VỀ MẶT LÝ THUYẾT 146

6.1.2 VỀ MẶT ỨNG DỤNG 146

6.2 ƯU ĐIỂM 146

6.2.1 GIAO DIỆN THÂN THIỆN VÀ DỄ SỬ DỤNG 146

6.2.2 TÍNH NĂNG ĐA DẠNG VÀ LINH HOẠT 147

6.2.3 BẢO MẬT CAO 147

6.3 NHƯỢC ĐIỂM 147

Trang 12

6.4.2 PHÁT TRIỂN THÊM TÍNH NĂNG MỚI 148

6.4.3 MỞ RỘNG HỖ TRỢ ĐA NỀN TẢNG 148

6.4.4 TĂNG CƯỜNG BẢO MẬT 148

TÀI LIỆU THAM KHẢO 149

Trang 13

PHỤ LỤC HÌNH ẢNH

Hình 2 1 Ảnh minh họa Instagram 6

Hình 2 2 Ảnh minh họa FaceBook 7

Hình 2 3 Ảnh minh họa TikTok 8

Hình 3 1 Lịch sử phiên bản và kế hoạc phát triển NET Core 13

Hình 3 2 Ảnh minh họa 14

Hình 3 3 Ảnh minh họa 17

Hình 4 1 Sơ đồ tổng quan Database Diagram 22

Hình 4 2 Sơ đồ UseCase 23

Hình 4 3 Hình Sequence Diagram Đăng nhập 27

Hình 4 4 Hình Activity Diagram Đăng nhập 28

Hình 4 5 Giao diện đăng nhập (Website) 30

Hình 4 6 Giao diện đăng nhập (Mobile) 30

Hình 4 7 Hình Sequence Diagram Đăng Kí 31

Hình 4 8 Hình Activity Diagram đăng kí 32

Hình 4 9 Giao diện đăng ký (Website) 34

Hình 4 10 Giao diện đăng ký 35

Hình 4 11 Hình Sequence Diagram Quên mật khẩu 36

Hình 4 12 Hình Activity Diagram Quên mật khẩu 37

Hình 4 13 Giao diện quên mật khẩu (Website) 39

Hình 4 14 Giao diện Quên mật khẩu (Mobile) 40

Hình 4 15 Hình Sequence Diagram xem bài viết và bài share 40

Hình 4 16 Hình Activity Diagram xem bài viết và bài share 41

Hình 4 17 Giao diện bài viết (Website) 43

Hình 4 18 Giao diện bài Share (Website) 43

Hình 4 19 Giao diện xem bài viết và bài share (Mobile) 44

Hình 4 20 Hình Sequence Diagram Like bài viết 45

Trang 14

Hình 4 25 Hình Activity Diagram Bình luận bài viết (Create) 51

Hình 4 26 Hình Activity Diagram Bình luận bài viết (Delete) 52

Hình 4 27 Giao diện Bình luận (Mobile) 54

Hình 4 28 Giao diện bình luận (Website) 54

Hình 4 29 Hình Sequence Diagram Nhắn tin 55

Hình 4 30 Hình Activity Diagram Nhắn tin 56

Hình 4 31 Giao diện tin nhắn ngoài trang chủ 58

Hình 4 32 Giao diện tin nhắn 58

Hình 4 33 Giao diện nhắn tin (Mobile) 59

Hình 4 34 Hình Sequence Diagram Đăng bài viết 60

Hình 4 35 Hình Activity Diagram Đăng bài viết 61

Hình 4 36 Giao diện đăng bài viết (Mobile) 63

Hình 4 37 Giao diện Đăng bài viết 63

Hình 4 38 Hình Sequence Diagram Kết bạn 64

Hình 4 39 Hình Activity Diagram Kết bạn 65

Hình 4 40 Giao diện kết bạn 68

Hình 4 41 Hình Sequence Diagram Gọi điện cá nhân 69

Hình 4 42 Hình Activity Diagram Gọi điện cá nhân 70

Hình 4 43 Giao diện gọi điện (Website) 72

Hình 4 44 Giao diện gọi điện (Mobile) 72

Hình 4 45 Hình Sequence Diagram Gọi điện Nhóm 73

Hình 4 46 Hình Activity Diagram Gọi điện Nhóm 74

Hình 4 47 Giao diện gọi video nhóm 76

Hình 4 48 Hình Sequence Diagram Sửa bài viết 77

Hình 4 49 Hình Activity Diagram Sửa bài viết 78

Hình 4 50 Giao diện sửa bài viết (Website) 80

Hình 4 51 Hình Sequence Diagram Xóa bài viết 81

Hình 4 52 Hình Activity Diagram Xóa bài viết 82

Hình 4 53 Giao diện xóa bài viết 84

Hình 4 54 Giao diện xóa bài viết (Website) 84

Hình 4 55 Hình Sequence Diagram Tìm kiếm 85

Hình 4 56 Hình Activity Diagram Tìm kiếm 86

Hình 4 57 Giao diện tìm kiếm (Website) 88

Trang 15

Hình 4 58 Giao diện tìm kiếm (Mobile) 88

Hình 4 59 Hình Sequence Diagram Tạo reel 89

Hình 4 60 Hình Activity Diagram Tạo reel 90

Hình 4 61 Giao diện Tạo Reel (Website) 92

Hình 4 62 Giao diện tạo Reel (Mobile) 92

Hình 4 63 Hình Sequence Diagram Tạo bài share 93

Hình 4 64 Hình Activity Diagram Tạo bài share 94

Hình 4 65 Giao diện tại bài Share (Mobile) 96

Hình 4 66 Giao diện tạo bài Share (Website) 96

Hình 4 67 Hình Sequence Diagram Like bài share 97

Hình 4 68 Hình Activity Diagram Like bài share 98

Hình 4 69 Giao diện like bài share (Website) 100

Hình 4 70 Hình Sequence Diagram Bình luận bài share 101

Hình 4 71 Hình Activity Diagram Bình luận bài share 102

Hình 4 72 Giao diện bình luận bài Share (Website) 104

Hình 4 73 Hình Sequence Diagram Gợi ý kết bạn 105

Hình 4 74 Hình Activity Diagram Gợi ý kết bạn 106

Hình 4 75 Giao diện gợi ý kết bạn 108

Hình 4 76 Giao diện gợi ý kết bạn (Mobile) 108

Hình 4 77 Hình Sequence Diagram Xóa bài reel 109

Hình 4 78 Hình Activity Diagram Xóa bài reel 110

Hình 4 79 Giao diện xóa bài Reel (Website) 112

Hình 4 80 Hình Activity Diagram Xóa bài share 113

Hình 4 81 Hình Activity Diagram Xóa bài share 114

Hình 4 82 Giao diện xóa bài Share (Website) 116

Hình 4 83 Hình Sequence Diagram quản lý trang cá nhân 117

Hình 4 84 Hình Activity Diagram xem trang cá nhân 118

Hình 4 85 Hình Activity Diagram chỉnh sửa trang cá nhân 119

Hình 4 86 Giao diện chỉnh sửa trang cá nhân (Website) 121

Trang 16

Hình 4 91 Hình Activity Diagram xem danh sách bài viết 125

Hình 4 92 Giao diện quản lý bài viết (Admin) 127

Hình 4 93 Hình Sequence Diagram quản lý người dùng (Admin) 128

Hình 4 94 Hình Activity Diagram xem danh sách người dùng (Admin) 129

Hình 4 95 Hình Activity Diagram khóa hoặc mở khóa tài khoản người dùng (Admin) 130

Hình 4 96 Giao diện quản lý người dùng (Admin) 132

Trang 17

PHỤ LỤC BẢNG BIỂU

Bảng 2 1 Thống kê VIETNAM DIGITAL REPORT 2023 4

Bảng 4 1 Bảng thông tin chung 21

Bảng 4 2 Bảng danh sách chức năng 24

Bảng 4 3 Bảng yêu cầu phi chức năng 26

Bảng 4 4 Bảng giả thiết, ràng buộc, rủi ro 26

Bảng 4 5 Bảng Đặc tả Use Case đăng nhập 29

Bảng 4 6 Bảng Đặc tả Use Case đăng kí 33

Bảng 4 7 Bảng Đặc tả Use Case Quên mật khẩu 38

Bảng 4 8 Bảng Đặc tả Use Case xem bài viết và bài share 42

Bảng 4 9 Bảng Đặc tả Use Case Like bài viết 47

Bảng 4 10 Bảng Đặc tả UseCase bình luận bài viết 53

Bảng 4 11 Bảng Đặc tả Use Case nhắn tin 57

Bảng 4 12 Bảng Đặc tả Use Case đăng bài viết 62

Bảng 4 13 Bảng Đặc tả UseCase kết bạn 66

Bảng 4 14 Bảng Đặc tả UseCase Gọi điện cá nhân 71

Bảng 4 15 Bảng Đặc tả UseCase Gọi điện Nhóm 75

Bảng 4 16 Bảng Đặc tả UseCase Sửa bài viết 79

Bảng 4 17 Bảng Đặc tả UseCase Xóa bài viết 83

Bảng 4 18 Bảng Đặc tả UseCase Tìm kiếm 87

Bảng 4 19 Bảng Đặc tả UseCase Tạo Reel 91

Bảng 4 20 Bảng Đặc tả UseCase Tạo bài share 95

Bảng 4 21 Bảng Đặc tả UseCase Like bài Share 99

Bảng 4 22 Bảng Đặc tả UseCase Bình luận bài share 103

Bảng 4 23 Bảng Đặc tả UseCase Gợi ý kết bạn 107

Bảng 4 24 Bảng Đặc tả UseCase Xóa bài reel 111

Bảng 4 25 Bảng Đặc tả UseCase Xóa bài share 115

Trang 18

DANH MỤC TỪ VIẾT TẮT

API (Application Programming Interface): Một tập hợp các quy tắc và công cụ để xây dựng

các ứng dụng phần mềm, quy định cách các thành phần phần mềm tương tác với nhau

DTO (Data Transfer Object): Một đối tượng mang dữ liệu giữa các quá trình để giảm số

lần gọi phương thức

MXH (Mạng Xã Hội): Một hệ thống kết nối và giao tiếp giữa các người dùng trên internet GWI (Global Web Index): Một công ty nghiên cứu thị trường cung cấp thông tin về đối

tượng người dùng trên các thị trường khác nhau

LTS (Long-Term Support): Một phiên bản sản phẩm nhận được hỗ trợ và cập nhật mở rộng

trong một khoảng thời gian dài hơn, thường được sử dụng trong ngữ cảnh phần mềm và phần cứng

IDE (Integrated Development Environment): Một bộ phần mềm kết hợp các công cụ cơ

bản cần thiết cho phát triển phần mềm, bao gồm trình soạn thảo mã, trình gỡ lỗi và các công

cụ tự động hóa xây dựng

JS (JavaScript): Một ngôn ngữ lập trình thường được sử dụng để tạo các hiệu ứng tương

tác trong các trình duyệt web

CSS (Cascading Style Sheets): Một ngôn ngữ định kiểu dùng để mô tả việc trình bày của

một tài liệu được viết bằng HTML hoặc XML

JSX (JavaScript XML): Một phần mở rộng cú pháp cho JavaScript thường được sử dụng

với React để mô tả giao diện người dùng sẽ trông như thế nào

HTML (HyperText Markup Language): Ngôn ngữ đánh dấu tiêu chuẩn cho các tài liệu

được thiết kế để hiển thị trong một trình duyệt web

DOM (Document Object Model): Một giao diện lập trình cho các tài liệu web Nó đại diện

cho trang để các chương trình có thể thay đổi cấu trúc, kiểu và nội dung của tài liệu

Trang 19

CHƯƠNG 1 MỞ ĐẦU 1.1 LÝ DO CHỌN ĐỀ TÀI

Trong năm 2024, thời đại của Internet và Công nghệ với sự bùng nổ của các trang mạng

xã hội Hầu như mỗi người trong chúng ta đều sử dụng các trang mạng xã hội hằng ngày, hằng giờ nhất là giới trẻ Mạng xã hội giúp con người giải trí, học tập, chia sẻ thông tin, kết bạn, giao lưu và vô vàn các chức năng khác

Việc xây dựng một trang mạng xã hội góp phần xây dựng môi trường tương tác giữa con người với con người trên toàn thế giới Các nền tảng như Facebook, Instagram, Twitter và LinkedIn đã trở thành nơi quen thuộc cho việc chia sẻ thông tin, kết nối mối quan hệ cá nhân và chuyên nghiệp, và tạo ra môi trường kinh doanh và làm việc cho rất nhiều các bạn trẻ

Mạng xã hội còn là một môi trường làm việc cho các bạn trẻ, mạng xã hội tạo ra các Nhà sáng tạo nội dung, các nhà kinh doanh bán hang online, môi trường maketing, các điều này

sẽ thúc đẩy kinh tế thị trường và rất nhiều các lợi ích đi kèm

Chính vì vậy nhóm chúng em đã chọn đề tài “Xây dựng mạng xã hội trực tuyến” để tìm hiểu thêm kiến thức và học hỏi và phát triển kỹ năng trong nhiều lĩnh vực như phát triển web, quản lý dữ liệu, và phân tích người dùng

1.2 MỤC ĐÍCH NGHIÊN CỨU CỦA ĐỀ TÀI

Nhằm tìm hiểu, học hỏi và phát triển kỹ năng trong lĩnh vực phát triển web Ngoài ra còn là cơ hội tự đánh giá và rút ra được kinh nghiệm từ quá trình nghiên cứu từ đó nâng cáo kiếm thức cũng như là kỹ năng của bản thân

Tạo ra một trang mạng xã hội đáp ứng được những nhu cầu cơ bản của 1 trang mạng xã hội thông thường

Trang 20

1.3 YÊU CẦU NGHIÊN CỨU ĐỀ TÀI

Tạo ra một nền tảng mạng xã hội thuận tiện, linh hoạt và hấp dẫn người dùng

- Yêu Cầu Cần Thực Hiện:

+ Phân tích yêu cầu người dùng để đặt ra các tính năng cơ bản và nâng cao

+ Thiết kế giao diện người dùng thân thiện và tương tác

+ Phát triển hệ thống có hiệu suất cao và bảo mật vững chắc

+ Tích hợp các tính năng như tạo hồ sơ cá nhân, chia sẻ nội dung đa dạng, kết bạn, nhóm, và tương tác nhanh chóng

+ Kết nối với các nền tảng khác để mở rộng khả năng lan truyền thông tin

1.4 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU

- Đối tượng nghiên cứu:

+ Đề tài tập trung nghiên cứu về công nghệ nhằm xây dựng website mạng xã hội cụ thể như sau:

+ Tìm hiểu công nghệ ASP NET Core 7 của ngôn ngữ C# để xây dựng API

+ Tìm hiểu về cơ sở dữ liệu SQL Server để lưu trữ dữ liệu

+ Tìm hiểu về React JS để xây dựng giao diện cho người dùng

+ Tìm hiểu về React Native để xây dựng Mobile cho người dùng sử dụng điện thoại + Tìm hiểu về Firebase để xây dựng hệ thống nhắn tin

+ Tìm hiểu ZegoCloud để xây dựng hệ thống gọi điện trực tuyến

+ Tìm hiểu cách thức, công cụ xử lý video trên nền tảng web

- Phạm vi nghiên cứu:

+ Xây dựng website mạng xã hội từ đầu, bao gồm cả phân tích, thiết kế, phát triển, kiểm thử và triển khai

1.5 PHÂN TÍCH NHỮNG CÔNG TRÌNH CÓ LIÊN QUAN

Hiện nay có rất nhiều các trang mạng xã hội đã được xây dựng và công bố Hầu hết các trang mạng xã hội đều có các chức năng cơ bản giống nhau nhưng mỗi trang đều có những khác biệt, ưu điểm, nhược điểm khác nhau

Trang 21

1.6 DỰ KIẾN KẾT QUẢ ĐẠT ĐƯỢC

Sau khi hoàn thành dự án nhóm có thể nắm rõ được thành phần, cấu trúc, cách thức hoạt động của các công nghệ: ASP NET Core 7, SQL Server, ReactJS, React Native

Dưới sự giúp đỡ của quý thầy cô, nhóm cũng sẽ hiểu hơn về các yêu cầu của một dự án xây dựng mạng xã hội

Ngoài các công nghệ chính thì nhóm cũng sẽ hiểu biết thêm được nhiều công nghệ hỗ trợ như ZegoCLoud, Firebase …

Trang 22

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG 2.1 THỰC TRẠNG SỬ DỤNG MẠNG XÃ HỘI TRỰC TUYẾN CỦA VIỆT NAM

2023

Tổng quan tình hình Digital tại Việt Nam từ năm 2022 – 2023

Bảng 2 1 Thống kê VIETNAM DIGITAL REPORT 2023

Thay đổi user MXH so với năm trước Giảm 9% Tăng 6.9%

Thay đổi số lượng thiết bị so với năm Tăng 3.6% Giảm 0.3%

trướctrung bình môi người dân sở hữu 1.64 thiết bị 1.58 thiết bị

(Trích theo VIETNAM DIGITAL REPORT 2023)

Theo We Are Social, số lượng người dùng mạng xã hội Việt Nam vào tháng 1 năm 2023

sẽ là 70 triệu người, thấp hơn mức 76,95 triệu người vào năm 2022

Tuy nhiên, điều này không cho thấy rằng số lượng người dùng mạng xã hội tại Việt Nam

đã giảm Điều này chủ yếu là do các nguồn thống kê của We Are Social đã điều chỉnh dữ liệu rất nhiều trước ngày 1 tháng 1 năm 2023

Ngoài ra, We Are Social tuyên bố rằng sử dụng mạng xã hội không giảm rõ rệt, theo các thống kê từ GWI và data AI Hầu hết các quốc gia bao gồm cả Việt Nam vẫn đang sử dụng mạng xã hội

Trang 23

Tại Việt Nam, có 64.4 triệu người trong độ tuổi từ 18 tuổi trở lên đang sử dụng các nền tảng mạng xã hội, chiếm 89% tổng dân số từ 18 tuổi vào thời điểm đó

Ngoài ra, tính đến tháng 1 năm 2023, 89.8% người dùng Internet tại Việt Nam—không phân biệt tuổi đã sử dụng ít nhất một phương tiện truyền thông xã hội Trong số những người sử dụng mạng xã hội, 50.6% là nữ và 49.4% là nam

Sau đây là một số thống kê khác về sử dụng mạng xã hội ở Việt Nam:

- Năm nền tảng mạng xã hội được sử dụng nhiều nhất ở Việt Nam bao gồm Instagram (55.4%), Zalo (90.1%), TikTok (77.5%), Facebook Messenger (77%) và Facebook (91.6%)

- Facebook là nền tảng được yêu thích nhất của 34.4% người dùng mạng xã hội, trong khi Zalo và Tiktok chiếm 21.3% và 20.3%

- Năm nền tảng MXH có lưu lượng truy cập website cao nhất tại Việt Nam là Facebook (66.79%), Twitter (9.52%), YouTube (9.08%), Instagram (5.02%) và Pinterest (4.58%)

Trang 24

2.2 KHẢO SÁT INSTAGRAM(https://www.instagram.com)

Instagram – Mạng xã hội đăng tải hình ảnh

Hình 2 1 Ảnh minh họa Instagram

Đặc điểm:

- Instagram, một trong những nền tảng mạng xã hội phổ biến nhất trên thế giới, ưu tiên

chia sẻ hình ảnh và video ngắn

- Meta Platforms, Inc sở hữu nền tảng này., trước đây là Facebook, đã trở thành một phần

quan trọng trong cuộc sống hàng ngày của hàng tỷ người dùng trên toàn cầu

Tính năng:

- Instagram cung cấp một loạt các tính năng đa dạng, bao gồm chia sẻ ảnh và video,

Stories, IGTV, Reels, và Shopping

- Giao diện người dùng thân thiện, tối ưu cho trải nghiệm di động, với khả năng tương

tác cao qua nút thích, bình luận, và chia sẻ

Đánh giá tính năng: 9/10

- Instagram mang lại trải nghiệm người dùng tốt với các tính năng sáng tạo và nền tảng

mạnh mẽ cho các doanh nghiệp và người sáng tạo nội dung

Trang 25

Hạn chế:

- Instagram có thể gặp vấn đề với quyền riêng tư và an toàn trực tuyến, đặc biệt là với

việc chia sẻ thông tin cá nhân và bảo vệ trẻ em

2.3 KHẢO SÁT FACEBOOK(https://www.facebook.com)

Facebook – Mạng xã hội lớn nhất toàn cầu

Hình 2 2 Ảnh minh họa FaceBook

Đặc điểm:

- Facebook là một trong những mạng xã hội lớn nhất và phổ biến nhất trên thế giới, được

sáng lập bởi Mark Zuckerberg

- Nền tảng này cung cấp không chỉ chức năng chia sẻ hình ảnh và video mà còn cho phép

Trang 26

- Tính năng Live Stream cho phép người dùng truyền trực tiếp và tương tác với người

xem

- Quảng cáo và chế độ kinh doanh cho doanh nghiệp

Đánh giá tính năng: 8.5/10

- Mặc dù Facebook vẫn rất phổ biến với các tính năng sáng tạo, nhưng có một số vấn đề

về quyền riêng tư có thể ảnh hưởng đến trải nghiệm người dùng

Hạn chế:

- Facebook đã phải đối mặt với nhiều câu hỏi về quyền riêng tư và an toàn internet, đặc

biệt là về việc quản lý dữ liệu người dùng và khả năng lạm dụng dữ liệu cá nhân

2.4 KHẢO SÁT TIKTOK (https://wwwtiktok.com)

Tiktok – Mạng xã hội chia sẻ định dạng video ngắn

Hình 2 3 Ảnh minh họa TikTok

Trang 27

Đặc điểm:

- TikTok, được phát triển bởi công ty Trung Quốc ByteDance, là một nền tảng mạng xã

hội tập trung vào chia sẻ video ngắn

- Nổi tiếng với động tác vui nhộn, âm nhạc sôi động và nhanh chóng trở thành một trong

những ứng dụng phổ biến nhất trên toàn cầu, đặc biệt là với đối tượng người dùng trẻ tuổi

Tính năng:

- Chia sẻ video ngắn có độ dài từ 15 giây đến 3 phút

- Âm nhạc và hiệu ứng đặc sắc, giúp tạo nên nhiều nội dung sáng tạo và giải trí

- Công cụ chỉnh sửa video tích hợp và dễ sử dụng

- Live stream, bán hàng

Đánh giá tính năng: 9/10

- TikTok có nhiều tính năng sáng tạo và cơ hội truyền tải ý tưởng qua video ngắn mang

lại trải nghiệm người dùng độc đáo và giải trí

Hạn chế:

- TikTok gây khó chịu về quyền riêng tư và an toàn của người dùng, đặc biệt là những

người trẻ tuổi

Trang 28

CHƯƠNG 3 CƠ SỞ LÝ THUYẾT 3.1 NGÔN NGỮ C#

3.1.1 Giới thiệu về ngôn ngữ C#

C#, một ngôn ngữ lập trình bậc cao được phát triển bởi đội ngũ kỹ sư của Microsoft, một trong những công ty công nghệ mạnh nhất vào những năm 2000 Do được phát triển khá muộn so với các ngôn ngữ lập trình lâu đời khác, C# có thể được coi là ngôn ngữ lập trình hiện đại C# được phát triển trên nền tảng của C++ và Java, hai ngôn ngử mạnh mẽ và lâu đời, và nó hỗ trợ hướng đối tượng chặt chẽ

Mã nguồn của các ứng dụng chạy trên Windows được biên dịch trực tiếp và trở thành

mã thực thi của hệ điều hành Mã nguồn của các ứng dụng dựa trên framework.NET, bao gồm C# và VB.NET, đã được biên dịch thành ngôn ngữ trung gian dùng chung viết tắt được gọi là MSIL Sau đó, loại mã này sẽ được biên dịch bởi Common Language Runtime (CLR)

để nó có thể trở thành mã thực thi của hệ điều hành Các ứng dụng di động trở nên đơn giản

và dễ dàng hơn rất nhiều nhờ các công cụ đắc lực của.NET Framework, giúp C# tạo ra các ứng dụng Windows Form hoặc WPF (Windows Presentation Foundation), phát triển ứng dụng web và xây dựng các ứng dụng game

3.1.2 Đặc trưng của ngôn ngữ C#

- C# là một ngôn ngữ lập trình đơn giản và mạnh mẽ

C#, dựa trên nền tảng, thừa hưởng các ưu điểm của hai loại ngôn ngữ lập trình là C++ và Java Nó loại bỏ một số khía cạnh phức tạp và yếu tố của hai ngôn ngữ này, điều này khiến

nó khá đơn giản và được thêm vào những cú pháp mới và cải tiến

- C# là một ngôn ngữ hiện đại có nhiều tính năng

C# có rất nhiều đặc điểm và tính năng của một ngôn ngữ hiện đại, chẳng hạn như bảo mật

mã nguồn, thu gom bộ nhớ tự động và các kiểu dữ liệu mở rộng C# cũng hỗ trợ việc xử lý ngoại lệ, làm cho nó trở nên hiện đại hơn Ngoài ra, C# được sử dụng trong nhiều lĩnh vực khác nhau, chẳng hạn như phát triển ứng dụng trên thiết bị di động, phát triển trang web, học máy và trí tuệ nhân tạo, phát triển hệ thống đám mây, blockchain và Internet of Things

Trang 29

- C# là ngôn ngữ hướng đối tượng lập trình

Lập trình hướng đối tượng là một phần cụ thể của ngôn ngữ lập trình với bốn đặc điểm: đóng gói (encapsulation), trừu tượng (abstraction), kế thừa (inheritance) và đa hình Tất cả các đặc tính trên đều được hỗ trợ bởi C#, giống như các ngôn ngữ khác

- Ngôn ngữ C# không có nhiều từ khóa

C# có số lượng từ khóa rất nhỏ so với các ngôn ngữ khác, cụ thể là khoảng tám mươi từ Mặc dù có ít từ khóa, nhưng đó không phải là vấn đề đối với C# vì nền tảng sử dụng và lĩnh vực tham gia của nó đa dạng

3.1.3 Ưu điểm của C#

- Do là một ngôn ngữ lập trình có mã nguồn mở, C# có thể được sử dụng miễn phí bởi mọi người và mọi người cũng có thể cùng nhau phát triển, đóng góp cho sự phổ biến và hiện đại của nó

- C# là một ngôn ngữ hoạt động trên nhiều nền tảng, do đó nó có thể biên dịch trên nhiều loại máy tính chạy Windows, Linux hoặc MacOS

- C# cung cấp hiệu suất cao và tốc độ thực thi thông qua việc sử dụng trình biên dịch trung gian—Common Language Runtime (CLR) Ngoài ra, C# có tốc độ phát triển phần mềm nhanh hơn so với một số ngôn ngữ khác hiện có

- C# có thể sử dụng IDE (Intergrated Development Environment) Visual Studio như một text editor, cũng như các plug-in rất mạnh mẽ khác được sử dụng trong NuGet Package Manager Console Ngoài ra, chúng ta cũng có thể sử dụng bất kỳ text editor nào khác

để viết C#, chẳng hạn như Visual Studio Code, Vim hoặc Netbeam, nhưng chúng không mạnh mẽ hoặc đơn giản như Visual Studio

- C# có cấu trúc tương đồng với một số ngôn ngữ lập trình khác, nhưng nó cũng có các

Trang 30

- C# có rất nhiều tài liệu tham khảo và hướng dẫn, và Microsoft, nhà phát triển chính của C#, đã tổ chức nhiều buổi hội thảo để giới thiệu các tính năng mới Ngoài ra, định hướng phát triển ngôn ngữ đã trở nên phổ biến hơn

3.2 ASP.NET CORE

3.2.1 Lịch sử hình thành

Trong nỗ lực hỗ trợ đa nền tảng cho.NET trên Linux và macOS, Microsoft đã công bố.NET Core vào ngày 12 tháng 11 năm 2014 Bắt đầu.Miguel de Icaza, người làm việc cho Microsoft về phát triển phần mềm cho dự án, nói rằng.NET Core sử dụng mô hình phát triển mã nguồn mở thông thường."Phiên bản.NET được thiết kế lại dựa trên phiên bản đơn giản hóa của các thư viện lớp" được gọi là NET Core

Được phát hành vào ngày 27 tháng 6 năm 2016, phiên bản.NET Core 1.0 cho phép sử dụng bộ công cụ Microsoft Visual Studio 2015 Update 3 Vào 7 tháng 3 năm 2017, các phiên bản.NET Core 1.0.4 và.NET Core 1.1.1 được công bố cùng với.NET Core Tools 1.0

và Visual Studio 2017

Ngày 14 tháng 8 năm 2017, Visual Studio 2017 15.3, ASP.NET Core 2.0 và Entity Framework Core 2.0 đã được phát hành cùng với phiên bản.NET Core 2.0 Phiên bản đầu tiên NET Core 2.1, cùng với phiên bản Hỗ trợ dài hạn LTS 2.1.30, được phát hành vào ngày 30 tháng 5 năm 2018 Ngày 4 tháng 12 năm 2018 là ngày phát hành phiên bản.NET Core 2.2

Trang 31

3.2.2 Lịch sử các phiên bản và kế hoạch phát triển NET Core

Hình 3 1 Lịch sử phiên bản và kế hoạc phát triển NET Core

3.2.3 NET sử dụng để xây dựng web API

Web API có thể tiếp cận nhiều khách hàng, từ trình duyệt và thiết bị di động, vì nó hỗ trợ tích hợp nhiều định dạng thương lượng nội dung và dữ liệu

Mô hình ràng buộc tự động chuyển dữ liệu từ các yêu cầu HTTP đến các tham số phương thức hành động

Đối với cả máy chủ và máy khách, xác thực mẫu tự động được thực hiện

3.2.4 Ưu điểm của NET

- Một số kiến trúc của.NET so với.NET Core đã được thay đổi và.NET Framework nên giảm kích thước module

- Framework.NET sử dụng các yếu tố Nuget Packages thay vì nền tảng system.web.dll

- Nuget Packages cần thiết cho phép nhà phát triển tối ưu hóa ứng dụng của họ

- Những ứng dụng web dựa trên nền tảng.NET sẽ ít tiêu hao dung lượng bộ nhớ, được bảo vệ chặt chẽ, hoạt động tốt và ổn định, tốc độ thực thi nhanh và hiệu năng hoạt động

Trang 32

- Có khả năng kết hợp các khuôn khổ phía người dùng hiện đại và các xu hướng phát triển

- Dependency Injection (DI) là một phương pháp lập trình được sử dụng để giảm sự phụ thuộc giữa các lớp với nhau trong.NET, có thể được sử dụng ngay lập tức mà không cần phải thiết kế hoặc cài đặt

- Cấu hình NET đa dạng, thân thiện và hoạt động tốt trong nhiều môi trường

3.3 NGÔN NGỮ TYPESCRIPT

3.3.1 Giới thiệu về ngôn ngữ TypeScript

Nói về ngôn ngữ lập trình TypeScript, chúng ta phải bắt đầu với JavaScript JavaScript được giới thiệu cho khách hàng JavaScript đã trở thành một công nghệ phía máy chủ mới nổi bật do sự phát triển của Node.js Tuy nhiên, mã JavaScript thường trở nên lộn xộn hơn khi nó phát triển, khiến nó khó duy trì và sử dụng lại

Ngoài ra, việc không sử dụng các tính năng của định hướng đối tượng, kiểm tra kiểu mạnh và kiểm tra lỗi thời gian biên dịch sẽ ngăn JavaScript được sử dụng thành công ở cấp doanh nghiệp như một công nghệ phía máy chủ chính thức Để giải quyết vấn đề này,

Hình 3 2 Ảnh minh họa

Trang 33

TypeScript đã được tạo ra TypeScript là JavaScript được sử dụng để phát triển các ứng dụng Anders Hejlsberg, một nhà thiết kế C++ tại Microsoft, đã phát triển TypeScript, một ngôn ngữ tĩnh được biên dịch tốt, hướng đối tượng TypeScript không chỉ là một ngôn ngữ

mà còn là một bộ dụng cụ TypeScript cũng là một siêu ký tự gõ của TypeScript, được biên dịch thành JavaScript Nói cách khác, TypeScript là JavaScript kết hợp với một số tính năng khác

3.3.2 Các tính năng của TypeScript:

TypeScript chỉ là JavaScript: nó bắt đầu và kết thúc bằng JavaScript bản đánh máy sử dụng JavaScript trong các khối xây dựng cơ bản của chương trình của bạn Do đó, để sử dụng TypeScript, bạn phải biết JavaScript Tất cả mã TypeScript được chuyển thành JavaScript tương tự với mục đích thực thi

TypeScript hỗ trợ các thư viện JS khác: khi được biên dịch, nó có thể được sử dụng từ bất kỳ mã JavaScript nào JavaScript được tạo ra bởi TypeScript có thể sử dụng lại tất cả các khung, công cụ và thư viện JavaScript hiện có TypeScript là tiền đề của JavaScript, và

nó có thể đề cập đến bất kỳ tệp nào.Tất cả các js hợp lệ có thể được đổi tên thành và có thể được sử dụng để biên dịch với các tệp TypeScript khác

TypeScript có tính di động: TypeScript hoạt động trên mọi thiết bị, trình duyệt và hệ điều hành Nó có thể hoạt động trong bất kỳ môi trường nào JavaScript được sử dụng TypeScript, trái ngược với các đối tác của nó, không cần máy ảo chuyên dụng hoặc môi trường thời gian chạy cụ thể để hoạt động

3.3.3 Ưu điểm của ngôn ngữ lập trình TypeScript

3.3.3.1 Mã dễ hiểu

Thông thường khi bạn làm việc trên một đoạn mã, ví dụ như để hiểu đầy đủ về mã chức

Trang 34

- Nó đòi hỏi dữ liệu bên ngoài như thế nào?

- Nó làm gì với các đối số và dữ liệu ngoài này để tạo ra giá trị trả về?

Trong các ngôn ngữ gõ động thì rất khó để trả lời 3 câu hỏi đầu tiên Nếu một hàm nhận được đối số bài viết, chính xác nó là gì? Nó có phải là một đối tượng với một số thuộc tính bài viết? Những thuộc tính chính xác là gì? Bài viết là title hay article.name? Article.title tồn tại không? Còn trong các ngôn ngữ được nhập tĩnh như TypeScript, bạn nhận được câu trả lời cho tất cả các câu hỏi trên ngay lập tức từ IDE và trình biên dịch của bạn Bạn không cần phải xem qua toàn bộ cơ sở mã, làm phiền các đồng nghiệp của bạn hoặc có nguy cơ gặp lỗi trong quá trình sản xuất

3.3.3.2 Dễ dàng và nhanh thực hiện hơn

Quy trình làm việc sẽ như sau khi bạn cần tạo một thành phần hoặc tính năng mới:

- Khởi động lại hàm thành phần, xây dựng các đối số hàm tạo và viết mã còn lại

- Đoán xem nó sẽ bao gồm dữ liệu bên ngoài hoặc tinh vi như người dùng hoặc bài viết, sau đó giữ nó trong bộ nhớ riêng của bạn và sử dụng nó trong mã

- Đặt thành phần vào ứng dụng của bạn và thêm cụ

- Kiểm tra nó bằng tay hoặc bằng các bài kiểm tra đơn vị để đảm bảo rằng nó nhận được các đạo cụ cần thiết và nó hoạt động tốt

- Hãy xem lại mã của bạn và thử tìm hiểu xem điều gì đã sai, sau đó sửa và kiểm tra lại

Trang 35

Hình 3 3 Ảnh minh họa

Nó cũng tương tự trong TypeScript, nhưng dễ dàng hơn và nhanh hơn:

- Nếu nó yêu cầu bất kỳ dữ liệu ngoại vi hoặc bên ngoài, hoặc xem xét giao diện và

sử dụng một phần hoặc tất cả chúng

- Thêm thành phần vào ứng dụng của bạn và chuyển đạo cụ

- Mọi thứ sẽ hoàn hảo nếu các typedef của người gọi và callee được khớp chính xác

Do đó, việc viết mã bằng TypeScript sẽ dễ đọc hơn và ít lỗi hơn

3.3.3.3 Dễ dàng tái cấu trúc

Khi bạn lập trình, thường có rất nhiều thứ bạn muốn sửa lại, nhưng bạn thường ngại thay đổi chúng vì chúng chạm vào quá nhiều tập tin Tuy nhiên, khi bạn viết mã bằng TypeScript, bạn chỉ cần cấu trúc lại những điều trên bằng một cú nhấp chuột của lệnh đổi tên biểu tượng trong IDE của mình Với các ngôn ngữ được nhập động, việc sử dụng "Search & Replace" bằng RegExp là cách tốt nhất để tái cấu trúc nhiều tệp cùng một lúc Tuy nhiên, "Search &

Trang 36

và "Rename Symbol" TypeScript sẽ hỗ trợ bạn nếu bạn muốn cải thiện hệ thống lập trình của mình, thay đổi tên các thành phần, thay đổi đối tượng người dùng hoặc xóa các thuộc tính không dùng Trong trường hợp mã của bạn có bất kỳ kiểu không khớp nào sau khi cấu trúc, TypeScript sẽ tìm ra tất cả các cách sử dụng bit được cấu trúc lại, đổi tên nó và báo cáo một lỗi biên dịch

3.3.3.4 Ít lỗi

Với TypeScript, việc viết mã hợp lệ trở nên rất đơn giản Nó sẽ giúp bạn tiết kiệm khoảng 50% thời gian bằng cách báo lỗi ngay lập tức khi bạn đánh máy, sử dụng một giá trị là null hoặc chuyển đối tượng vào một mảng thay thế Khi TypeScript được biên dịch, gần như hoàn toàn có thể đảm bảo rằng nó vẫn sẽ hoạt động

3.3.3.5 Thử nghiệm boilerplate ít hơn

Bạn không cần phải kiểm tra tất cả các biến nữa khi bạn chắc chắn rằng các biến của mình được truyền vào tất cả các vị trí chính xác Bạn có thể tập trung hơn vào kiểm tra logic nghiệp vụ của ứng dụng hơn là viết bài kiểm tra đơn vị hoặc tích hợp Thử nghiệm ít hơn

có nghĩa là cơ sở mã nhỏ hơn và thời gian phát triển tính năng mới ngắn hơn Do đó, nó ít phức tạp, ít lỗi và dễ bảo trì hơn

3.3.3.6 Dễ hợp nhất mã

Bạn sẽ thấy mã mới có vẻ tốt, các bài kiểm tra đơn vị và mọi thứ đều màu xanh khi một

mã mới được ban hành, giới thiệu Bạn có tin rằng nó sẽ hoạt động tốt trong tương lai không? Điều gì xảy ra nếu bài kiểm tra đơn vị không phù hợp?

Nếu bạn sử dụng TypeScript trong chuỗi công cụ của mình, nó sẽ cung cấp cho bạn một thử nghiệm bảo đảm bổ sung: thử nghiệm biên dịch typedes Để chắc chắn rằng mã mới của bạn có thể hoạt động tốt, hãy kiểm tra biên dịch Typedef TypeScript tăng tốc độ xem xét và hợp nhất quá trình giới thiệu của bạn, khiến các nhà phát triển khác tin tưởng

Trang 37

3.3.3.7 Giúp nhà phát triển có quy trình làm việc chính xác

Khi bạn viết mã bằng các ngôn ngữ nhập tĩnh hoặc sử dụng quy trình mã hoá chính xác, bạn phải suy nghĩ về loại dữ liệu bạn dự định sử dụng sau đó Ví dụ, việc phát triển một thuật toán đòi hỏi phải có lý thuyết trước khi thực hiện nó, hoặc việc thực hiện TDD đòi hỏi phải suy nghĩ về cách mã của bạn sẽ hoạt động trong thực tế Viết dưới dạng thử nghiệm

dữ liệu sẽ được nhận và tạo, sau đó triển khai mã thực tế Điều đó cũng đúng với TypeScript TypeScript tạo điều kiện thuận lợi cho việc xem xét giao diện mã trước khi triển khai nội

bộ

3.3.4 Nhược điểm của TypeScript là gì?

3.3.4.1 Yêu cầu biên dịch

Với TypeScript, bạn sẽ phải biên dịch trước mỗi tệp.Trước khi chạy chúng trên Node.js, hãy xem xét ts Nó sẽ không tốn kém cho ứng dụng Node.js của bạn, mặc dù bạn chắc chắn

có thể thực hiện điều đó với thiết lập phát triển và xây dựng tốt Các lập trình viên biên dịch

JS trong môi trường Frontend Có cần hỗ trợ cho các trình duyệt cũ? Các tính năng của ES7? CSS trong JS? Đối với tất cả những điều này, TypeScript được biên dịch giống như Babel và cú pháp của JS, bao gồm cả ES7 và JSX Đưa TypeScript vào dự án frontend thì thiết lập bản dựng hầu như không cần thiết Đưa TypeScript vào dự án frontend thì hầu như không mất chi phí nào cho thiết lập bản dựng

3.3.4.2 Khó khăn trong thiết lập

Ví dụ là: Sự khác biệt giữa ứng dụng Next.js và ứng dụng Next.js trong TypeScript là gì? Trong trường hợp thứ hai, bạn cần làm cho máy chủ Node.js, webpack và trình chạy thử nghiệm jest của bạn hoạt động với TypeScript Ngoài ra, bất cứ khi nào bạn thêm một

Trang 38

3.4 GIỚI THIỆU VỀ REACTJS

3.4.1 Giới thiệu

Trong những năm gần đây, React.js là một thư viện JavaScript đang trở nên phổ biến hơn với các ứng dụng một trang Mặc dù các framework khác tập trung vào một mô hình MVC hoàn thiện, nhưng React nổi bật vì nó đơn giản và dễ kết hợp với các thư viện JavaS-cript khác Mặc dù AngularJS là một framework cho phép nhúng code javasscript vào code html thông qua các đặc điểm như ng-model và ng-repeat, nhưng React là một tài liệu cho phép nhúng code html vào code javascript thông qua JSX Điều này cho phép bạn dễ dàng lồng các đoạn HTML vào JS.Tích hợp javascript và HTML vào JSX làm cho các thành phần dễ hiểu hơn

3.4.2 React là gì?

React, một thư viện giao diện người dùng (UI) được phát triển tại Facebook, hỗ trợ việc xây dựng các thành phần giao diện người dùng có trạng thái, tương tác và có thể sử dụng lại Trong quá trình sản xuất, React được sử dụng trên Facebook và www.instagram.com được viết hoàn toàn trên React

Một đặc điểm hấp dẫn của React là thư viện này có thể kết nối với nhau và hoạt động trên phía client cũng như trên server React xem xét sự thay đổi giữa các giá trị của lần render này và cập nhật ít thay đổi nhất trên DOM

Trang 39

CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ PHẦN MỀM

4.1 GIỚI THIỆU

4.1.1 Mục đích tài liệu

- Tài liệu mô tả và phác thảo yêu cầu của người dùng cuối Giúp nhóm xác định đúng và

đủ yêu cầu

- Tài liệu này là cơ sở và đầu vào cho các quá trình:

- Tập hợp, phân tích yêu cầu, đưa ra đặc tả yêu cầu phần mềm

- Phân tích, thiết kế và lập trình

4.1.2 Thông tin chung

Bảng 4 1 Bảng thông tin chung

1 Hiện trạng Hiện tại, chưa có hệ thống mạng xã hội nào đáp ứng đầy đủ

các nhu cầu của người dùng mục tiêu Các nền tảng hiện có còn thiếu một số tính năng cơ bản hoặc không tối ưu về mặt trải nghiệm người dùng Người dùng đang tìm kiếm một nền tảng mới, linh hoạt hơn và có thể tùy chỉnh theo nhu cầu cá nhân

Trang 40

4.2 TỔNG QUAN

4.2.1 Sơ đồ tổng quan Database Diagram

Hình 4 1 Sơ đồ tổng quan Database Diagram

Định dạng
Số trang	168
Dung lượng	14,6 MB