# बैंकिंग ऐप बनाएं भाग 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**: `action="javascript:login()"` के साथ लॉगिन फॉर्म को कनेक्ट करें - **मिनट 5**: लॉगिन का परीक्षण करें और कंसोल में खाते का डेटा देखें **त्वरित परीक्षण कमांड्स**: ```bash # API चल रहा है या नहीं यह सत्यापित करें curl http://localhost:5000/api # परीक्षण खाता डेटा प्राप्त करें curl http://localhost:5000/api/accounts/test ``` **यह क्यों महत्वपूर्ण है**: 5 मिनट में, आप देखेंगे कि असिंक्रोनस डेटा प्राप्ति की जादूगरी जो हर आधुनिक वेब एप्लिकेशन को शक्ति देती है। यही आधार है जो ऐप्स को उत्तरदायी और जीवंत महसूस कराता है। ## 🗺️ डेटा-संचालित वेब एप्लिकेशन के माध्यम से आपकी सीख यात्रा ```mermaid journey title स्थैतिक पृष्ठों से गतिशील अनुप्रयोगों तक 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 ``` **आपका यात्रा गंतव्य**: इस पाठ के अंत तक, आप समझ जाएंगे कि आधुनिक वेब एप्लिकेशन डेटा को कैसे प्राप्त करते हैं, प्रक्रिया करते हैं, और गतिशील रूप से प्रदर्शित करते हैं, जो पेशेवर अनुप्रयोगों से अपेक्षित सहज उपयोगकर्ता अनुभव बनाते हैं। ## प्राक्कथन प्रश्नोत्तरी [प्राक्कथन प्रश्नोत्तरी](https://ff-quizzes.netlify.app/web/quiz/45) ### पूर्वापेक्षाएँ डेटा प्राप्त करने में गोता लगाने से पहले, सुनिश्चित करें कि आपके पास ये घटक तैयार हैं: - **पिछला पाठ**: [लॉगिन और पंजीकरण फॉर्म](../2-forms/README.md) पूरा करें - हम इस आधार पर निर्माण करेंगे - **स्थानीय सर्वर**: [Node.js](https://nodejs.org) इंस्टॉल करें और [सर्वर API चलाएं](../api/README.md) जिससे खाता डेटा मिले - **API कनेक्शन**: इस कमांड से अपने सर्वर कनेक्शन का परीक्षण करें: ```bash curl http://localhost:5000/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 टेक्स्टकॉन्टेंट उपयोग इनपुट शोधन सुरक्षित 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/hi/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/hi/spa.268ec73b41f992c2.webp) **SPAs क्यों बेहतर महसूस होते हैं:** - केवल वही भाग अपडेट होते हैं जो वास्तव में परिवर्तित हुए हैं (चतुर, है ना?) - कोई अचानक रुकावट नहीं - उपयोगकर्ता अपने प्रवाह में बने रहते हैं - कम डेटा ट्रैवलिंग का मतलब तेज़ लोडिंग - सब कुछ तेज़ और उत्तरदायी महसूस होता है, जैसे आपके फोन के ऐप्स ### आधुनिक 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 promises का उपयोग करता है जो असिंक्रोनस कोड को साफ़ बनाता है और 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` कीवर्ड? यह JavaScript को बता रहा है "अरे, इस फ़ंक्शन को इंतजार करना पड़ सकता है" - हम पेज से अपनी फॉर्म पकड़ रहे हैं (कुछ खास नहीं, बस ID से खोज रहे हैं) - फिर हम उपयोगकर्ता द्वारा दर्ज किया गया उपयोगकर्ता नाम निकाल रहे हैं - एक कमाल की बात: आप फॉर्म के किसी भी इनपुट को उसके `name` एट्रिब्यूट से एक्सेस कर सकते हैं - कोई अतिरिक्त getElementById कॉल की जरूरत नहीं! > 💡 **फॉर्म एक्सेस पैटर्न**: हर फॉर्म कंट्रोल को उसके नाम (`name` एट्रिब्यूट के जरिए HTML में सेट किया गया) से फॉर्म एलिमेंट की प्रॉपर्टी के रूप में एक्सेस किया जा सकता है। यह एक साफ़ और पढ़ने योग्य तरीका प्रदान करता है फॉर्म डेटा प्राप्त करने के लिए। #### चरण 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 बनाता है - URL में विशेष वर्णों को सुरक्षित रखने के लिए `encodeURIComponent()` लगाता है - प्रतिक्रिया को JSON फॉर्मेट में परिवर्तित करता है ताकि डेटा सरलता से संसाधित हो सके - त्रुटियों को सहजता से संभालता है और क्रैश होने की बजाय एक त्रुटि ऑब्जेक्ट लौटाता है > ⚠️ **सुरक्षा नोट**: `encodeURIComponent()` फ़ंक्शन URL में विशेष वर्णों को संभालता है। जैसे नौसेना संचार में एन्कोडिंग सिस्टम यह सुनिश्चित करता है कि आपका संदेश बिल्कुल सही रूप में पहुंचे, वैसे ही यह "#" या "&" जैसे अक्षरों के गलत अर्थ को रोके। > **यह क्यों महत्वपूर्ण है:** - विशेष वर्णों से URL टूटने से रोकता है - 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 फॉर्म से जोड़ें। अपने फॉर्म टैग को इस तरह अपडेट करें: ```html
``` **यह छोटा बदलाव क्या करता है:** - फॉर्म को अपना डिफ़ॉल्ट "पूरा पेज रीफ्रेश" व्यवहार रोक देता है - आपकी कस्टम JavaScript फ़ंक्शन को कॉल करता है - सब कुछ चिकना और एक-पन्ने के ऐप जैसा बनाता है - उपयोगकर्ता "लॉगिन" दबाने पर क्या होता है, उस पर आपकी पूर्ण नियंत्रण देता है #### चरण 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 सर्वर शुरू करना भूल जाने जैसी सरल होती हैं। #### क्रॉस-ऑरिजन मैजिक के बारे में एक त्वरित शब्द आप सोच रहे होंगे: "मेरा वेब ऐप इस API सर्वर से कैसे बात कर रहा है जबकि वे अलग-अलग पोर्ट पर चल रहे हैं?" बहुत अच्छा सवाल! यह वह है जो हर वेब डेवलपर अंततः सामना करता है। > 🔒 **क्रॉस-ऑरिजन सुरक्षा**: ब्राउज़र "समान मूल नीति" लागू करते हैं ताकि अलग-अलग डोमेन के बीच अनधिकृत संचार को रोका जा सके। पेंटागन के चेकपॉइंट सिस्टम की तरह, वे डेटा स्थानांतरण की अनुमति देने से पहले संचार को सत्यापित करते हैं। > **हमारे सेटअप में:** - आपका वेब ऐप `localhost:3000` (डेवलपमेंट सर्वर) पर चलता है - आपका API सर्वर `localhost:5000` (बैकएंड सर्वर) पर चलता है - API सर्वर में [CORS हेडर](https://developer.mozilla.org/docs/Web/HTTP/CORS) शामिल हैं जो स्पष्ट रूप से आपके वेब ऐप से संचार को अधिकृत करते हैं यह विन्यास वास्तविक दुनिया के विकास का प्रतिबिंब है जहां फ्रंटएंड और बैकएंड एप्लिकेशन आम तौर पर अलग-अलग सर्वरों पर चलते हैं। > 📚 **और जानें**: API और डेटा प्राप्ति के बारे में इस व्यापक [Microsoft Learn मॉड्यूल पर और अधिक जानें](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon)। ## HTML में अपने डेटा को जीवन देना अब हम प्राप्त डेटा को DOM हेरफेर के माध्यम से उपयोगकर्ताओं के सामने दिखाएंगे। फोटोग्राफ के डेवलपमेंट की प्रक्रिया की तरह, हम अदृश्य डेटा को ऐसा कुछ बनाते हैं जिसे उपयोगकर्ता देख और उसके साथ इंटरैक्ट कर सकें। DOM मैनिक्युलेशन वह तकनीक है जो स्थिर वेब पेजों को गतिशील अनुप्रयोगों में बदल देती है जो उपयोगकर्ता के इंटरैक्शन और सर्वर प्रतिक्रियाओं के आधार पर अपनी सामग्री अपडेट करते हैं। ### काम के लिए सही उपकरण चुनना जब अपने HTML को JavaScript से अपडेट करने की बात आती है, तो आपके पास कई विकल्प होते हैं। इन्हें एक टूलबॉक्स में अलग-अलग उपकरणों की तरह सोचें - हर एक विशिष्ट कामों के लिए उपयुक्त: | विधि | यह किसके लिए बढ़िया है | इसे कब उपयोग करें | सुरक्षा स्तर | |--------|---------------------|----------------|--------------| | `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 के जोखिम:** - उपयोगकर्ता डेटा में किसी भी `