Electron এর বেসিক কনফিগারেশন

ইলেকট্রন (Electron) - Web Development

314

ইলেকট্রন (Electron) অ্যাপ্লিকেশন তৈরি করতে হলে কিছু বেসিক কনফিগারেশন প্রয়োজন। এই কনফিগারেশনগুলি অ্যাপের কার্যকারিতা এবং কর্মক্ষমতা নির্ধারণ করে। নিচে Electron অ্যাপ্লিকেশনের জন্য সাধারণ কনফিগারেশন সেটআপ এবং প্রয়োজনীয় ফাইলের বিস্তারিত আলোচনা করা হয়েছে।

১. `package.json` কনফিগারেশন

প্রথমেই, Electron অ্যাপ্লিকেশন তৈরি করার জন্য একটি package.json ফাইল তৈরি করতে হবে। এটি অ্যাপের সমস্ত ডিপেনডেন্সি, স্ক্রিপ্ট এবং অন্যান্য কনফিগারেশন তথ্য ধারণ করে।

উদাহরণ:

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "My first Electron app",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^25.0.0"
  },
  "dependencies": {}
}

name: অ্যাপের নাম।
version: অ্যাপের ভার্সন।
description: অ্যাপের বর্ণনা।
main: Main Process এর জন্য মূল স্ক্রিপ্ট ফাইল (অর্থাৎ main.js)।
scripts: এখানে start স্ক্রিপ্ট থাকে, যা অ্যাপ চালানোর জন্য ব্যবহৃত হয় (electron . এর মাধ্যমে অ্যাপ শুরু হয়)।
devDependencies: Electron সহ ডেভেলপমেন্টের জন্য দরকারি প্যাকেজগুলি এখানে থাকবে।

২. Main Process কনফিগারেশন (`main.js`)

Main Process হল অ্যাপের কেন্দ্রীয় অংশ, যা Electron অ্যাপ্লিকেশনের লাইফসাইকেল এবং উইন্ডো ম্যানেজমেন্ট নিয়ন্ত্রণ করে।

উদাহরণ: `main.js`

const { app, BrowserWindow } = require('electron');

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,  // Renderer Process এ Node.js ইন্টিগ্রেশন সক্রিয়
    },
  });

  // অ্যাপের মূল HTML পৃষ্ঠা লোড করা
  mainWindow.loadFile('index.html');
});

// উইন্ডো বন্ধ হলে অ্যাপও বন্ধ হবে
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') { // macOS ছাড়া সব প্ল্যাটফর্মে অ্যাপ বন্ধ হবে
    app.quit();
  }
});

মূল কনফিগারেশন পয়েন্ট:

BrowserWindow: এটি একটি নতুন উইন্ডো তৈরি করে যেখানে অ্যাপ্লিকেশন রেন্ডার হবে।
webPreferences.nodeIntegration: true করলে Renderer Process এ Node.js ইন্টিগ্রেশন সক্ষম হয়, অর্থাৎ Renderer Process এ Node.js ফিচার ব্যবহার করা যাবে।

৩. Renderer Process কনফিগারেশন (`index.html`)

Renderer Process হল সেই প্রক্রিয়া যা অ্যাপের ইউজার ইন্টারফেস রেন্ডার করে। এতে 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 অ্যাপ</title>
</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!');
    });
  </script>
</body>
</html>

মূল কনফিগারেশন পয়েন্ট:

IPC (Inter-Process Communication): ipcRenderer মডিউল ব্যবহার করে Renderer Process থেকে Main Process এর সাথে যোগাযোগ করা হয়।

৪. Electron ইনস্টলেশন

Electron ইনস্টল করতে npm ব্যবহার করা হয়। অ্যাপ্লিকেশন তৈরি করার পরে আপনাকে Electron প্যাকেজ ইনস্টল করতে হবে।

ইনস্টলেশন কমান্ড:

npm install electron --save-dev

এটি Electron কে ডেভেলপমেন্ট ডিপেনডেন্সি হিসেবে ইনস্টল করবে।

৫. `package.json` এ `start` স্ক্রিপ্ট যোগ করা

প্রজেক্টের package.json ফাইলে "start" স্ক্রিপ্ট যোগ করা হয়, যাতে অ্যাপ চালানোর জন্য কমান্ডটি সহজ করা যায়।

"scripts": {
  "start": "electron ."
}

এই স্ক্রিপ্টটি npm start কমান্ড চালানোর মাধ্যমে অ্যাপ্লিকেশন শুরু করতে ব্যবহৃত হয়।

৬. App Icons এবং অন্যান্য স্ট্যাটিক ফাইল

আপনি যদি অ্যাপের আইকন বা অন্যান্য স্ট্যাটিক ফাইল যুক্ত করতে চান, তাহলে assets/ ফোল্ডার ব্যবহার করতে পারেন। এখানে আপনি চিত্র, আইকন, বা CSS ফাইল রাখতে পারবেন।

উদাহরণ: App Icon কনফিগারেশন

mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  icon: 'path/to/icon.png',  // অ্যাপের আইকন নির্ধারণ করা
  webPreferences: {
    nodeIntegration: true,
  },
});

৭. App Packaging

এটি অ্যাপ্লিকেশন তৈরি বা প্যাকেজ করার জন্য প্রয়োজনীয় কনফিগারেশন। আপনি electron-packager বা electron-builder ব্যবহার করে অ্যাপ প্যাকেজ করে বিভিন্ন অপারেটিং সিস্টেমের জন্য ডিস্ট্রিবিউশন তৈরি করতে পারেন।

উদাহরণ: Electron Packager ইনস্টল করা

npm install electron-packager --save-dev

এবং পরে প্যাকেজিং করতে কমান্ড চালানো:

npx electron-packager . --platform=win32 --arch=x64

সারাংশ

Electron অ্যাপ্লিকেশন তৈরি করার জন্য package.json, main.js, এবং index.html ফাইলগুলি অত্যন্ত গুরুত্বপূর্ণ। এই ফাইলগুলিতে বেসিক কনফিগারেশন সেটিংস এবং অ্যাপের কাঠামো নির্ধারণ করা হয়। এছাড়া, Electron প্যাকেজ এবং অন্যান্য ডিপেনডেন্সিগুলির সঠিক কনফিগারেশন অ্যাপ্লিকেশনটি সঠিকভাবে চালানোর জন্য অপরিহার্য।

Content added By

Azizar Rahman Aziz

main.js ফাইল তৈরি করা

230

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) এর মাধ্যমে যোগাযোগ করা যায়।

Content added By

Azizar Rahman Aziz

BrowserWindow তৈরি এবং কনফিগার করা

323

BrowserWindow হলো Electron অ্যাপ্লিকেশনের মূল উপাদান যা একটি ডেস্কটপ উইন্ডো তৈরি এবং প্রদর্শন করতে ব্যবহৃত হয়। এটি ব্যবহারকারীর ইন্টারফেস রেন্ডার করে এবং Renderer Process এর মাধ্যমে ইউজার ইন্টারঅ্যাকশন পরিচালনা করে। BrowserWindow তৈরি করার সময় এর কনফিগারেশন অনেক গুরুত্বপূর্ণ কারণ এটি অ্যাপ্লিকেশনের কার্যকারিতা, পারফরম্যান্স এবং ইউজার এক্সপেরিয়েন্সে প্রভাব ফেলে।

BrowserWindow তৈরি

BrowserWindow তৈরি করতে Main Process-এ BrowserWindow কনস্ট্রাক্টর ব্যবহার করা হয়।

উদাহরণ:

const { app, BrowserWindow } = require('electron');

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,  // উইন্ডোর প্রস্থ
    height: 600, // উইন্ডোর উচ্চতা
    webPreferences: {
      nodeIntegration: true,  // Node.js এর সমর্থন Renderer Process এ
    }
  });

  // অ্যাপের মূল HTML ফাইল লোড করা
  mainWindow.loadFile('index.html');
});

এখানে:

