Belajar IoT - Membuat Aplikasi Android untuk Memantau Suhu Ruangan Via Internet

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"]mini 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). lm35dz

Breadboard

Kabel jumper

Selain perangkat-perangkat di atas, Kamu akan memerlukan Wifi Access Point yang
terhubung ke internet. Access Point ini yang nantinya akan digunakan oleh ESP8266 untuk
terkoneksi ke internet. Kamu bisa menggunakan jaringan Wifi rumah kalo punya, sekolah,
kantor atau melalui tethering hotspot dari smartphone atau wireless router. Selain itu,
Kamu juga bakal memerlukan beberapa alat seperti obeng dan gunting.
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"]wemos-lm35dz 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 Celsiusnya

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);

WeMos 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.

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"]serial-monitor-value-

celsius 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 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"]API-agnosthings 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

#include
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);

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.

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"]serial-monitor-send-value-

celsius 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 Tabel data yang sudah tersimpan di AgnosThings[/caption]

[caption id="attachment_9156" align="alignnone" width="661"]agnosthings-chart-suhu

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
\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:

Simple IoT

0 °C

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:

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);

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.