pada tulisan kali ini, kita akan menggunakan situs kodular membuat aplikasi android sederhana yang akan digunakan untuk membaca nilai yang tersimpan di firebase. Baiklah, tanpa berpanjang lebar lagi, langsung saja kit ake materi pokok nya
Kodular
Kodular adalah situs yang menyediakan platform pembuatan aplikasi android dengan mudah tanpa menggunakan text-based programming. Untuk membuat aplikasi android di kodular, kita hanya perlu melakukan drag and drop komponen untuk membuat tampilan aplikasi android. Untuk melakukan programming terhadap komponen yang telah disusun, kodular menyediakan sistem programming model block yang juga digunakan dengan metode drag and drop.
Tampilan Designer Tab pada KodularTampilan Block Tab pada Kodular
Memulai Kodular
Untuk mulai menggunakan situs aplikasi kodular, ikutilah langkah-langkah berikut ini:
2. Kita akan diarahkan ke halaman sign in. Pada halaman ini pilih sign in dengan menggunakan akun google.
3. lalu pilih akun gmail yang kamu miliki sebagai akun untuk log in ke kodular.
4. Setelah berhasil log in, kalian akan diarahkan ke halaman creator. Pada halaman ini akan terlihat project-project yang sudah pernah dibuat sebelumnya.
5. Untuk membuat project baru, maka klik tombol “Create project” pada bagian kiri atas halaman Kodular Creator.
6. Berikan nama untuk project yang akan kita buat.
7. Pada “Configure your project”, biarkan saja semua konfigurasi tetap default dan langsung klik finish.
8. Kita akan diarahkan ke tab Designer untuk membuat tampilan aplikasi android yang akan kita buat.
Membuat Aplikasi Android
Aplikasi android yang akan kita buat di situs kodular ini adalah aplikasi yang berfungsi untuk membaca data yang terdapat pada realtime database nya firebase. Untuk mempermudah pembuatan aplikasi silahkan ikuti langkah-langkah berikut ini.
1. Buatlah tampilan android sederhana seperti dibawah ini:
2. untuk komponen image, kalian bisa download asset nya disini lalu nanti upload di properties “Background Image” pada komponen Image2.
3. Pada komponen Firebase_Database1, kita akan diminta untuk memasukkan Firebase token dan firebase URL.
Firebase token bisa didapatkan dengan cara:
Buka web firebase dan masuk ke console.
Pilih project firebase yang telah kita buat sebelumnya.
Klik icon gear yang terdapat pada sebelah kiri atas layar lalu klik project settings
pada menu project settings, copy isian web API lalu paste kan ke firebase token di kodular
Firebase URL bisa didapatkan dengan cara
Buka web firebase dan masuk ke console.
Pilih project firebase yang telah kita buat sebelumnya.
Klik Realtime Database
Copy link yang terdapat didalam Realtime Database lalu pastekan ke Firebase URL di kodular
4. Masuk ke tab block dan ikuti gambar dibawah ini
Sampai disini, aplikasi kita sudah bisa di download dalam bentuk apk dengan cara klik export >> android APK. Copy aplikasi yang telah kita buat tadi ke HP kita lalu install
Jika pembuatan aplikasi berhasil, maka tampilan aplikasi yang kita buat akan terlihat seperti ini:
Jika kalian masih merasa kesulitan membuat aplikasi nya, silahkan download file aia dibawah ini lalu masukkan ke kodular dengan klik tombol import project pada halaman project.
Demikianlah Membaca Database Firebase dan Menampilkannya di Aplikasi Android dengan menggunakan kodular, semoga tulisan ini bermanfaat. Sampai jumpa pada tulisan-tulisan berikutnya
Tujuan dari proyek ini adalah untuk mengirim dan menyimpan data dari sensor DHT11 supaya nantinya data tersebut bisa dibaca oleh perangkat atau aplikasi lain yang juga terhubung dengan google firebase.
Seperti yang kita ketahui bersama, ESP8266 adalah mikrokontroller yang memliki fitur jaringan wireless sehingga sangat cocok digunakan untuk proyek-proyek IoT yang membutuhkan kontrol perangkat dari jarak jauh. Oleh karena itu, tulisan kali ini akan dibagi menjadi beberapa bagian yaitu:
Google firebase adalah platform pengembangan aplikasi yang membantu para developer untuk membangun serta mengembangkan aplikasi yang di dukung oleh google. firebase memiliki berbagai service yang dapat digunakan untuk berbagai kebutuhan aplikasi digital.
Dalam tulisan ini, kita akan mencoba untuk membuat database sederhana dengan menggunakan realtime database yang merupakan salah satu fitur yang terdapat di dalam google firebase.
Adapun Langkah mulai menggunakan Google Firebase adalah sebagai berikut:
Membuat Project Firebase
buka firebase.google.com lalu klik “sign in” dengan memasukkan akun google dan password kita (aplikasi google saya berbahasa Inggris, silahkan disesuaikan)
Berikutnya, setelah berhasil login, klik tombol “Get started”
pada laman berikutnya, kita pilih “add project”
Selanjutnya, beri nama project yang akan kita buat lalu klik continue
Berikutnya, saya menonaktifkan google analytics untuk project ini lalu klik tombol “Create project”
Setelah itu, kita tunggu proses pembuatan project nya, klik continue dan kita akan masuk ke halaman utama project firebase seperti gambar dibawah ini
Sampai disini kita telah berhasil membuat project firebase yang kita inginkan, namun masih perlu beberapa penyesuaian dan aktivasi fitur realtime database yang nantinya akan digunakan untuk menyimpan data hasil pembacaan sensor dari NodeMCU ESP8266.
Membuat Realtime Database
Setelah kita berhasil membuat project, langkah berikutnya kita akan membuat Realtime Database dengan cara klik menu build > Realtime Database
Kita akan diarahkan ke laman Realtime Database. Klik tombol “Create Database” untuk membuat database baru.
Berikutnya, kita pilih server “Singapore (asia-southeast1)” karena lebih dekat dengan lokasi kita, lalu klik next.
pada menu ‘Set up database”, pilih “Start in locked mode”. Setelah itu klik enable.
Sampai disini kita sudah berhasil membuat database, langkah berikutnya adalah memberi ijin untuk read/write database dengan cara klik tab “Rules”, ubah kedua tulisan “false” menjadi “true”.
Berikutnya, kita kembali ke menu build > autentication, lalu arahkan mouse ke “Sign in method” lalu pilih tombol “Anonymous”
Geser slider menjadi enable lalu save
Sampai disini Realtime Database sudah dapat menerima data dari NodeMCU ESP8266. Langkah berikutnya adalah melakukan programming di Arduino IDE.
Buka Library manager di sebelah kiri layar (saya menggunakan Arduino IDE 2.1.0), cari library “Firebase Arduino Client Library for ESP8266 and ESP32”. Jika sudah ketemu, Klik install (perhatikan gambar)
Setelah library berhasil diinstal, kita lanjutkan menulis sketch dengan menambahkan beberapa library supaya ESp8266 bisa terhubung ke firebase.
Tambahkan library ESP8266WIF.I.h dan buatlah variabel untuk menyimpan data SSID dan password wifi
Sampai disini Sketch atau program telah selesai dikerjakan, langkah berikutnya adalah melakukan upload ke ESP8266.
Keseluruhan code dapat kamu lihat di bawah ini:
#include "DHT.h"
#include <ESP8266WiFi.h>
#define WIFI_SSID "nama_wifi"
#define WIFI_PASSWORD "password_wifi"
#include <Firebase_ESP_Client.h>
#include "addons/TokenHelper.h"
#include "addons/RTDBHelper.h"
#define API_KEY "API_Key dati project setting"
#define DATABASE_URL "link yang ada di realtime database"
#define DHTPIN 4
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);
//firebase data object
FirebaseData fbdo;
FirebaseAuth auth;
FirebaseConfig config;
unsigned long sendDataPrevMillis = 0;
bool signupOK = false;
void setup() {
Serial.begin(115200);
dht.begin();
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
Serial.print("Connecting to Wi-Fi");
while (WiFi.status() != WL_CONNECTED){
Serial.print(".");
delay(300);
}
Serial.println();
Serial.print("Connected with IP: ");
Serial.println(WiFi.localIP());
Serial.println();
config.api_key = API_KEY;
config.database_url = DATABASE_URL;
/* Sign up */
if (Firebase.signUp(&config, &auth, "", "")){
Serial.println("ok");
signupOK = true;
}
else{
Serial.printf("%s\n", config.signer.signupError.message.c_str());
}
/* Assign the callback function for the long running token generation task */
config.token_status_callback = tokenStatusCallback; //see addons/TokenHelper.h
Firebase.begin(&config, &auth);
Firebase.reconnectWiFi(true);
}
void loop() {
delay(2000);
float h = dht.readHumidity();
float t = dht.readTemperature();
if (isnan(h) || isnan(t)) {
Serial.println(F("gagal membaca DHT11"));
return;
}
Serial.print(F("Kelembaban: "));
Serial.print(h);
Serial.print(F("% Suhu Udara: "));
Serial.print(t);
Serial.println(F("°C "));
if (Firebase.ready() && signupOK && (millis() - sendDataPrevMillis > 15000 || sendDataPrevMillis == 0)){
sendDataPrevMillis = millis();
if (Firebase.RTDB.setFloat(&fbdo, "DHT/Kelembaban", h)){
Serial.println("PASSED");
Serial.println("PATH: " + fbdo.dataPath());
Serial.println("TYPE: " + fbdo.dataType());
}
else {
Serial.println("FAILED");
Serial.println("REASON: " + fbdo.errorReason());
}
if (Firebase.RTDB.setFloat(&fbdo, "DHT/Suhu", t)){
Serial.println("PASSED");
Serial.println("PATH: " + fbdo.dataPath());
Serial.println("TYPE: " + fbdo.dataType());
}
else {
Serial.println("FAILED");
Serial.println("REASON: " + fbdo.errorReason());
}
}
}
Jika upload berhasil maka data akan terkirim ke Realtime Database seperti yang terlihat dibawah ini
Tampilan FirebaseTampilan serial monitor
Demikianlah tulisan saya hari ini, tulisan yang lebih banyak gambarnya daripada teks nya. pada tulisan berikutnya kita akan ke judul selanjutnya yaitu: Membuat aplikasi android sederhana untuk menampilkan pembacaan DHT11 dengan kodular
Seperti yang kita ketahui bersama, ESP8266 adalah mikrokontroller yang memliki fitur jaringan wireless sehingga sangat cocok digunakan untuk proyek-proyek IoT yang membutuhkan kontrol perangkat dari jarak jauh. Oleh karena itu, tulisan kali ini akan dibagi menjadi beberapa bagian yaitu:
Membuat aplikasi android sederhana untuk menampilkan pembacaan DHT11 dengan kodular
Tulisan ini merupakan tulisan pertama dari 3 bagian yang tersedia dengan judul Mengukur Suhu dan Kelembaban Ruangan dengan menggunakan Sensor DHT11 dan ESP8266. Langsung saja, berikut ini tutorialnya.
Bahan-bahan
pada tutorial ini kita menggunakan sensor DHT 11, NodeMCU ESP8266 dan beberapa helai kabel jumper.
NodeMCU ESP8266
1 Buah
Sensor DHT11
1 Buah
Kabel Jumper
Secukupnya
Skema Rangkaian
Setelah bahan-bahan tersedia, kita lanjutkan ke proses perangkaian komponen. Perhatikan gambar skema dibawah ini dengan seksama agar tidak salah colok kabel
Program / Sketch
Hubungkan NodeMCU ESP8266 ke komputer lewat kabel USB dan pilih board (saya menggunakan NodeMCU 1.0(ESP-12E Module)) dan port dengan benar lalu upload program dibawah ini:
Jika rangkaian telah dirakit dengan benar dan sketch atau program juga telah diketik dengan benar maka kita bisa melihat hasilnya pada layar serial monitor seperti dibawah ini.
perhatikan juga baudrate yang ada pada serial monitor harus sama dengan yang ada pada sketch yaitu 115200.
Jika tampilan serial monitor sudah menunjukkan nilai kelembaban dan suhu, maka bisa dikatakan peragaaan yang kamu kerjakan telah berhasil.
PWM adalah teknik mengontrol denyutan atau pulsa pada sinyal digital untuk menirukan sinyal analog. Teknik PWM ini biasa digunakan untuk mengatur kecepatan motor, tingkat kecerahan pada LED dan sebagainya dalam rangkaian digital.
Pada tulisan sebelumnya tentangi sinyal Analog dan Digital saya sudah membahas tentang sinyal analog dan digital. Sinyal digital adalah jenis sinyal yang hanya memiliki 2 output yaitu HIGH atau kondisi on (biasanya 5 volt) dan LOW atau kondisi off (0 volt) sehingga pada dasar nya hanya bisa membuat output hidup dan mati saja mirip seperti saklar biasa untuk menghidupkan lampu dan kita tidak bisa membuat output dengan kondisi antara 5 – 0 volt dengan menurunkan tegangan secara bertahap seperti pada sinyal analog. perhatikan video dibawah ini dengan seksama.
Sinyal Analog
Sinyal Digital
Berdasarkan video diatas, kita dapat dengan mudah mengontrol output menjadi terang dan redup dengan menaikkan/menurunkan tegangan pada sinyal analog namun kita tidak bisa melakukan hal yang sama terhadap sinyal digital karena sifat gelombangnya.
untuk mengatasi hal itu maka digunakanlah teknik PWM untuk mengatur intensitas output pada rangkaian digital.
Cara Kerja PWM
PWM bekerja dengan cara memodifikasi duty cycle atau siklus kerja dari sinyal digital tersebut. untuk lebih memahami apa itu duty cycle, perhatikan grafik dibawah ini:
50% duty cycle50% duty cycle dan 25% duty cycle (kotak merah)25% duty cycle dan 10% duty cycle (kotak merah)50% duty cycle dan 70% duty cycle (kotak merah)
Setelah kita perhatikan gambar diatas, kita dapat menyimpulkan bahwa semakin besar persentase duty cycle maka sinyal akan berada pada kondisi HIGH (5 volt) dalam waktu yang lebih lama dan sebaliknya jika persentase duty cycle semakin kecil maka sinyal akan HIGH dalam waktu yang lebih pendek. Kita bisa menggunakan pengetahuan ini untuk mengontrol output pada rangkaian digital.
Pada dasarnya, sebuah LED pada sebuah rangkaian digital selalu berkedip-kedip dengan frekuensi tinggi yang tidak bisa dilihat oleh mata kita. Dengan memodifikasi duty cycle ini, kita dapat membuat LED berada di kondisi HIGH lebih lama sehingga LED terlihat lebih terang misalnya pada duty cycle 75%. Untuk membuat LED menjadi lebih redup, kita tinggal merubah persentase duty cycle menjadi 50% atau dibawahnya, dimana pada duty cycle ini LED berada di kondisi HIGH yang lebih pendek sehingga cahaya yang terlihat oleh mata kita lebih sedikit.
Segitu saja penjelasan saya tentang PWM dan cara kerjanya, semoga penjelasannya gampang dipahami. Dengan adanya microcontroller board seperti Arduino maupun NodeMCU, penggunaan PWM menjadi semakin mudah dan berikut ini adalah contoh penggunaan teknik PWM dengan fungsi analogWrite() pada Arduino.
Teknik PWM dengan menggunakan fungsi analogWrite()
Untuk lebih memahami cara kerja Arduino atau mikrokontroler lainnya yang sejenis, kita perlu memahami 2 jenis sinyal elektronik yaitu sinyal analog dan sinyal digital. Pada tulisan ini saya akan mencoba untuk menjelaskan keduanya.
Analog dan Digital
Signal analog adalah jenis signal elektronik yang bersifat continyu atau tidak terputus-putus dengan amplitudo yang berubah-ubah seiring waktu karena perubahan tegangan. Signal analog dapat dengan mudah dimanipulasi atau di kontrol dengan cara merubah tegangan dalam rangkaian. Untuk mempermudah penjelasan ini, perhatikan video berikut:
Simulasi rangkaian analog
Sinyal digital adalah sinyal elektronik berupa signal terputus-putus (berbentuk pulsa atau denyutan) HIGH dan LOW dengan frekuensi yang sangat cepat sehingga memiliki bentuk gelombang kotak naik dan turun setiap saat. Signal digital ini tidak terpengaruh oleh perubahan tegangan. Signal akan bernilai HIGH jika ada tegangan misalnya 5 volt dan bernilai LOW jika tidak ada tegangan (0 Volt). Sinyal ini dapat dimanipulasi atau di kontrol dengan teknik PWM. Perhatikan video dibawah ini:
Simulasi signal digital
Baiklah sampai disini dulu tulisan ini, mungkin masih banyak kekurangan disana sini. semoga bermanfaat.
pada tulisan ini, kita akan mencoba untuk membuat sebuah web server pada NodeMCU ESP 8266 untuk mengontrol output berupa lampu LED. Dengan menggunakan cara ini, kita dapat mengontrol berbagai macam peralatan yang terhubung dengan NodeMCU ESP8266 dengan menggunakan browser yang terhubung dengan jaringan lokal yang ada dirumah kita.
Langsung saja, kita persiapkan alat dan bahan yang dibutuhkan.
Alat dan Bahan
Alat:
Laptop / komputer yang sudah terinstal Arduino IDE
Kabel data microUSB untuk mengupload sketch/program ke nodeMCU
Bahan:
NodeMCU ESP8266
LED
Kabel Jumper
Breadboard
Skema Rangkaian
langkah berikutnya, kita rangkai NodeMCU ESP8266 dan LED sesuai rangkaian yang ada dibawah ini:
NodeMCU ESP8266
LED
D0
Anode (+)
GND
Cathode (-)
Menginstal Board ESP8266 ke Arduino IDE
Supaya NodeMCU ESP8266 dapat di program dengan menggunakan Arduino IDE, kita perlu menginstal additional board ESP8266 ke dalam aplikasi Arduino IDE dengan cara:
Buka aplikasi Arduino IDE lalu klik File — Preferences…
Pada Tab settings — Additional boards manager URL, copy dan pastekan URL berikut kedalam kotak:
Seteleh itu kita ke menu boards manager dan ketikkan ESP8266 pada kotak pencarian. Setelah board ditemukan, instal board esp8266 dengan cara mengklik tombol install.
Tunggu instalasi sampai selesai lalu tutup dan buka kembali aplikasi Arduino IDE untuk memastikan board terinstal dengan baik.
Program / Sketch
Buka kembali Arduino IDE lalu klik File — New Sketch
Jika sketch telah selesai di ketikkan, maka langkah berikutnya adalah mengupload sketch yang telah selesai tadi ke mikrokontroler NodeMCU ESP 8266. Untuk itu, langkah-langkah yang harus dilakukan adalah:
Pertama, hubungkan kabel USB dari laptop ke NodeMCU ESP8266.
Setelah itu, di kotak pemilihan board dan port, kita pilih board NodeMCU 1.0 (ESP-12E Module) dan port nya sesuai dengan port yang sedang aktif. Tekan OK lalu klik tombol UPLOAD lalu tunggu sampai selesai
Upload bisa dikatakan berhasil jika tampilan output nya seperti gambar dibawah ini
Langkah berikutnya, kita buka serial monitor untuk mengetahui apakah modul NodeMCU ESP8266 telah terhubung ke wifi dan melihat alamat IP.
Setelah IP address sudah didapatkan, kita buka browser pada HP atau laptop kita, lalu pada address bar kita ketikkan IP address sesuai yang terlihat di serial monitor.
Jika ketika tombol “hidupkan” ditekan atau di klik, maka LED yang terhubung ke NodeMCU ESP8266 akan hidup dan tombol akan berubah menjadi “matikan”
Demikianlah tulisan hari ini, semoga tulisannya gampang dimengerti dan semoga tulisannya juga bermanfaat.