App Inventor plataforma gratuita para desenvolvimento de aplicativos

A Internet das Coisas (IoT) tem tornado os dispositivos cada vez mais presentes em nosso cotidiano. Para aproveitar todo o potencial dessa tecnologia, é fundamental contar com aplicativos móveis eficientes. Esses aplicativos se tornaram a interface essencial entre os usuários e os dispositivos conectados, oferecendo controle, monitoramento e interação com esses elementos inteligentes.

É nesse contexto que o App Inventor surge como uma ferramenta excepcional. Ele permite que qualquer pessoa, independentemente do nível técnico, desenvolva seus próprios aplicativos para iOS e Android, sem encontrar barreiras no processo.

Neste post, vamos explorar profundamente o universo do App Inventor, compreendendo o que torna essa ferramenta tão poderosa. Além disso, aprenderemos como utilizá-la para controlar as saídas de um ESP32 via bluetooth e WiFi, proporcionando aos leitores uma compreensão prática e aplicável das funcionalidades desta plataforma.

Sumário

1. O que é o App Inventor?

2. Como controlar ESP32 via bluetooth?

3. Como controlar ESP32 via WiFi?

4. Conclusão

1. O que é o App Inventor?

O App Inventor é uma plataforma de desenvolvimento de aplicativos móveis criada pelo MIT (Instituto de Tecnologia de Massachusetts) com o objetivo de tornar a programação mais acessível e amigável para todos. Com essa ferramenta, qualquer pessoa, mesmo sem conhecimento prévio em programação, pode criar aplicativos para dispositivos Android de maneira intuitiva e interativa. Lançado em 2010, o App Inventor tem se tornado uma escolha popular para entusiastas, estudantes e educadores que desejam entrar no mundo do desenvolvimento de aplicativos móveis.

Para utilizar a plataforma e começar a desenvolver acesse o site oficial do App Inventor. Clique em Create Apps, mostrado em destaque na figura a seguir.

Em seguida, faça login utilizando uma conta google. Recomendamos que utilize a mesma conta do seu celular.

Se for o seu primeiro acesso, serão apresentados os termos de serviço da plataforma. Para prosseguir é necessário aceitar estes termos.

Em seguida, será apresentada a janela de boas-vindas. Pode marcar a opção Do Not show Again e clique em Continue.

Caso deseje, você pode acessar alguns tutoriais disponibilizados pela plataforma. No entanto, para prosseguir, clique em close.

Para começar a criar o seu projeto clique em Start new project.

De um nome para o projeto, depois clique em OK.

Para a criação do aplicativo, utilizamos duas telas distintas: uma para o design da interface e outra para os blocos de funcionalidade. Na tela de design, são posicionados todos os elementos visuais, como botões, imagens, informações em texto e outras ferramentas essenciais para o projeto. A figura abaixo representa a tela de design em questão.

Uma segunda aba disponível é a de blocos, que apresenta uma interface visual intuitiva, permitindo que os desenvolvedores construam aplicativos por meio do simples arrastar e soltar de blocos de funcionalidades, em vez de lidar com a complexidade de escrever código. A representação dessa tela de blocos pode ser visualizada na figura a seguir.

Para executar o aplicativo no celular é necessário primeiro instalar o aplicativo MIT AI2 Companion.

Abrindo o aplicativo clique em scan QR code.

Agora vamos gerar o QR code no App Inventor. Para isso vamos em connect e depois em AI Companion. Como mostrado na figura a seguir.

Após ler o QR code o aplicativo será carregado no celular.

Essa foi somente uma visão geral sobre a plataforma, a seguir vamos ver na prática como desenvolver seus aplicativos.

2. Como controlar ESP32 via bluetooth?

Neste exemplo, o projeto será dividido em duas partes: o aplicativo e o firmware do ESP32. O aplicativo contará com uma interface semelhante à apresentada na figura a seguir. Como ilustrado, teremos a possibilidade de controlar 3 relés, podendo ligá-los e desligá-los através dos botões do aplicativo.

Na aba layout pegamos o HorizontalArrangement e arrastamos para a tela do aplicativo. Como mostrado na figura a seguir.

O HorizontalArrangement é um componente fundamental do nosso aplicativo. Ao clicarmos nele, temos acesso às suas propriedades, representadas à direita na figura a seguir. Nessa seção de propriedades, podemos ajustar diversos parâmetros relacionados a esse componente, personalizando-o de acordo com nossas necessidades.

Alterando a propriedade Width para Fill parent, o componente terá a largura total da tela.

Agora, direcionando-nos à aba User Interface, realizamos o arraste do componente Label para dentro do HorizontalArrangement em nosso projeto. O resultado dessa ação pode ser visualizado na figura abaixo. Além disso, ajustamos a altura do HorizontalArrangement para que fique no mesmo tamanho do Label, proporcionando uma aparência mais harmoniosa e alinhada.

Dentro da aba Components, temos uma visão geral de todos os componentes presentes no projeto. Ao selecionar um componente específico e clicar na opção "rename", temos a possibilidade de alterar o nome pelo qual nos referiremos a esse componente no projeto. Isso oferece uma maneira conveniente de personalizar os nomes dos componentes conforme nossa preferência e torna a identificação mais clara e compreensível.

Vamos utilizar esse componente como título para o nosso aplicativo, com o nome dele. Para isso, vamos na aba propriedades para alterar a propriedade text, que é o texto exibido. Vamos utilizar Controle Bluetooth, como mostrado na figura a seguir.

Vamos também alterar o tamanho da fonte (FontSize), colocar em negrito (FontBold) e ajustar o alinhamento (TextAlignment). Como pode ser visto na figura a seguir.

Observe que, mesmo após as modificações, o texto ainda se encontra alinhado à esquerda. Isso acontece devido ao alinhamento configurado como esquerda no componente HorizontalArrangement. Para corrigir esse aspecto, basta selecionar o componente e ajustar a propriedade AlignHorizontal para centralizado. O efeito dessa alteração pode ser visualizado na figura abaixo.

Agora vamos acrescentar mais um HorizontalArrangement, ajustar sua largura e colocar um Label dentro dele, como feito anteriormente. O resultado pode ser visto na figura a seguir.

Agora vamos alterar o nome desse Label para status e ajustar seu texto, tamanho e alinhamento. O resultado pode ser visto na figura a seguir.

Adicionamos mais um HorizontalArrangement, ajustamos sua largura (Width), cor de fundo (BackgroundColor) e alinhamento horizontal (AlignHorizontal). O resultado pode ser visto na figura a seguir.

A seguir, navegue até a aba User Interface e adicione o componente ListPicker. Renomeamos para lista_bluetooth e configuramos suas propriedades conforme ilustrado na figura abaixo.

Ainda na aba User Interface, vamos adicionar o componente Button. Ele será colocado ao lado do ListPicker, como mostrado na figura a seguir.

O nome do Button será alterado para desconectar e suas propriedades serão ajustadas de forma similar às do ListPicker. O resultado pode ser visto na figura a seguir.

Para finalizar, podemos aumentar a altura do HorizontalArrangement para criar um espaço entre os motores dessa linha e os demais componentes da tela. O resultado é ilustrado na figura abaixo.

Os componentes inseridos até agora serão responsáveis por conectar o aplicativo com um dispositivo Bluetooth que esteja pareado com o celular. Agora vamos adicionar os botões para ligar e desligar cada relé. Podemos fazer para um deles e depois copiar para os demais.

Primeiro, na aba Layout, adicionamos um VerticalArrangement. Ajustamos sua largura e cor do fundo conforme mostrado na figura a seguir.

Agora vamos adicionar um Label e configurá-lo como mostrado na figura a seguir.

O componente HorizontalArrangement possibilita a organização de elementos lado a lado na horizontal. Já o VerticalArrangement permite a disposição dos componentes um abaixo do outro, na vertical. Vamos utilizar uma combinação desses dois arranjos, adicionando um HorizontalArrangement logo abaixo do Label, conforme exemplificado na figura abaixo.

Dentro do HorizontalArrangement vamos adicionar dois botões (Button), como mostrado na figura a seguir.

Vamos prosseguir com a alteração dos nomes dos botões para ligar_1 e desligar_1. Também efetuaremos mudanças nas suas propriedades, seguindo um processo semelhante ao realizado para o botão desconectar. O resultado pode ser observado na figura a seguir.

Agora podemos copiar e colar o VerticalArrangement para criar a estrutura para os demais relés. Como mostrado na figura a seguir.

Perceba que os nomes dos componentes já foram ajustados para ligar_2, ligar_3, etc. No entanto, o texto dos Labels continua igual. Para corrigir isso, basta modificar a propriedade Text de cada um deles. O design final do nosso aplicativo pode ser visto na figura a seguir.

Para finalizar, é necessário adicionar o componente BluetoothCliente, disponível na aba connectivity. Esse componente é invisível, ou seja, não afeta o design do aplicativo visualmente. Ele é usado exclusivamente para fornecer as funções necessárias para a comunicação Bluetooth. O BluetoothCliente será posicionado abaixo do desenho do celular, como exemplificado na figura a seguir.

Agora, vamos começar a montar o código. Para isso, vamos alternar para a aba de blocos. Iniciaremos com a conexão Bluetooth, selecionando o componente lista_bluetooth e utilizando os blocos AfterPicking (depois de selecionar) e BeforePicking (antes de selecionar).

Eles devem ser colocados na área de trabalho, como mostrado na figura a seguir.

No bloco BeforePicking vamos adicionar os dispositivos bluetooth na lista de elementos do componente lista_bluetooth (ListPicker). Para isso selecionamos lista_bluetooth e pegamos o bloco mostrado na figura a seguir.

Nele vamos encaixar o bloco do BluetoothCliente responsável por informar os nomes dos dispositivos bluetooth pareados com o celular. Para isso selecione o componente e pegue o bloco indicado na figura a seguir.

Agora devemos encaixar os dois blocos dentro do bloco BeforePicking. Como mostrado na figura a seguir.

Agora vamos programar o evento do bloco AfterPicking, que vai ser responsável por realizar a conexão com o bluetooth. Para isso vamos no componente BluetoothCliente e pegamos o bloco mostrado na figura a seguir.

Devemos informar para esse bloco em qual dispositivo queremos conectar. Para isso, vamos utilizar o dispositivo selecionado na lista do lista_bluetooth utilizando o bloco a seguir.

Assim o celular irá se conectar ao dispositivo bluetooth selecionado na lista. Juntando os blocos o resultado deve ser o seguinte:

Na figura anterior podemos ver que os blocos não encaixam. Devemos utilizar um bloco de condição, nas abas superiores vamos pegar o bloco IF em Control.

O programa irá estabelecer a conexão Bluetooth e verificar se foi estabelecida com sucesso. Além disso, vamos modificar o texto da Label status para indicar que o Bluetooth está conectado. Para fazer isso, utilizamos o bloco apresentado na figura abaixo

Com esse bloco, o programa realiza a alteração da propriedade Text do componente status. Para fornecer o valor do texto, utilizaremos o bloco de texto disponível na aba Text, conforme demonstrado na figura a seguir.

Colocando esse bloco dentro do IF, o resultado deverá ser igual ao mostrado na figura a seguir:

Agora vamos programar o botão de desconectar. Primeiro vamos selecionar o componente desconectar e pegar o bloco a seguir.

Vamos pegar o bloco para desconectar o dispositivo bluetooth. Ele está dentro do componente BluetoothCliente, mostrado na figura a seguir.

Depois de desconectar o bluetooth vamos atualizar o texto do status, da mesma forma feita anteriormente. O resultado pode ser visto na figura a seguir.

Agora, vamos programar os botões de ligar e desligar. O processo é semelhante ao utilizado para o botão de desconectar. Inicialmente, selecionamos o bloco Click no componente ligar_1 e o bloco SendText no BluetoothCliente. O resultado pode ser visualizado na figura abaixo.

Na seção "Text" do bloco SendText, iremos definir o texto que será enviado pelo Bluetooth quando o botão for pressionado. Utilizaremos o mesmo bloco mostrado anteriormente. Para acionar o relé 1, enviaremos o caractere "a". Além disso, vamos modificar o texto da Label "rele_1" para indicar que ele está ligado. O resultado pode ser visualizado na figura a seguir.

Para implementar a funcionalidade do botão Desligar do relé 1, podemos duplicar todo o conjunto anterior e fazer as alterações necessárias nos componentes e textos. Nesse sentido, substituiremos ligar_1 por desligar_1 e atualizaremos o texto da Label rele_1. O texto enviado para desligar o relé será o caractere "A". O resultado das modificações pode ser visualizado na figura a seguir.

Para os botões dos relés 2 e 3 o processo é o mesmo. Basta copiar os blocos e fazer as alterações. O resultado pode ser visto na figura a seguir.

Na figura a seguir podemos ver o código completo para o aplicativo.

Agora, avançaremos para a programação do ESP32. Dado que o projeto requer o controle de 3 relés, utilizaremos a nossa CPB32. Para habilitar a comunicação Bluetooth no ESP32, faremos uso da biblioteca BluetoothSerial. O código começa com o primeiro passo de inclusão da biblioteca e a criação do objeto necessário para a comunicação via Bluetooth.

#include "BluetoothSerial.h" 

#if !defined(CONFIG_BT_ENABLED) || !defined(CONFIG_BLUEDROID_ENABLED)
#error Bluetooth is not enabled! Please run `make menuconfig` to and enable it
#endif

BluetoothSerial SerialBT; 

Dentro da função setup vamos iniciar a comunicação bluetooth do ESP32 utilizando a função a seguir. Onde "CPB32" será o nome do dispositivo bluetooth.

SerialBT.begin("CPB32");

Dentro da função loop, iremos receber os dados provenientes do Bluetooth e, em seguida, acionar os relés de acordo com os dados recebidos. O acionamento será realizado através dos caracteres "a", "A", "b", "B", "c" e "C", onde o caractere em minúsculo indica ligar o relé e o caractere em maiúsculo indica desligar. A verificação para a presença de dados recebidos será realizada utilizando a função SerialBT.available(), que retorna 1 quando o ESP32 receber algum dado via Bluetooth. Portanto, o bloco IF será executado apenas quando houver dados recebidos via Bluetooth.

void loop()
{
 if (SerialBT.available())
 {
   entrada = SerialBT.read();

   Serial.println(entrada);

   if (entrada == 'a')
      digitalWrite(RELE_01, HIGH);

   if (entrada == 'A')
      digitalWrite(RELE_01, LOW);

   if (entrada == 'b')
      digitalWrite(RELE_02, HIGH);

   if (entrada == 'B')
      digitalWrite(RELE_02, LOW);

   if (entrada == 'c')
      digitalWrite(RELE_03, HIGH);

   if (entrada == 'C')
      digitalWrite(RELE_03, LOW);
 }
}

A seguir o código completo utilizado.

#include "BluetoothSerial.h"

#if !defined(CONFIG_BT_ENABLED) || !defined(CONFIG_BLUEDROID_ENABLED)
#error Bluetooth is not enabled! Please run `make menuconfig` to and enable it
#endif

BluetoothSerial SerialBT;

//Definição de entradas e saídas
#define RELE_01 32
#define RELE_02 33
#define RELE_03 4

char entrada;

void setup()
{
 Serial.begin(115200);
 SerialBT.begin("CPB32");
 pinMode(RELE_01, OUTPUT);
 pinMode(RELE_02, OUTPUT);
 pinMode(RELE_03, OUTPUT);

}

void loop()
{
 if (SerialBT.available())
 {
   entrada = SerialBT.read();

   Serial.println(entrada);

   if (entrada == 'a')
      digitalWrite(RELE_01, HIGH);

   if (entrada == 'A')
      digitalWrite(RELE_01, LOW);

   if (entrada == 'b')
      digitalWrite(RELE_02, HIGH);

   if (entrada == 'B')
      digitalWrite(RELE_02, LOW);

   if (entrada == 'c')
      digitalWrite(RELE_03, HIGH);

   if (entrada == 'C')
      digitalWrite(RELE_03, LOW);
 }
}

Agora, para concluir o processo, basta carregar o código no ESP32 e emparelhá-lo com o celular. Uma vez que o aplicativo tenha sido carregado no celular, será possível estabelecer a conexão com o ESP32 e ter controle sobre os relés.

3. Como controlar ESP32 via WiFi?

Este exemplo será dividido em duas partes: o aplicativo e o firmware do ESP32. O aplicativo contará com uma interface semelhante à apresentada na figura a seguir. Como pode ser observado, teremos o controle de 3 relés, permitindo ligá-los e desligá-los através dos botões disponíveis no aplicativo.

