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

ساخت اپلیکیشن‌های Cross Platform دسکتاپ با استفاده از چهارچوب الکترون
نرم افزارهای چند سکویی ( Cross Platform ) به اپلیکیشن‌هایی گفته می‌شود که در چندین سیستم عامل مختلف اجرا می‌شوند.  فریمورک الکترون  یکی از ابزارهایی است که امکان ایجاد این برنامه‌ها را برای برنامه‌نویسان فراهم می‌کند.  الکترون توسط گیت هاب ساخته شده و شرکت‌های بزرگی از آن برای  توسعه‌ی برنامه‌های دسکتاپ خود استفاده می‌کنند. به کمک این فریمورک می‌توانید برنامه‌های دسکتاپی خود را با استفاده از جاوا اسکریپت، HTML  و CSS توسعه دهید. نسخه‌ی Electron 1.0 بعد از دوسال و به تازگی توسط گیت هاب  عرضه شده است.
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
جای بروشور دیواری
خرید جای بروشور دیواری و رومیزی
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
تعمیر لوازم خانگی
تعمیر جاروبرقی، مایکروفر، بخارشوی، ظرفشویی، لباسشویی، سولاردام، کولرگازی
خودتان را اینجا معرفی کنید

الکترون متن باز بوده و قابلیت استفاده از کتابخانه‌های قدرتمندی مثل  Jqueryو  Bootstrap را داراست. شاید همین باعث شده تا مورد توجه بسیاری از برنامه‌نویسان قرار گیرد. برای مثال نرم‌افزارهایی مثل Opera  و Skype با این فریمورک نوشته شده‌اند.  
در این مطلب می‌خواهیم یک نرم افزار بسیار ساده را با استفاده از الکترون پیاده‌سازی کنیم. با ما همراه باشید.

نصب الکترون 

برای شروع کار اجازه دهید الکترون را با استفاده از دستورات npm نصب کنیم.
 
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

فایل app/css/index.css را ایجاد کرده و به آن استایل بدهید.

 

#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

کارشناس فناوری اطلاعات، مدیر محتوا و وبلاگ نویس حوزه‌ی فناوری

نظرات و سوالات کاربران

ارسال پاسخ رضا
رضا
دوشنبه ۱۱ بهمن ۱۳۹۵ ۱۲:۲۹
اسکایپ با الکترون نوشته نشده. بلکه با استفاده از C++ و Postgres که روی سرورهای دبیان اجرا میشه نوشته شده. قبل از کپی و ترجمه مطلب کمی تحقیق کنید بد نیست. از مجیدآنلاین بعیده واقعا
ارسال پاسخ سعید
سعید
دوشنبه ۲۴ آبان ۱۳۹۵ ۱۷:۰۰
اگر منظور از opera مرورگر اوپرا باشه که اوپرا سال 1995 توسعه داده شده که اون موقعه الکترونی وجود نداشت. الکترون که نام اصلی آن Atom Shell هست فریم ورکیه که توسط گیت هاب برای توسعه ویرایشگر Atom مورد استفاده قرار گرفت بعدها توسعه پیدا کرد که علاوه بر اتم فریم ورکی بشه که با استفاده از تکنولوژی های وب برنامه های دسکتاپی بسازه.
من به شخصه از اتم خوشم نمیاد سرعتش پایینه از جاوا اسکریپت هم خوشم نمیاد. برای توسعه برنامه های متولی پلتفرم دسکتاپ پایتون و پای کیوت رو ترجیح می دم.
ارسال پاسخ محسن
محسن
دوشنبه ۲۴ آبان ۱۳۹۵ ۰۹:۰۴
مرسی