Web Sitesi Kontrollü Yılbaşı Ağacı (Herkes Kontrol Edebilir): 19 Adım (Resimlerle)

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

Bir web sitesi tarafından kontrol edilen Noel ağacının nasıl göründüğünü bilmek ister misiniz?

İşte Noel ağacımın projesini gösteren video. Canlı yayın şu ana kadar sona erdi, ancak neler olup bittiğini yakalayan bir video yaptım:

Bu yıl Aralık ayının ortasında, bir çalışma haftasının ortasında yatağımda uzanmış uyumaya çalışıyordum. Ve uyumak yerine yapılacak havalı bir Noel projesinin ne olacağını düşünüyordum. Ve sonra aklıma harika bir fikir geldi.

Noel süsleriyle tembel olduğum için, Noel ışıklarımı başka birinin kontrol etmesine izin vermek harika olurdu, bu yüzden endişelenmeme gerek kalmayacak.

"Bir web sitesi arayüzü aracılığıyla HERKESİN kontrol edebileceği bir Noel ağacı ışıkları yapsaydım ne olurdu?"

(iki hafta uykusuz geceler ekleyin)

Ben de başardım.

ESP8266 Arduino üzerinden internete bağlı yirmi RGB LED'li bir Noel ağacı.

Bir arkadaşım (teşekkür ederim JP) bir web sitesi kurmama yardım etti (çünkü web sitesi ile ilgili şeyler için akıcı bir programcı değilim).

Ve ağacımın 7/24 youtube canlı akışını kurduk, böylece her zaman neyi açıp kapattığınızı görebileceksiniz.

Bu proje bu yıl için ideal çünkü çoğumuz karantinadaydık, arkadaşlar ve aile ile buluşamıyor ve sosyalleşemiyorduk. Neden Noel ağacı aracılığıyla birleşmiyorsunuz:)

Bu Eğitilebilir Kitapta, bu projenin nasıl yapıldığını ayrıntılı olarak açıklayacağım.

Adım 1: Beceri Seviyesi

Bu proje daha çok yazılım odaklı. Ama korkma Google amcanın biraz şansı ve yardımı çok yardımcı olacaktır:)

Bir dizi 3 beceriye sahip olmanız gerekecek (ya da onları endişelenmeden öğreneceksiniz): bir web sunucusu bölümü, Arduino bölümü ve elbette Noel ağacı!

Önerilen bilgi:

• Temel bilgisayar ve programlama becerileri

• Temel Linux terminal bilgisi

• Temel bilgisayar ağı bilgisi

• Temel elektronik bilgisi

• Google ve diğer "özel" yetenekleri kullanma becerileri

• Yılbaşı ağacı kurmayı bilmeli:)

Biraz teknoloji ve programlama anlayışınız varsa, bu şeyi bu Eğitilebilir Tabloya göre ayarlamayı öğrenebilmelisiniz.

2. Adım: Araçlar ve Bileşenler

Noel ağacı tarafında şunlara ihtiyacınız olacak: • Noel ağacı (d'oh…)

• Bir NodeMCU mikro denetleyici kartı

(ESP32 veya diğer Wi-Fi veya Ethernet özellikli kartları da kullanabilirsiniz)

• Adreslenebilir RGB LED şerit. adreslenebilir RGB led şerit, birçok Arduino GPIO'sunu kurtaracak (https://www.sparkfun.com/products/11020)

• NodeMCU için yazılım (bu talimatta verilmiştir)

Sunucu tarafında ihtiyacınız olacak:

• Genel IP'ye sahip sanal bir özel sunucu. Burada DigitalOcean'da 100 $ ücretsiz alırsınız

• Herhangi bir kayıt kuruluşuna kaydolabileceğiniz bir alan adı (isteğe bağlı), örneğin

• Özel Kod (bu Eğitilebilir Kitapla birlikte verilir)

Adım 3: Sanal Makineyi (bilgisayar) yapılandırın BÖLÜM 1

Hemen kodlamaya geçelim:)

Web sitesi ve NodeMCU ile iletişim kuracak bir sunucuya ihtiyacımız var.

DigitalOcean'daki sunucular, genel IP adresine sahip bir sanal makineye sahip olmamızı sağlar; bu, üzerinde hizmetler çalıştırabileceğimiz ve onlara dünya çapında erişebileceğimiz anlamına gelir.

Aylık DigitalOcean aboneliği ödedikten sonra (60 günlük ücretsiz deneme sürümünü kullanabilirsiniz), bir proje oluşturun ve ona Noel ağacı veya istediğiniz herhangi bir ad verin.

Artık sanal makinenizi (uzaktan erişilebilir sanal bilgisayar) "Bir damlacıkla başlayın" (temelde DigitalOcean'ın bir sanal makinenin adıdır) üzerine tıklayarak oluşturabilirsiniz.

Bir yapılandırma sayfası açılacak ve bir varsayılanla kalabilirsiniz: Ubuntu görüntüsü, temel plan ve blok depolama yok (5$ /ay)

4. Adım: Sanal Makineyi (bilgisayar) yapılandırın BÖLÜM 2

Veri merkezi bölgesi, sunucunuzun oluşturulacağı yerdir.

Size ve potansiyel kullanıcılarınıza en yakın olanı seçin. Bu, en düşük yanıt süresini sağlayacaktır.

Ayrıca, Kimlik Doğrulama bölümünde, sanal makinenize erişmek için bir şifre girmeniz istenecektir.

Sonlandır ve oluştur bölümünde, varsayılan olarak 1 damlacık tutun, bir ana bilgisayar adı seçin (yine Noel ağacı), varsayılan olarak seçilmemişse daha önce oluşturduğunuz projenizi seçin ve Damlacık oluştur'a tıklayın. Bu birkaç dakika sürecek. Soldaki navigasyon bölümünde projenize tıklayarak damlacığınızı göreceksiniz.

Adım 5: Sanal Makineyi (bilgisayar) yapılandırın BÖLÜM 3

Damlacığın sağındaki üç noktaya tıklayarak, sanal bilgisayarınıza erişmenizi sağlayacak olan Access konsoluna tıklayabilirsiniz.

Yeni bir küçük tarayıcı penceresi açılacaktır. Şimdi, bu, Windows 10 veya Grafik arayüzlü Ubuntu bilgisayarınızdaki gibi bir masaüstü ortamı değil.

Ancak, tüm bunlar bir konsol arayüzü aracılığıyla yapılabilir.

Göründüğü kadar korkutucu değil:)

6. Adım: Sanal Makineyi (bilgisayar) yapılandırın BÖLÜM 4

DigitalOcean bulutunda kendi sanal makinenizi başarıyla oluşturdunuz.

Sonraki adımlarda Apache adında bir web sunucusu kuracak ve kendi web sayfanızı kuracaksınız.

Filezilla istemcisini buradan indirin https://filezilla-project.org/download.php?platfo… (veya 32bit işletim sistemi için 32bit sürümünü bulun) ve kurun. Bir FTP (Dosya Aktarım Protokolü) istemcisidir.

Dosyalara erişebilecek ve sanal makinenizden dosyalara aktarabileceksiniz.

Kurulduktan sonra dosya → site yöneticisi → yeni site'ye tıklayın ve yukarıdaki resimdeki gibi verileri girin.

Protokol: SFTP (Güvenli Dosya Aktarım Protokolü)

Ana bilgisayar: Sunucunuzun IP'si, DigitalOcean projenizde bulun.

Kullanıcı köktür ve parola, damlacığınızı oluştururken belirlediğiniz şeydir.

Tamam'a tıklayın ve sanal makinenize bağlanın.

Uyarılacaksınız, ana bilgisayar anahtarı bilinmiyor. İkinci resmi takip edin.

Proje için yerel bir klasör oluşturun ve buradan indireceğiniz proje dosyalarınızı çıkartın.

Kodu her test etmek veya güncellemek istediğinizde dosyalarınızı bilgisayarınızda düzenleyecek ve sanal makinenize aktaracaksınız.

7. Adım: Bir Web Sunucusu Kurun

Kullanıcı adı root ve şifrenizle droplet konsolunuza giriş yapın.

Grafik arayüzümüz olmadığı için sanal makinenizi kontrol etmek için komutlar kullanıyoruz. Ubuntu'da (Linux) kullanacağınız bazı genel komutlar şunlardır:

• pwd – geçerli dizini yazdır

• ls – geçerli dizindeki dosya ve klasörleri listele

• cd / – / dizinine taşı (vb, bin, boot, dev, root, home, var vb. gibi linux ana dizinlerini içeren klasör)

Çalıştır derken, komutu girin ve enter'a basın.

Şimdi sistemi güncellemek için apt-get update -y komutunu çalıştıracağız.

Apache web sunucusunu kurmak için apt install apache2 -y komutunu çalıştırın.

Apache karşılama ekranınıza tarayıcınızdan https://virtual-machine-ip üzerinden erişilebilir olmalıdır.

Virtual-machine-ip'i sanal makine ipiniz ile değiştirin, örneğin 165.12.45.123. Otomatik olarak ekleneceği için https://'yi de atlayabilirsiniz.

Tebrikler!

Not:

Web sitenizin IP adresi yerine bir adla erişilebilir olmasını istiyorsanız (https://blinkmytree.live/ kullandığım gibi), alan sağlayıcı site GoDaddy veya benzerine (namecheap.com vb.) gidin ve talimatları izleyin. burada:

Bazı alan adları çok ucuzdur. Etki alanım yılda sadece 2$'a mal oldu. Kesinlikle paraya değer:)

Adım 8: Bir Web Uygulama Çerçevesi Kurun

Konsolumuza geri dönün. korkma:)

/home içinde app adında bir klasör oluşturmak için Filezilla'yı kullanın, böylece /home/app sizin klasörünüz olur

Uygulama klasörünün içine gitmek için cd /home/app komutunu çalıştırın.

npm paket yöneticisini kurmak için apt install npm -y komutunu çalıştırın. Bu birkaç dakika sürecek.

Bir uygulama hakkındaki ana paket verilerini izleyecek/hatırlayacak bir package.json dosyası oluşturmak için npm init -y komutunu çalıştırın.

Modül cors, express'i kurmak için npm --save install cors express'i çalıştırın

Cors, siteler arası erişimi yapılandırma modülüdür ve ekspres bir web uygulaması çerçevesidir.

Npm, kullandığımız bir paket yöneticisidir ve bir http sunucusuyla birlikte LED'lere renk uygulamak için HTTP isteklerini kabul edecek, değerlerini (renklerini) işaretleyecek olan uygulama programlama arabirimimizi (API) programlamak için node.js JavaScript çalışma zamanını kullanacağız. bellekte ve istediği zaman değerleri NodeMcu'ya iletir.

Not: NodeMcu'daki düğümün, node.js'deki düğümle hiçbir ilgisi yoktur. NodeMcu, internet bağlantılı herhangi bir arduino geliştirme kartı, NXP geliştirme kartı veya özel bir Microchip/NXP/Renesas/STM/Atmel PCB ile değiştirilebilir. Node.js ayrıca. Net çerçevesi, PHP veya başka bir platform ile değiştirilebilir. Ancak basitlik için NodeMCU ve Node.js kullanıyoruz.

Şimdi node.js'de küçük bir program çalıştırabilirsek bir test yapalım.

Yerel klasörünüzde notepad/notepad++ veya kullandığınız diğer düzenleyici veya entegre geliştirme ortamı (Visual Studio Code https://code.visualstudio.com/) ile index.js adlı bir dosya oluşturun.

İçine bu kodu koyun:

var http = require('http');

http.createServer(işlev (gerekli, res) {

res.writeHead(200, {'İçerik Türü': 'metin/düz'});

res.end('Merhaba Dünya!');

}).dinle(8080);

Kaydedin ve FileZilla'daki dosyaya çift tıklama/sürükle-bırak ile index.js olarak /home/app klasörüne aktarın.

index.js düğümünü çalıştırın ve çalışır durumda bırakın.

Artık https://virtual-machine-ip:8080 adresindeki sayfamıza tarayıcımızdan erişebiliriz. Merhaba Dünya metni içeren beyaz bir sayfa görünecektir.

Tebrikler, node.js'de bir web sunucusu oluşturdunuz!

9. Adım: Yazılımı Hazırlayın

Konsola gidin ve ctrl+C tuşlarına basarak programı durdurun.

/home/app/ içindeki index.js dosyanızı değiştirin ve bizim index.js dosyamızla değiştirin.

Web sitesi için tüm dosyaları buradan indirebilirsiniz:

drive.google.com/file/d/1oIFdipoJxg6PF5klO…

Noel ağacı kodumuzu html klasöründen Filezilla ile /var/www/html/ dizinine kopyalayın. Biraz zaman alacak. Size sorarsa, index.html'yi yenisiyle değiştirin.

IP'nizi tekrar favori web tarayıcınıza yerleştirin.

Web uygulamanızın ön ucunu https://virtual-machine-ip'de kullanıma sundunuz.

Adım 10: Arka Uç Kodunu Anlama ve Çalıştırma

Not: arka uç kodunuz /home/app konumunda

Unutmayın, kodunuzu yerel olarak düzenledikten sonra, FileZilla kullanarak sunucunuza yüklemeyi ve düğüm uygulamanızı yeniden başlatmayı unutmayın (konsol: ctrl+c, yukarı ok (son komut düğümü index.js'yi gösterir), girin)

Kodun çalışması için önce birkaç veri girmeniz gerekir.

İlk olarak, index.js'deki ana bilgisayar adı değişkenini kendi etki alanınıza veya IP'nize değiştirmeniz gerekecektir (şuna benzeyen bir şey: 165.13.45.123).

İkinci olarak, anlamanız için size kod boyunca rehberlik edeceğim. Kodda yaptığım yorumları atlamadığınızdan emin olun.

İndeks.js dosyasında ekspres modül kullanarak bir uygulama oluşturduğumuzu görebilirsiniz. Ardından CORS kurallarını ona uyguluyoruz, API'leri ekliyoruz ve bir http sunucusu başlatıyoruz. Bu sunucu, GET http istekleri aracılığıyla bir web sayfasına hizmet etmeyecek, ancak GET http isteği aracılığıyla led durumlarına hizmet edecek ve alınan PUT http isteklerinde led durumlarını güncelleyecektir.

API'ler, uygulamalar arasında bilgi alışverişi yapmak için yaygın bir uygulamadır. En yaygın kullandığımız, kendi kullandığımız REST API'leridir. Vatansızdırlar ve kalıcı bir bağlantıları yoktur (shorturl.at/aoBC3, PUT istekleri, uygulama dizisi değişkenindeki (bellek) led durumlarını basitçe günceller, GET istekleri sadece led durumlarını bir istemciye gönderir.

İstemciye verilen yanıt genellikle JSON notasyonundadır, ancak 30 LED durumunun bu basit yanıtı için, virgülle ayrılmış 30 değerden oluşan bir dize göndermemiz yeterlidir.

Adım 11: Ön Uç Kodunu Anlama ve Çalıştırma BÖLÜM 1

Not: ön uç kodunuz /var/www/html adresindedir.

Unutmayın, kodunuzu yerel olarak düzenledikten sonra FileZilla kullanarak sunucunuza yüklemeyi unutmayın. node.js'den farklı olarak Apache kendini otomatik olarak yeniden başlatır, ancak sayfanızı tarayıcınıza yeniden yüklemeniz gerekir. Sayfanızın önbelleğini de yenilemek ve silmek için ctrl+f5 tuşlarını kullanın.

Kodun çalışması için birkaç veri girmeniz gerekecektir. İlk olarak, index.html içindeki send_request işlevindeki url değişkenini flashmytree.live'den kendi etki alanınıza veya IP'nize değiştirmeniz gerekir, örneğin: 165.13.45.123.

İkinci olarak, anlamanız için size kod boyunca rehberlik edeceğim. Kodda yaptığım yorumları atlamadığınızdan emin olun. Sayfa bir HTML belgesidir. Tüm CSS kurallarını (sayfa stili ve içerik konumu) bir kenara bırakarak, işlevsellik açısından önemli içeriğe bakacağız. CSS hakkında daha fazla bilgi edinmek için https://www.w3schools.com/css/ adresini ziyaret edin.

Bu ana özelliklerin (çevik yöntemlerin uzmanları kullanıcı hikayeleri diyebilir) sayfada olmasını istedik:

• Sayfaya gömülü canlı video

• Gimp resim düzenleyicide (https://www.gimp.org/) manipüle edilmiş bir Noel ağacı üzerindeki tıklanabilir LED'ler.

• Bir sunucu ile gerçek iletişim, led durumlarını değiştirmeyi bekliyor.

Adım 12: Ön Uç Kodunu Anlama ve Çalıştırma BÖLÜM 2

Seçilecek sayıda LED ve renk içeren Noel ağacımıza sahip olduğumuzda, alanlar oluşturmamız ve bunlara eylemler uygulamamız gerekiyor, bu nedenle bir görüntünün seçici bölümünde renkli LED'e tıkladığımızda bir renk seçilecek ve bir renk seçilecektir. bir LED'e tıklıyoruz, komut Arduino'nun değerini seçeceği sunucuya gönderilecek.

En yeni HTML standardı olan HTML5'te görüntü haritası adı verilen bir şey vardır. Bir görüntü üzerinde eylem dinleyicileri uygulayabileceğimiz alanları tanımlamamızı sağlar.

Tanımlamamız gereken çok fazla alan olduğu için bu alanları tanımlamak için çevrimiçi https://www.image-map.net/ aracını kullandık ve HTML kodunu sayfamıza kopyaladık.

Bunu yaptıktan sonra, çağırdığı bir fonksiyon ile onclick olayı ve bu alanların her birine bir LED numarası parametresi koyabiliriz. Yukarıdaki ekran görüntüsüne bakın.

Adım 13: Ön Uç Kodunu Anlama ve Çalıştırma BÖLÜM 3

HTML gövdesinin sonunda, bir bölgede, onclick olaylarında çağırdığımız işlevleri tanımlamak için biraz JavaScript koyarız. Genel olarak, bir PUT isteği göndermek için kullandığımız bir XMLHttpRequest tanımlarız.

İki işlevimiz var:

fonksiyon set_color(val)

fonksiyon send_request(id)

API isteğini test etmek için Postman https://www.postman.com/ adlı yaygın olarak kullanılan bir yazılım aracını öneririm. Programlama becerileri olmadan sunucuya API isteği göndermemizi sağlar. Bir sunucuyla alay etmeye ve istekleri kabul etmeye izin verir.

Adım 14: Ön Uç Kodunu Anlama ve Çalıştırma BÖLÜM 4

Uygulamanız çalışıyor.

Dikkat edin, sayılar tersine çevrilir, yani 20, 1 ve 1 20'dir, bunun nedeni ağaçtaki LED'lerin alttan başlamasıdır, ancak daha iyi kullanıcı deneyimi için üstte bir başlangıç açtık.

Yine de isterseniz YouTube'da bir canlı yayın oluşturmanız ve YouTube videosunun yerleştirme kodunu kendi kodunuzla değiştirmeniz gerekecektir.

Adım 15: Arduino Kodu

ESP8266, web sitemden bir API çağrısı yoluyla verileri alan, biraz değiştirilmiş temel bir HTTP İstemcisi örneği çizimi çalıştırır.

Benim yaptığım gibi aynı adreslenebilir RGB şeridini kullanmak istiyorsanız, LED şeridi kontrol etmek için kitaplıklar da kurmanız gerekecek.

github.com/adafruit/Adafruit-WS2801-Librar…

Eklediğim çizimde, wi-fi adınızı ve şifrenizi web sitenize bir url eklemeniz gerekecek (yorumlara bakın)

Temel olarak bir http yanıtını C tipi bir dizgeye dönüştürürüz, böylece dizgiyi virgülle bölmek ve led tablosunu bir sunucudan okunan değerlerle doldurmak için C function strtok kullanabiliriz. Daha sonra tablo üzerinden bir fonksiyon çağırıyoruz ve değerlere göre kullanıcının beklediği doğru rengi çeviriyoruz.

İşte bu!

Tebrikler, başardınız!

Adım 16: RGB LED Zinciri

Ah, ah. Şimdi tüm kodlamalara biraz ara verme zamanı:)

ESP8266'da LED'leri tek tek kontrol etmek için çok fazla GPIO pini bulunmadığından, bu adreslenebilir RGB LED zincirini kullandım:

www.sparkfun.com/products/11020

Bu şekilde, 20 RGB led'in tümü (toplam 60 led) yalnızca iki pin ile kontrol edilebilir - "veri" ve "saat" ve 5V güç doğrudan ESP8266'dan.

Stripi NodeMcu'ya bağlamak kolaydır. NodeMcu'da 5V'den Vin'e (USB'den 5V), sarı kablodan pim 12'ye, yeşil kablo pim 14'e, topraktan toprağa.

Bireysel RGB rengini ve parlaklığını ayarlayabilirsiniz. Biraz renk karıştırma ile her LED için bir LOT renk üretebilirsiniz.

Bu LED'lerle her türlü harika FX efekti için çok güzel bir kitaplık da var. İsterseniz deneyin:

github.com/r41d/WS2801FX

Adım 17: Noel Ağacını Süsleyin

Güzelleştirin ve tüm LED'lerin görünür olduğundan ve ağaca güzelce yayıldığından emin olun.

Adım 18: Son Dokunuşlar

Ağacı hazır hale getirdiğinizde, güzel bir fotoğraf çekin ve tıklanabilir konumların (LED konumları) görüntü haritasını oluşturma adımını tekrarlayın.

Bu, LED'lerle arabirim oluşturmanın en sezgisel yoludur.

İşleri fazla karmaşık hale getirmek istemiyorsanız, normal düğmeleri kullanabilirsiniz.

Ayrıca YouTube'da ağacınızın canlı akışını başlatmalı (gerçek zamanlı olarak ne olduğunu izlemek istiyorsanız) ve akışı sitenize yerleştirmelisiniz.

19. Adım: Web Sitenize Hayran Olun

Buraya kadar geldiysen harikasın:)Arkadaşlarını (ve tabii ki beni:P) davet et ve mümkün olduğunca ağacını tıklatmalarını sağla:)

n

Bu, oldukça karmaşık bir proje için çok uzun bir Eğitilebilirlikti. Ama sonunda buna değer:D

Teşekkürler! Üzerinde çalıştığım şey hakkında iletişimde kalmak istiyorsanız:

YouTube kanalıma abone olabilirsiniz:

www.youtube.com/c/JTMakesIt

Beni Facebook ve Instagram'dan da takip edebilirsiniz

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

Şu anda üzerinde çalıştığım şey, sahne arkası ve diğer ekstralar hakkında spoiler vermek için! Not:., GERÇEKTEN, GERÇEKTEN beğendiyseniz, ayrıca bana bir kahve ısmarlayabilirsiniz, bu yüzden gelecekteki projeler için daha fazla enerjim olacak (bu fikre çok geç sahip olduğum için bu benim 2 haftam uykumu aldı):)

www.buymeacoffee.com/JTMakesIt

Ve "Her Şey Gider" yarışmasında bu Eğitilebilir Tabloya oy vermeyi unutmayın:)