Creacion de un aplicacion movil para Iot


A veces crear una APP móvil para nuestro proyecto de IOT puede ser una labor muy compleja dependiendo muchísimo de la tecnologia que usemos para desarrollarla. Para intentar simplificar todo esto en este blog hemos hablado del entorno Cayenne que dispone también de infraestructura en la nube y también está disponible tanto versión web como móvil, pero en esta ocasión vamos a tratar una solución mucho más sencilla conocida como Blynk.  Si es la primera vez que conoce Blynk, ¡bienvenido! Blynk está aquí para ayudar a todos aquellos desarrolladores y emprendedores con talento que buscan crear prototipos, desplegar y gestionar remotamente dispositivos electrónicos conectados a cualquier escala. Esta  nueva plataforma le permitirá conectar el hardware a la nube y utilizar módulos de aplicación preconfeccionados para construir aplicaciones iOS, Android y web listas para los usuarios finales.

Obtención de la placa Arduino adecuada para el trabajo

Si desea realizar un proyecto Arduino que está conectado a Internet a través de WiFi, necesita una placa a que puede conectarse a Wi-Fi. Es así de simple. El Arduino UNO, nano, micro, Mega … no se puede conectar a Wi-Fi sin la adición de escudos caros y obsoletos. Así mismo puede ahorrar mucho tiempo y dinero y no hacer para esto a menos que tenga una buena razón para hacerlo. Hay afortunadamente placas mucho más baratas con conectividad wifi como pueden ser  ESP8266  y su sucesor el ESP32 ( asi como todos sus derivados).

Una placa muy barata es  Wemos D1 o Wemos mini tablero de http://www.wemos.cc. Los Wemos D1 es un clon de la Arduino UNO  que utiliza el chip esp8266, cuenta con capacidades WiFi completo fuera de la caja y cuesta sólo $ 4,00 (aunque hoy en dia una placa basada es ESP32 es mucho más potente y versatil por muy poco mas)  .Esa  placa que vemos abajo es muy barata contando con un microprocesador que se conecta a Wi-Fi. Cuenta con todas las cosas que sabe y gusta  como: pines digitales, pines analógicos, Vin, GND, 3,3 V de salida, conector de alimentación, salida de 5 V y un conector micro USB rápido y fácil de cargar sus bocetos.

Si necesita una placa  más pequeña, un ejemplo es la  Wemos mini (basada también en el ESP8266). 

Getting the Right Arduino Board for the Job

EJEMPLO INICIAL

Inscribirse

‍ Su primer paso será crear una cuenta. Puede hacerlo descargando  la app para iOS y Android o en Blynk.Console . El proceso de registro es bastante sencillo, pero aquí puede consultar una guía más detallada si es necesario

Nota: Si es usuario de Blynk 1.0, deberá crear una nueva cuenta para acceder a la nueva plataforma.

Habilitar el modo de desarrollador

‍ El desarrollador Por lo general, es alguien que construye el hardware, desarrolla el firmware y realiza todas las configuraciones del dispositivo.

Habilitar el modo de desarrollador:
  1. En la aplicación Blynk o en Blynk.Console
  2. Vaya a Mi perfil / Perfil de usuario en el menú de la izquierda
  3. Verifique que el interruptor del modo de desarrollador esté en ON

Nota: actualmente, solo se permite un desarrollador por organización para evitar problemas de sincronización. Este límite se puede cambiar más adelante.

‍‍

Configuración rápida de plantilla

‍ Una vez que esté en modo desarrollador, puede comenzar a trabajar en su primera plantilla de dispositivo. Plantilla de dispositivo es un conjunto de configuraciones heredadas por dispositivos de un tipo similar. Piense en los interruptores domésticos inteligentes. Todos realizan una función similar y es seguro asumir que deberían tener el mismo modelo de datos, GPIO, código de firmware, etc. Si necesitara introducir cambios en todos estos dispositivos, en lugar de editar cada uno de ellos, simplemente podría editar se actualizará una plantilla de dispositivo y todos los dispositivos.

Active su primer dispositivo

‍ Ahora que ha creado una o más plantillas de dispositivos, puede comenzar a poner sus dispositivos en línea.

Para comenzar a usar Blynk.Cloud, debe asignar un AuthToken único a cada dispositivo. El objetivo de AuthToken es identificar el dispositivo en Blynk Cloud. Hay algunas formas de obtener tokens de autenticación para su dispositivo y pueden variar según el hardware, la conectividad y el caso de uso de IoT en el que esté trabajando.

Estas son las dos formas principales de poner AuthTokens en sus dispositivos:

A. Aprovisionamiento de WiFi mediante Blynk.Edgent

‍ Para los dispositivos que pueden conectarse a Internet a través de WIFI, recomendamos utilizar el método de aprovisionamiento WiFi integrado en la aplicación Blynk. Este método también se denomina aprovisionamiento de tokens de autenticación dinámicos.

La aplicación Blynk y Blynk.Edgent se encargarán de decirle a sus dispositivos cómo conectarse a la red WiFi de su hogar u oficina. El nuevo token de autenticación se generará y almacenará automáticamente en el dispositivo. No necesita especificar las credenciales de WiFi y el token de autenticación en el código de firmware.

Recomendamos enfáticamente utilizar el aprovisionamiento WiFi si está trabajando en un producto WiFi comercial. Beneficios del método de aprovisionamiento WiFi para aplicaciones comerciales:

  • No puede predecir a qué red WiFi sus clientes conectarán sus productos.
  • Simplifica el proceso de fabricación a escala, ya que puede usar un código de firmware similar sin necesidad de agregar manualmente el token de autenticación a cada dispositivo al final de la línea de fabricación.
B. Activación del dispositivo con un token de autenticación estático (para Ethernet, celular y otros tipos de conexión)

‍ Este método se recomienda para dispositivos que pueden conectarse a Internet mediante Ethernet, celular (2G, 3G, 4G, LTE) u otros tipos de conexión (que no requieren credenciales WiFi personalizadas, por ejemplo).

La principal diferencia con el aprovisionamiento de WiFi es que AuthToken debe generarse manualmente y actualizarse en el dispositivo antes de que pueda usarse.

El token de autenticación estático se usa a menudo durante la etapa de creación de prototipos. Sin embargo, Blynk también ofrece una solución completa para trabajar con tokens estáticos en las aplicaciones comerciales.

Enviar datos del dispositivo a Blynk

‍ Para enviar mensajes desde la aplicación al código que se ejecuta en su placa (a través del servidor Blynk), utilizará pines virtuales.

  • Los pines virtuales son independientes del hardware. Esto significa que es mucho más fácil transferir su código de una plataforma de hardware a otra en el futuro (por ejemplo, puede darse cuenta de que NodeMCU es mejor que Arduino Uno + ESP-01 con el que comenzó).
  • Tienes mucho más control sobre lo que hace tu widget cuando usas pines virtuales. Por ejemplo, si desea que un solo botón de aplicación active o desactive varios relés al mismo tiempo, es muy fácil hacerlo con pines virtuales.
  • Los pines virtuales son más predecibles (estables si lo desea) que manipular pines digitales.
Configurar notificaciones para un solo dispositivo o para una selección de dispositivos

‍ Nota : las notificaciones funcionan además de Eventos . Antes de continuar, asegúrese de que su producto tenga al menos un evento configurado en sus notificaciones de configuración de plantilla para una selección de dispositivos

  1. Abrir búsqueda
  2. Ir a Dispositivos
  3. Seleccione varios dispositivos
  4. Pase el cursor sobre el menú Acciones […]
  5. Haga clic en Configuración de notificaciones

En el cajón abierto, seleccione los eventos deseados para editar

  1. Haga clic en Editar configuración

‍En la ventana modal, active los canales deseados (Correo electrónico, Push o SMS), seleccione los destinatarios . Si el destinatario no está en la lista, puede buscar escribiendo el nombre o la dirección de correo electrónico.

Tenga en cuenta que está la entrada «Todos los miembros». Significa que todos los usuarios de la organización a la que pertenece el dispositivo serán los destinatarios de una notificación.

EJEMPLO  CON WEMOS

1. Instale la última versión del IDE de Arduino http://www.arduino.cc

2. Siga los pasos en el sitio Wemos para configurar el IDE de Arduino para apoyar la placa Wemos  http:? Id = //www.wemos.cc/wiki/doku.php en: arduino_g …

3. Descargue los ejemplos de  Wemos D1 desde https: //github.com/wemos/D1_mini_Examples/archive / …

4. Descomprima el archivo descargado  de https://github.com/wemos/D1_mini_Examples/archive/master.zip
5. Copie todos los archivos en el directorio de ejemplos de Arduino: (normalmente C: \ Archivos de programa (x86) \ Arduino \ ejemplos)
6. IDE Arduino abierto, seleccione Archivo – ejemplos – Mini ejemplos D1 – Bases – abrir y cerrar
7. En Herramientas, seleccione su tablero Wemos y el puerto COM correcto (éste es el puerto USB que está utilizando, por lo general sólo una opción estará disponible)
8. Suba su boceto. Si  su tarjeta está parpadeando, lo hizo bien, si no, se ha perdido uno de los pasos anteriores.

Creación de su  aplicación con Blynk

