Aurelia প্রজেক্ট সেটআপ

Aurelia দিয়ে একটি প্রজেক্ট শুরু করতে আপনাকে কিছু নির্দিষ্ট ধাপ অনুসরণ করতে হবে। এই ধাপগুলো খুবই সহজ এবং ব্যবহারকারীবান্ধব। Aurelia CLI (Command Line Interface) ব্যবহার করে দ্রুত একটি প্রজেক্ট তৈরি করা যায়।

Aurelia প্রজেক্ট সেটআপের ধাপ

সিস্টেমে প্রয়োজনীয় টুল ইন্সটল করা

Aurelia সেটআপের জন্য আপনার সিস্টেমে নিম্নলিখিত টুলগুলো ইনস্টল থাকতে হবে:

• Node.js: Node.js অফিসিয়াল সাইট থেকে Node.js ডাউনলোড এবং ইন্সটল করুন।
• npm (Node Package Manager): এটি Node.js এর সাথে ডিফল্টভাবে আসে।
• Aurelia CLI: এটি ইনস্টল করার মাধ্যমে আপনি সহজেই প্রজেক্ট তৈরি করতে পারবেন।

Aurelia CLI ইন্সটল করতে কমান্ড দিন:

npm install -g @aurelia/cli

Aurelia প্রজেক্ট তৈরি করা

Aurelia CLI ব্যবহার করে একটি নতুন প্রজেক্ট তৈরি করতে নিচের ধাপগুলো অনুসরণ করুন:

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

au new

কমান্ডটি রান করার পর CLI আপনাকে কিছু প্রশ্ন করবে, যেমন:

• প্রজেক্টের নাম: আপনার পছন্দের নাম দিন।
• ফ্রেমওয়ার্ক বা টুল নির্বাচন: Aurelia (ডিফল্ট) নির্বাচন করুন।
• প্যাকেজ ম্যানেজার: npm বা Yarn নির্বাচন করুন।
• JavaScript বা TypeScript: আপনার প্রয়োজন অনুযায়ী নির্বাচন করুন।
• UI টেমপ্লেট: HTML নির্বাচন করুন।

এটি আপনার প্রজেক্ট ফোল্ডার তৈরি করবে এবং প্রয়োজনীয় প্যাকেজগুলো ডাউনলোড করবে।

তৈরি করা প্রজেক্টে নেভিগেট করুন

cd project-name

Aurelia প্রজেক্ট রান করা

প্রজেক্ট সার্ভার শুরু করা

au run --watch

এটি একটি ডেভেলপমেন্ট সার্ভার চালু করবে। সাধারণত http://localhost:8080 এ প্রজেক্ট অ্যাক্সেস করা যাবে।

বিল্ড করা

আপনার প্রজেক্ট প্রোডাকশনে ব্যবহারের জন্য বিল্ড করতে:

au build --env prod

Aurelia প্রজেক্ট স্ট্রাকচার

Aurelia প্রজেক্টে সাধারণত নিচের ফাইল এবং ফোল্ডার থাকে:

• src/: অ্যাপ্লিকেশনের মূল সোর্স কোড।
  • main.js/ts: এন্ট্রি পয়েন্ট।
  • app.html: প্রজেক্টের মূল ভিউ টেমপ্লেট।
  • app.js/ts: ভিউমডেলের জন্য জাভাস্ক্রিপ্ট/টাইপস্ক্রিপ্ট ফাইল।
• dist/: বিল্ড করা ফাইল।
• node_modules/: প্রজেক্টের ডিপেনডেন্সি।
• package.json: প্রজেক্ট এবং ডিপেনডেন্সির তথ্য।

Aurelia এর ডিপেনডেন্সি যোগ করা

প্রয়োজনীয় প্যাকেজ যোগ করতে npm ব্যবহার করুন। উদাহরণ:

npm install bootstrap

Bootstrap ব্যবহারের জন্য src/main.js বা src/main.ts ফাইলে ইমপোর্ট করুন:

import 'bootstrap/dist/css/bootstrap.min.css';

টেস্টিং এবং ডিপ্লয়মেন্ট

টেস্ট রান করা

Aurelia প্রজেক্টে টেস্ট চালানোর জন্য:

au test

প্রজেক্ট ডিপ্লয় করা

প্রোডাকশন সার্ভারের জন্য Aurelia অ্যাপ্লিকেশন ডিপ্লয় করতে বিল্ড করা কোড সার্ভারে আপলোড করুন। Aurelia প্রজেক্ট স্ট্যাটিক ফাইলের মতো কাজ করে, তাই এটি যেকোনো HTTP সার্ভারে হোস্ট করা যায়।

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

Aurelia CLI (Command Line Interface) ব্যবহার করে একটি নতুন প্রজেক্ট তৈরি করা খুবই সহজ এবং দ্রুত। এর মাধ্যমে আপনি প্রয়োজনীয় ফাইল এবং কনফিগারেশনসহ একটি সম্পূর্ণ Aurelia প্রজেক্ট তৈরি করতে পারেন। নিচে এই প্রক্রিয়া বিস্তারিতভাবে বর্ণনা করা হল।

প্রথমে সিস্টেমে প্রয়োজনীয় টুল ইন্সটল করা

Aurelia প্রজেক্ট তৈরি করার জন্য আপনার সিস্টেমে Node.js এবং npm (Node Package Manager) ইন্সটল থাকতে হবে। Aurelia CLI এর মাধ্যমে প্রজেক্ট তৈরি করতে আপনাকে CLI ইনস্টল করতে হবে।

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

Node.js অফিসিয়াল সাইট থেকে Node.js ডাউনলোড করে ইনস্টল করুন। এটি ইনস্টল করলে npm (Node Package Manager) স্বয়ংক্রিয়ভাবে ইন্সটল হয়ে যাবে।

২. Aurelia CLI ইন্সটল করা

Aurelia CLI ইন্সটল করতে নিচের কমান্ডটি রান করুন:

npm install -g @aurelia/cli

এটি globalভাবে Aurelia CLI ইন্সটল করবে, যাতে আপনি যেকোনো জায়গা থেকে এটি ব্যবহার করতে পারেন।

নতুন Aurelia প্রজেক্ট তৈরি করা

Aurelia CLI ইনস্টল করার পর, আপনি নিচের ধাপগুলো অনুসরণ করে একটি নতুন Aurelia প্রজেক্ট তৈরি করতে পারেন।

১. Aurelia প্রজেক্ট তৈরি

নতুন প্রজেক্ট তৈরি করতে CLI তে নিচের কমান্ডটি রান করুন:

au new

এই কমান্ডটি চালানোর পর CLI আপনাকে কিছু প্রশ্ন করবে, যেমন:

• প্রজেক্টের নাম: আপনার প্রজেক্টের নাম দিন (যেমন, my-aurelia-app)।
• ফ্রেমওয়ার্ক নির্বাচন: আপনি Aurelia নির্বাচন করুন।
• প্যাকেজ ম্যানেজার: আপনি npm বা Yarn নির্বাচন করতে পারবেন।
• JavaScript বা TypeScript: আপনি JavaScript বা TypeScript নির্বাচন করতে পারবেন (যদি আপনি TypeScript ব্যবহার করতে চান)।
• UI টেমপ্লেট নির্বাচন: আপনি HTML বা Handlebars নির্বাচন করতে পারবেন।

২. প্রজেক্ট ফোল্ডারে নেভিগেট করা

নতুন প্রজেক্ট তৈরি হওয়ার পর, সেই প্রজেক্ট ফোল্ডারে নেভিগেট করতে:

cd project-name

এখানে project-name এর জায়গায় আপনার প্রজেক্টের নাম থাকবে।

প্রজেক্ট রান করা

১. প্রজেক্ট সার্ভার শুরু করা

Aurelia প্রজেক্ট চালু করতে নিম্নলিখিত কমান্ডটি ব্যবহার করুন:

au run --watch

এটি একটি ডেভেলপমেন্ট সার্ভার চালু করবে এবং কোডের যেকোনো পরিবর্তন স্বয়ংক্রিয়ভাবে রিফ্রেশ করবে। সাধারণত http://localhost:8080 তে অ্যাপ্লিকেশনটি অ্যাক্সেস করা যাবে।

২. প্রজেক্টের বিল্ড করা

প্রোডাকশনের জন্য প্রজেক্টের বিল্ড করতে:

au build --env prod

এটি প্রোডাকশন পরিবেশের জন্য কোড অপ্টিমাইজ করবে এবং dist/ ফোল্ডারে বিল্ড করা ফাইলগুলো সংরক্ষণ করবে।

Aurelia প্রজেক্ট স্ট্রাকচার

