TurboGears এবং SPA
TurboGears হল একটি Python ওয়েব ফ্রেমওয়ার্ক যা দ্রুত ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। এটি Model-View-Controller (MVC) আর্কিটেকচার ব্যবহার করে, যা ডেভেলপারদের দ্রুত এবং সহজভাবে ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। TurboGears এর মধ্যে অনেক শক্তিশালী ফিচার রয়েছে, যেমন SQLAlchemy, Jinja2, Tornado ইত্যাদি, যা আপনাকে ব্যাকএন্ড এবং ফ্রন্টএন্ড ম্যানেজ করার সুবিধা প্রদান করে।
Single Page Application (SPA) একটি ওয়েব অ্যাপ্লিকেশন যেখানে একবারই সম্পূর্ণ পেজ লোড হয় এবং পরবর্তীতে শুধুমাত্র প্রয়োজনীয় ডেটা লোড করা হয়। এই ধরনের অ্যাপ্লিকেশনে সাধারণত ব্যাকএন্ড API এবং ফ্রন্টএন্ড ফ্রেমওয়ার্ক (যেমন React.js, Vue.js, Angular) ব্যবহৃত হয়।
এই টিউটোরিয়ালে, আমরা TurboGears ব্যবহার করে একটি SPA তৈরি করার প্রক্রিয়া দেখবো।
SPA তৈরির জন্য TurboGears সেটআপ
১. TurboGears ইনস্টলেশন
প্রথমে, TurboGears ফ্রেমওয়ার্ক ইনস্টল করতে হবে। এর জন্য আপনি Python 3.x এর সাথে pip (Python Package Installer) ব্যবহার করতে পারেন।
TurboGears ইনস্টল করতে নিচের কমান্ডটি ব্যবহার করুন:
pip install TurboGears2
এটি TurboGears 2.x সংস্করণ ইনস্টল করবে, যা SPA তৈরির জন্য প্রয়োজনীয় ফিচার সরবরাহ করবে।
২. প্রকল্প তৈরি করা
TurboGears ব্যবহার করে একটি নতুন ওয়েব অ্যাপ্লিকেশন তৈরি করতে, gearbox কমান্ড ব্যবহার করা হয়। TurboGears এর জন্য একটি প্রকল্প তৈরি করার জন্য নিম্নলিখিত কমান্ডটি ব্যবহার করুন:
gearbox quickstart my_spa_project
এটি my_spa_project নামে একটি নতুন TurboGears অ্যাপ্লিকেশন তৈরি করবে। অ্যাপ্লিকেশনটি তৈরি হয়ে গেলে, আপনি এর ডিরেক্টরিতে চলে যান:
cd my_spa_project
৩. SPA ফ্রন্টএন্ড তৈরি করা
SPA তৈরির জন্য, আপনি ফ্রন্টএন্ড লাইব্রেরি যেমন React.js, Vue.js, বা Angular ব্যবহার করতে পারেন। এখানে আমরা একটি সাধারণ React.js SPA তৈরি করার প্রক্রিয়া দেখবো।
প্রথমে,
reactএবংreact-domপ্যাকেজ ইনস্টল করুন:npm init -y npm install react react-dom- একটি
srcফোল্ডারেindex.jsফাইল তৈরি করুন এবং React এর মাধ্যমে একটি সহজ SPA কম্পোনেন্ট তৈরি করুন:
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
const App = () => {
const [message, setMessage] = useState('Hello, TurboGears SPA!');
return (
<div>
<h1>{message}</h1>
<button onClick={() => setMessage('You clicked the button!')}>Click Me</button>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
- HTML ফাইল (index.html): আপনার
publicফোল্ডারে একটিindex.htmlফাইল তৈরি করুন, যেখানেdivএলিমেন্ট থাকবে যাতে React কম্পোনেন্টটি রেন্ডার হবে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TurboGears SPA</title>
</head>
<body>
<div id="root"></div>
<script src="/static/js/bundle.js"></script>
</body>
</html>
৪. React কোডটি TurboGears-এর সাথে ইন্টিগ্রেট করা
TurboGears-এ React কোড সংযুক্ত করতে, আপনাকে static ফোল্ডার ব্যবহার করতে হবে। public ফোল্ডার থেকে তৈরি হওয়া ফাইলগুলোকে TurboGears static folder-এ পরিবেশন করতে হবে।
- প্রথমে, আপনার React অ্যাপ্লিকেশন কম্পাইল করুন:
npx webpack --config webpack.config.js
- TurboGears অ্যাপ্লিকেশন এর static ডিরেক্টরিতে
bundle.jsফাইলটি রাখুন।
৫. Backend API তৈরি করা
SPA-টি ফ্রন্টএন্ড থেকে ডেটা নেবে, তাই আপনাকে একটি API তৈরি করতে হবে যা ফ্রন্টএন্ডের সাথে যোগাযোগ করবে। TurboGears-এ API তৈরি করতে, আপনি Controllers ব্যবহার করবেন।
from tg import expose, app_globals
from my_spa_project import model
class MyAPIController(object):
@expose('json')
def get_message(self):
return {"message": "Hello from the TurboGears API!"}
এখানে, get_message ফাংশন একটি JSON রেসপন্স প্রদান করবে যা আপনার React অ্যাপ্লিকেশন ব্যবহার করবে।
৬. API-কে React-এর সাথে সংযুক্ত করা
React অ্যাপ্লিকেশন থেকে TurboGears API কল করতে আপনি fetch বা Axios লাইব্রেরি ব্যবহার করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো, যেখানে React অ্যাপ্লিকেশন API থেকে ডেটা নিয়ে রেন্ডার করছে:
import React, { useEffect, useState } from 'react';
const App = () => {
const [message, setMessage] = useState('');
useEffect(() => {
fetch('/api/get_message')
.then(response => response.json())
.then(data => setMessage(data.message));
}, []);
return (
<div>
<h1>{message}</h1>
</div>
);
};
export default App;
এখানে, React অ্যাপ্লিকেশন /api/get_message API থেকে ডেটা নিয়ে রেন্ডার করছে।
৭. SPA রাউটিং
SPA-তে সাধারণত পেজ রিফ্রেশ ছাড়া নতুন কনটেন্ট লোড করা হয়, এবং এটি ক্লায়েন্ট সাইড রাউটিং এর মাধ্যমে পরিচালিত হয়। React বা অন্য ফ্রন্টএন্ড ফ্রেমওয়ার্কে আপনি রাউটিং ব্যবস্থা তৈরি করতে পারবেন।
React-এ রাউটিং এর জন্য React Router ব্যবহার করা হয়।
npm install react-router-dom
তারপর, React অ্যাপ্লিকেশনে রাউটিং সেটআপ করা হয়:
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/about" component={AboutPage} />
</Switch>
</Router>
);
};
সারাংশ
TurboGears একটি শক্তিশালী Python ফ্রেমওয়ার্ক যা SPA তৈরি করার জন্য উপযুক্ত। এতে React.js, Vue.js বা অন্য কোনো JavaScript ফ্রেমওয়ার্কের সাথে API ব্যবহার করে আপনি একটি ডাইনামিক এবং প্রতিক্রিয়া-প্রবণ ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন। TurboGears ব্যাকএন্ড API প্রদান করবে এবং React ফ্রন্টএন্ড অ্যাপ্লিকেশন ক্লায়েন্ট সাইড রাউটিং এবং ডেটা রেন্ডারিং করবে। এর মাধ্যমে আপনি দ্রুত, স্কেলেবল এবং মেইনটেইনেবল SPA তৈরি করতে পারবেন।
Read more