width এবং height: উইন্ডোর আকার নির্ধারণ করে।
webPreferences.nodeIntegration: Renderer Process এ Node.js ব্যবহারের সক্ষমতা নিয়ন্ত্রণ করে।

BrowserWindow কনফিগারেশন অপশনসমূহ

BrowserWindow এর বিভিন্ন কনফিগারেশন অপশন ব্যবহার করে আপনি উইন্ডোর উপস্থিতি এবং কার্যকলাপ কাস্টমাইজ করতে পারেন।

সাধারণ কনফিগারেশন অপশনসমূহ

width এবং height:
- উইন্ডোর আকার নির্ধারণ করে।
minWidth এবং minHeight:
- উইন্ডো মিনিমাম আকার নির্ধারণ করে।
maxWidth এবং maxHeight:
- উইন্ডোর সর্বাধিক আকার নির্ধারণ করে।
frame:
- উইন্ডোতে সিস্টেম ডিফল্ট ফ্রেম (বর্ডার এবং শিরোনাম বার) দেখাবে কিনা সেটি নিয়ন্ত্রণ করে। ডিফল্ট হল true (অর্থাৎ ফ্রেম থাকবে)। যদি false দেওয়া হয়, তবে কাস্টম ফ্রেম থাকবে।
title:
- উইন্ডোর শিরোনাম নির্ধারণ করে।
icon:
- উইন্ডোর আইকন নির্ধারণ করে।
resizable:
- উইন্ডোটি রিসাইজ করা যাবে কিনা তা নির্ধারণ করে।
alwaysOnTop:
- উইন্ডোটি সর্বদা অন্য উইন্ডোগুলোর উপরে থাকবে কি না তা নির্ধারণ করে।
fullscreen:
- উইন্ডোটি পূর্ণ পর্দায় খুলবে কি না তা নিয়ন্ত্রণ করে।
show:
- উইন্ডোটি লোড হওয়ার পর স্বয়ংক্রিয়ভাবে দেখানোর জন্য।

উদাহরণ: বিস্তারিত কনফিগারেশন

const { app, BrowserWindow } = require('electron');

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 1024,
    height: 768,
    minWidth: 800,  // মিনিমাম প্রস্থ
    minHeight: 600, // মিনিমাম উচ্চতা
    maxWidth: 1280, // সর্বাধিক প্রস্থ
    maxHeight: 1024, // সর্বাধিক উচ্চতা
    frame: false,  // কাস্টম ফ্রেম
    title: 'My Electron App', // উইন্ডোর শিরোনাম
    icon: 'path/to/icon.png', // উইন্ডোর আইকন
    resizable: true, // উইন্ডো রিসাইজযোগ্য
    alwaysOnTop: true, // সর্বদা উপরে থাকবে
    fullscreen: false, // পূর্ণ পর্দায় নয়
    show: false, // উইন্ডো লোড হওয়ার পর স্বয়ংক্রিয়ভাবে দেখানো হবে না
  });

  // উইন্ডো লোড হওয়ার পর শো হবে
  mainWindow.once('ready-to-show', () => {
    mainWindow.show();
  });

  // অ্যাপের মূল HTML ফাইল লোড করা
  mainWindow.loadFile('index.html');
});

BrowserWindow কনফিগারেশন অপশনগুলির বিস্তারিত ব্যাখ্যা

width এবং height: উইন্ডোটির প্রাথমিক আকার নির্ধারণ করে।
minWidth এবং minHeight: উইন্ডোটি রিসাইজ করার সময় এর কমপক্ষে এই আকারে থাকতে হবে।
maxWidth এবং maxHeight: উইন্ডোটি রিসাইজ করার সময় এর বেশিও আকার নেয়া যাবে না।
frame: false দিলে উইন্ডোতে কোন সিস্টেম বর্ডার বা শিরোনাম বার থাকবে না, এবং কাস্টম UI ব্যবহার করতে পারবেন।
title: উইন্ডোর শিরোনাম বার এ প্রদর্শিত হবে।
icon: উইন্ডোর আইকন সেট করতে ব্যবহৃত হয়।
resizable: উইন্ডোটি রিসাইজ করা যাবে কিনা তা নির্ধারণ করে। যদি false দেওয়া হয়, উইন্ডোটি রিসাইজ করা যাবে না।
alwaysOnTop: উইন্ডোটি অন্য যেকোনো উইন্ডোর উপরে থাকবে।
fullscreen: উইন্ডোটি অ্যাপ চালু হলে পূর্ণ পর্দায় খুলবে না কি না, তা নির্ধারণ করে।
show: উইন্ডোটি তৈরি হলেও সেটি তৎক্ষণাৎ প্রদর্শিত হবে না। যখন ready-to-show ইভেন্ট ট্রিগার হবে, তখন উইন্ডোটি দেখা যাবে।

