node red contrib uibuilder

عقدة-ريد-كونتريب-Uibuilder

يتيح UiBuilder لـ Node-Red إنشاء تطبيقات الويب الأمامية التي تعتمد على البيانات.

ويتضمن العديد من ميزات المساعد التي يمكن أن تقلل أو تزيل الحاجة إلى كتابة رمز لإنشاء تطبيقات الويب القائمة على البيانات وواجهات المستخدم المدمجة مع Node-Red.

ملحوظة

Uibuilder يؤدي إلى تحذير جودة في تدفقات بطاقة ScoreCard.

"عدد التبعيات" هو> 6 - وهذا يرجع إلى العدد الكبير من الميزات في Uibuilder ومن المتوقع. ومع ذلك ، فإن V7 لديه 7 تبعيات فقط. 1 من المقرر إزالة آخر في إصدار مستقبلي.

تثبيت

من الأفضل تثبيت UiBuilder باستخدام Manager Node-Red's Palette.

التثبيت اليدوي والإصدارات الأخرى

للتثبيت يدويًا ، من سطر الأوامر على خادم العقدة الأحمر:

 cd ~ /.node-red
npm install node-red-contrib-uibuilder

لتثبيت الإصدارات القديمة ، قدم رقم الإصدار الرئيسي:

 cd ~ /.node-red
npm install node-red-contrib-uibuilder@v5

لتثبيت فروع التطوير ، يرجى التثبيت من Github. أسماء الفروع هي أرقام الإصدار المستقبلية ، تحقق من github للفروع المتاحة:

 cd ~ /.node-red
npm install totallyinformation/node-red-contrib-uibuilder#v7.1.0

ستحتاج إلى إعادة تشغيل Node-Red إذا تم التثبيت يدويًا.

التحديثات

يحتوي changelog الحالي على جميع التغييرات وتفاصيل المتطلبات لكل إصدار.

يمكن العثور على التغييرات القديمة في مستندات التغيير السابقة: Changelog-V5 و Changelog-V5 و Changelog-V3/V4 و Changelog-V2 و Changelog-V2.

ابدء

بمجرد التثبيت ، فإن ما يلي هو تدفق بسيط نموذجي للاستمرار.

1. إضافة عقدة uibuilder . افتح إعداداته وأعطيه "عنوان URL" يستخدم كاسم تحديد. أغلق الإعدادات وانقر على زر النشر.
2. أعد فتح إعدادات عقدة uibuilder وانقر فوق الزر "فتح" لرؤية صفحة الويب الناتجة.

أنت الآن مستعد لتحرير HTML/JavaScript/CSS في الواجهة الأمامية إذا كنت ترغب في إضافة منطق في العقدة لتوفير مدخلات ومخرجات معالجة. يمكنك أيضًا استخدام ميزات UiBuilder بدون رمز لإنشاء واجهة المستخدم الخاصة بك أيضًا أو بدلاً من ذلك.

يرجى الاطلاع على الإرشادات الأولى في الوثائق ومقدمة الفيديو لمزيد من المساعدة للبدء. جرب أيضًا تدفقات المثال المدمج.

أمثلة

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

توفر ميزة القوالب في UiBuilder رمزًا أماميًا للعمل من مختلف التكوينات.

يمكن العثور على أمثلة أخرى على موقع Flows Node Red و Wiki Uibuilder. انظر أيضًا الأسئلة الشائعة وأجبت على الأسئلة في منتدى Node-Red.

الوثائق والروابط الأخرى

يرجى الرجوع إلى موقع الوثائق على الويب. يمكن أيضًا الوصول إلى هذا من داخل عقد Uibuilder حتى بدون اتصال بالإنترنت.

هناك مكتبة من البرامج التعليمية "الرسمية" على YouTube. أنتج قوم آخرون أيضًا محتوى متعلق بـ UiBuilder.

الأسئلة والقضايا والاقتراحات

أفضل مكان لطرح الأسئلة أو مناقشة التحسينات المحتملة هو منتدى Red Node.

بدلاً من ذلك ، استخدم سجل قضايا GitHub لزيادة المشكلات أو الاقتراحات والتحسينات المساهمة وصفحة مناقشات GitHub للأسئلة العامة والاقتراحات ، إلخ.

روابط أخرى

