Electron এর Auto-Update ফিচার

Electron এর Auto-Update ফিচার ব্যবহার করে, আপনি আপনার Electron অ্যাপ্লিকেশনের নতুন ভার্সন স্বয়ংক্রিয়ভাবে ডাউনলোড এবং ইনস্টল করতে পারেন। এটি একটি গুরুত্বপূর্ণ ফিচার যা অ্যাপ্লিকেশনের আপডেট প্রক্রিয়াটি সহজ করে তোলে এবং ব্যবহারকারীদের সর্বদা সর্বশেষ সংস্করণে থাকতে সহায়ক হয়।

Electron অ্যাপ্লিকেশনটি আপডেট করার জন্য দুটি গুরুত্বপূর্ণ টুল ব্যবহৃত হয়:

1. electron-updater - অ্যাপ্লিকেশনের জন্য আপডেট পরিচালনা করে।
2. electron-builder - অ্যাপ্লিকেশন প্যাকেজিং এবং আপডেটের জন্য ব্যবহৃত হয়।

এখানে Electron এর Auto-Update ফিচার ব্যবহারের পদ্ধতি বিস্তারিতভাবে ব্যাখ্যা করা হবে।

১. electron-updater ইনস্টল করা

আপনার Electron অ্যাপ্লিকেশনে Auto-Update ফিচার যুক্ত করতে প্রথমে electron-updater প্যাকেজটি ইনস্টল করতে হবে। এটি আপডেট চেকিং, ডাউনলোড এবং ইনস্টলেশন প্রক্রিয়া পরিচালনা করে।

প্যাকেজ ইনস্টল করা:

npm install electron-updater --save

২. electron-builder কনফিগারেশন

আপনি যখন আপনার Electron অ্যাপ্লিকেশনটি প্যাকেজ করবেন, তখন electron-builder টুলটি ব্যবহার করবেন। এটি অ্যাপ্লিকেশনটির ইনস্টলেশন প্যাকেজ তৈরি করার জন্য ব্যবহৃত হয় এবং auto-update ফিচারও অন্তর্ভুক্ত করে।

প্যাকেজ ইনস্টল করা:

npm install electron-builder --save-dev

এছাড়া electron-builder এর কনফিগারেশন package.json ফাইলে যুক্ত করতে হবে।

package.json ফাইল কনফিগারেশন:

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "build": {
    "appId": "com.example.myapp",
    "productName": "My App",
    "win": {
      "target": "nsis"
    },
    "mac": {
      "category": "public.app-category.utilities"
    }
  }
}

• appId: আপনার অ্যাপ্লিকেশনের একক আইডি যা আপডেট প্রক্রিয়া পরিচালনা করতে ব্যবহৃত হবে।
• productName: অ্যাপের নাম।
• win এবং mac: উইন্ডোজ এবং ম্যাক সিস্টেমের জন্য কনফিগারেশন।

৩. Auto-Update কনফিগারেশন

আপনার Electron অ্যাপ্লিকেশনকে আপডেট করার জন্য আপনাকে autoUpdater মডিউল ব্যবহার করতে হবে, যা electron-updater এর একটি অংশ।

উদাহরণ: Main Process কনফিগারেশন - main.js

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

// অ্যাপ্লিকেশন উইন্ডো তৈরি
let mainWindow;

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

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

// Auto Update কনফিগারেশন
const server = 'https://your-server.com';  // আপনার আপডেট সার্ভারের URL
const feed = `${server}/update/${process.platform}/${app.getVersion()}`;

autoUpdater.setFeedURL(feed);

// অ্যাপ্লিকেশন চালু হলে আপডেট চেক শুরু হবে
app.whenReady().then(() => {
  createWindow();
  autoUpdater.checkForUpdates();  // আপডেট চেক করা

  autoUpdater.on('update-available', () => {
    console.log('Update Available');
  });

  autoUpdater.on('update-not-available', () => {
    console.log('No updates available');
  });

  autoUpdater.on('error', (err) => {
    console.error('Update error:', err);
  });

  autoUpdater.on('download-progress', (progressObj) => {
    console.log(`Download speed: ${progressObj.bytesPerSecond}`);
    console.log(`Downloaded ${progressObj.percent}%`);
  });

  autoUpdater.on('update-downloaded', () => {
    console.log('Update downloaded');
    dialog.showMessageBox(mainWindow, {
      type: 'info',
      buttons: ['Restart', 'Later'],
      title: 'Update Available',
      message: 'A new version of the app is available. Restart to apply the update.'
    }).then((result) => {
      if (result.response === 0) {
        autoUpdater.quitAndInstall();  // ইনস্টল করা
      }
    });
  });
});

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

• autoUpdater.setFeedURL(): এটি আপডেট সার্ভারের URL সেট করে, যেখানে আপনার অ্যাপ্লিকেশন আপডেটগুলি হোস্ট করা থাকবে।
• autoUpdater.checkForUpdates(): এটি আপডেট চেক করার জন্য ব্যবহার করা হয়।
• update-available, update-not-available, download-progress, update-downloaded: এগুলি হল ইভেন্টগুলো যা আপডেট চেক, ডাউনলোড এবং ইনস্টলেশন প্রক্রিয়া চলাকালীন ট্র্যাক করা হয়।

৪. আপডেট সার্ভার সেটআপ

আপনার অ্যাপ্লিকেশনের আপডেট ফাইল সার্ভারে হোস্ট করা হবে। আপনি GitHub Releases বা নিজস্ব আপডেট সার্ভার ব্যবহার করতে পারেন।

GitHub Releases:

• GitHub এর মাধ্যমে আপডেট ফাইল হোস্ট করার জন্য, আপনি আপনার অ্যাপ্লিকেশনকে GitHub Repository তে আপলোড করতে পারেন এবং GitHub Releases ব্যবহার করতে পারেন।

নিজস্ব আপডেট সার্ভার:

• Electron-builder এর মাধ্যমে আপডেট ফাইল হোস্ট করতে একটি /update সার্ভার তৈরি করতে পারেন, যেখানে latest.yml ফাইল এবং অ্যাপ্লিকেশনের নতুন ভার্সন থাকে।

৫. Electron Auto-Update প্রক্রিয়া সংক্ষেপে

1. autoUpdater কনফিগার করা হয়, যার মাধ্যমে সার্ভার থেকে আপডেট চেক এবং ডাউনলোড করা হয়।
2. update-available ইভেন্টে, অ্যাপ্লিকেশন আপডেট পাওয়ার তথ্য ব্যবহারকারীকে জানানো হয়।
3. update-downloaded ইভেন্টে, আপডেটটি ডাউনলোড হয়ে গেলে ব্যবহারকারীকে পুনরায় অ্যাপ্লিকেশন রিস্টার্ট করার জন্য বলা হয়।
4. autoUpdater.quitAndInstall() ব্যবহার করে আপডেট ইনস্টল করা হয়।

সারাংশ

• Electron Auto-Update ফিচার ব্যবহার করে আপনার অ্যাপ্লিকেশন স্বয়ংক্রিয়ভাবে নতুন সংস্করণ ডাউনলোড এবং ইনস্টল করতে পারে।
• electron-updater এবং electron-builder টুলস ব্যবহার করে আপডেট ব্যবস্থাপনাটি সহজ হয়।
• autoUpdater মডিউল দিয়ে অ্যাপ্লিকেশন আপডেট চেক, ডাউনলোড এবং ইনস্টলেশন পরিচালিত হয়।
• GitHub Releases বা নিজস্ব আপডেট সার্ভার ব্যবহার করে আপডেট ফাইল হোস্ট করা যায়।

এভাবে আপনি সহজেই আপনার Electron অ্যাপ্লিকেশনটির Auto-Update ফিচার কনফিগার করতে পারেন।

Electron অ্যাপ্লিকেশনগুলিতে Auto-Updater ফিচারটি ব্যবহারকারীদের জন্য অ্যাপ্লিকেশনটি স্বয়ংক্রিয়ভাবে আপডেট করার সুবিধা প্রদান করে। এটি ব্যবহৃত হয়, যাতে অ্যাপ্লিকেশন নতুন ভার্সনে চলে যায় যখন একটি নতুন আপডেট উপলব্ধ হয়। Electron এর auto-updater মডিউল ব্যবহার করে আপনি অ্যাপ্লিকেশনের আপডেট প্রক্রিয়া স্বয়ংক্রিয় করতে পারেন।

Auto-Updater মডিউল Electron এর জন্য একটি অত্যন্ত গুরুত্বপূর্ণ ফিচার, যা অ্যাপ্লিকেশন ব্যবহারের সুবিধা বৃদ্ধি করে, কারণ ব্যবহারকারীকে আপডেট ইনস্টল করার জন্য কোনো পদক্ষেপ নিতে হয় না। এই মডিউলটি Electron অ্যাপ্লিকেশনকে নতুন ভার্সনে আপডেট করতে সহায়তা করে।

১. Auto-Updater মডিউল কনফিগারেশন

auto-updater মডিউল Main Process থেকে ব্যবহৃত হয়। এটি electron-updater নামক প্যাকেজের মাধ্যমে কাজ করে, যা Squirrel.Windows, AppImage, Snap এবং macOS-এর জন্য আপডেট প্রদান করে।

২. নোটিফিকেশন এবং ফাইল সিস্টেম অ্যাক্সেস

আপডেটের সময় ইউজারকে বিজ্ঞপ্তি প্রদর্শন করা এবং update.json ফাইল থেকে আপডেট তথ্য সংগ্রহ করা হয়। Electron অ্যাপ্লিকেশনগুলো সাধারণত GitHub বা S3 এর মতো সার্ভার থেকে আপডেট সংগ্রহ করে।

৩. নির্দিষ্ট নির্ভরতা ইনস্টল করা

আপডেট প্রক্রিয়া চলাতে electron-updater প্যাকেজের সাহায্য নিতে হবে। তাই প্রথমেই electron-updater ইনস্টল করা প্রয়োজন।

npm install electron-updater --save

এছাড়া, electron-builder ব্যবহার করে অ্যাপ্লিকেশনটি প্যাকেজ করতে হবে, যাতে আপডেটের জন্য প্রয়োজনীয় সমস্ত ফাইল তৈরি করা যায়।

npm install electron-builder --save-dev

৪. Auto-Updater কনফিগারেশন

আপডেট কনফিগার করার জন্য autoUpdater API ব্যবহার করা হয়। এটি অ্যাপ্লিকেশনের Main Process-এ ব্যবহৃত হয় এবং আপডেটের জন্য একটি URL নির্ধারণ করা হয়।

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

const { app, BrowserWindow, autoUpdater, dialog } = require('electron');
const { createWindow } = require('./window'); // উইন্ডো তৈরি করার ফাংশন
const path = require('path');

// আপডেটের URL সংজ্ঞায়িত করা (GitHub URL)
const server = 'https://your-update-server.com';
const feedURL = `${server}/update/${process.platform}/${app.getVersion()}`;

let mainWindow;

app.on('ready', () => {
  createWindow(); // উইন্ডো তৈরি করা
  autoUpdater.setFeedURL(feedURL);

  // আপডেট চেক শুরু করা
  autoUpdater.checkForUpdates();

  // আপডেট পাওয়া গেলে
  autoUpdater.on('update-available', () => {
    dialog.showMessageBox(mainWindow, {
      type: 'info',
      buttons: ['OK'],
      title: 'Update Available',
      message: 'A new update is available. The app will update soon.'
    });
  });

  // আপডেট ডাউনলোড হওয়ার পর
  autoUpdater.on('update-downloaded', () => {
    dialog.showMessageBox(mainWindow, {
      type: 'info',
      buttons: ['Restart'],
      title: 'Update Downloaded',
      message: 'The update has been downloaded. Restart the app to apply the update.'
    }).then(result => {
      if (result.response === 0) {
        autoUpdater.quitAndInstall(); // ইনস্টল এবং পুনরায় অ্যাপ চালু করা
      }
    });
  });

  // আপডেট না পাওয়া গেলে
  autoUpdater.on('error', (err) => {
    dialog.showMessageBox(mainWindow, {
      type: 'error',
      buttons: ['OK'],
      title: 'Update Error',
      message: `Error while checking for updates: ${err}`
    });
  });
});

• autoUpdater.setFeedURL(feedURL): আপডেট সার্ভারের URL সেট করা হয়। এটি সাধারণত GitHub, AWS S3 অথবা অন্য যে কোনো সার্ভার হতে পারে যেখানে আপডেট ফাইলগুলো রাখা হয়।
• autoUpdater.checkForUpdates(): এই ফাংশনটি অ্যাপ্লিকেশন চালু হলে আপডেট চেক করতে ব্যবহৃত হয়।
• autoUpdater.on('update-available'): একটি নতুন আপডেট পাওয়ার পর এটি ট্রিগার হয় এবং ব্যবহারকারীকে জানানো হয়।
• autoUpdater.on('update-downloaded'): আপডেট ডাউনলোড হয়ে গেলে এটি ট্রিগার হয় এবং ব্যবহারকারীকে আপডেট ইনস্টল করতে বলা হয়।

৫. GitHub বা অন্য সার্ভারে আপডেট হোস্টিং

আপডেট ফাইল এবং update.json ফাইল GitHub বা অন্য সার্ভারে হোস্ট করা হয়। এখানে একটি সিম্পল update.json ফাইলের উদাহরণ দেওয়া হলো।

উদাহরণ: update.json

{
  "url": "https://your-update-server.com/your-app-name-${version}.dmg",
  "version": "1.0.1"
}

এটি GitHub Releases বা অন্য সার্ভারে আপডেট ফাইল ডিপ্লয় করা হয়, যেখানে নতুন ভার্সন ফাইল এবং update.json রাখা থাকবে।

৬. Electron Build Configuration

আপনার অ্যাপ্লিকেশনটি আপডেটযোগ্য করার জন্য electron-builder ব্যবহার করতে পারেন, যা auto-updater এর জন্য প্রয়োজনীয় ফাইল তৈরি করতে সহায়ক। এটি আপনার অ্যাপ্লিকেশনটি প্যাকেজ এবং ডিস্ট্রিবিউট করতে ব্যবহৃত হয়।

উদাহরণ: package.json-এ electron-builder কনফিগারেশন

{
  "name": "my-electron-app",
  "version": "1.0.1",
  "build": {
    "appId": "com.example.myapp",
    "mac": {
      "category": "public.app-category.utilities",
      "target": "dmg"
    },
    "win": {
      "target": "nsis"
    }
  },
  "dependencies": {
    "electron": "^25.0.0",
    "electron-updater": "^4.0.6"
  }
}

এখানে, electron-builder ব্যবহার করে Mac এবং Windows জন্য প্যাকেজ তৈরি করা হচ্ছে এবং auto-updater এর জন্য electron-updater মডিউল ব্যবহৃত হচ্ছে।

৭. Auto-Updater এর জন্য সার্ভার সেটআপ

আপডেট ফাইলগুলি GitHub বা অন্য সেবা ব্যবহার করে হোস্ট করা যেতে পারে, যেমন AWS S3। যদি GitHub ব্যবহার করা হয়, তাহলে আপনাকে GitHub Releases ব্যবহার করতে হবে, যেখানে নতুন আপডেট ফাইল এবং update.json আপলোড করতে হবে।

উদাহরণ: GitHub Releases URL

{
  "url": "https://github.com/username/repository/releases/download/v1.0.1/app-1.0.1.dmg",
  "version": "1.0.1"
}

এটি আপনার অ্যাপ্লিকেশনের আপডেট ফাইলগুলিকে সঠিকভাবে ইন্টারফেসের মাধ্যমে ব্যবহারকারীর কাছে পৌঁছাতে সাহায্য করবে।

সারাংশ

• Electron এর Auto-Updater মডিউল ব্যবহার করে অ্যাপ্লিকেশন আপডেট প্রক্রিয়া স্বয়ংক্রিয় করা যায়।
• electron-updater প্যাকেজ ব্যবহার করে সার্ভার থেকে নতুন ভার্সন চেক করা এবং আপডেট ডাউনলোড ও ইনস্টল করা সম্ভব।
• autoUpdater.setFeedURL() এবং autoUpdater.checkForUpdates() ফাংশনগুলো ব্যবহার করে আপডেট প্রক্রিয়া শুরু করা হয়।
• GitHub বা অন্য সার্ভারে আপডেট ফাইল হোস্ট করে, Electron অ্যাপ্লিকেশনগুলির জন্য স্বয়ংক্রিয় আপডেট সিস্টেম তৈরি করা সম্ভব।

Electron অ্যাপ্লিকেশনগুলির জন্য স্বয়ংক্রিয় আপডেটিং (Auto-Update) একটি গুরুত্বপূর্ণ বৈশিষ্ট্য, যা ব্যবহারকারীদেরকে নতুন ভার্সনটি ইনস্টল করতে সাহায্য করে এবং অ্যাপ্লিকেশনের পুরানো সংস্করণটি আপডেট থাকে। Electron এ auto-update কনফিগার করা বেশ সহজ, এবং এটি electron-updater প্যাকেজ ব্যবহার করে করা হয়।

এখানে, Electron অ্যাপ্লিকেশনের জন্য auto-update কনফিগার করার ধাপগুলোর বিস্তারিত আলোচনা করা হলো।

১. electron-updater ইনস্টল করা

Electron অ্যাপ্লিকেশনকে আপডেট করার জন্য electron-updater প্যাকেজটি ব্যবহৃত হয়। এটি electron-builder এর একটি অংশ এবং স্বয়ংক্রিয়ভাবে আপডেট পরিচালনা করতে সাহায্য করে।

ইনস্টলেশন:

npm install electron-updater --save

এছাড়াও, যদি আপনি electron-builder ব্যবহার করে থাকেন, তবে এটি স্বয়ংক্রিয়ভাবে ইনস্টল হয়ে যাবে।

npm install electron-builder --save-dev

২. electron-builder কনফিগারেশন

আপনার package.json ফাইলে electron-builder এর কনফিগারেশন করতে হবে। এখানে আপনি আপনার অ্যাপের আপডেট সেটিংস, ভার্সন, এবং আপডেট সার্ভারের তথ্য প্রদান করবেন।

উদাহরণ: package.json কনফিগারেশন

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "build": {
    "appId": "com.myapp.desktop",
    "productName": "MyElectronApp",
    "publish": {
      "provider": "generic",
      "url": "https://your-app-update-server.com/updates/"
    },
    "mac": {
      "category": "public.app-category.utilities"
    },
    "win": {
      "target": "nsis"
    }
  },
  "dependencies": {
    "electron-updater": "^4.0.0"
  }
}

এখানে publish ফিল্ডের অধীনে, আপনাকে আপডেট সার্ভারের URL সেট করতে হবে। এই URL থেকে আপনার অ্যাপ্লিকেশন আপডেট ফাইলগুলি ডাউনলোড হবে।

৩. Auto-Update কোড লিখা

এখন, electron-updater ব্যবহার করে অ্যাপ্লিকেশনের আপডেট চেক এবং ইনস্টল করার জন্য কোড লিখতে হবে। এটি সাধারণত Main Process-এ করা হয়।

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

const { app, BrowserWindow, autoUpdater } = require('electron');
const path = require('path');
const { autoUpdater } = require('electron-updater');

let mainWindow;

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

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

app.on('ready', () => {
  createWindow();

  // Auto-Update কনফিগারেশন
  autoUpdater.setFeedURL({
    provider: 'generic',
    url: 'https://your-app-update-server.com/updates/'
  });

  // আপডেট চেক করা
  autoUpdater.checkForUpdatesAndNotify();

  // আপডেটের জন্য ইভেন্ট লিসেনিং
  autoUpdater.on('update-available', () => {
    console.log('নতুন আপডেট উপলব্ধ');
  });

  autoUpdater.on('update-not-available', () => {
    console.log('কোনো নতুন আপডেট নেই');
  });

  autoUpdater.on('error', (err) => {
    console.error('আপডেটের ত্রুটি:', err);
  });

  autoUpdater.on('download-progress', (progressObj) => {
    console.log('ডাউনলোড প্রগ্রেস:', progressObj);
  });

  autoUpdater.on('update-downloaded', (info) => {
    console.log('আপডেট ডাউনলোড হয়েছে:', info);
    autoUpdater.quitAndInstall();  // ইনস্টল করা
  });
});

এই কোডটি autoUpdater এর মাধ্যমে আপনার অ্যাপ্লিকেশনকে আপডেট চেক করতে এবং ডাউনলোড করার জন্য প্রস্তুত করবে। যখন আপডেট ডাউনলোড হবে, তখন quitAndInstall() ব্যবহার করে এটি ইনস্টল করা হবে।

৪. আপডেট ফাইল প্রস্তুত করা

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

electron-builder ব্যবহার করে বিল্ড তৈরি করা

আপনি electron-builder ব্যবহার করে নতুন অ্যাপ্লিকেশন প্যাকেজ করতে পারেন এবং এটি আপনার আপডেট সার্ভারে আপলোড করতে পারেন।

npm run build

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

৫. আপডেট সার্ভার

আপডেট পরিচালনা করার জন্য আপনাকে একটি সার্ভারের প্রয়োজন হবে যেখানে আপনার অ্যাপ্লিকেশনের নতুন ভার্সন এবং সংশ্লিষ্ট আপডেট ফাইলগুলি রাখা হবে। এটি সাধারণত HTTP/HTTPS সার্ভার হতে পারে।

উদাহরণ:

আপডেট সার্ভারে ফাইল আপলোড করতে পারেন, যেমন:

• latest.yml ফাইল: এটি আপডেট ফাইলের তথ্য ধারণ করে, যেমন ভার্সন নম্বর, আপডেট ফাইলের অবস্থান ইত্যাদি।
• setup.exe, dmg ফাইল: ইনস্টলেশন ফাইল।

এই ফাইলগুলি সার্ভারে আপলোড করতে হবে যাতে Electron অ্যাপ্লিকেশন সেগুলি অ্যাক্সেস করতে পারে এবং নতুন আপডেট চেক করতে পারে।

৬. স্বয়ংক্রিয় আপডেটের সময় সতর্কতা

• অ্যাপ্লিকেশন রিস্টার্ট: নতুন আপডেট ইনস্টল করার জন্য অ্যাপ্লিকেশনটি পুনরায় চালু করতে হবে।
• ইউজার ইন্টারফেস: ইউজারকে আপডেটের জন্য সতর্ক করতে একটি ডায়ালগ বক্স বা নোটিফিকেশন দেখানো উচিত, যাতে তারা জানে যে একটি নতুন আপডেট উপলব্ধ।
• প্রতিবার আপডেট চেক: আপনি চাইলে অ্যাপ্লিকেশন চালু হওয়ার পর বা নির্দিষ্ট সময় পর পর আপডেট চেক করতে পারেন।

সারাংশ

• Auto-Update কনফিগার করার জন্য electron-updater প্যাকেজ ব্যবহার করা হয়।
• electron-builder দিয়ে আপডেট ফাইল প্যাকেজ এবং সার্ভারে আপলোড করা হয়।
• autoUpdater এর মাধ্যমে আপডেট চেক এবং ইনস্টল করার প্রক্রিয়া সহজ করা হয়।
• checkForUpdatesAndNotify() এবং quitAndInstall() মেথড ব্যবহার করে আপডেটের প্রক্রিয়া সম্পন্ন করা যায়।

এই প্রক্রিয়া অনুসরণ করে, আপনি Electron অ্যাপ্লিকেশনের জন্য auto-update কনফিগার করতে পারবেন এবং আপনার ব্যবহারকারীদের সর্বদা সর্বশেষ ভার্সনে রাখতে পারবেন।

