در این مطلب میخوام بصورت مقدماتی کار با 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 میشه و در محل مورد نظر قرار میگیره. بعد از پایان با استفاده از وارد دایرکتوری ساخته شده بشید و دستور npm install رو بزنید تا بسته‌های مربوط به اون نصب بشه و در پایان نیز با استفاده از npm start برنامه رو اجرا کنید تا نرم‌افزار باز بشه و بتونین Demoها رو مشاهده کنید.
ساخت اولین برنامه ساده با Electron
در ابتدا یک دایرکتوری بنام electron-app در Desktop بسازید و وارد اون بشید و در command line دستور yarn init رو اجرا کنید تا package.json برای شما به وجود بیاد. یک ویژگی scripts هم قرار میدیم تا در اون npm scriptهای مورد نظرمون رو قرار بدیم. با استفاده از دستور هم 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 رو مطالعه کنید.
من مطلب رو خوندم و دو تا مورد رو میخواستم بپرسیم.اگه امکان داشته باشه ؟
سلام ببخشید اون وقت این فریمورک میتونه جای C# را برای توسعه نرم افزار دسکتاپ بگیره یعنی در حد زبان های C++ و C# قدرتمند هست؟
سلام. خیر هنوز در حد زبان های مورد نظر شما قدرتمند نیست.
با تشکر از مطلب خوبتون از نقش مارکت هم دیدن کنید
عالی بود
بسیار عالی
خیلی بینظیر و عالی
بی نظری و تخصصی
سلام خیلی هم عالی از سایت اخوان سنتر هم دیدن کنید
خیلی خوب بود و استفاده کردیم
عالی