فریم ورک الکترون، تکنولوژی متن باز جدیدی برای ساخت نرم افزار های cross-platform و یا قابل اجرا در سیستم عامل های مختلفه. این فریم ورک با استفاده از زبان های HTML ، CSS و جاوا اسکریپت و همچنین بهره گیری از مرورگر کرومیوم میتونه نرم افزار دلخواه شما رو برای لینوکس، مک و یا ویندوز کامپایل و ترجمه کنه. تا حالا نرم افزار های زیادی توسط این فریم ورک تولید و عرضه شده است که از اونها میشه به ویرایشگر قدرتمند اتم اشاره کرد. همچنین شرکت های مطرحی مثل مایکروسافت هم برای نرم افزار های چند پلتفرمه خودشون مثل Microsoft Visual Studio Code در حال استفاده از این فریم ورک هستند. تو این مقاله میخوایم یه آشنایی مختصری با این فریم ورک داشته باشیم. توصیه میکنم برای ساخت نرم افزار دلخواه خودتون با این فریم ورک، از ویرایشگر اتم استفاده کنید. البته بدیهیه که اجباری توی این کار نیست.

 پیش نیاز ها


  • منابع

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

    منابع

  • اتم

    ویرایشگر اتم، یه ویرایش گر پیشرفته با قابلیت نصب پکیج و پوسته کاربرپسنده. شایان ذکره که این ویرایشگر هم توسط الکترون ساخته شده.

    دانلود اسناد

  • الکترون

    برای دانلود الکترون میتونید از دستورات npm و یا لینک زیر استفاده کنید. اگه از npm دانلود میکنید نگاهی به شروع با الکترون بندازید

    دانلود اسناد

شروع


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

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

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

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

محتوای جاوا اسکریپت:

var {app} = require('electron')  // کنترل هسته نرم افزار
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 وارد کنید.