Aurelia দিয়ে SPA (Single Page Application) তৈরি করা

Aurelia ফ্রেমওয়ার্ক দিয়ে আপনি খুব সহজে একটি Single Page Application (SPA) তৈরি করতে পারেন। SPA একটি ওয়েব অ্যাপ্লিকেশন যেখানে পুরো পেজ রিফ্রেশ না করে শুধুমাত্র প্রয়োজনীয় কন্টেন্ট পরিবর্তন হয়। এতে ব্যবহারকারীর অভিজ্ঞতা দ্রুত এবং ইন্টারঅ্যাকটিভ হয়, কারণ সার্ভার থেকে প্রতিটি পেজের জন্য নতুন তথ্য লোড করার প্রয়োজন হয় না।

Aurelia তে SPA তৈরি করার জন্য, আপনাকে রাউটিং সিস্টেমের সাথে পরিচিত হতে হবে, যাতে আপনি পেজগুলির মধ্যে নেভিগেট করতে পারেন। এখানে আমরা দেখব কিভাবে Aurelia দিয়ে একটি SPA তৈরি করা যায়।

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

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

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

প্রথমে, Aurelia CLI ইন্সটল করতে হবে যদি আপনি আগে ইন্সটল না করে থাকেন:

npm install -g @aurelia/cli

১.2 নতুন Aurelia SPA প্রজেক্ট তৈরি করা

এরপর, নতুন Aurelia SPA প্রজেক্ট তৈরি করতে:

au new my-aurelia-spa

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

• প্যাকেজ ম্যানেজার নির্বাচন (npm বা yarn)
• JavaScript বা TypeScript নির্বাচন
• UI টেমপ্লেট (HTML বা Handlebars)

এই কমান্ডটি আপনার জন্য একটি নতুন Aurelia প্রজেক্ট তৈরি করবে।

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

cd my-aurelia-spa

১.4 Aurelia প্রজেক্ট চালানো

au run --watch

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

২. SPA অ্যাপ্লিকেশনে রাউটিং সেটআপ

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

২.1 রাউটিং কনফিগারেশন ফাইল তৈরি করা

Aurelia তে রাউটিং কনফিগারেশন করার জন্য, app.js ফাইলকে ব্যবহার করা হয়।

// app.js (ভিউমডেল)
export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia SPA';
    config.map([
      { route: ['', 'home'], name: 'home', moduleId: './home', title: 'Home' },
      { route: 'about', name: 'about', moduleId: './about', title: 'About' },
      { route: 'contact', name: 'contact', moduleId: './contact', title: 'Contact' }
    ]);

    this.router = router;
  }
}

এখানে, configureRouter মেথডে তিনটি রাউট সংজ্ঞায়িত করা হয়েছে: Home, About, এবং Contact।

২.2 রাউটিং সহ HTML টেমপ্লেট তৈরি করা

এখন app.html ফাইলটিতে এই রাউটগুলোতে নেভিগেট করার জন্য লিঙ্ক এবং কন্টেন্ট যুক্ত করা হবে।

<!-- app.html -->
<template>
  <nav>
    <ul>
      <li><a href="#/home">Home</a></li>
      <li><a href="#/about">About</a></li>
      <li><a href="#/contact">Contact</a></li>
    </ul>
  </nav>

  <router-view></router-view> <!-- এখানে কন্টেন্ট ডাইনামিকালি রেন্ডার হবে -->
</template>

এখানে <router-view></router-view> ট্যাগটি ব্যবহৃত হয়েছে, যা বিভিন্ন রাউটের জন্য সঠিক ভিউ রেন্ডার করবে।

২.3 পেজ কম্পোনেন্ট তৈরি করা

এখন, আপনাকে বিভিন্ন পেজের জন্য কম্পোনেন্ট তৈরি করতে হবে। প্রতিটি পেজের জন্য একটি আলাদা ফাইল তৈরি করুন:

• home.js: Home পেজের জন্য
• about.js: About পেজের জন্য
• contact.js: Contact পেজের জন্য

এখানে home.js ফাইলের উদাহরণ:

// home.js
export class Home {
  message = 'Welcome to the Home Page!';
}

এখানে home.html ফাইলের উদাহরণ:

<!-- home.html -->
<template>
  <h1>${message}</h1>
</template>

এভাবে about.js এবং contact.js ফাইলগুলোও তৈরি করুন, যেখানে আপনি আলাদা আলাদা বার্তা এবং কন্টেন্ট রেন্ডার করবেন।

৩. SPA তে ডাইনামিক কন্টেন্ট লোডিং

Aurelia তে SPA অ্যাপ্লিকেশন তৈরির সময়, পেজের কন্টেন্ট একে অপরের সাথে ডাইনামিকালি লোড হয়। প্রতিটি রাউটের জন্য আলাদা ভিউ কম্পোনেন্ট রেন্ডার হয়, এবং এতে পেজ রিফ্রেশের প্রয়োজন হয় না। আপনি <router-view> ট্যাগ ব্যবহার করে এই ডাইনামিক কন্টেন্ট লোডিং পরিচালনা করেন।

৩.1 ডাইনামিক কন্টেন্ট রেন্ডারিং

যখন আপনি রাউট পরিবর্তন করবেন, তখন <router-view> ট্যাগে সংশ্লিষ্ট পেজের কন্টেন্ট রেন্ডার হবে। এটি কোনো পেজ রিফ্রেশ ছাড়াই, শুধুমাত্র URL পরিবর্তন হলে কন্টেন্ট আপডেট করে।

৪. SPA অ্যাপ্লিকেশনে অন্যান্য বৈশিষ্ট্য

৪.1 প্যারামিটারাইজড রাউট

Aurelia তে আপনি প্যারামিটারাইজড রাউটও তৈরি করতে পারেন। উদাহরণস্বরূপ, একটি পণ্য ভিউ যেখানে পণ্যের আইডি URL থেকে নেওয়া হবে।

{ route: 'product/:id', name: 'product', moduleId: './product', title: 'Product' }

এখানে :id একটি প্যারামিটার হিসেবে কাজ করবে এবং সেই পণ্য আইডি ইউআরএলে থাকবে।

৪.2 গার্ডস এবং প্রিভিউ রাউট

রাউটগুলোর মধ্যে আপনি গার্ড এবং প্রিভিউও সেটআপ করতে পারেন, যাতে আপনি একটি পেজের মধ্যে নেভিগেট করার আগে কিছু শর্ত পূরণ করার জন্য নিশ্চিত হতে পারেন।

উপসংহার

Aurelia দিয়ে Single Page Application (SPA) তৈরি করা অত্যন্ত সহজ এবং কার্যকর। Aurelia-এর router সিস্টেম আপনাকে বিভিন্ন পেজের মধ্যে নেভিগেশন করতে দেয় এবং <router-view> দ্বারা ডাইনামিক কন্টেন্ট লোডিংয়ের সুবিধা প্রদান করে। আপনি সহজেই আলাদা আলাদা পেজ এবং কম্পোনেন্ট তৈরি করতে পারেন, এবং SPA তৈরি করতে Aurelia একটি শক্তিশালী টুল হিসেবে কাজ করে।