Webwerf-beheerde kersboom (almal kan dit beheer): 19 stappe (met foto's)

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:23

Wil u weet hoe 'n webwerf -beheerde Kersboom daar uitsien?

Hier is die video wat my projek van my Kersboom wys. Die regstreekse stroom het nou geëindig, maar ek het 'n video gemaak waarin ek vasstel wat aangaan:

Hierdie jaar, middel Desember, het ek in my bed gelê en probeer slaap in die middel van 'n werkweek. En in plaas van slaap, het ek gedink aan wat 'n gawe Kersfeesprojek sou wees. En toe val 'n gawe idee my op.

Aangesien ek lui is met kersversierings, sal dit gaaf wees as iemand anders my kersliggies laat beheer, so ek hoef my nie daaroor te bekommer nie.

'Wat as ek 'n kersboomligte maak wat ENIGE via 'n webwerf -koppelvlak kan beheer?

(voeg twee weke se slapelose nagte in)

So ek het dit gemaak.

'N Kersboom met twintig RGB -LED's wat via ESP8266 Arduino aan die internet gekoppel is.

'N Vriend van my (dankie JP) het my gehelp om 'n webwerf op te stel (aangesien ek nie 'n vlot programmeerder is vir webwerf -verwante dinge nie).

En ons het 'n 24/7 youtube live stream van my boom opgestel, sodat u te alle tye kan sien wat u aan- of uitskakel.

Hierdie projek is ideaal vir hierdie jaar, aangesien baie van ons in die lockdown was en nie in staat was om vriende en familie te ontmoet nie. Waarom nie verenig via die kersboom nie:)

In hierdie instruksies sal ek in detail verduidelik hoe hierdie projek gemaak is.

Stap 1: Vaardigheidsvlak

Hierdie projek is meer op sagteware gerig. Maar moenie bang wees nie. Baie geluk en hulp van oom Google sal baie help:)

U moet 'n stel van drie vaardighede hê (of u sal dit nie hoef te leer nie): 'n webbediener -gedeelte, die Arduino -deel en 'n kersboom natuurlik!

Aanbevole kennis:

• Basiese rekenaar- en programmeringsvaardighede

• Basiese Linux terminale kennis

• Basiese kennis van rekenaarnetwerk

• Basiese elektroniese kennis

• Vaardighede om Google en ander "spesiale" vermoëns te gebruik

• Moet weet hoe om 'n kersboom op te rig:)

As u 'n idee het van tegnologie en programmering, behoort u in staat te wees om hierdie ding volgens hierdie instruksies op te stel.

Stap 2: Gereedskap en komponente

Aan die kant van die kersboom benodig u: • Kersboom (d'oh …)

• 'n NodeMCU-mikrobeheerderbord

(u kan ook ESP32 of ander borde met Wi-Fi of Ethernet gebruik)

• Adresbare RGB LED -strook. aanspreekbare RGB -geleide strook bespaar baie Arduino GPIO's (https://www.sparkfun.com/products/11020)

• Sagteware vir die NodeMCU (verskaf in hierdie instruksie)

Aan die bedienerkant benodig u:

• 'n Virtuele privaat bediener met openbare IP. Hier kry u $ 100 gratis op DigitalOcean

• 'n Domein (opsioneel) wat u by enige registrateurorganisasie kan registreer, byvoorbeeld

• Toegewyde kode (saam met hierdie instruksies)

Stap 3: Stel virtuele masjien (rekenaar) DEEL 1 op

Kom ons gaan direk na kodering:)

Ons benodig 'n bediener wat met die webwerf en NodeMCU sal kommunikeer.

Met bedieners op DigitalOcean kan ons 'n virtuele masjien met 'n openbare IP -adres hê, wat beteken dat ons dienste daarop kan uitvoer en wêreldwyd toegang daartoe kan kry.

Sodra u 'n maandelikse DigitalOcean -intekening betaal het (u kan 'n gratis proeftydperk van 60 dae gebruik), skep u 'n projek en noem dit 'n kersboom of wat u ook al wil.

U kan nou u virtuele masjien (eksterne toeganklike virtuele rekenaar) skep deur op "Begin met 'n druppel" te klik (wat eintlik DigitalOcean se naam vir 'n virtuele masjien is).

'N Konfigurasiebladsy verskyn, en u kan by die standaard bly: Ubuntu -beeld, basiese plan en geen blokberging (5 $ /maand)

Stap 4: Stel virtuele masjien (rekenaar) DEEL 2 op

'N Datacentersgebied is die plek waar u bediener geskep sal word.

Kies die naaste aan u en u potensiële gebruikers. Dit bied die laagste reaksietyd.

Verder sal u in die afdeling Verifikasie gevra word om 'n wagwoord in te voer vir toegang tot u virtuele masjien.

Hou in die afdeling Voltooi en skep die standaard van 1 druppel, kies 'n gasheernaam (weer Kersboom), kies u projek wat voorheen geskep is as dit nie standaard gekies is nie en klik op skep druppel. Dit sal 'n paar minute neem. Deur op u projek in die navigasie -afdeling aan die linkerkant te klik, sien u die druppel.

Stap 5: Stel virtuele masjien (rekenaar) DEEL 3 op

Deur op die drie kolletjies regs van die druppel te klik, kan u op die toegangskonsole klik, wat u toegang tot u virtuele rekenaar sal gee.

'N Nuwe klein blaaiervenster sal oopmaak. Dit is nou nie 'n lessenaaromgewing nie, soos op u Windows 10 of Ubuntu met 'n grafiese koppelvlakrekenaar.

Alles kan egter gedoen word via 'n konsole -koppelvlak.

Dit is nie so eng soos dit lyk nie:)

Stap 6: Konfigureer virtuele masjien (rekenaar) DEEL 4

U het u eie virtuele masjien suksesvol in 'n DigitalOcean -wolk geskep.

In die volgende stappe sal u 'n webbediener met die naam Apache opstel en u eie webblad opstel.

Laai Filezilla-kliënt hier af https://filezilla-project.org/download.php?platfo… (of vind 'n 32bit-weergawe vir die 32bit-bedryfstelsel) en installeer dit. Dit is 'n FTP -kliënt (File Transfer Protocol).

U het toegang tot en kan lêers van en na u virtuele masjien oordra.

Sodra dit geïnstalleer is, klik op lêer → webwerfbestuurder → nuwe webwerf en voer data in soos op die prent hierbo.

Protokol: SFTP (Secure File Transfer Protocol)

Gasheer: IP van u bediener, vind u in u DigitalOcean -projek.

Gebruiker is wortel en wagwoord is wat u dit stel tydens die skep van u druppel.

Klik op OK en maak verbinding met u virtuele masjien.

U sal gewaarsku word, die gasheersleutel is onbekend. Volg die tweede prentjie.

Skep 'n plaaslike gids vir die projek en haal u projeklêers uit wat u hier sal aflaai.

U sal u lêers op u rekenaar wysig en dit na u virtuele masjien oordra elke keer as u die kode wil toets of opdateer.

Stap 7: Installeer 'n webbediener

Teken in op u druppelkonsole met die gebruikersnaamwortel en u wagwoord.

Aangesien ons nie 'n grafiese koppelvlak het nie, gebruik ons opdragte om u virtuele masjien te beheer. Hier is 'n paar algemene opdragte wat u op Ubuntu (Linux) sal gebruik:

• pwd - druk my huidige gids af

• ls - lys lêers en gidse in my huidige gids

• cd / - skuif na / gids (gids, wat Linux -hoofgidse soos ens, bin, boot, dev, root, home, var en so meer insluit)

Met hardloop, bedoel ek, voer die opdrag in en druk enter.

Nou sal ons apt -get update -y uitvoer om die stelsel op te dateer.

Begin apt apache2 -y om Apache -webbediener te installeer.

U welkomskerm van Apache behoort toeganklik te wees op u https:// virtual-machine-ip vanaf u blaaier.

Vervang virtuele-masjien-ip met u virtuele masjien-ip, byvoorbeeld 165.12.45.123. U kan ook die https:// oorslaan, aangesien dit outomaties bygevoeg sal word.

Geluk!

Let wel:

As u wil hê dat u webwerf toeganklik moet wees via 'n naam, eerder as 'n IP -adres (soos ek https://blinkmytree.live/ gebruik het), gaan dan na die domeinverskafferwebwerf GoDaddy of soortgelyke (namecheap.com ens.) En volg die instruksies hier:

Sommige domeinname is baie goedkoop. My domein het slegs 2 $ per jaar gekos. Beslis die geld werd:)

Stap 8: Installeer 'n webtoepassingsraamwerk

Terug na ons konsole. Moenie bang wees nie:)

Gebruik Filezilla om 'n vouer met die naam app binne /tuis te skep, sodat /home /app u gids sal wees

Begin cd /home /app om na die binne -app -lêergids te gaan.

Begin apt install npm -y na installl npm pakketbestuurder. Dit sal 'n paar minute neem.

Begin npm init -y om 'n lêer package.json te skep, wat belangrike pakketdata oor 'n program kan opspoor/onthou.

Begin npm -stoor installeer cors express om modules cors, express te installeer

Cors is 'n module vir die opstel van toegang tussen webwerwe en express is 'n raamwerk vir webtoepassings.

Npm is 'n pakketbestuurder wat ons gebruik het en ons sal node.js JavaScript -runtime gebruik om ons toepassingsprogrammeerkoppelvlak (API) te programmeer, wat in kombinasie met 'n http -bediener HTTP -versoeke vir die toepassing van kleure op LED's sal aanvaar, hul waardes (kleure) sal merk in die geheue, en gee die waardes deur na NodeMcu, as dit dit versoek.

Nota: Node in NodeMcu het niks te doen met node in node.js. NodeMcu kan vervang word met enige internet -gekoppelde arduino -ontwikkelingsbord, NXP -ontwikkelingsbord of 'n pasgemaakte Microchip/NXP/Renesas/STM/Atmel PCB. Node.js kan ook vervang word deur. Net raamwerk, PHP of enige ander platform. Maar vir die eenvoud gebruik ons NodeMCU en Node.js.

Laat ons nou 'n toets doen as ons 'n klein program in node.js kan uitvoer

Skep 'n lêer met die naam index.js met notepad/notepad ++ of 'n ander redakteur of 'n geïntegreerde ontwikkelingsomgewing wat u gebruik (Visual Studio Code https://code.visualstudio.com/) in u plaaslike gids.

Plaas hierdie kode daarin:

var http = vereis ('http');

http.createServer (funksie (req, res) {

res.writeHead (200, {'Content-Type': 'text/plain'});

res.end ('Hallo wêreld!');

}). luister (8080);

Stoor dit en dra dit oor na lêer/tuis/app as index.js met dubbelkliek/sleep-lêer in FileZilla.

Begin node index.js en laat dit werk.

Nou het ons toegang tot ons bladsy op https:// virtual-machine-ip: 8080 vanaf ons blaaier. 'N Wit bladsy met Hello World -teks verskyn.

Geluk, u het pas 'n webbediener in node.js geskep!

Stap 9: Berei die sagteware voor

Gaan na die konsole en stop die program deur op ctrl+C te druk.

Vervang u index.js -lêer in/home/app/en vervang dit met ons index.js in.

U kan al die lêers vir die webwerf hier aflaai:

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

Kopieer ons Chrismas -boomkode van die html -gids na die afgeleë gids/var/www/html/met Filezilla. Dit sal 'n rukkie neem. As dit u vra, vervang index.html deur 'n nuwe een.

Plaas u IP weer in u gunsteling webblaaier.

U het pas u front-end van u webtoepassing beskikbaar gestel op https:// virtual-machine-ip.

Stap 10: Onbepaalde back-end-kode en laat dit werk

Let wel: u back-end-kode is by /home /app

Onthou, nadat u u kode plaaslik gewysig het, moet u nie vergeet om dit met FileZilla op u bediener op te laai nie, en u knoopprogram weer te begin (konsole: ctrl+c, pyltjie op (wys laaste opdragknoop index.js), voer in)

Om kode te laat werk, moet u eers 'n paar data invoer.

Eerstens moet u die veranderlike van die gasheernaam in index.js verander na u eie domein of IP (iets wat lyk: 165.13.45.123).

Tweedens sal ek u deur die kode lei om dit te verstaan. Maak seker dat u nie die opmerkings wat ek in die kode gemaak het, oorslaan nie.

