Ano ang Full-Stack App? Paliwanag sa Simpleng Wika

Ang full-stack app ay app na kasama ang lahat ng layer na kailangan nito para gumana: ang frontend na nakikita at pinipindot ng tao, ang backend na tumatakbo sa server at nagpapatupad ng mga tuntunin, at ang database na nagtatanda ng lahat. Ang to-do list na nagse-save ng mga gawain mo, nagpapahintulot na mag-log in mula sa anumang device, at hindi ipinapakita sa iba ang listahan mo, ay full-stack. Ang iisang pahina na nagpapakita lang ng oras ng pagbubukas ay hindi.

Ang "stack" ay tumutukoy lang sa mga layer ng teknolohiyang nakapatong sa isa't isa. Ang "full" ay nangangahulugang kumpleto ang mga iyon.

Bakit mahalaga ito kapag gumagawa ka gamit ang AI

Kapag inilarawan mo ang app sa AI builder, ang mga salitang ginamit mo ang nagpapasya kung aling mga layer ang itatayo. Ang "Gumawa ng pahinang nagpapakita ng menu namin" ay frontend ang kalalabasan. Ang "Hayaang mag-order ang mga customer mula sa menu namin at makita ng kusina ang mga bagong order" ay nangangailangan ng tatlong layer, dahil kailangang i-save ang mga order, ibahagi sa dalawang uri ng user, at panatilihing pribado.

Makakatulong sa iyo ang pag-alam ng pagkakaiba sa tatlong paraan:

• Tama ang hinihingi mo. Kapag gusto mong i-save ang datos, sabihin ito. Ang builder na frontend lang ang ginagawa ay mukhang tapos na pero nakakalimot ng lahat sa pag-refresh.
• Nakikilala mo ang pekeng pagkakakumpleto. Ang demo na may sample na datos ay puwedeng magmukhang kapareho ng gumaganang app. Sa pag-alam ng mga layer, masusuri mo kung talagang napupunta ang datos sa tamang lugar.
• Nauunawaan mo ang gastos sa pagpapatakbo. Ang frontend lang ay puwedeng i-serve bilang static na file. Ang backend at database ay mga programang tumatakbo sa server, at doon nanggagaling ang karamihan sa gastos ng hosting.

Isang halimbawa mula sa araw-araw: isang restaurant

Isipin ang isang restaurant.

• Ang dining room ang frontend. Ang menu, mga mesa, at kuwaderno ng waiter. Ito ang nakikita ng mga bisita, at dapat ay kaaya-aya at madaling gamitin.
• Ang kusina ang backend. Hindi pumapasok ang mga bisita rito. Tumatanggap ito ng order, tinitingnan kung available ang putahe, niluluto ito, at tinatanggihan ang mga kakaibang request. Nandito ang mga tuntunin.
• Ang pantry at ang order book ang database. Itinatago nila kung ano ang meron at kung ano ang na-order, para walang makalimutan kapag nagpalit ng shift.

Ang restaurant na dining room lang ang mayroon ay makapagpapakita sa iyo ng magandang menu, pero hindi ka makakakain. Ganyan ang app na frontend lang pero nagpapanggap na full-stack.

Ang tatlong layer nang mas detalyado

Nagkakausap ang mga layer sa nakapirming pagkakasunod-sunod. Humihingi ang frontend ng isang bagay sa backend sa pamamagitan ng API, na isang tiyak na hanay ng mga request na tinatanggap ng backend. Tinitingnan ng backend ang request, bumabasa o sumusulat sa database, at nagbabalik ng sagot. Hindi kailanman direktang nakikipag-usap ang frontend sa database.

Ang pagkakasunod-sunod na iyon ang pinakamahalagang ideya sa seguridad ng buong stack. Anumang nasa frontend ay puwedeng basahin at baguhin ng bisita, dahil tumatakbo ito sa device niya. Kaya ang mga tuntunin, gaya ng "tanging may-ari lang ang puwedeng makakita ng invoice na ito" o "isang beses lang magagamit ang coupon," ay dapat ipatupad sa backend. Para sa higit pa tungkol sa paghahati, tingnan ang frontend vs backend.

Halimbawang gawa: isang app para sa class booking

Isipin na nagpapatakbo ka ng yoga studio at gusto mong mag-book ang mga tao ng klase online.

Ang ginagawa ng bisita: binubuksan ang site, nakikita ang mga klase ngayong linggo, pinipindot ang isa, nag-sa-sign in, at nagbu-book ng pwesto.

Ang nangyayari sa ilalim:

