Gå till innehållet

2.1 Vad är en webbapp? – frontend, backend och API

Illustration: koppling mellan frontend och backend

I Paket 1 byggde du en enkel webbplats:

  • HTML = innehåll
  • CSS = utseende
  • lite JavaScript = små effekter

Nu börjar vi prata om webbappar – sidor som:

  • visar data som kan ändras över tid
  • ofta pratar med en server (backend) via ett API
  • kan kännas mer som ett program än ett “häfte på nätet”

Mål

Efter den här modulen ska du:

  • förstå skillnaden mellan frontend och backend på en enkel nivå
  • veta vad ett API är i grova drag
  • se hur vår lilla webbapp i Paket 2 kommer att fungera

Frontend och backend – enkelt förklarat

Tänk dig en vanlig app i mobilen:

  • Frontend = det du ser och klickar på
  • Backend = det som händer på “baksidan”:
  • spara data
  • hämta data
  • räkna och kontrollera

På webben är det ungefär samma sak:

  • Frontend:
  • HTML, CSS, JavaScript i webbläsaren

  • körs hos användaren (på deras dator/telefon)

  • Backend:

  • kod som körs på en server någonstans
  • får förfrågningar från frontend, t.ex.:
    • “ge mig listan med aktiviteter”
    • “spara den här nya bokningen”

Vad är ett API?

Ett API är ett sätt för program att prata med varandra.

I vår kurs använder vi:

  • webb-API – ett gränssnitt där frontend kan:
  • skicka en förfrågan (request)
  • få tillbaka data (ofta i formatet JSON)

Exempel på idé:

  • Din sida skickar:
    GET /aktiviteter → “Ge mig alla aktiviteter”
  • Servern svarar med JSON, t.ex.:

json [ { "namn": "Promenad i Slottsskogen", "plats": "Göteborg" }, { "namn": "Bordtennis", "plats": "Hisingen" } ]

Din JavaScript-kod kan sedan:

  • läsa den här listan
  • visa den i HTML som en lista eller tabell

Hur webbappen i Paket 2 kommer se ut

I Paket 2 siktar vi på en enkel aktivitetslista som webbapp:

  • visar en lista med “aktiviteter”
  • kan lägga till nya aktiviteter
  • kan (om vi hinner) filtrera eller sortera listan

Tekniskt:

  • Frontend:
  • du gör en HTML-sida som i Paket 1

  • lägger till mer JavaScript som:

    • håller ordning på en lista med data i minnet
    • uppdaterar HTML när listan ändras

  • API / backend:

  • i första versionen kan vi börja helt i webbläsaren (data i en array)
  • vi visar sedan hur samma princip kan användas för att hämta data från ett riktigt API (t.ex. ett öppet test-API)

Vi går inte in på att bygga en “riktig” server i den här modulen – det kommer senare eller som fördjupning.

Visualisera flödet

Ett förenklat flöde kan se ut så här:

  1. Webbläsaren laddar din sida (index.html)
  2. JavaScript körs och:
  3. hämtar data (från en array eller ett API)
  4. bygger upp HTML-listan på sidan
  5. Användaren:
  6. klickar på en knapp “Lägg till aktivitet”
  7. JavaScript lägger till en rad i listan
  8. HTML uppdateras så den visar nya aktiviteten

Förslag på prat/övningar i grupp

  • Rita upp på tavlan:
  • användare → webbläsare → server → databas (som en enkel kedja)
  • Låt deltagarna ge exempel:
  • “Vilka webbappar använder du i vardagen?”
  • “När märker du att en sida hämtar ny data?” (t.ex. när man laddar om flödet i en app)

Detta pass är mest för att placera in Paket 2 i ett sammanhang.
I nästa modul börjar vi skriva mer JavaScript och bygga upp en egen liten lista i koden.