ഫുൾ-സ്റ്റാക്ക് ആപ്പ് എന്താണ്? ലളിതമായ ഭാഷയിൽ വിശദീകരണം

ഫുൾ-സ്റ്റാക്ക് ആപ്പ് എന്നത് പ്രവർത്തിക്കാൻ ആവശ്യമായ എല്ലാ ലെയറുകളും ഉൾക്കൊള്ളുന്ന ആപ്പാണ്: ആളുകൾ കാണുകയും ക്ലിക്ക് ചെയ്യുകയും ചെയ്യുന്ന ഫ്രണ്ട്എൻഡ്, സെർവറിൽ പ്രവർത്തിച്ച് നിയമങ്ങൾ നടപ്പാക്കുന്ന ബാക്കെൻഡ്, എല്ലാം ഓർത്തുവെക്കുന്ന ഡാറ്റാബേസ്. നിങ്ങളുടെ ടാസ്കുകൾ സേവ് ചെയ്യുകയും ഏത് ഉപകരണത്തിൽ നിന്നും ലോഗിൻ ചെയ്യാൻ അനുവദിക്കുകയും മറ്റാരെയും നിങ്ങളുടെ ലിസ്റ്റ് കാണിക്കാതിരിക്കുകയും ചെയ്യുന്ന ഒരു ടു-ഡു ലിസ്റ്റ് ഫുൾ-സ്റ്റാക്ക് ആണ്. നിങ്ങളുടെ പ്രവർത്തന സമയം മാത്രം കാണിക്കുന്ന ഒരു പേജ് അങ്ങനെയല്ല.

"സ്റ്റാക്ക്" എന്നാൽ പരസ്പരം അടുക്കിവെച്ചിരിക്കുന്ന സാങ്കേതികവിദ്യയുടെ ലെയറുകൾ എന്നാണ്. "ഫുൾ" എന്നാൽ അവയെല്ലാം ഉണ്ട് എന്നാണ്.

AI ഉപയോഗിച്ച് നിർമ്മിക്കുമ്പോൾ ഇത് പ്രധാനമായത് എന്തുകൊണ്ട്

ഒരു AI ബിൽഡറിനോട് ഒരു ആപ്പ് വിവരിക്കുമ്പോൾ, നിങ്ങൾ ഉപയോഗിക്കുന്ന വാക്കുകൾ ഏത് ലെയറുകൾ നിർമ്മിക്കപ്പെടുമെന്ന് തീരുമാനിക്കുന്നു. "ഞങ്ങളുടെ മെനു കാണിക്കുന്ന ഒരു പേജ് ഉണ്ടാക്കുക" എന്നത് ഒരു ഫ്രണ്ട്എൻഡ് ഉണ്ടാക്കുന്നു. "ഞങ്ങളുടെ മെനുവിൽ നിന്ന് കസ്റ്റമർമാർക്ക് ഓർഡർ ചെയ്യാനും അടുക്കള പുതിയ ഓർഡറുകൾ കാണാനും അനുവദിക്കുക" എന്നതിന് മൂന്ന് ലെയറുകളും വേണം, കാരണം ഓർഡറുകൾ സേവ് ചെയ്യണം, രണ്ട് തരം ഉപയോക്താക്കൾക്കിടയിൽ പങ്കിടണം, സ്വകാര്യമായി സൂക്ഷിക്കണം.

ഈ വ്യത്യാസം അറിയുന്നത് മൂന്ന് തരത്തിൽ സഹായിക്കുന്നു:

• ശരിയായത് ചോദിക്കാം. ഡാറ്റ സേവ് ചെയ്യണമെങ്കിൽ അത് പറയുക. ഫ്രണ്ട്എൻഡ് മാത്രം ഉണ്ടാക്കുന്ന ബിൽഡർ പൂർത്തിയായതായി തോന്നിപ്പിക്കും, പക്ഷേ റീഫ്രഷ് ചെയ്യുമ്പോൾ എല്ലാം മറന്നുപോകും.
• വ്യാജ പൂർത്തീകരണം തിരിച്ചറിയാം. സാമ്പിൾ ഡാറ്റയുള്ള ഒരു ഡെമോ പ്രവർത്തിക്കുന്ന ആപ്പിന്റെ അതേ പോലെ കാണപ്പെടാം. ലെയറുകൾ അറിയുന്നത് ഡാറ്റ യഥാർത്ഥത്തിൽ എവിടേക്കെങ്കിലും പോകുന്നുണ്ടോ എന്ന് പരിശോധിക്കാൻ സഹായിക്കുന്നു.
• പ്രവർത്തന ചെലവ് മനസ്സിലാക്കാം. ഫ്രണ്ട്എൻഡ് മാത്രം സ്റ്റാറ്റിക് ഫയലുകളായി നൽകാം. ബാക്കെൻഡും ഡാറ്റാബേസും സെർവറുകളിൽ പ്രവർത്തിക്കുന്ന പ്രോഗ്രാമുകളാണ്, ഹോസ്റ്റിംഗ് ചെലവിന്റെ ഭൂരിഭാഗവും അവിടെ നിന്നാണ് വരുന്നത്.

ഒരു ദൈനംദിന ഉപമ: ഒരു റെസ്റ്റോറന്റ്

ഒരു റെസ്റ്റോറന്റ് സങ്കൽപ്പിക്കുക.

• ഡൈനിംഗ് റൂം ഫ്രണ്ട്എൻഡ് ആണ്. മെനുകൾ, മേശകൾ, വെയ്റ്ററുടെ നോട്ട്പാഡ്. അതിഥികൾ കാണുന്നതാണിത്, അത് മനോഹരവും ഉപയോഗിക്കാൻ എളുപ്പവുമായിരിക്കണം.
• അടുക്കള ബാക്കെൻഡ് ആണ്. അതിഥികൾ ഒരിക്കലും അകത്ത് പോകുന്നില്ല. ഓർഡറുകൾ സ്വീകരിക്കുന്നു, വിഭവം ലഭ്യമാണോ എന്ന് പരിശോധിക്കുന്നു, പാചകം ചെയ്യുന്നു, വിചിത്രമായ അഭ്യർത്ഥനകൾ നിരസിക്കുന്നു. നിയമങ്ങൾ ഇവിടെയാണ് താമസിക്കുന്നത്.
• സ്റ്റോറും ഓർഡർ ബുക്കും ഡാറ്റാബേസ് ആണ്. എന്തൊക്കെയുണ്ടോ, എന്തൊക്കെ ഓർഡർ ചെയ്തു എന്നത് അവ സൂക്ഷിക്കുന്നു, അതിനാൽ ഷിഫ്റ്റ് മാറുമ്പോൾ ഒന്നും മറന്നുപോകില്ല.

ഡൈനിംഗ് റൂം മാത്രമുള്ള ഒരു റെസ്റ്റോറന്റിന് നല്ലൊരു മെനു കാണിക്കാം, പക്ഷേ ഭക്ഷണം കിട്ടില്ല. അത് ഫുൾ-സ്റ്റാക്ക് ആണെന്ന് നടിക്കുന്ന ഫ്രണ്ട്എൻഡ് മാത്രമുള്ള ആപ്പാണ്.

മൂന്ന് ലെയറുകൾ വിശദമായി

ലെയറുകൾ നിശ്ചിത ക്രമത്തിൽ പരസ്പരം സംസാരിക്കുന്നു. ഫ്രണ്ട്എൻഡ് എന്തെങ്കിലും ആവശ്യപ്പെടുന്നത് API വഴിയാണ് — ബാക്കെൻഡ് സ്വീകരിക്കുന്ന നിർവചിക്കപ്പെട്ട അഭ്യർത്ഥനകളുടെ കൂട്ടം. ബാക്കെൻഡ് അഭ്യർത്ഥന പരിശോധിക്കുന്നു, ഡാറ്റാബേസ് വായിക്കുകയോ എഴുതുകയോ ചെയ്യുന്നു, ഉത്തരം തിരികെ അയക്കുന്നു. ഫ്രണ്ട്എൻഡ് ഒരിക്കലും നേരിട്ട് ഡാറ്റാബേസുമായി സംസാരിക്കുന്നില്ല.

ഈ ക്രമമാണ് മുഴുവൻ സ്റ്റാക്കിലെയും ഏറ്റവും പ്രധാനപ്പെട്ട സുരക്ഷാ ആശയം. ഫ്രണ്ട്എൻഡിലുള്ളതെന്തും സന്ദർശകന്റെ ഉപകരണത്തിൽ പ്രവർത്തിക്കുന്നതിനാൽ അവർക്ക് വായിക്കാനും മാറ്റാനും കഴിയും. അതിനാൽ — "ഈ ഇൻവോയ്സ് ഉടമയ്ക്ക് മാത്രം കാണാം", "ഒരു കൂപ്പൺ ഒരു തവണ മാത്രം ഉപയോഗിക്കാം" — ഈ നിയമങ്ങൾ ബാക്കെൻഡിൽ നടപ്പാക്കണം. ഈ വിഭജനത്തെക്കുറിച്ച് കൂടുതലറിയാൻ ഫ്രണ്ട്എൻഡും ബാക്കെൻഡും കാണുക.

