أساسيات الإلكترون: كيفية تكوين وتشغيل تطبيق Angular Electron

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

يمكنك استخدام Electron لتهيئة تطبيق Angular للتشغيل على نافذة سطح المكتب ، بدلاً من متصفح الويب المعتاد. يمكنك القيام بذلك باستخدام ملف JavaScript داخل التطبيق نفسه.

بمجرد تكوين Electron ، يمكنك متابعة التطوير كما تفعل في تطبيق Angular العادي. ستظل الأجزاء الرئيسية للتطبيق تتبع نفس الهيكل الزاوي القياسي.

كيفية تثبيت الإلكترون كجزء من تطبيقك

لاستخدام Electron ، تحتاج إلى تنزيل node.js وتثبيته ، واستخدام تثبيت npm لإضافة Electron إلى تطبيقك.

التنزيل والتثبيت node.js . يمكنك التأكد من أنك قمت بتثبيته بشكل صحيح عن طريق التحقق من الإصدار:
```
node -v
```
تشمل العقدة أيضًا npm ، مدير حزم JavaScript . يمكنك التأكد من تثبيت npm عن طريق التحقق من إصدار npm:
```
npm -v
```
أنشئ تطبيق Angular جديدًا باستخدام ملف من جديد يأمر. سيؤدي هذا إلى إنشاء مجلد يحتوي على كل ما يلزم الملفات المطلوبة لمشروع Angular للعمل.
```
ng new electron-app
```
في المجلد الجذر للتطبيق الخاص بك ، استخدم npm لتثبيت Electron.
```
npm install --save-dev electron
```
سيؤدي هذا إلى إنشاء مجلد جديد للإلكترون في مجلد node_modules للتطبيق.
يمكنك أيضًا تثبيت Electron عالميًا على جهاز الكمبيوتر الخاص بك.

هيكل ملف تطبيق الإلكترون الزاوي

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

كيف يمكنك التقاط لقطة للشاشة على سناب شات دون علمهم

في وقت التشغيل ، سيأتي المحتوى المعروض من ملف index.html. بشكل افتراضي ، يمكنك العثور على ملف index.html داخل ملف src مجلد ، وفي وقت التشغيل يتم إنشاء نسخة منه تلقائيًا داخل ملف حي مجلد.

عادةً ما يبدو ملف index.html بالشكل التالي:

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <title> ElectronApp </title> 
  <base href="./"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="icon" type="image/x-icon" href="favicon.ico"> 
</head> 
<body> 
  <app-root> </app-root> 
</body> 
</html>

يوجد داخل علامة النص علامة . سيعرض هذا مكون التطبيق الرئيسي لتطبيق Angular. يمكنك العثور على مكون التطبيق الرئيسي في ملف src / التطبيق مجلد.

كيفية حفظ ملف دفعي

كيفية استخدام Electron لفتح تطبيق Angular في نافذة سطح المكتب

قم بإنشاء ملف main.js ، وقم بتكوينه لفتح محتوى التطبيق داخل نافذة سطح المكتب.

قم بإنشاء ملف في جذر مشروعك المسمى main.js . في هذا الملف ، قم بتهيئة Electron بحيث يمكنك استخدامه لإنشاء نافذة التطبيق.
قم بإنشاء نافذة سطح مكتب جديدة بعرض وارتفاع معينين. قم بتحميل ملف الفهرس كمحتوى لعرضه في النافذة. تأكد من أن المسار إلى ملف الفهرس يطابق اسم التطبيق الخاص بك. على سبيل المثال ، إذا قمت بتسمية تطبيقك 'electron-app' ، فسيكون المسار 'dist / electron-app / index.html' .
```
function createWindow() { 
  win = new BrowserWindow({width: 800, height: 800}); 
  win.loadFile('dist/electron-app/index.html'); 
}
```
عندما يكون التطبيق جاهزًا ، اتصل بوظيفة createWindow (). سيؤدي هذا إلى إنشاء نافذة التطبيق للتطبيق الخاص بك.
في ال src / index.html ملف ، في قاعدة علامة ، قم بتغيير سمة href إلى './'.
```
<base href="./">
```
في package.json ، أضف رئيسي ، وقم بتضمين ملف main.js كقيمة. ستكون هذه نقطة دخول التطبيق ، بحيث يقوم التطبيق بتشغيل ملف main.js أثناء تشغيل التطبيق.
في ال .browserslistrc ملف ، قم بتعديل القائمة لإزالة إصدارات سفاري iOS 15.2-15.3. سيمنع ذلك ظهور أخطاء التوافق في وحدة التحكم عند التحويل البرمجي.
احذف المحتوى الافتراضي في ملف src / app / app.component.html ملف. استبدله ببعض المحتويات الجديدة.

