Arkadaşlar merhaba, bu yazımızda NodeMCU kullanarak Web Server üzerinden led, sıcaklık ve nem değerlerimizi gözlemleyebileceğimiz bir ara yüz tasarımı yapacağız.

IoT projeleri artık hayatımızın vazgeçilmezi oldu. Daha önceki yazılarımızda home assistant, arduino ıot cloud vey blynk gibi uygulamalar sayesinde hazır şablonlar kullanarak butonlarımızı, ledlerimizi veya sıcaklık gibi değerlerimizi kontrol ettik. Şimdi beraber yapacağımız bu proje sayesinde herhangi bir uygulamaya ihtiyacımız olmadan, hiç bir ücret ödemeden ve en önemlisi proje sınırlaması olmadan kendi tasarlayacağımız ara yüz sayesinde verilerimizi kontrol edeceğiz.

Not: Bu projemizde web ara yüz için nodemcu ile aynı Wİ-Fİ ağında olmamız gerekmektedir. HTML dili ve Arduino IDE kullanarak projemizi gerçekleştireceğiz.

HTML

Web sayfalarını oluşturma aşamasında kullanılan standart bir metin işaret dili olan HTML açılımı “Hyper Text Markup Language” olarak bilinir. Genel bilinen yanlış kanının aksine HTML bir programlama dili değildir. Daha açık anlatmak gerekirse, Chrome, Firefox, Yandex gibi tarayıcıların okuyup anlamlandırdığı dil HTML dilidir.

En Çok Kullanılan HTML Kodları

  • <html>: Kök etiket olarak da bilinen bu temel kullanımda tüm HTML kodları, bu iki etiket arasında tanımlanmak zorundadır.
  • <body>: Görünebilir tüm HTML kod parçalarının eklendiği etiket alanıdır.
  • <head>: Web sayfasının dili, başlığı ve diğer düzenlemelerinin yer aldığı etikettir.
  • <title>: Web sitesinin başlık alanını tanımlamak için kullanılır. (Üst kısım)
  • <h>: Başlık kodu.( Arayüz üzerindeki başlıklar)
  • <a>: Bağlantı Kodu (Link)
  • <button>: Buton kodu, buton oluşturmanızı sağlar.
  • <img>: Resim eklemenizi sağlayan koddur.
  • <br>: Satır sonu kodu.
  • <p>: Paragraf kodu.

Malzemeler:

NodeMCU ile Web Server Kullanımı için Devre Şeması

NodeMCU ile Web Server Kullanımı Kodlar

Gerekli kütüphaneleri kurduktan sonra kodları yükleyin. Kodları yükledikten sonra seri port ekranında karşınıza bir “IP” adresi çıkacak. IP adresini tarayıcıya yazdığınız zaman ara yüz karşınıza çıkacaktır. HTML kısmında değişiklikler yaparak daha güzel ara yüzler tasarlayacağınıza eminim. 🚀

Detaylı anlatım için Robolink Teknoloji Youtube kanalındaki videomuzu izlemenizi tavsiye ederim. Sorularınız olursa mutlaka yorum olarak yazın. 🙂 Herkese iyi çalışmalar…

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz