كيف تبني أول تطبيق لسطح المكتب باستخدام جافا سكريبت باستخدام الإلكترون

هل تساءلت يومًا ما إذا كان يمكنك إنشاء تطبيقات سطح مكتب مشتركة مع HTML و CSS و JavaScript؟

إنه ممكن مع الإلكترون.

هذه المقالة سوف تساعدك على فهم بعض المفاهيم الأساسية للإلكترون.

بحلول نهاية هذا المنشور ، ستعرف عملية إنشاء تطبيقات سطح المكتب عبر الأنظمة مع Electron و HTML و CSS.

قبل البدء ، يمكنك التحقق مسبقًا من التطبيق الذي سنبنيه في هذا البرنامج التعليمي.

سيكون لـ Hear Me Type وظيفة بسيطة ولكنها واضحة. كل مفتاح مضغوط على لوحة المفاتيح سوف يلعب صوتًا معينًا. لذلك إذا ضغطت على الزر "A" ، فسيقوم التطبيق بتشغيل الصوت المحدد للحرف A.

هناك إصداران متاحان للتنزيل. يُنصح باستخدام شفرة المصدر لهذا البرنامج التعليمي وإصدار متقدم من التطبيق لمستخدمي الإلكترون الأكثر خبرة.

سيتغير الرمز منذ أن أضيف ميزات وتحسينات جديدة. تأكد من معاودة التحقق لمعرفة الجديد.

بدون مزيد من اللغط ، دعنا نتعرف على المزيد حول الإلكترون وقم بإنشاء أول تطبيق لدينا!

ما هو الإلكترون؟

الإلكترون هو إطار لتطبيقات سطح المكتب عبر منصة باستخدام Chromium و Node.js.

من السهل إنشاء تطبيقات متعددة المنصات باستخدام HTML و CSS و JavaScript. سيكون تطبيقك متوافقًا مع أنظمة تشغيل Mac و Windows و Linux فورًا.

الميزات الأخرى المضمنة هي:

  • التحديثات التلقائية - تمكين التطبيقات من تحديث نفسها تلقائيًا
  • القوائم والإشعارات الأصلية - تنشئ قوائم للتطبيق الأصلي وقوائم السياق
  • الإبلاغ عن الأعطال في التطبيق - يمكنك إرسال تقارير الأعطال إلى خادم بعيد
  • التصحيح والتنميط - تجد وحدة محتوى Chromium اختناقات في الأداء وعمليات بطيئة. يمكنك أيضًا استخدام أدوات Chrome Developer المفضلة لديك داخل تطبيقك.
  • مثبت Windows - يمكنك إنشاء حزم التثبيت. سريع وبسيط.

إذا كنت راضيًا عن ما تقدمه Electron ، فدعنا نعمق وننشئ تطبيقًا إلكترونيًا بسيطًا.

قبل أن نتخلص من أيدينا ، ستحتاج إلى تثبيت Node.js. يجب أن يكون لديك أيضًا حساب GitHub لتخزين وتحديث تطبيقك. على الرغم من أن الحساب ليس ضروريًا ، إلا أنه يوصى به بشدة. يعد GitHub معيارًا للصناعة ومن المهم معرفة كيفية استخدامه.

سوف نستخدم GitHub في هذا البرنامج التعليمي.

ابدء

عندما تقوم بالإعداد ، افتح نافذة طرفية لنظام التشغيل الخاص بك.

اتبع الإرشادات أدناه لاستنساخ مستودع إلكترون البدء السريع على جهاز الكمبيوتر الخاص بك.

سنعمل على إنشاء برنامجنا عند البدء السريع للإلكترون.

# استنساخ مستودع البدء السريع
بوابة استنساخ https://github.com/electron/electron-quick-start
# الذهاب إلى مستودع
مؤتمر نزع السلاح الإلكترون البدء السريع
# تثبيت التبعيات وتشغيلها
npm تثبيت && npm start

عند اكتمال الخطوات المذكورة أعلاه ، سترى التطبيق مفتوحًا في شكل يشبه نافذة المتصفح. وهو بالفعل نافذة متصفح!

يتغير نمط النافذة وفقًا لنظام التشغيل. اخترت استخدام الشكل الكلاسيكي لنظام التشغيل Windows. رائع!

النافذة الرئيسية لتطبيق Quick-Start Electron الخاص بنا.

