آموزش مقدماتی کار با Electron برای ساخت نرم‌افزارهای Desktop

دسته بندی: آموزش
زمان مطالعه: 5 دقیقه
۰۹ آذر ۱۳۹۷

در این مطلب میخوام بصورت مقدماتی کار با Electron رو بهتون آموزش بدم تا بتونین با استفاده از معلوماتی که در زمینه طراحی وب دارید، نرم‌افزارهای Desktop برای سیستم عاملهای Linux و OSX و Windows رو به وجود بیارید.

Electron چیست؟

Electron یک ابزار رایگان Open source هست که توسط Github توسعه داده شده است و با استفاده از اون میتونین نرم‌افزارهای cross-platform رو با استفاده از HTML و CSS و Javascript به وجود بیارید.

هم‌اکنون نرم‌افزارهای زیادی با استفاده از الکترون به وجود اومدن که معروفترین اونا عبارتند از:

  • Slack
  • Atom
  • Visual studio code
  • Calypso مربوط به WordPress.com
  • Discord

Electron یک پروژه بزرگ و پرطرفدار هست که در حال حاضر نسخه اصلی اون 3 هست و به زودی نسخه 4 اون نیز منتشر خواهد شد.

دنیای قبل از Electron

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

در Mac فریم‌ورک‌هایی مثل MacGap وجود داشت که با استفاده از اون میتونستین برنامه‌هایی که با استفاده از HTML و CSS و Javascript نوشتید رو در WebView مربوط به مرورگر Safari نمایش بدین. وقتی این Application به وجود میاد دیگه فقط بر روی سیستم عامل OSX اجرا میشه و امکان اینکه بر روی سیستم عاملهای Linux و Windows اجرا بشه، وجود ندارد.

قبل ازالکترون نرم‌افزار خاصی که یک برنامه رو بصورت یکسان در همه سیستم عاملها اجرا کند، وجود نداشت.

در سال 2014 اولین نسخه الکترون با نام Atom shell منتشر شد و در سال 2015 به Electron تغییر نام پیدا کرد.

نگاهی به ساختار درونی Electron

Electron ترکیبی از Nodejs و Chromium می‌باشد. Nodejs رو که دیگه همه شما میشناسید و Chromium هم یک پروژه متن‌باز یا Open source هست که توسط Google توسعه داده شده و شباهتهای زیادی به Google chrome داره و در تعدادی از ویژگی‌ها و لوگو با هم تفاوت دارند.

شما میتونین به همه امکانات Chromium دسترسی داشته باشید و همچنین از موتور V8 مربوط به Javascript و همچنین از بسته و ماژولهای مختلف Nodejs استفاده کنید. شما میتونین هر کدی که در Nodejs مورد نظرتون هست رو در الکترون مورد استفاده قرار بدین.

پس میتونین به اون مثل یک Nodejs برای Desktop نگاه کنید. الکترون المنت گرافیکی خاصی رو در اختیارتون قرار نمیده و شما میتونین با استفاده از HTML و CSS و Javascript، رابط کاربری نرم‌افزار رو به وجود بیارید.

الکترون تا حد ممکن سریع و سبک هست و با این وجود تمامی نیازهایی که برنامه شما به اونا احتیاج داره رو در اختیارتون قرار میده.

شما میتونین مجموعه‌ای از نرم‌افزارهای ساخته شده با استفاده از الکترون رو در این لینک مشاهده کنید. نرم‌افزارهایی که با استفاده از Electron به وجود اومدن رو میشه به راحتی در App store‌های Windows و Mac منتشر یا Publish کرد.

مشاهده و تست ویژگی‌های Electron

الکترون یک ابزار بنام electron-api-demos در اختیار کاربران قرار داده تا با قابلیتهای اون آشنا بشید. برای اینکار در ابتدا دستور زیر رو در command line اجرا میکنیم:

git clone https://github.com/electron/electron-api-demos

