HTTP এবং Remote Data Handling

Aurelia ফ্রেমওয়ার্কে HTTP এবং Remote Data Handling খুবই গুরুত্বপূর্ণ। এটি আপনাকে RESTful API অথবা অন্য যেকোনো রিমোট ডেটা সোর্স থেকে ডেটা সংগ্রহ করতে এবং সেই ডেটা অ্যাপ্লিকেশনের ভিউতে প্রদর্শন করতে সহায়তা করে। Aurelia HTTP ক্লায়েন্ট ব্যবহার করে আপনি সহজে HTTP রিকোয়েস্ট পাঠাতে, রেসপন্স গ্রহণ করতে এবং ডেটা ম্যানিপুলেট করতে পারেন।

১. Aurelia HTTP ক্লায়েন্ট

Aurelia ফ্রেমওয়ার্কে HTTP রিকোয়েস্ট পাঠানোর জন্য একটি শক্তিশালী HttpClient ক্লাস রয়েছে, যা আপনাকে GET, POST, PUT, DELETE রিকোয়েস্ট পাঠাতে সহায়তা করে। এটি JSON ডেটা বা অন্য যেকোনো ফরম্যাটের রেসপন্স প্রক্রিয়া করতে পারে।

HTTP ক্লায়েন্ট ব্যবহার করা

প্রথমে, আপনার অ্যাপ্লিকেশন ফাইলে HttpClient ইনজেক্ট করতে হবে এবং তারপর HTTP রিকোয়েস্ট পাঠাতে হবে। উদাহরণস্বরূপ, আমরা একটি API থেকে ডেটা পাঠানোর প্রক্রিয়া দেখবো।

HttpClient ইনজেক্ট করা

book.js (কম্পোনেন্ট ভিউমডেল):

import { HttpClient } from 'aurelia-fetch-client';
import 'fetch';  // HTTP ক্লায়েন্টের জন্য Fetch API ব্যবহার

export class Book {
  static inject = [HttpClient];

  constructor(http) {
    this.http = http;
    this.books = [];
  }

  activate() {
    // API থেকে ডেটা ফেচ করা
    this.http.fetch('https://api.example.com/books')
      .then(response => response.json())  // JSON হিসেবে রেসপন্স পেতে
      .then(data => {
        this.books = data;  // ডেটা অ্যাসাইন করা
      })
      .catch(error => {
        console.error('Error fetching books:', error);
      });
  }
}

এখানে, HttpClient ইনজেক্ট করা হয়েছে এবং fetch() মেথড ব্যবহার করে আমরা GET রিকোয়েস্ট পাঠিয়েছি, যা একটি রিমোট API থেকে বইয়ের ডেটা আনে। তারপর সেই ডেটা আমরা কম্পোনেন্টের books অ্যারে তে জমা করি এবং UI-তে প্রদর্শন করি।

GET রিকোয়েস্ট (Fetch)

fetch() মেথডের মাধ্যমে আপনি HTTP GET রিকোয়েস্ট পাঠাতে পারেন। এটি একটি প্রমিস (Promise) রিটার্ন করে, যা সফল হলে .then() ব্লক কল করবে এবং অ্যাসিঙ্ক্রোনাস ডেটা হ্যান্ডলিং সম্ভব করবে।

this.http.fetch('https://api.example.com/books')
  .then(response => response.json())
  .then(data => this.books = data)
  .catch(error => console.log('Error:', error));

২. POST রিকোয়েস্ট (Data পাঠানো)

ধরা যাক, আপনি একটি নতুন বই যোগ করতে চান। এতে POST রিকোয়েস্ট ব্যবহার করা হবে।

POST রিকোয়েস্ট পাঠানো

addBook(book) {
  this.http.fetch('https://api.example.com/books', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(book)  // বইয়ের ডেটা JSON ফরম্যাটে পাঠানো
  })
  .then(response => response.json())
  .then(data => {
    console.log('Book added:', data);
  })
  .catch(error => {
    console.error('Error adding book:', error);
  });
}

এখানে, POST রিকোয়েস্ট পাঠানো হচ্ছে একটি নতুন বইয়ের ডেটা নিয়ে, এবং body হিসেবে JSON ফরম্যাটে পাঠানো হচ্ছে।

৩. PUT এবং DELETE রিকোয়েস্ট

যেকোনো রিমোট ডেটা ম্যানিপুলেশন এর জন্য আপনি PUT এবং DELETE রিকোয়েস্টও পাঠাতে পারেন।

PUT রিকোয়েস্ট (ডেটা আপডেট করা)

