Supabase 3.0 Admin-portal - utfordring for viderekomne

Slik bruker du ChatGPT som faglig støtte

Du skal prøve selv først. Når du står fast, kan du bruke ChatGPT på en faglig måte – omtrent slik du ville spurt en lærer.

• Beskriv hva du prøver å gjøre (kort).
• Vis gjerne koden din (bare den relevante delen).
• Spør konkret: «Hvorfor får jeg denne feilmeldingen?» eller «Hvordan kan jeg filtrere bare brukere med role = 'admin'?».

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

Du skal lage en enkel admin-side som viser en oversikt over brukere fra tabellen profiles. Bare brukere med rolle admin skal kunne se innholdet på siden.

• Forstå hvordan du kan bruke role til å gi forskjellig innhold til forskjellige brukere.
• Hente data fra Supabase og vise dem ryddig i HTML (for eksempel i en tabell).
• Blir tryggere på å lese og forstå eksisterende kode (ikke bare kopiere).

• 1.1Lag en ny fil, for eksempel admin.html, som bruker samme <nav>-topp og <main>-struktur som de andre sidene.
• 1.2Legg inn en tydelig overskrift: «Admin-dashboard».
• 1.3Legg inn et tomt HTML-element (for eksempel en <table> eller <div id="userList">) der brukerne skal listes opp.

• 2.1Bruk liknende kode som du har i innloggingspanelet for å hente innlogget bruker (for eksempel med supabase.auth.getUser()).
• 2.2Bruk spørring mot profiles for å hente rollen til brukeren (for eksempel role).
• 2.3Hvis rollen ikke er admin, kan du for eksempel:
  • vise en beskjed: «Du har ikke tilgang til denne siden.»
  • eller sende brukeren tilbake til index.html.

• 3.1Lag en spørring mot profiles som henter alle rader.
• 3.2Logg resultatet i konsollen (console.log) for å se strukturen.
• 3.3Gå gjennom listen i JavaScript og lag HTML (rader i tabell eller <li> i en liste) for hver bruker.

• Se på koden du allerede har for refreshAuthUI() – den henter også role fra profiles.
• Hvis du får feilen «permission denied for table profiles», sjekk at SQL-skriptet med policy er kjørt riktig.
• Hvis du står fast på selve spørringen: spør ChatGPT om hvordan du kan «hente alle rader fra en Supabase-tabell i JavaScript og vise dem i en HTML-tabell».

Nå skal du lage et enkelt “innleggssystem” der vanlige brukere kan sende inn innlegg, og admin kan godkjenne eller avslå dem.

• Forstå hvordan en enkel arbeidsflyt kan se ut (pending → approved → rejected).
• Trene på å lage og bruke en ny tabell i Supabase.
• Filtrere data etter status, og vise ulike ting til ulike brukere.

• 1.1Opprett en ny tabell, for eksempel posts.
• 1.2Gi tabellen minst disse kolonnene:
  • id (uuid, primary key)
  • author_id (uuid – kan peke på profiles.id eller auth.users.id)
  • title (text)
  • content (text)
  • status (text – for eksempel 'pending', 'approved', 'rejected')
  • created_at (timestamptz, default now())
• 1.3Slå på RLS og start med en enkel policy som gir innloggede brukere lov til å insert og lese sine egne innlegg.

• 2.1Lag et lite skjema (tittel + tekst) på en side, for eksempel posts.html.
• 2.2Når skjemaet sendes inn, opprettes en rad i posts med status = 'pending' og author_id satt til innlogget bruker.
• 2.3Vis en liste over egne innlegg med tittel, status og dato.

• 3.1På admin-siden (eller en egen side), hent alle innlegg med status = 'pending'.
• 3.2Vis dem med knapper som for eksempel «Godkjenn» og «Avslå».
• 3.3Når en admin klikker på en knapp, oppdaterer du radens status til 'approved' eller 'rejected'.

• Tenk på dette som et veldig enkelt versjon av hvordan en lærer godkjenner innleveringer, eller hvordan et innlegg må godkjennes før det vises offentlig.
• Hvis du er usikker på SQL-delen: spør ChatGPT om et eksempel på «Supabase policy for at brukere kan lese og opprette sine egne poster».
• Hvis du er usikker på oppdateringen: søk etter hvordan du bruker .update({ ... }).eq('id', ...) med Supabase i JavaScript.

I denne oppgaven skal du utforske sanntid. Målet er å kunne vise at «X brukere er pålogget nå», eller vise en enkel liste med aktive brukere.

• Få en første forståelse av sanntidsoppdateringer (noe skjer uten at du refresher siden).
• Lese og prøve kode fra dokumentasjon – ikke nødvendigvis forstå alt 100 % første gang.
• Bruke ChatGPT til å forstå nye begreper som Realtime og WebSocket.

• 1.1Gå til Supabase-dokumentasjonen og søk etter Realtime.
• 1.2Finn et eksempel på hvordan man abonnerer på endringer i en tabell.
• 1.3Kopier et lite eksempel til prosjektet ditt (gjerne på en testside) og prøv å få det til å virke uten å gjøre store endringer først.

• 2.1Bestem deg for hvordan du vil måle at noen er “pålogget”:
  • for eksempel ved at de har en aktiv session hos Supabase
  • eller ved at de nylig har sendt et “jeg er aktiv”-signal til en tabell
• 2.2Lag et lite UI-element som viser: «Antall aktive brukere: X».
• 2.3Prøv (hvis du klarer) å vise en enkel liste med e-postene til de aktive brukerne.

• Start veldig enkelt – det er helt greit om din første versjon bare skriver en melding i konsollen når noe endrer seg i en tabell.
• Bruk ChatGPT som “tolk” av dokumentasjonen. For eksempel: Jeg har funnet dette eksemplet i Supabase Realtime-dokumentasjonen. Kan du forklare hva som skjer linje for linje?
• Sanntid er et krevende tema – målet er ikke å få alt perfekt, men å gjøre deg kjent med tankegangen.