Необходимые инструменты и машины

	Паяльник (общий)
	Проволока для припоя, без свинца
	Флюс для припоя, пайка

Приложения и онлайн-сервисы

	Код Microsoft Visual Studio Необязательно
	IDE Arduino
	autodesk eagle Необязательно

Об этом проекте

Введение

Сегодня мы создадим устройство, которое подключается к Интернету и позволит пользователю управлять своим домом удаленно через Wi-Fi. мы будем использовать плату Arduino (любая модель будет хорошо работать) с модулем Wi-Fi ESP8266-01, чтобы сделать это устройство. Приступим!

Что такое умный дом?

Рабочий сценарий

Панель управления

Мы создадим простую веб-страницу, которая будет работать как панель управления для пользователя, позволяющая ему управлять любым бытовым устройством, подключенным к нашей системе. Для создания веб-страницы мы будем использовать:

• HTML
• CSS
• JQuery

Встроенное оборудование

веб-страница отправляет некоторые заказы на ESP8266-01, который работает как веб-сервер, подключенный к плате Arduino. И согласно поступающим данным, плата Arduino будет выполнять некоторые действия, такие как включение лампочки, выключение телевизора, и в этой части мы будем использовать:

• Ардуино
• ESP8266-01

Начало работы с ESP8266-01

Как мы заявляли ранее, нам нужна наша плата Arduino для подключения к Интернету, но Arduino Nano, версия, которую мы используем сегодня, не имеет этой функции. Итак, мы будем использовать модуль Wi-Fi ESP8266-01, чтобы добавить функцию Wi-Fi на нашу крошечную плату Arduino.

Есть много моделей модулей Wi-Fi ESP, какую из них выбрать ?! Что ж, почти все Wi-Fi-модули семейства ESP хорошо справятся со своей задачей, но у каждого из них есть свои особенности и характеристики. Я рекомендую вам изучить каждую спецификацию и функции, чтобы выбрать наиболее подходящую для ваших нужд.

В соответствии со своими потребностями я нашел ESP8266-01 наиболее подходящим по многим причинам. Он очень известен в сообществе создателей. В результате у него появилось очень прочное онлайн-сообщество, в котором вы можете найти ответ практически на любой вопрос или проблему, с которыми вы столкнетесь, с помощью этого замечательного небольшого модуля. Также его цена очень дешевая (около 1,5 $).

Кроме того, его очень легко использовать с платой Arduino, поскольку это последовательный модуль Wi-Fi, который может связываться с платой Arduino по последовательной связи. Он имеет встроенный микроконтроллер, что означает, что вы можете использовать его как автономный микроконтроллер и модуль Wi-Fi в одной комбинации, что очень круто. Он имеет два встроенных GPIO. Всего за 1,5 $ вы получите все эти функции, что на самом деле очень круто. Давайте подробнее рассмотрим этот модуль.

Распиновка ESP8266-01

• VCC: подключить к источнику питания + 3,3 В. не подключайте его к источнику 5 В, он будет поврежден .
• GND: -ve контакт, подключите его к земле вашей цепи.
• CH_PD: Микросхема включает вывод - Active HIGH. подключите его к логическому значению HIGH, чтобы разрешить загрузку модуля.
• RST: Штифт сброса микросхемы - активен НИЗКИЙ, при нажатии НИЗКОГО уровня происходит сброс модуля.
• GPIO0, GPIO2: Контакты ввода / вывода общего назначения.
• Передача: подключитесь к Rx микроконтроллера (Arduino), чтобы установить последовательную связь.
• Прием: подключитесь к Tx микроконтроллера (Arduino), чтобы установить последовательную связь.

ESP8266-01 Конфигурация

Как мы заявляли ранее, модуль ESP8266-01 обменивается данными с платой Arduino по последовательному каналу связи, что означает, что нам необходимо подключить его к последовательным контактам 0, 1 (Tx, Rx) Arduino. Но проблема здесь в том, что эти контакты будут заняты, потому что мы будем использовать последовательный монитор Arduino вместе с ESP8266-01 для целей отладки. Итак, нам нужно найти еще два контакта для последовательной связи, чтобы использовать их с ESP8266-01.

