noflo ui

NOFLO開發環境

NOFLO開發環境是一個具有離線能力的客戶端Web應用程序，可幫助用戶構建並運行由NOFLO，MSGFLO，IMGFLO和MICROFLO等FBP兼容系統構建的基於流程的程序。 NOFLO開發環境可根據MIT許可獲得。

1205 Kickstarter支持者使該項目成為可能。檢查項目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。可以例如Webockets的ws:// URL，也可以是WEBRTC的信號URL和連接標識符
• secret ：用於與運行時通信的秘密

這些URL可以顯示在命令行輸出中，也可以通過其他機制提供給用戶。查看通過NFC標籤以實時模式打開應用程序的視頻演示。

添加新的運行時信息

可以選擇添加組件模板，語法突出顯示和新運行時間的“啟動”鏈接。

1. 添加一個新的yaml文件，其中包含運行時信息為./runtimeinfo/myruntime.yaml 。例子
2. 將其包括在./runtimeinfo/index.js中
3. 提交更改
4. 發送拉動請求，所以每個人都受益！

NOFLO UI的開發

僅當您想攻擊Noflo UI本身時才有必要。不是在使用FBP製作應用程序的必要條件。

通過Docker

已經提供了可用於輕鬆構建/運行NOFLO UI的Dockerfile。您還可以從Docker Hub獲得自動構建的圖像。

建造

docker build -t noflo-ui . 

跑步

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

構建並運行服務器後，您可以在http：// localhost：9999/index.html訪問UI

直接地

為了能夠在Noflo UI上工作：

• 該存儲庫的結帳
• 工作節點的安裝
• NPM軟件包管理器的至少版本3

轉到結帳文件夾並運行：

 $ npm install

這將為您提供所有所需的開發依賴性。現在，您可以通過運行來構建新版本：

 $ npm run build

您必須在Windows上以管理員的身份運行此命令。

使用網絡服務器使用UI，然後在Web瀏覽器中打開URL。例子：

 $ npm start

如果您願意，可以啟動一個WebPack Dev Server進程，該進程將在一個文件中之一更改時進行重建：

 $ npm run dev

構建並運行服務器後，您可以在http://localhost:9999/index.html訪問UI

除此項目外，另一個感興趣的存儲庫是用於編輯流的圖形圖編輯器窗口小部件。

建築學

在高水平上，NOFLO-UI架構遵循適合Noflo的Redux慣例。這是主要數據流的樣子：

 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. 捕獲動作並觸發新動作

中間件是處理與應用程序狀態相關的副作用的地方。這可以包括與外部Web服務，FBP Runtime Communications交談，以及將數據加載或保存到本地索引。中間件確實會接收當前的應用程序狀態並可以從中讀取，但是它們只能通過創建新操作來操縱狀態。

一些中間件也可以充當發電機，基於外部輸入創建新操作。

此博客文章進一步解釋了中間件方法。

還原器

還原器的工作是接收措施並更改應用程序狀態。還原器實際上必須是純粹的功能，其中相同的輸入狀態和動作組合始終會產生相同的新狀態。

看法

應用程序的視圖層被實現為聚合物元素。應用視圖接收還原器產生的狀態對象。

應用程序視圖中的用戶交互不得進行直接狀態更改。相反，應用程序視圖可以通過啟動聚合物事件觸發新操作。然後，這些由中間件和還原器處理，從而導致狀態改變。

身份驗證和自定義URL

Noflo UI正在使用GitHub進行身份驗證。我們有一個默認應用程序配置為在http://localhost:9999 。如果您想從其他URL使用NOFLO UI，則需要向其註冊自己的OAuth應用程序。確保匹配GitHub的重定向URL策略。

要啟用您自己的OAuth應用程序，請設置以下環境變量並重建Noflo UI：

• $NOFLO_OAUTH_CLIENT_ID ：github oauth應用程序的客戶端ID
• $NOFLO_OAUTH_CLIENT_REDIRECT ：github oauth應用程序的重定向URL

Oauth的秘密

為了處理登錄過程的OAuth客戶端秘密部分，有兩個選項：

內置的Oauth秘密

這是本地NOFLO UI開發的簡單選擇。只需通過$NOFLO_OAUTH_CLIENT_SECRET Environment變量將OAuth客戶端秘密構建到NOFLO UI應用程序中。

注意：這意味著任何可以訪問此NOFLO UI構建的人都可以閱讀您的客戶秘密。永遠不要使用世界上可訪問的URL來做到這一點。但是，對於僅本地開發的建造來說是可以的。

網守

您可以部署Gatekeeper Node.js應用程序的實例來為您處理OAuth代幣交換。使用$NOFLO_OAUTH_GATE環境變量，將Gatekeeper位置配置為NOFLO UI構建。

這是更安全的機制，因為只有網守服務器需要知道客戶端的秘密。