در این مطلب میخوام بصورت مقدماتی کار با Electron رو بهتون آموزش بدم تا بتونین با استفاده از معلوماتی که در زمینه طراحی وب دارید، نرم‌افزارهای Desktop برای سیستم عاملهای Linux و OSX و Windows رو به وجود بیارید.
Electron چیست
Electron یک ابزار رایگان Open source هست که توسط Github با استفاده از اون میتونین نرم‌افزارهای cross-platform رو با استفاده از HTML و CSS و Javascript به وجود بیارید.
هم‌اکنون نرم‌افزارهای زیادی با استفاده از الکترون به وجود اومدن که معروفترین اونا عبارتند از:
Discord
دنیای قبل از الکترون
قبل از معرفی شدن الکترون امکان به وجود آوردن نرم‌افزارهای 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 اجرا میکنیم:
1
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 بصورت زیر خواهد شد:
1
2
3
4
5
6
7
8
9
10
11
12
{
"name": "electron-app",
"version": "1.0.0",
"main": "main.js",
"license": "MIT",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^3.0.10"
}
}
حالا میخوایم یک برنامه ساده بسازیم که Hello world رو در یک پنجره به کاربر نمایش بده. برای اینکار در ابتدا یک فایل بنام index.html به وجود میاریم و کدهای زیر رو در اون قرار میدیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node (process.versions.node),
Chrome (process.versions.chrome),
and Electron (process.versions.electron).
</body>
</html>
یک فایل هم بنام main.js به وجود میاریم و کدهای زیر رو درونش قرار میدیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
'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 میتونین به‌روز رسانی برنامه‌های خودتون رو نیز مدیریت کنید.
https://www.aparat.com/v/ivj2c
