Aplikasi#5. Arduino IoT + Adafruit IO

Daftar Isi:

Beberapa rekan menanyakan bagaimana menghubungkan Arduino IoT Cloud dengan MQTT. Di samping itu, beberapa teman juga ingin menampilkan data pembacaan sensor di halaman Web. Dari sekian banyak alternatif cara, sebenarnya ada cara yang paling mudah untuk menghubungkan Arduino IoT Cloud dengan protokol MQTT, yaitu menggunakan API bawaan Arduino IoT Cloud, hanya saja penggunaan API ini tidak gratis. Untuk itu, agar tetap gratis, berikut ini cara yang saya usulkan, seperti ditunjukkan diagram berikut ini:

Gambar 1. NodeMCU dan Adafruit IO agar bisa menghubungkan Arduino IoT Cloud dengan protokol MQTT (aplikasi MQTT Panel) dan protokol HTTP (halaman web Blogspot)

Berikut ini tahapan pembuatannya, yang secara berurut mengikuti daftar berikut ini:
  1. Menghubungkan Arduino IoT Cloud dengan NodeMCU.
  2. Menghubungkan Adafruit IO dengan NodeMCU.
  3. Meneruskan data dari Arduino IoT Cloud ke Google Sheet untuk ditampilkan di Blogspot.
  4. Baca dan tulis data feed Adafruit IO dari halaman Web (Blogspot, Wordpress).
  5. Baca dan tulis data feed Adafruit IO dari aplikasi MQTT (MQTT Panel, MQTT Dash, dll.).

Berikut ini uraian masing-masing tahapan di atas.


=========================================================================================



1. Menghubungkan Arduino IoT Cloud dengan NodeMCU

Sebagai contoh di sini, digunakan rangkaian berikut ini:

Gambar 2. Rangkaian terdiri dari 4 komponen: NodeMCU, DHT11, Potensio dan LCD I2C 

Keterangan sambungan: 
 

Kaki NodeMCU

Kaki Komponen

D1

SCL LCD I2C

D2

SDA LCD I2C

D3

DHT11

A0

Potensio

Dengan rangkaian Gambar 2 di atas, diinginkan hal-hal berikut ini:
  1. LCD I2C menampilkan data pembacaan sensor DHT11 yang terdiri dari Suhu dan Kelembaban.
  2. LCD I2C juga menampilkan nilai pembacaan Potensio. Ketiga nilai tersebut ditampilkan di baris pertama LCD I2C.
  3. NodeMCU mengirimkan ketiga data pembacaan tersebut ke Arduino IoT Cloud, sehingga Dashboard Arduino IoT Cloud juga menampilkan nilai Suhu, Kelembaban, dan nilai ADC Potensio.
  4. Di baris kedua LCD I2C, akan menampilkan 2 buah data yang dikirim dari Arduino IoT Cloud, yang terdiri dari 1 data angka (Setpoin) dan 1 data teks (Pesan). 
Berikut ini langkah-langkah pembuatan untuk target di atas:
1. Rangkai komponen NodeMCU, DHT11, Potensio dan LCD I2C seperti Gambar 2 di atas.
2. Sebelum menghubungkan rangkaian tersebut dengan Arduino IoT Cloud, upload program berikut ini di NodeMCU, untuk memastikan bahwa NodeMCU dapat membaca sensor DHT11 dan Potensio, serta menampilkan nilai pembacaannya di LCD I2C, di baris pertama. 

KodeProgram_01
  1. #include <Wire.h>
  2. #include <LiquidCrystal_I2C.h>
  3. #include "DHT.h"
  4. DHT dht(D3, DHT11);
  5. LiquidCrystal_I2C lcd(0x27, 16, 2);
  6. void setup() {
  7.   Serial.begin(9600);
  8.   lcd.init();
  9.   lcd.backlight();
  10.   dht.begin();
  11.   delay(1000);
  12. }
  13. void loop() {
  14.   float h = dht.readHumidity();
  15.   float t = dht.readTemperature();
  16.   lcd.setCursor(0, 0);
  17.   lcd.print(t);
  18.   lcd.setCursor(6, 0);
  19.   lcd.print(h);
  20.   int a = analogRead(0);
  21.   lcd.setCursor(12, 0);
  22.   if (a < 10) lcd.print("0");
  23.   if (a < 100) lcd.print("0");
  24.   if (a < 1000) lcd.print("0");
  25.   lcd.print(a);
  26.   Serial.print(t);
  27.   Serial.print(',');
  28.   Serial.print(h);
  29.   Serial.print(',');
  30.   Serial.println(a);
  31.   delay(1000);
  32. }
Catatan: Program di atas memerlukan library LiquidCrystal_I2C.h dan DHT11. Kode program di atas dapat diunduh di bagian akhir tulisan ini dengan nama file: KodeProgram_01.

3. Upload program di atas ke NodeMCU, apabila berhasil maka LCD I2C akan menampilkan nilai suhu, kelembaban dan ADC potensio, seperti foto berikut ini.

Gambar 3. LCD I2C menampilkan nilai suhu, kelembaban dan ADC potensio

4. Setelah rangkaian bisa menampilkan data suhu, kelembaban dan potensio seperti Gambar 3 di atas, maka selanjutnya, buka Arduino IoT Cloud, buat akun dan login, kemudian pilih Create Thing.

Gambar 4. Buka Arduino IoT Cloud, login dan kemudian pilih Create Thing

5. Di halaman Thing, beri nama Thing. Klik 2 kali kata Untitled, di jendela yang muncul, isi kolom Rename dengan nama Thing. 

Gambar 5. Di halaman Thing, beri nama Thing, dan klik Add untuk menambah variabel

6. Klik tombol Add untuk menambahkan Variabel pada Thing. Diinginkan ada 5 buah variabel dengan isian seperti tabel berikut:

Variabel

Tipe Data

Permission

Policy

Kelembaban

Relative Humidity

Read Only

Periodically 10s

Pesan

Character String

Read & Write

On Change

Potensio

Integer (int)

Read Only

Periodically 10s

Setpoin

Integer (int)

Read & Write

On Change

Suhu

Temperature Sensor

Read Only

Periodically 10s

7. Mulai dari variabel yang pertama, beri nama Kelembaban, pilih tipe data Relative Humidity, isi permission = Read Only, dan Update = Periodically 10s.

Gambar 6. Nama = Kelembaban, Tipe = Relative Humidity (%), Permission = Read Only, Policy = Periodically 10 s

8. Variabel yang kedua, beri nama Pesan, pilih tipe data String, isi permission = Read & Write, dan Update = On Change.

Gambar 7. Nama = Pesan, Tipe = String, Permission = Read & Write, Policy = On Change

9. Variabel yang ketiga, beri nama Potensio, pilih tipe data Integer, isi permission = Read Only, dan Update = Periodically 10s.

Gambar 8. Nama = Potensio, Tipe = Integer, Permission = Read Only, Policy = Periodically 10 s

10. Variabel yang keempat, beri nama Setpoin, pilih tipe data Integer, isi permission = Read & Write, dan Update = On Change.

Gambar 9. Nama = Setpoin, Tipe = Integer, Permission = Read & Write, Policy = On Change

11. Variabel yang kelima, beri nama Suhu, pilih tipe data Temperature Sensor, isi permission = Read Only, dan Update = Periodically 10s.

Gambar 10. Nama = Suhu, Tipe = Temperature Sensor (°C), Permission = Read Only, Policy = Periodically 10 s

12. Setelah kelima variabel tersebut selesai ditambahkan, maka di halaman Things akan terlihat daftar kelima variabel tersebut, seperti ditunjukkan gambar berikut ini.

Gambar 11. Tampak daftar 5 variabel yang telah ditambahkan di halaman Thing

13. Berikutnya klik tombol Select Device di Associated Device untuk menghubungkan kelima variabel Cloud tersebut dengan hardware NodeMCU. Di jendela yang muncul, pilih Set Up New Device.

Gambar 12. Pilih Set Up New Device

14. Pilih Third Party device.

Gambar 13. Pilih Third party device

15. Pilih ESP8266, pilih NodeMCU 1.0 (ESP-12E Module).

Gambar 14. Pilih ESP8266, pilih NodeMCU 1.0 (ESP-12E Module)

16. Muncul nama Device. Tekan Next.

Gambar 15. Muncul nama Device. Tekan Next.

17. Muncul halaman Setup Device. Klik pada teks "download the PDF" untuk menyimpan secret key. Setelah file "download the PDF" terdownload, beri centang pada pilihan I saved my device ... Kemudian klik tombol Continue. 

Gambar 16. Di Setup Device, klik tombol download the PDF untuk menyimpan secret key

18. Setup Device telah selesai, klik Done. 

Gambar 17. Setup Device telah selesai, klik Done

19. Tampak nama Device muncul di halaman Thing, hanya saja statusnya masih Offline. Agar device bisa Online, upload program dengan secret key, nama dan password Wi-Fi. Untuk itu klik pada tombol Configure di bagian Network.

Gambar 18. Setelah Setup Device, berikutnya Configure Network, klik tombol Configure

20. Di jendela Configure Network, isi Wi-Fi Name, Wi-Fi Password dan Secret Key yang disalin dari file download the PDF. Klik Save.

Gambar 19. Isi nama dan password Wi-Fi, serta secret key dari file download the PDF

21. Terlihat di halaman Thing, ketiga bagian sudah terisi, baik Cloud Variables, Associated Device dan Network. Langkah selanjutnya adalah meng-upload kode program di Tab Sketch ke NodeMCU, agar NodeMCU bisa terhubung dengan variabel Cloud. Untuk itu klik pada Tab Sketch.

Gambar 20. Di halaman Thing, ketiga bagian sudah terisi, lanjutkan dengan membuka Sketch

22. Di halaman Sketch, muncul kode program yang dibangkitkan oleh Arduino IoT Cloud. Agar memudahkan kita dalam meng-edit program, maka klik pada tombol Open full editor. 

Gambar 21. Di halaman Sketch, klik tombol Open full editor.

23. Di halaman Arduino Editor, klik kanan pada nama Sketch yang teratas, kemudian pilih Download Sketch untuk mengedit dan meng-upload program secara offline (catatan: sampai saat artikel ini ditulis, saya masih belum bisa membuat Device NodeMCU bisa terhubung dengan Cloud menggunakan Arduino Editor online ini, jadi terpaksa harus menggunakan Arduino IDE yang offline). 

Gambar 22. Di Arduino Editor, klik kanan nama Sketch, pilih Download Sketch

24. Klik kanan pada file Sketch yang terdownload, pilih Extract Here. 

Gambar 23. Klik kanan file Sketch, pilih Extract Here

25. Buka folder hasil ekstrak, klik 2 kali pada file berekstensi ino. Pada halaman yang terbuka di software Arduino IDE, di Tab Aplikasi5...ino, hapus semua kode program yang ada di halaman tersebut, dan ganti dengan kode program berikut ini.

KodeProgram_02:
  1. #include "arduino_secrets.h"
  2. #include "thingProperties.h"
  3. #include "Wire.h"
  4. #include "LiquidCrystal_I2C.h"
  5. #include "DHT.h"
  6. DHT dht(D3, DHT11);
  7. LiquidCrystal_I2C lcd(0x27, 16, 2);
  8. void setup() {
  9.   Serial.begin(9600);
  10.   delay(1500);
  11.   initProperties();
  12.   ArduinoCloud.begin(ArduinoIoTPreferredConnection);
  13.   setDebugMessageLevel(2);
  14.   ArduinoCloud.printDebugInfo();
  15.   lcd.init();
  16.   lcd.backlight();
  17.   dht.begin();
  18.   delay(1000);
  19. }
  20. void loop() {
  21.   ArduinoCloud.update();
  22.   float h = dht.readHumidity();
  23.   float t = dht.readTemperature();
  24.   kelembaban = h;
  25.   suhu = t;
  26.   lcd.setCursor(0, 0);
  27.   lcd.print(t);
  28.   lcd.setCursor(6, 0);
  29.   lcd.print(h);
  30.   int a = analogRead(0);
  31.   potensio = a;
  32.   lcd.setCursor(12, 0);
  33.   lcd.print(a);
  34.   if (a < 1000) lcd.print(" ");
  35.   if (a < 100) lcd.print(" ");
  36.   if (a < 10) lcd.print(" ");
  37. }
  38. void onSetpoinChange() {
  39.   lcd.setCursor(0, 1);
  40.   if (setpoin >= 0) {
  41.     lcd.print(" ");
  42.     if (setpoin < 10) lcd.print(" ");
  43.     if (setpoin < 100) lcd.print(" ");
  44.     if (setpoin < 1000) lcd.print(" ");
  45.   } else {
  46.     if (setpoin > -10) lcd.print(" ");
  47.     if (setpoin > -100) lcd.print(" ");
  48.     if (setpoin > -1000) lcd.print(" ");
  49.   }
  50.   lcd.print(setpoin);
  51. }
  52. void onPesanChange() {
  53.   lcd.setCursor(6, 1);
  54.   lcd.print("          ");
  55.   lcd.setCursor(6, 1);
  56.   lcd.print(pesan);
  57. }
Catatan: kode program di atas memerlukan tambahan library LiquidCrystal_I2C, DHT-sensor, dan ArduinoIoTCloud, dll. Pembaca dapat mengunduh KodeProgram_02 ini dan semua library yang diperlukan di bagian bawah artikel ini.

26. Sebelum melakukan kompilasi dan upload kode program tersebut ke NodeMCU, buka Tab arduino_sketch.h, dan isikan nama dan password Wi-Fi serta kode secret key yang ada di file download the PDF, seperti ditunjukkan pada gambar berikut ini.

Gambar 24. Sebelum upload, pastikan isian nama dan password Wi-Fi serta secret key terisi

27. Setelah isian nama dan password Wi-Fi serta kode secret key di Tab arduino_secrets.h terisi, langkah berikutnya, atur library ArduinoIoTCloud ke versi yang terbaru, begitu juga untuk Arduino_ConnectionHandler, Arduino_DebugUtils, ArduinoMqttClient, gunakan versi yang terbaru. Atur Board dan Port, kemudian tekan tombol Upload. Setelah Upload selesai, buka Serial Monitor, tunggu hingga muncul tulisan "Connected to Arduino IoT Cloud.

Gambar 25. Muncul tulisan "Connected to Arduino IoT Cloud", berarti NodeMCU terhubung ke Cloud

28. Buka halaman Thing, perhatikan Status Device, seharusnya menjadi Online. Setelah bisa Online, langkah selanjutnya adalah mengatur Dashboard. Klik menu di pojok kiri atas.

Gambar 26. Status Device menjadi Online, langkah berikutnya, buka Dashboard 

29. Di halaman Dashboard, klik tombol Create Dashboard.

Gambar 27. Klik tombol Create Dashboard

30. Secara berturut-turut, tambahkan widget Slider untuk variabel Setpoin, widget Gauge untuk variabel Suhu, widget Percentage untuk variabel Kelembaban, widget Messenger untuk variabel Pesan dan widget Chart untuk variabel Potensio.   

Gambar 28. Tambahkan widget Slider, Gauge, Percentage, Messenger dan Chart 

31. Tekan tombol mata di pojok kiri untuk menjalankan Dashboard. Lakukan pengubahan Slider, dan ketik teks di kotak input Messenger, dan tekan Enter untuk mengirim. Perhatikan tampilan LCD di baris kedua, seharusnya menampilkan data yang sama dengan Slider dan teks di Messenger. Begitu pula untuk tampilan LCD di baris pertama, yang menampilkan data suhu, kelembaban dan nilai analog potensio, seharusnya nilainya sama dengan tampilan nilai di widget Slider, Gauge dan Percentage.

Gambar 29. Kelima widget Dashboard menampilkan nilai yang sama dengan tampilan LCD

31. Sampai di sini pembuatan tahap pertama, yang menghubungkan NodeMCU dengan Arduino IoT Cloud. Tahap berikutnya akan dilanjutkan dengan menghubungkan NodeMCU dengan Adafruit IO.


=========================================================================================



2. Menghubungkan Adafruit IO dengan NodeMCU

Berikut ini langkah-langkahnya:
1. Buka Adafruit IO, klik tombol Sign In di pojok kanan atas.

Gambar 30. Buka Adafruit IO, klik Sign In

2. Klik tombol Sign Up apabila belum memiliki akun. Apabila sudah memiliki akun, isi email dan password, dan kemudian klik Sign In.

Gambar 31. Klik Sign Up apabila belum memiliki akun

3. Isi isian yang diperlukan dan klik Create Account.

Gambar 32. Isi email, username dan password, klik Create Account

4. Ketika Create Account berhasil, maka akan tampil halaman profil, di mana terlihat fasilitas yang disediakan untuk versi gratis, yaitu 2 Device, 5 Group, 10 Feed, 5 Dashboard, dan 30 Data Rate.

Gambar 33. Di profil akun, terlihat status fasilitas yang disediakan

5. Klik pada Tab Feeds untuk membuka halaman Feeds. Feed di Adafruit IO ini sama seperti Variable Cloud di Arduino IoT Cloud.

Gambar 34. Klik Tab Feeds

6. Klik New Feed, isi Name = Kelembaban, klik tombol Create.

Gambar 35. Klik New Feed, isi Name = Kelembaban, klik Create

7. Klik New Feed, isi Name = Pesan, klik tombol Create.

Gambar 36. Klik New Feed, isi Name = Pesan, klik Create

8. Klik New Feed, isi Name = Potensio, klik tombol Create.

Gambar 37. Klik New Feed, isi Name = Potensio, klik Create

9. Klik New Feed, isi Name = Setpoin, klik tombol Create.

Gambar 38. Klik New Feed, isi Name = Setpoin, klik Create

10. Klik New Feed, isi Name = Suhu, klik tombol Create.

Gambar 39. Klik New Feed, isi Name = Suhu, klik Create

11. Pada daftar feed yang ditunjukkan gambar berikut ini, perhatikan Key dari setiap feed, menggunakan huruf kecil semua, walaupun Feed Name-nya menggunakan huruf besar di awal kata. Untuk pemrograman di NodeMCU, nama yang digunakan adalah nama pada Key, bukan nama di Feed Name.

Gambar 40. Nama yang digunakan pada pemrograman NodeMCU adalah nama pada Key

12. Di samping nama Key pada Feed, hal penting yang diperlukan lagi adalah AIO Key. Untuk membuka AIO Key, silahkan tekan tombol bergambar kunci, yang ditempatkan di samping New Device.

Gambar 41. AIO Key berisi Username dan Key, yang bisa dibuka dengan menekan tombol kunci

13. Setelah kelima Feed berhasil dibuat, langkah berikutnya menampilkan data Feed tersebut dalam bentuk objek di Dashboard. Untuk itu klik Tab Dashboard, kemudian klik New Dashboard, isi Name = aplikasi5, kemudian klik Create.

Gambar 42. Klik Tab Dashboard, klik New Dashboard, isi Name = aplikasi5, klik Create

14. Klik tombol Seting di pojok kanan atas, pilih + Create New Block.

Gambar 43. Klik tombol Seting, pilih + Create New Block

15. Di jendela daftar pilihan Block, pilih Slider untuk Feed Setpoin, pilih Gauge untuk Feed Suhu dan Kelembaban, pilih Text untuk Feed Pesan, dan pilih Chart untuk Feed Potensio.

Gambar 44. Pilih Block Slider untuk Setpoin, Gauge untuk Suhu dan Kelembaban, Text untuk Pesan dan Chart untuk Potensio

16. Tempatkan dan susun kelima Block tersebut seperti ditunjukkan gambar berikut ini.

Gambar 45. Contoh penempatan Block untuk Feed Suhu, Potensio, Kelembaban, Setpoin dan Pesan

17. Berikutnya, agar NodeMCU dapat terhubung dengan kelima Feed, dan datanya dapat ditampilkan di Dashboard, upload kode program berikut ini ke NodeMCU. Namun sebelum meng-upload, ubah Username dan AIO-Key, sesuaikan dengan Username dan AIO-Key yang diperoleh dari akun Adafruit IO yang telah dibuat.

KodeProgram_03:
  1. #include <ESP8266WiFi.h>
  2. #include "Adafruit_MQTT.h"
  3. #include "Adafruit_MQTT_Client.h"
  4. #include "Wire.h"
  5. #include "LiquidCrystal_I2C.h"
  6. #include "DHT.h"
  7. DHT dht(D3, DHT11);
  8. LiquidCrystal_I2C lcd(0x27, 16, 2);
  9. #define WLAN_SSID "FALCONJR"
  10. #define WLAN_PASS "08251027"
  11. #define AIO_SERVER "io.adafruit.com"
  12. #define AIO_SERVERPORT 1883
  13. #define AIO_USERNAME "aplikasi5" //sesuaikan dengan Username yang diperoleh
  14. #define AIO_KEY "aio_jmsi76AKCUlCAF0LP0yuvzPaXGFF" //sesuaikan dengan AIO-Key yang diperoleh
  15. WiFiClient client;
  16. Adafruit_MQTT_Client mqtt(&client, AIO_SERVER, AIO_SERVERPORT, AIO_USERNAME, AIO_KEY);
  17. Adafruit_MQTT_Publish kelembaban = Adafruit_MQTT_Publish(&mqtt, AIO_USERNAME "/feeds/kelembaban");
  18. Adafruit_MQTT_Publish suhu = Adafruit_MQTT_Publish(&mqtt, AIO_USERNAME "/feeds/suhu");
  19. Adafruit_MQTT_Publish potensio = Adafruit_MQTT_Publish(&mqtt, AIO_USERNAME "/feeds/potensio");
  20. Adafruit_MQTT_Subscribe setpoin = Adafruit_MQTT_Subscribe(&mqtt, AIO_USERNAME "/feeds/setpoin");
  21. Adafruit_MQTT_Subscribe pesan = Adafruit_MQTT_Subscribe(&mqtt, AIO_USERNAME "/feeds/pesan");
  22. unsigned long skr = 0;
  23. int sp = 0;
  24. String psn = "";
  25. void MQTT_connect();
  26. void setup() {
  27.   Serial.begin(9600);
  28.   lcd.init();
  29.   lcd.backlight();
  30.   dht.begin();
  31.   Serial.print("Connecting to ");
  32.   Serial.println(WLAN_SSID);
  33.   WiFi.begin(WLAN_SSID, WLAN_PASS);
  34.   while (WiFi.status() != WL_CONNECTED) {
  35.     delay(500);
  36.     Serial.print(".");
  37.   }
  38.   Serial.println();
  39.   Serial.println("WiFi connected");
  40.   Serial.println("IP address: ");
  41.   Serial.println(WiFi.localIP());
  42.   mqtt.subscribe(&setpoin);
  43.   mqtt.subscribe(&pesan);
  44.   delay(1000);
  45. }
  46. void loop() {
  47.   if (millis() - skr > 5000) {
  48.     MQTT_connect();
  49.     Adafruit_MQTT_Subscribe *subscription;
  50.     while ((subscription = mqtt.readSubscription(5000))) {
  51.       if (subscription == &setpoin) {
  52.         sp = atoi((char *)setpoin.lastread);
  53.         lcd.setCursor(0, 1);
  54.         if (sp >= 0) {
  55.           lcd.print(" ");
  56.           if (sp < 10) lcd.print(" ");
  57.           if (sp < 100) lcd.print(" ");
  58.           if (sp < 1000) lcd.print(" ");
  59.         } else {
  60.           if (sp > -10) lcd.print(" ");
  61.           if (sp > -100) lcd.print(" ");
  62.           if (sp > -1000) lcd.print(" ");
  63.         }
  64.         lcd.print(sp);
  65.       }
  66.       if (subscription == &pesan) {
  67.         psn = String((char *)pesan.lastread);
  68.         lcd.setCursor(6, 1);
  69.         lcd.print("          ");
  70.         lcd.setCursor(6, 1);
  71.         lcd.print(psn);
  72.       }
  73.     }
  74.     float h = dht.readHumidity();
  75.     float t = dht.readTemperature();
  76.     lcd.setCursor(0, 0);
  77.     lcd.print(t);
  78.     lcd.setCursor(6, 0);
  79.     lcd.print(h);
  80.     int a = analogRead(0);
  81.     lcd.setCursor(12, 0);
  82.     lcd.print(a);
  83.     if (a < 1000) lcd.print(" ");
  84.     if (a < 100) lcd.print(" ");
  85.     if (a < 10) lcd.print(" ");
  86.     if (!kelembaban.publish(h)) { Serial.println(F("h Failed")); }
  87.     if (!suhu.publish(t)) { Serial.println(F("t Failed")); }
  88.     if (!potensio.publish(a)) { Serial.println(F("a Failed")); }
  89.     skr = millis();
  90.   }
  91. }
  92. void MQTT_connect() {
  93.   int8_t ret;
  94.   if (mqtt.connected()) {
  95.     return;
  96.   }
  97.   Serial.print("Connecting to MQTT... ");
  98.   uint8_t retries = 3;
  99.   while ((ret = mqtt.connect()) != 0) {  // connect will return 0 for connected
  100.     Serial.println(mqtt.connectErrorString(ret));
  101.     Serial.println("Retrying MQTT connection in 5 seconds...");
  102.     mqtt.disconnect();
  103.     delay(5000);  // wait 5 seconds
  104.     retries--;
  105.     if (retries == 0) {
  106.       while (1)
  107.         ;
  108.     }
  109.   }
  110.   Serial.println("MQTT Connected!");
  111. }
Catatan: kode program di atas memerlukan tambahan library LiquidCrystal_I2C, DHT-sensor, dan Adafruit MQTT, dll. Pembaca dapat mengunduh KodeProgram_03 ini dan semua library yang diperlukan di bagian bawah artikel ini.

18. Apabila upload berhasil, maka NodeMCU akan dapat terhubung dengan Feed dan Dashboard Adafruit IO. Gambar berikut menunjukkan tampilan Dashboard dan LCD I2C NodeMCU, yang menampilkan data yang sama.

Gambar 46. Tampilan di Dashboard dan di LCD I2C menunjukkan nilai yang sama

19. Putar potensio, dan amati tampilan Chart Potensio dan tampilan nilainya di LCD I2C. Geser Slider Setpoin dan ketik sebuah kata di kotak Text Pesan, dan perhatikan tampilan datanya di LCD I2C, seharusnya keduanya menampilkan hasil yang sama, seperti ditunjukkan gambar berikut ini.

Gambar 47. Geser Slider Setpoin, ketik Pesan dan amati nilai di LCD I2C, juga putar Potensio, dan amati perubahannya di tampilan Dashboard dan di LCD I2C

20. Setelah sebelumnya, NodeMCU dapat terhubung dengan Arduino IoT Cloud, dan sekarang ini, NodeMCU dapat terhubung dengan Adafruit IO, maka langkah berikutnya, adalah menggabungkan kode program #01 dengan kode program #02, agar NodeMCU dapat terhubung dengan Arduino IoT Cloud, dan juga terhubung dengan Adafruit IO. Kalau keduanya dapat terhubung dengan NodeMCU, maka tentu saja, dengan demikian, Arduino IoT Cloud akan dapat terhubung dengan Adafruit IO, melalui NodeMCU sebagai perantaranya. 

21. Berikut ini kode program penggabungan keduanya. Untuk menggunakan kode program gabungan ini, buka kembali kode program#01 di atas, yang ada di dalam folder Aplikasi5, kemudian pilih Save As, beri nama kode program#03. Kemudian hapus kode program di halaman Tab berekstensi ino, ganti dengan kode program #03 berikut ini.

KodeProgram_04:
  1. #include "arduino_secrets.h"
  2. #include "thingProperties.h"
  3. #include <ESP8266WiFi.h>
  4. #include "Adafruit_MQTT.h"
  5. #include "Adafruit_MQTT_Client.h"
  6. #include "Wire.h"
  7. #include "LiquidCrystal_I2C.h"
  8. #include "DHT.h"
  9. DHT dht(D3, DHT11);
  10. LiquidCrystal_I2C lcd(0x27, 16, 2);
  11. #define AIO_SERVER "io.adafruit.com"
  12. #define AIO_SERVERPORT 1883
  13. #define AIO_USERNAME "aplikasi5" //ganti sesuai nama akun
  14. #define AIO_KEY "aio_jmsi76AKCUlCAF0LP0yuvzPaXGFF" //ganti sesuai aio key
  15. WiFiClient client;
  16. Adafruit_MQTT_Client mqtt(&client, AIO_SERVER, AIO_SERVERPORT, AIO_USERNAME, AIO_KEY);
  17. Adafruit_MQTT_Publish kelembaban1 = Adafruit_MQTT_Publish(&mqtt, AIO_USERNAME "/feeds/kelembaban");
  18. Adafruit_MQTT_Publish suhu1 = Adafruit_MQTT_Publish(&mqtt, AIO_USERNAME "/feeds/suhu");
  19. Adafruit_MQTT_Publish potensio1 = Adafruit_MQTT_Publish(&mqtt, AIO_USERNAME "/feeds/potensio");
  20. Adafruit_MQTT_Publish setpoin1 = Adafruit_MQTT_Publish(&mqtt, AIO_USERNAME "/feeds/setpoin");
  21. Adafruit_MQTT_Publish pesan1 = Adafruit_MQTT_Publish(&mqtt, AIO_USERNAME "/feeds/pesan");
  22. Adafruit_MQTT_Subscribe setpoin2 = Adafruit_MQTT_Subscribe(&mqtt, AIO_USERNAME "/feeds/setpoin");
  23. Adafruit_MQTT_Subscribe pesan2 = Adafruit_MQTT_Subscribe(&mqtt, AIO_USERNAME "/feeds/pesan");
  24. unsigned long skr = 0;
  25. int sp = 0;
  26. String psn = "";
  27. void MQTT_connect();
  28. void setup() {
  29.   Serial.begin(9600);
  30.   initProperties();
  31.   ArduinoCloud.begin(ArduinoIoTPreferredConnection);
  32.   setDebugMessageLevel(2);
  33.   ArduinoCloud.printDebugInfo();
  34.   lcd.init();
  35.   lcd.backlight();
  36.   dht.begin();
  37.   mqtt.subscribe(&setpoin2);
  38.   mqtt.subscribe(&pesan2);
  39.   delay(1000);
  40. }
  41. void loop() {
  42.   ArduinoCloud.update();
  43.   float h = dht.readHumidity();
  44.   kelembaban = h;
  45.   float t = dht.readTemperature();
  46.   suhu = t;
  47.   int a = analogRead(0);
  48.   potensio = a;
  49.   if (millis() - skr > 5000) {
  50.     MQTT_connect();
  51.     Adafruit_MQTT_Subscribe *subscription;
  52.     while ((subscription = mqtt.readSubscription(5000))) {
  53.       if (subscription == &setpoin2) {
  54.         sp = atoi((char *)setpoin2.lastread);
  55.         lcd.setCursor(0, 1);
  56.         if (sp >= 0) {
  57.           lcd.print(" ");
  58.           if (sp < 10) lcd.print(" ");
  59.           if (sp < 100) lcd.print(" ");
  60.           if (sp < 1000) lcd.print(" ");
  61.         } else {
  62.           if (sp > -10) lcd.print(" ");
  63.           if (sp > -100) lcd.print(" ");
  64.           if (sp > -1000) lcd.print(" ");
  65.         }
  66.         lcd.print(sp);
  67.         setpoin = sp;
  68.       }
  69.       if (subscription == &pesan2) {
  70.         psn = String((char *)pesan2.lastread);
  71.         lcd.setCursor(6, 1);
  72.         lcd.print("          ");
  73.         lcd.setCursor(6, 1);
  74.         lcd.print(psn);
  75.         pesan = psn;
  76.       }
  77.     }
  78.     lcd.setCursor(0, 0);
  79.     lcd.print(t);
  80.     lcd.setCursor(6, 0);
  81.     lcd.print(h);
  82.     lcd.setCursor(12, 0);
  83.     lcd.print(a);
  84.     if (a < 1000) lcd.print(" ");
  85.     if (a < 100) lcd.print(" ");
  86.     if (a < 10) lcd.print(" ");
  87.     if (!kelembaban1.publish(h)) Serial.println(F("h Failed"));
  88.     if (!suhu1.publish(t)) Serial.println(F("t Failed"));
  89.     if (!potensio1.publish(a)) Serial.println(F("a Failed"));
  90.     skr = millis();
  91.   }
  92. }
  93. void onSetpoinChange() {
  94.   lcd.setCursor(0, 1);
  95.   if (setpoin >= 0) {
  96.     lcd.print(" ");
  97.     if (setpoin < 10) lcd.print(" ");
  98.     if (setpoin < 100) lcd.print(" ");
  99.     if (setpoin < 1000) lcd.print(" ");
  100.   } else {
  101.     if (setpoin > -10) lcd.print(" ");
  102.     if (setpoin > -100) lcd.print(" ");
  103.     if (setpoin > -1000) lcd.print(" ");
  104.   }
  105.   lcd.print(setpoin);
  106.   sp = setpoin;
  107.   if (!setpoin1.publish(sp)) Serial.println(F("sp Failed"));
  108. }
  109. void onPesanChange() {
  110.   lcd.setCursor(6, 1);
  111.   lcd.print("          ");
  112.   lcd.setCursor(6, 1);
  113.   lcd.print(pesan);
  114.   psn = pesan;
  115.   if (!pesan1.publish(psn.c_str())) Serial.println(F("psn Failed"));
  116. }
  117. void MQTT_connect() {
  118.   int8_t ret;
  119.   if (mqtt.connected()) {
  120.     return;
  121.   }
  122.   Serial.print("Connecting to MQTT... ");
  123.   uint8_t retries = 3;
  124.   while ((ret = mqtt.connect()) != 0) {  // connect will return 0 for connected
  125.     Serial.println(mqtt.connectErrorString(ret));
  126.     Serial.println("Retrying MQTT connection in 5 seconds...");
  127.     mqtt.disconnect();
  128.     delay(5000);  // wait 5 seconds
  129.     retries--;
  130.     if (retries == 0) {
  131.       while (1)
  132.         ;
  133.     }
  134.   }
  135.   Serial.println("MQTT Connected!");
  136. }
Catatan: kode program di atas memerlukan tambahan file arduino_secret.h, thingProperties.h, dan tambahan library LiquidCrystal_I2C, DHT-sensor, dan Adafruit MQTT, ArduinoIoTCloud, dll. Pembaca dapat mengunduh KodeProgram_04 ini dan semua library yang diperlukan di bagian bawah artikel ini.

22. Apabila upload ke NodeMCU berhasil, buka Dashboard Arduino IoT Cloud dan Dashboard Adafruit IO. Lakukan pengubahan Slider di kedua Dashboard, dan ketik pesan dari kedua Dashboard, juga putar potensio yang terhubung dengan NodeMCU, dan amati ketiganya, seharusnya ketiganya menampilkan data yang sama, seperti ditunjukkan pada gambar berikut ini.

Gambar 49. Geser Slider, dan ubah isi Pesan di kedua Dashboard, dan putar Potensio, dan perhatikan bahwa ketiganya menghasilkan perubahan data yang sama

23. Dengan terhubungnya Arduino IoT Cloud dengan Adafruit IO, dan NodeMCU, maka akan banyak sekali manfaat yang dapat diperoleh. Masing-masing memiliki kelebihannya yang bisa saling melengkapi. 

Gambar 50. Ketiga perangkat saling terhubung dan menampilkan data yang sama

24. Sampai di sini tahap pembuatan koneksi NodeMCU dengan Adafruit IO dan juga Arduino IoT Cloud. Tahap berikutnya adalah memanfaatkan gabungan ketiganya untuk menampilkan data di halaman web Blogspot, dan di smartphone melalui aplikasi android MQTT (sebenarnya Arduino IoT Cloud juga sudah menyediakan fasilitas untuk terhubung dengan smartphone, melalui aplikasi android yang diberi nama Arduino IoT Remote, namun agar bisa menyediakan lebih banyak manfaat, maka ditambahkan aplikasi android MQTT ini).



=========================================================================================



3. Meneruskan data dari Arduino IoT Cloud ke Google Sheet untuk ditampikan di Blogspot

Agar data dapat ditampilkan di halaman web Blogspot, maka bisa dilakukan dengan bantuan Google Sheet. Google Sheet memiliki fitur Publish to Web, yang menghasilkan kode html untuk di-embed ke dalam halaman posting di Blogspot. Agar lebih jelas, berikut ini langkah-langkahnya:
1. Ulangi membuat Webhook Google Sheet (lihat kembali cara membuatnya di Datalogger IoT).

Gambar 51. Link Webhook dihasilkan (untuk membuatnya, lihat kembali Datalogger IoT)

2. Klik 3 kali link Webhook, copy dan isikan pada kolom Set Webhook di Arduino IoT Cloud di bagian bawah halaman Thing.

Gambar 52. Copy link Webhook Google Sheet, klik tombol Set Webhook di halaman Thing

3. Tempelkan link Webhook Google Sheet di kolom Webhook URL di jendela Set Webhook.

Gambar 53. Di jendela Set Webhook, tempelkan link Webhook Google Sheet di kolom Webhook URL

4. Klik tombol Set Webhook, maka link Webhook menjadi aktif.

Gambar 54. Link Webhook Google Sheet menjadi aktif

5. Tampilan link dan statusnya juga dimunculkan di halaman Thing. Apabila nantinya link Webhook ini sudah tidak aktif lagi (statusnya inactive), maka cara untuk membuat aktif lagi, tekan tombol sampah untuk menghapus link, kemudian ulangi lagi menempelkan link Webhook yang sama ke kolom Webhook URL di jendela Set Webhook.

Gambar 55. Link Webhook dan statusnya ditampilkan di halaman Thing

6. Ketika link Webhook Google Sheet aktif, maka seharusnya di Google Sheet akan muncul data seperti ditunjukkan gambar berikut ini.

Gambar 56. Data dari Arduino IoT Cloud muncul di Google Sheet

7. Berhubung data dari Arduino IoT Cloud terlalu banyak, maka perlu menghapus data yang tidak diperlukan. Hapus semua kolom, kecuali kolom yang berisi data nama dan nilai ketiga variabel serta sebuah data waktu seperti ditunjukkan gambar berikut ini.

Gambar 57. Hapus semua kolom kecuali kolom nama dan nilai ketiga variabel dan data waktu

8. Agar data Setpoin dan data Pesan tidak ikut muncul di kolom A (agar tidak mengacaukan tampilan grafik suhu), tambahkan Data Validation di kolom pertama. Klik cell A untuk memilih kolom pertama, pilih menu Data, pilih Data Validation. Di Data validation rules, pilih Text Contains di kolom Criteria dan isi suhu, kemudian beri centang pada pilihan Reject the input. Klik Done.

Gambar 58. Tambahkan Data Validation agar data Setpoin dan Pesan tidak muncul di kolom A

9. Berikutnya, agar data yang sama tidak muncul berkali-kali, gunakan fungsi UNIQUE. Tekan tombol + untuk membuka Sheet2, kemudian isi fungsi di cell A1 = UNIQUE(Sheet1!A:G), maka akan muncul data di Sheet2, yang merupakan data di Sheet1, hanya saja tanpa ada duplikasi data.

Gambar 59. Menggunakan fungsi UNIQUE di Sheet2 untuk menghilangkan duplikasi data

10. Berikutnya, agar data bisa urut dari waktu terlama hingga terbaru, tambahkan fungsi berikut ini di Sheet3, di cell A1:
= QUERY(Sheet2!A:G,"SELECT C,B,G,E WHERE C IS NOT NULL ORDER BY C ASC LABEL C 'Waktu', B 'Suhu', G 'Kelembaban', E 'Potensio'")

Gambar 60. Agar data bisa berurutan dari waktu terlama hingga terbaru, tambahkan fungsi QUERY

11. Untuk tampilan grafik, perlu sumbu x yang dibuat berdasarkan nomor baris. Untuk itu di cell E2, tambahkan fungsi berikut ini yang akan memunculkan nomor baris setiap ada data di samping kirinya:
= arrayformula(if(isblank(A2:A),"",row(A2:A)-1))

Gambar 61. Buat nomor baris di kolom E untuk menjadi sumbu x grafik

12. Berikutnya, buat grafik dengan memilih kolom B dan kolom E, kemudian klik menu Insert, pilih Chart. Di Chart Editor, pilih tipe Chart = Smooth line chart, X-axis = Baris (kolom E) dan Series = Suhu (kolom B), maka akan muncul grafik Suhu seperti gambar berikut ini.

Gambar 62. Tampilan grafik Suhu

13. Berikutnya, buat grafik dengan memilih kolom C dan kolom E, kemudian klik menu Insert, pilih Chart. Di Chart Editor, pilih tipe Chart = Smooth line chart, X-axis = Baris (kolom E) dan Series = Kelembaban (kolom C), maka akan muncul grafik Kelembaban seperti gambar berikut ini.

Gambar 63. Tampilan Grafik Kelembaban

14. Berikutnya, buat grafik dengan memilih kolom D dan kolom E, kemudian klik menu Insert, pilih Chart. Di Chart Editor, pilih tipe Chart = Smooth line chart, X-axis = Baris (kolom E) dan Series = Potensio (kolom D), maka akan muncul grafik Potensio seperti gambar berikut ini.

Gambar 64. Tampilan grafik Potensio

15. Terlihat 3 buah grafik yang secara berturut-turut menampilkan data Suhu, Kelembaban dan Potensio.

Gambar 65. Tampilan ketiga grafik di Google Sheet

16. Berikutnya, agar data dan grafik di Google Sheet tersebut dapat juga ditampilkan di halaman web Blogspot, maka buka menu File, pilih Share, pilih Publish to web.

Gambar 66. Pilih menu File, pilih Share, pilih Publish to web

17. Muncul jendela Publish to the web, pilih Embed, pilih Sheet3, copy kode html yang dibangkitkan.

Gambar 67. Di jendela Publish to the web, pilih Embed, pilih Sheet3, copy kode html

18. Buka blogger, sign in, buat blog.

Gambar 68. Buka blogger, sign in, buat blog

19. Beri nama blog.

Gambar 69. Beri nama blog

20. Buat alamat URL blog.

Gambar 70. Buat alamat URL Blog

21. Klik New Post untuk membuat posting baru.

Gambar 71. Klik tombol New Post

22. Isi Title, dan di halaman Posting, atur mode Editor dari Compose view menjadi HTML view, dan kemudian tempelkan kode embed publish to web Google Sheet, seperti ditunjukkan gambar berikut ini.

Gambar 72. Tempel kode html publish to web Google Sheet di halaman posting

23. Untuk mengetahui hasilnya, klik tombol Preview. Perhatikan data Google Sheet berhasil muncul di halaman web Blogspot, hanya saja lebar kotaknya kurang besar.

Gambar 73. Data Google Sheet bisa dimunculkan di halaman Blogspot

24. Berikutnya tambahkan kode ukuran lebar 100% dan tinggi 500. Di samping itu, agar tampilan data lebih responsif, tambahkan kode <div class="container"> ... </div> seperti gambar berikut ini.

Gambar 74. Tambahkan kode ukuran dan <div></div> agar tampilan lebih responsif

25. Klik tombol Publish untuk posting.

Gambar 75. Publish post

26. Agar tampilan data dan grafik Google Sheet bisa ditampilkan lebih besar, pilih Theme Blog Dynamic Views Classic. Klik Apply.

Gambar 76. Pilih Theme Dynamic Views Classic, klik Apply

27. View Blog untuk melihat hasilnya. Terlihat kotak tampilan data dan grafik Google Sheet cukup lebar.

Gambar 77. Terlihat kotak tampilan data dan grafik Google Sheet cukup besar

28. Geser ke kanan untuk menampilkan grafik. Untuk meng-update isi data dan grafik, klik Refresh.

Gambar 78. Klik Refresh untuk meng-update tampilan data dan grafik

29. Sampai di sini pembuatan tampilan data dan grafik pembacaan sensor suhu dan potensio di halaman web Blogspot, dengan bantuan Webhook Google Sheet dan Arduino IoT Cloud. Tahap berikutnya akan dilanjutkan dengan baca dan tulis data Feed Adafruit IO dengan bantuan Webhook Adafruit IO di halaman web Blogspot.


=========================================================================================



4. Baca dan Tulis data Feed Adafruit IO dari Blogspot

Hal yang menarik dari MQTT adalah dimungkinkannya pengiriman data dari banyak sumber pengirim ke banyak penerima, dalam waktu yang bersamaan, hanya dengan satu syarat, yaitu memiliki topik yang sama. Sebenarnya Arduino IoT Cloud juga menerapkan MQTT, hanya saja penggunaannya memerlukan upgrade ke akun yang berbayar. Untungnya Adafruit IO menyediakan protokol MQTT ini secara gratis, selain protokol HTTP. Setiap feed yang dibuat di Adafruit IO, dapat diakses dengan mudah, baik dengan protokol HTTP maupun dengan protokol MQTT. Lebih jauh, rekan-rekan dapat membaca penjelasan penggunaan protokol HTTP pada Adafruit IO di: https://io.adafruit.com/api/docs/#adafruit-io-http-api, dan penggunaan protokol MQTT Adafruit IO di: https://io.adafruit.com/api/docs/mqtt.html#adafruit-io-mqtt-api. Pada Tahap 4 ini kita akan menggunakan protokol HTTP termasuk Webhook (HTTP Callback) untuk membaca dan menulis data pada feed Adafruit IO dari halaman web Blogspot. Sedangkan penggunaan protokol MQTT akan dibahas di Tahap 5. 

Di samping penjelasan dalam bentuk dokumentasi dari Adafruit IO, sumber yang menarik yang saya gunakan untuk pembuatan Tahap 4 ini adalah artikel di: https://hpssjellis.github.io/my-examples-of-iot-platforms/public/index.html. Di artikel tersebut ditunjukkan contoh kode html yang dapat digunakan untuk membaca dan menulis data feed Adafruit IO dari halaman web secara mudah. Lihat pada bagian Steps for Students to use Adafruit.io, khususnya di langkah ke-4 dan langkah ke-5. Di langkah ke-4, diberikan sebuah contoh kode html untuk menulis data feed Adafruit IO dari halaman web di file dengan nama ada-write-to-feed02.html. Sedangkan di langkah ke-5, diberikan sebuah contoh kode html untuk membaca data feed Adafruit IO dari halaman web di file dengan nama ada-read-feed02.html. Dari kedua file tersebut kemudian saya gabungkan menjadi kode html ini: baca_tulis_feed_Adafruit_IO.html

Silahkan unduh file baca_tulis_feed_Adafruit_IO.html tersebut. Klik 2 kali untuk menjalankan tampilannya, yang terlihat seperti berikut ini:

Gambar 79. Tampilan dari baca_tulis_feed_Adafruit_IO.html 

Tampilan html di Gambar 79 tersebut dapat digunakan untuk membaca data feed Adafruit IO, asalkan feed yang akan dibaca, sudah dibuat Public. Untuk membuat feed dari Private menjadi Public, berikut ini langkah-langkahnya:

Gambar 80. Cara membuat Feed Adafruit IO dari Private (default) menjadi Public
  1. Klik pada Tab Feeds, hingga muncul daftar Feed.
  2. Pada daftar Feed, klik 2 kali pada salah satu Feed, hingga terbuka halaman Feed tersebut.
  3. Klik pada tulisan Privacy (di kolom kanan) hingga muncul kotak Update Visibility. 
  4. Di kotak Visibility, pilih Public. Klik Save.
Setelah Feed menjadi Public, kembali ke tampilan html, isi kolom Username dengan akun Adafruit IO yang dibuat, dan isi Feed Key dengan nama Feed (gunakan huruf kecil semua, karena Feed Key menggunakan huruf kecil di awal kata). Kemudian klik tombol Baca Data, maka akan muncul 3 data terakhir dari Feed yang dibaca. Gambar berikut ini menunjukkan 3 data terakhir di Feed Kelembaban di akun Adafruit IO aplikasi5.

Gambar 81. Setelah Feed dibuat Public, maka data dapat dibaca dan ditampilkan

Berikutnya agar Feed Adafruit IO dapat ditulis/diubah, syaratnya Webhook Feed tersebut harus diaktifkan. Berikut langkah-langkah untuk mengaktifkan Webhook:

1. Klik tulisan Webhooks di kolom kanan di halaman Feed.

Gambar 82. Klik pada tulisan Webhooks di kolom kanan di halaman Feed

2.  Di jendela yang muncul, beri centang pada pilihan Show /raw webhook URLs, kemudian di bagian URL, klik tombol +Create.

Gambar 83. Centang pada pilihan Show /raw webhook URLs, kemudian klik tombol +Create

3.  Biarkan isian Expire after = Never dan Date rate limit (per minute) = 5, klik tombol Create.

Gambar 84. Biarkan isian default, klik tombol Create

4.  Maka muncul link URL di kolom Webhook URL. Webhook Key dapat di-copy dari bagian URL, yaitu di antara feed dan raw.

Gambar 85. Copy Webhook Key yang diambil dari URL, di bagian antara feed dan raw

Kembali ke tampilan html, di bagian Tulis Data Feed Adafruit IO, isi kolom Webhook Key dengan kode yang diambil dari URL, seperti Gambar 85 di atas, dan isi kolom Data dengan sembarang angka atau teks. Klik tombol Tulis Data, maka data Feed tersebut akan berubah sesuai dengan data yang dimasukkan. Gambar berikut ini menunjukkan hasil Tulis Data, yang membuat data terbaru di Feed Kelembaban sebesar 63.

Gambar 86. Setelah Webhook Feed diaktifkan, maka Feed tersebut dapat ditulis dari tampilan web ini

Setelah percobaan Baca dan Tulis Data berhasil dilakukan, maka langkah selanjutnya adalah meng-copy kode html tampilan web tersebut, dan menaruhnya di halaman posting Blog. Untuk meng-copy kode html tersebut, klik kanan pada file, pilih Open with, pilih Notepad. Di Notepad, pilih Edit, Select All, dilanjutkan dengan pilih Edit, Copy untuk meng-copy semua kode html tersebut.

Gambar 87. Buka file baca_tulis_feed_Adafruit_IO.html di Notepad, copy semua kode

Buka halaman posting Blog, tempatkan kode html baca_tulis_feed_Adafruit_IO.html di bawah kode html embed publish to web Google Sheet. Klik Update untuk memposting tampilan yang baru.

Gambar 88. Tempel kode html yang baru di bawah kode html sebelumnya, klik Update

Sekarang halaman Blogspot sudah dapat menampilkan baca dan tulis data Feed dari Adafruit IO, selain menampilkan data dan grafik dari Google Sheet.

Gambar 89. Tampilan halaman Blogspot sudah lengkap: tabel dan grafik serta baca dan tulis data

Gambar berikut menunjukkan contoh baca dan tulis data Feed Suhu di akun aplikasi5.

Gambar 90. Baca dan tulis data Feed Suhu berhasil dilakukan dari halaman web Blogspot

Sampai di sini Tahap 4 pembuatan baca dan tulis data Feed Adafruit IO dari halaman web Blogspot menggunakan protokol HTTP dan Webhook sudah selesai. Tahap 5 akan melanjutkan baca dan tulis data Feed Adafruit IO, namun menggunakan protokol MQTT.


=========================================================================================



5. Baca dan Tulis Data Feed Adafruit IO dari aplikasi MQTT

Sebelum menggunakan aplikasi MQTT di smartphone android, kita akan menggunakan aplikasi MQTT di komputer. Berikut langkah-langkahnya:
1. Buka Websocket HiveMQ di: https://www.hivemq.com/demos/websocket-client/ 
2. Di Websocket HiveMQ, isi Host = io.adafruit.com, Port = 443, Username dan Password isi dengan AIO Key Adafruit IO, seperti ditunjukkan gambar berikut ini. Klik tombol Connect. 

Gambar 91. Isi Host = io.adafruit.com, Port = 443, Username dan Password = AIO Key, klik Connect

3. Setelah Connected, di bagian Publish, isi Topic dengan Username/feeds/Feed Key. Dalam contoh di sini, Username diisi dengan aplikasi5, dan Feed Key diisi dengan suhu. Isi Message dengan sembarang angka atau teks, kemudian tekan tombol Publish.

Gambar 92. Isi Topic = Username/feeds/Feed Key, isi Message = angka/teks, klik Publish

4. Nama Topic untuk setiap Feed Adafruit IO dapat diketahui dari Feed Info. Klik 2 kali pada Feed Info, tulisan biru di samping MQTT by key merupakan Topic MQTT untuk Feed tersebut.

Gambar 93. Untuk mengetahui nama Topic MQTT untuk setiap Feed, buka Feed Info

5. Gambar berikut ini menunjukkan sebelum tombol Publish ditekan.

Gambar 94. Sebelum tombol Publish ditekan

6. Gambar berikut menunjukkan setelah tombol Publish ditekan, terlihat muncul data yang baru.

Gambar 95. Setelah tombol Publish ditekan, muncul data yang baru

7. Berikutnya di bagian Subscriptions, klik tombol Add New Topic Subscription, isi Topic = Username/feeds/Feed Key, dan klik tombol Subscribe.

Gambar 96. Klik Add New Topic Subscription, isi Topic dan klik Subscribe

8. Di halaman Feed Adafruit IO, klik tombol Add Data, isi Value dengan sembarang angka/teks, dan tekan tombol Create. Maka di kolom Messages di Websocket HiveMQ akan muncul data yang baru.

Gambar 97. Add Data di halaman Feed Adafruit IO, isi dengan sembarang angka/teks, maka di kolom Messages Websocket HiveMQ akan muncul data tersebut

9. Sampai di sini contoh penerapan protokol MQTT Publish dan Subscribe antara Adafruit IO dengan Websocket HiveMQ. 

Setelah penggunaan aplikasi MQTT di komputer, berikut penggunaan aplikasi MQTT antara Adafruit IO dengan salah satu aplikasi MQTT di smartphone android, sebagai contoh di sini digunakan IoT MQTT Panel. Berikut langkah-langkahnya:
1. Di smartphone Android, instal IoT MQTT Panel dari Google Playstore.
2. Buka IoT MQTT Panel, klik pada tombol Setup a Connection.
3. Di halaman Add Connection, isi nama Connection (isi dengan nama sembarang), isi Broker web = io.adafruit.com, kemudian isi Username dan Password dengan AIO key. 
4. Klik tombol + Dashboard, isi nama Dashboard, klik tombol Save, klik tombol Create.

Gambar 98. (a) Klik Setup a Connection, (b) Isi Broker web, Username dan Password, (c) Klik tombol + Dashboard, isi nama Dashboard, klik Save, klik Create

5. Muncul nama Dashboard yang sudah kita isikan di halaman daftar Dashboard.
6. Klik 2 kali nama Dashboard tersebut, hingga terbuka halaman Panel. Klik tombol Add Panel untuk menambahkan panel (objek) tampilan data. 
7. Muncul daftar panel yang bisa ditambahkan.

  
Gambar 99. (a) Klik 2 kali nama Dashboard, (b) Terbuka halaman panel Dashbaord, klik Add Panel (c) Muncul daftar nama panel yang bisa ditambahkan

8. Pilih panel Gauge di daftar nama panel.
9. Isi nama Gauge panel = Suhu, Topic = aplikasi5/feeds/suhu (sesuaikan dengan nama feed), min = 0, max = 100, klik Create.
10. Muncul panel Suhu di halaman panel Dashboard. Klik tombol + untuk menambah panel.

Gambar 100. (a) Pilih panel Gauge, (b) Isi nama panel = Suhu, Topic = aplikasi5/feeds/suhu (sesuaikan dengan nama feed), min = 0, max = 100, klik Create (c) Di Dashboard, muncul panel Suhu

11. Ulangi pilih Gauge dari daftar nama panel, isi nama = Kelembaban, Topic = aplikasi5/feeds/kelembaban (sesuaikan dengan nama feed), min = 0, max = 100, klik Create.
12. Muncul panel Kelembaban di bawah panel Suhu. Klik tombol + untuk menambah panel.
13. Pilih panel Line Graph. Isi nama = Potensio, Topic = aplikasi5/feeds/potensio (sesuaikan dengan nama feed), klik Create.

Gambar 101.(a) Pilih panel Gauge, isi nama = Kelembaban, Topic = aplikasi5/feeds/kelembaban, min = 0, max = 100, klik Create, (b) Muncul panel Kelembaban, klik tombol + untuk menambah panel (c) Pilih panel Line Graph, isi nama = Potensio, Topic = aplikasi5/feeds/potensio, klik Create

14. Muncul panel Line Graph Potensio, klik tombol + untuk menambah panel.
15. Pilih panel Slider, isi nama = Setpoin, Topic = aplikasi5/feeds/setpoin, dan Subscribe Topic diisi sama dengan Topic, min = -1000, max = 1000, klik Create.
16. Berikutnya, klik + panel, tambahkan panel Text Input, isi nama = Pesan, Topic = aplikasi5/feeds/pesan, klik Create.

Gambar 102.(a) Muncul panel Line Graph Potensio, klik + untuk menambah panel, (b) Isi nama = Setpoin, isi Topic dan Subsribe Topic = aplikasi5/feeds/setpoin, min = -1000, max = 1000, klik Create, (c) Pilih panel Text Input, isi nama = Pesan, Topic = aplikasi5/feeds/pesan, klik Create

17. Berikutnya, tambahkan panel Text Log. Isi nama = Pesan, Topic = aplikasi5/feeds/pesan, centang Show last message only. klik Create.
18. Terlihat di halaman panel Dashboard, 6 buah panel yang terdiri dari panel Gauge Suhu, panel Gauge Kelembaban, panel Line Graph Potensio, panel Slider Setpoin, panel Text Input Pesan, panel Text Log Pesan. 
19. Terlihat data di setiap panel sudah masuk.

Gambar 103.(a) pilih Panel Text Log, isi nama = Pesan, Topic = aplikasi5/feeds/pesan, centang Show last message only, klik Create (b) Terlihat di halaman panel Dashboard, ada 6 panel, (c) Tampak keenam panel telah menampilkan data (kecuali panel Text Input Pesan)

20. Sampai di sini Aplikasi#5, yang menghubungkan Arduino IoT Cloud dan Adafruit IO telah selesai dibuat. Agar lebih jelas, berikut ini video pembuatan aplikasi#5 ini. 

Video Arduino IoT Cloud & Adafruit IO

21. Berikut ini file program, library dan kode html untuk tampilan web yang diperlukan dalam pembuatan aplikasi ini. Semoga bermanfaat dan terima kasih atas kunjungannya.

File Download: Aplikasi 5 Adafruit IO

No comments:

Post a Comment

Subscribe to: Posts (Atom)