Full-stack апп гэж юу вэ? Энгийн хэлээр тайлбар

Full-stack апп бол ажиллахад шаардлагатай бүх давхаргыг агуулсан апп юм: хүмүүс харж, дарах frontend, серверт ажиллаж дүрмийг мөрдүүлдэг backend, мөн бүх зүйлийг санадаг мэдээллийн сан (database). Хэрэглэгчийн даалгавруудыг хадгалж, хаанаас ч нэвтрэх боломж олгож, өөр хэн ч жагсаалтаа харахгүй байдаг хийх ажлын жагсаалт бол full-stack. Зөвхөн нээлттэй цагийг нь харуулдаг нэг хуудас бол биш.

"Stack" гэдэг нь технологийн давхаргуудыг нэг нэгэн дээрээ овоолсныг хэлнэ. "Full" гэдэг нь тэдгээр бүгд байгааг хэлнэ.

AI-аар бүтээхдээ яагаад чухал вэ

AI бүтээгчид апп тайлбарлахдаа ашигласан үг тань аль давхаргыг бүтээхийг тодорхойлдог. "Манай цэсийг харуулах хуудас хий" гэвэл frontend гарна. "Үйлчлүүлэгчид цэснээс захиалга өгч, гал тогоо шинэ захиалгыг харах боломжтой болго" гэвэл захиалга хадгалагдаж, хоёр төрлийн хэрэглэгчид хуваалцаж, нууцлагдах ёстой тул гурван давхарга хэрэгтэй.

Ялгааг мэдэх нь гурван талаар тусална:

• Зөв зүйлээ гуйна. Өгөгдөл хадгалах хэрэгтэйгээ хэлэх хэрэгтэй. Зөвхөн frontend бүтээдэг бүтээгч дууссан мэт харагдах боловч хуудсыг шинэчлэхэд бүх зүйлийг мартана.
• Хуурамч бүрэн байдлыг таних. Жишээ өгөгдөлтэй демо нь ажилладаг апптай яг адилхан харагдаж болно. Давхаргуудыг мэдвэл өгөгдөл жинхэнээр хаа нэг газар очдог эсэхийг шалгаж чадна.
• Ажиллуулах зардлыг ойлгоно. Зөвхөн frontend нь статик файлаар үйлчилж болно. Backend ба мэдээллийн сан нь серверт ажилладаг программууд бөгөөд хостингийн зардлын ихэнх нь тэндээс гардаг.

Өдөр тутмын зүйрлэл: ресторан

Ресторан бодоод үз.

• Идэнэй танхим бол frontend. Цэс, ширээ, зөөгчийн тэмдэглэлийн дэвтэр. Зочид юу харж, дарж байгааг нь хардаг бөгөөд сайхан, хялбар байх ёстой.
• Гал тогоо бол backend. Зочид хэзээ ч орохгүй. Захиалга авдаг, хоол бэлтгэлтэй эсэхийг шалгадаг, хоол хийдэг, ойлгомжгүй хүсэлтийг татгалздаг. Дүрмүүд энд байна.
• Агуулахын бараа, захиалгын дэвтэр бол мэдээллийн сан. Юу байгаа, юу захиалагдсаныг хадгалдаг тул ээлж солигдоход юу ч мартагдахгүй.

Зөвхөн идэнэй танхимтай ресторан сайхан цэс харуулж чадна, гэхдээ та хоол идэж чадахгүй. Энэ бол зөвхөн frontend байгаа боловч 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: frontend эсвэл бусад программаас backend хүлээн авдаг хүсэлтүүдийн жагсаалт.
• Authentication: хэн гэдгийг шалгах (нэвтрэлт). Authorisation: юу хийж болохыг шалгах.
• Deployment: олон нийтэд ашиглуулахын тулд бүх давхаргыг серверт байршуулах.
• Monolith ба үйлчилгээнүүд: бүгдийг хийдэг нэг программ, эсвэл хэд хэдэн жижиг программ (жишээ нь вэбсайт ба тусдаа API). Аль нь ч full-stack байж болно.

Түгээмэл алдаа, буруу ойлголт

• "Дууссан мэт харагдаж байна, тэгэхээр дууссан." Жишээ өгөгдөл, ажиллаж мэт харагдах товч нь хадгалагдсан өгөгдөлтэй адил биш. Хуудсыг шинэчилж, хувийн цонхноос нээгээд өгөгдөл үлдсэн эсэхийг шалга.
• Дүрмийг frontend дээр байрлуулах. Товчийг нуух нь аюулгүй байдал биш. Хэрэв backend шалгахгүй бол хүсэлтийг шууд илгээж болно.
• Нууц түлхүүрийг frontend-д байрлуулах. Төлбөр эсвэл AI үйлчилгээний түлхүүр хөтчийн кодонд байвал зочин бүр уншиж чадна. Түлхүүрүүд backend дээр, орчны хувьсагчид байх ёстой. Орчны хувьсагч ба нууц-ыг үзнэ үү.
• Full-stack гэдэг нарийн төвөгтэй гэж бодох. Жижиг full-stack апп нь хэдхэн дэлгэц, хэдэн backend маршрут, гурван мэдээллийн сангийн хүснэгт байж болно. Энэ бол давхаргуудын тайлбар, хэмжээ биш.
• Технологи бүрийг өөрөө сонгох ёстой гэж бодох. Аливаа ухаалаг, өргөн хэрэглэгддэг стек эхний хувилбарт болно. Илүү чухал нь өгөгдөл болон дүрмийн тодорхой тайлбар юм.

AI бүтээгчээсээ юу гуйх вэ

Давхаргуудын нэрийг мэдэхгүй байсан ч аппаа эдгээр талаас нь тайлбарла:

• Өгөгдөл: "Ангиудыг (нэр, цаг, багтаамж) болон захиалгуудыг (анги, хүн, захиалсан цаг) мэдээллийн санд хадгал."
• Дүрэм: "Анги багтаамжаас давсан захиалга авахгүй. Нэг хүн нэг ангийг зөвхөн нэг удаа захиална. Зөвхөн админ хэн захиалснаа харж болно."
• Дэлгэцүүд: "Долоо хоногийн хуваарь, захиалгын баталгаажуулалт, анги тус бүрийн захиалгыг харуулах админ хуудас."
• Шалгалтууд: "Эдгээр дүрмийг зөвхөн хуудсан дээр бус серверт мөрдүүл. API түлхүүрүүдийг серверт байлга."

Дараа нь хүний сэрүүн шүүлтүүрээр туршиж үз: шинэчил, хоёр өөр хүнээр нэвтэр, харах ёсгүй өгөгдлийг харахыг оролдоорой. AI-аар апп бүтээх гарын авлага нь энэ давталтыг эхнээс нь төгсгөл хүртэл тайлбарлана.

Mythex дээрх full-stack аппууд

Mythex нь чат дээрх тайлбараас full-stack вэб апп бүтээдэг. Анхдагчаар шинэ апп React ба TypeScript frontend-тэй ирдэг; апп өгөгдөл хадгалах шаардлагатай болвол Mythex төсөлд зориулсан Postgres мэдээллийн сан нэмдэг, мөн вэбсайтын хажууд тусдаа API сервер (жишээ нь Python, Node, C#, эсвэл Java) хүсэж болно. Бүгд хамтдаа урьдчилан харах орчинд ажиллаж, нийтийн URL дээр нийтлэгддэг. Олон үйлчилгээтэй аппуудыг урьдчилан харах, нийтлэх талаар олон үйлчилгээт апп баримтаас, эхлэх цэгүүдийг full-stack апп бүтээгч хуудаснаас үзнэ үү.

Асуултууд