Renderer Process হল Electron অ্যাপ্লিকেশনের অংশ যা ইউজার ইন্টারফেস (UI) রেন্ডার করে এবং ব্যবহারকারীর ইন্টারঅ্যাকশন পরিচালনা করে। এটি index.html এবং অন্যান্য JavaScript, CSS ফাইল দ্বারা পরিচালিত হয়। এই প্রক্রিয়া UI ডিজাইন এবং ব্যবহারকারীর ইনপুটের সাথে কাজ করার জন্য দায়ী।
এখানে index.html এবং Renderer ফাইল কনফিগারেশনের একটি সাধারণ উদাহরণ দেওয়া হয়েছে।
১. index.html কনফিগারেশন
index.html হল Renderer Process এর প্রধান ফাইল যা Electron অ্যাপ্লিকেশনের 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>Electron App</title>
<link rel="stylesheet" href="assets/styles/style.css"> <!-- স্টাইলশিট যোগ -->
</head>
<body>
<h1>Welcome to my Electron app!</h1>
<button id="clickButton">Click Me</button>
<script>
// Renderer Process এর জন্য JavaScript কোড
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: অ্যাপের UI উপাদান তৈরি করা হয়েছে (যেমন,
h1,button)। - CSS লিংক:
style.cssফাইল থেকে স্টাইল প্রয়োগ করা হয়েছে (এটিassets/styles/ফোল্ডারে থাকতে পারে)। - JavaScript: Renderer Process এর জন্য ব্যবহৃত JavaScript কোড, যা ব্যবহারকারীর ইন্টারঅ্যাকশন পরিচালনা করে এবং Main Process এর সাথে যোগাযোগ করে।
২. Renderer Process JavaScript ফাইল কনফিগারেশন
Renderer Process এর JavaScript ফাইলের মধ্যে আমরা Electron এর IPC (Inter-Process Communication) মডিউল ব্যবহার করে Main Process এর সাথে যোগাযোগ স্থাপন করি। ipcRenderer মডিউল ব্যবহার করে Renderer Process থেকে Main Process এ মেসেজ পাঠানো এবং সাড়া গ্রহণ করা হয়।
উদাহরণ: Renderer Process JavaScript
const { ipcRenderer } = require('electron');
// Renderer Process থেকে Main Process-এ মেসেজ পাঠানো
ipcRenderer.send('message-from-renderer', 'Hello from Renderer!');
// Main Process থেকে সাড়া গ্রহণ
ipcRenderer.on('reply-from-main', (event, arg) => {
console.log('Main Process থেকে বার্তা:', arg);
});
ব্যাখ্যা:
- ipcRenderer.send(): Renderer Process থেকে Main Process-এ মেসেজ পাঠানো হয়। এখানে
message-from-rendererচ্যানেলের মাধ্যমে একটি বার্তা পাঠানো হচ্ছে। - ipcRenderer.on(): Main Process থেকে সাড়া গ্রহণ করার জন্য ইভেন্ট লিসেনার সেট করা হয়।
reply-from-mainচ্যানেলের মাধ্যমে Main Process থেকে সাড়া ফেরত পাঠানো হয়।
৩. Renderer ফাইলের স্টাইল কনফিগারেশন (CSS)
অ্যাপের UI ডিজাইন করতে স্টাইলশিট ব্যবহার করা হয়। সাধারণত, Electron অ্যাপ্লিকেশনে CSS ব্যবহার করা হয় UI সুন্দর এবং ব্যবহারবান্ধব করার জন্য।
উদাহরণ: style.css (Assets ফোল্ডারে)
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ট্যাগের জন্য স্টাইল। এতে রঙ, প্যাডিং, সীমানা, এবং হোভার স্টাইলিং প্রয়োগ করা হয়েছে।
৪. Renderer ফাইল এবং Main Process এর মধ্যে যোগাযোগ
Renderer Process এবং Main Process এর মধ্যে যোগাযোগ IPC (Inter-Process Communication) ব্যবহার করে। নিচে দেখানো হয়েছে কিভাবে ipcMain (Main Process) এবং ipcRenderer (Renderer 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');
// Renderer Process থেকে মেসেজ গ্রহণ
ipcMain.on('message-from-renderer', (event, arg) => {
console.log('Renderer থেকে বার্তা:', arg);
// Main Process থেকে Renderer Process-এ উত্তর পাঠানো
event.reply('reply-from-main', 'Main Process থেকে উত্তর!');
});
});
সারাংশ
index.html: এটি Renderer Process এর প্রধান ফাইল যেখানে UI উপাদান (যেমন বাটন, টেক্সট) তৈরি করা হয় এবং JavaScript কোড যোগ করা হয়।- Renderer JavaScript ফাইল: এখানে
ipcRendererব্যবহার করে Renderer Process থেকে Main Process এ মেসেজ পাঠানো হয় এবং Main Process থেকে সাড়া গ্রহণ করা হয়। - CSS ফাইল: অ্যাপের UI ডিজাইন এবং স্টাইলিংয়ের জন্য ব্যবহার করা হয়।
এই কনফিগারেশনগুলি দিয়ে আপনি সহজেই Electron অ্যাপ্লিকেশনের UI তৈরি এবং ব্যবহারের জন্য প্রাথমিক কাঠামো তৈরি করতে পারবেন।
