Báo cáo Đồ án 2: Xây dựng Phần mềm Chat (ReactJS, NodeJS) - ĐH CNTT

Tài liệu báo cáo đồ án xây dựng phần mềm chat bằng ReactJS, NodeJS. Trình bày chi tiết phân tích, thiết kế hệ thống và kế hoạch thực hiện.

• Tác giả: Nguyễn Hữu An Nhiên
• Người hướng dẫn: ThS. 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 Tp. Hồ Chí Minh
• Chuyên ngành: Công Nghệ Phần Mềm
• Đề tài: Xây Dựng Ứng Dụng Chat (ReactJS, NodeJS)
• Loại tài liệu: Báo Cáo Đồ Án
• Năm xuất bản: 2022
• Địa điểm: Tp. Hồ Chí Minh

Tóm tắt

I. Giới thiệu về Đồ án Xây dựng Ứng dụng Chat

Ứng dụng Chat là một giải pháp giao tiếp dựa trên văn bản được thực hiện trực tiếp theo thời gian thực. Đồ án này được thực hiện tại Trường Đại học Công nghệ Thông tin, dưới sự hướng dẫn của ThS. Trần Thị Hồng Yến. Mục tiêu chính là xây dựng một ứng dụng nhắn tin đa chức năng, tối ưu cho các thiết bị Windows và Mac. Ngày nay, chat là một phần không thể thiếu của cuộc sống hiện đại. Từ khi đại dịch Covid, các ứng dụng như Viber, Zalo, Telegram đã kết nối mọi người với nhau, hỗ trợ làm việc từ xa hiệu quả. Nhóm sinh viên thực hiện bao gồm Nguyễn Hữu An Nhiên (19520207) và Vũ Đặng Khương Duy (19520496), với thời gian thực hiện từ tháng 9 đến tháng 12 năm 2022.

1.1. Khái niệm và tầm quan trọng của Chat

Chat là giao tiếp dựa trên văn bản thời gian thực, cho phép người dùng trao đổi thông tin tức thì. Ứng dụng nhắn tin hiện đại đã thay thế phần lớn các hoạt động giao tiếp truyền thống. Tầm quan trọng của ứng dụng chat được thể hiện rõ qua việc hỗ trợ công việc từ xa, kết nối gia đình và cộng đồng, đặc biệt trong bối cảnh chuyển đổi số.

1.2. Mục tiêu và ý nghĩa của Đồ án

Đồ án này nhằm hiểu rõ cấu trúc ReactJS và áp dụng vào thực tế. Mục tiêu là xây dựng ứng dụng chat chuyên nghiệp với đa tính năng, phục vụ công việc và đời sống. Sinh viên sẽ nắm bắt công nghệ ReactJS, NodeJS, NestJS, MongoDB để phát triển ứng dụng chất lượng cao, dễ nâng cấp và chỉnh sửa.

II. Các tính năng chính của Ứng dụng Chat

Ứng dụng Chat được thiết kế với nhiều tính năng nâng cao để đáp ứng nhu cầu giao tiếp đa dạng. Bao gồm nhắn tin P2P (người với người) và nhắn tin nhóm cho phép trao đổi thông tin linh hoạt. Ngoài ra, chia sẻ file, ảnh, video giúp người dùng trao đổi nội dung phong phú. Ứng dụng còn cung cấp thư viện ảnh tích hợp, tìm kiếm hội thoại và tìm kiếm tin nhắn để quản lý thông tin hiệu quả. Tính năng kết bạn mở rộng mạng lưới giao tiếp, còn chỉnh sửa ảnh và quản lý thông tin người dùng tạo trải nghiệm người dùng tối ưu. Toàn bộ hệ thống được thiết kế để đảm bảo tin nhắn luôn được gửi thành công với thứ tự chính xác.

2.1. Các tính năng cơ bản

Nhắn tin P2P cho phép giao tiếp riêng tư giữa hai người. Nhắn tin nhóm hỗ trợ trao đổi với nhiều người cùng lúc. Kết bạn giúp mở rộng danh bạ. Quản lý thông tin người dùng cho phép chỉnh sửa hồ sơ cá nhân. Những tính năng này tạo nền tảng cho ứng dụng nhắn tin chuyên nghiệp.

2.2. Các tính năng nâng cao

Chia sẻ file, ảnh, video mở rộng khả năng giao tiếp. Thư viện ảnh tích hợp lưu trữ nội dung đa phương tiện. Tìm kiếm hội thoại và tìm kiếm tin nhắn giúp tìm lại nội dung cũ. Chỉnh sửa ảnh cung cấp công cụ sáng tạo. Hệ thống thông báo và retry gửi tin nhắn đảm bảo độ tin cậy cao.

III. Công nghệ và Stack sử dụng

Đồ án sử dụng ReactJS cho frontend để xây dựng giao diện người dùng hiện đại, đạp ứng yêu cầu về hiệu suất và khả năng mở rộng. ElectronJS được dùng để tương thích với Windows và Mac một cách seamless. Phía backend, nhóm sử dụng NodeJS cùng NestJS framework để xây dựng các API mạnh mẽ và TypeScript cho kiểm soát kiểu dữ liệu chặt chẽ. Về cơ sở dữ liệu, ứng dụng sử dụng MongoDB cho lưu trữ dữ liệu chính và IndexedDB cho lưu trữ cục bộ. Công nghệ WebSocket được tích hợp để đảm bảo tin nhắn thời gian thực. Toàn bộ stack công nghệ này được lựa chọn để đạt được hiệu suất tối ưu, độ tin cậy cao và khả năng mở rộng trong tương lai.

3.1. Frontend Technologies

ReactJS được phát triển bởi Facebook, cung cấp các component tái sử dụng và quản lý state hiệu quả. ElectronJS cho phép chạy ứng dụng trên Windows và Mac với cùng một codebase. TypeScript nâng cao chất lượng code với type safety. Những công nghệ này tạo nên giao diện ứng dụng chat mượt mà, phản hồi nhanh.

3.2. Backend và Database Technologies

NodeJS cung cấp runtime JavaScript phía server, NestJS framework mạnh cho API development. MongoDB lưu trữ dữ liệu linh hoạt, IndexedDB lưu trữ cục bộ. WebSocket thực hiện giao tiếp hai chiều thời gian thực, đảm bảo tin nhắn được gửi và nhận tức thì.

IV. Kết quả mong đợi và Quy trình triển khai

Kết quả mong đợi của đồ án bao gồm hiểu rõ và áp dụng thành công các công nghệ được sử dụng. Sinh viên sẽ nắm bắt cách sử dụng ReactJS, NodeJS, MongoDB để xây dựng ứng dụng chat chuyên nghiệp. Ứng dụng được thiết kế dễ dàng nâng cấp và chỉnh sửa, đồng thời tin nhắn đảm bảo thứ tự và luôn được gửi thành công. Ứng dụng hoạt động trơn tru với lỗi tối thiểu trong triển khai. Quy trình triển khai được chia thành giai đoạn từ tháng 9 đến tháng 12/2022, bao gồm khảo sát, thiết kế, phát triển, kiểm thử và hoàn thiện. Cuối cùng, nhóm sẽ thực hiện kiểm thử toàn diện để đảm bảo chất lượng trước khi triển khai chính thức.

4.1. Kết quả và Thành quả dự kiến

Sinh viên sẽ thành thạo ReactJS framework và NodeJS backend development. Ứng dụng chat được hoàn thiện với tất cả tính năng chính. Tin nhắn đảm bảo thứ tự và đạo lập gửi thành công. Ứng dụng hoạt động ổn định trên Windows và Mac với hiệu suất tối ưu. Codebase sạch, dễ dàng bảo trì và nâng cấp.

4.2. Quy trình triển khai và Kiểm thử

Quy trình chia thành 4 giai đoạn chính: tìm hiểu công nghệ, phân tích và thiết kế, phát triển, và kiểm thử. Kiểm thử ứng dụng được thực hiện từ tháng 10 đến tháng 12/2022. Nhóm sẽ ghép API, kiểm thử functionality và đảm bảo ứng dụng chạy không lỗi trên các thiết bị thực.

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

