noflo ui

NOFLO 개발 환경

NOFLO 개발 환경은 NOFLO, MSGFLO, IMGFLO 및 MicroFLO와 같은 FBP 호환 시스템으로 구축 된 흐름 기반 프로그램을 구축하고 실행하는 데 도움이되는 오프라인 캡슐화 클라이언트 측 웹 애플리케이션입니다. NOFLO 개발 환경은 MIT 라이센스에 따라 제공됩니다.

이 프로젝트는 1205 Kickstarter 후원자들에 의해 가능해졌습니다. 새로운 기능 및 기타 변경 사항은 Project ChangeLog를 확인하십시오.

호스팅 된 버전

FlowHub는 NOFLO 개발 환경의 호스팅 버전입니다.

응용 프로그램 만 만들려면 소스에서 나만의 빌드 대신이 버전을 사용하는 것이 좋습니다.

다른 FBP 시스템의 사용

UI 자체는 NOFLO로 제작되었지만 그래프를 실행하고 빌드하기 위해 NOFLO와 직접 대화하지는 않습니다. 대신, FBP 네트워크 프로토콜을 사용하여 호환 가능한 FBP 시스템과 대화 할 수 있습니다. 현재 5 개가 넘는 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. 예를 들어 wsockets 용 ws:// url 또는 webrtc의 Signaller URL 및 연결 식별자 일 수 있습니다.
• secret : 런타임과 의사 소통하는 데 사용하는 비밀

이러한 URL은 명령 줄 출력에 표시되거나 다른 메커니즘을 통해 사용자에게 제공 될 수 있습니다. NFC 태그를 통해 라이브 모드에서 앱을 열는 비디오 데모를 참조하십시오.

새로운 런타임 정보 추가

선택적으로 구성 요소 템플릿, 구문 강조 표시 및 새로운 runtimes에 대한 '시작'링크를 추가 할 수 있습니다.

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에서 작업 할 수 있으려면 다음과 같습니다.

• 이 저장소의 체크 아웃
• 작동 노드 .JS 설치
• NPM 패키지 관리자의 최소 3 개 이상

체크 아웃 폴더로 이동하여 실행하십시오.

 $ npm install

이것은 필요한 모든 개발 의존성을 제공합니다. 이제 실행하여 새 버전을 구축 할 수 있습니다.

 $ npm run build

이 명령을 Windows에서 관리자로 실행해야합니다.

웹 서버를 사용하여 UI를 제공 한 다음 웹 브라우저에서 URL을 열십시오. 예:

 $ npm start

원하는 경우 파일 중 하나가 변경 될 때마다 재 구축 할 WebPack Dev 서버 프로세스를 시작할 수 있습니다.

 $ npm run dev

구축되고 서버가 실행되면 http://localhost:9999/index.html 에서 UI에 액세스 할 수 있습니다.

이 프로젝트 외에도 다른 관심 저장소는 흐름을 편집하는 데 사용되는 The-Graph 그래프 편집기 위젯입니다.

건축학

높은 수준에서 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. 행동을 포착하고 새로운 행동을 유발하십시오.

미들웨어는 응용 프로그램 상태와 관련된 부작용이 처리되는 곳입니다. 여기에는 외부 웹 서비스, 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 클라이언트 비밀 부분을 처리하려면 두 가지 옵션이 있습니다.

내장 된 OAuth 비밀

이것은 로컬 NOFLO UI 개발을위한 쉬운 옵션입니다. $NOFLO_OAUTH_CLIENT_SECRET 환경 변수를 통해 설정하여 Oauth 클라이언트 비밀을 Noflo UI 앱에 구축하기 만하면됩니다.

참고 : 이는이 NOFLO UI 빌드에 액세스 할 수있는 사람이라면 누구나 고객의 비밀을 읽을 수 있음을 의미합니다. 세계적으로 접근 가능한 URL 로이 작업을 수행하지 마십시오. 그러나 지역 전용 개발 구축에는 적합합니다.

문지기

GateKeeper Node.js 앱의 인스턴스를 배포하여 OAuth 토큰 교환을 처리 할 수 ​​있습니다. $NOFLO_OAUTH_GATE 환경 변수로 Noflo UI 빌드에 게이트 키퍼 위치를 구성하십시오.

게이트 키퍼 서버만이 클라이언트 비밀을 알아야하기 때문에 이것은 더 안전한 메커니즘입니다.