Ember.js সেটআপ এবং ইনস্টলেশন

Ember.js একটি ফ্রন্টএন্ড ফ্রেমওয়ার্ক যা Node.js এবং npm (Node Package Manager) এর সাহায্যে সহজেই সেটআপ করা যায়। নিচে স্টেপ-বাই-স্টেপ Ember.js সেটআপ এবং ইনস্টলেশন প্রক্রিয়া বর্ণনা করা হলো।

সিস্টেমের প্রয়োজনীয়তা

Ember.js ইনস্টলেশনের আগে নিশ্চিত করুন যে আপনার সিস্টেমে নিচের সফটওয়্যারগুলো ইনস্টল রয়েছে:

• Node.js (LTS সংস্করণ বা তার উপরে)
• npm (Node.js এর সাথে আসে)

আপনার সিস্টেমে Node.js এবং npm ইনস্টল না থাকলে Node.js অফিসিয়াল ওয়েবসাইট থেকে ডাউনলোড এবং ইনস্টল করুন।

Ember CLI ইনস্টল করা

Ember.js সেটআপের জন্য প্রথমে Ember CLI (Command Line Interface) ইনস্টল করতে হবে। এটি ইনস্টল করার জন্য নিচের ধাপগুলো অনুসরণ করুন:

1. টার্মিনাল বা কমান্ড প্রম্পট খুলুন।

2. নিচের কমান্ডটি চালান:

   npm install -g ember-cli
   

   -g ফ্ল্যাগটি ব্যবহার করা হয় Ember CLI গ্লোবালি ইনস্টল করার জন্য। এটি ইনস্টলেশন সম্পূর্ণ করতে কিছুক্ষণ সময় নিতে পারে।

নতুন Ember.js প্রোজেক্ট তৈরি করা

Ember.js ইনস্টল করার পর একটি নতুন প্রোজেক্ট তৈরি করতে নিম্নলিখিত ধাপ অনুসরণ করুন:

1. একটি নতুন প্রোজেক্ট তৈরি করতে নিচের কমান্ডটি চালান:

   ember new project-name
   

   এখানে project-name এর স্থানে আপনার প্রোজেক্টের নাম দিন। উদাহরণস্বরূপ, যদি আপনার প্রোজেক্টের নাম my-app হয়, তাহলে কমান্ড হবে:

   ember new my-app
   

2. এটি আপনাকে কিছু ডিফল্ট প্যাকেজ ইনস্টল করতে বলবে। ডিপেন্ডেন্সি ইনস্টল করতে Y চাপুন।

প্রোজেক্ট ডিরেক্টরিতে প্রবেশ করা

নতুন প্রোজেক্ট তৈরি হওয়ার পরে, আপনার প্রোজেক্ট ডিরেক্টরিতে প্রবেশ করুন:

cd project-name

Ember.js ডেভেলপমেন্ট সার্ভার চালানো

আপনার Ember.js অ্যাপ্লিকেশন চালানোর জন্য ডেভেলপমেন্ট সার্ভার শুরু করতে নিম্নলিখিত কমান্ডটি চালান:

ember serve

ডিফল্টভাবে সার্ভারটি http://localhost:4200/ এ চলবে। আপনি ব্রাউজারে এই URL এ গিয়ে অ্যাপ্লিকেশনটি দেখতে পারবেন।

ডিপেন্ডেন্সি চেক এবং আপডেট

Ember.js এর সঠিক ডিপেন্ডেন্সি নিশ্চিত করতে নিম্নলিখিত কমান্ডটি ব্যবহার করুন:

npm install

যদি কোনো প্যাকেজ বা ডিপেন্ডেন্সি মিসিং থাকে, এটি সেগুলো ইনস্টল করবে।

অতিরিক্ত টুলস (ঐচ্ছিক)

Ember Inspector

Ember.js ডেভেলপমেন্টের সময় ডিবাগিং সহজ করতে Ember Inspector টুলটি ব্যবহার করা হয়। এটি Chrome এবং Firefox ব্রাউজারের জন্য অ্যাড-অন হিসেবে উপলব্ধ। Ember Inspector থেকে এটি ইনস্টল করতে পারেন।

Ember.js সেটআপ করার পর আপনি এখন সহজেই নতুন অ্যাপ্লিকেশন তৈরি এবং ডেভেলপমেন্ট শুরু করতে পারবেন। এটি বড় অ্যাপ্লিকেশন তৈরি এবং পরিচালনার জন্য একটি শক্তিশালী এবং সময়সাশ্রয়ী ফ্রেমওয়ার্ক।

Ember.js ইনস্টল করতে হলে প্রথমে Node.js এবং Ember CLI সেটআপ করতে হবে। Ember.js ফ্রেমওয়ার্কটি Node.js পরিবেশে কাজ করে এবং Ember CLI-র মাধ্যমে অ্যাপ্লিকেশন তৈরি ও পরিচালনা সহজ হয়।

ধাপ ১: Node.js ইনস্টলেশন

কীভাবে Node.js ইনস্টল করবেন?

1. Node.js ডাউনলোড করুন
   Node.js অফিসিয়াল ওয়েবসাইট এ যান এবং LTS (Long Term Support) সংস্করণটি ডাউনলোড করুন। এটি সবচেয়ে স্থিতিশীল এবং Ember.js এর জন্য সুপারিশকৃত সংস্করণ।
2. ইনস্টলেশন সম্পন্ন করুন
   ডাউনলোডকৃত ইনস্টলারটি চালান এবং উইজার্ড অনুসরণ করে Node.js ইনস্টল করুন। ইনস্টলেশন শেষে npm (Node Package Manager) স্বয়ংক্রিয়ভাবে ইনস্টল হয়ে যাবে।

3. Node.js এবং npm যাচাই করুন
   ইনস্টলেশন সফল হয়েছে কিনা তা নিশ্চিত করতে নিচের কমান্ডগুলো চালান:

   node -v
   

   এটি Node.js এর সংস্করণ দেখাবে। উদাহরণ: v16.18.0

   npm -v
   

   এটি npm এর সংস্করণ দেখাবে। উদাহরণ: 8.19.2

ধাপ ২: Ember CLI ইনস্টলেশন

Ember CLI কী?

Ember CLI হলো Ember.js ফ্রেমওয়ার্কের একটি কমান্ড লাইন ইন্টারফেস। এটি ডেভেলপমেন্ট সরল করে এবং অ্যাপ্লিকেশনের গঠন তৈরি, পরিচালনা এবং টেস্টিং সহজতর করে।

Ember CLI ইনস্টল করার ধাপ

1. Ember CLI ইনস্টল করুন
   টার্মিনাল বা কমান্ড প্রম্পট খুলে নিচের কমান্ডটি চালান:

   npm install -g ember-cli
   

   এখানে -g ফ্ল্যাগ ব্যবহার করা হয় Ember CLI গ্লোবালি ইনস্টল করতে। এটি সফলভাবে ইনস্টল হলে, Ember CLI সমস্ত প্রোজেক্টে ব্যবহার করা যাবে।

2. ইনস্টলেশন যাচাই করুন
   Ember CLI ইনস্টল হয়েছে কিনা তা নিশ্চিত করতে নিচের কমান্ডটি চালান:

   ember -v
   

   এটি Ember CLI, Node.js, এবং npm-এর সংস্করণ দেখাবে।

ধাপ ৩: নতুন Ember.js অ্যাপ্লিকেশন তৈরি

নতুন প্রোজেক্ট তৈরি করতে:

Ember.js অ্যাপ্লিকেশন তৈরির জন্য নিম্নলিখিত কমান্ডটি ব্যবহার করুন:

ember new project-name

এখানে project-name এর স্থানে আপনার অ্যাপ্লিকেশনের নাম দিন। উদাহরণস্বরূপ:

ember new my-app

ডিপেন্ডেন্সি ইনস্টল

Ember CLI প্রোজেক্ট তৈরির সময় প্রয়োজনীয় ডিপেন্ডেন্সি ইনস্টল করার জন্য আপনাকে অনুমতি চাইবে। Y চাপুন অথবা ম্যানুয়ালি ডিপেন্ডেন্সি ইনস্টল করতে নিচের কমান্ডটি চালান:

npm install

ধাপ ৪: অ্যাপ্লিকেশন চালানো

1. প্রোজেক্ট ফোল্ডারে প্রবেশ করুন:

   cd project-name
   

