# ব্যাংকিং অ্যাপ তৈরি করুন পার্ট ৩: ডেটা সংগ্রহ এবং ব্যবহারের পদ্ধতি স্টার ট্রেকের এন্টারপ্রাইজ কম্পিউটারের কথা ভাবুন - যখন ক্যাপ্টেন পিকার্ড জাহাজের অবস্থা জানতে চান, তখন তথ্য সঙ্গে সঙ্গে প্রদর্শিত হয়, পুরো ইন্টারফেস বন্ধ হয়ে পুনরায় তৈরি না হয়ে। এই নিরবচ্ছিন্ন তথ্য প্রবাহই আমরা এখানে তৈরি করছি, ডায়নামিক ডেটা সংগ্রহের মাধ্যমে। এই মুহূর্তে, আপনার ব্যাংকিং অ্যাপটি একটি মুদ্রিত সংবাদপত্রের মতো - তথ্যপূর্ণ কিন্তু স্থির। আমরা এটিকে নাসার মিশন কন্ট্রোলের মতো কিছুতে রূপান্তরিত করতে যাচ্ছি, যেখানে ডেটা ক্রমাগত প্রবাহিত হয় এবং রিয়েল-টাইমে আপডেট হয়, ব্যবহারকারীর কাজের প্রবাহে বাধা না দিয়ে। আপনি শিখবেন কীভাবে সার্ভারের সাথে অ্যাসিঙ্ক্রোনাসভাবে যোগাযোগ করতে হয়, বিভিন্ন সময়ে আসা ডেটা পরিচালনা করতে হয় এবং কাঁচা তথ্যকে ব্যবহারকারীদের জন্য অর্থবহ কিছুতে রূপান্তর করতে হয়। এটি একটি ডেমো এবং প্রোডাকশন-রেডি সফটওয়্যারের মধ্যে পার্থক্য। ## প্রি-লেকচার কুইজ [প্রি-লেকচার কুইজ](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 সার্ভার সক্রিয় এবং প্রতিক্রিয়াশীল - নিশ্চিত করে যে আপনার অ্যাপ সার্ভারে পৌঁছাতে পারে (মিশনের আগে রেডিও যোগাযোগ পরীক্ষা করার মতো) --- ## আধুনিক ওয়েব অ্যাপে ডেটা সংগ্রহের ধারণা গত দুই দশকে ওয়েব অ্যাপ্লিকেশনগুলি ডেটা পরিচালনার পদ্ধতি নাটকীয়ভাবে বিকশিত হয়েছে। এই বিবর্তনটি বোঝা আপনাকে সাহায্য করবে কেন আধুনিক কৌশলগুলি যেমন 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) সম্পূর্ণ সামঞ্জস্যতার গল্পটি রয়েছে। > **মূল কথা:** - ক্রোম, ফায়ারফক্স, সাফারি এবং এজে দুর্দান্ত কাজ করে (মূলত যেখানে আপনার ব্যবহারকারীরা থাকে) - শুধুমাত্র ইন্টারনেট এক্সপ্লোরার অতিরিক্ত সাহায্যের প্রয়োজন (এবং সত্যি বলতে, ইআইকে বিদায় জানানোর সময় এসেছে) - আমরা পরে ব্যবহার করব এমন মার্জিত async/await প্যাটার্নের জন্য আপনাকে পুরোপুরি প্রস্তুত করে ### ব্যবহারকারী লগইন এবং ডেটা পুনরুদ্ধার বাস্তবায়ন এখন আসুন লগইন সিস্টেমটি বাস্তবায়ন করি যা আপনার ব্যাংকিং অ্যাপটিকে একটি স্থির প্রদর্শন থেকে একটি কার্যকরী অ্যাপ্লিকেশনে রূপান্তরিত করে। নিরাপদ সামরিক সুবিধায় ব্যবহৃত প্রমাণীকরণ প্রোটোকলের মতো, আমরা ব্যবহারকারীর শংসাপত্র যাচাই করব এবং তারপর তাদের নির্দিষ্ট ডেটাতে অ্যাক্সেস প্রদান করব। আমরা এটি ধাপে ধাপে তৈরি করব, মৌলিক প্রমাণীকরণ দিয়ে শুরু করে এবং তারপর ডেটা সংগ্রহের ক্ষমতা যোগ করব। #### ধাপ ১: লগইন ফাংশন ভিত্তি তৈরি করুন আপনার `app.js` ফাইল খুলুন এবং একটি নতুন `login` ফাংশন যোগ করুন। এটি ব্যবহারকারীর প্রমাণীকরণ প্রক্রিয়া পরিচালনা করবে: ```javascript async function login() { const loginForm = document.getElementById('loginForm'); const user = loginForm.user.value; } ``` **এটি কীভাবে কাজ করে তা ভেঙে দেখা যাক:** - সেই `async` কীওয়ার্ড? এটি জাভাস্ক্রিপ্টকে বলছে "এই ফাংশনটি কিছু সময় অপেক্ষা করতে পারে" - আমরা পৃষ্ঠার ফর্মটি ধরছি (কোনো ফ্যান্সি কিছু নয়, শুধু এর ID দিয়ে খুঁজছি) - তারপর আমরা ব্যবহারকারী যা টাইপ করেছেন তা টেনে আনছি তাদের ব্যবহারকারীর নাম হিসেবে - একটি চমৎকার কৌশল: আপনি HTML-এ `name` অ্যাট্রিবিউট ব্যবহার করে যেকোনো ফর্ম ইনপুট অ্যাক্সেস করতে পারেন - অতিরিক্ত getElementById কলের প্রয়োজন নেই! > 💡 **ফর্ম অ্যাক্সেস প্যাটার্ন**: প্রতিটি ফর্ম কন্ট্রোলকে তার নাম (HTML-এ `name` অ্যাট্রিবিউট ব্যবহার করে সেট করা) দ্বারা ফর্ম এলিমেন্টের একটি প্রপার্টি হিসেবে অ্যাক্সেস করা যায়। এটি ফর্ম ডেটা পাওয়ার একটি পরিষ্কার, পাঠযোগ্য উপায় প্রদান করে। #### ধাপ ২: অ্যাকাউন্ট ডেটা সংগ্রহের ফাংশন তৈরি করুন এরপর, আমরা সার্ভার থেকে অ্যাকাউন্ট ডেটা সংগ্রহের জন্য একটি ডেডিকেটেড ফাংশন তৈরি করব। এটি আপনার রেজিস্ট্রেশন ফাংশনের মতো একই প্যাটার্ন অনুসরণ করে, তবে ডেটা সংগ্রহের উপর কেন্দ্রীভূত: ```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()` URL-এ বিশেষ অক্ষর নিরাপদে পরিচালনা করতে - **রূপান্তর করে** প্রতিক্রিয়াকে JSON ফর্ম্যাটে সহজ ডেটা ম্যানিপুলেশনের জন্য - **ত্রুটি পরিচালনা করে** গ্রেসফুলি একটি ত্রুটি অবজেক্ট ফেরত দিয়ে ক্র্যাশ না করে > ⚠️ **নিরাপত্তা নোট**: `encodeURIComponent()` ফাংশন URL-এ বিশেষ অক্ষর পরিচালনা করে। নৌবাহিনীর যোগাযোগ ব্যবস্থায় ব্যবহৃত এনকোডিং সিস্টেমের মতো, এটি নিশ্চিত করে যে আপনার বার্তা ঠিক যেমনটি উদ্দেশ্য ছিল তেমনই পৌঁছায়, "#" বা "&" এর মতো অক্ষরগুলি ভুলভাবে ব্যাখ্যা হওয়া থেকে রক্ষা করে। > **কেন এটি গুরুত্বপূর্ণ:** - বিশেষ অক্ষর URL ভাঙা থেকে রক্ষা করে - URL ম্যানিপুলেশন আক্রমণ থেকে রক্ষা করে - নিশ্চিত করে যে আপনার সার্ভার উদ্দেশ্যযুক্ত ডেটা পায় - নিরাপদ কোডিং অনুশীলন অনুসরণ করে #### HTTP GET অনুরোধ বোঝা ```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'); } ``` #### ধাপ ৩: সবকিছু একত্রিত করা ```javascript // This holds the current user's account data let account = null; ``` #### ধাপ ৪: আপনার ডেটার জন্য একটি স্থান তৈরি করা ```html

