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

Full-stack aplikacija je aplikacija koja uključuje svaki sloj koji joj treba da radi: frontend koji ljudi vide i na koji klikću, backend koji radi na serveru i primjenjuje pravila, i bazu podataka koja pamti sve. Lista obaveza koja čuva vaše zadatke, omogućava prijavu s bilo kog uređaja i ne prikazuje vašu listu nikome drugom — to je full-stack. Jedna stranica koja samo prikazuje vaše 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 kada gradite uz AI

Kada AI alatu 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” traži sva tri sloja, jer se narudžbe moraju sačuvati, dijeliti između dvije vrste korisnika i ostati privatne.

Poznavanje razlike pomaže na tri načina:

• Tražite pravu stvar. Ako želite da se podaci čuvaju, recite to. Alat koji pravi samo frontend izgledaće gotovo, ali će sve zaboraviti pri osvježavanju.
• Prepoznajete lažnu potpunost. Demo s uzorkom podataka može izgledati identično kao radna aplikacija. Poznavanje slojeva omogućava da provjerite da li podaci zaista idu negdje.
• Razumijete 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 najveći dio troška hostinga.

Svakodnevna analogija: restoran

Zamislite restoran.

• Sala za goste je frontend. Jelovnici, stolovi i blok konobara. To vide gosti i treba da bude prijatno i lako za korištenje.
• Kuhinja je backend. Gosti tamo ne ulaze. Ona prima narudžbe, provjerava da li je jelo dostupno, kuha ga i odbija čudne zahtjeve. Pravila žive ovdje.
• Ostava i knjiga narudžbi su baza. Čuvaju šta postoji i šta je naručeno, pa se ništa ne zaboravi kada se smjena promijeni.

Restoran samo sa salom može vam pokazati lijep jelovnik, ali ne možete ništa pojesti. To je frontend-only aplikacija koja se pretvara da je full-stack.

Tri sloja detaljnije

Slojevi međusobno razgovaraju u fiksnom redoslijedu. Frontend traži nešto od backend-a preko API-ja — definisanog skupa zahtjeva koje backend prihvata. Backend provjerava zahtjev, čita ili piše u bazu i šalje odgovor. Frontend nikada ne razgovara direktno s bazom.

Taj redoslijed je najvažnija sigurnosna ideja u cijelom stacku. Sve u frontendu posjetilac može pročitati i izmijeniti, jer se izvršava na njegovom uređaju. Zato pravila — „samo vlasnik može vidjeti ovu fakturu”, „kupon se može iskoristiti jednom” — moraju biti provedena u backend-u. Za više o podjeli pogledajte frontend i backend.

Praktičan primjer: aplikacija za rezervacije časova joge

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

Šta posjetilac radi: otvara sajt, vidi časove ove sedmice, dodirne jedan, prijavi se i rezerviše mjesto.

Šta se dešava ispod:

1. Frontend prikazuje raspored. Da bi ga popunio, pita backend: „Koji časovi su ove sedmice i koliko je mjesta slobodno?”
2. Backend pita bazu za časove i prebroji rezervacije za svaki, pa odgovara.
3. Posjetilac dodirne Rezerviši. Frontend šalje „rezerviši čas 42 za ovu prijavljenu osobu”.
4. Backend provjerava: da li je ta osoba stvarno prijavljena? Da li je čas pun? Da li je već rezervisala? Tek 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 provjerava da je ona admin prije nego što prikaže imena svih.

Sada zamislite da je ovo urađeno samo kao frontend. Raspored bi se možda prikazao, a dugme Rezerviši bi pokazalo lijepu kvačicu, ali bi rezervacija nestala pri osvježavanju, brojač „slobodnih mjesta” bi bio pogrešan za sve ostale, a vlasnica je nikada ne bi vidjela. Korak 4 — provjere — potpuno bi nedostajao. U tome je praktična razlika.

Ključni pojmovi

• Frontend (klijentska strana): dio koji se izvršava u pregledniku.
• Backend (serverska strana): dio koji radi na serveru. Zove se i API server.
• Baza podataka: mjesto gdje se podaci čuvaju na organizovan način. Pogledajte šta je baza podataka.
• API: spisak zahtjeva koje backend prihvata od frontend-a ili drugih programa.
• Autentifikacija: provjera ko je neko (prijava). Autorizacija: provjera šta smije da radi.
• Deployment: postavljanje svih slojeva na servere da bi javnost mogla da ih koristi.
• Monolit naspram servisa: jedan program koji radi sve, nasuprot nekoliko manjih (na primjer sajt i zasebni API). Obje su full-stack.

Česte greške i pogrešna shvatanja

• „Izgleda gotovo, znači da jeste.” Uzorak podataka i dugme koje izgleda kao da radi nisu isto što i sačuvani podaci. Osvježite stranicu, otvorite je u privatnom prozoru i provjerite da su podaci i dalje tu.
• Stavljanje pravila u frontend. Sakrivanje dugmeta nije sigurnost. Ako backend ne provjerava, svako ko zna zahtjev može ga poslati.
• Tajni ključevi u frontendu. Ključ za plaćanja ili AI provajdera u kodu preglednika može pročitati svaki posjetilac. Ključevi pripadaju backend-u, u varijablama okruženja — pogledajte varijable 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 u bazi. To je opis slojeva, a ne veličine.
• Mišljenje da morate sami birati svaku tehnologiju. Svaki razuman, široko korišten stack dobro radi 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 ih ne nazivate:

• Podaci: „Čuvaj časove (naziv, vrijeme, kapacitet) i rezervacije (čas, osoba, vrijeme rezervacije) u bazi podataka.”
• Pravila: „Čas se ne može rezervisati iznad kapaciteta. Osoba može rezervisati čas samo jednom. Samo admini smiju vidjeti ko je rezervisao.”
• Ekrani: „Sedmični raspored, potvrda rezervacije, admin stranica s rezervacijama po času.”
• Provjere: „Provedi ova pravila na serveru, ne samo u stranici. Tajne ključeve drži na serveru.”

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

Full-stack aplikacije na Mythex-u

Mythex pravi full-stack web aplikacije iz opisa u chatu. Nova aplikacija podrazumijevano dobija frontend na React-u i TypeScript-u; kada aplikacija treba da čuva podatke, Mythex projektu dodaje namjensku Postgres bazu, a možete zatražiti i zaseban API server (na primjer Python, Node, C# ili Java) uz sajt. Sve radi zajedno u živom pregledu i objavljuje se na javnoj URL adresi. Stranica dokumentacije o servisima s više dijelova pokazuje kako se sajt i API zajedno pregledaju i objavljuju, a stranica graditelj full-stack aplikacija nudi polazne tačke.

Pitanja