Čo je full-stack aplikácia? Vysvetlenie jednoduchým jazykom

Full-stack aplikácia je aplikácia, ktorá obsahuje všetky vrstvy potrebné na fungovanie: frontend, ktorý ľudia vidia a klikajú, backend, ktorý beží na serveri a uplatňuje pravidlá, a databázu, ktorá si pamätá všetko. Zoznam úloh, ktorý ukladá vaše úlohy, umožňuje prihlásiť sa z ľubovoľného zariadenia a nikomu inému neukazuje váš zoznam, je full-stack. Jedna stránka, ktorá zobrazuje len vaše otváracie hodiny, nie je.

„Stack“ znamená vrstvy technológií naložené na seba. „Full“ znamená, že sú tam všetky.

Prečo na tom záleží pri tvorbe s AI

Keď opíšete aplikáciu nástroju na tvorbu s AI, slová, ktoré použijete, rozhodnú, ktoré vrstvy sa postavia. „Vytvor stránku, ktorá zobrazuje naše menu“ vytvorí frontend. „Nech zákazníci objednávajú z nášho menu a kuchyňa vidí nové objednávky“ potrebuje všetky tri vrstvy, pretože objednávky sa musia uložiť, zdieľať medzi dvoma typmi používateľov a zostať súkromné.

Rozdiel vám pomôže troma spôsobmi:

• Požiadate o správnu vec. Ak chcete, aby sa údaje ukladali, povedzte to. Nástroj, ktorý vytvorí len frontend, bude vyzerať hotovo, no pri obnovení zabudne všetko.
• Odhalíte falošnú úplnosť. Ukážka s testovacími údajmi môže vyzerať rovnako ako funkčná aplikácia. Poznanie vrstiev vám umožní overiť, že údaje naozaj niekam idú.
• Pochopíte prevádzkové náklady. Samotný frontend možno podávať ako statické súbory. Backend a databáza sú programy bežiace na serveroch, odkiaľ pochádza väčšina nákladov na hosting.

Každodenné prirovnanie: reštaurácia

Predstavte si reštauráciu.

• Jedáleň je frontend. Jedálne lístky, stoly a čašnícky zápisník. Je to to, čo hostia vidia, a mala by byť príjemná a jednoduchá na používanie.
• Kuchyňa je backend. Hostia do nej nevstupujú. Prijíma objednávky, overuje, že jedlo je k dispozícii, varí a odmieta podivné žiadosti. Pravidlá sú tu.
• Špajza a objednávkový zošit sú databáza. Uchovávajú to, čo existuje a čo sa objednalo, aby sa nič nezabudlo pri zmene smeny.

Reštaurácia len s jedálňou vám môže ukázať pekné menu, no nenajete sa. Toto je frontendová aplikácia, ktorá sa tvári ako full-stack.

Tri vrstvy podrobnejšie

Vrstvy komunikujú v pevnom poradí. Frontend žiada backend o niečo cez API — definovanú sadu požiadaviek, ktoré backend prijíma. Backend požiadavku skontroluje, prečíta alebo zapíše do databázy a pošle odpoveď späť. Frontend nikdy nekomunikuje s databázou priamo.

Toto poradie je najdôležitejšou bezpečnostnou myšlienkou celého zásobníka. Čokoľvek vo frontende môže návštevník prečítať a zmeniť, pretože beží na jeho zariadení. Pravidlá — „iba vlastník môže vidieť túto faktúru“, „kupón sa dá použiť raz“ — sa preto musia presadzovať v backende. Viac o tomto rozdelení nájdete v frontend vs. backend.

Praktický príklad: aplikácia na rezervácie hodín jogy

Povedzme, že vediete štúdio jogy a chcete, aby si ľudia online rezervovali hodiny.

Čo návštevník robí: otvorí stránku, uvidí hodiny tohto týždňa, klikne na jednu, prihlási sa a rezervuje miesto.

Čo sa deje pod povrchom:

1. Frontend zobrazí rozvrh. Aby ho naplnil, pýta sa backend: „Aké hodiny sú tento týždeň a koľko miest ešte zostáva?“
2. Backend sa opýta databázy na hodiny a spočíta rezervácie pre každú z nich, potom odpovie.
3. Návštevník klikne na Rezervovať. Frontend pošle: „rezervuj hodinu 42 pre tohto prihláseného človeka“.
4. Backend skontroluje: je človek naozaj prihlásený? Nie je hodina plná? Už si ju nerezervoval? Iba ak je všetko v poriadku, zapíše do databázy nový riadok rezervácie.
5. Backend odpovie „rezervované“ a frontend zobrazí potvrdenie.
6. Neskôr sa majiteľka štúdia prihlási a vidí zoznam hodín. Backend overí, že je administrátorka, a až potom ukáže mená všetkých.

