تحدثنا في مقالات سابقة على مدونة توتومينا عن كون لغة جافاسكريبت واحدة من أكثر اللغات التي تتعدد مجالات استخدامها، ولم تعد المتصفحات المكان الوحيد الذي تشتغل فيه. لقد بات بإمكاننا تطوير خوادم الويب وتطبيقات الهواتف الذكية بالجافاسكريبت ولكن ما لا يعلمه الكثيرون ربما أننا نستطيع كذلك تطوير تطبيقات سطح المكتب بواسطة هذه اللغة، وهذا بالضبط ما يفعله إطار العمل إلكترون (Electron).
إلكترون هو مشروع مجاني مفتوح المصدر تم تطويره من طرف شركة Github لبناء تطبيقات سطح المكتب عابرة للمنصات (Cross-platform) باستخدام تقنيات الويب : جافاسكريبت، HTML و CSS.
يحظى هذا الإطار بشعبية كبيرة ويعتبر من أشهر المشاريع على منصة Github، وتمت الإستعانة به في عدد من أقوى التطبيقات مثل :

• Slack
• Visual Studio Code
• محرر Atom
• Discord
• Microsoft Teams

تم إطلاق مشروع إلكترون لأول مرة عام 2014 تحت مسمى Atom Shell قبل أن يتم تغييره لإسمه الحالي في العام الموالي.
البنية التحتية لإطار العمل إلكترون

يعتمد إلكترون على مكتبة العرض (Rendering library) الخاصة بمشروع Chromium ـ الأخير عبارة عن نسخة مفتوحة المصدر لمتصفح Google Chrome ـ وكذلك بيئة التشغيل Node.js من أجل التمكن من الوصول لموارد ونظام الملفات الخاصين بالحاسب.
يمثل Chromium الواجهة الأمامية في تطبيقات إلكترون، بينما الواجهة الخلفية ممثلة ب Node.js وكلا التقنيتين تعتمدان على المحرك V8 لمعالجة وقراءة أكواد الجافاسكريبت بسرعة فائقة.
هذه المعطيات تعني أن كلما طرأ تحسين على أداء محرك الجافاسكريبت V8 (من Google) كلما كان ذلك في صالح تطبيقات إلكترون، حيث يتحسن أداؤها وسرعتها هي الأخرى. استخدام مكتبة العرض فقط من مشروع كروميوم ـ عوض الإستعانة بالمشروع كاملا ـ يعني كذلك أن مطوري Electron سيتمكنون من تحديث كروميوم بسهولة أكثر. إلا أن هذا، في الجهة المقابلة، سيعني بأنه لن يكون بالإمكان الوصول لجميع وظائف ومزايا متصفح كروم من خلال تطبيقات إلكترون.
إنشاء أول تطبيق بواسطة إطار العمل Electron

أولا لنقم بإنشاء مجلد جديد اسمه electron-app على سبيل المثال، ثم ندخل إليه من خلال نافذة الأوامر السطرية وننفذ الأمر التالي :
npm init
1

npm init



بعد تنفيذ هذا الأمر سيقوم مدير الحزم npm بتوليد ملف package.json الذي عهدناه في تطبيقات Node.js :
{ "name": "electron-app", "version": "1.0.0", "main": "index.js" }
1
2
3
4
5

{
"name": "electron-app",
"version": "1.0.0",
"main": "index.js"
}



ثم نقوم بإضافة سكريبت npm جديد نسميه مثلا start ليقوم بتشغيل تطبيق إلكترون، وتصبح بالتالي هيئة ملف package.json على هذا النحو :
{ "name": "electron-app", "version": "1.0.0", "main": "index.js", "scripts": { "start": "electron ." } }
1
2
3
4
5
6
7
8

{
"name": "electron-app",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "electron ."
}
}



لن نقوم بتنفيذ الأمر npm start الآن، سيكون علينا أولا تحميل وتثبيت إطار العمل إلكترون في مشروعنا وإلا فإن الأمر . electron لن يعمل بطبيعة الحال
تحميل إلكترون

هناك عدة طرق لتركيب إلكترون، ولكن الطريقة الموصى بها هي تحميله على شكل تبعية npm خاصة بمرحلة التطوير لمشروعنا.
npm install --save-dev electron
1

npm install --save-dev electron



بعد نهاية تحميل حزمة إلكترون، سنقوم بإنشاء الملف index.html الذي سيتم عرضه كواجهة مستخدم.
بعد إنشاء هذا الملف ستكون بنية مشروعنا على هذا الشكل :

هذه أبسط بنية لمشروع إلكترون.
يهمنا في هذا الدرس ملفين اثنين فقط : index.js و index.html.
لنفتح ملف index.js ونضع فيه هذا الكود :
const { app, BrowserWindow } = require('electron') const path = require('path') const url = require('url') app.on('ready', () => { // إنشاء نافذة طولها 800 وعرضها 600. const win = new BrowserWindow({ width: 800, height: 600 }) // تحميل واستدعاء الملف index.html win.loadURL( url.format({ pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true }) ) })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')

app.on('ready', () => {
// إنشاء نافذة طولها 800 وعرضها 600.
const win = new BrowserWindow({ width: 800, height: 600 })

// تحميل واستدعاء الملف index.html
win.loadURL(
url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
})
)
})



يتم تطوير تطبيقات إلكترون بنفس الطريقة وباتباع نفس المبادئ التي ألفناها في Node.js.
جميع الوظائف والواجهات البرمجية لإطار العمل إلكترون (BorwserWindow مثلا) يمكن الوصول إليها من خلال الوحدة electron.
يمثل الملف index.js عقل التطبيق والمكان الذي تنطلق وتدار منه العمليات المنطقية الخاصة به.
باقي الأسطر أظنها واضحة للجميع، حيث قمنا بإنشاء نافذة (نافذة متصفح كروميوم ) عرضها 800 وطولها 600، ثم طلبنا من هذه النافذة أن تقوم بتحميل الملف index.html الذي أنشأناه فيما سبق ومن ثم عرض محتواه.
محتوى الملف index.html سيكون شيئا بسيطا للغاية، رسالة Hello World مثلا
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Electron app</title> </head> <body> <h1>Hello World!</h1> </body> </html>
1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron app</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>



والآن بإمكاننا تشغيل التطبيق ورؤية نتيجة عملنا وذلك عن طريق تنفيذ الأمر :
npm start
1

npm start




نافذة أفضل ما يقال عنها أنها بسيطة
يمكننا إضافة تنسيقات للبرنامج عن طريق CSS كما نفعل دائما في تطبيقات الويب، ليس هناك جديد يذكر.