Cara Membangun Aplikasi CRUD React Dengan Penyimpanan Cloud Supabase

React telah merevolusi cara pengembang membangun antarmuka pengguna untuk aplikasi web. Arsitektur berbasis komponen dan sintaks deklaratifnya memberikan landasan yang kuat untuk menciptakan pengalaman pengguna yang interaktif dan dinamis.

Sebagai pengembang React, menguasai cara mengimplementasikan operasi CRUD (Buat, Baca, Perbarui, Hapus) adalah langkah pertama yang penting untuk membangun solusi web yang tangguh dan efisien.

Pelajari cara membuat aplikasi React CRUD sederhana, menggunakan Supabase Cloud Storage sebagai solusi backend Anda.

Solusi Supabase Backend-as-a-Service

Penyedia backend-as-a-Service (BaaS)., seperti Supabase, menawarkan alternatif yang nyaman untuk membangun layanan backend lengkap dari awal untuk aplikasi web Anda. Idealnya, solusi ini menyediakan berbagai layanan backend bawaan yang penting untuk menyiapkan sistem backend yang efisien untuk aplikasi web React Anda.

Dengan BaaS, Anda dapat menggunakan fitur seperti penyimpanan data, sistem autentikasi, langganan waktu nyata, dan lainnya tanpa perlu mengembangkan dan memelihara layanan ini secara mandiri.

Dengan mengintegrasikan solusi BaaS seperti Supabase ke dalam proyek Anda, Anda dapat secara signifikan mengurangi waktu pengembangan dan pengiriman sambil tetap mendapatkan keuntungan dari layanan backend yang tangguh.

Menyiapkan Proyek Penyimpanan Cloud Supabase

Untuk memulai, pergilah ke situs web Supabase, dan daftar akun.

1. Setelah Anda mendaftar untuk akun, masuk ke akun Anda dasbor halaman.
2. Klik pada Proyek baru tombol.
3. Isi detail proyek dan klik Buat proyek baru.
4. Dengan pengaturan proyek, pilih dan klik Editor SQL tombol fitur di panel fitur panel kiri.
5. Jalankan pernyataan SQL di bawah ini di editor SQL untuk membuat tabel demo. Itu akan menyimpan data yang akan Anda gunakan dengan aplikasi React.

   membuatmeja produk (
    id bigint dihasilkan secara default sebagai kunci utama identitas,
    teks nama,
    teks deskripsi
   );

Siapkan Aplikasi React CRUD

Buat aplikasi Bereaksi, arahkan ke direktori root, dan buat file baru, .env, untuk mengatur beberapa variabel lingkungan. Kepala ke Supabase Anda pengaturan halaman, buka API bagian, dan salin nilai untuk URL proyek Dan kunci anon publik. Rekatkan ini ke file env Anda:

REACT_APP_SUPABASE_URL = URL proyek
REACT_APP_SUPABASE_ANON_KEY = kunci anonim publik

Selanjutnya, jalankan perintah ini untuk menginstal pustaka JavaScript Supabase di proyek React Anda:

npm instal @supabase/supabase-js

Konfigurasikan Klien Supabase

Dalam src direktori, buat yang baru utils/SupabaseClient.js file dan kode di bawah ini:

impor { buatKlien } dari'@supabase/supabase-js'; 
const supabaseURL = process.env. REACT_APP_SUPABASE_URL;
const supabaseAnonKey = process.env. REACT_APP_SUPABASE_ANON_KEY;
eksporconst supabase = createClient (supabaseURL, supabaseAnonKey);

Kode ini membuat instance klien Supabase dengan menyediakan URL Supabase dan kunci anon publik, memungkinkan aplikasi React untuk berkomunikasi dengan API Supabase dan melakukan operasi CRUD.

Anda dapat menemukan kode proyek ini di sini repositori GitHub.

Menerapkan Operasi CRUD

Sekarang setelah Anda berhasil menyiapkan penyimpanan cloud Supabase dan proyek React Anda, implementasikan operasi CRUD di aplikasi React Anda.

1. Tambahkan Data ke Basis Data

Buka src/App.js file, hapus kode React boilerplate, dan tambahkan berikut ini:

impor { useState, useEffect } dari'reaksi';
impor Kartu Produk dari'./components/ProductCard';
impor { supabase } dari'./utils/SupabaseClient';
impor'./App.css';
eksporbawaanfungsiAplikasi() {
const [nama, setName] = useState('');
const [deskripsi, setDeskripsi] = useState('');
asinkronfungsiaddProduct() {
mencoba {
const { data, kesalahan } = menunggu supabase
 .dari('produk')
 .menyisipkan({
 nama: nama,
 deskripsi: deskripsi
 })
 .lajang();
jika (kesalahan) melemparkan kesalahan;
jendela.location.reload();
 } menangkap (kesalahan) {
 waspada (error.message);
 }
 }

Kode ini mendefinisikan sebuah addProduct fungsi handler yang secara asinkron menyisipkan record baru ke dalam produk tabel di database cloud. Jika operasi penyisipan berhasil, halaman akan dimuat ulang untuk mencerminkan daftar produk yang diperbarui.

2. Baca Data Dari Database Cloud

Tentukan fungsi penangan untuk mengambil data yang disimpan dari database.

const [produk, setProduk] = useState([]);
asinkronfungsidapatkanProduk() {
mencoba {
const { data, kesalahan } = menunggu supabase
 .dari('produk')
 .Pilih('*')
 .membatasi(10);
jika (kesalahan) melemparkan kesalahan;
jika (data != batal) {
 setProduk (data);
 }
 } menangkap (kesalahan) {
 waspada (error.message);
 }
 }
 gunakanEfek(() => {
 dapatkanProduk();
 }, []);

Kode ini secara asinkron mengambil data dari database. Kueri pengambilan mengambil semua data dari tabel produk, membatasi hasil hingga maksimum 10 catatan, dan memperbarui produk' negara dengan data yang diambil.

Itu useEffectBereaksi kait menjalankan dapatkanProduk berfungsi saat komponen dipasang. Ini memastikan bahwa data produk diambil dan dirender saat komponen pertama kali dirender. Terakhir, tambahkan kode yang merender input elemen JSX di browser untuk memungkinkan pengguna menambahkan produk ke database Supabase dan menampilkan produk yang ada yang diambil dari database.

kembali (
 <>

"wadah-header">
Simpan Produk</h3>
 </div>
 </header>


Tambahkan Data produk ke Database Supabase</h3>


"buat-produk-wadah">


Nama Produk</label>
 jenis="teks"
 id="nama"
 onChange={(e) => setName (e.target.nilai)}
 />
Deskripsi Produk</label>
 jenis="teks"
 id="keterangan"
 onChange={(e) => setDescription (e.target.nilai)}
 />


 tambahkanProduk()}>
 Tambahkan Produk
 </button>
 </div>
 </div>




Produk Saat Ini di dalam Basis Data</h3>

"wadah-daftar-produk">
 {produk.peta((produk) => (



 </div>
 ))}
 </div>
 </>
 );
}

Data yang diambil di rangkaian produk diteruskan sebagai alat peraga dan dirender secara dinamis di dalam Kartu Produk komponen menggunakan peta fungsi.

3. Perbarui dan Hapus Data yang Ada di Database

Buat yang baru komponen/ProductCard.js berkas di /src direktori. Sebelum mendefinisikan fungsi handler, mari kita lihat status dan elemen JSX yang akan Anda implementasikan dalam komponen ini.

impor { status penggunaan } dari'reaksi';
impor { supabase } dari'../utils/SupabaseClient';
impor'./productcard.styles.css';
eksporbawaanfungsiKartu Produk(Atribut) {
const produk = alat peraga.produk;
const [editing, setEditing] = useState(PALSU);
const [nama, setName] = useState (namaproduk);
const [deskripsi, setDescription] = useState (product.description);
kembali (
"kartu-produk">


 {mengedit PALSU? (


{nama.produk}</h5>


{product.description}</p>
"tombol hapus" onClick={() => deleteProduct()}>Hapus Produk</button>
"tombol edit" onClick={() => setEditing(BENAR)}>Edit Produk</button>
 </div>
 ): (


Mengedit Produk</h4>
"tombol kembali" onClick={() => setEditing(PALSU)}>Kembali</button>


"nama">Nama Produk</label>
 jenis="teks"
 id="nama"
 defaultValue={namaproduk.}
 onChange={(e) => setName (e.target.nilai)}/>
"keterangan">Deskripsi Produk</label>
 jenis="teks"
 id="keterangan"
 defaultValue={product.description}
 onChange={(e) => setDescription (e.target.nilai)}/>


"tombol pembaruan" onClick={() => updateProduct()}>Perbarui Produk di dalam Supabase DB</button>
 </div>)}
 </div>
 </div>
 );
}

asinkronfungsiperbaruiProduk() {
mencoba {
const { data, kesalahan } = menunggu supabase
 .dari('produk')
 .memperbarui({
 nama: nama,
 deskripsi: deskripsi
 })
 .eq('pengenal', ID Produk);
jika (kesalahan) melemparkan kesalahan;
jendela.location.reload();
 } menangkap (kesalahan) {
 waspada (error.message);
 }
}

asinkronfungsihapusProduk() {
mencoba {
const { data, kesalahan } = menunggu supabase
 .dari('produk')
 .menghapus()
 .eq('pengenal', ID Produk);
jika (kesalahan) melemparkan kesalahan;
jendela.location.reload();
 } menangkap (kesalahan) {
 waspada (error.message);
 }
}