أضف بعض الأنماط للمحتوى في ملف src / app / app.component.css file.

.content { 
  line-height: 2rem; 
  font-size: 1.2em; 
  margin: 48px 10%; 
  font-family: Arial, sans-serif 
} 
.card { 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
  width: 85%; 
  padding: 16px 48px; 
  margin: 24px 0px; 
  background-color: whitesmoke; 
  font-family: sans-serif; 
}

أضف بعض التصميم العام إلى src / styles.css ملف لإزالة الهوامش والحشوات الافتراضية.

كيفية تشغيل تطبيق إلكتروني

لتشغيل التطبيق الخاص بك في نافذة ، قم بتكوين أمر في مجموعة البرامج النصية الخاصة package.json. ثم قم بتشغيل التطبيق الخاص بك باستخدام الأمر في المحطة.

في package.json ، داخل مصفوفة البرامج النصية ، أضف أمرًا لإنشاء تطبيق Angular وتشغيل Electron. تأكد من إضافة فاصلة بعد الإدخال السابق في مصفوفة البرامج النصية.
لتشغيل تطبيق Angular الجديد في نافذة سطح المكتب ، قم بتشغيل ما يلي في سطر الأوامر ، في المجلد الجذر لمشروعك:
```
npm run electron
```
انتظر حتى يتم تجميع التطبيق الخاص بك. بمجرد الانتهاء ، بدلاً من فتح تطبيق Angular في متصفح الويب ، سيتم فتح نافذة سطح المكتب بدلاً من ذلك. ستعرض نافذة سطح المكتب محتويات تطبيق Angular الخاص بك.
إذا كنت تريد الاستمرار في عرض التطبيق الخاص بك في متصفح الويب ، فلا يزال بإمكانك تشغيل الأمر ng serve.
```
ng serve
```
إذا كنت تستخدم ملف من الخدمة الأمر ، فسيستمر عرض محتويات تطبيقك في مستعرض الويب في المضيف المحلي: 4200.

بناء تطبيقات سطح المكتب بالإلكترون

يمكنك استخدام Electron لإنشاء تطبيقات سطح المكتب على أنظمة Windows و Mac و Linux. بشكل افتراضي ، يمكنك اختبار تطبيق Angular باستخدام مستعرض ويب عبر الأمر ng serve. يمكنك تكوين تطبيق Angular الخاص بك ليتم فتحه أيضًا في نافذة سطح المكتب بدلاً من متصفح الويب.

يمكنك القيام بذلك باستخدام ملف JavaScript. ستحتاج أيضًا إلى تكوين ملفات index.html و package.json. سيظل التطبيق العام يتبع نفس الهيكل مثل تطبيق Angular العادي.

إذا كنت تريد معرفة المزيد حول كيفية إنشاء تطبيقات سطح المكتب ، فيمكنك أيضًا استكشاف تطبيقات Windows Forms. تتيح لك تطبيقات Windows Forms النقر فوق عناصر واجهة المستخدم وسحبها على لوحة الرسم أثناء إضافة أي منطق ترميز إلى ملفات C #.