2. ডেভেলপমেন্ট সার্ভার চালু করুন:

   ember serve
   

3. আপনার ব্রাউজারে http://localhost:4200/ এ যান। এখানে আপনার Ember.js অ্যাপ্লিকেশন চলবে।

ধাপ ৫: Ember Inspector ইনস্টল করা (ঐচ্ছিক)

Ember.js অ্যাপ্লিকেশন ডিবাগিং সহজ করতে Ember Inspector ব্যবহার করা হয়। এটি Chrome এবং Firefox ব্রাউজারে অ্যাড-অন হিসেবে ইনস্টল করা যায়। Ember Inspector থেকে ডাউনলোড করুন।

এই ধাপগুলো অনুসরণ করে আপনি সফলভাবে Node.js এবং Ember CLI ইনস্টল করতে পারবেন এবং একটি নতুন Ember.js প্রোজেক্ট তৈরি ও চালু করতে পারবেন। এটি আপনাকে একটি কার্যকর ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টে সহায়তা করবে।

Ember.js ব্যবহার করে একটি নতুন প্রজেক্ট তৈরি করা বেশ সহজ এবং এটি Ember CLI-এর সাহায্যে করা যায়। Ember CLI (Command Line Interface) প্রজেক্ট তৈরি, ডিপেন্ডেন্সি ম্যানেজমেন্ট, এবং ডেভেলপমেন্ট সার্ভার চালানোর মতো বিভিন্ন কাজ সহজ করে তোলে।

প্রাথমিক প্রয়োজনীয়তা

প্রথমে নিশ্চিত করুন যে আপনার সিস্টেমে নিম্নলিখিত সফটওয়্যার ইনস্টল রয়েছে:

• Node.js (LTS সংস্করণ বা তার উপরে)
• npm (Node.js এর প্যাকেজ ম্যানেজার)
• Ember CLI

যদি এগুলো ইনস্টল না থাকে, তাহলে Node.js এবং Ember CLI ইনস্টলেশনের ধাপগুলো অনুসরণ করুন।

নতুন Ember.js প্রজেক্ট তৈরি করার ধাপ

ধাপ ১: Ember CLI ইনস্টলেশন যাচাই

Ember CLI ইনস্টল হয়েছে কিনা তা যাচাই করতে নিচের কমান্ডটি চালান:

ember -v

আপনি Ember CLI-এর সংস্করণ দেখতে পাবেন। উদাহরণস্বরূপ:

ember-cli: 5.3.0
node: 16.18.0
os: darwin x64

ধাপ ২: নতুন প্রজেক্ট তৈরি করা

নতুন Ember.js প্রজেক্ট তৈরি করতে টার্মিনালে নিম্নলিখিত কমান্ডটি চালান:

ember new project-name

এখানে project-name এর স্থানে আপনার প্রোজেক্টের নাম দিন। উদাহরণ:

ember new my-app

ধাপ ৩: প্রজেক্ট ডিরেক্টরিতে প্রবেশ

প্রোজেক্ট তৈরি হওয়ার পরে, প্রজেক্ট ফোল্ডারে প্রবেশ করুন:

cd project-name

ধাপ ৪: ডিপেন্ডেন্সি ইনস্টল

প্রোজেক্ট তৈরি করার সময় প্রয়োজনীয় ডিপেন্ডেন্সি ইনস্টল করতে Ember CLI আপনাকে অনুমতি চাইতে পারে। আপনি Y চাপুন। যদি এটি ইনস্টল না হয়ে থাকে, তাহলে নিচের কমান্ডটি ম্যানুয়ালি চালান:

npm install

ডেভেলপমেন্ট সার্ভার চালানো

Ember.js অ্যাপ্লিকেশন চালানোর জন্য একটি ডেভেলপমেন্ট সার্ভার ব্যবহার করা হয়। এটি চালু করতে নিচের কমান্ডটি ব্যবহার করুন:

ember serve

ডিফল্টভাবে, Ember.js সার্ভার http://localhost:4200/ এ চলে। আপনার ব্রাউজারে এই URL-এ গিয়ে অ্যাপ্লিকেশনটি দেখতে পারবেন।

প্রজেক্ট গঠন

একটি নতুন Ember.js প্রজেক্ট তৈরি করলে নিচের মতো ফোল্ডার এবং ফাইলের গঠন তৈরি হয়:

• app/: অ্যাপ্লিকেশনের মূল সোর্স কোড এখানে থাকে।
• config/: অ্যাপ্লিকেশনের কনফিগারেশন ফাইল।
• tests/: টেস্ট ফাইল এবং টেস্ট কেস গুলো সংরক্ষিত।
• package.json: প্রোজেক্টের ডিপেন্ডেন্সি এবং স্ক্রিপ্ট সংক্রান্ত তথ্য।
• ember-cli-build.js: Ember CLI বিল্ড প্রক্রিয়া সংক্রান্ত তথ্য।

প্রাথমিক টেমপ্লেট কাস্টমাইজ করা

প্রোজেক্ট তৈরি করার পর app/templates/application.hbs ফাইলটি খুঁজে বের করুন। এটি অ্যাপ্লিকেশনের প্রধান টেমপ্লেট। এতে প্রাথমিকভাবে একটি কন্টেন্ট যোগ করতে পারেন:

<h1>Welcome to My Ember.js App</h1>
<p>This is my first Ember.js project!</p>

এরপরে ব্রাউজারে আপডেটটি দেখতে সার্ভারটি রিফ্রেশ করুন।

Ember.js-এর এই প্রাথমিক প্রজেক্ট তৈরি প্রক্রিয়া আপনাকে একটি ভিত্তি দেবে, যার উপর আপনি বড় এবং জটিল অ্যাপ্লিকেশন তৈরি করতে পারবেন। এটি দ্রুত এবং কার্যকর ডেভেলপমেন্ট নিশ্চিত করে।

Ember.js একটি সুগঠিত ফোল্ডার স্ট্রাকচার নিয়ে কাজ করে, যা অ্যাপ্লিকেশন ডেভেলপমেন্টকে সহজ ও সুসংগঠিত করে। এটি মডেল, ভিউ, টেমপ্লেট, এবং রাউটের জন্য পৃথক ডিরেক্টরি সরবরাহ করে। এখানে Ember.js অ্যাপ্লিকেশনের ফোল্ডার এবং ফাইলগুলোর ভূমিকা ও কার্যকারিতা আলোচনা করা হলো।

প্রধান ফোল্ডার এবং তাদের কার্যকারিতা

app/

এটি অ্যাপ্লিকেশনের মূল ডিরেক্টরি যেখানে আপনার প্রায় সমস্ত কোড লেখা হয়।

• components/: পুনঃব্যবহারযোগ্য UI উপাদান বা কম্পোনেন্ট।
• controllers/: রাউটের সাথে যুক্ত কন্ট্রোলার লজিক।
• models/: ডেটার কাঠামো এবং API এর সাথে ডেটা ম্যানেজমেন্ট।
• routes/: অ্যাপ্লিকেশনের রাউট সংক্রান্ত লজিক।
• templates/: অ্যাপ্লিকেশনের UI বা ভিজ্যুয়াল লেআউট। প্রতিটি রাউটের জন্য আলাদা টেমপ্লেট থাকতে পারে।
• styles/: CSS বা SCSS ফাইল যা অ্যাপ্লিকেশনের স্টাইলিংয়ের জন্য ব্যবহৃত হয়।

tests/

এটি টেস্টিং ফাইল সংরক্ষণের জন্য ব্যবহার করা হয়। অ্যাপ্লিকেশনের বিভিন্ন অংশের জন্য ইউনিট টেস্ট এবং ইন্টিগ্রেশন টেস্ট ফাইল এখানে থাকে।

config/

অ্যাপ্লিকেশনের বিভিন্ন কনফিগারেশন ফাইল এই ফোল্ডারে থাকে।

• environment.js: অ্যাপ্লিকেশনের এনভায়রনমেন্ট (ডেভেলপমেন্ট, প্রোডাকশন, বা টেস্টিং) কনফিগারেশন সংজ্ঞায়িত করে।

public/

এই ফোল্ডারে এমন ফাইল থাকে যা সরাসরি অ্যাপ্লিকেশনের বাইরে থেকে অ্যাক্সেস করা যায়, যেমন ছবি, ফন্ট, বা স্ট্যাটিক ফাইল।

node_modules/

npm প্যাকেজ ম্যানেজারের মাধ্যমে ইনস্টল করা সমস্ত ডিপেন্ডেন্সি এই ফোল্ডারে থাকে।

vendor/

তৃতীয় পক্ষের লাইব্রেরি বা কাস্টম জাভাস্ক্রিপ্ট এবং CSS ফাইল এই ফোল্ডারে সংরক্ষিত হয়।

গুরুত্বপূর্ণ ফাইল এবং তাদের ভূমিকা

ember-cli-build.js

এটি Ember CLI এর বিল্ড প্রক্রিয়া সংক্রান্ত কনফিগারেশন সংজ্ঞায়িত করে।

• ফাইল ও সম্পদের (assets) কাস্টমাইজেশন এখানে করা হয়।

package.json

এটি অ্যাপ্লিকেশনের npm ডিপেন্ডেন্সি এবং স্ক্রিপ্ট সম্পর্কিত তথ্য ধারণ করে।

• অ্যাপ্লিকেশন ডিপেন্ডেন্সি ইনস্টল এবং পরিচালনার জন্য এই ফাইলটি গুরুত্বপূর্ণ।

.ember-cli

Ember CLI এর কনফিগারেশন সংরক্ষণ করে, যা অ্যাপ্লিকেশন পরিচালনার সময় ব্যবহৃত হয়।

README.md

প্রজেক্টের সংক্ষিপ্ত বিবরণ এবং ডকুমেন্টেশন ধারণ করে। এটি সাধারণত গিটহাবে প্রজেক্টের রেফারেন্স হিসেবে ব্যবহৃত হয়।

tests/test-helper.js

টেস্টিং পরিবেশ সেটআপ করার জন্য ব্যবহৃত হয়।

app/index.html

এটি অ্যাপ্লিকেশনের প্রধান HTML ফাইল। Ember.js এর সমস্ত স্ক্রিপ্ট এবং স্টাইলশিট এই ফাইল থেকে লোড হয়।

Ember.js ফোল্ডার স্ট্রাকচারের সংক্ষিপ্ত বিবরণ

project-name/
├── app/
│   ├── components/
│   ├── controllers/
│   ├── models/
│   ├── routes/
│   ├── templates/
│   ├── styles/
├── config/
│   ├── environment.js
├── tests/
│   ├── acceptance/
│   ├── integration/
│   ├── unit/
├── public/
├── vendor/
├── node_modules/
├── ember-cli-build.js
├── package.json
├── .ember-cli
├── README.md

Ember.js ফোল্ডার স্ট্রাকচারের বিশেষত্ব

1. সুংগঠিত ফোল্ডার স্ট্রাকচার: প্রতিটি দায়িত্বের জন্য আলাদা ফোল্ডার, যা কোড ম্যানেজমেন্ট সহজ করে।
2. MVC (Model-View-Controller) প্যাটার্ন: মডেল, ভিউ, এবং কন্ট্রোলার আলাদা ফোল্ডারে থাকায় কোড সহজে সংরক্ষণ এবং পরিচালনা করা যায়।
3. ডিপেন্ডেন্সি ম্যানেজমেন্ট: package.json এবং node_modules/-এর মাধ্যমে সহজ ডিপেন্ডেন্সি পরিচালনা।

Ember.js-এর ফোল্ডার স্ট্রাকচার অ্যাপ্লিকেশনকে সুসংগঠিতভাবে তৈরি এবং পরিচালনা করতে সহায়তা করে। এর মাধ্যমে বড় অ্যাপ্লিকেশন সহজেই পরিচালনা করা সম্ভব।

Ember.js অ্যাপ্লিকেশন চালানোর জন্য এবং ডেভেলপমেন্ট পরিবেশ সেটআপ করার প্রক্রিয়া অত্যন্ত সহজ। Ember CLI-র সাহায্যে আপনি ডেভেলপমেন্ট সার্ভার চালাতে পারবেন এবং পরিবেশ অনুযায়ী অ্যাপ্লিকেশন কনফিগার করতে পারবেন।

Ember.js অ্যাপ্লিকেশন রান করার ধাপ

ধাপ ১: প্রজেক্ট ডিরেক্টরিতে প্রবেশ করুন

প্রথমে আপনার Ember.js প্রোজেক্টের ডিরেক্টরিতে যান। উদাহরণস্বরূপ, যদি আপনার প্রোজেক্টের নাম my-app হয়:

