Đồ án 1: Báo cáo xây dựng ChatApp đa nền tảng - ĐH CNTT, ĐHQG-HCM

Báo cáo đồ án chi tiết Xây dựng ChatApp đa nền tảng. Tài liệu tham khảo đầy đủ về phân tích, thiết kế hệ thống, CSDL và giao diện ứng dụng.

• Tác giả: Vũ Hồ Quỳnh Anh
• Người hướng dẫn: Trần Thị Hồng Yến
• Trường học: Trường Đại học Công nghệ Thông tin - Đại học Quốc gia Thành phố Hồ Chí Minh
• Chuyên ngành: Công nghệ Phần mềm
• Đề tài: Xây dựng ChatApp đa nền tảng
• Loại tài liệu: Đồ án
• Năm xuất bản: 2025
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Giới thiệu về Đồ án Xây dựng ChatApp Đa Nền tảng

Đồ án ChatApp đa nền tảng là một dự án học thuật được thực hiện tại Trường Đại học Công nghệ Thông tin, Đại học Quốc gia TP.HCM. Dự án này nhằm phát triển một ứng dụng trò chuyện hiện đại có khả năng hoạt động trên nhiều nền tảng khác nhau như di động (iOS, Android) và web. Mục tiêu chính của chatapp đa nền tảng này là tạo ra một giải pháp giao tiếp toàn diện, memenuhi nhu cầu kết nối và giao tiếp của người dùng trên các thiết bị khác nhau. Nhóm sinh viên thực hiện gồm Vũ Hồ Quỳnh Anh và Mai Tuấn An, dưới sự hướng dẫn của cô Trần Thị Hồng Yến. Trong suốt quá trình phát triển, nhóm đã tập trung vào việc nghiên cứu, phân tích yêu cầu người dùng và thiết kế giao diện thân thiện, dễ sử dụng.

1.1. Lý do chọn đề tài ChatApp Đa Nền tảng

Trong thời đại số hóa hiện nay, nhu cầu giao tiếp trực tuyến ngày càng tăng cao. Ứng dụng chatapp trở thành một công cụ thiết yếu trong cuộc sống hàng ngày. Chọn đề tài xây dựng chatapp đa nền tảng giúp nhóm sinh viên áp dụng các kiến thức về phát triển ứng dụng mobile, web và hệ thống backend vào thực tiễn. Đồng thời, dự án này cho phép học sinh khám phá các công nghệ hiện đại như real-time messaging, xác thực người dùng, và quản lý dữ liệu phân tán trên nhiều nền tảng khác nhau.

1.2. Mục đích và Phạm vi Nghiên cứu

Mục đích chính của đồ án chatapp là xây dựng một hệ thống messaging đầy đủ chức năng với các tính năng như đăng ký, đăng nhập, quản lý hồ sơ, trò chuyện nhóm, chia sẻ hình ảnh và video. Phạm vi nghiên cứu bao gồm phân tích yêu cầu hệ thống, thiết kế kiến trúc ứng dụng, phát triển giao diện người dùng, và xây dựng backend server. Nhóm cũng chú trọng đến bảo mật, quyền riêng tư, kiểm thử ứng dụng và tối ưu hóa hiệu suất hoạt động trên các nền tảng khác nhau.

II. Cơ sở Lý thuyết và Công nghệ Sử dụng

Cơ sở lý thuyết của chatapp đa nền tảng dựa trên các nguyên lý kiến trúc phần mềm hiện đại. Dự án sử dụng mô hình client-server để đảm bảo sự đồng bộ dữ liệu giữa các nền tảng. Công nghệ phát triển bao gồm các framework và thư viện phổ biến như React Native hoặc Flutter cho mobile, React hoặc Vue.js cho web, và Node.js hoặc Python cho backend. Hệ thống cơ sở dữ liệu sử dụng SQL hoặc NoSQL tùy theo yêu cầu cụ thể. Để hỗ trợ tin nhắn real-time, dự án tích hợp công nghệ WebSocket hoặc các dịch vụ cloud như Firebase. Các nguyên lý bảo mật dữ liệu và mã hóa thông tin được áp dụng để bảo vệ quyền riêng tư người dùng.

2.1. Kiến trúc Hệ thống Chatapp

