الدليل الكامل ومصادر التعلم

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

تحتوي JavaScript على العديد من المكتبات والأطر التي توسع حالات استخدامها إلى ما بعد JavaScript (عادي) الفانيليا.

Electron.js هو إطار عمل قوي مفتوح المصدر يمنح مطوري الويب القدرة على تطوير تطبيقات أصلية بمهاراتهم الحالية. ستعلمك هذه المقالة عن Electron.js وكيف يمكن استخدامها لدعم فكرتك الرائعة التالية.

إلكترون شبيبة

Electron JS هو إطار عمل يمكن للمطورين استخدامه لإنشاء تطبيقات سطح المكتب باستخدام HTML و CSS و JavaScript. تم إنشاء Electron JS والاحتفاظ به بواسطة GitHub.

إطار العمل هو مزيج من Node.JS و Chromium ، مما يسمح للمستخدمين بالحفاظ على قاعدة كود JavaScript واحدة وتطوير تطبيقات سطح المكتب عبر الأنظمة الأساسية التي يمكن أن تعمل على Windows و macOS و Linux.

بدأت قصة Electron.js في كانون الثاني (يناير) 2013. وكانت الفكرة الأصلية هي إنشاء محرر نصوص متعدد المنصات يمكنه العمل مع JavaScript و HTML و CSS.

تم تسمية Electron.js في الأصل باسم Atom Shell وتم جعله مفتوح المصدر في عام 2014. تمت إعادة تسمية المشروع لاحقًا باسم Electron في أبريل 2015 ، وتم إصدار أول واجهة برمجة تطبيقات له في عام 2016.

ميزات Electron JS

• متوافق مع جميع مكتبات وأطر JavaScript. تعد Vue.js و Angular و React.js مجرد أمثلة لأطر عمل JavaScript التي يمكن للمطورين استخدامها مع Electron JS. هذا التوافق يجعل من السهل استخدام ميزات / وظائف هذه المكتبات والأطر عند إنشاء تطبيق Electron.
• إطار قابل لإعادة الاستخدام. قد يكون تلبية احتياجات العملاء المختلفة مكلفًا. الشيء الجيد في Electron JS هو أنه يمكن استخدامه لكل من تطبيقات الويب وتطبيقات سطح المكتب. يعني مصدر الكود الفردي أنه يمكن استخدامه أيضًا على أنظمة تشغيل مختلفة.
• لديه حق الوصول إلى واجهات برمجة التطبيقات الأصلية. يمكن للمطورين الذين يعملون على Electron JS الوصول إلى واجهات برمجة التطبيقات الأصلية لأنظمة التشغيل التي يعملون عليها. وبالتالي ، يمكن للمطورين إنشاء تطبيقات سطح مكتب لها وصول مماثل إلى الوظائف ذات المستوى المنخفض ، مثل عرض الإشعارات.
• يدعم تقنية الويب. Electron JS قابل للتكيف ، حيث لا يحتاج المطورون إلى تعلم لغة برمجة جديدة لتطوير التطبيقات. وهذا يعني أنه إذا فهمت حزمة لغة معينة تستخدمها بالفعل لإنشاء تطبيقات ويب ، فيمكنك أيضًا استخدامها لإنشاء تطبيق سطح مكتب.
• إدارة الكود والتطبيق. لا تحتاج إلى الاحتفاظ بفرق مختلفة للحفاظ على التطبيقات والتعليمات البرمجية لأنظمة التشغيل المختلفة. يسمح لك Electron JS بالحفاظ على نفس مصدر الشفرة لأنظمة تشغيل Linux و Windows و Mac.
• سهولة البناء / النشر. يساعد مدير حزمة Electron المطورين على تجميع حزمهم في الحزم الخاصة بهم. يمكنك بالتالي إصدار تطبيق سطح مكتب Linux و Mac و Windows من نفس قاعدة التعليمات البرمجية باستخدام مدير الحزم هذا.

العمارة Electron JS

تشبه بنية Electron بنية مستعرض الويب الحديث لأنها ترث بنيتها متعددة العمليات من Chromium.

تتألف بنية Electron من V8 JavaScript Engine و Node.JS و Libchromiumcontent.

• Node.JS- وقت تشغيل JavaScript مفتوح المصدر يتم تشغيله على محرك V8 JavaScript. يتيح Node.JS للمطورين تشغيل JavaScript خارج نافذة المتصفح. يسمح Node.JS أيضًا للمستخدمين بتنفيذ كود JavaScript خام من خلال غلافه التفاعلي.
• Libchromiumcontent- مكتبة عرض Chromium مفتوحة المصدر ويحتفظ بها Google Chrome. يحتوي Chrome على واجهة مستخدم مبسطة ويستخدم وميض كمحرك تخطيط و V8 كمحرك JavaScript.
• V8 JavaScript Engine – محرك جافا سكريبت مفتوح المصدر مكتوب بلغة C ++ و JavaScript وتم تطويره بواسطة Google.

