Criando aplicativo com App Inventor: Parte 1

Olá, tudo bem? No post de hoje vamos aprender a como estar Criando aplicativo com App Inventor. Um site de desenvolvimento muito legal pois nos dá infinitas possibilidades de criar nossos próprio aplicativos. Então, vamos nessa?

Conhecendo o App Inventor

Também conhecido como App Inventor for Android, é uma aplicação de código aberto, criado originalmente pela Google, porém hoje ela é mantida pelo (MIT).

Por quê utilizar o App Inventor?

Porque ele permite que os iniciantes em programação de computador criem aplicativos para o sistema operacional Android. Tudo isso baseado na interface gráfica, a qual permite aos usuários, arrastar e soltar objetos visuais.

Assim, um novo aplicativo pode ser facilmente criado e executado em dispositivos Android. Então, hoje será a nossa vez de iniciarmos o nosso aplicativo. Vamos juntos conhecer essa ferramente e colocar a mão na massa!

Qual aplicativo iremos fazer no App Inventor? 

O aplicativo que iremos construir do zero será uma continuação do post sobre o módulo bluetooth, onde através do aplicativo, será possível receber os dados de sensores quaisquer e enviar comandos para controlar uma carga.

Então, vamos dividir esse projeto para poder assim, analisar com calma todo o passo a passo. Ao final dele, vou fazer uma vídeo aula completa mostrando a construção feita junto com vocês. Show?

Conhecendo o App Inventor

Toda a construção do aplicativo será feita através do próprio site do app inventor. Para isso, você vai precisar ter uma conta no google e logar nela.  Para acessar o site, basta clicar no botão abaixo.

Quando logar e criar seu primeiro projeto, vai abrir a seguinte tela:

Será neste painel que iremos adicionar as paletas de opções com os comandos, além de fazer toda a parte gráfica de nosso aplicativo. Então, vamos agora conhecer cada um desses blocos.

Paletas de Comandos

O bloco das paletas é onde todos os comandos e opções gráficas como botões, caixa de texto, navegadores e conexão bluetooth são encontrados. Além disso, todos eles estão divididos em grupos como podemos observar na imagem. Os principais que iremos utilizar são:

• Interface de Usuário
• Organização
• Conectividade

Visualizador

Neste bloco é onde estará a parte gráfica de nosso aplicativo. O que estiver aparecendo nele, é como ficará em seu celular. Imagine ele como basicamente a tela do seu celular e faça as alterações com isso em mente.

Componentes

O bloco de componentes é onde estarão todos os componentes que estamos utilizando na tela. Seja algo gráfico como botão ou invisível na tela como comando bluetooth, eles estarão nesta coluna.

Além disso, é aconselhável que o nome de cada componente seja alterado para melhor identificação quando for desenvolver a programação. Combinado?

Propriedades

O bloco de propriedades é onde todo os efeitos são colocados, neste bloco podemos fazer muitas configurações e deixar letras, cor de fundo, tamanho de caracteres do nosso gosto. Adicionar imagem de fundo na tela e nos botões, adicionar logo, ícone do aplicativo.

Por fim, para cada componente uma coluna de propriedades são apresentadas e nisso vamos trabalhando para configurar cada uma delas da melhor maneira.

Barra de Comandos

Outro lugar importante é a barra de comandos. Lugar onde vamos poder salvar nosso projeto, realizar o download dele, simular no próprio site do app inventor ou até mesmo em nosso celular. Acredita? 

Além disso, na penúltima opção, temos como alterar a linguagem do software. Então, em nosso projeto vamos trabalhar com o “Português do Brasil”. Beleza?

Conhecendo o Painel de Blocos

Para finalizar o nosso estudo inicial sobre o app inventor, vamos conhecer a área de blocos. Para isso, basta clicar no botão “Blocos” como mostra a seta abaixo:

Ao clicar, você vai deparar com a imagem abaixo:

Será nessa área de trabalho, que iremos desenvolver toda a lógica e animações de nosso aplicativo. Para isso, vamos entender mais sobre como ela está dividida.

Coluna de Blocos

Nesta coluna é onde estarão os componentes que adicionamos na tela X lá no painel gráfico.

Portanto, para cada componente, quando clicamos em cima deles, vai abrir uma outra janela com todas as funções deles. Dessa maneira, é só clicar e arrastar para a nossa tela branca ao lado, o visualizador do código.

Bloco de Telas

Continuando, aqui é onde vamos alterar as telas de nosso aplicativo para poder escolher qual iremos programar. Além disso, podemos adicionar novas telas e também excluir caso seja preciso.

Continuação

Por fim, vamos parar por aqui hoje mas fique ligado no próximo post onde vamos começar a configurar o nosso aplicativo e já começar a testar a conexão com o módulo bluetooth. Combinado?