از زمانی که برنامه نویسی را شروع کردید، احتمالا این فکر به سرتان زده که یک برنامه تحت دسکتاپ هم بنویسید. اگر برنامه نویس جاوا اسکریپت باشید، دوست دارید به جای استفاده از زبان‌هایی مثل C++ یا جاوا، برنامه دسکتاپی خود را با زبان شیرین جاوا اسکریپت بنویسید. این کار شدنی بوده و خوشبختانه جاوا اسکریپت به حدی منعطف است که برنامه نویسان خود را محدود به یک بخش خاص از تکنولوژی نمی‌کند. الکترون یک فریم ورک جاوا اسکریپت است که توسط شرکت معروف گیت هاب توسعه داده شده و اجازه می‌دهد با جاوا اسکریپت برنامه‌های تحت دسکتاپ بسازید. در این آموزش با یک برنامه در پلتفرم دسکتاپ می‌نویسیم. بیشتر بخوانید: Node.js چیست و چه کاربردی دارد ؟

پیش نیازهای لازم برای برنامه نویسی با Electron.js

• آشنایی با مفاهیم پایه جاوا اسکریپت
• آشنایی با مفاهیم اصلی ری‌اکت
• سابقه برنامه نویسی جاوا اسکریپت با استانداردهای ES5 و ES6
• توانایی کار با پکیج منیجر نود (NPM)
• آشنایی با Node.JS و توانایی کار با yarn

شروع ساخت برنامه تحت دسکتاپ با Electron.js

در قدم اول یک پوشه مادر برای پروژه خودمان ایجاد کرده و وارد آن پوشه می‌شویم:

$ mkdir electron_react_app && cd $_

از دستور CRA که مخفف create-react-app می‌باشد استفاده می‌کنیم تا پروژه ری‌اکت خود را بسازیم:

$ npx create-react-app .

از آنجایی که مشغول کار با الکترون جی اس هستیم، در ادامه کار باید وابستگی‌های لازم را به پروژه اضافه کنیم:

$ yarn add electron electron-builder wait-on concurrently -D

اگر کد بالا را متوجه نشدید جای نگرانی نیست. در ادامه بخش‌های مختلف آن را توضیح می‌دهم:

• electron : استفاده از این کلمه به ما اجازه می‌دهد از فریم ورک الکترون استفاده کنیم
• electron-builder :‌ این دستور به ما کمک می‌کند پروژه الکترون خود را به صورت اجرایی بسازیم
• wait-on : به ما اجازه می‌دهد منتظر کامپایل کردن ری‌اکت باشیم و آن را با الکترون رندر بگیریم
• concurrently : به ما اجازه می‌دهد الکترون و ری‌اکت را همزمان با هم اجرا کنیم

$ yarn add electron-is-dev

electron-is-dev : به الکترون محیطی که در حال کار روی آن هستیم را می‌گوید حالا یک فایل با نام electron.js در پوشه اصلی پروژه خود ایجاد می‌کنیم تا منطق برنامه را جلو ببرد:

// public/electron.js
const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require("path");
const isDev = require("electron-is-dev");
let mainWindow;
function createWindow() {
  // Define the applications dimension
  mainWindow = new BrowserWindow({ width: 900, height: 680 });
  // Determine what to render based on environment
  mainWindow.loadURL(
    isDev
      ? "https://localhost:3000"
      : `file://${path.join(__dirname, "../build/index.html")}`
  );
  // Show chrome developer tools when in dev environment
  if (isDev) {
    mainWindow.webContents.openDevTools();
  }
  // Create event to close window on close
  mainWindow.on("closed", () => (mainWindow = null));
}
// On launch create app window
app.on("ready", createWindow);
app.on("window-all-closed", () => {
    // Based on which operating system you are using
  if (process.platform !== "linux") {
      // If os not linux, close the app
      // you can add darwin(mac os), win64 and so many more
    app.quit();
  }
});
app.on("activate", () => {
  if (mainWindow !== null) {
    createWindow();
  }
});

در اینجا یک دستور به فایل package.json اضافه می‌کنیم که اجازه بدهد React و Electron به طور موازی با هم کار کنند:

"electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\""

این اسکریپت صبر می‌کند تا CRA ری‌اکت را کامپایل کند و بعد برنامه Electron را شروع می‌کند همچین شما برای اجرای برنامه نوشته شده با الکترون، باید به قسمت منطق یا لاجیک کدهای خود اشاره کنید. برای این کار لازم است یک مقدارِ main در فایل package.json ایجاد کنیم و مقدار زیر را به آن بدهیم:

"main": "public/electron.js"

خب حالا بهتر است برنامه خود را اجرا کرده و ببینیم چه اتفاقی می‌افتد:

$ yarn electron-dev

بعد از اجرای دستور بالا، با چنین صحنه‌ای مواجه خواهید شد: اگر قبلا کمی با React کار کرده باشید، احتمالا تعجب خواهید کرد که چرا یک پنجره جدید در مرورگر شما باز نشد. این اتفاق به خاطر محیطی است که ما در electron-dev تعریف کردیم و BROWSER=none را قرار دادیم. حالا اگر می‌خواهید به ماژول fs دسترسی داشته باشید، با ارور ماژول موردنظر پیدا نشد مواجه خواهید شد. خوشبختانه این موضوع به کمک electron-renderer قابل حل خواهد بود. شما لازم نیست هیچ تغییری در کدهای ری‌اکت خود ایجاد کنید، تا زمانی که از یک کتابخانه واسط به نام Rescripts استفاده می‌کنیم. حالا سراغ نصب کتابخانه Rescripts برویم:

$ yarn add @rescripts/cli  @rescripts/rescript-env -D

بعد از نصب کتابخانه باید اسکریپت تگ‌های فایل package.json را هم تغییر دهیم: قبل از انجام تغییرات کدهای ما به این شکل بودند:

"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",

حالا باید آنها را به این حالت تغییر دهید:

"start": "rescripts start",
"build": "rescripts build",
"test": "rescripts test",

در مرحله بعد فایل .rescriptsrc.js را به پوشه اصلی پروژه خودمان اضافه می‌کنیم:

module.exports = [require.resolve('./.webpack.config.js')]

حالا لازم است برای جلوگیری از به وجود آمدن ارورهای import فایل .webpack.config.js را ایجاد کنیم. داخل این فایل کدهای زیر را قرار می‌دهیم:

module.exports = config => {
  config.target = 'electron-renderer';
  return config;
}

کار تمام شد. حالا دیگر لازم نیست نگران fs باشید و همه چیز درست کار می‌کند.

پکیج کردن برنامه

برای پکیج کردن برنامه خود نیاز به نصب تعدادی وابستگی (Dependencies) داریم:

yarn add electron-builder typescript -D

• electron-builder : برای پکیج کردن برنامه الکترونی ما به اضافه تمام وابستگی‌هایی که دارد استفاده می‌شود
• typescript - electron-builder : نوع typescript را نشان می‌دهد

لازم نیست در طول کار از typescript استفاده کنید و من هم به شما فشار نمی‌آورم که حتما این کار را انجام دهید

لازم است یک Route (مسیر) homepage تعریف کنیم چون React برخلاف الکترون از آدرس‌دهی مطلق استفاده می‌کند. شما می‌توانید این مسیردهی را با اضافه کردن یک خاصیت homepage در فایل package.json تغییر دهید.

"homepage": "./",

در مرحله بعدی دستور electron-pack را اجرا می‌کنیم تا تمام چیزهایی که ساختیم را پکیج کند. کد زیر را در تگ اسکریپت داخل فایل package.json قرار دهید:

"postinstall": "electron-builder",
"preelectron-pack": "yarn build",
"electron-pack": "build -mw"

• postinstall : بررسی می‌کند که وابستگی‌های پروژه شما همیشه با نسخه الکترون که استفاده می‌کنید هماهنگ باشد
• preelectron-pack : برنامه ری‌اکت را ایجاد می‌کند
• electron-pack : برنامه ما را برای سیستم عاملی که انتخاب می‌کنیم به صورت پکیج در می‌آورد

قبل از اینکه بتوانیم از برنامه خود خروجی بگیریم یا کار خاصی انجام دهیم، باید Electron builder را پیکربندی کنیم. برای این کار کافی است کد زیر را به فایل package.json پروژه اضافه کنید:

