Веб-сайтпен басқарылатын шырша (кез келген адам оны басқара алады): 19 қадам (суреттермен)

2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-01-30 10:22

Веб -сайтта бақыланатын шырша қандай болатынын білгіңіз келе ме?

Міне, менің шыршамның жобасын көрсететін бейне. Тікелей эфир қазір аяқталды, бірақ мен не болып жатқанын түсіретін видео жасадым:

Биыл, желтоқсанның ортасында, мен жұмыс аптасының ортасында ұйықтауға тырысып, төсегімде жаттым. Мен ұйықтаудың орнына Рождестволық керемет жоба не болатынын ойладым. Содан кейін маған керемет идея келді.

Рождестволық әшекейлерге жалқау болғандықтан, менің шыршамды басқаларға басқаруға рұқсат беру жақсы болар еді, сондықтан мен бұл туралы алаңдамаймын.

«Егер мен Рождестволық шыршаны кез келген адам веб -сайт интерфейсі арқылы басқара алатын шамдар жасасам ше?»

(екі апта ұйқысыз түнді енгізіңіз)

Сондықтан мен үлгердім.

ESP8266 Arduino арқылы интернетке қосылған жиырма RGB светодиодтары бар шырша.

Менің досым (JP -ге рахмет) маған веб -сайт құруға көмектесті (өйткені мен веб -сайтқа қатысты материалдарды еркін меңгерген емеспін).

Біз YouTube -те тәулік бойы жұмыс істейтін тікелей эфирді орнаттым, осылайша сіз әрқашан қосатын немесе өшіретін нәрсені көре аласыз.

Бұл жоба биылғы жылға өте ыңғайлы, өйткені біздің көпшілігіміз достарымызбен және отбасымызбен кездесе алмадық. Неге шырша арқылы бірігуге болмайды?:)

Бұл нұсқаулықта мен бұл жобаның қалай жасалғанын егжей -тегжейлі түсіндіремін.

1 -қадам: Біліктілік деңгейі

Бұл жоба бағдарламалық қамтамасыз етуге көбірек бағытталған. Бірақ қорықпаңыз, Google ағасының сәттілігі мен көмегі сізге үлкен көмек береді:)

Сізге 3 дағдылар жиынтығы қажет (немесе сіз оларды алаңдатпай үйренесіз): веб -сервердің бөлігі, Arduino бөлігі мен жаңа жылдық шырша!

Ұсынылатын білім:

• Компьютер мен бағдарламалаудың негізгі дағдылары

• Linux терминалы туралы негізгі білім

• Компьютерлік желілер туралы негізгі білім

• Электроника туралы негізгі білім

• Google және басқа «ерекше» қабілеттерді қолдану дағдылары

• Рождестволық шыршаны орнатуды білуі керек:)

Егер сізде технология мен бағдарламалау туралы түсінік болса, сіз оны осы нұсқаулыққа сәйкес орнатуды үйренуіңіз керек.

2 -қадам: Құралдар мен компоненттер

Шырша жағында сізге қажет: • шырша

• NodeMCU микроконтроллер тақтасы

(сонымен қатар ESP32 немесе басқа Wi-Fi немесе Ethernet қолдайтын тақталарды пайдалануға болады)

• Мекенжайланатын RGB светодиодты жолағы. адрестелетін RGB LED жолағы көптеген Arduino GPIO -ны үнемдейді (https://www.sparkfun.com/products/11020)

• NodeMCU бағдарламалық қамтамасыз ету (осы нұсқаулықта берілген)

Сервер жағында сізге қажет:

• Жалпыға ортақ IP бар виртуалды жеке сервер. Мұнда сіз DigitalOcean -да 100 доллар тегін аласыз

• Домен (міндетті емес), сіз кез келген тіркеуші ұйымда тіркеле аласыз, мысалы

• Арнайы код (осы нұсқаулықпен бірге беріледі)

3 -қадам: Виртуалды машинаны (компьютерді) теңшеу 1 -БӨЛІМ

Кодтауға көшейік:)

Бізге веб -сайтпен және NodeMCU -мен байланысатын сервер қажет.

