Arduino/ESP Yapılandırma Web Sayfanızı Buluttan Yükleyin: 7 Adım

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

Bir Arduino / ESP (ESP8266/ESP32) projesi oluştururken her şeyi sabit kodlayabilirsiniz. Ancak çoğu zaman bir şeyler ortaya çıkar ve sonunda IoT cihazınızı tekrar IDE'nize yeniden bağlarsınız. Veya yapılandırmaya daha fazla insanın erişmesini sağladınız ve iç işleyişi anlamalarını beklemek yerine bir UI sağlamak istiyorsunuz.

Bu talimat, kullanıcı arayüzünün çoğunu Arduino / ESP yerine buluta nasıl koyacağınızı söyleyecektir. Bunu bu şekilde yapmak, alan ve bellek kullanımından tasarruf etmenizi sağlar. Ücretsiz statik web sayfaları sağlayan bir hizmet, GitHub Pages gibi özellikle "bulut" olarak uygundur, ancak diğer seçenekler de muhtemelen işe yarayacaktır.

Web sayfasını bu şekilde oluşturmak, kullanıcının tarayıcısının 4 adımdan geçmesini gerektirir:

1. Arduino / ESP'den kök url'yi isteyin
2. Aşağıdakileri söyleyen çok basit bir web sayfası alın:
3. Buluttan bir JavaScript dosyası isteyin
4. Asıl sayfayı oluşturan kodu alın

Bu Eğitilebilir Tablo, sayfa hazır olduğunda yukarıdaki adımlara göre Arduino/ESP ile nasıl etkileşime girileceğini de açıklayacaktır.

Bu talimatta oluşturulan kod GitHub'da da bulunabilir.

Önkoşullar

Bu talimat, belirli materyallere ve bazı ön bilgilere erişiminiz olduğunu varsayar:

• Arduino (ağ erişimli) / ESP
• Yukarıdakileri eklemek için bir bilgisayar
• İnternete bağlı WiFi erişimi
• Kurulu Arduino IDE (ayrıca ESP32 için)
• IoT cihazınıza nasıl çizim yükleyeceğinizi biliyorsunuz
• Git ve GitHub'ı nasıl kullanacağını biliyorsun

Adım 1: Basit Bir Web Sunucusu Çizimiyle Başlamak

Mümkün olduğunca basit başlayacağız ve bundan sonra büyümesine izin vereceğiz.

#Dahil etmek