উইন্ডোতে কাস্টম UI এবং WebContents পরিচালনা

WebContents হলো ব্রাউজারের কন্টেন্ট এবং UI এর প্রতিনিধিত্বকারী একটি অবজেক্ট, যা HTML, CSS, এবং JavaScript নিয়ে কাজ করে। এটি Renderer Process এর সাথে সংযুক্ত থাকে এবং ব্যবহারকারীর UI রেন্ডারিং করে।

উদাহরণ:

const { app, BrowserWindow } = require('electron');

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // Renderer Process এ Node.js সমর্থন
    }
  });

  mainWindow.loadURL('https://www.example.com'); // ওয়েব পেজ লোড করা

  // WebContents এর মাধ্যমে ইভেন্ট শোনা
  mainWindow.webContents.on('did-finish-load', () => {
    console.log('Web page loaded!');
  });
});

BrowserWindow সম্পর্কিত ইভেন্টসমূহ

did-finish-load: ওয়েব পেজ সম্পূর্ণ লোড হলে এই ইভেন্ট ট্রিগার হয়।
close: উইন্ডো বন্ধ হলে এই ইভেন্ট ট্রিগার হয়।
resize: উইন্ডো রিসাইজ হলে এই ইভেন্ট ট্রিগার হয়।

সারাংশ

BrowserWindow হলো Electron অ্যাপ্লিকেশনের মূল উপাদান, যা ডেস্কটপ উইন্ডো তৈরি করে এবং রেন্ডারিং পরিচালনা করে। এর মাধ্যমে উইন্ডোর আকার, অবস্থান, এবং অন্যান্য বৈশিষ্ট্য কনফিগার করা সম্ভব। BrowserWindow এর বিভিন্ন কনফিগারেশন অপশন ব্যবহার করে অ্যাপ্লিকেশনকে কাস্টমাইজ করা যায় এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করা যায়।

Content added By

Azizar Rahman Aziz

index.html এবং Renderer ফাইল কনফিগারেশন

317

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 তৈরি এবং ব্যবহারের জন্য প্রাথমিক কাঠামো তৈরি করতে পারবেন।

Content added By

Azizar Rahman Aziz

Electron অ্যাপ্লিকেশন রান করা

336

Electron অ্যাপ্লিকেশন রান করার জন্য কিছু সহজ ধাপ অনুসরণ করতে হয়। এখানে আমরা জানব কীভাবে একটি Electron অ্যাপ্লিকেশন তৈরি করা এবং সেটি রান করা যায়।

১. প্রাথমিক প্রজেক্ট সেটআপ

প্রথমে একটি নতুন ডিরেক্টরি তৈরি করুন এবং Node.js এর মাধ্যমে প্রজেক্ট ইনিশিয়ালাইজ করুন।

mkdir my-electron-app
cd my-electron-app
npm init -y

এটি একটি package.json ফাইল তৈরি করবে, যা অ্যাপের কনফিগারেশন এবং ডিপেনডেন্সি সংরক্ষণ করবে।

২. Electron ইনস্টল করা

Electron ইনস্টল করতে নিচের কমান্ড ব্যবহার করুন:

npm install electron --save-dev

এটি Electron প্যাকেজ ডাউনলোড এবং আপনার প্রজেক্টে ইনস্টল করবে।

৩. `package.json` ফাইল কনফিগার করা

