Çfarë është një aplikacion full-stack? Shpjegim i thjeshtë

Një aplikacion full-stack është një aplikacion që përfshin çdo shtresë që i nevojitet për të funksionuar: frontend-in që njerëzit e shohin dhe e klikojnë, backend-in që funksionon në një server dhe zbaton rregullat, dhe bazën e të dhënave që mban mend gjithçka. Një listë detyrash që ruan detyrat e tua, të lë të kyçesh nga çdo pajisje dhe nuk i tregon asnjë tjetri listën tënde, është full-stack. Një faqe e vetme që shfaq vetëm orarin e hapjes sate nuk është.

"Stack" thjesht do të thotë shtresat e teknologjisë të vendosura njëra mbi tjetrën. "Full" do të thotë që të gjitha janë të pranishme.

Pse ka rëndësi kur ndërton me AI

Kur përshkruan një aplikacion për një ndërtues me AI, fjalët që përdor vendosin cilat shtresa ndërtohen. "Bëj një faqe që shfaq menunë tonë" prodhon një frontend. "Lejo klientët të porosisin nga menuja jonë dhe lejo kuzhinën të shohë porositë e reja" ka nevojë për të tri shtresat, sepse porositë duhet të ruhen, të ndahen mes dy llojesh përdoruesish dhe të mbeten private.

Dallimi ndihmon në tri mënyra:

• Kërkon atë që duhet. Nëse do të ruhen të dhëna, thuaje. Një ndërtues që bën vetëm frontend-in do të duket i përfunduar, por do të harrojë gjithçka pas rifreskimit.
• Dallon përfundimin e rremë. Një demo me të dhëna shembull mund të duket identike me një aplikacion që funksionon. Njohja e shtresave të lejon të kontrollosh që të dhënat me të vërtetë shkojnë diku.
• Kupton kostot e funksionimit. Një frontend i vetëm mund të shërbehet si skedarë statikë. Një backend dhe një bazë të dhënash janë programe që funksionojnë në serverë, dhe aty vjen pjesa më e madhe e kostos së hostimit.

Një analogji e përditshme: një restorant

Mendo për një restorant.

• Salla e ngrënies është frontend-i. Menutë, tavolinat dhe blloknotesi i kamarierit. Është ajo që shohin mysafirët dhe duhet të jetë e këndshme dhe e lehtë për t'u përdorur.
• Kuzhina është backend-i. Mysafirët nuk hyjnë brenda. Merr porositë, kontrollon nëse pjata është e disponueshme, e gatuan dhe refuzon kërkesat e çuditshme. Rregullat jetojnë këtu.
• Depoja dhe libri i porosive janë baza e të dhënave. Mbajnë atë që ekziston dhe atë që është porositur, kështu që asgjë nuk harrohet kur ndërrohet turni.

Një restorant me vetëm sallën e ngrënies mund të të tregojë një menu të bukur, por nuk mund të ushqehesh. Kjo është një aplikacion vetëm frontend që pretendon të jetë full-stack.

Tri shtresat më në detaj

Shtresat flasin me njëra-tjetrën në një renditje të caktuar. Frontend-i i kërkon backend-it diçka përmes një API — një grup kërkesash të përcaktuara që backend-i i pranon. Backend-i kontrollon kërkesën, lexon ose shkruan në bazën e të dhënave dhe kthen një përgjigje. Frontend-i nuk flet kurrë direkt me bazën e të dhënave.

Ky renditje është ideja më e rëndësishme e sigurisë në gjithë stack-un. Çdo gjë në frontend mund të lexohet dhe të ndryshohet nga vizitori, sepse ekzekutohet në pajisjen e tij. Prandaj rregullat — "vetëm pronari mund ta shohë këtë faturë", "një kupon mund të përdoret vetëm një herë" — duhet të zbatohen në backend. Për ndarjen më në detaj, shih frontend kundrejt backend.

Një shembull i punuar: një aplikacion rezervimi për klasa

Thuaj se drejton një studio yoga dhe dëshiron që njerëzit të rezervojnë klasa online.

Çfarë bën vizitori: hap faqen, sheh klasat e kësaj jave, prek një klasë, hyn dhe rezervon një vend.

Çfarë ndodh nën sipërfaqe:

1. Frontend-i shfaq orarin. Për ta mbushur, i kërkon backend-it: "Cilat klasa janë këtë javë dhe sa vende kanë mbetur?"
2. Backend-i e pyet bazën e të dhënave për klasat dhe numëron rezervimet për secilën, pastaj përgjigjet.
3. Vizitori prek Rezervo. Frontend-i dërgon "rezervo klasën 42 për këtë person të kyçur".
4. Backend-i kontrollon: a është ky person me të vërtetë i kyçur? A është klasa plot? A e ka rezervuar tashmë? Vetëm nëse gjithçka është në rregull, shkruan një rresht të ri rezervimi në bazën e të dhënave.
5. Backend-i përgjigjet "rezervuar", dhe frontend-i shfaq konfirmimin.
6. Më vonë pronarja e studios kyçet dhe sheh listën e klasave. Backend-i kontrollon që ajo të jetë administratore përpara se të shfaqë emrat e të gjithëve.