const char* ssid = "sizinki"; const char* şifre = "parolanız"; WiFiSunucu sunucusu(80); void setup() { //Seriyi başlat ve bağlantı noktasının açılmasını bekle: Serial.begin(115200); while(!Seri) {; // seri bağlantı noktasının bağlanmasını bekleyin. Yalnızca yerel USB bağlantı noktası için gereklidir } WiFi.begin(ssid, password); while(WiFi.status() != WL_CONNECTED) { gecikme(500); Seri.print("."); } Serial.println("WiFi bağlandı."); Serial.println("IP adresi: "); Serial.println(WiFi.localIP()); server.begin(); } void loop() { // gelen istemcileri dinle WiFiClient client = server.available(); // gelen istemcileri dinle bool sendResponse = false; // bir yanıt göndermek istiyorsak true olarak ayarlayın String urlLine = ""; // İstenen URL'yi tutmak için bir String yapın if(client) // bir istemci alırsanız, { Serial.println("Yeni İstemci."); // seri bağlantı noktasına bir mesaj yazdırın String currentLine = ""; // istemciden gelen verileri tutmak için bir String yapın while(client.connected()) // istemci bağlıyken döngü { if(client.available()) // istemciden okunacak bayt varsa, { char c = client.read(); // bir bayt oku, sonra if(c == '\n') // bayt yeni satır karakteriyse { // geçerli satır boşsa, arka arkaya iki satırsonu karakteri olur. // istemci HTTP isteğinin sonu budur, bu nedenle bir yanıt gönderin: if(currentLine.length() == 0) { sendResponse = true; // herşey yolunda! kırmak; // while döngüsünden çık } else // yeni bir satırın varsa, currentLine'ı temizle: { if(currentLine.indexOf("GET /") >= 0) // bu URL satırı olmalı { urlLine = currentLine; // daha sonra kullanmak üzere kaydedin } currentLine = ""; // currentLine String'i sıfırlayın } } else if(c != '\r') // eğer satır başı karakterinden başka bir şeyiniz varsa, { currentLine += c; // bunu currentLine'ın sonuna ekleyin } } } if(sendResponse) { Serial.print("İsteyen İstemci "); Serial.println(urlLine); // HTTP başlıkları her zaman bir yanıt koduyla (ör. HTTP/1.1 200 OK) // ve istemcinin ne olduğunu bilmesi için bir içerik türüyle başlar, ardından boş bir satır: client.println("HTTP/1.1 200 OK"); client.println("İçerik tipi:metin/html"); client.println(); if(urlLine.indexOf("GET / ") >= 0) // URL yalnızca bir "/" ise { // HTTP yanıtının içeriği başlığı takip eder: client.println("Merhaba dünya!"); } // HTTP yanıtı başka bir boş satırla biter: client.println(); } // bağlantıyı kapat: client.stop(); Serial.println("İstemci Bağlantısı Kesildi."); } }

Yukarıdaki kodu kopyalayın veya GitHub'daki taahhütten indirin.

SSID'yi ve şifreyi ağınıza uyacak şekilde değiştirmeyi unutmayın.

Bu eskiz, iyi bilinen Arduino'yu kullanıyor

kurmak()

ve

döngü()

fonksiyonlar. İçinde

kurmak()

IDE'ye seri bağlantı başlatılır ve WiFi de öyle. WiFi söz konusu SSID'ye bağlandıktan sonra IP yazdırılır ve web sunucusu başlatılır. Her yinelemede

döngü()

web sunucusunun bağlı istemciler için kontrol edildiği işlev. Bir istemci bağlıysa, istek okunur ve istenen URL bir değişkene kaydedilir. Her şey yolunda görünüyorsa, istenen URL'ye göre sunucudan istemciye bir yanıt gerçekleştirilir.

UYARI! Bu kod, basit tutmak için Arduino String sınıfını kullanır. Dize optimizasyonları bu talimat kapsamında değildir. Minimal Ram Kullanarak Arduino String Manipulation ile ilgili talimatta bununla ilgili daha fazla bilgi edinin.

2. Adım: Uzak JavaScript'i Oluşturma

Arduino / ESP, ziyaretçilerin tarayıcısına bu dosyayı yüklemesini söyleyecektir. Geri kalan her şey bu JavaScript kodu ile yapılacaktır.

Bu Eğitilebilir Tabloda jQuery'den yararlanacağız, bu kesinlikle gerekli değil, ancak işleri kolaylaştıracak.

Bu dosyanın web'den erişilebilir olması gerekir, bunun çalışması için statik bir sayfa sunucusu yeterlidir, örneğin GitHub sayfaları. Bu yüzden muhtemelen yeni bir GitHub deposu oluşturmak ve bir

gh sayfaları

dal. Aşağıdaki kodu bir

.js

doğru daldaki depodaki dosya.

Yukarıdaki kodu kopyalayın veya GitHub'daki taahhütten indirin.

Dosyanızın erişilebilir olup olmadığını kontrol edin. GitHub sayfaları olması durumunda https://username.github.io/repository/your-file.j… adresine gidin (değiştirin

Kullanıcı adı

,

depo

ve

dosyanız.js

doğru parametreler için).

Adım 3: Uzak JavaScript Dosyasını Ziyaretçi Tarayıcısına Yükleme

Artık her şeyi ayarladığımıza göre, web sayfasının uzak JavaScript dosyasını yüklemesinin zamanı geldi.

Bunu, çizimin 88. satırını şuradan değiştirerek yapabilirsiniz:

client.println("Merhaba dünya!"); T

client.println("");

(değiştir

kaynak

özniteliği kendi JavaScript dosyanıza işaret eder). Bu küçük bir html web sayfasıdır, tek yaptığı JavaScript dosyasını ziyaretçilerin tarayıcısına yüklemektir.

Değiştirilen dosya, GitHub'daki ilgili taahhütte de bulunabilir.

Ayarlanan çizimi Arduino / ESP'nize yükleyin.

Adım 4: Sayfaya Yeni Öğeler Ekleme

