ساخت اپلیکیشن‌های Cross Platform دسکتاپ با استفاده از چهارچوب الکترون

نصب الکترون 

npm install electron-prebuilt -g

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

 
برای پیاده‌سازی یک پروژه با استفاده از الکترون به سه فایل زیر نیاز دارید:
package.json: برای لیست کردن وابستگی‌ها، ابرداده و فایل های مورد نیاز.
main.js: شروع کار اپلیکیشن و ایجاد صفحه‌ی مرورگر.
index.html: ایجاد یک صفحه‌ی وب به صورت پیش فرض.




در این مثال یک برنامه  ساده ایجاد می‌شود که به API MARVEL متصل شده و 25 کلمه را به همراه یک تصویر کوچک از آن‌ها نمایش می‌دهد. این برنامه دارای یک سیستم اطلاع رسانی برای زمانی است که فرآیند کامل شده است. کاربر نهایی سورس کد برنامه را نخواهد دید. 
فایل نهایی پروژه را می‌توانید در گیت هاب مشاهده کنید.
فایل package.json را باز کرده و کد زیر را به آن اضافه کنید:
 

{
  "name": "hero-browser",
  "version": "0.1.0",
  "main": "main.js",
  "dependencies": {
    "dotenv": "^2.0.0",
    "md5": "^2.1.0"
  }
}

فایل package.json کاملا استاندارد است و از همان فرمت و تنظیمات node.js پیروی می‌کند. در این قطعه کد نام برنامه، نسخه، فایل اصلی جاوا اسکریپت و وابستگی های آن مشخص می‌شوند.  بعد از اینکه این قطعه کد را اضافه نمودید، فایل نصب npm را اجرا کنید.
فایل main.js ارتباط میان سیستم عامل و کد های جاوا اسکریپت شما را فراهم می‌سازد. در این مطلب تنها یک مثال ساده برای استفاده از الکترون بیان شده است. پروژه‌های بسیاری را می‌توانید با استفاده از ابزار الکترون پیاده‌سازی کنید.
اجازه دهید الزامات مورد نیاز خود را راه اندازی کنیم. در قطعه کد زیر اولین خط، نیاز ما را به کتابخانه و شی الکترون فراهم می‌کند. سپس دو شی app و BrowserWindow را می‌سازیم. شی app برای کنترل چرخه‌ی زندگی اپلیکیشن تعریف شده است. شی BrowserWindow  نیز می‌تواند یک نمونه پنجره‌ی جدید را ایجاد کند.
 

'use strict';
const electron = require('electron');
const app = electron.app;  // Module to control application life.
const BrowserWindow = electron.BrowserWindow;  // Module to create native browser window.
var mainWindow = null;

دستورات زیر مربوط به خروج نرم افزار پس از بسته شدن تمامی پنجره‌ها می‌باشد. در واقع app.quit باعث اتمام برنامه می‌شود. 
 

app.on('window-all-closed', function() {
    if (process.platform != 'darwin') {
        app.quit();
    }
});

زمانیکه برنامه اماده‌ی بارگذاری است، متدی را تعریف می‌کنیم که در آن یک پنجره‌ی با پهنای 800 در 600 پیکسل، ساخته می‌شود. این پنجره، پنجره‌ی اصلی برنامه‌ی ماست. با متد loadURL به راحتی می‌توانیم یک صفحه‌ی وب را از روی سیستم فراخوانی کنیم.
 