Tani imagjino që kjo të ishte ndërtuar vetëm me frontend. Orari mund të shfaqej, dhe butoni Rezervo mund të tregonte një shenjë të bukur, por rezervimi do të zhdukej pas rifreskimit, numërimi i "vendeve të lira" do të ishte i gabuar për të tjerët, dhe pronarja nuk do ta shihte kurrë. Hapi 4 — kontrollet — do të mungonte plotësisht. Kjo është dallimi praktik.

Terma kryesorë

• Frontend (ana e klientit): pjesa që ekzekutohet në shfletues.
• Backend (ana e serverit): pjesa që ekzekutohet në një server. Quhet edhe serveri API.
• Baza e të dhënave: ku ruhen të dhënat në mënyrë të organizuar. Shih çfarë është një bazë të dhënash.
• API: lista e kërkesave që backend-i pranon nga frontend-i ose programe të tjera.
• Autentikimi: kontrollon kush je (hyrja). Autorizimi: kontrollon çfarë lejohet të bësh.
• Deployment: vendosja e të gjitha shtresave në serverë, që publiku ta përdorë.
• Monolit kundrejt shërbimeve: një program që bën gjithçka, kundrejt disa programeve më të vogla (për shembull një uebsajt dhe një API të veçantë). Të dyja janë full-stack.

Gabime dhe keqkuptime të zakonshme

• "Duket e përfunduar, pra është e përfunduar." Të dhënat shembull dhe një buton që duket se funksionon nuk janë të njëjta me të dhëna të ruajtura. Rifresko faqen, hap në dritare private dhe kontrollo që të dhënat ende janë aty.
• Vendosja e rregullave në frontend. Fshehja e një butoni nuk është siguri. Nëse backend-i nuk kontrollon, kushdo që e di kërkesën mund ta bëjë atë.
• Vendosja e çelësave sekretë në frontend. Një çelës pagese ose ofruesi AI në kodin e shfletuesit është i lexueshëm nga çdo vizitor. Çelësat i përkasin backend-it, në ndryshore mjedisi — shih ndryshoret e mjedisit dhe sekretet.
• Mendimi se full-stack do të thotë i komplikuar. Një aplikacion i vogël full-stack mund të jetë disa ekrane, një grusht rrugësh backend dhe tre tabela në bazën e të dhënave. Është një përshkrim i shtresave, jo i madhësisë.
• Mendimi se duhet të zgjedhësh vetë çdo teknologji. Çdo stack i arsyeshëm dhe i përdorur gjerësisht do të bëjë për një version të parë. Më i rëndësishëm është një përshkrim i qartë i të dhënave dhe i rregullave.

Çfarë t'i kërkosh ndërtuesit tënd me AI

Përshkruaj aplikacionin në terma të tri shtresave, edhe nëse nuk i emërton:

• Të dhënat: "Ruaj klasat (emri, koha, kapaciteti) dhe rezervimet (klasa, personi, koha e rezervimit) në një bazë të dhënash."
• Rregullat: "Një klasë nuk mund të rezervohet mbi kapacitet. Një person mund ta rezervojë një klasë vetëm një herë. Vetëm administratorët mund ta shohin kush rezervoi."
• Ekranet: "Një orar javor, një konfirmim rezervimi, një faqe administratori që liston rezervimet për çdo klasë."
• Kontrollet: "Zbato këto rregulla në server, jo vetëm në faqe. Mbaj çdo çelës API në server."

Pastaj testo si skeptik: rifresko, kyçu si dy persona të ndryshëm, provo të shohësh të dhëna që nuk duhet t'i shohësh. Udhëzuesi për ndërtimin e një aplikacioni me AI të shpie përmes gjithë ciklit nga fillimi në fund.

Aplikacionet full-stack në Mythex

Mythex ndërton aplikacione uebi full-stack nga një përshkrim në bisedë. Si parazgjedhje, një aplikacion i ri merr një frontend React dhe TypeScript; kur aplikacioni ka nevojë të ruajë të dhëna, Mythex shton në projekt një bazë Postgres të dedikuar, dhe mund të kërkosh një server API të veçantë (për shembull Python, Node, C# ose Java) krahas uebsajtit. Gjithçka funksionon së bashku në një pamje paraprake të gjallë dhe publikohet në një URL publike. Faqja e dokumentacionit për aplikacionet me shumë shërbime tregon si një uebsajt dhe një API shikohen dhe publikohen bashkë, dhe faqja ndërtuesi i aplikacioneve full-stack ka pika nisjeje.

Pyetje