Vad är en full stack-app? En förklaring på enkel svenska

En full stack-app är en app som innehåller alla lager den behöver för att fungera: frontend som människor ser och klickar i, backend som körs på en server och upprätthåller reglerna, och databasen som minns allt. En att-göra-lista som sparar dina uppgifter, låter dig logga in från vilken enhet som helst och inte visar din lista för någon annan är full stack. En enda sida som bara visar dina öppettider är det inte.

”Stack” betyder bara de tekniklager som ligger ovanpå varandra. ”Full” betyder att alla finns där.

Varför det spelar roll när du bygger med AI

När du beskriver en app för en AI-byggare avgör orden du använder vilka lager som byggs. ”Gör en sida som visar vår meny” ger en frontend. ”Låt kunder beställa från vår meny och låt köket se nya beställningar” kräver alla tre lagren, eftersom beställningar måste sparas, delas mellan två typer av användare och hållas privata.

Att känna till skillnaden hjälper dig på tre sätt:

• Du ber om rätt sak. Om du vill ha data sparad, säg det. En byggare som bara gör frontend ser färdig ut men glömmer allt vid en uppdatering.
• Du upptäcker falsk fullständighet. En demo med exempeldata kan se identisk ut med en fungerande app. Att känna till lagren låter dig kontrollera att datan verkligen går någonstans.
• Du förstår driftkostnaderna. En ren frontend kan serveras som statiska filer. En backend och en databas är program som körs på servrar, och där kommer merparten av hostingkostnaden ifrån.

En vardaglig jämförelse: en restaurang

Tänk på en restaurang.

• Matsalen är frontend. Menyer, bord och servitörens anteckningsblock. Det är vad gästerna ser, och det ska vara trevligt och lätt att använda.
• Köket är backend. Gäster går aldrig in. Det tar emot beställningar, kontrollerar att rätten finns, lagar den och vägrar konstiga önskemål. Reglerna bor här.
• Förrådet och orderboken är databasen. De håller reda på vad som finns och vad som beställts, så att inget glöms bort när skiftet byts.

En restaurang med bara matsal kan visa dig en fin meny, men du blir inte mätt. Det är en frontend-only-app som låtsas vara full stack.

De tre lagren i detalj

Lagren pratar med varandra i en fast ordning. Frontend ber backend om något via ett API, en definierad uppsättning förfrågningar som backend accepterar. Backend kontrollerar förfrågan, läser eller skriver i databasen och skickar tillbaka ett svar. Frontend pratar aldrig direkt med databasen.

Den ordningen är den viktigaste säkerhetsidén i hela stacken. Allt i frontend kan läsas och ändras av besökaren, eftersom det körs på hans eller hennes enhet. Därför måste reglerna, som ”bara ägaren får se den här fakturan” eller ”en kupong kan användas en gång”, upprätthållas i backend. Mer om uppdelningen finns i frontend kontra backend.

Ett genomgånget exempel: en bokningsapp för en yogastudio

Säg att du driver en yogastudio och vill att folk ska boka pass online.

Vad besökaren gör: öppnar sajten, ser veckans pass, trycker på ett, loggar in och bokar en plats.

Vad som händer under ytan:

1. Frontend visar schemat. För att fylla i det frågar den backend: ”Vilka pass är det den här veckan, och hur många platser finns kvar?”
2. Backend frågar databasen efter passen och räknar bokningarna för varje, och svarar sedan.
3. Besökaren trycker på Boka. Frontend skickar ”boka pass 42 för den här inloggade personen”.
4. Backend kontrollerar: är personen verkligen inloggad? Är passet fullt? Har de redan bokat det? Bara om allt stämmer skriver den en ny bokningsrad i databasen.
5. Backend svarar ”bokat”, och frontend visar en bekräftelse.
6. Senare loggar studioägaren in och ser passlistan. Backend kontrollerar att hon är administratör innan den visar alla deltagares namn.

Föreställ dig nu att detta byggts som enbart frontend. Schemat kanske visas, och Boka-knappen kanske visar en fin bock, men bokningen skulle försvinna vid omladdning, antalet kvarvarande platser skulle bli fel för alla andra, och ägaren skulle aldrig se den. Steg fyra, kontrollerna, skulle saknas helt. Det är den praktiska skillnaden.

Viktiga begrepp

• Frontend (klientsidan): delen som körs i webbläsaren.
• Backend (serversidan): delen som körs på en server. Kallas även API-servern.
• Databas: där data lagras på ett ordnat sätt. Se vad en databas är.
• API: listan över förfrågningar som backend accepterar från frontend eller andra program.
• Autentisering: att kontrollera vem någon är (inloggning). Auktorisering: att kontrollera vad de får göra.
• Deployment: att lägga ut alla lager på servrar så att allmänheten kan använda dem.
• Monolit kontra tjänster: ett program som gör allt, kontra flera mindre (till exempel en webbplats och ett separat API). Båda är full stack.

Vanliga misstag och missuppfattningar

• ”Det ser klart ut, så det är klart.” Exempeldata och en knapp som ser fungerande ut är inte samma sak som sparad data. Ladda om sidan, öppna den i ett privat fönster och kontrollera att datan finns kvar.
• Att lägga reglerna i frontend. Att dölja en knapp är inte säkerhet. Om backend inte kontrollerar kan vem som helst som känner till förfrågan skicka den.
• Att lägga hemliga nycklar i frontend. En betalnings- eller AI-leverantörs nyckel i webbläsarkod kan läsas av varje besökare. Nycklar hör hemma i backend, i miljövariabler. Se miljövariabler och hemligheter.
• Att tro att full stack betyder komplicerat. En liten full stack-app kan vara några skärmar, en handfull backend-routes och tre databastabeller. Det är en beskrivning av lagren, inte av storleken.
• Att tro att du måste välja varje teknik själv. Vilken välkänd, vanligt förekommande stack som helst duger för en första version. Det som väger tyngre är en tydlig beskrivning av datan och reglerna.

Vad du ska be din AI-byggare om

Beskriv appen utifrån de tre lagren, även om du inte namnger dem:

• Datan: ”Spara pass (namn, tid, kapacitet) och bokningar (pass, person, bokningstid) i en databas.”
• Reglerna: ”Ett pass kan inte bokas över kapaciteten. En person kan boka ett pass bara en gång. Bara administratörer får se vem som bokat.”
• Skärmarna: ”Ett veckoschema, en bokningsbekräftelse, en adminsida som listar bokningar per pass.”
• Kontrollerna: ”Upprätthåll dessa regler på servern, inte bara i sidan. Håll alla API-nycklar på servern.”

Testa sedan som en skeptiker: ladda om, logga in som två olika personer, försök se data du inte borde se. Guiden om att bygga en app med AI går igenom hela loopen från början till slut.

Full stack-appar på Mythex

Mythex bygger full stack-webbappar utifrån en chattbeskrivning. Som standard får en ny app en React- och TypeScript-frontend. När appen behöver spara data lägger Mythex till en dedikerad Postgres-databas i projektet, och du kan be om en separat API-server (till exempel Python, Node, C# eller Java) bredvid webbplatsen. Allt körs tillsammans i en live-förhandsvisning och publiceras till en publik URL. Dokumentationssidan om appar med flera tjänster visar hur en webbplats och ett API förhandsgranskas och publiceras tillsammans, och sidan full stack-appbyggaren har startpunkter.

Frågor