Membuat Web Server dengan NodeMCU ESP8266 (dengan penjelasan lengkap)

Pada artikel sebelumnya, kita sudah belajar mengenai bagaimana cara memulai pengembangan dengan NodeMCU untuk pertama kalinya. Mulai dari penginstalan IDE Arduino, driver, dan tes upload kode. (Baca: Cara Memasang NodeMCU pada Arduino IDE)



Sesuai yang kita tahu, perangkat mikrokontroller NodeMCU memiliki fitur WiFi berdasarkan modul ESP8266. Oleh karena itu, kita bisa menggunakannya untuk keperluan web server.

Bagaimana maksudnya?

Dengan menggunakan Web Server, NodeMCU dapat berinteraksi dengan perangkat-perangkat jaringan seperti, android, laptop, tablet dan lain-lain. Interaksi tersebut dapat berupa kontrol terhadap pin pin keluaran dan masukan NodeMCU dari perangkat jaringan tadi. Pada pengaplikasiannya, kita bisa  mengontrol lampu menggunakan smartphone misalnya, menerima data sensor kelembaban dari kebun yang sudah dipasang NodeMCU dan lain sebagainya.

Singkatnya, dengan mempelajari WebServer pada mikrokontroller, kita sudah masuk gerbang selangkah menuju Internet of Things, dimana konsepnya adalah menghubungkan barang apapun (misalnya kebun) dengan perangkat anda melalui Internet atau jaringan lokal.

Ok, mari kita masuk ke bagian pembelajaran. Perlu di ingat, setiap langkah saya berikan penjelasan dengan alur yang runtut dan sejelas mungkin agar anda bisa memahami dengan baik.

Daftar isi:

---

• Persiapan
• Menghubungkan dengan WiFi
• Membuat Server
• Menangani request client
• Membuat halaman web untuk request
• Testing

Persiapan

Skenario yang akan kita terapkan adalah mengontrol 4 pin dari NodeMCU (D0, D1, D2, D3) dari web server yang akan kita akses menggunakan perangkat client seperti laptop melalui WiFi. Pada 4 pin tersebut, masing-masing diberikan 1 buah LED untuk dihidupkan atau dimatikan sesuai dengan pin pada NodeMCU.

•  Siapkan NodeMCU, atur wiring seperti gambar dibawah ini.

 

Dibawah adalah gambar yang ada di dunia nyata. Wiring  yang saya lakukan pada gambar dibawah, adalah saya berikan jumper dari D0 sampai D8, tapi yang akan kita gunakan hanyalah 4 pin saja D0 sampai D3, Tidak masalah jika anda memberikan jumper dari D0 sampai D3.

• Hubungkan dengan komputer menggunakan kabel usb.

Menghubungkan dengan WiFi

Untuk menghubungkan dengan WiFi, dan karena NodeMCU WiFi dibuat berdasarkan ESP8266, kita menggunakan library ESP8266,

• Pertama, buka Arduino IDE. pada text editor, kita diberikan 2 fungsi yaitu setup() dan loop(). Adapun kode didalam setup() hanya akan dijalankan pada saat mikrokontroller dihidupkan dan loop() dijalankan setelahnya berulang-ulang kali

• Sebelum itu, atur pin D0, D1, D2, D3  ke mode OUTPUT. karena kita akan mengontrol pin tersebut

• Kemudian, kita akan import library ESP8266WiFi.h dan memberikan nama ssid wifi dan password kedalam variable char (ssid & password)

#include <ESP8266WiFi.h>

const char* ssid = "WnNet";
const char* password = "qweasd312";
void setup() {
  // Setting Mode pin 
  pinMode(D0, OUTPUT);
  pinMode(D1, OUTPUT);
  pinMode(D2, OUTPUT);
  pinMode(D3, OUTPUT);
}
void loop() {
}

• Pada setup() kita gunakan komunikasi serial untuk menampilkan teks pada console guna mempermudah pengembangan dengan cara menambahkan Serial.begin(9600)
• Untuk menghubungkan dengan WiFi, kita gunakan perintah WiFi.begin(namawifi, password) yang disediakan oleh library ESP8266WiFi.h. Ganti nilai pada variabel ssid dan passwordnya sesuai dengan wifi anda.

#include <ESP8266WiFi.h>

const char* ssid = "WnNet";
const char* password = "qweasd312";

void setup() {
  // Setting Mode pin 
  pinMode(D0, OUTPUT);
  pinMode(D1, OUTPUT);
  pinMode(D2, OUTPUT);
  pinMode(D3, OUTPUT);

  Serial.begin(9600);
  WiFi.begin(ssid, password);
  while(WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi terhubung ");
  Serial.print("SSID: ");
  Serial.println(WiFi.SSID());
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());
}
void loop() {
}

Penjelasan

1. setelah instruksi WiFi.begin(),  dilakukan perulangan selama wifi belum terhubung dimana setiap perulangannya dicetak simbol . yang menandakan nodemcu sedang berusaha untuk terhubung.
2. Dibawahnya, terdapat kode untuk menampilkan nama ssid wifi, dan ip addressnya. kode ini hanya akan berjalan jika wifi sudah terhubung (keluar dari perulangan while diatasnya)

• Kemudian, upload kode ke nodemcu. buka Serial window, jika terhubung maka tampak seperti gambar dibawah ini. Pada kasus saya, NodeMCU saya mendapatkan IP 192.168.1.10 hal ini mungkin berbeda dengan anda

Membuat server

Untuk membuat server, library yang akan digunakan adalah ESP8266WebServer.h 

• Import library ESP8266WebServer.h dan buat variabel objek dari class ESP8266WebServer. variabel objek ini yang akan kita gunakan untuk mengoperasikan server kita. 

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

ESP8266WebServer server(80) // variabel objek server 

const char* ssid = "WnNet";
const char* password = "qweasd312";

void setup() {
  // Setting Mode pin 
  pinMode(D0, OUTPUT);
  pinMode(D1, OUTPUT);
  pinMode(D2, OUTPUT);
  pinMode(D3, OUTPUT);

  // Koneksi WiFi
  Serial.begin(9600);
  WiFi.begin(ssid, password);
  while(WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi terhubung ");
  Serial.print("SSID: ");
  Serial.println(WiFi.SSID());
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());
}

void loop() {

}

Penjelasan

1. Pembuatan variabel objek ESP8266WebServer  dituliskan dengan format nama_variabel(port_server). Pada kode diatas adalah server(80)

• Membuat routing dan memulai server

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

ESP8266WebServer server(80) // variabel objek server

const char* ssid = "WnNet";
const char* password = "qweasd312";

void setup() {
  // Setting Mode pin 
  pinMode(D0, OUTPUT);
  pinMode(D1, OUTPUT);
  pinMode(D2, OUTPUT);
  pinMode(D3, OUTPUT);

  // Koneksi WiFi
  Serial.begin(9600);
  WiFi.begin(ssid, password);
  while(WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi terhubung ");
  Serial.print("SSID: ");
  Serial.println(WiFi.SSID());
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  // Kode bagian Server
  server.on("/setpin", HTTP_POST, setPin);
  server.begin();
  Serial.println("Server berjalan...");
}

void loop() {
  server.handleClient();
}

// Fungsi untuk menangani request /setpin
void setPin() {
}

Penjelasan

1. server.on(URI, method, fungsi). 
   perintah ini digunakan untuk mengarahkan datangnya request untuk diurusi oleh fungsi tertentu, adapun atribut nya seperti berikut
   
   URI       : sub alamat (misal: "/home", "/setpin")
   Method : metode pengiriman data (misal: HTTP_GET, HTTP_POST)
   fungsi    : adalah fungsi yang akan dijalankan saat uri diakses (mendapat request)
   
   server.on("/setpin", HTTP_POST, setPin); 
   berarti, jika ada yang mengakses 192.168.1.10/setpin , maka kode didalam fungsi setPin() akan dijalankan oleh NodeMCU
   (ingat, IP tersebut mungkin berbeda pada eksperimen anda)
2. Ingat juga, bahwa kode ini cukup dipanggil sekali, maka diletakkan didalam setup()
3. Setelah menuliskan pengaturan server, pada loop() dilakukan perintah handleClient() untuk menerima interaksi dari jaringan selama NodeMCU hidup.

Menangani request client

Pada langkah ini, kita sudah membuat koneksi wifi, membuat server dan memberikan routing pada server. jika ada yang mengakses http://ipaddress/setpin maka fungsi setPin() dijalankan didalam mikrokontroller.

Sesuai skenario diatas, 

1. jika client melakukan request lampu D0 untuk hidup, maka mikrokontroller akan melakukan digitalWrite(D0, HIGH)
2. jika client melakukan request lampu D1 untuk mati, maka mikrokontroller akan melakukannya
3. dan seterusnya

Pada skenario tersebut terdapat 2 yang akan dikirimkan melalui HTTP_POST yaitu: nama pin dan statusnya (hidup atau mati)

saya beri nama pin dan state

• Buat penerimaan data tersebut dan cek dulu apakah tidak kosong sebelum mengeksekusi

(Dibawah adalah keseluruhan kode nodemcu pada artikel ini)

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

ESP8266WebServer server(80) // variabel objek server

const char* ssid = "WnNet";
const char* password = "qweasd312";

void setup() {
  // Setting Mode pin 
  pinMode(D0, OUTPUT);
  pinMode(D1, OUTPUT);
  pinMode(D2, OUTPUT);
  pinMode(D3, OUTPUT);

  // Koneksi WiFi
  Serial.begin(9600);
  WiFi.begin(ssid, password);
  while(WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi terhubung ");
  Serial.print("SSID: ");
  Serial.println(WiFi.SSID());
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  // Kode bagian Server
  server.on("/setpin", HTTP_POST, setPin);
  server.begin();
  Serial.println("Server berjalan...");
}

void loop() {
  server.handleClient();
}

// Fungsi untuk menangani request /setpin
void setPin() {
  if (server.hasArg("pin") && server.hasArg("state")) {
    int statusPin = server.arg("state").toInt();

    // Konversi nama pin ke alamat pin
    String namaPin = server.arg("pin");
    static const uint8_t pinAddress[] = {16,  5,  4,  0,  2, 14, 12, 13, 15,  3,  1};
    
    digitalWrite(pinAddress[namaPin.substring(1).toInt()], statusPin);
    server.send(200, "text/plain", "Perintah sudah dilakukan");
  }
  else {
    server.send(200, "text/plain", "Format perintah salah / tidak ada");
  }
}

Penjelasan

1. server.hasArg(namadata)
   digunakan untuk mengecek apakah data post bernama tertentu (sesuai dengan parameter) ada atau tidak
2. server.arg(namadata)
   digunakan untuk mengambil data tersebut. Ingat, keluaran dari server.arg adalah String sehingga kita perlu melakukan konversi
3. pada pengambilan statuspin dilakukan konversi ke integer menggunakan .toInt(), karena digitalWrite membutuhkan parameter integer
4. berbeda pada penentuan nama pin, sayangnya pada mikrokontroller NodeMCU nama pin tidak sama dengan alamat pin (misalnya D0 sebenarnya berada pada GPIO 16) sementara digitalWrite membutuhkan nilai GPIO, oleh karena itu kita perlu membuat konversi lagi. konversi tersebut menggunakan array, jika request pin bernilai D0 maka huruf D dihilangkan 0 digunakan untuk mengakses array (maka Pin D0 = 16)  

• Pada langkah ini, sisi pemrograman di NodeMCU sudah selesai. Anda bisa klik upload ke NodeMCU.

Membuat halaman web untuk request

Sisi server (NodeMCU) sudah selesai dan siap menerima request dari client. Adapun pada client, kita akan membuat web sederhana yang dapat mengirimkan request ke NodeMCU. web sederhana ini ditempatkan pada perangkat client seperti laptop jadi namanya adalah web client

Ingat, halaman ini diletakkan pada laptop / komputer yang satu jaringan dengan NodeMCU. Bukan diletakkan di NodeMCU. NodeMCU hanya bertindak sebagai WebServer yang menerima data via HTTP

Pada web client, kita akan menggunakan ajax untuk mengirimkan request pada server tanpa harus mereload halaman dan di sisi desain halaman, kita akan menggunakan bootstrap.

Namun saya menambahkan satu lagi tambahan file css. Karena bootstrap tidak memiliki toggle button maka saya menggunakan bootstrap-toggle.css

Jika anda belum tahu toggle button, silahkan lihat animasi dibawah

untuk lebih mudahnya, saya sudah mengumpulkan file-file tersebut pada link dibawah untuk bisa anda download

(Google Drive) ~688 KB

• Setelah anda download file tersebut, extract kedalam 1 folder, 
• buat file html dengan nama terserah anda sejajar dengan folder yang baru saja anda download (lihat gambar dibawah)

• Buka file html tersebut ke dalam software text editor anda (Saya menggunakan Sublime Text 3) isi kode seperti berikut.

<!doctype html>
<html>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-toggle.min.css">
    <link rel="stylesheet" href="css/style.css">

    <title>Hello, world!</title>
</head>
<body>

    <div class="container mt-4">
        <div class="row">
            <div class="col-12">
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">http://</span>
                        </div>
                        <input type="text" id="host" class="form-control" value="192.168.1.10">
                    </div>
                </div>
                <div class="form-group justify-content-center d-flex">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input pin" type="checkbox" data-toggle="toggle" data-on="D0 On" data-off="D0 OFF" value="D0">
                        <label class="form-check-label"></label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input pin" type="checkbox" data-toggle="toggle" data-on="D1 On" data-off="D1 OFF" value="D1">
                        <label class="form-check-label"></label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input pin" type="checkbox" data-toggle="toggle" data-on="D2 On" data-off="D2 OFF" value="D2">
                        <label class="form-check-label"></label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input pin" type="checkbox" data-toggle="toggle" data-on="D3 On" data-off="D3 OFF" value="D3">
                        <label class="form-check-label"></label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-toggle.min.js"></script>
    <script type="text/javascript">

        $(".pin").change(function(e) {
            host = "http://" + $("#host").val() + "/";
            pin = $(this).val();
            state = this.checked ? 1 : 0;

            var data = new FormData();
            data.append('pin', pin);
            data.append('state', state);

            $.ajax({
                url: host + 'setpin',
                type: 'POST',
                dataType: 'html',
                data: data,
                cache: false,
                contentType: false,
                processData: false,
            })
            .always(function() {
            });

        });
    </script>
</body>
</html>

Penjelasan

1. Untuk file web kali ini hanya terdiri dari input checkbox dan event jquery jika checkbox di rubah isinya. Jika event tersebut terjadi maka dilakukan ajax request ke ipaddress host dengan membawa FormData yang berisi pin dan state
2. Ganti saja IP Address inputan host dengan  IP address yang nodemcu anda dapatkan. (pada kasus saya, dapat 192.168.1.10)

• Buka file html tersebut, tampilannya seperti gambar dibawah

Testing

• Pastikan kode untuk NodeMCU sudah diupload ke mikrokontroller
• Cek di serial monitor, pastikan sudah terkoneksi WiFi dan mendapatkan IP Address

• Buka file html pada laptop / komputer anda. ketikkan IP Address anda sesuai dengan yang muncul pada serial monitor
  Pastikan komputer / laptop terhubung dengan jaringan yang sama
• Coba hidupkan atau matikan pada web html anda, apakah lampu LED merespon.

Pada akhir tutorial artikel ini, kita sudah dapat mengontrol perangkat NodeMCU ESP8266 menggunakan web client. Adapun web client, adalah web lokal yang tersimpan pada client (komputer/laptop), web client tersebut dapat berinteraksi dengan nodemcu seperti mengirim dan menerima data.

Pada kedepannya, konsep ini dapat dikembangkan lagi menjadi aplikasi desktop maupun aplikasi android dan iOS. Untuk aplikasi desktop anda dapat gunakan ElectronJS untuk membangun aplikasi desktop menggunakan pemrograman web biasa. Bahkan anda bisa saja gunakan script web client diatas dan terapkan framework ElectronJS maka web lokal tersebut berubah menjadi aplikasi desktop windows.

Begitupula dengan android, anda dapat gunakan Android Studio untuk membuat aplikasi sederhana, yang mengirimkan dan menerima data berupa HTTP_POST. Anda dapat gunakan HttpUrlConnection (Bawaan) atau library OkHTTP atau library Retrofit
(intinya dapat berinteraksi via HTTP_POST didalam suatu jaringan)

Saya akan posting tutorial lagi untuk itu..
Terima kasih telah membaca =D