• Uibuilder للعقدة الأحمر

  • ❓ الأفكار والأسئلة والمساعدة العامة-اطرح سؤالك في منتدى العقدة-باستخدام علامة العقدة-Contrib-Uibuilder
  • ؟ الوثائق - انتقل إلى أحدث الوثائق
  • ؟
  • ويكي - المزيد من الوثائق والأمثلة
  • مثال على القالب الخارجي Svelte - في حال كنت ترغب في إنشاء تطبيق Svelte الخاص بك
  • مثال قالب خارجي بسيط - في حالة رغبتك في إنشاء قالب خارجي خاص بك
  • امتداد UiBuilder Uplot - مخططات مفيدة ولكنها توضح أيضًا كيفية بناء امتدادك الخاص
  • ؟ وحدة معالج الأحداث التي يستخدمها UiBuilder - حتى تتمكن من رؤية بعض الأعمال الداخلية

• ؟ وحدة مكتبة واجهة المستخدم المستخدمة من قبل UiBuilder - يمكن استخدامها مستقلة لتحويل JSON القياسي للاتصالات إلى HTML

• ؟ عقدة-ريد-كونتريب-العقد-العقد للاستفادة من مكتبة معالجة التاريخ/الوقت في MomentJS في Node-Red

• ؟ اختبار العقد لـ Node-Red-بعض العقد الاختبار لـ Node-Red تساعدك على فهم كيفية عمل كل شيء

• ؟ Hotnipi Gauge Web Component - مكون مقياس جميل المظهر حقًا. يعمل مع Node-Red أو Uibuilder أو مستقلة

• ؟ مكونات ويب تجريبية-لديك بعض التحسينات المحددة للعقدة والأحمر

• ؟ GRAY GROUPER - وظيفة مستقلة لإعادة تشكيل مجموعة من الكائنات

غاية

الغرض من uibuilder هو:

• دعم الطرق السهلة لإنشاء وتسليم تطبيقات الويب التي تعتمد على البيانات وصفحات الويب (المعروفة أيضًا باسم مستخدمي الويب).
• كن قناة بين تطبيقات ويب واجهة المستخدم (المتصفح) الواجهة الأمامية (المتصفح).
• يكون إطار واجهة المستخدم اللاأدري. لا توجد حاجة إلى إطار عمل لاستخدام Uibuilder ولكنه سيعمل معهم حيث يرغب. يهدف UiBuilder إلى تقليل متطلبات الإطار من خلال تسهيل العمل مع الفانيليا HTML/CSS.
• توفير معايير الواجهة/البيانات لتبادل البيانات وعناصر التحكم بين Node-Red وصفحات الويب.
• قم بتمكين إنشاء وإدارة تطبيقات الويب المتعددة من مثيل عصبي واحد.
• قلل من كمية الكود الأمامي (HTML/JavaScript) اللازمة لإنشاء تطبيق ويب وإدارته.
• قلل من المعرفة المطلوبة لإنشاء تطبيقات ويب موثوقة يمكن الوصول إليها من خلال توفير ميزات منخفضة الرمز وحظر الرمز.
• اجعل من السهل تثبيت وخدمة المكتبات الأمامية لدعم تطوير تطبيقات الويب الأكثر تعقيدًا.

سمات

الميزات الأساسية لـ UiBuilder:

• قدر الإمكان ، يستخدم فقط الفانيليا ، HTML الأصلي ، CSS و JavaScript. بخلاف عميل Socket.io للاتصالات (التي يتم خبزها في المكتبة الأمامية) ، لا توجد حاجة إلى مكتبات أمامية أخرى. يبقى Uibuilder أقرب ما يمكن إلى HTML الأصلي لتجنب مشاكل التوافق في المستقبل. ومع ذلك ، فإنه يهدف إلى جعل التفاعل مع HTML الأصلي أسهل.
• العقد لتمكين ترجمة رمز الصفر لبيانات الإدخال إلى عناصر ويب قابلة للاستخدام ويمكن الوصول إليها.
• القدرة على واجهة المستخدم المنخفضة الرمز ، التي تعتمد على التكوين (تعتمد على البيانات). إنشاء إطار عمل لوصف واجهة المستخدم والترجمة إلى التعليمات البرمجية الفعلية دون الحاجة إلى كتابة التعليمات البرمجية.
• قناة الاتصالات ذات الاتجاهين بين خادم Node-Red (خلفي) وواجهة المستخدم الأمامية.
• عقدة حمراء العقدة لتكون بمثابة محور الاتصالات مع العقد الأخرى لسهولة الاستخدام الإضافية.
• المكتبة الأمامية إلى: القيام الأجزاء المعقدة من الاتصالات في متصفح العميل ؛ اجعل معالجة واجهة المستخدم أسهل وأكثر اتساقًا ؛ اجعل من السهل إعادة البيانات إلى Node-Red حسب الحاجة (سواء تلقائيًا أو يدويًا).
• من السهل استخدام القوالب وأمثلة للرمز الأمامي لتمكين الأشخاص من بدء تشغيل سريع لإنشاء تطبيقات الويب.
• إدارة وخدمة حزم NPM التي توفر المكتبات الأمامية قابلة للاستهلاك بسهولة عن طريق الكود الأمامي.
• تحرير التعليمات البرمجية الأمامية من محرر Node-Red (مصمم للتغييرات الصغيرة ، استخدم أدوات تطوير الويب بشكل عام).
• العديد من خيارات الخادم الوسيطة و API للحصول على إمكانيات مخصصة إضافية.
• القدرة على التخزين المؤقت للسماح للعملاء بالانضمام حديثًا بتلقي أحدث البيانات والتكوينات. الانضمام/ترك العملاء إنشاء إشعارات في Node-Red.
• جهاز توجيه خفيف الوزن في الواجهة الأمامية لإنشاء تطبيقات من صفحة واحدة.
• لديك العديد من مثيلات عقدة uibuilder كما تريد. يسمح كل مثيل بإنشاء العديد من صفحات الويب والمرحلين الفرعيين لسهولة الإدارة.
• يوفر كل مثيل عقدة uibuilder قناة اتصالات خاصة ثنائية الاتجاه بين خادم Node-Red (نهاية النهاية) ورمز واجهة المستخدم للمتصفح (الواجهة الأمامية).
• يدعم استخدام سير عمل تطوير الويب القياسي.
• يسمح بإنشاء خدمة ويب مخصصة لتسهيل الأمان المستقل.

لا رمز واجهة المستخدم

تواصل UiBuilder توسيع قدراتها بدون رمز. توفر العقد uib-element و uib-tag و uib-update طرقًا بدون رمز لإنشاء وتحديث واجهة المستخدم التي تعتمد على البيانات.

يأخذ uib-element البيانات والمخرجات البسيطة بيانات التكوين. يمكن بعد ذلك إرسال هذا إلى الواجهة الأمامية عبر عقدة uibuilder . بدلاً من ذلك ، يمكن حفظه والنتيجة المستخدمة في الحمل الأولي. تتوفر العديد من الخيارات البسيطة مثل الجداول والقوائم في Uibuilder v6.1 ، وسيتم توفير عناصر هياكل إضافية في الإصدارات المستقبلية. يأخذ العميل الأمامي UiBuilder معلومات التكوين ويقوم بإنشاء عناصر HTML ديناميكيًا ويقوم بإدراجها إلى صفحة الويب (أو يزيل/تحديثات حسب الحاجة).

على الرغم من أن هذا ليس هو نهج المعالجة الأكثر كفاءة (نظرًا لأن التحديثات تحل محل العنصر بأكمله والذي يمكن أن يكون كبيرًا جدًا لأشياء مثل الجداول الكبيرة) ، فهي فعالة للغاية من منظور التأليف. لذلك توفر عقدة uib-update نهجًا أكثر استهدافًا لتحديث وتغيير سمات محددة ومحتوى "فتحة" للعناصر.

ثم تتيح لك عقدة uib-tag إنشاء أي عنصر HTML واحد ، وبالتالي تغطي جميع الأشياء الكثيرة التي قد لا uib-element (بعد). يعمل هذا حتى مع مكونات الويب التي هي التحسينات الأصلية للفانيليا HTML/JavaScript إلى HTML.

من المهم أن نلاحظ أنه لا توجد حاجة إلى أطر عمل خارجية ، مثل Vuejs أو React لهذا النهج! يستخدم كل شيء HTML و JavaScript و CSS تحت الجلد وبالتالي يتوافق مع معايير الويب الحالية والمستقبلية .

واجهة المستخدم منخفضة الرمز

البيانات التي تخرجها uib-element هي تنسيق يمكنك استخدامه في التدفقات الخاصة بك في Node-Red وحتى في الكود الأمامي إذا رغبت في ذلك. يصف مجموعة من عناصر واجهة المستخدم HTML ولكن لا تحتاج إلى كتابة رمز HTML فعليًا. مخطط التكوين مرن للغاية ويسمح لك حتى بتحميل بيانات التكوين ، و HTML ، والبرامج النصية ، ووحدات/مكونات ECMA الجديدة من الملفات الخارجية.

