- Vẽ Sequence Diagram • 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ả
GIỚI THIỆU ĐỀ TÀI
Tổng quan
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ục đích
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
- Đem đến một cộng đồng có thể đưa những người cùng sở thích, sở trường đến với nhau, cùng nhau chia sẻ và tạo dựng mối quan hệ
- Cung cấp một nền tảng cho mọi người giao tiếp với nhau qua tin nhắn
- Chia sẻ hình ảnh và video đến lượng lớn người dùng
- Cung cấp các tính năng và công cụ để nâng cao tầm nhìn, tạo giá trị cho cộng đồng và đóng góp vào cuộc sống của người dùng
- Thiết kế và phát triển một ứng dụng web chất lượng cao, đáp ứng các yêu cầu của người dùng và đảm bảo tính ổn định và an toàn
- Tối ưu hóa trải nghiệm người dùng bằng cách xây dựng một hệ thống trực quan, dễ sử dụng, cải thiện tính năng, hiệu suất, giao diện
- Thiết kế và triển khai một hệ thống lưu trữ và quản lý dữ liệu hiệu quả
1.1.3 Đối tượng sử dụng: Đố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.
Case-study tham khảo
Môi trường phát triển
- Cơ sở dữ liệu: MongoDB, Redis
- Công cụ phân tích, thiết kế: Figma, draw.io, StarUML,…
- 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
Mô tả quy trình thực hiện các công việc chính
• 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 yêu cầu
• Bước 2: Thiết kế hệ thống:
- Vẽ sơ đồ Use-case: phân tích nghiệp vụ tổng quan
• 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
• 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
• 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
CƠ SỞ LÝ THUYẾT
Ngôn ngữ lập trình Javascript
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 quá 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)
2.1.2 Cách thức hoạt động của Javascript trên trang web:
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ư:
- Chương trình JavaScript rất dễ học
- Lỗi JavaScript dễ phát hiện và sẽ giúp bạn sửa lỗi nhanh hơn
- Các trình duyệt web có thể dịch nó bằng HTML mà không cần một compiler
- JS hoạt động trên rất nhiều nền tảng và trình duyệt khác nhau
- Được đánh giá là ngôn ngữ lập trình nhẹ, nhanh so với các ngôn ngữ khác
- JS có thể được gắn trên một số element hoặc các events của trang web
- Khi website có sử dụng JS thì sẽ giúp cho trang web đó tương tác và tăng trải nghiệm người dùng khi truy cập
- Bạn có thể tận dụng JavaScript để kiểm tra các input thay vì kiểm tra thủ công thông qua việc truy xuất database
- Giao diện phong phú gồm các thành phần Drag and Drop, Slider để cung cấp một Rich Interface (Giao diện giàu tính năng)
Mặt khác, ngoài những ưu điểm nhưng mọi ngôn ngữ lập trình khác đều có những nhược điểm riêng của nó như:
- Dễ bị khai thác từ những hacker và scammer
- Có thể được dụng để thực thi mã độc trên máy tính của người dùng
- 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
- Vì tính bảo mật nên client-side JavaScript không cho phép đọc và ghi các file
- JS không được hỗ trợ khi sử dụng trong kết nối mạng
- JavaScript không có khả năng đa luồng hoặc đa xử lý.
Ngôn ngữ lập trình TypeScript
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
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ì? Toàn bộ kiến thức cơ bản về TypeScript dành cho người mới, 2022)
- Dễ phát triển các dự án lớn
- Hỗ trợ nhiều tính năng của JavaScript
Với vô số tính năng hiện đại, tới nay TypeScript đã mang đến cho người dùng vô số trải nghiệm nhờ vào hàng loạt ưu điểm cực kỳ nổi bật Đảm bảo đáp ứng tối ưu nhu cầu sử dụng đa dạng của mọi lập trình viên như sau:
- 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
- Giảm thiểu phần trăm va chạm lỗi trong suốt quá trình vận hành
- Đảm bảo tính hoạt động ổn định – thuận tiện
- Thao tác mượt mà, nhanh chóng, vô cùng đơn giản, dễ sử dụng
- 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
- 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
- Hạn chế thử nghiệm Boilerplate rất hiệu quả, gia tăng xác suất hoàn thành công việc
- 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
- 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
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:
- Người dùng cần biên dịch đuôi js tệp TypeScript tại nền tảng Node.js
- TypeScript cần đảm bảo máy chủ Node.js, webpack và trình thử nghiệm hoạt động ổn định
- Cần thêm Typedef mỗi khi apply Redux, Styled-Component và React
- 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
- TypeScript chỉ nâng cấp những nhược điểm còn hạn chế của JavaScript.
Hệ quản trị cơ sở dữ liệu MongoDB
- MongoDB là một cơ sở dữ liệu mã nguồn mở và là cơ sở dữ liệu NoSQL hàng đầu, được hàng triệu người sử dụng MongoDB được viết bằng C++
- Ngoài ra, MongoDB là một cơ sở dữ liệu đa nền tảng, hoạt động trên các khái niệm Collection và Document, nó cung cấp hiệu suất cao, tính khả dụng cao và khả năng mở rộng dễ dàng (Viblo, 2017)
- 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
- Cấu trúc của một đối tượng rõ ràng
- Không có các Join phức tạp
- Khả năng mở rộng cực lớn
- Sử dụng bộ nhớ trong để lưu giữ cửa sổ làm việc cho phép truy cập dữ liệu nhanh hơn
- Dữ liệu được caching, lấy RAM làm trọng tâm hoạt động vì vậy khi hoạt động yêu cầu một bộ nhớ RAM lớn
- Mọi thay đổi về dữ liệu mặc định đều chưa được ghi xuống ổ cứng ngay lập tức vì vậy khả năng bị mất dữ liệu từ nguyên nhân mất điện đột xuất là rất cao.
NodeJS
Node.js, bắt đầu từ năm 2009 và được bảo trợ bởi Joyent, là một nền tảng độc lập dựa trên V8 JavaScript engine, chủ yếu sử dụng cho việc phát triển ứng dụng web như video clip và diễn đàn Với khả năng mở rộng nhanh chóng và dễ dàng, Node.js hỗ trợ trên nhiều hệ điều hành khác nhau và cung cấp thư viện đa dạng để giảm thiểu thời gian lập trình.
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)
- 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
- IO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời
- Sử dụng JavaScript – một ngôn ngữ lập trình dễ học
- Chia sẻ cùng code ở cả phía client và server
- NPM (Node Package Manager) và module Node đang ngày càng phát triển mạnh mẽ
- Cộng đồng hỗ trợ tích cực
- Cho phép stream các file có kích thước lớn
- 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
- 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.
ReactJS
ReactJS là thư viện mã nguồn mở được tạo bởi Facebook vào năm 2013, nhằm tối thiểu hóa việc viết mã và tạo ứng dụng web nhanh, hiệu quả và hấp dẫn Mục tiêu chính của ReactJS là đảm bảo mọi trang web sử dụng nó đều mượt mà, nhanh chóng, có khả năng mở rộng và dễ triển khai ReactJS tập trung vào việc làm cho phần giao diện người dùng dễ quản lý và chia thành các thành phần đơn giản, giúp nhà phát triển tận dụng tính linh hoạt của nó khi làm việc với web (FPT, ReactJS là gì? Những điều bạn chưa biết về ReactJS, 2023)
2.5.2 Những thành phần chính của ReactJS:
- 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
- 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
- Thích hợp cho nhiều loại trang web
- Tái sử dụng thành phần
- Có thể sử dụng cho các ứng dụng di động
- Công cụ phát triển web hot nhất hiện nay
- Reactjs chỉ phục vụ cho tầng View
- 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
- 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)
- Khó tiếp cận cho người mới học Web.
Redis
- Redis là tên viết tắt của Remote Dictionary Server (Máy chủ từ điển từ xa), đây là một kho lưu trữ dữ liệu dưới dạng key-value, trên bộ nhớ, mã nguồn mở, nhanh chóng
- 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
23 tải cho CSDL nếu: dữ liệu không thay đổi hoặc được yêu cầu thường xuyên, hoặc dữ liệu không quan trọng
- Tuy nhiên, trong một vài trường hợp, Redis có thể đáp ứng được yêu cầu như một CSDL chính
- 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
2.6.3 So sánh với các cơ sở dữ liệu khác:
Bảng 2.1 So sánh Redis với các cơ sở dữ liệu khác
Cấu trúc dữ liệu Key-value
Hiệu suất Rất cao Cao Cao
Khóa ngoại Không Không Có
Khóa tối ưu thực thi các tập lệnh
Multi-document ACID Transactions với Snapshot isolation
Phân quyền Kiểm soát truy cập theo passcode
Quyền truy cập cho người dùng theo role
User được ủy quyền cụ thể
In-memory Có Có Có
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
Yêu cầu nghiệp vụ
InStare là trang web mạng xã hội được phát triển nhằm tạo điều kiện cho người dùng tương tác xã hội, chia sẻ nội dung và xây dựng cộng đồng Với trang web này bạn có thể thực hiện quản lý hồ sơ cá nhân, đăng tải hình ảnh và video, nhắn tin, tương tác với người dùng khác và các tính năng liên quan
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
- Nhắn tin: Người dùng có thể gửi và nhận tin nhắn văn bản, hình ảnh và video với các người dùng khác trên mạng xã hội
- Livestream: Người dùng có thể phát trực tiếp sử dụng camera hoặc thông qua phần mềm thứ ba và tương tác trực tiếp với các người dùng khác.
Yêu cầu chức năng
- 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
- Quản lý báo cáo tài khoản, bài viết
Yêu cầu phi chức năng
- Chỉnh sửa ảnh và video
- Bố cục, cảm xúc và gắn thẻ trong bài viết
Yêu cầu hiệu suất
Bảng 3.1 Yêu cầu hiệu suất
STT Nghiệp vụ Tốc độ xử lý Ghi chú
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ì
4 Tìm kiếm 10 kết quả/lần
5 Đăng tải bài viết Dưới 5 phút
6 Cập nhật hồ sơ cá nhân Ngay tức thì
7 Báo cáo bài viết hoặc hồ sơ Dưới 5 phút
Yêu cầu tiện dụng
Bảng 3.2 Yêu cầu tiện dụng
STT Nghiệp vụ Mức độ dễ học Mức độ dễ sử dụng Ghi chú
1 Truy cập và tải bảng tin
Tỉ lệ phạm lỗi trung bình là 1%
2 Tương tác bài đăng và thông báo tương tác
Tỉ lệ phạm lỗi trung bình là 1%
3 Nhắn tin và thông báo tin nhắn
Tỉ lệ phạm lỗi trung bình là 1%
4 Tìm kiếm Không cần hướng dẫn
Không nhớ rõ thông tin cần tìm
5 Đăng tải bài viết Dưới 5 phút hướng dẫn
Tỉ lệ phạm lỗi trung bình là 1%
6 Cập nhật hồ sơ cá nhân
Tỉ lệ phạm lỗi trung bình là 1%
7 Báo cáo bài viết hoặc hồ sơ
Tỉ lệ phạm lỗi trung bình là 1%
Yêu cầu tương thích
Bảng 3.3 Yêu cầu tương thích
STT Nghiệp vụ Đối tượng liên quan Ghi chú
1 Chia sẻ bài đăng Chia sẻ sang trang mạng xã hội khác
2 Đăng ký tài khoản Xác nhận OTP qua email
3 Tính ổn định Tương thích với nhiều web browser và hệ điều hành
Yêu cầu bảo mật
Bảng 3.4 Yêu cầu bảo mật
STT Nghiệp vụ Hệ thống Người dùng Quản trị viên
2 Truy cập và tải bảng tin x x
3 Quản lý hồ sơ cá nhân x x
6 Tương tác với bài đăng x x
7 Xem hồ sơ người dùng x x
12 Báo cáo bài đăng hoặc hồ sơ x x
Yêu cầu an toàn
Bảng 3.5 Yêu cầu an toàn
STT Nghiệp vụ Đối tượng Ghi chú
2 Hủy thật sự Bài đăng đã xóa, lịch sử tìm kiếm
3 Không cho phép xóa Người dùng, tin nhắn
Yêu cầu công nghệ
Bảng 3.6 Yêu cầu công nghệ
STT Yêu cầu Mô tả chi tiết Ghi chú
1 Dễ sửa lỗi Xác định lỗi trong vòng 15 phút
Không ảnh hưởng đến module khác khi sửa module này
2 Dễ bảo trì Sửa lỗi trung bình trong vòng 1 giờ
3 Dễ nâng cấp Thêm mới tính năng hoặc nâng cấp tính năng có sẵn nhanh chóng
4 Tính tái sử dụng Một số module có thể sử dụng ở dự án khác
Xây dựng ứng dụng mạng xã hội trung bình trong vòng 8-10 tuần
6 Tính linh hoạt Chuyển đổi cơ sở dữ liệu trong vòng 2 ngày
Sơ đồ Use-case
Hình 3.1 Sơ đồ Use-case
Bảng 3.7 Danh sách các actor
STT Tên actor Ý nghĩa/Ghi chú
1 Người dùng Người dùng sử dụng hệ thống
2 Quản trị viên Người quản lý nội dung của hệ thống
3.10.3 Danh sách các Use-case:
Bảng 3.8 Danh sách các Use-case
STT Tên Use-case Ý nghĩa/Ghi chú
2 Truy cập và tải bảng tin Sau khi người dùng đăng nhập thành công vào hệ thống sẽ tự động dẫn tới màn hình trang chủ, trong đó trang chủ sẽ hiện danh sách các bài đăng
3 Quản lý hồ sơ cá nhân Người dùng có thể thực hiện các thao tác như xem và chỉnh sửa thông tin cá nhân
4 Tương tác với bài đăng Người dùng có thể tương tác với bài đăng trên bảng tin bằng cách thích, chia sẻ và bình luận
5 Tạo bài đăng Người dùng có thể tạo bài đăng bao gồm các hình ảnh hoặc video kèm nội dung
6 Theo dõi người dùng Người dùng có thể theo dõi các người dùng khác để bài đăng của họ hiện trên bảng tin của mình
7 Nhắn tin Người dùng có thể nhắn tin trực tiếp với người dùng khác
8 Xem bài đăng Mọi người dùng đều có thể xem bài đăng nếu có đường dẫn của bài đăng đó
9 Xem hồ sơ người dùng Mọi người dùng đều có thể truy cập đến hồ sơ của người dùng bất kì và xem thông tin của họ
10 Tìm kiếm người dùng Mọi người dùng đều có thể tìm kiếm người dùng khác nếu có thể truy cập được vào các trang có thanh tìm kiếm
11 Quản lý tài khoản Quản trị viên có thể vô hiệu hóa tài khoản bị báo cáo
12 Quản lý bài đăng Quản trị viên có thể xóa bài đăng bị báo cáo.
Thiết kế Activity Diagram
Hình 3.2 Activity Diagram “Đăng nhập”
3.11.2 Activity Diagram “Quản lý hồ sơ cá nhân”:
Hình 3.3 Activity Diagram “Quản lý hồ sơ cá nhân”
3.11.3 Activity Diagram “Tương tác với bài đăng”:
Hình 3.4 Activity Diagram “Tương tác với bài đăng”
3.11.4 Activity Diagram “Tạo bài đăng”:
Hình 3.5 Activity Diagram “Tạo bài đăng”
3.11.5 Activity Diagram “Xóa bài đăng”:
Hình 3.6 Activity Diagram “Xóa bài đăng”
3.11.6 Activity Diagram “Theo dõi người dùng”:
Hình 3.7 Activity Diagram “Theo dõi người dùng”
Hình 3.8 Activity Diagram “Nhắn tin”
3.11.8 Activity Diagram “Báo cáo tài khoản”:
Hình 3.9 Activity Diagram “Báo cáo tài khoản”
3.11.9 Activity Diagram “Báo cáo bài đăng”:
Hình 3.10 Activity Diagram “Báo cáo bài đăng”
Thiết kế Sequence Diagram
Hình 3.11 Sequence Diagram “Đăng nhập”
3.12.2 Sequence Diagram “Quản lý hồ sơ cá nhân”:
Hình 3.12 Sequence Diagram “Quản lý hồ sơ cá nhân”
3.12.3 Sequence Diagram “Tương tác với bài đăng”:
Hình 3.13 Sequence Diagram “Tương tác với bài đăng”
3.12.4 Sequence Diagram “Tạo bài đăng”:
Hình 3.14 Sequence Diagram “Tạo bài đăng”
3.12.5 Sequence Diagram “Xóa bài đăng”:
Hình 3.15 Sequence Diagram “Xóa bài đăng”
3.12.6 Sequence Diagram "Theo dõi người dùng”:
Hình 3.16 Sequence Diagram “Theo dõi người dùng”
Hình 3.17 Sequence Diagram “Nhắn tin”
3.12.8 Sequence Diagram “Báo cáo tài khoản”:
Hình 3.18 Sequence Diagram “Báo cáo tài khoản”
3.12.9 Sequence Diagram “Báo cáo bài đăng”:
Hình 3.19 Sequence Diagram “Báo cáo bài đăng”
Thiết kế Class Diagram
Hình 3.20 Tổng quan Class Diagram
3.13.2 Đặc tả chi tiết Class Diagram:
Giá trị Ý nghĩa userId: ObjectId Id tự sinh bởi database email: String Email của người dùng username: String Tên tài khoản password: String Mật khẩu, được mã hóa bởi argon2 name: String Tên người dùng ava: String Ảnh đại diện bio: String Tiểu sử usernameLastChanged:
Lần cuối thay đổi username (nếu dưới 14 ngày sẽ không được đổi)
Hàm Ý nghĩa getUser() Lấy thông tin người dùng updateProfile() Cập nhật thông tin người dùng changePassword() Đổi mật khẩu removeAva() Gỡ ảnh đại diện searchUser() Tìm kiếm người dùng bằng tên hoặc username viewUserProfile() Xem thông tin người dùng bất kì, bao gồm tên, username, số follow và bài đăng
Giá trị Ý nghĩa postId: ObjectId Id tự sinh bởi database userId: ObjectId Người dùng đăng bài mediaList: String[] Danh sách ảnh hoặc video caption: String Tiêu đề bài đăng createdAt: DateTime Thời gian đăng bài layout: Int Bố cục bài đăng emotion: String Cảm xúc bài đăng
Hàm Ý nghĩa createPost() Tạo bài đăng getAllPosts() Lấy danh sách bài đăng để hiển thị trên trang chủ viewPost() Hiện chi tiết bài đăng, bao gồm số lượt thích và bình luận sharePost() Gửi bài đăng qua tin nhắn
Giá trị Ý nghĩa likeId: ObjectId Id tự sinh bởi database postId: ObjectId Bài đăng được thích userId: ObjectId Người dùng thích bài đăng react: String Loại cảm xúc
Hàm Ý nghĩa likePost() Thích bài đăng dislikePost() Bỏ thích bài đăng
Giá trị Ý nghĩa cmtId: ObjectId Id tự sinh bởi database postId: ObjectId Bài đăng được bình luận userId: ObjectId Người dùng bình luận bài đăng
Hàm Ý nghĩa comment() Bình luận bài đăng
Giá trị Ý nghĩa storyId: ObjectId Id tự sinh bởi database userId: ObjectId Người dùng đăng bài đăng tạm thời media: String Hình ảnh bài đăng createdAt: DateTime Thời gian đăng bài expiredAt: DateTime Thời gian bài đăng hết hạn
Hàm Ý nghĩa createStory() Tạo bài đăng tạm thời getAllStories() Lấy danh sách người dùng đăng bài đăng tạm thời getUserStories() Xem tất cả bài đăng tạm thời của người dùng
Giá trị Ý nghĩa viewedId: ObjectId Id tự sinh bởi database storyId: ObjectId Id bài đăng tạm thời userId: ObjectId Người dùng xem bài đăng tạm thời
Hàm Ý nghĩa viewStory() Xem bài đăng tạm thời
Giá trị Ý nghĩa followId: ObjectId Id tự sinh bởi database followerId: ObjectId Người dùng theo dõi followingId: ObjectId Người dùng được theo dõi
Hàm Ý nghĩa followUser() Theo dõi người dùng unfollowUser() Bỏ theo dõi người dùng
Giá trị Ý nghĩa notiId: ObjectId Id tự sinh bởi database notiType: String Loại thông báo notifiedUserId: ObjectId Người dùng được thông báo interactedUserId: ObjectId Người dùng tương tác postId: ObjectId Bài đăng được tương tác read: Boolean Đã xem createdAt: DateTime Thời gian tạo
Hàm Ý nghĩa getUserNotification() Lấy danh sách thông báo của người dùng readNotification() Xem thông báo
Giá trị Ý nghĩa conversationId: ObjectId Id tự sinh bởi database
Hàm Ý nghĩa enterConversation() Tham gia đoạn chat
Giá trị Ý nghĩa userId: ObjectId Id người dùng trong đoạn chat conversationId: ObjectId Id đoạn chat
Hàm Ý nghĩa getListContact() Lấy danh sách liên lạc của người dùng
Giá trị Ý nghĩa messageId: ObjectId Id tự sinh bởi database conversationId: ObjectId Id đoạn chat senderId: ObjectId Người gửi tin nhắn message: String Tin nhắn read: Boolean Đã xem createdAt: DateTime Thời gian gửi
Hàm Ý nghĩa message() Nhắn tin
Giá trị Ý nghĩa tagId: ObjectId Id tự sinh bởi database postId: ObjectId Id bài đăng userId: ObjectId Id người được gắn thẻ
Hàm Ý nghĩa tagUser() Gắn thẻ người dùng
Giá trị Ý nghĩa reportId: ObjectId Id tự sinh bởi database reportedUserId: ObjectId Id người bị báo cáo postId: ObjectId Id bài đăng resolved: Boolean Đã giải quyết hay chưa result: String Kết quả báo cáo type: String Loại báo cáo
Hàm Ý nghĩa getPostReport() Lấy báo cáo bài đăng getAccountReport() Lấy báo cáo tài khoản getReport(id) Lấy báo cáo chi tiết resolveReport(id) Giải quyết báo cáo
Giá trị Ý nghĩa reasonId: ObjectId Id tự sinh bởi database userId: ObjectId Id người viết báo cáo reportId: ObjectId Id báo cáo reason: String Lý do báo cáo createdAt: DateTime Thời gian báo cáo
Hàm Ý nghĩa viewReason() Lấy danh sách lý do
Kiến trúc hệ thống
Hệ thống được xây dựng theo kiến trúc 3 tầng gồm: tầng Presentation, tầng Application, tầng Data Kiến trúc hệ thống như sau:
Hình 3.21 Tổng quan kiến trúc hệ thống
3.14.2 Mô tả các thành phần của hệ thống:
Bảng 3.23 Mô tả các thành phần hệ thống
Diễn giải Ứng dụng sử dụng
1 Presentation Hiển thị giao diện người dùng, các biểu mẫu, danh sách, các tương tác với hệ thống cho người dùng.
2 Application Xử lý các yêu cầu người dùng, và trả về kết quả sau khi yêu cầu đã được xử lý
3 Data Lưu trữ thông tin và thực hiện các thao tác với database như thêm, xóa, sửa và lấy dữ liệu
Quá trình hoạt động của hệ thống
Quá trình hoạt động của ứng dụng sẽ được thực hiện qua các bước sau:
- B1: Người dùng sử dụng trình duyệt, tương tác với hệ thống thông qua giao diện người dùng ở lớp Presentation bằng các đường dẫn hay nhập trực tiếp hoặc nhập trực tiếp vào ô địa chỉ trong trình duyệt Khi này, trình duyệt tạo một HTTP request dưới dạng JSON và gửi request đó đến server
- B2: Server nhận được request được gửi từ trình duyệt và thực hiện routing
- B3: Routing sẽ xác định controller sẽ xử lý Request vừa được gửi tới thông qua địa chỉ API được gọi trong request Ví dụ Request cần gọi tới API: http://localhost:2041/user/getUser sẽ được gửi tới Controller cho xử lý
- B4: Sau khi Request được gửi tới Controller, Controller sẽ xử lý các dữ liệu trong
Request Nếu cần thao tác với thông tin được lưu trữ trong cơ sở dữ liệu thì Controller thực hiện kết nối đến cơ sở dữ liệu và lấy thông tin đó ra
- B5: Sau khi hoàn tất xử lý, Controller sẽ gửi HTTP response tương ứng kèm dữ liệu dạng JSON đến các View
- B6: View sẽ tiến hành xử lý các thông tin từ HTTP response và tạo ra các file html hoàn chỉnh
- B7: Sau khi nhận các file html hoàn chỉnh từ View, hệ thống sẽ xử lý và gửi lên trình duyệt web và trình duyệt web tiến hành hiển thị giao diện lên cho người dùng
XÂY DỰNG ỨNG DỤNG
Màn hình Đăng nhập
Hình 4.1 Màn hình Đăng nhập
Mô tả: Đây là giao diện đăng nhập của InStare với tính năng đăng nhập bằng username hoặc email và mật khẩu.
Màn hình Đăng ký
Hình 4.2 Màn hình Đăng ký
Mô tả: Đây là màn hình đăng ký của InStare có các trường bắt buộc là email, username và mật khẩu
Màn hình Xác thực OTP
Hình 4.3 Màn hình Xác thực OTP
Mô tả: Khi người dùng đăng ký tài khoản hoặc quên mật khẩu, sẽ có một mã xác thực được gửi qua email và người dùng cần nhập mã đó vào ô bên trên.
Màn hình Quên mật khẩu
Hình 4.4 Màn hình Quên mật khẩu
Mô tả: Khi người dùng quên mật khẩu và cần khôi phục email, màn hình này sẽ yêu cầu nhập email để gửi mã xác thực
Màn hình Tạo mật khẩu mới
Hình 4.5 Màn hình Tạo mật khẩu mới
Mô tả: Khi người dùng xác thực OTP thành công sẽ chuyển đến màn hình này để tạo mới mật khẩu.
Màn hình Trang chủ
Hình 4.6 Màn hình tổng quan Trang chủ
Mô tả: Về tổng quan, trang chủ sẽ có 1 thanh điều hướng nằm bên trái, 1 dãy story hoặc livestream trên cùng, thông tin của người dùng đang đăng nhập ở góc phải trên, phần nhắn tin ở góc phải dưới và các bài đăng ở chính giữa
Hình 4.7 Story cá nhân – Livestream – Story chưa xem – Story đã xem
Mô tả: Đây là các ô story và livestream khác nhau Người dùng có thể bấm vào các ô để xem story hoặc livestream, hoặc có thể bấm nút “+” để tạo story của bản thân
Hình 4.8 Màn hình bài đăng trên trang chủ
Mô tả: Bài đăng trên trang chủ sẽ bao gồm thông tin người đăng, người được gắn thẻ, cảm xúc bài đăng, có ô thả biểu tượng cảm xúc, bình luận hoặc chia sẻ, mô tả bài đăng, số lượt thích và dấu ba chấm ở góc phải trên để báo cáo bài viết hoặc xóa nếu là bài viết cá nhân
Hình 4.9 Khung chat và màn hình nhắn tin trên trang chủ
Mô tả: Khung chat sẽ bao gồm danh sách các liên hệ gần đây Với tin nhắn chưa đọc thì tin sẽ được in đậm Khi bấm vào thì sẽ chuyển sang khung nhắn tin gồm ô nhập tin nhắn, chọn icon, nút gửi tin nhắn và nút gửi hình ảnh
Hình 4.10 Menu chính của người dùng – của quản trị viên
Mô tả: Menu của quản trị viên sẽ có phần dẫn đến các trang báo cáo, người dùng khác thì không có Nút thông báo và báo cáo sẽ có chấm đỏ khi có thông báo/báo cáo mới
Hình 4.11 Các tùy chọn thêm
Mô tả: Các tùy chọn thêm trên menu bao gồm tạo bài đăng, tạo story, tạo livestream, đổi mật khẩu và đăng xuất.
Khung Tìm kiếm
Mô tả: Khung tìm kiếm sẽ chứa các tìm kiếm gần đây, khi người dùng nhập vào ô tìm kiếm sẽ hiển thị danh sách kết quả
Khung Thông báo
Mô tả: Đây là khung thông báo của người dùng, chứa các thông báo về tương tác như lượt theo dõi mới, lượt thích và bình luận mới, bài đăng từ người dùng đang theo dõi, bài đăng được gắn thẻ hay bài đăng bị xóa do báo cáo
Màn hình Đổi mật khẩu
Hình 4.14 Màn hình Đổi mật khẩu
Mô tả: Màn hình đổi mật khẩu cần nhập chính xác tất cả các trường trên để có thể thực hiện đổi mật khẩu.
Màn hình Bài đăng chi tiết
Hình 4.15 Tổng quan màn hình Bài đăng chi tiết
Mô tả: Khi người dùng nhấn vào bài đăng trên trang chủ hoặc trang cá nhân sẽ dẫn đến trang này Màn hình này gồm những thông tin như bài đăng trên trang chủ nhưng ta có thể xem các lượt bình luận của người dùng khác
Hình 4.16 Màn hình Chia sẻ bài đăng
Mô tả: Khi người dùng chọn chia sẻ bài đăng sẽ hiển thị danh sách các liên hệ để gửi, hoặc người dùng có thể tìm kiếm người dùng để gửi bài đăng.
Màn hình Tạo bài đăng
Hình 4.17 Màn hình Tạo bài đăng
Mô tả: Màn hình tạo bài đăng sẽ gồm nút để chọn ảnh hoặc video, ô nhập mô tả, nút chọn bố cục, cảm xúc hoặc người gắn thẻ và nút đăng bài
Hình 4.18 Màn hình tính năng chỉnh sửa ảnh
Mô tả: Màn hình chỉnh sửa ảnh có các lựa chọn: cắt, chỉnh màu, bộ lọc và chèn chữ
Hình 4.19 Màn hình Cắt ảnh
Mô tả: Màn hình cắt ảnh gồm các lựa chọn xoay trái, lật ngang, lật dọc, cắt tự do hoặc theo khung có sẵn
Hình 4.20 Màn hình sửa màu ảnh
Mô tả: Người dùng có thể kéo các thanh kéo để sửa màu ảnh hoặc bấm reset để chỉnh lại về mức 0
Hình 4.21 Màn hình Bộ lọc ảnh
Mô tả: Nếu người dùng không muốn tự chỉnh màu thì có thể lựa chọn các bộ lọc có sẵn ở các ô bên dưới
Hình 4.22 Màn hình Chèn chữ
Mô tả: Màn hình này gồm nút thêm chữ, chọn phông chữ, kích thước và màu chữ Người dùng có thể di chuyển vị trí chữ và bấm xác nhận, nếu không ưng ý có thể bấm vào chữ để chỉnh sửa hoặc xóa
Hình 4.23 Các tùy chọn chèn chữ
Mô tả: Đây là các lựa chọn cho màn chèn chữ, gồm các phông chữ và màu có sẵn và thanh trượt điều chỉnh kích thước
Màn hình hồ sơ cá nhân
Hình 4.24 Giao diện màn hình Hồ sơ cá nhân của bản thân
Mô tả: Hồ sơ cá nhân của bản thân sẽ gồm các thông tin như ảnh đại diện, họ tên, username, tiểu sử và danh sách các bài đăng bên dưới Người dùng có thể chọn chỉnh sửa thông tin cá nhân
Hình 4.25 Giao diện màn hình Hồ sơ cá nhân của người khác
Mô tả: Hồ sơ cá nhân của người khác cũng tương tự nhưng sẽ có nút nhắn tin, theo dõi và dấu ba chấm để báo cáo
Màn hình Chỉnh sửa hồ sơ
Hình 4.26 Màn hình hồ sơ tổng quan
Mô tả: Người dùng có thể chỉnh sửa các thông tin cá nhân, tuy nhiên với username thì sau khi sửa phải đợi 14 ngày mới được phép sửa lại
4.13.2 Màn hình Chỉnh sửa ảnh đại diện:
Hình 4.27 Màn hình chỉnh sửa ảnh đại diện
Mô tả: Màn hình này cũng có các lựa chọn như phần cắt ảnh trên bài đăng Người dùng chỉ được cắt theo khung tròn
Màn hình Tin nhắn
Hình 4.28 Màn hình tin nhắn tổng quan
Mô tả: Tổng quan màn hình tin nhắn sẽ có thanh điều hướng, danh sách liên hệ, nút tìm kiếm và khung tin nhắn bên phải để thao tác nhắn tin như trên trang chủ
Hình 4.29 Khung tìm kiếm liên hệ
Mô tả: Khung tìm kiếm liên hệ cũng tương tự như ở trang chủ
Màn hình Danh sách story
Hình 4.30 Màn hình danh sách story
Mô tả: Khi người dùng bấm vào story trên trang chủ sẽ chuyển đến màn hình này Người dùng có thể nhấn nút dừng hoặc phát để dừng và xem tiếp story, hoặc story sẽ tự động chạy sang story tiếp theo.
Màn hình Tạo story
Hình 4.31 Màn hình Tạo story
Mô tả: Màn hình tạo story bao gồm lựa chọn tạo story chữ hoặc story hình ảnh/video
Màn hình Tạo story chữ
Hình 4.32 Màn hình tạo story chữ
Mô tả: Màn hình tạo story chữ bao gồm ô nhập chữ, thay đổi kích thước chữ, màu chữ và màu nền
Hình 4.33 Các bảng chọn màu nền và chữ
Mô tả: Bên trái là danh sách các màu nền có sẵn và bên phải là các màu chữ có sẵn.
Màn hình Tạo story hình ảnh/video
Hình 4.34 Tổng quan màn hình Tạo story hình ảnh/video
Mô tả: Tạo story hình ảnh/video cũng có những tính năng tương tự như tạo bài đăng
Hình 4.35 Màn hình Cắt ảnh story
Mô tả: Màn hình cắt ảnh tương tự như tạo bài đăng, nhưng dựa trên khuôn có sẵn
4.18.3 Màn hỉnh Chỉnh sửa màu ảnh:
Mình 4.36 Màn hình sửa màu ảnh story
Mô tả: Màn sửa màu ảnh cũng tương tự như ở màn tạo bài đăng
4.18.4 Màn hình Thêm bộ lọc:
Hình 4.37 Màn hình thêm bộ lọc story
Mô tả: Màn hình bộ lọc cũng tương tự như phần tạo bài đăng
Hình 4.38 Màn hình Thêm chữ khi đã thêm chữ
Mô tả: Ở màn hình này, người dùng có thể bấm nút thêm chữ để thêm chữ hoặc bấm vào chữ đã thêm để chỉnh sửa
Hình 4.39 Màn hình Thêm chữ khi chỉnh sửa chữ
Mô tả: Người dùng cũng có các lựa chọn chỉnh sửa chữ tương tự như thêm chữ cho ảnh trên bài đăng hay story chữ
Màn hình của quản trị viên
4.19.1 Màn hình thông báo về báo cáo:
Hình 4.41 Màn hình thông báo về báo cáo bài đăng – tài khoản
Mô tả: Ở đây sẽ hiện các báo cáo về bài viết hoặc tài khoản, khi nhấn vào sẽ dẫn đến bài đăng/tài khoản bị báo cáo
4.19.2 Màn hình bài đăng bị báo cáo:
Hình 4.42 Màn hình bài đăng bị báo cáo
Mô tả: Màn này tương tự bài đăng trên trang chủ, nhưng có nút để xem danh sách lý do báo cáo, nút từ chối báo cáo hoặc xác nhận xóa bài
4.19.3 Màn hình tài khoản bị báo cáo:
Hình 4.43 Màn hình tài khoản bị báo cáo
Mô tả: Màn hình này tương tự màn hồ sơ người dùng, nhưng có thêm các lựa chọn tương tự màn báo cáo bài đăng Khi quản trị viên xác nhận xóa tài khoản sẽ gửi email đến người dùng bị xóa tài khoản
4.19.4 Màn hình danh sách các báo cáo:
Hình 4.44 Màn hình danh sách các báo cáo
Mô tả: Màn hình này chứa danh sách người báo cáo và các lý do họ báo cáo
4.19.5 Màn hình thông báo duyệt báo cáo:
4.19.5.1 Màn hình duyệt báo cáo bài đăng:
Hình 4.45 Màn hình duyệt báo cáo bài đăng
Mô tả: Quản trị viên cần nhập lý do xóa bài đăng và bấm xác nhận
4.19.5.2 Màn hình duyệt báo cáo tài khoản:
Hình 4.46 Màn hình duyệt báo cáo tài khoản
Mô tả: Quản trị viên cần nhập lý do xóa tài khoản và bấm xác nhận
4.19.6 Màn hình kết quả báo cáo:
4.19.6.1 Màn hình kết quả vi phạm:
Hình 4.47 Màn hình kết quả vi phạm
Mô tả: Khi bài đăng/tài khoản được xác nhận vi phạm sẽ hiện kết quả như trên kèm theo lý do vi phạm
4.19.6.2 Màn hình kết quả không vi phạm:
Hình 4.48 Màn hình kết quả không vi phạm
Mô tả: Khi bài đăng/tài khoản được xác nhận không vi phạm sẽ hiện kết quả như trên.
Livestream
Hình 4.49 Màn hình tạo livestream
Mô tả: Màn hình này gồm ô nhập tiêu đề cho livestream, chọn nguồn phát video bằng webcam hoặc OBS, stream key cho người dùng sử dụng nếu phát bằng OBS, và ô preview để xem trước nội dung phát trên livestream của họ
Mô tả: Màn hình này tương tự màn chi tiết bài đăng, tuy nhiên sẽ có thêm đồng hồ thời lượng livestream, số lượng người xem, nút tắt live cho người tạo livestream, phần bình luận sẽ được cập nhật trực tiếp và khi thả biểu tượng cảm xúc thì cảm xúc sẽ hiện trực tiếp lên màn livestream
4.20.3 Màn hình kết thúc livestream:
Hình 4.51 Màn hình kết thúc livestream
Mô tả: Khi chọn tắt live sẽ hiện màn hình xác nhận, và sau khi xác nhận sẽ hiện thông báo phiên livestream kết thúc cho tất cả người xem khác
