node red contrib uibuilder

Node-Red-Contrib-Uibuilder

Uibuilder untuk node-red memungkinkan pembuatan aplikasi web front-end yang didorong oleh data.

Ini mencakup banyak fitur pembantu yang dapat mengurangi atau menghilangkan kebutuhan untuk menulis kode untuk membangun aplikasi web berbasis data dan antarmuka pengguna yang terintegrasi dengan node-merah.

Catatan

Uibuilder memicu peringatan berkualitas dalam entri arus skor.

"Jumlah dependensi" adalah> 6 - ini disebabkan oleh sejumlah besar fitur di Uibuilder dan diharapkan. Meski begitu, V7 hanya memiliki 7 dependensi. 1 lagi akan dihapus dalam rilis di masa mendatang.

Instalasi

Uibuilder paling baik diinstal menggunakan Node-Red's Palette Manager.

Instalasi manual dan versi lainnya

Untuk menginstal secara manual, dari baris perintah di server node-red Anda:

 cd ~ /.node-red
npm install node-red-contrib-uibuilder

Untuk menginstal versi lama, berikan nomor versi utama:

 cd ~ /.node-red
npm install node-red-contrib-uibuilder@v5

Untuk menginstal cabang pengembangan, silakan instal dari GitHub. BranchNames adalah nomor versi di masa depan, periksa gitub untuk cabang yang tersedia:

 cd ~ /.node-red
npm install totallyinformation/node-red-contrib-uibuilder#v7.1.0

Anda perlu memulai ulang node-red jika menginstal secara manual.

Pembaruan

Changelog saat ini berisi semua perubahan dan detail persyaratan untuk setiap versi.

Perubahan yang lebih lama dapat ditemukan di dokumen perubahan sebelumnya: Changelog-V5, Changelog-V5, Changelog-V3/V4, Changelog-V2, dan Changelog-V2.

Memulai

Setelah terpasang, berikut ini adalah aliran sederhana yang khas untuk melanjutkan.

1. Tambahkan simpul uibuilder . Buka pengaturannya dan berikan "URL" yang digunakan sebagai nama pengidentifikasi. Tutup pengaturan dan klik tombol Deploy.
2. Buka kembali pengaturan Node uibuilder dan klik tombol "Buka" untuk melihat halaman web yang dihasilkan.

Anda sekarang siap untuk mengedit html/javaScript/CSS front-end jika Anda mau dan menambahkan logika dalam node-merah untuk memberikan input dan menangani output. Anda juga dapat menggunakan fitur no-kode UIBUILDER untuk membuat UI Anda juga atau sebagai gantinya.

Silakan lihat walkthrough pertama dalam dokumentasi dan video pengantar untuk bantuan lebih lanjut untuk memulai. Coba juga aliran contoh bawaan.

Contoh

Dalam Node-Red, gunakan menu Hamburger. Klik Impor. Klik Contoh. Pilih folder Node-Red-Contrib-Uibuilder dan pilih contoh.

Fitur template di UIBUILDER menyediakan kode front-end yang berfungsi dari berbagai konfigurasi.

Contoh lain dapat ditemukan di situs aliran node-merah dan wiki uibuilder. Juga lihat pertanyaan FAQ dan menjawab di forum node-merah.

Dokumentasi dan tautan lainnya

Silakan merujuk ke situs web dokumentasi. Ini juga dapat diakses dari dalam node uibuilder bahkan tanpa koneksi internet.

Ada perpustakaan tutorial video "resmi" di YouTube. Orang lain juga menghasilkan konten terkait UIBUILDER.

Pertanyaan, Masalah, dan Saran

Tempat terbaik untuk mengajukan pertanyaan atau mendiskusikan kemungkinan peningkatan adalah forum node-merah.

Atau, gunakan log masalah GitHub untuk mengangkat masalah atau menyumbangkan saran dan peningkatan dan halaman diskusi GitHub untuk pertanyaan umum, saran, dll.

Tautan lain

• Uibuilder untuk node-merah

  • ❓ Ide, Pertanyaan & Bantuan Umum-Ajukan pertanyaan Anda di forum Node-Red menggunakan tag Node-Red-Contrib-Uibuilder
  • ? Dokumentasi - Pergi ke dokumentasi terbaru
  • ? ‍ aliran - contoh aliran, node dan koleksi yang terkait dengan uibuilder
  • Wiki - lebih banyak dokumentasi dan contoh
  • Contoh Template Eksternal Svelte - Jika Anda ingin membangun aplikasi langsing Anda sendiri
  • Contoh Template Eksternal Sederhana - Jika Anda ingin membangun template eksternal Anda sendiri
  • Ekstensi UiBuilder UiBlot - Bagan yang berguna tetapi juga menunjukkan cara membangun ekstensi Anda sendiri
  • ? Event Handler Module Digunakan oleh Uibuilder - sehingga Anda dapat melihat beberapa pekerjaan dalam

• ? Modul pustaka UI yang digunakan oleh uibuilder - dapat digunakan berdiri sendiri untuk mengubah konfigurasi standar UI menjadi html

• ? Node-Red-Contrib-Moment-node untuk memanfaatkan momen Tanggal/Penanganan Waktu Perpustakaan di Node-Red

• ? Node Uji untuk Node-Red-Beberapa node uji untuk node-merah yang membantu Anda memahami cara kerja semuanya

• ? Komponen Web Hotnipi Gauge - Komponen pengukur yang terlihat sangat bagus. Bekerja dengan node-merah, uibuilder, atau berdiri sendiri

• ? Komponen Web Eksperimental-Memiliki beberapa Node-Red & Uibuilder Peningkatan Khusus tetapi juga bekerja dengan baik secara keseluruhan

• ? Array Grouper - Fungsi yang berdiri sendiri untuk membentuk kembali array objek

Tujuan

Tujuan Uibuilder adalah untuk:

• Mendukung metode mudah untuk membuat dan memberikan aplikasi web dan halaman web berbasis data (juga dikenal sebagai antarmuka pengguna web).
• Jadilah saluran antara aplikasi web Node-merah dan front-end (browser) UI.
• Jadilah kerangka kerja agnostik. Tidak ada kerangka kerja yang diperlukan untuk menggunakan uibuilder tetapi itu akan bekerja dengan mereka di tempat yang diinginkan. Uibuilder bertujuan untuk mengurangi persyaratan untuk kerangka kerja dengan membuatnya lebih mudah untuk bekerja dengan vanilla HTML/CSS.
• Berikan standar antarmuka/data untuk menukar data dan kontrol antara node-merah dan halaman web.
• Aktifkan pembuatan dan manajemen beberapa aplikasi web dari instance node-red tunggal.
• Kurangi jumlah kode front-end (html/javascript) yang diperlukan untuk membuat dan mengelola aplikasi web.
• Kurangi pengetahuan yang diperlukan untuk membuat aplikasi web yang andal dan dapat diakses dengan menyediakan fitur kode rendah dan tanpa kode.
• Buat mudah untuk menginstal dan melayani perpustakaan front-end untuk mendukung pengembangan aplikasi web yang lebih kompleks.

Fitur

Fitur Inti Uibuilder:

• Sejauh mungkin, hanya menggunakan vanilla, HTML asli, CSS dan JavaScript. Selain klien soket.io untuk komunikasi (yang dipanggang ke perpustakaan front-end), tidak diperlukan perpustakaan front-end lainnya. Uibuilder tetap sedekat mungkin dengan HTML asli untuk menghindari masalah kompatibilitas di masa depan. Namun, itu bertujuan untuk membuat interaksi dengan HTML asli lebih mudah.
• Node untuk mengaktifkan terjemahan nol-kode dari data input ke elemen web yang dapat digunakan dan dapat diakses.
• Kemampuan UI kode rendah, digerakkan oleh konfigurasi (driven data). Membuat kerangka kerja untuk menggambarkan UI dan menerjemahkan ke kode aktual tanpa harus menulis kode.
• Saluran komunikasi 2 arah antara server node-merah (back-end) dan UI front-end.
• Node node-merah untuk bertindak sebagai fokus untuk komunikasi dengan node lain untuk kemudahan penggunaan tambahan.
• Perpustakaan front-end untuk: Lakukan bagian kompleks komunikasi di browser klien; membuat manipulasi UI lebih mudah dan lebih konsisten; Buat mudah untuk mendapatkan data kembali ke node-red sesuai kebutuhan (baik secara otomatis maupun secara manual).
• Templat dan contoh yang mudah digunakan untuk kode front-end untuk memungkinkan orang memulai dengan cepat membuat aplikasi web.
• Manajemen dan melayani paket NPM yang memberikan perpustakaan front-end mudah dikonsumsi dengan kode front-end.
• Mengedit kode front-end dari editor node-merah (dirancang untuk perubahan kecil, gunakan alat pengembangan web secara umum).
• Berbagai opsi middleware dan API server untuk kemampuan khusus tambahan.
• Kemampuan caching yang memungkinkan klien yang baru bergabung untuk menerima data dan konfigurasi terbaru. Bergabung/Meninggalkan Klien Membuat Pemberitahuan di Node-Red.
• Router ringan front-end untuk membuat aplikasi satu halaman.
• Miliki instance simpul uibuilder sebanyak yang Anda suka. Setiap instance memungkinkan pembuatan banyak halaman web dan sub-folder untuk manajemen yang mudah.
• Setiap instance node uibuilder menyediakan saluran komunikasi 2 arah pribadi antara server node-red (back-end) dan browser (front-end) kode UI.
• Mendukung penggunaan alur kerja pengembangan web standar.
• Memungkinkan pembuatan layanan web khusus untuk memfasilitasi keamanan independen.

No-Code UI

Uibuilder terus memperluas kemampuan tanpa kode. Node uib-element , uib-tag , dan uib-update menawarkan metode tanpa kode untuk membuat dan memperbarui UI Web yang digerakkan data.

uib-element mengambil data sederhana dan output data konfigurasi. Ini kemudian dapat dikirim ke front-end melalui simpul uibuilder . Atau, dapat disimpan dan hasil yang digunakan dalam beban awal. Beberapa opsi sederhana seperti tabel dan daftar tersedia di Uibuilder v6.1, elemen dan struktur tambahan akan tersedia di versi mendatang. Klien front-end uibuilder mengambil informasi konfigurasi dan secara dinamis membangun elemen HTML dan menyisipkannya ke halaman web (atau menghapus/pembaruan sesuai kebutuhan).

Meskipun ini bukan pendekatan pemrosesan yang paling efisien (karena pembaruan sebagian besar menggantikan seluruh elemen yang bisa sangat besar untuk hal -hal seperti tabel besar), itu sangat efisien dari perspektif penulisan. Jadi simpul uib-update memberikan pendekatan yang lebih ditargetkan untuk memperbarui dan mengubah atribut spesifik dan konten "slot" untuk elemen.

Node uib-tag kemudian memungkinkan Anda membuat elemen HTML tunggal dan mencakup semua hal yang mungkin belum dicakup oleh uib-element (belum). Ini bahkan berfungsi dengan komponen web yang merupakan vanilla html/javaScript asli perangkat tambahan untuk html.

Penting untuk dicatat bahwa tidak ada kerangka kerja front-end, pihak ke-3 seperti Vuejs atau React yang diperlukan untuk pendekatan ini! Semuanya menggunakan vanilla HTML, JavaScript dan CSS di bawah kulit dan karenanya kompatibel dengan standar web saat ini dan di masa depan .

UI kode rendah

Data yang output uib-element adalah format yang dapat Anda gunakan dalam aliran Anda sendiri dalam node-merah dan bahkan dalam kode ujung depan jika diinginkan. Ini menggambarkan satu set elemen HTML UI tetapi tidak membutuhkan Anda untuk benar -benar menulis kode HTML. Skema konfigurasi sangat fleksibel dan bahkan memungkinkan Anda memuat data konfigurasi, HTML, skrip, dan modul/komponen ECMA baru dari file eksternal.

Skema dan fungsi pencipta UI yang dibangun ke dalam klien front-end secara khusus dirancang untuk bekerja dengan standar HTML saat ini dan di masa depan untuk menghindari jenis masalah yang umumnya ditemui saat menggunakan kerangka kerja front-end pihak ke-3 (misalnya perubahan versi utama yang memaksa penulisan ulang semua alat Anda). Jadi modul ES, komponen ECMA, dan versi ECMA di masa depan semua harus didukung.

