Beranda > IoT, Node.JS > ESP8266 + CORDOVA – Mengontrol ESP8266 menggunakan Android

ESP8266 + CORDOVA – Mengontrol ESP8266 menggunakan Android

22 November 2018

 

Pada kesempatan kali ini saya ingin membagi pengalaman bagaimana cara mengontrol ESP8266 menggunakan APK yang dibuat dengan CORDOVA serta mengembalikan response ke aplikasi.

Disini saya akan mengirim request get jam dan tanggal yang nantinya dapat digunakan untuk membuat jam (led matrix, 7 segment, atau P10) dan update melalui android menggunakan wifi.

Saya juga menggunakan aplikasi untuk menyalakan dan mematikan LED yang nantinya dapat digunakan untuk mengontrol relay.

Dowload file disini.

Langkah-langkahnya sebagai berikut:

  1. Membuat APK menggunakan Cordova
  2. Buat file html + javascript
  3. Membuat sketch di Arduino UNO

Membuat APK menggunakan Cordova

Pastikan telah terinstall node.js dan cordova.

Buat project cordova.

cordova create konekesp8266 com.ard.konekesp8266 konekesp8266

Masuk ke folder konekesp8266.

cd konekesp8266

Tambahkan platform android.

cordova platform add android

Compile menjadi APK.

cordova build android

Buat file html + javascript

 

Berikut hirarki file di folder www project cordova yang telah dibuat tadi :

Berikut file html yang diperlukan :

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>esp8266</title>
<script src="assets/js/jquery.min.js"></script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>

<body>

<script type="text/javascript">

//-----------------------//
//---- Memulai timer ----//
//-----------------------//

var myVar = setInterval(myTimer, 1000);

function myTimer() {
var currentTime = new Date();
var ampm = "AM";
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
var tgl = currentTime.getDate();
var bln = currentTime.getMonth()+1;
var thn = currentTime.getFullYear();

var a;

if(h<10)
{
h = "0" + h;
}
if(m<10)
{
m = "0" + m;
}
if(s<10)
{
s = "0" + s;
}

if(tgl<10)
{
tgl = "0" + tgl;
}
if(bln<10)
{
bln = "0" + bln;
}

var jam = String(h);
var menit = String(m);
var detik = String(s);

var tanggal = String(tgl);
var bulan = String(bln);
var tahun = String(thn);

document.getElementById("t4_jam_sekarang").value = h + ":" + m + ":" + s;
document.getElementById("t4_tanggal_sekarang").value = tanggal + "-" + bulan + "-" + tahun;
};

//--------------------------------//
//----- kirim jam ke ESP8266 -----//
//--------------------------------//
$(document).on('click', '.kirim-jam', function(){
var url_ESP8266 = $("#url_server").val();
var kirim_jam_ESP8266 = $("#t4_jam_sekarang").val();

//alert(kirim_jam_ESP8266);
//alert(url_ESP8266);
//alert(url_ESP8266 + "/jam/" + kirim_jam_ESP8266);

$.ajax({
url: url_ESP8266 + "/jam/" + kirim_jam_ESP8266,
method:"GET",
data:{},
dataType:"json",
success:function(data){
document.getElementById('t4_code').innerHTML = data.code;
document.getElementById('t4_pesan').innerHTML = data.pesan2;
}
});
});

//------------------------------------//
//----- kirim tanggal ke ESP8266 -----//
//------------------------------------//
$(document).on('click', '.kirim-tanggal', function(){
var url_ESP8266 = $("#url_server").val();
var kirim_tanggal_ESP8266 = $("#t4_tanggal_sekarang").val();

$.ajax({
url: url_ESP8266 + "/tanggal/" + kirim_tanggal_ESP8266,
method:"GET",
data:{},
dataType:"json",
success:function(data){
document.getElementById('t4_code').innerHTML = data.code;
document.getElementById('t4_pesan').innerHTML = data.pesan2;
}
});
});

//-----------------------------------//
//----- kirim led on ke ESP8266 -----//
//-----------------------------------//
$(document).on('click', '.led-hidup', function(){
var url_ESP8266 = $("#url_server").val();

$.ajax({
url: url_ESP8266 + "/tanggal/ledon",
method:"GET",
data:{},
dataType:"json",
success:function(data){
document.getElementById('t4_code').innerHTML = data.code;
document.getElementById('t4_pesan').innerHTML = data.pesan2;
}
});
});

//------------------------------------//
//----- kirim led off ke ESP8266 -----//
//------------------------------------//
$(document).on('click', '.led-mati', function(){
var url_ESP8266 = $("#url_server").val();

$.ajax({
url: url_ESP8266 + "/tanggal/ledoff",
method:"GET",
data:{},
dataType:"json",
success:function(data){
document.getElementById('t4_code').innerHTML = data.code;
document.getElementById('t4_pesan').innerHTML = data.pesan2;
}
});
});

</script>

<nav class="navbar navbar-light navbar-expand-md" style="background-color:#0066ff;">
<div class="container-fluid"><a class="navbar-brand" href="#" style="color:rgba(248,248,248,0.9);">ESP8266</a><button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon" style="color:#ffffff;"></span></button>
<div
class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav"></ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row" style="margin-top:10px;">
<div class="col">
<h5 class="text-center">Server</h5><input id="url_server" name="url_server" type="text" value="http://192.168.1.102" class="form-control" style="text-align:center;font-size:18px;"></div>
</div>
<div class="row" style="margin-top:11px;">
<div class="col">
<div class="row">
<div class="col">
<h5>Time</h5>
</div>
</div>
<div class="row">
<div class="col" style="padding-right:0;"><input id="t4_jam_sekarang" name="t4_jam_sekarang" type="text" class="form-control"></div>
</div>
</div>
<div class="col-auto align-self-end"><button class="btn btn-primary kirim-jam" type="button">Send</button></div>
</div>
<div class="row" style="margin-top:11px;">
<div class="col">
<div class="row">
<div class="col">
<h5>Date</h5>
</div>
</div>
<div class="row">
<div class="col" style="padding-right:0px;"><input id="t4_tanggal_sekarang" name="t4_tanggal_sekarang" type="text" class="form-control"></div>
</div>
</div>
<div class="col-auto align-self-end"><button class="btn btn-primary kirim-tanggal" type="button">Send</button></div>
</div>
<div class="row" style="margin-top:18px;">
<div class="col"><button class="btn btn-danger led-hidup" type="button" style="width:100%;">LED ON</button></div>
<div class="col"><button class="btn btn-success led-mati" type="button" style="width:100%;">LED OFF</button></div>
</div>
<div class="row" style="margin-top:16px;">
<div class="col">
<div class="card">
<div class="card-header" style="background-color:rgba(0,0,0,0.14);">
<h5 class="mb-0">Response</h5>
</div>
<div class="card-body">
<p class="card-text" id="t4_code" nama="t4_code"></p>
<p class="card-text" id="t4_pesan" nama="t4_pesan"></p>
</div>
</div>
</div>
</div>
</div>

<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

Membuat sketch di Arduino UNO

Berikut isi file ino:


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

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

WiFiServer server(80);
int ledPin = 15; // Pin 8 NodeMCU = Pin 15 Arduino

void setup(void) {

pinMode(ledPin, OUTPUT);
digitalWrite(ledPin, LOW);

Serial.begin(115200);
delay(10);

// Connect to WiFi network
Serial.println();
Serial.println();
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");

// Start the server
server.begin();
Serial.println("Server started");

// Print the IP address
Serial.println(WiFi.localIP());
}

void loop(void) {

// Check if a client has connected
WiFiClient client = server.available();
if (!client) {
return;
}

// Wait until the client sends some data
//Serial.println("new client");
while(!client.available()){
delay(1);
}

// Read the first line of the request
String req = client.readStringUntil('\r');
//Serial.println(req);
client.flush();

// Match the request
String val;
if (req.indexOf("/ledon") != -1){
Serial.println("LED MENYALA");
digitalWrite(ledPin, HIGH);
val = "LED Menyala";
}
else if (req.indexOf("/ledoff") != -1){
Serial.println("LED MATI");
digitalWrite(ledPin, LOW);
val = "LED Mati";
}
else if (req.indexOf("/jam") != -1){
String jam_sekarang="";
for (int i=9; i <= 16; i++){
jam_sekarang = jam_sekarang + req[i];
}
Serial.println(jam_sekarang);
val = "Jam Terkirim";
}
else if (req.indexOf("/tanggal") != -1){

String tanggal_sekarang="";
for (int i=13; i <= 22; i++){
tanggal_sekarang = tanggal_sekarang + req[i];
}
Serial.println(tanggal_sekarang);
val = "Tanggal Terkirim";
}
else {
Serial.println("invalid request");
client.stop();
return;
}
client.flush();

String s = "HTTP/1.1 200 OK\r\nContent-Type: application/json\r\n\r\n ";
s += "{\"code\": 200, \"pesan2\": \"" + val + "\"}";
s += "\n";

// Send the response to the client
client.print(s);
delay(1);
//Serial.println("Client disonnected");

// The client will actually be disconnected
// when the function returns and 'client' object is detroyed
}

Selamat berexperimen…

 

Kategori:IoT, Node.JS Tag:, ,
%d blogger menyukai ini: