Frontend vs Backend፡ ልዩነቱ ምንድነው?

Frontend የአፕ ክፍል ሲሆን በተጠቃሚው ብሮውዘር ውስጥ ይሠራል፤ የሚያዩትና የሚጫኑት ገጾች፣ አዝራሮች፣ ቅጾችና አኒሜሽኖች ናቸው። Backend ተጠቃሚው በማያየው ሰርቨር ላይ የሚሠራ ክፍል ነው፤ ዳታን ያስቀምጣል እና ያወጣል፣ የንግድ ህጎችን ይተገብራል፣ ማን ምን ማድረግ እንደሚችል ያረጋግጣል፣ እንዲሁም እንደ ክፍያና ኢሜይል ካሉ ሌሎች አገልግሎቶች ጋር ይገናኛል። ሁለቱ በAPI ይግባባሉ፤ ከዳታቤዝ ጋር ሲደመሩ "full-stack" አፕ ይሆናሉ።

ከAI ጋር ሲገነቡ ለምን ይጠቅማል

ለAI ገንቢ አፕ ሲገልጹ ሁለቱንም ክፍሎች በአንድ ጊዜ እየገለጹ ነው፤ ይህን ቢያውቁትም ባያውቁትም። "ደንበኞች ሰዓት ማስያዝ ይችላሉ" ማለት የቦታ ማስያዣ ቅጽ (frontend)፣ የትኞቹ ቦታዎች ክፍት እንደሆኑ ህጎች (backend) እና ቦታ ማስያዞቹ የሚቀመጡበት (ዳታቤዝ) ማለት ነው።

ይህን መለየት በሦስት ተግባራዊ መንገዶች ይረዳል፦

ደህንነት። በfrontend ያለ ማንኛውም ነገር ተጠቃሚው ማየትና መቀየር ይችላል። ህጎችና ሚስጥሮች በbackend መቀመጥ አለባቸው።
ስህተት ማግኘት። "አዝራሩ ምላሽ አይሰጥም" እና "አዝራሩ ምላሽ ይሰጣል ግን ምንም አይቀመጥም" ወደ የተለያዩ ክፍሎች ይጠቁማሉ፤ የትኛውን እያዩ እንደሆነ መናገር AI መንስኤውን ፈጥኖ እንዲያገኝ ይረዳል።
ማስተናገጃና ወጪ። Frontend ብቻ ያለው ድረ-ገጽ ርካሽና ቀላል ለማስተናገድ ነው። Backend የሆነ ቦታ መሥራት አለበት፤ ይህ ደግሞ የሚከፍሉትን እና አፑ ስራ ፈት ሲሆን እንዴት እንደሚሠራ ይነካል።

የዕለት ተዕለት ምሳሌ

ምግብ ቤት አስቡ።

Frontend የመመገቢያ ክፍሉ ነው፦ ምናሌው፣ ጠረጴዛዎቹ፣ ማስዋቡ፣ ትእዛዙን የሚወስደው አስተናጋጅ። ለደንበኞች የተሠራ ነው፤ ሁሉንም ማየትና መንካት ይችላሉ።

Backend ኩሽናውና ቢሮው ነው፦ ምግብ የሚያበስሉት ሼፎች፣ የዕቃ ማከማቻው፣ ካሽ መመዝገቢያው፣ ማን ቅናሽ እንደሚያገኝ የሚወስነው የአስተዳዳሪው ህግ። ደንበኞች ወደዚያ አይገቡም፤ መግባትም የለባቸውም።

API በሁለቱ መካከል ያለው መተላለፊያ ነው፤ ትእዛዞች የሚገቡበትና ምግቦች የሚወጡበት ቆጣሪ፣ በተስማሙበት ቅርጸት። ዳታቤዙ የዕቃ ማከማቻውና የትእዛዝ መዝገቡ ነው።

ደንበኛ የትእዛዝ ወረቀቱን ማስተካከል ይችላል (frontend በእሱ ቁጥጥር ስር ነው)፤ ነገር ግን ኩሽናው ምን እንደሚያበስል እና ምን እንደሚያስከፍል አሁንም ይወስናል። ለዚህ ነው ዋና ማረጋገጫዎቹ በኋላ በኩል መሆን ያለባቸው።