Na aba layout pegamos o HorizontalArrangement e arrastamos para a tela do aplicativo. Como mostrado na figura a seguir.

O HorizontalArrangement é um componente essencial em nosso aplicativo. Ao clicar neste componente, podemos visualizar, como mostrado na figura a seguir, as propriedades disponíveis do mesmo à direita. Nesta seção, é possível ajustar diversos parâmetros relacionados a esse componente, permitindo uma personalização adequada às nossas necessidades.

Alterando a propriedade Width para Fill parent, o componente terá a largura total da tela.

Agora, na aba User Interface, arrastamos o componente Label para dentro do HorizontalArrangement em nosso projeto. O resultado dessa ação pode ser visualizado na figura abaixo. Para garantir que o HorizontalArrangement tenha a mesma altura que o Label, ajustamos a altura do componente.

Na aba Components, encontramos todos os componentes utilizados no projeto. Ao selecionar um componente e clicar em rename, podemos alterar o nome pelo qual nos referiremos a esse componente ao longo do projeto.

Vamos utilizar esse componente como título para o nosso aplicativo, atribuindo o nome desejado a ele. Para isso, vamos à aba propriedades para alterar a propriedade Text, que é o texto exibido pelo componente. Escolhemos o nome Controle Bluetooth, como mostrado na figura a seguir.

Vamos também alterar o tamanho da fonte (FontSize), colocar em negrito (FontBold) e ajustar o alinhamento (TextAlignment). Como pode ser visto na figura a seguir.

Perceba que, mesmo assim, o texto continua alinhado à esquerda. Isso acontece porque o componente HorizontalArrangement está configurado com alinhamento à esquerda. Para modificar essa propriedade, selecione o componente e altere o valor de AlignHorizontal. O resultado dessa alteração pode ser visualizado na figura a seguir.

Agora, para prosseguir, adicionaremos mais um componente HorizontalArrangement. Em seguida, ajustamos sua largura conforme necessário e inserimos um novo Label dentro dele, seguindo a mesma abordagem adotada anteriormente. O resultado dessa etapa está exemplificado na figura a seguir.

Agora, procederemos à alteração do nome desse Label para ip e faremos os ajustes necessários em seu texto, tamanho e alinhamento. O resultado final pode ser visualizado na figura a seguir.

Após a inserção de mais um HorizontalArrangement, realizamos os devidos ajustes em sua largura (Width), cor de fundo (BackgroundColor) e alinhamento horizontal (AlignHorizontal). O resultado final dessas modificações pode ser visualizado na figura a seguir.

Da aba User Interface, vamos adicionar os componentes TextBox e Button. Como mostrado na figura a seguir.

Vamos alterar os nomes de TextBox e Button para end_ip e save, respectivamente. Ajustamos também sua altura, largura e texto como mostrado na figura a seguir.

Agora vamos selecionar o HorizontalArrangement, que foi renomeado como savearray, vamos desmarcar a opção Visible nas propriedades. O resultado pode ser visto na figura a seguir.

Agora vamos adicionar mais um HorizontalArrangement junto com um Button, configurando-os como feito anteriormente. O resultado pode ser visto na figura a seguir.

Os componentes inseridos até o momento desempenharam o papel de fornecer ao aplicativo o endereço IP do dispositivo a ser controlado. Agora, prosseguiremos adicionando os botões para ligar e desligar cada relé. Podemos configurar um deles e, em seguida, replicar para os demais.

Primeiramente, acessaremos a aba Layout e incluiremos um VerticalArrangement. Em seguida, ajustamos sua largura e cor de fundo, conforme demonstrado na figura a seguir.

Agora vamos adicionar um Label e configurá-lo como mostrado na figura a seguir.

O componente HorizontalArrangement possibilita a disposição de componentes lado a lado na horizontal. Já o VerticalArrangement permite a colocação dos componentes um abaixo do outro na vertical. Para criar a combinação desejada, adicionaremos um HorizontalArrangement logo abaixo do Label, como exemplificado na figura a seguir.

Dentro do HorizontalArrangement vamos adicionar dois botões (Button), como mostrado na figura a seguir.

Agora, procederemos à alteração dos nomes desses componentes para ligar_1 e desligar_1. Além disso, faremos ajustes em suas propriedades de maneira semelhante ao que foi feito para o botão de desconectar. O resultado dessas alterações pode ser visualizado na figura a seguir.

Agora podemos copiar e colar o VerticalArrangement para criar a estrutura para os demais relés. Como mostrado na figura a seguir.

É importante observar que os nomes dos componentes já foram ajustados para ligar_2, ligar_3, e assim por diante. No entanto, o texto dos Labels permanece o mesmo. Para corrigir isso, basta acessar a propriedade Text de cada Label e fazer as alterações necessárias. O design final do nosso aplicativo pode ser visualizado na figura a seguir.

O próximo componente será o WebViewer, ele pode ser adicionado abaixo de todos os componentes. Iremos torná-lo invisível, como mostrado na figura a seguir.

Para concluir, vamos adicionar o componente TinyDB, localizado na aba Storage. Esse componente é invisível, ou seja, não afeta o design visual do aplicativo. Ele será utilizado exclusivamente para armazenar o endereço IP do dispositivo. O TinyDB ficará posicionado abaixo do desenho do celular, como ilustrado na figura a seguir.

Agora, vamos iniciar a montagem do código, para isso, altere para a aba de blocos. Primeiramente, vamos configurar o botão Definir IP. Sua função será ocultar o defarray e tornar visível o savearray. Para isso, selecione o bloco a seguir localizado em def_ip.

Agora vamos em defarray e savearray pegar os seguintes blocos.

Em logic pegamos os blocos true e false. Que serão encaixados como mostrado na figura a seguir.

Dessa forma, ao pressionarmos o botão Definir IP, o aplicativo irá ocultar o array definir IP e exibir o array para inserir o endereço IP. Agora, vamos programar o botão Salvar utilizando o bloco click associado ao botão save.

Quando o botão Salvar for pressionado, iremos armazenar o IP digitado no TextBox em uma variável, em seguida, exibiremos o IP no Label IP e ocultamos novamente esse array. Para realizar essa ação, começamos utilizando o bloco StoreValue no componente TinyDB1.

Utilizando os blocos de Text e o bloco de ler o texto do TextBox end_ip, montamos o conjunto a seguir. Dessa forma salvamos o texto “http://”+”IP” dentro da variável esp_ip.

Agora vamos escrever no Label IP o valor armazenado na variável. Utilizando o bloco set Text do componente ip, como mostrado na figura a seguir.

Para pegar o valor da variável utilizamos o bloco GetValue de TinyDB1. Mostrado na figura a seguir. Em tag colocamos o nome da variável.

Juntamos tudo e adicionamos os blocos para tornar esse array invisível e o anterior visível o resultado será o seguinte.

Agora, vamos programar os botões de ligar e desligar os relés. Eles irão acionar uma URL específica para que o ESP32 execute a ação correspondente. O padrão da URL será "http://IP_do_dispositivo/rele1ON", onde "rele1ON" indica ao ESP32 que ele deve ligar o relé 1. Para começar, precisamos utilizar o bloco de clique no botão ligar_1 e o bloco GoToUrl do WebViewer1, conforme mostrado na figura a seguir:

Utilizamos o bloco join, do conjunto Text, para juntar o IP (valor da variável) com o comando que desejamos enviar, /rele1ON. Como mostrado na figura a seguir.

Por fim, vamos alterar o Label rele_1 para indicar que o relé 1 está ligado.

Para configurar o botão de desligar o relé 1, podemos realizar um procedimento simples copiando o conjunto já criado para o botão de ligar, com apenas algumas alterações necessárias. Vamos substituir ligar_1 por desligar_1, o comando por /rele1OFF e, além disso, ajustar outros detalhes conforme exemplificado na figura a seguir:

Para os demais botões podemos copiar esses dois conjuntos fazendo as alterações necessárias. Veja na figura a seguir o código para os demais botões.

Na figura a seguir podemos ver o código completo utilizado no aplicativo.

O próximo passo consiste na programação do ESP32. Para atender às necessidades do nosso projeto, faremos uso da CPB32, que nos permitirá utilizar 3 relés. Para isso, será implementada a biblioteca ESPmDNS.h, responsável por criar um servidor que possibilitará tomar decisões com base no acesso a esse servidor. Abaixo, apresentamos as bibliotecas utilizadas e as configurações básicas, incluindo o nome e a senha da rede WiFi:

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

