Bölüm 4: Kendi Web Sunucunuzu Kurun: Tarayıcıdan Donanım Kontrolü

Bir önceki yazımızda ESP32'mizi evimizdeki Wi-Fi ağına bağlamış ve ona bir IP adresi (örneğin: 192.168.1.50) atandığını görmüştük. Şimdi o IP adresini kullanma vakti.

Şu an yapacağımız şey teknik olarak çok havalı: ESP32'mizin hafızasına basit bir HTML web sayfası yükleyeceğiz. ESP32'miz bir Web Sunucusu (Web Server) gibi davranacak. Biz telefonumuzun internet tarayıcısına (Chrome, Safari vb.) bu IP adresini yazdığımızda, ESP32 bize o web sayfasını gönderecek. Biz sayfadaki butonlara tıkladığımızda ise ESP32 bunu algılayıp ışığı yakacak veya söndürecek!

Gerekli Kod: ESP32 Web Sunucusu

Aşağıdaki kod, hem ESP32'yi Wi-Fi'a bağlar hem de içine 80 portundan (standart web portu) yayın yapan bir sunucu kurar. İkinci bölümde kullandığımız, kartın üzerindeki mavi LED'i (2 Numaralı Pin) kontrol edeceğiz.

Arduino IDE'yi açın ve aşağıdaki kodu yapıştırın. WIFI_AGINIZIN_ADI ve WIFI_SIFRENIZ kısımlarını kendi bilgilerinize göre değiştirmeyi unutmayın!

C++

#include <WiFi.h>
#include <WebServer.h>

// Wi-Fi Bilgileriniz
const char* ssid = "WIFI_AGINIZIN_ADI";
const char* password = "WIFI_SIFRENIZ";

// 80 portunda çalışan bir web sunucusu oluşturuyoruz
WebServer server(80);

// Kontrol edeceğimiz LED'in pin numarası (Dahili mavi LED)
const int ledPin = 2;

// Web sayfamızın tasarımı (HTML ve biraz CSS içerir)
// R"rawliteral(...)rawliteral" yapısı, uzun metinleri kolayca yazmamızı sağlar.
String HTML_Sayfasi = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ESP32 Akıllı Ev</title>
  <style>
    body { font-family: Arial; text-align: center; margin-top: 50px; background-color: #f4f4f9;}
    h1 { color: #333; }
    .buton { display: inline-block; padding: 15px 40px; font-size: 24px; cursor: pointer; text-decoration: none; color: white; border-radius: 8px; margin: 10px; }
    .buton-ac { background-color: #4CAF50; }
    .buton-kapat { background-color: #f44336; }
  </style>
</head>
<body>
  <h1>ESP32 Kontrol Paneli</h1>
  <p>Işığı kontrol etmek için butonlara tıklayın:</p>
  <a href="/ac" class="buton buton-ac">IŞIĞI AÇ</a>
  <a href="/kapat" class="buton buton-kapat">IŞIĞI KAPAT</a>
</body>
</html>
)rawliteral";

void setup() {
  Serial.begin(115200);
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW); // Başlangıçta LED sönük olsun

  // Wi-Fi'a bağlanma adımları
  Serial.print("Baglaniliyor: ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nWi-Fi baglantisi basarili!");
  Serial.print("Tarayiciya su adresi yazin: http://");
  Serial.println(WiFi.localIP());

  // Sunucu Kuralları: Hangi adrese girilirse ne yapılsın?
  
  // 1. Ana sayfaya (kök dizin "/") girildiğinde HTML sayfasını göster
  server.on("/", []() {
    server.send(200, "text/html", HTML_Sayfasi);
  });

  // 2. "/ac" adresine girildiğinde (AÇ butonuna tıklandığında)
  server.on("/ac", []() {
    digitalWrite(ledPin, HIGH); // LED'i yak
    server.send(200, "text/html", HTML_Sayfasi); // Sayfayı yenile
  });

  // 3. "/kapat" adresine girildiğinde (KAPAT butonuna tıklandığında)
  server.on("/kapat", []() {
    digitalWrite(ledPin, LOW); // LED'i söndür
    server.send(200, "text/html", HTML_Sayfasi); // Sayfayı yenile
  });

  // Sunucuyu başlat
  server.begin();
  Serial.println("Web sunucusu baslatildi!");
}

void loop() {
  // Sunucunun gelen talepleri dinlemesini sağlıyoruz
  server.handleClient();
}

Sistemi Test Edelim!

Kodu ESP32'ye yükleyin.
Seri Port Ekranı'nı (115200 baud hızında) açın.
ESP32 ağa bağlandığında ekranda beliren IP adresini kopyalayın (Örn: http://192.168.1.45).
Cep telefonunuzun veya bilgisayarınızın web tarayıcısını açıp adres çubuğuna bu IP adresini yapıştırın ve Enter'a basın. (Not: Telefonunuzun ve ESP32'nin aynı Wi-Fi ağına bağlı olması gerekmektedir).

Karşınıza yeşil "IŞIĞI AÇ" ve kırmızı "IŞIĞI KAPAT" butonlarının olduğu bir web sayfası gelecek.

Şimdi sihir zamanı: AÇ butonuna dokunduğunuz an, masanızda duran ESP32'nin üzerindeki mavi ışığın yandığını göreceksiniz! KAPAT butonuna bastığınızda ise sönecektir.

Tebrikler, az önce kendi yerel ağınızda çalışan bir Akıllı Ev sisteminin prototipini başarıyla inşa ettiniz! Bu LED'in yerine ileride bir "Röle" bağlayarak evinizdeki masa lambasını, vantilatörü hatta kahve makinesini bile aynı yöntemle kontrol edebilirsiniz.

Bir sonraki bölümde tek yönlü kontrolü bırakıp ESP32'nin ortamı dinlemesini sağlayacağız. Sensörler dünyasına giriş yapıp sıcaklık ve nem verilerini okuyacağız. Kaçırmayın!

Bölüm 4: Kendi Web Sunucunuzu Kurun: Tarayıcıdan Donanım Kontrolü

Gerekli Kod: ESP32 Web Sunucusu

Sistemi Test Edelim!

Yazan

Ertan Dağdelen

Bu yazıyı paylaş

Yorumlar (0)

Diğer Yazılar

ESP32 vs Arduino: 2026’da Hangisini Seçmelisiniz?

Bölüm 10: Kablolara Veda Edin: ESP32'yi Wi-Fi Üzerinden (OTA) Programlamak

Bölüm 9: ESP32 ile Mesajlaşın: Kendi Telegram Botunuzu Yapın!