Electron অ্যাপ্লিকেশনে HTML ফাইলের সাথে কাজ করা হলো Renderer Process এর মূল কাজ। Electron HTML, CSS এবং JavaScript এর মাধ্যমে ইউজার ইন্টারফেস (UI) তৈরি এবং পরিচালনা করতে সাহায্য করে। এখানে আমরা বিস্তারিতভাবে আলোচনা করবো কিভাবে Electron অ্যাপ্লিকেশন তৈরি করা হয় HTML ফাইলের সাথে কাজ করে।
১. HTML ফাইল এবং Electron
Electron অ্যাপ্লিকেশনে HTML ফাইল সাধারণত Renderer Process এর কাজ করে, যেখানে UI (User Interface) তৈরি করা হয়। আপনি HTML, CSS এবং JavaScript ব্যবহার করে ইন্টারেক্টিভ অ্যাপ্লিকেশন তৈরি করতে পারেন।
উদাহরণ:
index.html ফাইল:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Electron App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to my Electron app!</h1>
<button id="clickButton">Click Me</button>
<script>
const { ipcRenderer } = require('electron');
document.getElementById('clickButton').addEventListener('click', () => {
// Main Process এর সাথে যোগাযোগ
ipcRenderer.send('message-from-renderer', 'Hello from Renderer!');
});
// Main Process থেকে সাড়া গ্রহণ
ipcRenderer.on('reply-from-main', (event, arg) => {
console.log('Main Process থেকে উত্তর:', arg);
});
</script>
</body>
</html>
এখানে কনফিগারেশন:
- HTML:
h1এবংbuttonট্যাগ দিয়ে UI তৈরি করা হয়েছে। - CSS:
styles.cssফাইল ব্যবহার করে অ্যাপের স্টাইল ডিজাইন করা হয়েছে। - JavaScript: Electron এর
ipcRendererব্যবহার করে Main Process এর সাথে যোগাযোগ করার জন্য স্ক্রিপ্ট লেখা হয়েছে।
২. CSS ফাইলের সাথে কাজ করা
এছাড়াও, CSS ব্যবহার করে Electron অ্যাপ্লিকেশনের UI ডিজাইন করা যায়। CSS ফাইলকে HTML ফাইলে যুক্ত করে স্টাইল শিট প্রয়োগ করা হয়।
উদাহরণ: styles.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
text-align: center;
padding-top: 50px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
ব্যাখ্যা:
- button:
buttonট্যাগের জন্য স্টাইল দেওয়া হয়েছে। - body: সারা পৃষ্ঠার ব্যাকগ্রাউন্ড এবং টেক্সটের রঙ নির্ধারণ করা হয়েছে।
৩. Main Process এর সাথে HTML ফাইলের যোগাযোগ
Electron অ্যাপ্লিকেশনে Main Process এবং Renderer Process এর মধ্যে যোগাযোগ IPC (Inter-Process Communication) ব্যবহার করে করা হয়। এটি ipcRenderer (Renderer Process) এবং ipcMain (Main Process) ব্যবহার করে মেসেজ পাঠানো এবং গ্রহণ করা হয়।
Main Process (main.js):
const { app, BrowserWindow, ipcMain } = require('electron');
let mainWindow;
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
mainWindow.loadFile('index.html'); // HTML ফাইল লোড করা
ipcMain.on('message-from-renderer', (event, arg) => {
console.log('Renderer থেকে বার্তা:', arg);
// Renderer Process এ উত্তর পাঠানো
event.reply('reply-from-main', 'Main Process থেকে উত্তর!');
});
});
Renderer Process (index.html):
const { ipcRenderer } = require('electron');
document.getElementById('clickButton').addEventListener('click', () => {
// Main Process-এ মেসেজ পাঠানো
ipcRenderer.send('message-from-renderer', 'Hello from Renderer!');
});
ipcRenderer.on('reply-from-main', (event, arg) => {
console.log('Main Process থেকে উত্তর:', arg);
});
ব্যাখ্যা:
- Renderer Process:
ipcRendererব্যবহার করে মেসেজ পাঠায়। - Main Process:
ipcMainব্যবহার করে Renderer থেকে মেসেজ গ্রহণ করে এবং সাড়া ফেরত পাঠায়।
৪. JavaScript এর মাধ্যমে Dynamic Content
JavaScript ব্যবহার করে আপনি HTML ফাইলে ডাইনামিক কনটেন্ট যোগ করতে পারেন। উদাহরণস্বরূপ, ব্যবহারকারীর ইনপুট অনুযায়ী পেজের কনটেন্ট পরিবর্তন করা যেতে পারে।
উদাহরণ: Dynamic Content Change
document.getElementById('clickButton').addEventListener('click', () => {
document.body.style.backgroundColor = "lightblue"; // পৃষ্ঠার ব্যাকগ্রাউন্ড রঙ পরিবর্তন
document.querySelector('h1').textContent = "You clicked the button!"; // হেডিং পরিবর্তন
});
এটি ব্যবহারকারীর ক্লিকের উপর ভিত্তি করে HTML পৃষ্ঠার কনটেন্ট এবং স্টাইল পরিবর্তন করবে।
৫. App Icon এবং অন্যান্য স্ট্যাটিক ফাইল
আপনি অ্যাপের আইকন বা অন্যান্য মিডিয়া ফাইল assets/ ফোল্ডারে রাখতে পারেন এবং HTML ফাইলে তাদের ব্যবহার করতে পারেন। যেমন:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Electron App</title>
<link rel="icon" href="assets/images/icon.png"> <!-- অ্যাপের আইকন -->
</head>
সারাংশ
- HTML ফাইল হল Electron অ্যাপ্লিকেশনের UI তৈরি করার প্রধান উপাদান। এতে CSS এবং JavaScript ব্যবহার করে UI ডিজাইন এবং ব্যবহারের জন্য ইন্টারঅ্যাকশন তৈরি করা হয়।
- Renderer Process হল সেই প্রক্রিয়া যা HTML, CSS, এবং JavaScript দিয়ে UI রেন্ডার এবং ব্যবহারকারীর ইন্টারঅ্যাকশন পরিচালনা করে।
- Main Process এবং Renderer Process এর মধ্যে IPC ব্যবহারের মাধ্যমে যোগাযোগ করা হয়, যা অ্যাপের কার্যকারিতা উন্নত করে।
এইভাবে, Electron অ্যাপ্লিকেশন তৈরি করতে HTML ফাইলের সাথে কাজ করার কনফিগারেশন সহজ এবং কার্যকর।
Read more