Para hacer  nuestra aplicación vamos a utilizar Blynk. Blynk es una sencilla herramienta que te permite crear aplicaciones en su teléfono y compartir esas aplicaciones con otras personas. Es un sistema de arrastrar y soltar lo que no requiere lenguaje de programación y toma el control directo de los pines del Arduino . Comenzó como un pedal de arranque en 2015, pero creció rápidamente para ser una herramienta profesional y de gran utilidad. la mejor parte: la aplicación se creará en sólo un minuto y estará totalmente adaptable! (Únase a los foros Blynk si necesita ayuda o quiere contribuir).

1. Descargue la última biblioteca de Blynk http://www.blynk.cc/getting-started/,descomprimir y copiarlo en el directorio de la biblioteca Arduino (normalmente: C: \ Archivos de programa (x86) \ Arduino \ bibliotecas).

2. Descargue la aplicación Blynk para Android o Iphone  y hacer su primera aplicación. Vaya a la configuración y elija Esp8266.

3. En «configuración» en la aplicación que se encuentra «token de autenticación» por email a si mismo, que lo necesitará más adelante .

4. Abra el IDE Arduino.
5. Bajo el item  ejemplos, elija Blynk, «independiente esp8266»

6. En el boceto, agregue el token de autenticación de la etapa 3, donde dice token de autenticación. SSID es el  nombre de la conexión Wi-Fi y la contraseña es la contraseña de su red wifi. Llene estos tres en el croquis en sus respectivos lugares . No hay necesidad de seguir elaborando el boceto. Sólo con este código tendrá un control total sobre todos los pasadores de su tarjeta a través de la app.

Creating Your Android / Iphone App With Blynk

Prueba de su aplicación Blynk!

1. Añadir un LED a GND y el pin 13 en su tablero Wemos (Quiero mencionar que la forma correcta de hacer esto, es con una resistencia entre el pin 13 y el LED. Su LED no va a vivir una vida muy larga y sin)
2. En la aplicación en su teléfono o tableta, agregue un control deslizante conectado al pin gpO14.(Nótese que las patas de la placa no son los mismos que los pasadores en la aplicación. Para una descripción completa, consulte el diagrama anterior, Observe también que pines I / O en Wemos tableros son de 3,3 voltios, no de 5 voltios al igual que en la Arduino UNO. no enviar 5 voltios a través de ellos!)
3. En el IDE de Arduino pulsar  el botón de reproducción en la esquina superior derecha de la aplicación Blynk. FELICITACIONES !!!!

Acabamos de realizar  un proyecto de electrónica TOTALMENTE CONTROLADO INTELIGENTE !!!!, para ello mueva el control deslizante hacia la derecha para hacer que el led ir más brillante, a la izquierda del atenuador de luminosidad.

TEST Your Blynk App!

Algunas observaciones importantes

– Como se mencionado antes en el paso 4 los pines de la placa no coinciden con la aplicación, consulte el sitio Wemos para la disposición de las clavijas de la placa específica. Es probable que en un futuro próximo Blynk añadirá soporte Wemos por supuesto, a continuación, seleccione su tablero de aplicación y los pasadores coincidirán.

– 3,3 v es todo el i / o pasadores de apoyo Wemos. Va a romper su tablero si envía más a través de él. Un circuito divisor de resistencia o tensión simple puede ayudar si usted fuera a ser pegado con 5v entrada que necesita convertir.

– Los Wemos sólo tiene un pin analógico. Si necesita mucho más, necesitara usar otra placa como puede ser el ESP32

Fuente aqui

Programación OTA en ESP32


Una de las mejores cosas de ESP32 es que su firmware se puede actualizar de forma inalámbrica. Este tipo de programación se llama «Over-The-Air» (OTA) permitiendo actualizar/cargar un nuevo programa al ESP32 a través de Wi-Fi sin tener que conectar el ESP32 a un ordenador a través de USB.

La funcionalidad OTA es útil cuando no hay acceso físico al módulo ESP pero además, reduce el tiempo necesario para actualizar cada módulo ESP durante el mantenimiento.

Una ventaja clave de OTA es que una única ubicación central puede enviar una actualización a varios ESP en la misma red.

La única desventaja es que debe incluir un código OTA con cada boceto que cargue para poder usar OTA en la próxima actualización.

Hay dos formas de implementar la funcionalidad OTA en el ESP32:

  • OTA básico : las actualizaciones se envían mediante el IDE de Arduino.
  • Web Updater OTA : las actualizaciones se entregan a través de un navegador web.

Cada uno tiene sus propios beneficios, por lo que puede usar el que funcione mejor para su proyecto.

OTA Básico

En este primer apartado veremos el proceso de implementación de OTA básico.  En resumen son 3 pasos simples para usar OTA básico con el ESP32

  1. Instalación de la serie Python 2.7.x: el primer paso es instalar la serie Python 2.7.x en su computadora.
  2. Carga de firmware OTA básico en serie: cargue el boceto que contiene el firmware OTA en serie. Este es un paso necesario para realizar las actualizaciones posteriores de forma inalámbrica.
  3. Carga de nuevos bocetos por aire: ahora puede cargar nuevos bocetos al ESP32 desde Arduino IDE por aire.

1: Instalación de Python 2.7.x

Para usar la funcionalidad OTA, primero debe instalar Python 2.7.x, si aún no está instalado en su máquina. Descargue Python 2.7.x para Windows (instalador MSI) desde el sitio web oficial de Python .

Inicie el instalador y continúe con el asistente de instalación

Asegúrese de que la opción «Agregar python.exe a la ruta» esté habilitada en la sección Personalizar Python 2.7.X.

2: Carga del firmware OTA básico en serie

Debido a que la imagen de fábrica del ESP32 carece de la capacidad de actualización OTA, primero debe cargar el firmware OTA en el ESP32 a través de la interfaz serial.

Es necesario actualizar primero el firmware para poder realizar actualizaciones inalámbricas posteriores.

El complemento ESP32 para Arduino IDE incluye una biblioteca OTA, así como un ejemplo de BasicOTA. Simplemente navegue a Archivo > Ejemplos > ArduinoOTA > BasicOTA .

Antes de comenzar a cargar el boceto, debe modificar las siguientes dos variables con sus credenciales de red para que el ESP32 pueda conectarse a una red existente.

const char* ssid = "..........";
const char* password = "..........";

Cuando haya terminado, siga adelante y cargue el boceto.

#include <WiFi.h>
#include <ESPmDNS.h>
#include <WiFiUdp.h>
#include <ArduinoOTA.h>

const char* ssid = "..........";
const char* password = "..........";

void setup() {
  Serial.begin(115200);
  Serial.println("Booting");
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  while (WiFi.waitForConnectResult() != WL_CONNECTED) {
    Serial.println("Connection Failed! Rebooting...");
    delay(5000);
    ESP.restart();
  }

  // Port defaults to 3232
  // ArduinoOTA.setPort(3232);

  // Hostname defaults to esp3232-[MAC]
  // ArduinoOTA.setHostname("myesp32");

  // No authentication by default
  // ArduinoOTA.setPassword("admin");

  // Password can be set with it's md5 value as well
  // MD5(admin) = 21232f297a57a5a743894a0e4a801fc3
  // ArduinoOTA.setPasswordHash("21232f297a57a5a743894a0e4a801fc3");

  ArduinoOTA
    .onStart([]() {
      String type;
      if (ArduinoOTA.getCommand() == U_FLASH)
        type = "sketch";
      else // U_SPIFFS
        type = "filesystem";

      // NOTE: if updating SPIFFS this would be the place to unmount SPIFFS using SPIFFS.end()
      Serial.println("Start updating " + type);
    })
    .onEnd([]() {
      Serial.println("\nEnd");
    })
    .onProgress([](unsigned int progress, unsigned int total) {
      Serial.printf("Progress: %u%%\r", (progress / (total / 100)));
    })
    .onError([](ota_error_t error) {
      Serial.printf("Error[%u]: ", error);
      if (error == OTA_AUTH_ERROR) Serial.println("Auth Failed");
      else if (error == OTA_BEGIN_ERROR) Serial.println("Begin Failed");
      else if (error == OTA_CONNECT_ERROR) Serial.println("Connect Failed");
      else if (error == OTA_RECEIVE_ERROR) Serial.println("Receive Failed");
      else if (error == OTA_END_ERROR) Serial.println("End Failed");
    });

  ArduinoOTA.begin();

  Serial.println("Ready");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
}

void loop() {
  ArduinoOTA.handle();
}

Ahora, abra el Serial Monitor a 115200 baudios y presione el botón EN en el ESP32. Si todo está bien, debería ver la dirección IP dinámica asignada por su enrutador. Tome nota de ello.

Paso 3: Carga del nuevo boceto por aire

Ahora, subamos un nuevo boceto por aire. Recuerde que debes incluir el código OTA en cada sketch que subas. De lo contrario, perderá la capacidad OTA y no podrá realizar la próxima carga inalámbrica. Por lo tanto, se recomienda que modifique el código anterior para incluir su nuevo código.

Como ejemplo, incluiremos un boceto Blink simple en el código OTA básico. Recuerda modificar las variables SSID y contraseña con sus credenciales de red.

Los cambios en el programa Basic OTA están resaltados con comentarios //******.

#include <WiFi.h>
#include <ESPmDNS.h>
#include <WiFiUdp.h>
#include <ArduinoOTA.h>

const char* ssid = "..........";
const char* password = "..........";


//******codigo programa*******
//variabls for blinking an LED with Millis
const int led = 2; // ESP32 Pin to which onboard LED is connected
unsigned long previousMillis = 0;  // will store last time LED was updated
const long interval = 1000;  // interval at which to blink (milliseconds)
int ledState = LOW;  // ledState used to set the LED

//******fin codigo programa*******

void setup() {

//******codigo programa*******
pinMode(led, OUTPUT);
//******fin codigo programa*******
  
  Serial.begin(115200);
  Serial.println("Booting");
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  while (WiFi.waitForConnectResult() != WL_CONNECTED) {
    Serial.println("Connection Failed! Rebooting...");
    delay(5000);
    ESP.restart();
  }

  // Port defaults to 3232
  // ArduinoOTA.setPort(3232);

  // Hostname defaults to esp3232-[MAC]
  // ArduinoOTA.setHostname("myesp32");

  // No authentication by default
  // ArduinoOTA.setPassword("admin");

  // Password can be set with it's md5 value as well
  // MD5(admin) = 21232f297a57a5a743894a0e4a801fc3
  // ArduinoOTA.setPasswordHash("21232f297a57a5a743894a0e4a801fc3");

  ArduinoOTA
    .onStart([]() {
      String type;
      if (ArduinoOTA.getCommand() == U_FLASH)
        type = "sketch";
      else // U_SPIFFS
        type = "filesystem";

      // NOTE: if updating SPIFFS this would be the place to unmount SPIFFS using SPIFFS.end()
      Serial.println("Start updating " + type);
    })
    .onEnd([]() {
      Serial.println("\nEnd");
    })
    .onProgress([](unsigned int progress, unsigned int total) {
      Serial.printf("Progress: %u%%\r", (progress / (total / 100)));
    })
    .onError([](ota_error_t error) {
      Serial.printf("Error[%u]: ", error);
      if (error == OTA_AUTH_ERROR) Serial.println("Auth Failed");
      else if (error == OTA_BEGIN_ERROR) Serial.println("Begin Failed");
      else if (error == OTA_CONNECT_ERROR) Serial.println("Connect Failed");
      else if (error == OTA_RECEIVE_ERROR) Serial.println("Receive Failed");
      else if (error == OTA_END_ERROR) Serial.println("End Failed");
    });

  ArduinoOTA.begin();

  Serial.println("Ready");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
}

void loop() {
  ArduinoOTA.handle();  

//******codigo programa*******
//loop to blink without delay
  unsigned long currentMillis = millis();
  if (currentMillis - previousMillis >= interval) {
  // save the last time you blinked the LED
  previousMillis = currentMillis;
  // if the LED is off turn it on and vice-versa:
  ledState = not(ledState);
  // set the LED with the ledState of the variable:
  digitalWrite(led,  ledState);
 //******fin codigo programa*******
  }

}

Tenga en cuenta que no hemos utilizado la delay()función para hacer que el LED parpadee. Esto se debe a que la delay()función pausa el programa. Si se genera la siguiente solicitud OTA mientras el ESP32 está en pausa esperando a delay()que se complete, su programa perderá esa solicitud.

Después de copiar el boceto anterior en su IDE de Arduino, navegue hasta la opción Herramientas > Puerto . Busque algo como: esp32-xxxxxx en your_esp_ip_address . Si no puede localizarlo, es posible que deba reiniciar su IDE.

Elija el puerto y presione el botón Cargar. El nuevo boceto se cargará en cuestión de segundos. El LED integrado debería comenzar a parpadear.

Actualizador OTA via web

La programación OTA es útil cuando necesita actualizar el código de las placas ESP32 a las que no se puede acceder fácilmente. El ejemplo que mostraremos aquí funciona cuando el ESP32 y su navegador están en su red local.

La única desventaja de OTA Web Updater es que debe agregar el código para OTA en cada boceto que cargue, para que pueda usar OTA en el futuro.

¿Cómo funciona el Actualizador web OTA?

  • El primer boceto debe cargarse a través del puerto serie. Este boceto debe contener el código para crear el actualizador web OTA, de modo que pueda cargar el código más tarde con su navegador.
  • El boceto de OTA Web Updater crea un servidor web al que puede acceder para cargar un nuevo boceto a través del navegador web.
  • Luego, debe implementar rutinas OTA en cada boceto que cargue, de modo que pueda realizar las próximas actualizaciones/cargas por aire.
  • Si carga un código sin una rutina OTA, ya no podrá acceder al servidor web y cargar un nuevo boceto por aire.

