noflo ui
1.0.0
Среда разработки NOFLO-это веб-приложение на стороне клиента, которое помогает пользователям создавать и запускать программы на основе потоков, созданные с помощью FBP-совместимых систем, таких как NOFLO, MSGFLO, IMGFLO и MicroFLO. Среда разработки NOFLO доступна по лицензии MIT.
Этот проект стал возможным благодаря 1205 покровителям Kickstarter. Проверьте Project ChangeLog на наличие новых функций и других изменений.
Flowhub - это размещенная версия среды разработки Noflo.
Если вы просто хотите создавать приложения, мы рекомендуем использовать эту версию вместо того, чтобы создавать свою собственную из источника.
Несмотря на то, что сам пользовательский интерфейс построен с NOFLO, он не разговаривает напрямую с NOFLO для работы и создания графиков. Вместо этого он использует сетевой протокол FBP, который позволяет ему общаться с любой совместимой системой FBP. В настоящее время известно, что более 5 различных времен пробежки работают.
Реализуя протокол во время выполнения, вы можете запрограммировать его с помощью пользовательского интерфейса Noflo. Если вы используете WebSockets или Webrtc в качестве транспорта, вам не нужно что -то менять на пользовательском интерфейсе noflo. Вы также можете добавить поддержку других транспортов.
Самый простой способ передать пользователя информация о подключении вашего времени выполнения - это режим живого . При этом детали подключения передаются в приложение через параметры URL, например:
http://app.flowhub.io#runtime/endpoint?protocol%3Dwebsocket%26address%3Dws%3A%2F%2F127.0.0.1%3A3569
Поддерживаемые параметры для конечной точки включают:
protocol : транспорт протокола FBP для использования для соединения. Возможные значения включают websocket , iframe и webrtcaddress : URL для использования для соединения. Может быть, например ws:// url для веб -билетов, или URL -адрес Signaller и идентификатор соединения для WEBRTCsecret : секрет использования для общения со временем выполненияЭти URL -адреса могут быть показаны на выводе командной строки или предоставлены пользователю через другой механизм. См. Видео демонстрацию открытия приложения в режиме в прямом эфире через тег NFC.
Можно при желании добавить шаблоны компонентов, синтаксис -выделение и ссылку «начать» для нового времени выполнения.
./runtimeinfo/myruntime.yaml . ПримерНеобходимо, только если вы хотите взломать сам пользовательский интерфейс Noflo. Не обязательно для создания приложений с FBP.
Был предоставлен Dockerfile, который можно использовать для легко создания/запуска пользовательского интерфейса Noflo. Вы также можете получить автоматически созданное изображение от Docker Hub.
docker build -t noflo-ui . docker run -d -p 9999:80 noflo-uiПосле того, как он будет построен и работает сервер, вы можете получить доступ к пользовательскому интерфейсу по адресу http: // localhost: 9999/index.html
Чтобы иметь возможность работать над пользовательским интерфейсом noflo, который вам нужен:
Перейдите в папку заказа и запустите:
$ npm install
Это предоставит вам все необходимые зависимости развития. Теперь вы можете создать новую версию, работая:
$ npm run build
Вы должны запустить эту команду в качестве администратора в Windows.
Получите пользовательский интерфейс, используя веб -сервер, затем откройте URL его в веб -браузере. Пример:
$ npm start
Если вы предпочитаете, вы можете вместо этого запустить процесс WebPack Dev Server, который будет перестроить при изменении одного из файлов:
$ npm run dev
После того, как он будет построен и работает сервер, вы можете получить доступ к пользовательскому интерфейсу по адресу http://localhost:9999/index.html
В дополнение к этому проекту, другим интересным репозиторием является виджет редактора графа Graph, используемый для редактирования потоков.
На высоком уровне архитектура NOFLO-UI следует за Redux, адаптированными к NOFLO. Вот как выглядит основной поток данных:
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-это компоненты или графики, которые могут взаимодействовать с конкретными действиями. Каждое действие проходит через цепь средних волн, и каждое промежуточное программное обеспечение имеет два варианта борьбы с действием:
Промежуточное программное обеспечение - это то, где обрабатываются побочные эффекты с состоянием приложения. Это может включать в себя общение с внешними веб -службами, коммуникации FBP Runtime, а также загрузку или сохранение данных в Local IndexedDB. Промежуточное программное обеспечение получает текущее состояние приложения и может читать из него, но они манипулируют состоянием только путем создания новых действий.
Некоторое промежуточное программное обеспечение также может выступать в качестве генераторов, создавая новые действия на основе внешнего ввода.
Подход промежуточного программного обеспечения объясняется в этом сообщении в блоге.
Работа восстановителей состоит в том, чтобы получить действия и внести изменения в состояние приложения. Редакторы должны быть чистыми функциями, где одно и то же входное состояние и комбинация действий всегда создает одно и то же новое состояние.
Уровень представления приложения реализован в виде полимерных элементов. Представление приложения получает объект состояния, созданный восстановителями.
Пользовательские взаимодействия в представлении приложения не должны вносить прямые изменения состояния. Вместо этого представление приложения может вызвать новые действия, запуская полимерные события. Затем они обрабатываются промежуточным программным обеспечением и редукторами, что приводит к изменению состояния.
Noflo UI использует GitHub для аутентификации. У нас есть приложение по умолчанию, настроенное на работу по адресу http://localhost:9999 . Если вы хотите обслуживать свой интерфейс Noflo из другого URL, вам нужно зарегистрировать свое собственное приложение OAuth с ними. Обязательно соответствуют политике URL -адреса GitHub.
Чтобы включить свое собственное приложение OAuth, установите следующие переменные среды и восстановите пользовательский интерфейс noflo:
$NOFLO_OAUTH_CLIENT_ID : идентификатор клиента вашего приложения Github Oauth$NOFLO_OAUTH_CLIENT_REDIRECT : перенаправить URL вашего приложения GitHub OAuthДля обработки секретной части клиента OAuth в процессе входа в систему есть два варианта:
Это простой вариант для локальной разработки пользовательского интерфейса Noflo. Просто создайте секрет клиента OAuth в приложение UI Noflo, установив его через переменную среды $NOFLO_OAUTH_CLIENT_SECRET .
Примечание. Это означает, что любой, у кого есть доступ к этой сборке пользовательского интерфейса Noflo, сможет прочитать ваш секрет вашего клиента. Никогда не делайте этого с всемирным URL-адресом. Это хорошо для локальных разработок, хотя.
Вы можете развернуть экземпляр приложения Gatekeeper Node.js для обработки обмена токенами OAuth для вас. Настройте местоположение привратника на свою сборку UI Noflo с переменной среды $NOFLO_OAUTH_GATE .
Это более надежный механизм, так как только сервер Gatekeeper должен знать секрет клиента.
