Šta je full-stack aplikacija? Jednostavno objašnjenje

Full-stack aplikacija je aplikacija koja sadrži svaki sloj koji joj je potreban da radi: frontend koji ljudi vide i na koji klikću, backend koji radi na serveru i primenjuje pravila, i bazu podataka koja pamti sve. Lista obaveza koja čuva vaše zadatke, dozvoljava prijavu sa bilo kog uređaja i ne pokazuje nikome drugom vašu listu, to je full-stack. Jedna stranica koja samo prikazuje radno vreme vaše radnje nije.

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

Zašto je važno kada pravite nešto uz AI

Kada AI graditelju opišete aplikaciju, reči koje koristite određuju koje slojeve će napraviti. „Napravi stranicu koja prikazuje naš jelovnik“ daje frontend. „Neka kupci poručuju sa našeg jelovnika i neka kuhinja vidi nove porudžbine“ traži sva tri sloja, jer porudžbine moraju da se čuvaju, dele između dve vrste korisnika i ostanu privatne.

Znanje o razlici pomaže vam na tri načina:

• Tražite pravu stvar. Ako želite da se podaci čuvaju, to recite. Graditelj koji pravi samo frontend izgleda gotovo, ali zaboravi sve pri osvežavanju.
• Prepoznajete lažnu potpunost. Demo sa primernim podacima može izgledati identično kao radna aplikacija. Znanje o slojevima omogućava vam da proverite da li podaci zaista negde odlaze.
• Razumete troškove rada. Sam frontend može se služiti kao statički fajlovi. Backend i baza su programi koji rade na serverima, a tu nastaje većina troškova hostinga.

Svakodnevna analogija: restoran

Zamislite restoran.

• Sala je frontend. Jelovnici, stolovi i beležnica konobara. To je ono što gosti vide i treba da bude prijatno i lako za korišćenje.
• Kuhinja je backend. Gosti tu ne ulaze. Ona prima porudžbine, proverava da li je jelo dostupno, sprema ga i odbija čudne zahteve. Pravila žive ovde.
• Magacin i knjiga porudžbina su baza. Čuvaju šta postoji i šta je naručeno, pa se ništa ne zaboravi pri promeni smene.

Restoran samo sa salom može da vam pokaže lep jelovnik, ali ne možete da se najedete. To je aplikacija samo sa frontendom koja se pretvara da je full-stack.

Tri sloja detaljnije

Slojevi međusobno komuniciraju u fiksnom redosledu. Frontend traži nešto od backenda preko API-ja — definisanog skupa zahteva koje backend prihvata. Backend proverava zahtev, čita ili upisuje u bazu i šalje odgovor. Frontend nikada ne razgovara direktno sa bazom.

Taj redosled je najvažnija bezbednosna ideja u celom steku. Sve u frontendu posetilac može da pročita i menja, jer se izvršava na njegovom uređaju. Zato pravila — „samo vlasnik sme da vidi ovaj račun“, „kupon se sme iskoristiti jednom“ — moraju da se sprovode u backendu. Za više o podeli pogledajte frontend i backend.

Primer: aplikacija za rezervacije časova

Recimo da vodite studio za jogu i želite da ljudi rezervišu časove online.

Šta posetilac radi: otvara sajt, vidi časove ove nedelje, dodirne jedan, prijavi se i rezerviše mesto.

Šta se dešava ispod:

1. Frontend prikazuje raspored. Da bi ga popunio, pita backend: „Koji časovi su ove nedelje i koliko mesta je ostalo?“
2. Backend traži od baze časove i broji rezervacije za svaki, pa odgovara.
3. Posetilac dodirne Rezerviši. Frontend šalje „rezerviši čas 42 za ovu prijavljenu osobu“.
4. Backend proverava: da li je ta osoba stvarno prijavljena? Da li je čas pun? Da li je već rezervisala? Samo ako je sve u redu, upisuje novi red rezervacije u bazu.
5. Backend odgovara „rezervisano“, a frontend prikazuje potvrdu.
6. Kasnije vlasnica studija se prijavi i vidi listu časova. Backend proverava da je ona administratorka pre nego što prikaže imena svih.

Zamislite sada da je ovo bilo samo frontend. Raspored bi se možda prikazao, a dugme Rezerviši bi pokazalo lepu kvačicu, ali bi rezervacija nestala pri osvežavanju, brojač „mesta ostalo“ bi bio pogrešan za sve ostale, a vlasnica nikada ne bi videla rezervaciju. Korak 4 — provere — uopšte ne bi postojao. To je praktična razlika.

Ključni pojmovi

• Frontend (klijentska strana): deo koji se izvršava u pregledaču.
• Backend (serverska strana): deo koji radi na serveru. Zove se i API server.
• Baza: mesto gde se podaci čuvaju na organizovan način. Pogledajte šta je baza podataka.
• API: spisak zahteva koje backend prihvata od frontenda ili drugih programa.
• Autentifikacija: provera ko je neko (prijava). Autorizacija: provera šta sme da uradi.
• Postavljanje (deployment): stavljanje svih slojeva na servere da bi ih javnost koristila.
• Monolit naspram servisa: jedan program koji radi sve, naspram nekoliko manjih (na primer sajt i zaseban API). Oba su full-stack.

Česte greške i zablude

• „Izgleda gotovo, znači da jeste.“ Primerni podaci i dugme koje izgleda kao da radi nisu isto što i sačuvani podaci. Osvežite stranicu, otvorite je u privatnom prozoru i proverite da su podaci i dalje tu.
• Stavljanje pravila u frontend. Sakrivanje dugmeta nije bezbednost. Ako backend ne proverava, svako ko zna zahtev može da ga pošalje.
• Stavljanje tajnih ključeva u frontend. Ključ za plaćanje ili AI provajdera u kodu pregledača može da pročita svaki posetilac. Ključevi pripadaju backendu, u promenljivama okruženja — pogledajte promenljive okruženja i tajne.
• Mišljenje da full-stack znači komplikovano. Mala full-stack aplikacija može imati nekoliko ekrana, nekoliko backend ruta i tri tabele baze. To je opis slojeva, a ne veličine.
• Mišljenje da sami morate da izaberete svaku tehnologiju. Svaki razuman, široko korišćen stek je dovoljan za prvu verziju. Važnije je jasno opisati podatke i pravila.

Šta tražiti od AI graditelja

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

• Podaci: „Čuvaj časove (naziv, vreme, kapacitet) i rezervacije (čas, osoba, vreme rezervacije) u bazi podataka.“
• Pravila: „Čas ne može da se rezerviše preko kapaciteta. Osoba sme da rezerviše čas samo jednom. Samo administratori vide ko je rezervisao.“
• Ekrani: „Nedeljni raspored, potvrda rezervacije, administratorska stranica sa rezervacijama po času.“
• Provere: „Sprovedi ova pravila na serveru, ne samo u stranici. Čuvaj sve API ključeve na serveru.“

Zatim testirajte kao skeptik: osvežite stranicu, prijavite se kao dve različite osobe, pokušajte da vidite podatke koje ne smete. Vodič kako napraviti aplikaciju uz AI prolazi kroz ceo ciklus.

Full-stack aplikacije na Mythex-u

Mythex pravi full-stack veb aplikacije iz opisa u chatu. Podrazumevano nova aplikacija dobija frontend u Reactu i TypeScriptu; kada aplikacija treba da čuva podatke, Mythex dodaje namensku Postgres bazu projektu, a možete zatražiti i zaseban API server (na primer Python, Node, C# ili Java) uz sajt. Sve radi zajedno u živom pregledu i objavljuje se na javnom URL-u. Stranica dokumentacije o aplikacijama sa više servisa pokazuje kako se sajt i API zajedno pregledaju i objavljuju, a stranica graditelj full-stack aplikacija nudi polazne tačke.

Pitanja