LAPORAN PRAKTIKUM

Komputasi Pervasif / Pervasive Computing

SEMESTER V

PRAKTIK

Proyek ESP32 dengan Sensor BME 280 Dan

Stasiun Cuaca Web Server dengan BME 280

Nama Praktikan Kelompok 6 :

ARIEL MUHAMMAD AMRI (2003421002)
FARHAN YUSWA BIYANTO (2003421031)
SALSYA NUR ALFIENDA (2003421028)

BM5A

PROGRAM STUDI
BROADBAND MULTIMEDIA
JURUSAN TEKNIK ELEKTRO
POLITEKNIK NEGERI JAKARTA
 2022
ABSTRAK

ESP32 adalah mikrokontroler yang sudah tersedia modul WiFi dalam chip sehingga sangat
mendukung untuk membuat sistem aplikasi Internet of Things. Dalam praktikum ini kita akan
membuat server web membangun stasiun cuaca dengan menggunakan server web ESP32 untuk
menampilkan pembacaan dari modul sensor BME280. Sensor BME280 digunakan untuk
mengukur suhu, kelembaban dan tekanan. Sensor BME280 menggunakan protokol komunikasi
I2C atau SPI untuk bertukar data dengan mikrokontroler dengan cara menginstall beberapa library.
I. TUJUAN
1. Dapat merangkai komponen untuk stasiun cuaca
2. Memahami program dari Proyek ESP32 dengan Sensor BME 280 dan Stasiun Cuaca
dengan Sensor BME 280

II. ALAT DAN BAHAN

No Komponen Jumlah

1 ESP 32 1

2 Sensor BME280 1

3 Kabel Jumper 4

III. LANGKAH-LANGKAH PRAKTIKUM

A. ESP32 dengan Sensor BME280 menggunakan Arduino IDE (Tekanan, Suhu,
Kelembaban)
1. Install library adafruit bme280 dan adafruit unified sensor
2. Rangkai/pasang komponen seperti gambar skematik dibawah ini

Dengan menggunakan pin ESP32 I2C default seperti tabel berikut:

BME280 ESP32

Vin 3.3V

GND GND

SCL GPIO 22

SDA GPIO 21
 3. Melakukan pengetesan dengan example yang ada pada software Arduino, cara nya
adalah buka File > Example > Adafruit BME280 library > bme280 test. Pastikan
kode program pada bagian deklarasi pin telah sesuai dengan rangkaian.
4. Sambungkan Perangkat ESP32 ke computer, pastikan board dan port nya sudah benar.
Upload program dan kemudian buka serial monitor untuk melihat hasilnya. /*********
Complete project details at https://randomnerdtutorials.com
*********/

#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

/*#include <SPI.h>
#define BME_SCK 18
#define BME_MISO 19
#define BME_MOSI 23
#define BME_CS 5*/

#define SEALEVELPRESSURE_HPA (1013.25)

Adafruit_BME280 bme; // I2C

//Adafruit_BME280 bme(BME_CS); // hardware SPI
//Adafruit_BME280 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK); // software SPI

unsigned long delayTime;

void setup() {
Serial.begin(9600);
Serial.println(F("BME280 test"));

bool status;

// default settings
// (you can also pass in a Wire library object like &Wire2)
status = bme.begin(0x76);
if (!status) {
Serial.println("Could not find a valid BME280 sensor, check wiring!");
while (1);
}
 Serial.println("-- Default Test --");
delayTime = 1000;

Serial.println();
}

void loop() {
printValues();
delay(delayTime);
}

void printValues() {
Serial.print("Temperature = ");
Serial.print(bme.readTemperature());
Serial.println(" *C");

// Convert temperature to Fahrenheit

/*Serial.print("Temperature = ");
Serial.print(1.8 * bme.readTemperature() + 32);
Serial.println(" *F");*/

Serial.print("Pressure = ");
Serial.print(bme.readPressure() / 100.0F);
Serial.println(" hPa");

Serial.print("Approx. Altitude = ");

Serial.print(bme.readAltitude(SEALEVELPRESSURE_HPA));
Serial.println(" m");

Serial.print("Humidity = ");
Serial.print(bme.readHumidity());
Serial.println(" %");

Serial.println();
}

Berikut hasil yang ditampilkan pada serial monitor :

• Hasil pengujian
B. Server Web ESP32 dengan BME280 – Stasiun Cuaca Tingkat Lanjut
1. Install library adafruit bme280 dan adafruit unified sensor
2. Rangkai/pasang komponen seperti gambar skematik dibawah ini

Dengan menggunakan pin ESP32 I2C default seperti tabel berikut:

BME280 ESP32
 Vin 3.3V

GND GND

SCL GPIO 22

SDA GPIO 21

3. Melakukan pengetesan dengan example yang ada pada software Arduino, cara nya
adalah buka File > Example > Adafruit BME280 library > bme280 test. Pastikan
kode program pada bagian deklarasi pin telah sesuai dengan rangkaian.
4. Sambungkan Perangkat ESP32 ke computer, pastikan board dan port nya sudah benar.
5. Upload program dan kemudian buka serial monitor untuk melihat hasilnya. Jika belum
muncul hasil, maka Tekan tombol RST on-board untuk menjalankan kode.
6. Buat table menggunakan HTML
7. Membuat web server Program :

Percobaan menggunakan webserver

// Load Wi-Fi library
#include <WiFi.h>
#include <Wire.h>
#include <Adafruit_BME280.h>
#include <Adafruit_Sensor.h>

//uncomment the following lines if you're using SPI

/*#include <SPI.h>
#define BME_SCK 18
#define BME_MISO 19
#define BME_MOSI 23
#define BME_CS 5*/

#define SEALEVELPRESSURE_HPA (1013.25)

Adafruit_BME280 bme; // I2C

//Adafruit_BME280 bme(BME_CS); // hardware SPI
//Adafruit_BME280 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK); // software SPI
// Replace with your network credentials
const char* ssid = "Hanss";
const char* password = "29032002";

// Set web server port number to 80

WiFiServer server(80);

// Variable to store the HTTP request

String header;

// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0;
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;

void setup() {
Serial.begin(115200);
bool status;

// default settings
// (you can also pass in a Wire library object like &Wire2)
//status = bme.begin();
if (!bme.begin(0x76)) {
Serial.println("Could not find a valid BME280 sensor, check wiring!");
while (1);
}

// Connect to Wi-Fi network with SSID and password

Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}

void loop(){
WiFiClient client = server.available(); // Listen for incoming clients

if (client) { // If a new client connects,

currentTime = millis();
previousTime = currentTime;
Serial.println("New Client."); // print a message out in the serial
port
String currentLine = ""; // make a String to hold incoming data
from the client
while (client.connected() && currentTime - previousTime <= timeoutTime) { //
loop while the client's connected
currentTime = millis();
if (client.available()) { // if there's bytes to read from the
client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
header += c;
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200
OK)
// and a content-type so the client knows what's coming, then a blank
line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();

// Display the HTML web page

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:,\">");
// CSS to style the table
client.println("<style>body { text-align: center; font-family:
\"Trebuchet MS\", Arial;}");
client.println("table { border-collapse: collapse; width:35%; margin-
left:auto; margin-right:auto; }");
 client.println("th { padding: 12px; background-color: #0043af; color:
white; }");
client.println("tr { border: 1px solid #ddd; padding: 12px; }");
client.println("tr:hover { background-color: #bcbcbc; }");
client.println("td { border: none; padding: 12px; }");
client.println(".sensor { color:white; font-weight: bold; background-
color: #bcbcbc; padding: 1px; }");

// Web Page Heading

client.println("</style></head><body><h1>ESP32 with BME280</h1>");
client.println("<table><tr><th>MEASUREMENT</th><th>VALUE</th></tr>");
client.println("<tr><td>Temp. Celsius</td><td><span
class=\"sensor\">");
client.println(bme.readTemperature());
client.println(" *C</span></td></tr>");
client.println("<tr><td>Temp. Fahrenheit</td><td><span
class=\"sensor\">");
client.println(1.8 * bme.readTemperature() + 32);
client.println(" *F</span></td></tr>");
client.println("<tr><td>Pressure</td><td><span class=\"sensor\">");
client.println(bme.readPressure() / 100.0F);
client.println(" hPa</span></td></tr>");
client.println("<tr><td>Approx. Altitude</td><td><span
class=\"sensor\">");
client.println(bme.readAltitude(SEALEVELPRESSURE_HPA));
client.println(" m</span></td></tr>");
client.println("<tr><td>Humidity</td><td><span class=\"sensor\">");
client.println(bme.readHumidity());
client.println(" %</span></td></tr>");
client.println("</body></html>");

// The HTTP response ends with another blank line

client.println();
// Break out of the while loop
break;
} else { // if you got a newline, then clear currentLine
currentLine = "";
}
} else if (c != '\r') { // if you got anything else but a carriage return
character,
currentLine += c; // add it to the end of the currentLine
}
}
}
 // Clear the header variable
