ESP32 Tabanlı Web Sunucusu Kullanan İnternet Kontrollü LED: 10 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:19

Projeye Genel Bakış

Bu örnekte, dünyanın her yerinden erişilebilen LED durumunu kontrol etmek için ESP32 tabanlı bir web sunucusunun nasıl yapıldığını öğreneceğiz. Bu proje için bir Mac bilgisayara ihtiyacınız olacak, ancak bu yazılımı Raspberry Pi gibi ucuz ve düşük güçlü bir bilgisayarda bile çalıştırabilirsiniz.

Arduino IDE ile ESP32'nin Hazırlanması

Arduino IDE ve Arduino programlama dilini kullanarak ESP32'yi programlamaya başlamak için özel bir eklentiye ihtiyacınız olacak. Aşağıdaki bağlantıdan Mac OS'de ESP32 için Arduino IDE'nin nasıl hazırlanacağını okuyun.

Gereçler

Bu eğitim için aşağıdaki öğelere ihtiyacınız olacak:

• ESP32 geliştirme kartı5mm
• LEDDirenç 220ohm
• I2C modüllü 16x2 LCD ekran
• ekmek tahtası
• Atlama telleri
• Mikro USB kablosu

Adım 1: Devreyi Kurmak

Aşağıdaki şematik diyagramda gösterildiği gibi bağlantıları gerçekleştirin

ESP32 ve GND'deki 3V3 besleme voltajı çıkışını devre tahtasına bağlayarak başlayın. Dijital çıkış pini olarak GPIO pin 23'ü kullanarak LED'i direnç yoluyla ESP32'ye bağlayın. Bundan sonra, 16x2 LCD ekranın SDA pinini GPIO pin 21'e ve SCL'yi GPIO pin 22'ye bağlayın.

2. Adım: SPIFFS Dosya Sistemine Hızlı Genel Bakış

SPIFFS, "Seri Çevre Birimi Arayüzü Flash Dosya Sistemi" anlamına gelir, yani SPI aracılığıyla veri aktaran flash bellek için dosya sistemi. Buna göre SPIFFS, SPI veri yolu (ESP32 flash bellek gibi) aracılığıyla veri ileten flash çipli mikro denetleyiciler için tasarlanmış basitleştirilmiş bir dosya sistemidir.

SPIFFS, aşağıdaki durumlarda ESP32 ile kullanım için en kullanışlıdır:

• Ayarları depolamak için dosyalar oluşturma
• Kalıcı veri depolama.
• Az miktarda veri depolamak için dosyalar oluşturma (bunun için microSD kart kullanmak yerine).
• Bir web sunucusu oluşturmak için HTML ve CSS dosyalarının saklanması.

Adım 3: Mac OS'de SPIFFS Önyükleyicisinin Kurulumu

Doğrudan Arduino IDE'deki eklentiyi kullanarak ESP32 dosya sisteminde depolanan dosyalara veri oluşturabilir, kaydedebilir ve yazabilirsiniz.

Her şeyden önce, Arduino IDE'nin en son sürümünün kurulu olduğundan emin olun ve ardından aşağıdakileri yapın:

• Aşağıdaki bağlantıyı açın ve “ESP32FS-1.0.zip” arşivini indirin
• Belgeler klasöründe bulunan Arduino IDE dizinine gidin.
• Mevcut değilse bir araçlar klasörü oluşturun. Araçlar dizininin içinde başka bir ESP32FS klasörü oluşturun. ESP32FS'nin içinde, araç adı verilen başka bir tane oluşturun.
• 1. adımda indirilen ZIP arşivini araç klasörüne açın.
• Arduino IDE'nizi yeniden başlatın.
• Eklentinin başarıyla yüklenip yüklenmediğini kontrol etmek için Arduino IDE'yi açın ve “Araçlar”a tıklayın ve bu menüde “ESP32 Sketch Data Upload” öğesinin olup olmadığını kontrol edin.

Adım 4: Kitaplıkları Yükleme

ESPAsyncWebServer ve AsyncTCP kitaplıkları, ESP32 dosya sisteminden dosyaları kullanarak bir web sunucusu oluşturmanıza olanak tanır. Bu kütüphaneler hakkında daha fazla bilgi için aşağıdaki bağlantıyı kontrol edin.

ESPAsyncWebServer kitaplığını kurun

• Kütüphanenin ZIP arşivini indirmek için tıklayınız.
• Bu arşivi açın. ESPAsyncWebServer-master klasörünü almalısınız.
• "ESPAsyncWebServer" olarak yeniden adlandırın.

AsyncTCP kitaplığını yükleyin

• Kütüphanenin ZIP arşivini indirmek için tıklayınız.
• Bu arşivi açın. AsyncTCP-master klasörünü almalısınız.
• “AsyncTCP” olarak yeniden adlandırın.

ESPAsyncWebServer ve AsyncTCP klasörlerini Documents dizininde bulunan kitaplıklar klasörüne taşıyın.

Son olarak, Arduino IDE'yi yeniden başlatın.

Adım 5: Aşağıdaki İçeriğe Sahip Bir Index.html ve Style.css Dosyası Oluşturun

Geçiş düğmesi için HTML/CSS Şablonu aşağıdaki kaynaktan alınmıştır.

Adım 6: Arduino Kodu

Esas olarak kod, SPIFFS kullanılarak ESP32 Web Sunucusundan alınan Arduino koduna ve Arduino IDE üzerinde ESP32 ile I2C LCD Nasıl Kullanılır'a dayanıyordu.

7. Adım: Arduino Kodunu ve Dosyalarını SPIFFS Yükleyiciyi Kullanarak Yükleyin

• Arduino kodunun eskiz klasörünü açın.
• Bu klasörün içinde “data” adında yeni bir klasör oluşturun.
• Veri klasörünün içine index.html ve style.css'yi koymanız gerekir.
• Arduino kodunu yükle
• Ardından, dosyaları yüklemek için Araçlar> ESP32 Sketch Data Upload'da Arduino IDE'ye tıklayın.

Adım 8: ESP32 Web Sunucusu IP Adresini Belirleyin

İki şekilde bulunabilir.

• Arduino IDE'de seri monitör (Araçlar> Seri monitör)
• LCD ekranda

9. Adım: Yerel Web Sunucusunu Test Etme

Ardından, istediğiniz bir web tarayıcısını açın ve aşağıdaki IP adresini adres çubuğuna yapıştırın. Aşağıdaki ekran görüntüsüne benzer bir çıktı almalısınız.

Adım 10: Ngrok Kullanarak Dünyanın Her Yerinden Yerel Web Sunucusuna Erişim

Ngrok, harici internetten PC'nizde çalışan bir web sunucusuna veya başka bir hizmete uzaktan erişimi düzenlemenizi sağlayan bir platformdur. Erişim, ngrok'un başlangıcında oluşturulan güvenli tünel aracılığıyla düzenlenir.

• Bu bağlantıyı takip edin ve kaydolun.
• Bir hesap oluşturduktan sonra giriş yapın ve "Auth" sekmesine gidin. “Tünel Yetkilendirmeniz” alanındaki satırı kopyalayın.
• Gezinme çubuğundaki “İndir” sekmesine tıklayın. İşletim sisteminize uygun ngrok sürümünü seçin ve indirin.
• İndirilen klasörü açın ve komut satırını çalıştırın.
• Aşağıdaki komutu girerek hesabınızı bağlayın

./ngrok authtoken

80 numaralı bağlantı noktasında bir HTTP tüneli başlatın

./ngrok http IP_Adresiniz:80

Her şey doğru yapıldıysa, tünel durumu “online” olarak değişmeli ve “Yönlendirme” sütununda bir yönlendirme bağlantısı görünmelidir. Bu bağlantıyı tarayıcınıza girerek web sunucusuna dünyanın her yerinden erişebilirsiniz.