Ի՞նչ է ամբողջական (full-stack) հավելվածը. պարզ բացատրություն

Full-stack հավելվածը այն հավելվածն է, որը ներառում է իր աշխատանքի համար անհրաժեշտ բոլոր շերտերը․ frontend-ը, որը մարդիկ տեսնում և սեղմում են, backend-ը, որը աշխատում է սերվերում և կիրառում է կանոնները, և տվյալների բազան, որը հիշում է ամեն ինչ։ Մի ցուցակ, որը պահում է ձեր առաջադրանքները, թույլ է տալիս մուտք գործել ցանկացած սարքից և ոչ ոքի չի ցույց տալիս ձեր ցուցակը, full-stack է։ Մի էջ, որը միայն ցույց է տալիս ձեր աշխատանքային ժամերը, այդպիսին չէ։

«Stack»-ը պարզապես նշանակում է տեխնոլոգիական շերտերը, որ դրված են մեկը մյուսի վրա։ «Full»-ը նշանակում է, որ բոլորը կան։

Ինչու է դա կարևոր AI-ով կառուցելիս

Երբ AI կառուցիչին նկարագրում եք հավելվածը, ձեր օգտագործած բառերը որոշում են, թե ո՛ր շերտերը կկառուցվեն։ «Ստեղծիր էջ, որ ցույց է տալիս մեր ճաշացանկը» արտադրում է frontend։ «Թող հաճախորդները պատվեր անեն մեր ճաշացանկից և խոհանոցը տեսնի նոր պատվերները» պահանջում է բոլոր երեք շերտերը, քանի որ պատվերները պետք է պահվեն, բաժանվեն երկու տեսակի օգտատերերի միջև և մնան գաղտնի։

Տարբերությունը իմանալը օգնում է երեք եղանակով․

• Ճիշտ բան եք խնդրում։ Եթե տվյալները պահելը ցանկանում եք, ասեք դա։ Միայն frontend կառուցող գործիքը կպատրաստի հավելված, որը թվում է ավարտված, բայց թարմացնելիս ամեն ինչ մոռանում է։
• Տեսնում եք կեղծ ամբողջականությունը։ Օրինակային տվյալներով ցուցադրությունը կարող է նույնը թվալ, ինչ աշխատող հավելվածը։ Շերտերը իմանալը թույլ է տալիս ստուգել, որ տվյալները իսկապես որևէ տեղ են գնում։
• Հասկանում եք գործարկման ծախսերը։ Միայն frontend-ը կարող է մատուցվել որպես ստատիկ ֆայլեր։ Backend-ը և տվյալների բազան այն ծրագրերն են, որ աշխատում են սերվերներում, և հենց այստեղից է գալիս հոստինգի ծախսերի մեծ մասը։

Ամենօրյա անալոգիա՝ ռեստորան

Պատկերացրեք ռեստորան։

• Ճաշասենյակը frontend-ն է։ Մենյուները, սեղանները և մատուցողի նոթատետրը։ Դա այն է, ինչ տեսնում են հյուրերը, և այն պետք է հաճելի ու հեշտ օգտագործելի լինի։
• Խոհանոցը backend-ն է։ Հյուրերը երբեք չեն մտնում այնտեղ։ Այն ընդունում է պատվերները, ստուգում, որ ուտեստը կա, պատրաստում է այն և մերժում տարօրինակ խնդրանքները։ Կանոնները այստեղ են ապրում։
• Պահեստը և պատվերների գիրքը տվյալների բազան են։ Դրանք պահում են, թե ինչ կա և ինչ է պատվիրված, որպեսզի ոչինչ չմոռացվի հերթափոխի փոխվելիս։

Մի ռեստորան, որն ունի միայն ճաշասենյակ, կարող է ցույց տալ գեղեցիկ մենյու, բայց դուք չեք կարող կերակրվել։ Դա frontend-only հավելված է, որ ձևացնում է full-stack։

Երեք շերտերը մանրամասն

Շերտերը կարգով են խոսում միմյանց հետ։ Frontend-ը backend-ից ինչ-որ բան է խնդրում API-ի միջոցով՝ հարցումների ընդունված հավաքածուի։ Backend-ը ստուգում է հարցումը, կարդում կամ գրում է տվյալների բազան և պատասխան է ուղարկում։ Frontend-ը երբեք ուղղակիորեն չի խոսում տվյալների բազայի հետ։

Այս հերթականությունը ամբողջ կույտի ամենակարևոր անվտանգության գաղափարն է։ Frontend-ում ամեն ինչ կարող է կարդացվել և փոխվել այցելուի կողմից, քանի որ այն աշխատում է նրա սարքում։ Ուստի կանոնները՝ «միայն սեփականատերը կարող է տեսնել այս հաշիվը», «կուպոնը կարելի է օգտագործել մեկ անգամ», պետք է կիրառվեն backend-ում։ Ավելին բաժանման մասին տե՛ս frontend-ը և backend-ը։

Աշխատած օրինակ՝ դասերի ամրագրման հավելված

Ենթադրենք, դուք յոգայի ստուդիա եք ունենում և ուզում եք, որ մարդիկ առցանց ամրագրեն դասեր։

Ինչ է անում այցելուն․ բացում է կայքը, տեսնում այս շաբաթվա դասերը, սեղմում մեկի վրա, մուտք է գործում և ամրագրում տեղ։

Ինչ է կատարվում ներքևում․

1. Frontend-ը ցույց է տալիս ժամացուցակը։ Այն լրացնելու համար հարցնում է backend-ից՝ «Ի՞նչ դասեր կան այս շաբաթ և քանի տեղ է մնացել»։
2. Backend-ը հարցնում է տվյալների բազային դասերը և հաշվում յուրաքանչյուրի ամրագրումները, ապա պատասխանում է։
3. Այցելուն սեղմում է Ամրագրել։ Frontend-ը ուղարկում է «ամրագրիր 42-րդ դասը այս մուտք գործած անձի համար»։
4. Backend-ը ստուգում է․ արդյո՞ք այս անձը իսկապես մուտք է գործել։ Արդյո՞ք դասը լիքն է։ Արդյո՞ք նա արդեն ամրագրել է այն։ Միայն եթե ամեն ինչ կարգին է, այն գրում է ամրագրման նոր տող տվյալների բազայում։
5. Backend-ը պատասխանում է «ամրագրված է», և frontend-ը ցույց է տալիս հաստատումը։
6. Ավելի ուշ ստուդիայի սեփականատերը մուտք է գործում և տեսնում դասերի ցուցակը։ Backend-ը ստուգում է, որ նա ադմին է, նախքան բոլորի անունները ցույց տալը։

Մտածեք, որ սա կառուցված էր միայն frontend-ով։ Ժամացուցակը կարող է ցույց տրվել, իսկ «Ամրագրել» կոճակը՝ գեղեցիկ նշան, բայց ամրագրումը կվերանար թարմացնելիս, «տեղ է մնացել» թիվը սխալ կլիներ բոլորի համար, և սեփականատերը երբեք չէր տեսնի այն։ Քայլ 4-ի ստուգումները ընդհանրապես չէին լինի։ Ահա գործնական տարբերությունը։

Հիմնական տերմիններ

• Frontend (client side)․ Այն մասը, որ աշխատում է բրաուզերում։
• Backend (server side)․ Այն մասը, որ աշխատում է սերվերում։ Կոչվում է նաև API սերվեր։
• Տվյալների բազա․ Տեղ, որտեղ տվյալները պահվում են կազմակերպված ձևով։ Տե՛ս ինչ է տվյալների բազան։
• API․ Հարցումների ցանկը, որ backend-ն ընդունում է frontend-ից կամ այլ ծրագրերից։
• Նույնականացում (authentication)։ Ստուգել, թե ով է մարդը (մուտք)։ Թույլտվություն (authorisation)։ Ստուգել, թե ինչ կարող է անել։
• Տեղակայում (deployment)։ Բոլոր շերտերը սերվերների վրա դնելը, որպեսզի հանրությունը կարողանա օգտագործել դրանք։
• Մոնոլիտ կամ ծառայություններ։ Մեկ ծրագիր, որ ամեն ինչ է անում, կամ մի քանի ավելի փոքր (օրինակ՝ կայք և առանձին API)։ Երկուսն էլ full-stack են։

Տարածված սխալներ և թյուրըմբռնումներ

• «Ավարտված է երևում, ուրեմն ավարտված է։» Օրինակային տվյալները և աշխատող թվացող կոճակը նույնը չեն, ինչ պահված տվյալները։ Թարմացրեք էջը, բացեք մասնավոր պատուհանում և ստուգեք, որ տվյալները դեռ այնտեղ են։
• Կանոնները frontend-ում դնելը։ Կոճակը թաքցնելը անվտանգություն չէ։ Եթե backend-ը չի ստուգում, ցանկացածը, ով գիտի հարցումը, կարող է այն ուղարկել։
• Գաղտնի բանալիները frontend-ում դնելը։ Վճարումների կամ AI մատակարարի բանալին բրաուզերի կոդում ընթեռնելի է յուրաքանչյուր այցելուի համար։ Բանալիները պետք է լինեն backend-ում, միջավայրի փոփոխականներում։ Տե՛ս միջավայրի փոփոխականներ և գաղտնիքներ։
• Full-stack նշանակում է բարդ։ Փոքր full-stack հավելվածը կարող է լինել մի քանի էկրան, մի բուռ backend երթուղի և երեք տվյալների բազայի աղյուսակ։ Դա շերտերի նկարագրությունն է, ոչ թե չափը։
• Թե պետք է ինքներդ ընտրեք յուրաքանչյուր տեխնոլոգիա։ Ցանկացած խելամիտ, լայնորեն օգտագործվող տեխնոլոգիական կույտ բավարար է առաջին տարբերակի համար։ Ավելի կարևոր է տվյալների և կանոնների հստակ նկարագրությունը։

Ինչ խնդրել AI կառուցիչից

Նկարագրեք հավելվածը երեք շերտերի տեսանկյունից, նույնիսկ եթե չեք անվանում դրանք․

• Տվյալները․ «Պահիր դասերը (անուն, ժամ, տեղերի թիվ) և ամրագրումները (դաս, անձ, ամրագրման ժամ) տվյալների բազայում։»
• Կանոնները․ «Դասը չի կարող ամրագրվել լրիվ լինելու դեպքում։ Անձը կարող է դասը ամրագրել միայն մեկ անգամ։ Միայն ադմինները կարող են տեսնել, թե ով է ամրագրել։»
• Էկրանները․ «Շաբաթական ժամացուցակ, ամրագրման հաստատում, ադմին էջ, որ ցույց է տալիս ամրագրումները ըստ դասի։»
• Ստուգումները․ «Կիրառիր այս կանոնները սերվերում, ոչ միայն էջում։ API բանալիները պահիր սերվերում։»

Ու փորձարկեք ինչպես թերահավատը․ թարմացրեք, մուտք գործեք որպես երկու տարբեր անձ, փորձեք տեսնել այն տվյալները, որ չպետք է տեսնեք։ Ուղեցույցը, թե ինչպես կառուցել հավելված AI-ով, անցնում է այս ամբողջ գործընթացը։

Full-stack հավելվածներ Mythex-ում

Mythex-ը կառուցում է full-stack վեբ հավելվածներ չատի նկարագրությունից։ Ըստ լռելյայն նոր հավելվածը ստանում է React և TypeScript frontend, իսկ երբ հավելվածին պետք է տվյալներ պահել, Mythex-ը նախագծին ավելացնում է նվիրված Postgres տվյալների բազա։ Կարող եք նաև խնդրել առանձին API սերվեր (օրինակ՝ Python, Node, C# կամ Java)՝ կայքի կողքին։ Ամեն ինչ աշխատում է միասին կենդանի նախադիտման մեջ և հրապարակվում է հանրային URL-ով։ Փաստաթղթերի բազմածառայությամբ հավելվածների էջը ցույց է տալիս, թե ինչպես են կայքը և API-ն միասին նախադիտվում և հրապարակվում, իսկ full-stack հավելվածների կառուցիչի էջում կան սկզբնական կետեր։

Հարցեր