Tạo Dashboard Admin Với Supabase và Chart.js Trong 5 Phút

Mở đầu

Dashboard admin là một trong những công cụ quan trọng giúp quản lý và theo dõi dữ liệu một cách trực quan. Trong khi Supabase cung cấp một nền tảng backend mạnh mẽ với database, authentication và real-time, Chart.js lại là thư viện JavaScript phổ biến để tạo ra các biểu đồ đẹp mắt. Kết hợp cả hai, bạn có thể xây dựng một dashboard admin hoàn chỉnh, tương tác và dễ dàng mở rộng.

Bài viết này sẽ hướng dẫn bạn từng bước tạo dashboard admin với Supabase làm backend và Chart.js để hiển thị dữ liệu trực quan. Chúng ta sẽ đi qua việc thiết lập database, kết nối dữ liệu, và vẽ biểu đồ, giúp bạn có cái nhìn tổng quan về cách hoạt động của một dashboard hiện đại.

Chuẩn bị môi trường

Để bắt đầu, bạn cần có một tài khoản Supabase và một project mới. Sau khi đăng nhập vào Supabase dashboard, tạo một project và ghi lại URL và public anon key — chúng sẽ được dùng để kết nối từ frontend.

Tiếp theo, tạo một table trong Supabase để lưu trữ dữ liệu mẫu. Ví dụ, một table sales với các cột id, product_name, quantity, price, và sale_date. Bạn có thể thêm một vài dòng dữ liệu mẫu để test.

Về frontend, bạn có thể tạo một HTML file đơn giản và thêm các thư viện cần thiết: Chart.js (để vẽ biểu đồ) và supabase-js (để kết nối với Supabase). Bạn có thể load chúng qua CDN hoặc cài đặt qua npm nếu dùng framework như React hoặc Vue.

Thiết lập kết nối Supabase

Trong file HTML hoặc JavaScript của bạn, khởi tạo client Supabase bằng cách cung cấp URL và public anon key từ project bạn vừa tạo:

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

const supabaseUrl = 'your_project_url';
const supabaseAnonKey = 'your_anon_key';


const supabase = createClient(supabaseUrl, supabaseAnonKey);

Với client này, bạn có thể truy vấn dữ liệu từ Supabase. Ví dụ, để lấy tất cả các bản ghi từ table sales:

const { data, error } = await supabase
  .from('sales')
  .select('*');

Kết quả sẽ là một mảng các objects chứa dữ liệu, sẵn sàng để xử lý và hiển thị.

Tạo biểu đồ với Chart.js

Chart.js cho phép bạn vẽ nhiều loại biểu đồ khác nhau như line, bar, pie, v.v. Để bắt đầu, thêm một thẻ vào HTML, đặt id cho nó để Chart.js có thể tham chiếu.

<canvas id="salesChart"></canvas>

Trong JavaScript, sau khi lấy dữ liệu từ Supabase, bạn cần xử lý để lấy ra các mảng cho labels (ví dụ: ngày tháng) và datasets (ví dụ: doanh số). Ví dụ, nếu bạn muốn vẽ biểu đồ doanh số theo ngày:

const labels = data.map(item => item.sale_date);
const salesData = data.map(item => item.quantity * item.price);

const ctx = document.getElementById('salesChart').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
      label: 'Doanh số',
      data: salesData,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  }
});

Chart.js sẽ tự động render biểu đồ dựa trên dữ liệu bạn cung cấp. Bạn có thể tùy chỉnh màu sắc, kiểu dáng, và các tùy chọn khác để phù hợp với thiết kế của dashboard.

Nâng cao dashboard

Để dashboard trở nên hữu ích hơn, bạn có thể thêm nhiều biểu đồ khác nhau, ví dụ: biểu đồ tròn cho tỷ lệ sản phẩm bán chạy, biểu đồ cột cho doanh số theo tháng, hoặc heatmap cho hoạt động người dùng. Mỗi biểu đồ sẽ cần một query riêng từ Supabase, và bạn có thể dùng các hàm SQL như GROUP BY, SUM, COUNT để aggregate dữ liệu trước khi vẽ.

Ngoài ra, bạn có thể thêm authentication để bảo mật dashboard, hoặc real-time subscription để biểu đồ cập nhật tự động khi dữ liệu thay đổi. Supabase hỗ trợ cả hai tính năng này một cách dễ dàng.

Kết luận

Việc kết hợp Supabase và Chart.js giúp bạn xây dựng một dashboard admin mạnh mẽ mà không cần quá nhiều công sức. Supabase lo việc backend, lưu trữ và truy vấn dữ liệu, trong khi Chart.js biến dữ liệu đó thành các biểu đồ trực quan. Bạn có thể mở rộng dashboard với nhiều tính năng hơn, hoặc tích hợp vào các ứng dụng lớn hơn.

Hy vọng bài viết này đã cung cấp cho bạn cái nhìn tổng quan và các bước thực tế để bắt đầu. Hãy thử nghiệm và tùy chỉnh theo nhu cầu của bạn, và đừng ngần ngại khám phá thêm các tính năng của Supabase và Chart.js để nâng cao dashboard của mình.