noflo ui

สภาพแวดล้อมการพัฒนา Noflo

สภาพแวดล้อมการพัฒนา NOFLO เป็นเว็บแอปพลิเคชั่นเว็บที่มีความสามารถแบบออฟไลน์ที่ช่วยให้ผู้ใช้สามารถสร้างและเรียกใช้โปรแกรมที่ใช้การไหลที่สร้างขึ้นด้วยระบบที่เข้ากันได้กับ FBP เช่น NOFLO, MSGFLO, IMGFLO และ Microflo สภาพแวดล้อมการพัฒนา NOFLO มีอยู่ภายใต้ใบอนุญาต MIT

โครงการนี้เกิดขึ้นได้โดยผู้สนับสนุน Kickstarter 1205 คน ตรวจสอบ Project Changelog สำหรับคุณสมบัติใหม่และการเปลี่ยนแปลงอื่น ๆ

เวอร์ชันโฮสต์

FlowHub เป็นรุ่นโฮสต์ของสภาพแวดล้อมการพัฒนา NOFLO

หากคุณต้องการสร้างแอปพลิเคชันเราขอแนะนำให้คุณใช้เวอร์ชันนี้แทนที่จะสร้างของคุณเองจากแหล่งที่มา

การใช้งานกับระบบ FBP ที่แตกต่างกัน

แม้ว่า UI นั้นสร้างขึ้นด้วย Noflo แต่ก็ไม่ได้พูดคุยโดยตรงกับ Noflo สำหรับการวิ่งและสร้างกราฟ แต่จะใช้โปรโตคอลเครือข่าย 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 SignAller และตัวระบุการเชื่อมต่อสำหรับ WEBRTC
• secret : ความลับในการใช้ในการสื่อสารกับรันไทม์

URL เหล่านี้สามารถแสดงในเอาต์พุตบรรทัดคำสั่งหรือให้กับผู้ใช้ผ่านกลไกอื่น ๆ ดูวิดีโอสาธิตการเปิดแอพในโหมดสดผ่านแท็ก NFC

การเพิ่มข้อมูลรันไทม์ใหม่

หนึ่งสามารถ เลือก เพิ่มเทมเพลตส่วนประกอบ, การไฮไลต์ไวยากรณ์และลิงค์ 'เริ่มต้น' สำหรับ runtimes ใหม่

1. เพิ่มไฟล์ Yaml ใหม่พร้อมข้อมูลรันไทม์เป็น ./runtimeinfo/myruntime.yaml ตัวอย่าง
2. รวมไว้ใน ./runtimeinfo/index.js
3. กระทำการเปลี่ยนแปลง
4. ส่งคำขอดึงเพื่อให้ทุกคนได้รับประโยชน์!

การพัฒนา Noflo UI

จำเป็นก็ต่อเมื่อคุณต้องการแฮ็ค Noflo UI เอง ไม่จำเป็นสำหรับการสร้างแอพด้วย FBP

ผ่าน Docker

มีการจัดให้มี Dockerfile ที่สามารถใช้ในการสร้าง/เรียกใช้ Noflo UI ได้อย่างง่ายดาย นอกจากนี้คุณยังสามารถรับภาพที่สร้างขึ้นโดยอัตโนมัติจาก Docker Hub

สร้าง

docker build -t noflo-ui . 

วิ่ง

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

เมื่อสร้างขึ้นและเซิร์ฟเวอร์กำลังทำงานคุณสามารถเข้าถึง UI ได้ที่ http: // localhost: 9999/index.html

โดยตรง

เพื่อให้สามารถทำงานกับ noflo UI ที่คุณต้องการ:

• การชำระเงินของที่เก็บนี้
• การติดตั้ง Node.js ที่ใช้งานได้
• อย่างน้อยเวอร์ชัน 3 ของตัวจัดการแพ็คเกจ NPM

ไปที่โฟลเดอร์ชำระเงินแล้วเรียกใช้:

 $ npm install

สิ่งนี้จะช่วยให้คุณได้รับการพัฒนาที่จำเป็นทั้งหมด ตอนนี้คุณสามารถสร้างเวอร์ชันใหม่ได้โดยการรัน:

 $ npm run build

คุณต้องเรียกใช้คำสั่งนี้ในฐานะผู้ดูแลระบบบน Windows

ให้บริการ UI โดยใช้เว็บเซิร์ฟเวอร์จากนั้นเปิด URL ในเว็บเบราว์เซอร์ ตัวอย่าง:

 $ npm start

หากคุณต้องการคุณสามารถเริ่มกระบวนการ WebPack Dev Server ที่จะทำการสร้างใหม่เมื่อใดก็ตามที่ไฟล์ใดไฟล์หนึ่งเปลี่ยนไป:

 $ npm run dev

เมื่อสร้างขึ้นและเซิร์ฟเวอร์กำลังทำงานคุณสามารถเข้าถึง UI ได้ที่ http://localhost:9999/index.html

นอกเหนือจากโครงการนี้พื้นที่เก็บข้อมูลอื่น ๆ ที่น่าสนใจคือวิดเจ็ตตัวแก้ไขกราฟกราฟที่ใช้สำหรับการแก้ไขกระแส

สถาปัตยกรรม

ในระดับสูงสถาปัตยกรรม 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 และการโหลดหรือบันทึกข้อมูลไปยัง Local IdexedDB มิดเดิลแวร์จะได้รับสถานะแอปพลิเคชันปัจจุบันและสามารถอ่านได้ แต่พวกเขาจะจัดการกับสถานะโดยวิธีการสร้างการกระทำใหม่

มิดเดิลแวร์บางตัวสามารถทำหน้าที่เป็นเครื่องกำเนิดไฟฟ้าสร้างการกระทำใหม่ตามอินพุตภายนอก

วิธีการมิดเดิลแวร์มีการอธิบายเพิ่มเติมในโพสต์บล็อกนี้

ลดลง

งานของตัวลดคือการรับการกระทำและทำการเปลี่ยนแปลงสถานะแอปพลิเคชัน ตัวลดจะต้องเป็นฟังก์ชั่นที่บริสุทธิ์ซึ่งสถานะอินพุตและการกระทำที่เหมือนกันจะสร้างสถานะใหม่เดียวกันเสมอ

ดู

เลเยอร์มุมมองของแอปพลิเคชันถูกนำมาใช้เป็นองค์ประกอบพอลิเมอร์ มุมมองแอปพลิเคชันได้รับวัตถุสถานะที่ผลิตโดยตัวลด

การโต้ตอบของผู้ใช้ในมุมมองแอปพลิเคชันจะต้องไม่เปลี่ยนแปลงสถานะโดยตรง มุมมองแอปพลิเคชันสามารถกระตุ้นการกระทำใหม่โดยการยิงเหตุการณ์พอลิเมอร์ สิ่งเหล่านี้จะได้รับการประมวลผลโดยมิดเดิลแวร์และตัวลดทำให้สถานะเปลี่ยนแปลง

การรับรองความถูกต้องและ URL ที่กำหนดเอง

Noflo UI ใช้ GitHub เพื่อตรวจสอบสิทธิ์ เรามีแอปพลิเคชันเริ่มต้นที่กำหนดค่าให้ทำงานที่ http://localhost:9999 หากคุณต้องการให้บริการ NOFLO UI ของคุณจาก URL อื่นคุณต้องลงทะเบียนแอปพลิเคชัน OAuth ของคุณเอง ตรวจสอบให้แน่ใจว่าตรงกับนโยบาย URL เปลี่ยนเส้นทางของ GitHub

หากต้องการเปิดใช้งานแอปพลิเคชัน OAuth ของคุณเองให้ตั้งค่าตัวแปรสภาพแวดล้อมต่อไปนี้และสร้าง NOFLO UI: ใหม่:

• $NOFLO_OAUTH_CLIENT_ID : รหัสไคลเอนต์ของแอปพลิเคชัน GitHub Oauth ของคุณ
• $NOFLO_OAUTH_CLIENT_REDIRECT : เปลี่ยนเส้นทาง URL ของแอปพลิเคชัน GitHub Oauth ของคุณ

ความลับของ oauth

สำหรับการจัดการส่วนลับของลูกค้า OAuth ของกระบวนการเข้าสู่ระบบมีสองตัวเลือก:

Oauth Secret ในตัว

นี่เป็นตัวเลือกที่ง่ายสำหรับการพัฒนา Noflo UI ในท้องถิ่น เพียงสร้างความลับของไคลเอนต์ OAUTH ลงในแอพ NOFLO UI โดยการตั้งค่าผ่านตัวแปรสภาพแวดล้อม $NOFLO_OAUTH_CLIENT_SECRET

หมายเหตุ: นี่หมายความว่าทุกคนที่เข้าถึงการสร้าง NOFLO UI นี้จะสามารถอ่านความลับของลูกค้าของคุณได้ อย่าทำเช่นนี้กับ URL ที่เข้าถึงได้ระดับโลก มันเป็นเรื่องดีสำหรับการพัฒนาในท้องถิ่นเท่านั้น

ผู้รักษาประตู

คุณสามารถปรับใช้อินสแตนซ์ของแอป Gatekeeper Node.js เพื่อจัดการการแลกเปลี่ยนโทเค็น OAuth สำหรับคุณ กำหนดค่าตำแหน่ง Gatekeeper ให้กับ Noflo UI Build ของคุณด้วยตัวแปรสภาพแวดล้อม $NOFLO_OAUTH_GATE

นี่เป็นกลไกที่ปลอดภัยมากขึ้นเนื่องจากมีเพียงเซิร์ฟเวอร์ Gatekeeper เท่านั้นที่ต้องทราบความลับของไคลเอนต์