# ബാങ്കിംഗ് ആപ്പ് നിർമ്മിക്കൽ ഭാഗം 3: ഡാറ്റ സ്വീകരിക്കുകയും ഉപയോഗിക്കുകയും ചെയ്യാനുള്ള രീതികൾ സ്റ്റാർ ട്രെക്കിലെ എന്റർപ്രൈസിന്റെ കമ്പ്യൂട്ടർ ചിന്തിക്കുക - ക്യാപ്റ്റൻ പिकार്ഡ് കപ്പൽ നിലവ് ചോദിച്ചാൽ, സമ്പൂർണ ഇന്റർഫേസ് അടച്ച് പുനഃസംഘടിപ്പിക്കാതെ ഉടൻ തന്നെ വിവരം പ്രത്യക്ഷപ്പെടുന്നു. ഈ സുതാര്യമായ വിവര പ്രവാഹം ആണ് നാം ഇവിടെ ഡയനാമിക് ഡാറ്റ ഫെച്ചിംഗിലൂടെ നിർമ്മിക്കുന്നത്. ഇപ്പോൾ, നിങ്ങളുടെ ബാങ്കിംഗ് ആപ്പ് അച്ചടിച്ച ന്യൂസ്‌പേപ്പർ പോലെയാണ് - വിവരപ്രദമായിരുന്നാലും സ്റ്റാറ്റിക് ആണ്. നാം ഇത് NASAയിലെ മിഷൺ കൺട്രോളിനെ പോലെ മാറ്റാൻ പോകുന്നു, എവിടെ ഡാറ്റ കൃത്യസമയം വ്യത്യസ്തമായി ഒഴുകി ഉപയോക്താവിന്റെ പ്രവാഹം തടസ്സപ്പെടുത്താതെ പുതുക്കുന്നു. നിങ്ങൾ സർവർസുമായി അസിങ്ക്രോണസ് ആയി ആശയവിനിമയം ചെയ്യാൻ, വ്യത്യസ്ത സമയങ്ങളിൽ ലഭിക്കുന്ന ഡാറ്റ കൈകാര്യം ചെയ്യാൻ, അവയെ അർത്ഥവത്തായ വിവരങ്ങളായി മാറ്റാൻ പഠിക്കും. ഇത് ഡെമോയും പ്രൊഡക്ഷൻ റെഡി സോഫ്റ്റ്‌വെയറിനുമിടയിലെ വ്യത്യാസം ആണ്. ## ⚡ അടുത്ത 5 മിനിറ്റിൽ നിങ്ങൾ ചെയ്യാൻ കഴിയുന്നത് **നിശ്ചിത സമയമുള്ള ഡെവലപ്പർമാർക്കുള്ള ക്വിക്ക് സ്റ്റാർട്ട് മാർഗ്ഗം** ```mermaid flowchart LR A[⚡ 5 മിനിറ്റ്] --> B[API സർവർ സജ്ജീകരിക്കുക] B --> C[curl ഉപയോഗിച്ച് ഫച്ച് പരിശോധിക്കുക] C --> D[ലോഗിൻ ഫങ്ഷൻ സൃഷ്ടിക്കുക] D --> E[ഡാറ്റ പ്രവർത്തനത്തിൽ കാണുക] ``` - **മിനിറ്റ് 1-2**: നിങ്ങളുടെ API സർവർ ആരംഭിക്കുക (`cd api && npm start`)യും കണക്ഷൻ പരിശോധിക്കുക - **മിനിറ്റ് 3**: fetch ഉപയോഗിച്ച് ഒരു അടിസ്ഥാന `getAccount()` ഫങ്ഷൻ സൃഷ്ടിക്കുക - **മിനിറ്റ് 4**: login ഫോമിൽ `action="javascript:login()"` വയർ ചെയ്യുക - **മിനിറ്റ് 5**: ലോഗിൻ പരീക്ഷിച്ച് അക്കൗന്റ് ഡാറ്റ കൺസോളിൽ പ്രത്യക്ഷപ്പെടുന്നത് കാണുക **ക്വിക്ക് ടെസ്റ്റ് കമാൻഡുകൾ**: ```bash # API പ്രവർത്തിക്കുന്നുണ്ടെന്ന് സൂചിപ്പിക്കുക curl http://localhost:5000/api # അക്കൗണ്ട് ഡാറ്റ എടുത്ത് പരിശോധിക്കുക curl http://localhost:5000/api/accounts/test ``` **ഇത് എവിടെ പ്രയോജനപ്പെടുന്നു**: 5 മിനിറ്റിനുള്ളിൽ, പരസ്പരം കാത്തു നിൽക്കാതെ ഡാറ്റ സ്വീകരിക്കുന്ന അസിങ്ക്രോണസ് ഫെച്ചിംഗിന്റെ മായാജാലം നിങ്ങള് കാണും. ഇത് എല്ലാ ആധുനിക വെബ് ആപ്പുകൾക്ക് പ്രതികരണശീലവും സജീവതയും നൽകുന്ന അടിസ്ഥാനം ആണ്. ## 🗺️ ഡാറ്റാ-ഓര്യൻറഡ് വെബ് ആപ്പുകളുടെ നിങ്ങളുടെ പഠനയാത്ര ```mermaid journey title സ്റ്റാറ്റിക് പേജുകളിൽ നിന്നുള്ള ഡൈനാമിക് ആപ്ലിക്കേഷനുകളിലേക്കുo section വികാസം മനസിലാക്കൽ പരമ്പരാഗത പേജ് റീലോഡുകൾ: 3: You AJAX/SPA ലാഭങ്ങൾ കണ്ടെത്തൽ: 5: You Fetch API മാതൃകകൾ കൈകാര്യം ചെയ്യൽ: 7: You section ഓതന്റിക്കേഷൻ നിർമ്മാണം ലോഗിൻ ഫംഗ്ഷനുകൾ സൃഷ്ടിക്കൽ: 4: You അസിങ്ക് പ്രവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യൽ: 6: You ഉപയോക്തൃ സെഷനുകൾ നിയന്ത്രണം: 8: You section ഡൈനാമിക് UI അപ്‌ഡേറ്റുകൾ DOM മാനിപ്പുലേഷൻ പഠനം: 5: You ട്രാൻസാക്ഷൻ പ്രദർശനങ്ങൾ സൃഷ്ടിക്കൽ: 7: You പ്രതികരണപരമായ ഡാഷ്ബോർഡുകൾ സൃഷ്ടിക്കൽ: 9: You section പ്രൊഫഷണൽ മാതൃകകൾ ടെംപ്ലേറ്റ് അധിഷ്ഠിത റൻഡറിംഗ്: 6: You പിശക് കൈകാര്യം ചെയ്യുന്ന തന്ത്രങ്ങൾ: 7: You പ്രകടന മെച്ചപ്പെടുത്തൽ: 8: You ``` **നിങ്ങളുടെ പഠനലക്ഷ്യം**: ഈ പാഠം പൂര്‍ത്തിയാക്കുമ്പോൾ, ആധുനിക വെബ് ആപ്പുകൾ ഡാറ്റ എങ്ങനെ ഫെച്ച് ചെയ്ത് പ്രോസസ്സ് ചെയ്ത് ഗുണമേന്മയുള്ള ഉപയോക്തൃാനുഭവങ്ങൾ സൃഷ്ടിക്കുന്നുവെന്ന് നിങ്ങൾ മനസ്സിലാക്കും. ## പ്രിലക്ചർ ക്വിസ് [Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/45) ### മുൻകൂട്ടി requisito കളും ഡാറ്റ ഫെച്ചിയ്ക്ക് മുമ്പ്, ഈ ഘടകങ്ങൾ തയ്യാറാക്കുക: - **മുൻപത്തെ പാഠം**: [Login and Registration Form](../2-forms/README.md) പൂർത്തിയാക്കിയിരിക്കണം - ഇതിൽ നിന്ന് തുടർച്ചയായും നിർമ്മിക്കാം - **ലോകൽ സർവർ**: [Node.js](https://nodejs.org) ഇൻസ്റ്റാൾ ചെയ്ത് [API സർവർ](../api/README.md) റൺ ചെയ്യുക, അക്കൗണ്ട് ഡാറ്റ ലഭ്യമാക്കാൻ - **API കണക്ഷൻ**: താഴെയുള്ള കമാൻഡ് ഉപയോഗിച്ച് സർവർ കണക്ഷൻ പരിശോധിക്കുക: ```bash curl http://localhost:5000/api # പ്രതീക്ഷിക്കുന്ന പ്രതികരണം: "ബാങ്ക് API v1.0.0" ``` ഈ ക്വിക് ടെസ്റ്റ് എല്ലാ ഘടകങ്ങളും ശരിയായി കമ്മ്യൂണിക്കേറ്റ് ചെയ്യുന്നതാണ് ഉറപ്പാക്കുന്നത്: - നിങ്ങളുടെ സിസ്റ്റത്തിൽ Node.js ശരിയായി പ്രവർത്തിക്കുന്നുവെന്ന് സ്ഥിരീകരിക്കുന്നു - API സർവർ സജീവവും പ്രതികരിക്കുകയുമാണ് - നിങ്ങളുടെ ആപ്പ് സർവറിനെ എത്താൻ കഴിയുന്നു (മിഷനിനു മുൻപ് റേഡിയോ കോൺടാക്റ്റ് പരിശോധിക്കുന്നതുപോലെ) ## 🧠 ഡാറ്റ മാനേജ്‌മെന്റ് പരിസ്ഥിതി അവലോകനം ```mermaid mindmap root((ഡാറ്റ മാനേജ്മെന്റ്)) Authentication Flow Login Process ഫോമിന്റെ പരിശോധന ക്രെഡൻഷ്യൽ പരിശോധന സെഷൻ മാനേജ്മെന്റ് User State ഗ്ലോബൽ അക്കൗണ്ട് ഒബ്ജക്റ്റ് നാവിഗേഷൻ ഗാർഡുകൾ പിശക് കൈകാര്യം ചെയ്യൽ API Communication Fetch Patterns GET അഭ്യർത്ഥനകൾ POST അഭ്യർത്ഥനകൾ പിശക് പ്രതികരണങ്ങൾ Data Formats JSON പ്രോസസ്സിങ്ങ് URL എൻകോഡിംഗ് പ്രതികരണം പാഴ്സിംഗ് Dynamic UI Updates DOM Manipulation സുരക്ഷിത ടെക്‌സ്‌റ്റ് അപ്ഡേറ്റുകൾ ഘടക നിർമ്മാണം ടെംപ്ലേറ്റ് ക്ലോണിങ് User Experience റിയൽ ടൈം അപ്ഡേറ്റുകൾ പിശക് സന്ദേശങ്ങൾ ലോഡിംഗ് സ്റ്റേറ്റുകൾ Security Considerations XSS Prevention textContent ഉപയോഗം ഇൻപുട്ട് ശുദ്ധീകരണം സുരക്ഷിത HTML സൃഷ്ടി CORS Handling ക്രോസ്-ഒറിജിൻ അഭ്യർത്ഥനകൾ ഹെഡർ കോൺഫിഗറേഷൻ ഡെവലപ്പ്മെന്റ് സെറ്റപ്പ് ``` **മുല്യവദ്ധി പ്രിൻസിപ്പിൾ**: ആധുനിക വെബ് ആപ്പുകൾ ഡാറ്റ സംഘാടക സംവിധാനങ്ങളാണ് - ഉപയോക്തൃ ഇന്റർഫേസുകൾ, സർവർ APIകൾ, ബ്രൗസർ സെക്യൂരിറ്റി മോഡലുകൾ എന്നിവ തമ്മിൽ ഏകോപിപ്പിച്ചും സുതാര്യവും പ്രതികരണക്ഷമവുമായ അനുഭവങ്ങൾ സൃഷ്ടിക്കുന്നു. --- ## ആധുനിക വെബ് ആപ്പുകളിൽ ഡാറ്റ ഫെച്ചിംഗ് മനസ്സിലാക്കുക കഴിഞ്ഞ ഇരുപതു വർഷത്തിലേയ്ക്ക് വെബ് ആപ്പുകൾ ഡാറ്റ കൈകാര്യം ചെയ്യാനുള്ള രീതി നाटകീയമായി മാറിയിട്ടുണ്ട്. ഈ പരിണാമം മനസ്സിലാക്കുന്നത് AJAX, Fetch API തുടങ്ങിയ ആധുനിക സാങ്കേതിക വിദ്യകൾ എത്രത്തോളം ശക്തമാണെന്ന് നിങ്ങളെ അറിഞ്ഞുതരാനാണ് സഹായിക്കുക. പരമ്പരാഗത വെബ്സൈറ്റുകൾ എങ്ങനെ പ്രവർത്തിച്ചിരുന്നുവെന്ന് കൊള്ളാം സയതിദ്ധാർഥമായി ഇന്ന് നാം നിർമ്മിക്കുന്ന ഡൈനാമിക്, പ്രതികരണക്ഷമ ആപ്പുകൾക്ക് എതിരെ. ### പരമ്പരാഗത മൾട്ടി-പേജ് ആപ്ലിക്കേഷനുകൾ (MPA) പഴയ വെബിലെ എല്ലാ ക്ലിക്കുകളും പഴയ ഒരു ടിവി ചാനല് മാറ്റുന്നത് പോലെ ആയിരുന്നു - സ്‌ക്രീൻ ശൂന്യം ആക്കി പിന്നെ പുതിയ ഉള്ളടക്കം ട്യൂൺ ചെയ്‌തു. ഇതായിരുന്നു തുടക്കകാല വെബ് ആപ്പുകളുടെ യാഥാർത്ഥ്യം, ഓരോ ഇന്ററാക്ഷനും പേജിന്റെ മുഴുവൻ ഭാഗം പുനഃസംഘടിപ്പിക്കുന്നത് നിർബന്ധമായിരുന്നു. ```mermaid sequenceDiagram participant User participant Browser participant Server User->>Browser: ലിങ്ക് ക്ലിക്കുചെയ്യുന്നു അല്ലെങ്കിൽ ഫോമിൽ സമർപ്പിക്കുന്നു Browser->>Server: പുതിയ HTML പേജ് അഭ്യർത്ഥിക്കുന്നു Note over Browser: പേജ് ശൂന്യമായി മാറുന്നു Server->>Browser: പൂർണ്ണമായ HTML പേജ് തിരിച്ചുവരിക്കുന്നു Browser->>User: പുതിയ പേജ് പ്രദർശിപ്പിക്കുന്നു (ഫ്ലാഷ്/പുതുക്കൽ) ``` ![മൾട്ടി-പേജ് ആപ്പിലെ അപ്ഡേറ്റ് പ്രവാഹം](../../../../translated_images/ml/mpa.7f7375a1a2d4aa77.webp) **ഇപ്പോൾ ഈ രീതിയെന്തുകൊണ്ട് ബുദ്ധിമുട്ടായി തോന്നി:** - ഓരോ ക്ലിക്കിനും പേജ് മുഴുവൻ പുനർനിർമ്മണം വേണമെന്ന് ആവശ്യപ്പെട്ടു - ഉപയോക്താക്കൾ വിചാരത്തിലെ ഇടവേളകൾക്ക് പേജിന്റെ അപ്രത്യക്ഷമായ പടങ്ങൾ കൊണ്ട് ഇടപെട്ടു - നിങ്ങൾക് ഒരേ ഹെഡറും ഫൂട്ടറും നാനൂറു തവണ ഡൗൺലോഡ് ചെയ്യേണ്ടിവന്നു - ആപ്പുകൾ സോഫ്റ്റ്‌വെയർ ഉപയോഗിക്കാതെ ഫയൽ കാബിനറ്റ് വഴിയുള്ള ക്ലിക്കുകളായിരുന്നു ### ആധുനിക സിംഗിൾ-പേജ് ആപ്ലിക്കേഷനുകൾ (SPA) AJAX (Asynchronous JavaScript and XML) ഈ പാരഡൈം പൂർണമായി മാറ്റി കളഞ്ഞു. അന്താരാഷ്ട്ര സ്പേസ് സ്റ്റേഷനിലെ മോഡൂളാർ ഡിസൈൻ പോലെ, അവിടെ ഒരു ഘടകം പുനഃസംഘടിപ്പിക്കാതെ മാറ്റാൻ സാധിക്കുന്നത് പോലെയാണ് AJAX വെബ്പേജിന്റെ പ്രത്യേക ഭാഗങ്ങൾ അപ്ഡേറ്റ് ചെയ്യാൻ അനുവദിക്കുന്നത്. XML എന്ന് പേര് പറയുന്നുവെങ്കിലും, ഇന്ന് JSON ആണ് കൂടുതലായി ഉപയോഗിക്കുന്നത്, എന്നാൽ പ്രിൻസിപ്പിൾ ഒറ്റ - ഈ മാറ്റങ്ങൾ മാത്രം പുതുക്കുക എന്നതാണ്. ```mermaid sequenceDiagram participant User participant Browser participant JavaScript participant Server User->>Browser: പേജ് പാരസ്പര്യവത്‌ക്കരിക്കുന്നു Browser->>JavaScript: ഇവന്റ് ഹാൻഡ്ലർ ട്രിഗർ ചെയ്യുന്നു JavaScript->>Server: ആവശ്യമായ ഡാറ്റ മാത്രം നേടുന്നു Server->>JavaScript: JSON ഡാറ്റ മടക്കുന്നു JavaScript->>Browser: പ്രത്യേക പേജ് ഘടകങ്ങൾ അപ്‌ഡേറ്റ് ചെയ്യുന്നു Browser->>User: അപ്‌ഡേറ്റു ചെയ്‌ത ഉള്ളടക്കം കാണിക്കുന്നു (റീലോഡ് ഇല്ലാതെ) ``` ![സിംഗിൾ-പേജ് ആപ്പിലെ അപ്ഡേറ്റ് പ്രവാഹം](../../../../translated_images/ml/spa.268ec73b41f992c2.webp) **SPAകൾക്ക് ഇത് എവിടെ ഫണ്ട് നൽകുന്നു:** - വെറും മാറ്റപ്പെട്ട ഭാഗങ്ങൾ മാത്രം പുതുക്കുന്നു (അർത്ഥശാസ്ത്രപരമായ രീതിയിലാണ്) - കടുത്ത ഇടപെടലുകൾ ഇല്ല - ഉപയോക്താക്കൾ പിന്തുടർന്ന് ഇരിക്കാം - നെറ്റ്വർക്ക് വഴി കുറഞ്ഞ ഡാറ്റയൊഴുകുന്നു, അത്കൊണ്ട് ലോഡ് സമയവും കുറഞ്ഞു - അപ്ലിക്കേഷനുകൾ നിങ്ങളുടെ ഫോണിലേതുപോലെ പെട്ടെന്ന് പ്രതികരിക്കുന്നു ### ആധുനിക Fetch API യിലേക്ക് പരിണാമം ആധുനിക ബ്രൗസറുകൾ [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API) നൽകുന്നു, ഇത് പഴയ [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)നെ മാറ്റിവെക്കുന്നു. ടെലിഗ്രാഫ് പ്രവർത്തിപ്പിക്കുന്നതിനും ഇമെയിൽ ഉപയോഗിക്കുന്നതിനുമിടയിലെ വ്യത്യാസം പോലെയാണ്, Fetch API വാഗ്ദാനങ്ങൾ ഉപയോഗിച്ച് അസിങ്ക്രോണസ് കോഡ് ക്ലീനാക്കുകയും JSON നേരിട്ട് കൈകാര്യം ചെയ്യുകയും ചെയ്യുന്നു. | സവിശേഷത | XMLHttpRequest | Fetch API | |---------|----------------|----------| | **സിന്താക്‌സ്** | കോംപ്ലക്സായ കാൾബാക്ക് ശക്തി | ക്ലീനായ വാഗ്ദാനം അടിസ്ഥാനമാക്കി | | **JSON കൈകാര്യം** | മാനുവൽ പാർസിങ് വേണം | ഓഫ്ഷണായി `.json()` മെത്തിൽ ഉണ്ട | | **പിശക് കൈകാര്യം** | പരിമിതമായ പിശക് വിവരങ്ങൾ | വിപുലമായ പിശക് വിശദാംശങ്ങൾ | | **ആധുനിക പിന്തുണ** | പഴയ വെർഷനുകൾക്കും | ES6+ വാഗ്ദാനങ്ങളും async/await ഉപയോഗവും | > 💡 **ബ്രൗസർ പൊരുത്തക്കേട്**: നല്ല വാർത്ത - Fetch API ആധുനിക എല്ലാ ബ്രൗസറുകളിലും പ്രവർത്തിക്കുന്നു! പ്രത്യേക പതിപ്പുകൾക്ക് [caniuse.com](https://caniuse.com/fetch) വഴി മുഴുവൻ പൊരുത്തക്കേട് അറിയാം. > **താഴെ സാരാംശം:** - ക്രോം, ഫയർഫോക്സ്, സ്വിഫ്റ്റ്, എഡ്ജ് മുഴുവനും പ്രവർത്തിക്കുന്നു (ഉപയോക്താക്കൾക്കിടയിൽ അടിവസ്ത്രമാകുന്നു) - ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ മാത്രമാണ് കൂടുതൽ സഹായം ആവശ്യപ്പെടുന്നത് (ഇപ്പോൾ IE വിടേണ്ട സമയമായിരിക്കുന്നു) - പിന്നീട് ഉപയോഗിക്കുന്ന async/await പാറ്റേണുകളിലേക്ക് മികച്ച തുടക്കം നൽകുന്നു ### ഉപയോക്തൃ ലോഗിൻ এবং ഡാറ്റ റിറ്റ്രീവൽ നടപ്പിലാക്കൽ ഇപ്പോൾ നിങ്ങളുടെ ബാങ്കിംഗ് ആപ്പ് സ്റ്റാറ്റിക് ഡിസ്പ്ലേയിൽ നിന്നു പ്രവർത്തനക്ഷമ ആപ്പായി മാറ്റുന്ന ലോഗിൻ സിസ്റ്റം നടപ്പിലാക്കാം. സൈനിക സുരക്ഷാ സൗകര്യങ്ങളിൽ ഉപയോഗിക്കുന്ന ഉറപ്പ് പ്രോട്ടോക്കോളുകൾ പോലെയാണ് നാം ഉപയോക്തൃ ക്രെഡൻഷ്യലുകൾ ശരിയായതായി പരിശോധിച്ച് അവരുടേതായ ഡാറ്റ നൽകുക. നാം ഇത് ക്രമേണ നിർമ്മിക്കുക, ആദ്യം അടിസ്ഥാന പഠനപരമായ മുറികൾ ഉണ്ടാക്കി പിന്നെ ഡാറ്റ ഫെച്ചിങ് പ്രവർത്തനമാണ് കൂട്ടുക. #### ഘട്ടം 1: ലോഗിൻ ഫങ്ഷന്റെ അടിസ്ഥാനം സൃഷ്ടിക്കുക നിങ്ങളുടെ `app.js` ഫയൽ തുറന്ന് പുതിയ `login` ഫങ്ഷൻ ചേർക്കുക. ഇത് ഉപയോക്തൃ സ്ഥിരീകരണം കൈകാര്യം ചെയ്യും: ```javascript async function login() { const loginForm = document.getElementById('loginForm'); const user = loginForm.user.value; } ``` **ഇത് വിശദീകരിക്കുന്നു:** - ആ `async` കീവേഡ് എന്തിന്? — ജാവാസ്‌ക്രിപ്റ്റിന് "ഈ ഫങ്ഷൻ കാത്തിരിക്കേണ്ടി വരാം" എന്ന് പറയുകയായിരുന്നു - ഫോം പേജ് നിന്നും പിടിക്കുന്നു (സ്വാഭാവികമായും, ID ഉപയോഗിച്ച്) - പിന്നീട് ഉപയോക്താവ് എഴുതിയ ഉപയോക്തൃനാമം നേടുന്നു - നന്നായൊരു മാർഗം: നിങ്ങളുടെ ഫോമിലെ ഏതെങ്കിലും ഇൻപുട്ട് `name` ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് നേരിട്ട് ആക്‌സസ് ചെയ്യാം - getElementById ആവശ്യം ഇല്ല! > 💡 **ഫോമിൽ ആക്‌സസ് ചെയ്യാനുള്ള മാതൃക**: ഓരോ ഫോമിന്റെ കൺട്രോൾ നീങ്ങുന്നിടത്ത് `name` ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് അതിന്റെ പ്രോപ്പർട്ടിയായി ആക്‌സസ് ചെയ്യാം. ഇത് ക്ലിയർ, വായിക്കാൻ സുഖമുള്ള മാർഗമാണ്. #### ഘട്ടം 2: അക്കൗണ്ട് ഡാറ്റ ഫെച്ചിങ് ഫങ്ഷൻ സൃഷ്ടിക്കുക അടുത്തതായി, സെർവർ നിന്ന് അക്കൗണ്ട് ഡാറ്റ സ്വീകരിക്കാൻ പ്രത്യേകം ഒരു ഫങ്ഷൻ നിർമ്മിക്കാം. ഇത് മുൻപ് ചെയ്ത രജിസ്ട്രേഷൻ ഫങ്ഷന്റെ പോലെ തന്നെ ആഗിരണം ചെയ്യുന്നു, പക്ഷേ ഡാറ്റ റിട്ട്രീവലിൽ കേന്ദ്രീകരിക്കുന്നു: ```javascript async function getAccount(user) { try { const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user)); return await response.json(); } catch (error) { return { error: error.message || 'Unknown error' }; } } ``` **ഈ കോഡ് നേടുന്നത്:** - ആധുനിക `fetch` API ഉപയോഗിച്ച് അസിങ്ക്രോണസ് ഡാറ്റ അഭ്യർത്ഥിക്കുന്നു - ഉപയോക്തൃനാമം പാരാമീറ്ററായി ഉൾപ്പെടുത്തി GET അഭ്യർത്ഥന URL നിർമ്മിക്കുന്നു - URLs ൽ സ്പെഷ്യൽ കരക്ടറുകൾ സുരക്ഷിതമായി കൈകാര്യം ചെയ്യാൻ `encodeURIComponent()` ഉപയോഗിക്കുന്നു - ജോൺസൺ ഫോർമാറ്റിലേക്ക് മറിക്കുന്നു - പിശകുകൾ മെനജ്മെന്റ് gracefully ചെയ്ത് പോലും എറർ ഒബ്ജക്ട് തിരിച്ചുവിടുന്നു > ⚠️ **സുരക്ഷാ നോട്ടീസ്**: `encodeURIComponent()`funkചൻ URLs ൽ പ്രത്യേക ചിഹ്നങ്ങൾ "#", "&" തുടങ്ങിയവ തെറ്റായി വ്യാഖ്യാനിക്കുന്നതിൽ നിന്നും സംരക്ഷിക്കുന്നു. കപ്പലിൽ നാവിക ആശയവിനിമയം പോലെ, സന്ദേശം നിശ്ചിതമായ രൂപത്തിൽ എത്തിക്കുന്നതു ഉറപ്പാക്കുന്നു. > **ഇത് എന്തുകൊണ്ട് പ്രസക്തമാണ്:** - URLs പൊളിക്കാൻ പ്രത്യേക ഗ്രതികൾ തടയുന്നു - URL മാൻപുലേഷൻ അറ്റാക്കുകളിൽ നിന്നും സംരക്ഷിക്കുന്നു - നിങ്ങളുടെ സർവർ തദ്ദേശീയ ഡാറ്റ ലഭിക്കും - സുരക്ഷിത കോഡിങ്ങ് പ്രാക്ടീസുകൾ പിന്തുടരുന്നു #### HTTP GET അഭ്യർത്ഥനകൾ മനസ്സിലാക്കുക നിങ്ങൾ `fetch` ഏതെങ്കിലും അധിക ഓപ്ഷനുകൾ ഇല്ലാതെ ഉപയോഗിക്കുമ്പോൾ, അത് തനിക്കും [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) അഭ്യർത്ഥന സൃഷ്ടിക്കുന്നു. ഇത് നമ്മുടെ ആവശ്യത്തിനോട് വളരെ അനുയോജ്യമാണ് - "നിൻ്റെ ഉപയോക്തൃ അക്കൗണ്ട് ഡാറ്റ കാണാമോ?" എന്നാണ് സർവറിനെ ചോദിക്കുന്നത്. GET അഭ്യർത്ഥനകൾ ഒരു ലൈബ്രറിയിൽ നിന്നു പുസ്തകം കടം എടുക്കുന്നതുപോലെയാണ് - മുമ്പ് തന്നെ ഉള്ളതുള്ളത് കാണണമെന്ന്. POST അഭ്യർത്ഥനകൾ (നാം രജിസ്ട്രേഷനിൽ ഉപയോഗിച്ചത്) പുതിയ പുസ്തകം ഒരു ശേഖരത്തിലേക്ക് അയക്കുന്നതാണ്. | GET അഭ്യർത്ഥന | POST അഭ്യർത്ഥന | |-------------|-------------| | **ഉദ്ദേശ്യം** | നിലവിലുള്ള ഡാറ്റ വീണ്ടെടുക്കുക | പുതിയ ഡാറ്റ സർവറിലേക്ക് അയയ്ക്കുക | | **പാരാമീറ്റർ** | URL പാത്തിലും ക്വറി സ്ട്രിംഗിലും | അഭ്യർത്ഥന ബോഡിയിലായുള്ളത് | | **കാഷിംഗ്** | ബ്രൗസറുകൾ കാഷ് ചെയ്യാം | സാധാരണ കാഷിംഗ് ആവശ്യമില്ല | | **സുരക്ഷ** | URL / ലോഗിൽ ദൃശ്യമാകും | അഭ്യർത്ഥന ബോഡിയിൽ ദൃശ്യമല്ല | ```mermaid sequenceDiagram participant B as ബ്രൗസർ participant S as സെർവർ Note over B,S: GET അഭ്യർത്ഥന (ഡേറ്റാ വീണ്ടെടുക്കൽ) B->>S: GET /api/accounts/test S-->>B: 200 OK + അക്കൗണ്ട് ഡേറ്റ Note over B,S: POST അഭ്യർത്ഥന (ഡേറ്റാ സമർപ്പണം) B->>S: POST /api/accounts + പുതിയ അക്കൗണ്ട് ഡേറ്റ S-->>B: 201 സൃഷ്ടി സ്ഥിരീകരണം Note over B,S: പിശക് കൈകാര്യം ചെയ്യൽ B->>S: GET /api/accounts/nonexistent S-->>B: 404 കണ്ടെത്തിയില്ല + പിശക് സന്ദേശം ``` #### ഘട്ടം 3: എല്ലാം ചേർക്കുന്നു ഇപ്പോൾ രസകരമായ ഭാഗം - നിങ്ങളുടെ അക്കൗണ്ട് ഫെച്ചിംഗ് ഫങ്ഷനെ ലോഗിൻ പ്രക്രിയയുമായി ബന്ധിപ്പിക്കുക. എല്ലാം പാടലമായി പൊരുത്തപ്പെടുന്നിടം: ```javascript async function login() { const loginForm = document.getElementById('loginForm'); const user = loginForm.user.value; const data = await getAccount(user); if (data.error) { return console.log('loginError', data.error); } account = data; navigate('/dashboard'); } ``` ഈ ഫങ്ഷൻ ഒരു കൃത്യമായ ക്രമത്തിൽ പ്രവർത്തിക്കുന്നു: - ഫോം ഇന്പുട്ടിൽ നിന്നുള്ള ഉപയോക്തൃനാമം എടുക്കുന്നു - സെർവറിൽ നിന്നും ആ ഉപയോക്താവിന്റെ അക്കൗണ്ട് ഡാറ്റ അഭ്യർത്ഥിക്കുന്നു - പിശകുകൾ സംഭവിച്ചാൽ അത് കൈകാര്യം ചെയ്യുന്നു - വിജയപ്രാപ്തിയോടെ അക്കൗണ്ട് ഡാറ്റ സംഭരിച്ചു ഡാഷ്ബോർഡിലേക്ക് പോകുന്നു > 🎯 **Async/Await മാതൃക**: `getAccount` അസിങ്ക്രോണസ് ഫങ്ഷനാകുന്നതിനാൽ സെർവർ പ്രതികരിക്കാൻ പ്രോഗ്രാം കാത്തിരിക്കുവാൻ `await` കീവേഡ് ഉപയോഗിക്കുന്നു. ഇതിലൂടെ അർത്ഥമില്ലാത്ത ഡാറ്റ കൊണ്ട് കോഡ് മുന്നോട്ട് പോകരുത്. #### ഘട്ടം 4: നിങ്ങളുടെ ഡാറ്റയ്ക്ക് ഒരു ഹോം ചെയ്യുക ലോഡ് ചെയ്ത അക്കൗണ്ട് വിവരങ്ങൾ ഓർമ്മിക്കാൻ നിങ്ങളുടെ ആപ്പിന് ഒരു സ്ഥലം വേണം. ഇത് നിങ്ങളുടെ ആപ്പ് ഷോർട്ട്-ടേം മെമ്മറിയായി ചിന്തിക്കുക - നിലവിലെ ഉപയോക്തൃ ഡാറ്റ എളുപ്പത്തിൽ കൈകാര്യം ചെയ്യാനുള്ള സ്ഥലം. നിങ്ങളുടെ `app.js` ഫയലിന്റെ മുകളിൽ ഈ ലൈൻ ചേർക്കുക: ```javascript // ഇത് നിലവിലെ ഉപയോക്താവിന്റെ അക്കൗണ്ട് ഡാറ്റയാണ് let account = null; ``` **എന്തുകൊണ്ട് ഇത് വേണം:** - ആപ്പിന്റെ എവിടെയും അക്കൗണ്ട് ഡാറ്റ ലഭ്യമാക്കുന്നു - ആദ്യം `null` ആയതായി സൂചിപ്പിക്കുന്നത് "യാർക്കും ഇപ്പോൾ ലോഗിൻ ചെയ്തിട്ടില്ല" എന്ന് - ഒരാൾ വിജയകരമായി ലോഗിൻ ചെയ്‌താൽ അല്ലെങ്കിൽ രജിസ്റ്റർ ചെയ്താൽ അപ്‌ഡേറ്റ് ചെയ്യപ്പെടും - ഒരു ഏക സത്യം ഉറപ്പാക്കുന്ന ഉറവിടം പോലെ പ്രവർത്തിക്കുന്നു - ആരാണ് ലോഗിൻ ചെയ്തത് ഒരുപാട് ആശയക്കുഴപ്പമില്ല #### ഘട്ടം 5: ഫോമിന് വയർ ചെയ്യുക ഇപ്പോൾ നിങ്ങളുടെ പുതിയ ലോഗിൻ ഫങ്ഷനെ HTML ഫോമുമായി ബന്ധിപ്പിക്കുക. നിങ്ങളുടെ form ടാഗ് ഇങ്ങനെ അപ്ഡേറ്റ് ചെയ്യുക: ```html
``` **ഈ ചെറിയ മാറ്റം എന്തുപകരുന്നു**: - ഫോമിന്റെ "പേജ് റീലോഡ് ചെയ്യൽ" സ്വാഭാവിക പ്രവർത്തനം തടയുന്നു - കോഡ് നിങ്ങളുടെ കസ്റ്റം ജാവാസ്‌ക്രിപ്റ്റ് ഫങ്ഷൻ വിളിക്കുന്നു - എല്ലാം അടങ്ങിയ, സിംഗിൾ-പേജ് ആപ്പ് പോലെയാണ് പ്രവർത്തിക്കുന്നത് - ഉപയോക്താക്കൾ "Login" ബട്ടൺ അമർത്തുമ്പോൾ എന്ത് ഉണ്ടാകണമെന്ന് നിങ്ങളുടെ നിയന്ത്രണത്തിലാക്കുന്നു #### ഘട്ടം 6: രജിസ്റ്റർ ഫങ്ഷൻ മെച്ചപ്പെടുത്തുക സുസ്ഥിരതയ്ക്കായി, നിങ്ങളുടെ `register` ഫങ്ഷനും അക്കൗണ്ട് ഡാറ്റ സംഭരിച്ച് ഡാഷ്ബോർഡിലേക്ക് തിരിയാൻ അപ്ഡേറ്റ് ചെയ്യുക: ```javascript // നിങ്ങളുടെ രജിസ്റ്റർ ഫംഗ്ഷന്റെ അവസാനം ഈ വരികൾ ചേർക്കുക account = result; navigate('/dashboard'); ``` **ഈ മെച്ചപ്പെടുത്തലുകൾ നൽകുന്നത്:** - **മসൃണം** രജിസ്ട്രേഷനും ഡാഷ്ബോർഡിലേക്കുള്ള ട്രാൻസിഷൻ - **സുസ്ഥിരമായ** ഉപയോക്തൃ അനുഭവം ലോഗിൻ, രജിസ്ട്രേഷൻ ഫ്ലോകൾക്ക് ഇടയിൽ - **ഏറ്റവും നേരത്തെ** അക്കൗണ്ട് ഡാറ്റ ലഭ്യമാക്കൽ വിജയകരമായ ശേഷം #### നിങ്ങളുടെ പ്രവർത്തനം പരിശോധിക്കൽ ```mermaid flowchart TD A[ഉപയോക്താവ് ക്രെഡൻഷ്യലുകൾ നൽകുന്നു] --> B[ലോഗിൻ ഫങ്ഷൻ വിളിച്ചു] B --> C[സർവറിൽ നിന്നൊരു അക്കൗണ്ട് ഡാറ്റ തിരിക്കുക] C --> D{ഡാറ്റ വിജയകരമായി ലഭിച്ചോ?} D -->|അതെ| E[ആകൗണ്ട് ഡാറ്റ ഗ്ലോബലായി സംഭരിക്കുക] D -->|ഇല്ല| F[പിശക് സന്ദേശം പ്രദർശിപ്പിക്കുക] E --> G[ഡ്ശ്ബോർഡ് പ്രദർശിപ്പിക്കാൻ നേവിഗേറ്റ് ചെയ്യുക] F --> H[ഉപയോക്താവ് ലോഗിൻ പേജ് തന്നെ തുടരുന്നു] ``` **ഇപ്പോൾ പരീക്ഷിക്കാൻ സമയമായി:** 1. ഒരു പുതിയ അക്കൗണ്ട് സൃഷ്ടിച്ച് എല്ലാം പ്രവർത്തിക്കുന്നതായി ഉറപ്പാക്കുക 2. അതേ ക്രെഡൻഷ്യലുകളിൽ ലോഗിൻ പരീക്ഷിക്കുക 3. ബ്രൗസർ കൺസോൾ (F12) നോക്കുക എന്തെങ്കിലും തകരാറുണ്ടോ എന്ന് 4. വിജയകരമായ ലോഗിൻ ശേഷം ഡാഷ്ബോർഡിലേക്കെത്തുന്നത് ഉറപ്പാക്കുക എന്തെങ്കിലും പ്രവർത്തിക്കുന്നില്ലങ്കിലൊഴിച്ച എളുപ്പത്തിലെ പിശകുകൾ - സംവിധാനം ഓടാത്തത്, ടൈപ്പോ മുതലായവ. #### ക്രോസ്-ഓറിജിൻ മാജിക്ക് കുറിച്ച് ചെറിയ കുറിപ്പ് നിങ്ങൾക്ക് സംശയമുണ്ടാകാം: "എന്താണ് വ്യത്യസ്ത പോർട്ടുകളിൽ പ്രവർത്തിക്കുന്ന ഈ API സർവറുമായി എന്റെ വെബ് ആപ്പ് സംസാരിക്കുന്നത് എങ്ങനെ?” മികച്ച ചോദ്യം! എല്ലാ വെബ് ഡെവലപ്പർമാരും ഏറ്റവും ഒടുവിൽ നേരിടുന്ന വിഷയം. > 🔒 **ക്രോസ്-ഓറിജിൻ സെക്യൂരിറ്റി**: ബ്രൗസറുകൾ "സേം-ഓറിജിൻ നയം" നടപ്പിലാക്കുന്നു വ്യത്യസ്ത ഡൊമെയ്‌നുകൾക്ക് അനധികൃത ആശയവിനിമയം തടയാൻ. പേന്റഗണിലെ ചെക്ക്പോയിന്റ് പോലെയാണ്, ഇത് ബന്ധപ്പെട്ട ആശയവിനിമയം അംഗീകരിച്ചിരിക്കുകയാണ് എന്നത് പരിശോധിക്കുന്നു. > **നമ്മൾ ക്രമീകരിച്ചത്:** - നിങ്ങളുടെ വെബ് ആപ്പ് `localhost:3000` ൽ പ്രവർത്തിക്കുന്നു (ഡെവലപ്പ്മെന്റ് സർവർ) - API സർവർ `localhost:5000` ൽ (ബാക്ക്‌എന്റ് സർവർ) - API സർവർ [CORS ഹെഡറുകൾ](https://developer.mozilla.org/docs/Web/HTTP/CORS) ഉൾപ്പെടുത്തിയിരിക്കുന്നു, വെബ് ആപ്പിൽ നിന്ന് അനുമതി നൽകി ആശയവിനിമയം അനുവദിക്കുന്നത് ഫ്രണ്ട്‌എൻഡ്, ബാക്ക്‌എൻഡ് ആപ്ലിക്കേഷനുകൾ സാധാരണയായി വേർതിരിച്ച് പ്രവർത്തിക്കുന്ന യാഥാർത്ഥ്യവുമായുള്ള താരതമ്യം. > 📚 **കൂടുതൽ പഠിക്കുക**: APIകളെയും ഡാറ്റ ഫെച്ചിങ്ങിനെയും സംബന്ധിച്ച് കൂടുതൽ പഠിക്കാൻ ഈ സമഗ്രമായ [Microsoft Learn API മോഡ്യൂൾ](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon) സന്ദർശിക്കുക. ## നിങ്ങളുടെ ഡാറ്റ HTML-ൽ ജീവൻ പകരുക ഇപ്പോൾ നാം ഫെച്ച് ചെയ്ത ഡാറ്റ ഉപഭോക്താക്കൾക്ക് ദൃശ്യമായ രീതിയിൽ DOM മാനിപ്പുലേഷൻ മുഖേന കാണിക്കാൻ പോകുന്നു. ഡാർക്ക് റൂമിലെ ഫോട്ടോഗ്രഫി വികസന പ്രക്രിയ പോലെയാണ്, അപ്രത്യക്ഷമായ ഡാറ്റയെ മനുഷ്യർ കാണാനും ഇടപഴിക്കാനുമുള്ള രൂപത്തിലാക്കുന്നു. DOM മാനിപ്പുലേഷൻ എന്നത് സ്റ്റാറ്റിക് വെബ് പേജുകളെ ഡൈനാമിക് ആപ്പ്ലിക്കേഷനുകളാക്കി മാറ്റുന്ന സാങ്കേതിക വിദ്യയാണ്, ഇത് ഉപയോക്തൃ ഇടപെടലുകൾക്കും സെർവർ പ്രതികരണങ്ങൾക്കും ആധാരമായി ഉള്ളടക്കം അപ്ഡേറ്റ് ചെയ്യുന്നു. ### ജോലിക്കായി അനുയോജ്യമായ ഉപകരണം തിരഞ്ഞെടുക്കൽ ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് നിങ്ങളുടെ HTML അപ്ഡേറ്റ് ചെയ്യുമ്പോൾ, നിങ്ങൾക്ക് പല തിരഞ്ഞെടുപ്പുകളും ഉണ്ട്. ഇവ toolbox-ലുള്ള വ്യത്യസ്ത ഉപകരണങ്ങളെ പോലെ പരിഗണിക്കാം - ഓരോന്നും പ്രത്യേക ജോലികൾക്കായി പാടുള്ളതാണ്: | വിധി | എന്തിന് ഉത്തമം | എപ്പോൾ ഉപയೋಗിക്കണം | സുരക്ഷാ നില | |--------|---------------------|----------------|--------------| | `textContent` | ഉപയോക്തൃ ഡാറ്റ സുരക്ഷിതമായി പ്രദർശിപ്പിക്കൽ | നിങ്ങൾ ടെക്സ്റ്റ് കാണിക്കുമ്പോൾ എപ്പോഴും | ✅ ഉറപ്പുള്ളത് | | `createElement()` + `append()` | സങ്കീർണ്ണ ലേഔട്ടുകൾ നിർമ്മിക്കൽ | പുതിയ സെക്ഷനുകൾ/ലിസ്റ്റുകൾ സൃഷ്ടിക്കുമ്പോൾ | ✅ ഉറപ്പുള്ളത് | | `innerHTML` | HTML ഉള്ളടക്കം സജ്ജമാക്കൽ | ⚠️ ഇത് ഒഴിവാക്കാൻ ശ്രമിക്കുക | ❌ അപകടകരം | #### ടെക്സ്റ്റ് സുരക്ഷിതമായി കാണിക്കുന്ന മാർഗ്ഗം: textContent [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) പ്രോപ്പർടി ഉപയോക്തൃ ഡാറ്റ പ്രദർശിപ്പിക്കുമ്പോൾ നിങ്ങളുടെ ഏറ്റവും നല്ല കൂട്ടുകാരനാണ്. ഇത് നിങ്ങളുടെ വെബ് പേജിന് ഒരു ബൗൺസറായി കാര്യക്ഷമമാണ് - ഒരു അപകടകരമായത് കടക്കാൻ അനുവദിക്കുന്നില്ല: ```javascript // എഴുത്ത് പുതുക്കുന്നതിനുള്ള സുരക്ഷിതവും വിശ്വസനീയവുമായ മാർഗം const balanceElement = document.getElementById('balance'); balanceElement.textContent = account.balance; ``` **textContent-ന്റെ ഗുണങ്ങൾ:** - എല്ലാം പ്ളെയിന് ടെക്സ്റ്റായി പരിഗണിക്കുന്നു (സ്ക്രിപ്റ്റ് എക്സിക്യൂഷൻ തടയുന്നു) - നിലവിലുള്ള ഉള്ളടക്കം ഓട്ടോമാറ്റിക് ക്ലിയർ ചെയ്യുന്നു - ലളിതമായ ടെക്സ്റ്റ് അപ്ഡേറ്റുകൾക്കായി കാര്യക്ഷമം - ദുഷ്ട ഉള്ളടക്കത്തിൽ നിന്നുള്ള സുരക്ഷ നൽകുന്നു #### ഡൈനാമിക് HTML എഴുക്കൾ സൃഷ്ടിക്കൽ കൂടുതൽ സങ്കീർണ്ണ ഉള്ളടക്കങ്ങൾക്കായി [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) നെ [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) എന്ന രീതിയുമായി കൂട്ടിച്ചേർത്തു ഉപയോഗിക്കുക: ```javascript // പുതിയ ഘടകങ്ങൾ സൃഷ്ടിക്കുന്നതിന് സുരക്ഷിതമായ മാർഗ്ഗം const transactionItem = document.createElement('div'); transactionItem.className = 'transaction-item'; transactionItem.textContent = `${transaction.date}: ${transaction.description}`; container.append(transactionItem); ``` **ഈ സമീപനം മനസ്സിലാക്കൽ:** - ഒരു പ്രോഗ്രാമാറ്റിക് വിധത്തിൽ പുതിയ DOM ഘടകങ്ങൾ സൃഷ്ടിക്കുന്നു - ഘടകങ്ങളുടെ അടയാളങ്ങളും ഉള്ളടക്കവും പൂർണ്ണ നിയന്ത്രണം നിലനിർത്തുന്നു - സങ്കീർണ്ണമായ, ന喜്ചിത ഘടക ഘടനകൾ അനുവദിക്കുന്നു - ഘടനയും ഉള്ളടക്കവും വേർതിരിച്ച് സുരക്ഷ ഉറപ്പാക്കുന്നു > ⚠️ **സുരക്ഷ പരിഗണന**: പല ട്യൂട്ടോറിയലുകളിലും [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) കാണപ്പെടുമ്പോൾ, ഇത് ഉൾക്കൊള്ളിച്ച സ്ക്രിപ്റ്റുകൾ പ്രവർത്തിപ്പിക്കാമെന്ന അഭയം ഉണ്ട്. CERN-ന്റെ അനധികൃത കോഡ് പ്രവർത്തനം തടയുന്ന സുരക്ഷാ പ്രോട്ടോകോളുകൾ പോലെ, `textContent`യും `createElement`ഉം കൂടുതൽ സുരക്ഷിതവും നല്ല സംവിധാനങ്ങളും നൽകുന്നു. > **innerHTML-ന്റെ അപകടങ്ങൾ:** - ഉപയോക്തൃ ഡാറ്റയിലെ `