đồ án 2 xây dựng website hỗ trợ tư vấn mua laptop

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

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM

LỜI CẢM ƠN

Sau quá trình học tập và rèn luyện tại khoa Công nghệ phần mềm trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM, chúng em đã được trang bị các kiến thức cơ bản, các kỹ năng thực tế để có thể lần đầu thực hiện Đồ án 2 của mình

Để hoàn thành Đồ án này, chúng em xin gửi lời cảm ơn chân thành đến Ban Giám hiệu trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM vì đã tạo điều kiện về cơ sở vật chất với hệ thống thư viện hiện đại, đa dạng các loại sách, tài liệu thuận lợi cho việc tìm kiếm, nghiên cứu thông tin

Chúng em cũng xin gửi lời cảm ơn chân thành đến cô Đỗ Thị Thanh Tuyền đã tận tình giúp đỡ, định hướng trong quá trình thực hiện đồ án Đó là những góp ý hết sức quý báu không chỉ trong quá trình thực hiện đồ án này mà còn là hành trang tiếp bước cho chúng em trong quá trình học tập và lập nghiệp sau này

Và cuối cùng, chúng em xin gửi lời cảm ơn đến tất cả thầy cô trong khoa, bạn bè, tập thể lớp KTPM2020 là những người luôn sẵn sàng sẻ chia và giúp đỡ trong học tập và cuộc sống Mong rằng, chúng ta sẽ mãi mãi gắn bó với nhau

Trong quá trình làm Đồ án này không tránh khỏi được những sai sót, chúng em kính mong nhận được sự chỉ dẫn và góp ý của quý thầy cô để hoàn thiện và phát triển hơn trong Khóa luận tốt nghiệp sau này

Thành phố Hồ Chí Minh, ngày 31 tháng 12 năm 2023

Chương 2 CƠ SỞ LÝ THUYẾT 15

2.1 Trí tuệ nhân tạo tạo sinh 15

3.3 Tính năng của sản phẩm 34

3.3.1 Xem video review sản phẩm 34

3.3.2 Theo dõi tin tức thị trường laptop 35

4.3 Giao diện web linh động 48

4.3.1 Giao diện trên điện thoại 48

4.3.2 Giao diện trên máy tính bảng 52

5.4.2 Xây dựng REST API 59

5.4.3 Lập kế hoạch dài hạn và quản lý dự án 60

5.4.4 Nghiên cứu trải nghiệm người dùng 60

TÀI LIỆU THAM KHẢO 61

Bảng 3.6 Bảng dữ liệu chi tiết sản phẩm 39

Bảng 3.7 Bảng dữ liệu chi tiết cửa hàng 39

Bảng 4.1 Danh sách màn hình 40

DANH MỤC HÌNH ẢNH

Hình 2.1 Google giới thiệu khái niệm Generative AI 15

Hình 2.2 Logo của Node.js 16

Hình 2.3 Logo của Express.js 17

Hình 2.4 Logo của React 19

Hình 2.5 Logo của Material UI 21

Hình 2.6 Một số mẫu của sẵn của MUI 22

Hình 2.7 Logo của Redux 23

Hình 2.8 Kiến trúc của Redux 24

Hình 2.9 Minh họa cơ chế hoạt động của REST API 25

Hình 2.10 Logo Gemini 26

Hình 2.11 Một trong những kênh úy tín về laptop 27

Hình 2.12 Kết quả tìm kiếm từ Google Shopping 28

Hình 2.13 Minh họa Google Maps 29

Hình 2.14 Dịch vụ SerpApi 30

Hình 3.1 Sơ đồ use case 31

Hình 3.2 Minh họa mô hình Client – Server 34

Hình 3.3 Giao diện của OpenStreetMap 36

Hình 4.1 Màn hình trang xem video review sản phẩm 41

Hình 4.2 Màn hình hiển thị video 41

Hình 4.3 Màn hình tin tức về laptop 42

Hình 4.4 Một trang tin tức công nghệ 42

Hình 4.5 Màn hình chatbot 43

Hình 4.6 Một đoạn trò chuyện với chatbot 43

Hình 4.7 Tìm kiếm thông tin sản phẩm bằng chatbot 44

Hình 4.8 Màn hình chi tiết sản phẩm và danh sách nơi mua 45

Hình 4.9 Hỏi chatbot về hình ảnh 45

Hình 4.10 Màn hình bản đồ chi nhánh 46

Hình 4.11 Màn hình thông tin của chi nhánh 47

Hình 4.12 Màn hình Google Maps dẫn đường đến cửa hàng 47

Hình 4.13 Màn hình chatbot trên điện thoại 48

Hình 4.14 Màn hình bản đồ chi nhánh trên điện thoại 49

Hình 4.15 Màn hình video review trên điện thoại 50

Hình 4.16 Màn hình tin tức trên điện thoại 51

Hình 4.17 Màn hình tin tức trên máy tính bảng 52

Hình 4.18 Màn hình video review trên máy tính bảng 53

Hình 4.19 Xem video trên máy tính bảng 54

Hình 4.20 Màn hình chatbot trên máy tính bảng 55

Hình 4.21 Màn hình chi tiết sản phẩm trên máy tính bảng 56

Hình 4.22 Màn hình bản đồ trên máy tính bảng 57

Chương 1 TỔNG QUAN

1.1 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

1.2 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,

đề 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

1.3 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

1.4 Phạm vi

1.4.1 Môi trường hoạt động

Tất cả trình duyệt web trên tất cả hệ điều hành hiện có

1.4.2 Chức năng

- Đối với chatbot:

▪ 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

- Đối với trang web:

▪ 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

1.5 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

1.6 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

Khởi động dự án

01/09/2023 – 10/09/2023

- 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

11/09/2023 – 24/09/2023

- 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

Thiết kế ứng dụng

01/09/2023 – 10/09/2023

- 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

11/09/2023 – 24/09/2023

- 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 chatbot

16/10/2023 – 29/10/2023

- Xây dựng kịch bản đối đáp - Xây dựng luồng xử lý sự kiện 30/10/2023 –

10/11/2023

- Đào tạo chatbot

- Thử nghiệm và sửa lỗi kịch bản

Phát triển nguyên mẫu

11/11/2023 – 15/11/2023

- 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)

16/11/2023 – 25/11/2023

- 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

26/11/2023 – 30/11/2023

- Hoàn thiện nguyên mẫu

- 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

01/12/2023 – 10/12/2023

- 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

11/12/2023 – 20/12/2023

- Á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ó

21/12/2023 – 31/12/2023

- 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

Chương 2 CƠ SỞ LÝ THUYẾT

2.1 Trí tuệ nhân tạo tạo sinh 2.1.1 Tổng quan

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

2.1.2 Năng lực

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ử

2.2 Node.js

2.2.1 Tổng quan

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

2.3 Express.js 2.3.1 Tổng quan

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

2.3.2 Chức năng chính

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

Hình 2.4 Logo của 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

2.4.2 Chức năng chính

- 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)

2.5 Material UI 2.5.1 Tổng quan

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

2.5.2 Chức năng chính

- 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

2.6 Redux

2.6.1 Tổng quan

Hình 2.7 Logo của 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

2.6.2 Chức năng chính

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

2.7 REST API 2.7.1 Tổng quan

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

2.7.2 Chức năng chính

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)

2.8 Gemini

Hình 2.10 Logo 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ể

2.9 Nguồn dữ liệu 2.9.1 YouTube

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

2.9.2 Google Shopping

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

2.9.3 Google Maps

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ọ

2.9.4 SerpApi

Hình 2.14 Dịch vụ SerpApi

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#