LABORATORIUM ROBOTIKA

UNIVERSITAS GUNADARMA

Modul Praktikum Robotika

BAB III: Robot Web & Control Device Melalui Web

1 TUJUAN
▪ Pengenalan Mikrokontroler ESP8266 NodeMCU V3 dan WeMos
D1/R2
▪ Pengenalan WebSocket
▪ Pengenalan SPIFFS (LittleFS)
▪ Mengetahui cara kerja kendali PWM menggunakan web server
(WebSocket) melalui NodeMCU V3 atau WeMos D1 R1
▪ Mengimplementasikan NodeMCU V3 atau WeMos D1 R1 dalam
mengontrol robot melalui web server (WebSocket)

2 PERSIAPAN
▪ Aplikasi Proteus dan Arduino IDE
▪ Library Board Manager ESP8266
▪ Library Arduino JSON
▪ Library ESPAsyncWebServer dan ESPAsyncTCP
▪ Plugin LittleFS

3 PERALATAN PRAKTIKUM
▪ NodeMCU V3 atau WeMos D1 R1
▪ Micro USB
▪ Motor Servo
▪ Protoboard
▪ Skematik Rangkaian
▪ DC Supply 5V (Adaptor / Baterai)

P r a k t i k u m R o b o t i k a | 53
3.1 Pengenal Robot Web
Robot web merupakan robot yang dikendalikan menggunakan web yang
melalui media transmisi wifi terhubung ke suatu jaringan untuk mengendalikan
suatu device. Robot web dikendalikan menggunakan HTML sebagai kontrol. Untuk
board yang digunakan pada device robot ini adalah board WeMos D1 R2 / WeMos
D1 R1 / NodeMCU V3.

3.2 Komponen Robot Web

Berikut penjelasan komponen-komponen yang digunakan untuk
membangun Robot Web sederhana, diantaranya adalah Mikrokontroler
(NodeMCU/WeMos D1R1), Motor Servo, Adaptor 5-12V, dan Kabel Jumper.

3.2.1 NodeMCU V3 (ESP8266)

NodeMCU adalah Mikrokontroler yang sudah dilengkapi dengan module
WIFI ESP8266 didalamnya, Selain itu NodeMCU juga terdapat memori untuk
menyimpan program, pin digital I/O, pin analog input serta pin dengan fungsi
khusus seperti serial UART, SPI, I2C, dll. Sehingga NodeMCU sudah menyerupai
Arduino, namun memiliki kemampuan terhubung dengan WiFi, sehingga sangat
cocok untuk proyek IoT.
NodeMCU menggunakan bahasa pemprograman Lua yang merupakan
package dari ESP8266. Bahasa Lua memiliki logika dan susunan pemorgaman yang
sama dengan C dengan perbedaan beberapa syntax. Jika menggunakan bahasa Lua
maka dapat menggunakan tool Lua loader maupun Lua uploder. Selain dengan
bahasa Lua, NodeMCU juga mendukung aplikasi Arduino IDE dengan melakukan
sedikit perubahan pada board manager Arduino IDE.

Gambar 3.1 Perkembangan NodeMCU

P r a k t i k u m R o b o t i k a | 54
 Gambar 3.2 Konfigurasi Pin NodeMCU V3

3.2.2 Expansion Board NodeMCU V3 (ESP8266)

Expansion board ini adalah board breakout untuk pengembangan WiFi
ESP8266 NodeMcu V3 Lua CH340. Semua I/O port mudah diakses melalui header
pin 2.54mm untuk pembuatan prototipe yang mudah. Expansion board ini memiliki
input daya 5~12V melalui daya 5,5mm dari adaptor steker dinding dan memiliki
output 3,3V-5V.
Spesifikasi:
- Input Voltage: 6V – 24V DC
- PCB Thickness: 1.6mm
- NodeMCU Pin Distance between Sides: ~28.0mm
- Pin Pitch: 2.54mm (0.1in)
- Board Dimensions: 60.0mm x 60.0mm x 15.0mm (L x W x H)
- Weight: 22.5g

