Aurelia কম্পোনেন্ট কীভাবে তৈরি করবেন

Aurelia-তে কম্পোনেন্ট তৈরি করা একটি সহজ এবং কার্যকর প্রক্রিয়া। কম্পোনেন্ট মূলত HTML, CSS এবং JavaScript/TypeScript এর সংমিশ্রণ, যা আপনার অ্যাপ্লিকেশনের UI এবং ব্যবসায়িক লজিক (business logic) আলাদা রাখে। কম্পোনেন্ট ব্যবহার করে আপনি অ্যাপ্লিকেশনকে ছোট ছোট অংশে ভাগ করতে পারেন, যা কোড পুনরায় ব্যবহারযোগ্য, রক্ষণাবেক্ষণযোগ্য এবং স্কেলেবল করে তোলে।

এখানে আমরা দেখব কিভাবে Aurelia-তে একটি নতুন কম্পোনেন্ট তৈরি করা যায়।

১. Aurelia কম্পোনেন্টের গঠন

Aurelia কম্পোনেন্ট সাধারণত তিনটি অংশ নিয়ে গঠিত:

• HTML (View): UI তৈরি করতে ব্যবহৃত ফাইল।
• CSS/SCSS (Optional): স্টাইল শীট ফাইল, UI কাস্টমাইজ করতে।
• JavaScript/TypeScript (ViewModel): কম্পোনেন্টের লজিক (business logic) ধারণ করা ফাইল।

২. Aurelia CLI দিয়ে নতুন কম্পোনেন্ট তৈরি করা

Aurelia CLI ব্যবহারের মাধ্যমে কম্পোনেন্ট তৈরি করা খুবই সহজ। আপনি CLI কমান্ড ব্যবহার করে একটি নতুন কম্পোনেন্ট তৈরি করতে পারেন।

কম্পোনেন্ট তৈরি করার জন্য:

1. Aurelia CLI ব্যবহার করুন:

   • কম্পোনেন্ট তৈরি করতে CLI কমান্ড ব্যবহার করুন:

     au generate component component-name
     

   এখানে component-name এর জায়গায় আপনার পছন্দসই কম্পোনেন্টের নাম দিন (যেমন, my-button বা user-profile ইত্যাদি)।

2. এটি একটি নতুন ফোল্ডার তৈরি করবে যেখানে থাকবে কম্পোনেন্টের জন্য প্রয়োজনীয় ফাইলগুলি, যেমন:
   • component-name.html: HTML টেমপ্লেট ফাইল।
   • component-name.js: ViewModel (business logic) ফাইল।
   • component-name.css: কম্পোনেন্টের স্টাইল শীট ফাইল (যদি প্রয়োজন হয়)।

৩. কম্পোনেন্টের উদাহরণ

উদাহরণ: একটি সাধারণ Greeting কম্পোনেন্ট তৈরি করা

1. HTML (View) - greeting.html

   <template>
     <h2>Hello, <span>${name}</span>!</h2>
     <button click.delegate="changeName()">Change Name</button>
   </template>
   

   এখানে, name ভ্যারিয়েবলকে span ট্যাগে বাইন্ড করা হয়েছে, এবং একটি বাটন তৈরি করা হয়েছে যা ক্লিক করার পর নাম পরিবর্তন করবে।

2. JavaScript (ViewModel) - greeting.js

   export class Greeting {
     name = 'John Doe';  // ডিফল্ট নাম
   
     changeName() {
       this.name = 'Jane Doe';  // বাটনে ক্লিক করলে নাম পরিবর্তন হবে
     }
   }
   

   এখানে, name প্রপার্টি দিয়ে ডেটা বাইন্ডিং করা হয়েছে এবং changeName ফাংশনটি বাটন ক্লিক ইভেন্টের মাধ্যমে নাম পরিবর্তন করবে।

3. CSS (Optional) - greeting.css

   h2 {
     color: blue;
   }
   
   button {
     margin-top: 10px;
   }
   

   এখানে, কম্পোনেন্টের জন্য কিছু স্টাইল দেওয়া হয়েছে।

৪. কম্পোনেন্ট ব্যবহার করা

কম্পোনেন্ট তৈরি করার পর, আপনি এটি আপনার মূল অ্যাপ্লিকেশন বা অন্য কম্পোনেন্টে ব্যবহার করতে পারেন।

উদাহরণ:

1. app.html - প্রধান অ্যাপ্লিকেশন ফাইল

   <template>
     <require from="./greeting"></require>  <!-- কম্পোনেন্ট আমদানি -->
     
     <greeting></greeting>  <!-- কম্পোনেন্ট ব্যবহার -->
   </template>
   

   এখানে, <require> ট্যাগ ব্যবহার করে greeting কম্পোনেন্টকে অ্যাপ্লিকেশনে অন্তর্ভুক্ত করা হয়েছে, এবং পরে <greeting></greeting> ট্যাগ দিয়ে কম্পোনেন্টটি UI-তে যোগ করা হয়েছে।

৫. কম্পোনেন্টে প্রপার্টি ও ইভেন্টস

Aurelia কম্পোনেন্টে প্রপার্টি এবং ইভেন্টস সহজেই ব্যবহৃত হতে পারে। কম্পোনেন্টে ডেটা বাইন্ডিং এবং ইভেন্ট হ্যান্ডলিং করতে আপনি নিম্নলিখিত পদ্ধতি অনুসরণ করতে পারেন:

১. প্রপার্টি বাইন্ডিং:

ডেটা বাইন্ডিং ব্যবহার করে, আপনি কম্পোনেন্টের ভিতরের প্রপার্টিগুলিকে UI-তে বাইন্ড করতে পারেন।

<template>
  <h3>${message}</h3>  <!-- message প্রপার্টি বাইন্ডিং -->
</template>

export class MyComponent {
  message = 'Welcome to Aurelia!';
}

২. ইভেন্ট হ্যান্ডলিং:

Aurelia কম্পোনেন্টে ইভেন্ট হ্যান্ডলিং করতে click.delegate বা অন্যান্য ডিরেকটিভ ব্যবহার করা হয়।

<template>
  <button click.delegate="changeMessage()">Change Message</button>
</template>

export class MyComponent {
  message = 'Hello, World!';

  changeMessage() {
    this.message = 'Message Changed!';
  }
}

৬. কম্পোনেন্টের রিইউজিবিলিটি

Aurelia কম্পোনেন্টে আপনি সহজেই কোড রিইউজ করতে পারেন। যখন আপনি একটি কম্পোনেন্ট তৈরি করেন, তখন সেটি অন্যান্য পেজ বা ভিউতে ব্যবহার করা সম্ভব হয়, যা অ্যাপ্লিকেশনটি মডুলার এবং পুনঃব্যবহারযোগ্য করে তোলে।

উপসংহার

Aurelia-তে কম্পোনেন্ট তৈরি করা খুবই সহজ এবং পরিষ্কার। কম্পোনেন্ট ব্যবহার করে আপনি অ্যাপ্লিকেশনকে ছোট ছোট অংশে ভাগ করতে পারবেন, যা ডেভেলপমেন্ট প্রক্রিয়াকে আরও দ্রুত এবং স্কেলেবল করে তোলে। Aurelia কম্পোনেন্টের মাধ্যমে UI এবং ব্যবসায়িক লজিক (business logic) আলাদা রাখা সম্ভব হয়, যা কোড রক্ষণাবেক্ষণ ও পুনঃব্যবহারযোগ্যতা নিশ্চিত করে।