﻿{"id":1424,"date":"2020-03-02T18:29:07","date_gmt":"2020-03-02T18:29:07","guid":{"rendered":"http:\/\/robots-argentina.com.ar\/didactica\/?p=1424"},"modified":"2020-11-02T00:54:56","modified_gmt":"2020-11-02T00:54:56","slug":"servidor-web-basico-nodemcu-con-ide-de-arduino","status":"publish","type":"post","link":"https:\/\/robots-argentina.com.ar\/didactica\/servidor-web-basico-nodemcu-con-ide-de-arduino\/","title":{"rendered":"Servidor web b\u00e1sico NodeMCU con IDE de Arduino"},"content":{"rendered":"<h2>Dise\u00f1amos aqu\u00ed un servidor HTTP b\u00e1sico con una placa NodeMCU con ESP8266 y el IDE de Arduino\u00a0<\/h2>\n<p><a href=\"http:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/NodeMcu-ESP8266-esp-12e.png\"><img loading=\"lazy\" src=\"http:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/NodeMcu-ESP8266-esp-12e.png\" alt=\"\" width=\"583\" height=\"470\" class=\"aligncenter size-full wp-image-1441\" srcset=\"https:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/NodeMcu-ESP8266-esp-12e.png 583w, https:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/NodeMcu-ESP8266-esp-12e-300x242.png 300w\" sizes=\"(max-width: 583px) 100vw, 583px\" \/><\/a><br \/>\nPara m\u00e1s referencia de c\u00f3mo agregar la familia de plaquetas y las bibliotecas necesarias para la familia ESP, les ofrezco leer el reciente art\u00edculo <strong><a href=\"http:\/\/robots-argentina.com.ar\/didactica\/esp8266-hacer-que-parpadee-un-led-desde-el-ide-de-arduino\/\" rel=\"noopener\" target=\"_blank\">ESP8266 (WiFi): Hacer que parpadee un LED desde el IDE de Arduino<\/a><\/strong> (m\u00e1s b\u00e1sico que este) donde se desarrollada con mucho detalle tanto que es un ESP8266 como esta instalaci\u00f3n.<\/p>\n<p>Es posible que la comunidad ESP no tenga mucho entusiasmo en programar con Arduino, y s\u00ed hacerlo con las herramientas propias de la l\u00ednea del ESP8266. Y es totalmente l\u00f3gico y razonable. Pero a\u00a0veces es un alivio disponer de la facilidad del uso del IDE de Arduino y su lenguaje simplificado, m\u00e1s cuando uno est\u00e1 acostumbrado a estas herramientas.<\/p>\n<p>Por eso se ha escrito una biblioteca (o librer\u00eda) y definici\u00f3n de placas, para programar esta vers\u00e1til y potente l\u00ednea con el IDE de Arduino.<\/p>\n<p>Usaremos una placa NodeMCU, que contiene un m\u00f3dulo ESP12E, versi\u00f3n 1.0,\u00a0un cable USB adecuado para esta placa y\u00a0una computadora conectada a Internet.\u00a0El ESP8266, el chip b\u00e1sico del sistema, requiere una red WiFi, as\u00ed que suponemos que ese tipo de conexi\u00f3n estar\u00e1 disponible.<\/p>\n<h3>Definici\u00f3n de dispositivos y librer\u00eda<\/h3>\n<p>Necesitamos disponer del IDE de Arduino, una versi\u00f3n actualizada. La \u00faltima que ofrece oficialmente http:\/\/arduino.cc es la 1.8.8. Si usted est\u00e1 trabajando con una de versi\u00f3n anterior a 1.8.x le recomiendo actualizar.<\/p>\n<p>Copio aqu\u00ed la explicaci\u00f3n del art\u00edculo anterior. Si ya instal\u00f3 en esa ocasi\u00f3n, no tiene que hacer todo esto y puede saltar a la secci\u00f3n <strong>Dise\u00f1o del servido http b\u00e1sico<\/strong>, m\u00e1s abajo.<\/p>\n<hr \/>\n<p>El ESP8266 se puede programar desde el IDE de Arduino. Para eso hay que instalar lo que se llama un <em>plugin<\/em>, en el que est\u00e1 incluido todo lo necesario para compilar y subir programas que fueron escritos tal como si fuesen <strong>.INO<\/strong> de Arduino.<\/p>\n<p>Debemos incorporar librer\u00edas y los programas de manejo de las placas con el chip ESP8266 a nuestro IDE. Para hacerlo, debemos indicarle la <strong>URL<\/strong> desde donde se obtienen. <\/p>\n<p>Para hacerlo, debemos abrir el men\u00fa <strong>Archivo<\/strong>, y luego <strong>Preferencias<\/strong>.<\/p>\n<p>Veremos este panel, en la parte inferior el recuadro de texto rotulado <strong>Gestor de URLs Adicionales de Tarjetas<\/strong>. Dentro de \u00e9l, usando copiar y pegar, se debe introducir el texto indicado aqu\u00ed:<\/p>\n<p><strong>http:\/\/arduino.esp8266.com\/stable\/package_esp8266com_index.json<\/strong><\/p>\n<p>(copie y pegue en el recuadro):<\/p>\n<p><a href=\"http:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/2019-01-01_21-44-56.png\"><img loading=\"lazy\" src=\"http:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/2019-01-01_21-44-56.png\" alt=\"\" width=\"629\" height=\"619\" class=\"aligncenter size-full wp-image-940\" srcset=\"https:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/2019-01-01_21-44-56.png 629w, https:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/2019-01-01_21-44-56-300x295.png 300w, https:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/2019-01-01_21-44-56-624x614.png 624w\" sizes=\"(max-width: 629px) 100vw, 629px\" \/><\/a><\/p>\n<p>Luego pulse en el bot\u00f3n <strong>Ok<\/strong>.<\/p>\n<p>Ahora debemos ir al men\u00fa <strong>Herramientas<\/strong>, luego <strong>Placa<\/strong>.<\/p>\n<p><a href=\"http:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/Herramentas-y-Placa.png\"><img loading=\"lazy\" src=\"http:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/Herramentas-y-Placa.png\" alt=\"\" width=\"581\" height=\"621\" class=\"aligncenter size-full wp-image-943\" srcset=\"https:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/Herramentas-y-Placa.png 581w, https:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/Herramentas-y-Placa-281x300.png 281w\" sizes=\"(max-width: 581px) 100vw, 581px\" \/><\/a><\/p>\n<p>Y finalmente <strong>Gestor de Tarjetas<\/strong>, se abrir\u00e1 una ventana como la que sigue, en la cual escribimos, en el recuadro superior de filtro\/busqueda, <strong>\u201cESP8266\u201d<\/strong> (antes de terminar de escribir ya aparecer\u00e1 el Gestor de Tarjetas que buscamos, que indica que fue creado por <strong>\u201cESP8266 Community\u201d<\/strong>. All\u00ed pulsamos sobre <strong>Instalar<\/strong>:<\/p>\n<p><a href=\"http:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/INSTALAR.png\"><img loading=\"lazy\" src=\"http:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/INSTALAR.png\" alt=\"\" width=\"640\" height=\"360\" class=\"aligncenter size-full wp-image-944\" srcset=\"https:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/INSTALAR.png 640w, https:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/INSTALAR-300x169.png 300w, https:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/INSTALAR-624x351.png 624w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>Al abrir nuevamente Herramientas, y luego Placa, deslizamos la lista para ver lo que aparece al final de ella (abajo), y vemos que ya existen las opciones referidas a los ESP8266:<\/p>\n<p><a href=\"http:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/Tarjetas-ESP8266.png\"><img loading=\"lazy\" src=\"http:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/Tarjetas-ESP8266.png\" alt=\"\" width=\"579\" height=\"623\" class=\"aligncenter size-full wp-image-941\" srcset=\"https:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/Tarjetas-ESP8266.png 579w, https:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/Tarjetas-ESP8266-279x300.png 279w\" sizes=\"(max-width: 579px) 100vw, 579px\" \/><\/a><\/p>\n<p>As\u00ed queda todo preparado para programar NodeMCU ESP12E desde el IDE Arduino.<\/p>\n<hr \/>\n<p><center><br \/>\n<script type=\"text\/javascript\"><!--\ngoogle_ad_client = \"ca-pub-7090242166042605\";\n\/* femeie336x280 *\/\ngoogle_ad_slot = \"6118472803\";\ngoogle_ad_width = 336;\ngoogle_ad_height = 280;\n\/\/-->\n<\/script><br \/>\n<script type=\"text\/javascript\"\nsrc=\"\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\">\n<\/script><br \/>\n<\/center><\/p>\n<p><strong>Servidor HTTP b\u00e1sico<\/strong><\/p>\n<p>Este peque\u00f1o servidor que proponemos muestra el t\u00edtulo que elijamos en nuestro navegador. Hemos elegido escribir \u00abSaludos de Robots Argentina\u00bb, pero el texto es a elecci\u00f3n del programador.<\/p>\n<p>Declaramos la librer\u00eda <strong>ESP8266WiFi.h<\/strong> al inicio, definimos el nombre y el password de la red (la de su proveedor y la de su conexi\u00f3n; y un puerto.<\/p>\n<pre class=\"width-set:true width:600 toolbar:2 nums:false lang:arduino decode:true \" >#include &lt;ESP8266WiFi.h&gt;\r\n\r\n\/\/Nombre de red\r\nconst char* nombre = \"el_nombre_que_le_asigno_el_proveedor\";\r\n\r\n\/\/Password\r\nconst char* password = \"su_clave_para_conectarse\";\r\n\r\n\/\/ Puerto (se suele usar 80 por defecto, pero en algunos casos hay que\r\n\/\/ consultar al proveedor de internet de cual dispone en su conexion)\r\nWiFiServer server(80);\r\n<\/pre>\n<p>En la funci\u00f3n <strong>setup()<\/strong> inicializamos el puerto Serial. A trav\u00e9s de \u00e9l podremos monitorear desde la PC para saber a qu\u00e9 IP se ha conectado la placa.<\/p>\n<pre class=\"width-set:true width:600 toolbar:2 nums:false lang:arduino decode:true \" >void setup() {\r\n  Serial.begin(115200);\r\n  delay(50); \/\/ breve espera para que se concrete la conexion\r\n<\/pre>\n<p>Ahora se realiza la conexi\u00f3n a la red WiFi. Si se logra, lo indica por serie y lo veremos en el Monitor Serie del IDE.<\/p>\n<pre class=\"width-set:true width:600 toolbar:2 nums:false lang:arduino decode:true \" >\/\/ Conexion al WiFi \r\n  WiFi.begin(nombre, password);\r\n  while (WiFi.status() != WL_CONNECTED)\r\n    delay(100); \/\/aqui debemos esperar unos instantes\r\n  Serial.println(\"Conexi\u00f3n exitosa a WiFi\");\r\n<\/pre>\n<p>Puesta en operaci\u00f3n del servidor.<\/p>\n<pre class=\"width-set:true width:600 toolbar:2 nums:false lang:arduino decode:true \" >\/\/ Iniciar el servidor\r\n  server.begin();\r\n  Serial.println(\"Iniciado el servidor\");\r\n<\/pre>\n<p>Mostrar por Monitor Serie la direcci\u00f3n IP que le ha otorgado a la placa el router de la red.<\/p>\n<pre class=\"width-set:true width:600 toolbar:2 nums:false lang:arduino decode:true \" >\/\/ Escribir la direccion IP\r\n  Serial.print(\"el IP es: \");\r\n  Serial.print(WiFi.localIP());\r\n  Serial.println(\"\");\r\n}\r\n<\/pre>\n<p>En la funci\u00f3n <strong>loop()<\/strong> se comprueba si est\u00e1 establecida la nueva conexi\u00f3n. Si as\u00ed es, se env\u00eda el contenido de la p\u00e1gina web, que consta de cabeceras HTML y el contenido que deseamos para la p\u00e1gina.<\/p>\n<pre class=\"width-set:true width:600 toolbar:2 nums:false lang:arduino decode:true \" >void loop() {\r\n  \/\/ Comprobar si se ha conectado algun cliente\r\n  WiFiClient client = server.available();\r\n  \r\n  if (client) {\r\n    Serial.println(\"Nueva conexion\");\r\n   \r\n    \/\/ Escribir las cabeceras HTML\r\n    client.println(\"HTTP\/1.1 200 OK\");\r\n    client.println(\"Content-Type: text\/html\");\r\n    client.println(\"\");\r\n    client.println(\"&lt;!DOCTYPE HTML&gt;\");\r\n  \r\n    \/\/Escribir el contenido que vamos a visualizar\r\n    client.println(\"&lt;html&gt;\");\r\n    client.println(\"&lt;body&gt;\");\r\n    client.print(\"Saludos de Robots Argentina\");\r\n    client.println(\"&lt;\/body&gt;\");\r\n    client.println(\"&lt;\/html&gt;\");\r\n  }\r\n  delay(1000); \/\/ reescribe cada 1 segundo\r\n}\r\n<\/pre>\n<p><strong>Programa completo:<\/strong><\/p>\n<pre class=\"width-set:true width:600 toolbar:1 lang:arduino decode:true \" title=\"Servidor http en NodeMCU v1 ESP12E\" >#include &lt;ESP8266WiFi.h&gt;\r\n \r\n\/\/Nombre de red\r\nconst char* nombre = \"el_nombre_que_le_asigno_el_proveedor\";\r\n \r\n\/\/Password\r\nconst char* password = \"su_clave_para_conectarse\";\r\n \r\n\/\/ Puerto (se suele usar 80 por defecto, pero en algunos casos hay que\r\n\/\/ consultar al proveedor de internet de cual dispone en su conexion)\r\nWiFiServer server(80);\r\n\r\nvoid setup() {\r\n  Serial.begin(115200);\r\n  delay(50); \/\/ breve espera para que se concrete la conexion\r\n\r\n  \/\/ Conexion al WiFi \r\n  WiFi.begin(nombre, password);\r\n  while (WiFi.status() != WL_CONNECTED)\r\n    delay(100); \/\/aqui debemos esperar unos instantes\r\n  Serial.println(\"Conexi\u00f3n exitosa a WiFi\");\r\n\r\n\/\/ Iniciar el servidor\r\n  server.begin();\r\n  Serial.println(\"Iniciado el servidor\");\r\n\r\n  \/\/ Escribir la direccion IP\r\n  Serial.print(\"el IP es: \");\r\n  Serial.print(WiFi.localIP());\r\n  Serial.println(\"\");\r\n}\r\n\r\nvoid loop() {\r\n  \/\/ Comprobar si se ha conectado algun cliente\r\n  WiFiClient client = server.available();\r\n  \r\n  if (client) {\r\n    Serial.println(\"Nueva conexion\");\r\n   \r\n    \/\/ Escribir las cabeceras HTML\r\n    client.println(\"HTTP\/1.1 200 OK\");\r\n    client.println(\"Content-Type: text\/html\");\r\n    client.println(\"\");\r\n    client.println(\"&lt;!DOCTYPE HTML&gt;\");\r\n  \r\n    \/\/Escribir el contenido que vamos a visualizar\r\n    client.println(\"&lt;html&gt;\");\r\n    client.println(\"&lt;body&gt;\");\r\n    client.print(\"Saludos de Robots Argentina\");\r\n    client.println(\"&lt;\/body&gt;\");\r\n    client.println(\"&lt;\/html&gt;\");\r\n  }\r\n  delay(1000); \/\/ reescribe cada 1 segundo\r\n}\r\n<\/pre>\n<p>Copiamos el programa en el IDE del Arduino, y ahora, antes de probar si se compila correctamente, debemos conectar la placa NodeMCU a USB y decirle al IDE de Arduino qu\u00e9 tipo de placa vamos a programar. Debemos elegir en Herramientas el \u00abNodeMCU 1.0 (ESP-12E Module)\u00bb. Si usted tiene otro tipo de placa con ESP8266 y sabe c\u00f3mo conectarla a USB, elija en la lista su m\u00f3dulo correcto y todo funcionar\u00e1 del mismo modo. Espere a que el IDE detecte la placa y defina en que n\u00famero de COM serie est\u00e1.<\/p>\n<p><strong>Cargar el programa<\/strong><\/p>\n<p>Dentro del men\u00fa \u00abHerramientas\u00bb cambiamos el tipo de placa por una <em><strong>NodeMCU 1.0 (ESP-12E Module)<\/strong><\/em>, o el modelo que tengamos.<\/p>\n<p>Al elegir y si se conecta bien indicar\u00e1 estos valores: frecuencia de la CPU: <strong>80 MHz<\/strong>, tama\u00f1o de flash: <strong>4M (1M SPIFFS)<\/strong>, velocidad de carga: <strong>115200<\/strong>. El puerto depender\u00e1 de la m\u00e1quina (en Linux puede ser <strong>\/dev\/ttyUSB0<\/strong> o <strong>\/dev\/ttyUSB1<\/strong>).<\/p>\n<p><a href=\"http:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/httpServer.png\"><img loading=\"lazy\" src=\"http:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/httpServer.png\" alt=\"\" width=\"500\" height=\"600\" class=\"aligncenter size-full wp-image-1439\" srcset=\"https:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/httpServer.png 500w, https:\/\/robots-argentina.com.ar\/didactica\/wp-content\/uploads\/httpServer-250x300.png 250w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>Determinada esta elecci\u00f3n dispositivo y conexi\u00f3n COM, ya se puede cargar el programa de la manera habitual.<\/p>\n<p>Al correr el programa nos indicar\u00e1 en qu\u00e9 direcci\u00f3n IP encontramos la p\u00e1gina web que hemos creado en la placa. Introduci\u00e9ndola en la barra de direcci\u00f3n del navegador, podremos verla con el mensaje que hemos elegido. Si este mensaje tuviese una parte variable, por ejemplo alg\u00fan valor que var\u00eda, como el registro de un sensor de temperatura u otro indicador, y\/o la hora\/minuto\/segundo.<\/p>\n<p>Art\u00edculos relacionados:  <strong><a href=\"http:\/\/robots-argentina.com.ar\/didactica\/esp8266-hacer-que-parpadee-un-led-desde-el-ide-de-arduino\/\" rel=\"noopener\" target=\"_blank\">ESP8266 (WiFi): Hacer que parpadee un LED desde el IDE de Arduino<\/a><\/strong><\/p>\n<p><center><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-format=\"fluid\"\n     data-ad-layout-key=\"-6u+d5+53-1c-7n\"\n     data-ad-client=\"ca-pub-7090242166042605\"\n     data-ad-slot=\"9428762062\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/center><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dise\u00f1amos aqu\u00ed un servidor HTTP b\u00e1sico con una placa NodeMCU con ESP8266 y el IDE de Arduino\u00a0 Para m\u00e1s referencia de c\u00f3mo agregar la familia de plaquetas y las bibliotecas necesarias para la familia ESP, les ofrezco leer el reciente art\u00edculo ESP8266 (WiFi): Hacer que parpadee un LED desde el IDE de Arduino (m\u00e1s b\u00e1sico [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[16,13,53,9,14],"tags":[],"_links":{"self":[{"href":"https:\/\/robots-argentina.com.ar\/didactica\/wp-json\/wp\/v2\/posts\/1424"}],"collection":[{"href":"https:\/\/robots-argentina.com.ar\/didactica\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/robots-argentina.com.ar\/didactica\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/robots-argentina.com.ar\/didactica\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/robots-argentina.com.ar\/didactica\/wp-json\/wp\/v2\/comments?post=1424"}],"version-history":[{"count":0,"href":"https:\/\/robots-argentina.com.ar\/didactica\/wp-json\/wp\/v2\/posts\/1424\/revisions"}],"wp:attachment":[{"href":"https:\/\/robots-argentina.com.ar\/didactica\/wp-json\/wp\/v2\/media?parent=1424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/robots-argentina.com.ar\/didactica\/wp-json\/wp\/v2\/categories?post=1424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/robots-argentina.com.ar\/didactica\/wp-json\/wp\/v2\/tags?post=1424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}