يتيح لك Electron إنشاء تطبيقات سطح المكتب لأنظمة Windows و Mac و Linux. عند إنشاء تطبيق باستخدام Electron ، يمكنك معاينة التطبيق وتشغيله من خلال نافذة تطبيق سطح المكتب.
يمكنك استخدام Electron لتهيئة تطبيق Angular للتشغيل على نافذة سطح المكتب ، بدلاً من متصفح الويب المعتاد. يمكنك القيام بذلك باستخدام ملف JavaScript داخل التطبيق نفسه.
بمجرد تكوين Electron ، يمكنك متابعة التطوير كما تفعل في تطبيق Angular العادي. ستظل الأجزاء الرئيسية للتطبيق تتبع نفس الهيكل الزاوي القياسي.
كيفية تثبيت الإلكترون كجزء من تطبيقك
لاستخدام Electron ، تحتاج إلى تنزيل node.js وتثبيته ، واستخدام تثبيت npm لإضافة Electron إلى تطبيقك.
- التنزيل والتثبيت node.js. يمكنك التأكد من أنك قمت بتثبيته بشكل صحيح عن طريق التحقق من الإصدار:
تتضمن العقدة أيضًا npm ، مدير حزم JavaScript. يمكنك التأكد من تثبيت npm عن طريق التحقق من إصدار npm:عقدة الخامسnpm -v - أنشئ تطبيق Angular جديدًا باستخدام ملف نانوغرام جديد يأمر. سيؤدي هذا إلى إنشاء مجلد يحتوي على كل ما يلزم الملفات المطلوبة لمشروع Angular للعمل.
نانوغرام الجديد تطبيق الكترون - في المجلد الجذر للتطبيق الخاص بك ، استخدم npm لتثبيت Electron.
npm تثبيت- حفظ ديف الإلكترون - سيؤدي هذا إلى إنشاء مجلد جديد للإلكترون في مجلد node_modules للتطبيق.
- يمكنك أيضًا تثبيت Electron عالميًا على جهاز الكمبيوتر الخاص بك.
npm تثبيت - ز الكترون
هيكل ملف تطبيق الإلكترون الزاوي
سيتطلب Electron ملف JavaScript رئيسي لإنشاء وإدارة نافذة سطح المكتب. ستعرض هذه النافذة محتويات تطبيقك بداخلها. سيحتوي ملف JavaScript أيضًا على أحداث أخرى يمكن أن تحدث ، مثل إذا قام المستخدم بإغلاق النافذة.
في وقت التشغيل ، سيأتي المحتوى المعروض من ملف index.html. بشكل افتراضي ، يمكنك العثور على ملف index.html داخل ملف src مجلد ، وفي وقت التشغيل يتم إنشاء نسخة منه تلقائيًا داخل ملف حي مجلد.
عادة ما يبدو ملف index.html بالشكل التالي:
<! DOCTYPE html>
<أتش تي أم أل لانج ="en">
<رأس>
<meta charset ="UTF-8">
<لقب> ElectronApp </title>
<قاعدة href ="./">
<اسم التعريف ="منفذ العرض" المحتوى ="العرض = عرض الجهاز ، المقياس الأولي = 1">
<ارتباط rel ="أيقونة" اكتب ="صورة / أيقونة س" href ="favicon.ico">
</head>
<هيئة>
<جذر التطبيق></app-root>
</body>
</html>داخل علامة الجسم هو
كيفية استخدام Electron لفتح تطبيق Angular في نافذة سطح المكتب
قم بإنشاء ملف main.js ، وقم بتكوينه لفتح محتوى التطبيق داخل نافذة سطح المكتب.
- قم بإنشاء ملف في جذر مشروعك المسمى main.js. في هذا الملف ، قم بتهيئة Electron بحيث يمكنك استخدامه لإنشاء نافذة التطبيق.
مقدار ثابت {app، BrowserWindow} = يتطلب("إلكترون") ؛ - قم بإنشاء نافذة سطح مكتب جديدة بعرض وارتفاع معينين. قم بتحميل ملف الفهرس كمحتوى لعرضه في النافذة. تأكد من أن المسار إلى ملف الفهرس يطابق اسم التطبيق الخاص بك. على سبيل المثال ، إذا قمت بتسمية تطبيقك باسم "تطبيق الإلكترون" ، فسيكون المسار هو "dist / electron-app / index.html".
وظيفةcreateWindow() {
فوز = الجديد نافذة المتصفح({العرض: 800, ارتفاع: 800});
win.loadFile ('dist / electron-app / index.html');
} - عندما يكون التطبيق جاهزًا ، اتصل بوظيفة createWindow (). سيؤدي هذا إلى إنشاء نافذة التطبيق لتطبيقك.
app.whenReady (). ثم (() => {
createWindow ()
}) - في ال src / index.html ملف ، في قاعدة العلامة ، قم بتغيير سمة href إلى "./".
<قاعدة href ="./"> - في package.json، أضف رئيسي ، وقم بتضمين ملف main.js كقيمة. ستكون هذه نقطة دخول التطبيق ، بحيث يقوم التطبيق بتشغيل ملف main.js أثناء تشغيله.
{
"اسم": "تطبيق الكترون",
"إصدار": "0.0.0",
"رئيسي": "main.js",
...
} - في ال .browserslistrc ملف ، قم بتعديل القائمة لإزالة إصدارات سفاري iOS 15.2-15.3. سيمنع هذا أخطاء التوافق من الظهور في وحدة التحكم عند التحويل البرمجي.
آخر إصدار كروم
آخر إصدار واحد من فايرفوكس
الإصداران الرئيسيان الأخيران من Edge
آخر إصدارين رئيسيين من Safari
آخر إصدارين رئيسيين لنظام iOS
Firefox ESR
ليسios_saf 15.2-15.3
ليسسفاري 15.2-15.3 - احذف المحتوى الافتراضي في ملف src / app / app.component.html ملف. استبدلها ببعض المحتويات الجديدة.
<فئة div ="المحتوى">
<فئة div ="بطاقة">
<h2> مسكن </h2>
<ص>
مرحبًا بكم في تطبيق Angular Electron الخاص بي!
</ ص>
</div>
</div> - أضف بعض الأنماط للمحتوى في ملف src / app / app.component.css ملف.
.المحتوى {
ارتفاع الخط: 2rem ؛
حجم الخط: 1.2em;
الهامش: 48 بكسل 10٪ ؛
عائلة الخطوط: Arial، sans-serif
}
.بطاقة {
مربع الظل: 0 4مقصف 8مقصف 0 rgba(0, 0, 0, 0.2);
العرض: 85٪؛
الحشو: 16 بكسل 48 بكسل ؛
الهامش: 24 بكسل 0 بكسل ؛
لون الخلفية: whitesmoke.
عائلة الخطوط: sans-serif ؛
} - أضف بعض التصميم العام إلى src / styles.css ملف لإزالة الهوامش والحشوات الافتراضية.
لغة البرمجة {
الهامش: 0؛
حشوة: 0 ؛
}
كيفية تشغيل تطبيق إلكتروني
لتشغيل التطبيق الخاص بك في نافذة ، قم بتكوين أمر في مجموعة البرامج النصية الخاصة package.json. ثم قم بتشغيل التطبيق الخاص بك باستخدام الأمر في المحطة.
- في package.json، داخل مصفوفة البرامج النصية ، أضف أمرًا لإنشاء تطبيق Angular وتشغيل Electron. تأكد من إضافة فاصلة بعد الإدخال السابق في مجموعة البرامج النصية.
"نصوص": {
...
"إلكترون": "بناء نانوغرام && إلكترون."
}, - لتشغيل تطبيق Angular الجديد في نافذة سطح المكتب ، قم بتشغيل ما يلي في سطر الأوامر ، في المجلد الجذر لمشروعك:
npm تشغيل الإلكترون - انتظر حتى يتم تجميع التطبيق الخاص بك. بمجرد الانتهاء ، بدلاً من فتح تطبيق Angular في متصفح الويب ، سيتم فتح نافذة سطح المكتب بدلاً من ذلك. ستعرض نافذة سطح المكتب محتويات تطبيق Angular الخاص بك.
- إذا كنت تريد الاستمرار في عرض تطبيقك في متصفح الويب ، فلا يزال بإمكانك تشغيل الأمر ng serve.
يخدم ng - إذا كنت تستخدم ملف يخدم ng الأمر ، فسيستمر عرض محتويات تطبيقك في مستعرض الويب في المضيف المحلي: 4200.
بناء تطبيقات سطح المكتب بالإلكترون
يمكنك استخدام Electron لإنشاء تطبيقات سطح المكتب على أنظمة Windows و Mac و Linux. بشكل افتراضي ، يمكنك اختبار تطبيق Angular باستخدام مستعرض ويب عبر الأمر ng serve. يمكنك تكوين تطبيق Angular الخاص بك ليتم فتحه أيضًا في نافذة سطح المكتب بدلاً من متصفح الويب.
يمكنك القيام بذلك باستخدام ملف JavaScript. ستحتاج أيضًا إلى تكوين ملفات index.html و package.json. سيظل التطبيق العام يتبع نفس الهيكل مثل تطبيق Angular العادي.
إذا كنت تريد معرفة المزيد حول كيفية إنشاء تطبيقات سطح المكتب ، فيمكنك أيضًا استكشاف تطبيقات Windows Forms. تتيح لك تطبيقات Windows Forms النقر فوق عناصر واجهة المستخدم وسحبها على لوحة الرسم أثناء إضافة أي منطق ترميز إلى ملفات C #.