Kiến trúc hệ thống được thiết kế theo mô hình microservices hoặc monolithic tùy theo quy mô. Lớp presentation bao gồm giao diện mobile và web. Lớp business logic xử lý các yêu cầu người dùng, quản lý trò chuyện, và xác thực. Lớp data access kết nối với cơ sở dữ liệu. Kiến trúc chatapp đa nền tảng đảm bảo tính nhất quán dữ liệu, khả năng mở rộng và hiệu suất cao trong các tình huống lưu lượng lớn.

2.2. Công nghệ Real time Messaging

Để cung cấp tin nhắn real-time tức thời, dự án sử dụng WebSocket hoặc Socket.io. Công nghệ này cho phép giao tiếp hai chiều liên tục giữa client và server, đảm bảo người nhận nhận được tin nhắn ngay lập tức. Hệ thống notification được triển khai để thông báo cho người dùng về tin nhắn mới, yêu cầu kết bạn hoặc hoạt động trong nhóm. Các dịch vụ cloud như Firebase Cloud Messaging hỗ trợ gửi thông báo đẩy trên thiết bị di động hiệu quả.

III. Phân tích Yêu cầu và Thiết kế Hệ thống

Phân tích yêu cầu là bước quan trọng trong phát triển chatapp đa nền tảng. Dự án xác định các yêu cầu chức năng như đăng nhập, tạo nhóm, gửi tin nhắn, chia sẻ tệp tin. Yêu cầu phi chức năng bao gồm bảo mật, hiệu suất, khả năng mở rộng, và độ tin cậy của hệ thống. Thiết kế hệ thống sử dụng sơ đồ Use Case để mô tả các tương tác giữa người dùng và ứng dụng. Sơ đồ Entity-Relationship (ER) định nghĩa cấu trúc cơ sở dữ liệu với các bảng như User, Message, MessageBox, Relation, Post, Comment, Report. Sơ đồ Activity mô tả luồng xử lý các chức năng chính, giúp nhóm hiểu rõ quy trình hoạt động của ứng dụng.

3.1. Danh sách Yêu cầu Chức năng

Yêu cầu chức năng chính của chatapp đa nền tảng bao gồm: xác thực người dùng (đăng ký, đăng nhập, quên mật khẩu), quản lý hồ sơ cá nhân, gửi và nhận tin nhắn trực tiếp, tạo và quản lý nhóm chat, chia sẻ hình ảnh và video, phản ứng tin nhắn (like, emoji), tạo bài viết, bình luận, báo cáo nội dung không phù hợp, quản lý danh sách bạn bè, xem bản đồ vị trí. Mỗi chức năng được mô tả chi tiết với điều kiện tiên quyết, luồng chính, và luồng ngoại lệ.

3.2. Thiết kế Cơ sở Dữ liệu

Thiết kế cơ sở dữ liệu cho chatapp bao gồm các bảng chính: User (lưu thông tin người dùng), Message (lưu nội dung tin nhắn), MessageBox (nhóm chat), Relation (quan hệ bạn bè), Post (bài viết), Comment (bình luận), File (tệp đính kèm), Report (báo cáo), Location (vị trí), Status (trạng thái online/offline). Các quan hệ giữa bảng được thiết lập thông qua khóa ngoài. Bảng Audit ghi lại các hoạt động của người dùng để đảm bảo tính minh bạch và bảo mật.

IV. Xây dựng và Triển khai Ứng dụng ChatApp

Xây dựng ứng dụng chatapp đa nền tảng bao gồm phát triển giao diện người dùng cho cả mobile (iOS/Android) và web. Màn hình chính của ứng dụng hiển thị danh sách hộp thoại gần đây, cho phép người dùng truy cập nhanh các cuộc trò chuyện. Màn hình chi tiết hộp thoại cho phép người dùng xem lịch sử tin nhắn, gửi tin nhắn mới, chia sẻ hình ảnh/video. Màn hình bạn bè hiển thị danh sách liên hệ, cho phép kết bạn hoặc xóa bạn. Màn hình trang cá nhân cho phép chỉnh sửa thông tin hồ sơ, xem điểm số, thay đổi mật khẩu. Tính năng bảo mật bao gồm mã hóa end-to-end, xác thực hai yếu tố, kiểm soát quyền truy cập. Kiểm thử ứng dụng được thực hiện trên các thiết bị và nền tảng khác nhau để đảm bảo hoạt động ổn định.

4.1. Sơ đồ Luồng Màn hình và Giao diện Người dùng

