đồ án xây dựng website diễn đàn cho lập trình viên

Gồm 3 role chính: Member, Moderator và AdminBảng 3.1 Bảng mô tả usecase STT Tên chức năng 1 Xem bài viết Guest Khách có thể xem các bài viết trên diễn đàn bằng cách truy cập trang chủ củ

ĐẠ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

BÁO CÁO ĐỒ ÁN 2 XÂY DỰNG WEBSITE DIỄN ĐÀN

CHO LẬP TRÌNH VIÊN

Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến

Sinh viên thực hiện:

20522101 – Phan Thanh Tú

20522110 – Hoàng Đình Anh Tuấn

ĐẠ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

BÁO CÁO ĐỒ ÁN 2 XÂY DỰNG WEBSITE DIỄN ĐÀN

CHO LẬP TRÌNH VIÊN

Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến

Sinh viên thực hiện:

20522101 – Phan Thanh Tú

20522110 – Hoàng Đình Anh Tuấn

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

Tp.HCM, ngày tháng năm 2023

Giảng viên hướng dẫn

LỜI CẢM ƠN

Trước hết, nhóm chúng em xin gửi lời cảm ơn đến Trường Đại học Côngnghệ thông tin – Đại học Quốc gia TP.HCM và các thầy cô là giảng viên của khoaCông nghệ phần mềm đã tạo điều kiện để chúng em hoàn thành đồ án môn học –Xây dựng Website diễn đàn cho Lập trình viên

Chúng em xin gửi lời cảm ơn chân thành và sâu sắc đến cô Trần Thị HồngYến là giảng viên hướng dẫn trực tiếp và trang bị cho chúng em có những kiến thứccăn bản vững chắc để thực hiện đồ án này

Trong khoảng thời gian thực hiện đồ án, nhóm chúng em đã học hỏi thêmđược nhiều kiến thức, kinh nghiệm, biết được thêm về nhiều công nghệ mới Chúng

em đã vận dụng những kiến thức nền tảng được tích lũy đồng thời kết hợp với việchọc hỏi và nghiên cứu những kiến thức mới Từ đó, chúng em vận dụng tối đanhững gì đã được học để hoàn thành báo cáo đồ án này

Tuy nhiên, trong quá trình thực hiện, chúng em không tránh khỏi còn cónhững thiếu sót Chính vì vậy, chúng em rất mong nhận được góp ý từ phía thầy, cônhằm hoàn thiện những kiến thức, kỹ năng và là hành trang để chúng em thực hiệntiếp các đề tài khác trong tương lai

Xin chân thành cảm ơn cô!

Tp.HCM, ngày tháng năm 2023

Sinh viên thực hiện

Hoàng Đình Anh Tuấn - Phan Thanh Tú

MỤC LỤC

DANH MỤC HÌNH ẢNH 9

DANH MỤC BẢNG 11

TÓM TẮT ĐỒ ÁN 13

Chương 1 TỔNG QUAN ĐỒ ÁN 15

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

1.2 Mục đích 16

1.3 Đối tượng 16

1.4 Phạm vi nghiên cứu 16

1.5 Tổng quan về đồ án 17

1.5.1 Tên đồ án 17

1.5.2 Quy trình thực hiện đồ án 17

1.5.3 Link 18

Chương 2 CƠ SỞ LÝ THUYẾT 19

2.1 TypeScript 19

2.1.1 Tổng quan về TypeScript 19

2.1.2 Ưu điểm 20

2.1.3 Nhược điểm 21

2.2 NextJS 21

2.2.1 Giới thiệu về NextJS 21

2.2.2 Ưu điểm 22

2.2.3 Nhược điểm 22

2.3 NodeJS 23

2.3.2 Ưu điểm 23

2.3.3 Nhược điểm 24

2.4 Docker và Docker compose 24

2.4.1 Docker 24

2.4.2 Docker compose 25

2.5 MongoDB 27

2.5.1 Giới thiệu về MongoDB 27

2.5.2 Ưu điểm 28

2.5.3 Nhược điểm 28

Chương 3 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 29

3.1 Kiến trúc tổng quan 29

3.2 Kiến trúc chi tiết phía server 30

3.3 Yêu cầu chức năng 31

3.3.1 Usecase diagram 31

3.3.2 Mô tả chi tiết các usecase 33

3.3.2.1 Xem bài viết 33

3.3.2.2 Viết bình luận 34

3.3.2.3 Tương tác 34

3.3.2.4 Follow 35

3.3.2.5 Thêm sản chat 35

3.3.2.6 Tạo bài viết 35

3.3.2.7 Tham gia cộng đồng 36

3.3.2.8 Tạo cộng đồng 36

3.3.2.9 Run code online 37

3.3.2.10 Live share 37

3.3.2.11 Quản lý người dùng 38

3.3.2.12 Quản lý nội dung 38

3.3.2.13 Xử lý vi phạm 38

3.3.2.14 Quản lý nội dung cộng đồng 39

3.3.2.15 Quản lý thành viên trong cộng đồng 39

3.3.2.16 Xử lý vi phạm trong cộng đồng 40

3.3.3 Một vài activity diagram 41

3.3.3.1 Tạo post mới 41

3.3.3.2 Compile code online 41

3.3.3.3 Chat 42

3.3.3.4 Cập nhật thông tin người dùng 42

3.4 Thiết kế cơ sở dữ liệu 43

3.4.1 Database schema 43

3.4.2 Mô tả chi tiết các bảng 46

3.4.2.1 Bảng User 46

3.4.2.2 Bảng follow 47

3.4.2.3 Bảng posts 47

3.4.2.4 Bảng communities 48

3.4.2.5 Bảng joined_communities 49

3.4.2.6 Bảng posts_tags 50

