مقدمة في الإلكترون

تعرف على أساسيات Electron ، وهو الإطار الذي أنشأته GitHub والذي يدعم الكثير من التطبيقات المبتكرة والشائعة جدًا عبر الأنظمة الأساسية

الإلكترون هو أداة مفتوحة المصدر ومجانية للبناءتطبيقات سطح المكتب عبر الأنظمة الأساسيةباستخدام JS و HTML و CSS ، تم إنشاؤه بواسطة GitHub

إنها تطبيقات شائعة جدًا وناجحة للغاية تستخدمها ، بما في ذلك VS Code و Slack و Discord وغيرها الكثير.

Electron هو مشروع ضخم أحدث ثورة في تطوير تطبيقات سطح المكتب الأصلية ، من خلال جعلها عملية قائمة على JavaScript قابلة للتطبيق.

ضع في اعتبارك: كان من الممكن كتابة تطبيقات سطح المكتب القائمة على JavaScript حتى قبل Electron ، باستخدام أدوات أخرى ، لكن Electron جعلها أكثر شيوعًا.

وعلى وجه الخصوص سمح Electron بإنشاء تطبيقات سطح مكتب عبر الأنظمة الأساسية. من قبل ، لم تكن هناك أداة تسمح لك بتشغيل نفس التطبيق في كل مكان.

حتى عام 2014 ، عندما تم إصدار إلكترون.

نظرة سريعة على الأجزاء الداخلية للإلكترون

تقوم Electron بشكل أساسي بتجميع مكتبة عرض Chromium و Node.js (Chromium هو مشروع مفتوح المصدر تم إنشاؤه بواسطة Google ، والذي قاموا ببناء متصفح Chrome عليه).

لديكما حق الوصول إلى لوحة قماشية مدعومة من Chromium ، والتي تقوم بتشغيل محرك V8 JavaScript ، واستخدام أي حزمة Node.js ، وتشغيل كود Node.js الخاص بك.

إنه نوع من Node.js لسطح المكتب ، إذا كنت ترغب في ذلك. لا يوفر أي نوع من عناصر واجهة المستخدم الرسومية ، ولكنه يتيح لك إنشاء واجهات مستخدم باستخدام HTML و CSS و JavaScript.

يهدف Electron إلى أن يكون سريعًا وصغير الحجم ونحيفًا قدر الإمكان ، مع توفير الميزات الأساسية التي يمكن لجميع التطبيقات الاعتماد عليها.

ما نوع التطبيقات التي يمكنك إنشاؤها باستخدام Electron

يمكنك إنشاء العديد من أنواع التطبيقات المختلفة ، بما في ذلك:

  • تطبيقات عادية ، برمز إرساء ونافذة
  • تطبيقات شريط القوائم ، التي لا تحتوي على أي رمز إرساء
  • شياطين
  • أدوات سطر الأوامر

تتوفر مجموعة جيدة من تطبيقات Electron على الموقع الرسمي:https://electronjs.org/apps. باستخدام Electron ، يمكنك إنشاء تطبيقات ونشرها على Windows و Mac App Store.

التطبيق Electron APIs

أنت تستطيعقم بتنزيل تطبيق Electron API Demos، وهو نموذج رسمي لتطبيق سطح المكتب تم إنشاؤه باستخدام Electron.

Electron app demo

التطبيق رائع جدًا ويتيح لك تجربة العديد من ميزات Electron. إنه مفتوح المصدر ، والرمز متاح فيhttps://github.com/electron/electron-quick-start.

Electron app demo

كيفية إنشاء أول تطبيق الكترون خاص بك

أولاً ، قم بإنشاء مجلد جديد على نظام الملفات الخاص بك وتشغيله:

npm init -y

لخلقpackage.jsonملف:

{
  "name": "testelectron",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

أضف هذا السطر في ملفscriptsالجزء:

"scripts": {
  "start": "electron ."
}

الآن قم بتثبيت Electron:

npm install -D electron

يمكن الآن بدء الإلكترون بـ

npm start

ومع ذلك ، إذا قمت بذلك ، فسترى خطأ يخبرك بأنه لا يوجدindex.jsالملف ، وهو ما كتبناه في ملفpackage.jsonالملف ليكون نقطة البداية الرئيسية لتطبيقنا:

تطبيق واجهة المستخدم الرسومية الإلكترونية Hello World Electron!

لنقم بإنشاء تطبيق يعرض Hello World في نافذة.

إنشاء ملفين ،main.js:

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

function createWindow() { // Create the browser window. const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, }, })

// and load the index.html of the app. win.loadFile(‘index.html’) }

app.whenReady().then(createWindow)

وindex.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node
    <script>
      document.write(process.versions.node)
    </script>
    , Chrome
    <script>
      document.write(process.versions.chrome)
    </script>
    , and Electron
    <script>
      document.write(process.versions.electron)
    </script>
    .
  </body>
</html>

الآن تشغيل مرة أخرىyarn start، ويجب أن تظهر هذه النافذة:

Activity monitor

هذا تطبيق بسيط للغاية من نافذة واحدة ، وعندما تغلق هذه النافذة ، يخرج التطبيق.

جعل حياة مطور التطبيق أسهل

يهدف Electron إلى جعل حياة المطور أسهل. التطبيقات بها الكثير من المشاكل المشتركة. إنهم بحاجة إلى أداء أشياء تجعلها واجهات برمجة التطبيقات الأصلية أحيانًا أكثر تعقيدًا قليلاً مما قد يتخيله المرء.

يوفر الإلكترون طريقة سهلة لإدارة عمليات الشراء داخل التطبيقوالإخطارات والسحب والإفلات وإدارة الاختصارات الرئيسية وغير ذلك الكثير.

كما يوفر ملفخدمة مستضافة لتحديثات التطبيق، لجعل تحديث تطبيقاتك أسهل بكثير مما لو كان عليك إنشاء مثل الخدمة بنفسك.


المزيد من دروس devtools: