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 ব্যবহার করে আরও জটিল অ্যাপ্লিকেশন তৈরি করতে পারবেন।
Read more