MDNSResponder mdns;

const char* ssid = "nome_da_rede";
const char* password = "senha";

WebServer server(80);

//Definição de entradas e saídas
#define RELE_01 32
#define RELE_02 33
#define RELE_03 4

No restante do código, estabeleceremos a conexão com a rede WiFi e configuramos o servidor. Na função setup, encontramos o seguinte trecho de código, responsável pela configuração do servidor.

server.on("/rele1ON", []() {
   digitalWrite(RELE_01, HIGH);
   delay(100);
 });

 server.on("/rele1OFF", []() {
   digitalWrite(RELE_01, LOW);
   delay(100);
 });

 server.on("/rele2ON", []() {
   digitalWrite(RELE_02, HIGH);
   delay(100);
 });

 server.on("/rele2OFF", []() {
   digitalWrite(RELE_02, LOW);
   delay(100);
 });
 server.on("/rele3ON", []() {
   digitalWrite(RELE_03, HIGH);
   delay(100);
 });

 server.on("/rele3OFF", []() {
   digitalWrite(RELE_03, LOW);
   delay(100);
 });

O código completo utilizado no ESP32 pode ser visto a seguir.

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

MDNSResponder mdns;

const char* ssid = "OsirMax_Thales";
const char* password = "08051993";

WebServer server(80);

//Definição de entradas e saídas
#define RELE_01 32
#define RELE_02 33
#define RELE_03 4

void setup()
{
 Serial.begin(115200);

 pinMode(RELE_01, OUTPUT);
 pinMode(RELE_02, OUTPUT);
 pinMode(RELE_03, OUTPUT);

 WiFi.begin(ssid, password);

 int i = 0;

 while (WiFi.status() != WL_CONNECTED) {
   delay(500);
   Serial.print(".");
   if (i > 20) {
      ESP.restart();
   }
   i++;
 }
 
 Serial.println("");
 Serial.print("Connected to ");
 Serial.println(ssid);
 Serial.print("IP address: ");
 Serial.println(WiFi.localIP());
 if (mdns.begin("esp")) {
   Serial.println("MDNS responder started");
 }
 
 server.on("/", []() {
 });

 server.on("/rele1ON", []() {
   digitalWrite(RELE_01, HIGH);
   delay(100);
 });

 server.on("/rele1OFF", []() {
   digitalWrite(RELE_01, LOW);
   delay(100);
 });

 server.on("/rele2ON", []() {
   digitalWrite(RELE_02, HIGH);
   delay(100);
 });

 server.on("/rele2OFF", []() {
   digitalWrite(RELE_02, LOW);
   delay(100);
 });
 server.on("/rele3ON", []() {
   digitalWrite(RELE_03, HIGH);
   delay(100);
 });

 server.on("/rele3OFF", []() {
   digitalWrite(RELE_03, LOW);
   delay(100);
 });


 server.begin();
 Serial.println("HTTP server started");

}

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

Para obter o IP do dispositivo podemos utilizar o monitor serial, como mostrado na figura a seguir.

Nesse exemplo podemos testar o funcionamento do código digital 192.168.8.139/rele1ON ou 192.168.8.139/rele1OFF. Esse é exatamente o processo realizado pelo aplicativo.

Agora devemos carregar o aplicativo no celular, clicar em Definir ip, digitar o IP do dispositivo na caixa de texto e clicar em salvar. Depois podemos ligar e desligar os relés através dos botões do aplicativo.

4. Conclusão

O App Inventor é uma ferramenta poderosa que democratiza o desenvolvimento de aplicativos, tornando-o acessível a todos, independentemente do nível de conhecimento em programação. Com uma interface amigável e recursos robustos, é possível criar apps interessantes e funcionais para solucionar problemas, oferecer entretenimento ou mesmo promover a educação. Além disso, quando combinado com o ESP32, o App Inventor se torna uma excelente solução para aplicações de IoT e automação residencial.

E aí, está animado para explorar todo o potencial do App Inventor em seus projetos? Não deixe essa oportunidade passar e comece a criar suas ideias agora mesmo!

Autor: Thales Ferreira