الکترون، فریم ورکی برای تمام پلتفرم ها

زمانی بود که هر پلتفرم زبان‌های برنامه‌نویسی مخصوص خودش را داشت، اما زبان پدر همه‌ی آن‌ها C بود که C نیز سختی‌های خودش رو داشت، مثل Build در سیستم‌عامل‌ها و معماری‌های مختلف اما با معرفی NodeJS ماجرا کمی تغییر کرد و توسعه‌دهنده با نوشتن JavaScript و HTML و CSS می‌تواند برنامه را در اکثر پلتفرم‌ها منتشر و اجرا کند. از اولین ابزارهای Cross-Platform تحت NodeJs از گروه آپاچی بود که Cordova نام داشت و به توسعه‌دهندگان این امکان را می‌داد که با نوشتن HTML, CSS و JavaScript اپلیکیشن موبایل خود را برای پلتفرم‌های Android, iOS و Blackberry و بعداً هم Windows Phone منتشر کنند. Cordova با ابزارهایی مثل Ionic و PhoneGap از Adobe تکمیل‌تر شد.الکترون، فریم ورکی برای تمام پلتفرم ها 

ابزارهای دیگری هم مثل Gulp و Express هم NodeJS را بسیار محبوب کردند. به جرعت می‌توان گفت که ناد توانست جای خودش رو به خوبی تو دل توسعه‌دهنده‌ها جا کند.

GitHub هم از قافله عقب نموند و ادیتور خودش با نام Atom رو تحت NodeJS و Chromium منتشر کرد. امسال هم Atom را Cross-Platform کرد و یک فریم‌ورک برای ساختن اپلیکیشن‌های PC و مک با نام Electron عرضه کرد و به شما این امکان رو میده که با نوشتن جاوااسکریپت، اپلیکیشنتون رو روی Windows، مک و لینوکس داشته باشید. همچنین میتونید از Native APIهایی مثل Tray یا Notification هم استفاده کنید.
فریم ورک الکترون، تکنولوژی متن باز جدیدی برای ساخت نرم افزار های cross-platform و یا قابل اجرا در سیستم عامل های مختلفه. این فریم ورک با استفاده از زبان های HTML ، CSS و جاوا اسکریپت و همچنین بهره گیری از مرورگر کرومیوم میتونه نرم افزار دلخواه شما رو برای لینوکس، مک و یا ویندوز کامپایل و ترجمه کنه. تا حالا نرم افزار های زیادی توسط این فریم ورک تولید و عرضه شده است که از اونها میشه به ویرایشگر قدرتمند اتم اشاره کرد. همچنین شرکت های مطرحی مثل مایکروسافت هم برای نرم افزار های Universal خودشون مثل Microsoft Visual Studio Code در حال استفاده از این فریم ورک هستند. تو این مقاله میخوایم یه آشنایی مختصری با این فریم ورک داشته باشیم. توصیه میکنم برای ساخت نرم افزار دلخواه خودتون با این فریم ورک، از ویرایشگر اتم استفاده کنید. البته بدیهیه که اجباری توی این کار نیست.

شروع

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

  • package.json
  • main.js
  • index.html

به طور پیشفرض میتونید از محتوا های زیر برای فایل ها استفاده کنید. فایل شناسایی پکیج ها به نرم افزار (package.json):

{
 "name" : "your-app",
 "version" : "0.1.0",
 "main" : "main.js"
}

محتوای جاوا اسکریپت(main.js):

var app = require('app');  // کنترل هسته نرم افزار
var BrowserWindow = require('browser-window');  // ساخت پنجره نرم افزار

// گزارش سقوط نرم افزار
require('crash-reporter').start();

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is GCed.
var mainWindow = null;

// دستورات مربوط به خروج نرم افزار پس از بسته شدن تمامی پنجره ها
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();
  }
});

// این متد بعد از اینکه الکترون فراخوانی شود اجرا میشود
// initialization and is ready to create browser windows.
app.on('ready', function() {
  // ساخت پنجره نرم افزار
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // لود کردن فایل اچ تی ام ال و طراحی رابط کاربری نرم افزار
  mainWindow.loadUrl('file://' + __dirname + '/index.html');

  // دستور زیر ابزار های توسعه را برای نرم افزار فعال میکند. رفع مشکل طراحی
  // و دیباگ کردن اسکریپت ها را قبل از انتشار نرم افزار به این بخش بسپارید
  // mainWindow.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;
  });
});

فایل اچ تی ام ال شما هم میتونه چیزی شبیه این باشه:

<!DOCTYPE html>
<html> 
  <head>
    <title>Hello World!</title>
  </head>
  <body>

<h1>Hello World!</h1>

    We are using io.js <script>document.write(process.version)</script>
    and Electron <script>document.write(process.versions['electron'])</script>.
  </body>
</html>

بعد از ساخت فایل ها هم پوشه پروژتون رو داخل فریم ورک الکترون بکشید تا اجرا بشه.

برای اطلاعات بیشتر و شخصی سازی نرم افزار به بخش اسناد الکترون مراجعه کنید. به طور مثال اگه میخواید پنجره نرم افزار توسط کاربر تغییر اندازه داده نشه کافیه تکه کد

resize: false

رو به بخش تنظیمات پنجره توی فایل main.js وارد کنید.

منابع: + + + + +