Вебсайт көзөмөлдөгөн жаңы жылдык балаты (Ар ким аны башкара алат): 19 кадам (Сүрөттөр менен)

2024 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2024-01-30 10:36

Вебсайт көзөмөлдөгөн жаңы жылдык балаты кандай экенин билгиңиз келеби?

Бул жерде менин балатымдын долбоорун көрсөткөн видео. Түз эфир азырынча аяктады, бирок мен эмне болуп жатканын видеого тартып алдым:

Быйыл, декабрдын ортосунда, мен жумуш жумасынын ортосунда уктоого аракет кылып, төшөгүмдө жатып калдым. Жана уктап калуунун ордуна, мен эмне кылсам сонун салттуу Рождество болорун ойлонуп жаттым. Анан мага сонун ой келди.

Мен Рождестволук жасалгаларга жалкоо болгондуктан, башка бирөөлөргө менин Рождестволук чырактарымды башкарууга уруксат берүү жакшы болмок, ошондуктан мен бул жөнүндө тынчсызданбайм.

"Эгерде мен кимдир бирөө веб -сайт интерфейси аркылуу башкара ала турган жаңы жылдык балатыны жарык кылсамчы?"

(эки жума уйкусуз түндөрдү кошуу)

Ошентип мен жетиштим.

ESP8266 Arduino аркылуу интернетке туташкан RGB LED диоддору бар жаңы жылдык балаты.

Менин бир досум (рахмат JP) мага веб -сайт түзүүгө жардам берди (анткени мен веб -сайтка байланыштуу нерселер үчүн эркин программист эмесмин).

Жана биз дарагымды 24/7 youtube түз эфирин орноттук, ошондо сиз ар дайым күйгүзүп же өчүрүп жатканыңызды көрө аласыз.

Бул долбоор ушул жыл үчүн идеалдуу, анткени көбүбүз достор жана үй -бүлө менен жолуга албай, баарлаша албай калдык. Эмне үчүн жаңы жылдык балаты аркылуу биригүүгө болбойт:)

Бул Нускамада мен бул долбоор кантип жасалганын майда -чүйдөсүнө чейин түшүндүрөм.

1 -кадам: Көндүм деңгээл

Бул долбоор программалык камсыздоого көбүрөөк багытталган. Бирок коркпоңуз, Google байкенин кээ бир ийгиликтери жана жардамы чоң жардам берет:)

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

Сунушталган билимдер:

• Негизги компьютер жана программалоо көндүмдөрү

• Linuxтун терминалдык базалык билими

• Негизги компьютердик тармак билими

• Негизги электроника билимдери

• Google жана башка "өзгөчө" жөндөмдөрдү колдонуу көндүмдөрү

• Жаңы жылдык балатыны орнотууну билиши керек:)

Эгерде сизде кандайдыр бир технология жана программалоо бар болсо, анда сиз бул нерсени ушул Нускамага ылайык орнотууну үйрөнүшүңүз керек.

2 -кадам: Куралдар жана компоненттер

Балаты жагында сизге керек болот: • Жаңы жылдык балаты (d'oh …)

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

(сиз ESP32 же башка Wi-Fi же Ethernet жөндөмдүү такталарды колдоно аласыз)

• Даректүү RGB LED тилкеси. даректүү 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 -БӨЛҮМ

Тамчынын оң жагындагы үч чекитти басуу менен сиз кирүү консолун чыкылдата аласыз, бул сиздин виртуалдык компьютериңизге кирүүгө мүмкүнчүлүк берет.

Жаңы кичинекей браузер терезеси ачылат. Эми, бул Windows 10 же Ubuntu графикалык интерфейси бар компьютердик чөйрө эмес.

Бирок, баарын консоль интерфейси аркылуу жасаса болот.

Бул көрүнгөндөй коркунучтуу эмес:)

6 -кадам: Виртуалдык машинаны конфигурациялоо (компьютер) 4 -БӨЛҮМ

Сиз DigitalOcean булутунда өзүңүздүн виртуалдык машинаңызды ийгиликтүү түздүңүз.

Кийинки кадамдарда сиз Apache деп аталган веб -серверди орнотуп, өзүңүздүн веб -баракчаңызды орнотосуз.

Filezilla кардарын бул жерден жүктөп алыңыз https://filezilla-project.org/download.php?platfo… (же 32 бит иштетүү тутуму үчүн 32 бит нускасын табыңыз) жана аны орнотуңуз. Бул FTP (File Transfer Protocol) кардары.

Сиз файлдарга виртуалдык машинаңыздан кирип, өткөрүп бере аласыз.

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

Протокол: SFTP (Коопсуз File Transfer Protocol)

Хост: Сиздин сервердин IPи, DigitalOcean долбооруңуздан табыңыз.

Колдонуучу - бул тамчы, ал эми сырсөз - бул тамчыңызды түзүүдө.

ОК басыңыз жана виртуалдык машинаңызга туташыңыз.

Сизге эскертүү берилет, хост ачкычы белгисиз. Экинчи сүрөттү ээрчиңиз.

Долбоор үчүн жергиликтүү папканы түзүңүз жана бул жерден жүктөп ала турган долбоор файлдарыңызды алыңыз.

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

7 -кадам: Web Server орнотуу

Колдонуучу аты тамыры жана сырсөзүңүз менен тамчы консолуңузга кириңиз.

Бизде графикалык интерфейс жок болгондуктан, биз сиздин виртуалдык машинаңызды башкаруу үчүн буйруктарды колдонобуз. Бул жерде сиз 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 жеткиликтүү болушу керек.

Виртуалдык машина-ipди виртуалдык машинаңыздын ipи менен алмаштырыңыз, мисалы 165.12.45.123. Ошондой эле https:// өткөрүп жибере аласыз, анткени ал автоматтык түрдө кошулат.

Куттуктайм!

Эскертүү:

Эгерде сиз веб -сайтыңызга IP дареги эмес, ат аркылуу жеткиликтүү болушун кааласаңыз (мен https://blinkmytree.live/ колдонгон сыяктуу), GoDaddy же окшош домен провайдеринин сайтына өтүңүз (namecheap.com ж.б…) жана нускамаларды аткарыңыз бул жерде:

Кээ бир домендик аталыштар абдан арзан. Менин доменим жылына болгону 2 $ турат. Албетте акчага татыктуу:)

8 -кадам: Web Application Framework орнотуу

Консолубузга кайтуу. Коркпо:)

Filezilla менен /home /app ичинде папка түзүү үчүн колдонуңуз, ошондо /home /app сиздин папка болот

Колдонмонун папкасына өтүү үчүн cd /home /app иштетиңиз.

Npm пакет башкаруучусун орнотуу үчүн apt install npm -y иштетүү. Буга бир нече мүнөт кетет.

Npm init -y иштетип, бир application.json файлын түзүңүз, ал колдонмо жөнүндө негизги пакет маалыматтарын көзөмөлдөйт/эстеп калат.

Npm иштетүү -корс экспресс модулдарын орнотуу үчүн корс экспресс

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 кичинекей программасын иштете алсак, анда тест жүргүзөлү

Жергиликтүү папкаңызда блокнот/блокнот ++ же башка редактору же интеграцияланган өнүктүрүү чөйрөсү бар index.js аттуу файлды түзүңүз (Visual Studio Code

Бул кодду ага киргизиңиз:

var http = талап кылуу ('http');

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

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

res.end ('Hello World!');

угуу (8080);

Аны сактаңыз жана FileZilla файлында doubleleclick/drag-drop менен 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 папкасынан алыскы каталогго/var/www/html/Filezilla менен көчүрүңүз. Ал бир аз убакыт талап кылынат. Эгер ал сизден сураса, 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 LED абалынын бул жөнөкөй жообу үчүн биз 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 сүрөт редакторунда иштетилген Рождество дарагындагы чыкылдатуучу LEDлер (https://www.gimp.org/).

• Жеткирилген мамлекеттердин өзгөрүшүн күткөн сервер менен чыныгы байланыш.

12-кадам: Front-end кодун түшүнүү жана аны иштетүү 2-БӨЛҮМ

Светодиоддордун жана түстөрдүн саны бар жаңы жылдык балатыбыз болгондон кийин, биз аймактарды түзүшүбүз керек жана аларга карата аракеттерди колдонуубуз керек, андыктан сүрөттүн тандоо бөлүмүндөгү түстүү LEDди чыкылдатуу менен, түс тандалат, жана бир биз LEDди басабыз, команда серверге жөнөтүлөт, ал жерде Arduino анын маанисин тандайт.

HTML5те, эң жаңы HTML стандарты, сүрөт картасы деген нерсе бар. Бул бизге сүрөттөгү жерлерди аныктоого мүмкүндүк берет, биз аларга угуучуларды колдоно алабыз.

Аныктай турган көп жерлерибиз бар болгондуктан, бул аймактарды аныктоо үчүн https://www.image-map.net/ куралын колдонуп, HTML кодун биздин баракчага көчүрдүк.

Муну кылгандан кийин, биз onclick окуясын ал чакырган функциясы жана LED номеринин параметрин бул аймактардын ар бирине коё алабыз. Жогорудагы скриншотту караңыз.

13-кадам: Front-end кодун түшүнүү жана аны иштетүү 3-БӨЛҮМ

HTML денесинин аягында, бир аймакта, биз onclick окуяларында чакырган функцияларыбызды аныктоо үчүн JavaScriptти коебуз. Дүйнө жүзү боюнча, биз PUT суроо жөнөтүү үчүн колдонулган XMLHttpRequestти аныктайбыз

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

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

send_request функциясы (id)

API өтүнүчүн текшерүү үчүн, мен Postman https://www.postman.com/ деп аталган кеңири таралган программалык куралды сунуштайм. Бул бизге программалоо көндүмдөрү жок эле серверге API сурамын жөнөтүүгө мүмкүндүк берет. Бул серверди шылдыңдоого жана сурамдарды кабыл алууга мүмкүнчүлүк берет.

14-кадам: Front-end кодун түшүнүү жана аны иштетүү 4-БӨЛҮМ

Сиздин колдонмо иштейт.

Билиңиз, сандар тескерисинче, башкача айтканда, 20 - 1 жана 1 - 20, себеби дарактагы LED диоддору ылдыйдан башталат, бирок колдонуучунун тажрыйбасы үчүн биз баштоону жогору карай алып келебиз.

Кааласаңыз дагы, YouTubeда түз эфир түзүшүңүз керек жана YouTube видеосунун камтылган кодун өзүңүзгө алмаштырышыңыз керек.

15 -кадам: Arduino коду

ESP8266 бир аз өзгөртүлгөн HTTP Кардарынын мисалынын эскизин иштетет, API чалуусу аркылуу менин веб -сайтымдан маалыматтарды алат.

Ошондой эле LED тилкесин көзөмөлдөө үчүн китепканаларды орнотушуңуз керек, эгерде мен сыяктуу даректүү RGB тилкесин колдонууну кааласаңыз.

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

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

Биз негизинен http жоопторун C терилген сапка айландырабыз, андыктан биз C функциясын strtok аркылуу сапты үтүргө бөлүү жана leds таблицасын серверден окулган баалуулуктарга толтуруу үчүн колдоно алабыз. Таблицадан өтүп, баалуулуктарга таянып, колдонуучу күткөн түстү бурабыз.

Болду!

Куттуктайм, жетиштиңиз!

16 -кадам: RGB LED чынжыры

Ух, о. Эми бардык коддоодо бир аз тыныгууга убакыт келди:)

ESP8266да светодиоддорду жекече башкаруу үчүн көптөгөн GPIO төөнөгүчтөрү болбогондуктан, мен бул даректүү RGB LED чынжырын колдондум:

www.sparkfun.com/products/11020

Бул жол менен, бардык 20 RGB светодиоддору (60 лед жалпы) эки гана казык менен башкарылышы мүмкүн - "маалымат" жана "саат" жана 5V кубаты түздөн -түз ESP8266дан.

NodeMcu менен тилкени туташтыруу оңой. NodeMcu боюнча 5Vдан Винге (USBден 5В), сары зымдан 12ге, жашыл зымдан 14кө чейин, жерге чейин.

Сиз жеке RGB түсүн жана жарыктыгын орното аласыз. Кээ бир түстөрдү аралаштыруу менен, сиз ар бир LED үчүн көп түстөрдү чыгара аласыз.

Бул диоддор менен FX эффекттеринин бардык түрлөрү үчүн абдан сонун китепкана бар. Эгер жакса, аны сынап көрүңүз:

github.com/r41d/WS2801FX

17 -кадам: Жаңы жылдык балатыны кооздоңуз

Аны татынакай кылып, бардык LED диоддорунун көрүнүп турарын жана дарактын үстүнө жакшы жайылганын текшериңиз.

18 -кадам: Акыркы тийүүлөр

Дарак даяр болгондо, жакшы сүрөткө тартып, чыкылдатуучу орундардын сүрөт картасын түзүү кадамын кайталаңыз (LED позициялары)

Бул LED менен интерфейстин эң интуитивдүү жолу.

Эгерде сиз нерсени татаалдаштыргыңыз келбесе, кадимки баскычтарды колдонсоңуз болот.

Сиз ошондой эле YouTubeдагы дарагыңыздын түз агымын баштаңыз (эгер реалдуу убакытта эмне болуп жатканын көргүңүз келсе) жана агымды сайтыңызга кыстарыңыз.

19 -кадам: Веб -сайтыңызга суктануу

Эгерде сиз буга чейин жетишкен болсоңуз, сиз укмушсуз:) Досторуңузду чакырыңыз (жана мени албетте: P) жана мүмкүн болушунча дарагыңызды чыкылдатыңыз:)

п

Бул абдан татаал долбоор үчүн абдан узак Нускамалуу болду. Бирок аягында татыктуу: Д.

Рахмат! Эгерде мен иштеп жаткан нерселер менен байланышта болгуң келсе:

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

www.youtube.com/c/JTMakesIt

Сиз дагы мени Facebook жана Instagramдан ээрчип алсаңыз болот

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

Мен азыр иштеп жатканымдын, көшөгөнүн артында жана башка кошумча нерселердеги бузукулар үчүн! PS.:)

www.buymeacoffee.com/JTMakesIt

Жана "Эч нерсе кетпейт" сынагында ушул Нускамага добуш берүүнү унутпаңыз:)