U kan in die index.js -lêer sien dat ons 'n app skep met behulp van 'n snelmodule. Dan pas ons CORS -reëls daarop toe, voeg die API's by en begin 'n http -bediener. Hierdie bediener sal nie 'n webblad bedien deur middel van GET http-versoeke nie, maar dit sal geleide state deur middel van GET http-versoek bedien en geleide state opdateer oor ontvangen PUT

API's is algemene praktyk om inligting tussen toepassings uit te ruil. Die mees algemene wat ons gebruik, is REST API's wat ons self gebruik. Hulle is staatloos en het nie 'n aanhoudende verbinding nie (shorturl.at/aoBC3, PUT -versoeke werk eenvoudig die LED -state in die app array -veranderlike (geheue) op, GET -versoeke stuur eenvoudig geleide state na 'n kliënt.

Die antwoord op die kliënt is gewoonlik in JSON -notasie, maar vir hierdie eenvoudige reaksie van 30 LED -toestande stuur ons eenvoudig 'n string van 30 komma -geskeide waardes.

Stap 11: Verstaan die front-end kode en laat dit werk DEEL 1

Let wel: u front-end-kode is by/var/www/html

Onthou, nadat u u kode plaaslik gewysig het, moet u nie vergeet om dit met FileZilla na u bediener op te laai nie. Anders as node.js, begin Apache homself outomaties weer, maar u moet u bladsy in u blaaier herlaai. Gebruik ctrl+f5 om te verfris en om die kas van u bladsy ook te verwyder.

Om kode te laat werk, moet u min data invoer. Eerstens moet u die url -veranderlike in die send_request -funksie binne index.html verander van blinkmytree.live na u eie domein of IP, byvoorbeeld: 165.13.45.123.

Tweedens, ek sal u deur die kode lei om dit te verstaan. Moenie die kommentaar wat ek in die kode gemaak het, oorslaan nie. Bladsy is 'n HTML -dokument. As ons alle CSS -reëls (bladsystyl en inhoudsposisie) opsy laat, kyk ons na funksionele belangrike inhoud. Gaan na https://www.w3schools.com/css/ vir meer inligting oor CSS.

Ons wou hierdie hoofkenmerke hê (kenners van behendige metodes sou gebruikersverhale sê) op die bladsy:

• Regstreekse video wat op die bladsy ingebed is

