Full-Stack App શું છે? સાદી ભાષામાં સમજૂતી

Full-stack app એ એવી એપ છે જેમાં કામ કરવા માટે જરૂરી દરેક લેયર હોય છે: frontend જે લોકો જુએ અને ક્લિક કરે, backend જે સર્વર પર ચાલે અને નિયમો લાગુ કરે, અને database જે બધું યાદ રાખે. એક to-do list જે તમારા કાર્યો સાચવે, તમને કોઈપણ ઉપકરણ પરથી લૉગ ઇન કરવા દે, અને બીજા કોઈને તમારી યાદી ન બતાવે — તે full-stack છે. ફક્ત તમારા ખુલવાના સમય બતાવતું એક પેજ એવું નથી.

"Stack" નો અર્થ ફક્ત એ છે કે ટેક્નોલોજીના લેયર એકની ઉપર એક મૂકેલા છે. "Full" નો અર્થ છે કે તે બધા ત્યાં છે.

AI સાથે બનાવતી વખતે તે શા માટે મહત્વનું છે

જ્યારે તમે AI બિલ્ડરને એપનું વર્ણન કરો છો, ત્યારે તમે જે શબ્દો વાપરો છો તે નક્કી કરે છે કે કયા લેયર બને છે. "અમારું મેનુ બતાવતું પેજ બનાવો" frontend બનાવે છે. "ગ્રાહકો અમારા મેનુમાંથી ઓર્ડર કરી શકે અને રસોડું નવા ઓર્ડર જોઈ શકે" માટે ત્રણેય લેયર જોઈએ, કારણ કે ઓર્ડર સાચવવા જોઈએ, બે પ્રકારના વપરાશકર્તાઓ વચ્ચે શેર કરવા જોઈએ અને ખાનગી રાખવા જોઈએ.

આ તફાવત જાણવાથી ત્રણ રીતે મદદ મળે છે:

• તમે યોગ્ય વસ્તુ માંગો છો. જો તમને ડેટા સાચવવો હોય, તો તે કહો. ફક્ત frontend બનાવતું બિલ્ડર પૂર્ણ દેખાશે, પણ રિફ્રેશ પર બધું ભૂલી જશે.
• તમે દેખીતી પૂર્ણતા ઓળખો છો. નમૂના ડેટા સાથેનો ડેમો કામ કરતી એપ જેવો જ દેખાઈ શકે છે. લેયર જાણવાથી તમે ચકાસી શકો કે ડેટા ખરેખર ક્યાંક જાય છે.
• તમે ચાલુ ખર્ચ સમજો છો. ફક્ત frontend ને static ફાઇલો તરીકે સેવા આપી શકાય. Backend અને database એ સર્વર પર ચાલતા પ્રોગ્રામ છે, અને મોટાભાગનો hosting ખર્ચ ત્યાંથી આવે છે.

રોજિંદો ઉદાહરણ: એક રેસ્ટોરન્ટ

એક રેસ્ટોરન્ટનો વિચાર કરો.

• ડાઇનિંગ રૂમ એ frontend છે. મેનુ, ટેબલ અને વેઇટરની નોટપેડ. મહેમાનો જે જુએ છે તે, અને તે સુખદ અને વાપરવામાં સરળ હોવું જોઈએ.
• રસોડું એ backend છે. મહેમાનો ત્યાં ક્યારેય જતા નથી. તે ઓર્ડર લે છે, તપાસે છે કે વાનગી ઉપલબ્ધ છે, તેને બનાવે છે, અને વિચિત્ર વિનંતીઓ નકારે છે. નિયમો અહીં રહે છે.
• પેન્ટ્રી અને ઓર્ડર બુક એ database છે. તેમાં શું છે અને શું ઓર્ડર થયું છે તે રહે છે, જેથી શિફ્ટ બદલાય ત્યારે કશું ભૂલાય નહીં.

ફક્ત ડાઇનિંગ રૂમ ધરાવતી રેસ્ટોરન્ટ તમને સરસ મેનુ બતાવી શકે, પણ તમને ખવડાવી શકતી નથી. તે frontend-only એપ છે જે full-stack હોવાનો ડોળ કરે છે.

ત્રણ લેયર વધુ વિગતે

