Electron এর API এবং মডিউলস

Electron একটি শক্তিশালী ফ্রেমওয়ার্ক যা Node.js এবং Chromium এর সমন্বয়ে ডেস্কটপ অ্যাপ্লিকেশন তৈরি করতে সহায়ক। Electron এর মধ্যে প্রচুর API এবং মডিউল রয়েছে যা ডেভেলপারদের বিভিন্ন কাজ সহজে করতে সহায়তা করে। এই API গুলি Main Process এবং Renderer Process এর মধ্যে কাজ ভাগ করে, যা অ্যাপ্লিকেশনের কার্যক্রম পরিচালনা করতে ব্যবহৃত হয়।

Electron এর প্রধান API এবং মডিউলস

১. app API

app API অ্যাপ্লিকেশনের জীবনচক্র এবং তার সাথে সম্পর্কিত কার্যক্রম পরিচালনা করে। এটি অ্যাপের শুরু, বন্ধ হওয়া এবং অন্যান্য জীবনচক্র ইভেন্টগুলো নিয়ন্ত্রণ করে।

প্রধান কাজ:

• অ্যাপের শুরু ও বন্ধ করা
• উইন্ডো ক্লোজিং ইভেন্ট হ্যান্ডলিং
• অ্যাপ প্ল্যাটফর্ম সংক্রান্ত সেটিংস

উদাহরণ:

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

app.whenReady().then(() => {
  console.log('অ্যাপ প্রস্তুত!');
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit(); // অ্যাপ বন্ধ করা
  }
});

২. BrowserWindow API

BrowserWindow API ব্যবহার করে অ্যাপ্লিকেশনের উইন্ডো তৈরি করা হয়। এটি Renderer Process এর সাথে যোগাযোগ স্থাপন করে এবং ব্যবহারকারীর ইন্টারফেস রেন্ডার করে।

প্রধান কাজ:

• উইন্ডো তৈরি ও নিয়ন্ত্রণ
• উইন্ডোর আকার, অবস্থান, স্ট্যাটাস নিয়ন্ত্রণ
• HTML ফাইল বা URL লোড করা

উদাহরণ:

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

let mainWindow;

mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: true
  }
});

mainWindow.loadFile('index.html');

৩. ipcMain এবং ipcRenderer API

ipcMain (Main Process) এবং ipcRenderer (Renderer Process) API ব্যবহার করে Main Process এবং Renderer Process এর মধ্যে তথ্য আদান-প্রদান করা হয়। এর মাধ্যমে Inter-Process Communication (IPC) বাস্তবায়িত হয়।

প্রধান কাজ:

• Main Process এবং Renderer Process এর মধ্যে মেসেজ পাঠানো এবং গ্রহণ করা।

উদাহরণ:

Main Process (ipcMain):

const { ipcMain } = require('electron');

ipcMain.on('message', (event, arg) => {
  console.log(arg); // Renderer থেকে পাঠানো বার্তা
  event.reply('response', 'Main Process থেকে উত্তর!');
});

Renderer Process (ipcRenderer):

const { ipcRenderer } = require('electron');

ipcRenderer.send('message', 'Hello from Renderer!');

ipcRenderer.on('response', (event, arg) => {
  console.log(arg); // Main Process থেকে সাড়া
});

৪. Menu API

Menu API ব্যবহৃত হয় অ্যাপ্লিকেশনের কাস্টম মেনু তৈরি করার জন্য। এটি আপনাকে ডেস্কটপ মেনু, কনটেক্সট মেনু এবং অন্যান্য মেনু তৈরি করতে দেয়।

প্রধান কাজ:

• কাস্টম মেনু তৈরি করা
• কীবোর্ড শর্টকাট কনফিগারেশন
• মেনু অ্যাকশন পরিচালনা

উদাহরণ:

const { Menu } = require('electron');

const menu = Menu.buildFromTemplate([
  {
    label: 'File',
    submenu: [
      { label: 'Open' },
      { label: 'Exit', click: () => { app.quit(); } }
    ]
  }
]);

Menu.setApplicationMenu(menu);

৫. dialog API

