Veebisaidi juhitav jõulupuu (igaüks saab seda juhtida): 19 sammu (piltidega)

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:45

Kas soovite teada, milline näeb välja veebisaidil juhitav jõulupuu?

Siin on video, mis näitab minu jõulupuu projekti. Otseülekanne on praeguseks lõppenud, kuid tegin toimuva jäädvustamiseks video:

Sel aastal, detsembri keskel, lamasin oma voodis ja üritasin keset töönädalat magada. Ja magamise asemel mõtlesin, mis oleks lahe jõuluprojekt. Ja siis tuli mulle lahe idee.

Kuna olen jõulukaunistustega laisk, oleks lahe lasta kellelgi teisel minu jõulutulesid juhtida, nii et ma ei pea selle pärast muretsema.

"Mis siis, kui ma teeksin jõulukuuse tuled, mida KÕIK saaksid veebisaidi liidese kaudu juhtida?"

(sisestage kaks nädalat magamata öid)

Nii et sain hakkama.

Jõulupuu koos kahekümne RGB LED -iga, mis on Internetiga ühendatud ESP8266 Arduino kaudu.

Üks mu sõber (aitäh JP) aitas mul veebisaiti luua (kuna ma ei ole veebisaitidega seotud asjade valdav programmeerija).

Ja me seadsime minu puust ööpäevaringse YouTube'i otseülekande, nii et näete alati, mida sisse või välja lülitate.

See projekt on selle aasta jaoks ideaalne, kuna paljud meist olid lukus, ei saanud sõprade ja perega kohtuda ja suhelda. Miks mitte ühineda jõulupuu kaudu:)

Selles juhendis selgitan üksikasjalikult, kuidas see projekt tehti.

Samm: oskuste tase

See projekt on rohkem tarkvarale orienteeritud. Kuid ärge kartke: õnne ja onu Google abi aitavad tohutult:)

Teil peab olema kolm oskust (või õpid neid muretsemata): veebiserveri osa, Arduino osa ja loomulikult jõulupuu!

Soovitatavad teadmised:

• Põhilised arvuti- ja programmeerimisoskused

• Linuxi põhiteadmised

• Arvutivõrgu põhiteadmised

• Elektroonika põhiteadmised

• Google'i ja muude eriliste võimete kasutamise oskus

• Peaks teadma, kuidas jõulupuu üles seada:)

Kui teil on tehnoloogiat ja programmeerimist, peaksite saama õppida seda seadistama vastavalt käesolevale juhendile.

Samm: tööriistad ja komponendid

