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构建。

这是更安全的机制，因为只有网守服务器需要知道客户端的秘密。