Criando aplicativos com App Inventor: Parte 3

Olá tudo bem? Hoje iremos encerrar a parte 3 da série “criando aplicativos com app inventor”. Até este momento, nos post anteriores foi apresentado a ferramenta que estamos utilizando na construção do nosso aplicativo. Além disso, já foi ensinado cada bloco de comandos e quais as funcionalidades de cada um.

• Criando aplicativos com App Inventor: Parte 1
• Criando aplicativos com App Inventor: Parte 2

Nesta última parte, vamos conhecer os componentes utilizados na construção visual do nosso aplicativo e também toda a parte “back-end” ou seja, toda a lógica de funcionamento do aplicativo.

Contudo, vale ressaltar que para compreender bem as explicações e passo a passo dessa última parte, é de suma importância que você tenha lido as partes anteriores, beleza? Elas são bem tranquilas e rápidas. Se ainda não leu, aproveite pois você vai aprender muito!

Criando aplicativos com App Inventor: Apresentando os componentes

Então, vamos agora conhecer os componentes que utilizamos em nosso projeto. Na imagem abaixo, podemos observar logo de início alguns elementos tais como:

• Imagem
• Texto
• Botão

Um outro elemento de layout não tão aparente é o “layout vertical” (retângulo preto). Dentro dele, basicamente iremos mostrar mais dois botões (liga e desliga) para enviar comandos ao módulo bluetooth.

Você não verá esses botões, isso porque eles estão invisíveis e só irão aparecer quando nós se conectar a algum dispositivo.

Além disso, temos outros componentes muito importantes no projeto de hoje. Entretanto, eles são especiais, pois são “invisíveis”. Ou seja, eles não são visuais como a nossa logo, contudo estão trabalhando por trás dessa tela. Os componentes que estamos falando são:

• Notificador: Componente que faz aparecer uma notificação na tela.
• ClienteBluetooth: Componente que coleta os dispositivos pareados pelo nosso celular.
• IniciadorDeAtividades: O seu nome já explica o que ele realiza. Mas basicamente, essa atividade que ele irá iniciar vem do Notificador que aparecerá na tela.

Conhecendo o módulo bluethooth

Agora, após explicar os componentes visuais e não visuais do nosso aplicativo, vamos conhecer o nosso hardware utilizado. Como é uma aplicação bluetooth, é lógico que o módulo utilizado é o querido HC-05 ou HC-06. 

Dessa forma, conhecer o seu funcionamento é de fundamental importância. Dito isso, monte o circuito utilizado no post com o módulo bluetooth HC-05 e faça o seu pareamento.

• Utilizando Módulo Bluetooth no Arduino

Conhecendo os comandos da parte lógica

Enfim, chegou o grande momento de começar a conectar os blocos de comandos e fazer esse aplicativo funcionar. Está preparad@? Então vamos nessa!

Primeiro, acesse a janela de blocos e no lado esquerdo da tela, vai conter a tela do aplicativo e os elementos que ela contém. Assim, a ideia principal é 

“Vou no elemento que quero que faça algo, e clico nele. Nisso, irá aparecer os comandos que ele pode fazer e eu seleciono qual eu quero”. 

Com isso em mente vamos ao nosso primeiro bloco:

Na imagem acima, temos os dois blocos iniciais do nosso projeto. O primeiro diz que quando a nossa tela (Início) for iniciada, ela vai verificar se o nosso bluetooth (ClienteBluetooth) está “Ativada”. Caso não esteja, ela vai chamar um iniciador de atividade pedindo para ligar o bluetooth. 

Ou seja, toda vez que a tela for inicializada, será feita a verificação do bluetooth. Se ele já estiver ligada, ele nem entra no “se então” e já vai para o próximo bloco. Nesse bloco, o que vamos fazer é mostrar naquele retângulo preto os endereços e nomes dos dispositivos que o nosso “ClienteBluetooth” capturou.

Neste bloco, estamos ativando uma notificação para caso o bluetooth não for ligado ou for desligado por algum momento. Assim, no retângulo laranja, colocamos uma variável (“escolha”) que vai armazenar essa minha resposta (sim ou não). 

Caso eu escolha “sim”, então eu chamo o iniciador de atividade e ligo o bluetooth, caso contrário o aplicativo fecha. Porque se não ligar o bluetooth, não faz sentido utilizar o aplicativo!

Bloco de comando botão Conectar

No bloco acima, por mais que ele pareça grande, fica tranquilo. Vamos começar aos poucos, a ideia aqui é quando eu clicar no botão “conectar” na tela o que vai acontecer? Primeiro então, vamos verificar o bluetooth. Está ligado? Beleza, ele está conectado a algum dispositivo? Sim!

Então, digo ao (ClienteBluetooth) para desconectar. Depois, mostro uma notificação na tela avisando que foi desconectado e deixo o botão verde para fazer uma nova conexão. Agora vamos supor que o bluetooth está ligado mas sem estar conectado a nenhum dispositivo, então, vamos chamar a (listaDevices) e escolher o dispositivo pareado. 

Mas e se o bluetooth não estiver ligado quando eu clicar no botão? Nisso aparece uma notificação na tela perguntando se quero ligar e caso eu responda “sim”, essa informação vai para o bloco do (Notificador) e nele ele vai chamar o iniciador de atividades e o bluetooth liga e o processo de verificação de repete.

Bloco de comando para lista de Dispositivos

Esse bloco do (listaDevices) irá basicamente pegar as informações do dispositivo que escolhi e mostrar na tela. Além disso, ele irá mudar a cor do botão e o texto. Mas, lembrando que esse bloco só será executado quando o (btnConectar) chamar ele.

Terminando, temos dois blocos que representa o caractere enviado ao bluetooth que irá interpretar a informação para saber que ação ele deve realizar. Então caso você pressione o botão “acionar” na tela, será enviado o caractere “a” ao módulo bluetooth. O mesmo vale para o botão “desligar” que enviará o caractere “d”.

Configurando o módulo para receber os caracteres

<code>void loop()
{
  // Verifica se o bluetooth está ativado
  if(bluetooth.available()){ 
       dadoBluetooth = bluetooth.read(); // Recebendo dados do bluetooth
    
    if(dadoBluetooth == '1'){
      Serial.println("LED LIGADO"); 
      digitalWrite(pinoLed, HIGH);
    }
    
    if(dadoBluetooth == '0'){
      Serial.println("LED DESLIGADO"); 
      digitalWrite(pinoLed, LOW);
    }
  }
  delay(2000);
}</code>

Para encerrar, volte a programação do módulo bluetooth no arduino e troque os caracteres que o bluetooth deve verificar para ligar e desligar o led. Ou seja, troque o ‘1’ por ‘a’ e o ‘0’ pelo caractere ‘d’.

Agora, basta instalar o aplicativo clicando no link abaixo e faça a conexão com o seu módulo bluetooth.

Gostou do post? Caso tenha ficado algo incompleto para você, comente abaixo 📝

Dicas? 😄 Dúvidas? 👀 Críticas? 😱 Só comentar abaixo quero ouvir o seu feedback!

Forte abraço e compartilha se gostou! 🤘