Full-stack አፕ ምንድን ነው? ቀላል ማብራሪያ

Full-stack አፕ ለመሥራት የሚያስፈልጉትን ንብርብሮች ሁሉ የያዘ አፕ ነው፦ ሰዎች የሚያዩትና የሚነኩት frontend፣ በሰርቨር ላይ የሚሠራውና ህጎቹን የሚያስፈጽመው backend፣ እና ሁሉንም የሚያስታውሰው ዳታቤዝ። ተግባሮቻችሁን የሚያስቀምጥ፣ ከማንኛውም መሣሪያ እንድትገቡ የሚያደርግና ለማንም ሌላ ዝርዝራችሁን የማያሳይ ቀላል የተግባር ዝርዝር full-stack ነው። የመክፈቻ ሰዓታችሁን ብቻ የሚያሳይ ነጠላ ገጽ ግን አይደለም።

«Stack» ማለት በላይ በላይ የተደራረቡ የቴክኖሎጂ ንብርብሮች ማለት ብቻ ነው። «Full» ማለት ሁሉም ንብርብሮች አሉ ማለት ነው።

ለAI ግንባታ ለምን ያስፈልጋል

ለAI መገንቢያ አፕ ስትገልጹ፣ የምትጠቀሙባቸው ቃላት የትኞቹን ንብርብሮች እንደሚገነባ ይወስናሉ። «የምግብ ዝርዝራችንን የሚያሳይ ገጽ ስራ» frontend ያመጣል። «ደንበኞች ከምግብ ዝርዝራችን እንዲያዙ፣ ኩሽናው አዲስ ትዕዛዞችን እንዲያይ አድርግ» ግን ሦስቱንም ንብርብሮች ይፈልጋል፤ ምክንያቱም ትዕዛዞች መቀመጥ፣ በሁለት አይነት ተጠቃሚዎች መጋራትና ግል መሆን አለባቸው።

ልዩነቱን ማወቅ በሦስት መንገዶች ይረዳል፦

• የሚፈልጉትን በትክክል ትጠይቃላችሁ። ዳታ እንዲቀመጥ ከፈለጋችሁ ግልጽ ብሉ። frontend ብቻ የሚገነባ መገንቢያ ጨርሷል ቢመስልም ገጹ ሲታደስ ሁሉን ይረሳል።
• የተፈፀመ የሚመስል ነገርን ትለያላችሁ። በናሙና ዳታ ያለ ዴሞ ከሚሠራ አፕ ጋር ተመሳሳይ ሊመስል ይችላል። ንብርብሮችን ማወቅ ዳታው በእውነት የሚሄድበትን ቦታ ለማረጋገጥ ያስችላል።
• የመሮጫ ወጪውን ትረዳላችሁ። frontend ብቻ እንደ ስታቲክ ፋይሎች ሊቀርብ ይችላል። backendና ዳታቤዝ በሰርቨሮች ላይ የሚሠሩ ፕሮግራሞች ናቸው፤ አብዛኛው የሆስቲንግ ወጪ የሚመጣውም ከዚያ ነው።

የዕለት ተዕለት ምሳሌ፦ ምግብ ቤት

ምግብ ቤት አስቡ።

• የመመገቢያ አዳራሹ frontend ነው። ምናሌዎች፣ ጠረጴዛዎች፣ የአስተናጋጁ ማስታወሻ ደብተር። እንግዶቹ የሚያዩት ነው፤ ምቹና ቀላል መሆን አለበት።
• ኩሽናው backend ነው። እንግዶች ወደ ውስጥ አይገቡም። ትዕዛዞችን ይቀበላል፣ ምግቡ መኖሩን ይፈትሻል፣ ያበስላል፣ እንግዳ ጥያቄዎችን አይቀበልም። ህጎቹ እዚህ ይኖራሉ።
• ማከማቻው እና የትዕዛዝ መጽሐፉ ዳታቤዙ ናቸው። ያለውንና የታዘዘውን ይይዛሉ፣ ስለዚህ ፈረቃ ሲቀየር ምንም አይረሳም።

የመመገቢያ አዳራሽ ብቻ ያለው ምግብ ቤት ጥሩ ምናሌ ሊያሳይህ ይችላል፣ ነገር ግን ልትበላ አትችልም። ያ frontend ብቻ ያለው አፕ full-stack መስሎ ነው።

ሦስቱ ንብርብሮች በዝርዝር

ንብርብሮቹ በተወሰነ ቅደም ተከተል ይነጋገራሉ። frontend backendን በAPI ይጠይቃል፤ ይህም backend የሚቀበላቸው የተወሰኑ ጥያቄዎች ስብስብ ነው። backend ጥያቄውን ይፈትሻል፣ ዳታቤዙን ያነባል ወይም ይጽፋል፣ መልስ ይልካል። frontend ዳታቤዙን በቀጥታ አይጠይቅም።

ይህ ቅደም ተከተል በመላው ቁልል ውስጥ በጣም አስፈላጊው የደህንነት ሃሳብ ነው። በfrontend ውስጥ ያለ ማንኛውም ነገር በጎብኚው መሣሪያ ላይ ስለሚሠራ ጎብኚው ሊያነብበውና ሊቀይረው ይችላል። ስለዚህ ህጎቹ፦ «ይህን ደረሰኝ ባለቤቱ ብቻ ማየት ይችላል»፣ «ኩፖን አንድ ጊዜ ብቻ ይጠቀማል» — በbackend መተግበር አለባቸው። ስለ ክፍፍሉ ተጨማሪ ለማወቅ frontend vs backend ይመልከቱ።

የሥራ ምሳሌ፦ የክፍል ቦታ ማስያዣ አፕ

የዮጋ ስቱዲዮ እንዳለችሁ እና ሰዎች በመስመር ላይ ክፍሎችን እንዲይዙ ትፈልጋላችሁ እንበል።

ጎብኚው የሚያደርገው፦ ድረ-ገጹን ይከፍታል፣ የዚህን ሳምንት ክፍሎች ያያል፣ አንዱን ይነካል፣ ይገባል፣ ቦታ ይይዛል።

ከበስተጀርባ የሚሆነው፦

1. frontend የጊዜ ሰሌዳውን ያሳያል። እሱን ለመሙላት backendን ይጠይቃል፦ «በዚህ ሳምንት ምን ክፍሎች አሉ፣ እና ስንት ቦታ ቀርቷል?»
2. backend ክፍሎቹን ከዳታቤዙ ይጠይቃል፣ ለእያንዳንዱ ቦታ የተያዙትን ይቆጥራል፣ ከዚያ ይመልሳል።
3. ጎብኚው Book ይጫናል። frontend «ይህን የገባን ሰው ክፍል 42 ያዝ» ብሎ ይልካል።
4. backend ያረጋግጣል፦ ይህ ሰው በእርግጥ ገብቷል? ክፍሉ ሞልቷል? ቀድሞ ይዞታል? ሁሉ ደህና ከሆነ ብቻ አዲስ የቦታ ማስያዣ ረድፍ ወደ ዳታቤዙ ይጽፋል።
5. backend «ተይዟል» ብሎ ይመልሳል፣ frontend ማረጋገጫ ያሳያል።
6. በኋላ የስቱዲዮው ባለቤት ገብታ የክፍሎች ዝርዝር ታያለች። backend አስተዳዳሪ መሆኗን ያረጋግጣል፣ ከዚያ የሁሉንም ሰዎች ስም ያሳያል።

አሁን ይህ frontend ብቻ ሆኖ ተሰርቶ ያስቡ። የጊዜ ሰሌዳው ሊታይ ይችላል፣ የ«Book» ቁልፉም ጥሩ ምልክት ሊያሳይ ይችላል፣ ነገር ግን ገጹ ሲታደስ ቦታ ማስያዙ ይጠፋል፣ «ቦታ ቀርቷል» ቁጥሩ ለሌሎቹ ሁሉ ስህተት ይሆናል፣ ባለቤቱም ፈጽሞ አያየውም። ደረጃ 4 — ማረጋገጫዎቹ — ሙሉ በሙሉ ይጠፋሉ። ተግባራዊው ልዩነት ይህ ነው።

ቁልፍ ቃላት

• Frontend (client side)፦ በብራውዘር ውስጥ የሚሠራው ክፍል።
• Backend (server side)፦ በሰርቨር ላይ የሚሠራው ክፍል። API ሰርቨርም ይባላል።
• Database፦ ዳታ በተደራጀ መንገድ የሚቀመጥበት ቦታ። ዳታቤዝ ምንድን ነው ይመልከቱ።
• API፦ backendው ከfrontend ወይም ከሌሎች ፕሮግራሞች የሚቀበላቸው ጥያቄዎች ዝርዝር።
• Authentication (ማረጋገጫ)፦ ማን እንደሆነ ማረጋገጥ (መግባት)። Authorisation (ፈቃድ)፦ ምን ማድረግ እንደሚችል ማረጋገጥ።
• Deployment (ማሰማራት)፦ ሁሉንም ንብርብሮች በሰርቨሮች ላይ ማድረግ ሕዝቡ እንዲጠቀምበት።
• Monolith vs services፦ ሁሉን የሚሠራ አንድ ፕሮግራም፣ ወይም ብዙ ትናንሽ (ለምሳሌ ድረ-ገጽና የተለየ API)። ሁለቱም full-stack ናቸው።

የተለመዱ ስህተቶችና ግንዛቤዎች

• «ተጠናቅቋል ስለሚመስል ተጠናቅቋል።» የናሙና ዳታና የሚሠራ የሚመስል ቁልፍ ከተቀመጠ ዳታ ጋር አንድ አይደሉም። ገጹን ዳግም ጫኑት፣ በግል መስኮት ክፈቱት፣ ዳታው መኖሩን አረጋግጡ።
• ህጎችን በfrontend ውስጥ ማድረግ። አዝራር መደበቅ ደህንነት አይደለም። backend ካልፈተሸ፣ ጥያቄውን ማድረግ የሚያውቅ ማንም ሊያደርገው ይችላል።
• የሚስጥር ቁልፎችን በfrontend ውስጥ ማስቀመጥ። የክፍያ ወይም የAI አቅራቢ ቁልፍ በብራውዘር ኮድ ውስጥ ሲሆን ጎብኚ ሁሉ ሊያነበው ይችላል። ቁልፎች በbackend፣ በenvironment variables ውስጥ መሆን አለባቸው። Environment variables እና ሚስጥሮች ይመልከቱ።
• 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 አፕ መገንቢያው ገጽ የመነሻ ነጥቦች አሉት።

ጥያቄዎች