Što je full-stack aplikacija? Objašnjenje jednostavnim jezikom

Full-stack aplikacija je aplikacija koja sadrži svaki sloj potreban da radi: frontend koji ljudi vide i klikaju, backend koji radi na poslužitelju i provodi pravila te bazu podataka koja pamti sve. Popis obaveza koji sprema vaše zadatke, omogućuje prijavu s bilo kojeg uređaja i nikome drugome ne pokazuje vaš popis, full-stack je. Jedna stranica koja samo prikazuje radno vrijeme nije.

„Stack” znači samo slojeve tehnologije složene jedan na drugi. „Full” znači da su svi tu.

Zašto je to važno kad gradite uz AI

Kad AI graditelju opišete aplikaciju, riječi koje koristite određuju koje slojeve će izgraditi. „Napravi stranicu koja prikazuje naš jelovnik” daje frontend. „Neka kupci naručuju iz našeg jelovnika i neka kuhinja vidi nove narudžbe” treba sva tri sloja, jer narudžbe moraju biti spremljene, dijeljene između dvije vrste korisnika i privatne.

Poznavanje razlike pomaže vam na tri načina:

• Tražite pravu stvar. Ako želite da se podaci spremaju, to recite. Graditelj koji izradi samo frontend izgledat će gotovo, ali će sve zaboraviti pri osvježavanju.
• Prepoznajete lažnu cjelovitost. Demo s uzorkom podataka može izgledati identično radnoj aplikaciji. Poznavanje slojeva omogućuje vam da provjerite da podaci stvarno negdje odlaze.
• Razumijete troškove rada. Sam frontend može se poslužiti kao statične datoteke. Backend i baza podataka su programi koji rade na poslužiteljima, a tu nastaje većina troška hostinga.

Svakodnevna usporedba: restoran

Zamislite restoran.

• Blagovaonica je frontend. Jelovnici, stolovi i bilježnica konobara. To je ono što gosti vide i treba biti ugodno i lako za korištenje.
• Kuhinja je backend. Gosti u nju ne ulaze. Ona prima narudžbe, provjerava je li jelo dostupno, kuha ga i odbija čudne zahtjeve. Pravila žive ovdje.
• Spremište i knjiga narudžbi su baza podataka. Čuvaju što postoji i što je naručeno, pa se ništa ne zaboravi pri promjeni smjene.

Restoran s samo blagovaonicom može vam pokazati lijep jelovnik, ali nećete ništa dobiti za jelo. To je frontend-only aplikacija koja se predstavlja kao full-stack.

Tri sloja detaljnije

Slojevi međusobno razgovaraju fiksnim redoslijedom. Frontend od backenda traži nešto putem API-ja, tj. skupa zahtjeva koje backend prihvaća. Backend provjerava zahtjev, čita ili piše u bazu podataka i šalje odgovor. Frontend nikad izravno ne razgovara s bazom.

Taj redoslijed je najvažnija sigurnosna ideja u cijelom slogu. Sve u frontendu posjetitelj može pročitati i promijeniti, jer radi na njegovom uređaju. Zato pravila, poput „samo vlasnik smije vidjeti ovaj račun” ili „kupon se može iskoristiti jednom”, moraju biti provedena na backendu. Više o podjeli pogledajte u frontend naspram backenda.

Primjer: aplikacija za rezervacije u studiju joge

Recimo da vodite studio joge i želite da se ljudi online rezerviraju za satove.

Što posjetitelj radi: otvori stranicu, vidi raspored za ovaj tjedan, dodirne jedan sat, prijavi se i rezervira mjesto.

Što se događa u pozadini:

1. Frontend prikazuje raspored. Da ga popuni, pita backend: „Koji su satovi ovaj tjedan i koliko je mjesta ostalo?”
2. Backend pita bazu podataka za satove i prebroji rezervacije za svaki, pa odgovara.
3. Posjetitelj dodirne Rezerviraj. Frontend šalje: „rezerviraj sat 42 za ovu prijavljenu osobu”.
4. Backend provjerava: je li ta osoba zaista prijavljena? Je li sat pun? Je li već rezervirala? Tek ako je sve u redu, zapisuje novi redak rezervacije u bazu.
5. Backend odgovara „rezervirano”, a frontend prikazuje potvrdu.
6. Kasnije vlasnica studija se prijavi i vidi popis satova. Backend provjerava da je ona administratorica prije nego prikaže imena svih.

Zamislite sada da je ovo izgrađeno samo kao frontend. Raspored bi se možda prikazao, a gumb Rezerviraj bi pokazao lijepu kvačicu, ali bi rezervacija nestala pri osvježavanju, brojač „slobodnih mjesta” bi bio krivi za sve ostale, a vlasnica je nikad ne bi vidjela. Korak 4, provjere, uopće ne bi postojao. U tome je praktična razlika.

Ključni pojmovi

• Frontend (strana klijenta): dio koji radi u pregledniku.
• Backend (strana poslužitelja): dio koji radi na poslužitelju. Zove se i API poslužitelj.
• Baza podataka: mjesto gdje se podaci pohranjuju na organiziran način. Pogledajte što je baza podataka.
• API: popis zahtjeva koje backend prihvaća od frontenda ili drugih programa.
• Autentifikacija: provjera tko je netko (prijava). Autorizacija: provjera što smije raditi.
• Deployment: postavljanje svih slojeva na poslužitelje da ih javnost može koristiti.
• Monolit naspram servisa: jedan program koji radi sve, naspram nekoliko manjih (primjerice web stranica i zaseban API). Oba su full-stack.

Česte pogreške i zablude

• „Izgleda gotovo, pa jest gotovo.” Uzorak podataka i gumb koji izgleda kao da radi nisu isto što i spremljeni podaci. Osvježite stranicu, otvorite je u privatnom prozoru i provjerite jesu li podaci još tu.
• Stavljanje pravila u frontend. Sakrivanje gumba nije sigurnost. Ako backend ne provjerava, svatko tko zna zahtjev može ga poslati.
• Tajni ključevi u frontendu. Ključ za plaćanja ili AI pružatelja u kodu preglednika čita svaki posjetitelj. Ključevi pripadaju backendu, u varijablama okruženja. Pogledajte varijable okruženja i tajne.
• Mišljenje da full-stack znači komplicirano. Mala full-stack aplikacija može imati nekoliko ekrana, nekoliko backend ruta i tri tablice baze. To je opis slojeva, a ne veličine.
• Mišljenje da sami morate odabrati svaku tehnologiju. Za prvu verziju bilo koji razuman, široko korišten stack je dovoljan. Važniji je jasan opis podataka i pravila.

Što tražiti od AI graditelja

Opišite aplikaciju kroz tri sloja, čak i ako ne koristite njihove nazive:

• Podaci: „Spremi satove (naziv, vrijeme, kapacitet) i rezervacije (sat, osoba, vrijeme rezervacije) u bazu podataka.”
• Pravila: „Sat se ne može rezervirati iznad kapaciteta. Osoba može rezervirati sat samo jednom. Samo administratori smiju vidjeti tko je rezervirao.”
• Ekrani: „Tjedni raspored, potvrda rezervacije, administratorska stranica s popisom rezervacija po satu.”
• Provjere: „Provedi ova pravila na poslužitelju, a ne samo na stranici. Čuvaj API ključeve na poslužitelju.”

Zatim testirajte kao skeptik: osvježite stranicu, prijavite se kao dvije različite osobe i pokušajte vidjeti podatke koje ne smijete. Vodič o izradi aplikacije uz AI prolazi kroz cijeli taj ciklus.

Full-stack aplikacije na Mythexu

Mythex gradi full-stack web aplikacije iz opisa u chatu. Nova aplikacija u pravilu dobiva React i TypeScript frontend. Kad aplikaciji treba spremati podatke, Mythex projektu dodaje namjensku Postgres bazu, a možete zatražiti i zaseban API poslužitelj (primjerice u Pythonu, Node.js-u, C#-u ili Javi) uz web stranicu. Sve radi zajedno u živom pregledu i objavljuje se na javnom URL-u. Stranica o aplikacijama s više servisa u dokumentaciji pokazuje kako se web stranica i API zajedno pregledavaju i objavljuju, a stranica graditelj full-stack aplikacija nudi polazne točke.

Pitanja