كما قلت سابقًا ، يمكنك استخدام أدوات المطور من Chrome داخل تطبيقك. ما يمكنك القيام به باستخدام أدوات المطور في متصفحك ، يمكنك أيضًا القيام به داخل التطبيق. أمتياز!

تطبيق هندسة الإلكترون

دعونا نلقي نظرة على الكود المصدري وهيكل ملف تطبيقنا. افتح المشروع في محرر النصوص المفضل لديك أو IDE. سوف أستخدم Atom المبني على ... هل تفكر في ذلك ... الإلكترون!

بنية الملفات والمجلدات الخاصة بالتطبيق المنشأ حديثًا.

لدينا هيكل ملف أساسي:

الإلكترون البداية السريعة

- index.html
 - main.js
 - package.json
 - render.js

تشبه بنية الملف تلك التي نستخدمها عند إنشاء صفحات الويب.

نحن لدينا:

  • index.html وهي صفحة ويب HTML5 تقدم غرضًا واحدًا كبيرًا: قماشنا
  • main.js يخلق نوافذ ويعالج أحداث النظام
  • package.json هو البرنامج النصي لبدء التشغيل لتطبيقنا. سيتم تشغيله في العملية الرئيسية ويحتوي على معلومات حول تطبيقنا
  • يتعامل render.js مع عمليات تقديم التطبيق

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

سعيد سألت. انتظر قبعتك لأن هذا قد يكون منطقة جديدة إذا كنت قادمًا من عالم JavaScript!

ما هي العملية؟

عندما ترى "عملية" ، فكر في عملية على مستوى نظام التشغيل. إنه مثيل لبرنامج كمبيوتر يعمل في النظام.

إذا قمت ببدء تشغيل تطبيق Electron والتحقق من Windows Task Manager أو Activity Monitor لـ macOS ، فيمكنني مشاهدة العمليات المرتبطة بالتطبيق الخاص بي.

كل من هذه العمليات تعمل بالتوازي. لكن الذاكرة والموارد المخصصة لكل عملية معزولة عن غيرها.

لنقل أنني أريد إنشاء حلقة تزداد شيئًا ما في عملية التجسيد.

فار = 1 ؛
لـ (a = 1 ؛ a <10 ؛ a ++) {
 console.log ('هذا هو حلقة') ؛
}

الزيادات متاحة فقط في عملية التقديم. لا يؤثر على العملية الرئيسية على الإطلاق. هذه رسالة حلقة ستظهر فقط على الوحدة النمطية المقدمة.

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

العملية الرئيسية تسيطر على حياة التطبيق. أنه يحتوي على واجهة برمجة التطبيقات Node.js الكاملة المضمنة ويفتح الحوارات ، ويخلق عمليات التجسيد. كما أنه يتعامل مع تفاعلات نظام التشغيل الأخرى ويبدأ التطبيق ويتركه.

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

يمكنك أيضًا تغيير ملف العملية الرئيسي عن طريق تعديله في ملف package.json.

لغرض الاختبار ، افتح package.json وتغيير:

"الرئيسي": "main.js" ،

إلى

"الرئيسي": "mainTest.js" ،

ابدأ تشغيل التطبيق الخاص بك ومعرفة ما إذا كان لا يزال يعمل.

ضع في اعتبارك أنه يمكن أن يكون هناك عملية رئيسية واحدة فقط.

تقديم العملية

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

نظرًا لأن كل عملية تجسيد منفصلة ، فلن يؤثر تعطل أحدها على عملية أخرى. هذا بفضل بنية Chromium المتعددة العمليات.

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

أعتقد أنه من مثل هذا:

[المصدر: كريستيان بوسليك]

يبقى سؤال واحد. يمكن أن تكون مرتبطة بطريقة أو بأخرى؟

هذه العمليات تعمل بشكل متزامن ومستقل. لكنها لا تزال بحاجة إلى التواصل بطريقة أو بأخرى. خاصة وأنهم مسؤولون عن مهام مختلفة.

لهذا ، هناك نظام اتصال interprocess أو IPC. يمكنك استخدام IPC لتمرير الرسائل بين العمليات الرئيسية وعمليات التجسيد. للحصول على شرح أكثر تعمقا لهذا النظام ، اقرأ مقال كريستيان إنجفال.

