Electron অ্যাপ্লিকেশনে Icon এবং Splash Screen যোগ করা একটি গুরুত্বপূর্ণ কাস্টমাইজেশন, যা অ্যাপের ব্র্যান্ডিং এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে। এই টিউটোরিয়ালে আপনি শিখবেন কিভাবে Electron অ্যাপ্লিকেশনে Icon এবং Splash Screen যোগ করবেন।
১. Electron অ্যাপের জন্য Icon যোগ করা
আপনার Electron অ্যাপ্লিকেশনের জন্য আইকন নির্ধারণ করা খুবই গুরুত্বপূর্ণ, কারণ এটি অ্যাপের ব্র্যান্ডিং এবং ইউজার অভিজ্ঞতা উন্নত করতে সহায়ক।
১.১. App Icon সেট করা
আপনি Main Process-এ BrowserWindow কনফিগারেশনে icon প্রোপার্টি ব্যবহার করে অ্যাপের আইকন সেট করতে পারেন।
উদাহরণ: Main Process - main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');
let mainWindow;
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
icon: path.join(__dirname, 'assets/icons/app-icon.png'), // আইকনের পাথ
webPreferences: {
nodeIntegration: true
},
});
mainWindow.loadFile('index.html');
});
এখানে:
iconপ্রোপার্টির মাধ্যমেBrowserWindowএর আইকন সেট করা হয়।path.join(__dirname, 'assets/icons/app-icon.png')এর মাধ্যমে আইকনের ফাইল পাথ সঠিকভাবে নির্ধারণ করা হয়।
১.২. আইকনের পছন্দসই আকার
আইকন ফাইলটি বিভিন্ন আকারে তৈরি করা উচিত, যেমন:
- 32x32 px: সাধারণ আইকন আকার।
- 128x128 px: ম্যাক এবং উইন্ডোজে বড় আইকন হিসেবে ব্যবহৃত।
- 256x256 px: অ্যাপের জন্য উচ্চ রেজোলিউশন আইকন।
এটি Mac, Windows, এবং Linux এর জন্য আইকনের সর্বোত্তম অভিজ্ঞতা নিশ্চিত করে।
২. Splash Screen (স্টার্টআপ স্ক্রীন) যোগ করা
Splash Screen একটি স্টার্টআপ স্ক্রীন যা অ্যাপ্লিকেশন লোড হওয়ার সময় প্রথমে প্রদর্শিত হয় এবং মূল অ্যাপ্লিকেশন লোড হওয়ার পরে বন্ধ হয়ে যায়। এটি অ্যাপ্লিকেশনটির ইউজার অভিজ্ঞতা উন্নত করে এবং লোডিং সময়ের জন্য ব্যবহারকারীর দৃষ্টি আকর্ষণ করে।
২.১. Splash Screen তৈরি করা
Splash Screen যোগ করতে BrowserWindow এর সাথে show: false এবং ready-to-show ইভেন্ট ব্যবহার করা হয়। এই ইভেন্টটি ট্রিগার হওয়ার পর উইন্ডোটি প্রদর্শিত হয়।
উদাহরণ: Main Process - main.js (Splash Screen)
const { app, BrowserWindow } = require('electron');
const path = require('path');
let mainWindow;
let splashWindow;
app.on('ready', () => {
// Splash Screen তৈরি করা
splashWindow = new BrowserWindow({
width: 400,
height: 300,
frame: false,
alwaysOnTop: true,
transparent: true,
resizable: false,
icon: path.join(__dirname, 'assets/icons/splash-icon.png')
});
splashWindow.loadFile('splash.html'); // splash screen এর HTML লোড করা
// মূল অ্যাপ্লিকেশন লোড করা
mainWindow = new BrowserWindow({
width: 800,
height: 600,
icon: path.join(__dirname, 'assets/icons/app-icon.png'),
webPreferences: {
nodeIntegration: true
},
});
mainWindow.loadFile('index.html'); // মূল অ্যাপ্লিকেশনের HTML লোড করা
// Splash Screen বন্ধ করা যখন অ্যাপ্লিকেশন রেডি
mainWindow.once('ready-to-show', () => {
splashWindow.close(); // Splash screen বন্ধ
mainWindow.show(); // মূল উইন্ডো প্রদর্শন
});
});
Splash Screen HTML (splash.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Splash Screen</title>
<style>
body {
margin: 0;
padding: 0;
background: url('assets/images/splash-bg.png') no-repeat center center;
background-size: cover;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h1 style="color: white; text-align: center; position: absolute; bottom: 20px; width: 100%;">Loading...</h1>
</body>
</html>
splashWindow: এটি প্রথমে একটি transparent এবং frameless উইন্ডো তৈরি করে।mainWindow.once('ready-to-show'): এই ইভেন্টটি যখন ট্রিগার হয়, তখন Splash Screen বন্ধ হয়ে যাবে এবং মূল অ্যাপ্লিকেশন উইন্ডো প্রদর্শিত হবে।
৩. Splash Screen এবং Icon কাস্টমাইজেশন
- Splash Screen এর জন্য আপনি নিজের মতো কাস্টম ডিজাইন করতে পারেন যেমন একটি লোগো বা লোডিং বার।
- Icon কাস্টমাইজ করতে হলে আপনাকে বিভিন্ন আকারের আইকন ফাইল তৈরি করতে হবে, যেমন 32x32 px, 128x128 px, এবং 256x256 px আইকন ফাইল।
উদাহরণ: Icon এবং Splash Screen কাস্টমাইজেশন
- Icon: 32x32 px, 128x128 px, এবং 256x256 px আকারের আইকন তৈরি করুন এবং যথাযথ স্থানে রাখুন।
- Splash Screen: Splash Screen এর জন্য একটি সুন্দর লোগো এবং লোডিং বার ডিজাইন করুন।
৪. Electron Build Configuration for Icons
আপনার Electron অ্যাপ্লিকেশনটি প্যাকেজ করার সময় (যেমন macOS, Windows, Linux), Electron Builder ব্যবহার করলে আপনি অ্যাপের আইকন এবং Splash Screen কনফিগারেশন যুক্ত করতে পারেন।
package.json-এ কনফিগারেশন যোগ করা
{
"name": "my-electron-app",
"version": "1.0.0",
"build": {
"appId": "com.example.myapp",
"mac": {
"icon": "assets/icons/app-icon.icns",
"target": "dmg"
},
"win": {
"icon": "assets/icons/app-icon.ico",
"target": "nsis"
}
},
"dependencies": {
"electron": "^25.0.0"
}
}
এখানে:
mac.iconএবংwin.iconব্যবহার করে আপনার আইকনের পাথ উল্লেখ করতে হবে।assets/icons/app-icon.icnsএবংassets/icons/app-icon.icoফাইলগুলি আপনার অ্যাপের জন্য আইকন ফাইল হবে, যা macOS এবং Windows প্ল্যাটফর্মে ব্যবহৃত হবে।
সারাংশ
- Icon এবং Splash Screen অ্যাপ্লিকেশনের প্রথম ইমপ্রেশন তৈরি করতে সাহায্য করে।
BrowserWindowকনফিগারেশন ব্যবহার করে অ্যাপের আইকন এবং Splash Screen যোগ করা যায়।- Electron Builder ব্যবহার করে আইকন এবং Splash Screen প্যাকেজিং প্রক্রিয়ায় অন্তর্ভুক্ত করা সম্ভব।
- Splash Screen উইন্ডো লোডিং সম্পূর্ণ হওয়ার পর মূল অ্যাপ্লিকেশন উইন্ডো প্রদর্শন করা হয়।
এভাবে, আপনি আপনার Electron অ্যাপ্লিকেশনকে আরও প্রফেশনাল এবং ব্যবহারকারীর জন্য আকর্ষণীয় করতে পারবেন।
Read more
