Aula 01 App Inventor

Prévia do material em texto

App Inventor e Android 
 
App Inventor 
App Inventor é um ambiente de programação visual, de código aberto, 
originalmente desenvolvido pela Google e atualmente mantido pelo 
Massachusetts Institute of Technology (MIT). O App Inventor permite que 
pessoas com conhecimentos básicos de programação criem aplicativos para 
o sistema operacional Android. 
App Inventor possui uma interface gráfica amigável, muito semelhante ao 
Scratch, pois permite aos usuários criar interfaces gráficas e programar 
aplicativos arrastando e soltando blocos. 
 
Android 
O sistema operacional Android possui código aberto e foi desenvolvido com o 
objetivo de ser executado em plataformas móveis (tablets, smartphones, TVs, 
domótica, entre outros). Existem muitos dispositivos Android disponíveis e eles 
podem ter diferentes tipos de sensores, tais como GPS, câmera e acelerômetro. 
 
 
Instalação e depuração 
 
Instalação e Depuração no App Inventor 
O App Inventor é um ambiente baseado na Web e, portanto, não é necessário 
instalá-lo no computador, basta ter uma conta Google para utilizá-lo. Se você 
ainda não tiver uma conta, cadastre se no link: 
https://accounts.google.com/SignUp?hl=pt-BR. 
O App Inventor pode ser acessado por meio do link: 
http://appinventor.mit.edu/explore/. 
Para depurar e visualizar as aplicações construídas no App Inventor é preciso 
de um emulador ou conexão USB. Também é possível usar um dispositivo 
móvel Android conectado à rede WI-FI. Depurar significa testar, corrigir, 
esmiuçar ou detalhar. Portanto, depurar um aplicativo significa analisar 
minuciosamente sua execução, validando o código e variáveis utilizadas. 
 
Utilizando o Emulador ou conexão USB 
Um emulador é um programa que reproduz o comportamento de outro 
programa ou equipamento. Com o emulador do App Inventor você pode 
testar e ver como seu aplicativo vai se comportar no seu smartphone, antes 
de você baixar e instalar o aplicativo no seu aparelho. 
Você usa o emulador ou conexão USB quando for depurar ou testar o 
aplicativo no seu computador. Para isso, é necessário instalar o programa 
aiStarter no computador que pode ser obtido em versão Windows ou Mac no 
próprio portal do App Inventor. A instalação é simples: baixe o aiStarter para 
o seu sistema operacional através do link: 
http://appinventor.mit.edu/explore/ai2/setup-emulator.html. Localize o arquivo 
MIT_Appinventor_Tools_2.3.0 (~80 MB) no seu computador e execute-o. 
Siga os passos para a instalação. 
 
Utilizando a rede WI-FI 
Para a depuração e teste via WI-FI é necessário instalar o aplicativo 
AI2Companion num dispositivo móvel Android, que pode ser obtido e 
instalado no site do Google Play. Após instalar o aplicativo você pode usá-lo 
para ler um código QR que será gerado pelo seu aplicativo feito no App 
Inventor. Vamos ver mais detalhes a seguir. 
 
 
Arquitetura 
 
App Inventor implementa de forma visual uma linguagem de programação 
orientada a objetos. Com essa premissa, todos os objetos ou componentes, uma 
caixa de texto ou um sensor GPS por exemplo, têm propriedades, ações 
(comportamentos) e eventos próprios associados aos mesmos. Mas o que são 
esses componentes? 
 
OBJETOS OU COMPONENTES 
Os componentes no App Inventor podem ser de dois tipos: 
• Visíveis: também chamados de “interface de usuário”, são aqueles que aparecem na tela do 
aplicativo. Por exemplo, botões, imagens, caixas de texto, etc. 
 
 
 
• Invisíveis: são aqueles que não precisam ser mostrados na tela aplicativo, mas estão em 
plena função. Por exemplo o GPS ou o acelerômetro. 
É interessante saber que a maioria dos objetos visíveis podem tornar-se 
invisíveis a partir de sua propriedade de ocultar e mostrar o componente na 
tela. Veremos isso mais adiante. 
 
