Panduan Linux

Cara Membuat Aplikasi CRUD dengan Supabase dan React

Pendahuluan

Dalam dunia pengembangan aplikasi modern, kemampuan untuk membangun aplikasi yang efisien dan responsif adalah keterampilan yang sangat dihargai. Salah satu pendekatan yang sedang populer adalah dengan menggunakan kombinasi Supabase dan React. Supabase merupakan backend-as-a-service yang menyediakan berbagai fitur unggulan untuk pengembangan cepat, sementara React adalah salah satu library JavaScript yang paling banyak digunakan untuk membangun antarmuka pengguna. Dalam artikel ini, kita akan membahas cara membuat aplikasi CRUD (Create, Read, Update, Delete) menggunakan Supabase dan React, menggabungkan kekuatan kedua alat ini untuk membuat aplikasi yang fungsional dan mudah digunakan.

Apa itu Supabase?

Supabase adalah platform open-source yang menawarkan solusi backend untuk pengembang. Ia menyediakan beberapa fitur penting yang biasanya dibutuhkan dalam aplikasi, seperti autentikasi pengguna, database PostgreSQL, dan penyimpanan file. Dengan Supabase, Anda dapat dengan mudah mengatur dan mengelola basis data tanpa memerlukan banyak pengetahuan tentang infrastruktur backend. Ini membuatnya menjadi pilihan yang ideal untuk pengembang yang ingin membangun aplikasi CRUD dengan cepat dan efisien.

Mengapa Menggunakan React?

React adalah library JavaScript yang dikembangkan oleh Facebook yang memungkinkan pengembang untuk membangun antarmuka pengguna yang interaktif dan dinamis. Keunggulan utama dari React adalah kemampuan untuk membuat komponen yang dapat digunakan kembali, sehingga mempercepat proses pengembangan. Selain itu, React menawarkan pendekatan berbasis state yang memudahkan pengelolaan data dalam aplikasi. Gabungan antara React dan Supabase memungkinkan Anda untuk membuat aplikasi yang tidak hanya berfungsi dengan baik tetapi juga menarik secara visual.

Memulai Proyek: Persiapan dan Instalasi

Langkah 1: Membuat Proyek React

Untuk memulai, Anda perlu memiliki Node.js dan npm (Node Package Manager) yang terinstal di sistem Anda. Setelah itu, jalankan perintah berikut untuk membuat proyek React baru:

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

Setelah proyek dibuat, Anda akan memiliki folder yang berisi struktur dasar untuk aplikasi React.

Langkah 2: Menginstal Dependensi Supabase

Untuk mengintegrasikan Supabase ke dalam aplikasi Anda, Anda harus menginstal dependensi Supabase Client. Jalankan perintah berikut di terminal:

npm install @supabase/supabase-js

Ini akan menginstal library yang diperlukan untuk berinteraksi dengan Supabase.

Mengatur Supabase

Langkah 3: Membuat Akun Supabase

Jika Anda belum memiliki akun Supabase, kunjungi supabase.io dan daftar untuk akun gratis. Setelah membuat akun, buat proyek baru di dashboard Supabase.

Langkah 4: Membuat Tabel di Supabase

Setelah proyek Anda dibuat, Anda perlu membuat tabel dalam database. Anda dapat melakukan ini dengan menggunakan fitur Editor SQL di dashboard Supabase. Misalnya, jika Anda ingin membuat tabel bernama items, Anda bisa menggunakan perintah SQL berikut:

CREATE TABLE items (
    id SERIAL PRIMARY KEY,
    name VARCHAR NOT NULL,
    description TEXT
);

Tabel ini akan menyimpan item dengan nama dan deskripsi.

Langkah 5: Mengambil URL Supabase dan Kunci API

Setelah tabel dibuat, Anda perlu menyalin URL proyek dan kunci API dari pengaturan proyek di dashboard Supabase. Keduanya diperlukan untuk menghubungkan aplikasi React Anda dengan Supabase.

Menghubungkan React dengan Supabase

Langkah 6: Inisialisasi Supabase di Proyek React

