প্রথম RxJS প্রজেক্ট তৈরি করা

RxJS ব্যবহার করে প্রথম প্রজেক্ট তৈরি করা একটি অত্যন্ত সহজ এবং কার্যকরী প্রক্রিয়া। এই টিউটোরিয়ালে, আমরা একটি মৌলিক RxJS প্রজেক্ট তৈরি করবো যেখানে একটি বেসিক Observable তৈরি করা হবে, তার উপর অপারেটর প্রয়োগ করা হবে এবং সাবস্ক্রাইবারের মাধ্যমে ডেটা গ্রহণ করা হবে।

১. প্রজেক্ট সেটআপ

প্রথমে আপনাকে একটি নতুন জাভাস্ক্রিপ্ট প্রজেক্ট সেটআপ করতে হবে। আপনি যদি Node.js ব্যবহার করে থাকেন, তাহলে npm বা yarn ব্যবহার করে RxJS ইনস্টল করতে পারেন।

১.১. Node.js ইনস্টল করা

প্রথমত, নিশ্চিত হয়ে নিন যে আপনার সিস্টেমে Node.js এবং npm ইনস্টল করা আছে। যদি না থাকে, Node.js থেকে ইনস্টল করুন।

১.২. RxJS ইনস্টল করা

প্রজেক্টে RxJS ব্যবহার করতে, প্রথমে আপনি আপনার প্রজেক্ট ফোল্ডারে যান এবং নিচের কমান্ডটি চালান:

npm init -y  # নতুন Node.js প্রজেক্ট ইনিশিয়ালাইজ
npm install rxjs  # RxJS ইনস্টল

এটি আপনার প্রজেক্টে rxjs প্যাকেজটি ইনস্টল করবে।

২. প্রথম RxJS প্রজেক্ট তৈরি করা

এখন, আপনার প্রথম RxJS প্রজেক্ট তৈরি করতে আমরা একটি Observable তৈরি করবো এবং সেটি সাবস্ক্রাইব করবো।

২.১. Observable তৈরি করা

RxJS-এর একটি Observable তৈরি করা হলো একটি ডেটা স্ট্রিম তৈরি করা। এখানে, আমরা একটি সিম্পল Observable তৈরি করবো যা সংখ্যার একটি সিকোয়েন্স পাঠাবে।

// index.js
import { Observable } from 'rxjs';

// একটি সিম্পল Observable তৈরি করা
const observable = new Observable(subscriber => {
  subscriber.next(1); // প্রথম মান পাঠানো
  subscriber.next(2); // দ্বিতীয় মান পাঠানো
  subscriber.next(3); // তৃতীয় মান পাঠানো
  subscriber.complete(); // সম্পন্ন করার সংকেত পাঠানো
});

// অবজার্ভেবলটি সাবস্ক্রাইব করা
observable.subscribe({
  next(x) { console.log('Received value: ', x); }, // যখনই মান আসে, এটি প্রদর্শন করবে
  complete() { console.log('Observable completed'); } // অবজার্ভেবল সম্পন্ন হলে মেসেজ দেখাবে
});

২.২. কোড ব্যাখ্যা

• Observable: এই কোডের মধ্যে, আমরা একটি Observable তৈরি করেছি যা 1, 2, এবং 3 মান পাঠাবে।
• subscribe(): subscribe() ফাংশন ব্যবহার করে, আমরা Observable থেকে প্রাপ্ত মানগুলির প্রতি প্রতিক্রিয়া জানাচ্ছি। প্রতিটি next() কল মান পাঠানোর পরে এটি কনসোলে প্রদর্শিত হবে।
• complete(): complete() এর মাধ্যমে আমরা অবজার্ভেবলটি শেষ করছি, এবং এটি Observable completed মেসেজটি কনসোলে দেখাবে।

২.৩. কোড রান করা

যদি আপনি Node.js পরিবেশ ব্যবহার করেন, তাহলে আপনার প্রজেক্ট ফোল্ডারে গিয়ে নিচের কমান্ডটি চালান:

node index.js

এটি কনসোলে নিচের আউটপুট প্রদান করবে:

Received value:  1
Received value:  2
Received value:  3
Observable completed

৩. RxJS এর Operators ব্যবহার করা

এখন, আমরা একটি অপারেটর ব্যবহার করব যাতে Observable-এর মানকে পরিবর্তন করা যায়। উদাহরণস্বরূপ, আমরা map অপারেটর ব্যবহার করবো যা প্রতি মানের উপর একটি ট্রান্সফর্মেশন প্রয়োগ করবে।

৩.১. map অপারেটর ব্যবহার

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// একটি Observable তৈরি করা
const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

// map অপারেটর ব্যবহার করে প্রতিটি মানের উপর ট্রান্সফর্মেশন
observable.pipe(
  map(value => value * 10)  // প্রতিটি মানকে ১০ গুণ বৃদ্ধি করা
).subscribe({
  next(x) { console.log('Transformed value: ', x); },
  complete() { console.log('Observable completed'); }
});

৩.২. কোড ব্যাখ্যা

• map: map অপারেটরটি প্রত্যেকটি মানকে ট্রান্সফর্ম করে, এই ক্ষেত্রে আমরা প্রতিটি মানকে ১০ গুণ বৃদ্ধি করছি।
• pipe(): pipe() ফাংশনটি ব্যবহৃত হয় একাধিক অপারেটর একত্রিত করার জন্য।

৩.৩. কোড রান করা

node index.js

এটি কনসোলে প্রদর্শন করবে:

Transformed value:  10
Transformed value:  20
Transformed value:  30
Observable completed

৪. সারাংশ

এখন আপনি একটি মৌলিক RxJS প্রজেক্ট তৈরি করেছেন যেখানে একটি Observable তৈরি করে সেটির উপর অপারেটর প্রয়োগ করা হয়েছে এবং মানগুলি সাবস্ক্রাইব করে কনসোলে দেখানো হয়েছে। RxJS এর মাধ্যমে আপনি বিভিন্ন অ্যাসিঙ্ক্রোনাস কার্যক্রম এবং ডেটা স্ট্রিমকে সহজে পরিচালনা করতে পারবেন। এটি পরবর্তী সময়ে আরও উন্নত অপারেটর এবং ইভেন্ট হ্যান্ডলিংয়ের জন্য সহায়ক হবে।

এভাবে আপনি সহজেই RxJS এর সাথে কাজ শুরু করতে পারেন এবং আরও জটিল অ্যাসিঙ্ক্রোনাস প্রোগ্রামিং সমস্যাগুলি সমাধান করতে সক্ষম হবেন।