ESP8266WebServer kullanarak kolay yolla Web sunucusu kurmak

Bu yazıda; AT komutlarını kullanmadan, bizim için bu işleri yapacak ESP8266WebServer kütüphanesini kullanarak çok basit bir web sunucusu kuracağız. İhtiyacımız olanlar:

Arduino Uno (Nano ya da herhangi bir programlayıcı da olabilir)
ESP8266-01
10K direnç
Breadboard ve çeşitli uzunlukta kablolar

ESP8266-01 pinleri

Ben ESP8266-01 kullandım ama diğer versiyonlarda da kullanılabilir. 8266 programlayıcı arabirimim yok bu sebeple elimdeki Arduino UNO'yu yazdığım kodları ESP8266'ya aktarmak için kullandım. Kodu aktardıktan sonra Arduino'ya ihtiyacımız kalmıyor. ESP8266 standalone web sunucusu olarak hizmet veriyor.

Arduino ESP8266 bağlantısı

Burada ESP8266'nın GPIO0 pinini 10K direnç ile topraklamamız lazım aksi taktirde aşağıdaki hatayı alıyoruz Arduino IDE'den. Programlama tamamlandıktan sonra toprak bağlantısını çıkarmak gerekiyor. Bu nokta önemli. Eğer bu bağlantıyı kesmezseniz güç kesildikten sonra ESP8266 tekrar başlarken sorun veriyor.

GPIO0 -> GND bağlantısı yapmazsak alacağımız hata

eğer "error: espcomm_upload_mem failed" hatası alırsanız, ki ben bu hatayı çok sık aldım, bağlantıyı kesip tekrar takın.

Arduino IDE Ayarları

Sisteminizde Arduino IDE olduğunu varsayıyorum. Ancak kullanacağımız ESP8266, IDE'nin standard kurulumunda gelmiyor o yüzden bazı ek işlemler yapmamız gerekecek.

Dosya>Tercihler menüsünden Ek Devre Kartları Yöneticisi URL'leri kısmına aşağıdaki adresi ekleyelim.

http://arduino.esp8266.com/stable/package_esp8266com_index.json

Daha sonra Araçlar>Kart>Kart Yöneticisinden ESP8266'yı bulup kuralım:

ESP8266 Kart yöneticisi

Daha sonra kullanacağımız tek kütüphane olan ESP8266WebServer'ı eklememiz gerekiyor. Taslak>library ekle>libraryleri düzenle (IDE'nin acilen düzgün şekilde Türkçeye çevrilmesi gerekiyor)

ESP8266WebServer kütüphanesi

Sunucu Kodları


#include <ESP8266WebServer.h>
 
const char* ssid = "WIFI_AG_ADI";
const char* password = "WIFI_SIFRESI";

ESP8266WebServer server(80);


void ana_sayfa() {
  Serial.print("Ana sayfa");
   char *html =
  "<HTML><head>"
  "<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>"
  "<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>"
  "</head> "
  "<nav class='navbar navbar-inverse'>"
  "<div class='container-fluid'>"
    "<div class='navbar-header'>"
      "<a class='navbar-brand' href='#'>ESP8266 Web Server</a>"
    "</div>"
    "<ul class='nav navbar-nav'>"
      "<li class='active'><a href='#'>Ana Sayfa</a></li>"
      "<li><a href='/hakkimizda'>Hakkımızda</a></li>"
    "</ul>"
  "</div>"
  "</nav>"
  "Cüneyt Aliustaoğlu Ana Sayfa"
  "</HTML>";
  server.send(200, "text/html", html);
  delay(100);
}

void hakkimizda() {
  Serial.print("Hakkımızda");
  server.send(200, "text/plain", "Hakkımızda");
  delay(100);
}
 