Antes de continuar , debe tener instalado el complemento ESP32 en su IDE de Arduino. Veamos los pasos a seguir

1-Carga de OTAWebUpdater

Cuando instala el complemento ESP32 para Arduino IDE, instalará automáticamente la biblioteca ArduinoOTA. Vaya a Archivo > Ejemplos > ArduinoOTA > OTAWebUpdater .

otawebupdater-arduino-ide

Debería cargarse el siguiente código.

/*
 * OTAWebUpdater.ino Example from ArduinoOTA Library
 * Rui Santos 
 * Complete Project Details https://randomnerdtutorials.com
 */

#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <ESPmDNS.h>
#include <Update.h>

const char* host = "esp32";
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

WebServer server(80);

/*
 * Login page
 */
const char* loginIndex = 
 "<form name='loginForm'>"
    "<table width='20%' bgcolor='A09F9F' align='center'>"
        "<tr>"
            "<td colspan=2>"
                "<center><font size=4><b>ESP32 Login Page</b></font></center>"
                "<br>"
            "</td>"
            "<br>"
            "<br>"
        "</tr>"
        "<td>Username:</td>"
        "<td><input type='text' size=25 name='userid'><br></td>"
        "</tr>"
        "<br>"
        "<br>"
        "<tr>"
            "<td>Password:</td>"
            "<td><input type='Password' size=25 name='pwd'><br></td>"
            "<br>"
            "<br>"
        "</tr>"
        "<tr>"
            "<td><input type='submit' onclick='check(this.form)' value='Login'></td>"
        "</tr>"
    "</table>"
"</form>"
"<script>"
    "function check(form)"
    "{"
    "if(form.userid.value=='admin' && form.pwd.value=='admin')"
    "{"
    "window.open('/serverIndex')"
    "}"
    "else"
    "{"
    " alert('Error Password or Username')/*displays error message*/"
    "}"
    "}"
"</script>";
 
/*
 * Server Index Page
 */
 
const char* serverIndex = 
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
"<form method='POST' action='#' enctype='multipart/form-data' id='upload_form'>"
   "<input type='file' name='update'>"
        "<input type='submit' value='Update'>"
    "</form>"
 "<div id='prg'>progress: 0%</div>"
 "<script>"
  "$('form').submit(function(e){"
  "e.preventDefault();"
  "var form = $('#upload_form')[0];"
  "var data = new FormData(form);"
  " $.ajax({"
  "url: '/update',"
  "type: 'POST',"
  "data: data,"
  "contentType: false,"
  "processData:false,"
  "xhr: function() {"
  "var xhr = new window.XMLHttpRequest();"
  "xhr.upload.addEventListener('progress', function(evt) {"
  "if (evt.lengthComputable) {"
  "var per = evt.loaded / evt.total;"
  "$('#prg').html('progress: ' + Math.round(per*100) + '%');"
  "}"
  "}, false);"
  "return xhr;"
  "},"
  "success:function(d, s) {"
  "console.log('success!')" 
 "},"
 "error: function (a, b, c) {"
 "}"
 "});"
 "});"
 "</script>";

/*
 * setup function
 */
void setup(void) {
  Serial.begin(115200);

  // Connect to WiFi network
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  /*use mdns for host name resolution*/
  if (!MDNS.begin(host)) { //http://esp32.local
    Serial.println("Error setting up MDNS responder!");
    while (1) {
      delay(1000);
    }
  }
  Serial.println("mDNS responder started");
  /*return index page which is stored in serverIndex */
  server.on("/", HTTP_GET, []() {
    server.sendHeader("Connection", "close");
    server.send(200, "text/html", loginIndex);
  });
  server.on("/serverIndex", HTTP_GET, []() {
    server.sendHeader("Connection", "close");
    server.send(200, "text/html", serverIndex);
  });
  /*handling uploading firmware file */
  server.on("/update", HTTP_POST, []() {
    server.sendHeader("Connection", "close");
    server.send(200, "text/plain", (Update.hasError()) ? "FAIL" : "OK");
    ESP.restart();
  }, []() {
    HTTPUpload& upload = server.upload();
    if (upload.status == UPLOAD_FILE_START) {
      Serial.printf("Update: %s\n", upload.filename.c_str());
      if (!Update.begin(UPDATE_SIZE_UNKNOWN)) { //start with max available size
        Update.printError(Serial);
      }
    } else if (upload.status == UPLOAD_FILE_WRITE) {
      /* flashing firmware to ESP*/
      if (Update.write(upload.buf, upload.currentSize) != upload.currentSize) {
        Update.printError(Serial);
      }
    } else if (upload.status == UPLOAD_FILE_END) {
      if (Update.end(true)) { //true to set the size to the current progress
        Serial.printf("Update Success: %u\nRebooting...\n", upload.totalSize);
      } else {
        Update.printError(Serial);
      }
    }
  });
  server.begin();
}

