یک مثال ساده و عملی از فریمورک Electron.js

الکترون یا Electron.js یکی از کاربردی‌ترین و خلاقانه‌ترین ابزارهایی‌ست که توسط جاوا اسکریپت درست شده و توانسته محبوبیت بسیار زیادی را بدست بیاورد. سازنده اصلی الکترون، شرکت گیت‌هاب بوده و به همین دلیل می‌توان  از پشتیبانی کامل و آپدیت‌های همگانی آن مطمئن بود. دلیل این موضوع که ما آن را یک فریمورک خلاقانه می‌نامیم این است که جاوا اسکریپت همواره یک زبان برنامه نویسی برای دنیای وب بوده و همواره حضور آن را در دنیای وب مشاهده کرده‌ایم. اما حال که الکترون ظهور پیدا کرده است ما توانایی آن را داریم که از جاوا اسکریپت در فرایند توسعه اپلیکیشن‌های مبتنی بر دسکتاپ استفاده کنیم.

البته در الکترون همه چیز با جاوا اسکریپت نوشته نخواهد شد. برای طراحی رابط کاربری اپلیکیشن و قسمت‌های مختلف ما مجبور خواهیم بود از HTML/CSS نیز استفاده کنیم.

اولین ظهور الکترون را ما با ادیتور محبوب Atom که توسط گیت‌هاب منتشر شد شاهد بودیم. در حال حاضر اپلیکیشن‌های محبوب زیادی با استفاده از الکترون نوشته شده است. Discord، Slack، VSCode و Spotify تنها موارد کلی از این دسته اپلیکیشن‌ها هستند. از این جهت باید در نظر گرفت که شرکت‌های بزرگی مانند مایکروسافت، اسلاک و اسپاتیفای از این ابزار استفاده می‌کنند.

الکترون برای ایجاد این اپلیکیشن‌ها از موتور مرورگر کرومیوم و نودجی‌اس قدرت می‌گیرد. همچنین در الکترون شما قابلیت دسترسی به APIهای کاربردی مانند IPC یا Inter-process Communication Module را دارید.

همچنین از آنجایی که ما در مجموعه آموزشی راکت سعی می‌کنیم در زودترین زمان ممکن برای تکنولوژی‌های مختلف دوره‌های آموزشی را تعریف کنیم، برای Electron.js نیز این کار را انجام دادیم. شما می‌توانید همین الان وارد صفحه دوره آموزشی الکترون‌جی‌اس شده و آن را به صورت کامل یاد بگیرید.

حال که با کلیات موضوع مربوط به الکترون‌جی‌اس آشنا شدیم بیایید ساختار یک اپلیکیشن کوچک در آن را بررسی کرده و به قسمت‌های مختلف آن نگاه کنیم.

ساختار یک اپلیکیشن الکترون

ساختار دایرکتوری یک اپلیکیشن الکترونی بسیار ساده شبیه به زیر است:

.
├── index.html
├── index.js
├── node_modules
├── package-lock.json
└── package.json

1 directory, 4 files

همانطور که مشاهده می‌کنید در یک اپلیکیشن ساده و پایه ما ۴ فایل مهم را در دایرکتوری اصلی پروژه خواهیم داشت.

حال در کنار داشتن این فایل‌ها بیایید با استفاده از npm پکیج مربوط به electron را نصب کرده و اسکریپت‌های مورد نظر را در آن قرار دهیم.

برای این کار در ابتدا یک فایل package.json را  با استفاده از دستور npm init ایجاد کنید. همچنین در کنار این دستورات مطمئن شوید که تنها پکیج مورد نیاز برای این پروژه را نیز نصب کنید:

npm i electron

در نهایت فایل package.json شما حالتی شبیه به زیر را خواهد داشت:

{
  "name": "electron-blog-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^20.0.2"
  }
}

حال در نهایت دستور npm i را برای نصب تمام نیازمندی‌ها اجرا کنید.

به عنوان یک نکته مهم این موضوع را نیز در نظر بگیرید که اپلیکیشن‌های Electron از دو بخش کلی ایجاد می‌شود. از آنجایی که اصطلاح تماما درستی برای این دو بخش وجود ندارد بیایید ما این دو بخش را Front-End و Back-End بنامیم.

بخش Back-End

در هر اپلیکیشن مبتنی بر الکترون شما یک فایل index.js خواهید داشت. این درست همان فایلی است که شما برای اجرا اپلیکیشن باید از آن استفاده کنید. index.js وظیفه ایجاد اپلیکیشن دسکتاپی شما را بر عهده خواهد گرفت و پنجره اصلی برنامه‌تان را ایجاد می‌کند. برای این مثال ساده ما کدهای زیر را در داخل فایل index.js قرار خواهیم داد.

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

const createWindow = () => {
  const win = new BrowserWindow({
    width: 400,
    height: 400,
  });
  win.loadFile("./index.html");
};

app.whenReady().then(() => {
  createWindow();
});

حال به صورت جداگانه هر قسمت از این کد را بررسی می‌کنیم.

در خط اول ما دو بخش اساسی و مهم پکیج Electron را به پروژه اضافه خواهیم کرد. مورد اول با نام app چرخه کاری اپلیکیشن را کنترل می‌کند. مورد دوم با نام BrowserWindow نیز یک کلاس است که به شما در ایجاد یک پنجره جدید کمک می‌کند.

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

در خطوط بعدی ما با استفاده از BrowserWindow یک پنجره جدید با اندازه‌های ۴۰۰ در ۴۰۰ ایجاد خواهیم کرد:

تابع createWindow در واقع دو کار اصلی و ساده را انجام می‌دهند.

1. تعیین اندازه (طول و عرض) پنجره‌ها.
2. بارگذاری فایل index.html

در واقع index.html همان فایل اصلی است که صفحات وب را نیز بارگذاری می‌کند. البته این نکته اساسی را نیز در نظر داشته باشید که createWindow تا زمانی که Electron  به صورت کامل پیاده‌سازی و مقداردهی نشود فراخوانی نخواهد شد. برای اینکه مطمئن شویم الکترون به صورت تمام و کمال آماده کار است باید از تابع whenReady استفاده کنیم. به همین دلیل ما قطعه کد زیر را نیز قرار خواهیم داد:

app.whenReady().then(() => {
  createWindow();
});

بخش Front-End

همانطور که مشاهده کردید در فایل index.js ما کلیات عملکردی اپلیکیشن را پیاده‌سازی کردیم. حال نوبت آن است که رابط کاربری اپلیکیشن را با استفاده از index.html ایجاد کنیم. برای اینکار یک فایل جدید با نام index.html  ایجاد کرده و محتوای زیر را در آن قرار دهید.

<!DOCTYPE html>
<html>
  <head>
    <title>This is my first Electron app!</title>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
  </head>
  <body>
    <h1>I made a Desktop App!</h1>
  </body>
</html>

در حال حاضر ما یک فایل جاوا اسکریپتی را داریم پنجره اصلی اپلیکیشن را ایجاد کرده و همچنین یک فایل HTML ساده را در اختیار داریم که رابط کاربری اپلیکیشن را ایجاد می‌کند.

اجرا اپلیکیشن

حال که ما همه چیز به عنوان یک اپلیکیشن ساده را در اختیار داریم می‌توانیم برنامه مورد نظر خود را اجرا کنیم. برای انجام این کار دستورات خط هفتم زیر را به package.json اضافه کنید.

{
  "name": "electron-blog-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron .", // this is new
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^20.0.2"
  }
}

در پایان از طریق ترمینال دستور npm start را اجرا کرده و منتظر شوید تا برنامه شما اجرا شود.

پیش‌نمایش اپلیکیشن ساخته شده را می‌توانید در تصویر زیر مشاهده کنید.

تبریک می‌گویم! شما اولین برنامه الکترونی خود را ایجاد کردید! البته همانطور که مشاهده کردید این تنها یک اپلیکیشن ساده بوده و هیچ کار خاصی را انجام نمی‌دهد. برای پیشرفت در این زمینه می‌توانید به مستندات الکترون مراجعه کرده و یا از دوره‌های آموزشی وبسایت راکت استفاده کنید.