đồ án 2 xây dựng mạng xã hội chia sẻ ảnh và video

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 (6.45 MB, 81 trang )

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

<b>BỘ GIÁO DỤC VÀ ĐÀO TẠO </b>

<b>TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM</b>

<b>ĐỒ ÁN 2 </b>

<b>XÂY DỰNG MẠNG XÃ HỘI CHIA SẺ ẢNH VÀ VIDEO </b>

<b>Giảng viên hướng dẫn : TS. Đỗ Thị Thanh Tuyền Sinh viên thực hiện 1 : Phạm Thị Thu Trang </b>

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

<b>LỜI CẢM ƠN </b>

Đầu tiên, chúng em xin gửi lời cảm ơn chân thành đến TS. Đỗ Thị Thanh Tuyền – giảng viên hướng dẫn môn Đồ án 2 – khoa Công nghệ Phần mềm. Cơ đã trực tiếp giảng dạy, tận tình chia sẻ những kiến thức, hỗ trợ và đóng góp những ý kiến quý báu để giúp chúng em hoàn thành thật tốt đồ án và báo cáo của mình.

Trong thời đại công nghệ phát triển mạnh mẽ vượt bậc ngày nay nhu cầu sử dụng mạng xã hội ngày càng tăng. Đối với nhiều người, việc này không chỉ là một hình thức giải trí mà cịn là cách để kết nối và chia sẻ trải nghiệm với cộng đồng. Nhận thức được sự quan trọng của điều này, chúng em quyết định nghiên cứu và thực hiện đồ án “Xây dựng mạng xã hội chia sẻ ảnh và video”. Mục tiêu là tạo ra một nền tảng mạng xã hội thân thiện, thuận tiện và đáp ứng đầy đủ các nhu cầu của người sử dụng. Tuy nhiên, trong q trình thực hiện đồ án vẫn cịn những sai sót khó tránh khỏi nên nhóm chúng em rất mong nhận được sự thơng cảm và góp ý chân thành từ phía Cơ để nhằm trau dồi, khắc phục và ngày càng hoàn thiện tốt hơn đồ án mà chúng em đang xây dựng. Đồng thời chúng em sẽ có thêm nhiều kinh nghiệm quý giá để thực hiện các đề tài khác trong tương lai.

TP.HCM, ngày 31 tháng 12 năm 2023 Nhóm sinh viên thực hiện

<b>Phạm Thị Thu Trang – Nguyễn Trần Cẩm Tiên </b>

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

1.2. Case-study tham khảo: ... 13

1.3. Môi trường phát triển: ... 13

1.4. Mơ tả quy trình thực hiện các cơng việc chính: ... 13

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

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

2.6.3. So sánh với các cơ sở dữ liệu khác: ... 23

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

3.1. Yêu cầu nghiệp vụ: ... 24

3.1.1. Mục đích hệ thống ... 24

3.1.2. Mơ tả quy trình: ... 24

3.2. u cầu chức năng: ... 25

3.3. Yêu cầu phi chức năng: ... 25

3.4. Yêu cầu hiệu suất: ... 25

3.5. Yêu cầu tiện dụng: ... 26

3.6. Yêu cầu tương thích: ... 26

3.7. Yêu cầu bảo mật: ... 27

3.8. Yêu cầu an toàn: ... 27

3.9. Yêu cầu công nghệ: ... 28

3.10. Sơ đồ Use-case: ... 28

3.10.1. Sơ đồ Use-case: ... 28

3.10.2. Danh sách các actor:... 29

3.10.3. Danh sách các Use-case: ... 29

3.11. Thiết kế Activity Diagram: ... 30

3.11.1. Activity Diagram “Đăng nhập”: ... 30

3.11.2. Activity Diagram “Quản lý hồ sơ cá nhân”: ... 31

3.11.3. Activity Diagram “Tương tác với bài đăng”: ... 32

3.11.4. Activity Diagram “Tạo bài đăng”: ... 33

3.11.5. Activity Diagram “Xóa bài đăng”: ... 33

3.11.6. Activity Diagram “Theo dõi người dùng”: ... 34

3.11.7. Activity Diagram “Nhắn tin”: ... 34

3.11.8. Activity Diagram “Báo cáo tài khoản”: ... 35