Chương 1: GIỚI THIỆU TỔNG QUAN ĐỀ TÀI 1.1 Tên đề tài : XÂY DỰNG ỨNG DỤNG CHAT 1.2 Lí do chọn đề tài Hiện nay, trên thị trường có rất nhiều nền tảng ứng dụng nhắn tin phổ biến. Trong đó nổi bật nhất với người dùng Việt Nam là các ứng dụng Zalo, Messenger, Viber, …. Tuy nhiên, các ứng dụng này đều có những ưu và nhược điểm riêng. Ví dụ như Zalo sẽ là ở khả năng đồng bộ đa thiết bị, Messenger thì khả năng phản hồi chậm và ứng dụng thường xuyên xảy ra lỗi,… Vì vậy, cần có một giải pháp ứng dụng chat đáp ứng được các yêu cầu về chức năng và đảm bảo hiệu năng, khả năng tương tác của người dùng.

Đó là lí do, nhóm chúng em lựa chọn đề tài “Xây dựng phần mềm chat” và phát triển ứng dụng WhatChat. Theo các thống kê và câu hỏi trên các nền tàng mạng xã hội. Người dùng mong muốn các ứng dụng chat sẽ có các tính năng cơ bản gồm: nhắn tin, nhắn nhóm, kết bạn, gửi ảnh, gửi file, tìm kiếm tin nhắn. Do đó WhatChat cũng sẽ tập trung vào các tính năng này và tối ưu trải nghiệm người dùng.3 Lí do chọn công nghệ Theo các thống kê từ trang công nghệ Hongkiat, hiện tại 2 nền tảng hệ điều hành Windows và MacOS chiếm đến 97% thị phần máy tính trên toàn cầu.

Do đó muốn phát triển ứng dụng cho tất cả mọi người đều có thể sử dụng thì yêu cầu phải hỗ trợ cả 2 nền tảng này. Tuy nhiên, việc phát triển ứng dụng native cho từng nền tảng yêu cầu rất nhiều chi phí và thời gian của đội ngũ phát triển. Chính vì thế, nhóm chúng em quyết định sử dụng framework ReactJS nhằm giúp cho ứng dụng chạy được trên cả 2 nền tảng phổ biến nhất hiện nay là Windows và MacOS, giúp cho đa số người dùng thiết bị máy tính đều có thể sử dụng một cách mượt mà và nhanh chóng.4 Khảo sát đề tài: Nhóm chúng em đã tạo ra một form khảo sát công khai. Sau thời gian mở form là 7 ngày thì đã nhận được 209 phản hồi từ mọi người.

Các câu hỏi khảo sát: • Ứng dụng chat có cần đầy đủ chức năng (gửi tin nhắn, ảnh)? • Điều gì làm bạn thích một ứng dụng chat? • Bạn biết ứng dụng chat qua đâu? • Bạn sử dụng ứng dụng chat bao nhiêu thời gian một ngày? • Bạn mong muốn những tính năng gì từ ứng dụng chat? Sau khi khảo sát, nhóm đã nhận được các phản hồi như sau: Hình 1. Câu hỏi 1 Hình 1. Câu hỏi 2 10 Hình 1. Câu hỏi 3 Hình 1.

Câu hỏi 4 Hình 1. Câu hỏi 5 11 Kết luận: Từ các kết quả từ khảo sát. Nhóm đã phân tích và đưa ra một số kết luận như sau: • Mọi người đều mong muốn một ứng dụng chat có đầy đủ chức năng. • Người dùng ưu tiên về tốc độ và giao diện ứng dụng hơn.

• Phần lớn người dùng dành 1-3h một ngày để dùng các ứng dụng chat. • Các tính năng người dùng mong muốn có nhất ở ứng dụng chat là: gửi ảnh, tìm kiếm bạn bè, tìm kiếm tin nhắn cũ, gửi icon,. Từ khảo sát trên đã giúp nhóm có cái nhìn tổng quát hơn để quyết định về các tính năng cho ứng dụng.5 Môi trường phát triển ứng dụng - Hệ điều hành: Microsoft Windows, macOS. - Front-end: React JS, TailwindCSS, AntDesign.

- Cơ sở dữ liệu: MongoDB. - Công cụ phân tích thiết kế: Draw. - Công cụ xây dựng ứng dụng: Visual Studio Code.5 Các yêu cầu của hệ thống STT Tên yêu cầu 1 Hệ thống gửi tin nhắn và hình ảnh 2 Đảm bảo tin nhắn được gửi real-time 3 Hình ảnh có thể gửi qua nhanh chóng 4 Có thể lưu và tìm lại tin nhắn cũ 5 Hỗ trợ kết bạn 6 Có thể gửi các định dạng file phổ thông Bảng 1.1 Danh sách các yêu cầu của hệ thống 13 Chương 2: CƠ SỞ LÍ THUYẾT 2.Biểu tượng của ReactJS Reactjs là một thư viện Javascript mã nguồn mở hỗ trợ xây dựng các thành phần giao diện nhanh gọn và tiện lợi. Bình thường các lập trình viên sẽ nhúng javascript vào code HTML thông qua các attribute như AngularJS nhưng với Reactjs làm việc như một thư viện cho phép nhúng HTML vào javascript thông qua JSX.

Qua đó bạn có thể dễ dàng lồng các đoạn HTML vào trong JSX làm cho các component dễ hiểu và dễ sử dụng hơn. Trong Reactjs thường dùng javascript để thiết kế bố cục cho trang web, nhưng nhược điểm là cấu trúc khá là khó. Thay vào đó sử dụng JSX và nhúng các đoạn HTML vào javascript, ta thấy cú pháp dễ hiểu hơn và JSX cũng có thể tối ưu code khi biên soạn. Vừa dễ cho người lập trình mà vừa tiện cho việc biên dịch.

Các thành phần cơ bản của ReactJS: React được xây dựng xung quanh các component, chứ không dùng template như các framework khác. Trong React, chúng ta xây dựng trang web sử dụng những thành phần 14 (component) nhỏ. Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác. Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái.

Mọi thứ React đều là component. Chúng giúp bảo trì mã code khi làm việc với các dự án lớn. Một react component đơn giản chỉ cần một method render. Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo.

Props và State: - Props: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mô tả những gì component con sẽ render. Prop là bất biến. - State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cập nhật UI. Ưu điểm của ReactJS: - Hiệu quả với DOM ảo.

- Sử dụng JSX giúp việc viêt code dễ dàng hơn. - Công cụ phát triển đa dạng. - Render ở tầng Server. - Hiệu năng cao.

- Linh hoạt, code dễ dàng chỉnh sửa và bảo trì. Nhược điểm của ReactJs: - ReactJs chỉ phục vụ cho tầng view. - Dung lượng ban đầu nặng hơn 1 số framework khác như Angular, Vue ,… - Khó tiếp cận với người mới học web.2 Mô tả về ElectronJS Electron là một framework phần mềm nguồn mở và miễn phí được phát triển và duy trì bởi GitHub. Framework này được thiết kế để tạo các ứng dụng dành cho máy tính để bàn bằng cách sử dụng các công nghệ web được hiển thị bằng phiên bản của công cụ trình duyệt Chromium và sử dụng môi trường runtime của Node.

Với ElectronJS, ứng dụng có thể phát triển và chạy cùng lúc trên nhiều nền tảng khác nhau như Windows, Linux, MacOS, … Ưu điểm của ElectronJS: - Phát triển đa nền tảng. - Dễ dàng tiếp cận cho người mới. - Code dễ dàng bảo trì và sửa chữa. - Tiết kiệm chi phí phát triển phần mềm.

- Có thể tái sử dụng các package từ Node. 16 Nhược điểm của ElectronJS: - Sử dụng nhân Chrominum nên tương đối nặng - Khả năng che giấu dữ liệu chưa tốt 17 2. Biểu tượng của TailwindCSS Tailwind là Framework CSS để phát triển UI nhanh chóng. Tailwind không cung cấp chủ đề mặc định hoặc bất kỳ thành phần UI nào được định nghĩa trước.

