← Tilbake

Supabase 3.0 Admin-portal 🛠️

Disse oppgavene forutsetter at du har kontroll på innloggingen. Nå skal vi bygge reelle funksjoner som brukes i profesjonelle systemer.

Sentrale konsepter

Tilgang

Rollebasert kontroll

Sikre at kun admin ser sensitive data ved hjelp av JS-logikk og RLS.

Dataflyt

CRUD & Status

Håndtere arbeidsflyt ved å oppdatere rader (f.eks. fra 'pending' til 'approved').

Sanntid

WebSockets

Abonnere på endringer slik at UI oppdateres uten at brukeren refresher siden.

Slik bruker du ChatGPT som faglig støtte

Prøv selv først! Bruk AI som en læringspartner, ikke en fasit.

Eksempel på prompt:
Jeg har et Supabase-prosjekt med tabellen profiles. Hvordan kan jeg hente alle rader og vise dem i en HTML-tabell?

Oppgave 1 – Admin-dashboard for brukere

Lag en admin-side som viser en oversikt over brukere fra tabellen profiles.

Del 1 – Struktur
  • 1.1Lag admin.html med samme topp og bunn som før.
  • 1.2Legg til overskrift: «Admin-dashboard».
  • 1.3Lag en <table> eller <div id="userList"> for data.
Del 2 – Sikkerhet
  • 2.1Hent innlogget bruker med supabase.auth.getUser().
  • 2.2Sjekk role i profiles-tabellen.
  • 2.3Hvis ikke admin: Vis feilmelding eller send dem til index.html.
Del 3 – Data
  • 3.1Hent alle rader fra profiles.
  • 3.2Lag en løkke i JS som genererer HTML for hver bruker.
Hint: Gjenbruk logikken fra refreshAuthUI() for å sjekke rollen.

Oppgave 2 – Mini-CMS: Arbeidsflyt

Lag et system der elever sender inn innlegg som må godkjennes av en admin.

Del 1 – Database

Opprett tabellen posts med: id, author_id, title, content og status (default: 'pending').

Del 2 – Brukerfunksjon
  • 2.1Lag et skjema for å sende inn tittel og tekst.
  • 2.2Vis en liste over egne innlegg og deres status.
Del 3 – Adminfunksjon
  • 3.1Hent alle innlegg med status = 'pending' til admin-siden.
  • 3.2Legg til knapper for å kjøre .update() på status-feltet.

Oppgave 3 – Realtime (Sanntid) ⚡

Utforsk hvordan Supabase kan oppdatere siden din automatisk uten refresh.

Utforsk

Søk etter Realtime i Supabase-dokumentasjonen. Finn ut hvordan du "abonnerer" på endringer.

Mål

Prøv å vis antall aktive brukere, eller få admin-listen til å oppdatere seg med en gang en ny bruker registrerer seg.

NB: Sanntid er krevende! Målet er å bli kjent med tankegangen, ikke nødvendigvis få det perfekt.