``` #### ধাপ ৫: আপনার ফর্মটি সংযুক্ত করুন ```javascript // Add these lines at the end of your register function account = result; navigate('/dashboard'); ``` #### ধাপ ৬: আপনার রেজিস্ট্রেশন ফাংশন উন্নত করুন ```mermaid flowchart TD A[User enters credentials] --> B[Login function called] B --> C[Fetch account data from server] C --> D{Data received successfully?} D -->|Yes| E[Store account data globally] D -->|No| F[Display error message] E --> G[Navigate to dashboard] F --> H[User stays on login page] ``` #### আপনার বাস্তবায়ন পরীক্ষা করা ```javascript // The safe, reliable way to update text const balanceElement = document.getElementById('balance'); balanceElement.textContent = account.balance; ``` #### ক্রস-অরিজিন ম্যাজিক সম্পর্কে একটি দ্রুত কথা ```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); ``` ## HTML-এ আপনার ডেটা জীবন্ত করে তোলা ```html

Login ``` ### সঠিক টুল নির্বাচন ```javascript function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` #### টেক্সট দেখানোর নিরাপদ উপায়: textContent ```javascript // Instead of just logging to console, show the user what's wrong if (data.error) { return updateElement('loginError', data.error); } ``` #### ডায়নামিক 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 উপাদান তৈরি করে** প্রোগ্রাম্যাটিকভাবে - **সম্পূর্ণ নিয়ন্ত্রণ বজায় রাখে** উপাদানের বৈশিষ্ট্য এবং বিষয়বস্তুর উপর - **জটিল, নেস্টেড উপাদান কাঠামো তৈরি করতে সক্ষম করে** - **নিরাপত্তা বজায় রাখে** কাঠামো এবং বিষয়বস্তুকে আলাদা করে > ⚠️ **নিরাপত্তা বিবেচনা**: যদিও অনেক টিউটোরিয়ালে [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) ব্যবহৃত হয়, এটি এম্বেড করা স্ক্রিপ্ট কার্যকর করতে পারে। CERN-এর নিরাপত্তা প্রোটোকলের মতো যা অননুমোদিত কোড কার্যকর হওয়া থেকে রক্ষা করে, `textContent` এবং `createElement` ব্যবহার করা নিরাপদ বিকল্প প্রদান করে। > **innerHTML-এর ঝুঁকি:** - ব্যবহারকারীর ডেটায় থাকা যেকোনো `