Tailwind cung cấp các công cụ để phát triển nhanh chóng, đồng thời cho phép nhà phát triển maintain. Mặc dù không có giới hạn đối với trí tưởng tượng với Tailwind, thiết kế được cấu trúc theo cách để nhà phát triển có thể tạo một quy tắc tự áp đặt để tránh tăng size của CSS hoặc các thuộc tính lặp đi lặp lại. Nhiều framework CSS hiện nay đang chọn hướng tiếp cận là Component first. Đây được xem là hướng tiếp cận theo kiểu đánh nhanh thắng nhanh, người ta sẽ tạo ra các components có sẵn giúp cho các lập trình viên (programmer) sử dụng để hoàn thiện sản phẩm một cách nhanh nhất.

Tuy nhiên vẫn gặp phải nhược điểm là gặp khó khăn trong việc ghi đè các component. 18 Vì vậy, nhiều người chuyển hướng sang sử dụng Tailwind CSS vì sử dụng hướng tiếp cận là Utility-first Framework. Ưu điểm của TailwindCSS: • Người sử dụng có thể chẳng phải viết đến 1 dòng css nào mà vẫn có giao diện tùy biến theo mong muốn. • Style, màu sắc, font chữ hiện đại, phù hợp với phong cách web hiện đại • Cách đặt tên class dễ hiểu, 1 class đại diện cho 1 thuộc tính.

Tailwind CSS có gần như đủ gần 85% thuộc tính css. • Sử dụng Flex nên rất dễ chia Layout • Dễ cài đặt, dễ sử dụng, document của Tailwind rất dễ hiểu. Tailwind CSS phù hợp cho các dự án nhỏ, người dùng tuỳ biến nhiều, cần làm nhanh giao diện. Trong khi nếu bạn Bootstrap mà không tuỳ biến gì thì trong web của bạn sẽ đúng đậm chất Bootstrap.

còn với Tailwind thì khi mỗi người dùng sẽ ra mỗi giao diện khác nhau mà không hề đụng hàng. Nhược điểm của TailwindCSS • Khi sử dụng tailwind thì bạn bạn đang phải sử dụng số class cực kì nhiều, số class sẽ tương ứng với với số thuộc tính mà bạn muốn cài đặt • Khi dùng font-size hoặc màu sắc vẫn đang còn phải custom lại bằng css riêng. • Chưa có những bộ mixin khi muốn thiết lập nhiều thuộc tính cần thiết • Khó làm quen ở giai đoạn mới bắt đầu • Cấu trúc code khó bảo trì nếu dự án phình to 19 2. Biểu tượng của MongoDB MongoDB là một chương trình cơ sở dữ liệu mã nguồn mở được thiết kế theo kiểu hướng đối tượng trong đó các bảng được cấu trúc một cách linh hoạt cho phép các dữ liệu lưu trên bảng không cần phải tuân theo một dạng cấu trúc nhất định nào.

Chính do cấu trúc linh hoạt này nên MongoDB có thể được dùng để lưu trữ các dữ liệu có cấu trúc phức tạp và đa dạng và không cố định (hay còn gọi là Big Data). Ưu điểm của MongoDB: • Ít Schema hơn: MongoDB là một cơ sở dữ liệu dựa trên Document, trong đó một Collection giữ các Document khác nhau. Số trường, nội dung và kích cỡ của Document này có thể khác với Document khác. • Cấu trúc của một đối tượng là rõ ràng.

• Không có các Join phức tạp. • Khả năng truy vấn sâu hơn. MongoDB hỗ trợ các truy vấn động trên các Document bởi sử dụng một ngôn ngữ truy vấn dựa trên Document mà mạnh mẽ như SQL. 20 • MongoDB dễ dàng để mở rộng.

• Việc chuyển đổi/ánh xạ của các đối tượng ứng dụng đến các đối tượng cơ sở dữ liệu là không cần thiết.