Xây dựng website hỗ trợ tư vấn mua laptop bằng trí tuệ nhân tạo

MỤC LỤC

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. - 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ể.

Phạm vi

    - 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ấ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.

    Kết quả mong đợi

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

    CƠ SỞ LÝ THUYẾT

    • Trí tuệ nhân tạo tạo sinh 1. Tổng quan
      • React
        • Gemini

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

          Đượ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. 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. - 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).

          29 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. 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.

          Hình 2.7. Logo của Redux
          Hình 2.7. Logo của Redux

          THIẾT KẾ HỆ THỐNG

          Phân tích use case

          • 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ươ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. • 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.

          • 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. 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. - 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.

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

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

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

            ▪ 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 đồ.

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

            XÂY DỰNG ỨNG DỤNG

            Danh sách màn hình

              Ở đầ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. 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.

              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. 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. 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 đó.

              47 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 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 đó. Đố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.

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

              TỔNG KẾT

              Hạn chế

              - 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

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

                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. 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ắ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.