dialog API ব্যবহার করে ব্যবহারকারীর সাথে ডায়ালগ বক্সে যোগাযোগ করা যায়, যেমন ফাইল সিলেকশন ডায়ালগ, তথ্য প্রদর্শন ইত্যাদি।

প্রধান কাজ:

• ফাইল সিলেক্ট করা
• আলার্ম, কনফার্মেশন ডায়ালগ দেখানো
• ডায়ালগ থেকে ইউজারের ইনপুট নেওয়া

উদাহরণ:

const { dialog } = require('electron');

dialog.showOpenDialog({
  properties: ['openFile', 'openDirectory']
}).then(result => {
  console.log(result.filePaths);
});

৬. globalShortcut API

globalShortcut API ব্যবহার করে কীবোর্ড শর্টকাট সেট করা যায়, যা অ্যাপের বাইরে থাকা অবস্থায়ও কাজ করে।

প্রধান কাজ:

• কীবোর্ড শর্টকাটের মাধ্যমে অ্যাপ্লিকেশন নিয়ন্ত্রণ
• নির্দিষ্ট কী প্রেসে অ্যাকশন ট্রিগার করা

উদাহরণ:

const { globalShortcut } = require('electron');

app.whenReady().then(() => {
  globalShortcut.register('CommandOrControl+R', () => {
    console.log('রিফ্রেশ শর্টকাট প্রেস করা হয়েছে');
  });
});

৭. Notification API

Notification API ব্যবহার করে সিস্টেমের জন্য নোটিফিকেশন পাঠানো যায়। এটি ব্যবহারকারীর কাছে বিভিন্ন ধরনের তথ্য বা বিজ্ঞপ্তি প্রদর্শন করতে ব্যবহৃত হয়।

প্রধান কাজ:

• সিস্টেম নোটিফিকেশন পাঠানো
• অ্যাপের বাইরে থাকা অবস্থায়ও নোটিফিকেশন প্রদর্শন

উদাহরণ:

const { Notification } = require('electron');

let notification = new Notification({
  title: 'আপনার অ্যাপ প্রস্তুত!',
  body: 'এটি আপনার প্রথম Electron অ্যাপ!'
});

notification.show();

৮. fs (File System) API

fs (File System) API Electron এর Node.js অংশের একটি মডিউল, যা ফাইল সিস্টেমের সাথে কাজ করার জন্য ব্যবহৃত হয়।

প্রধান কাজ:

• ফাইল তৈরি, পড়া, লেখা এবং মুছে ফেলা
• ডিরেক্টরি এবং ফাইল সম্পর্কিত কার্যক্রম

উদাহরণ:

const fs = require('fs');

// ফাইল লেখার উদাহরণ
fs.writeFile('example.txt', 'Hello, Electron!', (err) => {
  if (err) throw err;
  console.log('ফাইল সফলভাবে লেখা হয়েছে!');
});

সারাংশ

Electron এর API এবং মডিউলস ডেভেলপারদের ডেস্কটপ অ্যাপ্লিকেশন তৈরি করতে সক্ষম করে, যেখানে Main Process এবং Renderer Process এর মধ্যে সমন্বয়ের মাধ্যমে অ্যাপ্লিকেশনের জীবনচক্র, UI রেন্ডারিং এবং সিস্টেম লেভেল কাজ সম্পন্ন হয়। এদের মাধ্যমে বিভিন্ন ধরনের ফিচার যেমন মেনু তৈরি, ডায়ালগ বক্স, নোটিফিকেশন, শর্টকাট, ফাইল সিস্টেম ইন্টারঅ্যাকশন ইত্যাদি সহজেই বাস্তবায়িত করা যায়।

Electron একটি শক্তিশালী ফ্রেমওয়ার্ক, যা Main Process এবং Renderer Process এর মধ্যে যোগাযোগ এবং বিভিন্ন সিস্টেম ফিচার ব্যবহারের জন্য বিভিন্ন API সরবরাহ করে। নিচে Electron এর কিছু গুরুত্বপূর্ণ API গুলো এবং তাদের ব্যবহার বিস্তারিতভাবে আলোচনা করা হয়েছে।

১. app API

app API হলো Electron অ্যাপ্লিকেশনের জীবনচক্র (lifecycle) এবং সার্ভিস চালানোর জন্য ব্যবহৃত API। এটি অ্যাপের শুরু, বন্ধ, এবং অন্যান্য গ্লোবাল কার্যক্রম পরিচালনা করতে সহায়ক।