PROPRIEDADES 
Os tipos de objetos visíveis e invisíveis são definidos por um conjunto de 
propriedades específicas que definem seu comportamento e aparência (caso 
seja visível). Por exemplo, um botão tem propriedades como cor, altura, 
largura, alinhamento, etc. Portanto, é possível alterar a aparência de um 
botão na tela, aumentando ou diminuindo seu tamanho e trocando sua cor. 
A Figura abaixo mostra a propriedade "BackgroundColor" do botão sendo 
alterado para a cor amarela. 
 
 
 
AÇÕES OU COMPORTAMENTOS 
O comportamento de um objeto define como ele deve responder a eventos 
ou iniciar suas atividades. Para isso são usados métodos e procedimentos. 
Um método é um conjunto de blocos que, ordenados de forma lógica efetuam uma operação. 
Assim como ocorre com o Scratch, o App Inventor utiliza as cores para os métodos e eventos 
dos objetos. Ele usa a metáfora de quebra-cabeças visando que sejam evitadas combinações 
inválidas no código. Observe a figura abaixo, o bloco when significa que, quando o botão 
chamado “Botao_Escreve” for clicado, algo deverá ocorrer. Algo, neste caso, é o conjunto de 
eventos disparados quando o botão for clicado, por exemplo trocar o texto do objeto "Aviso" 
para “Hello World!!!”. 
 
 
 
Blocos e eventos 
 
TIPOS DE BLOCOS E EVENTOS 
No App Inventor, existem blocos que esperam informações e blocos que 
entregam informações. Nos exemplos abaixo, o bloco “set Aviso.Text to” 
espera uma informação. Já o bloco “Hello World!!!” entrega uma informação. 
É possível perceber visualmente quem recebe e quem entrega informações 
pelo formato do bloco. 
 
Existem blocos que transformam e combinam informações. Por exemplo, o bloco "join", 
recebe duas informações, processa e depois entrega uma informação. Mais 
especificamente, este bloco junta dois textos, de forma que se "Hello World" 
e "!!!" fossem colocados do lado direito, o resultado seria "Hello World!!!". 
 
No App Inventor, os eventos podem ser gerados por: 
• Respostas às ações do usuário: por exemplo, quando o usuário pressiona um botão na tela 
do dispositivo. 
• Externos: por exemplo quando um sensor é acionado sem a intervenção do usuário. O GPS 
e o acelerômetro são funções do dispositivo que funcionam automaticamente sem o usuário 
necessariamente interagir com o aplicativo. 
• Internos: por exemplo, toda vez que o temporizador atingir seu intervalo de tempo. 
• Inicialização: para iniciar algumas atividades antes que a aplicação seja mostrada ao 
usuário. O evento mais comum desse tipo ocorre quando uma janela é aberta. 
• Animação: permitem, por exemplo, reagir a colisões que ocorrem entre os objetos e as 
bordas da tela. 
O App Inventor trata de forma individualizada os diferentes eventos. Um 
aplicativo App Inventor é, basicamente, um conjunto de blocos que responde 
a diferentes eventos. 
 
 
Fechamento 
Agora que você já sabe o que é App Inventor e qual seu princípio básico de 
funcionamento, precisamos dar início à construção dos aplicativos. 
Na próxima aula vamos criar nosso primeiro aplicativo: Hello World. 
 
 
ATIVIDADE 
• Crie o ambiente para começar a implementar aplicativos para 
dispositivos móveis com App Inventor. 
• Se você ainda não tiver uma conta no Google, crie uma para poder usar 
o App Inventor. Acesse: https://accounts.google.com/SignUp?hl=pt-BR. 
• Baixe e instale o emulador aiStarter 
acessando http://appinventor.mit.edu/explore/ai2/setup-emulator.html 
• Baixe e instale o aplicativo AI2Companion no seu dispositivo móvel com 
Android. Procure AI2Companion no Google Play, baixe e instale no 
seu smartphone ou tablet. 
• Explore o ambiente do App Inventor http://appinventor.mit.edu/explore/ e 
tente descobrir como ele funciona. 
• Cite as vantagens e/ou desvantagens que percebeu em relação a 
plataforma. 
 
 
 
 
 
Introdução 
Nesta aula você irá aprender como utilizar o App Inventor para criar um 
aplicativo simples que insere e exclui um texto “Hello World” na tela de seu 
smartphone. Você também irá aprender comoutilizar o aplicativo em um 
emulador. 
Vamos começar? 
 
Construindo o primeiro aplicativo 
Vamos rever passo a passo como criar um aplicativo no App Inventor. 
O primeiro passo é abrir a página do App Inventor em 
http://appinventor.mit.edu/explore/. 
 
 
Para iniciar o desenvolvimento do aplicativo, basta selecionar o botão 
“Create apps”, localizado no canto superior direito da tela. Eventualmente, 
se você não estiver logado em uma conta do Google, uma nova conta 
Google será solicitada e todos os seus projetos serão armazenados na 
nuvem, associados a essa conta. Também é possível armazenar os projetos 
localmente no seu computador, mas é recomendado que deixe-os 
armazenados em nuvem. 
Clique no botão Start New Project e insira o nome do seu projeto, por exemplo 
“HelloWorld”. Veja a imagem abaixo. 
 
 
 
Uma vez confirmado o nome do projeto, a janela do projeto no modo Designer, 
que cuida da interface gráfica, é aberta. O outro modo é o modo Blocks, que 
cuida da parte de funcionamento e da lógica do aplicativo. Os botões Designer 
e Blocks estão localizados no canto superior direito do App Inventor conforme 
mostra a imagem abaixo. Pressionando os botões Designer e Blocks é possível 
alternar entre os dois modos. 
 
 
 
 
Os painéis do modo designer 
A janela do modo Designer está dividida em quatro painéis: 
• Pallete: onde se encontram todos os objetos disponíveis no App Inventor, por exemplo, 
caixas de textos, botões, sensores etc. 
• Viewer: fornece uma visão aproximada da tela do aplicativo, pois contém todos os 
componentes visíveis e invisíveis. Cada objeto da Palette pode ser arrastado até a tela e 
inserido na posição desejada. 
• Components: lista todos os objetos numa janela, hierarquicamente, indicando a sua 
paternidade. Serve para selecionar um determinado objeto e alterar sua propriedade como 
tamanho, cor etc. Também permite que objetos sejam removidos e renomeados. No ato do 
arrasto, o objeto recebe um nome genérico, por exemplo Button1 que pode ser alterado pelo 
usuário. 
• Properties: permite alterar as propriedades de cada objeto selecionado no painel 
Components. 
 
 
A primeira tela Screen1 
O único elemento visível quando se inicia um novo projeto é uma tela em branco chamada 
“Screen1”. No painel Properties podem ser alteradas algumas propriedades, tais como, cor 
de fundo, Imagem de fundo, etc. 
A primeira tela Screen1 é especial e seu nome não pode ser alterado. A propriedade 
AboutScreen, da primeira tela, representa a mensagem que vai aparecer quando o usuário 
procurar informações sobre o aplicativo no sistema operacional Android. 
 
 
 
O próximo passo é arrastar e soltar os objetos da Palette, que irão compor o 
aplicativo, para a área da tela (painel Viewer). O aplicativo que iremos 
desenvolver possui uma etiqueta (texto), uma caixa de texto para entrada de 
texto e dois botões: o primeiro escreve na caixa de texto a mensagem “Hello 
World”. E o segundo botão a deleta. 
O resultado é mostrado na Figura abaixo. Cada objeto é colocado na Viewer 
e recebe um nome sequencial que pode ser alterado posteriormente. Alterar 
o nome do objeto é importante. Esta alteração visa melhorar a legibilidade e 
a depuração do aplicativo. 
 
 
 
Ajustando os objetos na tela 
Os objetos são colocados um em cima do outro, mas podemos alterar o 
layout, por exemplo, colocá-los empilhados e centralizados. Isso pode ser 
feito através das opções AlignHorizontal (Center) e AlignVertical (Top). 
Veja o resultado na figura abaixo. Aproveite para testar as outras opções de 
layout. 
 
 
 
Lembre que os nomes genéricos podem ser alterados. Então vamos fazer isso 
agora para que eles tenham significado. Você pode fazer isso, primeiro 
selecionando o objeto no painel Components e depois clicando no botão 
“Rename”. Altere os nomes dos componentes conforme ilustrado na imagem 
abaixo. Além do nome do componente, o texto que aparece na tela do 
aplicativo também deve ser mudado através da opção “Text” do painel 
Properties. 
 
 
Até agora o aplicativo possui uma tela, mas não executa nada. Na próxima 
unidade, vamos ver como incluir a programação para responder aos eventos 
do aplicativo. 
 
Programando os blocos 
Para incluir a lógica do aplicativo é preciso programar os blocos com comandos. 
Pressione então o botão Blocks que abre a tela apresentada abaixo. 
 
 
 
A janela Blocks está dividia em dois painéis verticais Blocks (lado esquerdo) 
e Viewer. 
• Blocks (possui três tipos): 
• Built-in: onde se encontram os blocos lógicos que incluem controle, operações de 
texto, variáveis etc. 
• Screen: que apresenta os componentes inseridos no modo Design. 
• Any Component: para ajustes das propriedades dos objetos. 
• Viewer: fornece uma visão do código do aplicativo, ou seja, onde os blocos 
são encaixados uns aos outros. 
Em nosso primeiro aplicativo desejamos que ao clicar no Botao_Escreve, o 
texto “Hello World” apareça na caixa de texto Aviso. E, quando clicar no 
Botao_Limpa, o texto seja deletado. 
Para colocar esta funcionalidade no aplicativo, basta selecionar o componente 
Botao_Escreve e, em seguida, arrastar o bloco “when 
Botao_Escreve.click” até a área Viewer. 
 
 
 
Quando esse botão for clicado ele deverá acrescentar o texto "Hello World" 
na caixa Aviso. Para isso, usamos o procedimento “Set Aviso.text”, que 
aparece quando clicamos no componente Aviso e encaixá-lo dentro do evento 
click do Botao_Escrever como ilustrado na figura abaixo. 
 
 
Em seguida é necessário inserir um bloco de texto constante para mostrar a 
mensagem "Hello world". O bloco de texto constante se encontra dentro do 
grupo Text de blocos Built-in. Clique nele, arraste-o para dentro do 
procedimento e insira o texto "Hello world!!!". 
 
 
 
O procedimento se repete para o Botao_Limpar acrescentando um texto em 
branco. O resultado final do nosso primeiro aplicativo é mostrado na figura 
abaixo. 
 
 
Depurando o aplicativo Hello World 
Agora que construímos nosso primeiro aplicativo, será que ele funciona? 
Podemos verificar através da aplicação de técnicas de teste e depuração. 
O App Inventor fornece três formas de testar e depurar o aplicativo: 
• Projeto desenvolvido no computador e a depuração feita em tempo real com 
um dispositivo real, smartphone por exemplo, conectado via Wi-Fi. Para isso 
é preciso instalar no smartphone o aplicativo MIT AI2 Companion que pode 
ser obtido na loja de aplicativos Google Play. 
• Projeto montado no computador e a depuração feita em tempo real com um 
emulador na tela. Para isso deve-se instalar o programa aiStarter disponível 
na página do App Inventor. 
• Projeto desenvolvido no computador e a depuração feita em tempo real com 
um dispositivo real conectado por cabo USB. 
 
Depuração por emulador 
Vamos aprender como depurar usando o emulador, pois nossa primeira 
aplicação não precisa de recursos sofisticados do telefone celular como GPS 
e acelerômetro, então é possível testá-lo no emulador. 
Para isso, o projeto tem que estar rodando no seu computador e a depuração 
será feita em tempo real com um emulador na tela de seu computador. 
No menu iniciar do seu computador, selecione a pasta “MIT APP Inventor 
Tools” e abra o programa aiStater. Se você estiver usando o Windows, o 
caminho é ilustrado na Figura abaixo. 
 
 
Deixe a janela do aiStater rodando no seu computador, como mostra a figura 
abaixo. ATENÇÃO: NÃO FECHE ESTA JANELA! 
 
 
 
Agora, volte para a tela do do App inventor, selecione a opção Connect e, 
em seguida, selecione a opção Emulator (lembre-se que o programa 
aiStarter tem que estar rodando no seu computador). 
 
 
Após alguns minutos de inicialização, o emulador mostrará o nossoaplicativo 
rodando conforme ilustrado na imagem abaixo. A tela da esquerda mostra o 
emulador executando nosso aplicativo e a tela da direita mostra no emulador 
o que acontece quando clicamos no botão "Escreve". 
 
 
 
É importante ressaltar que enquanto você estiver depurando o seu aplicativo 
no emulador, qualquer alteração feita no aplicativo é automaticamente passada 
para o emulador. Assim, você pode fazer alterações e testar imediatamente. 
Quando o trabalho de testes estiver finalizado, basta resetar a conexão do 
menu Connect. 
 
Depuração por Wi-Fi 
Para usar o método de depuração por Wi-Fi, deve ser instalado o aplicativo 
“MIT AI2 Companion” no dispositivo móvel no qual serão realizados os testes. 
Este aplicativo pode ser obtido na loja de aplicativos Google Play. 
Caso o aplicativo MIT AI2 Companion não possa ser instalado a partir do 
Google Play, é possível baixar o instalador do aplicativo, arquivo com 
extensão .apk e instalar manualmente. 
Com este método de depuração, o projeto é desenvolvido no computador e 
a depuração é feita em tempo real com um dispositivo móvel (smartphone 
ou tablet), conectado via Wi-Fi. Lembre-se que ambos os dispositivos 
(computador e smartphone ou tablet) devem estar conectados na mesma 
rede Wi-Fi. 
O MIT AI2 Companion espera um código para iniciar o processo de emulação 
do aplicativo no smartphone ou tablet. Esse código é uma palavra de 6 letras 
que pode ser digitada ou pode ser obtida a partir de um código QR Code. Para 
gerar esse código, basta escolher a opção AI Companion no menu Connect 
do App Inventor. 
 
 
O código gerado é apresentado na imagem abaixo. Tanto a palavra de 6 letras 
quanto o código aparecem na tela do computador que está rodando o App 
Inventor. 
 
 
 
Após o código ter sido gerado, basta abrir o aplicativo MIT AI2 Companion no 
seu smartphone ou tablet. A tela abaixo será apresentada. Note que você 
pode digitar o código de 6 letras ou clicar em scan QR code e apontar a 
câmera de seu smartphone para a tela do computador para fazer a leitura do 
código gerado. 
 
 
Uma vez aceito o código, a emulação no smartphone ou tablet será iniciada, 
como mostra a Figura abaixo. 
 
 
 
Caso você esteja usando redes de Wi-Fi diferentes, você pode usar a opção 
Build e gerar um outro QR Code. Para isso, selecione a opção Build -> App 
(provide QR code for .apk). 
 
 
 
O código gerado é apresentado na imagem abaixo. Tanto a palavra de 6 letras 
quanto o código aparecem na tela do computador que está rodando o App 
Inventor. 
 
 
 
ATIVIDADE 
O exercício desta aula é implementar seu primeiro aplicativo com App Inventor! 
Se você quiser, implemente o aplicativo HelloWorld como explicado nesta aula. 
Mas, se preferir, implemente o aplicativo descrito abaixo. Ou então use sua 
criatividade e invente outro aplicativo. Implemente e teste do emulador aiStarter 
ou no AI2Companion. 
Crie um aplicativo com 1 caixa de texto e 3 botões. Na caixa de texto escreva 
“Meu primeiro aplicativo”. Crie 3 botões: “vermelho”, “azul”, “amarelo”. Programe 
os botões para que o texto “Meu primeiro aplicativo” mude de cor de acordo com 
o botão que o usuário apertou: “vermelho”, “azul” ou “amarelo”. Teste seu 
aplicativo. 
 
 
Extraído de http://codeiot.org.br/ - Acessado em 27/02/2018