עץ חג המולד הנשלט על ידי אתר אינטרנט (כל אחד יכול לשלוט בו): 19 שלבים (עם תמונות)

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:11

אתה רוצה לדעת איך נראה עץ חג המולד בשליטת אתר?

הנה הסרטון המציג את הפרויקט שלי של עץ חג המולד שלי. השידור החי הסתיים עד עכשיו, אבל עשיתי סרטון שצילמתי את המתרחש:

השנה, באמצע דצמבר, שכבתי במיטה שלי וניסיתי לישון באמצע שבוע עבודה. ובמקום לישון חשבתי מה יהיה פרויקט מגניב לחג המולד לעשות. ואז רעיון מגניב היכה בי.

מכיוון שאני עצלן עם קישוטי חג המולד, יהיה מגניב לתת למישהו אחר לשלוט באורות חג המולד שלי, כך שאני לא אצטרך לדאוג בקשר לזה.

"מה אם אכין אורות עץ חג המולד שכולם יכולים לשלוט בהם באמצעות ממשק אתר?"

(הכנס שבועיים של לילות ללא שינה)

אז הצלחתי.

עץ חג המולד עם עשרים נוריות RGB המחוברות לאינטרנט באמצעות ESP8266 Arduino.

חבר שלי (תודה JP) עזר לי להקים אתר (מכיוון שאני לא מתכנת שוטף לדברים הקשורים לאתרים).

והקמנו זרם חי של העץ שלי ביוטיוב 24/7, כך שתוכל לראות מה אתה מפעיל או מכבה בכל עת.

פרויקט זה הוא אידיאלי לשנה זו, מכיוון שרבים מאיתנו היינו במנעול, לא הצליחו להיפגש ולהתרועע עם חברים ובני משפחה. למה לא להתאחד באמצעות עץ חג המולד:)

במדריך זה אסביר בפירוט כיצד נעשה פרויקט זה.

שלב 1: רמת מיומנות

פרויקט זה מכוון יותר לתוכנה. אבל אל תפחד קצת מזל ועזרה של דוד גוגל יעזרו מאוד:)

יהיה עליך להכיל מערך של 3 מיומנויות (או שתלמד אותן אל תדאג): חלק של שרת אינטרנט, החלק של Arduino ועץ חג המולד כמובן!

ידע מומלץ:

• יכולות מחשב ותכנות בסיסיות

• ידע בסיסי ב- Linux

• ידע בסיסי ברשת מחשבים

• ידע בסיסי באלקטרוניקה

• מיומנויות לשימוש בגוגל וביכולות "מיוחדות" אחרות

• צריך לדעת איך להקים עץ חג המולד:)

אם יש לך תחושה של טכנולוגיה ותכנות אתה אמור להיות מסוגל ללמוד להגדיר את הדבר הזה בהתאם למדריך זה.

שלב 2: כלים ורכיבים