app.on('ready', function() {
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL('file://' + __dirname + '/app/index.html');

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

فایل HTML خود را بسازید:
 

html
head
    meta charset="UTF-8"
    title Marvel Super Hero Browser title
    link href="css/index.css" rel="stylesheet" type="text/css"/
head
body
    h1 Marvel Super Hero Browser h1
    em Thanks to Marvel for their API em

    div id="character_list" div

    script src="js/index.js" script
body
html

#character_list .character img {
    width: 100px;
}

.character {
    float: left;
    padding: 25px;
    max-width: 100px;
}

فایل app/js/index.js را ایجاد کنید. بسیاری از قابلیت های نرم افزار در این بخش پیاده سازی خواهد شد. کار را با مقدار دهی به وابستگی و متغیرهای مورد نیاز شروع کنید. 
 

'use strict';

require('dotenv').config();
var md5 = require('md5');
var publicKey = process.env.MARVEL_PUBLIC_KEY;
var privateKey = process.env.MARVEL_PRIVATE_KEY;
var ts = String(new Date().getTime());
var hash = md5(ts+privateKey+publicKey);

var url = `https://gateway.marvel.com/v1/public/characters?
ts=${ts}&apikey=${publicKey}&hash=${hash}&limit=25`;

API Marvel یک API جالب می‌باشد ولی بعضی از سیستم‌های احراز هویت ها و ساختار داده‌ای آن پیچیده است. برای استفاده از این API باید در marvel ثبت نام کرده و دستورالعمل‌های خاصی را دنبال کنید.  کلید های عمومی و خصوصی مورد نیاز در فایل .env قرار دارند. 
 

MARVEL_PRIVATE_KEY=private_key
MARVEL_PUBLIC_KEY=public_key

اگر نمی‌خواهید با سیستم شناسایی مارول درگیر شوید، می‌توانید یک فایل json با قطعه کد زیر ایجاد نمایید:
 

'use strict';
var url = `https://gist.githubusercontent.com/ChrisChinchilla/29486e8ce367f426dfe6b15dbcc3fa54/raw/3ea92af51ce3749bb5983c1cb0359883592daef6/Marvel%2520Electron%2520Data`;

سپس فایل های HTML و متغیرهای مورد نیاز خود را در character_list  ایجاد نمایید.
 

var characterHTML = (character)=> `
  div class="character"
    h2 ${character.name} h2
    img src="${character.thumbnail.path}.${character.thumbnail.extension}"
  div`;

یک تماس با API برقرار کنید. عناصر HTML را برای هر عنصر ایجاد کرده و به character_list اضافه نمایید. تصاویر موجود در API با یک نام و پسوند از هم جداسازی شده اند.
اگر هیچ تصویری در دسترس نباشد، پیغام"هیچ تصویری در دسترس نیست" نمایش داده خواهد شد که البته در این مثال پیاده‌سازی نشده است.
 

fetch(url)
    .then(resp => resp.json())
    .then(json => json.data.results)
    .then(characters => {
        var html = characters.map(characterHTML).join('');
        var characterList = document.getElementById("character_list");
        characterList.innerHTML = html;

        new Notification(document.title, {
            body: 'Super Heroes Loaded!'
        });
    })
    .catch((error)=> {
        console.error(error);
    });

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

electron .

بسته بندی نرم افزار

electron-packager به شما کمک می‌کند تا بسته بندی راحت‌تری داشته باشید.  برای نصب این ابزار از دستور زیر استفاده کنید. برای اجرای دستور نیز کافی است عبارت electron-packager  را تایپ نمایید.
 

npm install -g electron-packager

در فرآیند تبدیل به فایل‌های اجرایی باید قطعه کد زیر را در دستورات خود استفاده کنید. در اولین فلگ پلت فرم مورد نظر خود را مشخص کنید. فلگ بعدی معماری سیستم عامل را نشان می‌دهد که برای سیستم‌های 32 بیتی مقدار ia32 و برای سیستم‌های 64 بیتی مقدار x64 می‌باشد. هر عبارت را با" , " از هم جدا کنید.
 

electron-packager /Users/chrisward/Workspace/sp_electron MarvelBrowse --platform=darwin --arch=x64 --version=0.36.10 --out=/Users/chrisward/Workspace --overwrite --icon=/Users/chrisward/Workspace/sp_electron/marvel-app.icns

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

electron-packager . --all

منبع: sitepoint