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 একটি শক্তিশালী এবং ফ্লেক্সিবল ফ্রেমওয়ার্ক যা বড় এবং স্কেলেবল অ্যাপ্লিকেশন তৈরি করার জন্য আদর্শ।
Read more