noflo ui

Noflo開発環境

NOFLO開発環境は、ユーザーがNOFLO、MSGFLO、IMGFLO、MicrofloなどのFBP互換システムで構築されたフローベースのプログラムを構築および実行できるようにするオフライン対応のWebアプリケーションです。 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。たとえばws:// url for websockets、またはwebrtcのsignaller urlおよび接続識別子にすることができます
• secret ：ランタイムとの通信に使用する秘密

これらのURLは、コマンドラインの出力に表示されるか、他のメカニズムを介してユーザーに提供できます。 NFCタグを介してライブモードでアプリを開くビデオデモンストレーションを参照してください。

新しいランタイム情報の追加

オプションで、コンポーネントテンプレート、構文強調表示、新しいランタイムの「Get Start」リンクを追加できます。

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に取り組むことができるようにするには：

• このリポジトリのチェックアウト
• 作業node.jsインストール
• NPMパッケージマネージャーの少なくともバージョン3

チェックアウトフォルダーに移動して実行します。

 $ npm install

これにより、必要なすべての開発依存関係が提供されます。これで、実行して新しいバージョンを作成できます。

 $ npm run build

Windowsで管理者としてこのコマンドを実行する必要があります。

Webサーバーを使用してUIを提供し、WebブラウザでURLを開きます。例：

 $ npm start

必要に応じて、ファイルのいずれかが変更されるたびに再構築を行うWebpack devサーバープロセスを開始できます。

 $ npm run dev

構築されてサーバーが実行されたら、 http://localhost:9999/index.htmlでUIにアクセスできます

このプロジェクトに加えて、関心のあるもう1つのリポジトリは、フローの編集に使用されるグラフグラフエディターウィジェットです。

建築

高レベルでは、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ミドルウェアは、特定のアクションと相互作用できるコンポーネントまたはグラフです。各アクションはミドルウェアのチェーンを通過し、各ミドルウェアにはアクションに対処する2つのオプションがあります。

1. 変更せずにアクションを渡します
2. アクションをキャプチャし、新しいアクションをトリガーします

ミドルウェアは、アプリケーション状態に関連する副作用が処理される場合です。これには、外部Webサービスとの会話、FBPランタイム通信、ローカルIndexEdDBへのデータの読み込みまたは保存が含まれます。ミドルウェアは現在のアプリケーション状態を受け取り、そこから読むことができますが、新しいアクションを作成する方法でのみ状態を操作します。

一部のミドルウェアはジェネレーターとしても機能し、外部入力に基づいて新しいアクションを作成することもできます。

ミドルウェアアプローチについては、このブログ投稿でさらに説明しています。

還元剤

還元剤の仕事は、アクションを受け取り、アプリケーション状態を変更することです。還元剤は、実際には純粋な関数でなければなりません。ここでは、同じ入力状態とアクションの組み合わせが常に同じ新しい状態を生成します。

ビュー

アプリケーションのビューレイヤーは、ポリマー要素として実装されています。アプリケーションビューは、還元剤によって生成された状態オブジェクトを受信します。

アプリケーションビューでのユーザーインタラクションは、直接的な状態変更を行わないでください。代わりに、アプリケーションビューは、ポリマーイベントを発射することにより、新しいアクションをトリガーできます。その後、これらはミドルウェアと還元剤によって処理され、状態が変化します。

認証とカスタム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クライアントシークレット部分を処理するには、2つのオプションがあります。

組み込みのoauthの秘密

これは、ローカルNoFlo UI開発の簡単なオプションです。 $NOFLO_OAUTH_CLIENT_SECRET環境変数を介して設定することにより、OAuthクライアントの秘密をNoflo UIアプリに作成するだけです。

注：これは、このNoflo UIビルドにアクセスできる人がクライアントの秘密を読むことができることを意味します。世界にアクセス可能なURLでこれを行わないでください。ただし、ローカルのみの開発ビルドには問題ありません。

ゲートキーパー

GateKeeper node.jsアプリのインスタンスを展開して、OAuthトークン交換を処理できます。 $NOFLO_OAUTH_GATE環境変数を使用して、noflo uiビルドにゲートキーパーの場所を構成します。

これは、GateKeeperサーバーのみがクライアントの秘密を知る必要があるため、より安全なメカニズムです。