Tạo Ứng Dụng CRM Trong 30 Phút Với Supabase

Tại sao lại là CRM và tại sao lại là Supabase?

Trong bối cảnh kinh doanh hiện nay, việc quản lý thông tin khách hàng một cách khoa học không còn là lựa chọn, mà là yêu cầu sống còn. Một hệ thống CRM giúp bạn theo dõi tương tác, lịch sử mua hàng, ghi chú và các hoạt động chăm sóc khách hàng, từ đó nâng cao trải nghiệm và tăng doanh số.

Tuy nhiên, xây dựng một ứng dụng CRM truyền thống thường đòi hỏi nhiều thời gian cho backend, database, authentication và hosting. Supabase ra đời để giải quyết vấn đề này: chỉ với một backend "ready-to-use", bạn có thể tập trung hoàn toàn vào giao diện và trải nghiệm người dùng.

Chuẩn bị trước khi bắt đầu

Trước khi code, bạn cần: - Một tài khoản Supabase (miễn phí). - Một project mới trong Supabase Dashboard. - Cài đặt Supabase CLI hoặc sẵn sàng làm việc trực tiếp trên dashboard. - Một editor code (VS Code, Cursor, hoặc bất kỳ editor nào bạn thích).

Bước 1: Thiết kế database

Mở tab Table Editor trong Supabase, tạo các bảng sau:

customers - id (UUID, primary key) - name (text) - email (text) - phone (text) - company (text) - created_at (timestamp, default now()) interactions - id (UUID, primary key) - customer_id (UUID, foreign key → customers.id) - type (text) - ví dụ: "call", "email", "meeting" - notes (text) - created_at (timestamp, default now()) tasks - id (UUID, primary key) - customer_id (UUID, foreign key → customers.id) - title (text) - due_date (timestamp) - status (text) - ví dụ: "pending", "completed" - created_at (timestamp, default now())

Quan hệ giữa các bảng được thiết lập qua foreign key, đảm bảo tính toàn vẹn dữ liệu.

Bước 2: Bật Authentication

Vào Authentication > Settings, bật Email providers. Điều này cho phép người dùng đăng ký và đăng nhập vào ứng dụng CRM của bạn.

Bước 3: Tạo Row Level Security (RLS)

RLS giúp bảo mật dữ liệu, đảm bảo mỗi người dùng chỉ thấy dữ liệu của mình.

Vào Authentication > Policies, tạo policy cho bảng customers:

-- Cho phép người dùng xem, thêm, sửa, xóa customer của chính họ
(
  auth.uid()::text = 'authenticated' AND
  customer_id = auth.uid()
)

Tương tự, tạo policy cho interactions và tasks với điều kiện customer_id = auth.uid().

Bước 4: Tạo frontend với React + Supabase UI

Khởi tạo project React:

npx create-react-app crm-app
cd crm-app

Cài đặt các package cần thiết:

npm install @supabase/supabase-js @supabase/auth-ui-react @supabase/auth-ui-shared @supabase/ui

Tạo file src/supabaseClient.js:

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

const supabaseUrl = process.env.REACT_APP_SUPABASE_URL
const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY


export const supabase = createClient(supabaseUrl, supabaseAnonKey)

Bước 5: Xây dựng giao diện chính

Tạo component src/App.js:

import { useState, useEffect } from 'react'
import { supabase } from './supabaseClient'
import { Button, Input, Table, Badge, Avatar, Card, Spacer } from '@supabase/ui'

function App() {
  const [session, setSession] = useState(null)
  const [customers, setCustomers] = useState([])
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')


useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session)
      if (session?.user) {
        supabase
          .from('customers')
          .select('*')
          .then(({ data }) => setCustomers(data))
      }
    })
    supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session)
    })
  }, [])


const addCustomer = async () => {
    if (session?.user) {
      const { data, error } = await supabase
        .from('customers')
        .insert([
          {
            name,
            email,
            created_by: session.user.id
          }
        ])
      if (data) {
        setCustomers([...customers, data[0]])
        setName('')
        setEmail('')
      }
    }
  }


return (
    <div style={{ padding: '2rem' }}>
      <h1>CRM Dashboard</h1>
      {!session?.user ? (
        <Button onClick={() => supabase.auth.signInWithOAuth('google')}>
          Sign in with Google
        </Button>
      ) : (
        <>
          <h2>Customers</h2>
          <div style={{ display: 'flex', gap: '1rem', marginBottom: '1rem' }}>
            <Input
              placeholder="Customer name"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
            <Input
              placeholder="Email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
            <Button onClick={addCustomer}>Add Customer</Button>
          </div>
          <Table>
            <Table.Head>
              <Table.Row>
                <Table.Cell>Name</Table.Cell>
                <Table.Cell>Email</Table.Cell>
                <Table.Cell>Actions</Table.Cell>
              </Table.Row>
            </Table.Head>
            <Table.Body>
              {customers.map((c) => (
                <Table.Row key={c.id}>
                  <Table.Cell>
                    <Avatar size="small" />
                    <span style={{ marginLeft: '0.5rem' }}>{c.name}</span>
                  </Table.Cell>
                  <Table.Cell>{c.email}</Table.Cell>
                  <Table.Cell>
                    <Button size="small">View</Button>
                  </Table.Cell>
                </Table.Row>
              ))}
            </Table.Body>
          </Table>
        </>
      )}
    </div>
  )
}


export default App

Bước 6: Deploy nhanh với Vercel hoặc Netlify

Với Vercel:

npm install -g vercel
vercel

Chọn thư mục project, kết nối với Git repo, và Vercel sẽ tự động build và deploy.

Kết luận

Chỉ trong 30 phút, bạn đã có một ứng dụng CRM hoàn chỉnh với khả năng đăng nhập, quản lý khách hàng, và bảo mật dữ liệu nhờ Supabase. Điểm mạnh của cách tiếp cận này là tốc độ, bảo mật tích hợp sẵn, và khả năng mở rộng khi nhu cầu tăng.

Bạn có thể nâng cấp thêm bằng cách thêm dashboard analytics, email notifications, hoặc mobile app. Supabase cũng hỗ trợ storage cho file đính kèm, functions cho automation, và real-time subscription cho cập nhật tức thì.

Nếu bạn muốn xem demo hoặc source code đầy đủ, hãy để lại bình luận. Chúc bạn coding vui vẻ!