Aurelia প্রজেক্টে কিছু গুরুত্বপূর্ণ ফোল্ডার এবং ফাইল থাকে:

• src/: অ্যাপ্লিকেশনের মূল সোর্স কোড।
  • main.js/ts: অ্যাপ্লিকেশনের এন্ট্রি পয়েন্ট।
  • app.html: প্রজেক্টের মূল ভিউ টেমপ্লেট।
  • app.js/ts: ভিউমডেলের জন্য কোড।
• dist/: বিল্ড করা ফাইল।
• node_modules/: সমস্ত ডিপেনডেন্সি।
• package.json: প্রজেক্টের মেটাডেটা এবং ডিপেনডেন্সি।

Aurelia CLI এর অন্যান্য কমান্ড

Aurelia CLI দিয়ে আরও কিছু কার্যকরী কমান্ড রান করা যায়। যেমন:

• প্রজেক্ট টেস্ট করা:

  au test
  

• নতুন কম্পোনেন্ট তৈরি করা:

  au generate component component-name
  

এটি নতুন কম্পোনেন্টের জন্য সমস্ত প্রয়োজনীয় ফাইল তৈরি করে দিবে।

Aurelia প্রজেক্টে ডিপেনডেন্সি যোগ করা

যদি আপনার প্রজেক্টে কোনো নতুন প্যাকেজ ইনস্টল করতে চান, তাহলে npm install ব্যবহার করতে পারেন:

npm install bootstrap

এবং আপনার প্রজেক্টের JavaScript ফাইল বা HTML ফাইলে সেই প্যাকেজটি ইমপোর্ট করুন।

এই ধাপগুলো অনুসরণ করে আপনি Aurelia CLI ব্যবহার করে একটি নতুন প্রজেক্ট তৈরি করতে পারবেন এবং সেটি দ্রুত শুরু করতে পারবেন। Aurelia-এর ব্যবহারকারী-বান্ধব CLI টুলস আপনার ডেভেলপমেন্ট প্রক্রিয়াকে অনেক সহজ করে তোলে।

Aurelia প্রজেক্টে প্রয়োজনীয় ডিপেনডেন্সি এবং প্যাকেজ ইনস্টল করা গুরুত্বপূর্ণ যাতে আপনার অ্যাপ্লিকেশন সঠিকভাবে কাজ করে এবং নতুন ফিচার বা টুলস যুক্ত করা যায়। এই প্রক্রিয়া বিভিন্ন প্যাকেজ ম্যানেজার ব্যবহার করে করা যায়, যেমন npm বা Yarn।

১. npm দিয়ে ডিপেন্ডেন্সি ইনস্টল করা

Aurelia CLI দ্বারা তৈরি করা প্রজেক্টে npm ব্যবহার করে ডিপেনডেন্সি ইনস্টল করতে হয়। সাধারণত, প্রজেক্ট তৈরি করার সময় package.json ফাইল তৈরি হয়, যেখানে সমস্ত প্রয়োজনীয় ডিপেনডেন্সি উল্লেখ থাকে। আপনি npm install কমান্ড ব্যবহার করে সেগুলো ইনস্টল করতে পারেন।

npm দিয়ে ডিপেন্ডেন্সি ইনস্টল করার ধাপ:

1. প্রজেক্ট ফোল্ডারে নেভিগেট করুন: আপনার তৈরি করা Aurelia প্রজেক্ট ফোল্ডারে নেভিগেট করুন:

   cd your-project-name
   

2. npm install কমান্ড রান করুন: সমস্ত ডিপেনডেন্সি ইনস্টল করার জন্য:

   npm install
   

   এটি package.json ফাইল থেকে সমস্ত ডিপেনডেন্সি ইনস্টল করবে এবং node_modules/ ফোল্ডারে প্রয়োজনীয় প্যাকেজগুলো সংরক্ষণ করবে।

২. ডিপেনডেন্সি যুক্ত করা

যদি আপনার প্রজেক্টে নতুন কোনো প্যাকেজ বা লাইব্রেরি ইনস্টল করতে চান, তাহলে নিচের কমান্ড ব্যবহার করতে পারেন:

নতুন প্যাকেজ ইনস্টল করা:

যেমন, যদি আপনি Bootstrap প্যাকেজ ইনস্টল করতে চান:

npm install bootstrap

ইনস্টল করা প্যাকেজ ব্যবহার করা:

এবার, আপনার প্রজেক্টে Bootstrap ব্যবহার করতে, আপনি ফাইলের মধ্যে এটি ইমপোর্ট করতে পারেন। উদাহরণস্বরূপ, src/main.js বা src/main.ts ফাইলে:

import 'bootstrap/dist/css/bootstrap.min.css';

প্যাকেজ ডেভেলপমেন্ট ডিপেনডেন্সি হিসেবে ইনস্টল করা:

যদি আপনি কোনো প্যাকেজ ডেভেলপমেন্ট উদ্দেশ্যে ব্যবহার করতে চান, যেমন webpack বা babel, তবে --save-dev ফ্ল্যাগ ব্যবহার করুন:

npm install webpack --save-dev

৩. অন্য প্যাকেজ ম্যানেজার ব্যবহার করা (Yarn)

যদি আপনি Yarn প্যাকেজ ম্যানেজার ব্যবহার করতে চান, তাহলে ইনস্টলেশন প্রক্রিয়া একই রকম হবে। আপনি npm এর পরিবর্তে yarn ব্যবহার করতে পারেন।

Yarn দিয়ে ডিপেনডেন্সি ইনস্টল:

yarn install

Yarn দিয়ে নতুন প্যাকেজ ইনস্টল:

yarn add bootstrap

Yarn দিয়ে ডেভেলপমেন্ট ডিপেনডেন্সি ইনস্টল:

yarn add webpack --dev

৪. ইনস্টল করা প্যাকেজ চেক করা

প্রতিটি ইনস্টল করা প্যাকেজ package.json ফাইলে dependencies বা devDependencies সেকশনে যুক্ত হবে। এছাড়া, আপনি node_modules/ ফোল্ডারে ইনস্টল করা প্যাকেজগুলো দেখতে পাবেন।

৫. ডিপেনডেন্সি আপডেট করা

যদি আপনি কোনো প্যাকেজের নতুন সংস্করণ ব্যবহার করতে চান, তবে npm update কমান্ড ব্যবহার করতে পারেন:

npm update

এটি package.json এ উল্লেখিত সর্বশেষ সংস্করণ অনুযায়ী প্যাকেজগুলোর আপডেট করবে।

৬. ডিপেনডেন্সি রিমুভ করা

যদি কোনো প্যাকেজ রিমুভ করতে চান, তাহলে npm uninstall ব্যবহার করতে পারেন:

npm uninstall bootstrap

এটি node_modules/ ফোল্ডার থেকে প্যাকেজটি সরিয়ে ফেলবে এবং package.json থেকে সেই প্যাকেজের এন্ট্রি মুছে ফেলবে।

উপসংহার

Aurelia প্রজেক্টে প্রয়োজনীয় ডিপেনডেন্সি ইনস্টল এবং পরিচালনা করার জন্য npm বা Yarn এর মতো প্যাকেজ ম্যানেজার ব্যবহার করা হয়। সঠিক প্যাকেজ ইনস্টল করে এবং প্রজেক্টে তাদের সঠিকভাবে ইমপোর্ট করে আপনি আপনার অ্যাপ্লিকেশনের কার্যকারিতা বাড়াতে পারবেন।

Aurelia প্রজেক্টের স্ট্রাকচার সাধারণত বেশ সিম্পল এবং মডুলার হয়। এটি src/ ফোল্ডারকে কেন্দ্র করে গড়ে ওঠে, যেখানে সমস্ত সোর্স কোড এবং ভিউ ফাইল থাকে। এ ছাড়া, node_modules/, dist/ এবং অন্যান্য কনফিগারেশন ফাইলও থাকে। নিচে একটি typical Aurelia প্রজেক্টের স্ট্রাকচার এবং তার প্রতিটি উপাদানের ব্যাখ্যা দেওয়া হলো।

১. src/ (Source ফোল্ডার)

এই ফোল্ডারটি আপনার প্রজেক্টের মূল সোর্স কোড ধারণ করে। এটি এমন ফোল্ডার যেখানে আপনার অ্যাপ্লিকেশনের সমস্ত কাস্টম কোড এবং ভিউ টেমপ্লেট থাকবে।

মূল ফাইলগুলো:

• main.js/ts (এন্ট্রি পয়েন্ট)
  • এই ফাইলটি অ্যাপ্লিকেশনটি শুরু করার জন্য প্রয়োজনীয় কনফিগারেশন এবং মডিউল ইনস্টল করে। এখানে সাধারণত aurelia.bootstrap() ফাংশন কল করা হয় যা অ্যাপ্লিকেশনটি লোড করে।
• app.html (মূল ভিউ টেমপ্লেট)
  • এটি আপনার অ্যাপ্লিকেশনের মূল HTML টেমপ্লেট। এখানে আপনি UI এর কন্টেন্ট তৈরি করবেন এবং অন্যান্য কম্পোনেন্ট এবং বাটন ইত্যাদি ব্যবহার করবেন।
• app.js/ts (ভিউমডেল)
  • এটি app.html এর জন্য একটি জাভাস্ক্রিপ্ট/টাইপস্ক্রিপ্ট ফাইল, যা অ্যাপ্লিকেশনের ডেটা এবং কার্যক্রম ধারণ করে। এটি ভিউ টেমপ্লেটের সাথে ডেটা বাইন্ডিংয়ের জন্য ব্যবহৃত হয়।

অন্যান্য ফোল্ডার:

• components/ (কম্পোনেন্টস)
  • আপনি আপনার প্রজেক্টে বিভিন্ন UI কম্পোনেন্ট তৈরি করলে, সেগুলো এই ফোল্ডারে রাখা হয়। প্রতিটি কম্পোনেন্টের জন্য আলাদা ফোল্ডার থাকতে পারে, যেখানে থাকবে HTML, CSS এবং জাভাস্ক্রিপ্ট ফাইল।
• resources/ (সাধারণ রিসোর্স)
  • কম্পোনেন্ট এবং অন্যান্য রিসোর্স (যেমন, স্টাইলশিট, ইমেজ) এখানে রাখা হয়। এটি একটি শেয়ার্ড রিসোর্স ফোল্ডার, যেখানে অ্যাপ্লিকেশনের অন্যান্য অংশের জন্য প্রয়োজনীয় ফাইল রাখা হয়।
• styles/ (স্টাইল ফোল্ডার)
  • এখানে অ্যাপ্লিকেশনের স্টাইলশিট (CSS বা SCSS ফাইল) রাখা হয়। আপনি সমস্ত অ্যাপ্লিকেশনের জন্য সাধারণ স্টাইল রিসোর্স বা স্কোপড স্টাইল ফাইলগুলো এখানে রাখতে পারেন।

২. node_modules/ (ডিপেনডেন্সি ফোল্ডার)

এই ফোল্ডারটি আপনার প্রজেক্টে ইনস্টল করা সমস্ত তৃতীয় পক্ষের লাইব্রেরি এবং প্যাকেজ ধারণ করে। এই ফোল্ডারটি npm install কমান্ড দিয়ে তৈরি হয় এবং এটি স্বয়ংক্রিয়ভাবে আপডেট হয় যখন আপনি নতুন ডিপেনডেন্সি ইনস্টল করেন।

৩. dist/ (ডিস্ট্রিবিউশন ফোল্ডার)

এই ফোল্ডারটি প্রোডাকশন বিল্ড ফাইল ধারণ করে। যখন আপনি au build কমান্ড দিয়ে অ্যাপ্লিকেশন বিল্ড করবেন, তখন সমস্ত কম্পাইলড এবং অপ্টিমাইজড ফাইল এই ফোল্ডারে চলে যাবে। এটি অ্যাপ্লিকেশনের প্রস্তুত ফাইল এবং প্যাকেজ থাকবে যা ক্লাউড বা সার্ভারে ডিপ্লয় করা যায়।

৪. package.json

এই ফাইলটি আপনার প্রজেক্টের মেটাডেটা এবং ডিপেনডেন্সি নির্ধারণ করে। এখানে অ্যাপ্লিকেশনের নাম, সংস্করণ, স্ক্রিপ্ট এবং ডিপেনডেন্সির তালিকা থাকে। এটি npm বা Yarn এর মাধ্যমে প্যাকেজ ম্যানেজমেন্ট পরিচালনা করে।

• dependencies: আপনার অ্যাপ্লিকেশনের চলমান ডিপেনডেন্সি যেমন, Aurelia framework, Bootstrap, ইত্যাদি।
• devDependencies: ডেভেলপমেন্ট পর্যায়ের প্যাকেজ, যেমন Webpack, Babel ইত্যাদি।
• scripts: বিভিন্ন স্ক্রিপ্ট যেমন, npm run start, npm run build ইত্যাদি।

৫. aurelia_project/

