Xây dựng cửa hàng thanh toán khi nhận hàng + bảng điều khiển quản trị

Tạo một dự án Supabase mới

Mở Supabase

https://supabase.com/?utm_source=partner&utm_medium=social&utm_campaign=supasquad&dub_id=faVfKdcLWvKCbYNp

Mở SQL Editor

Chạy mã SQL 1 — Tạo bảng Orders

-- Create orders table create table if not exists public.orders ( id uuid primary key default gen_random_uuid(), customer_name text not null, phone text not null, email text, city text not null, address text not null, country text default 'United States', product_name text not null, product_variant text, quantity int not null default 1, notes text, status text not null default 'pending', -- pending, confirmed, shipped, cancelled created_at timestamptz default now() ); -- Enable RLS alter table public.orders enable row level security;

Chạy mã SQL 2 — Tạo bảng Profiles

-- Create profiles table create table if not exists public.profiles ( user_id uuid primary key references auth.users(id) on delete cascade, role text not null default 'user' ); -- Enable RLS alter table public.profiles enable row level security;

Tạo một tài khoản quản trị trong Authentication → Users

Chạy mã SQL 3 — Gán quyền quản trị

Thay USER_ID bằng UID của bạn

insert into public.profiles (user_id, role) values ('PUT_USER_ID_HERE', 'admin');

Các mã SQL — Policy bảo mật (RLS)

Mã SQL 4 — Policy đọc bảng Profiles

-- Profiles are readable by owner create policy "Profiles are readable by owner" on public.profiles for select to authenticated using (auth.uid() = user_id);

Mã SQL 5 — Policy cho phép khách tạo đơn hàng

-- Public can create orders create policy "Public can create orders" on public.orders for insert to anon with check ( status = 'pending' );

Mã SQL 6 — Policy cho quản trị viên xem đơn hàng

-- Admins can view all orders create policy "Admins can view all orders" on public.orders for select to authenticated using ( exists ( select 1 from public.profiles where profiles.user_id = auth.uid() and profiles.role = 'admin' ) );

Mã SQL 7 — Policy cho quản trị viên cập nhật đơn hàng

-- Admins can update all orders create policy "Admins can update all orders" on public.orders for update to authenticated using ( exists ( select 1 from public.profiles where profiles.user_id = auth.uid() and profiles.role = 'admin' ) ) with check ( exists ( select 1 from public.profiles where profiles.user_id = auth.uid() and profiles.role = 'admin' ) );

Sao chép Project URL và Publishable Key

Danh sách kiểm tra

Nhập Project URL của Supabase

Nhập Publishable Key của Supabase

Sao chép prompt đã được tạo

Tạo trang cửa hàng trong Google AI Studio

Gửi thử một đơn hàng

Kiểm tra đơn hàng trong Supabase → bảng Orders

Prompt dùng trong bước này

Prompt 1 — Tạo cửa hàng + biểu mẫu đặt hàng

You are building a web app INSIDE this Google AI Studio project. Task: Create a beautiful, premium, light-mode single-page Cash-on-Delivery (COD) store TEMPLATE (one product) that is simple and beginner-friendly to customize. IMPORTANT OUTPUT RULES: - Do NOT paste the full HTML/CSS/JS code in the chat. - Instead, create/update the project files directly. - After you finish, reply with: 1) A short bullet summary of what you built 2) Where beginners should edit the template (the exact variables/sections) Design (Light Mode): - Clean white / soft light gray background with a subtle pastel gradient. - Modern premium SaaS look (Apple/Stripe style). - Elegant spacing, rounded corners, soft shadows. - Looks great on mobile. Template placeholders (make them easy to edit): - STORE_NAME: "YOUR STORE NAME" - PRODUCT_NAME: "YOUR PRODUCT NAME" - PRODUCT_DESCRIPTION: "YOUR PRODUCT DESCRIPTION" - PRICE_PER_UNIT: 49 - CURRENCY: "USD" - Variants: "Variant A", "Variant B", "Variant C" - Default country: "United States" Sections to include (keep it simple): 1) Header (store name + link scroll to “How COD Works”) 2) Hero (product name, description, CTA buttons) 3) Benefits (3 cards) 4) How COD Works (3 steps) 5) Order Form (most important) + Order Summary (price x quantity) 6) FAQ (3 items) 7) Footer Supabase (INSERT only): - Use Supabase JS client. - Use placeholders: SUPABASE_URL = "{{SUPABASE_URL}}" SUPABASE_PUBLISHABLE_KEY = "{{SUPABASE_PUBLISHABLE_KEY}}" - On form submit: INSERT into table "orders" with: customer_name, phone, email, city, address, country, product_name, product_variant, quantity, notes, status="pending" Critical rules: - INSERT only. Do NOT use select/update/delete. - Show success banner on success, generic error banner on failure. - Validate required fields with small inline errors. - Disable the submit button while sending. Now build it inside the project so I can run it immediately.

Project URL của Supabase

Dán Project URL của Supabase vào đây

Publishable Key của Supabase

Dán publishable key của Supabase vào đây

Danh sách kiểm tra

Nhập Project URL của Supabase

Nhập Publishable Key của Supabase

Sao chép prompt đã được tạo

Tạo bảng điều khiển quản trị trong Google AI Studio

Đăng nhập bằng tài khoản quản trị Supabase

Prompt dùng trong bước này

Prompt 2 — Tạo bảng điều khiển quản trị

You are an expert full-stack engineer. Build a modern admin dashboard for managing Cash-on-Delivery (COD) orders using Supabase. Use the following Supabase credentials: SUPABASE_URL = "{{SUPABASE_URL}}" SUPABASE_KEY = "{{SUPABASE_KEY}}" The database contains a table called: orders Fields include: customer_name, email, phone, city, address, product_variant, quantity, status, created_at. The dashboard should allow an admin to: • log in • view order statistics • see recent orders • search and filter orders • update order status • customize the application name in settings Design it as a clean modern SaaS dashboard with a light Apple-style UI. Keep the implementation simple and produce a fully working result.

Project URL của Supabase

Dán Project URL của Supabase vào đây

Publishable Key của Supabase

Dán Publishable Key của Supabase vào đây

Danh sách kiểm tra

Lưu dự án lên GitHub từ Google AI Studio

Tạo hosting dạng Node.js Web App trên Hostinger

Import kho GitHub

Mở URL của dự án đang chạy thật

Hosting được dùng trong bước này

Deploy trên Hostinger

Xuất bản dự án này với đúng thiết lập được trình bày trong video.

RECOMMENDED

https://www.hostg.xyz/SHJ9M

Bản nâng cấp này giúp cửa hàng thực tế hơn bằng cách tự động gửi email mỗi khi có đơn hàng mới.

- Chủ cửa hàng nhận được email đơn hàng mới

- Khách hàng nhận được email xác nhận đơn hàng

Làm cho cửa hàng AI của bạn tự động gửi email (hướng dẫn Supabase)

Xem hướng dẫn

https://www.youtube.com/watch?v=NK6ztA_-0cE