ഒരു ഉദാഹരണം: ക്ലാസ് ബുക്കിംഗ് ആപ്പ്

നിങ്ങൾ ഒരു യോഗ സ്റ്റുഡിയോ നടത്തുന്നുവെന്നും ആളുകൾക്ക് ഓൺലൈനായി ക്ലാസുകൾ ബുക്ക് ചെയ്യാൻ അനുവദിക്കണമെന്നും കരുതുക.

സന്ദർശകൻ ചെയ്യുന്നത്: സൈറ്റ് തുറക്കുന്നു, ഈ ആഴ്ചത്തെ ക്ലാസുകൾ കാണുന്നു, ഒന്നിൽ ടാപ്പ് ചെയ്യുന്നു, ലോഗിൻ ചെയ്ത് ഒരു സ്ഥലം ബുക്ക് ചെയ്യുന്നു.

അടിയിൽ നടക്കുന്നത്:

1. ഫ്രണ്ട്എൻഡ് ടൈംടേബിൾ കാണിക്കുന്നു. അത് നിറയ്ക്കാൻ, ബാക്കെൻഡിനോട് ചോദിക്കുന്നു: "ഈ ആഴ്ച ഏതൊക്കെ ക്ലാസുകളുണ്ട്, എത്ര സ്ഥലങ്ങൾ ബാക്കിയുണ്ട്?"
2. ബാക്കെൻഡ് ഡാറ്റാബേസിനോട് ക്ലാസുകൾ ചോദിക്കുകയും ഓരോന്നിന്റെയും ബുക്കിംഗുകൾ എണ്ണുകയും ചെയ്ത് ഉത്തരം നൽകുന്നു.
3. സന്ദർശകൻ Book ടാപ്പ് ചെയ്യുന്നു. ഫ്രണ്ട്എൻഡ് "ലോഗിൻ ചെയ്ത ഈ വ്യക്തിക്ക് ക്ലാസ് 42 ബുക്ക് ചെയ്യുക" എന്ന് അയക്കുന്നു.
4. ബാക്കെൻഡ് പരിശോധിക്കുന്നു: ഈ വ്യക്തി ശരിക്കും ലോഗിൻ ചെയ്തിട്ടുണ്ടോ? ക്ലാസ് നിറഞ്ഞോ? അവർ ഇതിനകം ബുക്ക് ചെയ്തിട്ടുണ്ടോ? എല്ലാം ശരിയെങ്കിൽ മാത്രം അത് ഡാറ്റാബേസിൽ പുതിയ ബുക്കിംഗ് റോ എഴുതുന്നു.
5. ബാക്കെൻഡ് "ബുക്ക് ചെയ്തു" എന്ന് മറുപടി നൽകുന്നു, ഫ്രണ്ട്എൻഡ് സ്ഥിരീകരണം കാണിക്കുന്നു.
6. പിന്നീട്, സ്റ്റുഡിയോ ഉടമ ലോഗിൻ ചെയ്ത് ക്ലാസ് ലിസ്റ്റ് കാണുന്നു. എല്ലാവരുടെയും പേരുകൾ കാണിക്കുന്നതിന് മുമ്പ് അവർ ഒരു അഡ്മിൻ ആണോ എന്ന് ബാക്കെൻഡ് പരിശോധിക്കുന്നു.

ഇത് ഫ്രണ്ട്എൻഡ് മാത്രമായി നിർമ്മിച്ചതാണെന്ന് സങ്കൽപ്പിക്കുക. ടൈംടേബിൾ കാണിച്ചേക്കാം, Book ബട്ടൺ മനോഹരമായ ഒരു ടിക്ക് കാണിച്ചേക്കാം, പക്ഷേ റീഫ്രഷ് ചെയ്യുമ്പോൾ ബുക്കിംഗ് അപ്രത്യക്ഷമാകും, "സ്ഥലങ്ങൾ ബാക്കി" എണ്ണം മറ്റെല്ലാവർക്കും തെറ്റായിരിക്കും, ഉടമ അത് ഒരിക്കലും കാണില്ല. നാലാം ഘട്ടം — പരിശോധനകൾ — പൂർണ്ണമായും ഇല്ലാതാകും. അതാണ് പ്രായോഗികമായ വ്യത്യാസം.

പ്രധാന പദങ്ങൾ

• ഫ്രണ്ട്എൻഡ് (ക്ലയന്റ് സൈഡ്): ബ്രൗസറിൽ പ്രവർത്തിക്കുന്ന ഭാഗം.
• ബാക്കെൻഡ് (സെർവർ സൈഡ്): ഒരു സെർവറിൽ പ്രവർത്തിക്കുന്ന ഭാഗം. API സെർവർ എന്നും വിളിക്കുന്നു.
• ഡാറ്റാബേസ്: ഡാറ്റ ചിട്ടപ്പെടുത്തി സൂക്ഷിക്കുന്ന സ്ഥലം. ഡാറ്റാബേസ് എന്താണെന്ന് കാണുക.
• API: ഫ്രണ്ട്എൻഡിൽ നിന്നോ മറ്റ് പ്രോഗ്രാമുകളിൽ നിന്നോ ബാക്കെൻഡ് സ്വീകരിക്കുന്ന അഭ്യർത്ഥനകളുടെ പട്ടിക.
• ഓതന്റിക്കേഷൻ: ഒരാൾ ആരാണെന്ന് പരിശോധിക്കുന്നത് (ലോഗിൻ). ഓതറൈസേഷൻ: അവർക്ക് എന്ത് ചെയ്യാം എന്ന് പരിശോധിക്കുന്നത്.
• ഡിപ്ലോയ്‌മെന്റ്: പൊതുജനങ്ങൾക്ക് ഉപയോഗിക്കാൻ എല്ലാ ലെയറുകളും സെർവറുകളിൽ സ്ഥാപിക്കുന്നത്.
• മോണോലിത്ത് vs സർവീസുകൾ: എല്ലാം ചെയ്യുന്ന ഒരൊറ്റ പ്രോഗ്രാം, അല്ലെങ്കിൽ പല ചെറിയ പ്രോഗ്രാമുകൾ (ഉദാഹരണത്തിന് ഒരു വെബ്‌സൈറ്റും പ്രത്യേക API-യും). രണ്ടും ഫുൾ-സ്റ്റാക്ക് ആണ്.

സാധാരണ തെറ്റുകളും തെറ്റിദ്ധാരണകളും

• "ഇത് പൂർത്തിയായതായി കാണുന്നു, അതിനാൽ പൂർത്തിയായി." സാമ്പിൾ ഡാറ്റയും പ്രവർത്തിക്കുന്നതായി തോന്നുന്ന ബട്ടണും സേവ് ചെയ്ത ഡാറ്റയ്ക്ക് തുല്യമല്ല. പേജ് റീഫ്രഷ് ചെയ്യുക, ഒരു പ്രൈവറ്റ് വിൻഡോയിൽ തുറക്കുക, ഡാറ്റ ഇപ്പോഴും ഉണ്ടോ എന്ന് പരിശോധിക്കുക.
• നിയമങ്ങൾ ഫ്രണ്ട്എൻഡിൽ ഇടുന്നത്. ഒരു ബട്ടൺ ഒളിപ്പിക്കുന്നത് സുരക്ഷയല്ല. ബാക്കെൻഡ് പരിശോധിച്ചില്ലെങ്കിൽ, അഭ്യർത്ഥന അറിയുന്ന ആർക്കും അത് അയക്കാം.
• രഹസ്യ കീകൾ ഫ്രണ്ട്എൻഡിൽ ഇടുന്നത്. ബ്രൗസർ കോഡിൽ ഒരു പേയ്‌മെന്റ് അല്ലെങ്കിൽ AI പ്രൊവൈഡർ കീ ഓരോ സന്ദർശകനും വായിക്കാം. കീകൾ ബാക്കെൻഡിൽ, എൻവയോൺമെന്റ് വേരിയബിളുകളിൽ ആയിരിക്കണം — എൻവയോൺമെന്റ് വേരിയബിളുകളും സീക്രട്ടുകളും കാണുക.
• ഫുൾ-സ്റ്റാക്ക് എന്നാൽ സങ്കീർണ്ണം എന്ന് കരുതുന്നത്. ഒരു ചെറിയ ഫുൾ-സ്റ്റാക്ക് ആപ്പിൽ കുറച്ച് സ്ക്രീനുകളും ഏതാനും ബാക്കെൻഡ് റൂട്ടുകളും മൂന്ന് ഡാറ്റാബേസ് ടേബിളുകളും മാത്രമേ ഉണ്ടാകൂ. അത് ലെയറുകളുടെ വിവരണമാണ്, വലുപ്പമല്ല.
• എല്ലാ സാങ്കേതികവിദ്യയും സ്വയം തിരഞ്ഞെടുക്കണം എന്ന് കരുതുന്നത്. ആദ്യ പതിപ്പിന് വ്യാപകമായി ഉപയോഗിക്കുന്ന ഏത് യുക്തിസഹമായ സ്റ്റാക്കും മതിയാകും. ഡാറ്റയുടെയും നിയമങ്ങളുടെയും വ്യക്തമായ വിവരണമാണ് കൂടുതൽ പ്രധാനം.