3.4.2.7 Bảng tags 50

3.4.2.8 Bảng constraints 50

3.4.2.10 Bảng users_chat_rooms 51

3.4.2.11 Bảng messages 52

3.4.2.12 Bảng live_rooms 53

3.4.2.13 Bảng users_live_rooms 53

3.4.2.14 Bảng notifications 54

3.4.2.15 Bảng social_medias 54

3.4.2.16 Bảng reports 55

Chương 4 XÂY DỰNG ỨNG DỤNG 56

4.1 Màn hình đăng nhập 56

4.2 Màn hình đăng ký 57

4.3 Màn hình feed 58

4.4 Màn hình chi tiết bài viết 59

4.5 Giao diện bình luận 60

4.6 Màn hình cuộc trò chuyện mới 61

4.7 Màn hình chi tiết tin nhắn 62

4.8 Màn hình call 63

4.9 Màn hình tạo mới community 64

4.10 Màn hình community 65

4.11 Màn hình thiết lập community 66

4.12 Màn hình report problem 67

4.13 Màn hình thông báo 68

4.14 Màn hình chỉnh sửa profile 69

4.15 Màn hình online compiler 70

4.16 Màn hình live coding tích hợp chat và voice call 71

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

5.1 Ưu điểm: 72

5.2 Nhược điểm: 72

5.3 Hướng phát triển: 73

TÀI LIỆU THAM KHẢO 75

DANH MỤC HÌNH ẢNH

Hình 2.1 TypeScript 20

Hình 2.2 NextJS 22

Hình 2.3 NodeJS 23

Hình 2.4 Docker 25

Hình 2.5 Docker Compose 26

Hình 2.6 mongoDB 28

Hình 3.1 Kiến trúc tổng quan - Client - Server 29

Hình 3.2 Chi tiết kiến trúc phía server 30

Hình 3.3 Usecase diagram 31

Hình 3.4 Activity diagram tạo bài viết mới 41

Hình 3.5 Activity diagram compile code online 41

Hình 3.6 Activity diagram chat 42

Hình 3.7 Activity diagram cập nhật thông tin người dùng 42

Hình 3.8 Database schema 43

Hình 3.9 Chi tiết database – 1 44

Hình 3.10 Chi tiết database - 2 45

Hình 4.1 Màn hình đăng nhập 56

Hình 4.2 Màn hình đăng ký 57

Hình 4.3 Màn hình feed 58

Hình 4.4 Màn hình chi tiết bài viết 59

Hình 4.5 Màn hình bình luận và đánh giá 60

Hình 4.6 Màn hình cuộc trò chuyện mới 61

Hình 4.7 Màn hình chi tiết tin nhắn 62

Hình 4.8 Màn hình call 63

Hình 4.9 Màn hình tạo mới community 64

Hình 4.10 Màn hình community 65

Hình 4.11 Màn hình thiết lập community 66

Hình 4.12 Màn hình report problem 67

Hình 4.13 Màn hình thông báo 68

Hình 4.14 Màn hình chỉnh sửa profile 69

Hình 4.15 Màn hình online compiler 70

Hình 4.16 Màn hình live coding tích hợp chat và voice call 71

DANH MỤC BẢNG

Bảng 3.1 Bảng mô tả usecase 32

Bảng 3.2 Bảng mô tả usecase xem bài viết 33

Bảng 3.3 Bảng mô tả usecase viết bình luận 34

Bảng 3.4 Bảng mô tả usecase tương tác 34

Bảng 3.5 Bảng mô tả usecase follow 35

Bảng 3.6 Bảng mô tả usecase chat 35

Bảng 3.7 Bảng mô tả usecase tạo bài viết 35

Bảng 3.8 Bảng mô tả usecase tham gia cộng đồng 36

Bảng 3.9 Bảng mô tả usecase tạo cộng đồng 36

Bảng 3.10 Bảng mô tả usecase run code online 37

Bảng 3.11 Bảng mô tả usecase live share 37

Bảng 3.12 Bảng mô tả usecase quản lý người dùng 38

Bảng 3.13 Bảng mô tả usecase quản lý nội dung 38

Bảng 3.14 Bảng mô tả usecase xử lý vi phạm 38

Bảng 3.15 Bảng mô tả usecase quản lý nội dung cộng đồng 39

Bảng 3.16 Bảng mô tả usecase quản lý thành viên trong cộng đồng 39

Bảng 3.17 Bảng mô tả usecase xử lý vi phạm trong cộng đồng 40

Bảng 3.18 User 46

Bảng 3.19 Follow 47

Bảng 3.20 Posts 47

Bảng 3.21 Communities 48

Bảng 3.22 Joined_communities 49

Bảng 3.23 Posts_tags 50

Bảng 3.24 Tags 50

Bảng 3.25 Constraints 50

Bảng 3.26 Chat_rooms 51

Bảng 3.27 Users_chat_rooms 51

Bảng 3.28 Messages 52

Bảng 3.29 Live_rooms 53

Bảng 3.30 Users_live_rooms 53

Bảng 3.31 Notifications 54

Bảng 3.32 Social_medias 54

Bảng 3.33 Reports 55

TÓM TẮT ĐỒ ÁN

Đồ án "Xây dựng website diễn đàn cho lập trình viên" nhằm tạo ra một nềntảng mạng xã hội, nơi mọi người có được cơ hội giao lưu, học hỏi và chia sẻ nhữnghiểu biết, kinh nghiệm của mình

Website được thiết kế nhằm cung cấp một giao diện trực quan và dễ sử dụngcho người dùng Hỗ trợ đầy đủ các chức năng cần có của một mạng xã hội, hơn thếnữa, website còn tích hợp khả năng chạy các dòng lệnh cũng như là cho phép cáclập trình viên có thể code cùng nhau thông qua stream

Trong quá trình sử dụng, người dùng có thể đăng các bài post để nhận lại cáccâu trả lời từ người dùng khác Mỗi lượt tương tác sẽ giúp bài viết đó được hệ thốngđánh giá cao hơn và dễ dàng nhận được sự quan tâm từ cộng đồng người dùng hơn

Nhờ việc lên kế hoạch hiệu quả, phân tích và thiết kế hệ thống rõ ràng, nhóm

đã phát triển thành công website trong thời gian cho phép Một số công nghệ mànhóm sử dụng là NextJS và TypeScript, một framework nổi tiếng trong việc pháttriển các website Server-side Rendering, kết hợp với việc xây dựng phần backendtheo mô hình Microservice, sử dụng NodeJs Framework để xây dựng API cho ứngdụng MongoDB được sử dụng làm hệ quản trị cơ sở dữ liệu

Trong quá trình thực hiện đồ án, nhóm cũng đã tiến hành kiểm thử unittesting song song với việc phát triển, đồng thời triển khai kiểm thử end-to-end test

để đảm bảo sự hoạt động ổn định của ứng dụng này Quan trọng hơn, toàn bộ quátrình kiểm thử đã được tự động hóa bằng cách sử dụng Github Action Điều nàyđồng nghĩa với việc không cần thực hiện kiểm thử một cách thủ công mỗi khi có sựthay đổi trong mã nguồn Thay vào đó, Github Action tự động kích hoạt và thựchiện các bước kiểm thử mỗi khi có sự thay đổi trong mã nguồn của ứng dụng, đảmbảo tính ổn định và chất lượng của ứng dụng được theo dõi và duy trì một cách tựđộng và hiệu quả

Báo cáo này gồm 75 trang và được chia thành 5 chương chính:

Chương 1 nhóm mở đầu với việc giới thiệu đề tài Trong chương này sẽ nêu

lên các vấn đề như lý do chọn đề tài, mục đích nghiên cứu, đối tượng sử dụng,phạm vi nghiên cứu và sau cùng là tổng quan về đồ án với các thông tin như tên đồ

án, quy trình thực hiện và cuối cùng đó là các đường dẫn có liên quan

Chương 2 tập trung vào việc khái quát cơ sở lý thuyết với nội dung tập trung

vào các công nghệ được nhóm sử dụng như TypeScript, NextJS, NodeJS, Docker vàDocker-compose, MongoDB

Chương 3 sẽ đề cập đến quá trình phân tích và thiết kế hệ thống của nhóm

chúng em Chương này sẽ phân tích các phần như kiến trúc tổng quan, kiến trúc chitiết phía server, các yêu cầu chức năng (các chức năng của hệ thống sẽ được làm rõvới sơ đồ usecase, mô tả chi tiết cho từng usecase và cuối cùng đó là một vàiactivity diagram) và thiết kế cơ sở dữ liệu (bao gồm database schema và mô tả chitiết cho các bảng trong database)

Chương 4 tập trung và việc thiết kế và xây dựng ứng dụng, cung cấp một cái

nhìn tổng quan về giao diện trong ứng dụng và giới thiệu chi tiết các màn hình đượcxây dựng

Chương 5 là phần kết luận của dự án Phần này sẽ nếu lên các ưu điểm,

nhược điểm của dự án và cuối cùng là các đề xuất phát triển dự án trong tương lai

Chương 1 TỔNG QUAN ĐỒ ÁN

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

Các lĩnh vực, ngành nghề liên quan tới công nghệ thông tin, khoa học máytính đang phát triển hết sức mạnh mẽ trong suốt nhiều năm nay Tuy nhiên, trongthời gian gần đây, làn sóng sa thải từ các gã khổng lồ công nghệ (như Google, Meta,Amazon, ), các doanh nghiệp từ phương Tây đã lan tỏa ra khắp thế giới, trong đó

có cả Việt Nam Có rất nhiều lý do dẫn đến sự việc này Dịch Covid-19, các công tycông nghệ đã hưởng lợi từ sự bùng nổ về chi tiêu trực tuyến và làm việc từ xa, do

đó, họ cũng đã thực hiện cái gọi là “over-hiring” - tuyển quá nhiều nhân sự Trongnăm 2023, với sự tăng trưởng đáng thất vọng, các doanh nghiệp này bắt đầu sa thảihàng loạt nhân sự

Vấn đề này không phải là một chiều, lý do không chỉ nằm ở phía công ty, màcòn nằm chính ở phía các lập trình viên, các kỹ sư công nghệ thông tin Lý do làmột bộ phận trong cộng đồng này chưa có đủ kiến thức, kỹ năng và kinh nghiệmlàm việc Bằng chứng là những nhân sự cấp cao, chất lượng vẫn đang được tuyểndụng rầm rộ Tuy nhiên, phần còn lại - những sinh viên mới ra trường, hay nhữngngười chưa có nhiều kinh nghiệm, thường khá chật vật khi tìm kiếm một công việctrong lĩnh vực này Nếu như trước đây, khi một sinh viên vừa ra trường và bật chế

độ “Open to work” - sẵn sàng làm việc ở trên nền tảng LinkedIn, thì lập tức có rấtnhiều HR (quản trị nhân sự) liên hệ để trao đổi về công việc, thì hiện nay họ đaphần phải tự tìm công việc cho mình là chính