এই ফোল্ডারটি Aurelia CLI এর কনফিগারেশন ফাইল ধারণ করে। এতে সাধারণত কিছু কনফিগারেশন ফাইল থাকে, যেমন:

• bundles.js: অ্যাপ্লিকেশনের bundling configuration। এটি সংক্ষেপিত এবং কমপ্যাক্ট ফাইল তৈরি করতে সাহায্য করে।
• build//*.js**: বিভিন্ন বিল্ড কনফিগারেশন ফাইল।

৬. webpack.config.js (যদি ব্যবহার করা হয়)

যদি আপনি Webpack ব্যবহার করেন, তাহলে এই ফাইলটি আপনার বিল্ড কনফিগারেশন এবং অ্যাপ্লিকেশনের লোডিং কনফিগারেশন ধারণ করবে। এতে entry, output, loaders এবং plugins সম্পর্কিত কনফিগারেশন থাকে।

উদাহরণস্বরূপ Aurelia প্রজেক্ট স্ট্রাকচার:

my-aurelia-app/
│
├── aurelia_project/           # Aurelia CLI কনফিগারেশন
│   ├── bundles.js            # Bundle কনফিগারেশন
│   └── build/                # Build কনফিগারেশন
│
├── src/                      # Source কোড
│   ├── app.html              # মূল HTML টেমপ্লেট
│   ├── app.js                # ভিউমডেল (JavaScript)
│   ├── main.js               # প্রজেক্টের এন্ট্রি পয়েন্ট
│   ├── components/           # কম্পোনেন্ট ফোল্ডার
│   ├── resources/            # শেয়ার্ড রিসোর্স
│   └── styles/               # স্টাইল ফোল্ডার
│
├── node_modules/             # তৃতীয় পক্ষের লাইব্রেরি
│
├── dist/                     # বিল্ড করা ফাইল
│
├── package.json              # প্যাকেজ ম্যানেজমেন্ট ফাইল
├── webpack.config.js         # Webpack কনফিগারেশন (যদি ব্যবহৃত হয়)
└── .gitignore                # Git ignore ফাইল

উপসংহার

Aurelia প্রজেক্টের স্ট্রাকচার খুবই মডুলার এবং ক্লিন। এটি সহজে রক্ষণাবেক্ষণযোগ্য এবং স্কেলযোগ্য, কারণ অ্যাপ্লিকেশনের প্রতিটি অংশ আলাদা ফোল্ডারে রাখা হয়। এতে ডিপেনডেন্সি ম্যানেজমেন্ট, বিল্ড কনফিগারেশন এবং ফাইল গঠন সবকিছু সহজ হয়ে থাকে, যা ডেভেলপারদের কাজকে অনেক সহজ করে তোলে।

Aurelia দিয়ে আপনার প্রথম অ্যাপ্লিকেশন তৈরি করা একটি সহজ এবং দ্রুত প্রক্রিয়া। নিচে আমরা স্টেপ বাই স্টেপভাবে প্রথম Aurelia অ্যাপ্লিকেশন তৈরি এবং চালানোর প্রক্রিয়া বর্ণনা করবো।

১. Aurelia CLI ইন্সটল করা

Aurelia CLI ইন্সটল করতে, প্রথমে আপনার সিস্টেমে Node.js এবং npm ইনস্টল থাকতে হবে। যদি সেগুলো আগে থেকেই ইনস্টল করা না থাকে, তাহলে Node.js ডাউনলোড পেজ থেকে Node.js ইনস্টল করুন।

এরপর Aurelia CLI ইন্সটল করতে নিচের কমান্ডটি রান করুন:

npm install -g @aurelia/cli

২. নতুন Aurelia প্রজেক্ট তৈরি করা

Aurelia CLI ব্যবহার করে একটি নতুন প্রজেক্ট তৈরি করতে, আপনি কমান্ড প্রম্পট বা টার্মিনাল ওপেন করে নিচের কমান্ডটি রান করুন:

au new my-first-aurelia-app

এটি আপনাকে কিছু প্রশ্ন করবে:

• প্রজেক্টের নাম: আপনি যে নামটি চান সেটি দিতে হবে (যেমন, my-first-aurelia-app)।
• JavaScript বা TypeScript: আপনি JavaScript বা TypeScript নির্বাচন করতে পারেন।
• প্যাকেজ ম্যানেজার: আপনি npm বা Yarn নির্বাচন করতে পারবেন।
• UI টেমপ্লেট: সাধারণত HTML নির্বাচন করুন।

