آموزش ساخت برنامه دسکتاپ با React و Electron

آموزش ساخت برنامه دسکتاپ با React و Electron

در این بخش نحوه استفاده از تکنولوژی React به منظور ساخت برنامه دسکتاپ با React و Electron را بررسی خواهیم کرد. در ادامه می توانید جزئیات مربوط به این آموزش را مشاهده کنید.

React چیست؟

React یک کتابخانه front-end است که برای هندل کردن لایه view برنامه های وب و موبایل مورد استفاده قرار می گیرد. این فریم ورک توسط Facebook توسعه داده شده است. در حال حاضر این کتابخانه جزء محبوب ترین کتابخانه های زبان برنامه نویسی JavaScript محسوب می شود.

Electron چیست؟

الکترون یک فریم ورک متن باز است که توسط Github (در حال حاضر مایکروسافت آن را خریده است) به منظور ایجاد نرم افزارهای چند سکویی با استفاده از تکنولوژی های وب (HTML، CSS و JavaScript) ساخته شده است. این فریم ورک برای ساخت نرم افزارهای دسکتاپ، Chromium و Node.js را با هم در یک نرم افزار (single) ترکیب می کند که خروجی تولید شده می تواند بر روی سیستم عامل های لینوکس، مک و ویندوز اجرا شود.

مراحل ساخت پروژه

قبل از اجرای مراحل زیر مطمئن شوید که Node.js و npm بر روی سیستم شما نصب شده است.

ایجاد پروژه React
نصب الکترون
نصب foreman
ایجاد فایل js در داخل فولدر src
افزودن پراپرتی main و homepage به فایل json
افزودن اسکریپت اجرای الکترون و foreman به فایل json
ایجاد فایل electron-wait-react.js
ایجاد فایل procfile

مرحله ۱

خط فرمان (یا terminal) خود را باز کرده و در جایی که میخواهید پروژه جدید ایجاد شود، دستور create-react-app your-app-name یک پروژه جدید ایجاد کنید (به جای your-app-name نام پروژه مورد نظرتان را بنویسید).

مرحله ۲

بعد از این که با دستور فوق پروژه React ایجاد شد، با دستور cd your-app-name به فولدری پروژه بروید و دستور npm install –save-dev electron را اجرا کنید تا الکترون دانلود و به پروژه شما اضافه شود.

مرحله ۳

سپس در همان خط فرمان دستور npm install –save-dev foreman را اجرا کنید تا بسته foreman هم نصب شود. این بسته برای مدیریت process ها استفاده می شود.

مرحله ۴

یک فایل جدید به نام main.js در داخل فولدر src ایجاد کرده و محتوای زیر را در داخل آن بنویسید.

const electron = require("electron");
// Module to control application life.
const app = electron.app;
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow;
const path = require("path");
const url = require("url");
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;
function createWindow() {
  // Create the browser window.
  mainWindow = new BrowserWindow({ width: 800, height: 600 });
  // and load the index.html of the app.
  const startUrl =
    process.env.EWR_START_URL ||
    url.format({
      pathname: path.join(__dirname, "/../build/index.html"),
      protocol: "file:",
      slashes: true
    });
  mainWindow.loadURL(startUrl);
  // Open the DevTools.
  mainWindow.webContents.openDevTools();
  // Emitted when the window is closed.
  mainWindow.on("closed", function() {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", createWindow);
// Quit when all windows are closed.
app.on("window-all-closed", function() {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== "darwin") {
    app.quit();
  }
});
app.on("activate", function() {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow();
  }
});
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

اگر به سورس کد فوق توجه کنید، در داخل تابع createWindow آدرس شروع (startUrl) را به شکل زیر تعریف کرده ایم. با این کار اگر پروژه در حالت dev باشد، آدرس شروع برابر با مقدار متغیر محیطی EWR_START_URL خواهد بود. در غیر این صورت آدرس فایل index.html تنظیم خواهد شد.

const startUrl =
    process.env.EWR_START_URL ||
    url.format({
      pathname: path.join(__dirname, "/../build/index.html"),
      protocol: "file:",
      slashes: true
    });
  mainWindow.loadURL(startUrl);

توجه! متغیر محیطی EWR_START_URL را در بخش scripts فایل package.json تعریف خواهیم کرد.

مرحله ۵ و ۶

محتوای فایل package.json را به شکل زیر تغییر داده و پراپرتی های main و homepage که هردو مربوط به الکترون هستند را به آن اضافه کنید. همچنین در بخش scripts هم دستورات مربوط به اجرای foreman و با الکترون را اضافه کنید.

{
  "name": "electron-with-react",
  "version": "1.0.0",
  "private": true,
  "main": "src/main.js",
  "homepage": "./",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.0"
  },
  "scripts": {
    "start": "nf start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron": "electron .",
    "electron-dev": "set EWR_START_URL=http://localhost:3000 && electron ."
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "electron": "^7.1.5",
    "foreman": "^3.0.1"
  }
}

مرحله ۷

در حالت اگر بخواهیم پروژه را اجرا کنیم باید ابتدا پروژه react را اجرا کنیم و بعد الکترون را اجرا کنیم. این موضوع کمی آزار دهنده است. برای حل این مشکل می توانیم از foreman و اسکریپت زیر استفاده کنیم. یک فایل با نام electron-wait-react.js ایجاد کرده و کدهای زیر را در داخل آن بنویسید.

const net = require("net");
const port = process.env.PORT ? process.env.PORT - 100 : 3000;
process.env.EWR_START_URL = `http://localhost:${port}`;
const client = new net.Socket();
let startedElectron = false;
const tryConnection = () =>
  client.connect({ port: port }, () => {
    client.end();
    if (!startedElectron) {
      console.log("starting electron");
      startedElectron = true;
      const exec = require("child_process").exec;
      exec("npm run electron");
    }
  });
tryConnection();
client.on("error", error => {
  setTimeout(tryConnection, 1000);
});

کد فوق وضعیت react را بررسی میکند و اگر اجرا شده باشد، اسکریپت مربوط به اجرای الکترون را اجرا می کند.

مرحله ۸

یک فایل جدید با نام procfile (بدون پسوند) ایجاد کرده و محتوای زیر را در داخل آن بنویسید.

react: set BROWSER=none && react-scripts start
electron: node electron-wait-react

این فایل مربوط به foreman است و بعد از اجرا شدن دستور nf start، ابتدا خط اول و سپس خط دوم اجرا خواهد شد. خط اول پروژه react را اجرا می کند (متغیر محیطی تنظیم شده، مشخص می کند که نباید بعد از اجرای react در مرورگر نمایش داده شود) و خط دوم هم اسکریپتی که در مرحله ۷ ایجاد کردیم را با استفاده از node اجرا می کند.

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