ইলেকট্রন অ্যাপ্লিকেশনে অ্যাপ্লিকেশন আপডেট প্রক্রিয়া ব্যবহৃত হয়, যাতে ব্যবহারকারীরা নতুন ভার্সন ডাউনলোড এবং ইনস্টল করতে পারে। ইলেকট্রন অ্যাপ্লিকেশনে আপডেট ব্যবস্থাপনার জন্য বেশ কিছু প্যাকেজ রয়েছে, যার মধ্যে সবচেয়ে জনপ্রিয় এবং ব্যবহৃত হচ্ছে electron-updater এবং electron-builder।

এখানে, আমরা দেখব কীভাবে electron-updater এবং electron-builder ব্যবহার করে অ্যাপ্লিকেশনের আপডেট ডাউনলোড এবং ইনস্টল করা যায়।

১. electron-updater প্যাকেজ ব্যবহার করে আপডেটিং

electron-updater হলো ইলেকট্রন অ্যাপ্লিকেশনে আপডেট ডাউনলোড এবং ইনস্টল করার জন্য একটি প্যাকেজ। এটি electron-builder এর সাথে ইন্টিগ্রেটেড থাকে এবং সহজেই ডেভেলপারদের জন্য কাজ করে।

১.১ ইনস্টলেশন

প্রথমে, আপনাকে electron-updater এবং electron-builder ইনস্টল করতে হবে:

npm install electron-updater --save
npm install electron-builder --save-dev

১.২ main.js এ আপডেট চেক করা

আপনি Main Process-এ electron-updater ব্যবহার করে নতুন আপডেট চেক করতে পারেন এবং তা ডাউনলোড ও ইনস্টল করতে পারেন।

const { app, BrowserWindow } = require('electron');
const { autoUpdater } = require('electron-updater');  // electron-updater ইম্পোর্ট করা

let mainWindow;

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

  mainWindow.loadFile('index.html');

  // আপডেট চেক করা
  autoUpdater.checkForUpdatesAndNotify();

  // আপডেটের জন্য ইভেন্ট লিসেনার
  autoUpdater.on('update-available', (info) => {
    console.log('নতুন আপডেট পাওয়া গেছে:', info);
  });

  autoUpdater.on('update-not-available', () => {
    console.log('আপডেট নেই');
  });

  autoUpdater.on('error', (err) => {
    console.error('আপডেটের সমস্যা:', err);
  });

  autoUpdater.on('download-progress', (progressObj) => {
    let log_message = 'ডাউনলোড অগ্রগতি: ';
    log_message += `${progressObj.percent}% (${progressObj.transferred}/${progressObj.total})`;
    console.log(log_message);
  });

  autoUpdater.on('update-downloaded', () => {
    console.log('আপডেট ডাউনলোড হয়ে গেছে, অ্যাপ্লিকেশন পুনরায় চালু হবে!');
    autoUpdater.quitAndInstall();  // আপডেট ইনস্টল এবং অ্যাপ পুনরায় চালু করা
  });
});

১.৩ index.html ফাইল

এটি Renderer Process এর জন্য যা UI তৈরি করে।

<!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>Electron App - আপডেট সিস্টেম</h1>
  <button id="checkUpdateBtn">আপডেট চেক করুন</button>
  <script>
    const { ipcRenderer } = require('electron');

    document.getElementById('checkUpdateBtn').addEventListener('click', () => {
      ipcRenderer.send('check-update');  // আপডেট চেক করার জন্য মেসেজ পাঠানো
    });
  </script>
</body>
</html>

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

আপডেটের জন্য electron-builder কনফিগারেশন ফাইলটি package.json এ যোগ করুন।

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "build": {
    "appId": "com.example.myapp",
    "productName": "My App",
    "publish": {
      "provider": "generic",
      "url": "https://myserver.com/updates/"
    }
  }
}

• publish: এখানে আপনার আপডেট ফাইলগুলো সার্ভারে হোস্ট করা থাকবে।
• url: আপডেটের জন্য সার্ভারের URL প্রদান করতে হবে।

২. electron-builder ব্যবহার করে অ্যাপ্লিকেশন প্যাকেজিং এবং আপডেট

electron-builder হল ইলেকট্রন অ্যাপ্লিকেশন প্যাকেজ এবং আপডেট ব্যবস্থাপনা করার জন্য একটি শক্তিশালী টুল। এটি ডিস্ট্রিবিউশন ফাইল তৈরি এবং অ্যাপ্লিকেশন আপডেটের জন্য সহজ কনফিগারেশন সরবরাহ করে।

২.১ ইনস্টলেশন

npm install electron-builder --save-dev

২.২ প্যাকেজিং এবং আপডেট প্রস্তুত করা

আপডেট সিস্টেম তৈরি করতে, electron-builder কনফিগারেশন ফাইলে আপডেট প্যাকেজ তৈরি করতে হবে। আপনার package.json ফাইলে build সেকশনে publish এবং url সেটিংস যোগ করুন।

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "build": {
    "appId": "com.example.myapp",
    "productName": "My App",
    "publish": {
      "provider": "generic",
      "url": "https://myserver.com/updates/"
    }
  }
}