Nhận thấy lập trình viên ở khắp thế giới nói chung và Việt Nam nói riêngđang cần trau dồi bản thân hơn nữa, nên nhóm quyết định xây dựng một nền tảngmạng xã hội, hay diễn đàn dành cho cộng đồng lập trình viên Thông qua nền tảngnày, mọi người sẽ có cơ hội để giao lưu, học hỏi và chia sẻ những hiểu biết, kinhnghiệm của mình Không chỉ giới hạn về việc phát triển kiến thức chuyên ngành,đây cũng sẽ là nơi mà cộng đồng lập trình viên có thể tìm kiếm những chia sẻ liênquan tới đời sống, xã hội và công việc

 Member: Là những người tham gia nền tảng này Họ có thể vừa đóng vai trò

là thành viên của một diễn đàn, vừa có thể là người lập ra các diễn đàn

 Moderator: Là những người nắm quyền trong việc kiểm soát các diễn đàn

Họ sẽ có nhiệm vụ đảm bảo các diễn đàn đi theo một luật lệ hay một bộ quytắc nào đó, cũng như kiểm duyệt nội dung, đồng thời đưa ra hình phạt đối vớinhững người vi phạm

 Admin: Là người quản trị hệ thống, có toàn quyềt quyết định các vấn đề vềtài khoản và quyền của người dùng, đồng thời có nhiệm vụ bảo trì trang web

1.4 Phạm vi nghiên cứu

 Nền tảng hỗ trợ: Triển khai trên website

 Chức năng:

o Member:

 Xem bài viết

 Tạo bài viết

 Viết bình luận

 Tương tác với bài viết (upvote, downvote)

 Chat

 Tham gia cộng đồngTạo cộng đồng

 Tích luỹ điểm đi kèm với hệ thống phần thưởng (trophy)

 Biên dịch code online

o Bước 1: Xác định yêu cầu

 Tiến hành phân tích yêu cầu

 Nghiên cứu và phân tích nhu cầu của các developer về việc tìmkiếm thông tin trên các trang diễn đàn

 Xác định phạm vi và các tính năng cần triển khai trong ứngdụng

 Tham khảo một số nền tảng liên quan: voz.vn, reddit.com,dev.to, stackoverflow.com

o Bước 2: Thiết kế hệ thống

 Vẽ sơ đồ Use-case và các biểu đồ khác để phân tích hệ thống.

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

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

 Thiết kế giao diện người dùng

 Sử dụng MongoDB làm hệ quản trị cơ sở dữ liệu NoSQL

 Tích hợp một số dịch vụ bên thứ ba để hoàn thiện hệ thống

o Bước 4: Kiểm thử

 Sử dụng GitHub Actions để tự động hóa quá trình kiểm thửcho dự án

 Thực hiện unit testing song song quá trình phát triển

 Thực hiện end-to-end testing vào cuối giai đoạn phát triển

o Bước 5: Triển khai

 Triển khai trên dịch vụ Render

 Đảm bảo tích hợp và kết nối với các dịch vụ bên ngoài nhưRecombee và Amazon Web Service

Chương 2 CƠ SỞ LÝ THUYẾT

2.1 TypeScript

2.1.1 Tổng quan về TypeScript

TypeScript là một ngôn ngữ lập trình được phát triển bởi Microsoft Nókhông thực sự là một ngôn ngữ hoàn toàn mới, mà là một phiên bản mở rộng hơn sovới JavaScript đơn thuần

So với JavaScript thông thuần, TypeScript có thêm tính năng static-type(kiểu dữ liệu tĩnh) TypeScript sẽ gợi ý và thông báo lỗi cho đoạn code của chúng

ta, từ đó hạn chế lỗi và đẩy nhanh quá trình phát triển phần mềm

Một trong những tính năng của TypeScript là type inference (suy luận kiểu,hay tự xác định kiểu) Tức là TypeScript sẽ tự động xác định kiểu dữ liệu nếu cóthể Tất nhiên TypeScript cũng hỗ trợ chúng ta khai báo kiểu dữ liệu nếu muốn

Ngoài ra, TypeScript hỗ trợ các tính năng quan trọng khác như kế thừa cáctype, interfaces, giúp tăng tính mô-đun hóa và tái sử dụng mã nguồn

TypeScript cung cấp trình biên dịch (compiler) riêng để chuyển đổi mãnguồn TypeScript thành JavaScript thuần, có thể chạy trên môi trường trình duyệthoặc máy chủ Điều này đảm bảo khả năng tương thích ngược với các phiên bảnJavaScript hiện có và cho phép ta tích hợp TypeScript vào các dự án web sẵn cómột cách dễ dàng

Hình 2.1 TypeScript

2.1.2 Ưu điểm

 Type checking: TypeScript cho phép kiểm tra kiểu dữ liệu tại thời điểm biêndịch, giúp phát hiện lỗi và đưa ra các gợi ý (như gợi ý về các thuộc tính trongobject)

 Type inference: TypeScript sẽ tự động xác định kiểu dữ liệu nếu có thể Tấtnhiên TypeScript cũng hỗ trợ chúng ta khai báo kiểu dữ liệu nếu muốn

 Mô-đun hóa: TypeScript cho phép tạo các mô-đun, chia mã nguồn ra nhữngphần nhỏ hơn, giúp dễ dàng quản lý và tái sử dụng chúng

 Tương thích ngược: Bản chất TypeScript khi biên dịch vẫn là một đoạn codeJavaScript, vậy nên nó có thể đáp ứng được việc tương thích với các phiênbản JavaScript trước đó trên trình duyệt

 Nhiều công cụ hỗ trợ: TypeScript được phát triển bởi chính Microsoft, điềunày đảm bảo nó sẽ được hỗ trợ và cập nhật đều đặn từ Microsoft Đồng thời,TypeScript có một cộng đồng cực đông đảo người sử dụng, nên các tiện ích

và thư viện rất phong phú và đa dạng