בצד עץ חג המולד תזדקק ל: • עץ חג המולד (ד 'אה …)

• לוח מיקרו-בקר NodeMCU

(אתה יכול גם להשתמש ב- ESP32 או לוחות אחרים המתאימים ל- Wi-Fi או ל- Ethernet)

• רצועת LED מסוג RGB שניתן להתייחס אליה. רצועת LED הניתנת להתייחסות RGB תחסוך הרבה GPIO של Arduino (https://www.sparkfun.com/products/11020)

• תוכנה עבור NodeMCU (מסופקת במדריך זה)

בצד השרת תצטרך:

• שרת פרטי וירטואלי עם IP ציבורי. כאן אתה מקבל 100 $ חינם ב- DigitalOcean

• דומיין (אופציונלי) אתה יכול לרשום בכל ארגון רשם, למשל

• קוד ייעודי (מסופק עם הוראה זו)

שלב 3: הגדר את המחשב הווירטואלי (מחשב) חלק 1

בואו ניגש ישר לקידוד:)

אנו זקוקים לשרת, אשר יתקשר עם האתר ועם NodeMCU.

שרתים ב- DigitalOcean מאפשרים לנו מכונה וירטואלית עם כתובת IP ציבורית, מה שאומר שנוכל להריץ עליה שירותים ולגשת אליהם ברחבי העולם.

ברגע שאתה משלם מנוי חודשי של DigitalOcean (אתה יכול להשתמש ב -60 יום ניסיון חינם), צור פרויקט ושם אותו עץ חג המולד או מה שאתה רוצה.

כעת תוכל ליצור את המחשב הווירטואלי שלך (מחשב וירטואלי נגיש מרחוק) על ידי לחיצה על "התחל עם טיפה" (שזה בעצם השם של DigitalOcean למכונה וירטואלית).

יופיע דף תצורה ותוכל להישאר עם ברירת מחדל: תמונת אובונטו, תוכנית בסיסית וללא אחסון בלוקים (5 $ לחודש)

שלב 4: הגדר את המחשב הווירטואלי (מחשב) חלק 2

אזור מרכז נתונים הוא המקום בו ייווצר השרת שלך.

בחר את הקרוב ביותר לך ולמשתמשים הפוטנציאליים שלך. זה יספק את זמן התגובה הנמוך ביותר.

בנוסף, בסעיף אימות תתבקש להזין סיסמה לגישה למכונה הווירטואלית שלך.

בקטע סיים ויצר, שמור על ברירת המחדל של טיפה אחת, בחר שם מארח (עץ חג המולד שוב), בחר את הפרויקט שנוצר בעבר אם לא נבחר כברירת מחדל ולחץ על צור טיפה. זה ייקח כמה דקות. על ידי לחיצה על הפרויקט שלך בקטע הניווט בצד שמאל תראה את הטיפה שלך.

שלב 5: הגדר את המחשב הווירטואלי (מחשב) חלק 3

על ידי לחיצה על שלוש הנקודות מימין לטיפה תוכל ללחוץ על מסוף הגישה, מה שיגרום לך לגשת למחשב הווירטואלי שלך.

ייפתח חלון דפדפן קטן חדש. עכשיו, זו לא סביבת שולחן עבודה, כמו ב- Windows 10 או באובונטו עם מחשב ממשק גרפי.

עם זאת, הכל יכול להתבצע באמצעות ממשק קונסולה.

זה לא מפחיד כמו שזה נראה:)

שלב 6: הגדר את המחשב הווירטואלי (מחשב) חלק 4

יצרת בהצלחה מכונה וירטואלית משלך בענן DigitalOcean.

בשלבים הבאים, תקים שרת אינטרנט בשם Apache ותגדיר דף אינטרנט משלך.

הורד את לקוח Filezilla כאן https://filezilla-project.org/download.php?platfo… (או מצא את גירסת 32bit עבור מערכת ההפעלה 32bit) והתקן אותה. זהו לקוח FTP (פרוטוקול העברת קבצים).

תוכל לגשת ולהעביר קבצים מהמכונה הווירטואלית שלך.

לאחר ההתקנה, לחץ על קובץ → מנהל האתר → אתר חדש והזן נתונים כמו בתמונה למעלה.

פרוטוקול: SFTP (פרוטוקול העברת קבצים מאובטח)

מארח: IP של השרת שלך, מצא בפרויקט DigitalOcean שלך.

המשתמש הוא השורש והסיסמה היא מה שאתה מגדיר אותו בעת יצירת הטיפה שלך.

לחץ על אישור והתחבר למכונה הווירטואלית שלך.

תקבל אזהרה, מפתח המארח אינו ידוע. עקוב אחר התמונה השנייה.

צור תיקיה מקומית לפרויקט וחלץ את קבצי הפרויקט שתוריד כאן.

אתה תערוך את הקבצים שלך במחשב שלך ותעביר אותם למחשב הווירטואלי שלך בכל פעם שאתה רוצה לבדוק או לעדכן את הקוד.

שלב 7: התקן שרת אינטרנט

היכנס למסוף הטיפות שלך עם שורש שם המשתמש והסיסמה שלך.

מכיוון שאין לנו ממשק גרפי, אנו משתמשים בפקודות כדי לשלוט במכונה הווירטואלית שלך. להלן כמה פקודות נפוצות בהן תשתמש באובונטו (לינוקס):

• pwd - הדפס את הספרייה הנוכחית שלי

• ls - רשימת קבצים ותיקיות בספרייה הנוכחית שלי