با اینکار پروژه مورد نظر clone میشه و در محل مورد نظر قرار میگیره. بعد از پایان با استفاده از cd electron-api-demos وارد دایرکتوری ساخته شده بشید و دستور npm install رو بزنید تا بسته‌های مربوط به اون نصب بشه و در پایان نیز با استفاده از npm start برنامه رو اجرا کنید تا نرم‌افزار باز بشه و بتونین Demo‌ها رو مشاهده کنید.

ساخت اولین برنامه ساده با Electron

در ابتدا یک دایرکتوری بنام electron-app در Desktop بسازید و وارد اون بشید و در command line دستور yarn init رو اجرا کنید تا package.json برای شما به وجود بیاد. یک ویژگی scripts هم قرار میدیم تا در اون npm script‌های مورد نظرمون رو قرار بدیم. با استفاده از دستور yarn add --dev electron هم electron رو بصورت dev-dependency اضافه میکنیم.

پس در نهایت کدهای درون فایل package.json بصورت زیر خواهد شد:

{
  "name": "electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "license": "MIT",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^3.0.10"
  }
}

حالا میخوایم یک برنامه ساده بسازیم که Hello world رو در یک پنجره به کاربر نمایش بده. برای اینکار در ابتدا یک فایل بنام index.html به وجود میاریم و کدهای زیر رو در اون قرار میدیم:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

یک فایل هم بنام main.js به وجود میاریم و کدهای زیر رو درونش قرار میدیم:

'use strict';

const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');

app.on('ready', () => {
  // Create the browser window.
  const win = new BrowserWindow({ width: 800, height: 600 });

  // and load the index.html of the app.
  win.loadURL(
    url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true,
    }),
  );
});

همونطور که میبینید یک پنجره با طول و ارتفاع اولیه 800 و 600 پیکسل به وجود آوردم و با استفاده از متد loadURL، محتویات فایل index.html رو در اون رندر کردم. حالا اگر در command line دستور yarn start رو اجرا کنید، برنامه مورد نظر باز میشه و Hello world رو در خروجی خواهید دید:

اگر بخواید از کدهاتون خروجی بگیرید و برای Windows و Linux و Max فایل نصبی ایجاد کنید، میتونین از بسته electron-packager استفاده کنید.

همونطور که میبینید با استفاده از الکترون خیلی راحت میتونین نرم‌افزار مورد نظرتون رو بدون نیاز به یادگیری زبان برنامه نویسی جدید، به وجود بیارید. با استفاده از Electron میتونین خریدهای درون برنامه‌ای، Notification، ویژگی Drag & Drop، مدیریت کلیدهای ترکیبی و ویژگی‌های بسیار زیاد دیگری رو به راحتی پیاده‌سازی کنید.

شما با استفاده از Electron میتونین به‌روز رسانی برنامه‌های خودتون رو نیز مدیریت کنید.

برای مطالعه بیشتر میتونین مستندات Electron رو مطالعه کنید.

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

https://akhavanhome.com

من مطلب رو خوندم و دو تا مورد رو میخواستم بپرسیم.اگه امکان داشته باشه ؟

آرمین

سلام ببخشید اون وقت این فریمورک میتونه جای C# را برای توسعه نرم افزار دسکتاپ بگیره یعنی در حد زبان های C++ و C# قدرتمند هست؟

کیوان علی محمدی

سلام. خیر هنوز در حد زبان های مورد نظر شما قدرتمند نیست.

نقش مارکت

با تشکر از مطلب خوبتون از نقش مارکت هم دیدن کنید

نقش مارکت

عالی بود

https://naghshmarket.com/

بسیار عالی

https://www.akhavancenter.com

خیلی بینظیر و عالی

akhavancenter.com

بی نظری و تخصصی

اخوان سنتر

سلام خیلی هم عالی از سایت اخوان سنتر هم دیدن کنید

<a href="https://akhavancenter.com">اخوان سنتر</a>
akhavancenter.com

خیلی خوب بود و استفاده کردیم

satak.ir

عالی

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :