ESP32 Firebase vs MIT App Inventor: 7 Langkah Mudah Membuat Aplikasi Monitoring via Smartphone

WAJIB BACA

KLIK DISINI => PROJECT DAN KONSULTASI IOT 

Belajar Membuat Aplikasi Android Untuk Memantau Suhu dan Kelembaban Ruangan Menggunakan Firebase

Pada pembahasan sebelumnya, kita telah belajar untuk membuat sistem monitoring suhu dan kelembaban melalui Blynk, Telegram, dan Thingspeak. Sebagai langkah pengembangan selanjutnya maka kita harus bisa berdiri sendiri untuk membangung sebuah aplikasi monitoring, karena kita tau bahwa Blynk, Thingspeak, dan Telegram merupakan aplikasi pihak ke 3 yang memiliki fitur terbatas.

Solusi untuk permasalahan di atas adalah dengan membangun sebuah aplikasi Android sendiri menggunakan MIT App Inventor dan Firebase sebagai penyimpanan (Database).

Saya tidak mengerti sama sekali tentang Firebase maupun MIT App Inventor, Apa bisa?

Tentu saja bisa temen2 nggak usah khawatir, nanti tinggal ikuti aja langkah-langkahnya secara sistematis, Insyaallah semua bisa berjalan dengan lancar.

Apa saja yang harus dipersiapkan?

Hal -hal yang harus dipersiapkan dalam segi hardware adalah :

1. ESP32 Devkit 1

2. Sensor Suhu DHT11

3. Kabel Data Smartphone untuk Mengupload Program ke ESP32

4. Kabel Jumper female untuk Menghubungkan ESP32 ke DHT11

5. Secangkir Kopi Panas dan Roti biar nggak pusing

Hal - hal yang harus dipersiapkan dalam segi software :

1. Aplikasi Arduino IDE

2. MIT AI2 Companion diinstal di smartphone

3. Akun Google

4. Akun MIT App Inventor

5. Akun Firebase, yang satu ini biasanya ikut akun google

Langkah apa saja yang harus dilakukan?

Kita mulai dari hal tersulit ke yang paling mudah ya temen-temen biar enak, urutan pembuatannya adalah sebagai berikut :

1. Membuat tampilan aplikasi monitoring di App Inventor

2. Membuat blok programming di App Inventor

3. Menyiapkan API key dan Host di Firebase

4. Menginstal aplikasi yang sudah jadi ke smartphone

5. Membuat rangkaian hardware ESP32 ke DHT11

6. Menyiapkan Library untuk Arduino IDE

7. Membuat kode program di Arduino IDE

Tutorial Membuat Aplikasi Monitoring Suhu dan Kelembaban di App Inventor

1. Kunjungi webnya > login dengan akun yang sudah dibuat > buat new project, perhatikan gambar di bawah ini. Gambar tampilan untuk memulai project setelah login.

2. Setelah klik "Start new project" maka akan keluar pop up untuk nama aplikasi. Silahkan untuk memasukkan nama project temen-temen jangan lupa klik "OK" ya!!, perhatikan gambar di bawah ini.

3. Halaman akan berpindah ke workpage. perhatikan 4 kolom workpage, dimulai dari kiri disana ada "Pallete" || "Viewer" || "Components" || Properties , temen-temen harus memahami dulu 4 kolom ini ya, saya kasih waktu 15 menit untuk langkah selanjutnya, hehehe. perhatikan gambar di bawah ini.

4. Singkat cerita. Pallete adalah bahan untuk aplikasi, Viewer adalah bagian penampil bahan dari Pallete, Components adalah naman bahan yang ada di Pallete, dan Properties adalah tempat setting bahan dari Pallete yang telah dimasukkan ke ke Viewer. Kalau masih bingung, kopinya diminum dulu

5. Masukkan kolom yang ada di Pallete ke Viewer, 

• yang pertama adalah kolom Nama Aplikasi, 
• yang kedua adalah kolom Nama Suhu, 
• yang ketiga adalah kolom Nilai Suhu, 
• yang ketiga adalah kolom Nama Kelembaban, 
• yang kelima adalah kolom Nilai Kelembaban
• dan yang ke 6 adalah "KOLOM PANCING" hehehe, just kidding
• Perhatikan gambar dibawah ini.

Kolom yang pertama lebarnya "Fill Parent" dan tingginya "20%"

Kolom ke 2 sampai ke 5 memiliki tinggi "15%" dan lebar "Fill Parent"

6. Masukkan Label ke tiap kolom dan ubah namanya melalui bagian "Properties" perhatikan gambar dibawah ini.

Sesuaikan semuanya ya, jangan takut salah, nanti kalau sudah jadi, yang jelek kayak gambar di bawah ini.

Perhatikan 2 kotak merah, ada kolom tambahan untuk meletakkan label satuan nilai suhu dan, kelembaban, silahkan disetting semanis mungkin, yaaah pokok jadi gitu aja, ntar dilatih sendiri untuk memperindah tampilan, mungkin gambar di bawah ini bisa dijadikan referensi.

7. Pindah ke bagian "Components" Rename Label nilai suhu dan kelembaban menjadi "Suhu" dan "Kelembaban", perhatikan gambar di bawah ini.

8. Langkah terkahir dari Layout adalah menambahkan "Firebase" kedalam "Viewer", perhatikan gambar dibawah ini. letaknya ada di bagian "Pallete" > "Experimental".

9. Setelah sudah selesai membuat layout, maka temen-temen sudah bisa masuk ke Blok Programming, cari dan klik "Blocks" di sebelah kanan atas "Workpage". perhatikan gambar di bawah ini. 

10. Perhatikan pemasangan puzzle dibawah ini agar tidak ada yang terlewat

Hasil pemasangan puzzel pertama sudah selesai, lanjut ke pembuatan puzzle selanjutnya

Sekarang sudah dapat 2 puzzle secara langsung, semua puzzle sudah ada tutorialnya secara urut ya temen-temen, apabila ada yang kurang jelas bisa ditanyakan di kolom komentar

Proses pembuatan aplikasi sudah 90% jadi, tinggal memasukkan API key dan Host Firebase, perhatikan gambar dibawah ini.

kembali ke workpage bagian "Designer", lihat gambar di bawah ini

Kemudian klik Firebase di bagian "Viewer" perhatikan gambar di bawah ini.

Pergi ke bagian "Properties" dan lihat kolom-kolom yang harus diisi menggunakan data dari Firebase, perhatikan gambar di bawah ini.

Naaah, bagian itu lah yang paling penting dan wajib diisi, sekarang kita harus pergi ke webnya Firebase, jangan lupa kopinya di minum dulu.

Tutorial Membuat Database Sensor di Firebase

1. Buka webnya seperti saat temen-temen mendaftar, atau klik disini. maka akan muncul halaman seperti pada gambar di bawah ini.

2. Langsung klik "Tambahkan Proyek" maka akn muncul pop up seperti gambar di bawah ini. Isi Nama aplikasi > scroll ke bawah > jangan lupa centang persetujuan > dan klik "Buat Proyek"

3. Klik "Lanjutkan" maka temen-temen akan dibawa ke dalam sebuah halaman "Overview", scrol kebawah dan klik bagian "Database", perhatikan gambar di bawah ini.

4. Setelah di klik, amak temen-temen akan masuk ke halaman baru dan klik "Buat Database", perhatikan gambar di bawah ini.

5. Setelah selesai maka akan muncul halaman  "Database", perhatikan gambar di bawah ini. klik menu yang berada di dalam kotak warna merah dan pilih "Realtime Database"

6. Pada halaman "Realtime Database", silahkan copy alamat database yang berada di dalam kotak berwarna merah > ke "Porperties" App Inventor dalam kolom "Firbase" bagian "Firebase URL"
perhatikan gambar di bawah ini.

7. Untuk mengisi kolom "FirebaseToken" silahkan kembali ke halaman Firebase Database, klik menu dengan logo "Roda Gergigi" di sebelah kanan tulisan "Project Overview" yang berada di dalam kotak berwarna merah, perhatikan gambar di bawah ini.

8. Maka akan muncul halaman "Database Secret", masuk ke bagian "Akun Layanan" > Pilih "Rahasia Database" > disana terdapat kode yang belum di tampilkan, silahkan tampilkan dengan klik bagian "Tampilkan" perhatikan gambar di bawah ini.

9. Copy kode tersebut dan masukkan ke dalam kolom "Firebase" bagian "FirebaseToken" di App Inventor, perhatikan gambar di bawah ini. Owh iya jangan LUPA untuk MENGOSONGKAN kolom "Project Bucket"

Alhamdulillah sekarang sudah selesai bagian sulitnya, ayo masuk ke bagian mudahnya.

Tutorial Mengirim Data ESP32 ke Firebase Database

