Nano 33 IoT + EC/pH/ORP + WebAPK

tx_Characteristic akan menjadi tempat perangkat mengirimkan informasi, seperti pengukuran EC, untuk ditampilkan di halaman web. rx_Characteristic adalah tempat ia akan menerima perintah dari halaman web untuk dieksekusi.

Proyek ini menggunakan perpustakaan ArduinoBLE. Jika Anda perhatikan, Anda akan melihat ada beberapa perbedaan yang menyatakan suatu ciri. Proyek ini menggunakan BLStringCharacteristic karena kita akan berurusan dengan tipe String dan itu lebih mudah, tetapi Anda juga bisa memilih BLECharCharacteristic atau BLEByteCharacteristic dari beberapa lainnya.

Selain itu, ada beberapa properti yang dapat Anda berikan karakteristiknya. tx_Characteristic memiliki BLENotify sebagai pilihan. Itu berarti bahwa halaman web kita akan menerima pemberitahuan ketika nilainya berubah. rx_Characteristic memiliki BLEWrite yang akan memungkinkan halaman web kami untuk memodifikasinya. Ada yang lain.

Kemudian ada sedikit lem kode untuk mengikat semua ini menjadi satu:

BLE.setLocalName("uFire BLE");
BLE.setAdvertisedService(uFire_Service);
uFire_Service.addCharacteristic(tx_Characteristic);
uFire_Service.addCharacteristic(rx_Characteristic);
BLE.addService(uFire_Service);
rx_Characteristic.setEventHandler(BLEWritten, rxCallback);
BLE.advertise(); 

Kurang lebih sudah cukup jelas, tapi mari kita bahas beberapa poin.

rx_Characteristic.setEventHandler(BLEWritten, rxCallback); 

Di sinilah Anda memanfaatkan pemberitahuan tentang nilai yang diubah. Baris memberitahu kelas untuk menjalankan fungsi rxCallback saat nilainya diubah.

BLE.advertise(); adalah apa yang memulai semuanya. Perangkat BLE secara berkala akan mengirimkan paket kecil informasi yang mengumumkan bahwa itu ada di luar sana dan tersedia untuk dihubungkan. Tanpa itu, itu tidak akan terlihat.

Perintah teks

Seperti disebutkan sebelumnya, perangkat ini akan berbicara dengan halaman web melalui perintah teks sederhana. Semuanya mudah diimplementasikan karena kerja keras telah dilakukan. Sensor uFire hadir dengan perpustakaan berbasis JSON dan MsgPack untuk mengirim dan menerima perintah. Anda dapat membaca lebih lanjut tentang perintah EC dan ISE di halaman dokumentasinya.

Proyek ini akan menggunakan JSON karena sedikit lebih mudah untuk dikerjakan dan dibaca, tidak seperti format MsgPack yang biner.

Berikut ini contoh bagaimana semuanya saling terkait:

• Laman web meminta perangkat untuk pengukuran EC dengan mengirimkan ec (atau lebih khusus menulis ec dengan karakteristik rx_Characteristic)
• Perangkat menerima perintah dan menjalankannya. Kemudian mengirimkan kembali respons berformat JSON dari {"ec":1.24} dengan menulis ke karakteristik tx_Characteristic.
• Laman web menerima informasi dan menampilkannya

Halaman web

Halaman web untuk proyek ini akan menggunakan Vue.js untuk front-end. Tidak diperlukan backend. Selain itu, untuk membuat semuanya lebih sederhana, tidak ada sistem build yang digunakan. Ini dibagi menjadi folder biasa, js untuk javascript, css untuk CSS, aset untuk ikon.

Bagian htmlnya tidak ada yang istimewa. Ini menggunakan bulma.io untuk menata dan membuat antarmuka pengguna. Anda akan melihat banyak hal di bagian. Ini menambahkan semua css dan ikon, tetapi juga menambahkan satu baris secara khusus.

Itu memuat file manifest.json kami yang membuat semua hal PWA terjadi. Ini menyatakan beberapa informasi yang memberi tahu ponsel kita bahwa halaman web ini dapat diubah menjadi aplikasi.

Javascript adalah tempat sebagian besar hal menarik terjadi. Ini dipecah menjadi file, app.js berisi dasar-dasar untuk membuat halaman web Vue berjalan bersama dengan semua variabel terkait UI dan beberapa hal lainnya. ble.js memiliki fitur bluetooth.

Javascript dan Bluetooth Web

Pertama, ini hanya berfungsi di Chrome dan Opera. Saya berharap browser lain akan mendukung ini, tetapi untuk alasan apa pun, mereka tidak.

Lihat app.js dan Anda akan melihat UUID yang sama yang kami gunakan di firmware kami. Satu untuk Layanan uFire, dan masing-masing untuk karakteristik tx dan rx.

Sekarang jika Anda melihat di ble.js, Anda akan melihat connect() dan disconnect() fungsi.

connect() fungsi berisi beberapa logika untuk menjaga UI tetap sinkron, tetapi sebagian besar mengatur hal-hal untuk mengirim dan menerima informasi tentang karakteristik.

Ada beberapa keistimewaan ketika berhadapan dengan Web Bluetooth. Koneksi harus dimulai dengan semacam interaksi fisik pengguna, seperti mengetuk tombol. Anda tidak dapat terhubung secara terprogram saat halaman web dimuat, misalnya.

Kode untuk memulai koneksi terlihat seperti ini:

this.device =menunggu navigator.bluetooth.requestDevice({
 filter:[
 {
 namePrefix:"uFire"
 }
 ], 
 Layanan opsional:[this.serviceUuid]
}); 

Filter:dan bagian Layanan opsional diperlukan untuk menghindari melihat setiap perangkat BLE di luar sana. Anda akan berpikir hanya bagian filter yang akan baik-baik saja, tetapi Anda juga memerlukan bagian Layanan opsional juga.

Kode di atas akan menampilkan dialog koneksi. Itu bagian dari antarmuka Chrome dan tidak dapat diubah. Pengguna akan memilih dari daftar. Meskipun hanya ada satu perangkat yang akan terhubung dengan aplikasi, pengguna tetap harus melalui dialog pemilihan ini, karena masalah keamanan.

Sisa kodenya adalah menyiapkan layanan dan karakteristik. Perhatikan bahwa kami menyiapkan panggilan balik rutin, mirip dengan panggilan balik pemberitahuan firmware:

service =menunggu server.getPrimaryService(this.serviceUuid);
karakteristik =menunggu service.getCharacteristic(this.txUuid);
menunggu karakteristik.startNotifications();
karakteristik .addEventListener(
 "characteristicvaluechanged",
 this.value_update
 ); 

this.value_update sekarang akan dipanggil setiap kali ada informasi baru tentang karakteristik tx.

Salah satu hal terakhir yang dilakukannya adalah menyetel timer untuk memperbarui informasi setiap 5 detik.

value_update() hanyalah fungsi panjang yang menunggu informasi JSON baru masuk dan memperbarui UI dengannya.

ec.js, ph.js, dan orp.js berisi banyak fungsi kecil yang mengirimkan perintah untuk mengambil informasi dan mengkalibrasi perangkat.

Untuk mencoba ini, Anda harus ingat bahwa untuk menggunakan Bluetooth Web, Bluetooth harus dilayani melalui HTTPS. Salah satu dari banyak opsi untuk server HTTPS lokal adalah serve-https. Dengan firmware yang diunggah, semuanya terhubung, dan halaman web disajikan, Anda seharusnya dapat melihat semuanya berfungsi.

Bagian PWA

Ada beberapa langkah untuk mengubah halaman web menjadi aplikasi yang sebenarnya. Progressive Web Apps dapat melakukan lebih dari yang digunakan proyek ini.

• Pemasangan halaman web
• Setelah diinstal, akses offline dimungkinkan
• Dimulai dan dijalankan sebagai aplikasi biasa dengan ikon aplikasi yang tampak biasa

Untuk memulai, kita perlu membuat banyak file. Yang pertama adalah file manifest.json. Ada beberapa situs yang akan melakukan ini untuk Anda, App Manifest Generator, salah satunya.

Beberapa hal yang perlu dipahami:

• Cakupan aplikasi itu penting. Jika menempatkan halaman web ini di ufire.co/uFire-BLE/. Itu berarti lingkup aplikasi saya adalah /uFire-BLE/.
• URL Mulai juga penting. Ini adalah jalur ke halaman web khusus Anda dengan domain dasar yang sudah diasumsikan.
• Mode Tampilan akan menentukan tampilan aplikasi, Standalone akan membuatnya tampak seperti aplikasi biasa tanpa tombol atau antarmuka Chrome.

Anda akan mendapatkan file json. Itu harus ditempatkan di akar halaman web, tepat bersama dengan index.html.

Hal berikutnya yang Anda perlukan adalah Service Worker. Sekali lagi, mereka dapat melakukan banyak hal, tetapi proyek ini hanya akan menggunakan caching agar aplikasi ini dapat diakses secara offline. Implementasi pekerja layanan sebagian besar adalah boilerplate. Proyek ini menggunakan contoh Google dan mengubah daftar file yang akan di-cache. Anda tidak dapat menyimpan file di luar domain Anda.

Buka FavIcon Generator dan buat beberapa ikon.

Hal terakhir adalah menambahkan beberapa kode di Vue mounted() fungsi.

mount:function () {
 if ('serviceWorker' di navigator) {
 navigator.serviceWorker.register('service-worker.js');
 }
 }, 

Ini akan mendaftarkan pekerja ke browser.

Anda dapat memeriksa apakah semuanya berfungsi, dan jika tidak, mungkin mencari tahu alasannya dengan menggunakan Lighthouse, Lighthouse akan menganalisis situs dan memberi tahu Anda berbagai hal.

Jika semuanya berfungsi, saat Anda membuka laman web, Chrome akan menanyakan apakah Anda ingin memasangnya dengan spanduk munculan.

Skema

Semua koneksi dibuat dengan kabel Qwiic.