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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.62 MB, 76 trang )

Trang 1<div class="page_container" data-page="1">

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINHTRƯỜ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 – Hồng Đình Anh Tuấn

</div>Trang 2<div class="page_container" data-page="2">

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINHTRƯỜ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 – Hồng Đình Anh Tuấn

</div>Trang 3<div class="page_container" data-page="3">

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

</div>Trang 4<div class="page_container" data-page="4">

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 hồ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úngem đã 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 để hồ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 hồ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

Hồng Đình Anh Tuấn - Phan Thanh Tú

</div>Trang 6<div class="page_container" data-page="6">

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

</div>Trang 7<div class="page_container" data-page="7">

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

</div>Trang 8<div class="page_container" data-page="8">

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

</div>Trang 10<div class="page_container" data-page="10">

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

</div>Trang 12<div class="page_container" data-page="12">

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

</div>Trang 14<div class="page_container" data-page="14">

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 q 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 q 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, tồn bộ qtrì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:

</div>Trang 15<div class="page_container" data-page="15">

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.

</div>Trang 16<div class="page_container" data-page="16">

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.

</div>Trang 17<div class="page_container" data-page="17">

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.

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

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

</div>Trang 18<div class="page_container" data-page="18">

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

 Live sharing o Moderator:

 Quản lý nội dung cộng đồng Quản lý thành viên

 Xử lý vi phạm trong community Các chức năng của membero Admin:

 Thống kê số liệu

 Quản lý tất cả người dùng Quản lý tất cả bài viết

 Xử lý các vi phạm của tất cả thành viên Các chức năng của Moderator

1.5. Tổng quan về đồ án1.5.1.Tên đồ án

Devorum - website diễn đàn cho lập trình viên.

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

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

</div>Trang 19<div class="page_container" data-page="19">

 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.o Bước 3: Hiện thực

 Sử dụng NextJS để xây dựng giao diện người dùng trên nềntảng website.

 Sử dụng Docker compose để xây dựng mơ hình Microservice,các API được xây dựng bởi NodeJS framework và sử dụngMongoose để đơn giản hóa việc tương tác với MongoDB. 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 q 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.

</div>Trang 20<div class="page_container" data-page="20">

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úngta, từ đó hạn chế lỗi và đẩy nhanh q 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.

Ngồ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.

</div>Trang 21<div class="page_container" data-page="21">

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ững

phầ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 íchvà thư viện rất phong phú và đa dạng.

</div>Trang 22<div class="page_container" data-page="22">

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ồnso 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 đángkể 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ạtcó 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.

</div>Trang 23<div class="page_container" data-page="23">

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.

</div>Trang 24<div class="page_container" data-page="24">

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 đồngbộ (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.

</div>Trang 25<div class="page_container" data-page="25">

 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 compose2.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

</div>Trang 26<div class="page_container" data-page="26">

ứ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:

</div>Trang 27<div class="page_container" data-page="27">

 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ấtcả 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

</div>Trang 28<div class="page_container" data-page="28">

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.

 Aggregation: Các Aggregation operation xử lý các bản ghi dữ liệu và trả vềkết quả đã được tính tốn. Các phép tố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 tố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.

</div>Trang 29<div class="page_container" data-page="29">

1.

</div>Trang 30<div class="page_container" data-page="30">

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.

</div>Trang 31<div class="page_container" data-page="31">

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 hố và được quản lý bởi docker-compose. Container hóa là một q 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.

</div>Trang 32<div class="page_container" data-page="32">

 Các service sẽ giao tiếp với nhau thông qua RabbitMQ Channel. RabbitMQlà 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ăng1.1.1.Usecase diagram

Hình 3.9 Usecase diagram

</div>Trang 33<div class="page_container" data-page="33">

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

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

STTTên chứcnă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 truycập trang chủ của diễn đàn. Trang bài viết sẽ hiển thị danhsách các bài viết mới nhất. Khách có thể nhấp vào nútcomment để 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ạngmột comment.

3 Tương tác Member Người dùng có thể vote để tăng tương táchoặ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, haymột người dùng khác.

5 Chat Member Member có thể tương tác với người dùng kháctrê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 đànbằ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 hồn tất,thành viên có thể nhấn nút "Post" để xuất bảnbài viết.

7 Tham giacộng đồng

Member Guest có thể tham gia cộng đồng bằng cáchtạ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 đànvà 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ínhnă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à

</div>Trang 34<div class="page_container" data-page="34">

STTTên chứcnăng

phạm trongcommunity

Moderator Moderator có thể xử lý các vi phạm trongcommunity bằng cách xóa hoặc sửa nội dungvi 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ượngbà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ộidung

Admin Admin có thể quản lý nội dung trên diễn đànbằ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ênvi phạm.

3.3.1.Mơ tả chi tiết các usecase3.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_01Name Xem bài viết

Goal Guest và Member có thể xem bài viết trên diễn đànActors 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ẽ

</div>Trang 35<div class="page_container" data-page="35">

đượ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ếtActors Member

Pre-condition Bài viết đã được đăng trên diễn đànMain 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êucầ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_03Name 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 voteActors 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. Member nhấn nút vote.Alternative flow None

Post-condition Khơng có

Exception Nếu xảy ra lỗi kết nối, hệ thống thông báo cho người dùng và yêu cầu thử lạisau.

</div>Trang 36<div class="page_container" data-page="36">

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 đànActors 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 theodõ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áctrên diễn đàn

Actors 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_06Name Tạo bài viết

Goal Member có thể tạo bài viết trên diễn đànActors 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.

</div>Trang 37<div class="page_container" data-page="37">

3. Member chọn thêm các tags.4. Member nhấn nút "Tạo".

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 đànActors 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 đànActors 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. Member nhấn nút "Tạo".

Alternative flow Nếu thông tin nhập không hợp lệ, hệ thống sẽ yêu cầuMember nhập lại.Post-condition Cộng đồng được tạo.

Exception Nếu Member khơng có quyền tạo cộng đồng, họ sẽ nhậnđược thông báo lỗi.

</div>Trang 38<div class="page_container" data-page="38">

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 đànActors 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 đượchiển thị.

3.3.1.10.Live share

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

User Case ID UC_10Name 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 Share

Actors 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.