فریم‌ ورک الکترون یک فریم‌ورک متن‌باز است که به توسعه‌دهندگان این امکان را می‌دهد تا برنامه‌های دسکتاپ کراس‌ پلتفرم را با استفاده از فناوری‌های وب، مانند HTML، CSS و JavaScript بسازند. این فریم‌ورک به طور خاص به دلیل سادگی و انعطاف‌ پذیری‌ اش محبوب است، در این مقاله وبلاگ از کدیتی همراه ما باشید

۱. نصب Electron

برای شروع، مطمئن شوید که Node.js نصب شده باشد. سپس Electron را می‌توان با استفاده از npm نصب کرد:

npm install electron --save-dev

۲. راه‌ اندازی پروژه

  1. ایجاد پوشه پروژه: 
    mkdir my-electron-app
cd my-electron-app
  2. ایجاد فایل package.json: با استفاده از دستور زیر، فایل package.json را ایجاد کنید: 
    npm init -y
  3. ایجاد فایل اصلی (main.js): یک فایل به نام main.js ایجاد کنید و کد زیر را در آن قرار دهید: 
    const { app, BrowserWindow } = require('electron');

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });
    win.loadFile('index.html');
}

app.whenReady().then(createWindow);
  4. ایجاد فایل HTML (index.html): یک فایل به نام index.html ایجاد کرده و محتوای زیر را در آن قرار دهید: 
    <!DOCTYPE html>
<html>
<head>
    <title>My Electron App</title>
</head>
<body>
    <h1>Hello, Electron!</h1>
    <p>This is my first Electron app.</p>
</body>
</html>

۳. اجرای برنامه

برای اجرای برنامه، اسکریپت زیر را به package.json اضافه کنید:

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

سپس با اجرای دستور زیر، برنامه را راه‌اندازی کنید:

npm start

۴. اضافه کردن قابلیت‌ های بیشتر

  • مدیریت وضعیت (State Management): از کتابخانه‌هایی مثل Redux برای مدیریت وضعیت استفاده کنید.
  • استفاده از فریم‌ورک‌های UI: فریم‌ورک‌های CSS مانند Bootstrap یا Tailwind CSS می‌توانند به طراحی فریبنده‌تر کمک کنند.
  • اضافه کردن یک منو: می‌توانید از قابلیت منوهای Electron برای اضافه کردن منوهای سفارشی به برنامه استفاده کنید.

۵. بسته‌ بندی برنامه

برای ایجاد نسخه‌های قابل توزیع از برنامه، می‌توانید از Electron Packager یا Electron Builder استفاده کنید:

  • نصب Electron Packager: 
    npm install electron-packager --save-dev
  • بسته‌بندی برنامه: 
    npx electron-packager . MyElectronApp --platform=win32 --arch=x64

نتیجه‌ گیری

با استفاده از فریم‌ ورک الکترون، می‌توانید به آسانی برنامه‌های دسکتاپ کراس‌پلتفرم بسازید. این فریم‌ورک امکانات زیادی برای توسعه‌دهندگان فراهم می‌آورد و به شما این امکان را می‌دهد که از مهارت‌های توسعه وب خود بهره ببرید.

کانال یوتیوب کدیتی