P r a k t i k u m R o b o t i k a | 55
 Tabel 3.1 Konfigurasi Pin NodeMCU
Pin Keterangan
VIN Tegangan masuk 5V
MicroUSB Socket Catu daya 3.3V
GND Ground
RX Receiver
TX Transmitter
RST Pin untuk mereset/restart NodeMCU
ADC Analog Digital Converter.
EN Enable chip
MISO Slave Output dan Main Input
MOSI Main Output dan Slave Input
SCLK Clock
GPIO Pin Input dan Output
Digunakan untuk membangunkan chip dari
WAKE
deep-sleep.
CS Chip Selection

3.2.3 WeMos D1 R1 (ESP8266)

Wemos D1 R2 merupakan board yang dikembangkan berdasarkan ESP
8266 yang merupakan IC komunikasi Wi-Fi yang dirancang menyerupai Arduino
Uno, namun dari sisi spesifikasi, sebenarnya jauh lebih unggul Wemos D1 R2, salah
satunya dikarenakan inti dari Wemos D1 R1 adalah ESP8266EX yang memiliki
prosesor 32 bit. (Bandingkan dengan Arduino UNO, yang berintikan AVR 8 bit).
Board ini merupakan mikrokontroler mandiri yang dapat dengan mudah diprogram
menggunakan Arduino IDE.
Kelebihan Wemos D1 R2 Board diantaranya adalah selain bersifat open
source, kompatibel dengan Arduino, dapat diprogram dengan menggunakan
software Arduino IDE, pinout yang kompatibel dengan Arduino UNO, bentuk dan
pinout standar seperti Arduino UNO, Wemos dapat standalone tanpa terhubung
dengan mikrokontroler lain, memiliki CPU dengan frekuensi tinggi dengan 4
prosesor 32-bit berkecepatan 80 MHz, sehingga dapat mengeksekusi program lebih

P r a k t i k u m R o b o t i k a | 56
cepat dari Arduino yang hanya menggunakan prosesor 8-bit, mendukung High
Level Language, dapat diprogram juga menggunakan bahasa Phyton dan Lua.

Gambar 3.3 Konfigurasi WeMos D1

Tabel 3.2 Konfigurasi Pin WeMos D1 R1

Pin Nama Fungsi Pin
D0-D8 GPIO Input/Output
A0 ADC 0 Analog Input (ADC)
GND Ground Ground
Rxd, UART Komunikasi UART
Txd
RST RST Reset
5V Input volt Adaptor
3.3V, 5V Output Volt VCC 3.3V, 5 V

P r a k t i k u m R o b o t i k a | 57
 Tabel 3.3 Perbedaan Arduino Uno R3 dan ESP8266

3.2.4 Motor Servo

Motor servo adalah sebuah perangkat atau aktuator putar (motor) yang
dirancang dengan sistem kontrol umpan balik loop tertutup (servo), sehingga dapat
diatur untuk menentukan dan memastikan posisi sudut dari poros output motor.
motor servo merupakan perangkat yang terdiri dari motor DC, serangkaian gear,
rangkaian control dan potensiometer. Serangkaian gear yang melekat pada poros
motor DC akan memperlambat putaran poros dan meningkatkan torsi motor servo,
sedangkan potensiometer dengan perubahan resistansinya saat motor berputar
berfungsi sebagai penentu batas posisi putaran poros motor servo.
Penggunaan sistem kontrol loop tertutup pada motor servo berguna untuk
mengontrol gerakan dan posisi akhir dari poros motor servo. Contoh sederhana
beberapa aplikasi lain dari sistem kontrol loop tertutup, seperti penyetelan suhu
pada AC, kulkas,setrika dan lain sebagainya.

Gambar 3.4 Motor Servo