നിങ്ങളുടെ AI ബിൽഡറോട് എന്ത് ചോദിക്കണം

ലെയറുകളുടെ പേരുകൾ പറഞ്ഞില്ലെങ്കിലും, മൂന്ന് ലെയറുകളുടെ അടിസ്ഥാനത്തിൽ ആപ്പ് വിവരിക്കുക:

• ഡാറ്റ: "ക്ലാസുകൾ (പേര്, സമയം, ശേഷി), ബുക്കിംഗുകൾ (ക്ലാസ്, വ്യക്തി, ബുക്ക് ചെയ്ത സമയം) ഒരു ഡാറ്റാബേസിൽ സൂക്ഷിക്കുക."
• നിയമങ്ങൾ: "ശേഷിക്കപ്പുറം ഒരു ക്ലാസും ബുക്ക് ചെയ്യാൻ കഴിയരുത്. ഒരാൾക്ക് ഒരു ക്ലാസ് ഒരു തവണ മാത്രമേ ബുക്ക് ചെയ്യാനാകൂ. ആരാണ് ബുക്ക് ചെയ്തതെന്ന് അഡ്മിനുകൾക്ക് മാത്രം കാണാം."
• സ്ക്രീനുകൾ: "ആഴ്ചതോറുമുള്ള ടൈംടേബിൾ, ബുക്കിംഗ് സ്ഥിരീകരണം, ഓരോ ക്ലാസിനും ബുക്കിംഗുകൾ ലിസ്റ്റ് ചെയ്യുന്ന ഒരു അഡ്മിൻ പേജ്."
• പരിശോധനകൾ: "ഈ നിയമങ്ങൾ പേജിൽ മാത്രമല്ല, സെർവറിൽ നടപ്പാക്കുക. API കീകൾ സെർവറിൽ സൂക്ഷിക്കുക."

പിന്നെ ഒരു സംശയാലുവിനെപ്പോലെ പരീക്ഷിക്കുക: റീഫ്രഷ് ചെയ്യുക, രണ്ട് വ്യത്യസ്ത ആളുകളായി സൈൻ ഇൻ ചെയ്യുക, കാണാൻ പാടില്ലാത്ത ഡാറ്റ കാണാൻ ശ്രമിക്കുക. AI ഉപയോഗിച്ച് ആപ്പ് നിർമ്മിക്കുന്നത് എങ്ങനെ എന്ന ഗൈഡ് ഈ ചക്രം ആദ്യം മുതൽ അവസാനം വരെ വിവരിക്കുന്നു.

Mythex-ലെ ഫുൾ-സ്റ്റാക്ക് ആപ്പുകൾ

ചാറ്റിലെ ഒരു വിവരണത്തിൽ നിന്ന് Mythex ഫുൾ-സ്റ്റാക്ക് വെബ് ആപ്പുകൾ നിർമ്മിക്കുന്നു. സാധാരണയായി ഒരു പുതിയ ആപ്പിന് React, TypeScript ഫ്രണ്ട്എൻഡ് ലഭിക്കുന്നു; ആപ്പിന് ഡാറ്റ സേവ് ചെയ്യേണ്ടിവരുമ്പോൾ, Mythex പ്രോജക്റ്റിൽ ഒരു പ്രത്യേക Postgres ഡാറ്റാബേസ് ചേർക്കുന്നു, വെബ്‌സൈറ്റിനൊപ്പം വേറൊരു API സെർവറും (ഉദാഹരണത്തിന് Python, Node, C# അല്ലെങ്കിൽ Java) ആവശ്യപ്പെടാം. എല്ലാം ഒരുമിച്ച് ലൈവ് പ്രിവ്യൂവിൽ പ്രവർത്തിക്കുകയും ഒരു പൊതു URL-ലേക്ക് പബ്ലിഷ് ചെയ്യുകയും ചെയ്യുന്നു. ഒരു വെബ്‌സൈറ്റും API-യും ഒരുമിച്ച് പ്രിവ്യൂ ചെയ്യുകയും പബ്ലിഷ് ചെയ്യുകയും ചെയ്യുന്നത് മൾട്ടി-സർവീസ് ആപ്പുകൾ ഡോക്സ് പേജ് കാണിക്കുന്നു, കൂടാതെ ഫുൾ-സ്റ്റാക്ക് ആപ്പ് ബിൽഡർ പേജിൽ തുടക്കത്തിനുള്ള ആശയങ്ങളുണ്ട്.

ചോദ്യങ്ങൾ