تم تصميم وظائف المخطط ووظائف واجهة المستخدم المدمجة في العميل الأمامي خصيصًا للعمل مع معايير HTML الحالية والمستقبلية من أجل تجنب أنواع المشكلات التي تمت مواجهتها عادة عند استخدام أطر الواجهة الأمامية من الطرف الثالث (مثل تغييرات الإصدار الرئيسية التي تعرض إعادة كتابة جميع أدواتك). لذلك يجب دعم وحدات ES ومكونات ECMA وإصدارات ECMA المستقبلية.

مكتبة ui.js متاحة الآن أيضًا لأي شخص لاستخدامه في مشاريعه الخاصة ويعمل بشكل كامل بدون uibuilder. كما أنه مخبوز في عقدة uib-html التي تحول تكوينات الرمز المنخفض إلى HTML من داخل العقدة.

الاتجاه المستقبلي

سيستمر UiBuilder في أن يكون مستقلاً عن الأطر الأمامية على الرغم من أنه سيظل متوافقًا أيضًا قدر الإمكان بحيث يمكن استخدام أي إطار عمل مرغوب فيه.

• سيستمر في الحصول على المزيد من العناصر التي تم بناؤها مسبقًا.
• ستحصل على تحكم محسّن على بنية مجلد الجذر المثيل والقدرة على تنفيذ البرامج النصية npm run المحددة في package.json .
• المزيد من مقاطع الفيديو!

التركيز على المدى الطويل

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

• ستستمر جودة الوثائق في التحسن.
• سيتم تقليل عدد تبعيات الوحدة النمطية الثالثة. بدءًا من الإزالة النهائية لـ fs-extra لصالح مكتبة FS المذابة الأصلية. على الأرجح من قبل arun .
• بمجرد أن تكون Node.js V18 أو 20 هي القاعدة ، فمن المحتمل أن يتم إعادة تمثيل الكود في حزم فرعية متعددة في REPO أحادي.

التفاصيل والفوائد ميزة

• تم تصميمه كبديل للوحة القيادة الرسمية للعقدة. بدون النفقات العامة والقيود.
• التحكم في كل شيء من واجهة المستخدم Node-Red. قم بتحرير ملفات الموارد الأمامية الخاصة بك ، وإدارة الحزم الأمامية. لا حاجة للوصول إلى سطر أوامر الخوادم.
• إدارة قوالب بدء التشغيل. يتم توفير قوالب داخلية لـ Vanilla HTML و Svelte و Vuejs (V2 & V3) و Vuejs/Bootstrap-vue. قوالب تحميل من المستودعات الأخرى عبر Degit . يجعل من السهل مشاركة القوالب التي توفر تطبيقًا كاملاً أو مجرد التعامل مع Boilerplate.
• لديك العديد من واجهات المستخدم المخصصة كما تريد. هناك حاجة إلى عقدة واحدة فقط لكل نقطة دخول. استخدم عقد الارتباط لإرسال البيانات من أجزاء أخرى من تدفقاتك. يمكن أن تحتوي نقطة الدخول على صفحات ويب متعددة.
• لديه واجهة تحكم منفصلة عن واجهة الرسائل. تعرف على عندما تتصل علامة تبويب المتصفح أو تفصلها ، وإرسال البيانات المخزنة مؤقتًا ، والمزيد.
• توفير معرف عميل مستقر يحدد ملف تعريف متصفح معين حتى يتم إعادة تشغيله. يتم توفير tabid الذي يحدد علامة تبويب متصفح محددة على جهاز عميل.
• قدم معلومات إلى Node-Red حول العميل الذي يرسل MSG بحيث يمكن للأمان والمعالجة الأخرى تحديد العميل والمستخدم وما إلى ذلك.
• يمكن أن يكون وزنه أخف بكثير وأكثر ودية من الأجهزة المحمولة من لوحة القيادة الرسمية للعقدة.
• استخدم أي إطار عمل أمامي تريده. ما عليك سوى التثبيت عبر مدير المكتبة المدمج.
• استخدم بدون أي إطار عمل أمامي إذا كنت تفضل ذلك. اجعله خفيفًا وبسيطًا. جرب هذا مع القالب "الفارغ" وعقدة uib-element .
• توفر المكتبات الأمامية المضمنة ( uibuilder.iife.js ، uibuilder.esm.js ) التوصيلية للتعامل مع الأحداث الحمراء و MSG جنبًا إلى جنب مع بعض وظائف فائدة المساعدة.
• اكتب HTML و CSS و JavaScript لتحديد واجهة المستخدم الأمامية المثالية لتلبية احتياجاتك. أو تحديده باستخدام وصف تكوين JSON.
• قم بتحرير رمز الواجهة الأمامية المخصصة من داخل محرر Node-Red. إعادة التحميل التلقائي لعملائك على التغييرات على الكود. عظيم للتنمية السريعة. لاحظ أن هذا تم تصميمه لإجراء تعديلات سريعة ، فمن المستحسن استخدام أدوات تطوير الويب العادية الخاصة بك لتحرير أكبر.
• لا يحتاج إلى غلاية تقريبًا في الرمز الأمامي الخاص بك من أجل العمل.
• فهرس اختياري صفحة ويب قائمة الملفات المتاحة.
• يتم تضمين صفحتين على شبكة الإنترنت معلومات مفصلة لمساعدة المؤلفين على فهم مكان كل شيء وما هو متاح.
• يستخدم خادمات الويب ExpressJS الخاصة بـ Node-Red افتراضيًا. قم بالتبديل إلى خادم ExpressJS المخصص إذا رغبت في ذلك. عند استخدام خادم مخصص ، يمكن أن تتضمن الصفحات أيضًا templating من جانب خادم EJB.
• يحتوي على الوسيطة لـ ExpressJS (لخدمات الويب) و Socket.io (للاتصالات ، سواء عند الاتصال الأولي أو لكل متر) بحيث يمكنك إضافة ميزات مخصصة خاصة بك بما في ذلك الأمان.
• يمكن إنشاء واجهة برمجة تطبيقات مخصصة لكل مثيل UiBuilder.
• استخدم مكتبة ui.js في مشاريعك الخاصة!

