كيفية صناعة تطبيقات الكمبيوتر بتقنيات الويب, تعرف على Electron

كيفية صناعة تطبيقات الكمبيوتر بتقنيات الويب, تعرف على Electron

شارك هذا المقال:



ان كنت تحب لغة جافاسكربت او تكرهها, لا يمكنك انكار حقيقة انها لغة اساسية في المجتمع البرمجي و لها استخدامات مهولة و يعود ذلك أساساً الى امكانية استخدامها في اي نوع من أنواع المشاريع طالما يمكنك محاكاة متصفح ويب في هذا المشروع - ك Web View في تطبيق أندرويد مثلاً - و مع اضافة NodeJs الى المعادلة, أصبحت جافاسكريبت لغة متعددة المهام و يمكن استخدامها حرفيا في كل شيئ, و في مقال اليوم سنضيف الى معلوماتك استخدام جديد لجافاسكريبت, و هو كيف يمكنك إنشاء تطبيقات سطح المكتب باستخدام تقنيات الويب.

سنستعرض في هذا المقال اطار عمل الكترون Electron , و هو اطار عمل لجافاسكريبت يستخدم في انشاء تطبيقات سطح المكتب باستخدام تقنيات الويب! تخيل ان تقوم ببناء تطبيق كامل باستخدام اللغات الأشهر في عالم الويب (HTML, CSS, Javascript), يمكنك ذلك الآن!

ماهو الكترون Electron

الكترون 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 ؟

يعمل الكترون Electron في الأساس عبر تضمين محرك Chromium و NodeJs ضمن ملفاته المصدرية, فيقوم بعرض صفحة ويب كأنها تطبيق سطح مكتب عادي, بهذه الطريقة كل ما عليك كمبرمج هو الاهتمام بكود جافاسكريبت واحد دون الحاجة لتعلم اي مهارات في اللغات الاساسية لنظام التشغيل مثل C, C++ و غيرها,الكترون Electron يقوم بهذه المهمة بدلاً عنك!

و لنأخذ مثال سريع عن عملية تنفيذ برنامج مبني بالكترون Electron: 

عند تشغيل البرنامج, يبحث الكترون Electron عن الملف الأساسي للمشروع الذي تقوم بتعيينه في ملف package.json و غالباً ما يتم استخدام index.js او main.js و يقوم بتنفيذه عبر NodeJs Runtime و محرك Chromuim, في هذه المرحلة يتم انشاء العملية الأساسية Main Process التي تقوم باظهار التطبيق و تعمل على التفاعل بين ال Native GUI الخاص بنظام التشغيل و برنامجك.

انشاء برنامج بسيط باستخدام الكترون Electron

لنقم بانشاء برنامج بسيط باستخدام الكترون Electron! برنامجنا سيقوم بعرض الرسالة الشهيرة "Hello World" على الشاشة, لنبدأ:

1- تجهيز المشروع

سنقوم بانشاء مجلد المشروع على سطح المكتب و ليكن اسمه 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

2- تنصيب Electron في المشروع

الآن بعد أن قمنا بتجهيز المشروع, لنبدأ في تنصيب Electron, ضمن مجلد المشروع قم بكتابة الأمر التالي عبر سطر الأوامر:

npm install electron --save-dev

سيقوم الآن npm بتنزيل Electron و اضافته الى مشروعك كحزمة تطوير فقط لأننا استخدمنا --save-dev

3- اظهار نص Hello World

بعد ان قمنا بتنصيب 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

قد يعتبر البعض ان عملية انشاء برامج هجينة أمر غير عملي بالنسبة للتطبيقات الكبيرة, و على الرغم من حقيقة هذه الجملة نظرياً الا ان عمليا أثبت الكترون Electron قدرته على انشاء برامج ضخمة و معقدة, لنستعرض بعض هذه البرامج:

Slack

Slack هو منصة تواصل شبيهة ب Discord تتكون من غرف محادثات خاصة و محادثات مباشرة بين الأشخاص, تم بناء تطبيق سطح المكتب الخاص بهم باستخدام Electron

Whatsapp

نسخة واتساب من سطح المكتب تم بنائها باستخدام Electron

Atom

محرر الأكواد الشهير Atom تم بنائه باستخدام Electron, و من المؤسف ان المشروع تم ايقافه بواسطة Github في نهاية عام 2022

VS Code

محرر الأكواد الأشهر بين المبرمجين المقدم من مايكروسوفت, تم اطلاقه عام 2015

Twitch

منصة بث الألعاب الشهيرة Twitch قامت باطلاق تطبيقها لسطح المكتب باستخدام Electron

نجد بوضوح في الأمثلة السابقة أنواع تطبيقات كثيرة, و هو ما يوضح لنا مرونة Electron و قدرته على التعامل مع انوع مختلفة من الاحتياجات, و من بعض الأمثلة الجديرة بالذكر أيضاً تطبيقات Skype, WordPress, Microsoft Teams, WebTorrent

كيف اتعلم الكترون Electron؟

يمكنك تعلم الكترون Electron عبر تعلم تقنيات الويب, عليك بالبدء بتعلم Html, Css و من ثم تعلم لغة جافاسكريبت, يمكنك البدء بدورة تطوير التطبيقات باستخدام لغة JavaScript لتعلم جافاسكريبت و تطبيقاتها الكثيرة و من ضمنها Electron! كما ستجد الكثير من المعلومات القيمة على التوثيق Documentation الرسمي الخاص بالكترون Electron يمكنك الوصول اليه عبر الرابط التالي: https://www.electronjs.org/docs/latest



ما رأيك في هذا المقال؟

كيف تقييم نوعية المحتوى في نقرة؟

5 4 3 2 1