এটি আপনার প্রজেক্ট ফোল্ডার তৈরি করবে এবং প্রয়োজনীয় সমস্ত ডিপেনডেন্সি ইনস্টল করবে।

৩. প্রজেক্ট ফোল্ডারে নেভিগেট করা

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

cd my-first-aurelia-app

৪. প্রজেক্ট রান করা

প্রজেক্ট চালু করতে, নিচের কমান্ডটি রান করুন:

au run --watch

এই কমান্ডটি একটি ডেভেলপমেন্ট সার্ভার চালু করবে এবং http://localhost:8080 তে আপনার অ্যাপ্লিকেশনটি প্রদর্শিত হবে।

• --watch ফ্ল্যাগটি ব্যবহার করলে, কোডে কোনো পরিবর্তন করলে তা স্বয়ংক্রিয়ভাবে রিফ্রেশ হয়ে যাবে।

৫. অ্যাপ্লিকেশন দেখতে থাকা

এখন, আপনার ওয়েব ব্রাউজারে http://localhost:8080 এ গিয়ে অ্যাপ্লিকেশনটি দেখতে পাবেন।

আপনি যদি এটি সফলভাবে চালাতে পারেন, তবে এটি একটি স্বাভাবিক Aurelia অ্যাপ্লিকেশন যা আপনার তৈরি করা app.html এবং app.js ফাইল প্রদর্শন করবে।

৬. প্রজেক্ট স্ট্রাকচার বোঝা

আপনার প্রথম অ্যাপ্লিকেশন তৈরি হওয়ার পর, কিছু গুরুত্বপূর্ণ ফাইল এবং ফোল্ডার থাকবে:

• src/app.html: এটি আপনার মূল HTML টেমপ্লেট, যেখানে আপনার UI এবং ডেটা বাইন্ডিং থাকবে।
• src/app.js: এটি আপনার অ্যাপ্লিকেশনের ভিউমডেল ফাইল, যেখানে ডেটা এবং অ্যাকশন থাকবে।
• src/main.js: এটি আপনার অ্যাপ্লিকেশনের এন্ট্রি পয়েন্ট।
• node_modules/: আপনার প্রজেক্টে ব্যবহৃত সমস্ত তৃতীয় পক্ষের লাইব্রেরি এবং ডিপেনডেন্সি থাকবে।
• package.json: অ্যাপ্লিকেশনের সমস্ত প্যাকেজ এবং স্ক্রিপ্টের তথ্য থাকবে।

৭. অ্যাপ্লিকেশনে পরিবর্তন করা

আপনার প্রথম অ্যাপ্লিকেশনে কিছু পরিবর্তন করতে, উদাহরণস্বরূপ, app.html ফাইলে কিছু UI কন্টেন্ট যুক্ত করতে পারেন:

<template>
  <h1>Welcome to my first Aurelia app!</h1>
  <button click.delegate="showMessage()">Click me</button>
</template>

এবং তারপর app.js ফাইলে একটি কার্যকরী ফাংশন যোগ করুন:

export class App {
  showMessage() {
    alert('Hello, Aurelia!');
  }
}

এখন, যখন আপনি অ্যাপ্লিকেশনটি রান করবেন এবং বাটনে ক্লিক করবেন, একটি এলার্ট দেখাবে "Hello, Aurelia!"।

৮. বিল্ড করা

যদি আপনি প্রোডাকশন পরিবেশের জন্য অ্যাপ্লিকেশনটি তৈরি করতে চান, তবে নিচের কমান্ডটি ব্যবহার করে বিল্ড করতে হবে:

au build --env prod

এটি dist/ ফোল্ডারে বিল্ড করা ফাইল তৈরি করবে, যা আপনি সার্ভারে হোস্ট করতে পারবেন।

উপসংহার

এখন আপনি সফলভাবে প্রথম Aurelia অ্যাপ্লিকেশন চালাতে সক্ষম হয়েছেন! এটি আপনাকে প্রজেক্টের স্ট্রাকচার, ডেটা বাইন্ডিং এবং UI কন্ট্রোলগুলি সম্পর্কে একটি পরিচিতি দিয়েছে। Aurelia একটি শক্তিশালী এবং ফ্লেক্সিবল ফ্রেমওয়ার্ক যা বড় এবং স্কেলেবল অ্যাপ্লিকেশন তৈরি করার জন্য আদর্শ।