2.1.3 Nhược điểm

 Khó hơn khi mới sử dụng: Do TypeScript có cú pháp phức tạp hơnJavaScript, việc thiết lập và bắt đầu một dự án có thể mất thời gian hơn sovới JavaScript

 Nhiều kiến thức mới: Các kiểu dữ liệu và cú pháp trong TypeScript có thể sẽgây khó khăn cho người mới học

 Dung lượng tăng: Vì TypeScript sử dụng kiểu dữ liệu tĩnh, việc khai báokiểu dữ liệu và các thông tin liên quan sẽ làm tăng dung lượng của mã nguồn

so với JavaScript thuần Đồng thời, vì bản chất khi TypeScript biên dịch ra làJavaScript, vậy nên thông thường nó sẽ tốn thêm một khoảng thời gian choviệc này

2.2 NextJS

2.2.1 Giới thiệu về NextJS

Next.js là một framework phát triển web mã nguồn mở dựa trên React, nócung cấp các ứng dụng web dựa trên React với kết xuất phía máy chủ và tạo trangweb tĩnh

Next.js sử dụng kết xuất phía máy chủ (SSR) để render các trang web trướckhi chúng được gửi đến trình duyệt của người dùng Điều này có thể cải thiện đáng

kể tốc độ tải trang, đặc biệt là đối với các trang web có nhiều dữ liệu hoặc hình ảnh

Next.js cũng sử dụng các thẻ meta và tiêu đề cho các trang web tĩnh, giúp cảithiện khả năng SEO Bên cạnh đó, Next.js còn cung cấp một số tính năng giúp việcphát triển và bảo trì ứng dụng web trở nên dễ dàng hơn, chẳng hạn như routing,code splitting và prerendering

Nhìn chung, Next.js là một framework phát triển web mạnh mẽ và linh hoạt

có thể được sử dụng để tạo ra các ứng dụng web hiệu suất cao và thân thiện vớiSEO

Hình 2.2 NextJS

2.2.2 Ưu điểm

 Tăng tốc độ tải trang: SSR có thể cải thiện đáng kể tốc độ tải trang của cácứng dụng web, đặc biệt là đối với các trang web có nhiều dữ liệu hoặc hìnhảnh

 Tăng khả năng SEO: Các thẻ meta và tiêu đề được sử dụng cho các trangweb tĩnh có thể giúp cải thiện khả năng SEO của ứng dụng web

 Dễ dàng phát triển và bảo trì: Next.js cung cấp một số tính năng giúp việcphát triển và bảo trì ứng dụng web trở nên dễ dàng hơn

2.2.3 Nhược điểm

 Có thể khó học: Next.js cung cấp một số tính năng nâng cao có thể khó họcđối với các nhà phát triển mới bắt đầu

 Có thể yêu cầu nhiều tài nguyên: Next.js có thể yêu cầu nhiều tài nguyên hơn

so với các framework phát triển web khác, vì nó sử dụng kết xuất phía máychủ

2.3 NodeJS

2.3.1 Giới thiệu về NodeJS

Node.js là một nền tảng runtime mã nguồn mở, đa nền tảng, được sử dụng đểchạy các ứng dụng web bên ngoài trình duyệt của client Node.js là một môi trườnglập trình phổ biến, được dùng để xây dựng các ứng dụng quy mô lớn cần xử lýlượng request đồng thời lớn

Node.js được xây dựng trên nền tảng V8 JavaScript engine của Google, sửdụng kiến trúc hướng sự kiện (event-driven architecture) và cơ chế I/O không đồng

bộ (non-blocking I/O) Kiến trúc hướng sự kiện giúp Node.js có thể xử lý nhiềurequest đồng thời một cách hiệu quả, trong khi cơ chế I/O không đồng bộ giúp giảmthiểu việc sử dụng tài nguyên hệ thống

Hình 2.3 NodeJS

2.3.2 Ưu điểm

 IO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời

 Sử dụng JavaScript – một ngôn ngữ lập trình dễ học

 Chia sẻ cùng code ở cả phía client và server.

 NPM (Node Package Manager) và module Node đang ngày càng phát triểnmạnh mẽ

 Khó thao tác với cơ sử dữ liệu quan hệ

 Mỗi callback sẽ đi kèm với rất nhiều callback lồng nhau khác

 Cần có kiến thức tốt về JavaScript

 Không phù hợp với các tác vụ đòi hỏi nhiều CPU

2.4 Docker và Docker compose

2.4.1 Docker

Docker là một nền tảng để cung cấp cách để building, deploying và runningứng dụng dễ dàng hơn bằng cách sử dụng các containers (trên nền tảng ảo hóa) Banđầu viết bằng Python, hiện tại đã chuyển sang Golang

Một vài nguyên nhân giúp Docker phát triển nhanh chóng:

 Tính dễ ứng dụng: Docker rất dễ cho mọi người sử dụng từ lập trình viên,sys admin… nó tận dụng lợi thế của container để build, test nhanh chóng Cóthể đóng gói ứng dụng trên laptop của họ và chạy trên public cloud, privatecloud… Câu thần chú là “Build once, run anywhere”

 Tốc độ: Docker container rất nhẹ và nhanh, bạn có thể tạo và chạy dockercontainer trong vài giây

 Môi trường chạy và khả năng mở rộng: Bạn có thể chia nhỏ những chứcnăng của ứng dụng thành các container riêng lẻ Ví dụng Database chạy trên

ứng dụng Node.js lại chạy trên một cái khác nữa Với Docker, rất dễ để liênkết các container với nhau để tạo thành một ứng dụng, làm cho nó dễ dàngscale, update các thành phần độc lập với nhau.

Với xu hướng dịch chuyển sang microservices của các hệ thống lớn, Dockerđang làm một thành phần cực kỳ quan trọng, làm cho nó trở thành một phần củanhiều công cụ DevOps

Hình 2.4 Docker

2.4.2 Docker compose

