Đồ án phát triển mạng xã hội KreaT

MỤC LỤC

Đố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ười quan tâm đến việc tạo, chia sẻ và tương tác với nội dung hình ảnh.

Khảo sát hiện trạng

Facebook

    - Trang cá nhân: Mỗi người dùng có một trang cá nhân cá nhân, nơi họ có thể chia sẻ thông tin cá nhân, ảnh, video và các chi tiết khác. - Nhóm: Cho phép người dùng tham gia và tạo các nhóm chuyên đề để chia sẻ, thảo luận và tương tác với những người có sở thích chung. - Trang doanh nghiệp: Cho phép các doanh nghiệp, thương hiệu và cá nhân nổi tiếng tạo trang đặc biệt để quảng bá và tương tác với khách hàng.

    Hình 1.1 Giao diện Facebook
    Hình 1.1 Giao diện Facebook

    Instagram

      - Dòng thời gian: Hiển thị những bức ảnh và video mới nhất từ người bạn theo dừi trờn mụ̣t trang chớnh. - 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ện vòng (boomerang), và thăm dò ý kiế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ột chủ đề.

      Mục tiêu đề tài

      Mục tiêu là tạo ra các tính nă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ác hoạ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 đến việc đem lại giá trị và hỗ trợ cho người dùng. Mục tiêu là cung cấp thông tin 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.

      Phương pháp thực hiện

      ● 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ả. ● Mỗi trình duyệt có thể có một phiên bản JavaScript và hỗ trợ tính năng khác nhau, điều này đòi hỏi phải kiểm tra và xử lý mã cho từng trình duyệt khá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ức tạp và bất đồng bộ trong môi trường web.

      Hình 2.3 Javascript
      Hình 2.3 Javascript

      Tổng quan về ReactJS

      ● 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 data flow (dòng dữ liệu một chiều) và hỗ trợ quản lý trạng thái (state) một cách dễ dàng thông qua các thành phần (components). ● Tái sử dụng thành phần: React khuyến khích việc tái sử dụng thành phầ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.

      Hình 2.4 React
      Hình 2.4 React

      Tổng quan về NodeJS

      ● 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ầu mà không chờ đợi kết quả trước khi tiếp tục. ● 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ời và hệ sinh thái thư viện hỗ trợ, Nodejs thích hợp cho việc xây dựng các ứng dụng thời gian thực như ứng dụng chat, ứng dụng trò chơi trực tuyến, ứng dụng phản hồi nhanh, v.v. ● Sử dụng cùng ngôn ngữ JavaScript: Node.js sử dụng JavaScript, một ngôn ngữ phổ biến và được sử dụng rộng rãi, giúp việc chuyển đổi giữa phía máy chủ và phía máy khách (client) dễ dàng hơn.

      Hình 2.5 NodeJS
      Hình 2.5 NodeJS

      Tổng quan về ExpressJS

      ● Middleware mạnh mẽ: Expressjs cung cấp hệ thống middleware mạnh mẽ, 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. Express.js không cung cấp một kiến trúc cụ thể hoặc quy tắc nghiêm ngặt, điều này yê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ựng trê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.

      Tổng quan về MongoDB

      ● 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ủa bạn. ● Khả năng quản lý tài nguyên: Với khả năng mở rộng dễ dàng, việc quả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ủa MongoDB, việc thiết kế và quản lý dữ liệu đòi hỏi hiểu biết và kỹ năng đặc biệt để tối ưu hóa hiệu suất và khả năng mở rộng của hệ thống.

      Tổng quan về Mongoose

      ● Tăng độ phức tạp: Mongoose là một thư viện phụ thuộc và nâng cao trên MongoDB, do đó có thể làm tăng độ phức tạp của mã nguồn và hiệu suấ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àm tă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 truy vấ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ến thức và hiểu biết về cách hoạt động của MongoDB và Mongoose.

      Tổng quan về JSON Web Token

      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. Điều này làm cho nó trở thành một cô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 ngay lập tức. ● Khả năng mở rộng: Khi có số lượng lớn kết nối và dữ liệu truyền gửi trong 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ủ.

      Hình 2.9 Jason Web Token
      Hình 2.9 Jason Web Token

      Tổng quan về WebRTC

      ● Dung lượng dữ liệu: Vì Socket.IO là một lớp trừu tượng trên giao thức WebSocket, nó tạo ra một số lượng dữ liệu thừa trong các gói tin gửi đi. ● Tiêu Chuẩn Hóa: WebRTC là một tiêu chuẩn nguyên tắc, giúp đảm bảo tính tương thích và sẵn sàng tích hợp với nhiều trình duyệt khác nhau. ● Dễ Tích Hợp: Cung cấp API linh hoạt, giúp nhà phát triển dễ dàng tích hợp chức năng real-time vào ứng dụng web của họ.

      ● Hạn Chế Trong Môi Trường Mạng Kém: Trong môi trường mạng không ổn định, WebRTC có thể gặp khó khăn và gây giảm chất lượng truyền tải. ● 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. ● Khả Năng Tiêu Tốn Năng Lượng: Truyền tải real-time có thể tiêu tốn nă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. Front-end và Back-end (còn được gọi là mô hình client-server) là một kiểu mô hình kiến trúc phần mềm, trong đó ứng dụng được chia thành hai thành phần chính: phần frontend (client) và phần backend (server). Tier Frontend làm nhiệm vụ giao tiếp với Tier Backend để gửi các yêu cầu từ người dùng và hiển thị kết quả trả về từ Backend.

      Tier Backend nhận các yêu cầu từ Tier Frontend, xử lý logic ứng dụng, truy xuất cơ sở dữ liệu, xác thực và ủy quyền người dùng, và sau đó trả về dữ liệu hoặc kết quả tương ứng cho Tier Frontend.

      Hình 2.11 WebRTC
      Hình 2.11 WebRTC

      Hệ thống ứng dụng 1. Sơ đồ lớp

        Người dùng phải nhập đúng định dạng của hệ thống yêu cầu: trường email phải nhập đúng định dạng email, trường password phải nhập ít nhất 6 ký tự. - Nút quên mật khẩu để giúp người dùng thay đổi mật khẩu mới nếu quên mật khẩu mới (trải qua bước xác thực bằng otp gửi về email).

        Bảng 3.28 Bảng CONVERSATION
        Bảng 3.28 Bảng CONVERSATION

        Màn hình chính

        ● Danh sách các bài đăng: người dùng có thể xem những bài đăng của người khác và thực hiện các hành động lên đó như xem danh sách người thả cảm xúc, thả cảm xúc lên bài, bình luận và xem bình luận, chia sẻ, xem thông tin người được gắn vào.

        Hình 4.18 Màn hình bài post
        Hình 4.18 Màn hình bài post

        Màn hình hồ sơ cá nhân

        Người dùng có thể xác nhận hoặc từ chối các lời mời ở màn hình này. - Combobox lựa chọn chế độ xem những ảnh từng đăng ở bài post hoặc lịch sử avatar cập nhật.

        Hình 4.20 Màn hình about
        Hình 4.20 Màn hình about

        Màn hình trò chuyện

        Có thể bấm vào để đến trang cá nhân nếu là trò chuyện đơn, hoặc xem, sửa thông tin nhóm nếu là cuộc trò chuyện nhóm.

        Hình 4.26 Trò chuyện nhóm
        Hình 4.26 Trò chuyện nhóm

        Danh sách thông báo

        Thuận lợi

        - Trên thị trường đã có nhiều ứng dụng mạng xã hội để nhóm tham khảo, từ đó giúp nhóm có nhiều ý tưởng trong thiết kế chức năng, giao diện và dữ liệu. - Các tài liệu về công cụ thực hiện đồ án có đầy đủ và chi tiết trên Internet. Cộng đồng lớn giúp giải quyết các vấn đề thường gặp phải khi sử dụng công nghệ liên quan đồ án một cách nhanh chóng.

        - Cỏc thành viờn trong nhúm đó biết nhau từ trước nờn hiểu rừ điểm mạnh và điểm yếu của nhau. Từ đó, phân chia công việc giúp phát huy tối đa khả năng của từng thành viên và làm việc hiệu quả hơn.