Veb saytına nəzarət edən Milad ağacı (hər kəs bunu idarə edə bilər): 19 addım (şəkillərlə)

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:42

Bir veb saytın idarə etdiyi Milad ağacının necə göründüyünü bilmək istəyirsiniz?

Milad ağacımın layihəsini göstərən video budur. Canlı yayım bu vaxta qədər bitdi, amma baş verənləri əks etdirən bir video hazırladım:

Bu il, dekabr ayının ortalarında, yatağımda uzanıb bir iş həftəsinin ortasında yatmağa çalışırdım. Və yatmaq əvəzinə nə etmək üçün sərin bir Milad layihəsi olacağını düşünürdüm. Və sonra sərin bir fikir məni çaşdırdı.

Milad bəzəklərində tənbəl olduğum üçün, Milad işıqlarımı başqasının idarə etməsinə icazə vermək çox yaxşı olardı, buna görə də narahat olmayacağam.

"Hər kəsin veb sayt interfeysi ilə idarə edə biləcəyi bir Milad ağacı işıqları etsəm nə olar?"

(iki həftə yuxusuz gecələr əlavə edin)

Buna görə də bacardım.

ESP8266 Arduino vasitəsilə internetə qoşulmuş iyirmi RGB LEDli bir Milad ağacı.

Bir dostum (təşəkkür edirəm JP) bir veb sayt qurmağımda mənə kömək etdi (çünki veb saytla əlaqəli şeylər üçün səlis bir proqramçı deyiləm).

Ağacımın 24/7 youtube canlı axını qurduq ki, hər zaman açdığınız və ya söndürdüyünüzü görə biləsiniz.

Bu layihə bu il üçün idealdır, çünki bir çoxumuz kiliddə olduğumuz üçün dostlarımız və ailənizlə görüşə və ünsiyyət qura bilmədik. Milad ağacı ilə niyə birləşməyək:)

Bu təlimatda bu layihənin necə edildiyini ətraflı izah edəcəyəm.

Addım 1: Bacarıq səviyyəsi

Bu layihə daha çox proqram yönümlüdür. Ancaq qorxma Google əminin bəzi şansları və köməyi çox kömək edəcək:)

3 bacarıq dəstinə sahib olmalısınız (və ya narahat olmayacaqsınız): bir veb server hissəsi, Arduino hissəsi və Milad ağacı!

Tövsiyə olunan biliklər:

• Əsas kompüter və proqramlaşdırma bacarıqları

• Əsas Linux terminal bilikləri

• Əsas kompüter şəbəkəsi bilikləri

• Əsas elektronika bilikləri

• Google və digər "xüsusi" qabiliyyətlərdən istifadə etmək bacarığı

• Milad ağacı qurmağı bilməlidir:)

Bir az texnologiya və proqramlaşdırma anlayışınız varsa, bu Təlimata uyğun olaraq bu şeyi qurmağı öyrənməlisiniz.

Addım 2: Alətlər və Komponentlər

Milad ağacı tərəfində sizə lazım olacaq: • Milad ağacı (d'oh …)

• NodeMCU mikro nəzarətçi lövhəsi

(ESP32 və ya digər Wi-Fi və ya Ethernet qabiliyyətli lövhələrdən də istifadə edə bilərsiniz)

• Ünvanlı RGB LED şeridi. ünvanlı RGB LED şeridi bir çox Arduino GPIO -nu xilas edəcək (https://www.sparkfun.com/products/11020)

• NodeMCU üçün proqram təminatı (bu təlimatda verilir)

Server tərəfində sizə lazım olacaq:

• İctimai IP ilə virtual özəl server. Burada DigitalOcean -da 100 dollar pulsuz əldə edirsiniz

• İstənilən qeydiyyat təşkilatında qeydiyyatdan keçə biləcəyiniz bir sahə (isteğe bağlı), məsələn

• Xüsusi Kod (bu Təlimatla birlikdə verilir)

Addım 3: Virtual Maşını (kompüteri) konfiqurasiya edin BÖLÜM 1

Gəlin birbaşa kodlamaya keçək:)

Veb sayt və NodeMCU ilə əlaqə quracaq bir serverə ehtiyacımız var.

DigitalOcean -dakı serverlər, ümumi bir IP ünvanı olan bir virtual maşına sahib olmağımıza imkan verir, yəni xidmətlər həyata keçirə bilərik və bütün dünyada onlara daxil ola bilərik.

Bir DigitalOcean aylıq abunə haqqını ödədikdən sonra (60 günlük pulsuz sınaqdan istifadə edə bilərsiniz), bir layihə yaradın və ona Milad ağacı və ya istədiyiniz hər şeyi adlandırın.

İndi virtual maşınınızı (uzaqdan əldə edilə bilən virtual kompüter) "Bir damla ilə işə başla" düyməsini basaraq yarada bilərsiniz (bu, əsasən virtual maşın üçün DigitalOcean -ın adıdır).

Bir konfiqurasiya səhifəsi açılacaq və standart olaraq qala bilərsiniz: Ubuntu görüntüsü, əsas plan və blok saxlama yeri yoxdur (5 $ /ay)

Addım 4: Virtual Maşını (kompüteri) konfiqurasiya edin 2 -ci hissə

Bir məlumat mərkəzi bölgəsi, serverinizin yaradılacağı yerdir.

Sizə və potensial istifadəçilərinizə ən yaxın olanı seçin. Bu, ən aşağı cavab müddətini təmin edəcək.

Bundan əlavə, Doğrulama bölməsində, virtual maşınınıza daxil olmaq üçün bir parol daxil etməyiniz istənəcəkdir.

Finallaşdır və Yarat bölməsində, 1 damlacığın defoltunu saxla, ev sahibi adını (yenidən Milad ağacı) seçin, əvvəlcədən yaradılmış layihənizi seçin, əgər varsayılan olaraq seçilməyibsə Damla yaradın. Bu bir neçə dəqiqə çəkəcək. Soldakı naviqasiya bölməsində layihənizi tıklayaraq damlağınızı görəcəksiniz.

Addım 5: Virtual Maşını (kompüteri) konfiqurasiya edin BÖLÜM 3

Damlacığın sağ tərəfindəki üç nöqtəni tıklayaraq, virtual kompüterinizə daxil olmağınızı təmin edəcək Access konsolunu vura bilərsiniz.

Yeni kiçik bir brauzer pəncərəsi açılacaq. İndi, bu, Windows 10 və ya Qrafik interfeysli Ubuntu kompüterinizdəki kimi bir masa üstü mühit deyil.

Ancaq hər şey bir konsol interfeysi ilə edilə bilər.

Göründüyü qədər qorxulu deyil:)

Addım 6: Virtual Maşını (kompüteri) konfiqurasiya edin 4 -cü hissə

DigitalOcean buludunda öz virtual maşınınızı uğurla yaratmısınız.

Sonrakı addımlarda Apache adlı bir veb server quracaq və öz veb səhifənizi quracaqsınız.

Filezilla müştərisini buradan yükləyin https://filezilla-project.org/download.php?platfo… (və ya 32bit əməliyyat sistemi üçün 32bit versiyasını tapın) və quraşdırın. FTP (Fayl Transfer Protokolu) müştərisidir.

Virtual maşınınızdan faylları əldə edə və köçürə biləcəksiniz.

Quraşdırıldıqdan sonra faylı → sayt menecerini → yeni saytı vurun və yuxarıdakı şəkildəki kimi məlumat daxil edin.

Protokol: SFTP (Təhlükəsiz Fayl Transfer Protokolu)

Host: Serverinizin IP ünvanı, DigitalOcean layihənizdə tapın.

İstifadəçi kökdür və şifrənizi damcınızı yaratmaq üçün təyin etdiyiniz şeydir.

Tamam'ı basın və virtual maşınınıza qoşulun.

Sizə xəbərdarlıq ediləcək, ana açar məlum deyil. İkinci şəkli izləyin.

Layihə üçün yerli bir qovluq yaradın və burada yükləyəcəyiniz layihə fayllarınızı çıxarın.

Kodu sınamaq və ya yeniləmək istədiyiniz zaman sənədlərinizi kompüterinizdə düzəldəcək və virtual maşınınıza köçürəcəksiniz.

Addım 7: Veb Server qurun

İstifadəçi adı kökü və şifrənizlə damcı konsolunuza daxil olun.

Qrafik interfeysə malik olmadığımız üçün virtual maşınınızı idarə etmək üçün əmrlərdən istifadə edirik. Ubuntu (Linux) da istifadə edəcəyiniz bəzi ümumi əmrlər:

• pwd - indiki kataloqumu çap et

• ls - cari qovluğumdakı faylları və qovluqları siyahıya alın

• cd / - / qovluğuna keçin (linux əsas qovluqları və s., Bin, boot, dev, root, home, var və s. Daxil olan qovluq)

Qaçış dedikdə, əmri daxil edin və enter düyməsini basın.

İndi sistemi yeniləmək üçün apt -get update -y işlədəcəyik.

Apache veb serverini qurmaq üçün apt install apache2 -y çalıştırın.

Apache qarşılama ekranınıza brauzerinizdən https:// virtual-machine-ip-də daxil olmaq lazımdır.

Virtual maşın ipini virtual maşın ipinizlə əvəz edin, məsələn 165.12.45.123. Http: // atlaya bilərsiniz, çünki avtomatik olaraq əlavə olunacaq.

Təbriklər!

Qeyd:

Veb saytınızın IP ünvanı ilə deyil, bir adla əldə edilməsini istəyirsinizsə (https://blinkmytree.live/ istifadə etdiyim kimi), GoDaddy və ya bənzər bir domen provayder saytına (namecheap.com və s.) Daxil olun və təlimatları izləyin. burada:

Bəzi domen adları çox ucuzdur. Mənim domenim illik cəmi 2 dollara başa gəldi. Şübhəsiz ki, pula dəyər:)

Addım 8: Veb Tətbiq Çərçivəsini quraşdırın

Konsolumuza qayıdın. Qorxma:)

Filezilla'dan istifadə edərək /home daxilində app adlı bir qovluq yaradın, beləliklə /home /app sizin qovluğunuz olacaq

Tətbiq qovluğuna keçmək üçün cd /home /app -i işə salın.

Npm paket menecerini qurmaq üçün apt install npm -y çalıştırın. Bu bir neçə dəqiqə çəkəcək.

Bir tətbiq haqqında əsas paket məlumatlarını izləyəcək/yadda saxlayacaq pack.json faylını yaratmaq üçün npm init -y işləyin.

Npm işləyin -cors, express modullarını qurmaq üçün express cors qurun

Cors, saytlar arası girişi konfiqurasiya etmək üçün bir moduldur və express bir veb tətbiq çərçivəsidir.

Npm, istifadə etdiyimiz bir paket meneceridir və node.js JavaScript iş vaxtından istifadə edərək proqramlaşdırma proqram interfeysimizi (API) proqramlaşdırırıq ki, bu da http serveri ilə birlikdə LED -lərə rəng tətbiq etmək üçün HTTP sorğularını qəbul edəcək, dəyərlərini (rənglərini) qeyd edəcək. yaddaşda saxlayın və istədiyi zaman dəyərləri NodeMcu -ya ötürün.

Qeyd: NodeMcu -dakı düyünün node.js -dəki node ilə heç bir əlaqəsi yoxdur. NodeMcu hər hansı bir internetə bağlı arduino inkişaf lövhəsi, NXP inkişaf lövhəsi və ya xüsusi bir Microchip/NXP/Renesas/STM/Atmel PCB ilə əvəz edilə bilər. Node.js də. Net framework, PHP və ya hər hansı digər platforma ilə əvəz oluna bilər. Ancaq sadəlik üçün NodeMCU və Node.js. istifadə edirik.

İndi node.js -də kiçik bir proqram işlədə bilsək bir test edək

Yerli qovluğunuzda notepad/notepad ++ və ya istifadə etdiyiniz başqa bir redaktor və ya istifadə etdiyiniz (Visual Studio Kodu https://code.visualstudio.com/) index.js adlı bir fayl yaradın.

Bu kodu daxil edin:

var http = tələb edin ('http');

http.createServer (funksiya (req, res) {

res.writeHead (200, {'Məzmun Tipi': 'mətn/düz'});

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

}). dinlə (8080);

Saxla və FileZilla'daki faylda doubleleclick/drag-drop ilə index.js olaraq qovluğa/evə/tətbiqə köçür.

Node index.js qovluğunu işə salın və işlək vəziyyətdə buraxın.

İndi brauzerimizdən səhifəmizə https:// virtual-machine-ip: 8080 ünvanında daxil ola bilərik. Hello World mətni olan ağ bir səhifə görünəcək.

Təbriklər, node.js -də bir veb server yaratdınız!

Addım 9: Proqramı hazırlayın

Konsola gedin və ctrl+C düymələrini basaraq proqramı dayandırın.

Index.js faylınızı/home/app/-də dəyişdirin və index.js faylını bizimlə əvəz edin.

Veb sayt üçün bütün faylları buradan yükləyə bilərsiniz:

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

Chrismas ağac kodumuzu html qovluğundan Filezilla ilə uzaq qovluğa/var/www/html/kopyalayın. Bir az vaxt lazım olacaq. Sizdən soruşarsa index.html -ni yenisi ilə əvəz edin.

IP -ni yenidən sevdiyiniz veb brauzerinizə qoyun.

Veb tətbiqinizin ön hissəsini https:// virtual-machine-ip-də istifadəyə verdiniz.

Addım 10: Arxa kodun anlaşılmazlığı və işləməsi

Qeyd: arxa kodunuz /ev /tətbiqdədir

Unutmayın ki, yerli olaraq kodunuzu redaktə etdikdən sonra onu FileZilla istifadə edərək serverinizə yükləməyi və qovluq tətbiqinizi yenidən başlatmağı unutmayın (konsol: ctrl+c, yuxarı ox (son əmr node index.js göstərir), daxil edin)

Kodun işləməsi üçün əvvəlcə bir neçə məlumat daxil etməlisiniz.

Əvvəlcə index.js -dəki host adı dəyişənini öz domeninizə və ya IP -yə dəyişdirməlisiniz (bənzər bir şey: 165.13.45.123).

İkincisi, kodu başa düşmək üçün sizə yol göstərəcəyəm. Kodda yazdığım şərhləri atlamadığınızdan əmin olun.

İndex.js faylında, ekspress modulu istifadə edərək bir tətbiq yaratdığımızı görə bilərsiniz. Sonra CORS qaydalarını tətbiq edirik, API əlavə edirik və bir http serveri işə salırıq. Bu server GET http sorğuları ilə bir veb səhifəyə xidmət etməyəcək, ancaq GET http sorğusu vasitəsilə idarə olunan vəziyyətlərə xidmət edəcək və alınan PUT http istəklərində led vəziyyətləri yeniləyəcək.

API -lər tətbiqlər arasında məlumat mübadiləsi aparmaq üçün adi bir tətbiqdir. Ən çox istifadə etdiyimiz özümüzü istifadə etdiyimiz REST API -ləridir. Vətəndaşlığı olmayan və davamlı bir əlaqəsi yoxdur (shorturl.at/aoBC3, PUT istəkləri, sadəcə, tətbiq dizisi dəyişənindəki (yaddaşdakı) led vəziyyətləri yeniləyir, GET istəkləri sadəcə müştəri vəziyyətlərini göndərir.

Müştəriyə cavab ümumiyyətlə JSON notasiyasındadır, ancaq 30 LED vəziyyətinin bu sadə cavabı üçün sadəcə 30 vergüllə ayrılmış dəyərlərdən ibarət bir sətir göndəririk.

Addım 11: Cəbhə Kodunu Anlamaq və İşlətmək BÖLÜM 1

Qeyd: ön kodunuz/var/www/html ünvanındadır

Unutmayın ki, kodunuzu yerli olaraq redaktə etdikdən sonra onu FileZilla istifadə edərək serverinizə yükləməyi unutmayın. Node.js -dən fərqli olaraq, Apache avtomatik olaraq yenidən başlayır, ancaq səhifənizi brauzerinizdə yenidən yükləməli olacaqsınız. Səhifənizin önbelleğini yeniləmək və silmək üçün ctrl+f5 düymələrindən istifadə edin.

Kodun işləməsi üçün bir neçə məlumat daxil etməlisiniz. Əvvəlcə index.html daxilindəki send_request funksiyasındakı url dəyişənini blinkmytree.live -dən öz domeninizə və ya IP -yə dəyişdirməlisiniz, məsələn: 165.13.45.123.

İkincisi, bunu başa düşmək üçün sizə kod vasitəsilə yol göstərəcəyəm. Kodda yazdığım şərhləri atlamadığınızdan əmin olun. Səhifə bir HTML sənədidir. Bütün CSS qaydalarını (səhifə stili və məzmun mövqeyi) bir kənara qoyaraq, vacib məzmunun funksionallığına baxacağıq. CSS haqqında daha çox məlumat əldə etmək üçün https://www.w3schools.com/css/ saytına daxil olun.

Bu əsas xüsusiyyətləri (çevik metodların mütəxəssisləri istifadəçi hekayələrini söyləyəcək) səhifədə istədik:

• Səhifəyə daxil edilmiş canlı video

• Gimp şəkil redaktorunda (https://www.gimp.org/) manipulyasiya edilmiş bir Milad ağacında kliklənə bilən LEDlər.

• Led vəziyyətlərinin dəyişdirilməsini gözləyən bir server ilə faktiki ünsiyyət.

Addım 12: Cəbhə Kodunu Anlamaq və İşlətmək 2-ci hissə

Seçdiyimiz LED və rənglərin sayı olan Milad ağacımıza sahib olduqdan sonra, sahələr yaratmalı və onlara hərəkətlər tətbiq etməliyik, buna görə də şəklin seçmə hissəsindəki rəngli LED -ə vurduqda bir rəng seçiləcək və biri bir LED -ə vurduqda, əmr Arduinonun dəyərini seçəcəyi serverə göndəriləcək.

Ən yeni HTML standartı olan HTML5 -də, şəkil xəritəsi deyilən bir şey var. Bir görüntü üzərində hərəkət dinləyiciləri tətbiq edə biləcəyimiz sahələri təyin etməyə imkan verir.

Təyin etməli olduğumuz bir çox sahə olduğu üçün bu sahələri təyin etmək üçün https://www.image-map.net/ vasitəsindən istifadə etdik və HTML kodunu səhifəmizə kopyaladıq.

Bunu etdikdən sonra onclick hadisəsini çağırdığı bir funksiya və bir LED nömrəsinin parametri ilə bu sahələrin hər birinə qoya bilərik. Yuxarıdakı ekran görüntüsünə baxın.

Addım 13: Cəbhə Kodunu Anlamaq və İşlətmək BÖLÜM 3

HTML gövdəsinin sonunda, bir bölgədə, onclick hadisələrində çağırdığımız funksiyaları təyin etmək üçün bəzi JavaScript qoyduq. Qlobal olaraq, bir PUT sorğusu göndərmək üçün istifadə etdiyimiz bir XMLHttpRequest təyin edirik

İki funksiyamız var:

set_color funksiyası (val)

send_request funksiyası (id)

API sorğusunu sınamaq üçün Postman https://www.postman.com/ adlı geniş istifadə olunan bir proqram vasitəsini tövsiyə edirəm. Proqramlaşdırma bacarığı olmadan sadəcə serverə API sorğusu göndərməyimizə imkan verir. Bir serverə istehza etməyə və istəkləri də qəbul etməyə imkan verir.

Addım 14: Cəbhə Kodunu Anlamaq və İşlətmək BÖLÜM 4

Tətbiqiniz işləyir.

Nömrələrin tərsinə çevrildiyini, yəni 20 -nin 1 -in, 1 -in isə 20 -nin səbəbi budur ki, ağacdakı LEDlər aşağıdan başlayır, amma daha yaxşı istifadəçi təcrübəsi üçün yuxarıya doğru bir başlanğıc qoyduq.

İstəyirsinizsə hələ də YouTube -da canlı yayım yaratmalı və YouTube videosunun yerləşdirmə kodunu öz kodunuzla əvəz etməlisiniz.

Addım 15: Arduino Kodu

ESP8266, veb səhifəmdən bir API zəngi vasitəsi ilə alınan, bir qədər dəyişdirilmiş əsas HTTP Müştəri nümunə eskizini idarə edir.

Mənimlə eyni ünvanlı RGB şeridindən istifadə etmək istəyirsinizsə, LED şeridini idarə etmək üçün kitabxanalar da qurmalısınız.

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

Əlavə etdiyim eskizdə, wi-fi adınızı və şifrənizi veb saytınıza bir url daxil etməlisiniz (şərhlərə baxın)

Əsasən bir http cavabını C tipli bir sətirə çeviririk, buna görə də simli vergüllə bölmək və leds cədvəlini serverdən oxunan dəyərlərlə doldurmaq üçün C funksiyası strtok istifadə edə bilərik. Cədvəldən keçdiyimiz və dəyərlərə əsaslanaraq istifadəçinin gözlədiyi düzgün rəngi açdığımız bir funksiya adlandırdığımızdan daha çox.

Budur!

Təbriklər, bacardın!

Addım 16: RGB LED Zənciri

Uh, oh. İndi bütün kodlaşdırmalara bir az ara verməyin vaxtıdır:)

ESP8266 -da LED -ləri ayrı -ayrılıqda idarə etmək üçün bir çox GPIO sancağı olmadığı üçün bu ünvanlı RGB LED zəncirindən istifadə etdim:

www.sparkfun.com/products/11020

Bu yolla, bütün 20 RGB LED (cəmi 60 led) yalnız iki pinlə idarə edilə bilər - "məlumat" və "saat" və birbaşa ESP8266 -dan 5V güc.

Şeridi NodeMcu ilə bağlamaq asandır. NodeMcu üzərindəki 5V -ə (USB -dən 5V), sarı pin 12 -yə, yaşıl tel 14 -ə, torpaqdan yerə.

Fərdi RGB rəngini və parlaqlığını təyin edə bilərsiniz. Bəzi rəng qarışdırmaqla hər LED üçün çoxlu rəng istehsal edə bilərsiniz.

Bu LED -lərlə hər cür sərin FX effektləri üçün çox gözəl bir kitabxana da var. İstəsəniz sınayın:

github.com/r41d/WS2801FX

Addım 17: Milad ağacını bəzəyin

Gözəl olun və bütün LED -lərin göründüyündən və ağacın üstünə gözəl bir şəkildə yayıldığından əmin olun.

Addım 18: Son toxunuşlar

Ağacı hazırladıqda, gözəl bir şəkil çəkin və tıklanabilir mövqelərin (LED mövqeləri) görüntü xəritəsini yaratmaq üçün addımı təkrarlayın.

LED -lərlə əlaqə qurmağın ən asan yolu budur.

Bir şeyi çox çətinləşdirmək istəmirsinizsə, adi düymələrdən istifadə edə bilərsiniz.

YouTube -da ağacınızın canlı yayımına başlamalısınız (nə baş verdiyini real vaxtda izləmək istəyirsinizsə) və axını saytınıza yerləşdirin.

Addım 19: Veb saytınıza heyran olun

Bu vaxta qədər uğur qazansanız çox gözəlsiniz:) Dostlarınızı da dəvət edin (və əlbəttə ki: P) və ağacınızı mümkün qədər sıxsınlar:)

n

Bu olduqca mürəkkəb bir layihə üçün çox uzun bir təlimat idi. Ancaq sonda buna dəyər: D

Çox sağ ol! İşlədiyim mövzularla əlaqə saxlamaq istəyirsinizsə:

YouTube kanalıma abunə ola bilərsiniz:

www.youtube.com/c/JTMakesIt

Məni Facebook və İnstagram -da da izləyə bilərsiniz

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

hal -hazırda üzərində işlədiyim, pərdə arxası və digər əlavələr haqqında spoylerlər üçün! PS:. Əgər həqiqətən, həqiqətən bəyənmisinizsə, buradan da mənə bir qəhvə ala bilərsiniz, buna görə də gələcək layihələr üçün daha çox enerjim olacaq (bu fikir 2 saat yatdı, çünki bu fikri çox gec aldım):)

www.buymeacoffee.com/JTMakesIt

Və "Hər şey gedir" yarışmasında bu Təlimata səs verməyi unutmayın:)