Teraz si predstavte, že by to bolo postavené iba ako frontend. Rozvrh by sa zobrazil a tlačidlo Rezervovať by ukázalo pekné zaškrtnutie, no rezervácia by pri obnovení zmizla, počet „voľných miest“ by bol pre ostatných nesprávny a majiteľka by ju nikdy nevidela. Krok 4 — kontroly — by úplne chýbal. To je praktický rozdiel.

Kľúčové pojmy

• Frontend (strana klienta): časť, ktorá beží v prehliadači.
• Backend (strana servera): časť, ktorá beží na serveri. Nazýva sa aj API server.
• Databáza: miesto, kde sú údaje uložené organizovaným spôsobom. Pozri čo je databáza.
• API: zoznam požiadaviek, ktoré backend prijíma od frontendu alebo iných programov.
• Autentifikácia: overenie, kto niekto je (prihlásenie). Autorizácia: overenie, čo smie robiť.
• Nasadenie (deployment): umiestnenie všetkých vrstiev na servery, aby ich verejnosť mohla používať.
• Monolit vs. služby: jeden program, ktorý robí všetko, verzus viacero menších (napríklad web a samostatné API). Obe sú full-stack.

Časté chyby a mylné predstavy

• „Vyzerá to hotovo, takže to hotové je.“ Ukážkové údaje a tlačidlo, ktoré vyzerá funkčne, nie sú to isté ako uložené údaje. Obnovte stránku, otvorte ju v súkromnom okne a skontrolujte, že údaje sú stále tam.
• Pravidlá vo frontende. Skrytie tlačidla nie je bezpečnosť. Ak ich backend neoverí, ktokoľvek, kto pozná požiadavku, ju môže odoslať.
• Tajné kľúče vo frontende. Kľúč platobného alebo AI poskytovateľa v kóde prehliadača je čitateľný pre každého návštevníka. Kľúče patria do backendu, do premenných prostredia — pozri premenné prostredia a tajomstvá.
• Myslieť si, že full-stack znamená zložité. Malá full-stack aplikácia môže mať niekoľko obrazoviek, pár backendových trás a tri tabuľky databázy. Je to opis vrstiev, nie veľkosti.
• Myslieť si, že si musíte vybrať každú technológiu sami. Pre prvú verziu bude fungovať akýkoľvek rozumný, široko používaný zásobník. Dôležitejší je jasný opis údajov a pravidiel.

Čo žiadať od svojho tvorcu s AI

Opíšte aplikáciu cez tri vrstvy, aj keď ich nepomenujete:

• Údaje: „Ulož hodiny (názov, čas, kapacita) a rezervácie (hodina, osoba, čas rezervácie) do databázy.“
• Pravidlá: „Hodinu nemožno rezervovať nad kapacitu. Osoba sa môže na hodinu prihlásiť iba raz. Kto rezervoval, vidia iba administrátori.“
• Obrazovky: „Týždenný rozvrh, potvrdenie rezervácie, administračná stránka so zoznamom rezervácií pre každú hodinu.“
• Kontroly: „Presadzuj tieto pravidlá na serveri, nielen na stránke. Tajné kľúče drž na serveri.“

Potom testujte skepticky: obnovte stránku, prihláste sa ako dvaja rôzni ľudia, skúste vidieť údaje, ktoré nemáte vidieť. Sprievodca tvorbou aplikácie s AI prejde celým cyklom.

Full-stack aplikácie v Mythexe

Mythex vytvára full-stack webové aplikácie z popisu v chate. Nová aplikácia štandardne dostane frontend v Reacte a TypeScripte; keď aplikácia potrebuje ukladať údaje, Mythex do projektu pridá vyhradenú Postgres databázu, a môžete si vyžiadať samostatný API server (napríklad Python, Node, C# alebo Java) popri webe. Všetko beží spolu v živom náhľade a publikuje sa na verejnú URL. Stránka dokumentácie o viacservisových aplikáciách ukazuje, ako sa web a API spoločne zobrazujú v náhľade a publikujú, a stránka tvorca full-stack aplikácií obsahuje východiská.

Otázky