Electron সেটআপ এবং ইনস্টলেশন

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

309

Electron ব্যবহার করে ডেস্কটপ অ্যাপ্লিকেশন ডেভেলপমেন্ট শুরু করার জন্য সঠিক সেটআপ এবং ইনস্টলেশন প্রয়োজন। নিচে ধাপে ধাপে প্রক্রিয়াটি আলোচনা করা হলো:

পূর্বশর্ত

Electron সেটআপ করার আগে নিচের সফটওয়্যার ইনস্টল থাকা প্রয়োজন:

Node.js: Electron চালানোর জন্য Node.js প্রয়োজন। Node.js ডাউনলোড এবং ইনস্টল করুন।
npm (Node Package Manager): Node.js ইনস্টলের সঙ্গে npm স্বয়ংক্রিয়ভাবে ইনস্টল হয়।

Electron সেটআপ ধাপ

একটি নতুন প্রজেক্ট তৈরি

১. একটি নতুন ফোল্ডার তৈরি করুন। উদাহরণস্বরূপ:

mkdir electron-app
cd electron-app

২. npm init ব্যবহার করে একটি package.json ফাইল তৈরি করুন:

npm init -y

এটি ডিফল্ট সেটিংস সহ একটি package.json ফাইল তৈরি করবে।

Electron ইনস্টল করা

Electron ইনস্টল করার জন্য নিচের কমান্ডটি চালান:

npm install electron --save-dev

এটি Electron কে devDependencies হিসেবে package.json-এ যোগ করবে এবং প্রয়োজনীয় ফাইল ডাউনলোড করবে।

প্রজেক্ট ফাইল সেটআপ

Electron অ্যাপ্লিকেশন চালানোর জন্য একটি মেইন স্ক্রিপ্ট এবং একটি HTML ফাইল প্রয়োজন।

১. একটি নতুন main.js ফাইল তৈরি করুন এবং নিচের কোড লিখুন:

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

let mainWindow;

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

২. একটি 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 Electron</h1>
</body>
</html>

Electron অ্যাপ চালানো

Electron অ্যাপ চালানোর জন্য package.json-এ একটি স্ক্রিপ্ট যোগ করুন:

package.json:

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

এখন নিচের কমান্ডটি ব্যবহার করে অ্যাপ চালান:

npm start

Electron ডেভেলপমেন্ট টুলস

DevTools: Electron ডেভেলপমেন্টে ইন-বিল্ট DevTools ব্যবহার করা যায়।
Live Reloading: electron-reload প্যাকেজ ব্যবহার করে ফাইল পরিবর্তনের সঙ্গে সঙ্গে অ্যাপ্লিকেশন রিলোড করা যায়।
Debugging: Electron Chrome DevTools ব্যবহার করে ডিবাগিং সহজ হয়।

Live Reloading সেটআপ

Live Reloading এর জন্য electron-reload ইনস্টল করুন:

npm install electron-reload --save-dev

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

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

Electron সেটআপ এবং ইনস্টলেশন খুবই সহজ এবং দ্রুত। এটি Node.js এবং npm ব্যবহার করে ইনস্টল করা হয় এবং HTML, CSS, ও JavaScript দিয়ে অ্যাপ তৈরি করা যায়। এই ধাপগুলো অনুসরণ করে Electron অ্যাপ্লিকেশন ডেভেলপমেন্ট শুরু করতে পারবেন।

Content added By

Azizar Rahman Aziz

Electron ইনস্টল করা (npm দিয়ে)

255

Electron ইনস্টল করার জন্য npm (Node Package Manager) ব্যবহার করা হয়। এটি খুবই সহজ এবং দ্রুত প্রক্রিয়া। নিচে ধাপে ধাপে নির্দেশিকা দেওয়া হলো:

১. Node.js এবং npm ইনস্টল করা

Electron ইনস্টল করার আগে Node.js এবং এর সঙ্গে থাকা npm ইনস্টল করতে হবে।

Node.js ডাউনলোড করে আপনার অপারেটিং সিস্টেম অনুযায়ী ইনস্টল করুন।
ইনস্টল হয়ে গেলে কমান্ড লাইন বা টার্মিনালে নিচের কমান্ড লিখে নিশ্চিত করুন:

node -v
npm -v

এটি আপনার Node.js এবং npm-এর ভার্সন দেখাবে।

২. প্রজেক্ট সেটআপ

১. একটি নতুন ফোল্ডার তৈরি করুন এবং সেখানে যান:

mkdir electron-app
cd electron-app

২. প্রজেক্ট ইনিশিয়ালাইজ করতে npm init চালান:

npm init -y

এটি একটি ডিফল্ট package.json ফাইল তৈরি করবে।

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

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

npm install electron --save-dev

এটি Electron কে আপনার প্রজেক্টের devDependencies-এ যোগ করবে।
Electron এর সর্বশেষ ভার্সন ডাউনলোড এবং ইনস্টল হবে।

ইনস্টলেশন নিশ্চিত করা

ইনস্টলেশন নিশ্চিত করতে package.json ফাইল খুলে দেখুন devDependencies এর মধ্যে Electron রয়েছে কিনা। উদাহরণ:

"devDependencies": {
  "electron": "^25.0.0"
}

৪. Electron ইনস্টলেশন টেস্ট করা

১. package.json-এ একটি start script যোগ করুন:

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

২. একটি main.js ফাইল তৈরি করুন এবং নিচের কোড লিখুন:

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

let mainWindow;

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

৩. একটি 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>Electron অ্যাপ সফলভাবে চলছে!</h1>
</body>
</html>

৪. অ্যাপ চালানোর জন্য টার্মিনালে নিচের কমান্ড লিখুন:

npm start

এটি একটি Electron উইন্ডো চালু করবে এবং আপনার অ্যাপটি প্রদর্শন করবে।

গুরুত্বপূর্ণ টিপস

Electron এর নির্দিষ্ট ভার্সন ইনস্টল করতে নিচের কমান্ড ব্যবহার করুন:
```
npm install electron@<version> --save-dev
```
ইনস্টলেশন সমস্যা হলে npm cache clean --force চালিয়ে আবার চেষ্টা করুন।

Electron ইনস্টলেশন সম্পন্ন। এখন আপনি সহজেই আপনার ডেস্কটপ অ্যাপ্লিকেশন ডেভেলপমেন্ট শুরু করতে পারবেন।

Content added By

Azizar Rahman Aziz

Electron এর প্রয়োজনীয়তা (Node.js, npm)

270

Electron একটি ডেস্কটপ অ্যাপ্লিকেশন ডেভেলপমেন্ট ফ্রেমওয়ার্ক, যা Node.js এবং npm (Node Package Manager) এর উপর নির্ভরশীল। Electron এর কার্যক্ষমতা এবং ডেভেলপমেন্ট প্রক্রিয়া শুরু করার জন্য এই দুটি প্রযুক্তি থাকা অত্যাবশ্যক। নিচে এই প্রয়োজনীয়তা সম্পর্কে বিস্তারিত আলোচনা করা হলো:

Node.js

Node.js হলো একটি ওপেন-সোর্স, ক্রস-প্ল্যাটফর্ম JavaScript রানটাইম, যা Electron এর ব্যাকএন্ড প্রক্রিয়াগুলোর জন্য ব্যবহৃত হয়।

ভূমিকা

Electron এর Main Process-এ Node.js API ব্যবহার করা হয়।
Electron অ্যাপ্লিকেশনগুলোর ফাইল সিস্টেম, নেটওয়ার্ক, এবং অন্যান্য সিস্টেম-লেভেল ফিচার পরিচালনা করতে Node.js ব্যবহার করা হয়।

বৈশিষ্ট্য

ইভেন্ট-ড্রিভেন আর্কিটেকচার: Node.js ইভেন্ট-ভিত্তিক এবং নন-ব্লকিং (Non-blocking) I/O মডেল ব্যবহার করে।
প্যাকেজ সমর্থন: Node.js এর মাধ্যমে ডেভেলপাররা বিভিন্ন প্যাকেজ এবং মডিউল ব্যবহার করতে পারে।

ইনস্টলেশন

Node.js ইনস্টল করতে Node.js ডাউনলোড পেজ থেকে আপনার অপারেটিং সিস্টেম অনুযায়ী ডাউনলোড করুন।

ইনস্টল হওয়ার পর নিচের কমান্ড দিয়ে নিশ্চিত করুন:

node -v

npm (Node Package Manager)

npm হলো Node.js এর ডিফল্ট প্যাকেজ ম্যানেজার, যা Electron ইনস্টল এবং পরিচালনা করার জন্য ব্যবহৃত হয়।

ভূমিকা

Electron এবং এর ডিপেনডেন্সিগুলো ইনস্টল এবং পরিচালনা করতে npm ব্যবহৃত হয়।
ডেভেলপমেন্ট প্রক্রিয়ায় প্রয়োজনীয় টুল এবং লাইব্রেরি যুক্ত করতে সাহায্য করে।

বৈশিষ্ট্য

প্যাকেজ ম্যানেজমেন্ট: npm বিভিন্ন প্যাকেজ এবং মডিউল সহজে ইনস্টল ও মেইনটেইন করতে পারে।
স্ক্রিপ্ট রানার: npm start এবং অন্যান্য কাস্টম স্ক্রিপ্ট রান করতে সাহায্য করে।

ইনস্টলেশন

Node.js ইনস্টল করলে npm স্বয়ংক্রিয়ভাবে ইনস্টল হয়। ইনস্টলেশন নিশ্চিত করতে কমান্ডটি চালান:

npm -v

Node.js এবং npm কেন প্রয়োজন?

Electron এর জন্য Node.js:

Main Process চালানোর জন্য Node.js আবশ্যক।
Electron এর মাধ্যমে ফাইল সিস্টেম অ্যাক্সেস, নেটওয়ার্ক অপারেশন এবং অন্যান্য সিস্টেম কার্যক্রম পরিচালনা সম্ভব হয়।

Electron এর জন্য npm:

Electron এবং এর ডিপেনডেন্সি ইনস্টল করার জন্য।
অন্যান্য ডেভেলপমেন্ট টুল যেমন electron-reload বা electron-packager ব্যবহারের জন্য।

সারসংক্ষেপ

Node.js: Electron অ্যাপ্লিকেশনের ব্যাকএন্ড এবং Main Process এর জন্য আবশ্যক।
npm: Electron এবং এর ডিপেনডেন্সি ইনস্টল এবং পরিচালনার জন্য অপরিহার্য।
এই দুটি প্রযুক্তি Electron অ্যাপ্লিকেশন ডেভেলপমেন্টের ভিত্তি এবং সফল কার্যক্রম নিশ্চিত করে।

এগুলো ইনস্টল করার পর আপনি Electron সেটআপ করে ডেভেলপমেন্ট শুরু করতে পারবেন।

Content added By

Azizar Rahman Aziz

প্রথম Electron অ্যাপ্লিকেশন তৈরি করা

332

Electron দিয়ে একটি বেসিক ডেস্কটপ অ্যাপ্লিকেশন তৈরি করা খুবই সহজ। নিচে ধাপে ধাপে একটি সাধারণ অ্যাপ তৈরি করার প্রক্রিয়া দেখানো হয়েছে।

পূর্বশর্ত

Electron অ্যাপ্লিকেশন তৈরি করার আগে নিশ্চিত করুন:

Node.js এবং npm ইনস্টল করা আছে।
একটি টেক্সট এডিটর (যেমন VS Code) এবং টার্মিনাল অ্যাক্সেসযোগ্য।

ধাপ ১: প্রজেক্ট সেটআপ

একটি নতুন ডিরেক্টরি তৈরি করুন এবং সেটিতে যান:
```
mkdir my-electron-app
cd my-electron-app
```
একটি package.json ফাইল তৈরি করুন:
```
npm init -y
```
এটি প্রজেক্টের ডিফল্ট সেটিংস সহ একটি package.json ফাইল তৈরি করবে।

ধাপ ২: Electron ইনস্টল করা

Electron ইনস্টল করতে নিম্নোক্ত কমান্ড চালান:

npm install electron --save-dev

এটি Electron কে আপনার প্রজেক্টের devDependencies এ যোগ করবে।

ধাপ ৩: প্রয়োজনীয় ফাইল তৈরি করা

`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,
    },
  });
  mainWindow.loadFile('index.html');
});

`index.html` তৈরি

এটি অ্যাপ্লিকেশনের Renderer Process পরিচালনা করবে। এটি HTML এবং CSS এর মাধ্যমে 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 অ্যাপ</title>
</head>
<body>
  <h1>Electron এর প্রথম অ্যাপ!</h1>
</body>
</html>

ধাপ ৪: `package.json` এ স্ক্রিপ্ট যোগ করা

package.json ফাইলে একটি start script যোগ করুন:

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

ধাপ ৫: অ্যাপ চালানো

টার্মিনালে নিচের কমান্ডটি চালান:
```
npm start
```
একটি Electron উইন্ডো চালু হবে এবং index.html ফাইলের কনটেন্ট প্রদর্শন করবে।

অতিরিক্ত ফিচার যোগ করা

লাইভ রিলোড: electron-reload ব্যবহার করুন।
প্যাকেজিং: electron-packager বা electron-builder দিয়ে অ্যাপ ডিস্ট্রিবিউশন তৈরি করুন।

লাইভ রিলোডের জন্য:

npm install electron-reload --save-dev

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

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

সারসংক্ষেপ

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

Content added By

Azizar Rahman Aziz

Electron প্রজেক্টের স্ট্রাকচার

250

Electron প্রজেক্ট তৈরি করতে একটি সুসংগঠিত স্ট্রাকচার প্রয়োজন। একটি সাধারণ Electron প্রজেক্টের স্ট্রাকচার কেমন হতে পারে, তা নিচে বিস্তারিত দেখানো হলো:

বেসিক প্রজেক্ট স্ট্রাকচার

my-electron-app/
├── package.json
├── main.js
├── index.html
├── assets/
│   ├── images/
│   └── styles/
└── node_modules/

ফাইল এবং ফোল্ডারের ভূমিকা

১. `package.json`

এই ফাইলটি প্রজেক্টের কনফিগারেশন এবং ডিপেনডেন্সি সংক্রান্ত তথ্য সংরক্ষণ করে।
এখানে 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"
  }
}

২. `main.js`

এটি অ্যাপ্লিকেশনের Main Process পরিচালনা করে।
অ্যাপ্লিকেশনের উইন্ডো তৈরি এবং অন্যান্য ব্যাকএন্ড কাজের জন্য এই ফাইল ব্যবহৃত হয়।

উদাহরণ:

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

let mainWindow;

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

৩. `index.html`

এটি অ্যাপ্লিকেশনের Renderer Process পরিচালনা করে।
অ্যাপ্লিকেশনের UI ডিজাইন করার জন্য 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>
  <link rel="stylesheet" href="assets/styles/style.css">
</head>
<body>
  <h1>Welcome to Electron!</h1>
</body>
</html>

৪. `assets/` ফোল্ডার

অ্যাপ্লিকেশনে ব্যবহৃত স্ট্যাটিক ফাইল সংরক্ষণের জন্য একটি ডিরেক্টরি।
এখানে চিত্র, স্টাইলশিট, এবং অন্যান্য মিডিয়া ফাইল রাখা হয়।

উদাহরণ:

images/: অ্যাপ্লিকেশনে ব্যবহৃত চিত্র সংরক্ষণ করা হয়।
styles/: CSS ফাইল রাখা হয়।

৫. `node_modules/`

এটি Electron এবং অন্যান্য ডিপেনডেন্সি ইনস্টল হলে তৈরি হয়।
এই ফোল্ডারে সব ইনস্টল করা প্যাকেজ সংরক্ষিত থাকে।

অ্যাডভান্সড প্রজেক্ট স্ট্রাকচার

যদি আপনার প্রজেক্ট বড় হয় এবং বিভিন্ন ফিচার যুক্ত থাকে, তাহলে নিচের মতো স্ট্রাকচার তৈরি করা যেতে পারে:

my-electron-app/
├── package.json
├── main/
│   └── main.js
├── renderer/
│   ├── index.html
│   ├── scripts/
│   │   └── renderer.js
│   └── styles/
│       └── style.css
├── assets/
│   ├── images/
│   └── icons/
└── node_modules/

এই স্ট্রাকচারে অতিরিক্ত ফাইলের ভূমিকা

`renderer/scripts/renderer.js`

Renderer Process-এ ব্যবহৃত JavaScript ফাইল।
UI এর লজিক এবং ইন্টারেকশন এখানে লেখা হয়।

`styles/style.css`

অ্যাপ্লিকেশনের জন্য কাস্টম CSS সংরক্ষণ করে।

`assets/icons/`

অ্যাপ্লিকেশনের আইকন সংরক্ষণ করা হয়।

কেন স্ট্রাকচার গুরুত্বপূর্ণ?

সুবিন্যস্ত ফাইল ম্যানেজমেন্ট: বড় প্রজেক্টের জন্য ফাইলগুলো ভালোভাবে বিভাজিত থাকে।
সহজ ডিবাগিং: মডিউলার স্ট্রাকচার ডিবাগিং সহজ করে।
দ্রুত ডেভেলপমেন্ট: নির্দিষ্ট ফাইলের জন্য দায়িত্ব ভাগ করার ফলে কাজ দ্রুত হয়।
পরিষ্কার কোডবেস: ডেভেলপারদের বোঝা সহজ হয়।

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

Content added By

Azizar Rahman Aziz

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

Electron সেটআপ এবং ইনস্টলেশন

পূর্বশর্ত

Electron সেটআপ ধাপ

একটি নতুন প্রজেক্ট তৈরি

Electron ইনস্টল করা

প্রজেক্ট ফাইল সেটআপ

Electron অ্যাপ চালানো

Electron ডেভেলপমেন্ট টুলস

Live Reloading সেটআপ

Electron ইনস্টল করা (npm দিয়ে)

১. Node.js এবং npm ইনস্টল করা

২. প্রজেক্ট সেটআপ

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

ইনস্টলেশন নিশ্চিত করা

৪. Electron ইনস্টলেশন টেস্ট করা

গুরুত্বপূর্ণ টিপস

Electron এর প্রয়োজনীয়তা (Node.js, npm)

Node.js

ভূমিকা

বৈশিষ্ট্য

ইনস্টলেশন

npm (Node Package Manager)

ভূমিকা

বৈশিষ্ট্য

ইনস্টলেশন

Node.js এবং npm কেন প্রয়োজন?

Electron এর জন্য Node.js:

Electron এর জন্য npm:

সারসংক্ষেপ

প্রথম Electron অ্যাপ্লিকেশন তৈরি করা

পূর্বশর্ত

ধাপ ১: প্রজেক্ট সেটআপ

ধাপ ২: Electron ইনস্টল করা

ধাপ ৩: প্রয়োজনীয় ফাইল তৈরি করা

main.js তৈরি

index.html তৈরি

ধাপ ৪: package.json এ স্ক্রিপ্ট যোগ করা

ধাপ ৫: অ্যাপ চালানো

অতিরিক্ত ফিচার যোগ করা

লাইভ রিলোডের জন্য:

সারসংক্ষেপ

Electron প্রজেক্টের স্ট্রাকচার

বেসিক প্রজেক্ট স্ট্রাকচার

ফাইল এবং ফোল্ডারের ভূমিকা

১. package.json

উদাহরণ:

২. main.js

উদাহরণ:

৩. index.html

উদাহরণ:

৪. assets/ ফোল্ডার

উদাহরণ:

৫. node_modules/

অ্যাডভান্সড প্রজেক্ট স্ট্রাকচার

এই স্ট্রাকচারে অতিরিক্ত ফাইলের ভূমিকা

renderer/scripts/renderer.js

styles/style.css

assets/icons/

কেন স্ট্রাকচার গুরুত্বপূর্ণ?

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!

`main.js` তৈরি

`index.html` তৈরি

ধাপ ৪: `package.json` এ স্ক্রিপ্ট যোগ করা

১. `package.json`

২. `main.js`

৩. `index.html`

৪. `assets/` ফোল্ডার

৫. `node_modules/`

`renderer/scripts/renderer.js`

`styles/style.css`

`assets/icons/`