ما هو Electron وتطوير تطبيقات سطح المكتب عن طريق لغة Javascript . السلام عليكم اليوم سنتعرف على إطار العمل الكترون electron js لتطوير تطبيقات سطح المكتب Desktop App عن طريق لغة Javascript , مع إنشاء تطبيق بسيط .
لكن قبل ذلك اذا كنت مهتم بمجال البرمجة بصفة عامة ومجال عموما او بمجال برمجة المواقع والتطبيقات خصوصا .
ما هو Electron
Electron هو إطار عمل يستند إلى JavaScript تم تطويره بواسطة Github المجاني والمفتوح المصدر ، والذي يستخدم تقنيات الويب مثل HTML و CSS و Javascript لبناء تطبيقات سطح المكتب لجميع أنظمة التشغيل windows و Linux و MacOs و ChromeOs. تم إطلاق إطار العمل في عام 2014.
بصفتها Github Repo ، أخذت Atom Shell اسمها من محرر كود Atom الذي طورته Github أيضًا. وبعد مرور عام ، تم تغيير اسم إطار العمل من Atom Shell إلى Electron.js ، والذي تم استخدامه حتى يومنا هذا. يعتمد إطار عمل Electron.js على محرك v8js في هندسته لتفسير كود جافا سكريبت.
اطار Electron
إنه إطار عمل بسيط وجميل يسهل تعلمه ومن أشهر البرامج التي أنشأتها Electron.js محرر الكود الشهير Visual Studio Code ، بالإضافة إلى Github Desktop و Skype و Messenger Desktop و Whatssap Desktop و Postman. يعرف أي مبرمج.
ماذا احتاج لاتعلم Electron.js ؟
لبدء تعلم electron.js ، تحتاج أولاً إلى تعلم html و css و javascript ، وبعد ذلك يجب أن تتعلم الإصدار السادس من ES6 أو javascript ، ثم يمكنك تعلم Electron.js.
تنصيب Electron.js
يمكننا تثبيت Electron بطريقتين: عبر npmjs أو عبر Yarn ، إذا كان لديك Node.js مثبتًا على جهازك ، ويفضل Npm ، فقم بتثبيته عبر Npmnpm install eng -g ، فنحن نعني -g أنه يتم تثبيته في الجهاز بالكامل ، أنا يعني عالمي ، ليس كل ما نقوم به هو مشروع جديد ، ونحن بحاجة إلى تثبيت Electron فيه.
ثم نصنع مجلدًا في مكان معين ، إذا كنت تريد وضع مشروع إلكتروني فيه ، نفتحه من خلال vs code أو أي محرر كود ، ثم نصنع 3 ملفات ، أحدهما جافا سكريبت لكتابة كود الإلكترون بداخله ، واحد هو اكتب هيكل ومحتوى التطبيق في Html ، واستخدم css لإضافة التنسيق إلى التطبيق. تشبه الملفات العادية التي نريد إنشاء موقع ويب عادي.ثم نكتب الكود التالي في ملف app.js ، نطلق عليه أولاً App ، وهو المشروع الرئيسي لنافذة المتصفح ، والذي يسمح لنا بإنشاء نافذة أو نافذة حيث نقوم بتشغيل التطبيق. ثم نقوم بإنشاء وظيفة bootstrap التي تنشئ النافذة فيها ، والتي سنسميها Win اختصارًا.
بالنسبة للنافذة ، استدعينا ملف html وقمنا بتشغيله في النافذة ، وفي ملف Html ، كتبت تحية بسيطة وفي ملف Css أضفت بعض التنسيق ، اتصلت بـ css الذي وضعته في ملف مجلد css واستدعاه ملف html كما هو موضح في الصورة أدناه. :
ثم قم بتشغيل المشروع عبر المحطة ، أدخل الأمر الإلكتروني التالي. سيبدأ المشروع وستظهر نافذة بها رسالة الترحيب التي كتبناها في ملف html.
تعليقات
إرسال تعليق