২.৩ ডিপ্লয়মেন্ট এবং আপডেট সিস্টেম

আপডেট সিস্টেম সফলভাবে কাজ করার জন্য আপনাকে একটি আপডেট সার্ভার সেটআপ করতে হবে যেখানে আপডেট ফাইলগুলি হোস্ট হবে। এক্ষেত্রে আপনি একটি সাধারণ ওয়েব সার্ভার বা GitHub Releases বা Amazon S3 ব্যবহার করতে পারেন।

• আপডেট ফাইল এবং ইন্ডেক্স ফাইলগুলো তৈরি করুন।
• electron-builder ব্যবহার করে অ্যাপ্লিকেশনটি প্যাকেজ করুন এবং আপডেট ফাইল আপলোড করুন।

প্যাকেজিং কমান্ড:

npm run build

এটি আপনার অ্যাপ্লিকেশনটি প্যাকেজ করবে এবং আপডেট ফাইলগুলো তৈরি করবে।

সারাংশ

• electron-updater এবং electron-builder ব্যবহৃত হয় ইলেকট্রন অ্যাপ্লিকেশনে আপডেট সিস্টেম তৈরি করতে।
• electron-updater এর মাধ্যমে আপনি নতুন আপডেট চেক এবং ডাউনলোড করতে পারবেন।
• electron-builder এর সাহায্যে অ্যাপ্লিকেশন প্যাকেজিং এবং আপডেটের জন্য কনফিগারেশন করা হয়।
• সার্ভার সাইডে আপডেট ফাইল হোস্ট করা এবং ক্লায়েন্ট সাইডে আপডেট চেক করা ইলেকট্রন অ্যাপের আপডেট প্রক্রিয়াকে সহজ করে তোলে।

Electron-builder একটি জনপ্রিয় টুল যা Electron অ্যাপ্লিকেশন প্যাকেজ এবং ডিপ্লয়মেন্টের জন্য ব্যবহৃত হয়। এটি আপনাকে auto-update সিস্টেম সেটআপ করার সুবিধা দেয়, যার মাধ্যমে আপনি অ্যাপ্লিকেশনের নতুন ভার্সন রিলিজ করলে ব্যবহারকারীরা সহজেই সেই ভার্সন আপডেট করতে পারবেন।

১. Electron Auto-Update কী এবং কেন এটি ব্যবহার করবেন?

Auto-update হল এমন একটি ফিচার যা Electron অ্যাপ্লিকেশনকে নতুন ভার্সন রিলিজের সময় ব্যবহারকারীদের জন্য স্বয়ংক্রিয়ভাবে আপডেট করার সুবিধা দেয়। এটি আপনাকে বিভিন্ন প্ল্যাটফর্মে (Windows, macOS, Linux) Electron অ্যাপ্লিকেশন আপডেট করার প্রক্রিয়া সহজ করতে সাহায্য করে।

২. Electron-builder ইনস্টলেশন

Electron-builder ইনস্টল করার জন্য আপনাকে npm ব্যবহার করতে হবে। নিচে এটি ইনস্টল করার পদ্ধতি দেয়া হল:

npm install electron-builder --save-dev

এটি ইনস্টল হলে, আপনি Electron অ্যাপ্লিকেশন প্যাকেজ এবং Auto-Update ফিচার সেটআপ করতে পারবেন।

৩. Auto-Update ফিচার সেটআপ করার জন্য পদক্ষেপ

Auto-update সিস্টেমের মাধ্যমে Electron অ্যাপ্লিকেশনের ব্যবহারকারীরা নতুন ভার্সন স্বয়ংক্রিয়ভাবে ডাউনলোড এবং ইনস্টল করতে সক্ষম হবেন। এতে electron-updater এবং electron-builder একত্রে কাজ করবে।

ধাপ ১: electron-updater প্যাকেজ ইনস্টল করা

electron-updater হল একটি লাইব্রেরি যা Electron অ্যাপ্লিকেশনের জন্য auto-update ফিচার হ্যান্ডেল করে।

npm install electron-updater --save

ধাপ ২: package.json কনফিগারেশন

আপনার package.json ফাইলে কিছু কনফিগারেশন করতে হবে, যেমন অ্যাপ্লিকেশনের ভার্সন, প্রকাশের (publishing) তথ্য, এবং অন্যান্য সেটিংস। এখানে build সেকশনটি ব্যবহার করা হবে।

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "My first Electron app",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "devDependencies": {
    "electron": "^25.0.0",
    "electron-builder": "^23.0.0",
    "electron-updater": "^4.0.0"
  },
  "build": {
    "appId": "com.myapp.name",
    "productName": "MyApp",
    "publish": {
      "provider": "github",
      "owner": "your-github-username",
      "repo": "your-repo-name"
    },
    "mac": {
      "category": "public.app-category.utilities"
    },
    "win": {
      "target": "nsis"
    },
    "linux": {
      "target": "AppImage"
    }
  }
}