1. Ipinapakita ng frontend ang timetable. Para mapunan ito, hihingi ito sa backend ng: "Anong mga klase ang nasa linggong ito, at ilang pwesto pa ang natitira?"
2. Hihingi ang backend ng mga klase sa database, bibilangin ang mga booking sa bawat isa, at saka sasagot.
3. Pipindutin ng bisita ang Book. Ipapadala ng frontend ang "i-book ang klase 42 para sa naka-sign in na taong ito."
4. Titingnan ng backend: totoo bang naka-sign in ang taong ito? Puno na ba ang klase? Na-book na ba niya ito dati? Kapag maayos ang lahat, saka lang ito magsusulat ng bagong booking row sa database.
5. Sasagot ang backend ng "booked," at ipapakita ng frontend ang kumpirmasyon.
6. Pagkatapos, mag-log in ang may-ari ng studio at makikita ang listahan ng klase. Titingnan ng backend na admin siya bago ipakita ang pangalan ng lahat.

Isipin ngayon na frontend lang ang ginawa rito. Puwedeng lumitaw ang timetable, at maaaring magpakita ng magandang tik ang Book button, pero mawawala ang booking pag-refresh, magiging mali ang bilang ng "natitirang pwesto" para sa lahat, at hindi kailanman makikita ng may-ari. Mawawala nang buo ang hakbang 4, ang mga pagsusuri. Iyan ang praktikal na pagkakaiba.

Mahahalagang termino

• Frontend (client side): ang bahaging tumatakbo sa browser.
• Backend (server side): ang bahaging tumatakbo sa server. Tinatawag din itong API server.
• Database: kung saan nakaayos na nakaimbak ang datos. Tingnan ang ano ang database.
• API: listahan ng mga request na tinatanggap ng backend mula sa frontend o iba pang programa.
• Authentication: pagtiyak kung sino ang isang tao (login). Authorisation: pagtiyak kung ano ang puwede niyang gawin.
• Deployment: paglalagay ng lahat ng layer sa server para magamit ng publiko.
• Monolith vs services: isang programang gumagawa ng lahat, laban sa ilang mas maliit na programa (halimbawa, isang website at hiwalay na API). Parehong full-stack ang dalawa.

Mga karaniwang pagkakamali at maling akala

• "Mukhang tapos na, kaya tapos na nga." Ang sample na datos at button na mukhang gumagana ay hindi katumbas ng naka-save na datos. I-refresh ang page, buksan ito sa private window, at tingnan kung nandoon pa rin ang datos.
• Paglalagay ng tuntunin sa frontend. Ang pagtatago ng button ay hindi seguridad. Kung hindi ito sinusuri ng backend, sinumang nakakaalam ng request ay puwedeng gumawa nito.
• Paglalagay ng secret keys sa frontend. Ang key ng bayad o AI provider sa browser code ay mababasa ng bawat bisita. Nararapat ang keys sa backend, sa environment variables. Tingnan ang environment variables at secrets.
• Pag-iisip na ang full-stack ay komplikado. Ang maliit na full-stack app ay puwedeng binubuo ng ilang screen, ilang backend route, at tatlong table sa database. Paglalarawan ito ng mga layer, hindi ng laki.
• Pag-iisip na kailangan mong pumili ng bawat teknolohiya. Anumang maayos at malawakang ginagamit na stack ay sapat para sa unang bersyon. Mas mahalaga ang malinaw na paglalarawan ng datos at mga tuntunin.

Ano ang hihingin sa AI builder mo

Ilarawan ang app ayon sa tatlong layer, kahit hindi mo pa binabanggit ang mga ito:

• Ang datos: "I-save ang mga klase (pangalan, oras, kapasidad) at ang mga booking (klase, tao, oras ng pag-book) sa database."
• Ang mga tuntunin: "Hindi puwedeng lumampas sa kapasidad ang booking sa klase. Isang beses lang puwedeng mag-book ng klase ang isang tao. Ang admin lang ang puwedeng makakita kung sino ang nag-book."
• Ang mga screen: "Lingguhang timetable, kumpirmasyon ng booking, at admin page na naglilista ng mga booking bawat klase."
• Ang mga pagsusuri: "Ipatupad ang mga tuntuning ito sa server, hindi lang sa page. Itago ang anumang API key sa server."

Pagkatapos, subukan ito nang may pagdududa: i-refresh, mag-sign in bilang dalawang magkaibang tao, at subukang makita ang datos na hindi mo dapat makita. Tinatalakay ng gabay sa paggawa ng app gamit ang AI ang buong ikot na ito mula simula hanggang dulo.

Mga full-stack app sa Mythex

Gumagawa ang Mythex ng mga full-stack web app mula sa paglalarawan sa chat. Bilang default, ang bagong app ay nakakakuha ng React at TypeScript na frontend; kapag kailangan ng app na mag-save ng datos, nagdaragdag ang Mythex ng nakalaang Postgres database sa project, at puwede kang humiling ng hiwalay na API server (halimbawa, Python, Node, C# o Java) kasabay ng website. Sabay-sabay na tumatakbo ang lahat sa live na preview at nila-publish sa pampublikong URL. Ipinapakita ng pahina ng docs tungkol sa multi-service apps kung paano sabay na nakikita sa preview at nila-publish ang website at API, at may mga panimulang punto ang pahina ng full-stack app builder.

Mga tanong