Bắt Đầu Với Supabase Dễ Dàng Cho Người Mới

Supabase là gì và tại sao nên quan tâm?

Supabase là một nền tảng cơ sở dữ liệu mã nguồn mở, cung cấp các tính năng của Firebase nhưng với sự linh hoạt của PostgreSQL. Nó cho phép bạn xây dựng ứng dụng web và di động mà không cần quản lý server, đồng thời vẫn có đầy đủ quyền kiểm soát dữ liệu. Điểm mạnh của Supabase nằm ở khả năng tích hợp Authentication, Storage, Realtime, và Database trong một hệ sinh thái thống nhất.

Bước 1: Tạo tài khoản và dự án đầu tiên

Truy cập supabase.com và đăng ký bằng email hoặc GitHub. Sau khi đăng nhập, nhấn New Project, chọn tên dự án, mật khẩu database, và region phù hợp với người dùng mục tiêu. Chọn plan miễn phí để bắt đầu. Khi dự án được tạo, bạn sẽ thấy bảng điều khiển với các menu: Table Editor, Authentication, Storage, và SQL Editor.

Bước 2: Làm quen với Table Editor và PostgreSQL

Table Editor là nơi bạn tạo và quản lý bảng dữ liệu. Nhấn Create a new table, đặt tên bảng (ví dụ: users), thêm các cột như id (type: UUID, Primary key), name (type: Text), email (type: Text). Supabase tự động tạo các role và policy bảo mật. Để kiểm tra, chọn SQL Editor > Query your data và chạy:

SELECT * FROM users;

Bước 3: Thiết lập Authentication

Vào Authentication > Settings để bật các providers (Email, GitHub, Google, Apple). Với Email, bạn có thể tùy chỉnh email templates trong Email templates. Để đăng ký người dùng từ ứng dụng frontend, dùng thư viện Supabase JS:

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

const supabase = createClient('https://your-project.supabase.co', 'public-anon-key');


const { data, error } = await supabase.auth.signUp({
  email: '[email protected]',
  password: 'password123'
});

Bước 4: Sử dụng Storage để lưu file

Vào Storage > Create bucket, đặt tên và chọn quyền public hoặc private. Để upload file từ frontend:

const { data, error } = await supabase.storage
  .from('bucket-name')
  .upload('path/filename.jpg', file, {
    upsert: false,
    contentType: 'image/jpeg'
  });

Bước 5: Kích hoạt Realtime và lắng nghe thay đổi

Vào Database > Replication, bật SUPABASE_REALM để cho phép Realtime. Trong ứng dụng, lắng nghe thay đổi:

const { data: { insert } } = supabase
  .channel('public')
  .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'users' }, payload => {
    console.log('New user:', payload.new);
  })
  .subscribe();

Bước 6: Quản lý dữ liệu an toàn với Row Level Security (RLS)

RLS đảm bảo mỗi user chỉ truy cập dữ liệu của mình. Để bật, vào Authentication > Settings và bật Enable RLS. Sau đó, thêm policy:

CREATE POLICY "Users can view own profile" ON users
  FOR SELECT USING (auth.uid() = id);

Bước 7: Tích hợp với frontend (React example)

Cài đặt package:

npm install @supabase/supabase-js

Khởi tạo client:

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

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

Fetch dữ liệu:

const { data, error } = await supabase
  .from('users')
  .select('*')
  .eq('id', userId);

Kết luận

Supabase cung cấp một hệ sinh thái hoàn chỉnh, dễ sử dụng cho cả người mới bắt đầu lẫn developer có kinh nghiệm. Bằng cách làm theo các bước trên, bạn có thể nhanh chóng xây dựng một ứng dụng với database, authentication, và storage chỉ trong vài phút. Hãy bắt đầu với plan miễn phí, thử nghiệm các tính năng, và dần nâng cấp khi dự án phát triển.