Xây Dựng Website E-commerce Trong Vài Giờ Với Google AI Studio & Supabase

Trong thế giới lập trình hiện đại, khoảng cách từ một ý tưởng lóe lên trong đầu đến một sản phẩm thực tế đang chạy trên tên miền riêng đã được rút ngắn kỷ lục. Nhờ sự kết hợp giữa Google AI Studio và nền tảng Supabase, các nhà phát triển có thể hoàn thiện một dự án phức tạp chỉ trong vài giờ. Bài viết này thuật lại hành trình xây dựng Ginbok Studio—một cửa hàng đồ công nghệ tối giản—hoàn toàn bằng cách "đối thoại" với AI.

1. Lên Ý Tưởng & Thiết Kế Giao Diện Bằng Prompting

Hành trình bắt đầu tại Google AI Studio. Thay vì tự tay vẽ layout hay viết từng dòng HTML, tôi đã sử dụng các mô hình ngôn ngữ lớn (Gemini) để định hình phong cách. Yêu cầu đặt ra là một giao diện "Minimalist, Apple-style" với tone màu trắng chủ đạo và font chữ Inter.

AI không chỉ gợi ý màu sắc mà còn trực tiếp viết mã CSS bằng Tailwind, giúp tạo ra những thẻ sản phẩm có hiệu ứng hover mượt mà và khung hình tỉ lệ vàng (aspect-ratio 4/5).

Các module tính năng cốt lõi:

Listing: Danh sách sản phẩm dạng lưới linh hoạt.
AI Insight: Tự động tạo mô tả sản phẩm thông minh.
Cart Sidebar: Giỏ hàng tương tác nhanh.

2. Xây Dựng "Hệ Xương" Dữ Liệu Với Supabase

Một website bán hàng không thể thiếu database. Qua Google AI Studio, tôi đã yêu cầu AI thiết kế một schema dữ liệu tối ưu cho Supabase, đảm bảo tính nhất quán giữa thông tin sản phẩm và đơn hàng.

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
export const supabase = createClient(supabaseUrl, supabaseKey);

// Logic Seeding tự động
async function seedProducts(products) {
  const { data, error } = await supabase
    .from('products')
    .insert(products);
  if (error) console.error('Lỗi seeding:', error);
  return data;
}

Chiến lược Seeding thông minh: Để cửa hàng luôn "đầy kệ" ngay từ giây đầu tiên, AI đã viết logic tự động kiểm tra: Nếu database trống, hệ thống sẽ tự động đổ dữ liệu mẫu như iPhone 17, MacBook M4 vào bảng sản phẩm.

3. Tích Hợp AI Insight (Gemini API) Vào Từng Sản Phẩm

Để Ginbok Studio thực sự khác biệt, tôi tích hợp Gemini API sâu vào trang chi tiết sản phẩm. Mỗi khi người dùng xem một món đồ, hệ thống sẽ gọi model gemini-1.5-flash để tạo ra một đoạn quảng cáo ngắn 2 câu đầy tính thuyết phục dựa trên thông số kỹ thuật thực tế.

async function getAIProductInsight(productName, specs) {
  const prompt = `Viết 2 câu quảng cáo đầy cảm xúc cho sản phẩm ${productName} với thông số: ${specs}`;
  const result = await model.generateContent(prompt);
  return result.response.text();
}

4. Hiện Thực Hóa: Deployment & Bảo Mật

Sau khi mã nguồn hoàn thiện, dự án được đẩy lên các nền tảng như Vercel hoặc Netlify để ra mắt thế giới. Vấn đề bảo mật cũng được AI hỗ trợ thông qua việc thiết lập các quy tắc Row Level Security (RLS) trên Supabase.

Các bước triển khai chiến lược:

Hosting: Sử dụng Vercel để tối ưu tốc độ tải trang toàn cầu.
Custom Domain: Trỏ tên miền riêng về server qua cấu hình DNS.
Security: Chỉ Admin mới có quyền sửa đổi dữ liệu sản phẩm, khách hàng chỉ có quyền xem và đặt hàng.

5. Kết Luận: Thay Đổi Tư Duy Lập Trình

Việc sử dụng Google AI Studio không chỉ là viết code nhanh hơn. Đó là việc thay đổi tư duy: Chúng ta tập trung vào kiến trúc và logic, còn AI sẽ lo phần thực thi và cú pháp. Khi kết hợp với một "Back-end mạnh mẽ" như Supabase, việc tạo ra một startup E-commerce chuyên nghiệp không còn là điều quá xa vời.