Membaca Database Firebase dan Menampilkannya di Aplikasi Android

Membaca Database Firebase dan Menampilkannya di Aplikasi Android

Pada 2 tulisan sebelumnya kita sudah membahas tentang mengukur suhu ruangan dengan DHT 11 dan mengirimkan data hasil pembacaan sensor ke firebase, maka pada tulisan ini saya akan menyambung tulisan lagi untuk melengkapi project ini dengan menampilkan data yang tersimpan di firebase ke aplikasi android yang kita buat sendiri.

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 Kodular
Tampilan Block Tab pada Kodular

Memulai Kodular

Untuk mulai menggunakan situs aplikasi kodular, ikutilah langkah-langkah berikut ini:

1. Buka browser dan ketikkan https://www.kodular.io/ lalu klik tombol “Create Apps”

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.

Project aia

Demikianlah Membaca Database Firebase dan Menampilkannya di Aplikasi Android dengan menggunakan kodular, semoga tulisan ini bermanfaat. Sampai jumpa pada tulisan-tulisan berikutnya

Mengirim data sensor DHT11 dari ESP8266 ke firebase

Mengirim data sensor DHT11 dari ESP8266 ke firebase

Sebelumnya kita telah berhasil Mengukur Suhu dan Kelembaban Ruangan dengan menggunakan Sensor DHT11 dan ESP8266 (Part 1). Sekarang kita lanjutkan dengan tahapan berikutnya yaitu mengirim data sensor DHT11 dari ESP8266 ke firebase.

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:

Tulisan ini merupakan tulisan ke -2 dari 3 bagian yang tersedia dengan judul Mengirim data sensor DHT11 dari ESP8266 firebase. Langsung saja, berikut ini tutorialnya.

Google Firebase

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.

Menambahkan Firebase ke Sketch DHT11

Buka kembali sketch/program DHT 11 yang pernah dibuat sebelumnya pada tulisan sebelumnya di Mengukur Suhu dan Kelembaban Ruangan dengan menggunakan Sensor DHT11 dan ESP8266.

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

#include "DHT.h"
#include <ESP8266WiFi.h>
#define WIFI_SSID "nama_wifi" // isikan nama 
#define WIFI_PASSWORD "password_wifi"

Berikutnya, tambahkan library firebase dan buatah variabel untuk menyimpan data API key dan URL database dari firebase kita:

#include <Firebase_ESP_Client.h>
#include "addons/TokenHelper.h"
#include "addons/RTDBHelper.h"
#define API_KEY "API_dari_firebase"
#define DATABASE_URL "link_realtime_database"

Untuk mendapatkan API key, kita harus membuka firebase terlebih dahulu lalu buka project settings. Perhatikan gambar berikut:

Sedangkan link database bisa di copy dari menu Realtime Database

Langkah berikutnya adalah membuat firebase data objectdengan mengetikkan:

FirebaseData fbdo;
FirebaseAuth auth;
FirebaseConfig config;
unsigned long sendDataPrevMillis = 0;
bool signupOK = false;

pada void setup() tambahkan:

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

Terakhir, pada void loop tambahkan:

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

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 Firebase
Tampilan 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

Mengukur Suhu dan Kelembaban Ruangan dengan menggunakan Sensor DHT11 dan ESP8266 (Part 1)

Mengukur Suhu dan Kelembaban Ruangan dengan menggunakan Sensor DHT11 dan ESP8266 (Part 1)

Setelah berhasil melakukan Pengukuran Suhu dan Kelembaban dengan DHT 11 dan Arduino, kali ini kita akan mencoba untuk melakukan hal yang sama dengan mikrokontroler NodeMCU ESP8266.

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:

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 ESP82661 Buah
Sensor DHT111 Buah
Kabel JumperSecukupnya

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:

#include "DHT.h"

#define DHTPIN 4    
#define DHTTYPE DHT11   
DHT dht(DHTPIN, DHTTYPE);

void setup() {
  Serial.begin(115200);
  dht.begin();
}

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

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.

Ok, segitu aja tulisan untuk bagian pertama ini, kita lanjut ke bagian ke-2 yaitu : Mengirim data sensor DHT11 dari ESP8266 firebase.
Sekian dan terima kasih

Pulse Width Modulation (PWM)

Pulse Width Modulation (PWM)

Apa itu PWM?

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 cycle
50% 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()

Analog dan Digital

Analog dan Digital

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.

Mengontrol Output pada NodeMCU ESP8266 Dengan Web Server

Mengontrol Output pada NodeMCU ESP8266 Dengan Web Server

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:

Skema NodeMCU webserver dengan Breadboard
NodeMCU ESP8266LED
D0Anode (+)
GNDCathode (-)

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:

http://arduino.esp8266.com/stable/package_esp8266com_index.json

Lalu Klik OK.

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

Ketikkan sketch dibawah ini:

#include <ESP8266WiFi.h>
const char* ssid     = "Wifi_saya";
const char* password = "1234567890";

WiFiServer server(80);

String header;

String outputState = "off";

const int ledPin = 5;

unsigned long currentTime = millis();
unsigned long previousTime = 0; 
const long timeoutTime = 2000;

void setup() {
  Serial.begin(115200);
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop(){
  WiFiClient client = server.available();   

  if (client) {                             
    Serial.println("New Client.");          
    String currentLine = "";                
    currentTime = millis();
    previousTime = currentTime;
    while (client.connected() && currentTime - previousTime <= timeoutTime) { 
      currentTime = millis();         
      if (client.available()) {             
        char c = client.read();             
        Serial.write(c);                    
        header += c;
        if (c == '\n') {                    
          if (currentLine.length() == 0) {
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();
            
            if (header.indexOf("GET /5/on") >= 0) {
              Serial.println("GPIO 5 on");
              outputState = "on";
              digitalWrite(ledPin, HIGH);
            } else if (header.indexOf("GET /5/off") >= 0) {
              Serial.println("GPIO 5 off");
              outputState = "off";
              digitalWrite(ledPin, LOW);
            } 
            
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\">");
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button { background-color: #B0DAFF; border: none; color: white; padding: 16px 40px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #FEFF86;}</style></head>");
            
            client.println("<body><h1>NodeMCU Webserver</h1>");
            
            client.println("<p>GPIO 5 - State " + outputState + "</p>");
            if (outputState=="off") {
              client.println("<p><a href=\"/5/on\"><button class=\"button\">Hidupkan</button></a></p>");
            } else {
              client.println("<p><a href=\"/5/off\"><button class=\"button button2\">Matikan</button></a></p>");
            } 
               
            client.println("</body></html>");
            
            client.println();
            break;
          } else { 
            currentLine = "";
          }
        } else if (c != '\r') {  
          currentLine += c;      
        }
      }
    }
    header = "";
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

Meng-upload Sketch / program ke NodeMCU

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.