Trang chủ Thử Thách Học Điều Mới 12 Ngày Cùng AI Ngày 09
Ngày 9/12

Thử Thách Học Điều Mới 12 Ngày Cùng AI · 100% Thực hành tác nghiệp (Show, Don't Tell) · 0đ Miễn phí trọn đời.

Ngày 09 / 12 Ước tính: 15–20 phút đọc · 30–45 phút thực hành

Ngày 09: Kết Nối Cơ Sở Dữ Liệu Thực Tế & Thiết Lập Bảo Mật Người Dùng

Chuyển từ bản demo giao diện sang ứng dụng có dữ liệu bền vững và bảo vệ tài khoản

🎯 Mục Tiêu Cốt Lõi Hôm Nay

  • Thiết lập cơ sở dữ liệu quan hệ đám mây thế hệ mới với Supabase / PostgreSQL mà không cần quản trị máy chủ phức tạp.
  • Sử dụng AI thiết kế cấu trúc bảng dữ liệu tối ưu, ràng buộc khóa ngoại và các trường dữ liệu cần thiết.
  • Cài đặt tính năng xác thực: Đăng ký, đăng nhập tài khoản an toàn và kích hoạt chính sách bảo mật cấp dòng (Row Level Security - RLS).

🧠 Nguyên Lý Nền Tảng & Bản Chất

  • Mô hình dữ liệu quan hệ (Relational Schema) và tính toàn vẹn dữ liệu (ACID).
  • Chính sách bảo mật Row Level Security (RLS): Quy tắc sống còn để người dùng A không bao giờ xem hay sửa được dữ liệu của người dùng B.
  • Cơ chế tương tác dữ liệu hai chiều: Đọc, thêm, sửa, xóa (CRUD) và cập nhật tức thì trên giao diện.
Thực hành tác nghiệp

🛠️ Thực hành 09: Đấu Nối CSDL Vào Web App & Thử Nghiệm Phân Quyền Tài Khoản

Các bước triển khai chi tiết:

  1. Tạo dự án mới miễn phí trên Supabase và copy `Project URL` cùng `Anon Key`.
  2. Vào mục SQL Editor trong Supabase, chạy đoạn mã tạo bảng `tasks` kèm chính sách bảo mật RLS mẫu.
  3. Gắn thư viện Supabase Client vào ứng dụng web của bạn và viết hàm đăng ký / đăng nhập.
  4. Tạo 2 tài khoản thử nghiệm khác nhau, thêm dữ liệu ở tài khoản 1 và đăng nhập tài khoản 2 để xác nhận tài khoản 2 hoàn toàn không thấy dữ liệu của tài khoản 1.
📦 Sản phẩm bàn giao sau ngày hôm nay: 1 ứng dụng web hoàn chỉnh có cơ sở dữ liệu đám mây thực tế, hỗ trợ tài khoản người dùng và bảo mật phân quyền nghiêm ngặt.
💻 Lệnh Terminal Thực Chiến (CLI / Bash / PowerShell)
# Cài đặt thư viện kết nối cơ sở dữ liệu Supabase (nếu dùng Node.js)
npm install @supabase/supabase-js

# Hoặc dùng CDN trực tiếp trong file HTML (Không cần build step):
# <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
🤖 Prompt Mẫu Giao Việc Cho AI (Production Prompt) Sẵn dùng với Claude / Cursor / ChatGPT
Tôi đang xây dựng bảng dữ liệu trong Supabase cho ứng dụng quản lý công việc. Hãy viết cho tôi câu lệnh SQL DDL chuẩn để: 1. Tạo bảng `tasks` gồm: id (UUID), user_id (UUID liên kết auth.users), title (Text), is_completed (Boolean), created_at (Timestamp). 2. Kích hoạt tính năng Row Level Security (RLS) trên bảng `tasks`. 3. Viết 2 chính sách bảo mật (Policies): - Người dùng chỉ được SELECT (xem) các task do chính họ tạo (`auth.uid() = user_id`). - Người dùng chỉ được INSERT/UPDATE/DELETE các task của chính họ. 4. Viết đoạn code JavaScript mẫu để thêm mới 1 task từ form trên giao diện web.
📄 Cấu Hình / Mã Nguồn Chuẩn (Production-ready)
-- SCHEMA POSTGRESQL CHUẨN ROW LEVEL SECURITY (RLS)
CREATE TABLE public.tasks (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL,
    title TEXT NOT NULL,
    is_completed BOOLEAN DEFAULT FALSE NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL
);

-- KÍCH HOẠT LỚP PHÒNG THỦ RLS
ALTER TABLE public.tasks ENABLE ROW LEVEL SECURITY;

-- CHÍNH SÁCH BẢO VỆ DỮ LIỆU CÁ NHÂN TUYỆT ĐỐI
CREATE POLICY "Users can only view their own tasks"
ON public.tasks FOR SELECT
USING (auth.uid() = user_id);

CREATE POLICY "Users can only insert their own tasks"
ON public.tasks FOR INSERT
WITH CHECK (auth.uid() = user_id);

CREATE POLICY "Users can only update their own tasks"
ON public.tasks FOR UPDATE
USING (auth.uid() = user_id);
Cảnh báo & Bắt bệnh

💡 Lỗi truy vấn API trả về mảng rỗng `[]` dù trong cơ sở dữ liệu có bản ghi: Đây là dấu hiệu bạn đã kích hoạt RLS nhưng chưa đăng nhập hoặc token người dùng không khớp với `user_id` của bản ghi. RLS âm thầm lọc bỏ các dòng dữ liệu không thuộc quyền sở hữu để chống lộ thông tin. Hãy kiểm tra lại trạng thái đăng nhập qua `supabase.auth.getUser()`.

📚 KHÓA HỌC CHUYÊN SÂU ĐỐI ỨNG
Fullstack Web App AI & Supabase

Bạn muốn tìm hiểu toàn diện mọi ngóc ngách của công nghệ này? Khóa học mở rộng đã có sẵn trên hệ thống.

Xem Toàn Khóa Học ↗