Custom Addon তৈরি করা এবং ব্যবহারের নিয়ম

Ember.js Addon হল এমন একটি প্যাকেজ যা অন্যান্য Ember.js অ্যাপ্লিকেশনে পুনঃব্যবহারযোগ্য কোড, ইউটিলিটি, বা ফিচার প্রদান করে। যখন আপনার এমন কোড বা ফিচার থাকে যা একাধিক অ্যাপ্লিকেশনে ব্যবহৃত হতে পারে, তখন আপনি একটি Custom Addon তৈরি করতে পারেন। Addons সাধারণত UI কম্পোনেন্ট, সার্ভিস, মডেল, হেল্পার অথবা অন্যান্য কার্যকরী কোড হতে পারে যা সাধারণভাবে পুনঃব্যবহারযোগ্য।

এই গাইডে আমরা দেখব কিভাবে Ember.js-এ Custom Addon তৈরি করা যায় এবং কিভাবে সেটি ব্যবহার করা হয়।

১. Ember.js Addon তৈরি করা

Ember CLI আপনাকে সহজে একটি নতুন addon তৈরি করতে সহায়তা করে। আপনার যদি এমন কিছু কোড থাকে যা একাধিক অ্যাপ্লিকেশনে ব্যবহার করতে চান, তবে আপনি সেটি একটি addon-এ পরিণত করতে পারেন।

১.১. Addon তৈরি করা

Ember CLI দিয়ে একটি নতুন addon তৈরি করতে, আপনাকে নিম্নলিখিত কমান্ডটি ব্যবহার করতে হবে:

ember addon my-addon

এটি একটি নতুন Addon তৈরি করবে যার নাম my-addon। এই কমান্ডটি স্বয়ংক্রিয়ভাবে প্রয়োজনীয় ফোল্ডার ও ফাইল তৈরি করবে।

১.২. Addon ফোল্ডার স্ট্রাকচার

Addon ফোল্ডারের সাধারণ কাঠামো হবে এরকম:

my-addon/
├── addon/
│   ├── components/
│   ├── controllers/
│   ├── helpers/
│   ├── services/
│   └── ...
├── app/
├── blueprints/
├── config/
├── tests/
│   ├── acceptance/
│   ├── unit/
│   └── integration/
├── package.json
├── README.md
└── index.js

এখানে addon/ ফোল্ডারটি মূল addon কোড ধারণ করে এবং app/ ফোল্ডারটি সেই addon এর অ্যাপ্লিকেশন কোড সংরক্ষণ করে।

১.৩. Addon Logic এবং Functionality যোগ করা

এখন, আপনি আপনার addon এর মধ্যে কোড যুক্ত করতে পারেন। উদাহরণস্বরূপ, যদি আপনি একটি নতুন component তৈরি করতে চান, তবে addon/components ফোল্ডারে একটি নতুন ফাইল তৈরি করুন।

Example: Custom Component (button.js)

// addon/components/button.js
import Component from '@glimmer/component';

export default class ButtonComponent extends Component {
  get label() {
    return this.args.label || 'Click Me';
  }
}

এখানে, ButtonComponent একটি সাধারণ UI কম্পোনেন্ট, যা একটি বাটন তৈরি করবে এবং label আর্গুমেন্টের মাধ্যমে তার টেক্সট পরিবর্তন করবে।

১.৪. Addon টেস্ট করা

Addon তৈরি করার পর, আপনি এটিতে টেস্টও যুক্ত করতে পারেন। tests/ ফোল্ডারে আপনি ইউনিট বা ইন্টিগ্রেশন টেস্ট লিখে আপনার addon এর কার্যকারিতা নিশ্চিত করতে পারেন।

// tests/unit/components/button-test.js
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';

module('Integration | Component | button', function(hooks) {
  setupRenderingTest(hooks);

  test('it renders with the correct label', async function(assert) {
    // Render the button component with a label
    this.set('buttonLabel', 'Submit');
    await render(hbs`{{button label=this.buttonLabel}}`);

    // Check if the button has the correct label
    assert.dom('button').hasText('Submit');
  });
});

এটি button component এর জন্য একটি টেস্ট, যা নিশ্চিত করবে যে সঠিকভাবে টেক্সট রেন্ডার হচ্ছে।

