Programando aplicativos com App Inventor 2 - Oi Codi

Voltar ao Sumário

Oi Codi!

Construindo seu primeiro aplicativo: OiCodi

Em preparação para uma oficina de programação de aplicativos, encontrei a plataforma App Inventor 2, mantida pelo MIT (Massachusetts Institute of Technology). Este é um caminho natural para quem já vinha programando em Blockly, primeiro com o material do code.org, e depois com a criação de robôs utilizando Arduino e Ardublockly. Resolvi traduzir o tutorial inicial, que apresenta esta plataforma (App Inventor) aos futuros desenvolvedores de aplicativos. 

Esta é uma tradução para o Português do documento original: http://appinventor.mit.edu/explore/ai2/hello-codi.html

Agora que você preparou seu computador e seu dispositivo Android, e aprendeu como funciona o Designer e o Editor de Blocos, você está pronto para construir o aplicativo OiCodi. Neste ponto, você deveria ter o Designer ou o Editor de Blocos aberto no seu navegador de Internet (Firefox ou Chrome), e ter seu dispositivo ou um emulador de Android conectado ao App Inventor (Veja as instruções de instalação do App Inventor 2). Ative a opção de menu Projetos/Iniciar novo projeto... e escolha o nome OiCodi para seu projeto.

OiCodi: Clique na abelha, ouça o zumbido!

OiCodi é um aplicativo simples que você pode criar em muito pouco tempo. Você cria um botão que tem uma imagem de Codi, a abelha, e programa o botão para fazer som de zumbido quando ativado.

Para criar o aplicativo, você vai precisar de uma imagem de abelha e um arquivo MP3 com o som de zumbido. Seu instrutor já deve ter carregado os arquivos em uma pasta do computador. Senão, procure esses recursos no artigo original: http://appinventor.mit.edu/explore/ai2/hello-codi.html

Selecione os componentes para criar seu aplicativo

Os Componentes do App Inventor estão localizados no painel esquerdo da Tela do Designer, sob o título Paleta.

Os componentes são os elementos básicos que você usa para criar o aplicativo. Eles são como os ingredientes de uma receita de bolo. Alguns componentes são muito simples, como uma Legenda, que simplesmente mostra um texto na tela, ou um Botão (o primeiro da lista), que inicia uma ação quando é ativado com um clique do mouse.

Outros componentes são mais complexos: uma tela de Desenho e Animação que pode conter uma imagem ou uma animação, um Sensor Acelerômetro que funciona como um controle do Wii e percebe quando você move ou balança seu celular, componentes que enviam mensagens de texto, que tocam música e vídeo, que obtêm informações de sites da Internet, etc.

Para usar um componente no seu aplicativo, você precisa arrastá-lo para o painel Visualizador, dentro da imagem do celular. Quando você faz isto, o componente aparece também na lista do painel Componentes.

Quando você tem um componente selecionado, suas propriedades são apresentadas no painel Propriedades. Estas propriedades são ajustáveis, e mudam a forma como o componente aparece, ou se comporta, no aplicativo.

Veja abaixo uma figura que ilustra os três painéis descritos acima, após movermos um Botão da Paleta para o Visualizador.

Próximos Passos - Selecionar componentes e ajustar propriedades

O aplicativo OiCodi vai ter um Botão que mostra a imagem de abelha que está na sua pasta de desenvolvimento. Para fazer isso:

Passo 1a. Arraste um Botão da Paleta para o Visualisador.

Passo 1b. Para associar a imagem da abelha com o botão, no painel Propriedades, no campo Imagem, clique no texto "Nenhum", e, então, na opção "Enviar Arquivo". Vai surgir uma janela para que você escolha o arquivo de imagem. Clique em "Browse...", e  navegue até escolher o arquivo codi.jpg. Em seguida, clique em "Ok". A imagem vai surgir dentro do botão.

Passo 2. Mude a propriedade Texto do botão: Apague o conteúdo "Texto para Botão1", deixando o campo vazio, de forma que não haja texto sobre a imagem da abelha. Sua tela deve estar como abaixo:

Passo 3. Arraste uma Legenda da Paleta para o Visualizador, logo abaixo da imagem da abelha. Ela vai surgir no painel Componentes como Legenda1.

No painel Propriedades para o componente Legenda1, faça as seguintes alterações:

• Altere a propriedade Texto para  "Toque na Abelha!". Esta mudança vai aparecer no painel Visualizador e no seu dispositivo Android. 
• Altere TamanhoDaFonte para 30. 
• Altere CorDeFundo para qualquer cor da sua preferência. 
• Altere CorDeTexto para uma cor que fique visível sobre a cor de fundo que você escolheu antes.

Veja como deve ficar sua tela se você escolher cor de fundo amarelo e cor de texto vermelho:

Passo 4. No painel da Paleta, clique nas opções de Mídia e arraste um componente Som para o Visualizador. O lugar em que você solta o componente não importa. Ele vai surgir abaixo da imagem do celular, numa área marcada como Componentes Invisíveis, com o nome Som1. Nas Propriedades para Som1, clique na caixa abaixo de Fonte, onde está escrito "Nenhum". Clique em "Enviar Arquivo", em "Browse..." e escolha o arquivo zumbido.mp3 que está na sua pasta de desenvolvimento, e então, clique em Ok.  