updateBook(id, updatedBook) {
  this.http.fetch(`https://api.example.com/books/${id}`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(updatedBook)  // বইয়ের আপডেট করা ডেটা
  })
  .then(response => response.json())
  .then(data => {
    console.log('Book updated:', data);
  })
  .catch(error => {
    console.error('Error updating book:', error);
  });
}

DELETE রিকোয়েস্ট (ডেটা মুছে ফেলা)

deleteBook(id) {
  this.http.fetch(`https://api.example.com/books/${id}`, {
    method: 'DELETE'
  })
  .then(response => {
    if (response.ok) {
      console.log('Book deleted successfully');
    }
  })
  .catch(error => {
    console.error('Error deleting book:', error);
  });
}

৪. Query Strings এবং URL Parameters

কখনও কখনও, আপনাকে API রিকোয়েস্টের সাথে Query Strings বা URL Parameters পাস করতে হতে পারে। Aurelia HTTP ক্লায়েন্ট সহজেই এই ডেটা পাস করতে সহায়তা করে।

Query String যুক্ত GET রিকোয়েস্ট

this.http.fetch('https://api.example.com/books?author=JohnDoe')
  .then(response => response.json())
  .then(data => this.books = data)
  .catch(error => console.error('Error fetching books:', error));

এখানে, ?author=JohnDoe কুয়েরি স্ট্রিং দিয়ে আমরা নির্দিষ্ট author এর বইগুলো ফেচ করছি।

URL Parameters সহ GET রিকোয়েস্ট

this.http.fetch(`https://api.example.com/books/${bookId}`)
  .then(response => response.json())
  .then(data => {
    this.bookDetails = data;
  })
  .catch(error => console.error('Error fetching book details:', error));

এখানে, bookId URL প্যারামিটার হিসেবে পাস করা হচ্ছে যা API এর মাধ্যমে একটি নির্দিষ্ট বইয়ের বিস্তারিত তথ্য নেয়।

৫. Aurelia Fetch Client Setup

Aurelia HTTP ক্লায়েন্টের জন্য fetch পলিফিল ব্যবহার করা হয়। যদি আপনার অ্যাপ্লিকেশনে fetch পলিফিলের প্রয়োজন না হয়, তাহলে আপনি aurelia-fetch-client প্যাকেজটি ইনস্টল করতে পারেন।

প্যাকেজ ইনস্টল করা

npm install aurelia-fetch-client --save

উপসংহার

Aurelia HTTP ক্লায়েন্ট আপনাকে সহজেই remote data সংগ্রহ করতে এবং API রিকোয়েস্ট করতে সক্ষম করে। আপনি GET, POST, PUT, DELETE রিকোয়েস্ট সহ URL প্যারামিটার এবং কুয়েরি স্ট্রিং ব্যবহার করে ডেটা রিসিভ এবং পাঠাতে পারেন। এই সব ফিচারগুলোর মাধ্যমে আপনি API এর সাথে ইন্টিগ্রেটেড অ্যাপ্লিকেশন তৈরি করতে পারবেন এবং ডাইনামিক ডেটা ম্যানিপুলেশন সহজে করতে পারবেন।

Aurelia এর HTTP Client একটি শক্তিশালী টুল যা আপনাকে আপনার অ্যাপ্লিকেশন থেকে HTTP রিকোয়েস্ট পাঠাতে এবং রেসপন্স গ্রহণ করতে সাহায্য করে। এটি RESTful API বা অন্য যেকোনো HTTP সার্ভিসের সাথে যোগাযোগ করার জন্য ব্যবহার করা হয়। Aurelia এর HTTP Client খুবই সহজ এবং ফ্লেক্সিবল, যা আপনি GET, POST, PUT, DELETE সহ বিভিন্ন HTTP মেথড ব্যবহার করতে পারেন।

১. Aurelia HTTP ক্লায়েন্ট ইনস্টল এবং কনফিগার করা

Aurelia HTTP ক্লায়েন্ট ব্যবহার করতে হলে প্রথমে আপনাকে aurelia-fetch-client প্যাকেজটি ইনস্টল করতে হবে, যেটি Aurelia এর HTTP ক্লায়েন্ট প্রদান করে।

প্যাকেজ ইনস্টল করা:

npm install aurelia-fetch-client

HTTP ক্লায়েন্ট কনফিগারেশন:

প্রথমে, আপনাকে HTTPClient ক্লাসটি আপনার অ্যাপ্লিকেশনে ইমপোর্ট এবং কনফিগার করতে হবে। এটি সাধারণত main.js বা main.ts ফাইলে কনফিগার করা হয়।

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