• cd / - מעבר אל / ספרייה (תיקיה, הכוללת ספריות גדולות של לינוקס כמו וכו ', bin, boot, dev, root, home, var וכן הלאה)

בהפעלה, זאת אומרת, הזן את הפקודה ולחץ על enter.

כעת, נריץ apt -get update -y לעדכון המערכת.

הפעל apt install apache2 -y להתקנת שרת האינטרנט Apache.

מסך הפתיחה של Apache צריך להיות נגיש בדפדפן https:// virtual-machine-ip שלך.

החלף את ip-machine-virtual במחשב הווירטואלי שלך, למשל 165.12.45.123. תוכל גם לדלג על https:// מכיוון שהוא יתווסף אוטומטית.

מזל טוב!

הערה:

אם אתה רוצה שהאתר שלך יהיה נגיש באמצעות שם, במקום כתובת IP (כמו שהשתמשתי https://blinkmytree.live/), עבור לאתר ספק הדומיין GoDaddy או דומה לו (namecheap.com וכו ') ופעל לפי ההנחיות כאן:

כמה שמות דומיינים זולים מאוד. הדומיין שלי אכן עלה רק 2 $ לשנה. בהחלט שווה את הכסף:)

שלב 8: התקן מסגרת יישום אינטרנט

בחזרה לקונסולה שלנו. אל תפחד:)

השתמש ב- Filezilla כדי ליצור תיקיה בשם יישום בתוך /בית, כך /בית /אפליקציה תהיה התיקייה שלך

הפעל cd /home /app כדי לעבור לתיקיית האפליקציות.

הפעל apt install npm -y, כדי installl npm מנהל החבילות. זה ייקח כמה דקות.

הפעל את npm init -y ליצירת קובץ package.json, שיעקוב/זוכר נתוני חבילות עיקריים על אפליקציה.

הפעל npm -שמור התקנת cors express להתקנת מודולים cors, express

Cors הוא מודול להגדרת גישה בין אתרים ו- express היא מסגרת ליישומי אינטרנט.

Npm הוא מנהל חבילות בו השתמשנו ואנו נשתמש בזמן ריצה של node.js לתכנת ממשק תכנות היישומים שלנו (API), אשר, בשילוב עם שרת http, יקבל בקשות HTTP להחלת צבעים על נוריות LED, יסמן את ערכיהם (צבעים) בזיכרון, והעביר את הערכים ל- NodeMcu, כאשר הוא מבקש זאת.

הערה: לצומת ב- NodeMcu אין שום קשר לצומת ב- node.js. ניתן להחליף את NodeMcu בכל לוח פיתוח ארדואינו המחובר לאינטרנט, לוח פיתוח NXP או מיקרו -שבב/NXP/Renesas/STM/Atmel PCB. ניתן להחליף את Node.js גם במסגרת. Net, PHP או כל פלטפורמה אחרת. אך לשם הפשטות אנו משתמשים ב- NodeMCU וב- Node.js.

כעת, ננסה לבצע בדיקה אם נוכל להריץ תוכנית קטנה ב- node.js

