main.js ফাইল হল Electron অ্যাপ্লিকেশনের Main Process এর স্ক্রিপ্ট। এটি অ্যাপ্লিকেশনের জীবনচক্র এবং উইন্ডো ম্যানেজমেন্ট নিয়ন্ত্রণ করে। main.js ফাইলটি অ্যাপের শুরুতে BrowserWindow তৈরি করে এবং UI রেন্ডার করার জন্য index.html লোড করে।
এখানে একটি সাধারণ main.js ফাইল তৈরির প্রক্রিয়া দেখানো হয়েছে যা একটি প্রাথমিক Electron অ্যাপ তৈরি করতে সাহায্য করবে।
১. main.js ফাইল তৈরি করা
main.js ফাইলটি সাধারণত আপনার প্রজেক্টের মূল ফোল্ডারে থাকে। এটি Electron অ্যাপ্লিকেশনের Main Process পরিচালনা করে। নিচে main.js ফাইলের একটি সাধারণ উদাহরণ দেওয়া হল।
উদাহরণ: main.js
// ইলেকট্রন থেকে প্রয়োজনীয় মডিউল ইম্পোর্ট করা
const { app, BrowserWindow } = require('electron');
let mainWindow;
// অ্যাপ চালু হলে প্রথমে এই কোডটি কার্যকর হবে
app.on('ready', () => {
// একটি নতুন BrowserWindow তৈরি করা
mainWindow = new BrowserWindow({
width: 800, // উইন্ডোর প্রস্থ
height: 600, // উইন্ডোর উচ্চতা
webPreferences: {
nodeIntegration: true // Renderer Process এ Node.js ইন্টিগ্রেশন সক্রিয় করা
}
});
// উইন্ডোতে `index.html` ফাইল লোড করা
mainWindow.loadFile('index.html');
});
// উইন্ডো বন্ধ হলে অ্যাপও বন্ধ হবে
app.on('window-all-closed', () => {
// macOS ছাড়া অন্যান্য প্ল্যাটফর্মে অ্যাপ বন্ধ করা হবে
if (process.platform !== 'darwin') {
app.quit();
}
});
২. কোডের বিস্তারিত ব্যাখ্যা
const { app, BrowserWindow } = require('electron');- এখানে
appএবংBrowserWindowমডিউলটি ইম্পোর্ট করা হয়েছে যা Electron অ্যাপ্লিকেশনের কার্যক্রম নিয়ন্ত্রণ করতে ব্যবহৃত হবে।
- এখানে
let mainWindow;mainWindowভেরিয়েবলটি ব্যবহার করা হবে উইন্ডোটি তৈরি করার জন্য।
app.on('ready', () => { ... });app.on('ready')ইভেন্টটি তখন ট্রিগার হয় যখন অ্যাপ্লিকেশন পুরোপুরি লোড হয়ে প্রস্তুত হয়। এখানে নতুন একটিBrowserWindowতৈরি করা হয়।
new BrowserWindow({ ... })BrowserWindowহল সেই ক্লাস যা একটি নতুন উইন্ডো তৈরি করতে ব্যবহৃত হয়। উইন্ডোটি 800x600 পিক্সেল আকারে তৈরি হবে এবংnodeIntegration: trueসেট করা হয়েছে যাতে Renderer Process-এ Node.js এর API ব্যবহার করা যায়।
mainWindow.loadFile('index.html');- এটি উইন্ডোর মধ্যে
index.htmlফাইলটি লোড করে, যা Renderer Process এর কাজ করবে।
- এটি উইন্ডোর মধ্যে
app.on('window-all-closed', () => { ... });- এই ইভেন্টটি তখন ট্রিগার হয় যখন সমস্ত উইন্ডো বন্ধ হয়ে যায়। সাধারণত, macOS ছাড়া অন্যান্য অপারেটিং সিস্টেমে অ্যাপ বন্ধ হয়ে যায়।
৩. Main Process থেকে Renderer Process এর সাথে যোগাযোগ
আপনি যদি Main Process এবং Renderer Process এর মধ্যে যোগাযোগ করতে চান, তবে ipcMain এবং ipcRenderer ব্যবহার করতে হবে।
উদাহরণ: Main Process থেকে Renderer Process এ মেসেজ পাঠানো
main.js (Main Process):
const { ipcMain } = require('electron');
// Renderer থেকে মেসেজ গ্রহণ
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):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Renderer Process</title>
</head>
<body>
<h1>Renderer Process থেকে Main Process এর সাথে যোগাযোগ</h1>
<button id="sendMessageBtn">Main Process এ বার্তা পাঠাও</button>
<script>
const { ipcRenderer } = require('electron');
document.getElementById('sendMessageBtn').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>
৪. প্রজেক্ট রান করা
প্রজেক্ট রান করার জন্য package.json-এ "start" স্ক্রিপ্ট যুক্ত করতে হবে:
"scripts": {
"start": "electron ."
}
তারপর, টার্মিনালে নিচের কমান্ডটি চালিয়ে অ্যাপ চালান:
npm start
সারাংশ
main.js ফাইলটি Electron অ্যাপ্লিকেশনের Main Process পরিচালনা করে। এটি অ্যাপের উইন্ডো তৈরি এবং পরিচালনা করার কাজ করে। BrowserWindow ব্যবহার করে উইন্ডো তৈরি করা হয় এবং index.html লোড করা হয়। এছাড়াও, Main Process থেকে Renderer Process এর সাথে IPC (Inter-Process Communication) এর মাধ্যমে যোগাযোগ করা যায়।
Read more