Jõulupuu poolel vajate: • jõulupuu (d'oh…)

• NodeMCU mikrokontrolleri plaat

(saate kasutada ka ESP32 või muid WiFi või Etherneti toega plaate)

• Aadressitav RGB LED -riba. adresseeritav RGB LED -riba säästab palju Arduino GPIO -sid (https://www.sparkfun.com/products/11020)

• Tarkvara NodeMCU jaoks (antud juhendis)

Serveri poolel vajate:

• Avaliku IP -ga virtuaalne privaatserver. Siin saate DigitalOceanis tasuta 100 dollarit

• Domeen (valikuline), mille saate registreerida mis tahes registripidajaorganisatsioonis, näiteks

• spetsiaalne kood (kaasas selle juhendiga)

Samm: virtuaalmasina (arvuti) seadistamine 1. OSA

Läheme otse kodeerimise juurde:)

Vajame serverit, mis suhtleb veebisaidi ja NodeMCU -ga.

DigitalOceani serverid võimaldavad meil omada avaliku IP -aadressiga virtuaalmasinat, mis tähendab, et saame sellel teenuseid käitada ja neile kogu maailmas juurde pääseda.

Kui olete tasunud DigitalOceeni kuutellimuse (saate kasutada 60 -päevast tasuta prooviperioodi), looge projekt ja pange sellele jõulupuu või mis iganes soovite.

Nüüd saate luua oma virtuaalse masina (kaugjuurdepääsetav virtuaalarvuti), klõpsates nupul „Alusta tilgaga” (mis on põhimõtteliselt DigitalOcean'i nimi virtuaalse masina jaoks).

Ilmub konfiguratsioonileht ja saate vaikimisi jääda: Ubuntu pilt, põhiplaan ja blokeerimata salvestusruum (5 dollarit kuus)

4. samm: virtuaalmasina (arvuti) konfigureerimine 2. OSA

Andmekeskuse piirkond on koht, kus teie server luuakse.

Valige endale ja teie potentsiaalsetele kasutajatele lähim. See tagab madalaima reageerimisaja.

Lisaks palutakse teil jaotises Autentimine sisestada virtuaalmasinale juurdepääsuks parool.

Jaotises Viimistle ja loo, jäta vaikimisi 1 tilk, vali hosti nimi (uuesti jõulupuu), vali varem loodud projekt, kui seda pole vaikimisi valitud, ja klõpsa Loo tilk. Selleks kulub mõni minut. Vasakul navigeerimisosas oma projekti klõpsates näete oma tilka.

Samm: virtuaalmasina (arvuti) seadistamine 3. OSA

Kui klõpsate tilga paremal asuvat kolme punkti, saate klõpsata juurdepääsukonsoolil, mis võimaldab teil juurdepääsu oma virtuaalarvutile.

Avaneb uus väike brauseriaken. Nüüd pole see töölauakeskkond, nagu teie Windows 10 või Ubuntu graafilise liidesega arvutis.

Kuid kõike saab teha konsooli liidese kaudu.

See pole nii hirmutav, kui tundub:)

Samm 6: Virtuaalse masina (arvuti) seadistamine OSA 4

Olete DigitalOceani pilves oma virtuaalse masina edukalt loonud.

Järgmistes sammudes seadistage veebiserver nimega Apache ja seadistage oma veebileht.

Laadige Filezilla klient alla siit https://filezilla-project.org/download.php?platfo… (või otsige 32-bitine versioon 32-bitise opsüsteemi jaoks) ja installige see. See on FTP (File Transfer Protocol) klient.

Teil on juurdepääs failidele ja neid oma virtuaalmasinasse ja sealt üle kanda.

Pärast installimist klõpsake faili → saidihaldur → uus sait ja sisestage andmed nagu ülaltoodud pildil.

Protokoll: SFTP (Secure File Transfer Protocol)

Host: oma serveri IP, otsige oma DigitalOcean projektist.

Kasutaja on juur ja parool on see, mille määrasite oma tilga loomisel.

Klõpsake nuppu OK ja looge ühendus oma virtuaalse masinaga.

Teid hoiatatakse, hosti võti on teadmata. Järgige teist pilti.

Looge projekti jaoks kohalik kaust ja ekstraheerige siia alla laaditavad projektifailid.

Muutke oma arvutis olevaid faile ja teisaldage need oma virtuaalmasinasse iga kord, kui soovite koodi testida või värskendada.

Samm: installige veebiserver

Logige oma tilgakonsooli sisse kasutajanime root ja parooliga.

Kuna meil pole graafilist liidest, kasutame teie virtuaalse masina juhtimiseks käske. Siin on mõned levinumad käsud, mida kasutate Ubuntu (Linux) puhul:

• pwd - prindib minu praeguse kataloogi

• ls - minu praeguse kataloogi failide ja kaustade loend

• cd / - liikuda kataloogi / (kaust, mis sisaldab linuxi peamisi katalooge nagu jne, bin, boot, dev, root, home, var ja nii edasi)

Käivitamise all ma mõtlen, et sisestage käsk ja vajutage sisestusklahvi.

Nüüd käivitame süsteemi värskendamiseks apt -get update -y.

Apache veebiserveri installimiseks käivitage apt install apache2 -y.

Teie Apache tervitusekraan peaks olema brauseri kaudu juurdepääsetav teie https:// virtual-machine-ip-le.

Asendage virtual-machine-ip oma virtuaalse masina ip-ga, näiteks 165.12.45.123. Võite ka https:// vahele jätta, kuna see lisatakse automaatselt.

Palju õnne!

Märge:

Kui soovite, et teie veebisait oleks juurdepääsetav nime, mitte IP -aadressi kaudu (nagu ma kasutasin https://blinkmytree.live/), minge domeeni pakkuja saidile GoDaddy või sarnasele saidile (namecheap.com jne) ja järgige juhiseid siin:

Mõned domeeninimed on väga odavad. Minu domeen maksis vaid 2 dollarit aastas. Kindlasti raha väärt:)

Samm: installige veebirakenduse raamistik

Tagasi meie konsooli juurde. Ära karda:)

Kasutage Filezilla, et luua kaust nimega app sees /home, seega on /home /app teie kaust

Rakenduste kausta sisenemiseks käivitage cd /home /app.

Käivitage apt install npm -y, et installll npm paketihaldur. Selleks kulub mõni minut.

Käivitage npm init -y, et luua fail package.json, mis jälgib/jätab meelde rakenduse peamised paketi andmed.

Käivita npm -salvesta paigalduskoorid Express, et paigaldada moodulid cors, express

Cors on saidiülese juurdepääsu konfigureerimise moodul ja Express on veebirakenduse raamistik.

Npm on pakettide haldur, mida me kasutasime, ja me kasutame rakenduse programmeerimisliidese (API) programmeerimiseks JavaScript JavaScripti käitusaega, mis koos http -serveriga võtab vastu HTTP -taotlusi LED -idele värvide rakendamiseks, märgib nende väärtused (värvid) mällu ja edastage väärtused NodeMcu -le, kui see seda nõuab.

Märkus: NodeMcu sõlmel pole midagi pistmist node.js sõlmega. NodeMcu võib asendada mis tahes Interneti -ühendusega arduino arendusplaadiga, NXP arendusplaadiga või kohandatud Microchip/NXP/Renesas/STM/Atmel PCB -ga. Node.js võib asendada ka. Net raamistiku, PHP või mõne muu platvormiga. Kuid lihtsuse huvides kasutame NodeMCU ja Node.js.

Nüüd teeme testi, kas suudame käivitada väikese programmi sõlmes.js

Looge fail nimega index.js notepad/notepad ++ või mõne muu redigeerija või integreeritud arenduskeskkonnaga (Visual Studio kood https://code.visualstudio.com/) oma kausta.

Pane see kood sinna:

var http = nõuda ('http');

http.createServer (funktsioon (req, res) {

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

res.end ('Tere maailm!');

}). kuula (8080);

Salvestage see ja teisaldage see kausta/kodu/rakendusse nimega index.js, topeltklõpsates/lohistades failis FileZilla.

Käivitage sõlm index.js ja jätke see töötama.

Nüüd pääseme oma brauserist oma lehele aadressil https:// virtual-machine-ip: 8080. Ilmub valge leht tekstiga Hello World.

Palju õnne, lõite just veebiserveri node.js!

Samm: valmistage tarkvara ette

Minge konsooli ja peatage programm, vajutades klahvikombinatsiooni ctrl+C.

Asendage fail index.js kataloogis/home/app/ja asendage see failiga index.js.

Kõik saidi failid saate alla laadida siit:

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

Kopeerige meie jõulupuu kood html -kaustast Filezilla abil kausta kataloogi/var/www/html/. See võtab natuke aega. Kui see küsib, asendage index.html uuega.

Pange oma IP uuesti oma lemmikveebibrauserisse.

Olete äsja teinud oma veebirakenduse kasutajaliidese kättesaadavaks saidil https:// virtual-machine-ip.

10. samm: tagakoodi lahtimõtestamine ja selle toimimine

Märkus: teie taustakood asub aadressil /home /app

Pidage meeles, et pärast koodi kohalikku muutmist ärge unustage seda FileZilla abil oma serverisse üles laadida ja taaskäivitage sõlmerakendus (konsool: ctrl+c, nool üles (näitab viimast käsku node index.js), sisestage)

Koodi toimimiseks peate esmalt sisestama mõned andmed.

Esiteks peate muutma hostinime muutuja failis index.js oma domeeniks või IP -ks (mis näeb välja selline: 165.13.45.123).

Teiseks juhendan teid koodi mõistmiseks. Ärge jätke koodis tehtud kommentaare vahele.

Failist index.js näete, et loome rakenduse ekspressmooduli abil. Seejärel rakendame sellele CORS -i reegleid, lisame API -sid ja käivitame http -serveri. See server ei toeta veebilehti GET-http-päringute kaudu, kuid teenindab juhitud olekuid GET-http-päringu kaudu ja värskendab juhitud olekuid saadud PUT-http-päringute kaudu.

API -d on rakendustevahelise teabe vahetamiseks tavapärane tava. Kõige sagedamini kasutame REST API -sid, mida ise kasutame. Nad on kodakondsuseta ja neil pole püsivat ühendust (shorturl.at/aoBC3, PUT -päringud värskendavad lihtsalt rakenduse massiivi muutuja (mälu) LED -olekuid, GET -päringud saadavad kliendile lihtsalt led -olekuid.

Vastus kliendile on tavaliselt JSON -märgistuses, kuid selle 30 LED -oleku lihtsa vastuse jaoks saadame lihtsalt 30 komaga eraldatud väärtusega stringi.

11. samm: kasutajaliidese koodi mõistmine ja selle toimimine 1. OSA

Märkus. Teie kasutajaliidese kood on aadressil/var/www/html

Pidage meeles, et pärast koodi kohalikku muutmist ärge unustage seda FileZilla abil oma serverisse üles laadida. Erinevalt node.js -st taaskäivitab Apache ennast automaatselt, kuid peate oma lehe brauseris uuesti laadima. Kasutage ka lehe vahemälu värskendamiseks ja kustutamiseks klahve ctrl+f5.

Koodi toimimiseks peate sisestama vähe andmeid. Esiteks peate muutma URL -i muutuja funktsioonis send_request funktsiooni index.html sees blinkmytree.live oma domeeniks või IP -aadressiks, näiteks: 165.13.45.123.

Teiseks juhendan teid koodi mõistmiseks. Ärge jätke koodis tehtud kommentaare vahele. Leht on HTML -dokument. Jättes kõrvale kõik CSS -i reeglid (lehe stiil ja sisu positsioon), vaatame funktsionaalsust olulist sisu. CSS -i kohta lisateabe saamiseks vaadake

Soovisime lehele selliseid põhifunktsioone (väledate meetodite eksperdid ütleksid kasutajate lugusid):

• Lehele manustatud reaalajas video

• Jõulukuusel klõpsatavad LED -id, millega manipuleeriti Gimpi pildiredaktoris (https://www.gimp.org/).

• Tegelik suhtlus serveriga, oodates LED -olekute muutmist.

12. samm: kasutajaliidese koodi mõistmine ja selle toimimine 2. OSA

Kui meil on jõulupuu, kus on mitu LED -i ja värvi valida, peame looma alad ja rakendama neile toiminguid, nii et kui klõpsame pildi valijaosas värvilisel LED -il, valitakse värv ja klõpsame LED -il, käsk saadetakse serverisse, kus Arduino valib oma väärtuse.

Uusimas HTML -standardis HTML5 on midagi, mida nimetatakse pildikaardiks. See võimaldab meil määratleda pildil alasid, mida saame sellele tegevuste kuulajaid rakendada.

Kuna meil on palju valdkondi, mida määratleda, kasutasime nende alade määratlemiseks veebis https://www.image-map.net/ olevat tööriista ja kopeerisime oma lehele HTML-koodi.

Kui oleme seda teinud, saame panna onclicki sündmuse funktsiooniga, mille ta kutsub, ja LED -numbri parameetri igale nendele aladele. Vaadake ülaltoodud ekraanipilti.

13. samm: kasutajaliidese koodi mõistmine ja selle toimimine 3. OSA

HTML -i keha lõppu, mõnda piirkonda, panime JavaScripti, et määratleda funktsioonid, mida kutsume onclicki sündmuste puhul. Ülemaailmselt määratleme XMLHttpRequest, mida kasutame PUT -päringu saatmiseks

Meil on kaks funktsiooni:

funktsioon set_color (val)

funktsioon send_request (id)

API taotluse testimiseks soovitan levinud tarkvarariista Postman https://www.postman.com/. See võimaldab meil lihtsalt saata API -taotluse serverisse ilma programmeerimisoskuseta. See võimaldab mõnitada serverit ja vastu võtta ka taotlusi.

14. samm: kasutajaliidese koodi mõistmine ja selle toimimine 4. OSA

Teie rakendus töötab.

Pidage meeles, et numbrid on vastupidised, see tähendab, et 20 on 1 ja 1 on 20, sest puu otsas olevad valgusdioodid algavad altpoolt, kuid parema kasutuskogemuse tagamiseks paneme algusesse viimise.

Kui soovite, peate YouTube'is siiski otseülekande looma ja YouTube'i video manustamiskoodi omaga asendama.

Samm: Arduino kood

ESP8266 käitab HTTP kliendi põhinäite visandit, mida on veidi muudetud, saades andmed minu veebisaidilt API kõne kaudu.

Kui soovite kasutada sama adresseeritavat RGB -riba, mida kasutasin, peate installima ka teegid LED -riba juhtimiseks.

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

Lisatud eskiisile peate sisestama oma wi-fi nime ja parooli ning oma veebisaidi URL-i (vt kommentaare)

Põhimõtteliselt teisendame http-vastuse C-tüüpi trükiks, nii et saame funktsiooni C strtok abil stringi komadeks jagada ja täita ledide tabeli serverist loetud väärtustega. Kui me nimetame funktsiooni, kus me tabelit läbime ja väärtuste põhjal muudame õige värvi, mida kasutaja ootab.

See ongi!

Palju õnne, said hakkama!

16. samm: RGB LED -kett

Oh, oh. Nüüd on aeg teha väike paus kogu kodeerimisel:)

Kuna ESP8266 -l pole LED -ide individuaalseks juhtimiseks palju GPIO -tihvte, kasutasin seda adresseeritavat RGB -LED -ahelat:

www.sparkfun.com/products/11020

Nii saab kõiki 20 RGB LED -i (kokku 60 LED -i) juhtida ainult kahe tihvtiga - "andmed" ja "kell" ning 5 V toide otse ESP8266 -lt.

Riba ühendamine NodeMcu -ga on lihtne. 5 V to Vin on NodeMcu (5 V USB), kollane juhe pistikuni 12, roheline juhe pistikuni 14, maandus maanduseni.

Saate määrata individuaalse RGB värvi ja heleduse. Mõne värvi segamisega saate toota PALJU värve iga LED -i jaoks.

Nende LED -idega on ka väga lahe raamatukogu igasuguste lahedate FX -efektide jaoks. Proovige järele, kui teile meeldib:

github.com/r41d/WS2801FX

Samm: kaunistage jõulupuu

Tehke see ilusaks ja veenduge, et kõik LED -id oleksid nähtavad ja kenasti üle puu laiali.

18. samm: viimased puudutused

Kui olete puu valmis saanud, tehke kena foto ja korrake klõpsatavate positsioonide (LED -positsioonide) pildikaardi loomise sammu

See on kõige intuitiivsem viis LED -idega liidestamiseks.

Kui te ei soovi asju liiga keeruliseks muuta, võite kasutada tavalisi nuppe.

Samuti peaksite alustama oma puu otseülekannet YouTube'is (kui soovite reaalajas toimuvat vaadata) ja manustada voo oma saidile.

19. samm: imetlege oma veebisaiti

Sa oled vinge, kui nii kaugele jõudsid:) Kutsu oma sõbrad (ja mina muidugi: P) ja pane nad nii palju kui võimalik sinu puule klõpsama:)

n

See oli väga pikk juhendatav üsna keerulise projekti jaoks. Aga see on lõpuks seda väärt: D

Aitäh! Kui soovite olla kursis sellega, millega ma tegelen:

Saate tellida minu YouTube'i kanali:

www.youtube.com/c/JTMakesIt

Võite mind jälgida ka Facebookis ja Instagramis

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

spoilerite jaoks, millega ma praegu tegelen, kulisside taga ja muud lisad! PS:., Kui teile PÄRISELT, PÄRISELT meeldis, võite mulle ka kohvi osta, nii et mul on rohkem energiat tulevasteks projektideks (see võttis minult 2 nädalat und, kuna sain selle idee liiga hilja):)

www.buymeacoffee.com/JTMakesIt

Ja ärge unustage hääletada selle juhendatava poolt konkursil "Kõik läheb":)