Sơ đồ luồng màn hình mô tả hành trình người dùng qua các màn hình khác nhau trong chatapp. Bắt đầu từ màn hình đăng nhập/đăng ký, người dùng điều hướng đến màn hình chính, từ đó có thể truy cập các chức năng như trò chuyện, bạn bè, bài viết, hoặc cài đặt. Giao diện người dùng được thiết kế thân thiện, trực quan với các biểu tượng rõ ràng, màu sắc hài hòa, và luồng tương tác mượt mà. Thiết kế responsive đảm bảo ứng dụng hoạt động tốt trên các kích thước màn hình khác nhau.

4.2. Kết quả Đạt được và Hướng Phát triển

Kết quả đạt được từ đồ án chatapp đa nền tảng bao gồm ứng dụng hoạt động đầy đủ các chức năng cơ bản, giao diện đẹp mắt và dễ sử dụng, hệ thống backend ổn định. Hướng phát triển trong tương lai bao gồm tích hợp các tính năng nâng cao như gọi video/âm thanh, dịch ngôn ngữ tự động, quản lý file lớn, tích hợp AI cho gợi ý bạn bè, nâng cao hiệu suất xử lý lưu lượng lớn, mở rộng hỗ trợ các nền tảng khác.

Trích đoạn nội dung tài liệu

CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1. Lý do chọn đề tài: Trong thời đại số hóa và công nghệ 4.0, việc giao tiếp và kết nối giữa con người ngày càng trở nên quan trọng và cấp thiết. Các ứng dụng chat đã chứng tỏ vai trò to lớn trong việc tạo dựng cầu nối giữa cá nhân, tổ chức, và doanh nghiệp trên toàn thế giới. Lý do chọn đề tài ứng dụng chat xuất phát từ những nhu cầu thiết thực và xu hướng phát triển mạnh mẽ của xã hội hiện nay.

Thứ nhất, “ChatApp” giúp cải thiện hiệu quả giao tiếp. Với khả năng truyền tải thông tin nhanh chóng và tiện lợi, ứng dụng chat giúp giảm thiểu thời gian chờ đợi và khoảng cách địa lý, tạo điều kiện thuận lợi cho việc trao đổi và hợp tác. Đặc biệt trong bối cảnh làm việc từ xa và xu hướng học tập online đang phổ biến, việc sử dụng ứng dụng chat là giải pháp tối ưu cho mọi đối tượng. Thứ hai, “ChatApp” mang lại sự tiện ích và linh hoạt trong việc kết nối.

Không chỉ dừng lại ở việc gửi tin nhắn văn bản, các ứng dụng chat ngày nay còn tích hợp nhiều tính năng phong phú như gửi hình ảnh, video, tài liệu, cuộc gọi âm thanh và video, giúp người dùng dễ dàng chia sẻ và trao đổi thông tin một cách toàn diện. Thứ ba, “ChatApp” đóng vai trò quan trọng trong việc xây dựng cộng đồng và tạo dựng mối quan hệ. Qua các nhóm chat và cộng đồng trực tuyến, người dùng có thể tìm kiếm và kết nối với những người có cùng sở thích, chia sẻ kinh nghiệm và hỗ trợ lẫn nhau, góp phần tạo nên một môi trường giao lưu văn hóa và tri thức phong phú. Cuối cùng, việc nghiên cứu và phát triển “ChatApp” đa nền tảng cũng giúp nâng cao năng lực công nghệ và kỹ năng của người thực hiện đề tài.

Qua quá trình này, người thực hiện có cơ hội tiếp cận và áp dụng các công nghệ mới nhất như trí tuệ nhân tạo, học máy, và bảo mật dữ liệu, từ đó góp phần phát triển sự nghiệp và đóng góp vào sự tiến bộ của xã hội. Với những lý do trên, đề tài “Xây dựng ChatApp đa nền tảng” không chỉ mang lại những giá trị thiết thực trong đời sống hàng ngày mà còn mở ra nhiều cơ hội phát triển và sáng tạo cho người thực hiện. Mục đích nghiên cứu: Mục đích chính của đề tài “Xây dựng ChatApp đa nền tảng” là tạo ra một nền tảng giao tiếp tiện ích và hiệu quả, giúp người dùng dễ dàng kết nối và trao đổi thông tin một cách nhanh chóng và bảo mật. Để đạt được mục tiêu này, đề tài sẽ tập trung vào các mục đích cụ thể sau: 1 Cải thiện hiệu quả giao tiếp: Xây dựng một hệ thống chat nhanh chóng và mượt mà, cho phép người dùng gửi và nhận tin nhắn tức thì, đồng thời hỗ trợ đa dạng các loại hình truyền tải thông tin như văn bản, hình ảnh, video, và tài liệu.