Perpustakaan ui.js sekarang juga tersedia untuk digunakan siapa pun dalam proyek mereka sendiri dan bekerja sepenuhnya berdiri sendiri tanpa uibuilder. Ini juga dimasukkan ke dalam simpul uib-html yang mengubah konfigurasi kode rendah menjadi HTML dari dalam simpul-merah.

Arah masa depan

Uibuilder akan terus independen dari kerangka kerja front-end meskipun juga akan terus se-kompatibel mungkin sehingga kerangka kerja yang diinginkan dapat digunakan dengannya.

• Ini akan terus mendapatkan lebih banyak elemen pra-built nol-kode.
• Ini akan mendapatkan kontrol yang ditingkatkan atas struktur folder akar instan dan kemampuan untuk menjalankan skrip npm run yang ditentukan dalam package.json .
• Lebih Banyak Video!

Fokus jangka panjang

Masih ada keinginan untuk membangun fitur pembangun halaman sehingga orang yang tidak memiliki keterampilan pengkodean dapat membangun aplikasi web yang didorong oleh data yang hebat.

• Kualitas dokumentasi akan terus meningkat.
• Jumlah dependensi modul pihak ke-3 akan dikurangi. Dimulai dengan penghapusan fs-extra yang akhirnya mendukung perpustakaan FS asli yang menjanjikan. Diikuti kemungkinan besar oleh arun .
• Setelah Node.js v18 atau 20 adalah basis, kode cenderung direfaktor menjadi beberapa sub-paket dalam mono-repo.

Detail dan manfaat fitur

• Dirancang sebagai alternatif untuk dasbor resmi node-merah. Tanpa overhead dan batasan.
• Kontrol semuanya dari UI Admin Node-Red. Edit file sumber daya front-end Anda, kelola paket front-end. Tidak perlu mengakses baris perintah server.
• Kelola templat startup. Templat internal untuk vanilla HTML, SVELTE, VUEJS (V2 & V3), dan Vuejs/Bootstrap-Vue disediakan. Muat templat dari repositori lain melalui degit . Memudahkan untuk berbagi templat yang menyediakan seluruh aplikasi atau hanya menangani boilerplate.
• Memiliki antarmuka pengguna khusus sebanyak yang Anda inginkan. Hanya 1 node yang diperlukan untuk setiap titik masuk. Gunakan node tautan untuk mengirim data dari bagian lain aliran Anda. Titik masuk dapat berisi beberapa halaman web.
• Memiliki antarmuka kontrol terpisah dengan antarmuka pesan. Ketahui kapan tab browser menghubungkan atau memutuskan, mengirim data yang di -cache, dan banyak lagi.
• Berikan ID klien yang stabil yang mengidentifikasi profil browser tertentu sampai dimulai kembali. Tabid disediakan yang mengidentifikasi tab browser tertentu pada perangkat klien.
• Berikan informasi kepada Node-Red tentang klien yang mengirim MSG sehingga keamanan dan pemrosesan lainnya dapat mengidentifikasi klien, pengguna, dan sebagainya.
• Bisa jauh lebih ringan dan lebih ramah seluler daripada dasbor resmi node-merah.
• Gunakan kerangka kerja front-end yang Anda sukai. Cukup instal melalui manajer perpustakaan bawaan.
• Gunakan tanpa kerangka kerja front-end jika Anda mau. Jaga agar ringan dan sederhana. Cobalah ini dengan template "kosong" dan simpul uib-element .
• Perpustakaan front-end yang disertakan ( uibuilder.iife.js , uibuilder.esm.js ) memberikan konektivitas ke node-merah dan penanganan acara MSG bersama dengan beberapa fungsi utilitas helper.
• Tulis HTML, CSS, dan JavaScript Anda sendiri untuk menentukan antarmuka pengguna front-end yang sempurna untuk kebutuhan Anda. Atau tentukan menggunakan deskripsi konfigurasi JSON.
• Edit kode front-end kustom Anda dari dalam editor node-red. Auto-reload klien Anda tentang perubahan pada kode. Bagus untuk perkembangan yang cepat. Perhatikan bahwa ini dirancang untuk pengeditan cepat, disarankan untuk menggunakan toolchain pengembangan web normal Anda untuk pengeditan yang lebih besar.
• Tidak perlu hampir tidak ada boilerplate di kode front-end Anda agar berfungsi.
• Daftar halaman web indeks opsional dari file yang tersedia.
• Dua halaman web Info Admin terperinci disertakan untuk membantu penulis memahami di mana semuanya dan apa yang tersedia.
• Menggunakan server web ExpressJs Node-Red sendiri secara default. Beralih ke server ExpressJS khusus jika diinginkan. Saat menggunakan server khusus, halaman juga dapat mencakup templating sisi-server EJB.
• Memiliki middleware untuk ExpressJS (untuk layanan web) dan Socket.io (untuk komunikasi, baik di koneksi awal dan per-pesan) sehingga Anda dapat menambahkan fitur khusus Anda sendiri termasuk keamanan.
• Dapat membuat API khusus untuk setiap instance uibuilder.
• Gunakan perpustakaan ui.js di proyek Anda sendiri!