এখন package.json ফাইলটি সম্পাদনা করুন এবং একটি start স্ক্রিপ্ট যোগ করুন, যা Electron অ্যাপ্লিকেশন চালানোর জন্য ব্যবহৃত হবে:

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "My first Electron app",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^25.0.0"
  }
}

এখানে "start": "electron ." স্ক্রিপ্টটি Electron অ্যাপ চালানোর জন্য ব্যবহৃত হবে।

৪. Main Process (`main.js`) তৈরি করা

এখন একটি main.js ফাইল তৈরি করুন, যা আপনার অ্যাপের Main Process নিয়ন্ত্রণ করবে। এই স্ক্রিপ্টে অ্যাপ্লিকেশনের উইন্ডো তৈরি এবং চালানো হবে।

উদাহরণ: main.js

const { app, BrowserWindow } = require('electron');

let mainWindow;

app.on('ready', () => {
  // নতুন একটি উইন্ডো তৈরি করা
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,  // Renderer Process এ Node.js ইন্টিগ্রেশন
    },
  });

  // উইন্ডোতে HTML লোড করা
  mainWindow.loadFile('index.html');
});

এই কোডটি একটি BrowserWindow তৈরি করবে এবং index.html ফাইল লোড করবে।

৫. Renderer Process (UI) তৈরি করা

এখন index.html ফাইল তৈরি করুন, যা UI রেন্ডার করবে।

উদাহরণ: 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>
</head>
<body>
  <h1>Welcome to my Electron app!</h1>
</body>
</html>

এটি একটি সাধারণ HTML পৃষ্ঠা যেখানে একটি h1 ট্যাগ থাকবে।

৬. Electron অ্যাপ রান করা

এখন, অ্যাপ চালানোর জন্য npm start কমান্ড ব্যবহার করুন:

npm start

এই কমান্ডটি Electron অ্যাপ্লিকেশন চালু করবে এবং একটি নতুন উইন্ডো খুলবে যেখানে আপনার index.html ফাইল রেন্ডার হবে।

৭. ডেভেলপমেন্টের সময় লাইভ রিলোড ব্যবহার করা

কোনও পরিবর্তন করার সময় লাইভ রিলোড সুবিধা ব্যবহার করতে পারেন। এটি স্বয়ংক্রিয়ভাবে অ্যাপ রিলোড করে যখন আপনি কোড পরিবর্তন করবেন।

লাইভ রিলোড যোগ করার জন্য electron-reload প্যাকেজ ইনস্টল করুন:

npm install electron-reload --save-dev

এবং তারপর main.js ফাইলে এটি যুক্ত করুন:

require('electron-reload')(__dirname);

এখন, যখনই আপনি কোডে পরিবর্তন করবেন, Electron স্বয়ংক্রিয়ভাবে রিলোড হবে।

৮. Electron অ্যাপ ডিস্ট্রিবিউট করা (প্যাকেজিং)

অ্যাপটি ডেভেলপ করার পর সেটি ডিস্ট্রিবিউট বা প্যাকেজ করতে চাইলে electron-packager অথবা electron-builder ব্যবহার করতে পারেন।

উদাহরণ: Electron Packager ইনস্টল করা

npm install electron-packager --save-dev

প্যাকেজিং করতে:

npx electron-packager . --platform=win32 --arch=x64

এই কমান্ডটি Windows 64-bit প্ল্যাটফর্মে অ্যাপ প্যাকেজ করবে।

সারাংশ

Electron অ্যাপ্লিকেশন রান করার জন্য প্রথমে Node.js এবং npm ব্যবহার করে প্রজেক্ট সেটআপ করা হয়। তারপর Electron ইনস্টল করে main.js ফাইল তৈরি করা হয়, যেখানে Main Process পরিচালিত হয়, এবং index.html ফাইলের মাধ্যমে UI তৈরি করা হয়। npm start কমান্ড দিয়ে অ্যাপ চালানো হয়, এবং ডেভেলপমেন্টের সময় লাইভ রিলোড সুবিধা ব্যবহার করে অ্যাপ দ্রুত পরীক্ষা করা যায়।

