Hướng Dẫn Sử Dụng Supabase với Node.js: Xây Dựng App Todo Đơn Giản

Chào bạn! 👋 Hôm nay, chúng ta sẽ cùng nhau xây dựng một ứng dụng Todo đơn giản bằng Supabase và Node.js. Đừng lo lắng nếu bạn là người mới bắt đầu, mình sẽ giải thích mọi thứ từng bước một!

Mục Lục

• Giới thiệu về Supabase
• Yêu cầu trước khi bắt đầu
• Bước 1: Tạo Dự Án Supabase
• Bước 2: Tạo Bảng
• Bước 3: Thiết lập Dự Án Node.js
• Bước 4: Viết Script Đầu Tiên
• Bước 5: Chạy Mã Của Bạn
• Bước 6: Các Bước Tiếp Theo
• Kết Luận
• Câu Hỏi Thường Gặp

Giới thiệu về Supabase

Supabase là một nền tảng mã nguồn mở cung cấp:

• Cơ sở dữ liệu thời gian thực
• Xác thực người dùng
• Lưu trữ tệp
• Chức năng không máy chủ

Nó giúp bạn xây dựng các tính năng backend một cách nhanh chóng mà không cần phải viết lại mọi thứ từ đầu.

Yêu cầu trước khi bắt đầu

Trước khi chúng ta bắt đầu, hãy đảm bảo bạn đã có:

• Node.js được cài đặt
• Kiến thức cơ bản về JavaScript
• Một tài khoản Supabase (đăng ký miễn phí tại supabase.com)

Bước 1: Tạo Dự Án Supabase

1. Truy cập vào bảng điều khiển Supabase.
2. Nhấn “New Project”.
3. Đặt tên cho dự án, chọn mật khẩu và chờ cho đến khi hoàn tất.
4. Sau khi tạo xong, đi đến Settings → API và sao chép:
   • Project URL
   • Anon key

Chúng ta sẽ cần những thông tin này trong mã của mình!

Bước 2: Tạo Bảng

Chúng ta cần một bảng để lưu trữ các todo.

1. Truy cập Database → Tables → New Table
2. Đặt tên bảng là todos và thêm các cột:

Lưu bảng lại và chúng ta đã sẵn sàng để viết mã! 🎉

Lưu ý: Ở đây, chúng ta có thể thấy bảng todos trong Supabase với các cột id, task và inserted_at.

Bước 3: Thiết lập Dự án Node.js

1. Mở terminal và tạo thư mục:

   bash Copy

   mkdir supabase-todo
   cd supabase-todo
   npm init -y

2. Cài đặt Supabase JS:

   bash Copy

   npm install @supabase/supabase-js

Bước 4: Viết Script Đầu Tiên

Tạo một tệp có tên index.js và dán đoạn mã sau:

// Nhập Supabase
const { createClient } = require('@supabase/supabase-js');

// Thay thế với URL và anon key của bạn
const supabaseUrl = "https://YOUR_PROJECT_URL.supabase.co";
const supabaseKey = "YOUR_ANON_KEY";

const client = createClient(supabaseUrl, supabaseKey);

// Thêm một todo
async function addTodo() {
  const { data, error } = await client
    .from('todos')
    .insert([{ task: 'Học các khái niệm cơ bản về Supabase' }]);
  console.log('Thêm:', data, error);
}

// Lấy tất cả todos
async function fetchTodos() {
  const { data, error } = await client
    .from('todos')
    .select('*');
  console.log('Todos:', data, error);
}

// Chạy ví dụ
(async () => {
  await addTodo();
  await fetchTodos();
})();

Bước 5: Chạy Mã Của Bạn

Trong terminal, chạy:

node index.js

Nếu mọi thứ hoạt động, bạn sẽ thấy một cái gì đó như sau:

[
  {
    "id": "990e6e73-e1fa-4d0b-ab69-be85ebf192e6",
    "task": "Học các khái niệm cơ bản về Supabase",
    "inserted_at": "2025-09-24T08:03:58.157706+00:00"
  }
]
null

• Mảng hiển thị todos của bạn.
• null có nghĩa là không có lỗi 🎉

Bước 6: Các Bước Tiếp Theo

Giờ đây, bạn có thể:

• Thêm nhiều todo với addTodo()
• Lấy và hiển thị chúng bằng fetchTodos()
• Sau đó, bạn có thể xây dựng một ứng dụng web hoặc CLI xung quanh nó.

Supabase giúp mở rộng dự án của bạn một cách dễ dàng. 🚀

Kết Luận

Chúc mừng! 🥳 Bạn vừa xây dựng ứng dụng Todo đầu tiên bằng Supabase và Node.js.

Supabase + Node.js là một sự kết hợp mạnh mẽ cho cả người mới và những người đã có kinh nghiệm. Giờ đây, bạn có thể khám phá xác thực, lưu trữ, hoặc thậm chí là cập nhật thời gian thực.

Hãy thử nghiệm, chơi đùa và xây dựng những điều tuyệt vời!

Câu Hỏi Thường Gặp

Supabase có miễn phí không?

Có, Supabase cung cấp gói miễn phí cho các dự án nhỏ.

Tôi có thể sử dụng Supabase cho ứng dụng nào?

Supabase có thể được sử dụng cho nhiều loại ứng dụng, từ web đến di động và hơn thế nữa.

Tôi có thể mở rộng ứng dụng Todo này không?

Có, bạn có thể thêm nhiều tính năng như xác thực người dùng, lưu trữ tệp, và hơn thế nữa.

Làm thế nào để khắc phục sự cố khi không thấy dữ liệu trong bảng?

Hãy kiểm tra lại mã của bạn xem có lỗi nào không hoặc chắc chắn rằng bảng đã được tạo và có dữ liệu.

Thực Tiễn Tốt Nhất

• Quản lý lỗi: Đảm bảo xử lý lỗi đúng cách để người dùng biết khi có vấn đề xảy ra.
• Tối ưu hóa truy vấn: Sử dụng các truy vấn tối ưu để cải thiện hiệu suất ứng dụng.
• Bảo mật thông tin: Đảm bảo rằng các thông tin nhạy cảm được bảo mật.

Những Cạm Bẫy Thường Gặp

• Quên không tạo bảng trước khi thực hiện truy vấn.
• Không kiểm tra lỗi sau khi thực hiện các thao tác trên cơ sở dữ liệu.

Mẹo Tối Ưu Hiệu Suất

• Sử dụng caching để giảm tải cho cơ sở dữ liệu.
• Tối ưu hóa các truy vấn bằng cách chỉ lấy những trường cần thiết.

Hãy bắt đầu hành trình khám phá Supabase và Node.js ngay hôm nay!