Berkontribusi

Jika Anda ingin berkontribusi pada node ini, Anda dapat menghubungi informasi sepenuhnya melalui GitHub atau mengajukan permintaan dalam log masalah GitHub.

Permintaan tarik untuk kode dan dokumentasi disambut dan wiki terbuka untuk entri dan koreksi baru (tapi tolong beri tahu saya jika Anda melakukan perubahan).

Silakan merujuk pada Pedoman yang Berkontribusi untuk informasi lebih lanjut.

Anda juga dapat mendukung pengembangan uibuilder dengan mensponsori pengembangan.

Sponsor GitHub, Sponsorship PayPal

Sponsor

• @Magicjf

Pengembang/Kontributor

• Julian Knight - Perancang dan penulis utama.
• Hukum Colin - Terima kasih banyak atas pengujian, koreksi, dan permintaan tarik.
• Steve Rickus - Terima kasih banyak atas pengujian, koreksi, kontribusi kode dan ide desain.
• Ellie Lee - Terima kasih banyak atas PR yang memperbaiki MSG duplikat.
• Thomas Wagner - Terima kasih atas steer dan pr dalam menggunakan folder proyek jika aktif.
• Arlena Derksen - Terima kasih atas saran, pemeriksaan bug dan masalah #59/PR #60.
• CFLURIN - Terima kasih atas contoh cache.
• Scott Page - IndySoft - Terima kasih atas edisi #73/PR #74.
• Stephen McLaughlin - Steve -MCL - Terima kasih atas perbaikannya untuk edisi #71 dan untuk masalah Ide Peningkatan #102.
• Sergio Rius - Terima kasih atas edisi pelaporan #121 dan memberikan PR #122 sebagai perbaikan.
• Thorsten von Eicken - Terima kasih telah menyediakan PR #131 untuk meningkatkan penanganan CORS untuk socket.io.
• Meeki007 - Terima kasih telah memasok berbagai perbaikan dokumentasi dan perbaikan kode.
• Scott - TallTechDude - Terima kasih telah memasok PR #170.
• Calum Knott - Terima kasih untuk logo node -blue yang dirapikan.
• Harold Peters Inskipp - Terima kasih atas contoh loggingnya.
• DCZYSZ - Terima kasih telah melaporkan edisi #186 dan membantu bekerja melalui bug async yang kompleks.
• Colin J (Mudwalkercj) - Terima kasih telah membantu dokumentasi.
• Marcus Davies - Terima kasih banyak atas dorongan dan untuk logo 3D.
• FABIO MARZOCCA (FMARZOCCA)) - Terima kasih banyak atas bantuan dengan desain dan pengujian perpustakaan router front -end UIBRouter.

Banyak orang lain telah menyumbangkan ide dan saran, terima kasih kepada semua orang yang melakukannya, mereka sangat disambut.

Tolong lihat juga blog saya, banyak ado tentang hal itu, ia memiliki informasi tentang semua jenis topik, terutama terkait, termasuk node-merah.