Criando aplicativos com App Inventor: Parte 2

Olá, tudo bem? Hoje vamos dar continuidade sobre o nosso estudo a respeito do App Inventor, entrando na parte 2 sobre como criar aplicativos com App Inventor.

Nessa parte, vamos aprender como configurar toda a parte gráfica de nosso aplicativo e começar o estudo da lógica do código de nosso aplicativo. 

Caso você tenha acessado primeiro esse post, saiba que temos a parte 1 da série sobre o App Inventor. Aconselho dar uma olhada antes de continuar, então basta clicar no botão abaixo! Mas caso já tenha lido, bora começar o nosso aprendizado de hoje!

Inserindo imagens no App Inventor

Quando você criar o seu projeto como vimos na parte 1, você vai se deparar com uma tela parecida com a imagem abaixo. Como já explicado na parte 1, é nessa tela onde iremos realizar toda a configuração gráfica de nosso aplicativo. Assim, será nessa área de trabalho que iremos adicionar os itens e iremos configurar cada um deles.

Dessa forma, para inserir as imagens que utilizará em seu aplicativo, basta clicar no botão “Enviar Arquivo …” (retângulo vermelho) e em seguida, clique no botão “Escolher Arquivo” (retângulo azul). Igual está mostrando a imagem abaixo!

Quando você subir todas as imagens, elas vão estar na coluna de “Mídia” como mostra a imagem abaixo (retângulo verde). Agora que temos nossas imagens, vamos trocar a imagem de fundo do nosso aplicativo.

Trocando Imagem de Fundo e Ícone no App Inventor

Então, para fazer isso clique em “Imagem de Fundo” (retângulo vermelho) e selecione a imagem “capa.png”. Agora, vamos trocar o icone do nosso aplicativo, então clique em “Ícone” e selecione a imagem “logo_auto”. Na imagem abaixo você verifica a posição de cada opção!

Inserindo Elementos no Aplicativo

Agora, vamos colocar um botão que será responsável por abrir uma outra tela onde estaremos realizando a comunicação com o módulo bluetooth. Portanto, na coluna de “Interface de Usuário” clique no item “Botão” e arraste para a tela.

Antes de mais nada, é muito importante você renomear cada elemento do seu projeto. Mas, por quê? Isso é devido a programação. Quando você sabe o nome do componente X que você quer manipular na programação, fica mais fácil essa manipulação.

Dessa forma, para alterar o nome de nosso botão, basta selecionar o botão e na coluna de “Componentes” selecionar a opção “Renomear” (retângulo vermelho) que estão logo abaixo na coluna. Agora, coloque uma nome de fácil identificação e clique em “OK”.

Na sequência, é necessário configurar o nosso botão. Para isso, copie toda a configuração que se encontra na imagem abaixo!

Criando uma Nova Tela no App Inventor

Depois de finalizado a nossa primeira tela, vamos criar uma nova tela onde ela será chamada quando clicarmos no botão “Iniciar App” e dentro dela, iremos realizar a conexão com o nosso módulo bluetooth e teremos os botões para controlar o envio de dados para o Arduino.

Então, como mostrado na parte 1, para criarmos uma nova tela temos que acessar “Adicionar Tela…” na barra superior e dar um nome de sua preferência. Agora, para acessar essa nova tela, basta clicar no botão à esquerda do “Adicionar Tela…” (retângulo vermelho) e escolher a sua tela.

Configurando a tela de Conexão no App Inventor

Criada uma tela, vamos começar a configurar ela. Então, vamos começar colocando uma imagem de sua preferência no topo do aplicativo (caso não queira colocar não precisa). Então já sabe o esquema, clique em “Imagem” na coluna de “Interface com Usuário” e joga na tela.

Em seguida, clicando na aba “imagem” que está na coluna “Propriedades”, escolha a sua imagem. Logo depois, Vamos colocar uma caixa de texto, ou legenda. Portanto, o processo de repete, encontre ela na coluna de interface e arraste para a tela e coloque um nome de sua preferência na aba “Texto” na coluna de propriedades.

Por fim, vamos colocar um botão para dar início a comunicação com o módulo bluetooth. Mais uma vez, o processo se repete. Arraste o botão da coluna interface e coloque o nome de “Conectar”.

Fique ligado a alguns detalhes:

• Renomeie cada elemento logo após inserir ele na tela.
• Centralize todos eles na tela.
• A largura coloque como “preencher a tela”.

Agora, vamos partir para a configuração final de nosso aplicativo. Para isso, vamos utilizar um item do bloco “Organização” chamado de “Organização Vertical”. Ele basicamente, é uma tela onde todos os itens colocados dentro dele, estarão organizados verticalmente.

Portanto, basta adicionar dois botões dentro dele onde eles serão responsáveis por enviar os comandos para o Arduino. Neste exemplo, estamos enviando o comando de acender e desligar, contudo, a lógica segue para qualquer ação que você queira executar.

Além disso, temos o item “Escolhe Lista” que se encontra em “Interface de Usuário”, que vamos utilizar para mostrar a lista de dispositivos pareados pelo celular naquele momento.

Dica do milhão

Quando você está criando aplicativos com app inventor é necessário adicionar espaços entre elementos, mas como adicionar? No App Inventor, nós temos uma saída de mestre que é utilizar uma legenda vazia. Simples assim! Então caso queira adicionar espaços entre os elementos, basta adicionar uma legenda e não escrever nada nela!

Configurando o Bluetooth no App Inventor

Para finalizar, vamos adicionar os itens “cabeça” de nosso aplicativo. Aqueles que farão a mágica acontecer. Estamos falando do trio parada dura “Notificador”, “ClienteBluetooth” e “IniciadorDeAtividades”.

Diferente do “Notificador” que está localizado em “Interface de Usuário”, o restante se encontra no bloco “Conectividade” (retângulo vermelho). Desse bloco, arraste para o aplicativo o “Cliente Bluetooth” e o “Iniciador de Atividades”.

O nome de cada um já explica bem o que eles fazem, assim, o cliente bluetooth vai ser responsável por se conectar com o módulo bluetooth. Já o iniciador de atividades, será responsável a atividade de ligar o bluetooth.

Por esse motivo, é preciso colocar o seguinte código na aba “Ação” (retângulo preto):

android.bluetooth.adapter.action.REQUEST_ENABLE

Resumo da Obra

Resumindo, hoje aprendemos a como desenvolver a parte gráfica do nosso aplicativo. Caso tenha vontade de alterar cor e tamanho dos itens, fica à vontade. Contendo todos esses itens, o seu aplicativo funcionará perfeitamente.

No próximo capítulo sobre como criar aplicativos com app inventor, vamos aprender a desenvolver toda a programação de nosso aplicativo, bastando apenas desenvolver o código no Arduino e correr para o abraço. Então peço que acompanhe os próximos post e que qualquer dúvida que venha surgir, por favor comente abaixo!

Um grande abraço e até a próxima!