Aurelia এর সাথে ডেটা সংগ্রহ

Aurelia একটি মডার্ন, ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা ডেটা বাইন্ডিং এবং ডেটা সংগ্রহের ক্ষেত্রে শক্তিশালী ফিচার সরবরাহ করে। ডেটা সংগ্রহ বলতে মূলত আপনার অ্যাপ্লিকেশনে থেকে তথ্য বা ডেটা একটি নির্দিষ্ট উৎস থেকে সংগ্রহ করে সেই ডেটা UI তে প্রদর্শন করা বোঝায়। Aurelia এই ডেটা সংগ্রহ প্রক্রিয়াটি সহজ এবং কার্যকরী করতে বিভিন্ন কৌশল প্রদান করে, যেমন API কল (RESTful API বা GraphQL), WebSocket এবং Local Storage ইত্যাদি।

এখানে আমরা Aurelia ফ্রেমওয়ার্কের সাথে ডেটা সংগ্রহের কিছু পদ্ধতি আলোচনা করব।

১. API কল (RESTful API বা GraphQL)

Aurelia-তে ডেটা সংগ্রহের অন্যতম জনপ্রিয় পদ্ধতি হলো API কল করা। সাধারণত RESTful API ব্যবহার করে আপনি ডেটা সংগ্রহ করতে পারেন এবং তারপর সেটি আপনার UI তে রেন্ডার করতে পারেন।

উদাহরণ: API থেকে ডেটা সংগ্রহ করা

ধরা যাক, আপনি একটি পাবলিক REST API থেকে ডেটা সংগ্রহ করতে চান এবং তা টেমপ্লেটে প্রদর্শন করতে চান।

Step 1: HTTP Client ইনস্টল করা

Aurelia তে HTTP API কল করতে Aurelia HttpClient ব্যবহার করা হয়। এটি aurelia-fetch-client প্যাকেজে অন্তর্ভুক্ত থাকে। প্রথমে আপনাকে এই প্যাকেজটি ইনস্টল করতে হবে:

npm install aurelia-fetch-client

Step 2: API কল করার কোড

এখন view-model-এ API কল করার জন্য HttpClient ব্যবহার করুন:

import {HttpClient} from 'aurelia-fetch-client';

export class App {
  users = [];

  constructor() {
    this.http = new HttpClient();
  }

  activate() {
    // API কল করা
    this.http.fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => {
        this.users = data;  // API থেকে প্রাপ্ত ডেটা users অ্যারে তে সেভ করা
      })
      .catch(error => console.log('Error fetching data: ', error));
  }
}

Step 3: ডেটা টেমপ্লেটে প্রদর্শন

এখন users অ্যারের ডেটা HTML টেমপ্লেটে প্রদর্শন করুন:

<template>
  <h2>Users List</h2>
  <ul>
    <li repeat.for="user of users">${user.name}</li>
  </ul>
</template>

এখানে repeat.for ডিরেক্টিভ ব্যবহার করে আপনি API থেকে পাওয়া users অ্যারের প্রতিটি আইটেমের উপর লুপ করতে পারবেন এবং প্রতিটি user.name টেমপ্লেটে রেন্ডার হবে।

২. WebSocket (রিয়েল-টাইম ডেটা সংগ্রহ)

Aurelia-তে রিয়েল-টাইম ডেটা সংগ্রহ করতে আপনি WebSocket ব্যবহার করতে পারেন। WebSocket সরাসরি ব্রাউজার এবং সার্ভারের মধ্যে একটি দ্বিমুখী যোগাযোগ ব্যবস্থা প্রদান করে।

উদাহরণ: WebSocket ব্যবহার করে রিয়েল-টাইম ডেটা সংগ্রহ

ধরা যাক, আপনি WebSocket ব্যবহার করে রিয়েল-টাইম চ্যাট অ্যাপ্লিকেশন তৈরি করতে চান।

Step 1: WebSocket এর সাথে কানেক্ট হওয়া

view-model-এ WebSocket কানেকশন তৈরি করতে:

export class App {
  messages = [];
  socket;

  constructor() {
    this.socket = new WebSocket('ws://example.com/socket');
    this.socket.onmessage = (event) => {
      const message = JSON.parse(event.data);
      this.messages.push(message);
    };
  }

  sendMessage() {
    const message = { text: 'Hello World' };
    this.socket.send(JSON.stringify(message));
  }
}

Step 2: ডেটা UI তে প্রদর্শন করা

messages অ্যারের ডেটা UI তে প্রদর্শন করতে:

<template>
  <h2>Real-Time Chat</h2>
  <ul>
    <li repeat.for="message of messages">${message.text}</li>
  </ul>
  <button click.delegate="sendMessage()">Send Message</button>
</template>

এখানে messages অ্যারে তে আসা নতুন মেসেজগুলো UI তে রিয়েল-টাইমে প্রদর্শিত হবে।

৩. Local Storage ব্যবহার করে ডেটা সংগ্রহ

যদি আপনি ক্লায়েন্ট সাইডে ডেটা রাখতে চান এবং পরবর্তীতে সেই ডেটা ব্যবহার করতে চান, তাহলে Local Storage একটি ভালো পদ্ধতি। Aurelia আপনাকে Web API এর মাধ্যমে Local Storage ব্যবহার করার সুবিধা দেয়।

উদাহরণ: Local Storage থেকে ডেটা সংগ্রহ করা

Step 1: Local Storage থেকে ডেটা সংগ্রহ

export class App {
  storedData = null;

  activate() {
    this.storedData = JSON.parse(localStorage.getItem('myData'));
  }

  saveData() {
    const data = { name: 'John', age: 30 };
    localStorage.setItem('myData', JSON.stringify(data));
  }
}

Step 2: ডেটা UI তে প্রদর্শন

<template>
  <h2>Stored Data</h2>
  <div>${storedData ? storedData.name : 'No Data Found'}</div>
  <button click.delegate="saveData()">Save Data</button>
</template>

এখানে, LocalStorage থেকে myData নামের ডেটা সংগ্রহ করা হয়েছে এবং UI তে সেটি প্রদর্শন করা হয়েছে। আপনি Save Data বাটনে ক্লিক করে ডেটা সেভও করতে পারবেন।

৪. Form ডেটা সংগ্রহ

Aurelia-তে ফর্ম ডেটা সংগ্রহ এবং বাইন্ডিং করা খুবই সহজ। আপনি two-way binding ব্যবহার করে ইনপুট ফিল্ড থেকে ডেটা সংগ্রহ করতে পারেন।

উদাহরণ: ফর্ম ডেটা সংগ্রহ

<template>
  <form submit.delegate="submitForm()">
    <label>Name:</label>
    <input value.bind="name">
    <button type="submit">Submit</button>
  </form>
  <p>Your name is: ${name}</p>
</template>

export class App {
  name = '';

  submitForm() {
    alert(`Name Submitted: ${this.name}`);
  }
}

এখানে two-way binding ব্যবহার করা হয়েছে, যেখানে ইনপুট ফিল্ডের মান name প্রপার্টির সাথে বাইন্ড করা হয়েছে। ফর্ম সাবমিট হলে submitForm মেথড কল হবে এবং নাম প্রদর্শিত হবে।

উপসংহার

Aurelia-তে ডেটা সংগ্রহের জন্য আপনি বিভিন্ন পদ্ধতি ব্যবহার করতে পারেন যেমন API কল, WebSocket, LocalStorage এবং Form বাইন্ডিং। Aurelia-র শক্তিশালী data binding এবং HTTP client ব্যবহার করে আপনি সহজেই আপনার অ্যাপ্লিকেশনে ডেটা সংগ্রহ করতে পারেন এবং UI তে তা রেন্ডার করতে পারেন। এটি ডেভেলপারদের জন্য ওয়েব অ্যাপ্লিকেশন নির্মাণে দ্রুততা এবং সুবিধা প্রদান করে।