લેયર્સ એક નિશ્ચિત ક્રમમાં એકબીજા સાથે વાત કરે છે. Frontend backend ને API દ્વારા કંઈક માંગે છે — વિનંતીઓનો નિર્ધારિત સમૂહ જે backend સ્વીકારે છે. Backend વિનંતી તપાસે છે, database વાંચે કે લખે છે, અને જવાબ પાછો મોકલે છે. Frontend database સાથે સીધી વાત કરતું નથી.

તે ક્રમ સમગ્ર સ્ટેકમાં સુરક્ષાનો સૌથી મહત્વનો વિચાર છે. Frontend માંની કોઈપણ વસ્તુ મુલાકાતી બદલી કે વાંચી શકે છે, કારણ કે તે તેમના ઉપકરણ પર ચાલે છે. તેથી નિયમો — "ફક્ત માલિક આ ઇન્વૉઇસ જોઈ શકે", "કૂપન એક જ વાર વાપરી શકાય" — backend માં લાગુ થવા જોઈએ. આ વિભાજન વિશે વધુ માટે, frontend વિરુદ્ધ backend જુઓ.

એક કામ કરેલું ઉદાહરણ: વર્ગ બુકિંગ એપ

ધારો કે તમે યોગા સ્ટુડિયો ચલાવો છો અને લોકો ઓનલાઇન વર્ગો બુક કરે તેમ ઇચ્છો છો.

મુલાકાતી શું કરે છે: સાઇટ ખોલે છે, આ અઠવાડિયાના વર્ગો જુએ છે, એક પર ટૅપ કરે છે, સાઇન ઇન કરે છે અને જગ્યા બુક કરે છે.

અંદર શું થાય છે:

1. Frontend સમયપત્રક બતાવે છે. તેને ભરવા માટે તે backend ને પૂછે છે, "આ અઠવાડિયે કયા વર્ગો છે, અને કેટલી જગ્યા બાકી છે?"
2. Backend database ને વર્ગો માટે પૂછે છે અને દરેક માટે બુકિંગ ગણે છે, પછી જવાબ આપે છે.
3. મુલાકાતી Book પર ટૅપ કરે છે. Frontend મોકલે છે "આ સાઇન ઇન થયેલ વ્યક્તિ માટે વર્ગ 42 બુક કરો".
4. Backend તપાસે છે: શું આ વ્યક્તિ ખરેખર સાઇન ઇન છે? શું વર્ગ ભરાયેલો છે? શું તેમણે પહેલેથી બુક કર્યો છે? ફક્ત બધું બરાબર હોય તો જ તે database માં નવી બુકિંગ row લખે છે.
5. Backend "બુક થયું" જવાબ આપે છે, અને frontend પુષ્ટિ બતાવે છે.
6. પછી સ્ટુડિયોના માલિક લૉગ ઇન કરે છે અને વર્ગોની યાદી જુએ છે. Backend તપાસે છે કે તે admin છે, તે પહેલાં દરેકના નામ બતાવતા.

હવે કલ્પના કરો કે આ ફક્ત frontend તરીકે બનાવ્યું હોત. સમયપત્રક દેખાઈ શકે, અને Book બટન સરસ ટિક બતાવી શકે, પણ રિફ્રેશ પર બુકિંગ ગાયબ થઈ જાય, બીજા બધા માટે "બાકી જગ્યા" ગણતરી ખોટી હોય, અને માલિક તેને ક્યારેય જોઈ ન શકે. પગલું 4 — તપાસો — તો બિલકુલ ગેરહાજર હોત. આ જ વ્યવહારુ તફાવત છે.

મુખ્ય શબ્દો

• Frontend (client side): બ્રાઉઝરમાં ચાલતો ભાગ.
• Backend (server side): સર્વર પર ચાલતો ભાગ. તેને API સર્વર પણ કહેવાય છે.
• Database: જ્યાં ડેટા વ્યવસ્થિત રીતે સંગ્રહાય છે. database શું છે જુઓ.
• API: frontend અથવા બીજા પ્રોગ્રામ તરફથી backend સ્વીકારે તેવી વિનંતીઓની યાદી.
• Authentication: કોઈ કોણ છે તે તપાસવું (લૉગ ઇન). Authorisation: તે શું કરી શકે તે તપાસવું.
• Deployment: જાહેર લોકો વાપરી શકે તે માટે બધા લેયર સર્વર પર મૂકવા.
• Monolith વિરુદ્ધ services: એક પ્રોગ્રામ જે બધું કરે, વિરુદ્ધ ઘણા નાના (જેમ કે વેબસાઇટ અને અલગ API). બંને full-stack છે.

સામાન્ય ભૂલો અને ગેરસમજણો

• "તે થઈ ગયું દેખાય છે, એટલે થઈ ગયું." નમૂના ડેટા અને કામ કરતું દેખાતું બટન એ સાચવેલો ડેટા નથી. પેજ રિફ્રેશ કરો, ખાનગી વિન્ડોમાં ખોલો, અને ચકાસો કે ડેટા હજી છે.
• નિયમો frontend માં મૂકવા. બટન છુપાવવું સુરક્ષા નથી. જો backend ચકાસતું નથી, તો વિનંતી જાણનાર કોઈપણ તે કરી શકે.
• Secret keys frontend માં મૂકવી. બ્રાઉઝર કોડમાં payment અથવા AI પ્રદાતાની key દરેક મુલાકાતી વાંચી શકે. Keys backend પર, environment variables માં હોવી જોઈએ — environment variables અને secrets જુઓ.
• Full-stack એટલે જટિલ એમ માનવું. નાની full-stack એપ થોડી સ્ક્રીન, મુઠ્ઠીભર backend routes અને ત્રણ database ટેબલ્સ હોઈ શકે. તે લેયરનું વર્ણન છે, કદનું નહીં.
• દરેક ટેક્નોલોજી જાતે પસંદ કરવી પડશે એમ માનવું. પહેલી આવૃત્તિ માટે કોઈપણ સમજદાર, વ્યાપક વપરાતો સ્ટેક ચાલશે. વધુ મહત્વનું છે ડેટા અને નિયમોનું સ્પષ્ટ વર્ણન.

તમારા AI બિલ્ડરને શું માંગવું

એપનું વર્ણન ત્રણ લેયરના સંદર્ભમાં કરો, ભલે તમે તેમને નામ ન આપો:

• ડેટા: "વર્ગો (નામ, સમય, ક્ષમતા) અને બુકિંગ (વર્ગ, વ્યક્તિ, બુક થયેલ સમય) database માં સાચવો."
• નિયમો: "ક્ષમતાથી વધુ વર્ગ બુક ન થઈ શકે. વ્યક્તિ એક વર્ગ એક જ વાર બુક કરી શકે. ફક્ત admins કોણે બુક કર્યું તે જોઈ શકે."
• સ્ક્રીન: "સાપ્તાહિક સમયપત્રક, બુકિંગ પુષ્ટિ, વર્ગ દીઠ બુકિંગ યાદી બતાવતું admin પેજ."
• તપાસ: "આ નિયમો ફક્ત પેજમાં નહીં, સર્વર પર લાગુ કરો. બધી API keys સર્વર પર રાખો."

પછી શંકાશીલ વ્યક્તિની જેમ ચકાસો: રિફ્રેશ કરો, બે જુદા લોકો તરીકે સાઇન ઇન કરો, જે ડેટા ન જોવો જોઈએ તે જોવાનો પ્રયાસ કરો. AI વડે એપ કેવી રીતે બનાવવી માર્ગદર્શિકા સંપૂર્ણ લૂપમાંથી પસાર થાય છે.

Mythex પર full-stack apps

Mythex ચેટ વર્ણનમાંથી full-stack વેબ એપ બનાવે છે. ડિફૉલ્ટ રીતે નવી એપને React અને TypeScript frontend મળે છે; જ્યારે એપને ડેટા સાચવવાની જરૂર પડે, ત્યારે Mythex પ્રોજેક્ટમાં એક સમર્પિત Postgres database ઉમેરે છે, અને તમે વેબસાઇટની સાથે એક અલગ API સર્વર (જેમ કે Python, Node, C# અથવા Java) પણ માંગી શકો છો. બધું એક લાઇવ preview માં સાથે ચાલે છે અને જાહેર URL પર પ્રકાશિત થાય છે. multi-service apps પરનું દસ્તાવેજ બતાવે છે કે વેબસાઇટ અને API કેવી રીતે સાથે preview અને publish થાય છે, અને full-stack app builder પેજમાં શરૂઆતી બિંદુઓ છે.

પ્રશ્નો