كيفية إنشاء تطبيقات سطح مكتب أصلية باستخدام JavaScript (Proton Native)

عندما كنت أكتب هذا المقال ، خطرت في بالي قانون أتوود:

أي تطبيق يمكن كتابته بلغة JavaScript ، ستتم كتابته في النهاية بلغة JavaScript. - جيف أتوود

نشرت أصلا على مدونتي!

سنلقي اليوم نظرة على Proton Native ، ونصنع تطبيقًا بسيطًا به.

على عكس تطبيقات Electron ، فإن التطبيقات التي تم إنشاؤها باستخدام Proton Native هي في الواقع أصلية (ومن هنا جاءت تسميتها) وليست قائمة على الويب على الكروم.

Proton Native يشبه React Native ولكن لسطح المكتب. يتم تجميعه إلى رمز النظام الأساسي الأصلي ، بحيث يبدو ويعمل مثل التطبيق الأصلي.

اذا هيا بنا نبدأ.

شبابيك

قم بتثبيت أدوات البناء عن طريق تشغيل:

npm install --global --production windows-build-tools

لينكس

ستحتاج إلى هذه المكتبات:

  • libgtk-3-ديف
  • بناء أساسي

ماك

لا تحتاج أي شيء.

قم الآن بتشغيل ما يلي:

npm install -g create-proton-app

و

create-proton-app my-app

لعمل مشروع جديد.

افتح دليل المشروع باستخدام محرر الكود المفضل لديك. يجب أن يبدو الدليل على النحو التالي:

 └───node_modules ├───.babelrc ├───index.js ├───package.json └───package-lock.json

index.js يجب أن يبدو هكذا:

تمامًا مثل أي مشروع React أو React Native Project ، نقوم باستيراد مكتبة التفاعلات وإنشاء مكون فئة.

و Appالعنصر هو مجرد الحاوية التي تحمل Window و Menu، و Windowثلاثة الدعائم: title(عنوان النافذة)، size(يأخذ الكائن الذي يحتوي على العرض والارتفاع من النافذة)، و menuBar(مجموعة إلى false لأننا لا نريد شريط القوائم).

قبل أن نبدأ في البرمجة ، دعنا نثبِّت cryptoباستخدام npm:

npm i crypto

سنستخدم cryptoتجزئة النص باستخدام خوارزمية MD5.

index.js

أنا أول المستوردة Textو TextInputحتى أتمكن من استخدامها في وقت لاحق. ثم في ما classبعد تعيين السلاسل textو md5to فارغة في state الكائن ، قمت بإنشاء دالة hashتأخذ textوسيطة.

في hashالوظيفة ، قمنا بتعيين الحالة على النص المشفر textونعلن md5تخزينه (على النحو التالي)

this.setState({ text });let md5 = crypto.createHash("md5")  .update(text, "utf8").digest("hex");

وقم بتعيين كائن الحالة على التحديث md5.

this.setState({ md5 });

و renderالأسلوب بإرجاع بعض jsxالعناصر. و Boxالعنصر هو تماما مثل divفي ردة الفعل، أو Viewفي ردة الفعل الأصلية، التي تتولى TextInputو Text. هذا لأن عنصر النافذة الأصل لا يسمح بوجود أكثر من طفل واحد.

TextInputلديه خاصية onChangeسيتم استدعاؤها في كل مرة يتغير فيها النص. لذلك ، قمنا بتعيينها على دالة سهم سمين تأخذ textوسيطة وتعيد hashالوظيفة التي أعلنا عنها سابقًا.

لذلك في كل مرة يتغير النص ، textيتم تجزئته وضبطه على md5.

الآن إذا قمنا بتشغيله مع

npm run start

يجب أن تظهر هذه النافذة:

وإذا أدخلنا بعض النصوص ، فسيتم تجزئتها إلى md5 على النحو التالي:

قد تقول "يبدو قبيحًا - دعنا نضيف بعض التصميم إليه." حسنًا ، في وقت كتابة هذا المقال ، كانت Proton Native لا تزال في مهدها. إنها عربات التي تجرها الدواب للغاية ولا تدعم التصميم (حتى الآن) ، لكنها مشروع ممتع للعب به.

إذا كنت ترغب في المساهمة في المشروع ، تحقق من الريبو.

إذا كان لديك أي أسئلة أو اقتراحات ، فلا تتردد في التعليق أو التواصل معي على Twitter @ 4msal4 ولا تنس الضغط على زر التصفيق هذا :)

اشتري لي قهوة؟

؟ تحقق من قصتي السابقة؟

كيفية إنشاء تطبيق أخبار باستخدام React Native.