هذه هي أساسيات عمليات تطوير تطبيق Electron.

الآن دعنا نعود إلى كودنا!

اجعلها شخصية

دعنا نعطي مجلد التطبيق اسمًا مناسبًا.

قم بتغيير اسم المجلد من البداية السريعة للإلكترون إلى برنامج تعليمي للاستماع إلي.

أعد فتح المجلد باستخدام محرر النصوص المفضل لديك أو IDE. لنقم بتخصيص هوية تطبيقنا من خلال فتح ملف package.json.

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

دعونا نفخر قليلاً ونضعك كمؤلف للتطبيق.

ابحث عن المعلمة "المؤلف" وقم بتغيير القيمة إلى اسمك. يجب أن تبدو هذه:

"المؤلف": "كارول بيلو" ،

نحن بحاجة أيضا إلى تغيير بقية المعلمات. ابحث عن الاسم والوصف أدناه وقم بتغييره في ملف package.json:

رائع! الآن لدينا التطبيق له اسم جديد ووصف قصير ولكن مباشرة إلى وصف النقطة.

تذكر أنه يمكنك دائمًا تشغيل npm start في الجهاز الطرفي لتنفيذ التطبيق ومشاهدة التغييرات التي أجريتها.

دعنا نتقدم ونضيف الوظائف المتوقعة لتطبيقنا. نريد تشغيل صوت معين لكل مفتاح لوحة مفاتيح نضغط عليه.

أوه ، المرح ctionalitee!

ما هو التطبيق دون متعة ctionality؟ لا شىء اكثر…

الآن يجب أن نعتني به ونمنح التطبيق لدينا الوظيفة التي يريدها.

لجعل التطبيق يتفاعل مع مدخلاتنا ، يجب أولاً تحديد عنصر لربطه ثم تشغيل الإجراء المطلوب.

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

إذا كان هذا يبدو معقدًا قليلاً لك الآن ، فلا تخف. سأوجهك خلال كل خطوة.

قم بتنزيل هذا الأرشيف الذي يحتوي على جميع ملفات الصوت التي سنستخدمها. سنستخدمها قريبًا!

افتح ملف index.html ودعنا ننشئ عناصر

داخل عنصر ، قم بإنشاء عنصر div مع علامة فئة الصوت.

داخل عنصر div الذي تم إنشاؤه ، أنشئ عنصر

سنستخدم preload = "تلقائي" لإعلام التطبيق بأنه يجب تحميل ملف الصوت بالكامل عند تحميل الصفحة. index.html هو الملف الرئيسي للتطبيق ، وسيتم تحميل جميع ملفات الصوت عند تنفيذ التطبيق.

يجب أن يبدو الرمز كالتالي:

يجب أن يبدو ملف index.html بهذا الشكل.

الآن ، يشير

عظيم! الشيء الوحيد المهم الذي مفقود الآن هو شفرة جافا سكريبت JavaScript.

قم بإنشاء ملف جديد يسمى jobs.js. دعنا نطلبه داخل ملف index.html حتى يكون كود JS جاهزًا للاستخدام عند تشغيل التطبيق.