export function configure(aurelia) {
  aurelia.container.get(HttpClient)
    .configure(config => {
      config
        .withBaseUrl('https://api.example.com/')
        .withDefaults({
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          }
        })
        .withInterceptor({
          request(request) {
            console.log('Request:', request);
            return request;
          },
          response(response) {
            console.log('Response:', response);
            return response;
          },
          responseError(error) {
            console.log('Error:', error);
            return Promise.reject(error);
          }
        });
    });
}

এখানে withBaseUrl দিয়ে আমরা API এর বেস URL কনফিগার করছি এবং withDefaults দিয়ে কিছু সাধারণ হেডার সেট করছি।

২. GET রিকোয়েস্ট ব্যবহার করা

HTTP Client এর মাধ্যমে GET রিকোয়েস্ট পাঠাতে খুবই সহজ। আপনি fetch মেথড ব্যবহার করে যেকোনো URL থেকে ডেটা রিটার্ন করতে পারেন।

উদাহরণ:

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

export class App {
  httpClient = new HttpClient();
  data = [];

  activate() {
    this.httpClient.fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(json => {
        this.data = json;
        console.log(this.data);
      })
      .catch(error => console.log(error));
  }
}

এখানে fetch মেথডের মাধ্যমে GET রিকোয়েস্ট পাঠানো হচ্ছে এবং রেসপন্সকে JSON ফরম্যাটে পার্স করা হচ্ছে।

৩. POST রিকোয়েস্ট ব্যবহার করা

Aurelia HTTP Client ব্যবহার করে POST রিকোয়েস্ট পাঠানোও সহজ। আপনি ডেটা পাঠাতে post মেথড ব্যবহার করতে পারেন।

উদাহরণ:

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

export class App {
  httpClient = new HttpClient();
  responseMessage = '';

  submitData() {
    const data = { name: 'John', age: 30 };

    this.httpClient.post('https://api.example.com/data', JSON.stringify(data))
      .then(response => response.json())
      .then(json => {
        this.responseMessage = json.message;
        console.log(this.responseMessage);
      })
      .catch(error => console.log(error));
  }
}

এখানে post মেথডের মাধ্যমে আমরা data পাঠাচ্ছি এবং JSON.stringify ব্যবহার করে সেই ডেটাকে JSON ফরম্যাটে রূপান্তর করছি। রেসপন্সে ফেরত পাওয়া message প্রপার্টি আমরা UI তে দেখাচ্ছি।

৪. PUT রিকোয়েস্ট ব্যবহার করা

PUT রিকোয়েস্ট সাধারণত রিসোর্সের পুরো ডেটা আপডেট করতে ব্যবহৃত হয়। PUT রিকোয়েস্ট পাঠানোর জন্য put মেথড ব্যবহার করতে হয়।

উদাহরণ:

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

export class App {
  httpClient = new HttpClient();
  updatedMessage = '';

  updateData() {
    const data = { name: 'John', age: 31 };

    this.httpClient.put('https://api.example.com/data/1', JSON.stringify(data))
      .then(response => response.json())
      .then(json => {
        this.updatedMessage = json.message;
        console.log(this.updatedMessage);
      })
      .catch(error => console.log(error));
  }
}

এখানে put মেথডের মাধ্যমে আমরা একটি নির্দিষ্ট রিসোর্স data/1 আপডেট করতে পাঠাচ্ছি এবং রেসপন্সে ফেরত পাওয়া message প্রপার্টি UI তে প্রদর্শন করছি।

৫. DELETE রিকোয়েস্ট ব্যবহার করা

DELETE রিকোয়েস্ট ব্যবহৃত হয় কোনো রিসোর্স মুছে ফেলার জন্য। DELETE রিকোয়েস্ট পাঠানোর জন্য delete মেথড ব্যবহার করা হয়।

উদাহরণ:

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

export class App {
  httpClient = new HttpClient();
  deleteMessage = '';

  deleteData() {
    this.httpClient.delete('https://api.example.com/data/1')
      .then(response => response.json())
      .then(json => {
        this.deleteMessage = json.message;
        console.log(this.deleteMessage);
      })
      .catch(error => console.log(error));
  }
}

এখানে delete মেথডের মাধ্যমে আমরা data/1 রিসোর্সটি মুছে ফেলতে পাঠাচ্ছি এবং রেসপন্সে ফেরত পাওয়া message প্রপার্টি UI তে দেখাচ্ছি।

৬. Error Handling

Aurelia HTTP Client এর মাধ্যমে আপনি সহজেই রিকোয়েস্টের error handling করতে পারেন। আপনি catch ব্লক ব্যবহার করে যেকোনো রিকোয়েস্টের ভুল ক্যাচ করতে পারবেন।