header = "";
// Close the connection
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}

• Hasil yang ditampilkan pada serial monitor

• hasil yang ditampilkan pada webserver setelah mengcopy paste IP Address yang ditampilkan di
serial monitor

8. Pada bagian dibawah ini isi bagian didalam tanda “ “ sesuai dengan yang terkoneksi
pada perangkat yang sedang digunakan
const char* ssid = "";
const char* password = "";
9. Upload program kemudian buka Serial Monitor pada baud rate 115200, dan salin
alamat IP ESP32.
10. Buka browser dan paste alamat IP yang telah dicopy maka setelah itu terlihat hasil
pembacaan sensor terbaru. Untuk memperbarui hasil, hanya perlu me-refresh halaman
web.
IV. HASIL PRAKTIKUM A. ESP32 dengan Sensor BME280 menggunakan Arduino IDE
(Tekanan, Suhu, Kelembaban)

B. Server Web ESP32 dengan BME280 – Stasiun Cuaca Tingkat Lanjut

V. ANALISA

Pada praktikum kali ini kami membangun stasiun cuaca dengan menggunakan server web
ESP32 guna menampilkan pembacaan dari modul sensor BME280. Setelah data diproses
oleh Arduino IDE selanjutnya data akan ditampilkan melalui serial monitor ataupun web
server dalam sebuah halaman HTML. Pada serial monitor, tertera beberapa pengukuran yaitu
suhu, tekanan udara, perkiraan ketinggian serta kelembaban. Sedangkan pada web server,
parameter yang ditampilkan sama dengan parameter yang tertera pada serial monitor namun
untuk melihat hasilnya pada web perlu dicari tahu dulu IP addressnya dengan cara menginput
ssid dan password WIFI yang terhubung dengan device, setelah IP addres tertera pada serial
monitor maka IP address dapat disalin pada chrome untuk melihat hasil pengukuran pada
web server. Pengukuran yang kami dapatkan pada web server saat praktikum ini dikerjakan
yaitu suhu dalam celcius sebesar 29.22°C, suhu dalam farenheit sebesar 84.60°F, tekanan
udara 999.31 hPa, perkiraan ketinggian sebesar 116.67m, serta kelembaban sebesar 53.60%
jika halaman web tersebut direfresh maka hasil yang ditampilkan dapat berubah
menyesuaikan dengan kondisi sekitar.

VI. KESIMPULAN
Dari hasil praktikum yang telah dilaksanakan dapat disimpulkan bahwa:
1. ESP32 dan Sensor BME280 dapat bekerja dengan baik.
2. Sensor BME280 berhasil mendapatkan nilai suhu, tekanan, perkiraan ketinggian, dan
kelembaban
3. ESP32 berhasil mengkoneksi ke WIFI, sehingga mendapatkan IP address untuk akses
ke web server.

VII. REFERENSI
1. https://randomnerdtutorials.com/esp32-bme280-arduino-ide-pressure-
temperaturehumidity/
2. https://randomnerdtutorials.com/esp32-web-server-with-bme280-mini-weather-station/