ভূমিকা:

• অ্যাপ্লিকেশন শুরু হওয়া এবং বন্ধ হওয়া নিয়ন্ত্রণ করা।
• অ্যাপ্লিকেশন বন্ধ করা হলে (অথবা উইন্ডো বন্ধ হলে) অ্যাপ্লিকেশন সম্পূর্ণভাবে বন্ধ করার কাজ করা।
• Tray icon এবং অ্যাপ মেনু ইত্যাদি কনফিগার করা।

উদাহরণ: app API ব্যবহার

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  mainWindow.loadFile('index.html');
});

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

২. BrowserWindow API

BrowserWindow API Electron অ্যাপ্লিকেশনে উইন্ডো তৈরি এবং নিয়ন্ত্রণ করার জন্য ব্যবহৃত হয়। এটি UI রেন্ডারিং এর জন্য একটি Chromium উইন্ডো তৈরি করে, যেখানে HTML, CSS, এবং JavaScript ব্যবহার করে ব্যবহারকারীর ইন্টারফেস প্রদর্শন করা হয়।

ভূমিকা:

• নতুন উইন্ডো তৈরি করা।
• উইন্ডোর সাইজ, পজিশন এবং অন্যান্য সেটিংস কনফিগার করা।
• HTML ফাইল বা URL লোড করা।

উদাহরণ: BrowserWindow API ব্যবহার

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // index.html ফাইল লোড করা
  mainWindow.loadFile('index.html');
});

৩. ipcMain API

ipcMain API হলো Electron এর Main Process-এর জন্য ব্যবহৃত API, যা Renderer Process থেকে মেসেজ গ্রহণ করে এবং তার সাড়া পাঠায়। এটি Inter-Process Communication (IPC) ব্যবস্থাপনা করে, যার মাধ্যমে Main Process এবং Renderer Process এর মধ্যে যোগাযোগ করা যায়।

ভূমিকা:

• Renderer Process থেকে আসা মেসেজ গ্রহণ করা।
• Renderer Process-এ সাড়া পাঠানো।

উদাহরণ: ipcMain API ব্যবহার

const { ipcMain } = require('electron');

ipcMain.on('message-from-renderer', (event, arg) => {
  console.log('Renderer থেকে বার্তা:', arg);
  // Renderer Process-এ সাড়া পাঠানো
  event.reply('reply-from-main', 'Main Process থেকে বার্তা!');
});

৪. ipcRenderer API

ipcRenderer API হলো Electron এর Renderer Process-এর জন্য ব্যবহৃত API, যা Main Process-এর সাথে যোগাযোগের জন্য ব্যবহৃত হয়। এটি Renderer Process থেকে মেসেজ পাঠায় এবং Main Process থেকে সাড়া গ্রহণ করে।

ভূমিকা:

• Main Process-এ মেসেজ পাঠানো।
• Main Process থেকে আসা সাড়া গ্রহণ করা।

উদাহরণ: ipcRenderer API ব্যবহার

const { ipcRenderer } = require('electron');

// Main Process-এ মেসেজ পাঠানো
ipcRenderer.send('message-from-renderer', 'Hello from Renderer!');

// Main Process থেকে সাড়া গ্রহণ করা
ipcRenderer.on('reply-from-main', (event, arg) => {
  console.log('Main Process থেকে বার্তা:', arg);
});

app, BrowserWindow, ipcMain, এবং ipcRenderer এর মধ্যে পারস্পরিক সম্পর্ক

1. app: অ্যাপের জীবনচক্র পরিচালনা করে, যেমন অ্যাপ চালু হওয়া, উইন্ডো বন্ধ হওয়া ইত্যাদি।
2. BrowserWindow: নতুন উইন্ডো তৈরি করে এবং Renderer Process এর মাধ্যমে UI রেন্ডার করে।
3. ipcMain: Main Process এর মধ্যে Renderer Process থেকে মেসেজ গ্রহণ করে এবং সাড়া পাঠায়।
4. ipcRenderer: Renderer Process এর মধ্যে Main Process এর সাথে যোগাযোগ করতে ব্যবহৃত হয়।

এভাবে, app, BrowserWindow, ipcMain, এবং ipcRenderer APIs একত্রে কাজ করে Electron অ্যাপ্লিকেশনের কার্যক্রম এবং উইন্ডো ব্যবস্থাপনা পরিচালনা করে।

সারাংশ

• app API: অ্যাপ্লিকেশনের জীবনচক্র এবং গ্লোবাল কার্যক্রম পরিচালনা।
• BrowserWindow API: উইন্ডো তৈরি এবং কনফিগারেশন।
• ipcMain API: Main Process এ Renderer Process থেকে মেসেজ গ্রহণ এবং সাড়া পাঠানো।
• ipcRenderer API: Renderer Process এ Main Process এর সাথে যোগাযোগ করা।

এই APIs Electron অ্যাপ্লিকেশনের ভিত্তি গঠন করে এবং Main Process এবং Renderer Process এর মধ্যে কার্যকরী যোগাযোগ এবং উইন্ডো ব্যবস্থাপনা সক্ষম করে।

Electron অ্যাপ্লিকেশনে Menu মডিউল ব্যবহার করে কাস্টম মেনু তৈরি করা যায়, যা অ্যাপের ইউজার ইন্টারফেসে বিভিন্ন অপশন বা ফাংশনালিটি প্রদান করে। এটি সাধারণত অ্যাপ্লিকেশনের মেনু বার (যেমন File, Edit, View) এবং কনটেক্সট মেনু (যেমন রাইট-ক্লিক মেনু) তৈরি করতে ব্যবহৃত হয়।

এখানে আমরা দেখব কিভাবে Menu মডিউল ব্যবহার করে কাস্টম মেনু তৈরি করা যায়।

১. Menu মডিউল ব্যবহার করা

Menu মডিউল Electron এর একটি বিল্ট-ইন মডিউল যা অ্যাপের মেনু তৈরি ও কনফিগার করার জন্য ব্যবহৃত হয়। আপনি এটি ব্যবহার করে মেনু অপশন তৈরি করতে পারেন এবং কাস্টম ফাংশনালিটি অ্যাসাইন করতে পারেন।

২. Menu এবং MenuItem তৈরি

Menu তৈরি করার জন্য প্রথমে Menu.buildFromTemplate() মেথড ব্যবহার করা হয়। এই মেথডে মেনুর প্রতিটি আইটেমকে MenuItem হিসেবে তৈরি করা হয়। মেনুর আইটেমগুলোতে বিভিন্ন ইভেন্ট হ্যান্ডলার অ্যাসাইন করা যায়।

উদাহরণ: কাস্টম মেনু তৈরি

১. Main Process (main.js)

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

let mainWindow;

