noflo ui
1.0.0
El entorno de desarrollo de NOFlo es una aplicación web con capacidad para el cliente con capacidad fuera de línea que ayuda a los usuarios a construir y ejecutar programas basados en flujo construidos con sistemas compatibles con FBP como Noflo, MSGFLO, IMGFLO y Microflo. El entorno de desarrollo de noflo está disponible bajo la licencia MIT.
Este proyecto fue posible posible por 1205 Kickstarter Backers. Consulte el proyecto ChangeLog en busca de nuevas características y otros cambios.
FlowHub es una versión alojada del entorno de desarrollo de Noflo.
Si solo desea crear aplicaciones, le recomendamos que use esta versión en lugar de construir la suya a partir de la fuente.
A pesar de que la UI en sí está construida con Noflo, no está hablando directamente con Noflo para ejecutar y construir gráficos. En cambio, está utilizando el protocolo de red FBP que le permite hablar con cualquier sistema FBP compatible. Actualmente se sabe que más de 5 tiempos de ejecución diferentes funcionan.
Al implementar el protocolo en su tiempo de ejecución, puede programarlo con Noflo UI. Si usa WebSockets o WebRTC como transporte, no necesita cambiar nada en Noflo UI. También puede agregar soporte de otros transportes.
La forma más fácil de pasar el usuario La información de conexión de su tiempo de ejecución es a través del modo en vivo . Con esto, los detalles de la conexión se pasan a la aplicación a través de parámetros de URL, como este:
http://app.flowhub.io#runtime/endpoint?protocol%3Dwebsocket%26address%3Dws%3A%2F%2F127.0.0.1%3A3569
Los parámetros compatibles para el punto final incluyen:
protocol : el transporte del protocolo FBP para usar para la conexión. Los valores posibles incluyen websocket , iframe y webrtcaddress : URL para usar para la conexión. Puede ser, por ejemplo ws:// URL para websockets, o el identificador de URL e conexión de firmante para WEBRTCsecret : secreto para usar para comunicarse con el tiempo de ejecuciónEstas URL se pueden mostrar en la salida de la línea de comando, o proporcionarse al usuario a través de otro mecanismo. Vea una demostración de video de abrir la aplicación en modo en vivo a través de una etiqueta NFC.
Opcionalmente, se puede agregar opcionalmente plantillas de componentes, resaltar de sintaxis y un enlace 'Comenzar' para nuevos tiempos de ejecución.
./runtimeinfo/myruntime.yaml . EjemploSolo necesario si quieres piratear noflo ui. No es necesario para hacer aplicaciones con FBP.
Se ha proporcionado un Dockerfile que se puede usar para construir/ejecutar fácilmente la UI de Noflo. También puede obtener una imagen construida automáticamente desde Docker Hub.
docker build -t noflo-ui . docker run -d -p 9999:80 noflo-uiUna vez que se construye y el servidor se está ejecutando, puede acceder a la interfaz de usuario en http: // localhost: 9999/index.html
Para poder trabajar en la ui noflo que necesita:
Vaya a la carpeta de pago y ejecute:
$ npm install
Esto le proporcionará todas las dependencias de desarrollo necesarias. Ahora puede construir una nueva versión ejecutando:
$ npm run build
Debe ejecutar este comando como administrador en Windows.
Sirva la interfaz de usuario con un servidor web, luego abra la URL en un navegador web. Ejemplo:
$ npm start
Si lo prefiere, puede iniciar un proceso de servidor de desarrollo web de Webpack que hará una reconstrucción cada vez que cambie uno de los archivos:
$ npm run dev
Una vez que se construye y el servidor se está ejecutando, puede acceder a la interfaz de usuario en http://localhost:9999/index.html
Además de este proyecto, el otro repositorio de interés es el widget del editor de gráficos Graph utilizado para editar flujos.
En alto nivel, la arquitectura noflo-UI sigue a las convenciones de Redux adaptadas a Noflo. Así es como se ve el flujo de datos principal:
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
El flujo real es más detallado. Puede verlo y editarlo en graphs/main.fbp .
Nota: Los priciclos que se describen a continuación son la arquitectura a la que apuntamos. Estamos refactorizando partes del sistema para que se ajusten a esta arquitectura a medida que las modificamos. Toda la nueva funcionalidad debe implementarse después de esta arquitectura.
El componente de la tienda realiza un seguimiento del último estado de aplicación. Cuando recibe nuevas acciones, envía la cadena de middleware y reductores junto con el último estado de aplicación.
Noflo-UI Middleware son componentes o gráficos que pueden interactuar con acciones particulares. Cada acción pasa a través de la cadena de artículos intermedios, y cada middleware tiene dos opciones para tratar una acción:
El middleware es donde se manejan los efectos secundarios relacionados con el estado de la aplicación. Esto puede incluir hablar con servicios web externos, comunicaciones de tiempo de ejecución de FBP y cargar o guardar datos en el IndexedDB local. El middleware recibe el estado de aplicación actual y puede leerlo, pero solo manipulan el estado por la forma de crear nuevas acciones.
Algunos middleware también pueden actuar como generadores, creando nuevas acciones basadas en la entrada externa.
El enfoque de middleware se explica más a fondo en esta publicación de blog.
El trabajo de los reductores es recibir acciones y realizar cambios en el estado de la aplicación. Los reductores deben ser en efecto funciones puras, donde el mismo estado de entrada y la combinación de acción siempre producen el mismo nuevo estado.
La capa de vista de la aplicación se implementa como elementos de polímero. La vista de aplicación recibe el objeto de estado producido por los reductores.
Las interacciones del usuario en la vista de la aplicación no deben realizar cambios de estado directo. En cambio, la vista de aplicación puede desencadenar nuevas acciones disparando eventos de polímero. Luego son procesados por el middleware y los reductores, lo que hace que el estado cambie.
Noflo UI está utilizando GitHub para la autenticación. Tenemos una aplicación predeterminada configurada para funcionar en http://localhost:9999 . Si desea servir su UI de Noflo de una URL diferente, debe registrar su propia aplicación OAuth con ellos. Asegúrese de hacer coincidir la política de URL de redirección de GitHub.
Para habilitar su propia aplicación OAuth, establezca las siguientes variables de entorno y reconstruya la UI noflo:
$NOFLO_OAUTH_CLIENT_ID : ID de cliente de su aplicación GitHub OAuth$NOFLO_OAUTH_CLIENT_REDIRECT : URL de redirección de su aplicación GitHub OAuthPara manejar la parte secreta del cliente OAuth del proceso de inicio de sesión, hay dos opciones:
Esta es la opción fácil para el desarrollo local de UI de Noflo. Simplemente cree el secreto del cliente OAuth en la aplicación Noflo UI configurándola a través de la variable de entorno $NOFLO_OAUTH_CLIENT_SECRET .
Nota: Esto significa que cualquiera con acceso a esta compilación de UI de Noflo podrá leer el secreto de su cliente. Nunca hagas esto con una URL accesible para el mundo. Sin embargo, está bien para las construcciones de desarrollo local.
Puede implementar una instancia de la aplicación Gatekeeper Node.js para manejar el intercambio de token OAuth para usted. Configure la ubicación de Gatekeeper en su compilación de UI de Noflo con una variable de entorno $NOFLO_OAUTH_GATE .
Este es el mecanismo más seguro, ya que solo el servidor Gatekeeper necesita conocer el secreto del cliente.