3.11.9. Activity Diagram “Báo cáo bài đăng”: ... 35

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

3.12. Thiết kế Sequence Diagram: ... 36

3.12.1. Sequence Diagram “Đăng nhập”: ... 36

3.12.2. Sequence Diagram “Quản lý hồ sơ cá nhân”: ... 37

3.12.3. Sequence Diagram “Tương tác với bài đăng”: ... 38

3.12.4. Sequence Diagram “Tạo bài đăng”: ... 39

3.12.5. Sequence Diagram “Xóa bài đăng”: ... 40

3.12.6. Sequence Diagram "Theo dõi người dùng”: ... 40

3.12.7. Sequence Diagram "Nhắn tin”: ... 41

3.12.8. Sequence Diagram “Báo cáo tài khoản”: ... 42

3.12.9. Sequence Diagram “Báo cáo bài đăng”: ... 42

3.13. Thiết kế Class Diagram: ... 43

3.13.1. Tổng quan Class Diagram: ... 43

3.13.2. Đặc tả chi tiết Class Diagram: ... 44

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

4.10.2. Chia sẻ bài đăng: ... 60

4.11. Màn hình Tạo bài đăng: ... 60

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

4.19. Màn hình của quản trị viên: ... 73

4.19.1. Màn hình thơng báo về báo cáo: ... 73

4.19.2. Màn hình bài đăng bị báo cáo: ... 73

4.19.3. Màn hình tài khoản bị báo cáo: ... 74

4.19.4. Màn hình danh sách các báo cáo: ... 74

4.19.5. Màn hình thơng báo duyệt báo cáo: ... 75

4.19.5.1. Màn hình duyệt báo cáo bài đăng: ... 75

4.19.5.2. Màn hình duyệt báo cáo tài khoản: ... 75

4.19.6. Màn hình kết quả báo cáo: ... 75

5.2. Kết quả đạt được của đồ án: ... 79

5.3. Hướng phát triển của đồ án: ... 79

TÀI LIỆU THAM KHẢO ... 81

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

Hình 3.2. Activity Diagram “Đăng nhập” ... 30

Hình 3.3. Activity Diagram “Quản lý hồ sơ cá nhân” ... 31

Hình 3.4. Activity Diagram “Tương tác với bài đăng” ... 32

Hình 3.5. Activity Diagram “Tạo bài đăng” ... 33

Hình 3.6. Activity Diagram “Xóa bài đăng” ... 33

Hình 3.7. Activity Diagram “Theo dõi người dùng” ... 34

Hình 3.8. Activity Diagram “Nhắn tin” ... 34

Hình 3.9. Activity Diagram “Báo cáo tài khoản” ... 35

Hình 3.10. Activity Diagram “Báo cáo bài đăng” ... 35

Hình 3.11. Sequence Diagram “Đăng nhập” ... 36

Hình 3.12. Sequence Diagram “Quản lý hồ sơ cá nhân” ... 37

Hình 3.13. Sequence Diagram “Tương tác với bài đăng” ... 38

Hình 3.14. Sequence Diagram “Tạo bài đăng” ... 39

Hình 3.15. Sequence Diagram “Xóa bài đăng” ... 40

Hình 3.16. Sequence Diagram “Theo dõi người dùng” ... 40

Hình 3.17. Sequence Diagram “Nhắn tin” ... 41

Hình 3.18. Sequence Diagram “Báo cáo tài khoản” ... 42

Hình 3.19. Sequence Diagram “Báo cáo bài đăng” ... 42

Hình 3.20. Tổng quan Class Diagram ... 43

Hình 3.21. Tổng quan kiến trúc hệ thống ... 50

Hình 4.1. Màn hình Đăng nhập ... 52

Hình 4.2. Màn hình Đăng ký ... 52

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

Hình 4.8. Màn hình bài đăng trên trang chủ ... 55

Hình 4.9. Khung chat và màn hình nhắn tin trên trang chủ ... 56

Hình 4.10. Menu chính của người dùng – của quản trị viên ... 56

Hình 4.11. Các tùy chọn thêm ... 57

Hình 4.12. Khung tìm kiếm... 57

Hình 4.13. Khung Thơng báo ... 58

Hình 4.14. Màn hình Đổi mật khẩu ... 59

Hình 4.15. Tổng quan màn hình Bài đăng chi tiết ... 59

Hình 4.16. Màn hình Chia sẻ bài đăng ... 60

Hình 4.17. Màn hình Tạo bài đăng ... 60

Hình 4.24. Giao diện màn hình Hồ sơ cá nhân của bản thân ... 64

Hình 4.25. Giao diện màn hình Hồ sơ cá nhân của người khác ... 65

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

Hình 4.35. Màn hình Cắt ảnh story ... 70

Mình 4.36. Màn hình sửa màu ảnh story ... 70

Hình 4.37. Màn hình thêm bộ lọc story ... 71

Hình 4.38. Màn hình Thêm chữ khi đã thêm chữ ... 71

Hình 4.39. Màn hình Thêm chữ khi chỉnh sửa chữ ... 72

Hình 4.40. Bảng chọn font ... 72

Hình 4.41. Màn hình thơng báo về báo cáo bài đăng – tài khoản ... 73

Hình 4.42. Màn hình bài đăng bị báo cáo ... 73

Hình 4.43. Màn hình tài khoản bị báo cáo ... 74

Hình 4.44. Màn hình danh sách các báo cáo ... 74

Hình 4.45. Màn hình duyệt báo cáo bài đăng ... 75

Hình 4.46. Màn hình duyệt báo cáo tài khoản ... 75

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

<b>MỤC LỤC BẢNG </b>

Bảng 2.1. So sánh Redis với các cơ sở dữ liệu khác ... 23

Bảng 3.1. Yêu cầu hiệu suất ... 25

Bảng 3.2. Yêu cầu tiện dụng ... 26

Bảng 3.3. Yêu cầu tương thích ... 26

Bảng 3.4. Yêu cầu bảo mật ... 27

Bảng 3.5. Yêu cầu an toàn ... 27

Bảng 3.6. Yêu cầu công nghệ... 28

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

<b>Chương 1: GIỚI THIỆU ĐỀ TÀI </b>

InStare là một trang web mạng xã hội tập trung vào nội dung trực quan như hình ảnh và video, là một nơi để mọi người kết nối, thể hiện bản thân, lan tỏa nguồn cảm hứng đến với mọi người xung quanh. Với giao diện thân thiện và công cụ chỉnh sửa ảnh, InStare cho phép bạn chia sẻ những khoảnh khắc, sự sáng tạo và sở thích của mình với người theo dõi.

Mạng xã hội là một nền tảng trực tuyến cho phép các cá nhân và tổ chức tương tác với nhau thông qua việc chia sẻ thông tin, ý kiến, nội dung, hình ảnh và video. Nó cho phép người dùng kết nối với những người khác, đồng thời tạo ra một cộng đồng trực tuyến với những người có cùng sở thích, quan điểm và hoạt động. Mạng xã hội cũng cung cấp các công cụ để quản lý mối quan hệ, tạo thương hiệu, quảng cáo và kinh doanh trực tuyến.

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

<b>1.1.3. Đối tượng sử dụng: </b>

Đối tượng sử dụng của mạng xã hội có thể là bất kỳ ai (thơng thường là từ 13 tuổi trở lên), bao gồm các cá nhân, tổ chức, doanh nghiệp hoặc cộng đồng. Mạng xã hội đã trở thành một phương tiện truyền thông mạnh mẽ để kết nối và tương tác với những người có cùng sở thích, hoạt động và quan điểm. Nó được sử dụng để chia sẻ thông tin, đưa ra ý kiến, giải trí, tạo mối quan hệ kinh doanh, quảng cáo và nhiều mục đích khác. Người dùng có thể tùy chỉnh trang cá nhân của mình và lựa chọn những người bạn muốn kết nối với để xây dựng một mạng lưới cá nhân hoặc cộng đồng trực tuyến.

<b>1.2. Case-study tham khảo: </b>

- Instagram - Facebook - Twitter

<b>1.3. Môi trường phát triển: </b>

- Hệ điều hành: Windows 10. - Cơ sở dữ liệu: MongoDB, Redis.

- Cơng cụ phân tích, thiết kế: Figma, draw.io, StarUML,… - IDE: Visual Studio Code.

- Mơi trường làm việc nhóm: Notion, Google Drive, Microsoft Teams, Facebook Messenger.

- Các framework sử dụng: NodeJS, NestJS, ReactJS. - Ngơn ngữ lập trình: JavaScript, TypeScript.

- Quản lý phiên bản: Git.

- Thư viện hỗ trợ: Socket.io, SRS

<b>1.4. Mô tả quy trình thực hiện các cơng việc chính: </b>

<small>• </small> Bước 1: Xác định các yêu cầu: - Phân tích khả thi quy mơ thực hiện. - Tìm hiểu quy trình nghiệp vụ.

- Tham khảo và trải nghiệm các ứng dụng liên quan. - Khảo sát người dùng qua mạng.

- Thu thập thơng tin u cầu.

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

<small>• </small> Bước 2: Thiết kế hệ thống:

- Vẽ sơ đồ Use-case: phân tích nghiệp vụ tổng quan. - Vẽ Sequence Diagram

<small>• </small> Bước 3: Thiết kế dữ liệu

- Thiết kế dữ liệu tương ứng với từng loại yêu cầu của phần mềm để đảm bảo được tính đúng đắn và tính tiến hóa với phần mềm, có hiệu quả về mặt truy xuất và lưu trữ

- Xác định và lập danh sách các bảng dữ liệu cần thiết cho các yêu cầu của phần mềm

- Xây dựng sơ đồ logic cụ thể của phần mềm <small>• </small> Bước 4: Thiết kế giao diện

- Lập ra danh sách các màn hình khi người dùng tương tác với phần mềm - Mô tả các đối tượng trên từng màn hình

- Xác định những chức năng hiển thị trên từng màn hình <small>• </small> Bước 5: Code và kiểm thử

- Code trình bày theo mơ hình 3 lớp và được phân chia theo các nhiệm vụ yêu cầu. - Testcase rõ ràng để kiểm tra tính hiệu quả của hệ thống.

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

<b>Chương 2: CƠ SỞ LÝ THUYẾT </b>

<b>2.1. Ngôn ngữ lập trình Javascript: 2.1.1. Javascript là gì? </b>

<i>Hình 2.1. Logo JavaScript </i>

JavaScript là ngơn ngữ lập trình phổ biến dùng để tạo trang web tương tác, tích hợp và nhúng vào HTML để làm cho trang web sống động hơn. Đóng vai trò như một phần của trang web, JavaScript thực thi Client-Side Script từ phía người dùng và máy chủ (Nodejs), tạo ra các trang web động. Nó là ngơn ngữ thông dịch hướng đối tượng, chiếm một trong 3 ngơn ngữ chính trong lập trình web. Trong q trình xây dựng trang web chuyên nghiệp, HTML cung cấp cấu trúc cơ bản, CSS kiểm soát và định dạng thiết kế, trong khi JavaScript tạo nội dung động trên trang web. (Vietnix, JavaScript là gì? Kiến thức chi tiết về JavaScript cơ bản, 2021)

<b>2.1.2. Cách thức hoạt động của Javascript trên trang web: </b>

JavaScript thường sẽ được nhúng trực tiếp vào một trang web hoặc được tham chiếu qua file .js riêng. JavaScript là ngôn ngữ từ phía client nên script sẽ được tải về máy client khi truy cập và được xử lý tại đó. Thay vì tải về máy server và sau khi xử lý xong mới phản hồi kết quả đến client.

JavaScript có các ưu điểm được xem là vượt trội so với các đối thủ khác trong các trường hợp thực tế như:

<small>- </small> Chương trình JavaScript rất dễ học.

<small>- </small> Lỗi JavaScript dễ phát hiện và sẽ giúp bạn sửa lỗi nhanh hơn.

<small>- </small> Các trình duyệt web có thể dịch nó bằng HTML mà không cần một compiler. <small>- </small> JS hoạt động trên rất nhiều nền tảng và trình duyệt khác nhau.

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

<small>- </small> Dễ bị khai thác từ những hacker và scammer.

<small>- </small> Có thể được dụng để thực thi mã độc trên máy tính của người dùng. <small>- </small> JS code snippet lớn.

<small>- </small> Các thiết bị khác nhau có thể thực hiện JS khác nhau dẫn đến khơng đồng nhất. <small>- </small> Vì tính bảo mật nên client-side JavaScript khơng cho phép đọc và ghi các file. <small>- </small> JS không được hỗ trợ khi sử dụng trong kết nối mạng.

<small>- </small> JavaScript khơng có khả năng đa luồng hoặc đa xử lý.

<b>2.2. Ngơn ngữ lập trình TypeScript: 2.2.1. TypeScript là gì? </b>

<i>Hình 2.2. Logo TypeScript </i>

TypeScript, do Microsoft phát triển, là một mã nguồn mở nâng cấp từ JavaScript, tăng tính kiểu tĩnh và hướng đối tượng để phát triển nhanh chóng và ổn định. Được sử dụng rộng rãi trong các ứng dụng client-side như Angular và NodeJS, TypeScript tích hợp đầy đủ tính năng của ECMAScript 2015 - ES6 và liên tục cập nhật để áp

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

dụng kỹ thuật mới từ ECMAScript. Người phát triển chính là Anders Hejlsberg, có đóng góp lớn trong nhiều ngơn ngữ lập trình hàng đầu như Delphi, Turbo Pascal, và C#. (Vietnix, TypeScript là gì? Tồn bộ kiến thức cơ bản về TypeScript dành cho người mới, 2022)

<small>- </small> Vận hành miễn phí, tiết kiệm thời gian sử dụng nhờ vào IDE và trình biên dịch vượt trội.

<small>- </small> Giảm thiểu phần trăm va chạm lỗi trong suốt quá trình vận hành. <small>- </small> Đảm bảo tính hoạt động ổn định – thuận tiện.

<small>- </small> Thao tác mượt mà, nhanh chóng, vơ cùng đơn giản, dễ sử dụng.

<small>- </small> TypeScript hỗ trợ các bước chỉnh sửa code tiện lợi hơn nhờ vào lệnh Rename Symbol, Find All Occurrences và RegEx.

<small>- </small> Giúp người dùng tái cấu trúc, nâng cấp hệ thống, phần mềm và ứng dụng vượt trội hơn nhờ vào tính xử lý thơng minh.

<small>- </small> Hạn chế thử nghiệm Boilerplate rất hiệu quả, gia tăng xác suất hồn thành cơng việc.

<small>- </small> TypeScript cịn hợp nhất mã code và đánh giá chính xác khi biên dịch cực kỳ dễ dàng, đơn giản.

<small>- </small> Hỗ trợ tối ưu hóa quy trình làm việc của người dùng, hạn chế tính nhảy bước rồi thực hiện sai thao tác.

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

<b>2.2.4. Nhược điểm: </b>

Bên cạnh những ưu điểm đầy nổi bật, tuy nhiên TypeScript vẫn còn tồn tại một số nhược điểm nhất định trong suốt quá trình lập trình viên thao tác, ứng dụng như sau: <small>- </small> Người dùng cần biên dịch đuôi .js tệp TypeScript tại nền tảng Node.js.

<small>- </small> TypeScript cần đảm bảo máy chủ Node.js, webpack và trình thử nghiệm hoạt động ổn định.

<small>- </small> Cần thêm Typedef mỗi khi apply Redux, Styled-Component và React.

<small>- </small> TypeScript không vận hành độc lập hay thay thế bất kỳ vai trị chính nào của JavaScript.

<small>- </small> TypeScript chỉ nâng cấp những nhược điểm còn hạn chế của JavaScript.

<b>2.3. Hệ quản trị cơ sở dữ liệu MongoDB: 2.3.1. MongoDB là gì? </b>

- MongoDB hoạt động dưới tiến trình ngầm, lắng nghe truy vấn trên cổng 27017. - Mỗi bản ghi có trường "_id" kiểu ObjectId để xác định tính duy nhất và được đánh

index.

- Truy vấn dữ liệu được cache trong RAM để tăng tốc độ truy vấn.

- Thay đổi dữ liệu chỉ được cập nhật xuống ổ cứng sau 60 giây để đảm bảo hiệu suất ứng dụng.

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

