Membuat Web Dashboard untuk aplikasi Internet of Things [2]

Dashboard Monitoring Daya Listrik menggunakan IoT, Pemantauan IoT berbasis aplikasi web, Monitoring Daya Listrik dengan ThingSpeak, Simple ThingSpeak Server side web dashboard application 

Pada tutorial post sebelumnya, kita telah dapat membuat suatu tampilan dashboard dengan menambahkan data grafik yang telah disediakan oleh ThingSpeak. Nah ada beberapa informasi yang dibutuhkan dalam yang akan ditampilkan dalam card dashboard. Proses pengambilan data-data tersebut adalah dengan menggunakan web API request (pelajari dokumentasinya). Dalam hal ini, data yang akan dijadikan feedback berupa JSON sehingga biar mudah ngolahnya kita akan menggunakan javascript. Sebelum lanjut, pastikan kamu telah mengikuti tutorial ini dari post sebelumnya ! (biar gak bingung)

Total Data

Maksudnya adalah jumlah entry data yang telah ditampung oleh channel. Dari hasil ini kita dapat memprediksi seberaba lama perangkat dilapangan telah aktif mengirimkan data (dilihat dari setting waktu jeda untuk update data). Setiap kita menyimpan data di channel, maka otomatis akan mendapatkan entry_id. Nah entry_id ini dapat dijadikan indikator seberapa banyak kita sudah melakukan entry data (menyimpan) ke channel. Kita dapat mengecek entry_id (sebagai total data entry) pada data entry yang terakhir. Caranya dapat dilihat disini. Untuk contoh format GET requestnya adalah

*ganti XXXXX dengan channel id kamu

Silahkan coba akses url tersebut melalui browser. Maka akan diperoleh data seperti berikut
Selanjutnya mari kita ambil nilai entry_id dan kita tampilkan pada card Total Data. Buka (edit notepad ++) file index.php (C:\xampp\htdocs\iot_monitoring\main_pages\index.php) kemudian cari bagian Total Data. Hapus angka 20 (line 218) dan ganti dengan

Oke, lanjut ke bagian java scriptnya. copas kode berikut sebelum </body> (line 415). Script ini juga berfungsi sebagai reloader untuk mengecek nilai entry_id dengan interval 10 detik (sesuai selera)
*ganti XXXXX dengan channel id kamu

Simpan filenya kemudian akses ke dashboard. Maka harusnya pada card Total Data nilainya sudah sesuai dengan nilai entry_id data terakhir.

Begitulah trik untuk menampilkan data feedback dengan format JSON dari GET request. Untuk proses selanjutnya hampir-hampir sama sih. Hanya saja untuk perhitungan rata-rata kita akan menggunakan Matlab analisis.

Data Rata-rata
ThingSpeak memiliki fitur Matlab Analisis sehingga memungkinkan kita untuk melakukan analisa data yang telah tersimpan pada channel. Karena metode pengambilan data ini menggunakan request API, yang mewajibkan adanya data di suatu channel, maka kita perlu membuat channel lagi yang berfungsi untuk menyimpan data rata-rata dari hasil proses analisis.

• Buat Channel (sebagai contoh saya membuat channel Average Data dengan 2 field yaitu Av_temp dan Av_hum). Status channel ini private ya.. maksudnya biar tau perbedaan request data pada channel private dan public.

% Channel ID to read data from 
readChannelID = XXXXX; 
% Temperature and Humidity Field ID 
temperatureFieldID = 1; 
humidityFieldID = 2;

% Channel Read API Key 
% If your channel is private, then enter the read API Key between the '' below: 
readAPIKey = 'XXXXX'; 

% Get Temperature and humidity data for the last 60 minutes from the Station 1
temperature = thingSpeakRead(readChannelID,'Fields',temperatureFieldID,'NumMinutes',60,'ReadKey',readAPIKey); 
humidity = thingSpeakRead(readChannelID,'Fields',humidityFieldID,'NumMinutes',60,'ReadKey',readAPIKey); 

%2 digit display format
format bank;

% Calculate the average temperature 
avgTemperature = mean(temperature); 
display(avgTemperature,'Average Temperature'); 

% Calculate the average humidity 
avgHumidity = mean(humidity); 
display(avgHumidity,'Average Humidity'); 


% To store the calculated average humidity, write it to a channel other 
% than the one used for reading data. To write to a channel, assign the 
% write channel ID to the 'writeChannelID' variable, and the write API Key 
% to the 'writeAPIKey' variable below. Find the write API Key in the right 
% side pane of this page. 

% Replace the [] with channel ID to write data to: 
writeChannelID = [XXXXX]; 
% Enter the Write API Key between the '' below: 
writeAPIKey = 'XXXXX'; 

%Store average data to cahnnel Average Data 
%round function for 2 digit after decimal point
thingSpeakWrite(writeChannelID,[round(avgTemperature,2),round(avgHumidity,2)],'WriteKey',writeAPIKey);
fprintf('Success store data to Channel #Average Data# \n'); 

(C:\xampp\htdocs\iot_monitoring\main_pages\index.php). Metode yang digunakan sama seperti saat menambahkan Total Data. yaitu dengan melakukan request data terakhir dari field Av_temp dan Av_hum pada cahnnel Average Data.

Nah, demikian tutorial membuat dashboard aplikasi web sederhana untuk monitoring data yang tersimpan di ThingSpeak. Kamu bisa kembangkan lagi untuk data dan visualisasi yang lebih komplek. Salam!