Content added By

Azizar Rahman Aziz

Electron পরিচিতি Electron সেটআপ এবং ইনস্টলেশন Main Process এবং Renderer Process Electron এর API এবং মডিউলস Main এবং Renderer Process এর মধ্যে যোগাযোগ

Electron এর বেসিক কনফিগারেশন

১. package.json কনফিগারেশন

উদাহরণ:

২. Main Process কনফিগারেশন (main.js)

উদাহরণ: main.js

মূল কনফিগারেশন পয়েন্ট:

৩. Renderer Process কনফিগারেশন (index.html)

উদাহরণ: index.html

মূল কনফিগারেশন পয়েন্ট:

৪. Electron ইনস্টলেশন

ইনস্টলেশন কমান্ড:

৫. package.json এ start স্ক্রিপ্ট যোগ করা

৬. App Icons এবং অন্যান্য স্ট্যাটিক ফাইল

উদাহরণ: App Icon কনফিগারেশন

৭. App Packaging

উদাহরণ: Electron Packager ইনস্টল করা

সারাংশ

main.js ফাইল তৈরি করা

১. main.js ফাইল তৈরি করা

উদাহরণ: main.js

২. কোডের বিস্তারিত ব্যাখ্যা

৩. Main Process থেকে Renderer Process এর সাথে যোগাযোগ

উদাহরণ: Main Process থেকে Renderer Process এ মেসেজ পাঠানো

৪. প্রজেক্ট রান করা

সারাংশ

BrowserWindow তৈরি এবং কনফিগার করা

BrowserWindow তৈরি

উদাহরণ:

BrowserWindow কনফিগারেশন অপশনসমূহ

সাধারণ কনফিগারেশন অপশনসমূহ

উদাহরণ: বিস্তারিত কনফিগারেশন

BrowserWindow কনফিগারেশন অপশনগুলির বিস্তারিত ব্যাখ্যা

উইন্ডোতে কাস্টম UI এবং WebContents পরিচালনা

উদাহরণ:

BrowserWindow সম্পর্কিত ইভেন্টসমূহ

সারাংশ

index.html এবং Renderer ফাইল কনফিগারেশন

১. index.html কনফিগারেশন

উদাহরণ: index.html

এখানে কনফিগারেশন:

২. Renderer Process JavaScript ফাইল কনফিগারেশন

উদাহরণ: Renderer Process JavaScript

ব্যাখ্যা:

৩. Renderer ফাইলের স্টাইল কনফিগারেশন (CSS)

উদাহরণ: style.css (Assets ফোল্ডারে)

ব্যাখ্যা:

৪. Renderer ফাইল এবং Main Process এর মধ্যে যোগাযোগ

Main Process (main.js)

সারাংশ

Electron অ্যাপ্লিকেশন রান করা

১. প্রাথমিক প্রজেক্ট সেটআপ

২. Electron ইনস্টল করা

৩. package.json ফাইল কনফিগার করা

৪. Main Process (main.js) তৈরি করা

উদাহরণ: main.js

৫. Renderer Process (UI) তৈরি করা

উদাহরণ: index.html

৬. Electron অ্যাপ রান করা

৭. ডেভেলপমেন্টের সময় লাইভ রিলোড ব্যবহার করা

৮. Electron অ্যাপ ডিস্ট্রিবিউট করা (প্যাকেজিং)

উদাহরণ: Electron Packager ইনস্টল করা

সারাংশ

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!

১. `package.json` কনফিগারেশন

২. Main Process কনফিগারেশন (`main.js`)

উদাহরণ: `main.js`

৩. Renderer Process কনফিগারেশন (`index.html`)

উদাহরণ: `index.html`

৫. `package.json` এ `start` স্ক্রিপ্ট যোগ করা

১. `main.js` ফাইল তৈরি করা

উদাহরণ: `main.js`

উদাহরণ: `index.html`

উদাহরণ: `style.css` (Assets ফোল্ডারে)

৩. `package.json` ফাইল কনফিগার করা

৪. Main Process (`main.js`) তৈরি করা