Node.js ưu tiên sử dụng non-blocking, định tuyến đầu vào/đầu ra dữ liệu thông qua các tác vụ thời gian thực. Sự kết hợp của luồng đơn và non-blocking I/O cho phép nó xử lý hàng nghìn kết nối đồng thời với thơng lượng cao, giải quyết hiệu quả vấn đề tài nguyên hệ thống của các ứng dụng web truyền thống. (FPT, NodeJS là gì? Những kiến thức cơ bản liên quan tới NodeJS, 2023)

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

<b>2.4.2. Cấu trúc của NodeJS: </b>

- Module: Các mô-đun JavaScript được sử dụng trong NodeJS để cung cấp chức năng cho ứng dụng. Chèn mô-đun bằng cách sử dụng hàm require().

- Console: Bảng điều khiển giúp gỡ lỗi và in thông báo ra stdout và stderr, tương tự bảng điều khiển JavaScript trong trình duyệt.

- Cluster: Mơ-đun cho phép đa luồng bằng cách tạo các quy trình con chia sẻ cùng một cổng máy chủ và chạy đồng thời.

- Global: Biến toàn cục tồn tại trong tất cả các module, bao gồm các biến như __dirname, __filename, exports, module, require.

- Error Handling: Node.js xử lý lỗi thông qua exceptions, bao gồm Standard JavaScript errors, System errors, User-specific errors, và Assertion errors.

- Streaming: Công cụ cho phép đọc và ghi dữ liệu liên tục, có 4 loại stream: Readable, Writable, Duplex, Transform. Buffer được sử dụng để xử lý stream chứa dữ liệu nhị phân.

- Domain: Mô-đun giúp chặn lỗi chưa được xử lý, có Internal Binding và External Binding.

- DNS: Module hỗ trợ kết nối đến máy chủ DNS, phân giải tên miền thông qua dns.resolve() và dns.lookup().

- Debugger: Node.js có tính năng gỡ lỗi tích hợp, hỗ trợ các tính năng kiểm tra mã cơ bản bằng từ khóa "inspect" trong hộp lệnh.

<small>- </small> IO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời. <small>- </small> Sử dụng JavaScript – một ngơn ngữ lập trình dễ học.

<small>- </small> Chia sẻ cùng code ở cả phía client và server.

<small>- </small> NPM (Node Package Manager) và module Node đang ngày càng phát triển mạnh mẽ.

<small>- </small> Cộng đồng hỗ trợ tích cực.

<small>- </small> Cho phép stream các file có kích thước lớn

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

<b>2.4.4. Nhược điểm: </b>

<small>- </small> Khơng có khả năng mở rộng, vì vậy khơng thể tận dụng lợi thế mơ hình đa lõi trong các phần cứng cấp server hiện nay.

<small>- </small> Khó thao tác với cơ sử dữ liệu quan hệ.

<small>- </small> Mỗi callback sẽ đi kèm với rất nhiều callback lồng nhau khác. <small>- </small> Cần có kiến thức tốt về JavaScript.

<small>- </small> Không phù hợp với các tác vụ đòi hỏi nhiều CPU.

<b>2.5.2. Những thành phần chính của ReactJS: </b>

- Redux là một phần quan trọng của ReactJS, giúp quản lý dữ liệu trong ứng dụng. ReactJS chia chế độ xem thành các thành phần nhỏ và sử dụng Redux để làm cho chúng liên quan chặt chẽ hơn.

- Trong ReactJS, việc quản lý liên kết và mối quan hệ giữa các thành phần đòi hỏi sự chú ý đặc biệt, do luồng dữ liệu chỉ di chuyển một chiều từ cấp độ mẹ đến cấp độ con.

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

- Virtual DOM là một phần quan trọng mà ReactJS sử dụng khi có thay đổi trong DOM. Nó cho phép xem và thay đổi lượt xem mà không cần thao tác trực tiếp với DOM, giúp tăng tốc độ ứng dụng và là một lợi thế lớn của ReactJS.

<small>- </small> Thích hợp cho nhiều loại trang web. <small>- </small> Tái sử dụng thành phần.

<small>- </small> Có thể sử dụng cho các ứng dụng di động. <small>- </small> Công cụ phát triển web hot nhất hiện nay. <small>- </small> Thân thiện với SEO.

<b>2.5.4. Nhược điểm: </b>

<small>- </small> Reactjs chỉ phục vụ cho tầng View.

<small>- </small> Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại.

<small>- </small> React khá nặng nếu so với các framework khác React có kích thước tương tương với Angular (Khoảng 35kb so với 39kb của Angular).

<small>- </small> <b>Khó tiếp cận cho người mới học Web. </b>

- Redis là một in-memory CSDL được sử dụng như bộ nhớ cache trước một CSDL chính như MySQL hoặc PostgreSQL giúp cải thiện hiệu suất ứng dụng và giảm

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

- Hiệu suất cao.

- Cấu trúc dữ liệu linh hoạt. - Đơn giản, dễ sử dụng.

- Khả năng sao chép và độ bền. - Khả năng mở rộng.

<i>Bảng 2.1. So sánh Redis với các cơ sở dữ liệu khác </i>

Giao tác (Transaction)

Khóa tối ưu thực thi các tập lệnh

Multi-document ACID Transactions

với Snapshot isolation

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

<b>3.1.2. Mơ tả quy trình: </b>

Một quy trình cơ bản của mạng xã hội chia sẻ ảnh và video gồm các bước như sau:

- Đăng ký: Người dùng đăng ký tài khoản trên mạng xã hội bằng cách cung cấp các thông tin cần thiết như username, email và mật khẩu, sau đó hệ thống sẽ gửi mã OTP về email để xác thực tài khoản. Nếu người dùng nhập đúng OTP thì quy trình đăng ký tài khoản thành cơng.

- Đăng nhập: Sau khi đăng ký, người dùng đăng nhập vào tài khoản của mình bằng cách nhập username hoặc địa chỉ email và mật khẩu.

- Tạo trang cá nhân: Người dùng có thể tạo trang cá nhân của mình trên mạng xã hội bằng cách cung cấp thông tin cá nhân, tiểu sử và ảnh đại diện. Người dùng khác có thể thấy các thơng tin trên, số lượng người theo dõi, đang theo dõi, và các bài đăng trên trang cá nhân của mình.

- Tạo bài đăng: Người dùng có thể tạo bài đăng chứa nhiều ảnh và video (tối đa 10), có thể chỉnh sửa từng ảnh/video, viết mô tả và đăng lên bảng tin. Sau khi đăng thì bài đăng sẽ hiện lên bảng tin và thông báo đến người theo dõi

- Kết nối với bạn bè và các người dùng khác: Người dùng có thể kết nối với bạn bè của mình trên mạng xã hội bằng cách tìm kiếm và kết nối với họ trên trang cá nhân. Ngoài ra người dùng có thể tìm kiếm và theo dõi các tài khoản ưa thích. - Tương tác với bài đăng: Người dùng có thể tương tác với các bài đăng của bạn bè

và người được theo dõi bằng cách thả biểu tượng cảm xúc, bình luận và chia sẻ qua tin nhắn hoặc qua các trang mạng xã hội khác.

- Tìm kiếm: Người dùng có thể tìm kiếm trang cá nhân của người dùng khác dựa theo tên, username hoặc email trên mạng xã hội.

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

- Truy cập và tải bảng tin - Quản lý hồ sơ cá nhân

- Tạo, xem, xóa và tương tác với bài đăng - Theo dõi và xem hồ sơ người dùng - Nhắn tin thời gian thực

- Tìm kiếm người dùng

- Quản lý báo cáo tài khoản, bài viết

- Mã hóa mật khẩu - Phân quyền - Hiệu suất cao - Giao diện đẹp mắt - Chỉnh sửa ảnh và video

- Bố cục, cảm xúc và gắn thẻ trong bài viết - Phát trực tiếp (Livestream)

<b>STT Nghiệp vụ Tốc độ xử lý Ghi chú </b>

1 Truy cập và tải bảng tin 5-10 tin/lần 2 Tương tác bài đăng và thông báo tương tác Ngay tức thì 3 Nhắn tin và thơng báo tin nhắn Ngay tức thì

7 Báo cáo bài viết hoặc hồ sơ Dưới 5 phút

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

<b>STT Nghiệp vụ Mức độ dễ học Mức độ dễ sử dụng Ghi chú </b>

1 Truy cập và tải bảng tin

Không cần hướng dẫn