app.on('ready', () => {
  // উইন্ডো তৈরি
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  mainWindow.loadFile('index.html');

  // কাস্টম মেনু তৈরি
  const menuTemplate = [
    {
      label: 'File',  // মেনু আইটেমের লেবেল
      submenu: [
        {
          label: 'New File',
          click: () => {
            console.log('New File clicked!');
          },
        },
        {
          label: 'Open File',
          click: () => {
            console.log('Open File clicked!');
          },
        },
        {
          type: 'separator', // সেপারেটর (লাইনে বিভাজন)
        },
        {
          label: 'Exit',
          click: () => {
            app.quit(); // অ্যাপ বন্ধ করা
          },
        },
      ],
    },
    {
      label: 'Edit',
      submenu: [
        {
          label: 'Undo',
          role: 'undo',  // এক্ষেত্রে Electron predefined role ব্যবহার করা হয়েছে
        },
        {
          label: 'Redo',
          role: 'redo',  // Electron predefined role
        },
        {
          type: 'separator',
        },
        {
          label: 'Copy',
          role: 'copy',  // predefined role
        },
        {
          label: 'Paste',
          role: 'paste', // predefined role
        },
      ],
    },
  ];

  // মেনু তৈরি
  const menu = Menu.buildFromTemplate(menuTemplate);
  Menu.setApplicationMenu(menu);  // মেনু অ্যাপ্লিকেশনে সেট করা
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

৩. MenuItem এ বিভিন্ন বৈশিষ্ট্য যুক্ত করা

MenuItem তৈরি করার সময় আপনি এটি কাস্টমাইজ করতে পারেন, যেমন:

• label: মেনু আইটেমের টেক্সট।
• click: মেনু আইটেমে ক্লিক করার পর যেই কার্যক্রমটি চালু হবে।
• type: সেপারেটর, চেকবক্স বা রেডিও আইটেম তৈরি করতে ব্যবহৃত হয়।
• role: Electron-এর predefined রোলস, যেমন undo, redo, copy, paste ইত্যাদি।

এছাড়াও আপনি accelerator ব্যবহার করে কীবোর্ড শর্টকাটও অ্যাসাইন করতে পারেন।

উদাহরণ: কীবোর্ড শর্টকাট সহ মেনু আইটেম

{
  label: 'Save',
  accelerator: 'CmdOrCtrl+S',  // কীবোর্ড শর্টকাট
  click: () => {
    console.log('Save clicked!');
  }
}

৪. কনটেক্সট মেনু (Right-click Menu)

আপনি right-click মেনু বা কনটেক্সট মেনু তৈরি করতে পারেন যা একটি নির্দিষ্ট উপাদান বা পুরো উইন্ডোতে রাইট-ক্লিক করার সময় প্রদর্শিত হয়।

উদাহরণ: কনটেক্সট মেনু তৈরি

const { Menu, MenuItem } = require('electron');

const contextMenu = new Menu();
contextMenu.append(new MenuItem({
  label: 'Cut',
  role: 'cut',
}));
contextMenu.append(new MenuItem({
  label: 'Copy',
  role: 'copy',
}));
contextMenu.append(new MenuItem({
  label: 'Paste',
  role: 'paste',
}));

// রাইট-ক্লিক ইভেন্ট হ্যান্ডলিং
mainWindow.webContents.on('context-menu', (event, params) => {
  contextMenu.popup({ window: mainWindow });
});

এটি কনটেক্সট মেনু তৈরি করে এবং right-click এ সেটি প্রদর্শন করে।

৫. মেনু স্টাইল কাস্টমাইজেশন

যদিও Electron এর মেনু কাস্টমাইজেশনের জন্য নির্দিষ্ট কোনো CSS স্টাইলিং সরাসরি দেওয়া যায় না, তবে আপনি HTML এবং CSS ব্যবহার করে কাস্টম মেনু তৈরি করতে পারেন। উদাহরণস্বরূপ, আপনি একটি ড্রপডাউন মেনু বা কাস্টম স্টাইল করা মেনু তৈরি করতে পারেন যা Electron উইন্ডোতে প্রদর্শিত হবে, কিন্তু তা কিছুটা ভিন্নভাবে কাজ করবে।

সারাংশ

• Menu মডিউল ব্যবহার করে আপনি Electron অ্যাপ্লিকেশনে কাস্টম মেনু তৈরি করতে পারেন।
• মেনু আইটেমে MenuItem ব্যবহার করা হয়, এবং এর মাধ্যমে আপনি মেনুর অপশন কাস্টমাইজ করতে পারেন।
• আপনি role এর মাধ্যমে predefined ফাংশনালিটি যোগ করতে পারেন, যেমন copy, paste, undo ইত্যাদি।
• context menu তৈরি করার জন্য right-click ব্যবহার করা হয়, যা কনটেক্সট বা রাইট-ক্লিক মেনু প্রদর্শন করে।

এভাবে আপনি আপনার Electron অ্যাপে কাস্টম মেনু তৈরি করে আরও উন্নত ফাংশনালিটি যোগ করতে পারবেন।

Electron অ্যাপ্লিকেশনগুলিতে ব্যবহারকারীকে বার্তা বা তথ্য প্রদর্শন করতে Dialog মডিউল ব্যবহার করা হয়। Dialog মডিউল এর মাধ্যমে আপনি সহজে ফাইল সিলেক্টর, ইনপুট বক্স, বার্তা বক্স, এবং অন্যান্য ডায়ালগ বক্স তৈরি করতে পারেন।

Dialog মডিউল

Electron এর Dialog মডিউল ব্যবহার করে আপনি বিভিন্ন ধরনের ডায়ালগ বক্স তৈরি করতে পারবেন, যেমন:

• আলার্ট বক্স (Alert Box)
• ইনপুট বক্স (Input Box)
• ফাইল সিলেক্টর বক্স (File Selector Box)
• সেভ ডায়ালগ বক্স (Save Dialog Box)

Dialog মডিউল Main Process এর অংশ হিসেবে কাজ করে এবং এটি dialog নামক মডিউল থেকে আসে, যা Electron এর একটি ইন-বিল্ট মডিউল।

Dialog মডিউল ইনপোর্ট করা

Main Process এর মধ্যে Dialog মডিউল ব্যবহার করা হয় এবং এটি ইনপোর্ট করতে হয়।

const { dialog } = require('electron');

১. অ্যালার্ট বক্স (Alert Box)

একটি সাধারণ বার্তা প্রদর্শনের জন্য dialog.showMessageBox() ব্যবহার করা হয়। এটি একটি সংক্ষিপ্ত বার্তা দেখায় এবং ব্যবহারকারীকে একটি "OK" বাটনে ক্লিক করতে বলে।

উদাহরণ: অ্যালার্ট বক্স তৈরি

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({ width: 800, height: 600 });
  mainWindow.loadFile('index.html');

  // অ্যালার্ট বক্স
  dialog.showMessageBox({
    type: 'info',  // বার্তার ধরন: info, error, question ইত্যাদি
    buttons: ['OK'],
    title: 'অ্যালার্ট',
    message: 'এটি একটি সাধারণ বার্তা!'
  });
});