እያንዳንዱ ክፍል ምን ይሠራል

	Frontend	Backend
የሚሠራበት	የተጠቃሚው መሣሪያ፣ በብሮውዘር	እርስዎ (ወይም ማስተናገጃዎ) የሚቆጣጠሩት ሰርቨር
ዋና ሥራ	ነገሮችን ማሳየት፣ ግብዓት መሰብሰብ፣ ለጠቅታ ምላሽ መስጠት	ዳታ ማስቀመጥ፣ ህጎችን መተግበር፣ ፈቃዶችን ማስከበር፣ ሌሎች አገልግሎቶችን መጥራት
ተጠቃሚዎች ኮዱን ማየትና መቀየር ይችላሉ?	አዎ፤ ወደ ብሮውዘራቸው ይወርዳል	አይችሉም
ሚስጥራዊ API ቁልፎችን መያዝ ይችላል?	አይችልም	ይችላል፤ በenvironment variables
የተለመዱ ቴክኖሎጂዎች	HTML፣ CSS፣ JavaScript/TypeScript፣ React፣ Vue፣ Svelte፣ Tailwind	Node.js፣ Python (FastAPI፣ Django)፣ C#፣ Java፣ Go፣ Ruby
የሚበላሸው ነገር	አቀማመጡ በሞባይል ይበላሻል፣ አዝራሩ ምንም አያደርግም፣ ገጹ ዝግ ነው	ዳታ አይቀመጥም፣ የተሳሳተ ዳታ ይታያል፣ ስህተቶች፣ የደህንነት ክፍተቶች

አንዳንድ ፍሬምዎርኮች መስመሩን ያደበዝዛሉ። ለምሳሌ Next.js በአንድ ፕሮጀክት ውስጥ ሁለቱንም የብሮውዘርና የሰርቨር ኮድ እንዲይዝ ይፈቅዳል። ሃሳቡ ግን አንድ ነው፦ ጥያቄው ሁልጊዜ ይህ ክፍል የት ነው የሚሠራው? ነው።

የተሠራ ምሳሌ፦ ክፍል ማስያዝ

አንድ ሰው የዮጋ ክፍል ሲያስይዝ ምን እንደሚፈጠር ደረጃ በደረጃ እነሆ።

ደረጃ	የት	ምን ይሆናል
1	Frontend	የፕሮግራም ገጹ ይጫናል፤ የዚህን ሳምንት ክፍሎች ከbackend ይጠይቃል።
2	Backend	ክፍሎቹንና ቦታ ማስያዞችን ከዳታቤዙ ያነባል፣ ቀሪ ቦታዎችን ያሰላል፣ ዝርዝሩን እንደ JSON ይመልሳል።
3	Frontend	እያንዳንዱን ክፍል ከሰዓቱ፣ ከአሰልጣኙና ከቀሪ ቦታው ጋር ያሳያል።
4	Frontend	ተጠቃሚው ክፍል ይመርጣል፤ ስምና ኢሜይል ይሞላል። ቅጹ ኢሜይሉ የሚመስል መሆኑን ይፈትሻል (እንደ ቸርነት እንጂ እንደ ዋስትና አይደለም)።
5	Frontend → Backend	በAPI `POST /api/bookings` ጥያቄ ይልካል።
6	Backend	ግብዓቱን እንደገና ያረጋግጣል፣ ክፍሉ ሙሉ አለመሆኑን ይፈትሻል፣ ቦታ ማስያዙን ያስቀምጣል፣ እና በሚስጥር ቁልፍ ለኢሜይል አገልግሎቱ የማረጋገጫ መልእክት እንዲልክ ይጠይቃል።
7	Backend → Frontend	"ተይዟል" ወይም "ይቅርታ፣ ሙሉ ነው" ብሎ ይመልሳል።
8	Frontend	የማረጋገጫ ገጹን ያሳያል።

ደረጃ 4 እና 6ን ልብ ይበሉ፦ ግብዓቱ ሁለቴ ይፈተሻል። የfrontend ፍተሻ ፈጣን ምላሽ ይሰጣል፤ የbackend ፍተሻ ግን የሚቆጠረው ነው፤ ምክንያቱም ቆራጥ ተጠቃሚ frontendን ሙሉ በሙሉ ማለፍ ይችላል።