باتباع مثال requ (./ renderer.js ') ، أضف سطر التعليمات البرمجية هذا مباشرة أسفله:

تتطلب ( 'functions.js ./')

يجب أن يبدو مشروعك كالتالي:

أمتياز! الآن بعد أن أصبح لدينا كل شيء ، فقد حان الوقت للحقيقة الحقيقة.

افتح ملف jobs.js وأضف كود JavaScript التالي إلى الملف. سأشرح كيف يعمل في لحظة واحدة فقط.

document.onkeydown = function (e) {
    رمز التبديل (e.keyCode) {
        الحالة 65:
            . document.getElementById ( 'A') لعب ()؛
            استراحة؛
        الافتراضي:
            console.log ("لم يتم العثور على المفتاح!") ؛
    }
}؛

يجب أن يبدو الرمز كالتالي:

افتح باش أو النافذة الطرفية. تأكد من أنك في مجلد المشروع الخاص بك واكتب npm start لتشغيل التطبيق.

قم بضبط مستوى صوت مكبرات الصوت واضغط على الزر "أ" على لوحة المفاتيح.

#طار العقل

رمز JS بسيط ومباشر للغاية.

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

ضمن وظيفة مجهولة المصدر ، نستخدم بيان التبديل. الغرض منه هو تحديد قيمة Unicode لمفتاح لوحة المفاتيح المضغوط.

إذا كانت قيمة Unicode لمفتاح لوحة المفاتيح المضغوطة صحيحة ، فسيتم تشغيل الصوت. خلاف ذلك "لم يتم العثور على" هو ألقيت خطأ. ابحث عن الرسالة في وحدة التحكم.

ما مطية!

ربما لاحظت أن لدينا ملفات صوتية لتغطية مفاتيح A-Z و0-9. دعونا نستخدمها أيضًا حتى لا تشعر بالذوق المر للوحدة.

توجه إلى index.html وقم بإنشاء عنصر

يجب أن يبدو الرمز كالتالي:

نعم ، بالطبع يمكنك نسخ لصق:



































رائع! الآن ، دعونا نفعل الشيء نفسه لرمز JS داخل jobs.js.

يمكنك العثور على رموز char (رموز المفاتيح) على هذا الموقع.

ولكن نعم ، يمكنك نسخ هذا اللصق أيضًا:

document.onkeydown = function (e) {
    رمز التبديل (e.keyCode) {
        الحالة 48:
            . document.getElementById ( '0') لعب ()؛
            استراحة؛
        الحالة 49:
            . document.getElementById ( '1') لعب ()؛
            استراحة؛
        الحالة 50:
            . document.getElementById ( '2') لعب ()؛
            استراحة؛
        الحالة 51:
            . document.getElementById ( '3') لعب ()؛
            استراحة؛
        الحالة 52:
            . document.getElementById ( '4') لعب ()؛
            استراحة؛
        الحالة 53:
            . document.getElementById ( '5') لعب ()؛
            استراحة؛
        الحالة 54:
            . document.getElementById ( '6') لعب ()؛
            استراحة؛
        الحالة 55:
            . document.getElementById ( '7') لعب ()؛
            استراحة؛
        الحالة 56:
            . document.getElementById ( '8') لعب ()؛
            استراحة؛
        الحالة 57:
            . document.getElementById ( '9') لعب ()؛
            استراحة؛
        الحالة 65:
            . document.getElementById ( 'A') لعب ()؛
            استراحة؛
        الحالة 66:
            document.getElementById ( 'B') لعب ()؛
            استراحة؛
        الحالة 67:
            document.getElementById ( 'C') لعب ()؛
            استراحة؛
        الحالة 68:
            . document.getElementById ( 'D') لعب ()؛
            استراحة؛
        الحالة 69:
            document.getElementById ( 'E') لعب ()؛
            استراحة؛
        الحالة 70:
            document.getElementById ( 'F') لعب ()؛
            استراحة؛
        الحالة 71:
            document.getElementById ( 'G') لعب ()؛
            استراحة؛
        الحالة 72:
            document.getElementById ( 'H') لعب ()؛
            استراحة؛
        الحالة 73:
            . document.getElementById ( 'I') لعب ()؛
            استراحة؛
        الحالة 74:
            document.getElementById ( 'J') لعب ()؛
            استراحة؛
        الحالة 75:
            document.getElementById ( 'K') لعب ()؛
            استراحة؛
        الحالة 76:
            document.getElementById ( 'L') لعب ()؛
            استراحة؛
        الحالة 77:
            document.getElementById ( 'M') لعب ()؛
            استراحة؛
        الحالة 78:
            document.getElementById ( 'N') لعب ()؛
            استراحة؛
        الحالة 79:
            . document.getElementById ( 'O') لعب ()؛
            استراحة؛
        الحالة 80:
            document.getElementById ( 'P') لعب ()؛
            استراحة؛
        الحالة 81:
            . document.getElementById ( 'Q') لعب ()؛
            استراحة؛
        الحالة 82:
            document.getElementById ( 'R') لعب ()؛
            استراحة؛
        الحالة 83:
            document.getElementById ( 'S') لعب ()؛
            استراحة؛
        الحالة 84:
            document.getElementById ( 'T') لعب ()؛
            استراحة؛
        الحالة 85:
            document.getElementById ( 'U') لعب ()؛
            استراحة؛
        القضية 86:
            . document.getElementById ( 'V') لعب ()؛
            استراحة؛
        القضية 87:
            . document.getElementById ( 'W') لعب ()؛
            استراحة؛
        القضية 88:
            . document.getElementById ( 'X') لعب ()؛
            استراحة؛
        القضية 89:
            document.getElementById ( 'Y') لعب ()؛
            استراحة؛
        الحالة 90:
            . document.getElementById ( 'Z') لعب ()؛
            استراحة؛
        الافتراضي:
            console.log ("لم يتم العثور على المفتاح!") ؛
    }
}؛

لدينا التطبيق اكتمال الآن! مبروك!

تم الانتهاء من الوظيفة الرئيسية للتطبيق ، ولكن لا يزال هناك عمل يتعين القيام به!

بولسكا جا! (تلميع لي!)

على الرغم من أن التطبيق يعمل ، إلا أنه لا يزال يفتقر إلى بعض الأشياء هنا وهناك.

على سبيل المثال ، داخل ملفindex.html ، يمكنك تغيير عنوان التطبيق ومحتوى الإطار الرئيسي.

علاوة على ذلك ، لا يحتوي التطبيق على تصميم ، ولا ألوان جميلة ، ولا توجد صور للقطط أو الكلاب.

حرر خيالك وابحث عن طرق لتحسين تصميم التطبيق.

الرمز ليس مثاليًا أيضًا. لدينا الكثير من التعليمات البرمجية متطابقة والتي يمكن تحسينها وتحسينها. سيؤدي هذا إلى عدد أقل من أسطر الشفرات وسيكون أقل إيلامًا للعيون.

رمز مكرر هو ممارسة سيئة!

قم بتجريبه! مجرد اختبار ذلك!

يجب اختبار البرامج الجيدة بدقة.

أقترح أن تبدأ بالضغط على كل مفتاح لوحة المفاتيح لمعرفة ما يحدث.

أفضل سيناريو هو أنك ستسمع الصوت لكل مفتاح لوحة مفاتيح حددته في الكود. ولكن ماذا سيحدث عند الضغط على العديد من المفاتيح على التوالي بأسرع ما يمكن؟ ماذا عن المفاتيح التي لا يُفترض حتى الضغط عليها مثل أزرار الصفحة الرئيسية و NumLock؟

ماذا لو قمت بتصغير التطبيق ومحاولة الضغط على مفتاح ما؟ هل تسمع صوتا؟ وماذا يحدث عندما لا يتم تحديد نافذة التطبيق والضغط على مفتاح لوحة المفاتيح ، هل ما زلت تسمع أي أصوات؟

الجواب هو للأسف لا.

هذا السلوك بسبب البنية التي بنيت عليها الكترون. يتيح لك الحصول على مفاتيح عمومية كما يمكنك أن تفعل مع لغة C # ، لكن لا يمكنك تسجيل ضربات المفاتيح الفردية. هذا خارج نطاق حالات الاستخدام العادي لتطبيق الإلكترون.

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

في ملف jobs.js ، استخدمت عمدا حدث جافا سكريبت مهمل. يمكنك اكتشاف ذلك؟

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

يعد استخدام التعليمات البرمجية المهملة ممارسة سيئة وقد يؤدي إلى أخطاء خطيرة قد لا تعرف وجودها. ابق على اطلاع دائم بوثائق اللغة لمعرفة ما قد يكون قد تغير. دائما البقاء حتى الآن.

استنتاج

أود أن أشكر لكم وأهنئكم على الوصول إلى هذه النقطة!

لديك الآن المعرفة لإنشاء تطبيق إلكتروني بسيط عبر الأنظمة.

إذا كنت ترغب في الغوص في عمق الإلكترون ومعرفة ما أعمل عليه ، تحقق من Hear Me Type وملف التعريف الخاص بي على GitHub.

لا تتردد في استنساخ ، شوكة ، نجمة والمساهمة في أي من مشاريعي العامة.

يرجى العودة وقراءة هذا المقال مرة أخرى من وقت لآخر. سوف أقوم بتعديلها لتواكب تحديثات الإلكترون.

شكرًا جزيلاً على قضاء بعض الوقت في يومك لقراءة مقالتي.

هذه المقالة نشرت أصلا على NeutronDev.com.

إذا كنت تستمتع بمزيد من المقالات / البرامج التعليمية التفصيلية حول الإلكترون ، فانقر فوق "أدناه". لا تتردد في ترك التعليق.