App Inventor: Introducao

Introdução ao App Inventor

O App Inventor é um ambiente de programação, desenvolvido no MIT, que permite a qualquer pessoa desenvolver aplicativos para smartphones e tablets.

Acessando o ambiente de programação do App Inventor

A programação utilizando o App Inventor é realizada de forma online a partir do link App Inventor e necessita que o usuário realize um cadastro com uma conta de e-mail do gmail (ex.: seunome@gmail.com).

Uma vez iniciado um novo projeto, o ambiente de programação do App Inventor apresenta duas área de trabalho:

• Designer: utilizada para projetar a interface do aplicativo, e permite incluir elementos como a tela de fundo, botões, caixas de seleção, legendas etc;
• Blocos: utilizada para construir a lógica de programação do sistema, podendo incluir estruturas de controle, funções lógicas e matemáticas e outras.

Acessando a aplicação desenvolvida no smartphone

Para testar ou instalar uma aplicação desenvolvida com o App Inventor em um smartphone é necessário instalar o aplicativo MIT AI2 Companion disponível no Google Play Store para dispositivos Android (também disponível para iOS).

Teste de uma aplicação

No ambiente de programação pode-se utilizar a opção Conectar/Assistente AI, a qual vai gerar um QR code que deve ser lido pelo aplicativo MIT AI2 Companion.

Instalação de uma aplicação

No ambiente de programação deve-se utilizar a opção Compilar, a qual vai gerar um QR code que deve ser lido pelo aplicativo MIT AI2 Companion.

A opção de Compilar também permite gerar um arquivo com a extensão .apk para posteriormente instalada no smartphone.

Exemplo de aplicação

Hello Codi

Vamos utilizar como exemplo a aplicação Hello Codi, apresentada nos tutoriais da App Inventor.

Passo a passo

Primeiro devemos configurar o Design da tela, depois devemos programar os Blocos de execução ao aplicativo.

Baixar arquivos auxiliares

1. Baixar os arquivos disponíveis na página Hello Codi:
   • Figura: codi.jpg (Clique botão direito e salve)
   • Som: Bee-Sound.mp3 (Clique botão direito e salve)

Design

1. Na seção Design do App Inventor, adicione os componentes:
   • Botão
   • Legenda
2. Configuração do botão:
   • Apague o texto da legenda do botão
   • Escolha como imagem para o botão a figura codi.jpg
3. Configuração da legenda:
   • Escreve na legenda "Clique na abelhinha"
4. Inclusão do som, que é um componente não visível.

Blocos

1. Programar o bloco
   • Quando Botão.clique fazer
   • Tocar som

Referências

---

Evandro.cantu (discussão) 20h23min de 6 de novembro de 2023 (UTC)

---