publish সেকশনে GitHub রিপোজিটরি সেট করতে হবে, যেখানে আপডেট ফাইলগুলি হোস্ট করা হবে। এছাড়া, appId এবং productName এর মাধ্যমে আপনার অ্যাপ্লিকেশনের আইডেন্টিটি এবং নাম সেট করতে হবে।

ধাপ ৩: Auto-Update কোড যোগ করা

আপনি Main Process (যেমন main.js) এ কোড যোগ করে auto-update ফিচারটি ইনটিগ্রেট করবেন। autoUpdater ব্যবহার করে অ্যাপ্লিকেশনটি স্বয়ংক্রিয়ভাবে আপডেট চেক করবে এবং নতুন ভার্সন ডাউনলোড করবে।

const { app, BrowserWindow, autoUpdater, ipcMain } = require('electron');
const path = require('path');
const { autoUpdater } = require('electron-updater');

let mainWindow;

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

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

// Auto-update শুরু
function checkForUpdates() {
  autoUpdater.setFeedURL({
    provider: 'github',
    repo: 'your-repo-name',
    owner: 'your-github-username'
  });

  autoUpdater.checkForUpdatesAndNotify();  // আপডেট চেক এবং নোটিফিকেশন
}

// নতুন আপডেট পাওয়ার পর অ্যাপ্লিকেশনকে পুনরায় চালু করা
autoUpdater.on('update-downloaded', (info) => {
  autoUpdater.quitAndInstall();  // আপডেট ইনস্টল করার পর অ্যাপ্লিকেশন বন্ধ এবং পুনরায় চালু হবে
});

app.whenReady().then(() => {
  createWindow();
  checkForUpdates();  // অ্যাপ্লিকেশন শুরু হওয়ার সাথে সাথে আপডেট চেক করা
});

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

autoUpdater.checkForUpdatesAndNotify() এর মাধ্যমে অ্যাপ্লিকেশন শুরু হওয়ার সময় স্বয়ংক্রিয়ভাবে আপডেট চেক করা হবে। এবং যদি নতুন আপডেট পাওয়া যায়, তবে autoUpdater.quitAndInstall() এর মাধ্যমে সেই আপডেটটি ডাউনলোড এবং ইনস্টল করা হবে।

৪. GitHub Release সেটআপ

Auto-update সিস্টেম কাজ করতে গেলে আপনাকে আপনার GitHub রিপোজিটরিতে অ্যাপের নতুন ভার্সন প্রকাশ করতে হবে। আপনি GitHub Releases ব্যবহার করে নতুন ভার্সন আপলোড করতে পারেন।

ধাপ:

1. আপনার অ্যাপের নতুন ভার্সন তৈরি করুন।
2. GitHub এ একটি Release তৈরি করুন এবং ভার্সনটি আপলোড করুন।

3. electron-builder টুল ব্যবহার করে আপনার অ্যাপ্লিকেশনটি প্যাকেজ করুন।

   npm run build
   

   এটি আপনার অ্যাপ্লিকেশনটি প্যাকেজ করবে এবং সংশ্লিষ্ট আপডেট ফাইলগুলি GitHub রিপোজিটরিতে আপলোড করবে (আপনার publish কনফিগারেশন অনুযায়ী)।

৫. Auto-Update সম্পর্কিত কিছু গুরুত্বপূর্ণ পয়েন্ট

• AppId: appId এবং productName আপনার অ্যাপ্লিকেশনকে সনাক্ত করতে সাহায্য করে। সেগুলি সঠিকভাবে কনফিগার করা প্রয়োজন।
• Feed URL: autoUpdater.setFeedURL ব্যবহার করে অ্যাপ্লিকেশন কোথায় আপডেট ফাইলগুলি থেকে ডাউনলোড করবে তা সেট করা হয়। সাধারণত GitHub ব্যবহার করা হয়।
• GitHub Release: GitHub রিপোজিটরি ও রিলিজ ব্যবস্থাপনা অ্যাপ্লিকেশনের নতুন ভার্সন ডিস্ট্রিবিউট করতে ব্যবহার করা হয়।

সারাংশ

• Electron-builder ব্যবহার করে অ্যাপ্লিকেশনে auto-update সিস্টেম যুক্ত করা যায়, যা স্বয়ংক্রিয়ভাবে নতুন ভার্সন ডাউনলোড এবং ইনস্টল করে।
• electron-updater লাইব্রেরি ব্যবহার করে Main Process-এ আপডেট চেক এবং ইনস্টল করার কোড যোগ করা হয়।
• GitHub Release ব্যবহারের মাধ্যমে নতুন ভার্সন প্রকাশ করা হয়, যা electron-builder এর মাধ্যমে হোস্ট করা হয় এবং আপডেট সিস্টেম ব্যবহারকারীকে স্বয়ংক্রিয়ভাবে প্রদান করে।