২. Custom Addon ব্যবহার করা

এখন আপনি যে Custom Addon তৈরি করেছেন তা আপনার Ember.js অ্যাপ্লিকেশন-এ ব্যবহার করতে পারেন। এটি অন্য কোন প্যাকেজের মতই npm বা yarn এর মাধ্যমে ইনস্টল এবং ব্যবহৃত হয়।

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

যেহেতু আপনি একটি custom addon তৈরি করেছেন, সেটি আপনার প্রকল্পে যুক্ত করতে, আপনাকে addon প্যাকেজ ইনস্টল করতে হবে। আপনার প্রোজেক্টের মূল ফোল্ডারে গিয়ে এটি ইনস্টল করুন:

npm install /path/to/my-addon

যদি আপনি এটি npm registry তে পাবলিশ করেন, তবে আপনি সরাসরি npm থেকে ইনস্টল করতে পারেন:

npm install my-addon

২.২. Addon ব্যবহার করা

এখন আপনার অ্যাপ্লিকেশনে addon ব্যবহার করতে পারেন। উদাহরণস্বরূপ, button component ব্যবহার করা:

<!-- app/templates/application.hbs -->
<Button @label="Submit" />

এখানে, Button কম্পোনেন্টটি my-addon থেকে এসেছে এবং আমরা সেটি ব্যবহার করেছি।

২.৩. Addon এর API ব্যবহার করা

আপনি যদি services বা অন্য কোনো functionality প্রদান করেন, তাহলে অ্যাপ্লিকেশন কোডে সেগুলি inject করতে হবে।

// app/controllers/application.js
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';

export default class ApplicationController extends Controller {
  @service myAddonService;
}

এখানে, myAddonService কে আপনার অ্যাপ্লিকেশনের controller-এ ইনজেক্ট করা হয়েছে।

৩. Addon এর প্রকাশ করা

যদি আপনি আপনার Custom Addon অন্যদের সাথে শেয়ার করতে চান বা ব্যবহারযোগ্য করতে চান, তবে আপনাকে npm রেজিস্ট্রিতে প্রকাশ করতে হবে।

৩.১. Addon প্যাকেজে package.json কনফিগারেশন

প্রথমে, আপনার addon এর package.json ফাইলে সব তথ্য সঠিকভাবে পূর্ণ করতে হবে। উদাহরণস্বরূপ:

{
  "name": "my-addon",
  "version": "1.0.0",
  "description": "A reusable button component",
  "main": "addon/components/button.js",
  "keywords": ["ember", "addon", "component"],
  "ember-addon": {
    "configPath": "ember-addon"
  },
  "dependencies": {},
  "devDependencies": {}
}

৩.২. NPM রেজিস্ট্রিতে Addon পাবলিশ করা

এখন আপনি npm রেজিস্ট্রিতে addon পাবলিশ করতে পারেন:

npm login    # আপনার npm অ্যাকাউন্টে লগইন করুন
npm publish  # addon পাবলিশ করুন

এখানে, আপনার addon npm রেজিস্ট্রিতে পাবলিশ হয়ে যাবে এবং অন্য Ember.js অ্যাপ্লিকেশন থেকে এটি ইনস্টল এবং ব্যবহার করা যাবে।

উপসংহার

Ember.js Custom Addon তৈরি এবং ব্যবহার করা অত্যন্ত সহজ। Addon তৈরি করে আপনি পুনঃব্যবহারযোগ্য কোড, কম্পোনেন্ট, সার্ভিস, বা অন্যান্য কার্যকলাপগুলো আলাদা করে রাখতে পারেন। এগুলি অন্যান্য অ্যাপ্লিকেশনগুলিতে সহজে ব্যবহৃত হতে পারে। এটি Ember.js এ modular ডেভেলপমেন্ট এবং কোড রিইউজেবিলিটি বৃদ্ধির জন্য একটি শক্তিশালী উপায়। Addon তৈরি করার পর, এটি npm এর মাধ্যমে পাবলিশ করে সবার সাথে শেয়ার করা যায়, যা একাধিক অ্যাপ্লিকেশনে ব্যবহৃত হতে পারে।