"author": {
  "name": "Your Name",
  "email": "your.email@domain.com",
  "url": "https://your-website.com"
},
"build": {
  "appId": "com.my-website.my-app",
  "productName": "MyApp",
  "copyright": "Copyright © 2019 ${author}",
  "mac": {
    "category": "public.app-category.utilities"
  },
  "files": [
    "build/**/*",
    "node_modules/**/*"
  ],
  "directories": {
    "buildResources": "assets"
  }
}

در آخر فایل package.json که ساخته‌اید باید چیزی شبیه به این باشد:

{
  "name": "my-app",
  "description": "Electron + Create React App + Electron Builder",
  "version": "0.1.0",
  "private": true,
  "author": {
    "name": "Your Name",
    "email": "your.email@domain.com",
    "url": "https://your-website.com"
  },
  "build": {
    "appId": "com.my-website.my-app",
    "productName": "MyApp",
    "copyright": "Copyright © 2019 ${author}",
    "mac": {
      "category": "public.app-category.utilities"
    },
    "files": [
      "build/**/*",
      "node_modules/**/*"
    ],
    "directories": {
      "buildResources": "assets"
    }
  },
  "dependencies": {
    "electron-is-dev": "^1.0.1",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-scripts": "2.1.5"
  },
  "homepage": "./",
  "main": "public/electron.js",
  "scripts": {
    "start": "rescripts start",
    "build": "rescripts build",
    "test": "rescripts test",
    "eject": "react-scripts eject",
    "electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\"",
    "postinstall": "electron-builder",
    "preelectron-pack": "yarn build",
    "electron-pack": "build -mw"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@rescripts/cli": "^0.0.10",
    "@rescripts/rescript-env": "^0.0.5",
    "concurrently": "^4.1.0",
    "electron": "^4.0.6",
    "electron-builder": "^20.38.5",
    "typescript": "^3.3.3333",
    "wait-on": "^3.2.0"
  }
}

بعد از اتمام کار می‌توانید یک پوشه با نام assets ایجاد کرده و در آنجا آیکون‌های برنامه خود را قرار دهید. توضیح درباره این موضوع از حوصله این مقاله خارج است. برای پکیج کردن برنامه خود از دستور زیر استفاده کنید:

$ yarn electron-pack

کار تمام است. شما توانستید با Electron.js یک برنامه تحت دسکتاپ بسازید. امیدوارم برایتان مفید بوده باشد.

حل یک ارور رایج در سیستم عامل لینوکس

اگر از لینوکس استفاده می‌کنید، ممکن است در طول کار با ارور زیر مواجه شوید:

[2720:0425/142001.775056:FATAL:setuid_sandbox_host.cc(157)] The SUID sandbox helper binary was found, but is not configured correctly. Rather than run without sandboxing I'm aborting now. You need to make sure that /home/<name>/src/ssbc/patchwork/node_modules/electron/dist/chrome-sandbox is owned by root and has mode 4755.

می‌توانید این مشکل را با نوشتن دستور زیر در ترمینال حل کنید:

$ sudo chown root node_modules/electron/dist/chrome-sandbox

سپس دستور زیر را تایپ کنید:

$ sudo chmod 4755 node_modules/electron/dist/chrome-sandbox

در اینجا ما با یوزر root وارد مسیر پروژه شدیم. چون به طور پیشفرض برنامه شما از پسوند .Appimage استفاده می‌کند، نمی‌تواند در لینوکس به طور خودکار اجرا شود، پس باید به آن قابلیت اجرایی بدهیم که این کار با chmod انجام می‌شود. در ادامه دستور زیر را تایپ کنید:

$ chmod a+x '<You app>.AppImage'
$ ./<You app>.AppImage

اگر هنوز هم ارور 4755 را در لینوکس دریافت می‌کنید، بهتر است کد زیر را هم امتحان کنید:

$ sudo chown root '<Your appname>.AppImage'
$ sudo chmod 4755 '<Your appname>.AppImage'

سپس دوباره برنامه را اجرا کنید.

نتیجه گیری

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