• type: বার্তার ধরনের ইনপুট। যেমন: info, error, warning, question।
• buttons: ডায়ালগে প্রদর্শিত বাটনগুলির তালিকা।
• message: বার্তা বা টেক্সট যা ব্যবহারকারীর কাছে প্রদর্শিত হবে।

২. ফাইল সিলেক্টর বক্স (File Selector Box)

ফাইল সিলেক্টর বক্স ব্যবহার করে ব্যবহারকারীরা তাদের সিস্টেম থেকে একটি ফাইল নির্বাচন করতে পারেন।

উদাহরণ: ফাইল সিলেক্টর বক্স তৈরি

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({ width: 800, height: 600 });
  mainWindow.loadFile('index.html');

  // ফাইল সিলেক্টর
  dialog.showOpenDialog(mainWindow, {
    title: 'ফাইল নির্বাচন করুন',
    defaultPath: '/Users/yourname/Documents', // ডিফল্ট লোকেশন
    filters: [
      { name: 'Text Files', extensions: ['txt', 'md'] },
      { name: 'Images', extensions: ['jpg', 'png'] }
    ],
    properties: ['openFile']  // 'openDirectory' বা 'multiSelections' এর সাথে যুক্ত করা যেতে পারে
  }).then(result => {
    console.log(result.filePaths); // নির্বাচিত ফাইলের পথ
  }).catch(err => {
    console.log(err);
  });
});

• filters: ফাইল টাইপ ফিল্টার করে, যেমন শুধুমাত্র txt বা jpg ফাইল সিলেকশন।
• properties: বিভিন্ন অপশন, যেমন openFile, openDirectory, multiSelections (একাধিক ফাইল সিলেক্ট করতে)।

৩. ফোল্ডার সিলেক্টর বক্স (Folder Selector Box)

ব্যবহারকারীরা একটি ফোল্ডার নির্বাচন করতে চাইলে dialog.showOpenDialog এর properties এ openDirectory ব্যবহার করা হয়।

উদাহরণ: ফোল্ডার সিলেক্টর বক্স তৈরি

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({ width: 800, height: 600 });
  mainWindow.loadFile('index.html');

  // ফোল্ডার সিলেক্টর
  dialog.showOpenDialog(mainWindow, {
    title: 'ফোল্ডার নির্বাচন করুন',
    properties: ['openDirectory']
  }).then(result => {
    console.log(result.filePaths); // নির্বাচিত ফোল্ডারের পথ
  }).catch(err => {
    console.log(err);
  });
});

৪. সেভ ডায়ালগ বক্স (Save Dialog Box)

ব্যবহারকারীর কাছ থেকে ফাইল সেভ করার জন্য dialog.showSaveDialog() ব্যবহার করা হয়। এটি ফাইলের নাম এবং লোকেশন চায়।

উদাহরণ: সেভ ডায়ালগ বক্স তৈরি

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({ width: 800, height: 600 });
  mainWindow.loadFile('index.html');

  // সেভ ডায়ালগ
  dialog.showSaveDialog(mainWindow, {
    title: 'ফাইল সেভ করুন',
    defaultPath: '/Users/yourname/Documents/sample.txt',
    filters: [
      { name: 'Text Files', extensions: ['txt'] },
      { name: 'All Files', extensions: ['*'] }
    ]
  }).then(result => {
    if (!result.canceled) {
      console.log(result.filePath); // সেভ করার ফাইলের পথ
    }
  }).catch(err => {
    console.log(err);
  });
});

• defaultPath: ফাইল সেভ করার জন্য ডিফল্ট অবস্থান।
• filters: ফাইল টাইপ ফিল্টার করে।

৫. ইনপুট বক্স (Input Box)

ব্যবহারকারীর কাছ থেকে ইনপুট নেওয়ার জন্য dialog.showInputDialog() এর মত কাস্টম ডায়ালগ তৈরি করা যেতে পারে, যদিও Electron এর ডিফল্ট মডিউল input dialog সরাসরি সরবরাহ করে না। তবে, আপনি কাস্টম HTML ফর্ম তৈরি করে ইনপুট বক্স তৈরি করতে পারেন।

সারাংশ

• Electron Dialog মডিউল আপনাকে বিভিন্ন ধরনের ডায়ালগ বক্স তৈরি করতে সাহায্য করে যেমন অ্যালার্ট বক্স, ফাইল সিলেক্টর, সেভ ডায়ালগ, এবং ফোল্ডার সিলেক্টর।
• এটি ব্যবহার করে আপনি ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন সহজভাবে করতে পারেন।
• dialog.showMessageBox(), dialog.showOpenDialog(), dialog.showSaveDialog() ইত্যাদি মেথডগুলি বিভিন্ন ডায়ালগ তৈরি করতে ব্যবহৃত হয়।
• Main Process থেকে Dialog মডিউল ব্যবহার করা হয়, যা Electron অ্যাপ্লিকেশনটির ব্যাকএন্ড কাজগুলি সম্পাদন করে।

Electron এর Notification API ব্যবহার করে আপনি ডেস্কটপ অ্যাপ্লিকেশনে সিস্টেম নোটিফিকেশন তৈরি করতে পারেন। এই API ব্যবহার করে সহজে পুশ নোটিফিকেশন পাঠানো সম্ভব, যা ব্যবহারকারীদের নজর আকর্ষণ করতে সাহায্য করে। Notification API মূলত Main Process থেকে কাজ করে এবং এটি HTML5 Notifications এর মত কাজ করে।

Notification API এর বৈশিষ্ট্য

• Desktop Notifications: ব্যবহারকারীর ডিসপ্লে স্ক্রীনে সিস্টেম নোটিফিকেশন প্রদর্শন করা।
• Customizable: নোটিফিকেশনগুলোর শিরোনাম, বডি, আইকন এবং টাইমআউট কাস্টমাইজ করা যায়।
• Cross-Platform: Electron অ্যাপ্লিকেশন Windows, macOS, এবং Linux এ নোটিফিকেশন পাঠানোর ক্ষমতা রাখে।

Notification API এর ব্যবহার

১. Main Process থেকে Notification পাঠানো

Electron এ Notification তৈরি এবং প্রদর্শন করতে Notification কনস্ট্রাক্টর ব্যবহার করা হয়।

উদাহরণ: Main Process (main.js)

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    },
  });

  mainWindow.loadFile('index.html');

  // Notification তৈরি এবং প্রদর্শন
  const notification = new Notification({
    title: 'নতুন নোটিফিকেশন!',
    body: 'এটি একটি উদাহরণ নোটিফিকেশন।'
  });

  notification.show(); // নোটিফিকেশন দেখানো
});

• title: নোটিফিকেশনের শিরোনাম।
• body: নোটিফিকেশনের মূল বর্ণনা বা টেক্সট।
• show(): নোটিফিকেশনটি স্ক্রীনে প্রদর্শন করা।

২. Notification কাস্টমাইজেশন

নোটিফিকেশন আরও কাস্টমাইজ করা যায় যেমন আইকন, প্রগ্রেস, টাইমআউট ইত্যাদি।

উদাহরণ: কাস্টম আইকন সহ নোটিফিকেশন

const notification = new Notification({
  title: 'কাস্টম আইকন নোটিফিকেশন',
  body: 'এটি একটি কাস্টম আইকন সহ নোটিফিকেশন!',
  icon: 'path/to/your/icon.png' // আইকন ফাইল
});
notification.show();

• icon: এখানে আপনি নোটিফিকেশনের জন্য একটি কাস্টম আইকন নির্ধারণ করতে পারেন।

উদাহরণ: নোটিফিকেশন প্রগ্রেস সহ

const notification = new Notification({
  title: 'নোটিফিকেশন প্রগ্রেস',
  body: 'ডাউনলোড চলছে...',
  icon: 'path/to/your/icon.png'
});

// সিস্টেমে একটি প্রগ্রেসবার যোগ করা
notification.on('click', () => {
  console.log('নোটিফিকেশন ক্লিক করা হয়েছে!');
});

notification.show();

৩. Renderer Process থেকে Notification পাঠানো

যদি আপনি Renderer Process থেকে নোটিফিকেশন পাঠাতে চান, তবে Main Process এর সাথে IPC (Inter-Process Communication) ব্যবহার করতে হবে।

উদাহরণ: Renderer Process থেকে Main Process এ নোটিফিকেশন পাঠানো

১. Main Process (main.js)

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    },
  });

  mainWindow.loadFile('index.html');

  // Renderer থেকে মেসেজ গ্রহণ
  ipcMain.on('show-notification', (event, args) => {
    const notification = new Notification({
      title: args.title,
      body: args.body
    });
    notification.show();
  });
});

২. Renderer Process (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Notification Example</title>
</head>
<body>
  <h1>Electron নোটিফিকেশন উদাহরণ</h1>
  <button id="notifyButton">নোটিফিকেশন দেখাও</button>

  <script>
    const { ipcRenderer } = require('electron');

    document.getElementById('notifyButton').addEventListener('click', () => {
      // Main Process এ নোটিফিকেশন পাঠানো
      ipcRenderer.send('show-notification', { title: 'নতুন নোটিফিকেশন', body: 'এই নোটিফিকেশনটি Renderer থেকে এসেছে!' });
    });
  </script>
</body>
</html>

এখানে, Renderer Process একটি বাটন ক্লিকের মাধ্যমে Main Process-এ মেসেজ পাঠাচ্ছে এবং Main Process সেই মেসেজটি গ্রহণ করে এবং নোটিফিকেশন তৈরি করে।

৪. নোটিফিকেশন সাউন্ড এবং টাইমআউট

Electron নোটিফিকেশন API সাউন্ড এবং টাইমআউট কনফিগার করার সুযোগও দেয়। আপনি timeout এবং sound ব্যবহার করে নোটিফিকেশনের আচরণ নিয়ন্ত্রণ করতে পারেন।

const notification = new Notification({
  title: 'এটি একটি টেস্ট নোটিফিকেশন',
  body: 'এটি একটি সাউন্ড সহ নোটিফিকেশন!',
  sound: 'path/to/soundfile.mp3', // সাউন্ড যোগ করা
  timeoutType: 'default', // নোটিফিকেশন স্বয়ংক্রিয়ভাবে বন্ধ হবে
});
notification.show();

সারাংশ

Electron এর Notification API আপনাকে আপনার ডেস্কটপ অ্যাপ্লিকেশন থেকে সিস্টেম নোটিফিকেশন পাঠানোর সুবিধা দেয়। এটি Main Process থেকে কাজ করে এবং ব্যবহারকারীর নজর আকর্ষণ করার জন্য ব্যবহৃত হয়। আপনি নোটিফিকেশনকে কাস্টমাইজ করতে পারেন যেমন শিরোনাম, বডি, আইকন, টাইমআউট, এবং সাউন্ড। Renderer Process থেকে Main Process এর সাথে IPC ব্যবহার করে নোটিফিকেশন পাঠানো সম্ভব।