Đang tải... (xem toàn văn)
ĐẠI HỌC QUỐC GIA THÀNH PHỐ 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 ĐỒ ÁN 2
ĐỀ TÀI:
Phát triển website mạng xã hội KreaTe
Giảng viên hướng dẫn:
TS Đỗ Thị Thanh Tuyền
Sinh viên thực hiện:
Trần Quang Tin 20522018Trần Duy Khôi 20521483
TP Hồ Chí Minh, ngày 24 tháng 12 năm 2023
Trang 2LỜI CẢM ƠN
Sau quá trình học tập và rèn luyện tại khoa Công nghệ phần mềm trường Đại họcCông nghệ Thông tin – ĐHQG TP.HCM, nhóm em đã được trang bị các kiến thức cơbản cùng các kỹ năng thực tế để có thể hoàn thành Đồ án của nhóm.
Để hoàn thành đồ án này, với lòng biết ơn sâu sắc nhóm xin gửi lời cảm ơn chânthành đến: Ban Giám hiệu trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM vìđã tạo điều kiện thuận lợi để sinh viên tìm kiếm, nghiên cứu thông tin với hệ thống thưviện hiện đại, đa dạng các loại sách và tài liệu
Gần gũi hơn là những lời tốt đẹp nhất xin gửi đến đến TS Đỗ Thị Thanh Tuyền đãtận tình giúp đỡ, định hướng cách tư duy và hướng làm việc khoa học Đó là nhữnggóp ý hết sức quý báu không chỉ trong quá trình thực hiện đồ án mà còn là hành trangtiếp bước cho em trong quá trình học tập và làm việc sau này.
Sau cùng, xin chúc quý Thầy Cô trong khoa Công nghệ Phần mềm nói riêng cũngnhư các giáo viên tại trường Công nghệ thông tin nói chung thật dồi dào sức khỏe,niềm tin để tiếp tục thực hiện sứ mệnh cao đẹp của mình.
Thành phố Hồ Chí Minh, 24 tháng 12 năm 2023Trần Quang Tin & Trần Duy Khôi
Trang 3NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
Trang 4Mục Lục
Chương 1: MỞ ĐẦU 11
1.1 Lý do chọn đề tài 11
1.2 Tại sao bạn nên sử dụng mạng xã hội KreaT 11
1.3 Đối tượng hướng đến 12
Chương 2: GIỚI THIỆU VỀ CÔNG NGHỆ SỬ DỤNG 17
2.1 Tổng quan về ngôn ngữ lập trình JavaScript 17
2.2 Tổng quan về ReactJS 18
2.3 Tổng quan về NodeJS 20
2.4 Tổng quan về ExpressJS 23
2.5 Tổng quan về MongoDB 25
2.6 Tổng quan về Mongoose 27
2.7 Tổng quan về JSON Web Token 28
2.8 Tổng quan về Socket.IO 30
2.9 Tổng quan về WebRTC 32
Chương 3: PHÂN TÍCH THIẾT KẾ ỨNG DỤNG 35
3.1 Kiến trúc ứng dụng 35
3.2 Phân tích thiết kế 37
3.2.1 Sơ đồ Use-case 37
Trang 55.2.2 Ưu điểm của ứng dụng 93
5.2.3 Nhược điểm của ứng dụng 94
5.3 Hướng phát triển 94
TÀI LIỆU THAM KHẢO 95
Trang 6Danh Mục Hình Ảnh
Hình 1.1 Giao diện Facebook 13
Hình 1.2 Giao diện Instagram 14
Trang 7Danh Mục Bảng
Bảng 3.1 Danh sách User-case 37
Bảng 3.2 Đặc tả use-case đăng nhập 39
Bảng 3.3 Đặc tả use-case đăng ký 40
Bảng 3.4 Đặc tả use-case cập nhật ảnh đại diện 41
Bảng 3.5 Đặc tả use-case xem thông tin cơ bản 43
Bảng 3.6 Đặc tả use-case cập nhật thông tin cơ bản 44
Bảng 3.7 Đặc tả use-case đăng bài 45
Bảng 3.8 Đặc tả use-case chỉnh sửa bài đăng 46
Bảng 3.9 Đặc tả use-case xóa bài đăng 47
Bảng 3.10 Đặc tả use-case bình luận 48
Bảng 3.11 Đặc tả use-case chỉnh sửa bình luận 50
Bảng 3.12 Đặc tả use-case xóa bình luận 51
Bảng 3.13 Đặc tả use-case thả cảm xúc 52
Bảng 3.14 Đặc tả use-case chỉnh sửa cảm xúc 53
Bảng 3.15 Đặc tả use-case hủy cảm xúc 54
Bảng 3.16 Đặc tả use-case xem thông tin bạn bè 55
Bảng 3.17 Đặc tả use-case quản lý lời mời kết bạn 56
Bảng 3.18 Đặc tả use-case hủy kết bạn 58
Bảng 3.19 Đặc tả use-case trò chuyện 59
Bảng 3.20 Đặc tả use-case xem thông báo 61
Bảng 3.21 Đặc tả use-case cài đặt 62
Bảng 3.22 Đặc tả use-case tạo cuộc trò chuyện nhóm 63
Bảng 3.23 Đặc tả use-case cập nhật thông tin nhóm 64
Bảng 3.24 Đặc tả use-case thêm thành viên vào nhóm 65
Bảng 3.25 Đặc tả use-case rời khỏi cuộc trò chuyện nhóm 66
Bảng 3.26 Bảng ACCOUNT 68
Bảng 3.27 Bảng REACT 69
Bảng 3.28 Bảng CONVERSATION 69
Trang 9● Chương 2: Giới Thiệu Về Công Nghệ Sử Dụng
o Giới thiệu tổng quan về các công nghệ chính mà nhóm sử dụng.o Những ưu và nhược điểm của công nghệ đó.
● Chương 3: Phân tích thiết kế ứng dụngo Giới thiệu kiến trúc của ứng dụng.o Đặc tả các Use-case của ứng dụng.o Mô tả sơ đồ lớp của ứng dụng.● Chương 4: Xây dựng ứng dụng
o Giới thiệu về các màn hình giao diện của ứng dụng.
o Mô tả tổng quan về các màn hình của ứng dụng (các thành phần, tácdụng…).
Trang 10Chương 1: MỞ ĐẦU
1.1 Lý do chọn đề tài
Lý do nhóm em chọn đề tài này là vì nhận thấy các sinh viên khácthường làm các ứng dụng thiên về quản lý, mua bán, Nhóm em muốn làmmột thứ gì đó mới mẻ, lạ lẫm hơn Đồng thời cũng muốn cho bản thân mộtthử thách khi làm một ứng dụng có quy mô không nhỏ như mạng xã hội Vìvậy, các thành viên đã bàn bạc và đưa đến quyết định xây dựng ứng dụngwebsite mạng xã hội KreaT.
1.2 Tại sao bạn nên sử dụng mạng xã hội KreaT
-Giao tiếp và kết nối: Mạng xã hội cho phép bạn giao tiếp và kết nối vớibạn bè, gia đình và người thân khắp nơi trên thế giới Bạn có thể gửi tinnhắn, chia sẻ ảnh, video và thông tin cá nhân để duy trì mối quan hệ vớinhững người quan trọng trong cuộc sống của bạn.
-Chia sẻ thông tin và ý kiến: Mạng xã hội là một nơi để chia sẻ thông tin,suy nghĩ, ý kiến và quan điểm của bạn với mọi người Bạn có thể tham giavà đóng góp vào các cuộc thảo luận về các chủ đề quan tâm, nhận đượcthông tin mới và tiếp cận với nhiều quan điểm khác nhau.
-Tiếp cận thông tin nhanh chóng: Mạng xã hội cung cấp cho bạn cập nhậtnhanh về tin tức, sự kiện, xu hướng và thông tin quan trọng khác từ khắpnơi trên thế giới Bạn có thể theo dõi trang tin, trang fanpage và trang cánhân của các tổ chức, người nổi tiếng, và những người bạn quan tâm đểđược thông tin mới nhất.
-Quảng bá và xây dựng thương hiệu cá nhân: Nếu bạn là một nhà kinhdoanh, nghệ sĩ hoặc người muốn xây dựng một thương hiệu cá nhân, mạngxã hội là một nền tảng hữu ích để quảng bá sản phẩm, dịch vụ hoặc tài năngcủa bạn Bạn có thể tạo nội dung sáng tạo, chia sẻ thông tin về công việccủa bạn và tương tác với khách hàng, người hâm mộ hoặc cộng đồng củamình.
Trang 11-Học tập và nghiên cứu: Mạng xã hội cung cấp một nguồn tài nguyênphong phú để học tập và nghiên cứu Bạn có thể tham gia vào các nhómchuyên đề, theo dõi trang cá nhân của những người có kiến thức chuyên sâutrong lĩnh vực mình quan tâm và tìm kiếm thông tin, tài liệu học tập từ cộngđồng mạng xã hội.
-Giải trí và thư giãn: Mạng xã hội cung cấp nhiều nội dung giải trí nhưvideo, hình ảnh, trò chơi và nội dung hài hước Bạn có thể tận hưởng thờigian rảnh rỗi bằng cách xem nội dung hấp dẫn, theo dõi các trang giải tríhoặc kết nối với cộng đồng có sở thích giống nhau.
1.3 Đối tượng hướng đến
Mạng xã hội KreaT hướng đến tất cả người dùng, đặc biệt là những ngườiquan tâm đến việc tạo, chia sẻ và tương tác với nội dung hình ảnh KreaTkhông biệt giới tính, độ tuổi, dân tộc, quốc tịch,
1.4 Khảo sát hiện trạng
Hiện nay trên thế giới đã có nhiều ứng dụng mạng xã hội quen thuộc, có thểkể đến như: Facebook, Instagram, Twitter, Tiktok… Ta cùng đi qua một sốthông tin chung của các ứng dụng này.
1.4.1 Facebook
1.4.1.1 Giới thiệu chung
Facebook là mạng xã hội trực tuyến lớn nhất và phổ biến nhất trên thế giới.Nó được thành lập vào năm 2004 bởi Mark Zuckerberg và một nhóm sinhviên Đại học Harvard Ban đầu, Facebook chỉ dành riêng cho sinh viên đạihọc, nhưng sau đó đã mở rộng để cho phép mọi người trên 13 tuổi tham gia.
Trang 131.4.2 Instagram
1.4.2.1 Giới thiệu chung
Instagram là một ứng dụng mạng xã hội chia sẻ hình ảnh và video, đượcthành lập vào năm 2010 bởi Kevin Systrom và Mike Krieger Ban đầu,Instagram chỉ cho phép người dùng chia sẻ ảnh, nhưng sau đó đã mở rộngđể bao gồm cả video và nhiều tính năng khác.
Instagram nhanh chóng trở thành một trong những ứng dụng mạng xã hộiphổ biến nhất trên thế giới, với hàng tỷ người dùng trên toàn cầu Nó tạo ramột không gian tương tác năng động, nơi người dùng có thể chia sẻ nhữngkhoảnh khắc cuộc sống, nghệ thuật, du lịch, thời trang và nhiều nội dungkhác.
Trang 14- Dòng thời gian: Hiển thị những bức ảnh và video mới nhất từ ngườibạn theo dõi trên một trang chính Bạn có thể thả tim (like), bình luận vàchia sẻ nội dung của người khác.
- Stories: Cho phép người dùng chia sẻ nội dung tạm thời trong 24 giờ,bao gồm ảnh, video, và các tính năng như hình dán, hỏi đáp, câu chuyệnvòng (boomerang), và thăm dò ý kiến.
- IGTV: Nền tảng video dài hơn cho phép người dùng tạo và chia sẻvideo dài hơn 1 phút, tạo điều kiện thuận lợi cho việc xem các video nộidung dài hơn.
- Thẻ (tag) và Hashtag: Người dùng có thể gắn thẻ tên người khác trongảnh hoặc sử dụng hashtag để tìm kiếm và nhóm các nội dung có chung mộtchủ đề.
- Khám phá: Trang "Khám phá" giúp người dùng khám phá những nộidung phù hợp dựa trên sở thích và hoạt động trước đó.
1.5 Mục tiêu đề tài
Sau khi sử dụng và đưa ra những nhận xét về ưu nhược điểm của một vàiứng dụng mạng xã hội quen thuộc, chúng em muốn triển khai một ứngdụng có thể đáp ứng các nhu cầu sau:
- Tạo ra một cộng đồng kết nối: Mạng xã hội KreaT nhắm đến việc tạora một cộng đồng kết nối giữa những người có sở thích, sự quan tâm vàmục tiêu chung Mục tiêu là tạo ra một không gian cho người dùng giaotiếp, chia sẻ thông tin và xây dựng mối quan hệ.
- Cung cấp nền tảng chia sẻ nội dung: Mạng xã hội KreaT nhắm đến việccung cấp một nền tảng cho người dùng chia sẻ nội dung, bao gồm ảnh, tinnhắn, trạng thái và nhiều hình thức khác Mục tiêu là tạo ra một không gianmà người dùng có thể tự do và dễ dàng chia sẻ những trải nghiệm, ý tưởngvà thông tin cá nhân của mình.
- Tạo ra trải nghiệm tương tác: Mạng xã hội KreaT nhắm đến việc tạo ra
Trang 15trải nghiệm tương tác đáng nhớ cho người dùng Mục tiêu là tạo ra các tínhnăng và chức năng giúp người dùng kết nối, tương tác và tham gia vào cáchoạt động như thả tim, bình luận, chia sẻ,
- Đem lại giá trị và hỗ trợ cho người dùng:Mạng xã hội KreaT nhắm đếnviệc đem lại giá trị và hỗ trợ cho người dùng Mục tiêu là cung cấp thôngtin hữu ích, giải trí, giáo dục hoặc tạo ra một môi trường nơi người dùng cóthể tìm kiếm sự hỗ trợ từ cộng đồng hoặc từ những nguồn tài nguyên khác.
Trang 16Chương 2: GIỚI THIỆU VỀ CÔNG NGHỆ SỬ DỤNG
2.1 Tổng quan về ngôn ngữ lập trình JavaScript
JavaScript (JS) là một ngôn ngữ lập trình phía client (thực thi trên trìnhduyệt) phổ biến và mạnh mẽ Nó được sử dụng để tạo ra các ứng dụng webtương tác, cung cấp tính năng động và tương tác với người dùng JavaScriptcũng được sử dụng trong phát triển ứng dụng di động, ứng dụng máy chủvà các dự án phát triển phía back-end.
Hình 2.3 Javascript-Ưu điểm:
● Đa nền tảng: JavaScript có thể chạy trên nhiều nền tảng khác nhau, baogồm trình duyệt web và môi trường phía máy chủ như Node.js.
● Tính tương tác: JavaScript cho phép tương tác trực tiếp với người dùngtrên trình duyệt, tạo ra các trang web tương tác cao và trải nghiệm ngườidùng tốt hơn.
● Dễ học và sử dụng: JavaScript có cú pháp đơn giản và dễ hiểu, giúpngười mới học nhanh chóng tiếp cận và phát triển ứng dụng một cách dễdàng.
Trang 17● Hỗ trợ mạnh mẽ từ cộng đồng: JavaScript có một cộng đồng phong phúvà nhiều tài liệu học tập, thư viện và framework hữu ích để giúp phát triểnứng dụng một cách nhanh chóng và hiệu quả.
● Tính linh hoạt: JavaScript cho phép tích hợp dễ dàng với HTML vàCSS, cũng như hỗ trợ tính năng động và xử lý dữ liệu phía client.
-Nhược điểm:
● Do JavaScript chạy trên trình duyệt của người dùng, có thể dễ dàng bịtấn công bởi các lỗ hổng bảo mật Điều này đòi hỏi nhà phát triển phải thậntrọng khi xử lý dữ liệu và thực hiện biện pháp bảo mật phù hợp.
● JavaScript không cung cấp các cấu trúc tổ chức mã lớn như modulehay namespace một cách tự nhiên Điều này có thể gây khó khăn trongquản lý mã khi xây dựng các ứng dụng phức tạp.
● Mỗi trình duyệt có thể có một phiên bản JavaScript và hỗ trợ tính năngkhác nhau, điều này đòi hỏi phải kiểm tra và xử lý mã cho từng trình duyệtkhác nhau để đảm bảo tương thích.
● JavaScript không có khả năng xử lý đa luồng hoặc đa xử lý trực tiếp,nhưng có các công nghệ và cách tiếp cận khác nhau để xử lý tác vụ phứctạp và bất đồng bộ trong môi trường web.
2.2 Tổng quan về ReactJS
ReactJS (thường gọi là React) là một thư viện JavaScript phát triển bởiFacebook Nó được sử dụng để xây dựng giao diện người dùng (UI) chocác ứng dụng web đơn trang (Single Page Applications) và ứng dụng diđộng React được thiết kế để tạo ra các UI tương tác và linh hoạt, dựa trênkhái niệm của các thành phần (components) Mỗi thành phần trong Reactđại diện cho một phần nhỏ của giao diện người dùng và có thể được xâydựng, kết hợp và tái sử dụng một cách dễ dàng.
Trang 18Hình 2.4 React
- Ưu điểm:
● Hiệu suất cao: React sử dụng Virtual DOM để cập nhật hiệu quả và chỉcập nhật những phần thay đổi thực sự trong giao diện người dùng, giúp tốiưu hiệu suất ứng dụng.
● Quản lý trạng thái dễ dàng: React sử dụng mô hình unidirectional dataflow (dòng dữ liệu một chiều) và hỗ trợ quản lý trạng thái (state) một cáchdễ dàng thông qua các thành phần (components) Điều này giúp duy trì mãdễ đọc, dễ hiểu và dễ bảo trì.
● Tái sử dụng thành phần: React khuyến khích việc tái sử dụng thànhphần, cho phép bạn xây dựng giao diện theo cách modulized và dễ dàng mởrộng ứng dụng.
● Thân thiện với SEO: SEO là một phần không thể thiếu để đưa thông tinwebsite lên top đầu tìm kiếm của Google Bản chất Reactjs là một thư việnJavaScript, Google Search Engine hiện nay đã crawl và index được codeJavaScript.
● Debug dễ dàng: Facebook đã phát hành 1 Chrome extension dùngtrong việc debug trong quá trình phát triển ứng dụng Điều đó giúp tăng tốc
Trang 19quá trình release sản phẩm cũng như quá trình coding.
-Nhược điểm:
● Reactjs chỉ phục vụ cho tầng View React chỉ là View Library nókhông phải là một MVC framework như những framework khác Đây chỉ làthư viện của Facebook giúp render ra phần view Vì thế React sẽ không cóphần Model và Controller, mà phải kết hợp với các thư viện khác Reactcũng sẽ không có 2-way binding hay là Ajax.
● Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cầnphải cấu hình lại.
● React khá nặng nếu so với các framework khác React có kích thướctương tương với Angular (Khoảng 35kb so với 39kb của Angular) Trongkhi đó Angular là một framework hoàn chỉnh.
2.3 Tổng quan về NodeJS
Node.js là một môi trường chạy mã JavaScript ở phía máy chủ (server-side)được xây dựng dựa trên nền tảng Chrome V8 JavaScript Engine Điều nàycho phép bạn chạy mã JavaScript trên máy chủ, thay vì chỉ chạy trong trìnhduyệt Node.js cho phép phát triển ứng dụng web đa nền tảng với khả năngxử lý đồng thời (asynchronous) cao.
Trang 20Hình 2.5 NodeJS
- Ưu điểm:
● Hiệu suất cao: Node.js sử dụng mô hình không đồng bộ (non-blocking)và sự kiện xảy ra dựa trên callback, cho phép xử lý đồng thời nhiều yêu cầumà không chờ đợi kết quả trước khi tiếp tục Điều này giúp Node.js có hiệusuất cao và đáp ứng tốt trong khi xử lý nhiều yêu cầu đồng thời.
● Xử lý đồng thời (Concurrency): Nodejs hỗ trợ xử lý đồng thời thôngqua mô hình sự kiện và non-blocking I/O Điều này cho phép xử lý nhiềuyêu cầu cùng một lúc mà không làm chậm hoặc chặn luồng chính của ứngdụng.
● Quản lý tốt các yêu cầu thời gian thực: Với khả năng xử lý đồng thờivà hệ sinh thái thư viện hỗ trợ, Nodejs thích hợp cho việc xây dựng các ứngdụng thời gian thực như ứng dụng chat, ứng dụng trò chơi trực tuyến, ứngdụng phản hồi nhanh, v.v.
● Sử dụng cùng ngôn ngữ JavaScript: Node.js sử dụng JavaScript, mộtngôn ngữ phổ biến và được sử dụng rộng rãi, giúp việc chuyển đổi giữaphía máy chủ và phía máy khách (client) dễ dàng hơn Lập trình viên có thểsử dụng cùng một ngôn ngữ để phát triển cả phía máy chủ và phía máy
Trang 21khách của ứng dụng.
● Cộng đồng phát triển đông đảo: Node.js có một cộng đồng phát triểnrộng lớn, đóng góp vào việc phát triển thư viện, công cụ và tài liệu phongphú Cộng đồng này cung cấp sự hỗ trợ và khả năng mở rộng của Node.js.
-Nhược điểm:
● Đơn luồng (Single-threaded): Mặc dù Node.js có khả năng xử lý đồngthời, nhưng nó vẫn chạy trên một luồng duy nhất Điều này có nghĩa là nếucó một phần tử xử lý gây chậm hoặc chặn luồng chính, nó có thể ảnh hưởngđến tất cả các yêu cầu khác Tuy nhiên, có thể sử dụng các cơ chế nhưclustering hoặc worker threads để giải quyết vấn đề này.
● Không phù hợp cho các tác vụ CPU-intensive: Do Node.js chạy trênmô hình single-threaded, nó không phù hợp cho các tác vụ đòi hỏi nhiều xửlý CPU (CPU-intensive) Nếu ứng dụng của bạn chủ yếu là xử lý CPU-intensive, thì một ngôn ngữ khác như Python hoặc Java có thể là lựa chọntốt hơn.
● Quản lý bất đồng bộ (Asynchronous programming): Việc sử dụngcallback hoặc Promise để quản lý bất đồng bộ có thể làm cho mã trở nênphức tạp hơn và khó đọc Tuy nhiên, sử dụng các thư viện hỗ trợ nhưAsync hoặc Promise-based libraries như Bluebird có thể giúp giải quyếtvấn đề này.
● Chưa ổn định trong việc quản lý bộ nhớ: Node.js không được xây dựngđể quản lý bộ nhớ dễ dàng như ngôn ngữ Java Việc quản lý bộ nhớ trongNode.js đòi hỏi sự cẩn thận và kiểm soát từ phía lập trình viên để tránh cácvấn đề như memory leaks hay Out of Memory errors.
Trang 222.4 Tổng quan về ExpressJS
Express.js là một framework phát triển ứng dụng web phía máy chủ(server-side) được xây dựng dựa trên Node.js Nó cung cấp các công cụ vàtính năng giúp xây dựng ứng dụng web nhanh chóng và dễ dàng.
Express.js giúp quản lý các yêu cầu HTTP, xử lý các định tuyến (routing),tạo và quản lý các API, và thực hiện các tác vụ xử lý trên phía máy chủ Nócung cấp một cấu trúc linh hoạt để phát triển ứng dụng web theo mô hìnhMVC (Model-View-Controller) hoặc các mô hình tương tự.
Hình 2.6 ExpressJS
- Ưu điểm:
● Đơn giản và dễ học: Expressjs có một cú pháp đơn giản và dễ hiểu,giúp lập trình viên nhanh chóng làm quen và phát triển ứng dụng web mộtcách dễ dàng Nó không có quá nhiều quy tắc và cấu trúc phức tạp, chophép bạn linh hoạt trong việc xây dựng ứng dụng theo ý muốn.
● Linh hoạt và mở rộng: Express.js cho phép bạn tự do xây dựng ứngdụng theo cách bạn muốn, không hạn chế bởi các quy tắc hay kiểu kiến trúccụ thể Bạn có thể sử dụng các thư viện, mô-đun bên thứ ba, và công cụ phù
Trang 23hợp với nhu cầu cụ thể của dự án.
● Middleware mạnh mẽ: Expressjs cung cấp hệ thống middleware mạnhmẽ, cho phép bạn xử lý các yêu cầu HTTP, thực hiện xác thực, xử lý lỗi,ghi log, và nhiều tác vụ khác Điều này giúp tăng tính tái sử dụng và quảnlý chung của mã.
● Hỗ trợ đa nền tảng: Express.js có khả năng chạy trên nhiều nền tảng,bao gồm Windows, macOS, và Linux Điều này cho phép bạn triển khaiứng dụng trên nhiều môi trường và máy chủ.
● Cộng đồng phát triển đông đảo: Expressjs có một cộng đồng phát triểnrộng lớn, với nhiều tài liệu, mô-đun, và ví dụ code có sẵn Bạn có thể tìmthấy giải pháp cho các vấn đề phát triển thông qua cộng đồng và nhận sự hỗtrợ từ cộng đồng này.
-Nhược điểm:
● Thiếu tính năng mặc định: Expressjs là một framework nhẹ, nên khôngcung cấp nhiều tính năng mặc định như các framework lớn hơn Điều nàycó thể đòi hỏi bạn phải triển khai các tính năng phụ trợ bằng cách sử dụngcác thư viện và mô-đun bên thứ ba.
● Quản lý dự án lớn: Khi xây dựng các dự án lớn và phức tạp, việc quảnlý mã nguồn và cấu trúc dự án có thể trở nên phức tạp hơn Express.jskhông cung cấp một kiến trúc cụ thể hoặc quy tắc nghiêm ngặt, điều nàyyêu cầu bạn tổ chức và quản lý mã nguồn của mình một cách chặt chẽ.
● Yêu cầu hiểu biết về Nodejs: Expressjs là một framework xây dựngtrên Node.js, vì vậy để sử dụng hiệu quả Expressjs, bạn cần có kiến thức vàhiểu biết cơ bản về Node.js.
Trang 242.5 Tổng quan về MongoDB
MongoDB là một hệ quản trị cơ sở dữ liệu phi quan hệ (NoSQL database)mã nguồn mở Nó được thiết kế để lưu trữ và quản lý dữ liệu phi cấu trúc(unstructured data) và dữ liệu có cấu trúc linh hoạt (flexible structured data)trong các tài liệu JSON-like được gọi là BSON (Binary JSON).
MongoDB khác biệt với hệ quản trị cơ sở dữ liệu SQL truyền thống bằngcách sử dụng mô hình lưu trữ dựa trên tài liệu (document-based storage)thay vì bảng và hàng như trong SQL Mỗi tài liệu trong MongoDB là mộtbản ghi độc lập có thể chứa các trường và giá trị khác nhau, tạo ra sự linhhoạt cao trong việc lưu trữ dữ liệu.
Hình 2.7 MongoDB-Ưu điểm:
● Linh hoạt và mở rộng: MongoDB cho phép lưu trữ dữ liệu phi cấu trúcvà có cấu trúc linh hoạt, giúp bạn dễ dàng thay đổi cấu trúc dữ liệu theo nhucầu Nó cũng hỗ trợ khả năng mở rộng dễ dàng bằng cách thêm các máychủ và phân chia dữ liệu tự động.
● Tính năng truy vấn mạnh mẽ: MongoDB cung cấp một ngôn ngữ truyvấn linh hoạt và mạnh mẽ, cho phép bạn thực hiện truy vấn phức tạp và tìmkiếm dữ liệu theo nhiều tiêu chí.
● Hiệu suất cao: MongoDB được thiết kế để có hiệu suất cao với khảnăng xử lý tải lưu lượng dữ liệu lớn và tốc độ truy vấn nhanh.
Trang 25● Tích hợp tốt với các ngôn ngữ lập trình: MongoDB cung cấp các trìnhđiều khiển và API cho nhiều ngôn ngữ lập trình phổ biến, giúp tương tác vàlàm việc với cơ sở dữ liệu dễ dàng trong môi trường lập trình yêu thích củabạn.
● Hỗ trợ cao cho replica set và sharding: MongoDB hỗ trợ replica set đểcung cấp tính sẵn sàng cao và khả năng chịu lỗi Nó cũng hỗ trợ shardingđể phân tán dữ liệu trên nhiều máy chủ, giúp tăng khả năng mở rộng.
-Nhược điểm:
● Không hỗ trợ giao diện SQL: MongoDB không hỗ trợ ngôn ngữ truyvấn SQL, điều này có thể gây khó khăn cho những người đã quen với SQLkhi chuyển sang sử dụng MongoDB.
● Tốn nhiều dung lượng đĩa: Vì MongoDB lưu trữ dữ liệu theo cấu trúctài liệu, có thể tốn nhiều dung lượng đĩa hơn so với cơ sở dữ liệu SQLtruyền thống.
● Khả năng quản lý tài nguyên: Với khả năng mở rộng dễ dàng, việcquản lý và vận hành hệ thống MongoDB có thể phức tạp hơn so với các hệquản trị cơ sở dữ liệu SQL truyền thống.
● Cần hiểu biết về quản lý dữ liệu: Với tính linh hoạt và phi cấu trúc củaMongoDB, việc thiết kế và quản lý dữ liệu đòi hỏi hiểu biết và kỹ năng đặcbiệt để tối ưu hóa hiệu suất và khả năng mở rộng của hệ thống.
Trang 262.6 Tổng quan về Mongoose
Mongoose là một thư viện (library) Node.js được sử dụng để tương tác vớicơ sở dữ liệu MongoDB Nó cung cấp một giao diện đơn giản và dễ sửdụng để thao tác với MongoDB bằng cách định nghĩa các mô hình dữ liệuvà thực hiện các truy vấn.
Hình 2.8 Mongoose
- Ưu điểm:
● Đơn giản và dễ sử dụng: Mongoose cung cấp một giao diện đơn giảnvà dễ sử dụng để tương tác với MongoDB Nó giúp giảm bớt công việc lặplại và cung cấp các phương thức tiện ích để thao tác dữ liệu trongMongoDB.
● Định nghĩa mô hình dữ liệu: Mongoose cho phép bạn định nghĩa môhình dữ liệu để xác định cấu trúc và quan hệ giữa các tài liệu Điều này giúpkiểm soát dữ liệu và đảm bảo tính nhất quán trong cơ sở dữ liệu.
● Validation (Xác thực): Mongoose hỗ trợ xác thực dữ liệu bằng cáchcho phép bạn định nghĩa các quy tắc xác thực trên các trường trong môhình Bạn có thể kiểm tra tính hợp lệ của dữ liệu trước khi lưu trữ vào cơ sởdữ liệu.
● Middleware: Mongoose cung cấp middleware cho phép bạn thực hiện
Trang 27các hành động trước và sau khi thực hiện các phương thức trên mô hình.Điều này cho phép bạn thực hiện các tác vụ như xử lý trước khi lưu dữ liệu,truy cập dữ liệu và nhiều hơn nữa.
● Tương tác dữ liệu: Mongoose cung cấp các phương thức để tương tácvà truy vấn dữ liệu từ MongoDB Bạn có thể thực hiện các hoạt độngCRUD (Create, Read, Update, Delete) một cách dễ dàng và tổ chức.
-Nhược điểm:
● Tăng độ phức tạp: Mongoose là một thư viện phụ thuộc và nâng caotrên MongoDB, do đó có thể làm tăng độ phức tạp của mã nguồn và hiệusuất một chút so với việc sử dụng MongoDB trực tiếp.
● Thêm một lớp trừu tượng: Mongoose thêm một lớp trừu tượng giữaứng dụng và MongoDB, có thể tạo ra một số chi phí hiệu năng nhỏ và làmtăng thời gian thực hiện truy vấn.
● Tối ưu hóa hiệu suất: Đôi khi, khi làm việc với dữ liệu lớn hoặc truyvấn phức tạp, việc tối ưu hóa hiệu suất của Mongoose có thể đòi hỏi kiếnthức và hiểu biết về cách hoạt động của MongoDB và Mongoose.
2.7 Tổng quan về JSON Web Token
JWT (JSON Web Token) là một tiêu chuẩn mở (open standard) được sửdụng để truyền thông tin xác thực an toàn giữa các bên qua mạng Nó đượcsử dụng phổ biến trong việc xác thực và ủy quyền trong ứng dụng web vàdi động.
JWT bao gồm ba phần chính: header, payload và signature.
● Header: Chứa các thông tin về loại token (thường là JWT) và thuậttoán mã hóa được sử dụng để tạo chữ ký (signature) cho token.
● Payload: Chứa các thông tin cần thiết, ví dụ như thông tin người dùng(user ID, tên người dùng, quyền truy cập) và các thông tin tùy chọn khác.Payload không được mã hóa, nhưng được mã hóa base64 để đảm bảo tínhtoàn vẹn.
Trang 28● Signature: Là phần chữ ký được tạo bằng cách ký (sign) header vàpayload bằng một khóa bí mật (secret key) duy nhất mà chỉ server biết Chữký được sử dụng để kiểm tra tính xác thực và tính toàn vẹn của token.Khi một người dùng đăng nhập thành công vào ứng dụng, server sẽ tạo mộtJWT và trả về cho người dùng Người dùng sẽ gửi JWT trong mỗi yêu cầutiếp theo để chứng minh rằng họ đã xác thực và được ủy quyền.
Hình 2.9 Jason Web Token
- Ưu điểm:
● Dễ sử dụng và triển khai: JWT là một tiêu chuẩn mở và dễ dàng triểnkhai trong nhiều ngôn ngữ lập trình và framework Nó cũng có hỗ trợ tốttrong các thư viện và công cụ phổ biến.
● Xác thực và ủy quyền: JWT cho phép xác thực người dùng và ủyquyền truy cập vào các tài nguyên Khi một người dùng đăng nhập thànhcông, họ sẽ nhận được JWT và gửi nó trong các yêu cầu tiếp theo để chứngminh xác thực và được ủy quyền.
● Tính di động và phi kết nối: JWT có thể được truyền qua mạng và
Trang 29không cần lưu trữ trạng thái phiên (session stateless) Điều này giúp xâydựng ứng dụng có khả năng mở rộng và không phụ thuộc vào lưu trữ trạngthái ở phía server.
● Tính toàn vẹn và bảo mật: JWT sử dụng chữ ký kỹ thuật số để kiểm tratính toàn vẹn của dữ liệu Chỉ server biết khóa bí mật để tạo và xác thựcJWT, đảm bảo rằng JWT không bị sửa đổi trên đường truyền.
● Phù hợp với các ứng dụng phân tán: JWT cho phép xác thực và ủyquyền giữa các hệ thống phân tán, cho phép tích hợp và chia sẻ xác thực dễdàng.
-Nhược điểm:
● Dung lượng dữ liệu: JWT chứa thông tin xác thực trong payload, điềunày có thể làm tăng dung lượng dữ liệu truyền qua mạng Điều này có thểảnh hưởng đến hiệu suất truyền dữ liệu, đặc biệt là trong các môi trườngmạng chậm hoặc có giới hạn băng thông.
● Không thể thu hồi (revoke): JWT không cung cấp cơ chế thu hồi tokennếu người dùng đăng xuất hoặc token bị đánh cắp Một khi JWT được tạora và gửi cho người dùng, nó sẽ tồn tại và có thể được sử dụng cho đến khihết hạn.
● Thay đổi thông tin trong token: Khi thông tin trong JWT được ký vàgửi cho người dùng, nó không thể thay đổi trong quá trình token còn hiệulực Điều này có nghĩa là nếu thông tin của người dùng thay đổi (ví dụ:quyền truy cập bị thay đổi), người dùng phải đăng nhập lại để cập nhậtthông tin mới.
2.8 Tổng quan về Socket.IO
Socket.IO là một thư viện JavaScript mã nguồn mở cho phép thiết lập vàquản lý kết nối thời gian thực (real-time connections) giữa máy chủ (server)và các máy khách (client) thông qua giao thức WebSocket Nó cung cấp
Trang 30một cách dễ dàng để gửi và nhận dữ liệu trong thời gian thực giữa các thànhphần của ứng dụng web.
Hình 2.10 Socket.io
- Ưu điểm:
● Thời gian thực: Socket.IO cho phép gửi và nhận dữ liệu trong thời gianthực giữa máy chủ và các máy khách Điều này làm cho nó trở thành mộtcông cụ mạnh mẽ cho việc xây dựng các ứng dụng thời gian thực như tròchơi đa người chơi, trò chuyện và các ứng dụng cần cập nhật dữ liệu ngaylập tức.
● Hỗ trợ nền tảng đa dạng: Socket.IO làm việc trên nhiều trình duyệt webvà nền tảng, bao gồm cả máy tính và thiết bị di động Điều này cho phépphát triển ứng dụng thời gian thực trên các nền tảng khác nhau một cách dễdàng.
● Xử lý tự động kết nối: Socket.IO tự động xử lý việc thiết lập kết nối vàduy trì kết nối WebSocket giữa máy chủ và máy khách Nếu WebSocketkhông được hỗ trợ, Socket.IO chuyển sang các phương thức truyền thôngkhác như polling (long-polling) để đảm bảo kết nối liên tục.
● Phòng và phân nhóm: Socket.IO cho phép phân nhóm các kết nối vào
Trang 31các phòng và namespaces Điều này cho phép gửi và nhận dữ liệu giữa cácnhóm cụ thể và giữ cho các tín hiệu riêng tư.
● Tính linh hoạt: Socket.IO cho phép tuỳ chỉnh và mở rộng theo nhu cầucủa ứng dụng Bạn có thể tùy chỉnh cấu hình và xác thực các kết nối, sửdụng các middleware và sự kiện tùy chỉnh.
-Nhược điểm:
● Dung lượng dữ liệu: Vì Socket.IO là một lớp trừu tượng trên giao thứcWebSocket, nó tạo ra một số lượng dữ liệu thừa trong các gói tin gửi đi.Điều này có thể làm tăng dung lượng dữ liệu truyền qua mạng.
● Khả năng mở rộng: Khi có số lượng lớn kết nối và dữ liệu truyền gửitrong một ứng dụng Socket.IO, có thể gặp khó khăn trong việc mở rộng vàquản lý tài nguyên của máy chủ.
● Cập nhật phiên bản: Socket.IO có thể có các phiên bản mới và thay đổicấu trúc API theo thời gian Điều này có thể yêu cầu việc cập nhật và xử lýlại mã nguồn hiện có trong các dự án sử dụng Socket.IO.
2.9 Tổng quan về WebRTC
WebRTC (Web Real-Time Communication) là một dự án mã nguồn mở được phát triển để cung cấp khả năng truyền trực tuyến âm thanh, video và dữ liệu real-time giữa các trình duyệt web mà không cần sử dụng các plugin hoặc ứng dụng bên ngoài Được giới thiệu vào năm 2011, WebRTC đã trở thành một tiêu chuẩn quan trọng trong việc xây dựng các ứng dụng web tương tác và trải nghiệm người dùng real-time.
Trang 32● Khả Năng Tương Thích: Mặc dù đã được hỗ trợ rộng rãi, nhưng vẫn cóthể xuất hiện vấn đề tương thích trình duyệt trong một số trường hợp.
Trang 33● Khả Năng Tiêu Tốn Năng Lượng: Truyền tải real-time có thể tiêu tốnnăng lượng cao, đặc biệt là trên thiết bị di động.
● Khả Năng Phát Hiện Mạng: Trong môi trường mạng phức tạp, có thểxảy ra khó khăn trong việc xác định đường truyền tối ưu.
Trang 34Chương 3: PHÂN TÍCH THIẾT KẾ ỨNG DỤNG
3.1 Kiến trúc ứng dụng
Hình 3.12 Kiến trúc ứng dụng
Hệ thống được xây dựng dựa trên kiến trúc Tier – Layer Với 3 Tier chínhtrong
kiến trúc hệ thống là Tier Front-end và Tier dành cho Back-end vàDatabase 2-tier
Front-end và Back-end (còn được gọi là mô hình client-server) là một kiểumô hình kiến trúc phần mềm, trong đó ứng dụng được chia thành hai thànhphần chính: phần frontend (client) và phần backend (server).
● Tier Backend:
Tier Backend là lớp xử lý logic và chứa các chức năng và dịch vụ của hệ
Trang 35Lớp này được xây dựng bằng ngôn ngữ lập trình phía máy chủ Node.js vàsử dụng framework ExpressJS Tier Backend nhận các yêu cầu từ TierFrontend, xử lý logic ứng dụng, truy xuất cơ sở dữ liệu, xác thực và ủyquyền người dùng, và sau đó trả về dữ liệu hoặc kết quả tương ứng cho TierFrontend.
● Database Tier:
Database Tier là lớp lưu trữ dữ liệu của hệ thống Lớp này chứa hệ quản trịcơ sở dữ liệu MongoDB và quản lý dữ liệu được lưu trữ Tier Backend sẽtương tác với Database Tier để lưu trữ và truy xuất dữ liệu khi cần thiết.
Trang 363.2 Phân tích thiết kế3.2.1 Sơ đồ Use-case
Hình 3.13 Use-case tổng quát
3.2.2 Bảng danh sách Use-case
Bảng 3.1 Danh sách User-case
STTTên Use-caseÝ nghĩa
1 Đăng nhập Người dùng đăng nhập vào hệ thống bằng tàikhoản đã đăng ký.
2 Đăng ký Người dùng đăng ký để đăng nhập vào hệthống.
3 Quản lý hồ sơ cánhân.
Người dùng có thể xem, cập nhật thông tin cánhân như tên, ảnh đại diện, ngày sinh, giới tính,
Trang 37sở thích, học vấn… và có thể xem lại các bàiviết đã đăng, danh sách bạn bè, các ảnh, videođã đăng.
4 Quản lý bài đăng Người dùng có thể đăng bài để chia sẻ nội dung(bao gồm viết bài, đăng ảnh, video) trên mạngxã hội, kiểm soát quyền riêng tư của bài đăng,tương tác với bài đăng, gồm các usecase phụ làTạo bài viết, Chỉnh sửa bài viết, Xóa bài viết.5 Quản lý bình luận Người dùng có thể để lại ý kiến của mình lên
các bài đăng bằng cách bình luận lên các bàiđăng mà người đó có quyền truy cập, gồm cácusecase phụ là Tạo bình luận, Chỉnh sửa bìnhluận, Xóa bình luận.
6 Quản lý cảm xúc Người dùng có thể để lại ý kiến của mình lêncác bài đăng bằng cách bình luận lên các bàiđăng mà người đó có quyền truy cập, gồm cácusecase phụ là Thả cảm xúc, Chỉnh sửa cảmxúc, Xóa cảm xúc.
7 Quản lý bạn bè Người dùng có thể gửi lời mời kết bạn, chấpnhận hoặc hủy lời mời của người khác, hủy kếtbạn và xem thông tin của người khác.
8 Trò chuyện Người dùng có thể nhắn tin, gọi điện với bạnbè.
9 Thông báo Người dùng có thể nhận được các thông báoliên quan đến họ, bạn bè của họ khi có gì mới
Trang 38như bình luận, đổi ảnh đại diện…
10 Cài đặt Người dùng có thể vào cài đặt một số vấn đềliên quan giao diện như thay đổi ngôn ngữ, cấutrúc ảnh trong bài đăng.
11 Quản lý nhóm tròchuyện.
Người dùng có thể tạo nhóm trò chuyện, thêmthành viên, xóa thành viên ra khỏi nhóm, mờithêm bạn bè vào nhóm và cập nhật thông tinnhóm.
3.2.3 Đặc tả Use-case3.2.3.1 Đăng nhập
Bảng 3.2 Đ c t use-case đăng nh pặ ảậ
Tên use-case Đăng nhập.
Mô tả Cho phép người dùng đăng nhập vào hệ thống.Điều kiện kích hoạt Người dùng bấm vào nút đăng nhập.
Tiền điều kiện Thiết bị của người dùng phải kết nối Internet.
Hậu điều kiện Nếu thành công, hệ thống chuyển người dùng quamàn hình newsfeed.
Nếu không thành công, trạng thái hệ thống khôngthay đổi và thông báo không thành công.
Dòng sự kiện chính 1 Hệ thống hiển thị trang đăng đăng nhập.2 Người dùng nhập thông tin.
Trang 393 Hệ thống kiểm tra tính hợp lệ của thông tin.4 Hệ thống kiểm tra thông tin trên cơ sở dữ liệu.5 Hệ thống chuyển người dùng vào trang đăng nhập.
Dòng sự kiện phụ 3a Hệ thống thông báo định dạng sai kiểu dữ liệu.Quay lại bước 2.
4a Hệ thống thông báo sai tài khoản hoặc mật khẩu.Quay lại bước 2.
Luồng ngoại lệ
3.2.3.2 Đăng ký
Bảng 3.3 Đ c t use-case đăng kýặ ả
Tên use-case Đăng ký
Mô tả Cho phép người dùng đăng ký tài khoản mớiĐiều kiện kích hoạt Người dùng bấm vào nút đăng ký
Tiền điều kiện Thiết bị của người dùng phải kết nối Internet.
Hậu điều kiện Nếu thành công, hệ thống chuyển người dùng quamàn hình đăng nhập và tạo được tài khoản cho ngườidùng vào cơ sở dữ liệu.
Nếu không thành công, trạng thái hệ thống không
Trang 40thay đổi và thông báo không thành công.Dòng sự kiện chính 1 Hệ thống hiển thị trang đăng ký tài khoản.
2 Người dùng nhập thông tin.
3 Hệ thống kiểm tra tính hợp lệ của thông tin.4 Hệ thống kiểm tra thông tin trên cơ sở dữ liệu.5 Hệ thống lưu thông tin vào cơ sở dữ liệu.
6 Hệ thống chuyển người dùng vào trang đăng nhập.
Dòng sự kiện phụ 3a Hệ thống thông báo định dạng sai kiểu dữ liệu.Quay lại bước 2.
4a Hệ thống thông báo tài khoản đã tồn tại.Quay lại bước 2.
Luồng ngoại lệ
3.2.3.3 Quản lý hồ sơ cá nhân
3.2.3.3.1 Cập nhật ảnh đại diện, ảnh bìa
Bảng 3.4 Đ c t use-case c p nh t nh đ i di nặ ảậậ ảạệ
Tên use-case Cập nhật ảnh đại diện, ảnh bìa.
Mô tả Cho phép người dùng thay đổi ảnh đại diện hoặc ảnhbìa.