void loop(void) {
  server.handleClient();
  delay(1);
}

Debe cambiar las siguientes líneas en el código para incluir sus propias credenciales de red:

const char* ssid = "";
const char* contraseña = "";

El ejemplo de OTAWebUpdater para ESP32 crea un servidor web asíncrono donde puede cargar código nuevo en su placa sin necesidad de una conexión en serie.Suba el código anterior a tu placa ESP32. No olvide ingresar sus credenciales de red y seleccionar la placa y el puerto serial correctos.

Después de cargar el código, abra el monitor serie a una velocidad de transmisión de 115200, presione el botón de activación de ESP32 y obtendrá la dirección IP de ESP32:

Ahora, puede cargar el código a su ESP32 por aire usando un navegador en su red local.

Para probar el Actualizador web OTA, puede desconectar el ESP32 de su computadora y encenderlo con un banco de energía, por ejemplo (esto es opcional, lo sugerimos para imitar una situación en la que el ESP32 no está conectado a su computadora).

2-Actualización del nuevo código usando el actualizador web OTA

Abra un navegador en su red e ingrese la dirección IP ESP32. Deberías obtener lo siguiente:

otawebupdater-usuario-contraseña

Introduzca el nombre de usuario y la contraseña:

  • Nombre de usuario : admin
  • contraseña : admin

Puede cambiar el nombre de usuario y la contraseña en el código.

Nota:  Después de ingresar el nombre de usuario y la contraseña, será redirigido a la URL /serverIndex . No necesita ingresar el nombre de usuario y la contraseña para acceder a la URL /serverIndex . Por lo tanto, si alguien conoce la URL para cargar el nuevo código, el nombre de usuario y la contraseña no protegen la página web para que otros no puedan acceder a ella.

Debería abrirse una nueva pestaña en la URL /serverIndex . Esta página le permite cargar un nuevo código a su ESP32. Debería cargar archivos .bin (veremos cómo hacerlo en un momento).

ota-web-updater-esp32

3-Preparación del nuevo sketch

Al cargar un nuevo boceto por aire, debe tener en cuenta que debe agregar código para OTA en su nuevo boceto, de modo que siempre pueda sobrescribir cualquier boceto con uno nuevo en el futuro. Por lo tanto, le recomendamos que modifique el boceto de OTAWebUpdater para incluir su propio código.

Con fines de aprendizaje, subamos un nuevo código que parpadee un LED (sin demora). Copie el siguiente código en su IDE de Arduino.

/*
 * Rui Santos 
 * Complete Project Details https://randomnerdtutorials.com
 */

#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <ESPmDNS.h>
#include <Update.h>

const char* host = "esp32";
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

//variabls to blink without delay:
const int led = 2;
unsigned long previousMillis = 0;        // will store last time LED was updated
const long interval = 1000;           // interval at which to blink (milliseconds)
int ledState = LOW;             // ledState used to set the LED

WebServer server(80);

/*
 * Login page
 */

const char* loginIndex = 
 "<form name='loginForm'>"
    "<table width='20%' bgcolor='A09F9F' align='center'>"
        "<tr>"
            "<td colspan=2>"
                "<center><font size=4><b>ESP32 Login Page</b></font></center>"
                "<br>"
            "</td>"
            "<br>"
            "<br>"
        "</tr>"
        "<td>Username:</td>"
        "<td><input type='text' size=25 name='userid'><br></td>"
        "</tr>"
        "<br>"
        "<br>"
        "<tr>"
            "<td>Password:</td>"
            "<td><input type='Password' size=25 name='pwd'><br></td>"
            "<br>"
            "<br>"
        "</tr>"
        "<tr>"
            "<td><input type='submit' onclick='check(this.form)' value='Login'></td>"
        "</tr>"
    "</table>"
"</form>"
"<script>"
    "function check(form)"
    "{"
    "if(form.userid.value=='admin' && form.pwd.value=='admin')"
    "{"
    "window.open('/serverIndex')"
    "}"
    "else"
    "{"
    " alert('Error Password or Username')/*displays error message*/"
    "}"
    "}"
"</script>";
 
/*
 * Server Index Page
 */
 
