Supabase: Si "Firebase" Open Source - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Apa Itu Supabase?

Supabase adalah platform backend open-source yang sering disebut sebagai "alternatif open-source untuk Firebase." Dengan Supabase, kamu bisa menikmati fitur seperti autentikasi, database, dan storage tanpa perlu setup backend sendiri.

2. Kenapa Harus Pakai Supabase?

Supabase menawarkan berbagai fitur keren yang membuat pengembangan aplikasi React jadi lebih mudah:

• PostgreSQL Database: Database yang kuat dengan dukungan real-time.
• Authentication: Login dengan email, social login, atau magic link.
• Storage: Simpan file seperti gambar dan dokumen dengan mudah.
• Edge Functions: Jalankan kode serverless tanpa perlu setup backend.

3. Cara Integrasi Supabase dengan React

3.1 Install Supabase di Proyek React

Pastikan kamu sudah punya proyek React. Kalau belum, buat dulu:

npx create-react-app my-app
cd my-app

Lalu install Supabase SDK:

npm install @supabase/supabase-js

3.2 Setup Supabase di Proyek

1. Buka Supabase dan buat akun.
2. Buat proyek baru dan catat URL serta anon key.
3. Buat file supabaseClient.js di proyek React dan isi dengan konfigurasi:

// supabaseClient.js
import { createClient } from "@supabase/supabase-js";

const SUPABASE_URL = "YOUR_SUPABASE_URL";
const SUPABASE_ANON_KEY = "YOUR_SUPABASE_ANON_KEY";

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
export default supabase;

4. Menggunakan Supabase Authentication di React

4.1 Login dengan Email

Tambahkan kode ini di komponen React:

import supabase from "./supabaseClient";

const loginWithEmail = async (email, password) => {
  const { user, error } = await supabase.auth.signInWithPassword({ email, password });
  if (error) console.error("Login gagal:", error.message);
  else console.log("Login sukses:", user);
};

Panggil fungsi ini di event handler:

<button onClick={() => loginWithEmail("test@example.com", "password123")}>Login</button>

5. Menyimpan Data di Supabase

Supabase menggunakan PostgreSQL sebagai database utama. Berikut cara menyimpan data pengguna:

const addUser = async () => {
  const { data, error } = await supabase.from("users").insert([
    { name: "John Doe", email: "johndoe@gmail.com" }
  ]);
  if (error) console.error("Gagal menambahkan user:", error.message);
  else console.log("User berhasil ditambahkan!", data);
};

Tambahkan tombol di UI React:

<button onClick={addUser}>Tambah User</button>

6. Menggunakan Supabase Storage

Kalau mau menyimpan file seperti gambar, gunakan Supabase Storage:

const uploadFile = async (file) => {
  const { data, error } = await supabase.storage.from("avatars").upload(`avatar-${Date.now()}`, file);
  if (error) console.error("Gagal upload file:", error.message);
  else console.log("File berhasil diupload!", data);
};

Tambahkan input file di UI:

<input type="file" onChange={(e) => uploadFile(e.target.files[0])} />

7. Deploy Aplikasi React dengan Supabase

Tidak seperti Firebase, Supabase tidak memiliki hosting bawaan. Kamu bisa deploy aplikasi React ke platform seperti Vercel atau Netlify:

npm run build
vercel deploy  # atau netlify deploy

Kesimpulan

Supabase adalah alternatif open-source yang keren untuk Firebase, dengan database PostgreSQL, autentikasi, dan storage yang powerful. Cocok buat yang ingin backend tanpa ribet tapi tetap fleksibel. Yuk, cobain Supabase!