CURSO DE ESP8266 - #Aula02: Como enviar dados para uma página WEB via WiFi
CURSO DE ESP 8266, CONECTANDO O ESP NO WIFI ENVIANDO DADOS PARA PÁGINA WEB
Como na Aula 01 já foi estudado o que é o ESP, agora vamos conhecer o que é <HTML>.
De uma forma simples de explicar, o HTML é o componente básico da web, é a raiz, a o pilar da contrução civil, a célula que forma a tua pele, é ele permite inserir o conteúdo e estabelecer a cara de um website. Portanto, ele serve para dar a personalização e organizar todas as informações de uma página na web. Sem o HTML o seu navegador que você está usando agora não saberia exibir este texto que você está lendo e muito menos as imagens e videos deste post.
Os hipertextos são vários conjuntos de elementos conectados que podem ser palavras, imagens, vídeos, documento, etc e quando conectados, formam uma rede de informações que permite a comunicação de dados, organizando conhecimentos e guardando informações.
Ao visitar uma página simples na web, você pode perceber que existem diferentes distribuições e tamanhos para títulos, parágrafos, imagens, vídeos e qualquer outro elemento. Essa estrutura é estabelecida através do HTML. No inicio da web, era comum encontrar sites apenas contendo textos e imagens simples, com estrutura básica e sem estilizações. Porém, nos dias atuais, muito dificilmente você encontrará sites que possuam apenas elementos HTML. Portanto, podemos considerar o HTML o “esqueleto” da sua página.
Imagine então que além do esqueleto, é necessário ter o corpo. Para isso, temos então as linguagens CSS e o JavaScript, que em conjunto com HTML, formam a base para todos os websites atuais. Veremos mais à frente o que significam essas linguagens.
Os hipertextos são vários conjuntos de elementos conectados que podem ser palavras, imagens, vídeos, documento, etc e quando conectados, formam uma rede de informações que permite a comunicação de dados, organizando conhecimentos e guardando informações.
Ao visitar uma página simples na web, você pode perceber que existem diferentes distribuições e tamanhos para títulos, parágrafos, imagens, vídeos e qualquer outro elemento. Essa estrutura é estabelecida através do HTML. No inicio da web, era comum encontrar sites apenas contendo textos e imagens simples, com estrutura básica e sem estilizações. Porém, nos dias atuais, muito dificilmente você encontrará sites que possuam apenas elementos HTML. Portanto, podemos considerar o HTML o “esqueleto” da sua página.
Imagine então que além do esqueleto, é necessário ter o corpo. Para isso, temos então as linguagens CSS e o JavaScript, que em conjunto com HTML, formam a base para todos os websites atuais. Veremos mais à frente o que significam essas linguagens.
CÓDIGO PARA PARA CARREGAR NO ESP
#include <ESP8266WiFi.h> //INCLUSÃO DA BIBLIOTECA NECESSÁRIA PARA FUNCIONAMENTO DO CÓDIGO const char* ssid = "WIFI: Função do primeiro grau."; //VARIÁVEL QUE ARMAZENA O NOME DA REDE SEM FIO EM QUE VAI CONECTAR const char* password = "f(x)=ax+b"; //VARIÁVEL QUE ARMAZENA A SENHA DA REDE SEM FIO EM QUE VAI CONECTAR WiFiServer server(80); //CASO OCORRA PROBLEMAS COM A PORTA 80, UTILIZE OUTRA (EX:8082,8089) E A CHAMADA DA URL FICARÁ IP:PORTA(EX: 192.168.0.15:8082) int x=0; void setup() { Serial.begin(115200); //INICIALIZA A SERIAL delay(10); //INTERVALO DE 10 MILISEGUNDOS Serial.println(""); //PULA UMA LINHA NA JANELA SERIAL Serial.println(""); //PULA UMA LINHA NA JANELA SERIAL Serial.print("Conectando a "); //ESCREVE O TEXTO NA SERIAL Serial.print(ssid); //ESCREVE O NOME DA REDE NA SERIAL WiFi.begin(ssid, password); //PASSA OS PARÂMETROS PARA A FUNÇÃO QUE VAI FAZER A CONEXÃO COM A REDE SEM FIO while (WiFi.status() != WL_CONNECTED) { //ENQUANTO STATUS FOR DIFERENTE DE CONECTADO delay(500); //INTERVALO DE 500 MILISEGUNDOS Serial.print("."); //ESCREVE O CARACTER NA SERIAL } Serial.println(""); //PULA UMA LINHA NA JANELA SERIAL Serial.print("Conectado a rede sem fio "); //ESCREVE O TEXTO NA SERIAL Serial.println(ssid); //ESCREVE O NOME DA REDE NA SERIAL server.begin(); //INICIA O SERVIDOR PARA RECEBER DADOS NA PORTA DEFINIDA EM "WiFiServer server(porta);" Serial.println("Servidor iniciado"); //ESCREVE O TEXTO NA SERIAL Serial.print("IP para se conectar ao NodeMCU: "); //ESCREVE O TEXTO NA SERIAL Serial.print("http://"); //ESCREVE O TEXTO NA SERIAL Serial.println(WiFi.localIP()); //ESCREVE NA SERIAL O IP RECEBIDO DENTRO DA REDE SEM FIO (O IP NESSA PRÁTICA É RECEBIDO DE FORMA AUTOMÁTICA) } void loop() { WiFiClient client = server.available(); //VERIFICA SE ALGUM CLIENTE ESTÁ CONECTADO NO SERVIDOR if (!client) { //SE NÃO EXISTIR CLIENTE CONECTADO, FAZ return; //REEXECUTA O PROCESSO ATÉ QUE ALGUM CLIENTE SE CONECTE AO SERVIDOR } Serial.println("Novo cliente se conectou!"); //ESCREVE O TEXTO NA SERIAL while(!client.available()){ //ENQUANTO CLIENTE ESTIVER CONECTADO x++; String request = client.readStringUntil('\r'); //FAZ A LEITURA DA PRIMEIRA LINHA DA REQUISIÇÃO Serial.println(request); //ESCREVE A REQUISIÇÃO NA SERIAL client.flush(); //AGUARDA ATÉ QUE TODOS OS DADOS DE SAÍDA SEJAM ENVIADOS AO CLIENTE client.println("HTTP/1.1 200 OK"); //ESCREVE PARA O CLIENTE A VERSÃO DO HTTP client.println("Content-Type: text/html"); //ESCREVE PARA O CLIENTE O TIPO DE CONTEÚDO(texto/html) client.println(""); client.println("<!DOCTYPE HTML>"); //INFORMA AO NAVEGADOR A ESPECIFICAÇÃO DO HTML client.println("<html>"); //ABRE A TAG "html" client.println("<meta http-equiv='refresh' content='5;URL=http://192.168.0.107'>"); client.println("<h1><center>PIXELS ESCOLA</center></h1>"); //ESCREVE "Ola cliente!" NA PÁGINA client.println("<center><font size='5'>Testando</center>"); //ESCREVE "Seja bem vindo!" NA PÁGINA client.println("<h1><center>" + String(x) + "</center></h1>"); client.println("</html>"); //FECHA A TAG "html" delay(1); //INTERVALO DE 1 MILISEGUNDO } Serial.println("Cliente desconectado"); //ESCREVE O TEXTO NA SERIAL Serial.println(""); //PULA UMA LINHA NA JANELA SERIAL delay(1); //INTERVALO DE 1 MILISEGUNDO }
Escrito por Sandro Mesquita
Visite o site da Comunidade Arduino no Ceará:
Bom dia. Interessante o curso. A duvida é com disponibilizar uma pagina (192.168.0.107) na sua rede local para receber os dados. Preciso instalar como servidor de acesso na minha rede e teria que haver um programa em html/php para receber os dados via serial do notebook e gravar na mesma ? Por favor, detalhe mais. Obrigado
ResponderExcluir