# 1. Node.js

لبدء استخدام Electron JS ، يجب أن يكون لديك Node.js مثبتًا على جهازك المحلي.

حدد إصدار العقدة الصحيحة اعتمادًا على نظام التشغيل الذي تقوم بتشغيله على جهاز الكمبيوتر الخاص بك.

تحقق مما إذا تم تثبيت Node.js بشكل صحيح عن طريق تشغيل هذه الأوامر ؛

node -v

npm -v

إذا تم تثبيت هذه الأوامر بشكل صحيح ، فستعرض إصدارات node و npm ، على التوالي.

# 2. سطر الأوامر

تعتمد طريقة وصولك إلى سطر الأوامر على نظام التشغيل الخاص بك.

• سوف يعتمد Linux على التوزيع.

• نظام التشغيل Windows: PowerShell أو موجه الأوامر.
• macOS: طرفية.

تأتي بعض برامج تحرير التعليمات البرمجية ، مثل Visual Studio Code ، مع محطة طرفية متكاملة.

# 3. محرر الكود

أنت بحاجة إلى محرر كود لكتابة كود Electron JS الخاص بك. يعد Visual Studio Code من بين أفضل ما يمكنك تجربته.

كيفية تركيب Electron JS

الخطوة 1: إنشاء مشروع node.js.

استخدم هذه الأوامر للبدء ؛

mkdir my-electron-app && cd my-electron-app

npm init

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

يمكنك اختيار الاسم الافتراضي لمجلدك كاسم التطبيق الخاص بك. ومع ذلك ، تذكر تعيين نقطة دخول تطبيقك على أنها main.js.

يمكن أن تأخذ الحقول مثل المؤلف والوصف أي قيمة. سيبدو ملف package.json الخاص بك شيئًا كهذا بمجرد الانتهاء من هذه الخطوات:

{
"name": "my-electron-app",

  "version": "1.0.0",

  "description": "Hello World!",

  "main": "main.js",

  "author": "Peter Drury",

  "license": "MIT"

}

الخطوة الثانية: تثبيت الإلكترون

استخدم هذا الأمر ؛

npm install --save-dev electron

الخطوة 3: أضف أمر “بدء” إلى package.json الخاص بك

{

  "scripts": {

    "start": "electron ."

  }

}

الخطوة 4: ابدأ تشغيل التطبيق الخاص بك

استخدم هذا الأمر لبدء تطبيقك في وضع التطوير

npm start

عملية عمل Electron JS

سنستمر في إنشاء التطبيق من الإعداد الذي قمنا به أعلاه. يحتوي تطبيق الإلكترون على نوعين من العمليات ؛ الرئيسي والعارض.

العملية الرئيسية

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

أنشئ main.js في المجلد الجذر لتهيئة البرنامج النصي الرئيسي. يمكنك القيام بذلك يدويًا أو استخدام هذا الأمر ؛

touch main.js

يمكنك إضافة الكود التالي إلى main.js

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

const createWindow = () => {

 const win = new BrowserWindow({

   width: 800,

   height: 600,

 });

 win.loadFile('index.html');

};

app.whenReady().then(() => {

 createWindow();

 app.on('activate', () => {

   if (BrowserWindow.getAllWindows().length === 0) {

     createWindow();

   }

 });

});

app.on('window-all-closed', () => {

 if (process.platform !== 'darwin') {

   app.quit();

 }

});

يمكن تحميل صفحات الويب في Electron إما من عنوان ويب بعيد أو من ملف HTML محلي. سنستخدم ملف HTML محلي لأغراض العرض.

قم بإنشاء ملف index.html في المجلد الجذر. يتم توفير رمز index.html دائمًا ، ولكن يمكنك جعله رمز البداية الخاص بك ؛

<!DOCTYPE html>

<html>

 <head>

   <meta charset="UTF-8" />

   <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>

   <p id="info"></p>

 </body>

 <script src="https://wilku.top/introduction-to-electron-js-complete-guide-and-learning-resources/./renderer.js"></script>

</html>

عملية العارض

يجعل Renderer محتوى الويب. تأتي البرامج النصية للتحميل المسبق مع التعليمات البرمجية التي يتم تنفيذها في عملية العارض قبل الحاجة إلى بدء تحميل محتويات الويب.

قم بإنشاء preload.js في المجلد الجذر الخاص بك وإضافة هذا الرمز ؛

window.addEventListener('DOMContentLoaded', () => {

  const replaceText = (selector, text) => {

    const element = document.getElementById(selector)

    if (element) element.innerText = text

  }

  for (const type of ['chrome', 'node', 'electron']) {

    replaceText(`${type}-version`, process.versions[type])

  }

})

قم بتشغيل خادم التطوير باستخدام npm start ، وهذا ما سيتم عرضه

أمثلة التطبيقات: Electron JS

# 1. تطبيق Slack لسطح المكتب

Slack هي واحدة من أكثر أدوات التعاون عن بعد شيوعًا. يمكن للمستخدمين إرسال الرسائل واستلامها وإجراء المكالمات ومشاركة الملفات باستخدام هذا التطبيق. يحتوي Slack على تطبيقات تستند إلى الويب وتطبيقات سطح المكتب على أنظمة تشغيل Mac و Linux و Windows. يستخدم تطبيق Slack لسطح المكتب محرك Chromium و Node.js لتقديم كود عالي الجودة.

# 2. تطبيق WordPress لسطح المكتب

WordPress هو أكبر نظام لإدارة المحتوى. اجتذبت حقيقة أنه يمكنك إطلاق موقع ويب حتى بدون مهارات الترميز الأساسية العديد من المستخدمين. يمكن الوصول إلى WordPress عبر المتصفح ومن خلال تطبيقات سطح المكتب على أنظمة Mac و Linux و Windows. يستخدم سطح مكتب WordPress الذي تم تجديده Electron JS.

# 3. تطبيق WhatsApp لسطح المكتب

WhatsApp هو من بين أكثر تطبيقات المراسلة شيوعًا في العالم الحديث ، حيث يستخدمه أكثر من 2 مليار شخص. تم تصميم WhatsApp في الأصل كتطبيق جوال ولكنه تحول الآن إلى نظام أساسي عبر الأجهزة. يستخدم تطبيق WhatsApp لسطح المكتب Electron JS وهو متاح في أنظمة التشغيل الرئيسية.

# 4. كود الاستوديو المرئي

يعد Visual Studio Code ، المملوك لشركة Microsoft ، من بين أشهر برامج تحرير الأكواد البرمجية. يدعم Visual Studio Code HTML و CSS والرمز المكتوب بلغات برمجة مختلفة مثل JavaScript و Python و PHP و Java و Ruby ، ​​على سبيل المثال لا الحصر. تطبيق سطح المكتب ، الذي تم إنشاؤه باستخدام Electron JS ، متاح لأنظمة تشغيل Windows و Mac و Linux.

مصادر التعلم: Electron JS

# 1. التوثيق الرسمي لشركة Electronjs

يتم إنشاء وثائق Electronjs وصيانتها بواسطة Electronjs.org. سوف تتعلم ما هو Electron JS ، وكيفية إعداد أول تطبيق Electron الخاص بك وكيفية إنشاء تطبيقات سطح المكتب عبر الأنظمة الأساسية باستخدام تقنيات مختلفة. يتم تحديث الوثائق دائمًا كلما تم إدخال تحسين أو ميزة جديدة.

# 2. Master Electron: تطبيقات سطح المكتب مع HTML و JavaScript و CSS

Master Electron هي دورة مدفوعة في Udemy تقدم لك Electron JS. ستتعلم كيفية إنشاء تطبيقات سطح المكتب لأنظمة تشغيل مختلفة ، مثل Mac و Linux و Windows. يعد Master Electron أيضًا المورد المثالي إذا كنت تريد فهم عملية Electron API بأكملها.

# 3. البرنامج التعليمي لتفاعل الإلكترون

Electron React هي دورة مدفوعة على Udemy تعلم المطورين كيفية إنشاء تطبيقات Electron باستخدام React.js. React هي واحدة من أشهر مكتبات JavaScript وقد تم إنشاؤها بواسطة Meta (Facebook سابقًا).

تغليف

Electron JS هي مكتبة JavaScript رائعة لإنشاء تطبيقات سطح المكتب في عالم حديث حيث يجب احتضان التطبيقات عبر الأنظمة الأساسية. حقيقة أنه يمكنك استخدام HTML و CSS و JavaScript تعني أن المطورين ليسوا مضطرين لتعلم مجموعات تقنية جديدة لإنشاء مثل هذه التطبيقات. يعد وجود مجتمع كبير وداعم ميزة إضافية أيضًا ، حيث نضمن لك دائمًا الدعم.

يمكنك أيضًا استكشاف بعض أفضل أطر عمل JavaScript لإنشاء تطبيق حديث في وقت أقل.