Elektronik & Yazılım & Yapay Zeka: web sunucusu kurma

ESP32, güçlü Wi-Fi yetenekleri ve düşük güç tüketimi sayesinde Nesnelerin İnterneti (IoT) projeleri için mükemmel bir mikrodenetleyicidir. Bu projede, ESP32'yi kullanarak yerel ağınızdaki herhangi bir cihazdan (telefon, tablet veya bilgisayar) iki ayrı LED'i kontrol etmenizi sağlayacak bağımsız (standalone) bir web sunucusu oluşturacağız.

🛠️ Neler Gerekiyor?

Bu projeyi tamamlamak için ihtiyacınız olan temel bileşenler şunlardır:

ESP32 Geliştirme Kartı: (Herhangi bir modeli kullanabilirsiniz)
İki Adet LED: (Farklı renklerde olabilir)
İki Adet Akım Sınırlayıcı Direnç: (Genellikle 220 ohm idealdir)
Breadboard (Devre Tahtası)
Jumper Kabloları
Arduino IDE: (Gerekli ESP32 kart desteği kurulu olmalıdır)

🛠️ Devre Şeması ve Bileşenler

Bu projede, iki LED'i kontrol etmek için ESP32'nin iki farklı GPIO pinini kullanıyoruz:

Bileşen	ESP32 Pini	Açıklama
Yeşil LED	GPIO 2 (D2)	Açma/Kapama komutları bu pini kontrol eder.
Kırmızı LED	GPIO 4 (D4)	Açma/Kapama komutları bu pini kontrol eder.
Direnç (220 ohm)	Seride	Her iki LED'in de akımını sınırlamak için kullanılır.

Kurulum Adımları:

Yeşil LED Bağlantısı: LED'in uzun bacağını (anot) bir 220 Ohm direnç ile seri bağlayın ve bu direncin diğer ucunu GPIO 2'ye takın. LED'in kısa bacağını (katot) ESP32'deki GND pinine bağlayın.
Kırmızı LED Bağlantısı: Aynı işlemi Kırmızı LED için tekrarlayın: LED'in anodu, bir 220 Ohm direnç üzerinden GPIO 4'e bağlanır. Katot ucu ise GND'ye bağlanır.

Bu kurulum, LED'lerin güvenliğini sağlarken ESP32 üzerinden kontrol edilebilmelerini mümkün kılar.

Arduino IDE Kodumuz

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

// Wi-Fi Ağ Bilgilerinizi Buraya Girin
const char* ssid = "SSID";       // Ağınızın Adı (SSID)
const char* password = "password"; // Ağınızın Şifresi

// Web Sunucusu 80. Portta Çalışacak
WiFiServer server(80);

// HTTP İsteğini Depolayacak Değişken
String header;

// LED Durumlarını Saklayacak Yardımcı Değişkenler
String greenLedState = "off";
String redLedState = "off";

// LED'lerin Bağlı Olduğu GPIO Pinleri
const int greenLed = 2; // D2 -> Yeşil LED (ESP32 için GPIO 2)
const int redLed = 4;   // D4 -> Kırmızı LED (ESP32 için GPIO 4)

