Komponen Halaman Web SVG Untuk IoT Dan Pembuat (Bagian 2)

Jadi, kita sudah memiliki cara untuk memuat menu ikon SVG secara dinamis yang dibuat untuk bereaksi dengan memuat panel jika kita menginginkannya, tetapi ikon bukanlah komponen yang sebenarnya. Kami dapat menggunakan trik sederhana untuk memasukkan SVG untuk setiap ikon dan meneruskannya ke aplikasi Vue. Itu cukup sederhana untuk menghasilkan daftar ikon, dan setiap ikon bereaksi dengan cara yang sama kecuali untuk perbedaan data yang kecil. Perbedaan data memungkinkan untuk mengikat nama panel ke setiap ikon sedemikian rupa sehingga handler untuk klik tombol ikon dapat meneruskannya.

Ketika sebuah panel dimuat dalam bentuk komponen Vue, segala sesuatu tentang panel dan komponennya harus dimuat, template, JavaScript, dan banyak lagi. Jadi, tugas mengelola pemuatan panel saja lebih besar dari yang kita temui selama ini dalam diskusi ini.

Mari kita lihat cara Vue menyediakan pengait untuk pemuatan asinkron. Cuplikan berikut berasal dari panduan Vue.

 Vue.component('async-example', function (resolve, reject) { setTimeout(function () { // Pass the component definition to the resolve callback resolve({ template: '<div>I am async!</div>' }) }, 1000) })

Panduan ini memberi tahu kita bahwa fungsi setTimeout adalah contoh bagaimana menggunakan sinkronisitas dengan komponen Vue. Perhatikan bahwa sebelumnya ada objek sebagai parameter kedua untuk Vue.component , sekarang ada fungsi, yang disebut sebagai fungsi pabrik. Di dalam resolve callback terdapat definisi komponen, yang akan menjadi parameter kedua untuk Vue.component sebelumnya.

Jadi, saya harus melihat contoh ini beberapa saat sebelum masuk akal bagi saya. Berikut adalah contoh lain, yang lebih cocok untuk saya:

 Vue.component('async-example', function (resolve, reject) { // Vue will call this function and promise itself to handle // it when it gets back with data. // this function can then call a promising object loader // here the 'loader' function is some abstract function. // Most likely the application will use 'fetch' // but it could be something else. loader('/my/resource/on/server.json'). then(function (JSON_data) { var object = transformJSONToJSObject(JSON_data); resolve(object) }).catch( (error) => { handle it } );

Sepertinya hal yang benar untuk dilakukan untuk membuat fungsi yang lebih umum untuk mengelilingi formulir ini.

 function componentLoader(c_name,resource_url) { Vue.component(c_name, function (resolve, reject) { loader(resource_url). then(function (JSON_data) { var object = transformJSONToJSObject(JSON_data); resolve(object) }).catch( (error) => { handle it } ); }

Jadi, secara umum, untuk memuat sebuah komponen, kita hanya membutuhkan baris seperti berikut:

 componentLoader('ThermoPanel','./JSON/thermo-panel.json');

Jadi sekarang, apa JSON yang sedang dimuat? Ini dapat mencakup segala sesuatu tentang komponen. Dalam hal ini, sebagai komponen panel, dapat mencakup termometer, sakelar mesin, penggeser, pengukur, dan banyak lagi. Meskipun tampaknya lebih baik untuk menyimpan bagian komponen di halaman web, mungkin sebenarnya bekerja lebih baik untuk menggunakan bidang subkomponen yang ada dalam contoh yang lebih panjang untuk 'panel termo' yang kami buat sebelumnya dan juga untuk panel lain yang dibuat serupa. JSON akan berisi struktur panel lengkap.

Namun, jika pembaca akan melihat penyertaan pemanggilan fungsi ke transformJSONToJSObject , ia akan memahami bahwa JSON mungkin dikodekan dalam beberapa cara untuk mempermudah pengangkutan dan mempermudah server menangani definisi. Lagi pula, definisi akan mencakup templat SVG lengkap, definisi fungsi, dan ekspresi JavaScript lainnya. Juga, objek JSON mungkin berisi lebih dari sekadar definisi panel karena beberapa informasi mungkin hanya membantu dalam pembukuan atau validasi. Jadi, orang dapat mengharapkan bahwa akan ada beberapa perlakuan terhadap objek tersebut setelah diterima.

Adapun pengkodean, data yang masuk dari server dapat dikodekan dalam beberapa cara. Mungkin itu hanya akan disandikan URL. Atau lebih amannya, mungkin dienkripsi. Untuk pembahasan kali ini, kita bisa menggunakan encoding URL saja.

Beberapa alat yang tersedia untuk membuat aplikasi Vue tidak diragukan lagi menangani transformasi JSON. Tapi, diskusi ini sejauh ini menghindari penggunaan alat baris perintah. Kelalaian ini tidak terlalu buruk karena kami juga menggunakan Vue dengan sumber daya minimum, hanya menggunakan satu tag skrip untuk merujuk ke CDN. Namun, saya tentu saja merekomendasikan untuk melihat ke alat baris perintah terutama untuk mengatur proyek.

Ketika JSON tiba di halaman, mengingat komponen telah dirakit sepenuhnya dengan subkomponen, tidak ada lagi pekerjaan yang harus dilakukan untuk mengambil bagian-bagiannya. Kita dapat membuat asumsi bahwa semua komponen akan didefinisikan sepenuhnya untuk sisa diskusi ini. Tetapi, merakit hierarki komponen yang lengkap akan membutuhkan alat baris perintah di beberapa titik.

Proses pengeditan SVG juga membutuhkan beberapa pekerjaan. Proses pengeditan SVG memungkinkan seorang desainer menggambar panel dan semua komponen di dalamnya. Namun, setiap subkomponen harus diidentifikasi, dipanggil dalam kelompok, atau diberi tempat. Pendekatan apa pun untuk menggunakan gambar memerlukan beberapa perawatan SVG sehingga tag komponen Vue dapat menggantikan grup atau elemen grafis. Dengan cara ini, setiap rendering artis dapat menjadi template. Dan, subkomponen yang digambar harus dibongkar menjadi template untuk subkomponen Vue.

Kekikiran semacam ini bertentangan dengan alur kerja sebagian besar kerangka kerja JavaScript. Kerangka kerja adalah tentang merakit halaman. Tapi, mengedit atau menggambar, menghasilkan sesuatu yang sudah dirakit oleh seorang seniman. Dalam praktiknya, hasil pengeditan tidak menyediakan file teks yang berhubungan langsung dengan definisi komponen kerangka kerja.

Lebih lanjut tentang proses pengeditan dapat dipertimbangkan dalam beberapa diskusi lain. Ada banyak untuk itu. Namun, untuk saat ini, kami memiliki alat yang kami butuhkan untuk memuat komponen hierarki dan membuatnya menjadi hidup.

Aplikasi Malas

Untuk konstruksi panel IoT kami, kami sudah memiliki bilah pilihan yang merespons pencarian. Dan, kami memiliki cara untuk memuat komponen saat kami membutuhkannya. Kita hanya perlu menghubungkan bagian-bagian ini. Dan, akhirnya, kita harus memastikan bahwa panel-panel itu muncul dan mulai bekerja saat itu muncul.

Pemuatan malas panel yang dilakukan oleh kode async di atas memberikan sketsa ide. Namun, untungnya, beberapa orang telah bereksperimen untuk menemukan cara memastikan bahwa semua jenis komponen dapat dimuat. Ada satu entri codepen yang menunjukkan cara memperbarui aplikasi Vue dengan komponen baru dari berbagai jenis. Itulah mekanisme yang diperlukan untuk memperbarui bagian halaman yang ditentukan dengan berbagai jenis panel.

Dengan kemampuan untuk menambahkan berbagai jenis panel dan dengan mekanisme sederhana untuk memuat definisinya, akhirnya kita dapat memiliki halaman pencarian panel kita.

Berikut adalah HTML yang kami butuhkan di halaman kami agar aplikasi Vue dapat menempatkan komponen secara dinamis:

 <template v-for="(panel, index) in panelList"> <component :is="panel" :key="panel.name"></component> </template>

Tag component adalah tag meta Vue. Lihat referensi untuk komponen dinamis. Properti, atribut khusus, yang digunakan untuk tag component dalam hal ini adalah is and key. Atribut is ada untuk komponen dinamis. Dan, key memastikan bahwa anak-anak baru akan memiliki identitas yang berbeda satu sama lain dan membantu Vue untuk memutuskan apa yang akan digambar.

“Anak-anak dari orang tua yang sama harus memiliki kunci unik. Kunci duplikat akan menyebabkan kesalahan rendering.”

Tag template akan mengulang komponen yang disediakan di bidang data panelList aplikasi.

Jadi, mulai dengan definisi Vue level aplikasi untuk aplikasi ikon, kita dapat membuat perubahan untuk menyertakan panelList dalam elemen data. (Sekarang mari kita menyebutnya panelApp).

 var panelApp = new Vue({ el: '#PanelApp', data: { iconList: [ // Where is the data? Still on the server. ], panelList: [ ], queryToken : "Thermo Batches" // picked a name for demo }, methods : { goGetPanel: function (pname) { // var url = panelURL(pname); // this is custom to the site. fetch(url).then((response) => { // this is now browser native response.text().then((text) => { var newData = decodeURIComponent(text); eval(pHat); // widgdef = object def, must be assignment pHat = widgdef; var pnameHat = pname + pcount++; pHat.name = pnameHat; // this is needed for the key this.panelList.push(pHat); // now it's there. }).catch( error => { /* handle it */ }); } } });

Selain menambahkan di panel, goGetPanel sekarang dalam bentuk yang diperlukan untuk mendapatkan definisi komponen dari database atau toko lain. Sisi server harus berhati-hati dalam mengirimkan kode JavaScript dalam format yang benar. Adapun seperti apa objek itu berasal dari server, kami telah melihatnya. Ini adalah jenis objek yang digunakan sebagai parameter untuk Vue.component .

Berikut adalah isi lengkap dari aplikasi Vue yang menyediakan menu sebagai hasil pencarian dan tempat untuk meletakkan panel yang diambil dari server ketika pengguna mengklik ikon.

 <div> <!-- Recognize the name from the Vue doc --> <div> <h2 itemprop="name">Request MCU Groups</h2> <p itemprop="description">These are groups satistfying this query: {{queryToken}}.</p> <button>Find All</button> <button>Find 5 Point</button> <button>Find 6 Point</button> </div> <!-- Here is a Vue loop for generating a lit --> <div class="entryart"> <button v-for="iconEntry in iconList" @click="goGetPanel(iconEntry.name)" > <div v-html="iconEntry.icon"> </div> </button> </div> <div class="entryart" > <template v-for="(panel, index) in panelList"> <component :is="panel" :key="panel.name" :ref="panel.name" ></component> </template> </div> </div>

Di div terakhir, tag component sekarang memiliki parameter ref yang terikat ke nama panel. Parameter ref memungkinkan aplikasi Vue mengidentifikasi komponen mana yang akan diperbarui dengan data dan memisahkan komponen. Parameter ref juga memungkinkan aplikasi kita mengakses komponen baru yang dimuat secara dinamis.

Dalam satu versi uji aplikasi panel, saya memiliki penangan interval berikut:

 setInterval(() => { var refall = panelApp.$refs; // all named children that panels for ( var pname in refall ) { // in an object var pdata = refall[pname][0]; // off Vue translation, but it's there. pdata.temp1 = Math.round(Math.random()*100); // make thermos jump around. pdata.temp2 = Math.round(Math.random()*100); } },2000)

Kode memberikan sedikit animasi, mengubah termometer secara acak. Setiap panel memiliki dua termometer, dan aplikasi ini memungkinkan pengguna untuk terus menambahkan panel. (Dalam versi final, beberapa panel harus dibuang.) Referensi sedang diakses menggunakan panelApp.$refs , bidang yang dibuat Vue berdasarkan informasi refs dalam tag component .

Jadi, inilah tampilan termometer yang melompat secara acak dalam satu foto:

Menghubungkan Panel Ke Perangkat IoT

Jadi, potongan kode terakhir adalah tes setInterval yang memperbarui termometer dengan nilai acak setiap dua detik. Tapi, yang ingin kami lakukan adalah membaca data nyata dari mesin nyata. Untuk melakukan itu, kita memerlukan beberapa bentuk komunikasi.

Ada berbagai cara. Tapi, mari kita gunakan MQTT yang merupakan sistem pesan pub/sub. SPWA kami dapat berlangganan pesan dari perangkat kapan saja. Ketika mendapat pesan tersebut, SPWA dapat mengarahkan setiap pesan ke penangan data yang sesuai untuk panel yang dipetakan ke perangkat yang diidentifikasi dalam pesan.

Jadi, pada dasarnya yang perlu kita lakukan adalah mengganti setInterval dengan penangan respons. Dan, itu untuk satu panel. Kami mungkin ingin memetakan panel ke penangan saat mereka dimuat. Dan, terserah server web untuk melihat bahwa pemetaan yang benar dikirimkan.

Setelah server web dan SPWA memiliki halaman yang siap untuk dioperasikan, server web tidak perlu lagi menangani pengiriman pesan antara halaman dan perangkat. protokol MQTT menentukan server perutean untuk menangani pub/sub. Sejumlah server MQTT telah dibuat. Beberapa di antaranya adalah open source. Salah satu yang sangat populer adalah Mosquito , dan ada beberapa yang dikembangkan di atas Node.js.

Proses untuk halaman ini sederhana. SPWA berlangganan topik. Salah satu versi topik yang baik adalah pengenal untuk MCU seperti alamat MAC atau nomor seri. Atau, SPWA dapat berlangganan semua pembacaan suhu. Namun, halaman tersebut harus melakukan pekerjaan memfilter pesan dari semua perangkat. Publikasi di MQTT pada dasarnya adalah siaran atau multicast.

Mari kita lihat bagaimana SPWA akan berinteraksi dengan MQTT.

Inisialisasi MQTT Pada SPWA

Ada beberapa perpustakaan klien untuk dipilih. Salah satunya, misalnya, adalah MQTT.js. Lain adalah gerhana paho. Ada lebih banyak tentu saja. Mari kita gunakan Eclipse Paho karena memiliki versi CDN yang tersimpan. Kita hanya perlu menambahkan baris berikut ke halaman kita:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>

Klien MQTT harus terhubung ke server sebelum dapat mengirim dan menerima pesan. Jadi, baris yang mengatur koneksi juga perlu disertakan dalam JavaScript. Kita dapat menambahkan fungsi MQTTinitialize yang mengatur klien dan tanggapan untuk manajemen koneksi dan penerimaan pesan.

 var messagesReady = false; var mqttClient = null; function MQTTinitialize() { mqttClient = new Paho.MQTT.Client(MQTTHostname, Number(MQTTPort), "clientId"); mqttClient.onMessageArrived = onMessageArrived; // connect the client mqttClient.connect({ onSuccess: () => { messagesReady = true; } }); // set callback handlers mqttClient.onConnectionLost = (response) => { // messagesReady = false; // if (response.errorCode !== 0) { console.log("onConnectionLost:"+response.errorMessage); } setTimeout(() => { MQTTinitialize() },1000); // try again in a second }; }

Menyiapkan Langganan

Dengan koneksi siap, klien dapat berlangganan saluran pesan, mengirim pesan pada mereka, dll Hanya beberapa rutinitas dapat melakukan sebagian besar pekerjaan yang diperlukan untuk menghubungkan panel dengan jalur MQTT.

Untuk panel SPWA, momen berlangganan dapat digunakan untuk menetapkan hubungan antara panel dan topik, pengidentifikasi MCU.

 function panelSubcription(topic,panel) { gTopicToPanel[topic] = panel; gPanelToTopic[panel] = topic; mqttClient.subscribe(topic); }

Mengingat bahwa MCU menerbitkan topiknya, SPWA akan menerima pesan. Di sini, pesan Paho dibongkar. Dan, kemudian pesan tersebut diteruskan ke mekanisme aplikasi.

 function onMessageArrived(pmessage) { // var topic = pmessage.destinationName; var message = pmessage.payloadString; // var panel = gTopicToPanel[topic]; deliverToPanel(panel,message); }

Jadi, sekarang yang perlu kita lakukan adalah membuat deliverToPanel yang seharusnya seperti handler interval yang kita miliki sebelumnya. Namun, panel tersebut diidentifikasi dengan jelas, dan hanya data kunci yang dikirim dalam pesan tertentu yang dapat diperbarui.

 function deliverToPanel(panel,message) { var refall = panelApp.$refs; // all named children that panels var pdata = refall[panel][0]; // off Vue translation, but it's there. var MCU_updates = JSON.parse(message); for ( var ky in MCU_updates ) { pdata[ky] = MCU_updates[ky] } }

Fungsi deliverToPanel ini cukup abstrak untuk memungkinkan definisi panel apa pun dengan sejumlah titik data untuk animasi.

Mengirim Pesan

Untuk menyelesaikan loop aplikasi antara MCU dan SPWA, kami mendefinisikan fungsi untuk mengirim pesan.

 function sendPanelMessage(panel,message) { var topic = gPanelToTopic[panel]; var pmessage = new Paho.MQTT.Message(message); pmessage.destinationName = topic; mqttClient.send(pmessage); }

Fungsi sendPanelMessage tidak lebih dari mengirimkan pesan pada jalur topik yang sama yang menjadi langganan SPWA.

Karena kami berencana untuk membuat tombol ikon yang bertanggung jawab untuk membawa sejumlah panel untuk satu kluster MCU, akan ada lebih dari satu panel yang harus diurus. Namun, kami perlu diingat bahwa setiap panel sesuai dengan satu MCU, jadi kami memiliki pemetaan satu-satu, yang untuk itu kami dapat menggunakan dua peta JavaScript untuk peta dan kebalikannya.

Jadi, kapan kita mengirim pesan? Biasanya aplikasi panel akan mengirimkan pesan ketika ingin mengubah keadaan MCU.

Menjaga Status Tampilan (Vue) Tersinkron dengan Perangkat

Salah satu hal hebat tentang Vue adalah sangat mudah untuk menyinkronkan model data dengan aktivitas pengguna, yang dapat mengedit bidang, mengklik tombol, menggunakan bilah geser, dll. Dapat dipastikan bahwa perubahan tombol dan bidang akan tercermin segera di bidang data komponen.

Tapi, kami ingin perubahan untuk menjalankan pesan ke MCU segera setelah perubahan terjadi. Jadi, kami berusaha memanfaatkan event interface yang mungkin diatur oleh Vue. Kami berusaha untuk menanggapi peristiwa seperti itu, tetapi hanya setelah model data Vue siap dengan nilai saat ini.

Saya membuat panel jenis lain, yang ini dengan tombol yang terlihat cukup artistik (mungkin terinspirasi oleh Jackson Pollock). Dan, saya mengubahnya menjadi sesuatu yang kliknya melaporkan status kembali ke panel yang memuatnya. Itu tidak begitu sederhana prosesnya.

Satu hal yang membuat saya kecewa adalah saya telah melupakan beberapa keanehan dalam mengelola SVG. Saya pertama kali mencoba mengubah string gaya sehingga bidang display gaya CSS menjadi "Tidak Ada" atau "sesuatu". Namun, browser tidak pernah menulis ulang string gaya. Tapi, karena itu rumit, saya mencoba mengubah kelas CSS. Itu juga tidak berpengaruh. Namun, ada atribut visibility , yang sebagian besar dari kita ingat dari HTML lama (mungkin versi 1.0), tapi itu sangat mutakhir di SVG. Dan, itu bekerja dengan baik. Yang harus saya lakukan adalah membuat acara klik tombol menyebar.

Vue telah merancang properti untuk menyebar ke satu arah, orang tua ke anak. Jadi, untuk mengubah data di aplikasi, atau di panel, Anda harus mengirim acara perubahan ke induk. Kemudian, Anda dapat mengubah data. Perubahan elemen data yang mengontrol tombol menyebabkan Vue memperbarui properti yang memengaruhi visibilitas elemen SVG yang telah kita pilih untuk menunjukkan status. Berikut ini contohnya:

Setiap contoh dari panel tombol berlekuk-lekuk adalah independen. Jadi, ada yang ON dan ada yang OFF.

Cuplikan SVG ini berisi indikator kuning yang tampak aneh:

 <path :visibility="stateView" d="m -36.544616,12.266886 c 19.953088,17.062165 5.07961,-19.8251069 5.317463,8.531597 0.237853,28.356704 13.440044,-8.847959 -3.230451,10.779678 -16.670496,19.627638 14.254699,-2.017715 -11.652451,3.586456 -25.90715,5.60417 10.847826,19.889979 -8.095928,-1.546575 -18.943754,-21.436555 -1.177383,14.210702 -4.176821,-12.416207 -2.999438,-26.6269084 -17.110198,8.030902 2.14399,-8.927709 19.254188,-16.9586105 -19.075538,-8.0837048 9.448721,-5.4384245 28.52426,2.6452804 -9.707612,-11.6309807 10.245477,5.4311845 z" transform="translate(78.340803,6.1372042)" />

Visibilitas diisi oleh stateView , variabel yang dihitung yang memetakan boolean status ke string untuk SVG.

Berikut adalah template definisi komponen panel:

 <script type="text/x-template"> <div> <control-switch :state="bstate" v-on:changed="saveChanges" ></control-switch> <gauge :level="fluidLevel" ></gauge> </div> </script>

Dan, ini adalah definisi JavaScript dari panel Vue dengan anak-anaknya sebagai subkomponen:

 var widgdef = { data: function () { var currentPanel = { // at the top level, values controlling children bstate : true, fluidLevel : Math.round(Math.random()*100) } // return currentPanel }, template: '#mcu-control-panel-template', methods: { saveChanges: function() { // in real life, there is more specificity this.bstate = !this.bstate relayToMCU(this.name,"button",this.bstate) // to be defined } }, components: { 'control-switch' : { // the odd looking button props: ['state'], template: '#control-switch-template', // for demo it is in the page. computed: { // you saw this in the SVG above. stateView : function() { return ( this.state ) ? "visible" : "hidden" } }, methods : { // the button handler is in the SVG template at the top. stateChange : function () { // can send this.$emit('changed'); // tell the parent. See on the template instance } } }, 'gauge' : { // some other nice bit of SVG props: ['level'], template: '#gauge-template' } } }

Jadi, sekarang mekanisme untuk satu tombol yang disematkan di panel telah ditata. Dan, harus ada pengait untuk memberi tahu MCU bahwa sesuatu telah terjadi. Itu harus segera dipanggil setelah status data komponen panel diperbarui. Mari kita definisikan di sini:

 function relayToMCU(panel,switchName,bstate) { var message = switchName + ':' + bstate // a on element parameter string. sendPanelMessage(panel,message) }

Ada perubahan status dalam perjalanannya ke perangkat keras hanya dalam dua baris kode.

Tapi, ini adalah kasus yang cukup sederhana. Sakelar apa pun dapat dilihat sebagai panggilan fungsi ke perangkat keras di dunia. Jadi, string mungkin berisi nama sakelar dan beberapa elemen data lainnya. Jadi, metode komponen yang mendaftarkan perubahan harus memiliki beberapa penanganan khusus di dalamnya agar dapat mengumpulkan semua bagian kumpulan data pada panel dan mengirimkannya bersama dalam satu string perintah. Bahkan string perintahnya sedikit sederhana. Jika MCU cukup kecil, string perintah mungkin harus diterjemahkan ke dalam kode. Jika MCU memiliki banyak kemampuan, string perintah mungkin sebenarnya adalah struktur JSON atau mungkin semua data yang dihosting oleh panel.

Dalam diskusi ini, tombol pada panel ikon berisi nama panel yang akan diambil. Itu mungkin juga cukup disederhanakan. Tampaknya masuk akal bahwa parameter itu dapat digunakan untuk panel apa pun yang mungkin disimpan dalam database perusahaan. Tapi, mungkin itu beberapa formula. Mungkin, informasi tentang panel harus dibungkus dengan definisi panel yang kita terima dari server. Bagaimanapun, dasar-dasarnya dapat dengan mudah diperluas setelah sakit kepala tertentu disingkirkan, seperti membuat SVG merespons klik dengan benar.

Kesimpulan

Diskusi ini telah menjabarkan beberapa langkah dan keputusan dasar yang mengarah pada realisasi Single Page Web App (SPWA) yang dapat berinteraksi dengan perangkat IoT. Kami sekarang tahu cara mendapatkan panel dari server web dan mengubahnya menjadi antarmuka MCU.

Ada lebih banyak diskusi ini dengan beberapa diskusi lain yang mungkin menyusul. Memulai dengan Vue adalah satu hal yang perlu dipikirkan. Tapi, kemudian ada cerita MCU secara keseluruhan, yang hanya kami singgung secara singkat.

Secara khusus, dengan memilih MQTT sebagai substrat komunikasi, kami berasumsi bahwa perangkat IoT di ujung lain entah bagaimana dapat diatur oleh MQTT. Tapi, itu mungkin tidak selalu terjadi. Terkadang gateway diperlukan jika MQTT ingin mendapatkan akses ke perangkat dengan tautan serial atau Bluetooth. Atau, mungkin semua yang dibutuhkan dari halaman web adalah WebSockets. Namun demikian, kami menggunakan MQTT sebagai contoh untuk menunjukkan bagaimana Vue dapat menerima dan mengirim data sekaligus menjaga status datanya tetap sinkron dengan perangkat.

Sekali lagi kita hanya memiliki sebagian dari cerita. Kali ini untuk sinkronisasi karena halaman harus dapat menangani peringatan dan mengganggu pengguna jika terjadi sesuatu yang kritis. Terkadang pesan bisa hilang. Jadi, kita harus memiliki mekanisme untuk pengakuan.

Akhirnya, menurut saya Vue membuat pembaruan data setelah diterima cukup elegan. Tapi, mengirim perubahan status tidak begitu mudah. Tampaknya tidak membuat pekerjaan lebih sederhana daripada yang dapat dilakukan dengan vanilla JavaScript. Tapi, ada cara dan masuk akal.

Mungkin perpustakaan yang bersih dapat dibangun untuk membuat satu set komponen universal untuk semua panel. Unsur-unsur untuk membuat perpustakaan tersebut dan menyimpannya dalam database telah disebutkan secara singkat. Alat yang lebih dari sekadar membuat gambar SVG mungkin harus dikembangkan. Bagaimanapun, ada banyak hal yang bisa dilakukan untuk langkah selanjutnya.