شارك هذا المقال:
ان كنت تحب لغة جافاسكربت او تكرهها, لا يمكنك انكار حقيقة انها لغة اساسية في المجتمع البرمجي و لها استخدامات مهولة و يعود ذلك أساساً الى امكانية استخدامها في اي نوع من أنواع المشاريع طالما يمكنك محاكاة متصفح ويب في هذا المشروع - ك Web View في تطبيق أندرويد مثلاً - و مع اضافة NodeJs الى المعادلة, أصبحت جافاسكريبت لغة متعددة المهام و يمكن استخدامها حرفيا في كل شيئ, و في مقال اليوم سنضيف الى معلوماتك استخدام جديد لجافاسكريبت, و هو كيف يمكنك إنشاء تطبيقات سطح المكتب باستخدام تقنيات الويب.
سنستعرض في هذا المقال اطار عمل الكترون Electron , و هو اطار عمل لجافاسكريبت يستخدم في انشاء تطبيقات سطح المكتب باستخدام تقنيات الويب! تخيل ان تقوم ببناء تطبيق كامل باستخدام اللغات الأشهر في عالم الويب (HTML, CSS, Javascript), يمكنك ذلك الآن!
الكترون Electron هو اطار عمل مجاني و مفتوح المصدر يتم تطويره بواسطة Github __ ويكيبيديا
الكترون Electron هو اطار عمل مفتوح المصدر, مطور بواسطة شركة Github يساعدك على بناء تطبيقات سطح المكتب باستخدام تقنيات الويب, حيث يمكنك انشاء تطبيقات ل Windows, MacOS, Linux دفعة واحدة باستخدام كود موحد مع اختلافات بسيطة حسب نظام التشغيل الأمر الذي يوفر عليك وقت و تكلفة كبيرة لانشاء تطبيقك! تم انشاء الكترون Electron في البداية من أجل مشروع محرر الأكواد Atom الخاص بشركة Github أيضاً, لكنه تحول تباعاً الى اطار عمل متكامل بسبب بنيته و كونه مفتوح المصدر, مما ساعد الكثير من المطورين العمل معاً على انشاء اطار عمل جديد و عظيم, يمكنك استعراض الكود الخاص بالكترون Electron على Github من الرابط التالي: https://github.com/electron
اطار عمل الكترون Electron مبني على محرك Chromium و NodeJs, و تم كتابته بلغة C++, Objective C, JavaScript في الأساس و منشور تحت رخصة MIT, يتم تحديث الكترون Electron بشكل دوري و تم اصدار اخر نسخة مستقرة منه بتاريخ 26-09-2022 و هي النسخة 21, يتيمز بتوثيق Documentation سهل و بسيط و منحنى تعلم سهل حيث يمكنك البدء في انشاء تطبيق جديد بمجرد تعلمك لتقنيات الويب الأساسية!
يعمل الكترون Electron في الأساس عبر تضمين محرك Chromium و NodeJs ضمن ملفاته المصدرية, فيقوم بعرض صفحة ويب كأنها تطبيق سطح مكتب عادي, بهذه الطريقة كل ما عليك كمبرمج هو الاهتمام بكود جافاسكريبت واحد دون الحاجة لتعلم اي مهارات في اللغات الاساسية لنظام التشغيل مثل C, C++ و غيرها,الكترون Electron يقوم بهذه المهمة بدلاً عنك!
و لنأخذ مثال سريع عن عملية تنفيذ برنامج مبني بالكترون Electron:
عند تشغيل البرنامج, يبحث الكترون Electron عن الملف الأساسي للمشروع الذي تقوم بتعيينه في ملف package.json و غالباً ما يتم استخدام index.js او main.js و يقوم بتنفيذه عبر NodeJs Runtime و محرك Chromuim, في هذه المرحلة يتم انشاء العملية الأساسية Main Process التي تقوم باظهار التطبيق و تعمل على التفاعل بين ال Native GUI الخاص بنظام التشغيل و برنامجك.
لنقم بانشاء برنامج بسيط باستخدام الكترون Electron! برنامجنا سيقوم بعرض الرسالة الشهيرة "Hello World" على الشاشة, لنبدأ:
سنقوم بانشاء مجلد المشروع على سطح المكتب و ليكن اسمه my-electron-app , لنبدأ بفتح برنامج سطر الأوامر Terminal و التوجه الى سطح المكتب عبر الأمر cd
cd your-desktop-path
mkdir my-electron-app
cd my-electron-appالآن, سنقوم بتجهيز مشروع جافاسكريبت جديد عبر npm, تأكد من وجود NodeJs و npm على جهازك لتفادي أي خطأ
npm initسيطرح عليك npm مجموعة من الأسئلة, يمكنك اختيار الاجابات المناسبة لك, يمكنك تغييرها لاحقاً من ملف package.json
الآن بعد أن قمنا بتجهيز المشروع, لنبدأ في تنصيب Electron, ضمن مجلد المشروع قم بكتابة الأمر التالي عبر سطر الأوامر:
npm install electron --save-devسيقوم الآن npm بتنزيل Electron و اضافته الى مشروعك كحزمة تطوير فقط لأننا استخدمنا --save-dev
بعد ان قمنا بتنصيب Electron بنجاح, سنقوم بكتابة سطر يعرض جملة "Hello World" على الشاشة, قم بانشاء ملف index.html و اكتب فيه الكود التالي:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<meta
http-equiv="X-Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<title>Hello from Electron renderer!</title>
</head>
<body>
<h1>Hello from Electron renderer!</h1>
<p>?</p>
</body>
</html>كما تلاحظ هو مجرد كود HTML عادي, لكنه سيظهر على انه برنامج سطح مكتب! لنتابع
في ملف main.js او index.js قم بكتابة الكود التالي:
يتم تحديد اسم الملف بناء على اختيارك أثناء تنصيب المشروع, لمعرفة الاسم قم بفتح ملف package.json, اسم الملف هو قيمة "main" و هو الملف الرئيسي للمشروع
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})كل شيئ جاهز الآن! الخطوة الأخيرة هي انشاء أمر command لتشغيل التطبيق, يمكننا عمل ذلك في ملف package.json, سنقوم باضافة سكربت جديد باسم start و قيمة electron .
{
"name": "hello-world-electron",
"version": "1.0.0",
"description": "Some cool electron app",
"main": "main.js",
"scripts": {
"start": "electron ." // Add this
},
"author": "@naqrah",
"license": "MIT",
"devDependencies": {
"electron": "^21.2.2"
}
}تم بنجاح! التطبيق الآن جاهز, يمكن عرض تطبيقك عبر كتابة الأمر التالي في سطر الأوامر
npm run startالنتيجة النهائية:
قد يعتبر البعض ان عملية انشاء برامج هجينة أمر غير عملي بالنسبة للتطبيقات الكبيرة, و على الرغم من حقيقة هذه الجملة نظرياً الا ان عمليا أثبت الكترون Electron قدرته على انشاء برامج ضخمة و معقدة, لنستعرض بعض هذه البرامج:
Slack هو منصة تواصل شبيهة ب Discord تتكون من غرف محادثات خاصة و محادثات مباشرة بين الأشخاص, تم بناء تطبيق سطح المكتب الخاص بهم باستخدام Electron
نسخة واتساب من سطح المكتب تم بنائها باستخدام Electron
محرر الأكواد الشهير Atom تم بنائه باستخدام Electron, و من المؤسف ان المشروع تم ايقافه بواسطة Github في نهاية عام 2022
محرر الأكواد الأشهر بين المبرمجين المقدم من مايكروسوفت, تم اطلاقه عام 2015
منصة بث الألعاب الشهيرة Twitch قامت باطلاق تطبيقها لسطح المكتب باستخدام Electron
نجد بوضوح في الأمثلة السابقة أنواع تطبيقات كثيرة, و هو ما يوضح لنا مرونة Electron و قدرته على التعامل مع انوع مختلفة من الاحتياجات, و من بعض الأمثلة الجديرة بالذكر أيضاً تطبيقات Skype, WordPress, Microsoft Teams, WebTorrent
يمكنك تعلم الكترون Electron عبر تعلم تقنيات الويب, عليك بالبدء بتعلم Html, Css و من ثم تعلم لغة جافاسكريبت, يمكنك البدء بدورة تطوير التطبيقات باستخدام لغة JavaScript لتعلم جافاسكريبت و تطبيقاتها الكثيرة و من ضمنها Electron! كما ستجد الكثير من المعلومات القيمة على التوثيق Documentation الرسمي الخاص بالكترون Electron يمكنك الوصول اليه عبر الرابط التالي: https://www.electronjs.org/docs/latest
