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 কমান্ড দিয়ে অ্যাপ চালানো হয়, এবং ডেভেলপমেন্টের সময় লাইভ রিলোড সুবিধা ব্যবহার করে অ্যাপ দ্রুত পরীক্ষা করা যায়।
Read more
