নোটিফিকেশন এবং ডায়লগ কাস্টমাইজেশন

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

এই টিউটোরিয়ালে নোটিফিকেশন এবং ডায়লগ কাস্টমাইজেশন সম্পর্কিত বিভিন্ন বৈশিষ্ট্য এবং কোড উদাহরণ দেওয়া হয়েছে।

১. নোটিফিকেশন

Electron এর Notification API ব্যবহার করে Desktop 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');

  // নোটিফিকেশন তৈরি করা
  const notification = new Notification({
    title: 'Electron Notification',
    body: 'This is a simple notification!',
  });

  notification.show(); // নোটিফিকেশন প্রদর্শন
});

এখানে, Notification কনস্ট্রাকটরের মাধ্যমে একটি নোটিফিকেশন তৈরি করা হচ্ছে। title এবং body কনফিগারেশনে নোটিফিকেশনের শিরোনাম এবং বার্তা সেট করা হয়। notification.show() দ্বারা নোটিফিকেশনটি ব্যবহারকারীর স্ক্রীনে প্রদর্শিত হবে।

নোটিফিকেশন কাস্টমাইজেশন

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

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

const notification = new Notification({
  title: 'Custom Notification',
  body: 'Click here to open the app!',
  icon: 'path/to/icon.png', // নোটিফিকেশনের জন্য কাস্টম আইকন
  actions: [
    {
      type: 'button',
      text: 'Open App',
    },
  ],
});

notification.show();

// অ্যাকশন বাটনের ক্লিক ইভেন্ট
notification.on('action', () => {
  console.log('User clicked the notification action');
  mainWindow.show(); // অ্যাপ্লিকেশন উইন্ডো দেখানো
});

• icon: নোটিফিকেশনের আইকন কাস্টমাইজ করা হয়েছে।
• actions: নোটিফিকেশনের জন্য অ্যাকশন বাটন যোগ করা হয়েছে।
• on('action'): ব্যবহারকারী যদি অ্যাকশন বাটনে ক্লিক করেন, তাহলে একটি ইভেন্ট ট্রিগার হবে।

২. ডায়লগ কাস্টমাইজেশন

Electron অ্যাপ্লিকেশনে ডায়লগ dialog API ব্যবহার করে বিভিন্ন ধরনের ডায়লগ তৈরি করা যায়, যেমন File Dialog, Message Dialog, এবং Error Dialog। আপনি ডায়লগের মাধ্যমে ব্যবহারকারীর কাছ থেকে ইনপুট বা পছন্দ গ্রহণ করতে পারেন।

উদাহরণ: ডায়লগ তৈরি করা

Main Process (main.js)

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

let mainWindow;

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

  mainWindow.loadFile('index.html');

  // মেসেজ ডায়লগ
  dialog.showMessageBox(mainWindow, {
    type: 'info',
    buttons: ['OK'],
    title: 'Information',
    message: 'This is an info message!',
  }).then(result => {
    console.log(result.response); // বাটন ক্লিকের ফলাফল
  });
});

এই উদাহরণে, dialog.showMessageBox() মেথড ব্যবহার করে একটি সিম্পল মেসেজ ডায়লগ তৈরি করা হয়েছে। এতে type, buttons, title, এবং message কনফিগারেশন ব্যবহার করা হয়েছে।

ফাইল সিলেকশন ডায়লগ

File Dialog ব্যবহার করে আপনি ব্যবহারকারীকে ফাইল নির্বাচন করতে বলতে পারেন।

dialog.showOpenDialog(mainWindow, {
  title: 'Select a File',
  properties: ['openFile', 'multiSelections'], // একাধিক ফাইল সিলেকশনের অনুমতি
}).then(result => {
  if (!result.canceled) {
    console.log('Selected files:', result.filePaths);
  }
});

• properties: ['openFile', 'multiSelections']: একাধিক ফাইল সিলেকশনের অনুমতি দেয়।
• result.filePaths: সিলেক্ট করা ফাইলের পাথ ফেরত দেয়।

ফোল্ডার সিলেকশন ডায়লগ

Folder Dialog ব্যবহার করে আপনি একটি ফোল্ডার নির্বাচন করতে পারেন।

dialog.showOpenDialog(mainWindow, {
  title: 'Select a Folder',
  properties: ['openDirectory'],
}).then(result => {
  if (!result.canceled) {
    console.log('Selected folder:', result.filePaths);
  }
});

• properties: ['openDirectory']: ফোল্ডার সিলেকশন অনুমতি দেয়।

৩. নোটিফিকেশন এবং ডায়লগের মধ্যে পার্থক্য

সারাংশ

• নোটিফিকেশন: Electron এ Notification API ব্যবহার করে সহজে ডেস্কটপ নোটিফিকেশন তৈরি করা যায়। এটি ব্যবহারকারীকে তথ্য প্রদান করতে সাহায্য করে এবং কাস্টম অ্যাকশন যোগ করা যায়।
• ডায়লগ কাস্টমাইজেশন: dialog API ব্যবহার করে মেসেজ ডায়লগ, ফাইল সিলেকশন ডায়লগ, এবং ফোল্ডার সিলেকশন ডায়লগ তৈরি করা যায়।
• নোটিফিকেশন এবং ডায়লগের মধ্যে মূল পার্থক্য হলো নোটিফিকেশন ব্যবহারকারীর কাছ থেকে কোনো ইনপুট না নিয়ে শুধুমাত্র তথ্য প্রদান করে, যখন ডায়লগ ব্যবহারকারীর কাছ থেকে ইনপুট বা পছন্দ গ্রহণ করে।

এভাবে, Electron অ্যাপ্লিকেশনগুলিতে নোটিফিকেশন এবং ডায়লগ কাস্টমাইজেশন ব্যবহার করে একটি ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব অভিজ্ঞতা তৈরি করা সম্ভব।