Co je full-stack aplikace? Srozumitelné vysvětlení

Full-stack aplikace je aplikace, která obsahuje všechny vrstvy potřebné k fungování: frontend, který lidé vidí a na který klikají, backend, který běží na serveru a uplatňuje pravidla, a databázi, která si uchovává všechno. To-do seznam, který ukládá vaše úkoly, umožňuje přihlášení z libovolného zařízení a neukazuje nikomu jinému váš seznam, je full-stack. Jediná stránka, která jen ukazuje otevírací dobu, není.

„Stack“ jednoduše znamená vrstvy technologií naskládané na sebe. „Full“ znamená, že jsou tam všechny.

Proč na tom záleží, když stavíte s AI

Když popisujete aplikaci nástroji pro tvorbu s AI, na slovech, která použijete, záleží, jaké vrstvy vytvoří. „Udělej stránku, která ukazuje naše menu“ vyrobí frontend. „Nech zákazníky objednávat z našeho menu a nech kuchyni vidět nové objednávky“ potřebuje všechny tři vrstvy, protože objednávky se musí ukládat, sdílet mezi dvěma druhy uživatelů a zůstat soukromé.

Znalost rozdílu vám pomůže třemi způsoby:

• Žádáte správnou věc. Pokud chcete ukládat data, řekněte to. Nástroj, který vytvoří jen frontend, bude vypadat hotově, ale po obnovení zapomene všechno.
• Odhalíte falešnou úplnost. Demo s ukázkovými daty může vypadat úplně stejně jako funkční aplikace. Znalost vrstev vám umožní ověřit, že data skutečně kamsi putují.
• Rozumíte provozním nákladům. Samotný frontend lze podávat jako statické soubory. Backend a databáze jsou programy běžící na serverech, odkud pochází většina nákladů na hosting.

Každodenní přirovnání: restaurace

Představte si restauraci.

• Jídelna je frontend. Jídelní lístky, stoly a číšníkův blok. Je to to, co hosté vidí a co má být příjemné a snadno použitelné.
• Kuchyně je backend. Hosté tam nechodí. Přijímá objednávky, kontroluje, zda je jídlo k dispozici, vaří a odmítá podivné požadavky. Pravidla žijí tady.
• Sklad a objednávkový sešit jsou databáze. Uchovávají, co existuje a co bylo objednáno, takže se nic nezapomene, když se střídají směny.

Restaurace jen s jídelnou vám ukáže pěkné menu, ale nic nedostanete k jídlu. To je aplikace jen s frontendem, která předstírá, že je full-stack.

Tři vrstvy podrobněji

Vrstvy spolu mluví v pevném pořadí. Frontend si od backendu něco vyžádá přes API, tedy sadu definovaných požadavků, které backend přijímá. Backend požadavek zkontroluje, čte nebo zapisuje do databáze a odešle odpověď. Frontend s databází nikdy nemluví přímo.

Toto pořadí je nejdůležitějším bezpečnostním principem celého stacku. Cokoli ve frontendu si návštěvník může přečíst a změnit, protože běží na jeho zařízení. Pravidla jako „jen vlastník smí vidět tuto fakturu“ nebo „kupón lze použít jednou“ proto musí být vynucena v backendu. Více o rozdělení viz frontend vs backend.

Příklad: rezervační aplikace pro lekce jógy

Řekněme, že vedete studio jógy a chcete, aby se lidé mohli online rezervovat na lekce.

Co návštěvník dělá: otevře web, vidí rozvrh na tento týden, klepne na lekci, přihlásí se a rezervuje místo.

Co se děje pod povrchem:

1. Frontend zobrazí rozvrh. Aby ho naplnil, zeptá se backendu: „Jaké lekce jsou tento týden a kolik míst je ještě volných?“
2. Backend se zeptá databáze na lekce, spočítá rezervace u každé z nich a odpoví.
3. Návštěvník klepne na Rezervovat. Frontend pošle „rezervuj lekci 42 pro tohoto přihlášeného člověka“.
4. Backend zkontroluje: je tento člověk skutečně přihlášen? Není lekce plná? Nerezervoval už tuto lekci? Jen pokud je vše v pořádku, zapíše do databáze nový řádek rezervace.
5. Backend odpoví „rezervováno“ a frontend zobrazí potvrzení.
6. Později se majitelka studia přihlásí a vidí seznam lekcí. Backend ověří, že je administrátorka, než ukáže jména všech.

