Xây Dựng Trợ Lý Mua Sắm AI với Google Custom ADK và Giao Diện React

Bài viết này được viết cho hackathon GKE turns 10. Với BoutiqueAI Assistant, tôi đã xây dựng một hệ thống mua sắm trò chuyện hoàn chỉnh, sử dụng Google ADK, Gemini LLM (Function Calling) và FastAPI — tất cả đều được tích hợp với 9 microservices gRPC từ ứng dụng demo Online Boutique của Google.

Mục Lục

• Tổng Quan Kiến Trúc
• Các Tính Năng Chính
• Luồng Demo Sản Phẩm
• Công Nghệ Sử Dụng
• Bắt Đầu Nhanh
• Triển Khai trên GKE
• Mẹo và Thực Hành Tốt
• Câu Hỏi Thường Gặp

Tổng Quan Kiến Trúc

Luồng Dữ Liệu:

1. Yêu Cầu Người Dùng → Giao Diện React → Backend FastAPI
2. Xử Lý AI → Google ADK Agent → Gemini API
3. Gọi Microservice → gRPC Client → 9 Microservices
4. Tập Hợp Phản Hồi → Backend → Giao Diện → Người Dùng

Mô Hình Giao Tiếp:

• Giao diện người dùng ↔ Backend → REST (JSON)
• Backend ↔ AI → Google ADK + Gemini API
• Backend ↔ Microservices → gRPC (Protocol Buffers)
• Hạ tầng → Phát hiện dịch vụ Kubernetes

Các Tính Năng Chính

Trợ Lý Mua Sắm AI

• Tìm kiếm ngôn ngữ tự nhiên
• Lọc giá (“Hiện cho tôi quà dưới 50 đô la”)
• Đề xuất thông minh (“Bạn có thể thích…”)
• Quảng cáo sản phẩm (ngữ cảnh, có thể nhấp)
• Giao diện trò chuyện cho toàn bộ quy trình mua sắm

Khả Năng Thương Mại Điện Tử

• Duyệt/tìm kiếm danh mục sản phẩm
• Thêm/xóa khỏi giỏ hàng
• Thanh toán & xác nhận (chế độ thử nghiệm)
• Xác nhận đơn hàng với hình ảnh sản phẩm
• Chuyển đổi tiền tệ
• Bảng báo giá và xử lý vận chuyển
• Xác nhận qua email

Giao Diện Người Dùng/Trải Nghiệm Người Dùng Hiện Đại

• Responsive React + Tailwind CSS
• Hoạt ảnh mượt mà (Framer Motion)
• Thẻ sản phẩm với “Thêm vào giỏ”
• Màn hình xác nhận đơn hàng chuyên nghiệp

Luồng Demo Sản Phẩm

1. Trang Chào Mừng → giao diện trò chuyện sạch sẽ
2. Tìm Kiếm Sản Phẩm → truy vấn cuộc trò chuyện với thẻ sản phẩm
3. Đề Xuất & Quảng Cáo → gợi ý dựa trên ngữ cảnh
4. Thêm vào Giỏ & Xem Giỏ → giỏ hàng trực quan với tổng số
5. Thanh Toán → thanh toán mô phỏng + email đơn hàng
6. Xác Nhận Đơn Hàng → xác nhận chuyên nghiệp với chi tiết sản phẩm

Công Nghệ Sử Dụng

Frontend

• React 18, Tailwind CSS, Framer Motion
• Heroicons, ReactMarkdown, Axios

Backend

• Python 3.9+, FastAPI, Uvicorn
• Google ADK (Bộ Công Cụ Phát Triển Agent)
• gRPC + Pydantic

Microservices (từ Online Boutique)

• Danh mục sản phẩm (3550)
• Giỏ hàng (7070)
• Đề xuất (8080)
• Vận chuyển (50052)
• Tiền tệ (7000)
• Thanh toán (50051)
• Email (5000)
• Thanh toán (5050)
• Quảng cáo (9555)

Bắt Đầu Nhanh

1. Clone & Thiết Lập

git clone https://github.com/arjunprabhulal/ai-botique-assit
cd botiq-ai-assist

# Backend
pip install -r requirements.txt

# Frontend
cd frontend && npm install && cd ..

2. Khởi Động Mọi Thứ (Đề Xuất)

utilities/start_local_dev.sh

Lệnh này sẽ:

• Chuyển tiếp các dịch vụ gRPC
• Khởi động backend (FastAPI + AI agent)
• Khởi động frontend (React)

Truy cập ứng dụng:

• Giao diện người dùng → http://localhost:3000
• API Backend → http://localhost:8000
• Tài liệu API → http://localhost:8000/docs

3. Dừng Dịch Vụ

utilities/stop_local_dev.sh

Chức Năng của AI Agent

Agent Google ADK cung cấp các chức năng gRPC như:

• Danh Mục Sản Phẩm → list_products, search_products, get_product
• Giỏ Hàng → add_item_to_cart, get_cart, empty_cart
• Xử Lý Đơn Hàng → place_order, initiate_checkout
• Vận Chuyển & Thanh Toán → get_shipping_quote, ship_order, charge_card
• Extras → list_recommendations, get_ads, convert_currency, send_order_confirmation

Triển Khai trên GKE

Để triển khai sản phẩm:

export PROJECT_ID="your-project-id"
utilities/prepare_deploy.sh

Lệnh này sẽ:

• Chuyển sang chế độ Kubernetes
• Xây dựng và đẩy Docker images (linux/amd64)
• Triển khai lên GKE với cập nhật lăn
• In ra URL truy cập bên ngoài

Mẹo và Thực Hành Tốt

• Kiểm Tra Lỗi: Đảm bảo xử lý các tình huống ngoại lệ trong mã.
• Tối Ưu Hóa Hiệu Suất: Sử dụng cache cho các truy vấn thường xuyên để giảm tải cho server.
• Theo Dõi: Sử dụng các công cụ theo dõi để giám sát hiệu suất ứng dụng.

Câu Hỏi Thường Gặp

1. Làm thế nào để triển khai ứng dụng trên GKE?

Bạn chỉ cần sử dụng lệnh utilities/prepare_deploy.sh với PROJECT_ID phù hợp.

2. Tôi có thể chạy ứng dụng trên máy cục bộ không?

Có, bạn có thể sử dụng các lệnh khởi động và dừng dịch vụ cục bộ đã đề cập ở phần Bắt Đầu Nhanh.

3. Ứng dụng có hỗ trợ đa ngôn ngữ không?

Hiện tại, ứng dụng hỗ trợ tiếng Anh và tiếng Việt. Bạn có thể thêm ngôn ngữ khác nếu cần.

Hy vọng rằng bài viết này sẽ giúp bạn hiểu rõ hơn về cách xây dựng trợ lý mua sắm AI với Google ADK và React. Nếu bạn có câu hỏi hoặc cần thêm thông tin, đừng ngần ngại liên hệ!

Hãy bắt đầu ngay hôm nay và khám phá thế giới mua sắm AI!