Supabase Cloud Storage ile CRUD React Uygulaması Nasıl Oluşturulur

React, geliştiricilerin web uygulamaları için kullanıcı arabirimleri oluşturma biçiminde devrim yarattı. Bileşen tabanlı mimarisi ve bildirime dayalı sözdizimi, etkileşimli ve dinamik kullanıcı deneyimleri oluşturmak için güçlü bir temel sağlar.

Bir React geliştiricisi olarak, CRUD (Oluştur, Oku, Güncelle, Sil) işlemlerinin nasıl uygulanacağına hakim olmak, sağlam ve verimli web çözümleri oluşturmaya yönelik çok önemli bir ilk adımdır.

Supabase Cloud Storage'ı arka uç çözümünüz olarak kullanarak basit bir React CRUD uygulamasının nasıl oluşturulacağını öğrenin.

Supabase Hizmet Olarak Arka Uç Çözümü

Hizmet Olarak Arka Uç (BaaS) sağlayıcılarıSupabase gibi, web uygulamalarınız için sıfırdan tam teşekküllü bir arka uç hizmeti oluşturmaya uygun bir alternatif sunar. İdeal olarak, bu çözümler, React web uygulamalarınız için verimli bir arka uç sistemi kurmak için gerekli olan çok çeşitli önceden oluşturulmuş arka uç hizmetleri sağlar.

BaaS ile veri depolama, kimlik doğrulama sistemleri, gerçek zamanlı abonelikler gibi özellikleri ve daha fazlasını bu hizmetleri bağımsız olarak geliştirmeye ve sürdürmeye gerek kalmadan kullanabilirsiniz.

Supabase gibi BaaS çözümlerini projenize entegre ederek, güçlü arka uç hizmetlerinden yararlanmaya devam ederken geliştirme ve nakliye süresini önemli ölçüde azaltabilirsiniz.

Bir Supabase Bulut Depolama Projesi Kurun

Başlamak için şuraya gidin: Supabase'in web sitesive bir hesap için kaydolun.

1. Bir hesaba kaydolduktan sonra, hesabınıza giriş yapın Gösterge Paneli sayfa.
2. Tıkla Yeni proje düğme.
3. Proje detaylarını doldurun ve tıklayın Yeni proje oluştur.
4. Proje ayarlandığında, öğesini seçin ve tıklayın. SQL Düzenleyici sol bölmedeki özellikler panelindeki özellik düğmesi.
5. Aşağıdaki SQL deyimini çalıştırın SQL düzenleyici Bir demo tablosu oluşturmak için. React uygulaması ile kullanacağınız verileri tutacaktır.

   yaratmakmasa ürünler (
    kimlik birincil anahtarı olarak varsayılan olarak oluşturulan id bigint,
    isim metni,
    açıklama metni
   );

Bir React CRUD Uygulaması Kurun

Bir React uygulaması oluşturun, kök dizine gidin ve yeni bir dosya oluşturun, .env, bazı ortam değişkenlerini ayarlamak için. Supabase'inize gidin ayarlar sayfası, aç API bölümüne gidin ve değerleri kopyalayın Proje URLsi Ve genel anon anahtarı. Bunları env dosyanıza yapıştırın:

REACT_APP_SUPABASE_URL = proje URL'si
REACT_APP_SUPABASE_ANON_KEY = genel anon anahtarı

Ardından, Supabase'in JavaScript kitaplığını React projenize yüklemek için bu komutu çalıştırın:

npm kurulumu @supabase/supabase-js

Supabase İstemcisini Yapılandırma

İçinde kaynak dizin, yeni bir tane oluştur utils/SupabaseClient.js dosya ve aşağıdaki kod:

içe aktarmak {istemci oluştur} itibaren"@supabase/supabase-js"; 
sabit supabaseURL = işlem.env. REACT_APP_SUPABASE_URL;
sabit supabaseAnonKey = işlem.env. REACT_APP_SUPABASE_ANON_KEY;
ihracatsabit supabase = createClient (supabaseURL, supabaseAnonKey);

Bu kod, Supabase URL'sini ve genel bir anon anahtarını sağlayarak bir Supabase istemci örneği oluşturur ve React uygulamasının Supabase API'leri ile iletişim kurmasına ve CRUD işlemleri gerçekleştirmesine olanak tanır.

Bu projenin kodunu burada bulabilirsiniz. GitHub deposu.

CRUD İşlemlerini Gerçekleştirin

Supabase'in bulut depolamasını ve React projenizi başarıyla kurduğunuza göre, React uygulamanızda CRUD işlemlerini gerçekleştirin.

1. Veritabanına Veri Ekleme

Aç kaynak/Uygulama.js dosya, standart React kodunu silin ve aşağıdakileri ekleyin:

içe aktarmak { useState, useEffect } itibaren'tepki';
içe aktarmak ÜrünKartı itibaren'./components/ProductCard';
içe aktarmak { alt taban } itibaren'./utils/SupabaseClient';
içe aktarmak'./Uygulama.css';
ihracatvarsayılanişlevUygulama() {
sabit [isim, setName] = useState('');
sabit [açıklama, setDescription] = useState('');
zaman uyumsuzişlevürün ekle() {
denemek {
sabit { veri, hata } = beklemek supabase
 .itibaren('ürünler')
 .sokmak({
 isim: isim,
 açıklama: açıklama
 })
 .Bekar();
eğer (hata) fırlatmak hata;
pencere.konum.yeniden yükle();
 } yakalamak (hata) {
 uyarı (hata.mesaj);
 }
 }

Bu kod bir tanımlar ürün ekle zaman uyumsuz olarak yeni bir kayıt ekleyen işleyici işlevi ürünler bulut veritabanındaki tablo. Ekleme işlemi başarılı olursa, sayfa güncellenen ürün listesini yansıtacak şekilde yeniden yüklenecektir.

2. Bulut Veritabanından Veri Oku

Saklanan verileri veritabanından almak için bir işleyici işlevi tanımlayın.

sabit [ürünler, setProducts] = useState([]);
zaman uyumsuzişlevürünleri al() {
denemek {
sabit { veri, hata } = beklemek supabase
 .itibaren('ürünler')
 .seçme('*')
 .limit(10);
eğer (hata) fırlatmak hata;
eğer (veri != hükümsüz) {
 setProducts (veri);
 }
 } yakalamak (hata) {
 uyarı (hata.mesaj);
 }
 }
 useEffect(() => {
 getProducts();
 }, []);

Bu kod, verileri veritabanından eşzamansız olarak getirir. Getirme sorgusu, ürünler tablosundaki tüm verileri alır, sonuçları maksimum 10 kayıtla sınırlar ve tabloyu günceller. ürünler' alınan verilerle durum.

bu useEffectTepki kancası çalıştırır ürünleri al bileşen monte edildiğinde çalışır. Bu, bileşen başlangıçta işlendiğinde ürün verilerinin alınmasını ve işlenmesini sağlar. Son olarak, kullanıcıların bir Supabase veritabanına ürün eklemesine ve veritabanından getirilen mevcut ürünleri görüntülemesine izin vermek için tarayıcıda girdi JSX öğelerini işleyen kodu ekleyin.

geri dönmek (
 <>

"başlık kabı">
Mağaza Ürünleri</h3>
 </div>
 </header>


Ürün Verilerini Supabase Veritabanına ekleyin</h3>


"ürün-kapsayıcı oluştur">


Ürün Adı</label>
 tür="metin"
 kimlik="isim"
 onChange={(e) => setName (e.target.value)}
 />
Ürün Açıklaması</label>
 tür="metin"
 kimlik="Tanım"
 onChange={(e) => setDescription (e.target.value)}
 />


 ürün ekle()}>
 ürün ekle
 </button>
 </div>
 </div>




Aktüel Ürünler içinde Veritabanı</h3>

"ürün listesi kabı">
 {ürünler.harita((ürün) => (



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

Getirilen veriler ürün dizisi sahne olarak iletilir ve içinde dinamik olarak işlenir ÜrünKartı bileşenini kullanarak harita işlev.

3. Veritabanındaki Mevcut Verileri Güncelleme ve Silme

Yeni bir tane oluştur bileşenler/ProductCard.js dosya /src dizin. Handler fonksiyonlarını tanımlamadan önce bu componentte implemente edeceğiniz stateleri ve JSX elemanlarını görelim.

içe aktarmak { kullanımDevlet } itibaren'tepki';
içe aktarmak { alt taban } itibaren'../utils/SupabaseClient';
içe aktarmak'./productcard.styles.css';
ihracatvarsayılanişlevÜrünKartı(sahne) {
sabit ürün = aksesuarlar.ürün;
sabit [düzenleme, setEditing] = useState(YANLIŞ);
sabit [ad, setName] = useState (ürün.adı);
sabit [açıklama, setDescription] = useState (product.description);
geri dönmek (
"ürün kartı">


 {düzenleme YANLIŞ? (


{ürün.adı}/h5>


{ürün.açıklama}/p>
"sil düğmesi" onClick={() => deleteProduct()}>Ürünü Sil</button>
"düzenle düğmesi" onClick={() => setEditing(doğru)}>Ürünü Düzenle</button>
 </div>
 ): (


Ürün Düzenleme</h4>
"geri git düğmesi" onClick={() => setEditing(YANLIŞ)}>Geri Dön</button>


"isim">Ürün Adı</label>
 tür="metin"
 kimlik="isim"
 defaultValue={product.name}
 onChange={(e) => setName (e.target.value)}/>
"Tanım">Ürün Açıklaması</label>
 tür="metin"
 kimlik="Tanım"
 defaultValue={product.description}
 onChange={(e) => setDescription (e.target.value)}/>


"güncelleme düğmesi" onClick={() => updateProduct()}>Ürünü Güncelle içinde Supabase DB</button>
 </div>)}
 </div>
 </div>
 );
}

zaman uyumsuzişlevgüncellemeÜrün() {
denemek {
sabit { veri, hata } = beklemek supabase
 .itibaren('ürünler')
 .güncelleme({
 isim: isim,
 açıklama: açıklama
 })
 .eq('İD', ürün kimliği);
eğer (hata) fırlatmak hata;
pencere.konum.yeniden yükle();
 } yakalamak (hata) {
 uyarı (hata.mesaj);
 }
}

zaman uyumsuzişlevsilÜrün() {
denemek {
sabit { veri, hata } = beklemek supabase
 .itibaren('ürünler')
 .silmek()
 .eq('İD', ürün kimliği);
eğer (hata) fırlatmak hata;
pencere.konum.yeniden yükle();
 } yakalamak (hata) {
 uyarı (hata.mesaj);
 }
}