المساهمة

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

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

يرجى الرجوع إلى الإرشادات المساهمة لمزيد من المعلومات.

يمكنك أيضًا دعم تطوير UiBuilder من خلال رعاية التطوير.

رعاية Github ، رعاية PayPal

الرعاة

• magicjf

المطورين/المساهمين

• جوليان نايت - المصمم والمؤلف الرئيسي.
• كولين لو - شكرا جزيلا للاختبار والتصحيحات وطلبات السحب.
• ستيف ريكوس - شكراً جزيلاً على الاختبار والتصحيحات وأفكار الكود والتصميم.
• Ellie Lee - شكرًا جزيلاً على إصلاح PR MSGs المكررة.
• Thomas Wagner - شكرًا على التوجيه والعلاقات العامة على استخدام مجلد المشاريع إذا نشط.
• ARLENA DERKSEN - شكرًا على الاقتراحات ، شيكات الأخطاء والعدد رقم 59/PR #60.
• Cflurin - شكرًا على مثال ذاكرة التخزين المؤقت.
• Scott Page - Indysoft - شكرًا على العدد رقم 73/PR #74.
• Stephen McLaughlin - Steve -Mcl - شكرًا على الإصلاح للمسألة رقم 71 وعدد فكرة تحسين فكرة التعزيز رقم 102.
• سيرجيو ريوس - شكرًا على إصدار الإبلاغ رقم ​​121 وتقديم PR #122 كإصلاح.
• Thorsten von Eicken - شكرًا على توفير PR #131 لتحسين معالجة CORS لـ Socket.io.
• Meeki007 - شكرًا على توفير تحسينات في الوثائق وإصلاحات الرمز.
• Scott - Talltechdude - شكرًا على توفير PR #170.
• Calum Knott - شكرًا على شعار Node Up Blue.
• Harold Peters Inskipp - شكرًا على أمثلة التسجيل.
• DCZYSZ - شكرًا على إصدار الإبلاغ رقم ​​186 والمساعدة في العمل من خلال علة Async المعقدة.
• Colin J (MudWalkerCj) - شكرًا للمساعدة في الوثائق.
• ماركوس ديفيز - شكرا جزيلا على التشجيع وعلى شعار 3D.
• Fabio Marzocca (Fmarzocca)) - شكرًا جزيلاً للمساعدة في تصميم واختبار مكتبة Ubibrouter Front -end.

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

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