noflo ui

بيئة تنمية نوفلو

بيئة تطوير NOFLO هي تطبيق ويب قادر على عدم الاتصال بالإنترنت ، ويساعد المستخدمين على إنشاء وتشغيل البرامج المستندة إلى التدفق المصممة باستخدام أنظمة متوافقة مع FBP مثل Noflo و Msgflo و Imgflo و Microflo. بيئة تطوير Noflo متوفرة بموجب ترخيص معهد ماساتشوستس للتكنولوجيا.

أصبح هذا المشروع ممكنًا من قبل 1205 من مؤيدي كيك ستارتر. تحقق من مشروع changelog للحصول على ميزات جديدة وتغييرات أخرى.

نسخة مستضافة

FlowHub هي نسخة مستضافة من بيئة تطوير Noflo.

إذا كنت ترغب فقط في إنشاء تطبيقات ، نوصيك باستخدام هذا الإصدار بدلاً من إنشاء مصدرك الخاص.

الاستخدام مع أنظمة FBP مختلفة

على الرغم من أن واجهة المستخدم نفسها مبنية على نوفلو ، إلا أنها لا تتحدث مباشرة مع نوفلو لتشغيل الرسوم البيانية وبناءها. بدلاً من ذلك ، يستخدم بروتوكول شبكة FBP والذي يمكّنه من التحدث إلى أي نظام FBP متوافق. من المعروف حاليًا أكثر من 5 أوقات مختلفة.

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

تسجيل وقت التشغيل للمستخدم

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

 http://app.flowhub.io#runtime/endpoint?protocol%3Dwebsocket%26address%3Dws%3A%2F%2F127.0.0.1%3A3569

تشمل المعلمات المدعومة لنقطة النهاية:

• protocol : نقل بروتوكول FBP لاستخدامه للاتصال. تتضمن القيم المحتملة websocket و iframe و webrtc
• address : عنوان URL لاستخدامه للاتصال. يمكن أن يكون على سبيل المثال ws:// url لـ websockets ، أو عنوان URL ومعرف الاتصال لـ webrtc
• secret : السر للاستخدام للتواصل مع وقت التشغيل

يمكن عرض عناوين URL هذه على إخراج سطر الأوامر ، أو توفيرها للمستخدم عبر آلية أخرى. شاهد عرضًا فيديو لفتح التطبيق في الوضع المباشر عبر علامة NFC.

إضافة معلومات جديدة في وقت التشغيل

يمكن للمرء اختياريا إضافة قوالب مكون ، وتمييز بناء الجملة ورابط "Get" لأوقات التشغيل الجديدة.

1. إضافة ملف yaml جديد مع معلومات وقت التشغيل As ./runtimeinfo/myruntime.yaml . مثال
2. تضمينه في ./runtimeinfo/index.js
3. ارتكاب التغييرات
4. إرسال طلب سحب ، لذلك الجميع يستفيد!

تطوير نوفلو واجهة المستخدم

ضروري فقط إذا كنت تريد اختراق نوفلو واجهة المستخدم نفسها. ليس منسحة لصنع التطبيقات مع FBP.

عبر Docker

تم توفير dockerfile يمكن استخدامها بسهولة لبناء/تشغيل واجهة مستخدم Noflo بسهولة. يمكنك أيضًا الحصول على صورة مصممة تلقائيًا من Docker Hub.

يبني

docker build -t noflo-ui . 

يجري

docker run -d -p 9999:80 noflo-ui

بمجرد إنشائها وتشغيل الخادم ، يمكنك الوصول إلى واجهة المستخدم على http: // localhost: 9999/index.html

مباشرة

لتكون قادرًا على العمل على واجهة مستخدم Noflo التي تحتاجها:

• الخروج من هذا المستودع
• تثبيت Node.js
• على الأقل الإصدار 3 من مدير حزمة NPM

انتقل إلى مجلد الخروج وتشغيله:

 $ npm install

سيوفر لك ذلك جميع التبعيات التنمية المطلوبة. الآن يمكنك بناء نسخة جديدة عن طريق التشغيل:

 $ npm run build

يجب عليك تشغيل هذا الأمر كمسؤول على Windows.

خدمة واجهة المستخدم باستخدام خادم الويب ، ثم افتح عنوان URL في متصفح الويب. مثال:

 $ npm start

إذا كنت تفضل ذلك ، يمكنك بدلاً من ذلك بدء عملية خادم WebPack Dev التي ستقوم بإعادة البناء كلما تغير أحد الملفات:

 $ npm run dev