• 'n Klikbare LED op 'n kersboom wat in die Gimp -beeldredakteur (https://www.gimp.org/) gemanipuleer is.

• Werklike kommunikasie met 'n bediener en wag om geleide state te verander.

Stap 12: Verstaan die front-end kode en laat dit werk DEEL 2

Sodra ons ons kersboom het met 'n aantal LED's en kleure om te kies, moet ons gebiede skep en aksies daarop toepas, dus sodra ons op die gekleurde LED in 'n kiesgedeelte van 'n prent klik, word 'n kleur gekies en een as ons op 'n LED klik, word die opdrag na die bediener gestuur, waar die Arduino die waarde daarvan sal kies.

In HTML5, die nuutste HTML -standaard, is daar iets wat 'n beeldkaart genoem word. Dit stel ons in staat om gebiede op 'n beeld te definieer, waarop ons aksiehoorders daarop kan toepas.

Aangesien ons baie gebiede moet definieer, het ons 'n aanlyn https://www.image-map.net/ hulpmiddel gebruik om hierdie gebiede te definieer en HTML-kode na ons bladsy gekopieer.

Sodra ons dit gedoen het, kan ons 'n klik -gebeurtenis plaas met 'n funksie wat dit noem en 'n parameter van 'n LED -nommer vir elk van hierdie gebiede. Sien die kiekie hierbo.

Stap 13: Verstaan die front-end kode en laat dit werk DEEL 3

Aan die einde van die HTML -liggaam, in 'n streek, sit ons 'n paar JavaScript om die funksies wat ons by klikgebeurtenisse noem, te definieer. Wêreldwyd definieer ons 'n XMLHttpRequest, wat ons gebruik om 'n PUT -versoek te stuur

Ons het twee funksies:

funksie stel_kleur (val)

funksie send_request (id)

Vir die toets van API -versoek, beveel ek 'n sagteware -instrument aan wat algemeen gebruik word Postman https://www.postman.com/. Dit stel ons in staat om eenvoudig 'n API -versoek na die bediener te stuur, sonder programmeringsvaardighede. Dit maak dit moontlik om 'n bediener te bespot en versoeke ook te aanvaar.

Stap 14: Verstaan die front-end kode en laat dit werk DEEL 4

Jou aansoek werk.

Let daarop dat die getalle omgekeer is, dit wil sê 20 is 1 en 1 is 20, dit is omdat LED's op die boom onderaan begin, maar vir 'n beter gebruikerservaring het ons 'n begin na bo gemaak.

U sal steeds 'n regstreekse stroom op YouTube moet skep as u dit wil hê en die inbedkode van die YouTube -video met u eie moet vervang.

Stap 15: Die Arduino -kode

Die ESP8266 gebruik 'n basiese skets van 'n HTTP -kliënt wat effens gewysig is, en ontvang die data van my webwerf via 'n API -oproep.

U sal ook biblioteke moet installeer om die LED -strook te beheer as u dieselfde adresbare RGB -strook wil gebruik as ek.

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

In die skets wat ek aangeheg het, moet u u Wi-Fi-naam en wagwoord en 'n URL op u webwerf invoeg (sien die kommentaar)

Ons omskep basies 'n http-antwoord in 'n C-getikte string, sodat ons die C-funksie strtok kan gebruik om die string met komma's te verdeel en die LED-tabel te vul met waardes wat vanaf 'n bediener gelees is. Dan noem ons 'n funksie waar ons deur die tabel gaan, en op grond van die waardes verander ons die regte kleur wat die gebruiker verwag.

Dit is dit!

Geluk, jy het dit reggekry!

Stap 16: RGB LED -ketting

Uh Oh. Dit is nou tyd om 'n blaaskans te neem van al die kodering:)

Aangesien die ESP8266 nie baie GPIO -penne het om LED's individueel te beheer nie, het ek hierdie aanspreekbare RGB LED -ketting gebruik:

www.sparkfun.com/products/11020

Op hierdie manier kan al 20 RGB -leds (totaal 60 leds) deur slegs twee penne beheer word - "data" en "klok" en 5V -krag direk vanaf ESP8266.

Dit is maklik om die strook aan die NodeMcu te koppel. 5V na Vin op NodeMcu (5V vanaf USB), geel draad na pen 12, groen draad na pen 14, grond tot grond.

U kan individuele RGB -kleur en helderheid instel. Met 'n bietjie kleurvermenging kan u baie kleure vir elke LED produseer.

Daar is ook 'n baie cool biblioteek vir allerhande koel FX -effekte met hierdie LED's. Probeer dit as jy wil:

github.com/r41d/WS2801FX

Stap 17: Versier die Kersboom

Maak dit mooi en maak seker dat al die LED's sigbaar is en mooi oor die boom versprei is.

Stap 18: Finale aanraking

As u die boom gereed het, neem 'n mooi foto en herhaal die stap om die prentkaart van die klikbare posisies (LED -posisies) te skep

Dit is die mees intuïtiewe manier om met die LED's te skakel.

As u nie dinge wil oordra nie, kan u gewone knoppies gebruik.

U moet ook 'n lewendige stroom van u boom op YouTube begin (as u intyds wil kyk wat gebeur) en die stroom op u webwerf insluit.

Stap 19: Bewonder u webwerf

Jy is wonderlik as jy so ver gekom het:) Nooi jou vriende (en ek natuurlik: P) en laat hulle soveel as moontlik op jou boom klik:)

n

Dit was 'n baie lang instruksie, vir 'n redelik ingewikkelde projek. Maar dit is aan die einde die moeite werd: D

Dankie! As u in kontak wil bly met dit waaraan ek werk:

U kan inteken op my YouTube -kanaal:

www.youtube.com/c/JTMakesIt

U kan my ook op Facebook en Instagram volg

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

vir spoilers oor waaraan ek tans besig is, agter die skerms en ander ekstras! PS:., As jy regtig, regtig daarvan gehou het, kan jy ook vir my 'n koffie hier koop, so ek sal meer energie hê vir toekomstige projekte (hierdie een het 2 weke se slaap van my af geneem, aangesien ek hierdie idee te laat gekry het):)

www.buymeacoffee.com/JTMakesIt

En vergeet nie om vir hierdie Instructable in die "Anything Goes" -kompetisie te stem nie:)