void setup () {
 
  Serial.begin(115200);
  WiFi.begin(ssid, password);
 
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.print("Bağlanıyor..");
  }
  Serial.print("Bağlandı ");
  Serial.print("IP adresi: ");
  Serial.print(WiFi.localIP());
  server.on("/", ana_sayfa);
  server.on("/hakkimizda", hakkimizda);
 
  server.begin();
  Serial.println("HTTP başlatıldı");
}
 
void loop() {
  server.handleClient();
  delay(1000);
}

Görüldüğü gibi alt seviye kodlarla uğraşmadan sanki üst seviye bir dille (örneğin Node.JS) yazar gibi web sunucumuzu oluşturduk. Bundan sonrası tamamen HTML bilgisi. Ben burada Bootstrap kullandım ancak bu kısım tamamen sizin keyfinize kalmış. W3schools'ta bol bol örnek var.

ESP8266WebServer server(80) ile sunucu nesnemizi yaratıyor ve 80. portta sunucuyu kurmasını bildiriyoruz. 80 varsayılan HTTP portudur. Bu portu adrese eklemeye gerek yoktur.
örneğin http://192.168.1.71:80 yanlış bir kullanım değildir fakat gereksizdir. Eğer başka bir porta (örneğin 3000) kursaydık sunucuyu http://192.168.1.71:3000 ile çağırmamız gerekecekti. Sizin adresiniz 192.168.1.71'den farklı olabilir. Ben bu adresi terminalden okuyup aldım. Serial.print(WiFi.localIP()) kısmında terminale IP adresimizi yazmasını söylüyoruz. Ancak bazı durumlarda terminale erişimimiz olmayabilir. (Örneğin 8266'yı programladık ve Arduino'dan bağımsız kullanmaya başladık) Ya da IP adresimiz daha sonra değişebilir. Bu durumda en kolay yol Advanced Port Scanner gibi uygulamaları kullanmak olabilir.

WiFi.begin(ssid, password); ile ağ adımızı ve şifremizi 8266'ya bildiriyoruz. WiFi.status() WL_CONNECTED'e eşit oluncaya dek bekliyoruz.

Daha sonra route'larımızı ayarlıyoruz.

server.on("/", ana_sayfa); server.on("/hakkimizda", hakkimizda);

server.begin(); kısmıyla sunucuyu çalıştırıyoruz.

Buraya kadar olan kısım setup kısmı idi. loop için yalnızca tek bir komutumuz var:

server.handleClient();

Olabilecek en asgari kodla web sunucumuzu kurduk. Bundan sonrası HTML bilgisi ve ihtiyacınıza göre düzenleme. ESP8266WebServer çok gelişmiş bir kütüphane değil ancak ESP8266 gibi 3-5 dolarlık bir çiple, yüzlerce kullanıcıya hizmet veren bir uygulama yazmayacağız elbette. Ancak, yüzlerce kullanıcıya hizmet veren bir sunucuyu OrangePi veya Raspberry Pi gibi ucuz board üzerine kurup, 8266 ile bu sunucuya POST eden (örneğin sıcaklık ve nem sensörü bilgisi), başka sistemlerden (örneğin wunderground) GET ile bilgi alıp işleyen görece daha karmaşık ve kalabalık sistemleri çok ucuza mal edebiliriz.

Kodumuzu ESP8266'ya yükledikten sonra Arduino ile işimiz kalmıyor. Rx, Tx, GPIO0 ve 10K direnç bağlantılarını söktükten sonra tek yapmamız gereken ESP8266'ya 3.3 Volt vermek.

Yine de 8266 üzerine kurduğunuz sunucuyu dış dünyaya bağlamak, hatta arama motorlarına kaydetmek istiyorsanız bir önceki yazımdaki adımları(NO-IP ve sunucu ayarları kısmından sonraki) rahatlıkla uygulayabilirsiniz:

http://cuneyt.aliustaoglu.biz/tr/orange-pi-zero-kurulumu-ve-dinamik-dns-ile-dunyaya-acilmak/