በድር ጣቢያ ቁጥጥር የሚደረግ የገና ዛፍ (ማንም ሊቆጣጠረው ይችላል) 19 ደረጃዎች (ከስዕሎች ጋር)

2024 ደራሲ ደራሲ: John Day | [email protected]. ለመጨረሻ ጊዜ የተሻሻለው: 2024-01-30 07:29

አንድ ድር ጣቢያ የሚቆጣጠረው የገና ዛፍ ምን እንደሚመስል ማወቅ ይፈልጋሉ?

የገና ዛፍዬን ፕሮጀክትዬን የሚያሳይ ቪዲዮ እዚህ አለ። የቀጥታ ዥረቱ በአሁኑ ጊዜ አብቅቷል ፣ ግን ቪዲዮውን ሰርቻለሁ ፣ ምን እየተደረገ እንዳለ

በዚህ ዓመት ፣ በታህሳስ አጋማሽ ላይ ፣ በስራ ሳምንት መካከል ለመተኛት እየሞከርኩ አልጋዬ ላይ ተኝቼ ነበር። እና ከመተኛት ይልቅ አሪፍ የገና ፕሮጀክት ምን እንደሚሆን አስብ ነበር። እና ከዚያ አሪፍ ሀሳብ ገጠመኝ።

በገና ማስጌጫዎች ሰነፍ እንደመሆኔ ፣ የገና መብራቶቼን ሌላ ሰው እንዲቆጣጠር መፍቀዱ አሪፍ ይሆናል ፣ ስለዚህ እኔ መጨነቅ አያስፈልገኝም።

“ማንም በድር ጣቢያ በይነገጽ በኩል መቆጣጠር የሚችል የገና ዛፍ መብራቶችን ብሠራስ?”

(ሁለት ሳምንታት እንቅልፍ የሌላቸው ሌሊቶችን ያስገቡ)

ስለዚህ አደረግሁት።

በ ESP8266 Arduino በኩል ከበይነመረቡ ጋር የተገናኘ ሃያ አርጂቢ ኤልዲዎች ያሉት የገና ዛፍ።

አንድ ጓደኛዬ (JP ን አመሰግናለሁ) አንድ ድር ጣቢያ ለማቋቋም ረድቶኛል (ለድር ጣቢያ ተዛማጅ ነገሮች አቀላጥፌ ፕሮግራም አውጪ ስላልሆንኩ)።

እና እርስዎ ሁል ጊዜ የሚያበሩትን ወይም የሚያጠፉትን ለማየት እንዲችሉ 24/7 የዩቲዩብ የቀጥታ ዥረት የእኔን ዛፍ አዘጋጅተናል።

ብዙዎቻችን ከጓደኞች እና ከቤተሰብ ጋር መገናኘት እና መገናኘት ስላልቻልን ይህ ፕሮጀክት ለዚህ ዓመት ተስማሚ ነው። በገና ዛፍ በኩል ለምን አይዋሃዱም:)

በዚህ መመሪያ ውስጥ ይህ ፕሮጀክት እንዴት እንደተሠራ በዝርዝር እገልጻለሁ።

ደረጃ 1 የክህሎት ደረጃ

ይህ ፕሮጀክት የበለጠ ሶፍትዌር ተኮር ነው። ግን አይፍሩ ፣ አንዳንድ የአጎቴ ጉግል ዕድል እና እገዛ በእጅጉ ይረዳል:)

የ 3 ክህሎቶች ስብስብ ሊኖርዎት ይገባል (ወይም ያለ ምንም ጭንቀት ይማራሉ) -የድር አገልጋይ ክፍል ፣ የአርዱዲኖ ክፍል እና የገና ዛፍ በእርግጥ!

የሚመከር እውቀት;

• መሰረታዊ የኮምፒውተር እና የፕሮግራም ሙያዎች

• መሠረታዊ የሊኑክስ ተርሚናል ዕውቀት

• መሰረታዊ የኮምፒውተር አውታረ መረብ ዕውቀት

• መሰረታዊ የኤሌክትሮኒክስ ዕውቀት

• ጉግል እና ሌሎች “ልዩ” ችሎታዎችን የመጠቀም ችሎታዎች

• የገና ዛፍ እንዴት እንደሚቋቋም ማወቅ አለበት:)

የተወሰነ የቴክኖሎጂ እና የፕሮግራም ስሜት ካለዎት ይህንን በተጠቀሰው መመሪያ መሠረት ይህንን ነገር ለማዋቀር መማር መቻል አለብዎት።

ደረጃ 2 - መሣሪያዎች እና አካላት

በገና ዛፍ ጎን ፣ ያስፈልግዎታል ፦ • የገና ዛፍ (d’oh…)

• የ NodeMCU ማይክሮ መቆጣጠሪያ ቦርድ

(እንዲሁም ESP32 ን ወይም ሌላ Wi-Fi ወይም ኤተርኔት ችሎታ ያላቸው ቦርዶችን መጠቀም ይችላሉ)

• ሊደረስበት የሚችል RGB LED strip. ሊደረስበት የሚችል አርጂቢ መሪ ስትሪፕ ብዙ አርዱዲኖ ጂፒኦዎችን ያድናል (https://www.sparkfun.com/products/11020)

• ሶፍትዌር ለ NodeMCU (በዚህ መመሪያ ውስጥ የቀረበ)

በአገልጋዩ በኩል የሚከተሉትን ያስፈልግዎታል

• ይፋዊ አይፒ ያለው ምናባዊ የግል አገልጋይ። እዚህ በዲጂታልOcean ላይ 100 ዶላር በነፃ ያገኛሉ

• ጎራ (አማራጭ) በማንኛውም የመዝጋቢ ድርጅት ውስጥ መመዝገብ ይችላሉ ፣ ለምሳሌ

• የወሰነ ኮድ (በዚህ አስተማሪነት የቀረበ)

ደረጃ 3 ምናባዊ ማሽን (ኮምፒተር) ያዋቅሩ ክፍል 1

በቀጥታ ወደ ኮድ ኮድ እንሂድ:)

ከድር ጣቢያው እና ከ NodeMCU ጋር የሚገናኝ አገልጋይ እንፈልጋለን።

በዲጂታል ውቅያኖስ ላይ ያሉ አገልጋዮች በይፋ የአይፒ አድራሻ ያለው ምናባዊ ማሽን እንዲኖረን ይፈቅዱልናል ፣ ይህ ማለት በእሱ ላይ አገልግሎቶችን ማካሄድ እና በዓለም ዙሪያ መድረስ እንችላለን ማለት ነው።

አንዴ የ DigitalOcean ወርሃዊ የደንበኝነት ምዝገባን ከከፈሉ (የ 60 ቀን ነፃ ሙከራን መጠቀም ይችላሉ) ፣ ፕሮጀክት ይፍጠሩ እና የገና ዛፍን ወይም የሚፈልጉትን ሁሉ ይሰይሙት።

አሁን “ጠብታ ይጀምሩ” (በመሰረቱ ለዲጂታል ውቅያኖስ ስም ለምናባዊ ማሽን) ጠቅ በማድረግ አሁን የእርስዎን ምናባዊ ማሽን (በርቀት ተደራሽ የሆነ ምናባዊ ኮምፒተር) መፍጠር ይችላሉ።

የውቅረት ገጽ ይመጣል እና ከነባሪ ጋር መቆየት ይችላሉ -የኡቡንቱ ምስል ፣ መሠረታዊ ዕቅድ እና ምንም የማገጃ ማከማቻ የለም (5 $ /በወር)

ደረጃ 4 ምናባዊ ማሽን (ኮምፒተር) ያዋቅሩ ክፍል 2

የውሂብ አከፋፋይ ክልል አገልጋይዎ የሚፈጠርበት ቦታ ነው።

ለእርስዎ እና ሊሆኑ ለሚችሉ ተጠቃሚዎች ቅርብ የሆነውን ይምረጡ። ይህ ዝቅተኛውን የምላሽ ጊዜ ይሰጣል።

በተጨማሪም ፣ በማረጋገጫ ክፍል ውስጥ ፣ ምናባዊ ማሽንዎን ለመድረስ የይለፍ ቃል እንዲያስገቡ ይጠየቃሉ።

በማጠናቀቅ እና በመፍጠር ክፍል ውስጥ የ 1 ጠብታ ነባሪን ያቆዩ ፣ የአስተናጋጅ ስም (የገና ዛፍን እንደገና ይምረጡ) ፣ በነባሪ ካልተመረጠ ቀደም ሲል የተፈጠረውን ፕሮጀክትዎን ይምረጡ እና ጠብታ ፍጠርን ጠቅ ያድርጉ። ይህ ጥቂት ደቂቃዎችን ይወስዳል። በግራ በኩል ባለው የአሰሳ ክፍል ውስጥ ፕሮጀክትዎን ጠቅ በማድረግ ጠብታዎን ያያሉ።

ደረጃ 5 ምናባዊ ማሽን (ኮምፒተር) ያዋቅሩ ክፍል 3

በጠባቡ በቀኝ በኩል ባሉት ሶስት ነጥቦች ላይ ጠቅ በማድረግ የመዳረሻ ኮንሶልን ጠቅ ማድረግ ይችላሉ ፣ ይህም ወደ ምናባዊ ኮምፒተርዎ እንዲደርሱ ያደርግዎታል።