উদাহরণ:

this.httpClient.fetch('https://api.example.com/invalid-url')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(json => console.log(json))
  .catch(error => console.error('There was a problem with the fetch operation:', error));

এখানে catch ব্লক ব্যবহার করা হয়েছে, যাতে কোনো রিকোয়েস্টের ভুল হলে তা সঠিকভাবে handle করা যায়।

উপসংহার

Aurelia এর HTTP Client আপনাকে সহজে এবং কার্যকরভাবে HTTP রিকোয়েস্ট পাঠাতে সহায়তা করে। আপনি GET, POST, PUT, এবং DELETE রিকোয়েস্টগুলোর মাধ্যমে API থেকে ডেটা নিয়ে আসতে, পাঠাতে, আপডেট করতে এবং মুছে ফেলতে পারবেন। HTTP Client এর মাধ্যমে আপনি খুব সহজেই এপ্লিকেশন এবং API এর মধ্যে যোগাযোগ করতে পারেন, এবং এর error handling সিস্টেম নিশ্চিত করে যে কোনো সমস্যার ক্ষেত্রে ডেভেলপার সঠিকভাবে রেসপন্স পাবেন।

Aurelia ফ্রেমওয়ার্কে Remote API এর সাথে কাজ করার জন্য আপনি HTTP অনুরোধ (Requests) পাঠানোর জন্য Fetch API বা Aurelia HTTP Client ব্যবহার করতে পারেন। এই টিউটোরিয়ালে আমরা GET, POST, PUT, এবং DELETE রিকোয়েস্টগুলি পাঠানোর জন্য Aurelia এর HttpClient ক্লাস ব্যবহার করার পদ্ধতি দেখাবো।

১. Aurelia HTTP Client সেটআপ

Aurelia প্রজেক্টে HttpClient ব্যবহার করতে প্রথমে HttpClient ক্লাস ইনপোর্ট করতে হবে এবং সেটি ইনজেক্ট করতে হবে।

HttpClient ইনপোর্ট এবং সেটআপ

আপনার কম্পোনেন্ট বা সার্ভিস ফাইলে প্রথমে HttpClient ইনপোর্ট করুন:

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

export class ApiService {
  constructor() {
    this.httpClient = new HttpClient();
  }
}

এখন আপনি HttpClient ব্যবহার করে API রিকোয়েস্ট পাঠাতে পারবেন।

২. GET রিকোয়েস্ট

GET রিকোয়েস্ট সাধারণত সার্ভার থেকে ডেটা নিয়ে আসার জন্য ব্যবহার করা হয়।

GET রিকোয়েস্ট উদাহরণ:

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

export class ApiService {
  constructor() {
    this.httpClient = new HttpClient();
  }

  getData() {
    this.httpClient.fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => {
        console.log(data);
      })
      .catch(error => console.error('Error:', error));
  }
}

এখানে GET রিকোয়েস্ট ব্যবহার করে https://jsonplaceholder.typicode.com/posts URL থেকে ডেটা আনা হয়েছে এবং সেটি কনসোলে প্রদর্শিত হচ্ছে।

৩. POST রিকোয়েস্ট

POST রিকোয়েস্ট সাধারণত সার্ভারে নতুন ডেটা পাঠানোর জন্য ব্যবহৃত হয়।

POST রিকোয়েস্ট উদাহরণ:

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

export class ApiService {
  constructor() {
    this.httpClient = new HttpClient();
  }

  postData() {
    const postData = {
      title: 'foo',
      body: 'bar',
      userId: 1
    };

    this.httpClient.fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify(postData),
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .then(response => response.json())
    .then(data => {
      console.log('Data sent:', data);
    })
    .catch(error => console.error('Error:', error));
  }
}

এখানে POST রিকোয়েস্টে ডেটা (title, body, userId) সার্ভারে পাঠানো হচ্ছে এবং সার্ভার থেকে রেসপন্স আসলে সেটি কনসোলে প্রদর্শিত হচ্ছে।

৪. PUT রিকোয়েস্ট

PUT রিকোয়েস্ট সাধারণত সার্ভারে ইতিমধ্যে থাকা ডেটা আপডেট করতে ব্যবহার করা হয়।

PUT রিকোয়েস্ট উদাহরণ:

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

export class ApiService {
  constructor() {
    this.httpClient = new HttpClient();
  }

  putData() {
    const updatedData = {
      id: 1,
      title: 'foo updated',
      body: 'bar updated',
      userId: 1
    };

    this.httpClient.fetch('https://jsonplaceholder.typicode.com/posts/1', {
      method: 'PUT',
      body: JSON.stringify(updatedData),
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .then(response => response.json())
    .then(data => {
      console.log('Updated data:', data);
    })
    .catch(error => console.error('Error:', error));
  }
}

এখানে PUT রিকোয়েস্ট ব্যবহার করে https://jsonplaceholder.typicode.com/posts/1 URL-এ থাকা প্রথম পোস্টটি আপডেট করা হয়েছে এবং আপডেট হওয়া ডেটা কনসোলে প্রদর্শিত হচ্ছে।

৫. DELETE রিকোয়েস্ট

DELETE রিকোয়েস্ট সাধারণত সার্ভার থেকে কোনো রিসোর্স বা ডেটা মুছে ফেলতে ব্যবহার করা হয়।

DELETE রিকোয়েস্ট উদাহরণ:

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

export class ApiService {
  constructor() {
    this.httpClient = new HttpClient();
  }

  deleteData() {
    this.httpClient.fetch('https://jsonplaceholder.typicode.com/posts/1', {
      method: 'DELETE'
    })
    .then(response => {
      if (response.ok) {
        console.log('Post deleted');
      } else {
        console.error('Failed to delete');
      }
    })
    .catch(error => console.error('Error:', error));
  }
}

এখানে DELETE রিকোয়েস্ট ব্যবহার করে https://jsonplaceholder.typicode.com/posts/1 URL থেকে প্রথম পোস্টটি ডিলিট করা হচ্ছে।

৬. Aurelia HttpClient এর সাথে কাস্টম হেডার এবং অন্যান্য অপশন

Aurelia HttpClient-এ আপনি কাস্টম হেডার এবং অন্যান্য অপশন ব্যবহার করতে পারেন, যেমন অটেনটিকেশন টোকেন বা অন্যান্য কাস্টম হেডার যুক্ত করা।

কাস্টম হেডার সহ POST রিকোয়েস্ট উদাহরণ:

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

export class ApiService {
  constructor() {
    this.httpClient = new HttpClient();
  }

  postDataWithAuth() {
    const postData = {
      title: 'foo',
      body: 'bar',
      userId: 1
    };

    this.httpClient.fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify(postData),
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer your-auth-token'
      }
    })
    .then(response => response.json())
    .then(data => {
      console.log('Data sent with auth:', data);
    })
    .catch(error => console.error('Error:', error));
  }
}

এখানে, Authorization হেডার দিয়ে একটি Bearer token পাঠানো হচ্ছে।

উপসংহার

Aurelia এর HttpClient ব্যবহার করে আপনি সহজেই GET, POST, PUT, এবং DELETE রিকোয়েস্ট করতে পারেন এবং সার্ভারের সাথে ডেটা আদান-প্রদান করতে পারেন। এটি RESTful API ইন্টিগ্রেশন খুবই সহজ এবং শক্তিশালী করে তোলে। Aurelia এর এই সুবিধাগুলো ব্যবহার করে আপনি API-র সাথে একীভূত অ্যাপ্লিকেশন তৈরি করতে পারবেন যা ডাইনামিক ডেটা প্রসেস এবং ইন্টারঅ্যাকশন করবে।

Aurelia ফ্রেমওয়ার্কে AJAX রিকোয়েস্ট এবং ফেচ ক্লায়েন্ট ব্যবহার করা খুবই সহজ এবং কার্যকর। AJAX (Asynchronous JavaScript and XML) হলো একটি প্রযুক্তি যা ওয়েব পেজের ব্যাকগ্রাউন্ডে সার্ভারের সাথে যোগাযোগ করতে সাহায্য করে এবং পেজটি পুনরায় লোড না করেই ডেটা আপডেট করতে সক্ষম করে।

Aurelia, JavaScript ফেচ API এবং অন্যান্য AJAX টুলগুলির মাধ্যমে সহজেই HTTP রিকোয়েস্ট করতে সক্ষম। নিচে Aurelia-তে ফেচ ক্লায়েন্ট ব্যবহার করে AJAX রিকোয়েস্ট করার একটি বিস্তারিত গাইড দেওয়া হলো।

ফেচ API ব্যবহার করে AJAX রিকোয়েস্ট করা

Aurelia ফ্রেমওয়ার্কে ফেচ API ব্যবহার করা একটি সাধারণ এবং আধুনিক পদ্ধতি। ফেচ ক্লায়েন্ট সরাসরি HTTP রিকোয়েস্ট করতে সাহায্য করে এবং এর মাধ্যমে আপনি RESTful API এর সাথে ইন্টারঅ্যাক্ট করতে পারেন।