Boş bir sayfa işe yaramaz, bu yüzden şimdi web sayfasına yeni bir öğe eklemenin zamanı geldi. Şimdilik bu bir YouTube videosu olacak. Bu örnekte bunu gerçekleştirmek için bazı jQuery kodları kullanılacaktır.

Aşağıdaki kod satırını ekleyin

içinde()

işlev:

$('').prop({ kaynak: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', çerçeve sınırı: '0' }).css({ genişlik: '608px', yükseklik: '342px' }).appendTo('vücut');

Bu, bir

iframe

eleman, doğru ayarlayın

kaynak

öznitelik ve css kullanarak boyutu ayarlayın ve öğeyi sayfanın gövdesine ekleyin.

jQuery, web sayfasındaki öğeleri kolayca seçmemize ve değiştirmemize yardımcı olur, bilinmesi gereken bazı temel şeyler:

• $('vücut')

• zaten var olan herhangi bir öğeyi seçer, diğer css seçicileri de kullanılabilir

• $(' ')

  yeni oluşturur

• eleman (ancak belgeye eklemez)

• .appendTo('.ana')

• seçilen/oluşturulan öğeyi css sınıfı 'main' olan bir öğeye ekler

• Öğe eklemek için diğer işlevler

  .append()

  ,

  .prepend()

  ,

  .prependTo()

  ,

  .sokmak()

  ,

  .insertAfter()

  ,

  .insertBefore()

  ,

  .sonrasında()

  ,

  .önce()

Belirsiz bir şey varsa GitHub'daki ilgili taahhüde bakın.

Adım 5: Etkileşimli Öğeler

Bir video eğlencelidir, ancak bu talimatın amacı Arduino/ESP ile etkileşim kurmaktır. Videoyu Arduino/ESP'ye bilgi gönderen ve ayrıca yanıt bekleyen bir düğme ile değiştirelim.

ihtiyacımız olacak

$('')

sayfaya eklemek ve ona bir olay dinleyicisi eklemek için. Eventlistener, belirtilen olay gerçekleştiğinde geri arama işlevini arayacaktır:

$('').text('bir düğme').on('tık', işlev()

{ // butona tıklandığında buradaki kod çalıştırılacaktır }).appendTo('body');

Ve geri arama işlevine bir AJAX isteği ekleyin:

$.get('/ajax', fonksiyon(veri)

{ // AJAX isteği bittiğinde buradaki kod çalıştırılacaktır });

İstek tamamlandığında, döndürülen veriler sayfaya eklenecektir:

$('

').text(veri).appendTo('gövde');

Özetle, yukarıdaki kod bir buton oluşturur, onu web sayfasına ekler, butona tıklandığında bir istek gönderilir ve yanıt da web sayfasına eklenir.

Geri aramaları ilk kez kullanıyorsanız, her şeyin nasıl iç içe olduğunu görmek için GitHub'daki taahhüdü kontrol etmek isteyebilirsiniz.

6. Adım: Etkileşimli Öğeye Yanıt Verin

Elbette, AJAX isteği bir yanıt gerektirir.

için doğru yanıtı oluşturmak için

/ajax

url eklememiz gerekecek

başka eğer()

kontrol eden if ifadesinin kapanış parantezinden hemen sonra

/

url.

else if(urlLine.indexOf("GET /ajax ") >= 0)

{ client.print("Merhaba!"); }

GitHub'daki taahhütte, tarayıcıya her isteğin benzersiz olduğunu göstermek için bir sayaç da ekledim.

7. Adım: Sonuç

Bu, bu talimatın sonu. Artık, ziyaretçinin tarayıcısına buluttan bir JavaScript dosyası yüklemesini söyleyen küçük bir web sayfasına hizmet veren bir Arduino / ESP'niz var. JavaScript yüklendikten sonra, kullanıcının Arduino / ESP ile iletişim kurması için bir UI sağlayan web sayfasının geri kalan içeriğini oluşturur.

Artık web sayfasında daha fazla öğe oluşturmak ve ayarları bir tür ROM'a (EEPROM / NVS / vb) yerel olarak kaydetmek hayal gücünüze kalmış.

Okuduğunuz için teşekkür ederiz ve lütfen geri bildirimde bulunmaktan çekinmeyin!