Tăng cường tính năng kết nối: Phát triển các tính năng nhóm chat, cuộc gọi âm thanh và video, giúp người dùng dễ dàng tạo lập và duy trì mối quan hệ, cũng như hợp tác và làm việc nhóm một cách hiệu quả. Đảm bảo bảo mật thông tin: Áp dụng các công nghệ mã hóa tiên tiến để bảo vệ dữ liệu người dùng, đảm bảo rằng thông tin cá nhân và nội dung giao tiếp được bảo mật tuyệt đối, tránh khỏi các nguy cơ xâm nhập và lộ lọt thông tin. Tạo trải nghiệm người dùng tốt: Thiết kế giao diện người dùng thân thiện, dễ sử dụng, cùng với việc tối ưu hóa hiệu suất và độ ổn định của ứng dụng, nhằm mang lại trải nghiệm tốt nhất cho người dùng. Hỗ trợ cộng đồng và chia sẻ kiến thức: Phát triển các tính năng hỗ trợ tạo lập và quản lý cộng đồng trực tuyến, giúp người dùng dễ dàng tham gia và chia sẻ thông tin, kinh nghiệm với những người có cùng sở thích và mối quan tâm.

Đối tượng nghiên cứu: Đối tượng nghiên cứu của đề tài "Xây dựng ChatApp đa nền tảng" chủ yếu bao gồm hai nhóm người sử dụng chính: Người dùng đăng ký tài khoản: Nhóm người dùng này bao gồm những cá nhân đăng ký và sử dụng ứng dụng ChatApp để kết nối, trò chuyện, chia sẻ thông tin và hình ảnh với bạn bè, gia đình hoặc cộng đồng. Đối tượng này sẽ sử dụng các tính năng cơ bản của ứng dụng như tạo và quản lý hồ sơ cá nhân, gửi và nhận tin nhắn, chia sẻ tệp tin (hình ảnh, video), nhận thông báo và thiết lập quyền riêng tư. Mục tiêu nghiên cứu đối với người dùng là cải thiện trải nghiệm sử dụng, bảo mật thông tin và tối ưu hóa các tính năng, giúp người dùng có thể dễ dàng tương tác và kết nối với nhau trên các nền tảng khác nhau (web, mobile iOS, Android). Admin - Quản trị viên: Đối tượng nghiên cứu thứ hai là admin hay quản trị viên của hệ thống ChatApp.

Đây là người có quyền quản lý và giám sát hoạt động của ứng dụng, bao gồm việc kiểm soát các tài khoản người dùng, quản lý các nhóm trò chuyện, kiểm tra các báo cáo vi phạm, và duy trì an toàn, bảo mật cho hệ thống. Admin có trách nhiệm quản lý các quyền truy cập, theo dõi hoạt động của người dùng, cũng như xử lý các vấn đề liên quan đến bảo mật và quyền riêng tư của người dùng. Mục tiêu nghiên cứu đối với quản trị viên là xây dựng một hệ thống quản lý dễ dàng, an toàn và hiệu quả, giúp admin có thể duy trì sự vận hành mượt mà của ứng dụng. Phạm vi nghiên cứu: Phạm vi môi trường: Triển khai sản phẩm đề tài trên môi trường ứng dụng di động (iOS và Android) và website.

2 Phạm vi chức năng: Nhắn tin: Nhắn tin văn bản: Cho phép người dùng gửi và nhận tin nhắn văn bản tức thì, với các tính năng như gửi biểu tượng cảm xúc. Thu hồi và xóa tin nhắn: Cho phép người dùng thu hồi tin nhắn của mình và xóa tin nhắn ở phía của mình. Thả biểu tượng cảm xúc cho tin nhắn: Cho phép người dùng nhấn yêu thích và theo dõi chi tiết những người đã yêu thích tin nhắn. Đính kèm đa phương tiện: Gửi hình ảnh: Cho phép người dùng đính kèm và gửi hình ảnh từ thiết bị của họ.

Hình ảnh có thể được xem trước trong cửa sổ chat và tải về khi cần. Gửi video: Hỗ trợ gửi video với các định dạng phổ biến. Người dùng có thể xem video trực tiếp trong cửa sổ chat hoặc tải về để xem sau. Gửi tài liệu: Hỗ trợ đính kèm và gửi các tài liệu văn bản như PDF, Word, Excel, giúp người dùng chia sẻ thông tin một cách linh hoạt.

Gửi ghi âm: Hỗ trợ ghi âm và gửi bản vừa được ghi âm hoặc bản ghi âm có sẵn. Gợi ý kết bạn, lập nhóm: Xây dựng hệ thống gợi ý dựa trên hành vi người dùng hoặc bạn chung. Cho phép người dùng tạo, quản lý và tham gia các nhóm chat. Đăng bài viết lên trang cá nhân và bình luận: Cho phép người dùng tạo và lưu giữ bài viết, có thể đính kèm đa phương tiện (hình ảnh, file,.) Cho phép người dùng xem và thả biểu tượng cảm xúc cho bài viết.

Cho phép người dùng theo dõi số lượng và chi tiết bình luận ở một bài viết. Cho phép người dùng bình luận và trả lời bình luận ở một bài viết. Cho phép người dùng thả biểu tượng yêu thích cho bài viết. Báo cáo về hệ thống: Cho phép người dùng tạo và gửi báo cáo các vi phạm chuẩn mực của mạng xã hội về hệ thống: báo cáo tin nhắn, người dùng, bài viết, bình luận.

Tương tác bản đồ sinh động với vị trí bạn bè hội nhóm: Chia sẻ vị trí: Cho phép người dùng chia sẻ vị trí hiện tại của họ với bạn bè hoặc trong nhóm chat. Vị trí này sẽ được hiển thị trên bản đồ trong cửa sổ chat. Theo dõi vị trí: Cho phép người dùng theo dõi vị trí của bạn bè hoặc các thành viên trong nhóm theo thời gian thực trên bản đồ. Chức năng này hữu ích khi tổ chức các cuộc gặp mặt hoặc hoạt động nhóm.

3 Tạo sự kiện trên bản đồ: Hỗ trợ người dùng tạo và chia sẻ các sự kiện trên bản đồ, như điểm hẹn, cuộc họp hoặc hoạt động xã hội, giúp mọi người dễ dàng tìm đến địa điểm đã định. 4 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2. Giới thiệu: Next.js là một framework dựa trên React, được sử dụng để phát triển các ứng dụng web toàn diện (full-stack). Framework này cho phép các nhà phát triển xây dựng giao diện người dùng thông qua các thành phần React (React Components) và cung cấp thêm các tính năng cũng như tối ưu hóa để nâng cao hiệu quả phát triển.

Về mặt kỹ thuật, Next.js tự động trừu tượng hóa và cấu hình các công cụ cần thiết cho React, chẳng hạn như bundling (gộp file), compiling (biên dịch) và các thao tác khác. Điều này giúp nhà phát triển tập trung vào quá trình xây dựng ứng dụng mà không cần mất thời gian cho việc cấu hình phức tạp. Dù là lập trình viên cá nhân hay thành viên trong một nhóm phát triển lớn, Next.js mang đến giải pháp toàn diện để xây dựng các ứng dụng React nhanh chóng, linh hoạt và đáp ứng tốt nhu cầu tương tác cao của người dùng. Cấu trúc và nguyên lý hoạt động: 2.

Cấu trúc: Một dự án Next.js thường bao gồm các thư mục và tệp chính như sau: pages/: Chứa các tệp đại diện cho các route (đường dẫn) trong ứng dụng.js tương ứng với trang /, about.js tương ứng với trang /about. Các tệp trong thư mục này hỗ trợ Routing tự động. public/: Chứa các tệp tĩnh như hình ảnh, video, favicon, v. Các tệp này có thể được truy cập trực tiếp thông qua đường dẫn /.

styles/: Chứa các tệp CSS hoặc SCSS để định kiểu giao diện. components/: Chứa các React Component dùng để tái sử dụng trong ứng dụng. api/ (trong pages/): Cung cấp các API route để xây dựng backend trực tiếp trong Next.js: File cấu hình chính cho ứng dụng Next.js, dùng để tùy chỉnh các hành vi của framework. Nguyên lý hoạt động: a) Kết hợp Server-Side Rendering (SSR) và Static Site Generation (SSG) Server-Side Rendering (SSR): Render nội dung trên server mỗi khi người dùng yêu cầu một trang.

Dữ liệu luôn cập nhật và phù hợp cho các trang động (dynamic pages). Sử dụng phương thức getServerSideProps. Static Site Generation (SSG): Render nội dung tại thời điểm build và lưu trữ dưới dạng tĩnh. Phù hợp cho các trang ít thay đổi, ví dụ: blog, trang giới thiệu.

Sử dụng phương thức getStaticProps hoặc getStaticPaths.