১. ফেচ API ব্যবহার করার জন্য একটি ফাংশন তৈরি করা

Aurelia অ্যাপ্লিকেশনে API থেকে ডেটা ফেচ করতে, আপনি সাধারণত fetch ফাংশন ব্যবহার করবেন।

উদাহরণ: GET রিকোয়েস্ট

export class App {
  data = [];

  activate() {
    fetch('https://jsonplaceholder.typicode.com/posts')  // API URL
      .then(response => response.json())  // JSON রেসপন্স গ্রহণ
      .then(data => {
        this.data = data;  // ডেটা প্রক্রিয়াকরণ
      })
      .catch(error => console.log('Error fetching data: ', error));  // এরর হ্যান্ডলিং
  }
}

এখানে, fetch ফাংশন ব্যবহার করা হয়েছে যা API থেকে ডেটা আনে এবং .then() এর মাধ্যমে JSON ডেটা প্রসেস করে this.data এ সেট করে।

HTML টেমপ্লেট:

<template>
  <h2>Fetched Data</h2>
  <ul>
    <li repeat.for="item of data">${item.title}</li>  <!-- ডেটা প্রদর্শন -->
  </ul>
</template>

এখানে, repeat.for="item of data" দ্বারা ডেটার প্রতিটি আইটেমের জন্য একটি <li> তৈরি হবে এবং এর মধ্যে item.title প্রদর্শিত হবে।

২. POST রিকোয়েস্ট পাঠানো

ফেচ ক্লায়েন্ট শুধুমাত্র GET রিকোয়েস্টের জন্য নয়, POST রিকোয়েস্টের জন্যও ব্যবহার করা যায়। এটি ব্যবহারকারী ইনপুট বা ফর্মের মাধ্যমে ডেটা পাঠাতে সাহায্য করে।

উদাহরণ: POST রিকোয়েস্ট

export class App {
  message = '';
  
  submitForm() {
    const data = {
      title: 'My Post',
      body: 'This is the body of the post',
      userId: 1
    };

    fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)  // ডেটা JSON ফরম্যাটে রূপান্তর
    })
    .then(response => response.json())  // রেসপন্স JSON ফরম্যাটে
    .then(json => {
      this.message = 'Post successfully created!';
    })
    .catch(error => console.log('Error posting data: ', error));  // এরর হ্যান্ডলিং
  }
}

HTML টেমপ্লেট:

<template>
  <button click.delegate="submitForm()">Submit Post</button>
  <p>${message}</p>  <!-- রেসপন্স মেসেজ -->
</template>

এখানে, submitForm() ফাংশনটি POST রিকোয়েস্ট পাঠাচ্ছে এবং API থেকে রেসপন্স পাওয়ার পর একটি মেসেজ দেখাচ্ছে।

৩. AJAX রিকোয়েস্টে Headers ব্যবহার

কিছু API রিকোয়েস্টে Authorization বা অন্য কোনো বিশেষ header পাঠাতে হতে পারে। এটি fetch এর মাধ্যমে খুব সহজেই করা যায়।

উদাহরণ: Headers সহ GET রিকোয়েস্ট

export class App {
  data = [];

  activate() {
    const headers = new Headers();
    headers.append("Authorization", "Bearer token_value");

    fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'GET',
      headers: headers  // Headers যোগ করা হচ্ছে
    })
    .then(response => response.json())
    .then(data => {
      this.data = data;
    })
    .catch(error => console.log('Error fetching data: ', error));
  }
}

এখানে, headers.append() মেথড দিয়ে Authorization হেডার পাঠানো হয়েছে।

Aurelia HttpClient ব্যবহার করে AJAX রিকোয়েস্ট

Aurelia তে একটি বিল্ট-ইন HttpClient ক্লাস রয়েছে যা আরও উন্নত HTTP রিকোয়েস্ট ফিচার প্রদান করে। এটি অ্যাপ্লিকেশনের জন্য ব্যবহারকারী HTTP রিকোয়েস্ট প্রক্রিয়াটি সহজ করে তোলে এবং মেথডগুলো যেমন GET, POST, PUT, DELETE, ইত্যাদি সাপোর্ট করে।

১. HttpClient ইনজেক্ট করা

Aurelia অ্যাপ্লিকেশনে HttpClient ইনজেক্ট করতে আপনাকে Dependency Injection ব্যবহার করতে হবে।

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

export class App {
  data = [];

  constructor(http) {
    this.http = http;  // HttpClient ইনজেক্ট করা হচ্ছে
  }

  activate() {
    this.http.fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => {
        this.data = data;
      })
      .catch(error => console.log('Error fetching data: ', error));
  }
}