Teď si představte, že by to bylo postaveno jen jako frontend. Rozvrh by se možná zobrazil a tlačítko Rezervovat by ukázalo pěknou fajfku, ale rezervace by po obnovení zmizela, počet volných míst by byl pro ostatní špatně a majitelka by ji nikdy neviděla. Krok 4, kontroly, by úplně chyběl. V tom je praktický rozdíl.

Klíčové pojmy

• Frontend (strana klienta): část, která běží v prohlížeči.
• Backend (strana serveru): část, která běží na serveru. Nazývá se také API server.
• Databáze: místo, kde jsou data uložena organizovaně. Viz co je databáze.
• API: seznam požadavků, které backend přijímá od frontendu nebo jiných programů.
• Autentizace: ověření, kdo někdo je (přihlášení). Autorizace: ověření, co smí dělat.
• Nasazení (deployment): umístění všech vrstev na servery, aby je veřejnost mohla používat.
• Monolit vs služby: jeden program, který dělá všechno, oproti několika menším (například web a samostatné API). Obojí je full-stack.

Časté chyby a mylné představy

• „Vypadá to hotově, takže je to hotové.“ Ukázková data a funkčně vypadající tlačítko nejsou totéž co uložená data. Obnovte stránku, otevřete ji v anonymním okně a ověřte, že data jsou pořád tam.
• Pravidla ve frontendu. Skrytí tlačítka není zabezpečení. Pokud backend nekontroluje, může každý, kdo zná požadavek, provést akci.
• Tajné klíče ve frontendu. Klíč platební nebo AI služby v kódu prohlížeče je čitelný pro každého návštěvníka. Klíče patří na backend, do proměnných prostředí. Viz proměnné prostředí a tajné údaje.
• Myšlenka, že full-stack znamená složité. Malá full-stack aplikace může být několik obrazovek, pár backendových tras a tři tabulky databáze. Je to popis vrstev, ne velikosti.
• Myšlenka, že musíte sami vybrat každou technologii. Pro první verzi bude vyhovovat jakýkoli rozumný, široce používaný stack. Důležitější je jasný popis dat a pravidel.

Co žádat po svém nástroji pro tvorbu s AI

Popište aplikaci pomocí tří vrstev, i kdybyste je nepojmenovali:

• Data: „Ukládej lekce (název, čas, kapacitu) a rezervace (lekce, osoba, čas rezervace) v databázi.“
• Pravidla: „Lekci nelze rezervovat nad kapacitu. Osoba si může lekci rezervovat jen jednou. Vidět kdo rezervoval smí jen administrátoři.“
• Obrazovky: „Týdenní rozvrh, potvrzení rezervace, administrační stránka s rezervacemi pro každou lekci.“
• Kontroly: „Vynucuj tato pravidla na serveru, ne jen na stránce. Klíče API drž na serveru.“

Pak testujte skepticky: obnovte stránku, přihlaste se jako dva různí lidé, zkuste vidět data, která nesmíte vidět. Průvodce jak postavit aplikaci s AI provede celým cyklem.

Full-stack aplikace na Mythexu

Mythex staví full-stack webové aplikace z popisu v chatu. Nová aplikace standardně dostane frontend v Reactu a TypeScriptu; když aplikace potřebuje ukládat data, Mythex přidá do projektu vyhrazenou Postgres databázi a můžete si vyžádat i samostatný API server (například v Pythonu, Node, C# nebo Javě) vedle webu. Vše běží společně v živém náhledu a publikuje se na veřejnou URL. Stránka dokumentace o aplikacích s více službami ukazuje, jak se web a API náhledují i publikují společně, a stránka nástroje pro full-stack aplikace nabízí výchozí body.

Otázky