የተለመዱ ቃላት ማብራሪያ

ቃል	ትርጉም
Client / server	Client ጥያቄ የሚልከው ብሮውዘር (ወይም አፕ) ነው፤ server ደግሞ ጥያቄውን ይመልሳል።
UI	User interface፤ ማያ ገጾቹና መቆጣጠሪያዎቹ።
API	Frontend ከbackend ዳታ ወይም ተግባር የሚጠይቅበት የተስማሙበት መንገድ።
Endpoint	በAPI ላይ አንድ የተወሰነ URL፣ ለምሳሌ `/api/bookings`።
Full stack	Frontend + backend + ዳታቤዝ አንድ ላይ። full-stack አፕ ምን እንደሆነ ይመልከቱ።
Static site	የራሱ backend የሌለው frontend፤ ለሁሉም ተመሳሳይ ፋይሎች።
SPA	Single-page application፤ ገጹን ከአዲስ ገጽ ከመጫን ይልቅ በብሮውዘሩ ውስጥ የሚያዘምን frontend።
Server-side rendering (SSR)	ሰርቨሩ ገጹን ከመላኩ በፊት HTML-ውን ይገነባል፤ ይህ ፍጥነትንና SEOን ሊረዳ ይችላል።
Environment variables	ለbackend በሂደት ጊዜ የሚሰጡ ቅንብሮችና ሚስጥሮች፤ ከኮዱ ውጭ የሚቀመጡ።

አፕዎ backend ያስፈልገዋል?

አፕዎ ከሆነ…	Backend ያስፈልጋል?
ለሁሉም አንድ ዓይነት መረጃ የሚያሳይ	አያስፈልግም
ለእርስዎ ብቻ ኢሜይል የሚልክ የመገናኛ ቅጽ ያለው	ብዙውን ጊዜ ትንሽ ነው፤ ወይም የቅጽ አገልግሎት
ሌሎች ሰዎች የሚያዩትን ዳታ የሚያስቀምጥ	አዎ
መግቢያና የግል ዳታ ያለው	አዎ
ክፍያ የሚቀበል	አዎ፤ ቢያንስ ቼክአውት ለመፍጠርና የክፍያ webhooks ለመቀበል
በሚስጥር ቁልፍ የሚከፈል AI ወይም ሌላ API የሚጠቀም	አዎ፤ ቁልፉን ከብሮውዘር ለማራቅ

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

ሚስጥራዊ ቁልፎችን በfrontend ማስቀመጥ። የብሮውዘሩን developer tools የከፈተ ማንኛውም ሰው ያየዋል። በAI የተገነቡ አፖች ውስጥ ይህ በጣም የተለመደና ከባድ ስህተት ነው።
ህጎችን በfrontend ብቻ ማስከበር። "ሰርዝ" የሚለውን አዝራር ለአስተዳዳሪ ያልሆኑ ሰዎች መደበቅ ጥበቃ አይደለም፤ backend ጥያቄውን ውድቅ ማድረግ አለበት።
Backend "ዳታቤዝ ብቻ" ነው ብሎ ማሰብ። ዳታቤዙ ዳታ ያስቀምጣል። ማን ማንበብና መቀየር እንደሚችል እና እንዴት እንደሚሆን የሚወስነው backend ነው።
JavaScript ማለት frontend ነው ብሎ ማሰብ። JavaScript እና TypeScript በNode.js አማካኝነት በሰርቨሮችም ላይ ይሠራሉ።
ተሳስቶ ክፍሉን መውቀስ። ገጹ ትክክል ቢመስልም ዳታው የተሳሳተ ከሆነ ችግሩ ብዙውን ጊዜ በbackend ወይም በዳታቤዝ ውስጥ ነው፤ በዲዛይኑ አይደለም።
ከልክ በላይ መገንባት። ፖርትፎሊዮ የራሱ backend አያስፈልገውም። መጨመር ወጪና ተጨማሪ ክፍሎች ያመጣል።

ከAI ገንቢዎ ምን ብለው ይጠይቁ

"በዚህ አፕ ውስጥ የትኞቹ ክፍሎች በብሮውዘር፣ የትኞቹስ በሰርቨር ላይ ይሠራሉ?"
"ማናቸውንም API ቁልፎች ወደ backend አንቀሳቅሰህ ከenvironment variables አንብባቸው።"
"እያንዳንዱን ቅጽ በብሮውዘሩ ብቻ ሳይሆን በሰርቨሩም አረጋግጥ።"
"አስተዳዳሪዎች ብቻ ቦታ ማስያዞችን እንዲሰርዙ በbackend አረጋግጥ።"
"ገጹ ጥሩ ይመስላል ግን ዳታው አይቀመጥም፤ ለጥያቄው backend logs ተመልከት።"
"ይህ ቀላል የማስታወቂያ ድረ-ገጽ ነው፤ ሌላ backend እስካልፈለግን ድረስ frontend ብቻ ይሁን።"

Frontend እና backend በMythex

አዲስ የMythex ፕሮጀክት ከVite፣ React፣ TypeScript እና Tailwind frontend ይጀምራል። አፑ backend ሲፈልግ AI agent ይጨምረዋል፤ ወይም በNode፣ Python (FastAPI)፣ C# ወይም Java የተጻፈ የተለየ API ከfrontend ጎን በተመሳሳይ ፕሮጀክት እንዲሠራ መጠየቅ ይችላሉ። በpreview ውስጥ በድረ-ገጹና በAPI ሰርቨሩ መካከል መቀያየር ይችላሉ፤ ሲታተም ሁለቱም ይሰማራሉ፤ ሲያስፈልግም ዳታቤዝና ፋይል ማከማቻ ይጨመራሉ። ሰነዶቹ ባለብዙ-አገልግሎት አፖችን ያብራራሉ፤ ድረ-ገጽ ማስተናገድ መመሪያ ደግሞ አንዱ ክፍል ቀጥታ ሲሆን የት እንደሚሠራ ይገልጻል፤ የአፕ ቴምፕሌቶች ደግሞ ፈጣን የfull-stack ምሳሌዎችን ያሳያሉ።

ጥያቄዎች

በFrontend እና Backend መካከል ያለው ልዩነት ምንድነው?

Frontend የአፕ ክፍል ሲሆን በተጠቃሚው ብሮውዘር ውስጥ ይሠራል፤ ገጾቹን፣ አዝራሮቹንና ቅጾቹን ያካትታል። Backend ተጠቃሚው የማያየው በሰርቨር ላይ የሚሠራ ክፍል ነው፤ ዳታን ያስቀምጣል፣ የንግድ ህጎችን ይተገብራል፣ ፈቃዶችን ያረጋግጣል እንዲሁም ከሌሎች አገልግሎቶች ጋር ይገናኛል።

እያንዳንዱ አፕ Backend ያስፈልገዋል?

አያስፈልግም። የማስታወቂያ ድረ-ገጽ፣ ፖርትፎሊዮ ወይም ቀላል ላንዲንግ ገጽ Frontend ብቻ ሊሆን ይችላል። አፑ የጋራ ዳታ ማስቀመጥ፣ ተጠቃሚዎችን መግባት፣ ክፍያ መቀበል ወይም ሚስጥራዊ API ቁልፎችን መጠቀም ሲፈልግ ግን የሆነ ዓይነት Backend ያስፈልገዋል።

HTML Frontend ነው ወይስ Backend?

በብሮውዘር ውስጥ የሚሠሩ HTML፣ CSS እና JavaScript Frontend ናቸው። JavaScript በNode.js በመጠቀም በሰርቨር ላይም ሊሠራ ይችላል፤ ያኔ Backend ኮድ ነው። ቋንቋው አይወስነውም፤ ኮዱ የሚሠራበት ቦታ ነው የሚወስነው።

Full stack ማለት ምን ማለት ነው?

Full stack ማለት Frontendንና Backendን (አብዛኛውን ጊዜ ዳታቤዙንም) ያካትታል ማለት ነው። Full-stack አፕ ሦስቱም ክፍሎች ያሉት አፕ ነው፤ Full-stack ገንቢ በሁሉም ላይ ይሠራል።