Docker compose là công cụ dùng để định nghĩa và run multi-container choDocker application Với compose bạn sử dụng file YAML để config các servicescho application của bạn Sau đó dùng command để create và run từ những config

đó Sử dụng cũng khá đơn giản chỉ với ba bước:

 Khai báo app’s environment trong Dockerfile.

 Khai báo các services cần thiết để chạy application trong file compose.yml

docker- Run docker-compose up để start và run app

Docker compose có những tính năng chính chính sau:

 Định nghĩa các ứng dụng phức tạp: Docker Compose cho phép bạn địnhnghĩa các ứng dụng Docker phức tạp, bao gồm nhiều dịch vụ giao tiếp vớinhau

 Chạy các ứng dụng dễ dàng: Docker Compose giúp việc chạy các ứng dụngDocker trở nên dễ dàng hơn Chỉ với một câu lệnh, bạn có thể tạo và chạy tất

cả các dịch vụ cần thiết cho ứng dụng

 Quản lý các ứng dụng dễ dàng: Docker Compose giúp việc quản lý các ứngdụng Docker trở nên dễ dàng hơn Bạn có thể dễ dàng bắt đầu, dừng, khởiđộng lại và xóa các ứng dụng …

Hình 2.5 Docker Compose

2.5 MongoDB

2.5.1 Giới thiệu về MongoDB

MongoDB là một database hướng tài liệu (document), một dạng NoSQLdatabase Vì thế, MongoDB sẽ tránh cấu trúc table-based của relational database đểthích ứng với các tài liệu như JSON có một schema rất linh hoạt gọi là BSON.MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi mộtcollection sẽ các các kích cỡ và các document khác nhau Các dữ liệu được lưu trữtrong document kiểu JSON nên truy vấn sẽ rất nhanh

Các tính năng chính:

 Các ad hoc query: hỗ trợ search bằng field, các phép search thông thường,regular expression searches, và range queries

 Indexing: bất kì field nào trong BSON document cũng có thể được index

 Replication: có ý nghĩa là “nhân bản”, là có một phiên bản giống hệt phiênbản đang tồn tại, đang sử dụng Với cơ sở dữ liệu, nhu cầu lưu trữ lớn, đòihỏi cơ sở dữ liệu toàn vẹn, không bị mất mát trước những sự cố ngoài dựđoán là rất cao Vì vậy, người ta nghĩ ra khái niệm “nhân bản”, tạo một phiênbản cơ sở dữ liệu giống hệt cơ sở dữ liệu đang tồn tại, và lưu trữ ở một nơikhác, đề phòng có sự cố

 Aggregation: Các Aggregation operation xử lý các bản ghi dữ liệu và trả vềkết quả đã được tính toán Các phép toán tập hợp nhóm các giá trị từ nhiềuDocument lại với nhau, và có thể thực hiện nhiều phép toán đa dạng trên dữliệu đã được nhóm đó để trả về một kết quả duy nhất Trong SQL, count(*)

và GROUP BY là tương đương với Aggregation trong MongoDB

 Lưu trữ file: MongoDB được dùng như một hệ thống file tận dụng nhữngfunction trên và hoạt động như một cách phân phối qua sharding

 Không có cơ chế transaction (giao dịch) để phục vụ các ứng dụng ngân hàng.

 Dữ liệu lấy RAM làm trọng tâm hoạt động vì vậy khi hoạt động yêu cầu một

bộ nhớ RAM lớn

 Mọi thay đổi về dữ liệu mặc định đều chưa được ghi xuống ổ cứng ngay lậptức vì vậy khả năng bị mất dữ liệu từ nguyên nhân mất điện đột xuất là rấtcao

1.

Chương 3 PHÂN TÍCH THIẾT KẾ HỆ THỐNG

3.1 Kiến trúc tổng quan

Hình 3.7 Kiến trúc tổng quan - Client - Server

Kiến trúc dựa trên mô hình Client – Server, giao tiếp thông qua HTTP,RESTful API Cụ thể hơn, trong kiến trúc này bao gồm:

 Client: người sử dụng diễn đàn trên nền tảng website Ứng dụng được viếtbởi NextJS và TypeScript

 Server: máy chủ của hệ thống được triển khai theo mô hình Microservice.Mỗi service là một container được quản lý bởi docker compose Được viếtbằng NodeJS Framework

 Database: là nơi lưu trữ toàn bộ dữ liệu của hệ thống Sử dụng NoSql làMongoDB

 Mỗi service sẽ là một container độc lập, các service sẽ giao tiếp với nhauthông qua RabbitMQ, và server sẽ giao tiếp với client bằng cách gửi requestthông qua Nginx Reserve Proxy

3.2 Kiến trúc chi tiết phía server

Hình 3.8 Chi tiết kiến trúc phía server

Ở server, hệ thống được thiết với kiến trúc Microservice Trong đó mỗiservice sẽ là một container Website NextJS sẽ giao tiếp với server thông qua HTTPAPI theo chuẩn REST (Representational State Transfer) được quản Cụ thể hơn,phía server bao gồm những thành phần sau:

 Nginx Reverse Proxy: đảm nhận nhiệm vụ định tuyến các yêu cầu đến cácdịch vụ API gateway API gateway sau đó sẽ định tuyến các yêu cầu đến cácdịch vụ microservices cụ thể

 Mỗi service sẽ được xây dựng bằng NodeJS và một mongoDB của riêngservice đó Các service sẽ được container hoá và được quản lý bởi docker-compose Container hóa là một quá trình đóng gói một ứng dụng và tất cảcác phụ thuộc của nó vào một container Khi một dịch vụ được containerhóa, nó trở nên dễ dàng hơn để triển khai và quản lý Container có thể đượctriển khai trên bất kỳ nền tảng nào có hỗ trợ Docker

 Các service sẽ giao tiếp với nhau thông qua RabbitMQ Channel RabbitMQ

