Ngoài ra, sự phát triển của trí tuệ nhân tạo đã tạo ra những tiềm năng vô cùng hứa hẹn trong việc tạo ra các ứng dụng thông minh để hỗ trợ người dùng trong việc tư vấn và lựa chọn sản ph
TỔNG QUAN
Nội dung đề tài
Trong thời đại số hóa hiện nay, việc tìm kiếm thông tin và lựa chọn sản phẩm phù hợp đòi hỏi sự tiện lợi và nhanh chóng Đặc biệt, trong lĩnh vực mua sắm thiết bị công nghệ, chẳng hạn như mua laptop, người tiêu dùng thường phải đối mặt với sự phức tạp của thị trường và sự đa dạng của sản phẩm
Ngoài ra, sự phát triển của trí tuệ nhân tạo đã tạo ra những tiềm năng vô cùng hứa hẹn trong việc tạo ra các ứng dụng thông minh để hỗ trợ người dùng trong việc tư vấn và lựa chọn sản phẩm Trong đó, chatbot là một ứng dụng phổ biến của AI, cho phép tương tác với người dùng qua các cuộc trò chuyện tự động.
Lý do chọn đề tài
Đối với nhu cầu thực tế của người tiêu dùng trong thời đại số hóa ngày nay, chúng tôi hiểu rằng việc sắm một chiếc laptop không chỉ là việc mua một sản phẩm, mà còn đòi hỏi sự hiểu biết về công nghệ, cấu hình phù hợp với nhu cầu sử dụng cụ thể, và sự tư vấn từ người có kinh nghiệm
Chúng tôi nhận thấy rằng trí tuệ nhân tạo và chatbot có tiềm năng lớn để giúp người tiêu dùng giải quyết những khó khăn này Với chatbot, ta có thể tạo ra một ứng dụng có khả năng tự tư vấn, đưa ra thông tin chi tiết về sản phẩm, và thậm chí thực hiện các thao tác mua sắm trực tiếp, giúp tiết kiệm thời gian và nâng cao trải nghiệm mua sắm Đặc biệt, sự phát triển của trí tuệ nhân tạo đã đem lại những cơ hội mới để cải thiện hiệu suất của chatbot, làm cho chúng trở nên thông minh và linh hoạt hơn Điều này thúc đẩy chúng tôi quyết định tận dụng tiềm năng của công nghệ này để xây dựng một ứng dụng hữu ích cho cộng đồng người tiêu dùng và đồng thời đóng góp vào sự phát triển của lĩnh vực trí tuệ nhân tạo và thương mại điện tử Ý nghĩa của đề tài này nằm ở việc cung cấp một công cụ hữu ích cho người tiêu dùng, giúp họ tiết kiệm thời gian và công sức trong quá trình mua sắm laptop Ngoài ra,
11 đề tài cũng mang tính ứng dụng cao, thể hiện sự sáng tạo và phát triển trong lĩnh vực công nghệ thông tin và trí tuệ nhân tạo.
Mục tiêu
Mục tiêu chính của đề tài này là xây dựng website ứng dụng trí tuệ nhân tạo hỗ trợ người dung chọn mua laptop phù hợp trên cơ sở sử dụng chatbot Cụ thể, những mục tiêu chính của đề tài bao gồm:
- Xây dựng chatbot có khả năng tương tác với người dùng để tư vấn và đưa ra các lựa chọn sản phẩm laptop dựa trên nhu cầu và mức kinh phí cụ thể
- Cung cấp thông tin chi tiết về các sản phẩm laptop hiện có trên thị trường, bao gồm thông số kỹ thuật, giá cả, và đánh giá từ người dùng
- Tạo ra giao diện thân thiện và dễ sử dụng cho người dùng, giúp họ dễ dàng thao tác và hỏi đáp thông tin.
Phạm vi
Tất cả trình duyệt web trên tất cả hệ điều hành hiện có
▪ Hiểu và phân tích ngôn ngữ tiếng Việt và tiếng Anh
▪ Đối đáp chính xác theo kịch bản
▪ Áp dụng câu trả lời động, chatbot có thể trích xuất từ ngữ, ý chính từ lời thoại do người dùng nhập vào và sử dụng để làm câu trả lời
▪ Chatbot có khả năng xử lý đa dạng những tư vấn của người dùng và theo dõi cuộc trò chuyện của người dùng
▪ Giao diện người dùng trực quan, thân thiện
▪ Dữ liệu được cập nhật theo thời gian thực
▪ Phân chia từng mục tương ứng với từng trường hợp hỏi của người dùng
Tất cả mọi người có nhu cầu mua sắm laptop mới nhưng còn phân vân, hoặc không có nhiều kiến thức công nghệ, hoặc không am hiểu nhiều về thị trường laptop
▪ Làm việc nhóm (2 thành viên) với sự hướng dẫn của giảng viên
▪ Phân tích nhu cầu sử dụng của đối tượng người dùng
▪ Nghiên cứu tài liệu các công nghệ liên quan
▪ Xây dựng giao diện ứng dụng web để người dùng có thể tương tác
▪ Quản lý mã nguồn bằng Github
▪ Quản lý tài liệu bằng Microsoft 365
Kết quả mong đợi
- Chatbot có khả năng hiểu được tiếng Việt và tiếng Anh, đồng thời phản hồi nhanh và chính xác ở mức tương đối
- Dữ liệu được cập nhật theo thời gian thực
- Trang web hoạt động ổn định và có thể xử lý thông tin nhanh chóng
Kế hoạch thực hiện
Thời gian thực hiện từ 11/09/2023 đến ngày báo cáo đồ án 2 theo lịch của khoa Công nghệ Phần mềm Theo đó, kế hoạch thực hiện đồ án được chia thành 5 giai đoạn chính như bên dưới
Bảng 1.1 Kế hoạch thực hiện dự án
Giai đoạn Thời gian Công việc dự kiến
- Biên soạn đề cương chi tiết
- Biên soạn cơ sở lý thuyết
- Lập kế hoạch thực hiện chi tiết cho dự án
- Nghiên cứu tài liệu liên quan đến công nghệ sử dụng để thực hiện đồ án
- Phân tích những sản phẩm tương tự đã xuất hiện trên thị trường
- Biên soạn đề cương chi tiết
- Biên soạn cơ sở lý thuyết
- Lập kế hoạch thực hiện chi tiết cho dự án
- Nghiên cứu tài liệu liên quan đến công nghệ sử dụng để thực hiện đồ án
- Phân tích những sản phẩm tương tự đã xuất hiện trên thị trường
- Xây dựng kịch bản đối đáp
- Xây dựng luồng xử lý sự kiện
- Thử nghiệm và sửa lỗi kịch bản
- Phát triển giao diện cho trang web
- Phát triển chức năng hỏi đáp theo nội dung câu hỏi và câu trả lời có sẵn (chưa có xử lý logic)
- Xử lý ngôn ngữ tự nhiên do người dùng nhập vào
- Xử lý kịch bản hỏi đáp trong ứng dụng
- Kiểm thử và xử lý những lỗi cơ bản, đảm bảo chatbot trả lời được một số câu hỏi cơ bản
Kiểm thử và xử lý những lỗi phát sinh ở nguyên mẫu
- Tiếp tục tối ưu cho kết quả trả về
- Nghiên cứu tìm hiểu thêm công nghệ để áp dụng nhằm tối ưu hiệu suất và độ tin cậy của kết quả trả về
Kiểm thử lại toàn bộ chức năng
- Áp dụng những công nghệ đã nghiên cứu để tối ưu sản phẩm nếu có
- Tối ưu lại giao diện người dùng và xử lý lỗi logic nếu có
- Kiểm duyệt lại sản phẩm lần cuối và sửa lỗi nếu có
- Chỉnh sửa báo cáo cho khớp với sản phẩm
CƠ SỞ LÝ THUYẾT
Trí tuệ nhân tạo tạo sinh
Hình 2.1 Google giới thiệu khái niệm Generative AI
Generative AI (hay “trí tuệ nhân tạo tạo sinh”) là một nhánh của trí tuệ nhân tạo tập trung vào việc tạo ra dữ liệu hoặc nội dung mới từ đầu Không giống như các thuật toán học máy thông thường, Generative AI có khả năng tạo ra dữ liệu mới không tồn tại trước đó, bao gồm hình ảnh, văn bản, âm nhạc và thậm chí cả mã máy tính
Generative AI hoạt động dựa trên các mô hình học máy được huấn luyện trên một lượng lớn dữ liệu Khi được cung cấp một đầu vào nhất định, chẳng hạn như một mô tả văn bản hoặc một tập hợp các hình ảnh, mô hình Generative AI có thể tạo ra dữ liệu hoặc nội dung mới có phong cách và chất lượng tương tự như dữ liệu đã được huấn luyện
Những năng lực chính mà Generative AI có bao gồm:
- Tạo văn bản: Generative AI có khả năng tạo văn bản giống như con người, bao gồm các bài báo, truyện ngắn, thơ và thậm chí cả mã máy tính Điều này có thể được sử dụng để tạo nội dung cho các trang web, blog, phương tiện truyền thông xã hội và các nền tảng khác
- Tạo hình ảnh: Generative AI có thể được sử dụng để tạo hình ảnh chân thực, bao gồm cả ảnh chân dung, phong cảnh và đồ họa trừu tượng Điều này có thể được sử dụng trong trò chơi, phim ảnh, phương tiện truyền thông xã hội và các ứng dụng khác
- Tạo video: Generative AI có thể được sử dụng để tạo video, bao gồm cả phim ngắn, quảng cáo và video hướng dẫn Điều này có thể được sử dụng cho tiếp thị, giáo dục và giải trí
Tuy rằng Generative AI có thể tự tạo ra nội dung, nhưng nội dung này thường thiếu sự sáng tạo thực sự Đây là một thách thức lớn đối với các doanh nghiệp và cá nhân muốn sử dụng Generative AI để tạo ra nội dung độc đáo và hấp dẫn Ngoài ra, Generative
AI có thể bị thiên vị do dữ liệu mà nó được đào tạo Điều này có thể dẫn đến việc tạo ra nội dung thiên vị hoặc phân biệt đối xử.
Node.js
Hình 2.2 Logo của Node.js
Node.js là một nền tảng phát triển phía máy chủ (server-side) được xây dựng dựa trên JavaScript Với Node.js, người phát triển có thể xây dựng các ứng dụng mạng đa nền tảng một cách dễ dàng và hiệu quả
2.2.2 Một số chức năng chính
Node.js sử dụng mô hình sự kiện (event-driven) và cơ chế non-blocking I/O để cho phép xử lý đa nhiệm hiệu quả Một trong những điểm mạnh của Node.js là có thể quản lý các ứng dụng web thời gian thực một cách hiệu quả Với Node.js, ta có thể xây dựng ứng dụng trò chuyện, ứng dụng phát sóng trực tiếp, ứng dụng cập nhật dữ liệu theo thời gian thực, Ngoài ra, Node.js thường được sử dụng để phát triển microservices nhờ khả năng mở rộng và xử lý các yêu cầu nhỏ đồng thời
Node.js có một hệ sinh thái mở rộng đáng kinh ngạc, được gọi là npm (Node Package Manager) Npm cho phép người phát triển truy cập vào hàng ngàn các gói mã nguồn mở đã được phát triển trước đó để tăng tốc quá trình phát triển Người dùng có thể tìm kiếm, cài đặt và quản lý các gói này một cách dễ dàng.
Express.js
Hình 2.3 Logo của Express.js
Express.js là một framework phát triển ứng dụng web phía máy chủ (server-side) dựa trên Node.js Được xem là một trong những framework phổ biến nhất cho Node.js, Express.js giúp đơn giản hóa việc xây dựng các ứng dụng web một cách nhanh chóng và dễ dàng Với Express.js, chúng ta có thể xây dựng các ứng dụng web độc lập, ứng dụng API (Application Programming Interface), và thậm chí là các ứng dụng web đa trang phức tạp
Một số chức năng chính của Express.js:
- Routing: Express cung cấp một hệ thống định tuyến (routing) để quản lý các yêu cầu HTTP đến các đường dẫn cụ thể trên ứng dụng
- Middleware: Middleware là các hàm chạy giữa quá trình xử lý yêu cầu và phản hồi Express sử dụng middleware để thực hiện các chức năng như xác thực, xử lý lỗi, và ghi log
- HTTP Utility Methods: Express hỗ trợ các phương thức HTTP như GET, POST, PUT, DELETE, và nhiều phương thức khác, giúp quản lý và xử lý các loại yêu cầu khác nhau
- Templating Engines: Express không bắt buộc sử dụng một hệ thống template cụ thể, nhưng nó tích hợp tốt với nhiều hệ thống template engine như EJS, Pug, Handlebars, cho phép bạn render HTML dễ dàng
- Static File Serving: Express có khả năng phục vụ các tệp tĩnh như hình ảnh, CSS, và JavaScript mà không cần cấu hình thêm
- RESTful API Development: Express thường được sử dụng để phát triển API RESTful Nó cung cấp các công cụ và quy tắc giúp tổ chức mã nguồn và xử lý yêu cầu API
- Error Handling: Express có các cơ chế xử lý lỗi tích hợp, giúp bạn quản lý và xử lý các lỗi trong quá trình xử lý yêu cầu
- View System: Mặc dù không bắt buộc, Express có thể được cấu hình để sử dụng hệ thống template để dễ dàng tạo và render trang HTML
- Session Management: Express hỗ trợ quản lý phiên thông qua các middleware như express-session, giúp duy trì trạng thái phiên giữa các yêu cầu
- Integration with Database: Express không đặt ra giới hạn về việc sử dụng cơ sở dữ liệu Bạn có thể tích hợp nó dễ dàng với nhiều cơ sở dữ liệu như MongoDB, MySQL, PostgreSQL
- Security Middleware: Express có thể sử dụng các middleware để bảo vệ ứng dụng khỏi các tấn công như CSRF (Cross-Site Request Forgery) và XSS (Cross-Site Scripting)
- WebSocket Support: Mặc dù không tích hợp sẵn, nhưng có thể tích hợp dễ dàng với WebSocket để hỗ trợ giao tiếp real-time hai chiều giữa máy chủ và trình duyệt.
React
React là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook để xây dựng User Interface (UI) cho các ứng dụng web Nó được ra mắt lần đầu vào năm 2013 và đã nhận được sự yêu thích và sự lan rộng rãi từ đó React cho phép nhà phát triển tạo ra các UI component có thể tái sử dụng, cập nhật và hiển thị chúng một cách hiệu quả khi state của ứng dụng thay đổi
- DOM ảo (Virtual DOM): React sử dụng một DOM ảo (Virtual DOM) để tối ưu hóa hiệu suất hiển thị DOM ảo là một phiên bản nhẹ của DOM thực tế, và React sử dụng nó để theo dõi các thay đổi và cập nhật chỉ các phần cần thiết của UI
- JSX: JSX (JavaScript XML) là một cú pháp mở rộng được sử dụng trong React để viết mã tương tự HTML trực tiếp trong JavaScript JSX cho phép kết hợp HTML và JavaScript một cách khai báo và trực quan hơn
- Luồng dữ liệu một chiều (Uni-directional Data Flow): React tuân theo một luồng dữ liệu một chiều, còn được gọi là one-way data binding Điều này có nghĩa là dữ liệu chảy từ các component cha tới các component con thông qua các thuộc tính (props), và bất kỳ thay đổi trong các thành phần con không ảnh hưởng trực tiếp đến các thành phần cha Phương pháp này giúp quản lý trạng thái ứng dụng một cách dễ dàng và giúp việc gỡ lỗi và hiểu mã nguồn dễ dàng hơn
- React Hooks: Được giới thiệu từ phiên bản React 16.8, React Hooks là các hàm cho phép sử dụng trạng thái và các tính năng React khác trong các functional component Hooks cho phép các functional component có trạng thái cục bộ, quản lý các hiệu ứng phụ (side effects) và tận dụng các lifecycle method của React mà không cần sử dụng các class component
- React Router: React Router là một thư viện phổ biến cung cấp tính năng định tuyến (routing) khai báo cho các ứng dụng React Nó cho phép định nghĩa các đường dẫn khác nhau và các thành phần tương ứng của chúng, giúp điều hướng giữa các giao diện khác nhau trong một ứng dụng đơn trang (single-page application)
Material UI
Hình 2.5 Logo của Material UI
Material UI (hay MUI) là một thư viện UI component phổ biến để xây dụng ứng dụng React Được xây dựng dựa trên hướng dẫn thiết kế Material Design của Google, MUI cung cấp một tập hợp các component có thể tái sử dụng và có thể tùy chỉnh để tạo giao diện người dùng hiện đại và bắt mắt
- Hệ thống component đa dạng: MUI cung cấp các bộ components phong phú, đáp ứng nhiều yêu cầu về UI Bao gồm các component như Button, TextField, Drawers, Dialog, Card, Table, Các component này được thiết kế linh hoạt, có thể tùy chỉnh
- Hỗ trợ nhiều tùy chỉnh và giao diện: MUI cung cấp một hệ thống tùy chỉnh mạnh mẽ cho phép dễ dàng tùy chỉnh giao diện của ứng dụng Chúng ta có thể tùy chỉnh màu sắc, kiểu chữ, khoảng cách và các yếu tố khác để phù hợp với thiết kế Bên cạnh đó MUI cũng cung cấp các giao diện mẫu để xây dựng giao diện nhanh chóng
Hình 2.6 Một số mẫu của sẵn của MUI
- Hỗ trợ tốt responsive: Các component của MUI được thiết kế để đáp ứng và hoạt động tốt trên các kích thước màn hình và thiết bị khác nhau
- Hỗ trợ Theme và Styling: MUI cung cấp chủ đề tùy chỉnh và hỗ trợ styling thông qua JSS (JavaScript Style Sheets) để điều chỉnh giao diện theo nhu cầu cụ thể của ứng dụng
Redux
Redux là một thư viện quản lý trạng thái ứng dụng trong JavaScript Nó được sử dụng chủ yếu trong các ứng dụng React, nhưng cũng có thể được sử dụng trong các framework JavaScript khác hoặc ngữ cảnh không liên quan đến React
Redux giúp quản lý trạng thái ứng dụng một cách dễ dàng Nó áp dụng kiến trúc Flux, nơi dữ liệu trong ứng dụng được lưu trữ trong một "store" duy nhất Trạng thái của ứng dụng chỉ có thể được thay đổi thông qua các "actions", và các hành động này được xử lý bởi các "reducer" Dưới đây là một số khái niệm quan trọng trong Redux:
- Store: lưu trạng thái ứng dụng và nó là duy nhất trong bất kỳ một ứng dụng Redux nào Có thể access các state được lưu, update state, và đăng ký or hủy đăng ký các listeners thông qua helper methods
- Action: đơn giản là các events Chúng là cách mà chúng ta send data từ app đến Redux store Những data này có thể là từ sự tương tác của user vs app, API calls hoặc cũng có thể là từ form submission
- Reducer: là các function nguyên thủy chúng lấy state hiện tại của app, thực hiện một action và trả về một state mới Những states này được lưu như những objects và chúng định rõ cách state của một ứng dụng thay đổi trong việc phản hồi một action được gửi đến store
Hình 2.8 Kiến trúc của Redux
Một số thông tin thêm về Redux:
- Redux Toolkit là một thư viện được cung cấp bởi Redux để giúp đơn giản hóa quá trình viết Redux và giảm thiểu công việc lặp lại trong việc cấu hình Redux Nó cung cấp một số tiện ích và các hàm giúp tăng hiệu suất và làm cho việc sử dụng Redux dễ dàng hơn
- Redux Saga là một middleware cho Redux, được sử dụng để xử lý các tác vụ bất đồng bộ (asynchronous) và side effects trong ứng dụng Redux Nó giúp quản lý và điều khiển các tác vụ phức tạp như gọi API, xử lý dữ liệu từ xa, đồng bộ hóa dữ liệu, xử lý đa luồng (concurrency), …
- Redux Thunk là một middleware cho Redux, cho phép xử lý các hành động (actions) bất đồng bộ trong ứng dụng Redux Nó giúp quản lý các tác vụ không đồng bộ như gọi API, xử lý các yêu cầu AJAX, hoặc thực hiện các tác vụ bất đồng bộ khác một cách dễ dàng và có cấu trúc
REST API
Hình 2.9 Minh họa cơ chế hoạt động của REST API
REST API (Representational State Transfer Application Programming Interface) là một kiểu kiến trúc phần mềm phổ biến dựa trên giao thức HTTP để cho phép các ứng dụng giao tiếp và trao đổi dữ liệu với nhau REST API được thiết kế nhằm tạo ra các dịch vụ web linh hoạt, đơn giản và dễ dùng
Một số chức năng chính của REST API có thể kể đến gồm có:
- Truy vấn dữ liệu: REST API cho phép người dùng truy cập và lấy thông tin từ cơ sở dữ liệu hoặc hệ thống khác thông qua các yêu cầu HTTP như GET Người dùng có thể yêu cầu các tài nguyên nhất định và nhận về dữ liệu được trả về dưới định dạng JSON hoặc XML
- Thay đổi dữ liệu: REST API cung cấp phương thức như POST, PUT và DELETE để thay đổi hoặc xóa dữ liệu từ cơ sở dữ liệu hoặc hệ thống khác Người dùng có thể thêm mới, cập nhật hoặc xóa bỏ tài nguyên thông qua các yêu cầu này
- Quản lý phiên: REST API cung cấp công cụ để quản lý phiên đăng nhập khi cần thiết Người dùng có thể đăng nhập và nhận mã thông báo truy cập để xác thực các yêu cầu tiếp theo
- Xử lý lỗi: REST API thông báo về lỗi hoặc ngoại lệ xảy ra trong quá trình xử lý yêu cầu thông qua các mã trạng thái HTTP như 404 (Not Found) hoặc 500 (Internal Server Error).
Gemini
Gemini là một nhóm các mô hình ngôn ngữ lớn, đa nhiệm được phát triển bởi Google
AI Các mô hình này được đào tạo trên một tập dữ liệu khổng lồ gồm văn bản và mã, và có thể thực hiện nhiều loại nhiệm vụ, bao gồm:
- Hiểu và trả lời các câu hỏi
- Dịch giữa các ngôn ngữ
- Viết các định dạng văn bản sáng tạo khác nhau
- Tổng hợp các định dạng văn bản khác nhau
- Trả lời các câu hỏi về các chủ đề cụ thể
Nguồn dữ liệu
Hình 2.11 Một trong những kênh úy tín về laptop
YouTube là một nguồn dữ liệu quý báu với hàng tỷ video trực tuyến, bao gồm đánh giá laptop từ các kênh uy tín và chuyên nghiệp Các video này không chỉ cung cấp cái nhìn trực quan về sản phẩm mà còn đem lại trải nghiệm thực tế và đa dạng thông tin về các dòng laptop trên thị trường Điều này giúp người xem hiểu rõ hơn về sản phẩm, từ đó đưa ra quyết định mua hàng thông minh và chính xác dựa trên thông tin đáng tin cậy từ YouTube Sự đa dạng và chi tiết của nguồn dữ liệu này giúp người dùng có cái nhìn toàn diện và khách quan về laptop trước khi quyết định mua sản phẩm
Hình 2.12 Kết quả tìm kiếm từ Google Shopping
Google Shopping là một nguồn dữ liệu quan trọng cung cấp thông tin về các sản phẩm laptop từ nhiều nhà bán lẻ trên internet Nền tảng này cho phép người dùng tìm kiếm và so sánh giá cả, đánh giá của sản phẩm từ nhiều nguồn khác nhau, giúp họ có quyết định mua hàng thông minh và hiệu quả
Thông tin về laptop trên Google Shopping bao gồm mô tả chi tiết về sản phẩm, thông số kỹ thuật, hình ảnh, và đánh giá từ người dùng Người dùng có thể tìm kiếm laptop theo nhiều tiêu chí như thương hiệu, mức giá, cấu hình kỹ thuật, hay đánh giá từ người dùng khác
Tính năng tìm kiếm laptop dựa trên Google Shopping sẽ cung cấp sự thuận tiện và linh hoạt cho người dùng khi họ muốn tìm kiếm thông tin về các sản phẩm laptop trên thị trường Bằng cách so sánh giá cả, tính năng này giúp người dùng tìm ra sản phẩm phù hợp với nhu cầu và ngân sách của họ, dựa trên thông tin rõ ràng và đáng tin cậy từ Google Shopping
Hình 2.13 Minh họa Google Maps
Google Maps là một nguồn dữ liệu địa lý mạnh mẽ, cung cấp thông tin về vị trí các cửa hàng bán laptop dựa trên dữ liệu địa lý và định vị GPS Nền tảng này cho phép người dùng dễ dàng tìm kiếm và xác định vị trí của các cửa hàng laptop trong khu vực hoặc vị trí cụ thể
Tính năng tìm kiếm cửa hàng laptop dựa trên Google Maps giúp người dùng dễ dàng xác định vị trí các cửa hàng bán laptop gần họ nhất Việc này tạo điều kiện thuận lợi cho người dùng khi muốn xem trực tiếp, trải nghiệm sản phẩm trước khi quyết định mua hàng Thông qua thông tin từ Google Maps, người dùng có thể tìm ra cửa hàng phù hợp và tiện lợi nhất để mua laptop theo nhu cầu của họ
SerpApi là một dịch vụ API (Application Programming Interface) cho phép bạn truy xuất dữ liệu từ kết quả tìm kiếm trên các công cụ tìm kiếm như Google, Bing, Yahoo và nhiều nền tảng khác Bằng cách sử dụng SerpApi, bạn có thể lấy thông tin từ kết quả tìm kiếm, chẳng hạn như tiêu đề, URL, mô tả và các đặc trưng đặc biệt khác từ trang kết quả Các tính năng chính của SerpApi bao gồm:
- Truy xuất dữ liệu kết quả tìm kiếm: SerpApi cho phép truy xuất dữ liệu như tiêu đề, URL, mô tả, đánh giá sao, và các đặc điểm khác từ trang kết quả của các công cụ tìm kiếm
- Hỗ trợ nhiều nền tảng tìm kiếm: Dịch vụ này hỗ trợ truy xuất dữ liệu từ nhiều công cụ tìm kiếm như Google, Bing, Yahoo, Baidu, Yandex và nhiều công cụ khác
- Tự động cập nhật và duy trì: SerpApi luôn cập nhật và duy trì các kịch bản truy xuất dữ liệu để đảm bảo tính ổn định và chất lượng dữ liệu cao
- Hỗ trợ các ngôn ngữ lập trình phổ biến: Dịch vụ này hỗ trợ nhiều ngôn ngữ lập trình như Python, JavaScript, PHP, Ruby, và cả C#
THIẾT KẾ HỆ THỐNG
Phân tích use case
Hình 3.1 Sơ đồ use case
Sơ đồ này minh họa cách người dùng tương tác với các tính năng trên trang web, bao gồm truy cập bảng tin để xem các tin tức mới nhất về thị trường laptop, xem các bài đánh giá và video cũng như tương tác với chatbot để nhận được lời khuyên và thông tin được cá nhân hóa về laptop, từ đó chọn ra chiếc máy phù hợp
Bảng 3.1 Bảng đặc tả use case
Xem danh sách tin tức mới nhất về thị trường laptop
• Người dùng truy cập vào phần tin tức trên trang web
• Hệ thống hiển thị danh sách các tin tức mới nhất về thị trường laptop Chọn Tin Tức để Xem Chi Tiết
• Người dùng chọn một trong các tin tức được hiển thị
• Hệ thống mở trang chi tiết cho tin tức được chọn, hiển thị nội dung đầy đủ của tin tức đó
Tìm kiếm và xem trực tiếp video đánh giá về laptop
Tìm Kiếm Đánh Giá và Video
• Người dùng nhập từ khóa tìm kiếm hoặc chọn từ danh sách các đánh giá và video
• Hệ thống hiển thị kết quả liên quan đến từ khóa hoặc danh sách các đánh giá và video
• Người dùng chọn một video để xem chi tiết
• Hệ thống mở video trong trình xem video trực tuyến hoặc trang chi tiết đánh giá
Tương tác với chatbot để tìm kiếm thông tin về laptop, làm rõ nhu cầu, tìm nơi mua laptop phù hợp và nhận lời khuyên
• Người dùng mở chatbot từ giao diện trang web
Tìm Kiếm Thông Tin về Laptop
• Người dùng nhập tên laptop hoặc nhu cầu của họ
• Chatbot trả về thông tin liên quan, cung cấp các lựa chọn hoặc hỏi thêm để hiểu rõ nhu cầu
Lời Khuyên và Hỗ Trợ Mua Sắm
• Dựa trên thông tin cung cấp, chatbot đề xuất laptop phù hợp và cung cấp thông tin về nơi mua
• Người dùng có thể yêu cầu hỗ trợ thêm hoặc lựa chọn mua laptop
Mỗi use case đều mô tả một tác vụ cụ thể mà người dùng có thể thực hiện khi sử dụng trang web, từ việc đọc tin tức, xem đánh giá, tìm kiếm thông tin, đến tương tác với chatbot để nhận được hỗ trợ và lời khuyên khi chọn mua laptop
Kiến trúc hệ thống
Hình 3.2 Minh họa mô hình Client – Server
LapTeller được xây dựng theo mô hình Client – Server Dưới đây là mô tả tổng quát về mô hình này:
- Client: Trang web mà người dùng tương tác trực tiếp, phụ trách tiếp nhận hành vi của người dùng rồi gửi yêu cầu xử lý đến các Server để xử lý và nhận về dữ liệu
▪ Đại diện cho người dùng cuối, thường là ứng dụng hoặc giao diện người dùng
▪ Gửi yêu cầu của mình đến Server thông qua một giao thức truyền tải
- Server: Trung tâm xử lý, phụ trách xử lý các yêu cầu từ Client và trả về kết quả tương ứng Server cũng quản lý tài nguyên, bảo mật và duy trì phiên làm việc với client
▪ Server nhận yêu cầu từ Client thông qua giao thức truyền tải
▪ Server xử lý yêu cầu trả về phản hồi
- Kênh giao tiếp: Client và Server giao tiếp với nhau thông qua REST API.
Tính năng của sản phẩm
3.3.1 Xem video review sản phẩm
Tính năng xem video đánh giá sản phẩm sẽ cung cấp cho người dùng trải nghiệm xem những video đánh giá laptop từ các kênh uy tín trên YouTube Đây là một chức năng quan trọng giúp người dùng có cái nhìn trực quan và thực tế về các sản phẩm Người dùng có thể nhập tên hoặc laptop mà họ quan tâm vào hộp tìm kiếm Hệ thống sẽ truy vấn các kênh uy tín trên YouTube để tìm các video đánh giá tương ứng Các kết quả sẽ được hiển thị dưới dạng danh sách, bao gồm các video đánh giá liên quan đến
35 laptop được tìm kiếm Hệ thống sẽ chỉ hiển thị video từ những kênh uy tín và đáng tin cậy trên YouTube Điều này đảm bảo rằng người dùng chỉ nhận được thông tin chất lượng và khách quan về sản phẩm Ngoài ra, người dùng có thể nhấn vào video để xem nội dung đánh giá Video sẽ được phát trực tiếp trên trang web, cung cấp tiện ích và tiết kiệm thời gian cho người dùng
Bên cạnh việc tìm kiếm theo yêu cầu, trang web cũng tự đề xuất các video đánh giá phổ biến, được xem nhiều hoặc có liên quan đến sản phẩm người dùng đang xem Tóm lại, tính năng này cung cấp nguồn thông tin đáng tin cậy và trực quan nhằm giúp người dùng hiểu rõ hơn về mẫu laptop mà họ quan tâm trước khi quyết định mua
3.3.2 Theo dõi tin tức thị trường laptop
Tính năng trang tin tức về thị trường laptop sẽ cung cấp cho người dùng một nguồn thông tin đáng tin cậy về các tin tức mới nhất liên quan đến thị trường laptop Dữ liệu tin tức sẽ được lấy từ các nguồn uy tín trên Google News
Trang web sẽ hiển thị một danh sách các tin tức mới nhất về thị trường laptop, bao gồm thông tin về các sản phẩm mới, xu hướng, tin tức công nghệ và các sự kiện quan trọng Người dùng có thể nhấp vào mỗi tiêu đề tin tức để đọc bài viết chi tiết trực tiếp trên trang web hoặc được định hướng đến trang nguồn để đọc tin tức đầy đủ Ngoài ra, dữ liệu tin tức cũng được cập nhật liên tục để đảm bảo người dùng luôn có được thông tin mới nhất và đáng tin cậy về thị trường laptop
Tóm lại, tính năng này cung cấp nguồn thông tin đa dạng và phong phú về thị trường laptop, giúp người dùng cập nhật với những diễn biến mới nhất trong ngành công nghiệp này sản xuất linh kiện máy tính nói chung và ngành kinh doanh laptop nói riêng
Tính năng chatbot là một công cụ hữu ích giúp người dùng nhận được tư vấn chuyên sâu về việc chọn mua laptop một cách khách quan và thông tin phong phú
Chatbot sẽ có khả năng tư vấn người dùng về việc chọn mua laptop phù hợp với nhu cầu cụ thể của họ Chatbot sẽ hỏi về mục tiêu sử dụng, ngân sách, yêu cầu kỹ thuật và sở thích cá nhân để đưa ra các gợi ý phù hợp Dựa trên thông tin được cung cấp từ người dùng, chatbot sẽ đề xuất các lựa chọn laptop tối ưu nhất, phù hợp với nhu cầu và mong muốn của họ Ngoài việc tư vấn chọn mua, chatbot cũng có khả năng trả lời các câu hỏi cụ thể về các tính năng kỹ thuật, giá cả, thương hiệu, và các chủ đề liên quan đến laptop Tóm lại, tính năng này giúp người dùng có được lựa chọn tốt nhất cũng như những lời khuyên khách quan nhất khi mua laptop, thông qua việc tư vấn chuyên sâu và khách quan từ chatbot
Hình 3.3 Giao diện của OpenStreetMap
OpenStreetMap (OSM) là một dự án cộng đồng toàn cầu nhằm tạo ra bản đồ địa lý mở, tự do và có thể sử dụng mọi nơi trên thế giới Nó hoạt động dựa trên cộng đồng người dùng, người tham gia cung cấp thông tin địa lý, sửa đổi bản đồ và duy trì nền tảng OSM
- Nguyên lý hoạt động của OpenStreetMap:
▪ Thu thập dữ liệu: Cộng đồng người dùng OpenStreetMap sử dụng nhiều phương tiện khác nhau như GPS, ảnh vệ tinh, hay thậm chí là bản đồ giấy để thu thập dữ liệu địa lý
▪ Sửa đổi bản đồ: Dữ liệu được cộng đồng nhập vào hệ thống thông qua giao diện web hoặc ứng dụng đặc biệt để chỉnh sửa, bổ sung thông tin về địa điểm, đường phố, điểm đặc biệt, v.v
▪ Phân loại và kiểm duyệt: Sau khi dữ liệu được đưa vào, người tham gia có thể kiểm tra, xác nhận hoặc chỉnh sửa dữ liệu để đảm bảo tính chính xác và đồng nhất của bản đồ
▪ Xuất bản và sử dụng: Dữ liệu được công bố công khai và có thể được sử dụng miễn phí cho các mục đích khác nhau, từ ứng dụng điều hướng đến việc phát triển các ứng dụng dựa trên bản đồ
▪ Tự do và mở: Dữ liệu trong OSM có thể sử dụng miễn phí, thậm chí cho các mục đích thương mại
▪ Cộng đồng: OSM dựa trên sức mạnh của cộng đồng người dùng để cung cấp và duy trì thông tin địa lý
▪ Khả năng tùy chỉnh cao: Bạn có thể tải xuống dữ liệu và tùy chỉnh theo nhu cầu cụ thể của dự án hoặc ứng dụng của bạn
Thiết kế dữ liệu
Với mục đích xử lý nhanh, thuận tiện cho việc mở rộng cũng như tùy biến dữ liệu, nên nhóm quyết định sử dụng dữ liệu dạng NoSQL cho ứng dụng Sau đây là những bảng phân tích dữ liệu được sử dụng
Bảng 3.2 Bảng dữ liệu phản hồi từ chatbot
Thứ tự Trường dữ liệu Mô tả trường dữ liệu
1 Answer Câu trả lời của chatbot
2 Products Danh sách sản phẩm được đề xuất
Bảng 3.3 Bảng dữ liệu tin tức
Thứ tự Trường dữ liệu Mô tả trường dữ liệu
1 Tittle Tiêu đề tin tức
2 Thumbnail URL Link ảnh bìa tin tức
3 Description Mô tả ngắn tin tức
4 News URL Link đến tin tức
5 Publish Date Ngày đăng tin
Bảng 3.4 Bảng dữ liệu video review
Thứ tự Trường dữ liệu Mô tả trường dữ liệu
2 Thumbnail URL Link ảnh bìa video
3 Video ID YouTube ID của video
4 Channel Tên kênh YouTube đăng video
5 Publish Time Thời gian đăng video
Bảng 3.5 Bảng dữ liệu cấu hình sản phẩm
Thứ tự Trường dữ liệu Mô tả trường dữ liệu
1 Product Name Tên sản phẩm
2 Screen Size Kích thước màn hình
Bảng 3.6 Bảng dữ liệu chi tiết sản phẩm
Thứ tự Trường dữ liệu Mô tả trường dữ liệu
2 Store Name Tên cửa hàng
3 Condition Tình trạng sản phẩm (mới hoặc cũ)
4 Rating Đánh giá cửa hàng bán
5 Reviews Số lượng đánh giá cửa hàng bán
6 Product URL Link mua sản phẩm
Bảng 3.7 Bảng dữ liệu chi tiết cửa hàng
Thứ tự Trường dữ liệu Mô tả trường dữ liệu
1 Phone Number Số điện thoại chi nhánh cửa hàng
2 Status Tình trạng cửa hàng (đóng/mở cửa)
3 Direction Link chỉ đường của Google Maps đến chi nhánh
4 Geography Tọa độ của chi nhánh trên Google Maps
5 Rating Đánh giá chi nhánh
XÂY DỰNG ỨNG DỤNG
Danh sách màn hình
Bảng 4.1 Danh sách màn hình
Thứ tự Tên màn hình Chú giải
Hiển thị danh sách các video review về laptop Người dùng có thể tiến hành tìm kiếm các video review về sản phẩm mình quan tâm cũng như xem video đó
Hiển thị danh sách các tin tức mới nhất về laptop Người dùng có thể truy cập vào các trang web tương ứng để tìm hiểu thêm thông tin về tin tức đó
Người dùng thực hiện việc hỏi đáp về laptop với chatbot
Chatbot có thể thực hiện các chức năng:
• Những câu hỏi tư vấn về laptop như: màn hình là gì?, cần phải chú ý điều gì khi mua laptop?, hệ điều hành nào tốt hơn, …
• Gợi ý những sản phẩm phù hợp với nhu cầu sử dụng của người dùng
• Tìm kiếm thông tin với hình ảnh có nội dung về laptop
4 Màn hình bản đồ chi nhánh
Hiển thị các chi nhánh của cửa hàng mà người dùng quan tâm Có hướng dẫn chỉ đường nếu người dùng có nhu cầu
Chi tiết màn hình
4.2.1 Màn hình video review sản phẩm
Hình 4.1 Màn hình trang xem video review sản phẩm
Giao diện của màn hình xem video laptop được thiết kế đơn giản và dễ sử dụng Ở đầu trang, có một thanh tìm kiếm để người dùng có thể tìm kiếm video về laptop mà họ muốn xem Bên dưới thanh tìm kiếm là một danh sách các video phổ biến nhất Mỗi video đều có một tiêu đề, mô tả và hình thu nhỏ Người dùng có thể nhấp vào một video để xem mà không bị dính quảng cáo từ YouTube
Hình 4.2 Màn hình hiển thị video
Hình 4.3 Màn hình tin tức về laptop
Giao diện của tính năng này rất đơn giản và dễ sử dụng Ở đầu trang, có một tiêu đề lớn với nội dung là "News" (tin tức) Bên dưới tiêu đề là một danh sách các bài viết tin tức về thị trường laptop Mỗi bài viết tin tức đều có một tiêu đề, mô tả và hình ảnh đại diện Người dùng có thể nhấp vào một bài viết tin tức để đọc chi tiết hơn Người dùng có thể nhấp vào một danh mục để xem tất cả các bài viết tin tức trong danh mục đó
Hình 4.4 Một trang tin tức công nghệ
Tại đây, người dùng có thể trò chuyện cùng chatbot, hỏi bất kỳ câu hỏi nào liên quan đến laptop và chatbot sẽ giúp giải đáp Ngoài ra, khi người dùng chọn sản phẩm, họ có thể xem thông tin chi tiết của sản phẩm, bao gồm cấu hình máy, hình minh họa, và những nơi có thể mua, đồng thời có thể truy cập trực tiếp link mua hàng
Hình 4.6 Một đoạn trò chuyện với chatbot
Người dùng có thể nhập câu hỏi của mình vào hộp chat ở cuối trang và chatbot sẽ trả lời Chatbot được thiết kế để trả lời các câu hỏi về laptop Người dùng có thể hỏi chatbot về các loại laptop khác nhau, giá cả, cấu hình, hiệu năng, thời lượng pin, v.v Chatbot sẽ trả lời các câu hỏi của người dùng một cách nhanh chóng và chính xác
Hình 4.7 Tìm kiếm thông tin sản phẩm bằng chatbot
Ngoài ra, chatbot còn có thể giúp người dùng tìm kiếm thông tin về laptop Người dùng có thể nhập từ khóa vào hộp chat và chatbot sẽ tìm kiếm thông tin về laptop đó trên internet Chatbot sẽ trả về cho người dùng một danh sách các kết quả tìm kiếm Người dùng có thể nhấp vào một kết quả tìm kiếm để xem chi tiết hơn
Hình 4.8 Màn hình chi tiết sản phẩm và danh sách nơi mua
Bên cạnh đó có hỗ trợ tra cứu với URL hình ảnh khi người dùng nhập bật switch image search sẽ hiển thị thêm một hộp chữ để người dùng nhập URL của hình ảnh muốn tra cứu và nhập câu hỏi muốn hỏi về hình ảnh đó
Hình 4.9 Hỏi chatbot về hình ảnh
4.2.4 Màn hình bản đồ chi nhánh
Khi người dùng nhấn vào “Go to shop” sẽ dẫn đến trang bản đồ Ở đây hiển thị các chi nhánh của cửa hàng mà người dùng quan tâm Khi người dùng bấm vào biểu tượng con người bên trái sẽ hiển thị vị trí hiện tại của người dùng Từ đó người dùng có thể đánh giá vị trí địa lý để chọn cửa hàng phù hợp
Hình 4.10 Màn hình bản đồ chi nhánh
Khi bấm vào một chi nhánh sẽ hiện thông tin gồm số điện thoại và trạng thái của cửa hàng đang mở cửa hoặc đóng cửa Khi người dùng bấm vào số điện thoại sẽ thực hiện có thể mở app gọi điện
Hình 4.11 Màn hình thông tin của chi nhánh
Khi người dùng chọn “Directions” sẽ mở Google Map chỉ đường từ vị trí hiện tại đến chi nhánh cửa hàng đã được chọn trước đó
Hình 4.12 Màn hình Google Maps dẫn đường đến cửa hàng
Giao diện web linh động
Đối với trang web này, chúng em thiết kế để giao diện người dùng có thể tương thích với tất cả hệ điều hành và tất cả màn hình thiết bị, nhằm tối ưu trải nghiệm người dùng
4.3.1 Giao diện trên điện thoại
Hình 4.13 Màn hình chatbot trên điện thoại
Hình 4.14 Màn hình bản đồ chi nhánh trên điện thoại
Hình 4.15 Màn hình video review trên điện thoại
Hình 4.16 Màn hình tin tức trên điện thoại
4.3.2 Giao diện trên máy tính bảng
Hình 4.17 Màn hình tin tức trên máy tính bảng
Hình 4.18 Màn hình video review trên máy tính bảng
Hình 4.19 Xem video trên máy tính bảng
Hình 4.20 Màn hình chatbot trên máy tính bảng
Hình 4.21 Màn hình chi tiết sản phẩm trên máy tính bảng
Hình 4.22 Màn hình bản đồ trên máy tính bảng
TỔNG KẾT
Ưu điểm
- Ứng dụng đã hoàn thành đầy đủ các yêu cầu và chức năng mà nhóm đã đặt ra từ trước Mỗi chức năng được xây dựng và kiểm thử một cách cẩn thận để đảm bảo hoạt động mượt mà và đáp ứng nhu cầu của người dùng
- Giao diện trang web được thiết kế đơn giản, dễ sử dụng và hoàn toàn tương thích trên mọi thiết bị và kích thước màn hình Người dùng có thể truy cập và tương tác với trang web thông qua bất kỳ thiết bị nào có kết nối internet mà không gặp trở ngại về trải nghiệm
- Chatbot đã được huấn luyện chuyên sâu trong một lĩnh vực cụ thể liên quan đến việc mua laptop Điều này giúp tăng độ tin cậy và chất lượng thông tin được cung cấp cho người dùng Chatbot có khả năng cung cấp thông tin chính xác và hữu ích, giúp người dùng đưa ra quyết định mua hàng thông minh hơn
- Ứng dụng sử dụng dữ liệu từ các nguồn đáng tin cậy và được cập nhật thường xuyên Việc này loại bỏ nhu cầu tra cứu và lọc dữ liệu thủ công của người dùng, mang lại trải nghiệm sạch sẽ và chính xác khi tìm kiếm thông tin về sản phẩm.
Hạn chế
- Phụ Thuộc vào Bên Thứ Ba: Dữ liệu phụ thuộc vào bên thứ ba, dẫn đến một số ít sai sót, tuy không phổ biến
- Tốc Độ Xử Lý Chậm: Chatbot vẫn đang phát triển, tốc độ xử lý chưa đạt mức tối ưu, có thể gây chậm trễ trong trả lời
- Độ Chính Xác Câu Trả Lời: Tuy chatbot đưa ra câu trả lời, nhưng không tuyệt đối chính xác, người dùng cần xác nhận thông tin trước khi đưa ra quyết định
- Hạn Chế Thông Tin Mua Hàng: Thông tin về sản phẩm và nơi mua hàng có hạn chế ở Việt Nam, có thể làm giới hạn lựa chọn của người dùng
Hướng phát triển
- Tích Hợp Chatbot vào Trang Thương Mại Điện Tử: Kết nối chatbot vào trang web thương mại điện tử giúp hỗ trợ tư vấn khách hàng trực tuyến, tăng trải nghiệm mua sắm
- Lựa Chọn Ngôn Ngữ và Quốc Gia: Cho phép người dùng lựa chọn ngôn ngữ và quốc gia tùy ý, tạo điều kiện thuận lợi hơn cho người dùng quốc tế.
Bài học kinh nghiệm
Qua dự án lần này, nhóm đã học hỏi được rất nhiều kinh nghiệm thực tế, đặc biệt là trong lĩnh vực xây dựng sản phẩm, nghiên cứu hành vi người dùng Dưới đây là một số nội dung chính trong bài học kinh nghiệm của nhóm
5.4.1 Áp dụng AI vào sản phẩm Để xây dựng một chatbot hỗ trợ tư vấn mua laptop, việc áp dụng trí tuệ nhân tạo (AI) là cực kỳ quan trọng Bạn có thể sử dụng các nền tảng như Dialogflow hoặc Microsoft Bot Framework để tạo cơ sở cho chatbot Đầu tiên, thu thập dữ liệu từ các nguồn khác nhau về câu hỏi và câu trả lời liên quan đến mua laptop Sau đó, sử dụng nền tảng AI để huấn luyện chatbot dựa trên dữ liệu này Cuối cùng, triển khai chatbot lên nền tảng mong muốn để người dùng có thể tương tác và nhận được sự tư vấn chất lượng về việc chọn mua laptop
Ngoài ra, việc sử dụng Generative AI để tạo ra các gợi ý sản phẩm hay là thông tin tư vấn chất lượng về việc chọn mua laptop có thể mang lại giá trị lớn cho ứng dụng, Bắt đầu bằng việc lựa chọn mô hình Generative AI phù hợp, sau đó tiến hành huấn luyện và fine-tuning mô hình dựa trên dữ liệu mà bạn đã thu thập Cuối cùng, tích hợp kết quả từ Generative AI vào ứng dụng của bạn để cung cấp các đề xuất hoặc tư vấn thông minh đáng giá cho người dùng khi họ tìm kiếm thông tin về mua laptop
Việc xây dựng một RESTful API sử dụng Express.js là cơ sở quan trọng cho ứng dụng của bạn Bắt đầu bằng việc khởi tạo dự án và cài đặt Express.js Xác định các
60 endpoints cần thiết cho API và viết các functions để xử lý các yêu cầu đến từ các endpoints này Đồng thời, không quên thực hiện các biện pháp bảo mật và sử dụng middleware để bảo vệ API khỏi các tấn công không mong muốn
5.4.3 Lập kế hoạch dài hạn và quản lý dự án
Cách lập kế hoạch dài hạn và quản lý dự án: Lập kế hoạch dài hạn và quản lý dự án là bước không thể thiếu để đạt được mục tiêu của bạn Đầu tiên, xác định rõ mục tiêu và phạm vi của dự án, đặt ra các chức năng cụ thể cần phát triển Tiếp theo, phân tích rủi ro có thể xảy ra và xác định tài nguyên cần thiết Cuối cùng, lập kế hoạch thời gian làm việc chi tiết, phân công công việc và sử dụng công cụ quản lý dự án để theo dõi và đánh giá tiến độ của dự án
5.4.4 Nghiên cứu trải nghiệm người dùng
Cách xây dựng giao diện người dùng bằng React.js: Giao diện người dùng chính là điểm giao tiếp quan trọng giữa người dùng và ứng dụng của bạn Bằng cách sử dụng React.js, bạn có thể tạo ra giao diện người dùng thân thiện và tương tác Bắt đầu bằng việc khởi tạo dự án React và thiết kế các thành phần cần thiết cho giao diện người dùng Đồng thời, tích hợp giao diện với REST API mà bạn đã xây dựng để có thể lấy và hiển thị dữ liệu một cách dễ dàng và linh hoạt