አዲስ ትንሽ የአሳሽ መስኮት ይከፈታል። አሁን ፣ ይህ በእርስዎ የዊንዶውስ 10 ወይም በኡቡንቱ በግራፊክ በይነገጽ ኮምፒተር ላይ እንደ ዴስክቶፕ አከባቢ አይደለም።

ሆኖም ፣ ሁሉም በኮንሶል በይነገጽ በኩል ሊከናወን ይችላል።

የሚመስለውን ያህል አስፈሪ አይደለም:)

ደረጃ 6 ምናባዊ ማሽን (ኮምፒተር) ያዋቅሩ ክፍል 4

በዲጂታል ውቅያኖስ ደመና ውስጥ የእራስዎን ምናባዊ ማሽን በተሳካ ሁኔታ ፈጥረዋል።

በቀጣዮቹ ደረጃዎች Apache የተባለ የድር አገልጋይ ያቋቁማሉ እና የራስዎን የድር ገጽ ያዋቅራሉ።

የፋይልዚላ ደንበኛን እዚህ ያውርዱ https://filezilla-project.org/download.php?platfo… (ወይም ለ 32 ቢት ስርዓተ ክወና 32 ቢት ስሪት ያግኙ) እና ይጫኑት። የኤፍቲፒ (የፋይል ማስተላለፍ ፕሮቶኮል) ደንበኛ ነው።

ፋይሎችን ከ እና ወደ ምናባዊ ማሽንዎ መድረስ እና ማስተላለፍ ይችላሉ።

አንዴ ከተጫነ ፋይል → የጣቢያ አስተዳዳሪ → አዲስ ጣቢያ ጠቅ ያድርጉ እና ከላይ ባለው ምስል ላይ ያለ ውሂብ ያስገቡ።

ፕሮቶኮል - SFTP (ደህንነቱ የተጠበቀ ፋይል ማስተላለፍ ፕሮቶኮል)

አስተናጋጅ -የአገልጋይዎ አይፒ ፣ በዲጂታል ኦውጄን ፕሮጀክትዎ ውስጥ ያግኙ።

የእርስዎ ነጠብጣብ ሲፈጠር ተጠቃሚው ሥር እና የይለፍ ቃል ነው።

እሺን ጠቅ ያድርጉ እና ከእርስዎ ምናባዊ ማሽን ጋር ይገናኙ።

ማስጠንቀቂያ ይሰጥዎታል ፣ የአስተናጋጁ ቁልፍ አይታወቅም። ሁለተኛውን ምስል ይከተሉ።

ለፕሮጀክቱ አካባቢያዊ አቃፊ ይፍጠሩ ፣ እና እዚህ የሚያወርዷቸውን የፕሮጀክት ፋይሎችዎን ያውጡ።

ኮዱን ለመሞከር ወይም ለማዘመን በፈለጉ ቁጥር በኮምፒተርዎ ላይ ፋይሎችዎን ያርትዑ እና ወደ ምናባዊ ማሽንዎ ያስተላልፋሉ።

ደረጃ 7 የድር አገልጋይ ጫን

በተጠቃሚ ስም ስር እና በይለፍ ቃልዎ ወደ ጠብታ ኮንሶልዎ ይግቡ።

ግራፊክ በይነገጽ ስለሌለን ፣ ምናባዊ ማሽንዎን ለመቆጣጠር ትዕዛዞችን እንጠቀማለን። በኡቡንቱ (ሊኑክስ) ላይ የሚጠቀሙባቸው አንዳንድ የተለመዱ ትዕዛዞች እዚህ አሉ

• pwd - የአሁኑን ማውጫዬን ያትሙ

• ls - አሁን ባለው ማውጫ ውስጥ ፋይሎችን እና አቃፊዎችን ይዘርዝሩ

• ሲዲ / - ወደ / ማውጫ ይሂዱ (አቃፊ ፣ እንደ ወዘተ የመሳሰሉት የሊኑክስ ዋና ማውጫዎችን ፣ ቢን ፣ ቡት ፣ ቡት ፣ ዴቭ ፣ ሥር ፣ ቤት ፣ ቫር እና የመሳሰሉትን ያጠቃልላል)

በሩጫ ፣ ማለቴ ትዕዛዙን ያስገቡ እና አስገባን ይጫኑ።

አሁን ስርዓቱን ለማዘመን apt -get ዝመናን እንሰራለን።

የ Apache ድር አገልጋይን ለመጫን apache2 -y ን ይጫኑ።

የእርስዎ Apache የእንኳን ደህና መጡ ማያ ገጽ በእርስዎ https:// virtual-machine-ip ላይ ከአሳሽዎ ተደራሽ መሆን አለበት።

ምናባዊ-ማሽን-ipን በምናባዊ ማሽንዎ አይፒ ፣ ለምሳሌ 165.12.45.123 ይተኩ። እንዲሁም https:// በራስ -ሰር ስለሚታከል መዝለል ይችላሉ።

እንኳን ደስ አለዎት!

ማስታወሻ:

ከአይፒ አድራሻ ይልቅ (እንደ https://blinkmytree.live/)) ድር ጣቢያዎ በስም ተደራሽ እንዲሆን ከፈለጉ ወደ የጎራ አቅራቢ ጣቢያ GoDaddy ወይም ተመሳሳይ (namecheap.com ወዘተ..) ይሂዱ እና መመሪያዎቹን ይከተሉ እዚህ

አንዳንድ የጎራ ስሞች በጣም ርካሽ ናቸው። የእኔ ጎራ በዓመት 2 ዶላር ብቻ ያስከፍል ነበር። በእርግጠኝነት ገንዘቡ ዋጋ አለው:)

ደረጃ 8 የድር ትግበራ ማዕቀፍ ይጫኑ

ወደ ኮንሶልችን ተመለስ። አትፍሩ:)

በውስጡ /ቤት /መተግበሪያ የሚባል አቃፊ ለመፍጠር Filezilla ን ይጠቀሙ ፣ ስለዚህ /ቤት /መተግበሪያ የእርስዎ አቃፊ ይሆናል

ወደ የመተግበሪያ አቃፊ ውስጥ ለመግባት ሲዲ /ቤት /መተግበሪያን ያሂዱ።

Npm -y ን ይጫኑ ፣ npm የጥቅል አቀናባሪን ለመጫን። ይህ ጥቂት ደቂቃዎችን ይወስዳል።

ስለ አንድ መተግበሪያ ዋና የጥቅል መረጃን የሚከታተል/የሚያስታውስ የፋይል package.json ለመፍጠር npm init -y ን ያሂዱ።

Npm ን አሂድ -ሞጁሎችን cors ለመጫን የመጫኛ ኮርስ መግለጫን ያስቀምጡ ፣ ይግለጹ

ኮርስ ተሻጋሪ ጣቢያ መዳረሻን ለማዋቀር ሞዱል እና ኤክስፕረስ የድር መተግበሪያ ማዕቀፍ ነው።

ኤንኤምኤም እኛ የተጠቀምንበት የጥቅል ሥራ አስኪያጅ ነው እና የእኛን የመተግበሪያ ፕሮግራም በይነገጽ (ኤፒአይ) ለማቀናጀት node.js ጃቫስክሪፕት የአሠራር ጊዜን እንጠቀማለን ፣ እሱም ከ http አገልጋይ ጋር ተዳምሮ ቀለሞችን ወደ ኤልዲዎች ለመተግበር የኤችቲቲፒ ጥያቄዎችን ይቀበላል ፣ እሴቶቻቸውን (ቀለሞቻቸውን) ምልክት ያድርጉ። በማስታወሻ ውስጥ ፣ እና እሴቶቹን ሲጠይቀው ለኖድሙኩ ያስተላልፉ።

ማስታወሻ በኖድMcu ውስጥ መስቀለኛ መንገድ በ node.js ውስጥ ካለው መስቀለኛ መንገድ ጋር ምንም ግንኙነት የለውም። NodeMcu በማንኛውም በይነመረብ በተገናኘ አርዱዲኖ ልማት ቦርድ ፣ በኤንኤክስፒ ልማት ቦርድ ወይም በብጁ ማይክሮ ቺፕ/ኤንኤክስፒ/ሬኔስ/STM/Atmel PCB ሊተካ ይችላል። Node.js በ. Net ማዕቀፍ ፣ በ PHP ወይም በሌላ በማንኛውም መድረክ ሊተካ ይችላል። ግን ለቀላልነት እኛ NodeMCU እና Node.js ን እየተጠቀምን ነው።

አሁን በ node.js ውስጥ ትንሽ ፕሮግራም ማካሄድ ከቻልን ፈተና እንፈጽም

ማስታወሻ ደብተር/ማስታወሻ ደብተር ++ ወይም ሌላ አርታዒ ወይም በአካባቢዎ አቃፊ ውስጥ የአጠቃቀም አጠቃቀም (የእይታ ስቱዲዮ ኮድ https://code.visualstudio.com/) ጋር index.js የተባለ ፋይል ይፍጠሩ።

ይህንን ኮድ በውስጡ ያስገቡት

var http = ይጠይቁ ('http');

http.createServer (ተግባር (ተደጋጋሚ ፣ ረ)

res.writeHead (200 ፣ {'የይዘት-ዓይነት': 'ጽሑፍ/ሜዳ'});

res.end ('ሰላም ዓለም!');

}) ያዳምጡ (8080);

አስቀምጠው እና በ FileZilla ውስጥ ባለ ፋይል ላይ በእጥፍ ጠቅ/ጎትት በመጣል እንደ index.js ወደ አቃፊ/ቤት/መተግበሪያ ያስተላልፉ።

መስቀለኛ መንገድ index.js ን ያሂዱ እና እየሄደ ይተዉት።

አሁን ፣ የእኛን ገጽ በ https:// virtual-machine-ip: 8080 ከአሳሳችን መድረስ እንችላለን። ከሄሎ ዓለም ጽሑፍ ጋር አንድ ነጭ ገጽ ይታያል።

እንኳን ደስ አለዎት ፣ አሁን በ node.js ውስጥ የድር አገልጋይ ፈጥረዋል!

ደረጃ 9: ሶፍትዌሩን ያዘጋጁ

ወደ ኮንሶል ይሂዱ እና ctrl+C ን በመጫን ፕሮግራሙን ያቁሙ።

በ/ቤት/መተግበሪያ/ውስጥ የ index.js ፋይልዎን ይተኩ እና በ index.js ውስጥ በእኛ ውስጥ ይተኩ።

ለድር ጣቢያው ሁሉንም ፋይሎች እዚህ ማውረድ ይችላሉ-

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

የእኛን የገና ዛፍ ኮድ ከ html አቃፊ ወደ የርቀት ማውጫ/var/www/html/ከፋይልዚላ ጋር ይቅዱ። የተወሰነ ጊዜ ይወስዳል። እሱ ከጠየቀ ፣ index.html ን በአዲስ ይተኩ።

በሚወዱት የድር አሳሽዎ ውስጥ አይፒዎን እንደገና ያስገቡ።

አሁን የድር መተግበሪያዎን የፊት-መጨረሻ በ https:// virtual-machine-ip ላይ እንዲገኝ አድርገዋል።

ደረጃ 10-የኋላ-መጨረሻ ኮድ የማይሰራ እና እንዲሰራ ማድረግ

ማሳሰቢያ-የኋላ-መጨረሻ ኮድዎ /ቤት /መተግበሪያ ላይ ነው

ያስታውሱ ፣ ኮድዎን በአከባቢዎ ካስተካከሉ በኋላ ፣ FileZilla ን በመጠቀም ወደ አገልጋይዎ መስቀሉን አይርሱ እና የመስቀለኛ መንገድ መተግበሪያዎን እንደገና ያስጀምሩ (ኮንሶል: ctrl+c ፣ ቀስት ወደ ላይ (የመጨረሻውን የትእዛዝ መስቀለኛ መንገድ index.js ያሳያል) ፣ ያስገቡ)

ኮድ እንዲሠራ ፣ መጀመሪያ ጥቂት ውሂብ ማስገባት ያስፈልግዎታል።

በመጀመሪያ ፣ በ index.js ውስጥ የአስተናጋጅ ስም ተለዋዋጭን ወደ የራስዎ ጎራ ወይም አይፒ ፣ (የሚመስል ነገር - 165.13.45.123) መለወጥ ያስፈልግዎታል።

በሁለተኛ ደረጃ ፣ እሱን ለመረዳት በኮድ እመራዎታለሁ። በኮድ ውስጥ የሰጠኋቸውን አስተያየቶች ላለመዘለል እርግጠኛ ይሁኑ።

ፈጣን ሞጁልን በመጠቀም አንድ መተግበሪያ እንደምንፈጥር በ index.js ፋይል ውስጥ ማየት ይችላሉ። ከዚያ እኛ የ CORS ደንቦችን በእሱ ላይ እንተገብራለን ፣ ኤፒአይዎችን አክል እና የ http አገልጋይ እንጀምራለን። ይህ አገልጋይ በ GET http ጥያቄዎች በኩል ድር-ገጽን አያቀርብም ፣ ግን በ GET http ጥያቄ በኩል መሪ ግዛቶችን ያገለግላል እና በተቀበሉት PUT http ጥያቄዎች ላይ መሪ ግዛቶችን ያዘምናል።

ኤፒአይዎች በመተግበሪያዎች መካከል መረጃን ለመለዋወጥ የተለመዱ ልምዶች ናቸው። እኛ የምንጠቀምባቸው በጣም የተለመዱ እኛ ራሳችን የምንጠቀምባቸው REST ኤፒአይዎች ናቸው። እነሱ ሀገር አልባ ናቸው እና የማያቋርጥ ግንኙነት የላቸውም (shorturl.at/aoBC3 ፣

የ PUT ጥያቄዎች የመተግበሪያ ድርድር ተለዋዋጭ (ማህደረ ትውስታ) ውስጥ መሪ መሪ ግዛቶችን በቀላሉ ያዘምናል ፣ የ GET ጥያቄዎች በቀላሉ መሪ ግዛቶችን ለደንበኛ ይልካል።

ለደንበኛው የሚሰጠው መልስ ብዙውን ጊዜ በ JSON ማስታወሻ ውስጥ ነው ፣ ግን ለዚህ የ 30 LED ግዛቶች ቀላል ምላሽ በቀላሉ የ 30 ኮማ የተለዩ እሴቶች ሕብረቁምፊ እንልካለን።

ደረጃ 11 የፊት-መጨረሻውን ኮድ መረዳት እና እንዲሠራ ማድረግ ክፍል 1

ማሳሰቢያ-የፊት-መጨረሻ ኮድዎ/var/www/html ላይ ነው

ያስታውሱ ፣ ኮድዎን በአከባቢዎ ካስተካከሉ በኋላ ፣ FileZilla ን በመጠቀም ወደ አገልጋይዎ መስቀሉን አይርሱ። እንደ node.js ሳይሆን ፣ Apache በራስ -ሰር እንደገና ይጀምራል ፣ ግን ገጽዎን በአሳሽዎ ውስጥ እንደገና መጫን ይኖርብዎታል። ለማደስ እና የገጽዎን መሸጎጫ ለመሰረዝ ደግሞ ctrl+f5 ን ይጠቀሙ።

ኮድ እንዲሠራ ጥቂት ውሂብ ማስገባት ያስፈልግዎታል። በመጀመሪያ ፣ በ blinkmytree.live ወደ በራስዎ ጎራ ወይም አይፒ ፣ ለምሳሌ በ 165.13.45.123 ውስጥ በ send_request ተግባር ውስጥ የ url ተለዋዋጭውን መለወጥ ያስፈልግዎታል።

ሁለተኛ ፣ እሱን ለመረዳት በኮድ እመራዎታለሁ። በኮድ ውስጥ የሰጠኋቸውን አስተያየቶች ላለመዘለል እርግጠኛ ይሁኑ። ገጽ የኤችቲኤምኤል ሰነድ ነው። ሁሉንም የ CSS ህጎች (የገፅ ዘይቤ እና የይዘት አቀማመጥ) ወደ ጎን በመተው ተግባራዊነት አስፈላጊ ይዘትን እንመለከታለን። ስለ CSS የበለጠ ለማወቅ https://www.w3schools.com/css/ ን ይመልከቱ።

በገጹ ላይ ይህንን ዋና ዋና ባህሪያትን (ቀልጣፋ ዘዴዎች ባለሙያዎች የተጠቃሚ ታሪኮችን ይናገራሉ) ፈልገን ነበር-

• በገጹ ውስጥ የተካተተ የቀጥታ ቪዲዮ

• በጂምፕ ምስል አርታኢ (https://www.gimp.org/) ውስጥ የተቀናበረ የገና ዛፍ ላይ ጠቅ ሊደረግ የሚችል ኤልኢዲዎች።

• የመሪ ግዛቶችን ለመለወጥ በመጠባበቅ ከአገልጋይ ጋር እውነተኛ ግንኙነት።

ደረጃ 12 የፊት-መጨረሻውን ኮድ መረዳት እና እንዲሰራ ማድረግ ክፍል 2

ለመምረጥ የ LED ቁጥሮች እና ቀለሞች ያሉት የገና ዛፍችን አንዴ ካለን ፣ ቦታዎችን መፍጠር እና ለእነሱ እርምጃዎችን መተግበር አለብን ፣ ስለዚህ አንድ ጊዜ በምስሉ መራጭ ክፍል ውስጥ በቀለማት ያሸበረቀውን LED ላይ ጠቅ ካደረግን ፣ አንድ ቀለም ይመረጣል ፣ እና አንድ በ LED ላይ ጠቅ እናደርጋለን ፣ ትዕዛዙ አርዱዲኖ እሴቱን ወደሚመርጥበት ወደ አገልጋዩ ይላካል።

በኤችቲኤምኤል 5 ፣ አዲሱ የኤችቲኤምኤል መስፈርት ፣ የምስል ካርታ የሚባል ነገር አለ። እሱ በምስል ላይ ቦታዎችን እንድንገልጽ ያስችለናል ፣ ይህም በእሱ ላይ የእርምጃ አድማጮችን መተግበር እንችላለን።

እኛ የምንገልፃቸው ብዙ አካባቢዎች ስላሉን እነዚህን አካባቢዎች ለመግለጽ በመስመር ላይ https://www.image-map.net/ መሣሪያን ተጠቅመን የኤችቲኤምኤል ኮድ ወደ ገጻችን ገልብጠን ነበር።

አንዴ ይህን ካደረግን ፣ ለእያንዳንዳቸው አካባቢዎች የኤልዲኤ ቁጥርን በሚጠራው ተግባር እና በመለኪያ ላይ የክሊክን ክስተት ልናስቀምጥ እንችላለን። ከላይ ያለውን ቅጽበታዊ ገጽ እይታ ይመልከቱ።

ደረጃ 13 የፊት-መጨረሻውን ኮድ መረዳት እና እንዲሠራ ማድረግ ክፍል 3

በኤችቲኤምኤል አካል መጨረሻ ውስጥ ፣ በክልል ውስጥ ፣ በጃንክ ስክሪፕቶች ውስጥ የምንጠራቸውን ተግባራት ለመግለጽ አንዳንድ ጃቫስክሪፕትን እናስቀምጣለን። በአለምአቀፍ ደረጃ ፣ የ PUT ጥያቄን ለመላክ የምንጠቀምበትን ኤክስኤምኤልኤችቲፒ ሪኬስት እንገልፃለን።

ሁለት ተግባራት አሉን

ተግባር set_color (ቫል)

ተግባር send_request (መታወቂያ)

የኤፒአይ ጥያቄን ለመሞከር ፣ ብዙውን ጊዜ ጥቅም ላይ የዋለ የሶፍትዌር መሣሪያ ፖስትማን https://www.postman.com/ እንዲባል እመክራለሁ። የፕሮግራም ክህሎቶች ሳይኖሩት የኤፒአይ ጥያቄን በቀላሉ ለአገልጋዩ እንድንልክ ያስችለናል። በአገልጋይ ላይ ለማሾፍ ፣ እንዲሁም ጥያቄዎችን ለመቀበል ያስችላል።

ደረጃ 14 የፊት-መጨረሻውን ኮድ መረዳት እና እንዲሠራ ማድረግ ክፍል 4

ማመልከቻዎ ይሠራል።

ይጠንቀቁ ፣ ቁጥሮቹ ተገልብጠዋል ፣ ማለትም ፣ 20 1 እና 1 20 ነው ፣ ይህ የሆነው በዛፉ ላይ ያሉት ኤልኢዲዎች ከታች ስለሚጀምሩ ነው ፣ ግን ለተሻለ የተጠቃሚ ተሞክሮ ጅምርን ወደ ላይ አደረግን።

ከፈለጉ አሁንም በ YouTube ላይ የቀጥታ ዥረት መፍጠር እና የ YouTube ቪዲዮውን የተከተተ ኮድ በራስዎ መተካት ያስፈልግዎታል።

ደረጃ 15 የአርዱኖ ኮድ

ESP8266 በኤፒአይ ጥሪ በኩል ከድር ጣቢያዬ ውሂቡን በመቀበል በትንሹ የተሻሻለ መሠረታዊ የኤች ቲ ቲ ፒ ደንበኛ ምሳሌ ንድፍ ይሠራል።

እኔ እንደ እኔ ተመሳሳይ አድራሻ ያለው የ RGB ስትሪፕን ለመጠቀም ከፈለጉ የ LED ንጣፍን ለመቆጣጠር ቤተ -መጽሐፍትን መጫን ያስፈልግዎታል።

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

እኔ ባያያዝኩት ንድፍ ውስጥ የ Wi-Fi ስምዎን እና የይለፍ ቃልዎን ዩአርኤል ወደ ድር ጣቢያዎ ማስገባት ያስፈልግዎታል (አስተያየቶቹን ይመልከቱ)

እኛ በመሠረቱ የ http ምላሽ ወደ C- የተተየበ ሕብረቁምፊ እንለውጣለን ፣ ስለዚህ ሕብረቁምፊውን በኮማ ለመከፋፈል እና የአገልጋዮችን ጠረጴዛ ከአገልጋይ በተነበቡ እሴቶች ለመሙላት የ C ተግባር strtok ን መጠቀም እንችላለን። እኛ በጠረጴዛው ውስጥ የምንሄድበትን ተግባር ከመጥራት እና በእሴቶቹ ላይ በመመስረት ተጠቃሚው የሚጠብቀውን ትክክለኛውን ቀለም እናዞራለን።

ያ ነው!

እንኳን ደስ አለዎት ፣ እርስዎ አደረጉት!

ደረጃ 16: RGB LED ሰንሰለት

,ረ ኦህ። ከሁሉም ኮዲንግ ትንሽ ዕረፍትን ለመውሰድ ጊዜው አሁን ነው:)

ESP8266 ኤልኢዲዎችን በተናጠል ለመቆጣጠር ብዙ የ GPIO ፒኖች ስለሌለው ፣ ይህንን አድራሻ ያለው የ RGB LED ሰንሰለት እጠቀም ነበር-

www.sparkfun.com/products/11020

በዚህ መንገድ ፣ ሁሉም 20 RGB ሊድ (60 ሊድ ድምር) በሁለት ፒን ብቻ ቁጥጥር ሊደረግበት ይችላል - “መረጃ” እና “ሰዓት” እና 5V ኃይል በቀጥታ ከ ESP8266።

ጥብሱን ከኖድሙኩ ጋር ማገናኘት ቀላል ነው። 5V ወደ ቪን በ NodeMcu (5V ከዩኤስቢ) ፣ ቢጫ ሽቦ ለመሰካት 12 ፣ አረንጓዴ ሽቦ ለመሰካት 14 ፣ መሬት ላይ።

የግለሰብ አርጂቢ ቀለም እና ብሩህነት ማዘጋጀት ይችላሉ። በአንዳንድ የቀለም ድብልቅ ፣ ለእያንዳንዱ ኤልኢዲ ብዙ ቀለሞችን ማምረት ይችላሉ።

በእነዚህ LEDs ለሁሉም ዓይነት አሪፍ FX ውጤቶችም በጣም አሪፍ ቤተ -መጽሐፍት አለ። ከወደዱት ይሞክሩት

github.com/r41d/WS2801FX

ደረጃ 17 የገናን ዛፍ ያጌጡ

ቆንጆ ያድርጉት እና ሁሉም ኤልኢዲዎች መታየት እና በዛፉ ላይ በጥሩ ሁኔታ መሰራጨታቸውን ያረጋግጡ።

ደረጃ 18 - የመጨረሻ ንክኪዎች

ዛፉ ዝግጁ በሚሆንበት ጊዜ ጥሩ ፎቶ ያንሱ እና ጠቅ ሊደረጉ የሚችሉ ቦታዎችን (የ LED ቦታዎችን) የምስል ካርታ ለመፍጠር ደረጃውን ይድገሙት

ከኤሌዲዎች ጋር ለመገናኘት ይህ በጣም ሊታወቅ የሚችል መንገድ ነው።

ነገሮችን ከመጠን በላይ ማወዳደር ካልፈለጉ መደበኛ አዝራሮችን መጠቀም ይችላሉ።

እንዲሁም በዩቲዩብ ላይ የዛፍዎን የቀጥታ ዥረት መጀመር አለብዎት (በእውነተኛ ጊዜ የሚሆነውን ለመመልከት ከፈለጉ) እና ዥረቱን ወደ ጣቢያዎ ያስገቡ።

ደረጃ 19 - ድር ጣቢያዎን ያደንቁ

ይህንን እስከዚህ ድረስ ካደረጉት ግሩም ነዎት) ጓደኞችዎን ይጋብዙ (እና እኔ በእርግጥ P) እና በተቻለ መጠን ዛፍዎን ጠቅ እንዲያደርጉ ያድርጉ:)

n

ይህ ለተወሳሰበ ፕሮጀክት በጣም ረጅም አስተማሪ ነበር። ግን በመጨረሻ ዋጋ አለው ዲ

አመሰግናለሁ! እኔ በምሠራበት ላይ እንደተገናኙ ለመቆየት ከፈለጉ -

ለዩቲዩብ ጣቢያዬ መመዝገብ ይችላሉ-

www.youtube.com/c/JTMakesIt

እንዲሁም በፌስቡክ እና በ Instagram ላይ እኔን መከተል ይችላሉ

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it ያደርጋል

እኔ አሁን በምሠራው ነገር ፣ ለትዕይንቶች እና ለሌሎች ተጨማሪ ነገሮች! PS:. ፣ በእውነት ከወደዱት ፣ እዚህም ቡና ሊገዙልኝ ይችላሉ ፣ ስለዚህ ለወደፊቱ ፕሮጀክቶች የበለጠ ኃይል ይኖረኛል (ይህ ሀሳብ በጣም ስለዘገየኝ የ 2 ሳምንታት እንቅልፍ ወሰደኝ):)

www.buymeacoffee.com/JTMakesIt

እና በ “ማንኛውም ነገር ይሄዳል” ውድድር ውስጥ ለዚህ አስተማሪ ድምጽ መስጠትን አይርሱ:)