noflo ui
1.0.0
Die NOFLO-Entwicklungsumgebung ist eine offline-fähige, clientseitige Webanwendung, mit der Benutzer fließbasierte Programme erstellen und ausführen, die mit FBP-kompatiblen Systemen wie NOFLO, MSGFLO, IMGFLO und Microflo erstellt wurden. Die noflo -Entwicklungsumgebung ist im Rahmen der MIT -Lizenz verfügbar.
Dieses Projekt wurde von 1205 Kickstarter -Unterstützern ermöglicht. Überprüfen Sie den Projekt ChangeLog auf neue Funktionen und andere Änderungen.
FlowHub ist eine gehostete Version der NOFLO -Entwicklungsumgebung.
Wenn Sie nur Anwendungen erstellen möchten, empfehlen wir Ihnen, diese Version zu verwenden, anstatt Ihre eigenen aus der Quelle zu erstellen.
Obwohl die Benutzeroberfläche selbst mit Noflo gebaut ist, spricht sie nicht direkt mit Noflo zum Laufen und Erstellen von Grafiken. Stattdessen wird das FBP -Netzwerkprotokoll verwendet, mit dem es mit einem kompatiblen FBP -System sprechen kann. Derzeit funktionieren über 5 verschiedene Laufzeiten bekannt.
Durch die Implementierung des Protokolls in Ihrer Laufzeit können Sie es mit der NOFLO -UI programmieren. Wenn Sie WebSockets oder Webrtc als Transport verwenden, müssen Sie nichts in der UI von Noflo ändern. Sie können auch andere Transporte unterstützen.
Der einfachste Weg, den Benutzer zu übergeben. Die Verbindungsinformationen Ihrer Laufzeit sind im Live -Modus . Damit werden die Verbindungsdetails über URL -Parameter wie folgt an die App übergeben:
http://app.flowhub.io#runtime/endpoint?protocol%3Dwebsocket%26address%3Dws%3A%2F%2F127.0.0.1%3A3569
Die unterstützten Parameter für den Endpunkt umfassen:
protocol : Der FBP -Protokolltransport für die Verbindung. Mögliche Werte umfassen websocket , iframe und webrtcaddress : URL für die Verbindung verwendet. Kann zum Beispiel ws:// URL für WebSockets oder die Signaler -URL und die Verbindungskennung für WebRTC seinsecret : Geheimnis, um mit der Laufzeit zu kommunizierenDiese URLs können in der Befehlszeilenausgabe angezeigt oder dem Benutzer über einen anderen Mechanismus zur Verfügung gestellt werden. Siehe eine Videodemonstration des Öffnens der App im Live -Modus über ein NFC -Tag.
Man kann optional Komponentenvorlagen, Syntax -Hervorhebungen und einen "Erste -Start" -Link für neue Laufzeiten hinzufügen.
./runtimeinfo/myruntime.yaml hinzu. BeispielNur notwendig, wenn Sie sich auf die Noflo UI selbst hacken möchten. Nicht erforderlich, um Apps mit FBP herzustellen.
Es wurde eine Dockerfile bereitgestellt, mit der die Noflo -Benutzeroberfläche einfach erstellt/ausgeführt werden kann. Sie können auch ein automatisch erstelltes Bild von Docker Hub erhalten.
docker build -t noflo-ui . docker run -d -p 9999:80 noflo-uiSobald es erstellt wurde und der Server ausgeführt wird, können Sie auf die Benutzeroberfläche unter http: // localhost: 9999/index.html zugreifen
Um an der Noflo -Benutzeroberfläche arbeiten zu können, die Sie benötigen:
Gehen Sie zum Checkout -Ordner und führen Sie aus:
$ npm install
Dies bietet Ihnen alle erforderlichen Entwicklungsabhängigkeiten. Jetzt können Sie eine neue Version erstellen, indem Sie ausführen:
$ npm run build
Sie müssen diesen Befehl als Administrator unter Windows ausführen.
Servieren Sie die Benutzeroberfläche mit einem Webserver und öffnen Sie die URL in einem Webbrowser. Beispiel:
$ npm start
Wenn Sie es vorziehen, können Sie stattdessen einen WebPack Dev Server -Prozess starten, der einen Umbau durchführt, wenn sich eine der Dateien ändert:
$ npm run dev
Sobald es erstellt wurde und der Server ausgeführt wird, können Sie auf die Benutzeroberfläche unter http://localhost:9999/index.html zugreifen
Zusätzlich zu diesem Projekt ist das andere Interessens-Repository das für die Bearbeitung von Strömen verwendete The-Graph-Graph-Editor.
Auf hoher Ebene folgt die Noflo-UI-Architektur nach Redux-Konventionen, die an Noflo angepasst sind. So sieht der Hauptdatenfluss aus:
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
Der tatsächliche Fluss ist detaillierter. Sie können es in graphs/main.fbp anzeigen und bearbeiten.
Hinweis: Die nachstehend beschriebenen Prise sind die Architektur, die wir anstreben. Wir refaktieren Teile des Systems, um diese Architektur anzupassen, während wir sie ändern. Alle neuen Funktionen sollten nach dieser Architektur implementiert werden.
Die Store -Komponente verfolgt den neuesten Anwendungszustand. Wenn es neue Aktionen erhält, sendet es die OUT in die Middleware und Reducer -Kette zusammen mit dem neuesten Anwendungsstatus.
Noflo-UI Middleware sind Komponenten oder Grafiken, die mit bestimmten Aktionen interagieren können. Jede Aktion durchläuft die Kette der Middlewares, und jede Middleware hat zwei Optionen zum Umgang mit einer Aktion:
Mit Middleware werden Nebenwirkungen im Zusammenhang mit dem Anwendungszustand behandelt. Dies kann das Gespräch mit externen Webdiensten, FBP -Laufzeitkommunikation und dem Laden oder Speichern von Daten in den lokalen indizierten DB umfassen. Middleware empfängt den aktuellen Anwendungszustand und kann daraus lesen, aber sie manipulieren nur den Zustand, um neue Aktionen zu erstellen.
Einige Middleware können auch als Generatoren fungieren und neue Aktionen erstellen, die auf externen Eingaben basieren.
Der Middleware -Ansatz wird in diesem Blog -Beitrag weiter erklärt.
Die Aufgabe der Reduzierer besteht darin, Maßnahmen zu erhalten und Änderungen am Anwendungszustand vorzunehmen. Die Reduzierer müssen tatsächlich reine Funktionen sein, wobei derselbe Eingabestatus und die gleiche Aktionskombination immer denselben neuen Zustand erzeugen.
Die Ansichtsschicht der Anwendung wird als Polymerelemente implementiert. Die Anwendungsansicht empfängt das von den Reduzierern erzeugte Zustandsobjekt.
Benutzerinteraktionen in der Anwendungsansicht dürfen keine direkten Statusänderungen vornehmen. Stattdessen kann die Anwendungsansicht neue Aktionen auslösen, indem Polymerereignisse abgefeuert werden. Diese werden dann von Middleware und Reduzern verarbeitet, wodurch sich der Zustand ändert.
Noflo UI verwendet GitHub zur Authentifizierung. Wir haben eine Standardanwendung für die Arbeit unter http://localhost:9999 . Wenn Sie Ihre Noflo -Benutzeroberfläche aus einer anderen URL bedienen möchten, müssen Sie Ihre eigene OAuth -Bewerbung bei ihnen registrieren. Stellen Sie sicher, dass Sie Githubs Umleitungs -URL -Richtlinie übereinstimmen.
Stellen Sie die folgenden Umgebungsvariablen fest und bauen Sie die Noflo UI wieder auf:
$NOFLO_OAUTH_CLIENT_ID : Client -ID Ihrer Github OAuth -Anwendung$NOFLO_OAUTH_CLIENT_REDIRECT : URL Ihrer Github OAuth -Anwendung umleitenFür den Umgang mit dem geheimen Teil des Anmeldungsprozesses von OAuth Client gibt es zwei Optionen:
Dies ist die einfache Option für die lokale NOFLO -UI -Entwicklung. Erstellen Sie einfach das OAuth -Client -Geheimnis in die Noflo UI -App, indem Sie es über die Umgebungsvariable der $NOFLO_OAUTH_CLIENT_SECRET einstellen.
Hinweis: Dies bedeutet, dass jeder, der Zugriff auf diesen Noflo -UI -Build hat, Ihr Kundengeheimnis lesen kann. Tun Sie dies niemals mit einer weltgängigen URL. Es ist jedoch in Ordnung für lokale Entwicklungsbauten.
Sie können eine Instanz der Gatekeeper Node.js -App bereitstellen, um den OAuth -Token -Austausch für Sie zu verarbeiten. Konfigurieren Sie den Standort des Gatekeeper an Ihrem Noflo UI -Build mit $NOFLO_OAUTH_GATE -Umgebungsvariable.
Dies ist der sicherere Mechanismus, da nur der Gatekeeper -Server das Client -Geheimnis kennen muss.