К счастью, Arduino упростил это. Существует библиотека под названием «SoftwareSerial», разработанная для обеспечения последовательной связи на других цифровых выводах Arduino с использованием программного обеспечения для воспроизведения функциональности. Например, с помощью этой библиотеки я могу установить контакты 2, 3 (SoftwareSerial) как Rx и Tx рядом с контактами 0, 1 (Hardware Serial).

«SoftwareSerial» Библиотека отлично работает до тех пор, пока скорость передачи не превышает 19 200 бод. Но здесь есть небольшая проблема! Модуль Wi-Fi ESP8266-01 поставляется с завода, запрограммированным на передачу данных на скорости 115, 200 бод, что как-то сложно для библиотеки «SoftwareSerial». Итак, нам нужно перепрограммировать наш модуль Wi-Fi, чтобы установить скорость связи на 9600 бод, что неплохо работает с библиотекой «SoftwareSerial». Для этого мы будем использовать некоторые «AT-команды».

Изменение скорости связи ESP8266-01

Первый шаг:загрузите пустую программу на плату Arduino

На этом этапе мы загружаем пустой код на плату Arduino. Просто чтобы убедиться, что плата Arduino ничего не выполняет в фоновом режиме.

Второй шаг:подключение ESP8266-01 к плате Arduino

Чтобы перенастроить ESP8266-01 и изменить скорость связи (скорость передачи), мы используем AT-команды. Проще говоря, AT-команды - это некоторые инструкции, используемые для управления модемами, мобильными телефонами, модулями Bluetooth, модулями Wi-Fi, модулями GSM.

с помощью этих команд мы можем получить основную информацию о нашем мобильном телефоне или модулях GSM, такую ​​как название производителя, номер модели, IMEI и т. д. «AT» - это сокращение от «ATtention», и это называется AT-командами, потому что каждая команда запускается с «АТ». префикс «AT» не является частью самих команд, он просто сообщает модулю начало команд.

Некоторые важные AT-команды

Номер команды «4» зависит от версии прошивки ESP8266-01, если эта команда не работает с вами AT + CIOBAUD = Попробуйте этот AT + UART_DEF =, 8,1,0,0

Шаг 1. Откройте Serial Monitor

Шаг 2. Установите скорость передачи данных 115, 200 бод .

Как мы заявляли ранее, ESP поставляется производителем и запрограммирован на передачу данных на скорости 115 200 бод. Поэтому нам нужно установить скорость связи Arduino на 115, 200 . тоже в первый раз, только потом мы изменим это позже. Кроме того, вы должны выбрать «И NL, и CR» . .

Шаг 3. Отправьте «AT» и дождитесь ответа, чтобы убедиться, что модуль ESP вас слышит.

Шаг 4. Теперь измените скорость передачи данных ESP8266-01 .

Мой модуль ESP8266-01 загружает прошивку 1.6. и эта команда AT + UART_DEF =, 8,1,0,0 у меня хорошо работает. Если у вас не работает, попробуйте этот AT + CIOBAUD = . Если он отвечает «ОК» теперь скорость передачи данных вашего модуля ESP изменена с 115, 200 бод до 9600 бод. ПОЗДРАВЛЯЮ!

Давайте снова изменим скорость последовательного монитора на 9600 и снова отправим AT, чтобы узнать, слышит ли нас модуль ESP на новой скорости (9600) или нет.

СМОТРИ! это работает. ESP8266-01 теперь может связываться с платой Arduino со скоростью 9600 бод вместо 115, 200 бод.

Теперь попробуем подключиться к сети Wi-Fi .

Как только вы нажмете Enter, ESP8266-01 выполнит поиск этой сети и подключится к ней. Если процесс завершится успешно, он вернет это

WIFI ПОДКЛЮЧЕН

WIFI GOT IP

На этом этапе мы успешно изменили скорость связи ESP8266-01 со 115 200 бод на 9600 бод. Теперь нам нужно создать панель управления (веб-страницу), которую пользователь будет использовать для управления своей бытовой техникой. Итак, приступим!

Что такое Интернет?

На самом деле Интернет - это провод, скрытый под землей, он может быть оптоволоконным, медным или даже спутниковым, но Интернет - это просто провод. Любые два компьютера, подключенные к этому проводу, могут обмениваться данными. Если компьютер подключен напрямую к этому проводу он называется сервером и если он не подключен напрямую к этому проводу, он называется клиентом .

Сервер: это особый компьютер, на котором работает определенная операционная система, такая как Apache, этот специальный компьютер сохраняет некоторые веб-страницы, файлы и базы данных на своем диске. любой сервер, подключенный к Интернету, имеет уникальный IP-адрес, например 172.217.171.228 IP-адрес подобен номеру телефона, он помогает людям легко находить друг друга. Поскольку этот IP-адрес запомнить людям непросто. Итак, мы просто дали ему имя google.com . (Доменное имя).

Клиент: это компьютер, похожий на тот, который мы с вами используем каждый день, он косвенно подключен к Интернету через поставщика интернет-услуг (ISP), а также имеет уникальный IP-адрес.

Рабочий сценарий

Проще говоря, он начинается с запроса, отправленного из веб-браузера (клиента), такого как google chrome, firefox, и заканчивается ответом, полученным от веб-сервера.

Вы ввели URL-адрес веб-сайта makeomestuff.org в браузере с компьютера (клиента), затем этот браузер отправляет запрос на веб-сервер, на котором размещен веб-сайт, затем веб-сервер возвращает ответ, содержащий HTML-страницу или любой другой формат документа, в браузер для отображения это.

Собственно, это то, что нам нужно сделать сегодня в нашем проекте. Нам нужно отправить запрос из веб-браузера (клиента) на ESP8266-01 (веб-сервер), который оба подключены к одной локальной сети. Этот запрос содержит некоторые данные, которые говорят Arduino, что делать, чтобы включить или выключить лампочку. Итак, приступим к созданию веб-страницы!

Создание веб-страницы

Чтобы создать нашу веб-страницу, мы должны иметь дело с HTML, CSS, Javascript. Если вы никогда раньше не слышали об этих именах, не волнуйтесь, я вас понял.

HTML: Расшифровывается как «язык разметки гипертекста», который мы используем для построения основной структуры любой веб-страницы. Например, добавление кнопок, изображений, абзацев, заголовков, таблиц и многих других элементов. он состоит из ряда элементов, которые сообщают браузеру, как отображать содержимое веб-страницы. эти элементы представляют собой так называемые теги.

CSS: Это означает каскадную таблицу стилей. После создания основной структуры веб-страницы вам нужно, чтобы эта структура выглядела красиво, вот и CSS, чтобы немного стилизовать. это язык, описывающий стиль элемента HTML. он состоит из нескольких селекторов и блоков замедления.

Javascript: это язык программирования, который мы будем использовать, чтобы сделать веб-страницу более интерактивной, например добавить некоторые анимации, карты, и он позволяет нам делать некоторые сложные вещи на веб-странице. В основном мы будем использовать его сегодня для отправки HTTP-запроса от клиента (веб-браузера) на веб-сервер (ESP8266-01) для выполнения некоторых действий, таких как включение или выключение лампочки.

Создайте структуру веб-страницы

Чтобы легче понять предстоящее объяснение, я рекомендую Прочитать это классное Введение в HTML .

Как мы видим, наша панель управления очень проста, она содержит два заголовка, каждый из которых имеет разный размер, одно изображение и две кнопки:одна для включения светодиода, а вторая - для его выключения.

