代金引換ショップ＋管理ダッシュボードを作る

新しいSupabaseプロジェクトを作成する

Supabaseを開く

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

SQL Editorを開く

SQLコード1を実行 — 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;

SQLコード2を実行 — 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;

Authentication → Users で管理者ユーザーを作成する

SQLコード3を実行 — 管理者ロールを割り当てる

USER_IDを自分のUIDに置き換える

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

SQLコード — セキュリティポリシー（RLS）

SQLコード4 — 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);

SQLコード5 — 一般ユーザーの注文作成ポリシー

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

SQLコード6 — 管理者の注文閲覧ポリシー

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

SQLコード7 — 管理者の注文更新ポリシー

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

Project URLとPublishable Keyをコピーする

チェックリスト

SupabaseのProject URLを入力

SupabaseのPublishable Keyを入力

生成されたプロンプトをコピーする

Google AI Studioでショップページを生成する

テスト注文を送信する

Supabase → Ordersテーブルで注文を確認する

このステップで使うプロンプト

プロンプト1 — ショップ＋注文フォームを生成する

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.

SupabaseのProject URL

SupabaseのProject URLをここに貼り付け

SupabaseのPublishable Key

Supabaseのpublishable keyをここに貼り付け

チェックリスト

SupabaseのProject URLを入力

SupabaseのPublishable Keyを入力

生成されたプロンプトをコピーする

Google AI Studioで管理ダッシュボードを生成する

Supabaseの管理者アカウントでログインする

このステップで使うプロンプト

プロンプト2 — 管理ダッシュボードを生成する

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.

SupabaseのProject URL

SupabaseのProject URLをここに貼り付け

SupabaseのPublishable Key

SupabaseのPublishable Keyをここに貼り付け

チェックリスト

Google AI StudioからプロジェクトをGitHubに保存する

HostingerでNode.js Web Appのホスティングを作成する

GitHubリポジトリをインポートする

公開中のプロジェクトURLを開く

このステップで使うホスティング

Hostingerでデプロイする

動画と同じ構成でこのプロジェクトを公開します。

RECOMMENDED

https://www.hostg.xyz/SHJ9M

このアップグレードでは、新しい注文が入るたびに自動でメールを送り、ショップをより実用的にします。

- ショップオーナーに新規注文のメールが届く

- お客様に注文確認メールが届く

AIショップから自動でメールを送れるようにする（Supabaseチュートリアル）

チュートリアルを見る

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