P r a k t i k u m R o b o t i k a | 58
3.2.5 Hubungan Antara Servo dengan PWM
Sebuah motor servo dikendalikan dengan memberikan sinyal modulasi lebar
pulsa (PWM) melalui kabel kontrol. Lebar pulsa sinyal kontrol yang diberikan akan
menentukan posisi sudut putaran dari poros motor servo. Sebagai contoh, lebar
pulsa dengan waktu 1,5 ms (mili detik) akan memutar poros motor servo ke posisi
sudut 90⁰. Bila pulsa lebih pendek dari 1,5 ms maka akan berputar ke arah posisi 0⁰
atau ke kiri (berlawanan dengan arah jarum jam), sedangkan bila pulsa yang
diberikan lebih lama dari 1,5 ms maka poros motor servo akan berputar ke arah
posisi 180⁰ atau ke kanan (searah jarum jam). Lebih jelasnya perhatikan gambar
dibawah ini

Gambar 3.5 Kontrol Motor Servo

Ketika lebar pulsa kendali telah diberikan, maka poros motor servo akan
bergerakatau berputar ke posisi yang telah diperintahkan, dan berhenti pada posisi
tersebut dan akan tetap bertahan pada posisi tersebut. Jika ada kekuatan eksternal
yang mencobamemutar atau mengubah posisi tersebut, maka motor servo akan
mencoba menahan atau melawan dengan besarnya kekuatan torsi yang dimilikinya
(rating torsi servo).

Gambar 3.6 Pin Motor Servo

P r a k t i k u m R o b o t i k a | 59
 Tabel 3.4 Konfigurasi Pin Motor Servo
Pin Keterangan

Cokelat Ground

Merah VCC (+5V)

Orange Data (PWM)

3.3 Pengenalan WebSocket

WebSocket merupakan sebuah protokol modern website, tempat terjadinya
interaksi antar pengguna (http) tanpa harus me-refresh halaman tersebut.
WebSocket menggunakan protokol sendiri yang dipaparkan oleh IETF. WebSocket
juga memilliki API (Application Programming Interface) yang dapat digunakan
oleh aplikasi web untuk membuka-menutup hubungan dan mengirim-menerima
pesan yang disebut sebagai WebSocket API.
WebSocket akan bekerja ketika ada sentuhan atau dorongan (touch or push)
darisalah satu pengguna. WebSocket dibagi menjadi dua bagian, yaitu Server dan
Client. Dimana pada halaman Client merupakan halaman yang bisa dilihat oleh
pengguna, sedangkan pada bagian Server berfungsi untuk menerima dan melayani
data, khususnya untuk data baru.

Gambar 3.7 Tampilan Kontroler pada PC

3.3.1 Fungsi Websocket

WebSocket memiliki beberapa manfaat, diantaranya sebagai berikut:
1. Data yang diterima akan bersifat realtime.
2. Meminimalisir traffic yang tidak perlu dengan koneksi single.
3. Dapat melakukan streaming melalui proxy dan firewall.
4. Mendukung di semua jenis modern website, pergantian http ke websocket.

P r a k t i k u m R o b o t i k a | 60
3.3.2 Cara Kerja WebSocket
Berikut cara kerja WebSocket:
1. ESP meng-hosting Server web yang menampilkan halaman web dengan
sebuah slider.
2. Saat posisi baru slider ditetapkan, Client mengirimkan nomor slider dan
nilai slider ke Server melalui protokol WebSocket. Misalnya, jika Anda
mengatur slider ke posisi nomor 40 maka, Client akan mengirim pesan
bernilai 3s40 ke Server.

Gambar 3.8 Tampilan Project WebSocket

3. Server (ESP) menerima nomor slider serta nilai yang sesuai dan
menyesuaikan siklus kerja PWM pada MCU. Selain itu, Server juga
memberi tahu semua Client lain dengan nilai slider baru saat ini. Hal ini
memungkinkan untuk memperbarui semua Client hampir secara instan.

Gambar 3.9 Mekanisme WebSocket

P r a k t i k u m R o b o t i k a | 61
 4. ESP8266 mengeluarkan sinyal PWM dengan siklus kerja yang sesuai untuk
mengontrol kecerahan LED. Siklus kerja 0% berarti LED mati, siklus kerja
50% berarti LED redup, dan siklus kerja 100% berarti LED menyala terang.

Gambar 3.10 Mekanisme WebSocket

5. Setiap kali jendela web browser baru dibuka (saat Client baru terhubung),
Client akan mengirim pesan ke ESP8266 (juga melalui protokol
WebSocket) denganpesan getValues. Ketika mendapatkan pesan ini
ESP8266 akan mengirimkan nilai slider saat itu juga. Dengan cara ini, setiap
kali tab baru dibuka, halaman webselalu menunjukkan nilai saat itu juga
yang terus diperbarui (realtime).

Gambar 3.11 Komunikasi Client-Server

3.4 Pengenalan LittleFS (ESP8266)

LittleFS adalah sistem file ringan yang dibuat untuk mikrokontroler yang
memungkinkan pengaksesan memori flash seperti yang dilakukan pada sistem file
standar di komputer, namun lebih sederhana dan terbatas. Pada sistem ini dapat
melakukan pembacaan, penulisan, serta penghapusan file. Penggunaan LittleFS
pada board ESP8266 sangat berguna untuk.
- Membuat file konfiguras dengan pengaturan
- Meyimpanan data secara permanen

P r a k t i k u m R o b o t i k a | 62
 - Membuat file untuk menyimpan sejumlah kecil data daripada menggunakan
kartu microSD
- Menyimpan file HTML, CSS, dan JavaScript untuk membangun server web
- Menyimpan gambar-gambar dan ikon

Sebelumnya halaman HTML perlu diketik menjadi satu pada Arduino IDE
yang akan memakan banyak memori dan menyulitkan pembacaan kode. Dengan
LittleFS kode-kode halaman web (html, css, dan js) yang dibuat dapat
dikelompokkan berdasarkan jenisnya masing-masing ke dalam bentuk folder
sehingga dapat mengurangi error kode.

3.5 Instalasi Plugin dan Library

Berikut penjelasan mengenai proses instalasi setiap plugin/library yang
dibutuhkan untuk membuat Robot Web.

3.5.1 Board ESP8266

Proses instalasi library board ESP8266:
1. Pada Arduino IDE, buka tab File > Preferences.
2. Salin link berikut untuk menginstal library board ESP8266

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

pada kolom “Additional Boards Manager URLs” (Jika sudah terdapat

URL lain, gunakan tanda koma ( , ) untuk memisahkan setiap URL).
3. Buka Boards Manager pada tab Tools > Board > Boards Manager.
4. Ketikan “ESP8266” kemudian pilih “ESP8266 by ESP8266 Community”
lalu klik instal.
5. Tunggu beberapa saat sampai muncul tanda “INSTALLED” dan board
ESP8266 dapat diprogram pada Arduino IDE.

P r a k t i k u m R o b o t i k a | 63
3.5.2 Library Arduino JSON
Proses instalasi library Arduino JSON:
1. Pada Arduino IDE, buka tab Tools > Manage Libraries
2. Setelah Pop Up muncul, ketik “Arduino_JSON” pada kolom “Filter your
search...”
3. Pilih library yang dirancang oleh Arduino, klik instal.
4. Tunggu beberapa saat sampai muncul tanda “INSTALLED” dan library
dapat digunakan.

3.5.3 File-File Tambahan

Link berikut untuk mendownload file-file seperti skematik, library, model, dsb.
https://github.com/muropraktikum/Bab-3-Robot-Web
3.5.4 Library ESPAsyncWebServer dan ESPAsyncTCP
Proses instalasi library ESPAsyncWebServer dan ESPAsyncTCP:
1. Buka File-File Tambahan yang sudah didownload sebelumnya.
2. Pada Arduino IDE buka tab Sketch > Include Library > Add .zip Library.
3. Pilih library ESPAsyncWebServer dan ESPAsyncTCP yang terdapat
didalam folder File-File Tambahan
4. Tunggu sampai proses instalasi selesai, library siap digunakan.

3.5.5 Plugin LittleFS

Proses instalasi plugin LittleFS:
1. Buka File-File Tambahan yang sudah didownload sebelumnya.
2. Buka direktori Tools pada lokasi instalasi Arduino anda (Contoh:
D:\Arduino\tools) kemudian paste.
3. Ekstrak folder ESP8266LittleFS ke dalam folder Tools.

P r a k t i k u m R o b o t i k a | 64
 Gambar 3.13 Directory Instalasi LittleFS

4. Buka atau restart Arduino IDE (jika Arduino IDE dibuka saat menginstall
LittleFS)
5. Cek apakah sudah terdapat ESP8266 LittleFS Data Upload seperti gambar
dibawah ini (Arduino IDE > Tools > ESP8266 LittleFS Data Upload).

Gambar 3.14 Plugin LittleFS

6. Plugin LittleFS siap digunakan.

P r a k t i k u m R o b o t i k a | 65
 PERCOBAAN 3.1
PENYUSUNAN RANGKAIAN ROBOT WEB

Langkah Kerja:
Rangkailah Robot Web berdasarkan skematik dengan komponen yang
dimiliki.
Skematik Rangkaian
➢ NodeMCU V3

Gambar 3.15 Skematik dengan NodeMCU

➢ WeMos D1 R1

Gambar 3.16 Skematik dengan WeMos D1 R1

Output pin yang kalian gunakan :

P r a k t i k u m R o b o t i k a | 66
 PERCOBAAN 3.2
PEMROGRAMAN ARDUINO IDE ROBOT WEB

Langkah Kerja:
1. Pastikan robot telah terangkai sesuai dengan skematik yang diberikan
2. Hubungkan mikrokontroler dengan komputer menggunakan kabel MicroUSB
3. Buka aplikasi Arduino IDE
4. Ketikan program dibawah ini Program

Program

#include<ESP8266WiFi.h>
#include<ESPAsyncTCP.h>
#include<ESPAsyncWebServer.h>
#include "LittleFS.h"
#include <Arduino_JSON.h>
#include <Servo.h>

#define base_servo_pin D3
#define wifi_no_led D8

Servo base_servo;

// Ganti dengan nama serta password WiFi yang akan digunakan

const char* ssid = "WiFi yang Digunakan";
const char* password = "Password yang Digunakan";

// Membuat objek AsyncWebServer di port 80

AsyncWebServer server(80);

// Membuat objek AsyncWebSocket

AsyncWebSocket ws("/ws");

P r a k t i k u m R o b o t i k a | 67
// Menyiapkan variabel-variabel sudut servo
int base_servo_angle = 0;

String message = "";

String sliderValue1 = "0";

//Membuat objek JSONVar untuk menyimpan nilai slider

JSONVar sliderValues;

//Untuk menerima nilai slider

String getSliderValues(){
sliderValues["sliderValue1"] = String(sliderValue1);
String jsonString = JSON.stringify(sliderValues);
return jsonString;
}

// Inisialisasi LittleFS
void initFS(){
if (!LittleFS.begin()){
Serial.println("An error has occurred while mounting LittleFS");
}
else{
Serial.println("LittleFS mounted successfully");
}
}

// Inisialisasi WiFi
void initWiFi(){
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.print("Connecting to WiFi ..");
}

P r a k t i k u m R o b o t i k a | 68
void notifyClients(String sliderValues){
ws.textAll(sliderValues);
}

void handleWebSocketMessage(void *arg, uint8_t *data, size_t len){

AwsFrameInfo *info = (AwsFrameInfo*)arg;
if (info->final && info->index == 0 && info->len == len && info->opcode ==
WS_TEXT){
data[len] = 0;
message = (char*)data;

if (message.indexOf("1s") >= 0){

sliderValue1 = message.substring(2);
base_servo_angle = sliderValue1.toInt();
Serial.print(getSliderValues());
notifyClients(getSliderValues());
}
if (strcmp((char*)data, "getValues") == 0){
notifyClients(getSliderValues());
}
}
}

//Notifikasi ketika ada client yang terhubung

void onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client,
AwsEventType type, void *arg, uint8_t *data, size_t len){
switch (type){
case WS_EVT_CONNECT:
Serial.printf("Client WebSocket ke-#%u terhubung dari %s\n", client->id(),
client->remoteIP().toString().c_str());
break;

P r a k t i k u m R o b o t i k a | 69