ESP32 негизделген веб -серверди колдонуу менен Интернетти көзөмөлдөгөн LED: 10 кадам

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

Долбоорго сереп

Бул мисалда, биз дүйнөнүн каалаган жеринен жеткиликтүү болгон LED абалын көзөмөлдөө үчүн ESP32 негизделген веб-серверди кантип жасоону аныктайбыз. Бул долбоор үчүн сизге Mac компьютери керек болот, бирок сиз бул программаны Raspberry Pi сыяктуу арзан жана аз кубаттуу компьютерде деле иштете аласыз.

Arduino IDE менен ESP32 даярдоо

ESP32ди Arduino IDE жана Arduino программалоо тили менен программалоону баштоо үчүн сизге атайын кошумча керек болот. Arduino IDEди ESP32 үчүн Mac OSте кантип даярдоо керектигин төмөнкү шилтемеден окуңуз.

Жабдуулар

Бул окуу куралы үчүн сизге төмөнкү нерселер керек болот:

• ESP32 өнүктүрүү тактасы5мм
• LEDResistor 220ohm
• 16x2 LCD дисплей I2C модулу менен
• Breadboard
• Өткөргүч зымдар
• Микро USB кабели

1 -кадам: Районду куруу

Төмөндөгү схемалык схемада көрсөтүлгөндөй туташууларды аткарыңыз

ESP32 жана GNDto панелиндеги 3V3 камсыздоо чыңалуусун туташтыруу менен баштаңыз. LEDди санарип чыгаруу пини катары GPIO pin 23 менен ESP32ге резистор аркылуу туташтырыңыз. Андан кийин, 16x2 ЖК дисплейинин SDA пинин GPIO пин 21ге жана SCL GPIO пин 22ге туташтырыңыз.

2 -кадам: SPIFFS файл тутумуна кыскача сереп

SPIFFS "Сериялык Перифериялык Интерфейс Флеш Файл Системасы" дегенди билдирет, башкача айтканда SPI аркылуу маалыматтарды өткөрүүчү флеш -эс тутумунун файлдык системасы. Тиешелүү түрдө, SPIFFS - бул флэш -чиптери бар микроконтроллерлерге арналган, SPI шинасы аркылуу маалыматтарды (мисалы, ESP32 флеш -эс тутуму) өткөрүүгө арналган жөнөкөйлөштүрүлгөн файлдык система.

SPIFFS төмөнкү учурларда ESP32 менен колдонуу үчүн эң пайдалуу:

• Орнотууларды сактоо үчүн файлдарды түзүү
• Туруктуу маалыматтарды сактоо.
• Бир аз маалыматты сактоо үчүн файлдарды түзүү (бул үчүн microSD картасын колдонуунун ордуна).
• Веб -сервер түзүү үчүн HTML жана CSS файлдарын сактоо.

3 -кадам: SPIFFS жүктөгүчүн Mac OSке орнотуу

Сиз түзө аласыз, сактай аласыз жана ESP32 файл тутумунда сакталган файлдарга Arduino IDEдеги плагинди колдонуп жаза аласыз.

Биринчиден, Arduino IDEнин акыркы версиясы орнотулганын текшерип, анан төмөнкүлөрдү аткарыңыз:

• Төмөнкү шилтемени ачыңыз жана "ESP32FS-1.0.zip" архивин жүктөп алыңыз
• Документтер папкасында жайгашкан Arduino IDE каталогуна өтүңүз.
• Эгерде жок болсо, куралдар папкасын түзүңүз. Куралдар каталогунда башка ESP32FS папкасын түзүңүз. ESP32FSтин ичинде курал деп аталган дагы бирин түзүңүз.
• 1 -кадамда жүктөлгөн ZIP архивин куралдар папкасына ачыңыз.
• Arduino IDEди кайра жүктөңүз.
• Плагин ийгиликтүү орнотулганын текшерүү үчүн Arduino IDEди ачыңыз жана "Куралдар" баскычын чыкылдатыңыз жана бул менюда "ESP32 Sketch Data Upload" пункту бар экендигин текшериңиз.

4 -кадам: Китепканаларды орнотуу

ESPAsyncWebServer жана AsyncTCP китепканалары ESP32 файл системасынан файлдарды колдонуп веб -сервер түзүүгө мүмкүндүк берет. Бул китепканалар жөнүндө көбүрөөк маалымат алуу үчүн төмөнкү шилтемени караңыз.

ESPAsyncWebServer китепканасын орнотуңуз

• Китепкананын ZIP архивин жүктөө үчүн бул жерди басыңыз.
• Бул архивди ачуу. Сиз ESPAsyncWebServer-master папкасын алышыңыз керек.
• Анын атын "ESPAsyncWebServer" деп өзгөртүңүз.

AsyncTCP китепканасын орнотуңуз

• Китепкананын ZIP архивин жүктөө үчүн бул жерди басыңыз.
• Бул архивди ачуу. Сиз AsyncTCP-мастер папкасын алышыңыз керек.
• Анын атын "AsyncTCP" деп өзгөртүңүз.

ESPAsyncWebServer жана AsyncTCP папкаларын Документтер каталогунун ичинде жайгашкан китепканалар папкасына жылдырыңыз.

Акырында, Arduino IDEди өчүрүп күйгүзүңүз.

5 -кадам: Кийинки Мазмуну бар Index.html жана Style.css файлын түзүңүз

HTML/CSS шаблону которуштуруу баскычы төмөнкү булактан алынды.

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

Негизинен, код ESP32 веб -серверинен SPIFFSтин жардамы менен алынган Arduino кодуна жана Arduino IDEде ESP32 менен I2C LCDди кантип колдонууга негизделген.

7 -кадам: SPIFFS жүктөгүчтү колдонуу менен Arduino кодун жана файлдарын жүктөңүз

• Arduino кодунун эскиз папкасын ачыңыз.
• Бул папканын ичинде "маалымат" деп аталган жаңы папканы түзүңүз.
• Маалымат папкасынын ичине index.html жана style.css коюу керек.
• Arduino кодун жүктөө
• Андан кийин, файлдарды жүктөө үчүн, Tools> ESP32 Sketch Data Upload боюнча Arduino IDE баскычын чыкылдатыңыз

8 -кадам: ESP32 Web Server IP дарегин аныктоо

Аны эки жол менен табууга болот.

• Arduino IDEдеги сериялык монитор (Куралдар> Сериялык монитор)
• LCD дисплейде

9 -кадам: Жергиликтүү веб -серверди тестирлөө

Андан кийин, өзүңүз каалаган веб -браузерди ачыңыз жана төмөнкү IP дарегин дарек тилкесине чаптаңыз. Төмөндөгү скриншотко окшош чыгарууну алышыңыз керек.

10 -кадам: Ngrok аркылуу дүйнөнүн каалаган жеринен жергиликтүү веб -серверге кирүү

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

• Бул шилтемени басып, катталыңыз.
• Каттоо эсебин түзгөндөн кийин, кириңиз жана "Автордук" өтмөгүнө өтүңүз. "Сиздин туннель Authtoken" талаасындагы сапты көчүрүү.
• Чабыттоо тилкесиндеги "Жүктөө" өтмөгүн чыкылдатыңыз. Сиздин OSке дал келген ngrok версиясын тандап, жүктөп алыңыз.
• Жүктөлгөн папканы ачып, буйрук сабын иштетиңиз.
• Төмөнкү буйрукту киргизүү менен каттоо эсебиңизди туташтырыңыз

./ngrok authtoken

80 портунда HTTP туннелин баштаңыз

./ngrok http Your_IP_Address: 80

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