const char* serverIndex = 
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
"<form method='POST' action='#' enctype='multipart/form-data' id='upload_form'>"
   "<input type='file' name='update'>"
        "<input type='submit' value='Update'>"
    "</form>"
 "<div id='prg'>progress: 0%</div>"
 "<script>"
  "$('form').submit(function(e){"
  "e.preventDefault();"
  "var form = $('#upload_form')[0];"
  "var data = new FormData(form);"
  " $.ajax({"
  "url: '/update',"
  "type: 'POST',"
  "data: data,"
  "contentType: false,"
  "processData:false,"
  "xhr: function() {"
  "var xhr = new window.XMLHttpRequest();"
  "xhr.upload.addEventListener('progress', function(evt) {"
  "if (evt.lengthComputable) {"
  "var per = evt.loaded / evt.total;"
  "$('#prg').html('progress: ' + Math.round(per*100) + '%');"
  "}"
  "}, false);"
  "return xhr;"
  "},"
  "success:function(d, s) {"
  "console.log('success!')" 
 "},"
 "error: function (a, b, c) {"
 "}"
 "});"
 "});"
 "</script>";

/*
 * setup function
 */
void setup(void) {
  pinMode(led, OUTPUT);
  
  Serial.begin(115200);

  // Connect to WiFi network
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  /*use mdns for host name resolution*/
  if (!MDNS.begin(host)) { //http://esp32.local
    Serial.println("Error setting up MDNS responder!");
    while (1) {
      delay(1000);
    }
  }
  Serial.println("mDNS responder started");
  /*return index page which is stored in serverIndex */
  server.on("/", HTTP_GET, []() {
    server.sendHeader("Connection", "close");
    server.send(200, "text/html", loginIndex);
  });
  server.on("/serverIndex", HTTP_GET, []() {
    server.sendHeader("Connection", "close");
    server.send(200, "text/html", serverIndex);
  });
  /*handling uploading firmware file */
  server.on("/update", HTTP_POST, []() {
    server.sendHeader("Connection", "close");
    server.send(200, "text/plain", (Update.hasError()) ? "FAIL" : "OK");
    ESP.restart();
  }, []() {
    HTTPUpload& upload = server.upload();
    if (upload.status == UPLOAD_FILE_START) {
      Serial.printf("Update: %s\n", upload.filename.c_str());
      if (!Update.begin(UPDATE_SIZE_UNKNOWN)) { //start with max available size
        Update.printError(Serial);
      }
    } else if (upload.status == UPLOAD_FILE_WRITE) {
      /* flashing firmware to ESP*/
      if (Update.write(upload.buf, upload.currentSize) != upload.currentSize) {
        Update.printError(Serial);
      }
    } else if (upload.status == UPLOAD_FILE_END) {
      if (Update.end(true)) { //true to set the size to the current progress
        Serial.printf("Update Success: %u\nRebooting...\n", upload.totalSize);
      } else {
        Update.printError(Serial);
      }
    }
  });
  server.begin();
}

void loop(void) {
  server.handleClient();
  delay(1);

  //loop to blink without delay
  unsigned long currentMillis = millis();

  if (currentMillis - previousMillis >= interval) {
    // save the last time you blinked the LED
    previousMillis = currentMillis;

    // if the LED is off turn it on and vice-versa:
    ledState = not(ledState);

    // set the LED with the ledState of the variable:
    digitalWrite(led, ledState);
  }
}

Como puede ver, hemos agregado el código «parpadeo sin demora» al código OTAWebUpdater, para que podamos realizar actualizaciones más adelante.

Después de copiar el código en su IDE de Arduino, debe generar un archivo .bin .

4-Generación del archivo .bin en Arduino IDE

Guarde su boceto como LED_Web_Updater .

Para generar un archivo .bin a partir de su boceto, vaya a Boceto > Exportar binario compilado

exportar-archivo-bin-arduino-ide

Se debe crear un nuevo archivo en el boceto de la carpeta. Vaya a Bosquejo > Mostrar carpeta de bosquejo . Debe tener dos archivos en su carpeta Sketch: el archivo .ino y el archivo .bin . Debe cargar el archivo .bin mediante el actualizador web de OTA.

5-Carga del nuevo sketch por aire al ESP32

En su navegador, en la página ESP32 OTA Web Updater, haga clic en el botón Elegir archivo . Seleccione el archivo .bin generado anteriormente y luego haga clic en Actualizar .

Después de unos segundos, el código debería cargarse correctamente.

El LED incorporado ESP32 debe estar parpadeando.¡Felicidades! Ha subido un nuevo código a tu ESP32 por aire.

Las actualizaciones inalámbricas hemos visto que son útiles para cargar un nuevo código en su placa ESP32 cuando no es fácilmente accesible. En este segundo caso hemos visto el código OTA Web Updater como crea un servidor web al que puede acceder para cargar un nuevo código en su placa ESP32 utilizando un navegador web en su red local.

Fuentes

https://lastminuteengineers.com/esp32-ota-updates-arduino-ide/

ESP32 Over-the-air (OTA) Programming – Web Updater Arduino IDE