بمجرد إنشائها وتشغيل الخادم ، يمكنك الوصول إلى واجهة المستخدم على http://localhost:9999/index.html

بالإضافة إلى هذا المشروع ، فإن مستودع الاهتمام الآخر هو عنصر واجهة تحرير الرسم البياني في Graph المستخدمة في تدفقات التحرير.

بنيان

على المستوى العالي ، تتبع بنية Noflo-UI اتفاقيات Redux التي تم تكييفها مع Noflo. إليكم كيف يبدو تدفق البيانات الرئيسي:

 Store OUT -> IN Middleware     # Store sends actions together with application state to middleware
Middleware NEW -> ACTION Store # Middleware can trigger new actions
Middleware PASS -> IN Reduce   # Actions go from middleware to reducers
Reduce OUT -> STATE Store      # Reducers produce a new state object that gets sent to store
Reduce OUT -> STATE View       # State also goes to the view
View ACTION -> ACTION Store    # View can trigger actions

التدفق الفعلي أكثر تفصيلًا. يمكنك عرض وتحريره في graphs/main.fbp .

ملحوظة: الطوائف الموضحة أدناه هي الهندسة المعمارية التي نهدف إليها. نحن نعيش أجزاء من النظام لتناسب هذه البنية أثناء تعديلها. يجب تنفيذ جميع الوظائف الجديدة بعد هذه البنية.

محل

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

الوسيطة

البرامج الوسيطة Noflo-UI هي مكونات أو رسومات بيانية يمكنها التفاعل مع إجراءات معينة. يمر كل إجراء من خلال سلسلة الأدوات الوسطى ، ولكل برامج الوسيطة خيارين للتعامل مع الإجراء:

1. تمرير الإجراء دون تعديله
2. التقاط الإجراء واتخاذ إجراءات جديدة (ق)

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

يمكن أن تعمل بعض البرامج الوسيطة أيضًا كمولدات ، مما يؤدي إلى إنشاء إجراءات جديدة بناءً على مدخلات خارجية.

يتم شرح نهج الوسيطة بشكل أكبر في منشور المدونة هذا.

المخفضات

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

منظر

يتم تطبيق طبقة عرض التطبيق كعناصر بوليمر. تتلقى طريقة عرض التطبيق كائن الحالة الذي تنتجه المخفضون.

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

المصادقة وعنوان URL المخصصة

تستخدم Noflo UI GitHub للمصادقة. لدينا تطبيق افتراضي تم تكوينه للعمل على http://localhost:9999 . إذا كنت ترغب في خدمة واجهة مستخدم Noflo الخاصة بك من عنوان URL مختلف ، فأنت بحاجة إلى تسجيل تطبيق OAuth الخاص بك معهم. تأكد من مطابقة سياسة عنوان URL لإعادة توجيه جيثب.

لتمكين تطبيق OAuth الخاص بك ، قم بتعيين متغيرات البيئة التالية وإعادة بناء Noflo UI:

• $NOFLO_OAUTH_CLIENT_ID : معرف العميل من تطبيق github oauth الخاص بك
• $NOFLO_OAUTH_CLIENT_REDIRECT : إعادة توجيه عنوان URL لتطبيق github oauth الخاص بك

أسرار OAUTH

للتعامل مع الجزء السري للعميل OAUTH من عملية تسجيل الدخول ، هناك خياران:

سر OAUTH المدمج

هذا هو الخيار السهل لتطوير واجهة مستخدم Noflo المحلية. ما عليك سوى إنشاء سر عميل Oauth في تطبيق Noflo UI عن طريق إعداده عبر متغير $NOFLO_OAUTH_CLIENT_SECRET .

ملاحظة: هذا يعني أن أي شخص لديه حق الوصول إلى بناء واجهة مستخدم Noflo هذا سيتمكن من قراءة سر العميل. لا تفعل هذا أبدًا بعنوان URL الذي يمكن الوصول إليه عالميًا. من الجيد أن تبني التنمية المحلية فقط.

حارس البوابة

يمكنك نشر مثيل لتطبيق Gatekeeper Node.js للتعامل مع تبادل رمز OAUTH لك. قم بتكوين موقع Gatekeeper إلى بناء Noflo UI الخاص بك مع $NOFLO_OAUTH_GATE البيئة المتغير.

هذه هي الآلية الأكثر أمانًا ، لأن خادم Gatekeeper فقط يحتاج إلى معرفة سر العميل.