Giáo trình tự học miễn phí · Dịch vụ hỗ trợ theo nhu cầu.

Bài 0435phút ước tínhThực chiến · Builder

4. Lập Trình CRUD Dữ Liệu & Realtime: Thêm, Sửa, Xóa & Đồng Bộ Tức Thì Qua WebSocket

Tự động hóa toàn bộ thao tác dữ liệu: Viết các hàm Create - Read - Update - Delete và kết nối WebSocket để cập nhật giao diện trong 0.1 giây.

⚡ Các Thao Tác Dữ Liệu Cốt Lõi

Create (Insert): await supabase.from('tasks').insert([newTask])
Read (Select): await supabase.from('tasks').select('').order('created_at', { ascending: false })
Update: await supabase.from('tasks').update({ status: 'done' }).eq('id', taskId)
Delete: await supabase.from('tasks').delete().eq('id', taskId)

 example.py
// realtimeTasks.ts
// Lắng nghe sự kiện Realtime để cập nhật State React tức thì
export function subscribeToTasks(onInsert: Function, onUpdate: Function) {
  return supabase
    .channel('tasks-realtime')
    .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'tasks' }, payload => {
      onInsert(payload.new);
    })
    .on('postgres_changes', { event: 'UPDATE', schema: 'public', table: 'tasks' }, payload => {
      onUpdate(payload.new);
    })
    .subscribe();
}

Thực hành

Thực hành và tự đánh giá

Xây dựng một form thêm mới công việc và kiểm tra tính năng đồng bộ thời gian thực trên 2 cửa sổ trình duyệt song song.

Tiến độ tự học lưu trên trình duyệt này. Chỉ đánh dấu khi đã kiểm tra sản phẩm thực hành.