The latest articles on DEV Community by Ashraf Hussain (@ashrafhussain17). https://dev.to/ashrafhussain17 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F390249%2Fcada0049-5b65-4b90-915b-844eb898b34b.jpeg https://dev.to/ashrafhussain17 en Ashraf Hussain Wed, 21 Apr 2021 10:04:12 +0000 https://dev.to/ashrafhussain17/-2mhe https://dev.to/ashrafhussain17/-2mhe <p>অবজার্ভার ডিজাইন প্যাটার্ন কি, কিভাবে কাজ করে এবং কেন ব্যবহার করবো তা বুঝার আগে চলুন কিছু সিনারিও দেখে আসি। <br> অনেক ওয়েবসাইটে নিউজলেটার নামে একটা অপশন আমরা দেখে থাকি। আমরা যদি আমাদের ইমেইল দিয়ে সেটা সাবস্ক্রাইব করি তাহলে ঐ ওয়েবসাইটে নতুন কিছু কন্টেন্ট আপডেট হলে আমাদের কাছে নোটিফিকেশন আসে। তারপর আমরা সোশ্যাল মিডিয়ায় অনেক সেলেব্রিটি বা পেজকে ফলো করি। ফলো করার জন্য আমাদের ফলো অপশনে ক্লিক করতে হয়। ফলো করার পর যদি ঐ সেলেব্রিটি বা পেজ নতুন কিছু আপলোড করে তাহলে সব ফলোয়ারের কাছে নোটিফিকেশন চলে যায়। তাছাড়া আমরা অনেকেই লিঙ্কডইনে বিভিন্ন ক্রাইটেরিয়া সেট করে জব এলার্ট অপশন অন করে রাখি।যখনই কোনো নতুন জব কেউ পোস্ট করে লিঙ্কডইন তখন নোটিফাই করে।<br> যদি আমরা এই সবগুলো সিনারিওর দিকে তাকাই তাহলে একটা প্যাটার্ন দেখতে পাই। সবগুলোতেই আমাদেরকে ফলো, লাইক বা সাবস্ক্রাইব করে রাখতে হয় আর যখনই নতুন কিছু আসে তখনই সেটা সবার কাছে নোটিফিকেশন আকারে পৌঁছে যায়। তো যদি এই লাইক, ফলো বা সাবস্ক্রাইব অপশন না থাকতো তাহলে কি হতো। তখন ইউজার নতুন কিছু আসছে কি না সেটা দেখার জন্য বারবার কিছুক্ষন পরপর গিয়ে দেখা লাগতো যে নতুন কোনো কিছু আসছে কি না। তাছাড়া কেউ যদি লাইভ কিছু করে সেগুলো মিস হয়ে যাওয়ার সম্ভাবনা থেকে যায়।<br> উপরে যে যে সিনারিওগুলো দেখলাম এই সবগুলো সমস্যার সমাধান অবজার্ভার ডিজাইন প্যাটার্ন দিয়ে করা সম্ভব। তাহলে চলুন শুরু করি</p> <p>উপরের প্রত্যেকটি সিনারিওতেই যদি আমরা খেয়াল করি তাহলে দেখবো ২টি অবজেক্ট আছে। একটি হলো সাবজেক্ট অবজেক্ট যেটা উপরের প্রথম সিনারিওতে ওয়েবসাইট, দ্বিতীয় সিনারিওতে সেলিব্রেটির প্রোফাইল বা পেজ আর তৃতীয় সিনারিওতে লিঙ্কডইন। আর আরেকটা অবজেক্ট হলো ডিপেন্ডেন্সি অবজেক্ট বা অবজার্ভার যেটা উপরের তিনটি সিনারিওতেই ইউজার যারা লাইক, ফলো বা সাবস্ক্রাইব করে রাখে। অবজার্ভার প্যাটার্ন এই দুইটি অবজেক্ট এর মধ্যে ওয়ান টু মেনি রিলেশন তৈরি করে যাতে যখনই সাবজেক্টের মধ্যে কোনো নতুন চেঞ্জ আসবে সাথে সাথে ওই সাবজেক্টের সব ডিপেন্ডেন্সি অবজেক্টকে নোটিফাই এবং আপডেট করে ফেলবে অটোম্যাটিকেলি। </p> <p>তাহলে এই সাবজেক্টের কাজ কি কি সেটা একটু চিন্তা করি। নতুন ইউজার এড করার জন্য সাবজেক্টের একটা মেথড লাগবে যেটা দিয়ে ইউজার লাইক, ফলো বা সাবস্ক্রাইব করতে পারে। একইভাবে আরেকটি অপশন লাগবে যেটা দিয়ে আনলাইক, আনফলো বা আনসাবস্ক্রাইব করতে পারবে। আরেকটি মেথড লাগবে সবাইকে নোটিফাই করার জন্য যাতে যখনই নতুন কিছু আপডেট আসবে তখনই এই মেথড কল করে সবাইকে নোটিফাই করা যায়। এই তিনটি কাজ করার জন্য আমরা তিনটি মেথড ডিফাইন করতে পারি। ক্লাস ডায়াগ্রামে আমরা সাবজেক্ট ইন্টারফেস দিয়ে এই তিনটি মেথড ডিফাইন করে দিয়েছি।<br> এখন আসি ডিপেন্ডেন্সি অবজেক্ট বা অবজার্ভারের কাজ কি।আমাদের অবজার্ভারকে বলে দিতে হবে সাবজেক্ট কিভাবে অবজার্ভারকে নোটিফাই করবে। এই কাজটি করার জন্য অবজার্ভারের একটি আপডেট মেথড লাগবে যেটা ব্যবহার করে সাবজেক্ট তাকে নোটিফাই করবে। ক্লাস ডায়াগ্রামে আমরা অবজার্ভার ইন্টারফেস দিয়ে এই মেথড ডিফাইন করে দিয়েছি।</p> <p>আমি এই ক্লাস ডায়াগ্রামটা নিয়েছি হেড ফার্স্ট ডিজাইন প্যাটার্ন বই থেকে যেটা ডিজাইন প্যাটার্নের জন্য টপ লিস্টেড বইগুলোর মধ্যে একটি।<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqa2ulogkq0lg33ka53gw.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqa2ulogkq0lg33ka53gw.png" alt="Class Diagram"></a><br> উপরের ডায়াগ্রামে সাবজেক্ট ইন্টারফেসের মধ্যে উপরে বর্ণনা করা তিনটি মেথড ডিফাইন করা আছে আর অবজার্ভার ইন্টারফেসে উপরে বর্ণনা করা একটি মেথড ডিফাইন করা আছে। এখন আসি ConcreteSubject ক্লাস নিয়ে। উপরের ডায়াগ্রাম থেকে দেখাই যাচ্ছে এটা সবসময় সাবজেক্ট ইন্টারফেসকে ইমপ্লিমেন্ট করবে। তখন তাকে সাবজেক্ট ইন্টারফেসে ডিফাইন করা তিনটি মেথডকেই ইমপ্লিমেন্ট করতে হবে। notifyObserver() মেথড দিয়ে সব অবজার্ভারকে নোটিফাই করবে। সেটার জন্য notifyObserver() মেথডের ভিতরে আমরা অবজার্ভার ইন্টারফেসের update() মেথড কল করে নোটিফাই এবং আপডেট করে ফেলব। আর ConcreteObserver() অবজার্ভার ইন্টারফেসকে ইমপ্লিমেন্ট করবে। তখন তাকে অবজার্ভার ইন্টারফেসে ডিফাইন করা update() মেথডকেই ইমপ্লিমেন্ট করতে হবে।</p> <h2> ইমপ্লিমেন্টেশন </h2> <p>এখন চলুন উপরের প্রথম সিনারিওটা ইমপিমেন্ট করি। নিউজলেটার সিস্টেম ইমপিমেন্ট করার জন্য আমাদের একটি নিউসলেটার পাবলিশার লাগবে যেটা উপরের সাবজেক্ট ইন্টারফেসকে ইমপিমেন্ট করবে। আর নোটিফিকেশন রিসিভ করার জন্য ডিপেন্ডেন্সি অবজেক্ট বা অবজার্ভার লাগবে যেটা অবজার্ভার ইন্টারফেসকে ইমপিমেন্ট করবে। </p> <p>প্রথমেই আমরা সাবজেক্ট আর অবজার্ভার ইন্টারফেস তৈরি করে ফেলি। নিচে সাবজেক্ট আর অবজার্ভার ইন্টারফেস তৈরি করে ফেললাম। <br> <code>Subject.ts</code><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F78k77a7wbr91r8ljqogn.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F78k77a7wbr91r8ljqogn.png" alt="Alt Text"></a><br> <code>Observer.ts</code><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1lxz4si7d8wxxztqxccn.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1lxz4si7d8wxxztqxccn.png" alt="Alt Text"></a></p> <p>নিউসলেটার পাবলিশারের জন্য NewsLetterPublisher ক্লাসটি তৈরি করলাম।<br> <code>NewsLetterPublisher.ts</code><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvu19kk0mcv8ufrreyfnt.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvu19kk0mcv8ufrreyfnt.png" alt="Alt Text"></a><br> পাবলিশারে সব অবজার্ভারকে রাখার জন্য আমরা একটি অ্যারে ডিফাইন করলাম। যেহেতু এই ক্লাসটি সাবজেক্টকে ইমপিমেন্ট করেছে তাই সাবজেক্টে ডিফাইন করা তিনটি মেথডকেই এখানে ইমপিমেন্ট করা হয়েছে। আরেকটি নতুন মেথড newChangeToSend() ইমপিমেন্ট করা হয়েছে যাতে নতুন কোনো আপডেট আসলে এই মেথড এর ভিতরে notifyObserver() মেথড কল করে সবাইকে নোটিফাই করা যায়। </p> <p>নিউসলেটার রিসিভারের জন্য NewsLetterReceiver ক্লাসটি তৈরি করলাম যেটা অবজার্ভারকে ইমপ্লিমেন্ট করেছে। যখনি নতুন কোন অবজার্ভার তৈরি করতে হবে তখন একটা ইমেইল দিতে হবে। <br> <code>NewsLetterReceiver.ts</code><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyk732q22d0z1oy6002jf.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyk732q22d0z1oy6002jf.png" alt="Alt Text"></a></p> <p>এখন একটা মেইন ক্লাস লিখে ফেললাম টেস্ট করার জন্য।<br> <code>main.ts</code><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2xcdq8dglqh4whufx471.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2xcdq8dglqh4whufx471.png" alt="Alt Text"></a><br> প্রথমে আমরা একটা পাবলিশার তৈরি করলাম। রিসিভার আর রিসিভার১ নামে দুইটি অবজার্ভার তৈরি করলাম যারা ওই পাবলিশারকে সাবস্ক্রাইব করে রেখেছে। যখনি পাবলিশার নতুন কিছু আপডেট করলো তখন এই দুইজনের কাছে নোটিফিকেশন যাবে। তারপরে রিসিভার১ আনসাবস্ক্রাইব করার পর তার কাছে আর যদি পাবলিশার নতুন কিছু আপডেট করে তাহলে তার নোটিফিকেশন যাবে না।নিচে আউটপুট দেখা যাচ্ছে। রিসিভার১ আনসাবস্ক্রাইব করার পর তার কাছে আর নোটিফিকেশন যায়নি।<br> <code>Output</code><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvqw7sg9pnqpcpoqrzx53.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvqw7sg9pnqpcpoqrzx53.png" alt="Alt Text"></a><br> উপরের ইমপ্লিমেন্টেশনের সম্পূর্ণ কোড পাওয়া যাবে এই <a href="https://github.com/ashrafhussain17/Design_Pattern/tree/master/ObserverPattern/newsletter" rel="noopener noreferrer">লিংকে</a> </p> <p>এখন আসি এই অবজার্ভার প্যাটার্নের সুবিধাগুলু কি কি। অবজার্ভার প্যাটার্নের একটি ভালো সুবিধা হচ্ছে এটা <strong>SOLID</strong> এর <strong>O</strong> মানে <strong>Open Close Principle</strong> কে কভার করে। তাছাড়া এটা হাই কুহেসিভ আর লো কাপলিং কোড লিখতে সাহায্য করে। এখানে সাবজেক্ট তার ডিপেন্ডেন্সি অবজেক্ট বা অবজার্ভারের ইমপ্লিমেন্টেশন সম্পর্কে কিছুই জানে না কিন্তু সে আপডেট করে ফেলে। তাছাড়া এটা <strong>JAVA</strong> ও <strong>JAVASCRIPT</strong> ল্যাঙ্গুয়েজের বেশ কিছু জায়গায় ব্যাবহার করা হয়েছে। যেমন <strong>JDK</strong> তে, <strong>Socket</strong> প্রোগ্রামিংয়ে। তাছাড়া আরও অনেক অনেক লাইব্রেরিতে এই প্যাটার্ন ব্যাবহার করা হয়।<br><br> নোটস: উপরে অনেক জায়গায় পাবলিশ সাবস্ক্রাইব টার্মটি উল্লেখ করেছি। হেড ফার্স্ট ডিজাইন প্যাটার্ন বইয়েও অনেক জায়গায় এটাই ব্যাবহার করেছে কিন্তু <strong>Publish-Subscribe</strong> বা <strong>PUB-SUB</strong> নামে আরেকটি প্যাটার্ন আছে যেটা অবজার্ভার প্যাটার্ন থেকে কিছুটা ডিফারেন্ট। এই দুই প্যাটার্নের আইডিয়া অলমোস্ট সেম । <strong>Publish-Subscribe</strong> প্যাটার্ন ইভেন্ট বেসড কমিউনিকেশনে যেমন <strong>Nats Streaming Server</strong> বা <strong>Apache Kafka</strong> এগুলাতে ব্যাবহার করা হয়। </p> oop designpattern observerdesignpattern typescript