Belajar IoT - Membuat Aplikasi Android untuk Memantau Suhu Ruangan Via Internet
Toni Haryanto 15 April 2016
Saya sudah membuat satu tutorial tentang bagaimana menyalakan dan mematikan lampu via internet menggunakan AgnosThings dan ESP8266. Tutorial tersebut memandu tahap demi tahap mulai dari persiapan alat, merangkai alat hingga menulis kode program dan testing sehingga kita dapat menyalakan dan mematikan lampu dari jarak jauh. Pada tutorial kali ini, masih menggunakan peralatan yang sama yakni AgnosThings sebagai platform Internet of Things tempat kita menyimpan data, dan WeMos D1 Mini sebagai perangkat utama yang akan kita program untuk terhubung ke internet dan berkomunikasi dengan AgnosThings. Skenarionya adalah kita akan menangkap data suhu ruangan menggunakan sensor suhu LM35DZ dan menyimpan data tersebut di AgnosThings.
Tidak sampai situ. Tutorial ini juga membahas sekalian bagaimana membuat aplikasi Android sederhana untuk memantau data suhu dari AgnosThings. Aplikasi Android yang kita buat berbasis HTML5 dan akan diconvert ke dalam bentuk Android Package (.apk) menggunakan Cordova pada Intel XDK. Kalo Kamu tertarik lebih dalam tentang bagaimana membuat aplikasi Android berbasis HTML5, Kamu dapat belajar di Academy Belajar Membuat Aplikasi Android HTML5 dengan Intel XDK.
Buat Kamu yang tertarik dengan IoT dan ingin mempelajarinya lebih dalam, CodePolitan sudah menyiapkan pengetahuan dasar tentang IoT dan perkembangannya di Indonesia ke dalam sebuah ebook CodePolitan Magazine yang dapat diunduh secara gratis dan mudah di halaman CodePolitan Magazine #19 - Invasi Internet of Things di Tanah Air. Dan buat Kamu yang ingin mempelajari teknik IoT yang lebih lengkap, Kamu bisa mengikuti Academy Belajar Implementasi Internet of Things (IoT) Sederhana dengan Intel Galileo.
Tutorial ini saya set ke dalam level intermediate, dengan asumsi Kamu sudah mencoba tutorial IoT level beginner yang menyalakan dan mematikan lampu itu. Sehingga pada tutorial ini kita akan langsung membahas bagaimana perangkat IoT kita (dalam tutorial ini berarti WeMos D1 Mini) dapat mengirimkan nilai suhu secara kontinyu ke AgnosThings, yang kemudian juga nilai tersebut akan kita tampilkan pada aplikasi Android.
Berikut adalah demo hasil akhir tutorial ini:
Persiapan Perangkat dan Alat
Untuk dapat mengikuti tutorial ini, Kamu harus mempersiapkan beberapa perangkat berikut:- Wemos D1 Mini
Board ini adalah board wifi kecil berbasis ESP8266. ESP8266 dikenal sebagai modul WiFi yang handal, ekonomis dan komunitas yang besar. ESP8266 inilah yang akan menghubungkan perangkat kita dengan internet via WiFi. Ada banyak varian prototype board berbasis ESP8266, seperti NodeMCU, Adafruit HUZZAH ESP8266, ESPDuino, SparkFun ESP8266 Thing, dan Wemos. Kita sebenarnya bisa langsung memprogram ESP8266 langsung tanpa menggunakan yang breakout board. Tapi kali ini saya menggunakan Wemos D1 Mini karena board ini adalah yang paling murah dan mudah didapatkan dibanding board sejenisnya. Selain itu board ini sudah dilengkapi dengan onboard microUSB dan Serial driver sehingga tidak perlu lagi USB to TTL atau FTDI adapter. Cocok untuk belajar.
[caption id="attachment_8627" align="alignnone" width="400"]
board Wemos D1 Mini[/caption] - Sensor Suhu LM35DZ
Ada banyak varian sensor suhu yang bisa kita gunakan, masing-masing dengan spesifikasi dan harga yang bervariasi. Beberapa diantaranya adalah thermocouple, TMP100, LM75, DS18B20, LM35, SHT15, RHT03 dan DHT11. Kali ini kita akan menggunakan sensor LM35. Sensor LM35 memiliki akurasi pengukuran ± 0.6 °C. LM35 pun memiliki setidaknya 3 varian, yaitu LM35, LM35C dan LM35D. LM35 dan LM35A memiliki batasan suhu yang dapat diukur dalam rentang -55 °C hingga 150 °C, sedangkan LM35C dari -40 °C hingga 110 °C, dan LM35D dari 0 °C hingga 100 °C. Output dari sensor ini adalah nilai analog yang nantinya akan kita konversikan ke dalam bentuk derajat Celsius. Pada tutorial ini saya akan menggunakan LM35DZ dengan rentang 0-100 °C karena kita akan mengukur suhu udara di ruangan yang mana sangat jarang mencapai angka 0 derajat dan melebihi 100 derajat (setidaknya untuk Indonesia yang berada di daerah khatulistiwa).
- Breadboard
- Kabel jumper
Merangkai Alat
LM35 menghasilkan output analog. Saya menggunakan LM35DZ yang mana rentang pengukuran suhunya antara 0 - 100 °C. Pada dasarnya sensor ini tidak menangkap nilai suhu secara langsung. Karena seperti kita ketahui, nilai analog dibaca dari perubahan voltase yang dikeluarkan oleh sensor. LM35DZ memiliki rasio konversi yang linear, dimana untuk setiap kenaikan 1 derajat Celsius itu setara dengan kenaikan output 10mV.LM35DZ memiliki 3 kaki, dari kiri ke kanan adalah Vs, Vout dan GND. Vout kita hubungkan ke pin A0 untuk menerima sinyal analog. Vs kita hubungkan dengan pin 3.3V.
[caption id="attachment_9072" align="alignnone" width="500"]
Rangkaian LM35 pada board Wemos D1 Mini[/caption]
Install Hardware Package ESP8266
ESP8266 dapat diprogram dengan Arduino IDE. Untuk itu kita akan menginstal terlebih dahulu hardware package untuk ESP8266 pada Arduino IDE. Ada dua jalan untuk itu, yakni melalui board manager pada Arduino IDE, atau mengunduh source code atau git clone dari repo Github. Saya asumsikan Kamu sudah menginstal Arduino IDE di komputermu. Dan untuk menggunakan ESP8266 disarankan untuk menggunakan Arduino IDE v1.6.7 ke atas. Kalo Kamu belum menginstal Arduino IDE, unduh terlebih dahulu installernya di sini lalu jalankan untuk menginstal di komputermu. Setelah itu ikuti salah satu langkah untuk menginstal hardware package ESP8266 yang ada pada halaman tutorial "Menyalakan dan Mematikan Lampu Via Internet Menggunakan AgnosThings dan ESP8266, Step 3 : Install Hardware Package ESP8266".Menulis Program untuk Membaca Nilai Suhu
Sekarang kita akan menuliskan program sederhana untuk menerima nilai analog dari sensor LM35DZ dan mengkonversinya ke dalam satuan Celsius. Buka Arduino IDE dan tuliskan program berikut:int analogVal = 0; // variable untuk menyimpan nilai analog float mVolt = 0; // dari nilai analog kita ubah ke satuan mVolt float celsius = 0; // dari mVolt kita akan dapat nilai CelsiusnyaWeMos D1 Mini berbasis ESP8266EX yang mana memiliki hanya 1 pin input analog yaitu pin A0. Nilai analog berkisar antara 0 hingga 1023 (10 bit) yang merepresentasikan voltase input analog dalam bentuk nilai desimal agar lebih mudah diolah. Tapi karena kita membutuhkan nilai derajat Celsius yang mana kita dapatkan dari pembagian setiap 10mV untuk setiap 1 derajat Celsius, maka kita akan mengkonversikan nilai analog tadi ke dalam satuan milivolt terlebih dahulu baru kemudian kita bagi 10 untuk mendapatkan nilai Celsius.void setup() { Serial.begin(9600); }
void loop() { // ambil nilai analog analogVal = analogRead(A0);
// konversi nilai analog ke milivolt mVolt = (analogVal / 1024.0) * 3300;
// konversi nilai milivolt ke celsius celsius = mVolt / 10;
Serial.print(celsius); Serial.println(" Celsius");
delay(5000); }
mVolt = (analogVal / 1024.0) * 3300; adalah rumus untuk mendapatkan nilai milivolt. Nilai analog yang diterima dibagi 1024 kemudian dikali 3300 milivolt karena pin analog pada ESP8266 beroperasi pada tegangan 3.3V. Untuk membuktikan nilai voltase Kamu dapat menggunakan AVOmeter atau Voltmeter pada pin tengah untuk melihat nilai voltase sebenarnya.
Karena kita sudah dapat nilai dalam satuan milivolt, maka kita tinggal membagi nilai tersebut dengan 10 untuk mendapatkan nilai derajat Celsius, seperti pada baris kode celsius = mVolt / 10;.
Compile dan upload program ke WeMos. Pastikan setting di menu Tools (Board, CPU Frequency, Flash Size, Upload Speed, dan Port) sudah terpasang dengan benar (lihat settingan pada tutorial menyalakan lampu via internet, Step 6). Kemudian amati nilai keluarannya pada jendela Serial Monitor. Pastikan baudrate diset sama dengan yang dipasang pada kode program (9600).
[caption id="attachment_9082" align="alignnone" width="405"]
Menampilkan nilai derajat celsius pada serial monitor[/caption]
Kamu dapat mencoba melihat perubahan nilai suhu dengan mendekatkan sensor ke sumber api, kipas laptop, atau menempelkan sensor ke es. Pada layar serial monitor saya, nilai suhu ruangan ada di kisaran 28 °C. Mungkin nampak lebih tinggi dari suhu ruangan normal yang mestinya ada di kisaran 24 - 26 °C. Mungkin dari sensornya yang berkualitas rendah, sehingga diperlukan kalibrasi ulang. Salah satu teknik kalibrasinya adalah dengan membandingkan nilai keluaran sensor kita dengan nilai dari termometer suhu ruangan, lalu kita tambahkan atau kurangi sebesar selisih kedua nilai tersebut. Anyway, untuk simulasi sensor suhu dan IoT ini kita anggap cukup ya.
Membuat Project di AgnosThings
Sekarang kita akan menyimpan nilai suhu tadi ke server AgnosThings. Kita harus membuat project terlebih dahulu melalui panel dashboard AgnosThings. Penjelasan lengkap tentang dashboard AgnosThings dapat dibaca pada tutorial menyalakan dan mematikan lampu via Internet, Step 5.Kali ini kita akan memerlukan satu field, mari kita beri nama field dengan 'suhu'. Login terlebih dahulu ke dashboard AgnosThings. Kemudian tekan tombol Start Initial Project untuk masuk ke halaman form registrasi device. Kemudian isi form dan tekan tombol Register Device.
[caption id="attachment_9083" align="alignnone" width="616"]
Isi form registrasi device untuk membuat project baru[/caption]
Setelah kita membuat project di AgnosThings, kita akan mendapatkan API untuk mengirim dan menarik data dari AgnosThings. API yang akan kita gunakan adalah API untuk sending data, digunakan untuk mengirim data suhu dari WeMos, dan API getting last feed data, digunakan untuk mengambil data terakhir dan ditampilkan di aplikasi Android.
[caption id="attachment_9127" align="alignnone" width="633"]
dua API yang digunakan pada tutorial[/caption]
Menulis Program untuk Push Data ke AgnosThings
Kita sudah menulis kode untuk membaca nilai suhu dari sensor LM35DZ. Sekarang saatnya kita update kode tersebut agar dapat mengirimkan nilai suhu itu ke server AgnosThings menggunakan API sending data.#include <ESP8266WiFiMulti.h> #include <ESP8266HTTPClient.h>Kita menambahkan library ESP8266WifiMulti dan ESP8266WifiClient di bagian paling atas program. Kita juga mendeklarasikan variable WifiMulti untuk membuat koneksi via Wifi. Kita juga mendeklarasikan variabel celsius_str dengan tipe char untuk menyimpan nilai celsius dalam tipe karakter (bukan float) agar dapat digabungkan dengan URL API sending data. Di dalam fungsi setup kita set access point. Dan di dalam fungsi loop kita menambahkan kode untuk memanggil API dengan terlebih dahulu digabungkan dengan nilai celsius.ESP8266WiFiMulti WiFiMulti; static char celsius_str[15];
int analogVal = 0; // variable untuk menyimpan nilai analog float mVolt = 0; // dari nilai analog kita ubah ke satuan mVolt float celsius = 0; // dari mVolt kita akan dapat nilai Celsiusnya
void setup() { Serial.begin(9600);
// set Wifi SSID dan passwordnya WiFiMulti.addAP("SSID", "password");}
void loop() { Serial.println(""); // tunggu koneksi Wifi if((WiFiMulti.run() == WL_CONNECTED)) { // ambil nilai analog analogVal = analogRead(A0);
// konversi nilai analog ke milivolt mVolt = (analogVal / 1024.0) * 3300; // konversi nilai milivolt ke celsius celsius = mVolt / 10; Serial.print(celsius); Serial.println(" Celsius"); HTTPClient http; // cast nilai float celsius ke type char dahulu agar dapat digabung // parameter kedua panjang karakter, // parameter ketiga adalah panjang karakter setelah koma dtostrf(celsius, 5, 2, celsius_str); // siapkan API untuk push data // ganti dengan API punyamu String url = "http://agnosthings.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/feed?push=suhu="; // merge API dengan nilai celsius String urls = url + celsius_str; // panggil API http.begin(urls); // ambil status HTTP Header int httpCode = http.GET(); // httpCode akan bernilai negatif bila error if(httpCode > 0) { // cetak httpCode ke Serial, 200 berarti sukses Serial.printf("[HTTP] GET... code: %d\n", httpCode); } else { Serial.printf("[HTTP] GET... failed, error: %s\n", http.errorToString(httpCode).c_str()); } // tutup koneksi HTTP http.end(); } // beri jeda pengiriman data setiap 10 detik delay(10000);}
Upload program ke WeMos, kemudian amati pada jendela Serial Monitor. Bila upload gagal, berarti ada settingan pada menu Tools yang tidak tepat. Bila kode berhasil diupload tetapi pada Serial Monitor HTTP codenya bukan 200, berarti ada masalah pada koneksi, apakah setting SSID dan passwordnya salah, atau APInya yang salah. Kamu bisa mencoba println() pada jendela Serial terlebih dahulu hasil penggabungan URL API dengan nilai suhu yang sudah diubah ke tipe char untuk memastikan apakah API sudah benar.
Bila HTTP codenya bernilai 200, itu artinya data suhu sudah tersimpan di server AgnosThings.
[caption id="attachment_9153" align="alignnone" width="405"]
nilai suhu berhasil terkirim dan tersimpan di server[/caption]
Kamu bisa cek pada halaman dashboard AgnosThings apakah data sudah tersimpan atau belum.
[caption id="attachment_9157" align="alignnone" width="512"]
Tabel data yang sudah tersimpan di AgnosThings[/caption]
[caption id="attachment_9156" align="alignnone" width="661"]
Grafik data suhu yang sudah tersimpan di AgnosThings[/caption]
Membuat App Project Cordova
Sekarang saatnya kita membuat aplikasi Android untuk melihat nilai suhu terakhir yang tercatat di AgnosThings. Kita akan membuat aplikasi berbasis web HTML5 dan mengemas aplikasi kita dalam bentuk file .apk dan menginstalnya di handphone Android menggunakan Cordova. Untuk itu Kamu perlu terlebih dahulu menginstal Apache Cordova di komputermu bila belum terinstal, dengan mengikuti panduan instalasi pada tutorial Membuat Aplikasi Android Berbasis HTML5 dengan Cordova.Setelah Cordova dan seperangkat kebutuhannya terinstal di komputermu, jalankan perintah berikut melalui cmd untuk membuat project baru:
cordova create iotapp com.codepolitan.iotapp IoTApp
Setelah project selesai dibuat, masuk ke dalam folder project tersebut di cmd, lalu jalankan perintah berikut untuk menambah platform browser:
cordova platform add browser
Kemudian jalankan perintah berikut untuk menjalankan aplikasi kita di browser:
cordova run browser
Bila browser Kamu terbuka dan muncul aplikasi web dengan logo Cordova, berarti aplikasi Kamu siap untuk kita modifikasi untuk keperluan IoT. Saya terbiasa membuat aplikasi web menggunakan Bootstrap. Seharusnya sih untuk aplikasi sederhana tidak perlu menggunakan framework karena selain memperbesar ukuran file instalasi aplikasi nantinya, juga akan ada beberapa asset yang tetap dimuat meskipun tidak digunakan. Tapi untuk tutorial kali ini, supaya kita tidak terlalu berlama-lama di layouting dan style, saya tetap memutuskan untuk menggunakan Bootstrap hehe..
Unduh Boostrap di halaman http://getbootstrap.com/getting-started/#download. Pilih opsi pertama yang Compiled and minified bla bla.. no docs and original source files included. Ekstrak semua konten berisi folder css, fonts dan js ke dalam folder project <strong>iotapp\www. Kamu juga boleh menghapus terlebih dahulu semua isi yang ada di dalam folder \www baru kemudian ganti dengan asset Bootstrap.
Setelah itu buat atau edit file index.html di dalam folder \www lalu isikan kode HTML berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple IoT</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<div class="content">
<h1 id="suhu">0 °C</h1>
<div class="progress">
<div class="progress-bar progress-bar-warning" id="bar-suhu" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Buka kembali jendela cmd lalu jalankan perintah cordova run browser untuk melihat hasil halaman html kita. Kita sudah menambahkan dua buah elemen di dalam halaman, yakni caption h1 untuk menampilkan nilai suhu dan progress-bar sebagai ilustrasi dari tinggi nilai suhu yang ditampilkan.
Sampai disini kita belum menampilkan nilai suhu aktual dari AgnosThings. Oleh karena itu kita tambahkan kode jQuery untuk mengambil data dari AgnosThings dan menampilkannya di h1 dan progress-bar. Tambahkan program berikut sebelum tag tutup body pada file index.html kita:
<script type="text/javascript">
var suhu= 0;
var suhu_caption = "0";
setInterval(function(){
$.get("http://agnosthings.com/0xx00x0x-00xx-00x0-0000-000000000000/field/last/feed/00/suhu", function(a){
suhu = a.value;
suhu_caption = suhu + "°C";
console.log(suhu);
$('#suhu').html(suhu_caption);
$('#bar-suhu').css({width: suhu+"%"});
})
} , 5000);
</script>
Pada program di atas, kita membuat variabel untuk menyimpan nilai suhu. Kita kemudian menggunakan fungsi setInterval() untuk melakukan request ke server dengan jeda waktu setiap 5 detik. Kita menggunakan API jQuery $.get() untuk memanggil API request data terakhir ke AgnosThings. Jangan lupa untuk mengganti API AgnosThings last feed dengan punyamu. Data diterima dalam format json dan kita dapat langsung memanggil properti json tersebut untuk ditampilkan di elemen #suhu. Dan juga karena nilai yang kita dapatkan selalu berkisar antara 0 hingga 100, maka kita dapat langsung menggunakannya untuk mengatur panjang presentase progress-bar.
Jalankan lagi perintah cordova run browser untuk melihat hasilnya. Saat halaman web dimuat, dia akan mulai memanggil API AgnosThings untuk pertama kali dan setelah beberapa saat begitu data kita terima, data tersebut langsung dimuat ke elemen h1 dan panjang progress-bar pun berubah. :)
Export Aplikasi Web Mobile ke .apk
Kita sudah melihat bahwa aplikasi web kita sudah bisa memuat data dari AgnosThings. Kamu bisa mencoba mengganti nilai dengan mempengaruhi suhu pada sensor LM35DZ agar perubahan datanya dapat diamati, apakah dengan mendekatkannya ke api atau menempelkannya ke es.Sekarang kita akan mengubah aplikasi web kita menjadi aplikasi Android. Jalankan perintah berikut untuk menambahkan platform pada project cordova kita:
cordova platform add android
Setelah itu jalankan perintah berikut untuk mulai membuild aplikasi Android kita.
cordova build android
Setelah proses build selesai, Kamu dapat mengakses file .apk di dalam folder iotapp\platforms\android\build\outputs\apk\ dengan nama file android-debug.apk. Salin dan install di handphone Android dan lihat hasilnya :)
Lebih Lanjut
Kamu dapat menambahkan komponen lain pada aplikasimu seperti grafik 10 nilai suhu terakhir, mengganti progress-bar dengan jQuery Knob, atau menggunakan tombol untuk mereload data secara manual. Kamu juga dapat mendandani aplikasimu biar kelihatan lebih indah dan elegan, dengan menambahkan background warna atau gambar, menggunakan font yang cocok, atau bahkan menggunakan framework khusus untuk pengembangan aplikasi web app seperti Ionic Framework atau Intel's App Framework.Kamu juga dapat menambah sensor lain pada alatmu, seperti sensor kelembaban, sensor asap, dan sensor cahaya. Tapi pada intinya, baik pengiriman maupun pengambilan data dari dan ke AgnosThings selalu seperti itu, sangat mudah dan sederhana.
Bila aplikasimu sudah selesai, tentunya dengan berbagai pengembangan dan fitur, Kamu bisa mencoba submit di challenge pembuatan aplikasi Internet of Things menggunakan AgnosThings untuk tema Smart Home dan Smart Power Monitoring.
Selamat belajar dan sukses! :D