# ਬੈਂਕਿੰਗ ਐਪ ਬਣਾਓ ਭਾਗ 3: ਡਾਟਾ ਲੈਣ ਅਤੇ ਵਰਤਣ ਦੇ ਤਰੀਕੇ ਸਟਾਰ ਟ੍ਰੈਕ ਵਿੱਚ ਐਂਟਰਪ੍ਰਾਈਜ਼ ਦੇ ਕੰਪਿਊਟਰ ਬਾਰੇ ਸੋਚੋ - ਜਦੋਂ ਕੈਪਟਨ ਪਿਕਾਰਡ ਜਹਾਜ਼ ਦੀ ਸਥਿਤੀ ਪੁੱਛਦਾ ਹੈ, ਜਾਣਕਾਰੀ ਤੁਰੰਤ ਪ੍ਰਗਟ ਹੁੰਦੀ ਹੈ ਬਿਨਾਂ ਪੂਰੇ ਇੰਟਰਫੇਸ ਨੂੰ ਬੰਦ ਕਰਨ ਅਤੇ ਦੁਬਾਰਾ ਬਣਾਉਣ ਦੇ। ਇਹ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਜਾਣਕਾਰੀ ਦਾ ਪ੍ਰਵਾਹ ਹੈ ਜੋ ਅਸੀਂ ਇੱਥੇ ਡਾਇਨਾਮਿਕ ਡਾਟਾ ਫੈਚਿੰਗ ਨਾਲ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ। ਇਸ ਸਮੇਂ, ਤੁਹਾਡਾ ਬੈਂਕਿੰਗ ਐਪ ਇੱਕ ਛਪਿਆ ਹੋਇਆ ਅਖ਼ਬਾਰ ਵਰਗਾ ਹੈ - ਜਾਣਕਾਰੀ ਦੇਣ ਵਾਲਾ ਪਰ ਸਥਿਰ। ਅਸੀਂ ਇਸਨੂੰ NASA ਦੇ ਮਿਸ਼ਨ ਕੰਟਰੋਲ ਵਰਗੇ ਕੁਝ ਵਿੱਚ ਬਦਲਣ ਜਾ ਰਹੇ ਹਾਂ, ਜਿੱਥੇ ਡਾਟਾ ਲਗਾਤਾਰ ਵਗਦਾ ਹੈ ਅਤੇ ਯੂਜ਼ਰ ਦੇ ਕੰਮ ਵਿੱਚ ਰੁਕਾਵਟ ਪੈਦਾ ਕੀਤੇ ਬਿਨਾਂ ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ ਅਪਡੇਟ ਹੁੰਦਾ ਹੈ। ਤੁਹਾਨੂੰ ਸਰਵਰਾਂ ਨਾਲ ਅਸਿੰਕ੍ਰੋਨਸ ਤਰੀਕੇ ਨਾਲ ਸੰਚਾਰ ਕਰਨ, ਵੱਖ-ਵੱਖ ਸਮਿਆਂ 'ਤੇ ਆਉਣ ਵਾਲੇ ਡਾਟਾ ਨੂੰ ਸੰਭਾਲਣ, ਅਤੇ ਕੱਚੀ ਜਾਣਕਾਰੀ ਨੂੰ ਯੂਜ਼ਰਾਂ ਲਈ ਅਰਥਪੂਰਨ ਕੁਝ ਵਿੱਚ ਬਦਲਣ ਦਾ ਤਰੀਕਾ ਸਿੱਖਣ ਨੂੰ ਮਿਲੇਗਾ। ਇਹ ਡੈਮੋ ਅਤੇ ਪ੍ਰੋਡਕਸ਼ਨ-ਤਿਆਰ ਸੌਫਟਵੇਅਰ ਵਿੱਚ ਅੰਤਰ ਹੈ। ## ⚡ ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ **ਵਿਆਸਤ ਡਿਵੈਲਪਰਾਂ ਲਈ ਤੇਜ਼ ਸ਼ੁਰੂਆਤ ਦਾ ਰਾਹ** ```mermaid flowchart LR A[⚡ 5 minutes] --> B[Set up API server] B --> C[Test fetch with curl] C --> D[Create login function] D --> E[See data in action] ``` - **ਮਿੰਟ 1-2**: ਆਪਣਾ API ਸਰਵਰ ਸ਼ੁਰੂ ਕਰੋ (`cd api && npm start`) ਅਤੇ ਕਨੈਕਸ਼ਨ ਦੀ ਜਾਂਚ ਕਰੋ - **ਮਿੰਟ 3**: `getAccount()` ਫੰਕਸ਼ਨ ਬਣਾਓ ਜੋ ਫੈਚ ਵਰਤਦਾ ਹੈ - **ਮਿੰਟ 4**: ਲੌਗਇਨ ਫਾਰਮ ਨੂੰ `action="javascript:login()"` ਨਾਲ ਵਾਇਰ ਕਰੋ - **ਮਿੰਟ 5**: ਲੌਗਇਨ ਦੀ ਜਾਂਚ ਕਰੋ ਅਤੇ ਕੌਂਸੋਲ ਵਿੱਚ ਅਕਾਊਂਟ ਡਾਟਾ ਦੇਖੋ **ਤੇਜ਼ ਟੈਸਟ ਕਮਾਂਡ**: ```bash # Verify API is running curl http://localhost:5000/api # Test account data fetch curl http://localhost:5000/api/accounts/test ``` **ਇਸਦਾ ਮਹੱਤਵ ਕਿਉਂ ਹੈ**: 5 ਮਿੰਟਾਂ ਵਿੱਚ, ਤੁਸੀਂ ਅਸਿੰਕ੍ਰੋਨਸ ਡਾਟਾ ਫੈਚਿੰਗ ਦਾ ਜਾਦੂ ਦੇਖੋਗੇ ਜੋ ਹਰ ਆਧੁਨਿਕ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਤਾਕਤ ਦੇਂਦਾ ਹੈ। ਇਹ ਉਹ ਬੁਨਿਆਦ ਹੈ ਜੋ ਐਪਸ ਨੂੰ ਜ਼ਿੰਦਾ ਅਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਮਹਿਸੂਸ ਕਰਵਾਉਂਦੀ ਹੈ। ## 🗺️ ਡਾਟਾ-ਚਲਿਤ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਦੁਆਰਾ ਤੁਹਾਡਾ ਸਿੱਖਣ ਦਾ ਸਫਰ ```mermaid journey title From Static Pages to Dynamic Applications section Understanding the Evolution Traditional page reloads: 3: You Discover AJAX/SPA benefits: 5: You Master Fetch API patterns: 7: You section Building Authentication Create login functions: 4: You Handle async operations: 6: You Manage user sessions: 8: You section Dynamic UI Updates Learn DOM manipulation: 5: You Build transaction displays: 7: You Create responsive dashboards: 9: You section Professional Patterns Template-based rendering: 6: You Error handling strategies: 7: You Performance optimization: 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 # Expected response: "Bank API v1.0.0" ``` ਇਹ ਤੇਜ਼ ਟੈਸਟ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਸਾਰੇ ਕੰਪੋਨੈਂਟਸ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸੰਚਾਰ ਕਰ ਰਹੇ ਹਨ: - ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ Node.js ਤੁਹਾਡੇ ਸਿਸਟਮ 'ਤੇ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਚੱਲ ਰਿਹਾ ਹੈ - ਪੁਸ਼ਟੀ ਕਰਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ API ਸਰਵਰ ਸਰਗਰਮ ਹੈ ਅਤੇ ਜਵਾਬ ਦੇ ਰਿਹਾ ਹੈ - ਪੁਸ਼ਟੀ ਕਰਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ ਐਪ ਸਰਵਰ ਤੱਕ ਪਹੁੰਚ ਸਕਦਾ ਹੈ (ਮਿਸ਼ਨ ਤੋਂ ਪਹਿਲਾਂ ਰੇਡੀਓ ਸੰਪਰਕ ਦੀ ਜਾਂਚ ਕਰਨ ਵਰਗਾ) ## 🧠 ਡਾਟਾ ਮੈਨੇਜਮੈਂਟ ਇਕੋਸਿਸਟਮ ਦਾ ਝਲਕਾ ```mermaid mindmap root((Data Management)) Authentication Flow Login Process Form Validation Credential Verification Session Management User State Global Account Object Navigation Guards Error Handling API Communication Fetch Patterns GET Requests POST Requests Error Responses Data Formats JSON Processing URL Encoding Response Parsing Dynamic UI Updates DOM Manipulation Safe Text Updates Element Creation Template Cloning User Experience Real-time Updates Error Messages Loading States Security Considerations XSS Prevention textContent Usage Input Sanitization Safe HTML Creation CORS Handling Cross-Origin Requests Header Configuration Development Setup ``` **ਮੁੱਖ ਸਿਧਾਂਤ**: ਆਧੁਨਿਕ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਡਾਟਾ ਆਰਕੈਸਟ੍ਰੇਸ਼ਨ ਸਿਸਟਮ ਹਨ - ਇਹ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ, ਸਰਵਰ APIs, ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਸੁਰੱਖਿਆ ਮਾਡਲਾਂ ਦੇ ਵਿਚਕਾਰ ਸਹੀ, ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਅਨੁਭਵ ਬਣਾਉਣ ਲਈ ਸਹਿਕਾਰ ਕਰਦੇ ਹਨ। --- ## ਆਧੁਨਿਕ ਵੈੱਬ ਐਪਸ ਵਿੱਚ ਡਾਟਾ ਫੈਚਿੰਗ ਨੂੰ ਸਮਝਣਾ ਪਿਛਲੇ ਦੋ ਦਹਾਕਿਆਂ ਵਿੱਚ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਡਾਟਾ ਨੂੰ ਸੰਭਾਲਣ ਦਾ ਤਰੀਕਾ ਬਹੁਤ ਬਦਲ ਗਿਆ ਹੈ। ਇਸ ਵਿਕਾਸ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਨੂੰ ਇਹ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ ਕਿ AJAX ਅਤੇ Fetch API ਵਰਗੇ ਆਧੁਨਿਕ ਤਕਨੀਕਾਂ ਕਿਉਂ ਸ਼ਕਤੀਸ਼ਾਲੀ ਹਨ ਅਤੇ ਕਿਉਂ ਇਹ ਵੈੱਬ ਡਿਵੈਲਪਰਾਂ ਲਈ ਜ਼ਰੂਰੀ ਸੰਦ ਬਣ ਗਏ ਹਨ। ਆਓ ਵੇਖੀਏ ਕਿ ਰਵਾਇਤੀ ਵੈੱਬਸਾਈਟਾਂ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀਆਂ ਸਨ ਅਤੇ ਅੱਜ ਅਸੀਂ ਬਣਾਉਣ ਵਾਲੀਆਂ ਡਾਇਨਾਮਿਕ, ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਐਪਲੀਕੇਸ਼ਨ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀਆਂ ਹਨ। ### ਰਵਾਇਤੀ ਮਲਟੀ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ (MPA) ਵੈੱਬ ਦੇ ਸ਼ੁਰੂਆਤੀ ਦਿਨਾਂ ਵਿੱਚ, ਹਰ ਕਲਿੱਕ ਪੁਰਾਣੇ ਟੈਲੀਵਿਜ਼ਨ 'ਤੇ ਚੈਨਲ ਬਦਲਣ ਵਰਗਾ ਸੀ - ਸਕ੍ਰੀਨ ਖਾਲੀ ਹੋ ਜਾਂਦੀ ਸੀ, ਫਿਰ ਨਵੀਂ ਸਮੱਗਰੀ ਵਿੱਚ ਧੀਰੇ-ਧੀਰੇ ਟਿਊਨ ਹੁੰਦੀ ਸੀ। ਇਹ ਸ਼ੁਰੂਆਤੀ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਹਕੀਕਤ ਸੀ, ਜਿੱਥੇ ਹਰ ਇੰਟਰੈਕਸ਼ਨ ਦਾ ਮਤਲਬ ਸੀ ਪੂਰੇ ਪੇਜ ਨੂੰ ਮੁੜ ਤੋਂ ਸ਼ੁਰੂ ਕਰਨਾ। ```mermaid sequenceDiagram participant User participant Browser participant Server User->>Browser: Clicks link or submits form Browser->>Server: Requests new HTML page Note over Browser: Page goes blank Server->>Browser: Returns complete HTML page Browser->>User: Displays new page (flash/reload) ```  **ਇਹ ਤਰੀਕਾ ਕਿਉਂ ਅਸੁਵਿਧਾਜਨਕ ਮਹਿਸੂਸ ਹੁੰਦਾ ਸੀ:** - ਹਰ ਕਲਿੱਕ ਦਾ ਮਤਲਬ ਸੀ ਪੂਰੇ ਪੇਜ ਨੂੰ ਮੁੜ ਤੋਂ ਬਣਾਉਣਾ - ਯੂਜ਼ਰਾਂ ਨੂੰ ਉਹਨਾਂ ਪੇਜ ਫਲੈਸ਼ਾਂ ਦੁਆਰਾ ਵਿਚਾਰਾਂ ਵਿਚ ਰੁਕਾਵਟ ਪੈਂਦੀ ਸੀ - ਤੁਹਾਡਾ ਇੰਟਰਨੈਟ ਕਨੈਕਸ਼ਨ ਮੁੜ-ਮੁੜ ਉਹੀ ਹੈਡਰ ਅਤੇ ਫੁੱਟਰ ਡਾਊਨਲੋਡ ਕਰਦਾ ਸੀ - ਐਪਸ ਸੌਫਟਵੇਅਰ ਵਰਗੇ ਨਹੀਂ, ਬਲਕਿ ਫਾਈਲਿੰਗ ਕੈਬਨਿਟ ਦੇ ਕਲਿੱਕ ਕਰਨ ਵਰਗੇ ਮਹਿਸੂਸ ਹੁੰਦੇ ਸਨ ### ਆਧੁਨਿਕ ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ (SPA) AJAX (Asynchronous JavaScript and XML) ਨੇ ਇਸ ਪੈਰਾਡਾਇਮ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬਦਲ ਦਿੱਤਾ। ਜਿਵੇਂ ਇੰਟਰਨੈਸ਼ਨਲ ਸਪੇਸ ਸਟੇਸ਼ਨ ਦੀ ਮੋਡਿਊਲਰ ਡਿਜ਼ਾਈਨ, ਜਿੱਥੇ ਅਸਟਰੋਨਾਟ ਪੂਰੇ ਢਾਂਚੇ ਨੂੰ ਮੁੜ ਬਣਾਉਣ ਦੇ ਬਗੈਰ ਵਿਅਕਤੀਗਤ ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹਨ, AJAX ਸਾਨੂੰ ਪੂਰੇ ਪੇਜ ਨੂੰ ਮੁੜ ਲੋਡ ਕਰਨ ਦੇ ਬਗੈਰ ਵੈੱਬਪੇਜ ਦੇ ਵਿਸ਼ੇਸ਼ ਹਿੱਸਿਆਂ ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। XML ਦਾ ਜ਼ਿਕਰ ਕਰਨ ਦੇ ਬਾਵਜੂਦ, ਅਸੀਂ ਅੱਜ ਜ਼ਿਆਦਾਤਰ JSON ਵਰਤਦੇ ਹਾਂ, ਪਰ ਮੁੱਖ ਸਿਧਾਂਤ ਇਹ ਹੈ: ਸਿਰਫ ਉਹ ਅਪਡੇਟ ਕਰੋ ਜੋ ਬਦਲਣਾ ਹੈ। ```mermaid sequenceDiagram participant User participant Browser participant JavaScript participant Server User->>Browser: Interacts with page Browser->>JavaScript: Triggers event handler JavaScript->>Server: Fetches only needed data Server->>JavaScript: Returns JSON data JavaScript->>Browser: Updates specific page elements Browser->>User: Shows updated content (no reload) ```  **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) ਵਿੱਚ ਪੂਰੀ ਅਨੁਕੂਲਤਾ ਕਹਾਣੀ ਹੈ। > **ਸਾਰ:** - Chrome, Firefox, Safari, ਅਤੇ Edge ਵਿੱਚ ਬਹੁਤ ਵਧੀਆ ਕੰਮ ਕਰਦਾ ਹੈ (ਅਸਲ ਵਿੱਚ ਜਿੱਥੇ ਤੁਹਾਡੇ ਯੂਜ਼ਰ ਹਨ) - ਸਿਰਫ Internet Explorer ਨੂੰ ਵਾਧੂ ਮਦਦ ਦੀ ਲੋੜ ਹੈ (ਅਤੇ ਸੱਚਮੁੱਚ, 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 ਕਾਲਾਂ ਦੀ ਲੋੜ ਨਹੀਂ! > 💡 **ਫਾਰਮ ਐਕਸੈਸ ਪੈਟਰਨ**: ਹਰ ਫਾਰਮ ਕੰਟਰੋਲ ਨੂੰ ਇਸਦੇ ਨਾਮ (HTML ਵਿੱਚ `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 ਯੂਜ਼ਰਨੇਮ ਪੈਰਾਮੀਟਰ ਨਾਲ - **ਲਾਗੂ ਕਰਦਾ ਹੈ** `encodeURIComponent()` ਜੋ URLs ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਅੱਖਰਾਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਤਰੀਕੇ ਨਾਲ ਸੰਭਾਲਦਾ ਹੈ - **ਬਦਲਦਾ ਹੈ** ਜਵਾਬ ਨੂੰ JSON ਫਾਰਮੈਟ ਵਿੱਚ ਸੌਖੀ ਡਾਟਾ ਮੈਨਿਪੂਲੇਸ਼ਨ ਲਈ - **ਗ੍ਰੇਸਫੁਲੀ ਸੰਭਾਲਦਾ ਹੈ** ਐਰਰਜ਼ ਨੂੰ ਇੱਕ ਐਰਰ ਆਬਜੈਕਟ ਵਾਪਸ ਕਰਕੇ ਬਜਾਏ ਕਿ ਕ੍ਰੈਸ਼ ਹੋਣ ਦੇ > ⚠️ **ਸੁਰੱਖਿਆ ਨੋਟ**: `encodeURIComponent()` ਫੰਕਸ਼ਨ URLs ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਅੱਖਰਾਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ। ਜਿਵੇਂ ਨਾਵਲ ਸੰਚਾਰ ਵਿੱਚ ਵਰਤੀਆਂ ਜਾਣ ਵਾਲੀਆਂ ਐਨਕੋਡਿੰਗ ਸਿਸਟਮ, DOM ਮੈਨਿਪੁਲੇਸ਼ਨ ਉਹ ਤਕਨੀਕ ਹੈ ਜੋ ਸਥਿਰ ਵੈੱਬ ਪੰਨਿਆਂ ਨੂੰ ਗਤੀਸ਼ੀਲ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਬਦਲ ਦਿੰਦੀ ਹੈ ਜੋ ਉਪਭੋਗਤਾ ਦੀਆਂ ਕ੍ਰਿਆਵਾਂ ਅਤੇ ਸਰਵਰ ਦੇ ਜਵਾਬਾਂ ਦੇ ਆਧਾਰ 'ਤੇ ਆਪਣਾ ਸਮੱਗਰੀ ਅਪਡੇਟ ਕਰਦੀ ਹੈ। ### ਕੰਮ ਲਈ ਸਹੀ ਸਾਧਨ ਚੁਣਨਾ ਜਦੋਂ ਤੁਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਆਪਣਾ HTML ਅਪਡੇਟ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਡੇ ਕੋਲ ਕਈ ਵਿਕਲਪ ਹੁੰਦੇ ਹਨ। ਇਹਨਾਂ ਨੂੰ ਇੱਕ ਟੂਲਬਾਕਸ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਸਾਧਨਾਂ ਵਾਂਗ ਸੋਚੋ - ਹਰ ਇੱਕ ਖਾਸ ਕੰਮਾਂ ਲਈ ਬੇਹਤਰੀਨ: | ਤਰੀਕਾ | ਇਹ ਕਿਸ ਲਈ ਵਧੀਆ ਹੈ | ਕਦੋਂ ਇਸਨੂੰ ਵਰਤਣਾ ਹੈ | ਸੁਰੱਖਿਆ ਪੱਧਰ | |-------|--------------------|--------------------|--------------| | `textContent` | ਉਪਭੋਗਤਾ ਡਾਟਾ ਸੁਰੱਖਿਅਤ ਤਰੀਕੇ ਨਾਲ ਦਿਖਾਉਣਾ | ਜਦੋਂ ਵੀ ਤੁਸੀਂ ਟੈਕਸਟ ਦਿਖਾ ਰਹੇ ਹੋ | ✅ ਬਿਲਕੁਲ ਸੁਰੱਖਿਅਤ | | `createElement()` + `append()` | ਜਟਿਲ ਲੇਆਉਟ ਬਣਾਉਣਾ | ਨਵੇਂ ਸੈਕਸ਼ਨ/ਲਿਸਟ ਬਣਾਉਣਾ | ✅ ਬਿਲਕੁਲ ਸੁਰੱਖਿਅਤ | | `innerHTML` | HTML ਸਮੱਗਰੀ ਸੈਟ ਕਰਨਾ | ⚠️ ਇਸਨੂੰ ਟਾਲਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ | ❌ ਖਤਰਨਾਕ | #### ਟੈਕਸਟ ਦਿਖਾਉਣ ਦਾ ਸੁਰੱਖਿਅਤ ਤਰੀਕਾ: textContent [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) ਪ੍ਰਾਪਰਟੀ ਤੁਹਾਡਾ ਸਭ ਤੋਂ ਵਧੀਆ ਸਾਥੀ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਉਪਭੋਗਤਾ ਡਾਟਾ ਦਿਖਾ ਰਹੇ ਹੋ। ਇਹ ਤੁਹਾਡੇ ਵੈੱਬਪੇਜ ਲਈ ਇੱਕ ਬਾਊਂਸਰ ਵਾਂਗ ਹੈ - ਕੁਝ ਵੀ ਹਾਨੀਕਾਰਕ ਅੰਦਰ ਨਹੀਂ ਆ ਸਕਦਾ: ```javascript // The safe, reliable way to update text 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 // Safe way to create new elements const transactionItem = document.createElement('div'); transactionItem.className = 'transaction-item'; transactionItem.textContent = `${transaction.date}: ${transaction.description}`; container.append(transactionItem); ``` **ਇਸ ਤਰੀਕੇ ਨੂੰ ਸਮਝਣਾ:** - **ਨਵੇਂ DOM ਤੱਤ** ਪ੍ਰੋਗਰਾਮਿੰਗ ਤਰੀਕੇ ਨਾਲ ਬਣਾਉਂਦਾ ਹੈ - **ਤੱਤਾਂ ਦੇ ਗੁਣ ਅਤੇ ਸਮੱਗਰੀ** 'ਤੇ ਪੂਰਾ ਕੰਟਰੋਲ ਰੱਖਦਾ ਹੈ - **ਜਟਿਲ, nested ਤੱਤਾਂ ਦੀ ਬਣਤਰ** ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ - **ਸੁਰੱਖਿਆ ਨੂੰ ਬਣਾਈ ਰੱਖਦਾ ਹੈ** ਸਮੱਗਰੀ ਨੂੰ ਬਣਤਰ ਤੋਂ ਵੱਖ ਕਰਕੇ > ⚠️ **ਸੁਰੱਖਿਆ ਵਿਚਾਰ**: ਜਦੋਂ ਕਿ [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) ਕਈ ਟਿਊਟੋਰਿਅਲ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ, ਇਹ embedded ਸਕ੍ਰਿਪਟ ਚਲਾ ਸਕਦਾ ਹੈ। ਜਿਵੇਂ CERN ਦੇ ਸੁਰੱਖਿਆ ਪ੍ਰੋਟੋਕੋਲ unauthorized ਕੋਡ ਚਲਾਉਣ ਤੋਂ ਰੋਕਦੇ ਹਨ, `textContent` ਅਤੇ `createElement` ਵਰਤਣਾ ਸੁਰੱਖਿਅਤ ਵਿਕਲਪ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। > **innerHTML ਦੇ ਖਤਰੇ:** - ਉਪਭੋਗਤਾ ਡਾਟਾ ਵਿੱਚ ਕੋਈ ਵੀ `