DigitalOcean серверлері бізге жалпыға ортақ IP -адресі бар виртуалды машинаның болуына мүмкіндік береді, яғни біз онымен қызметтерді іске қосамыз және оларға бүкіл әлем бойынша қол жеткізе аламыз.

Ай сайын DigitalOcean жазылымын төлегеннен кейін (сіз 60 күндік ақысыз сынақ нұсқасын пайдалана аласыз), жоба жасаңыз және оған шырша немесе өзіңіз қалаған нәрсені атаңыз.

Енді сіз виртуалды машинаны (қашықтан қол жетімді виртуалды компьютер) «Тамшымен бастау» түймесін басу арқылы жасай аласыз (бұл DigitalOcean виртуалды машинаның атауы).

Конфигурация беті пайда болады және сіз әдепкі бойынша қалуға болады: Ubuntu кескіні, негізгі жоспар және блоктық қойма жоқ (айына 5 $)

4 -қадам: Виртуалды машинаны (компьютерді) теңшеу 2 -БӨЛІМ

Деректер орталығы - бұл сіздің сервер жасалатын орын.

Сізге және сіздің әлеуетті пайдаланушыларыңызға жақынырақ таңдаңыз. Бұл ең аз жауап беру уақытын қамтамасыз етеді.

Сонымен қатар, аутентификация бөлімінде виртуалды машинаға кіру үшін құпия сөзді енгізу сұралады.

«Аяқтау және жасау» бөлімінде 1 тамшының әдепкі мәнін сақтаңыз, хост атауын таңдаңыз (жаңа жылдық шырша), егер әдепкі бойынша таңдалмаған болса, бұрын жасалған жобаңызды таңдап, Тамшы жасау түймешігін басыңыз. Бұл бірнеше минутты алады. Сол жақтағы навигация бөлімінде жобаңызды басу арқылы сіз тамшыны көресіз.

5 -қадам: Виртуалды машинаны (компьютерді) теңшеу 3 -БӨЛІМ

Тамшының оң жағындағы үш нүктені басу арқылы Access консолін шертуге болады, бұл сізге виртуалды компьютерге кіруге мүмкіндік береді.

Жаңа шағын шолғыш терезесі ашылады. Енді бұл Windows 10 немесе Ubuntu графикалық интерфейсі бар компьютер сияқты жұмыс үстелі емес.

Дегенмен, бәрін консольдік интерфейс арқылы жасауға болады.

Бұл көрінгендей қорқынышты емес:)

6 -қадам: Виртуалды машинаны (компьютерді) теңшеу 4 -БӨЛІМ

Сіз DigitalOcean бұлтында өзіңіздің виртуалды машинаңызды сәтті құрдыңыз.

Келесі қадамдарда сіз Apache деп аталатын веб -серверді орнатасыз және өзіңіздің жеке веб -парағыңызды орнатасыз.

Filezilla клиентін мына жерден жүктеңіз https://filezilla-project.org/download.php?platfo… (немесе 32 биттік операциялық жүйеге арналған 32 биттік нұсқаны табыңыз) және оны орнатыңыз. Бұл FTP (File Transfer Protocol) клиенті.

Сіз виртуалды машинадан файлдарға қол жеткізе және тасымалдай аласыз.

Орнатқаннан кейін файл → сайт менеджері → жаңа сайтты басып, жоғарыдағы суреттегідей деректерді енгізіңіз.

Хаттама: SFTP (файлдарды қауіпсіз жіберу протоколы)

Хост: Сіздің сервердің IP мекенжайы, DigitalOcean жобасынан табыңыз.

Қолданушы - бұл тамшы жасау кезінде оны орнатқан пароль.

OK түймесін басып, виртуалды құрылғыға қосылыңыз.

Сізге ескерту беріледі, хост кілті белгісіз. Екінші суретті орындаңыз.

Жоба үшін жергілікті қалта жасаңыз және осы жерден жүктелетін жоба файлдарын шығарыңыз.

Сіз кодты тексерген немесе жаңартқан сайын компьютердегі файлдарды өңдеп, виртуалды машинаңызға жібересіз.

7 -қадам: веб -серверді орнатыңыз

Пайдаланушы аты түбірі мен құпия сөзбен тамшы консоліне кіріңіз.

Бізде графикалық интерфейс жоқ болғандықтан, біз виртуалды машинаны басқару үшін командаларды қолданамыз. Міне, Ubuntu (Linux) жүйесінде қолданылатын бірнеше жалпы командалар:

• pwd - ағымдағы каталогты басып шығару

• ls - ағымдағы каталогтағы файлдар мен қалталарды тізімдеу

• cd / - / каталогына өту (қалта, оның ішінде linux негізгі каталогтары бар, bin, boot, dev, root, home, var және т.б.)

Іске қосу арқылы мен команданы енгізіп, enter пернесін басуды айтамын.

Енді біз жүйені жаңарту үшін apt -get update -y іске қосамыз.

Apache веб -серверін орнату үшін apt install apache2 -y іске қосыңыз.

Apache сәлемдесу экраны браузерден https:// virtual-machine-ip мекенжайында қол жетімді болуы керек.

Virtual-machine-ip-ді виртуалды машинаның ip-ге ауыстырыңыз, мысалы 165.12.45.123. Сіз https:// өткізіп жібере аласыз, себебі ол автоматты түрде қосылады.

Құттықтаймын!

Ескерту:

Егер сіз өзіңіздің веб -сайтыңызға IP -адрес емес, атау арқылы қол жеткізгіңіз келсе (мен https://blinkmytree.live/ қолданған сияқты), GoDaddy немесе оған ұқсас (namecheap.com және т.б.) домен провайдерінің сайтына өтіп, нұсқауларды орындаңыз. мұнда:

Кейбір домендік атаулар өте арзан. Менің доменім жылына небәрі 2 доллар тұрады. Әрине ақшаға тұрарлық:)

8 -қадам: Web Application Framework жүйесін орнатыңыз

Біздің консольге оралу. Қорықпа:)

Filezilla көмегімен /home ішінде қолданба деп аталатын қалта жасау үшін, /home /app сіздің қалтаңыз болады

Қолданбаның ішкі қалтасына өту үшін cd /home /app іске қосыңыз.

Npm пакет менеджерін орнату үшін apt install npm -y іске қосыңыз. Бұл бірнеше минутты алады.

Бағдарлама туралы негізгі пакеттік деректерді қадағалайтын/есте сақтайтын package.json файлын жасау үшін npm init -y іске қосыңыз.

Npm іске қосыңыз -cors, express модульдерін орнату үшін express cors орнатыңыз

Cors - бұл сайттарға кіруді конфигурациялауға арналған модуль, ал экспресс - бұл веб -қосымшаның негізі.

Npm - біз қолданған пакет менеджері және біз node.js JavaScript жұмыс уақытын бағдарламалық интерфейсті (API) бағдарламалау үшін қолданамыз, ол http серверімен бірге светодиодтарға түстерді қолдану үшін HTTP сұрауларын қабылдайды, олардың мәндерін (түстерін) белгілейді. жадта сақтаңыз және мәндерді NodeMcu сұраған кезде жіберіңіз.

Ескерту: NodeMcu торабының node.js торабына ешқандай қатысы жоқ. NodeMcu кез келген интернетке қосылған arduino дамыту тақтасы, NXP әзірлеу тақтасы немесе Microchip/NXP/Renesas/STM/Atmel PCB теңшелімдерімен ауыстырылуы мүмкін. Node.js. Net framework, PHP немесе кез келген басқа платформамен ауыстырылуы мүмкін. Бірақ қарапайымдылық үшін біз NodeMCU мен Node.js. қолданамыз.

Енді node.js -те шағын бағдарламаны іске қоса алатын болсақ, тест жасайық

Жергілікті қалтада блокнот/блокнот ++ немесе басқа редакторы бар немесе Visual Basic Code https://code.visualstudio.com/ бар әзірлеуші ортасы бар index.js атты файл жасаңыз.

Бұл кодты оған қойыңыз:

var http = талап етіңіз ('http');

http.createServer (функция (req, res) {

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

res.end ('Сәлем Әлем!');

}). тыңдаңыз (8080);

Оны сақтаңыз және FileZilla файлында екі рет басу/апару арқылы index.js қалтасына/үйге/қолданбаға жіберіңіз.

Index.js түйінін іске қосыңыз және оны жұмыс күйінде қалдырыңыз.

Енді біз браузерден https:// virtual-machine-ip: 8080 мекен-жайы бойынша өз бетімізге кіре аламыз. Hello World мәтіні бар ақ бет пайда болады.

Құттықтаймыз, сіз node.js веб -серверін құрдыңыз!

9 -қадам: Бағдарламаны дайындаңыз

Консольге өтіңіз және ctrl+C пернелерін басу арқылы бағдарламаны тоқтатыңыз.

Index.js файлын/home/app/ішіне ауыстырыңыз және оны index.js ішіне ауыстырыңыз.

Сіз сайттың барлық файлдарын мына жерден жүктей аласыз:

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

Біздің Chrismas ағаш кодын html қалтасынан Filezilla көмегімен қашықтағы каталогқа/var/www/html/көшіріңіз. Бұл біраз уақытты алады. Егер ол сізден сұраса, index.html орнына жаңасын қойыңыз.

IP мекенжайын сүйікті веб -шолғышқа қайта салыңыз.

Сіз жаңа веб-қосымшаны https:// virtual-machine-ip сайтында қол жетімді қылдыңыз.

10-қадам: Артқы кодты түсінбеу және оны жұмыс істеу

Ескерту: сіздің соңғы кодыңыз /home /app

Есіңізде болсын, жергілікті кодты өңдегеннен кейін, оны FileZilla көмегімен серверге жүктеуді және түйін қосымшасын қайта қосуды ұмытпаңыз (консоль: ctrl+c, көрсеткі жоғары (index.js пәрменінің соңғы түйінін көрсетеді), енгізіңіз)

Код жұмыс істеуі үшін алдымен бірнеше деректерді енгізу қажет.

Біріншіден, index.js хост атауының айнымалы мәнін өзіңіздің доменіңізге немесе IP -ге өзгертуіңіз керек (ұқсас: 165.13.45.123).

Екіншіден, мен сізге кодты түсінуге көмектесемін. Мен кодта жасаған түсініктемелерді өткізіп алмаңыз.

Index.js файлында экспресс -модульді қолдана отырып бағдарлама жасайтынымызды көруге болады. Содан кейін біз оған CORS ережелерін қолданамыз, API қосамыз және http серверін іске қосамыз. Бұл сервер GET http сұраулары арқылы веб-бетке қызмет көрсетпейді, бірақ ол GET http сұранысы арқылы жетекші күйлерге қызмет көрсетеді және алынған PUT http сұрауларындағы жетекші күйлерді жаңартады.

API - қосымшалар арасында ақпарат алмасудың кең таралған тәжірибесі. Біз жиі қолданатындар - бұл өзіміз қолданатын REST API. Олар азаматтығы жоқ және тұрақты байланысы жоқ (shorturl.at/aoBC3, PUT сұраулары қолданба жиымының айнымалыдағы (жадтағы) күйлерді жаңартады, GET сұраулары тұтынушыға жай күйді жібереді.

Клиентке жауап әдетте JSON белгісінде болады, бірақ 30 жарық диодты күйдің қарапайым жауабы үшін біз 30 үтірмен бөлінген мәндердің жолын жібереміз.

11-қадам: Front-end кодын түсіну және оны жұмыс істеу 1-БӨЛІМ

Ескерту: сіздің алдыңғы кодыңыз/var/www/html

Есіңізде болсын, жергілікті кодты өңдегеннен кейін, оны FileZilla көмегімен серверге жүктеуді ұмытпаңыз. Node.js -тен айырмашылығы, Apache автоматты түрде қайта іске қосылады, бірақ бетті шолғышта қайта жүктеуге тура келеді. Беттің кэшін жаңарту және жою үшін ctrl+f5 пернелерін пайдаланыңыз.

Код жұмыс істеуі үшін сізге бірнеше деректерді енгізу қажет болады. Алдымен, index.html ішіндегі send_request функциясындағы url айнымалысын blinkmytree.live -тен жеке доменге немесе IP -ге өзгерту қажет болады, мысалы: 165.13.45.123.

Екіншіден, мен сізге кодты түсінуге көмектесемін. Мен кодта жазған түсініктемелерді өткізіп алмаңыз. Бет - бұл HTML құжаты. Барлық CSS ережелерін (бет стилі мен мазмұн позициясын) қалдыра отырып, біз маңызды мазмұнның функционалдығын қарастырамыз. CSS туралы көбірек білу үшін https://www.w3schools.com/css/ сайтына өтіңіз.

Біз бұл негізгі ерекшеліктерді (жылдам әдістердің мамандары қолданушылардың әңгімелерін айтады) алғымыз келді:

• Бетке енгізілген тікелей бейне

• Рождестволық шыршаның басылатын жарық диодтары, олар Gimp кескін редакторында басқарылды (https://www.gimp.org/).

• Жеткізілген күйлерді өзгертуді күтетін сервермен нақты байланыс.

12-қадам: Front-end кодын түсіну және оны жұмыс істеу 2-БӨЛІМ

Бізде жарық диодтары мен түстері бар жаңа жылдық шырша болған кезде, біз аймақтар құрып, оларға әрекеттер қолдануымыз керек, сондықтан суреттің таңдау бөлігіндегі түсті жарықдиодты басқан кезде түс таңдалады, ал біреуі біз жарық диодты шертеміз, команда серверге жіберіледі, онда Arduino оның мәнін таңдайды.

HTML5 -те, ең жаңа HTML стандарты, кескін карта деп аталатын нәрсе бар. Бұл бізге кескіннің аудандарын анықтауға мүмкіндік береді, біз оған тыңдаушыларды қолдана аламыз.

Бізде анықталатын көптеген жерлер болғандықтан, біз бұл аймақтарды анықтау үшін https://www.image-map.net/ құралын қолдандық және HTML кодын біздің бетке көшірдік.

Мұны жасағаннан кейін, біз onclick оқиғасын ол шақыратын функциямен және жарық диодты нөмірдің параметрімен осы аймақтардың әрқайсысына қоя аламыз. Жоғарыдағы скриншотты қараңыз.

13-қадам: Front-end кодын түсіну және оны жұмыс істеу 3-БӨЛІМ

HTML денесінің соңына, аймаққа onclick оқиғаларында шақырылатын функцияларды анықтау үшін JavaScript енгіземіз. Әлемдік деңгейде біз XMLHttpRequest анықтаймыз, оны PUT сұрауын жіберу үшін қолданамыз

Бізде екі функция бар:

set_color функциясы (val)

send_request функциясы (идентификатор)

API сұранысын тексеру үшін мен Postman деп аталатын кеңінен қолданылатын бағдарламалық құралды ұсынамын https://www.postman.com/. Бұл бізге API сұрауын серверге бағдарламалау дағдыларынсыз жіберуге мүмкіндік береді. Бұл серверді мазақ етуге және сұраныстарды қабылдауға мүмкіндік береді.

14-қадам: Front-end кодын түсіну және оны жұмыс істеу 4-БӨЛІМ

Сіздің қосымшаңыз жұмыс істейді.

Есіңізде болсын, сандар керісінше, яғни 20 - 1 және 1 - 20, себебі ағаштағы жарықдиодты шамдар төменгі жағынан басталады, бірақ пайдаланушылардың тәжірибесін жақсарту үшін біз жоғарыдан басталатын жолды қоямыз.

Егер сіз қаласаңыз, YouTube -те тікелей эфир жасауыңыз керек және YouTube бейнесінің ендіру кодын өзіңіздікімен ауыстыруыңыз қажет.

15 -қадам: Arduino коды

ESP8266 аздап өзгертілген HTTP клиентінің негізгі эскизін іске қосады, API қоңырауы арқылы менің веб -сайтымнан деректерді алады.

Егер сіз мен сияқты мекенжайланатын RGB жолағын қолданғыңыз келсе, жарықдиодты жолақты басқару үшін сізге кітапханаларды орнату қажет болады.

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

Мен тіркеген эскизде сізге wi-fi атыңыз бен пароліңізді веб-сайтқа url енгізу қажет болады (түсініктемелерді қараңыз)

Біз негізінен http жауабын C терілген жолға түрлендіреміз, сондықтан strtok функциясын қолданып, жолды үтірмен бөлуге және leds кестесін серверден оқылатын мәндерге толтыруға болады. Біз кесте арқылы өтетін функцияны атаймыз және мәндерге сүйене отырып, пайдаланушы күтетін дұрыс түске айналдырамыз.

Міне!

Құттықтаймын, сіз қол жеткіздіңіз!

16 -қадам: RGB жарықдиодты тізбек

Ух. Енді барлық кодтаудан сәл үзіліс алу уақыты келді:)

ESP8266 -да светодиодтарды жеке басқаруға арналған көптеген GPIO түйреуіштері болмағандықтан, мен осы адрестік RGB жарық диодты тізбегін қолдандым:

www.sparkfun.com/products/11020

Осылайша, барлық 20 RGB светодиодтарын (барлығы 60 жарық диодты) тек екі түйреуішпен басқаруға болады - «деректер» мен «сағат» және ESP8266 -дан тікелей 5В қуат.

Жолақты NodeMcu -ге қосу оңай. NodeMcu -дегі Винге 5В (USB -ден 5 В), сарыға сым 12 -ге, жасыл сым 14 -ші жерге, жерге жерге.

Жеке RGB түсі мен жарықтығын орнатуға болады. Түстерді араластыру арқылы сіз әр жарықдиодты үшін көп түсті жасай аласыз.

Сондай -ақ, осы светодиодтармен FX эффектілерінің барлық түрлері үшін өте керемет кітапхана бар. Егер сізге ұнаса, көріңіз:

github.com/r41d/WS2801FX

17 -қадам: шыршаны безендіріңіз

Оны әдемі етіп жасаңыз және барлық светодиодтардың ағаштың үстіне жақсы көрінетініне көз жеткізіңіз.

18 -қадам: Соңғы әсерлер

Ағаш дайын болған кезде, жақсы суретке түсіріп, басылатын орындардың кескін картасын жасау қадамын қайталаңыз (жарық диодты позициялар)

Бұл светодиодтармен өзара әрекеттесудің ең интуитивті әдісі.

Егер сіз заттарды күрделендіргіңіз келмесе, қарапайым түймелерді қолдануға болады.

Сондай -ақ, YouTube -те ағаштың тікелей трансляциясын бастау керек (егер сіз нақты уақытта не болып жатқанын көргіңіз келсе) және ағынды сіздің сайтыңызға енгізу.

19 -қадам: Сіздің веб -сайтыңызды тамашалаңыз

Егер сіз осы уақытқа дейін жетсеңіз, сіз кереметсіз:) Достарыңызды шақырыңыз (және мен, әрине: P) және мүмкіндігінше сіздің ағашыңызды шертіңіз:)

n

Бұл өте күрделі жоба үшін өте ұзақ нұсқаулық болды. Бірақ соңында бұл тұрарлық: D

Рақмет сізге! Егер мен жұмыс істеп жатқаным туралы байланыста болғыңыз келсе:

Сіз менің YouTube каналыма жазыла аласыз:

www.youtube.com/c/JTMakesIt

Сіз мені Facebook пен Instagram -да бақылай аласыз

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

Мен қазір жұмыс істеп жүрген, спектакль артында және басқа да қосымша спойлерлер үшін! PS:., Егер сізге шынымен ұнаған болса, онда сіз маған осы жерден кофе сатып ала аласыз, сондықтан менде болашақ жобаларға энергия көп болады (бұл маған 2 апта ұйықтады, өйткені мен бұл идеяны тым кеш алдым):)

www.buymeacoffee.com/JTMakesIt

Бұл нұсқаулыққа «бәрі жақсы болады» байқауында дауыс беруді ұмытпаңыз:)