// Zamanlama Değişkenleri (İstemci Zaman Aşımı İçin)
unsigned long currentTime = millis();
unsigned long previousTime = 0; 
const long timeoutTime = 2000; // 2 saniye zaman aşımı

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

  // Pinleri Çıkış Olarak Ayarla
  pinMode(greenLed, OUTPUT);
  pinMode(redLed, OUTPUT);

  // Başlangıçta Tüm LED'leri Kapat
  digitalWrite(greenLed, LOW);
  digitalWrite(redLed, LOW);

  // Wi-Fi Ağına Bağlan
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);

  // Bağlantı Başarılı Olana Kadar Bekle
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  // IP Adresini Yazdır ve Sunucuyu Başlat
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop() {
  // Yeni İstemci Bağlantısı Kontrolü
  WiFiClient client = server.available();

  if (client) {
    currentTime = millis();
    previousTime = currentTime;
    Serial.println("New Client.");
    String currentLine = "";

    // İstemci Bağlı Olduğu Sürece Veya Zaman Aşımı Dolana Kadar Oku
    while (client.connected() && currentTime - previousTime <= timeoutTime) {
      currentTime = millis();
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        header += c;
        if (c == '\n') {
          // HTTP İsteğinin Sonuna Gelindi
          if (currentLine.length() == 0) {

            // HTTP Cevap Başlıkları
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();

            // ===================================
            // LED Kontrol Mantığı (HTTP İsteğine Göre)
            // ===================================
            
            if (header.indexOf("GET /green/on") >= 0) {
              Serial.println("Green LED ON");
              greenLedState = "on";
              digitalWrite(greenLed, HIGH);
            } else if (header.indexOf("GET /green/off") >= 0) {
              Serial.println("Green LED OFF");
              greenLedState = "off";
              digitalWrite(greenLed, LOW);
            } else if (header.indexOf("GET /red/on") >= 0) {
              Serial.println("Red LED ON");
              redLedState = "on";
              digitalWrite(redLed, HIGH);
            } else if (header.indexOf("GET /red/off") >= 0) {
              Serial.println("Red LED OFF");
              redLedState = "off";
              digitalWrite(redLed, LOW);
            }

            // ===================================
            // Web Sayfası İçeriği (HTML/CSS)
            // ===================================

            client.println("<!DOCTYPE html><html lang='tr'>");
            client.println("<head><meta name='viewport' content='width=device-width, initial-scale=1'>");
            client.println("<link rel='icon' href='data:,'>");
            
            // CSS Stilleri (Mobil Uyumlu Tasarım)
            client.println("<style>");
            client.println("html, body { font-family: 'Segoe UI', Helvetica, Arial, sans-serif; background: linear-gradient(135deg, #1f1c2c, #928dab); color: #fff; text-align: center; height: 100%; margin: 0; }");
            client.println("h1 { font-size: 2.5rem; margin-top: 40px; letter-spacing: 2px; }");
            client.println("h2 { margin-top: 30px; font-weight: 500; color: #ffe082; }");
            client.println("p { font-size: 1.2rem; margin: 10px 0; }");
            client.println(".button { display: inline-block; background: #00c853; border: none; color: white; padding: 16px 50px; text-decoration: none; font-size: 22px; margin: 10px; cursor: pointer; border-radius: 10px; transition: 0.3s; }");
            client.println(".button:hover { background: #00e676; transform: scale(1.05); }");
            client.println(".button2 { background: #ff1744; }");
            client.println(".button2:hover { background: #ff5252; transform: scale(1.05); }");
            client.println(".led-section { background: rgba(255,255,255,0.1); margin: 30px auto; width: 80%; max-width: 400px; padding: 20px; border-radius: 15px; box-shadow: 0 0 20px rgba(0,0,0,0.3); }");
            client.println("</style></head>");
            
            client.println("<body>");
            client.println("<h1>ESP32 LED Kontrol Paneli</h1>");
            client.println("<p>Yerel Ag Uzerinden IoT Kontrolu</p>");

            // Yeşil LED Bölümü (Dinamik Buton)
            client.println("<div class='led-section'>");
            client.println("<h2>Yesil LED (D2)</h2>");
            client.println("<p>Durum: " + greenLedState + "</p>");
            if (greenLedState == "off") {
              client.println("<p><a href='/green/on'><button class='button'>AÇ</button></a></p>");
            } else {
              client.println("<p><a href='/green/off'><button class='button button2'>KAPAT</button></a></p>");
            }
            client.println("</div>");

            // Kırmızı LED Bölümü (Dinamik Buton)
            client.println("<div class='led-section'>");
            client.println("<h2>Kirmizi LED (D4)</h2>");
            client.println("<p>Durum: " + redLedState + "</p>");
            if (redLedState == "off") {
              client.println("<p><a href='/red/on'><button class='button'>AÇ</button></a></p>");
            } else {
              client.println("<p><a href='/red/off'><button class='button button2'>KAPAT</button></a></p>");
            }
            client.println("</div>");

            client.println("</body></html>");

            // Cevabı Gönderdikten Sonra Döngüden Çık
            break;
          } else { 
            currentLine = "";
          }
        } else if (c != '\r') {
          currentLine += c;
        }
      }
    }

    // Başlık Değişkenini Temizle ve Bağlantıyı Kapat
    header = "";
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

Projeyi Derleme ve Çalıştırma

Kod Güncelleme: Kod içindeki Wi-Fi bilgilerinizi (ssid ve password) kendi ağ bilgilerinize göre güncelleyin.
Yükleme: Kodu ESP32 kartınıza yükleyin.
Erişim: Seri Monitörden elde ettiğiniz IP adresini (Örnek: 192.168.1.42) cep telefonunuzun veya bilgisayarınızın web tarayıcısına girin.
Kontrol: Karşınıza çıkan şık kontrol paneli ile her iki LED'i de anında açıp kapatabilirsiniz. Sayfayı cep telefonunuzda açtığınızda, düğmelerin parmağınızla kolayca dokunulabilir boyutta olduğunu göreceksiniz.

Bu proje, temel donanım kontrolünü modern ve kararlı bir web arayüzüyle birleştirmenin harika bir örneğidir. Projenizin bir sonraki aşamasında bu yapıya sensör verilerini veya daha fazla çıkışı kolayca entegre edebilirsiniz!

Elektronik & Yazılım & Yapay Zeka

Sayfalar

30 Ekim 2025

ESP32 İle Web Sunucusu Kurulumu: İki LED'i İnternet Üzerinden Kontrol Edin

🛠️ Neler Gerekiyor?

🛠️ Devre Şeması ve Bileşenler

Kurulum Adımları:

Projeyi Derleme ve Çalıştırma

Translate

Wikipedia