1. Siapkan library Firebase untuk IDE, klik disini untuk download. atau kunjungi GITHUB, dan siapkan Library untuk sensor suhu DHT11, klik untuk download library DHT11

2. Setelah selesai di download silahkan extract dan masukkan folder hasil extract ke My Documents > Arduino > Libraries, selanjutnya buka aplikasi Arduino IDE

3. Buatlah kode program seperti di bawah ini.

#include <WiFi.h>

#include <IOXhop_FirebaseESP32.h>

#include "DHT.h"

#define DHTPIN 2

#define DHTTYPE DHT11

DHT dht(DHTPIN, DHTTYPE);

// Set these to run example.

#define FIREBASE_HOST "Ganti dengan URLFirebase yang sama persis dengan App Inventor"

#define FIREBASE_AUTH "Ganti dengan Token dari Firebase"

#define WIFI_SSID "Ganti dengan Nama Wifi Kalian"

#define WIFI_PASSWORD "Ganti dengan Password WiFi kalian"

void setup() {

  Serial.begin(9600);

  Serial.println("DHT11 test!");

  dht.begin();

  // connect to wifi.

  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);

  Serial.print("connecting");

  while (WiFi.status() != WL_CONNECTED) {

    Serial.print(".");

    delay(500);

  }

  Serial.println();

  Serial.print("connected: ");

  Serial.println(WiFi.localIP());

  

  Firebase.begin(FIREBASE_HOST, FIREBASE_AUTH);

}

int n = 0;

void loop() {

  //Baca sensor suhu dan kelembaban

  delay(2000);

  float h = dht.readHumidity();

  float t = dht.readTemperature();

    if (isnan(h) || isnan(t)) {

    Serial.println("Failed to read from DHT sensor!");

    return;

  }

  Serial.print("Humidity: ");

  Serial.print(h);

  Serial.print(" %\t");

  Serial.print("Temperature: ");

  Serial.print(t);

  Serial.println(" *C ");

  

  // set value

  Firebase.setFloat("suhu", t);

  // handle error

  if (Firebase.failed()) {

      Serial.print("setting /number failed:");

      Serial.println(Firebase.error());  

      return;

  }

  delay(1000);

  

  Firebase.setFloat("kelembaban", h);

  // handle error

  if (Firebase.failed()) {

      Serial.print("setting /number failed:");

      Serial.println(Firebase.error());  

      return;

  }

  Serial.println ("Data Suhu dan Kelembaban Sukses Terkirim");

  delay(1000);

}

Setelah selesai membuat kode program seperti diatas, JANGAN LUPA untuk memasukkan URL/Host, kode AUTH TOKEN, NAMA WIFI, dan PASSWORD WIFI dengan benar. setelah itu upload ke board ESP32.

Rangkaian ESP32 dan Sensor Suhu Kelembaban DHT11

Uji Coba Aplikasi dan Melihat File yang Telah Terkirim ke Firebase Database

1. Buka halaman "Firebase Database"

2. lihat dan pastikan data terkirim, hasil data terkirim akan nampak seperti gambar di bawah ini.

Uji coba aplikasi bisa dilakukan dengan langsung menginstalnya ke smartphone, atau menggunakan aplikasi MIT AI2 Companion, fungsi aplikasi ini adalah sebagai emulator, sehingga temen2 bisa melakukan perbaikan aplikasi apabila terdapat kesalahan, cara menghubungkan aplikasi MIT AI2 Companion ke web App Inventor adalah sebagai berikut :

1. Buka web App Inventor tadi yang digunakan untuk membuat aplikasi, pilih menu "Connect" dan pilih "AI Companion" maka akan muncul barcode, perhatikan gambar di bawah ini.

2. Buka aplikasi MIT AI2 Companio di Smartphone lalu klik tombol "Scan QR Code" atau langsung menulis kode nya, perhatikan gambar di bawah ini

3. Tunggu beberapa detik maka smartphone temen-temen akan terhubung dan menjadi Emulator aplikasi yang sedang dibuat. setelah sukses, maka secara otomatis data akan berubah mengikuti sensor suhu, perhatikan screenshot Serial Monitor dan aplikasinya.

Hasil uji coba dengan perbaikan tampilan

temen - temen bisa mendownload aplikasinya disini atau kalau mau oprek aplikasinya nanti tinggal di upload ke webnya App Inventor klik disini cara nya perhatikan gambar di bawah ini.

Terimakasih sudah membaca artikel dari Tutorialiot.com Semoga sukses.....