là một message broker mã nguồn mở, đa nền tảng, được sử dụng để truyềnthông điệp giữa các ứng dụng RabbitMQ sử dụng giao thức AdvancedMessage Queuing Protocol (AMQP) để giao tiếp giữa các ứng dụng Một vàilợi ích của việc sử dụng RabbitMQ có thể kể đến như: tách biệt các ứngdụng, tăng khả năng mở rộng, tăng khả năng chịu lỗi

3.3 Yêu cầu chức năng

1.1.1 Usecase diagram

Hình 3.9 Usecase diagram

Gồm 3 role chính: Member, Moderator và Admin

Bảng 3.1 Bảng mô tả usecase

STT Tên chức

năng

1 Xem bài viết Guest Khách có thể xem các bài viết trên diễn đàn bằng cách truy

cập trang chủ của diễn đàn Trang bài viết sẽ hiển thị danh sách các bài viết mới nhất Khách có thể nhấp vào nút comment để xem chi tiết bài viết.

2 Viết bình

luận Member

Người dùng có thể viết bình luận cho một bài viết trên diễn đàn bằng cách nhấp vào nút "Bình luận" bên dưới bài viết.

Họ sẽ được yêu cầu nhập nội dung bình luận và nhấn nút

"Gửi" Bình luận của người dùng sẽ được hiển thị dưới dạng một comment.

3 Tương tác Member Người dùng có thể vote để tăng tương tác

hoặc unvote để giảm số lượt tương tác củamột bài viết

4 Follow Member Người dùng có thể follow một bài viết, hay

một người dùng khác

5 Chat Member Member có thể tương tác với người dùng khác

trên diễn đàn bằng cách gửi tin nhắn trực tiếp,hoặc bắt đầu cuộc trò chuyện

6 Tạo bài viết Member Thành viên có thể tạo bài viết trên diễn đàn

bằng cách nhấp vào nút "Post" Thành viên sẽđược yêu cầu nhập tiêu đề, nội dung và cácthông tin khác về bài viết Sau khi hoàn tất,thành viên có thể nhấn nút "Post" để xuất bảnbài viết

7 Tham gia

cộng đồng

Member Guest có thể tham gia cộng đồng bằng cách

tạo tài khoản trên diễn đàn Sau khi tạo tàikhoản, member có thể đăng ký tham gia cáccộng đồng mà họ quan tâm

8 Tạo cộng

đồng Member Member có thể tạo cộng đồng trên diễn đànbằng cách nhập tên cộng đồng, mô tả cộng

đồng và các thông tin khác về cộng đồng

9 Run code

online Member Member có thể chạy code trực tuyến trên diễnđàn bằng cách nhập code vào ô nhập code

Code sẽ được chạy trên máy chủ của diễn đàn

và kết quả sẽ được hiển thị trên màn hình

10 Live share Member Member có thể chia sẻ màn hình của họ trong khi code với

các thành viên khác trong cộng đồng bằng cách sử dụng tính năng Live share.

11 Quản lý nội

dung cộng Moderator Moderator có thể quản lý nội dung cộng đồngbằng cách xem xét các bài viết, bình luận và

thành viên Moderator Moderator có thể quản lý thành viên bằngcách xem xét hồ sơ của thành viên, thay đổi

vai trò của thành viên và xóa thành viên

13 Xử lý vi

phạm trong

community

Moderator Moderator có thể xử lý các vi phạm trong

community bằng cách xóa hoặc sửa nội dung

vi phạm, cảnh cáo hoặc khóa tài khoản củathành viên vi phạm

14 Thống kê số

liệu Admin Admin có thể xem thống kê số liệu của diễnđàn, bao gồm số lượng thành viên, số lượng

bài viết, số lượng bình luận và số lượng truycập

15 Quản lý

người dùng Admin Admin có thể quản lý người dùng trên diễnđàn bằng cách xem xét hồ sơ của người dùng,

thay đổi vai trò của người dùng và xóa ngườidùng

16 Quản lý nội

dung

Admin Admin có thể quản lý nội dung trên diễn đàn

bằng cách xem xét các bài viết, bình luận vàtin nhắn trực tiếp Admin có thể xóa hoặc sửanội dung vi phạm quy tắc diễn đàn

17 Xử lý vi

phạm Admin Admin có thể xử lý các vi phạm trên diễn đànbằng cách xóa hoặc sửa nội dung vi phạm,

cảnh cáo hoặc khóa tài khoản của thành viên

vi phạm

3.3.1 Mô tả chi tiết các usecase

3.3.1.1 Xem bài viết

Bảng 3.2 Bảng mô tả usecase xem bài viết

User Case ID UC_01

Name Xem bài viết

Goal Guest và Member có thể xem bài viết trên diễn đàn

Actors Guest, Member

Pre-condition Bài viết đã được đăng trên diễn đàn

Main flow 1 Guest hoặc Member truy cập trang bài viết

2 Guest hoặc Member xem tiêu đề, nội dung và các thôngtin khác về bài viết

3 Guest hoặc Member có thể bình luận hoặc chia sẻ bàiviết

Alternative flow Bước 1: Nếu Guest hoặc Member không có tài khoản, họ sẽ

được yêu cầu đăng nhập hoặc tạo tài khoản mới.

Bước 3: Nếu Guest hoặc Member không có quyền bình luậnhoặc chia sẻ bài viết, họ sẽ không thể thực hiện các hànhđộng này

Post-condition Guest hoặc Member có thể xem được nội dung của bài viết.Exception

3.3.1.2 Viết bình luận

Bảng 3.3 Bảng mô tả usecase viết bình luận

User Case ID UC_02

Name Viết bình luận

Goal Member có thể viết bình luận về bài viết

Actors Member

Pre-condition Bài viết đã được đăng trên diễn đàn

Main flow 1 Member truy cập trang bài viết

2 Member nhập nội dung bình luận

3 Member nhấn nút "Gửi"

Alternative flow Bước 2: Nếu nội dung bình luận quá dài, hệ thống sẽ yêu

cầu Member nhập lại nội dung ngắn hơn

Bước 3: Nếu Member không có quyền viết bình luận, họ sẽnhận được thông báo lỗi

Post-condition Bình luận được tạo và hiển thị trên trang bài viết

Exception

Nếu Member không có quyền truy cập bài viết, họ sẽ nhậnđược thông báo lỗi

3.3.1.3 Tương tác

Bảng 3.4 Bảng mô tả usecase tương tác

User Case ID UC_03

Name Tương tác

Goal Member có thể tương tác với bài viết trên diễn đàn bằng cách vote

Actors Member

Pre-condition Member đã đăng nhập

Main flow 1 Member truy cập trang bài viết hoặc trang cộng đồng

2 Member chọn bài viết muốn tương tác

3.3.1.4 Follow

Bảng 3.5 Bảng mô tả usecase follow

User Case ID UC_04

Goal Member có thể theo dõi các bài viết, thành viên khác trên diễn đàn

Actors Member

Pre-condition Member đã đăng nhập

Main flow 1 Member truy cập trang hồ sơ của người dùng muốn theo

dõi

2 Member nhấp vào nút "Theo dõi"

Alternative flow None

Post-condition Người dùng/bài viết được theo dõi

Exception Nếu xảy ra lỗi kết nối, hệ thống thông báo và yêu cầu thửlại sau

3.3.1.5 Thêm sản chat

Bảng 3.6 Bảng mô tả usecase chat

User Case ID UC_05

Goal Member có thể trò chuyện trực tiếp với các thành viên khác

trên diễn đànActors Member

Pre-condition Member đã đăng nhập

Main flow 1 Member truy cập trang tin nhắn trực tiếp

2 Member chọn người muốn trò chuyện

3 Member nhập nội dung tin nhắn

4 Member nhấn nút "Gửi"

Alternative flow None

Post-condition Tin nhắn được gửi đến người dùng được chọn

3.3.1.6 Tạo bài viết

Bảng 3.7 Bảng mô tả usecase tạo bài viết

User Case ID UC_06

Name Tạo bài viết

Goal Member có thể tạo bài viết trên diễn đàn

Actors Member

Pre-condition Member đã đăng nhập

Main flow 1 Member truy cập trang tạo bài viết

2 Member nhập tiêu đề và nội dung bài viết

3 Member chọn thêm các tags.

Post-condition Bài viết được tạo và hiển thị trên diễn đàn

Exception Nếu Member không có quyền tạo bài viết, họ sẽ nhận được thông báo lỗi.Nếu hệ thống gặp lỗi, bài viết có thể không được tạo.

3.3.1.7 Tham gia cộng đồng

Bảng 3.8 Bảng mô tả usecase tham gia cộng đồng

User Case ID UC_07

Name Tham gia cộng đồng

Goal Member có thể tham gia các cộng đồng trên diễn đàn

Actors Member

Pre-condition Member đã đăng nhập

Main flow 1 Member truy cập trang cộng đồng

2 Member nhấp vào nút "Tham gia"

Alternative flow None

Post-condition Member tham gia cộng đồng thành công

Exception Nếu xảy ra lỗi kết nối, hệ thống thông báo và yêu cầu thửlại sau

3.3.1.8 Tạo cộng đồng

Bảng 3.9 Bảng mô tả usecase tạo cộng đồng

User Case ID UC_08

Name Tạo cộng đồng

Goal Member có thể tạo cộng đồng trên diễn đàn

Actors Member

Pre-condition Member đã đăng nhập

Main flow 1 Member truy cập trang tạo cộng đồng

2 Member nhập các thông tin cần thiết về cộng đồng

3.3.1.9 Run code online

Bảng 3.10 Bảng mô tả usecase run code online

User Case ID UC_09

Name Run code online

Goal Member có thể chạy code trực tuyến trên diễn đàn

Actors Member

Pre-condition Member đã đăng nhập

Main flow 1 Member truy cập trang chạy code trực tuyến

2 Member nhập code vào ô nhập code

3 Member chọn ngôn ngữ lập trình

4 Member nhấn nút "Chạy"

Alternative flow Nếu code không hợp lệ, hệ thống sẽ hiển thị thông báo lỗi

Nếu ngôn ngữ lập trình không được hỗ trợ, hệ thống sẽ hiểnthị thông báo lỗi

Post-condition Kết quả chạy code được hiển thị

Exception Nếu hệ thống gặp lỗi, kết quả chạy code có thể không được

hiển thị

3.3.1.10 Live share

Bảng 3.11 Bảng mô tả usecase live share

User Case ID UC_10

Name Live Share

Goal Member có thể cộng tác với các thành viên khác trên diễn

đàn thông qua Live ShareActors Member

Pre-condition Member đã đăng nhập

Main flow 1 Member truy cập trang Live Share

2 Member gửi lời mời Live Share cho người dùng khác

3 Người dùng nhận được lời mời Live Share chấp nhận lời mời

4 Hai người dùng bắt đầu cộng tác

Alternative flow Nếu người dùng nhận được lời mời Live Share không chấp

nhận lời mời, lời mời sẽ bị từ chối

Post-condition Hai người dùng có thể cộng tác với nhau thông qua Live

ShareException Nếu Member không có quyền Live Share, họ sẽ nhận được

thông báo lỗi