Sekarang, buka file src/index.js atau src/App.js dan inisialisasi Supabase menggunakan URL dan kunci API yang telah Anda salin sebelumnya.

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

const supabaseUrl = 'your_supabase_url';
const supabaseAnonKey = 'your_supabase_anon_key';
const supabase = createClient(supabaseUrl, supabaseAnonKey);

Membangun Fungsi CRUD dengan Supabase dan React

Setelah Supabase terhubung dengan aplikasi React Anda, kita akan membangun fungsi-fungsi untuk Create, Read, Update, dan Delete (CRUD).

Create: Menambahkan Item Baru

Untuk menambahkan item baru, kita akan membuat fungsi di dalam komponen React yang akan mengirim data ke Supabase.

const addItem = async (name, description) => {
    const { data, error } = await supabase
        .from('items')
        .insert([{ name: name, description: description }]);
    
    if (error) console.log('Error adding item:', error);
    else console.log('Item added:', data);
};

Read: Mengambil Semua Item

Untuk mengambil item dari database, Anda perlu menulis fungsi yang akan melakukan query ke Supabase.

const fetchItems = async () => {
    const { data, error } = await supabase
        .from('items')
        .select('*');
    
    if (error) console.log('Error fetching items:', error);
    else return data;
};

Update: Memperbarui Item

Fungsi untuk memperbarui item yang sudah ada memerlukan ID item yang ingin diperbarui.

const updateItem = async (id, name, description) => {
    const { data, error } = await supabase
        .from('items')
        .update({ name: name, description: description })
        .match({ id: id });
    
    if (error) console.log('Error updating item:', error);
    else console.log('Item updated:', data);
};

Delete: Menghapus Item

Untuk menghapus item dari database, Anda perlu menulis fungsi yang menerima ID item sebagai parameter.

const deleteItem = async (id) => {
    const { data, error } = await supabase
        .from('items')
        .delete()
        .match({ id: id });
    
    if (error) console.log('Error deleting item:', error);
    else console.log('Item deleted:', data);
};

Menghubungkan Fungsi dengan Antarmuka Pengguna

Sekarang Anda telah membuat fungsi CRUD, saatnya untuk menghubungkannya dengan antarmuka pengguna React. Anda bisa membuat form input dan daftar untuk menampilkan item.

Membuat Form Input

Gunakan formulir untuk menginput data baru yang akan ditambahkan ke database.

const [name, setName] = useState('');
const [description, setDescription] = useState('');

const handleSubmit = (e) => {
    e.preventDefault();
    addItem(name, description);
    setName('');
    setDescription('');
};

return (
    <form onSubmit={handleSubmit}>
        <input 
            type="text" 
            value={name} 
            onChange={(e) => setName(e.target.value)} 
            placeholder="Nama item" 
            required 
        />
        <textarea 
            value={description} 
            onChange={(e) => setDescription(e.target.value)} 
            placeholder="Deskripsi" 
            required 
        />
        <button type="submit">Tambah Item</button>
    </form>
);

Menampilkan Daftar Item

Terakhir, tampilkan daftar item yang diambil dari database.

const items = await fetchItems();

return (
    <ul>
        {items.map(item => (
            <li key={item.id}>
                <h3>{item.name}</h3>
                <p>{item.description}</p>
                {/* Tambahkan tombol untuk memperbarui dan menghapus item di sini */}
            </li>
        ))}
    </ul>
);

Selesai!

Dengan langkah-langkah di atas, Anda sekarang telah berhasil membuat aplikasi CRUD menggunakan Supabase dan React. Anda dapat memperluas aplikasi ini dengan menambahkan fitur lebih lanjut, seperti autentikasi pengguna menggunakan Supabase atau meningkatkan antarmuka pengguna untuk pengalaman yang lebih baik. Integrasi komponen dan fungsi yang telah dipelajari akan memberi Anda dasar yang kuat untuk menerapkan teknologi ini dalam proyek masa depan. Selamat mencoba, dan semoga berhasil dalam perjalanan pengembangan Anda!

#Sys Admin