noflo ui

Lingkungan Pengembangan NOFLO

Lingkungan pengembangan NOFLO adalah aplikasi web sisi klien yang berkemampuan offline yang membantu pengguna untuk membangun dan menjalankan program berbasis aliran yang dibangun dengan sistem yang kompatibel dengan FBP seperti NOFLO, MSGFLO, IMGFLO dan Microflo. Lingkungan pengembangan NOFLO tersedia di bawah lisensi MIT.

Proyek ini dimungkinkan oleh 1205 pendukung Kickstarter. Periksa Project Changelog untuk fitur baru dan perubahan lainnya.

Versi host

FlowHub adalah versi yang di -host dari lingkungan pengembangan NOFLO.

Jika Anda hanya ingin membuat aplikasi, kami sarankan Anda menggunakan versi ini alih -alih membangun sendiri dari sumber.

Penggunaan dengan sistem FBP yang berbeda

Meskipun UI itu sendiri dibangun dengan NOFLO, itu tidak berbicara langsung dengan NOFLO untuk menjalankan dan membangun grafik. Sebaliknya, ini memanfaatkan protokol jaringan FBP yang memungkinkannya untuk berbicara dengan sistem FBP yang kompatibel. Saat ini lebih dari 5 runtime yang berbeda diketahui berfungsi.

Dengan menerapkan protokol di runtime Anda, Anda dapat memprogramnya dengan NOFLO UI. Jika Anda menggunakan WebSockets atau WEBRTC sebagai transportasi, Anda tidak perlu mengubah apa pun di NOFLO UI. Anda juga dapat menambahkan dukungan transportasi lain.

Mendaftarkan runtime untuk pengguna

Cara termudah untuk lulus pengguna informasi koneksi runtime Anda adalah melalui mode langsung . Dengan ini, detail koneksi diteruskan ke aplikasi melalui parameter URL, seperti ini:

 http://app.flowhub.io#runtime/endpoint?protocol%3Dwebsocket%26address%3Dws%3A%2F%2F127.0.0.1%3A3569

Parameter yang didukung untuk titik akhir meliputi:

• protocol : Transportasi Protokol FBP untuk digunakan untuk koneksi. Nilai yang mungkin termasuk websocket , iframe , dan webrtc
• address : URL untuk digunakan untuk koneksi. Dapat misalnya ws:// url untuk websockets, atau URL signaller dan pengidentifikasi koneksi untuk WebRTC
• secret : Rahasia untuk digunakan untuk berkomunikasi dengan runtime

URL ini dapat ditampilkan pada output baris perintah, atau diberikan kepada pengguna melalui mekanisme lain. Lihat demonstrasi video membuka aplikasi dalam mode live melalui tag NFC.

Menambahkan informasi runtime baru

Seseorang dapat secara opsional menambahkan template komponen, penyorotan sintaksis dan tautan 'dapat memulai' untuk runtime baru.

1. Tambahkan file YAML baru dengan info runtime sebagai ./runtimeinfo/myruntime.yaml . Contoh
2. Sertakan di ./runtimeInfo/index.js
3. Melakukan perubahan
4. Kirim permintaan tarik, jadi semua orang mendapat manfaat!

Pengembangan Noflo UI

Hanya diperlukan jika Anda ingin meretas Noflo UI itu sendiri. Tidak perlu membuat aplikasi dengan FBP.

Melalui Docker

Dockerfile telah disediakan yang dapat digunakan untuk dengan mudah membangun/menjalankan NOFLO UI. Anda juga bisa mendapatkan gambar yang dibangun secara otomatis dari Docker Hub.

Membangun

docker build -t noflo-ui . 

Berlari

docker run -d -p 9999:80 noflo-ui

Setelah dibangun dan server sedang berjalan, Anda dapat mengakses UI di http: // localhost: 9999/index.html

Secara langsung

Untuk dapat mengerjakan Noflo UI yang Anda butuhkan:

• Checkout repositori ini
• Instalasi node.js yang berfungsi
• Setidaknya versi 3 dari manajer paket NPM

Pergi ke folder checkout dan jalankan:

 $ npm install

Ini akan memberi Anda semua dependensi pengembangan yang dibutuhkan. Sekarang Anda dapat membangun versi baru dengan menjalankan:

 $ npm run build

Anda harus menjalankan perintah ini sebagai administrator di Windows.

Sajikan UI menggunakan server web, lalu buka URL di browser web. Contoh:

 $ npm start

Jika lebih suka, Anda dapat memulai proses server dev webpack yang akan melakukan pembangunan kembali setiap kali salah satu file berubah:

 $ npm run dev

Setelah dibangun dan server sedang berjalan, Anda dapat mengakses UI di http://localhost:9999/index.html

Selain proyek ini, repositori minat lainnya adalah widget editor grafik-grafik yang digunakan untuk mengedit aliran.

Arsitektur

Pada level tinggi, arsitektur NOFLO-UI mengikuti konvensi redux yang disesuaikan dengan NOFLO. Begini adalah bagaimana aliran data utama terlihat:

 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

Aliran aktual lebih rinci. Anda dapat melihat dan mengeditnya di graphs/main.fbp .

Catatan: Presticles yang diuraikan di bawah ini adalah arsitektur yang kami tuju. Kami refactoring bagian sistem agar sesuai dengan arsitektur ini saat kami memodifikasinya. Semua fungsi baru harus diimplementasikan mengikuti arsitektur ini.

Toko

Komponen toko melacak status aplikasi terbaru. Ketika menerima tindakan baru, ia mengirim ke middleware dan rantai peredam bersama dengan status aplikasi terbaru.

Middleware

NOFLO-UI Middleware adalah komponen atau grafik yang dapat berinteraksi dengan tindakan tertentu. Setiap aksi melewati rantai menengah, dan setiap middleware memiliki dua opsi untuk berurusan dengan suatu tindakan:

1. Lulus aksinya tanpa memodifikasinya
2. Tangkap tindakan dan memicu tindakan baru

Middleware adalah tempat efek samping yang terkait dengan status aplikasi ditangani. Ini dapat mencakup berbicara dengan layanan web eksternal, komunikasi runtime FBP, dan memuat atau menyimpan data ke indexedDB lokal. Middleware menerima status aplikasi saat ini dan dapat membaca darinya, tetapi mereka hanya memanipulasi keadaan dengan cara membuat tindakan baru.

Beberapa middleware juga dapat bertindak sebagai generator, membuat tindakan baru berdasarkan input eksternal.

Pendekatan middleware dijelaskan lebih lanjut dalam posting blog ini.

Pereduksi

Pekerjaan peredam adalah menerima tindakan dan membuat perubahan pada status aplikasi. Reducers harus berlaku untuk fungsi murni, di mana keadaan input yang sama dan kombinasi tindakan selalu menghasilkan keadaan baru yang sama.

Melihat

Lapisan tampilan aplikasi diimplementasikan sebagai elemen polimer. Tampilan aplikasi menerima objek negara yang dihasilkan oleh peredam.

Interaksi pengguna dalam tampilan aplikasi tidak boleh membuat perubahan keadaan langsung. Sebaliknya, tampilan aplikasi dapat memicu tindakan baru dengan menembakkan peristiwa polimer. Ini kemudian diproses oleh middleware dan pereduksi, menyebabkan negara berubah.

Otentikasi dan URL khusus

NOFLO UI menggunakan github untuk otentikasi. Kami memiliki aplikasi default yang dikonfigurasi untuk bekerja di http://localhost:9999 . Jika Anda ingin melayani UI noflo Anda dari URL yang berbeda, Anda perlu mendaftarkan aplikasi OAuth Anda sendiri dengan mereka. Pastikan untuk mencocokkan kebijakan URL pengalihan GitHub.

Untuk mengaktifkan aplikasi OAuth Anda sendiri, atur variabel lingkungan berikut dan membangun kembali Noflo UI:

• $NOFLO_OAUTH_CLIENT_ID : ID klien aplikasi github oauth Anda
• $NOFLO_OAUTH_CLIENT_REDIRECT : URL pengalihan aplikasi github oauth Anda

Rahasia OAuth

Untuk menangani bagian rahasia klien OAuth dari proses login, ada dua opsi:

Rahasia OAuth bawaan

Ini adalah opsi mudah untuk pengembangan NOFLO UI lokal. Cukup buat rahasia klien OAuth ke dalam aplikasi NOFLO UI dengan mengaturnya melalui variabel lingkungan $NOFLO_OAUTH_CLIENT_SECRET .

Catatan: Ini berarti siapa pun yang memiliki akses ke build NOFLO UI ini akan dapat membaca rahasia klien Anda. Jangan pernah melakukan ini dengan URL yang dapat diakses di dunia. Namun, tidak apa-apa untuk pembangunan pengembangan lokal.

Penjaga gerbang

Anda dapat menggunakan instance aplikasi Gatekeeper Node.js untuk menangani pertukaran token OAuth untuk Anda. Konfigurasikan lokasi penjaga gerbang ke build noflo UI Anda dengan variabel lingkungan $NOFLO_OAUTH_GATE .

Ini adalah mekanisme yang lebih aman, karena hanya server penjaga gerbang yang perlu mengetahui rahasia klien.