ILLA home page
  1. Supabase DB

Supabase este o alternativă de Firebase open-source care permite dezvoltatorilor să construiască în timp real web și aplicații mobile. Acesta oferă multe dintre aceleași caracteristici ca Firebase, cum ar fi bazele de date în timp real, autentificarea utilizatorului, și găzduire, dar cu beneficiile adăugate de a fi open-source și de a furniza un SQL API. Acest lucru permite dezvoltatorilor să utilizeze cunoștințele și instrumentele existente SQL, facilitând integrarea cu alte sisteme. În plus, Supabase oferă o platformă mai flexibilă și mai personalizabilă decât Firebase, care poate fi mai restrictivă în ceea ce privește modelarea și utilizarea datelor.

Acest tutorial prezintă procesul de creare a unui Panou Administrator folosind ILLA Builder și Supabase în câțiva pași simpli. ILLA este o platformă cu coduri joase pentru dezvoltatori, care permite dezvoltarea și implementarea rapidă a instrumentelor interne. Permite crearea de pagini prin glisarea și fixarea componentelor UI, conectarea la orice bază de date sau API și scrierea JavaScript. Pentru a afla mai multe despre Supabase, vizitați site-ul lor la https://supabase.com/. Să începem!

Pasul 1: Configureaza-ti inapoi pe Supabase

Pe Supabase dashboard, faceți clic pe New project și setați numele pe adminPanel.

Creați un tabel nou dând click pe Creează un tabel nou .

Supabase oferă o varietate de opțiuni pentru popularea tabelelor cu date, inclusiv interogări de scriere, crearea schemelor printr-o interfață de utilizator și încărcarea fișierelor CSV.

Completează informațiile din tabel. Baza de date este acum configurată.

Pasul 2: Construiește UI pe ILLA Cloud

Pe ILLA Cloud, faceți clic pe Creare Nouă pentru a crea o aplicație nouă.

Trage componentele din panoul Insert în pânză.

Selectați componentele de pe planșă și configurați proprietatea în panoul Inspectează.

După cum se vede în capturile de ecran de mai jos, am construit un simplu panou de administrare.

Pasul 3: Conectează-te la Supabase și config CRUD

Țineți cont de informațiile de conectare a bazei de date sub Setări proiect în Supabase.

În lista de acțiuni, apăsați pe + New și selectați Supabase DB.

Completează formularul pentru a te conecta la instanța Supabase. Testează conexiunea și salvează resursa.

Faceți clic pe `Creare acțiune” pentru a crea o acțiune cu Resursa și configurați CRUD.

Utilizaţi {{ pentru a obţine datele de intrare de pe front-end. Următoarea este un exemplu de pagina Administrare Utilizatori din Panoul de administrare.

Căutați un utilizator după numele introdus în input1

SELECT *
DE LA utilizator
ÎN CÂND nume = "{{input1.value}}"
;

Actualizați datele utilizatorului. Actualizează informațiile utilizatorului atunci când Id-ul se potrivește

UPDATE utilizatorul
SET nume = "{{input3.value}}"
, e-mail = "{{input4.value}}"
WHERE id="{{input2.value}}"
;

Introduceți datele utilizatorului

INTRODUCEŢI LA VALUES("{{input5.value}}","{{input6.value}}","{{input7.value}}");

Șterge un utilizator prin ID

Şterge de la utilizator unde id = "{{input2.value}}";

Pasul 4: Arată date despre componente

Configuraţi proprietăţile componentelor cu {{ . De exemplu:

Resurse