Hva er en full-stack-app? En forklaring på vanlig språk

En full-stack-app er en app som inkluderer alle lagene den trenger for å fungere: frontenden folk ser og klikker på, backenden som kjører på en server og håndhever reglene, og databasen som husker alt. En huskeliste som lagrer oppgavene dine, lar deg logge inn fra hvilken som helst enhet og viser ingen andre listen din, er full-stack. En enkelt side som bare viser åpningstidene dine, er ikke det.

«Stack» betyr bare lagene med teknologi stablet oppå hverandre. «Full» betyr at alle er med.

Hvorfor det betyr noe når du bygger med AI

Når du beskriver en app for en AI-byggere, avgjør ordene du bruker hvilke lag den bygger. «Lag en side som viser menyen vår» gir en frontend. «La kundene bestille fra menyen vår, og la kjøkkenet se nye bestillinger» krever alle tre lagene, fordi bestillinger må lagres, deles mellom to typer brukere og holdes private.

Å kjenne forskjellen hjelper deg på tre måter:

• Du ber om riktig ting. Hvis du vil at data skal lagres, si det. En byggere som bare lager frontenden, ser ferdig ut, men glemmer alt når siden oppdateres.
• Du oppdager falsk fullstendighet. En demo med eksempeldata kan se identisk ut med en fungerende app. Å kjenne lagene lar deg sjekke at dataene faktisk går et sted.
• Du forstår driftskostnadene. En frontend alene kan serveres som statiske filer. En backend og en database er programmer som kjører på servere, og det er der det meste av hostingkostnaden kommer fra.

En hverdagslig sammenligning: en restaurant

Tenk på en restaurant.

• Spisesalen er frontenden. Menyer, bord og servitørens notatblokk. Det er det gjestene ser, og det bør være hyggelig og enkelt å bruke.
• Kjøkkenet er backenden. Gjestene går aldri inn. Det tar imot bestillinger, sjekker at retten er tilgjengelig, lager maten og avviser rare forespørsler. Reglene bor her.
• Lageret og bestillingsboken er databasen. De holder oversikt over hva som finnes og hva som er bestilt, slik at ingenting glemmes når vakten skifter.

En restaurant med bare spisesal kan vise deg en fin meny, men du får ikke mat. Det er en frontend-only-app som later som den er full-stack.

De tre lagene nærmere

Lagene snakker sammen i en fast rekkefølge. Frontenden ber backenden om noe gjennom et API, altså et definert sett med forespørsler backenden godtar. Backenden sjekker forespørselen, leser eller skriver til databasen og sender et svar tilbake. Frontenden snakker aldri direkte med databasen.

Denne rekkefølgen er den viktigste sikkerhetsideen i hele stacken. Alt i frontenden kan leses og endres av besøkende, fordi det kjører på enheten deres. Derfor må reglene, for eksempel «bare eieren kan se denne fakturaen» eller «en kupong kan brukes én gang», håndheves i backenden. For mer om delingen, se frontend vs. backend.

Et konkret eksempel: en bookingapp for timer

Anta at du driver et yogastudio og vil at folk skal booke timer på nettet.

Det besøkende gjør: åpner nettstedet, ser ukens timer, trykker på én, logger inn og booker en plass.

Det som skjer under:

1. Frontenden viser timeplanen. For å fylle den spør den backenden: «Hvilke timer er denne uken, og hvor mange plasser er ledige?»
2. Backenden spør databasen etter timene og teller bookingene for hver, og svarer.
3. Besøkende trykker Book. Frontenden sender «book time 42 for denne innloggede personen».
4. Backenden sjekker: er denne personen virkelig innlogget? Er timen full? Har de allerede booket den? Bare hvis alt er i orden skriver den en ny bookingrad i databasen.
5. Backenden svarer «booket», og frontenden viser en bekreftelse.
6. Senere logger studioeieren inn og ser timelisten. Backenden sjekker at hun er administrator før den viser alles navn.

Nå kan du tenke deg at dette var bygd bare som frontend. Timeplanen kunne vises, og Book-knappen kunne vise en fin hake, men bookingen ville forsvinne ved oppdatering, antallet ledige plasser ville være feil for alle andre, og eieren ville aldri se den. Trinn 4, sjekkene, ville mangle helt. Det er den praktiske forskjellen.

Viktige begreper

• Frontend (klientsiden): delen som kjører i nettleseren.
• Backend (serversiden): delen som kjører på en server. Kalles også API-serveren.
• Database: der data lagres på en organisert måte. Se hva en database er.
• API: listen over forespørsler backenden godtar fra frontenden eller andre programmer.
• Autentisering: å sjekke hvem noen er (innlogging). Autorisasjon: å sjekke hva de har lov til å gjøre.
• Deploy: å sette alle lagene ut på servere slik at publikum kan bruke dem.
• Monolitt vs. tjenester: ett program som gjør alt, kontra flere mindre (for eksempel et nettsted og et eget API). Begge er full-stack.

Vanlige feil og misforståelser

• «Det ser ferdig ut, så det er ferdig.» Eksempeldata og en knapp som ser ut til å virke, er ikke det samme som lagrede data. Oppdater siden, åpne den i et privat vindu, og sjekk at dataene fortsatt er der.
• Å legge reglene i frontenden. Å skjule en knapp er ikke sikkerhet. Hvis backenden ikke sjekker, kan hvem som helst som kjenner forespørselen gjøre den.
• Å legge hemmelige nøkler i frontenden. En nøkkel for betaling eller AI-leverandør i nettleserkode kan leses av alle besøkende. Nøkler hører hjemme i backenden, i miljøvariabler. Se miljøvariabler og hemmeligheter.
• Å tro at full-stack betyr komplisert. En liten full-stack-app kan være noen få skjermer, en håndfull backend-ruter og tre databasetabeller. Det er en beskrivelse av lagene, ikke størrelsen.
• Å tro at du må velge hver teknologi selv. Enhver fornuftig, mye brukt stack duger for en første versjon. Det som betyr mer, er en tydelig beskrivelse av dataene og reglene.

Hva du bør be AI-byggeren din om

Beskriv appen i form av de tre lagene, selv om du ikke navngir dem:

• Dataene: «Lagre timer (navn, tidspunkt, kapasitet) og bookinger (time, person, tidspunkt for booking) i en database.»
• Reglene: «En time kan ikke bookes over kapasitet. En person kan bare booke en time én gang. Bare administratorer kan se hvem som har booket.»
• Skjermene: «En ukentlig timeplan, en bookingbekreftelse, en adminside som lister bookinger per time.»
• Sjekkene: «Håndhev disse reglene på serveren, ikke bare på siden. Behold alle API-nøkler på serveren.»

Test så deretter som en skeptiker: oppdater, logg inn som to forskjellige personer, og prøv å se data du ikke skal se. Guiden til å bygge en app med AI går gjennom hele løkken.

Full-stack-apper på Mythex

Mythex bygger full-stack-webapper fra en beskrivelse i chatten. Som standard får en ny app en React- og TypeScript-frontend. Når appen må lagre data, legger Mythex til en egen Postgres-database i prosjektet, og du kan be om en egen API-server (for eksempel Python, Node, C# eller Java) ved siden av nettstedet. Alt kjører sammen i en live forhåndsvisning og publiseres til en offentlig URL. Dokumentasjonssiden for flertjenesteapper viser hvordan et nettsted og et API forhåndsvises og publiseres sammen, og siden for full-stack-appbyggeren har utgangspunkter.

Spørsmål