Neste ponto, sua tela deve estar como abaixo:

Programando com o Editor de Blocos

Até este ponto, você organizou os componentes na tela do seu aplicativo usando os painéis do Designer no seu navegador de Internet. Para programar o comportamento do aplicativo, você precisa passar para o Editor de Blocos. Para isso, clique no botão Blocos, no lado superior direito da tela.

Agora que você está no Editor de Blocos, siga os próximos passos para programar seu aplicativo usando blocos.

Tocando o Som

Passo 1. No painel de Blocos (o que fica do lado esquerdo), clique na opção Botão1. Surgem diversos blocos relacionados a este componente. Arraste o bloco quando Botão1.Clique para o painel do Visualizador. 

Estes blocos de cor mostarda que você vê são chamados blocos de tratamento de eventos. Eles definem a resposta do dispositivo Android aos eventos, como por exemplo, um clique em um botão, uma sacudida no aparelho, o arrasto do dedo sobre a tela, etc. No nosso caso, o bloco que escolhemos trata um clique no botão.

Passo 2a. Clique na opção Som1 e arraste o bloco chamar Som1.Tocar, encaixando-o dentro do bloco quando Botão1.Clique. Você vai ouvir um estalo quando os blocos se encaixarem.

Os blocos de cor púrpura são blocos de comando de ação, mais específicamente, blocos de Procedimento, e são encaixados dentro dos blocos de tratamento de eventos. Quando um evento ocorre, a sequência de ações dentro do tratador de evento correspondente é executada. No nosso caso, a ação a executar é tocar um som (quando houver um clique no Botão1). 

Para saber mais, procure no site do App Inventor o documento Understanding Blocks in App Inventor 2.

Para rodar seu aplicativo no dispositivo, ative a opção de Menu: Conectar/Assistente. Um QR code vai surgir na tela do computador. Use o App AI2 Companion para ler o QR code. 

Em poucos segundos, o App vai surgir na tela do dispositivo.

Esperimente seu aplicativo! Quando você clicar no botão com a imagem de codi (na tela do seu dispositivo Android), você vai ouvir um zumbido. Parabéns! seu primeiro aplicativo está funcionando! 

Nota: Existe um problema conhecido com o componente Som em alguns dispositivos. Se aparecer uma mensagem "Erro de Sistema" e o som não tocar, ou o som demora muito para tocar, volte à tela do Designer, e troque o componente Som1 por um Tocador (disponível na seção Mídia da Paleta).

Empacotando o seu aplicativo

Enquanto seu dispositivo (ou emulador) estiver conectado ao App Inventor, o aplicativo vai estar rodando em tempo real no dispositivo. Se você desconectar o dispositivo, o aplicativo vai desaparecer. Se você reconectar o dispositivo, o aplicativo volta a funcionar, mas se você quiser que o aplicativo seja instalado permanentemente no dispositivo Android, você precisa "Empacotar" seu código, para gerar um pacote de aplicativo (arquivo apk).

Para "empacotar" o aplicativo, de forma a poder instalar o mesmo no seu dispositivo Android ou no de outra pessoa, clique na opção de menu Compilar no topo da tela do App Inventor. Existem duas opções de compilação:

 1. App (fornecer o QR code para o .apk): Esta opção gera um QR Code correspondente ao aplicativo, que pode ser usado para instalar o mesmo, fazendo o dispositivo ler o QR code. O aplicativo App Inventor Companion tem uma opção para ler o QR code. Note que este método só funciona se a conta do Google em que você está desenvolvento o aplicativo for a mesma que você está usando no dispositivo Android. Para instalar em outros dispositivos, é melhor usar a opção 2.

2. App (salvar .apk no meu computador): Você pode baixar o aplicativo no seu computador como um arquivo .apk, que você vai poder distribuir e compartilhar como quiser, instalando-o manualmente em outros dispositivos.

Revisão

Estes foram os conceitos cobertos neste tutorial:

• Você constrói aplicativos selecionando componentes, e definindo como cada um deve se comportar através de blocos de programação. 
• Você usa o Designer para selecionar componentes e ajustar suas propriedades. Alguns componentes são visíveis, e outros não. 
• Você pode adicionar sons, imagens e animações ao aplicativo enviando os mesmos do seu computador para o App Inventor. 
• Você usa o Editor de Blocos para montar blocos que definem o comportamento dos componentes.
• Blocos quando ... fazer ... definem tratamento de eventos, que indicam o que fazer quando alguma coisa acontece (como um toque em um botão). 
• Blocos de comandos chamar... realizam ações (como tocar um som). 

Para Saber Mais, visite o site do App Inventor: http://appinventor.mit.edu/explore/ai2/hello-codi.html

Artigo original distribuído por Massachusetts Institute of Technology sob a licença: Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) 

Passar ao próximo Tutorial - Desenho