Код

        
 Панель управления умным домом 
 
 Извините, но Я фанат мемов! 
  
  ЛАМПА ВКЛЮЧЕНА  
  ЛАМПА ВЫКЛЮЧЕНА     

Расшифровка кода

• : декларация определяет, что этот документ является документом HMTL5.
• : корневой элемент HTML-страницы.
• : элемент содержит метаинформацию о странице.

• Панель управления умным домом

  Извините, но я наркоман мемов!

  
  ЛАМПА ВКЛЮЧЕНА
  ЛАМПА ВЫКЛЮЧЕНА

  Расшифровка кода

  Мы добавили несколько строк кода, чтобы наша веб-страница выглядела лучше. Мы добавили style ="background-color:seagreen; color:seahell; text-align:center;" внутри тела тег чтобы все содержимое веб-страницы находилось в центре страницы и установить зеленый цвет фона также, чтобы установить цвет шрифта на морскую ракушку .

  Также мы добавили style ="margin:10px;" внутри двух тегов кнопок для установки поля в 10 пикселей по четырем сторонам каждой кнопки.

  Отправка запроса на веб-сервер

  Чтобы легче понять предстоящее объяснение, я рекомендую Прочитать это классное Введение в JQuery .

  Теперь, после создания структуры нашей веб-страницы и ее стиля, нам нужно добавить некоторые функции к двум кнопкам, которые мы добавили ранее на веб-страницу. нам нужно, чтобы когда пользователь нажимал кнопку «LAMP ON», его / ее браузер отправлял запрос, содержащий некоторые уникальные данные на сервер (ESP8266-01), эти уникальные данные говорят Arduino включить лампу. То же самое со второй кнопкой «LAMP OFF», когда пользователь нажимает ее, браузер отправляет запрос, содержащий некоторые уникальные данные на сервер (ESP8266-01), эти уникальные данные говорят Arduino выключить лампу. Давайте посмотрим на код.

           
   Панель управления умным домом 
   
   Извините, но я фанат мемов! 
    
    ЛАМПА ВКЛЮЧЕНА  
    LAMP OFF      

  Расшифровка кода

  Перво-наперво, нам нужно импортировать библиотеку JQuery в наш код. Итак, мы добавили эту строку в тег заголовка .

  Все волшебство происходит в этой интересной части.

  • $ (". button"). click (function () {

  Когда пользователь нажимает любую кнопку, связанную с классом «кнопка» , активируйте следующую функцию.

  • var p =$ (this) .attr ('id');

  Получить значение атрибута «id» кнопки, для которой нажата кнопка. и сохраните его внутри «p» переменная.

  • pin:p

  Поместите значение переменной «p» в словарь (ключ-значение), его ключ - «pin», а значение - значение переменной «p».

  • $ .get ("http://172.20.10.11:80/", {pin:p});});

  Затем отправьте запрос GET на веб-сервер, IP-адрес которого - «172.20.10.11». это ПОЛУЧИТЬ запрос содержит значение атрибута id нажата кнопка.

  В случае, если пользователь нажал кнопку «LAMP ON», это значение идентификатора будет 111, поэтому заголовок запроса GET будет содержать некоторые данные, подобные этому pin =111 . посмотрите на следующий рисунок!

  

  С другой стороны, если пользователь нажал кнопку «LAMP OFF», запрос будет содержать эти данные pin =110 .

  Логика кода

  Я знаю, что вы спрашиваете, какого черта он выбрал 111 и 110 конкретно? Хорошо, дай мне ответить, фам. Собственно, число 111 и 110 делится на две части.

  • Часть первая: это первые два числа, которые в обоих случаях будут «11», это относится к номеру вывода Arduino, к которому подключена нагрузка, которую мне нужно контролировать.
  • Часть вторая. - третье число, которое изменяется от 1 до 0 в зависимости от нажатой кнопки. И это относится к состоянию вывода (ВКЛ или ВЫКЛ).

  В коде Arduino мы получим эти данные, отделим эти две части друг от друга и сохраним каждую часть в другой переменной, первую часть в переменной pinNumber и вторая часть в переменной pinState , затем мы напишем эту простую строку кода для управления подключенной нагрузкой digitalWrite (pinNumber, pinState);

  Подключение нагрузки

  Теперь нам нужно подключить нагрузку к плате Arduino, чтобы управлять ею. Перед подключением любого высоковольтного устройства, такого как кондиционер или даже телевизор, нам нужно протестировать нашу схему и код с помощью некоторых низковольтных вещей, таких как светодиоды, только чтобы убедиться, что все работает нормально. Вот схема подключения

  

  Схема подключения довольно проста:мы подключаем положительную ножку светодиода к цифровому выводу 11 Arduino, а отрицательную ножку к GND через резистор 1 кОм.

  Код Arduino

    #include  // включение библиотеки SoftwareSerial позволит вам использовать контактный номер. 2,3 как Rx, Tx. SoftwareSerial esp8266 (2,3); // устанавливаем Rx ==> Pin 2; TX ==> Pin3. #define serialCommunicationSpeed ​​9600 // <=========определить константу с именем "serialCommunicationSpeed" со значением 9600. Она относится к скорости последовательной связи программного и аппаратного обеспечения (скорость передачи). #define DEBUG true // создаем константу с именем «DEBUG» и ее значение true. мы будем использовать его позже. int redLED =12; // присваиваем переменной с именем "redLED" целочисленное значение 12, это относится к контакту, к которому подключен красный светодиод. int blueLED =11; // присваиваем переменной с именем blueLED целочисленное значение 11, это относится к контакту, к которому подключен синий светодиод. void setup () {pinMode (красный светодиод, ВЫХОД); // устанавливаем контакт номер 12 как выходной контакт. pinMode (синий светодиод, ВЫХОД); // устанавливаем контакт номер 11 как выходной контакт. digitalWrite (красный светодиод, НИЗКИЙ); // выключаем красный светодиод в начале программы. digitalWrite (синий светодиод, ВЫСОКИЙ); // включаем синий светодиод в начале программы. Serial.begin (serialCommunicationSpeed); // начало последовательной связи оборудования (0, 1) на скорости 9600. esp8266.begin (serialCommunicationSpeed); // запускаем программную последовательную связь (2, 3) на скорости 9600. InitWifiModule (); // вызываем эту определяемую пользователем функцию «InitWifiModule ()» для инициализации связи между ESP8266 и вашей точкой доступа (домашним маршрутизатором или даже вашей мобильной точкой доступа). digitalWrite (синий светодиод, НИЗКИЙ); //after finishing the initialization successfully, turn off the blue LED (just an indicator). } void loop() //our main program, some fun are about to start) { if(esp8266.available()) //if there's any data received and stored in the serial receive buffer, go and excute the if-condition body. If not, dont excute the if-condition body at all. { if(esp8266.find("+IPD,")) //search for the "+IPD," string in the incoming data. if it exists the ".find()" returns true and if not it returns false. { delay(1000); //wait 1 second to fill up the buffer with the data. int connectionId =esp8266.read()-48; //Subtract 48 because the read() function returns the ASCII decimal value. And 0 (the first decimal number) starts at 48. We use it to convert from ASCI decimal value to a character value. esp8266.find("pin="); //Advance the cursor to the "pin=" part in the request header to read the incoming bytes after the "pin=" part which is the pinNumer and it's state. int pinNumber =(esp8266.read()-48)*10; //read the first Byte from the Arduino input buffer(i.e. if the pin 12 then the 1st number is 1) then multiply this number by 10. So, the final value of the "pinNumber" variable will be 10. pinNumber =pinNumber + (esp8266.read()-48); //read the second Byte from the Arduino input buffer(i.e. if the pin number is 12 then the 2nd number is 2) then add this number to the first number. So, the final value of the "pinNumber" variable will be 12. int statusLed =(esp8266.read()-48); //read the third byte from the Arduino input buffer. then save it inside the "statusLed" variable. At any case, it will be 1 or 0. digitalWrite(pinNumber, statusLed); //then turn the LED at "pinNumber" on or off depending on the "statusLed" variable value. Serial.println(connectionId); //print the "connectionId" value on the serial monitor for debugging purposes. Serial.print(pinNumber); //print the "pinNumber" value on the serial monitor for debugging purposes. Serial.print (""); //print some spaces on the serial monitor to make it more readable. Serial.println(statusLed); //print the "statusLed" value on the serial monitor for debugging purposes. String closeCommand ="AT+CIPCLOSE="; //close the TCP/IP connection. closeCommand+=connectionId; //append the "connectionId" value to the string. closeCommand+="\r\n"; //append the "\r\n" to the string. it simulates the keyboard enter press. sendData(closeCommand,1000,DEBUG); //then send this command to the ESP8266 module to excute it. } } } /****************************************************************************************************************************************************************************************** * Name:sendData * Description:this Function regulates how the AT Commands will ge sent to the ESP8266. * * Params:command - the AT Command to send * - timeout - the time to wait for a response * - debug - print to Serial window?(true =yes, false =no) * * Returns:The response from the esp8266 (if there is a reponse) */ String sendData(String command, const int timeout, boolean debug) { String response =""; //initialize a String variable named "response". we will use it later. esp8266.print(command); //send the AT command to the esp8266 (from ARDUINO to ESP8266). long int time =millis(); //get the operating time at this specific moment and save it inside the "time" variable. while( (time+timeout)> millis()) //excute only whitin 1 second. { while(esp8266.available()) //is there any response came from the ESP8266 and saved in the Arduino input buffer? { char c =esp8266.read(); //if yes, read the next character from the input buffer and save it in the "response" String variable. response+=c; //append the next character to the response variabl. at the end we will get a string(array of characters) contains the response. } } if(debug) //if the "debug" variable value is TRUE, print the response on the Serial monitor. { Serial.print(response); } return response; //return the String response. } /****************************************************************************************************************************************************************************************** * Name:InitWifiModule * Description:this Function gives the commands that we need to send to the sendData() function to send it. * * Params:Nothing. * * Returns:Nothing (void). */ void InitWifiModule() { sendData("AT+RST\r\n", 2000, DEBUG); //reset the ESP8266 module. //delay(1000); sendData("AT+CWJAP=\"PUT YOUR SSID\",\"PUT YOUR PASSWORD\"\r\n", 2000, DEBUG); //connect to the WiFi network. delay (3000); sendData("AT+CWMODE=1\r\n", 1500, DEBUG); //set the ESP8266 WiFi mode to station mode. задержка (1000); sendData("AT+CIFSR\r\n", 1500, DEBUG); //Show IP Address, and the MAC Address. задержка (1000); sendData("AT+CIPMUX=1\r\n", 1500, DEBUG); //Multiple conections. задержка (1000); sendData("AT+CIPSERVER=1,80\r\n", 1500, DEBUG); //start the communication at port 80, port 80 used to communicate with the web servers through the http requests. }  

  code explanation

  the code is pretty straightforward, we implemented two different functions InitWifiModule() and sendData()

  The sendData() function job is regulating how the AT commands will get sent to the ESP8266-01 module.

  the InitWifiModule() function job is to provide the sendData() function the AT commands that we need to send to the ESP8266-01.

  in the loop() function we read the income HTTP request header and search for the “+IPD, ” which means that the request has successfully arrived, then we read the pin value which it will be “111” if the user clicked the “LAMP ON” button and “110” if the user clicked “LAMP OFF” button.

  Don’t forget to put your wifi SSID and Password in the Arduino code line no. 103 sendData("AT+CWJAP=\"PUT YOUR SSID\",\"PUT YOUR PASSWORD\"\r\n", 2000, DEBUG);

  For more code explanation please read the comments in the code, it’s well documented

  Как это работает

  After uploading the code to the Arduino board, open the Serial monitor and read the responses that the ESP module is sending.

  

  at the beginning of the program, if you see something like the previous figure with “OK” at the end of the page, it means that the ESP8266-01 module is successfully connected to your wifi (Access point) and got an IP and MAC address. Now, you can open your fancy web page and try to control some stuff 😉

  

  But, if you see something like the previous figure with a “FAIL” or “ERROR” at the end of the page, it means that your ESP module cant connect to your wifi (Access point) for some reasons, try to check if entered the right SSID and password for your network.

  Adding a High Voltage Load

  After we tested our code and got sure that everything is working like a charm, we need to replace this boring LED with a High voltage load like an air conditioner, TV or a light bulb. But to control all of these high voltage appliances we have to deal with relays .

  

  What’s and why relays? Ok, the relay is a mechanical switch, which is toggled on or off by energizing a coil. it’s mainly used to control a high powered circuit using a low power signal (5V or 0V). So we can control a high powered device like an air conditioner or an AC lamp turning it on or off only by a 5V or 0V signal. Which is amazing!

  

  The Two-channel relay module has two control pins(IN1, IN2) these pins should get connected to two Arduino digital pins to control the state of the two coils, closes or opens the load circuit.

  

  At the opposite side of the relay module, the COM(common) should get connected to one end of the load. the other end of the load is either connected to the NC(Normally Close) or NO(Normally open) , if connected to the NO the load remains Disconnected before trigger and vice versa.

  Wiring Diagram

  

  As you see, we are using a two-channel relay module that gives us the ability to control two different AC loads. We are connecting the first relay at digital output pin11(Arduino) and the second relay to digital output pin 12(Arduino)

  We will make a small modification to our web page, we will add another two buttons(ON and OFF) to control the second connected load.

         
   Smart Home Control Panel
   
  Sorry But I'm a Meme Addict!
    
   Blue LED ON Blue LED OFF 
    Red LED ON Red LED OFF     

  

  How It Works

  Just like the last trial, You upload the Arduino code to the board (if not uploaded yet) and open the serial monitor and make sure that your ESP module is connected successfully to your access point and got an IP and MAC address.

  Then open your fancy web page and start controlling your stuff 😉

  Make it more professional!

  What about transferring our breadboard circuit to a professional printed circuit board (PCB) to make our project more rigid and solid, I designed the project circuit using Autodesk Eagle software. all the PCB files are open-source you can access it from this link:https://www.pcbway.com/project/shareproject/IoT_Using_Arduino_and_ESP8266_01.html

  Because we love open source 😉

  

  You can order your own PCB From PCBWay company these guys have a very good reputation in this field and they ship to more than 170 countries around the world with reasonable prices. all you have to do is to open the project PCB files link and press “Add to cart”. That’s it!

  

  Устранение неполадок

  if your ESP Module is successfully connected to your access point but there is no action happens when you click the web page buttons

  • make sure that you are sending the request from your web browser from port 80(HTTP). example:

  $.get("http://192.168.1.4:80/"

  • make sure that your PC or Laptop and the ESP module is connected to the same Access point.
  • In Jquery code, make sure that you wrote the right ESP module IP address.
  • Make sure that you are connecting the load at Arduino digital pins 11 and 12.
  • Don’t forget to save the Web page code file after any change or modification, and reload the web page in the web browser after any code modification to take effect.

  Final

  We are done! in today’s tutorial, we learned how to build a simple web page using HTML, CSS, and jquery. Also, we learned how to control an AC load wirelessly from a web-based control panel, and how to use the awesome ESP8266-01 Wifi module with the Arduino board.

  you wanna see more Tutorials and open source projects you can also visit my blog www.makesomestuff.org

  Lastly, if you have any questions drop it in the comments section below, I will be more than happy to hear from you 😉