২. POST রিকোয়েস্ট HttpClient এর মাধ্যমে

Aurelia HttpClient এর মাধ্যমে POST রিকোয়েস্ট করার জন্য:

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

export class App {
  message = '';

  constructor(http) {
    this.http = http;  // HttpClient ইনজেক্ট করা হচ্ছে
  }

  submitForm() {
    const data = {
      title: 'New Post',
      body: 'This is a new post',
      userId: 1
    };

    this.http.fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: { 'Content-Type': 'application/json' }
    })
    .then(response => response.json())
    .then(json => {
      this.message = 'Post created successfully!';
    })
    .catch(error => console.log('Error posting data: ', error));
  }
}

উপসংহার

Aurelia তে AJAX রিকোয়েস্ট করার জন্য দুটি প্রধান পদ্ধতি ব্যবহার করা যায়: ফেচ API এবং HttpClient। ফেচ API ব্যবহার করা সহজ এবং আধুনিক পদ্ধতি হলেও, HttpClient আরও অনেক সুবিধা এবং অপশন প্রদান করে। HttpClient এমন অ্যাপ্লিকেশনগুলোর জন্য উপযুক্ত যেখানে উন্নত রিকোয়েস্ট কনফিগারেশন এবং নিরাপত্তা প্রয়োজন। এছাড়া, fetch API সরাসরি ব্রাউজারে কাজ করে এবং এটি প্রাথমিক অ্যাপ্লিকেশনগুলোর জন্য ভালো।

Aurelia ফ্রেমওয়ার্ক রিয়েল-টাইম ডেটা এবং WebSocket ইন্টিগ্রেশন করার জন্য অত্যন্ত কার্যকরী। এটি ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে, যেখানে সার্ভার এবং ক্লায়েন্টের মধ্যে রিয়েল-টাইম ডেটা আদান-প্রদান করা হয়। WebSocket একটি শক্তিশালী প্রোটোকল যা ক্লায়েন্ট এবং সার্ভারের মধ্যে দ্বৈত দিকের যোগাযোগ সরবরাহ করে, অর্থাৎ ক্লায়েন্ট এবং সার্ভার একে অপরের সঙ্গে সরাসরি ডেটা আদান-প্রদান করতে পারে।

এই টিউটোরিয়ালে, আমরা দেখবো কীভাবে WebSocket ব্যবহার করে Aurelia অ্যাপ্লিকেশনে রিয়েল-টাইম ডেটা ইন্টিগ্রেশন করা যায়।

WebSocket কী?

WebSocket হল একটি প্রোটোকল যা ক্লায়েন্ট এবং সার্ভারের মধ্যে দুই-দিকের, পূর্ণ-ডুপ্লেক্স কমিউনিকেশন সেশন তৈরি করে। HTTP এর মতো, WebSocketও একটি ক্লায়েন্ট-সার্ভার মডেল ব্যবহার করে, তবে WebSocketের মাধ্যমে ক্লায়েন্ট এবং সার্ভারের মধ্যে একবার সংযোগ স্থাপিত হলে, তারা ইচ্ছেমত একে অপরের সঙ্গে ডেটা আদান-প্রদান করতে পারে। এটি সেগুলি অ্যাপ্লিকেশনে রিয়েল-টাইম ইন্টারঅ্যাকশন সক্ষম করে, যেমন চ্যাট অ্যাপ্লিকেশন, লাইভ আপডেট এবং স্ট্রিমিং ডেটা।

Aurelia তে WebSocket ইন্টিগ্রেশন

Aurelia এ WebSocket ইন্টিগ্রেশন করতে, আপনি WebSocket API ব্যবহার করতে পারেন। Aurelia তে, আপনি একটি service তৈরি করতে পারেন যা WebSocket সার্ভার থেকে ডেটা গ্রহণ এবং পাঠাতে সহায়তা করবে।

১. WebSocket সার্ভিস তৈরি করা

প্রথমে, একটি WebSocket সার্ভিস তৈরি করা যাক যা ক্লায়েন্ট এবং সার্ভারের মধ্যে যোগাযোগ স্থাপন করবে।

// websocket-service.js
export class WebSocketService {
  constructor() {
    this.socket = null;
  }

  // WebSocket সার্ভারের সাথে সংযোগ স্থাপন করা
  connect(url) {
    if (!this.socket) {
      this.socket = new WebSocket(url);
      
      // WebSocket ইভেন্ট হ্যান্ডলারের জন্য সেটআপ
      this.socket.onopen = () => {
        console.log('WebSocket connection established');
      };

      this.socket.onmessage = (event) => {
        console.log('Message from server: ', event.data);
        // ক্লায়েন্ট থেকে ডেটা পাবার পরে UI আপডেট করা
        this.onDataReceived(event.data);
      };

      this.socket.onerror = (error) => {
        console.log('WebSocket Error: ', error);
      };

      this.socket.onclose = () => {
        console.log('WebSocket connection closed');
      };
    }
  }

  // ডেটা পাঠানোর জন্য মেথড
  sendData(data) {
    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
      this.socket.send(data);
    }
  }

  // ডেটা গ্রহণের জন্য callback হ্যান্ডলার
  onDataReceived(data) {
    // এখানে ডেটা UI তে প্রদর্শন করার জন্য যেকোনো কার্যক্রম করা যাবে
  }
  
  // WebSocket বন্ধ করার জন্য মেথড
  disconnect() {
    if (this.socket) {
      this.socket.close();
      this.socket = null;
    }
  }
}

২. WebSocket সার্ভিস ব্যবহার করা

এখন, এই WebSocket সার্ভিসটিকে আপনার Aurelia কম্পোনেন্ট বা ভিউমডেল-এ ব্যবহার করতে হবে। উদাহরণস্বরূপ:

// app.js (ভিউমডেল)
import { WebSocketService } from './websocket-service';

export class App {
  constructor(WebSocketService) {
    this.socketService = WebSocketService;
    this.messages = [];
  }

  activate() {
    // WebSocket সার্ভারের সাথে সংযোগ স্থাপন
    this.socketService.connect('ws://localhost:8080');
  }

  sendMessage(message) {
    // সার্ভারে ডেটা পাঠানো
    this.socketService.sendData(message);
  }

  // ডেটা গ্রহণের জন্য কলব্যাক ফাংশন
  onDataReceived(data) {
    this.messages.push(data);
  }

  deactivate() {
    // WebSocket সংযোগ বন্ধ করা
    this.socketService.disconnect();
  }
}

৩. HTML তে ডেটা বাইন্ডিং

এখন UI-তে রিয়েল-টাইম ডেটা দেখানোর জন্য HTML টেমপ্লেট ব্যবহার করুন:

<!-- app.html -->
<template>
  <div>
    <h1>Live Chat</h1>
    <ul>
      <li repeat.for="message of messages">${message}</li>
    </ul>

    <input type="text" value.bind="newMessage">
    <button click.delegate="sendMessage(newMessage)">Send</button>
  </div>
</template>

৪. WebSocket সার্ভার সেটআপ

এটি ক্লায়েন্ট সাইডে কিভাবে কাজ করে তা দেখানো হয়েছে। তবে, সার্ভার সাইডেও একটি WebSocket সার্ভার তৈরি করতে হবে। আপনি Node.js ব্যবহার করে WebSocket সার্ভার তৈরি করতে পারেন। উদাহরণস্বরূপ:

// server.js (Node.js WebSocket সার্ভার)
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('A new client connected!');
  
  // ক্লায়েন্ট থেকে মেসেজ গ্রহণ
  ws.on('message', (message) => {
    console.log('Received: ' + message);
    
    // ক্লায়েন্টকে রিয়েল-টাইম ডেটা পাঠানো
    ws.send('Server received: ' + message);
  });

  // ক্লায়েন্টকে স্বাগতম বার্তা পাঠানো
  ws.send('Welcome to the WebSocket server!');
});

৫. ক্লায়েন্ট এবং সার্ভার যোগাযোগ

এখন ক্লায়েন্ট এবং সার্ভার একটি WebSocket কানেকশন তৈরি করবে। ক্লায়েন্ট সার্ভারে মেসেজ পাঠাবে এবং সার্ভার সেই মেসেজ ক্লায়েন্টে পাঠাবে, যার মাধ্যমে আপনি রিয়েল-টাইম ডেটা দেখতে পারবেন।

উপসংহার

Aurelia তে WebSocket ইন্টিগ্রেশন আপনাকে ক্লায়েন্ট এবং সার্ভারের মধ্যে রিয়েল-টাইম ডেটা আদান-প্রদান সহজেই করতে সাহায্য করে। WebSocketService তৈরি করে এবং WebSocket API ব্যবহার করে আপনি একটি শক্তিশালী রিয়েল-টাইম অ্যাপ্লিকেশন তৈরি করতে পারেন। WebSocket এবং Aurelia এর ডেটা বাইন্ডিং সিস্টেম একত্রে একটি অত্যন্ত ইন্টারঅ্যাকটিভ এবং ডাইনামিক ইউজার অভিজ্ঞতা প্রদান করে।