cd my-app

ধাপ ২: ডেভেলপমেন্ট সার্ভার চালু করা

Ember.js অ্যাপ্লিকেশন চালানোর জন্য নিম্নলিখিত কমান্ডটি ব্যবহার করুন:

ember serve

• এই কমান্ডটি http://localhost:4200/ এ একটি ডেভেলপমেন্ট সার্ভার চালু করবে।
• এটি লাইভ রিলোড সাপোর্ট করে, তাই আপনার কোডে পরিবর্তন করলে ব্রাউজার স্বয়ংক্রিয়ভাবে আপডেট হবে।

ডিফল্ট সার্ভারের পোর্ট পরিবর্তন (ঐচ্ছিক)

ডিফল্ট পোর্ট পরিবর্তন করতে আপনি নিচের মতো কমান্ড চালাতে পারেন:

ember serve --port 4300

এটি সার্ভারটি http://localhost:4300/ এ চালু করবে।

Ember.js পরিবেশ (Environment) সেটআপ

Ember.js অ্যাপ্লিকেশনের জন্য ডিফল্টভাবে তিনটি পরিবেশ উপলব্ধ:

1. Development (ডেভেলপমেন্ট)
2. Production (প্রোডাকশন)
3. Test (টেস্ট)

পরিবেশ কনফিগারেশন ফাইল

Ember.js-এর পরিবেশ কনফিগারেশন ফাইল config/environment.js। এই ফাইলে ডিফল্ট কনফিগারেশন সংরক্ষিত থাকে।

পরিবেশ অনুযায়ী সার্ভার চালানো

আপনি নির্দিষ্ট পরিবেশে অ্যাপ্লিকেশন চালাতে পারেন। উদাহরণস্বরূপ:

• ডেভেলপমেন্ট পরিবেশ (ডিফল্ট):

  ember serve
  

• প্রোডাকশন পরিবেশ:

  ember serve --environment=production
  

• টেস্ট পরিবেশ:

  ember test --server
  

পরিবেশ কনফিগারেশন পরিবর্তন

config/environment.js ফাইলটি খুলুন এবং আপনার কনফিগারেশন পরিবর্তন করুন। উদাহরণস্বরূপ:

module.exports = function (environment) {
  let ENV = {
    modulePrefix: 'my-app',
    environment,
    rootURL: '/',
    locationType: 'auto',
    EmberENV: {
      FEATURES: {
        // আপনার ফিচার টগল এখানে যুক্ত করুন
      },
    },
    APP: {
      // অ্যাপ্লিকেশনের কাস্টম কনফিগারেশন
    },
  };

  if (environment === 'development') {
    ENV.APP.LOG_TRANSITIONS = true; // ডেভেলপমেন্ট পরিবেশে লোগ ট্রানজিশন চালু
  }

  if (environment === 'production') {
    ENV.rootURL = '/my-app/';
  }

  return ENV;
};

অ্যাপ্লিকেশন বিল্ড করা (প্রোডাকশন)

আপনার Ember.js অ্যাপ্লিকেশন প্রোডাকশনের জন্য প্রস্তুত করতে নিম্নলিখিত কমান্ড ব্যবহার করুন:

ember build --environment=production

• এটি dist/ ফোল্ডারে অ্যাপ্লিকেশনের প্রোডাকশন-রেডি ফাইল তৈরি করবে।
• আপনি এই ফাইলগুলোকে আপনার সার্ভারে ডিপ্লয় করতে পারবেন।

সংক্ষিপ্ত বিবরণ

• ember serve: ডেভেলপমেন্ট সার্ভার চালানোর জন্য।
• ember build: প্রোডাকশন বা টেস্টের জন্য অ্যাপ্লিকেশন বিল্ড করার জন্য।
• config/environment.js: বিভিন্ন পরিবেশে অ্যাপ্লিকেশনের কনফিগারেশন পরিচালনা করার জন্য।

Ember.js অ্যাপ্লিকেশন রান এবং পরিবেশ সেটআপ সহজ এবং সুসংহত। এর সাহায্যে আপনি ডেভেলপমেন্ট, টেস্টিং, এবং প্রোডাকশনের কাজ দক্ষতার সাথে করতে পারবেন।