צור קובץ בשם index.js עם פנקס רשימות/פנקס רשימות ++ או עורך אחר או סביבת פיתוח משולבת שבה אתה משתמש (קוד Visual Studio https://code.visualstudio.com/) בתיקיה המקומית שלך.

הכנס את הקוד הזה לתוכו:

var http = require ('http');

http.createServer (function (req, res) {

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

res.end ('שלום עולם!');

}). הקשיב (8080);

שמור אותו והעבר אותו לתיקייה/בית/אפליקציה כ- index.js עם לחיצה כפולה/גרור ושחרר על הקובץ ב- FileZilla.

הפעל את node 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…

העתק את קוד עץ חג המולד שלנו מתיקיית 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 בקשה ויעדכן מצבים מובילים על בקשות http PUT שהתקבלו.

ממשקי API הם מנהג נפוץ להחלפת מידע בין יישומים. הנפוצים ביותר בהם אנו משתמשים הם ממשקי API של REST בהם אנו משתמשים בעצמנו. הם חסרי אזרח ואין להם קשר מתמשך (shorturl.at/aoBC3, בקשות PUT פשוט מעדכנות את מצבי ה- LED במשתנה מערך האפליקציות (זיכרון), בקשות GET פשוט שולחות מצבים מובילים ללקוח.

התשובה ללקוח היא בדרך כלל בסימון JSON, אך עבור תגובה פשוטה זו של 30 מצבי LED, אנו פשוט שולחים מחרוזת של 30 ערכים מופרדים בפסיקים.

שלב 11: הבנת הקוד הפנימי והפיכתו לעבודה חלק 1

הערה: קוד החזית שלך נמצא בכתובת/var/www/html

זכור, לאחר שתערוך את הקוד שלך באופן מקומי, אל תשכח להעלות אותו לשרת שלך באמצעות FileZilla. שלא כמו node.js, Apache מפעיל את עצמו מחדש באופן אוטומטי, אך יהיה עליך לטעון מחדש את הדף בדפדפן שלך. השתמש ב- ctrl+f5 כדי לרענן ולמחוק גם את המטמון של הדף שלך.

כדי שהקוד יעבוד, יהיה עליך להזין מספר נתונים. ראשית, יהיה עליך לשנות את משתנה כתובת האתר בפונקציה send_request בתוך index.html מ- blinkmytree.live לדומיין או ל- IP משלך, לדוגמה: 165.13.45.123.

שנית, אני אדריך אותך דרך הקוד כדי להבין אותו. הקפד לא לדלג על הערות שהעליתי בקוד. הדף הוא מסמך HTML. אם נשאיר את כל חוקי ה- CSS (סגנון הדף ומיקום התוכן) בצד, נבחן תוכן חשוב בפונקציונאליות. למידע נוסף על CSS, בקר בכתובת

רצינו את התכונות העיקריות האלה (מומחים לשיטות זריזות יגידו סיפורי משתמשים) בדף:

• וידאו חי המוטמע בדף

• נוריות LED הניתנות ללחיצה על עץ חג המולד, שעשו מניפולציות בעורך התמונות של Gimp (https://www.gimp.org/).

• תקשורת בפועל עם שרת, מחכה לשינוי מצבים מובילים.

שלב 12: הבנת הקוד הפנימי והפיכתו לעבודה חלק 2

ברגע שיש לנו את עץ חג המולד שלנו עם מספר נוריות וצבעים לבחירה, עלינו ליצור אזורים וליישם עליהם פעולות, כך שברגע שנלחץ על הנורית הצבעונית בקטע בוחר בתמונה, ייבחר צבע ואחד אנו לוחצים על LED, הפקודה תישלח לשרת, שם הארדואינו יבחר את ערכו.

ב- HTML5, תקן ה- HTML החדש ביותר, יש משהו שנקרא מפת תמונות. הוא מאפשר לנו להגדיר אזורים בתמונה, בהם נוכל ליישם עליה מאזיני פעולה.

מכיוון שיש לנו הרבה אזורים להגדיר, השתמשנו בכלי מקוון https://www.image-map.net/ כדי להגדיר אזורים אלה והעתקנו קוד HTML לדף שלנו.

ברגע שנעשה זאת, נוכל לשים אירוע onclick עם פונקציה שהוא קורא לה ופרמטר של מספר LED לכל אחד מהאזורים הללו. עיין בצילום המסך למעלה.

שלב 13: הבנת הקוד הפנימי והפיכתו לעבודה חלק 3

בתוך סוף גוף ה- HTML, באזור, שמנו קצת JavaScript, כדי להגדיר את הפונקציות שאנו קוראים להן באירועי קליק. ברחבי העולם, אנו מגדירים XMLHttpRequest, שבו אנו משתמשים כדי לשלוח בקשת PUT

יש לנו שתי פונקציות:

פונקציה set_color (val)

פונקציה send_request (מזהה)

לבדיקת בקשת API, אני ממליץ על כלי תוכנה נפוץ בשם Postman https://www.postman.com/. זה מאפשר לנו פשוט לשלוח בקשת API לשרת, ללא כישורי תכנות. זה מאפשר ללעוג לשרת, ולקבל גם בקשות.

שלב 14: הבנת הקוד הפנימי והפיכתו לעבודה חלק 4

האפליקציה שלך עובדת.

שים לב, המספרים הפוכים, כלומר 20 הוא 1 ו -1 הוא 20, זאת מכיוון שנורות LED בעץ מתחילות בתחתית, אך לחוויית משתמש טובה יותר, שמנו התחלה מובילה למעלה.

עדיין יהיה עליך ליצור זרם חי ב- YouTube אם תרצה בכך, ולהחליף את קוד ההטמעה של סרטון YouTube בשלך.

שלב 15: קוד הארדואינו

ה- ESP8266 מריץ מערכון בסיסי של דוגמאות לקוח HTTP אשר משתנה מעט, ומקבל את הנתונים מהאתר שלי באמצעות קריאת API.

יהיה עליך להתקין גם ספריות לשליטה על רצועת ה- LED אם ברצונך להשתמש ברצועת RGB הניתנת להתייחסות כמוני.

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

במערכון שצירפתי, יהיה עליך להכניס את שם ה- Wi-Fi שלך ואת הסיסמה וכתובת אתר לאתר שלך (ראה את ההערות)

אנו בעצם ממירים תגובת http למחרוזת המוקלדת C, כך שנוכל להשתמש בפונקציית C strtok כדי לפצל את המחרוזת באמצעות פסיקים ולמלא את טבלת ה- leds עם ערכים הנקראים משרת. מכאן שאנו מכנים פונקציה שבה אנו עוברים את הטבלה, ובהתבסס על הערכים, אנו הופכים את הצבע הנכון שהמשתמש מצפה לו.

זהו זה!

כל הכבוד, הצלחת!

שלב 16: שרשרת LED RGB

או - או. עכשיו הגיע הזמן לקחת הפסקה קטנה מכל הקידוד:)

מכיוון של- ESP8266 אין הרבה סיכות GPIO לשליטה בנוריות בנפרד, השתמשתי בשרשרת LED RGB הניתנת להתייחסות זו:

www.sparkfun.com/products/11020

בדרך זו ניתן לשלוט בכל 20 הנורות RGB (בסך הכל 60 נוריות) בשני סיכות בלבד - "נתונים" ו"שעון "והספק 5V ישירות מה- ESP8266.

חיבור הרצועה ל- NodeMcu קל. 5V ל- Vin על NodeMcu (5V מ- USB), חוט צהוב לסיכה 12, חוט ירוק לסיכה 14, קרקע לקרקע.

אתה יכול להגדיר צבע RGB בודד ובהירות. עם קצת ערבוב צבעים, אתה יכול לייצר הרבה צבעים עבור כל LED.

יש גם ספרייה מגניבה מאוד לכל מיני אפקטים FX מגניבים עם הלדים האלה. נסה אם אתה אוהב:

github.com/r41d/WS2801FX

שלב 17: לקשט את עץ חג המולד

עשה את זה יפה וודא שכל הלדים נראים ומתפזרים יפה על העץ.

שלב 18: נגיעות אחרונות

כאשר העץ מוכן, צלם תמונה נחמדה וחזור על השלב ליצירת מפת התמונות של המיקומים הניתנים ללחיצה (עמדות LED)

זוהי הדרך האינטואיטיבית ביותר להתממשק עם הלדים.

אם אתה לא רוצה לסבך יותר מדי דברים, אתה יכול להשתמש בלחצנים רגילים.

עליך גם להתחיל שידור חי של העץ שלך ב- YouTube (אם אתה רוצה לצפות במה שקורה בזמן אמת) ולהטמיע את הזרם באתר שלך.

שלב 19: התפעל מהאתר שלך

אתה מדהים אם הגעת עד לכאן:) הזמין את החברים שלך (ואני כמובן: P) ותגרום להם ללחוץ על העץ שלך כמה שיותר:)

נ

זה היה הוראה ארוכה מאוד, לפרויקט מסובך למדי. אבל זה שווה את זה בסוף: D

תודה! אם אתה רוצה לשמור על קשר על מה אני עובד:

אתה יכול להירשם לערוץ היוטיוב שלי:

www.youtube.com/c/JTMakesIt

תוכלו לעקוב אחריי גם בפייסבוק ובאינסטגרם

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

לספוילרים על מה שאני עובד עליו כרגע, מאחורי הקלעים ותוספות אחרות! נ.ב.:., אם אתה ממש ממש אהבת את זה, אתה יכול גם לקנות לי קפה כאן, כך שיהיה לי יותר אנרגיה לפרויקטים עתידיים (זה לקח ממני שבועיים של שינה, מכיוון שקיבלתי את הרעיון מאוחר מדי):)

www.buymeacoffee.com/JTMakesIt

ואל תשכחו להצביע לתכנית ההנחיה הזו בתחרות "הכל הולך":)