"LAPORAN PROJECT #11 SISTEM EMBEDDED II2260"
“VISUALIZATION ESP32”
Muhammad Ichsandro Daniswara Noor – 18219094
ABSTRAK
Web Server adalah perangkat lunak server, atau perangkat keras yang didedikasikan untuk menjalankan perangkat lunak ini, yang dapat memenuhi permintaan klien di World Wide Web. Database adalah sebuah koleksi terorganisir dari data yang umumnya disimpan dan diakses secara elektronik dari sistem komputer. Percobaan kali ini adalah menggunakan database pada Web Server agar dapat menyimpan hasil pembacaan sensor bme-280 menggunakan ESP32 dan menampilkan grafik visualisasi dari data yang diperoleh.
Kata kunci: ESP32, Arduino IDE, Web Server, Database, Visualization.
I. PENDAHULUAN
Web Server
Web Server adalah perangkat lunak server, atau perangkat keras yang didedikasikan untuk menjalankan perangkat lunak ini, yang dapat memenuhi permintaan klien di World Wide Web. Server web dapat, secara umum, berisi satu atau lebih situs web. Server web memproses permintaan jaringan yang masuk melalui HTTP dan beberapa protokol terkait lainnya.
Fungsi utama server web adalah untuk menyimpan, memproses, dan mengirimkan halaman web ke klien. Komunikasi antara klien dan server berlangsung menggunakan Hypertext Transfer Protocol (HTTP). Halaman yang dikirimkan adalah dokumen HTML yang paling sering, yang mungkin termasuk gambar, style sheet dan skrip di samping konten teks.
Database
Database adalah sebuah koleksi terorganisir dari data yang umumnya disimpan dan diakses secara elektronik dari sistem komputer. Di mana database lebih kompleks, mereka sering dikembangkan menggunakan desain formal dan teknik pemodelan.
Sistem manajemen basis data (DBMS) adalah perangkat lunak yang berinteraksi dengan pengguna akhir , aplikasi, dan basis data itu sendiri untuk menangkap dan menganalisis data. Perangkat lunak DBMS juga mencakup fasilitas inti yang disediakan untuk mengelola database. Jumlah total database, DBMS dan aplikasi terkait dapat disebut sebagai "sistem database". Seringkali istilah "database" juga digunakan untuk merujuk ke salah satu DBMS, sistem database atau aplikasi yang terkait dengan database.
II. METODOLOGI
Metodologi yang digunakan untuk penyelesaian tugas Project #10 diilustrasikan dalam diagram berikut:
Gambar 2.1 Diagram Metodologi
1. Menyiapkan Alat dan Bahan
Pada tahap ini dilakukan persiapan alat dan bahan yang dibutuhkan dalam bentuk software maupun hardware.
2. Perakitan Alat
Pada tahap ini dilakukan perakitan dari berbagai komponen yang telah disiapkan.
3. Membuat Program
Pada tahap ini dilakukan pemograman pada ESP32 yang telah disusun yang dilakukan menggunakan aplikasi Arduino IDE. Pemograman dilakukan agar ESP32 dapat membaca sensor bme-280 dan menyimpan hasil pembacaan sensor bme-280 pada database serta menampilkan visualisasi datanya menggunakan grafik.
4. Uji Coba
Pada tahap ini dilakukan uji coba dengan mengirimkan program yang telah dibuat dan kemudian menjalankan perintah pada ESP32.
5. Evaluasi
Pada tahap ini dilakukan evaluasi dari awal hingga akhir uji coba apakah perintah berhasil dilakukan oleh ESP32 sesuai yang diinginkan.
III. HASIL DAN ANALISIS
3.1. Persiapan Alat dan Bahan
a. ESP32 Board DevKit V1 (30 pins)
b. BME-280
c. Jumper Wires
d. Breadboard
3.2 Membuat Database
3.4.1 Edit FIle post-data.php dan masukkan Kode dibawah
<?php
/*
Rui Santos
Complete project details at https://RandomNerdTutorials.com
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
*/
$servername = "localhost";
// REPLACE with your Database name
$dbname = "REPLACE_WITH_YOUR_DATABASE_NAME";
// REPLACE with Database user
$username = "REPLACE_WITH_YOUR_USERNAME";
// REPLACE with Database user password
$password = "REPLACE_WITH_YOUR_PASSWORD";
// Keep this API Key value to be compatible with the ESP32 code provided in the project page. If you change this value, the ESP32 sketch needs to match
$api_key_value = "tPmAT5Ab3j7F9";
$api_key = $value1 = $value2 = $value3 = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$api_key = test_input($_POST["api_key"]);
if($api_key == $api_key_value) {
$value1 = test_input($_POST["value1"]);
$value2 = test_input($_POST["value2"]);
$value3 = test_input($_POST["value3"]);
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "INSERT INTO Sensor (value1, value2, value3)
VALUES ('" . $value1 . "', '" . $value2 . "', '" . $value3 . "')";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
}
else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
}
else {
echo "Wrong API Key provided.";
}
}
else {
echo "No data posted with HTTP POST.";
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}3.4.2 Visualize Database
3.4.3 Edit FIle esp-chart.php dan masukkan Kode dibawah
<!--
Rui Santos
Complete project details at https://RandomNerdTutorials.com
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
-->
<?php
$servername = "localhost";
// REPLACE with your Database name
$dbname = "REPLACE_WITH_YOUR_DATABASE_NAME";
// REPLACE with Database user
$username = "REPLACE_WITH_YOUR_USERNAME";
// REPLACE with Database user password
$password = "REPLACE_WITH_YOUR_PASSWORD";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, value1, value2, value3, reading_time FROM Sensor order by reading_time desc limit 40";
$result = $conn->query($sql);
while ($data = $result->fetch_assoc()){
$sensor_data[] = $data;
}
$readings_time = array_column($sensor_data, 'reading_time');
// ******* Uncomment to convert readings time array to your timezone ********
/*$i = 0;
foreach ($readings_time as $reading){
// Uncomment to set timezone to - 1 hour (you can change 1 to any number)
$readings_time[$i] = date("Y-m-d H:i:s", strtotime("$reading - 1 hours"));
// Uncomment to set timezone to + 4 hours (you can change 4 to any number)
//$readings_time[$i] = date("Y-m-d H:i:s", strtotime("$reading + 4 hours"));
$i += 1;
}*/
$value1 = json_encode(array_reverse(array_column($sensor_data, 'value1')), JSON_NUMERIC_CHECK);
$value2 = json_encode(array_reverse(array_column($sensor_data, 'value2')), JSON_NUMERIC_CHECK);
$value3 = json_encode(array_reverse(array_column($sensor_data, 'value3')), JSON_NUMERIC_CHECK);
$reading_time = json_encode(array_reverse($readings_time), JSON_NUMERIC_CHECK);
/*echo $value1;
echo $value2;
echo $value3;
echo $reading_time;*/
$result->free();
$conn->close();
?>
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.highcharts.com/highcharts.js"></script>
<style>
body {
min-width: 310px;
max-width: 1280px;
height: 500px;
margin: 0 auto;
}
h2 {
font-family: Arial;
font-size: 2.5rem;
text-align: center;
}
</style>
<body>
<h2>ESP Weather Station</h2>
<div id="chart-temperature" class="container"></div>
<div id="chart-humidity" class="container"></div>
<div id="chart-pressure" class="container"></div>
<script>
var value1 = <?php echo $value1; ?>;
var value2 = <?php echo $value2; ?>;
var value3 = <?php echo $value3; ?>;
var reading_time = <?php echo $reading_time; ?>;
var chartT = new Highcharts.Chart({
chart:{ renderTo : 'chart-temperature' },
title: { text: 'BME280 Temperature' },
series: [{
showInLegend: false,
data: value1
}],
plotOptions: {
line: { animation: false,
dataLabels: { enabled: true }
},
series: { color: '#059e8a' }
},
xAxis: {
type: 'datetime',
categories: reading_time
},
yAxis: {
title: { text: 'Temperature (Celsius)' }
//title: { text: 'Temperature (Fahrenheit)' }
},
credits: { enabled: false }
});
var chartH = new Highcharts.Chart({
chart:{ renderTo:'chart-humidity' },
title: { text: 'BME280 Humidity' },
series: [{
showInLegend: false,
data: value2
}],
plotOptions: {
line: { animation: false,
dataLabels: { enabled: true }
}
},
xAxis: {
type: 'datetime',
//dateTimeLabelFormats: { second: '%H:%M:%S' },
categories: reading_time
},
yAxis: {
title: { text: 'Humidity (%)' }
},
credits: { enabled: false }
});
var chartP = new Highcharts.Chart({
chart:{ renderTo:'chart-pressure' },
title: { text: 'BME280 Pressure' },
series: [{
showInLegend: false,
data: value3
}],
plotOptions: {
line: { animation: false,
dataLabels: { enabled: true }
},
series: { color: '#18009c' }
},
xAxis: {
type: 'datetime',
categories: reading_time
},
yAxis: {
title: { text: 'Pressure (hPa)' }
},
credits: { enabled: false }
});
</script>
</body>
</html>3.5 Schematic Diagram
Berikut ini merupakan diagram schematic yang digunakan untuk perakitan alat dalam project kali ini yang didesain dengan fritzing:
3.6 Hasil Perakitan Alat
Berikut ini merupakan hasil perakitan alat sesuai diagram schematic yang telah dibuat:
3.7 Kode Program
/*
Rui Santos
Complete project details at https://RandomNerdTutorials.com
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
*/
#ifdef ESP32
#include <WiFi.h>
#include <HTTPClient.h>
#else
#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>
#include <WiFiClient.h>
#endif
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
// REPLACE with your Domain name and URL path or IP address with path
const char* serverName = "http://example.com/post-data.php";
// Keep this API Key value to be compatible with the PHP code provided in the project page.
// If you change the apiKeyValue value, the PHP file /post-data.php also needs to have the same key
String apiKeyValue = "tPmAT5Ab3j7F9";
/*#include <SPI.h>
#define BME_SCK 18
#define BME_MISO 19
#define BME_MOSI 23
#define BME_CS 5*/
Adafruit_BME280 bme; // I2C
//Adafruit_BME280 bme(BME_CS); // hardware SPI
//Adafruit_BME280 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK); // software SPI
void setup() {
Serial.begin(115200);
WiFi.begin(ssid, password);
Serial.println("Connecting");
while(WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to WiFi network with IP Address: ");
Serial.println(WiFi.localIP());
// (you can also pass in a Wire library object like &Wire2)
bool status = bme.begin(0x76);
if (!status) {
Serial.println("Could not find a valid BME280 sensor, check wiring or change I2C address!");
while (1);
}
}
void loop() {
//Check WiFi connection status
if(WiFi.status()== WL_CONNECTED){
HTTPClient http;
// Your Domain name with URL path or IP address with path
http.begin(serverName);
// Specify content-type header
http.addHeader("Content-Type", "application/x-www-form-urlencoded");
// Prepare your HTTP POST request data
String httpRequestData = "api_key=" + apiKeyValue + "&value1=" + String(bme.readTemperature())
+ "&value2=" + String(bme.readHumidity()) + "&value3=" + String(bme.readPressure()/100.0F) + "";
Serial.print("httpRequestData: ");
Serial.println(httpRequestData);
// You can comment the httpRequestData variable above
// then, use the httpRequestData variable below (for testing purposes without the BME280 sensor)
//String httpRequestData = "api_key=tPmAT5Ab3j7F9&value1=24.75&value2=49.54&value3=1005.14";
// Send HTTP POST request
int httpResponseCode = http.POST(httpRequestData);
// If you need an HTTP request with a content type: text/plain
//http.addHeader("Content-Type", "text/plain");
//int httpResponseCode = http.POST("Hello, World!");
// If you need an HTTP request with a content type: application/json, use the following:
//http.addHeader("Content-Type", "application/json");
//int httpResponseCode = http.POST("{\"value1\":\"19\",\"value2\":\"67\",\"value3\":\"78\"}");
if (httpResponseCode>0) {
Serial.print("HTTP Response code: ");
Serial.println(httpResponseCode);
}
else {
Serial.print("Error code: ");
Serial.println(httpResponseCode);
}
// Free resources
http.end();
}
else {
Serial.println("WiFi Disconnected");
}
//Send an HTTP POST request every 30 seconds
delay(30000);
}3.8 Menjalankan Program
Berdasarkan kode program yang telah dibuat. Pertama semua perpustakaan diimpor agar semua komponen dapat berfungsi. Setelah itu
variabel apiKeyValue, sensorName, dan sensorLocation disetting sesuai yang telah didefinisikan. ApiKeyValue digunakan untuk keamanan, jadi hanya siapa pun yang mengetahui kunci API yang dapat mepublikasikan data ke database. Kemudian komunikasi serial diinisiasi untuk tujuan debugging dan mengkoneksikan Wi-Fi dengan router. terakhir menginisialisasi BME280 untuk mendapatkan pembacaan sensor.
Setelah melakukan verifikasi dan mengupload program, ESP32 mengirimkan data sensor ke webserver dan menyimpan nilainya ke database serta menampilkan visualisasi data yang berbentuk grafik.
Berikut ini adalah video hasil uji coba:
3.9 Evaluasi
Setelah melakukan beberapa percobaan mulai dari perakitan hingga tahap uji coba, ada beberapa kendala yang dialami. Kendalanya adalah sensor bme-280 tidak dapat terdeteksi oleh esp32. Hal ini terjadi dikarenakan kabel menancap pada GPIO yang salah. Solusinya adalah dengan membetulkan posisi kabel ke GPIO yang sesuai. Selain itu ESP32 tidak bisa mengirimkan data pembacaan sensor ke webserver yang dikarenakan username dan password database yang salah. Solusinya adalah dengan menyesuaikan username dan password yang seharusnya.
IV. KESIMPULAN
Dari percobaan yang telah dilakukan ada beberapa hal yang dapat disimpulkan:
4.1 Alat dan Bahan yang digunakan dalam percobaan ini meliputi komponen hardware yaitu ESP32, Sensor BME-280, Breadboard, Jumper wires, microUSB, laptop/komputer, smartphone dan komponen software yaitu Arduino IDE dan Chrome sebagai web browser.
4.2 Proses perakitan alat disesuaikan dengan diagram schematic dan semua komponen dapat berfungsi dengan baik.
4.3 Proses verifikasi dan pengiriman kode program ke ESP32 berjalan dengan baik tanpa kendala.
4.4 Secara umum, ESP32 berhasil melakukan perintah dengan baik yang ditandai dengan ESP32 dapat membaca sensor bme-280 dan menyimpan hasil pembacaan sensor bme-280 pada database serta menampilkan visualisasi data dalam bentuk grafik.
V. DAFTAR PUSTAKA
Bruni, C., Santos, R., Indrawan, Bóbeda, J., Royo, A., Abimbola, . . . Glass, K. (2019, December 26). Visualize ESP32/ESP8266 sensor readings from anywhere in the world. Retrieved April 18, 2021, from https://randomnerdtutorials.com/visualize-esp32-esp8266-sensor-readings-from-anywhere/
Database. (2021, March 24). Retrieved April 11, 2021, from https://en.wikipedia.org/wiki/Database
Server web. (2020, October 07). Retrieved April 04, 2021, from https://id.wikipedia.org/wiki/Server_web
Software. (n.d.). Arduino. https://www.arduino.cc/en/software/
Komentar
Posting Komentar