O que é um app?
Um aplicativo é um software criado para rodar em dispositivos móveis. Ele possui telas, comandos, dados e uma finalidade.
Construindo um aplicativo Agenda de Contatos
Neste tutorial, vamos estudar os fundamentos da programação mobile e construir, passo a passo, a interface de um aplicativo de agenda de contatos usando o App Inventor.
O que será construído?
A primeira versão do projeto será focada na construção visual da interface, utilizando a aba Designer do App Inventor.
Entender→Planejar→Organizar→Montar a interface
Importante: primeiro vamos construir a interface no Designer. Depois,
aprenderemos a executar o aplicativo com o MIT AI2 Companion e a programar seu comportamento usando Blocos.
1
Fundamentos da Programação Mobile
Antes de construir um aplicativo, é preciso entender o que ele é e por que ele existe.
Por que aplicativos existem?
Aplicativos existem para resolver problemas, facilitar tarefas e atender necessidades de pessoas, empresas e serviços.
Usuário x desenvolvedor
O usuário utiliza o aplicativo. O desenvolvedor pensa em como o aplicativo será construído e como cada etapa funcionará.
Pensar em fluxo
Ao criar um app, não basta pensar na aparência. É preciso entender o caminho: telas, ações, dados e resultados.
Problema→Fluxo→Telas→Ações
Interface, lógica e dados
Um aplicativo combina interface visual, lógica de funcionamento e dados que podem ser digitados, processados, salvos ou enviados.
Exercício mental
Escolha um aplicativo que você utiliza no dia a dia e responda:
- Que problema ele resolve?
- Qual é a ação principal?
- Quais telas aparecem?
- Quais dados ele utiliza?
2
Do problema à solução
Todo aplicativo começa com um problema que precisa ser compreendido.
O problema da agenda em papel
Uma agenda de contatos em papel pode funcionar, mas apresenta limitações: dificuldade para alterar dados, localizar contatos, organizar informações e evitar rasuras.
A solução proposta será transformar essa necessidade em um aplicativo simples de agenda de contatos.
1. Levantar requisitos
Conversar com o usuário para entender o que o aplicativo precisa fazer.
2. Planejar a tela
Desenhar a interface antes de construir, usando um wireframe.
3. Construir
Montar a tela no Designer e, depois, adicionar comportamento com blocos.
3
Conhecendo o App Inventor
O App Inventor permite construir aplicativos por meio de componentes visuais e blocos.
Acesso ao ambiente
- ai2.appinventor.mit.edu - acesso com conta Google.
- code.appinventor.mit.edu - acesso por código, sem conta Google.
Designer e Blocos
O Designer monta a interface. Os Blocos programam o comportamento.
Caixa de ferramentas usada neste projeto
Nesta primeira versão, usaremos componentes das áreas Interface de Usuário e Organização.
4
Entendendo a estrutura do Designer
Antes de montar a tela, precisamos entender como os componentes serão organizados.
5
Construindo a interface da Agenda
A tela será construída por etapas. Em cada etapa, veja o que inserir, quais propriedades alterar e qual será o resultado.
Etapa 1
Projeto recém-criado
A tela inicial aparece vazia, com o título padrão Screen1.
Estado inicial
- Tela principal: Screen1
- Ainda sem componentes visuais
Etapa 2
Configurando a Screen1
Antes de inserir os componentes, configure a tela principal do aplicativo.
Faça assim
- Selecione Screen1.
- Altere o título do aplicativo.
- Ajuste o alinhamento e a orientação da tela.
Propriedades
- Título: Agenda de Contatos
- AlinhamentoHorizontal: Centro
- AlinhamentoVertical: Superior
- Rolável: falso
Etapa 3
Inserindo OrgTopoTitulo
Agora será criada a faixa superior da interface, onde aparece o título da agenda.
Faça assim
- Na aba Organização, arraste uma OrganizaçãoHorizontal para a Screen1.
- Renomeie o componente para OrgTopoTitulo.
- Na aba Interface de Usuário, arraste uma Legenda para dentro de OrgTopoTitulo.
- Renomeie a legenda para LegTitulo.
Propriedades
- OrgTopoTitulo - Largura: Preencher principal
- OrgTopoTitulo - Altura: Automático
- OrgTopoTitulo - AlinhamentoHorizontal: Centro
- OrgTopoTitulo - AlinhamentoVertical: Centro
- LegTitulo - Texto: Agenda de Contatos
- LegTitulo - Largura: Preencher principal
- LegTitulo - AlinhamentoTexto: Centro
- LegTitulo - FonteNegrito: verdadeiro
- LegTitulo - TamanhoDaFonte: 20
- LegTitulo - CorDoTexto: azul escuro
Etapa 4
Inserindo OrgFotoDados
Esta etapa cria a área principal da tela, dividindo foto e dados pessoais.
Faça assim
- Arraste uma OrganizaçãoHorizontal para a Screen1.
- Renomeie para OrgFotoDados.
- Dentro dela, insira duas organizações verticais: OrgFoto e OrgDadosPessoais.
- Dentro de OrgFoto, insira uma Imagem e renomeie para ImgFoto.
- Dentro de OrgDadosPessoais, insira as legendas e caixas de texto de Nome, Telefone e E-mail.
Propriedades principais
- OrgFotoDados - Largura: Preencher principal
- OrgFotoDados - Altura: Automático
- OrgFoto - Largura: 120 px
- OrgFoto - Altura: 120 px
- ImgFoto - Imagem: Foto.png
- ImgFoto - Largura: Preencher principal
- ImgFoto - Altura: Preencher principal
- ImgFoto - RedimensionarParaCaber: verdadeiro
- OrgDadosPessoais - Largura: Preencher principal
- LegNome - Texto: Nome:
- CxTNome - Largura: Preencher principal
- LegTelefone - Texto: Telefone:
- CxTTelefone - Largura: Preencher principal
- LegEmail - Texto: E-mail
- CxTEmail - Largura: Preencher principal
Etapa 5
Inserindo OrgBotoes1
A primeira área de botões reúne ações rápidas do contato.
Componentes adicionados nesta etapa
- OrgBotoes1
- btWhatsApp
- btEmail
- btEndereco
- btNotas
Faça assim
- Insira uma OrganizaçãoHorizontal abaixo da área de foto e dados.
- Renomeie para OrgBotoes1.
- Dentro dela, insira quatro botões.
- Renomeie os botões para btWhatsApp, btEmail, btEndereco e btNotas.
Propriedades
- OrgBotoes1 - Largura: Preencher principal
- btWhatsApp - Texto: WhatsApp
- btWhatsApp - Largura: Preencher principal
- btWhatsApp - Altura: Automático
- btWhatsApp - CorDoTexto: verde
- btEmail - Texto: E-Mail
- btEmail - Largura: Preencher principal
- btEndereco - Texto: Endereço
- btEndereco - Largura: Preencher principal
- btNotas - Texto: Notas
- btNotas - Largura: Preencher principal
Etapa 6
Inserindo OrgCidadeEstado
A área de cidade e estado é formada por uma organização horizontal com duas colunas verticais.
Componentes adicionados nesta etapa
- OrgCidadeEstado
- OrgCidade, LegCidade, CxTCidade
- OrgEstado, LegEstado, CxTEstado
Faça assim
- Insira uma OrganizaçãoHorizontal e renomeie para OrgCidadeEstado.
- Dentro dela, insira duas OrganizaçõesVerticais.
- Renomeie para OrgCidade e OrgEstado.
- Em cada coluna, insira uma legenda e uma caixa de texto.
Propriedades
- OrgCidadeEstado - Largura: Preencher principal
- OrgCidade - Largura: 50%
- LegCidade - Texto: Cidade:
- LegCidade - FonteNegrito: verdadeiro
- CxTCidade - Largura: Preencher principal
- CxTCidade - Altura: Automático
- OrgEstado - Largura: 50%
- LegEstado - Texto: Estado:
- LegEstado - FonteNegrito: verdadeiro
- CxTEstado - Largura: Preencher principal
- CxTEstado - Altura: Automático
Etapa 7
Inserindo OrgBotoes2
A última organização da interface contém os botões principais: Salvar e Cancelar.
Componentes adicionados nesta etapa
- OrgBotoes2
- btSalvar
- btCancelar
Faça assim
- Insira uma OrganizaçãoHorizontal e renomeie para OrgBotoes2.
- Dentro dela, insira dois botões.
- Renomeie para btSalvar e btCancelar.
Propriedades
- OrgBotoes2 - Largura: Preencher principal
- btSalvar - Texto: Salvar
- btSalvar - Largura: 50%
- btSalvar - Altura: 50 px
- btSalvar - CorDeFundo: verde
- btSalvar - CorDoTexto: branco
- btCancelar - Texto: Cancelar
- btCancelar - Largura: 50%
- btCancelar - Altura: 50 px
- btCancelar - CorDeFundo: vermelho
- btCancelar - CorDoTexto: branco
Até aqui, a interface está montada. Antes de programar os blocos, vamos aprender a executar o aplicativo no celular usando o MIT AI2 Companion.
6
Executando o Aplicativo
Agora vamos testar a Agenda de Contatos no celular usando o MIT AI2 Companion.
Importante: o MIT AI2 Companion deve ser instalado diretamente no celular que será usado para testar o aplicativo.
No Android, abra a Play Store no próprio celular e procure por MIT AI2 Companion.
No iPhone, verifique a disponibilidade do aplicativo na App Store e instale pelo próprio aparelho.
Etapa 1
Instalar o MIT AI2 Companion
O MIT AI2 Companion é o aplicativo que permite testar o projeto do App Inventor no celular sem gerar um APK a cada alteração.
Faça assim
- Abra a loja de aplicativos no celular.
- Procure por MIT AI2 Companion.
- Toque em Instalar.
- Aguarde a instalação ser concluída.
O Companion funciona como uma ponte entre o App Inventor e o smartphone. Assim, o aluno consegue testar o aplicativo instantaneamente.
Etapa 2
Abrir o Companion e chamar o Assistente AI
Com o aplicativo instalado no celular, volte ao App Inventor no computador para iniciar a conexão.
Faça assim
- Abra o MIT AI2 Companion no celular.
- No App Inventor, clique no menu Conectar.
- Escolha a opção Assistente AI.
Etapa 3
Ler o QR Code com o celular
O App Inventor exibirá um QR Code. Esse código será lido pelo Companion para conectar o projeto ao celular.
Faça assim
- No celular, escolha a opção para ler o QR Code.
- Aponte a câmera para o QR Code mostrado na tela do computador.
- Aguarde o início da conexão.
Etapa 4
Aguardar terminar a execução da simulação
Depois da leitura do QR Code, o App Inventor envia temporariamente o projeto para o celular.
Faça assim
- Aguarde a barra de progresso terminar.
- Não feche o navegador durante esse processo.
- Não feche o aplicativo Companion no celular.
O tempo de carregamento pode variar de acordo com a internet, o computador e o celular utilizados.
Etapa 5
Aplicativo aberto no celular
Quando a conexão terminar, a Agenda de Contatos aparecerá no celular.
Agora você pode testar
- Preencher os campos da tela.
- Verificar o layout criado no Designer.
- Observar se os botões aparecem na posição correta.
- Preparar o aplicativo para receber os blocos de programação.
Com o aplicativo em execução, podemos avançar para a programação dos blocos. É nos blocos que a interface ganha comportamento.
7
Blocos da Agenda de Contatos
Agora vamos programar o comportamento da interface seguindo a mesma ordem visual do aplicativo.
Importante: nesta etapa, o aplicativo ainda não grava contatos em banco de dados e não abre aplicativos externos.
Os botões de WhatsApp, E-mail, Endereço, Notas, Salvar e Cancelar apenas simulam ações por meio de mensagens.
O objetivo é aprender eventos, mensagens, procedimentos, chamadas de procedimento e validações.
Etapa 1
Campos: destacando o campo ativo
Antes de programar os botões, vamos melhorar a interação dos campos de texto.
Funcionamento
- Quando um campo recebe foco, ele muda a cor do texto e do fundo.
- Quando o campo perde foco, as cores voltam ao padrão.
- A mesma lógica é aplicada em Nome, Telefone, E-mail, Cidade e Estado.
Experimente: troque as cores usadas quando o campo recebe foco.
Etapa 2
Botão WhatsApp
O botão WhatsApp será programado para mostrar uma mensagem com o nome e o telefone digitados.
Funcionamento
- O evento usado é Quando btWhatsApp.Clique.
- O Notificador exibe uma mensagem juntando o nome do contato com o telefone.
- Nesta primeira versão, o botão não abre o WhatsApp de verdade.
Este bloco é uma simulação de consulta. Ele serve para treinar eventos de clique e mensagens no App Inventor.
Experimente: personalize o texto mostrado na mensagem do WhatsApp.
Etapa 3
Botão E-mail
O botão E-mail será programado para mostrar uma mensagem com o nome e o e-mail digitados.
Funcionamento
- O evento usado é Quando btEmail.Clique.
- O Notificador exibe uma mensagem juntando o nome do contato com o e-mail.
- Nesta primeira versão, o botão não envia e-mail de verdade.
Assim como o WhatsApp, este botão apenas simula uma consulta aos dados digitados na tela.
Experimente: altere a mensagem para aparecer em duas linhas.
Etapa 4
Botão Endereço
O botão Endereço exibe uma mensagem reunindo os dados de localização do contato.
Funcionamento
- Mostra o nome do contato.
- Mostra a cidade digitada.
- Mostra o estado digitado.
- Também funciona como uma consulta simulada.
Experimente: altere a ordem das informações exibidas na mensagem.
Etapa 5
Botão Notas
O botão Notas informa que o contato ainda não possui nenhuma nota cadastrada.
Funcionamento
- Mostra o nome do contato.
- Exibe uma mensagem simples sobre ausência de notas.
- Não salva nem consulta informações em banco de dados nesta etapa.
Experimente: personalize a mensagem exibida no botão Notas.
Etapa 6
Procedimento Limpar
Antes de programar os botões finais, vamos criar um procedimento para limpar os campos da tela.
Por que criar um procedimento?
- Um procedimento reúne vários blocos em uma única ação com nome.
- O procedimento Limpar apaga Nome, Telefone, E-mail, Cidade e Estado.
- Depois da limpeza, ele devolve o foco para o campo Nome.
- Assim, não precisamos repetir os mesmos blocos em vários botões.
Primeiro criamos o procedimento. Depois, quando precisarmos limpar a tela, apenas chamamos o procedimento Limpar.
Experimente: faça o procedimento Limpar também mostrar uma mensagem ao final.
Etapa 7
Botão Salvar
O botão Salvar verifica os campos obrigatórios antes de simular o cadastro do contato.
Funcionamento
- Se o campo Nome estiver vazio, mostra uma mensagem de aviso e volta o foco para Nome.
- Se o campo Telefone estiver vazio, mostra outra mensagem de aviso e volta o foco para Telefone.
- Se os dois campos estiverem preenchidos, mostra uma mensagem de contato salvo com sucesso.
- Ao final, chama o procedimento Limpar criado na etapa anterior.
Nesta etapa, o contato ainda não é gravado permanentemente. O botão apenas simula o cadastro e limpa a tela.
Experimente: acrescente a cidade na mensagem de confirmação.
Etapa 8
Botão Cancelar
O botão Cancelar mostra uma mensagem de cancelamento e limpa os campos da tela.
Funcionamento
- Mostra que o contato não será salvo.
- Chama o procedimento Limpar.
- Reaproveita os blocos de limpeza sem precisar repetir tudo dentro do botão.
Observe que o botão Cancelar não limpa os campos manualmente. Ele chama o procedimento Limpar, que já foi criado para isso.
Experimente: personalize a mensagem de cancelamento.
Etapa 9
Testando a Agenda de Contatos
Agora que todos os blocos foram programados, é hora de validar o funcionamento do aplicativo. Em desenvolvimento de software, programar é apenas uma parte do trabalho. Também é necessário testar para verificar se tudo funciona conforme o esperado.
Por que testar?
- Confirmar que os blocos executam as ações corretas.
- Identificar erros antes que o aplicativo seja entregue ao usuário.
- Verificar se as mensagens aparecem corretamente.
- Garantir que as validações estão funcionando.
- Comprovar que o aplicativo se comporta da maneira planejada.
Faça assim
- Abra novamente o aplicativo MIT AI2 Companion no celular.
- No computador, volte ao App Inventor.
- Clique em Conectar → Assistente AI.
- Leia o QR Code com o celular, caso a conexão não esteja ativa.
- Aguarde o carregamento da versão atualizada do projeto.
- Realize todos os testes descritos abaixo.
Procedimentos de teste
- Teste 1: clique em cada campo de texto e verifique se as cores mudam quando o campo recebe foco.
- Teste 2: clique fora do campo e confirme se as cores retornam ao padrão.
- Teste 3: preencha Nome e Telefone e clique em WhatsApp. Verifique se a mensagem exibe os dados corretamente.
- Teste 4: preencha Nome e E-mail e clique em E-mail. Verifique se as informações aparecem corretamente.
- Teste 5: preencha Cidade e Estado e clique em Endereço. Verifique se a mensagem mostra os dados digitados.
- Teste 6: clique em Notas e confirme se a mensagem é exibida.
- Teste 7: tente salvar deixando o campo Nome vazio.
- Teste 8: tente salvar deixando o campo Telefone vazio.
- Teste 9: preencha os campos obrigatórios e clique em Salvar. Verifique se a mensagem de sucesso aparece.
- Teste 10: confirme se os campos são limpos após o salvamento.
- Teste 11: clique em Cancelar e verifique se os campos são limpos.
- Teste 12: confirme se o foco retorna ao campo Nome após a limpeza.
Os testes não servem apenas para encontrar erros. Eles ajudam o desenvolvedor a entender melhor o comportamento do sistema e a garantir que cada funcionalidade realmente atende ao objetivo para o qual foi criada.
Experimente: peça para outra pessoa utilizar o aplicativo e observe se ela consegue entender o funcionamento sem receber explicações. Anote sugestões de melhoria que possam tornar a interface mais clara e intuitiva.
Com os testes concluídos, podemos avançar para os desafios finais. Eles servirão para reforçar os conceitos estudados e incentivar melhorias na primeira versão da Agenda de Contatos.
Desafios finais dos blocos
- Adicione uma validação para o campo Cidade.
- Adicione uma validação para o campo Estado.
- Personalize todas as mensagens exibidas pelo Notificador.
- Altere as cores dos campos quando recebem foco.
- Explique por que o procedimento Limpar evita repetição de blocos.
Com os blocos, o aplicativo passa a reagir às ações do usuário. Ainda assim, esta é uma primeira versão funcional:
ela simula cadastro e consultas, mas ainda não armazena contatos de forma permanente.
8
Projeto 2 — Usando API: Consulta CEP
Agora o aplicativo passa a buscar informações na internet usando o componente Web do App Inventor.
Foco deste projeto: aprender como um aplicativo consulta uma API, recebe uma resposta em JSON e atualiza a tela com os dados retornados. O App Inventor será a ferramenta para praticar esse fluxo.
Contextualização
Muitos aplicativos não possuem todas as informações dentro do próprio celular. Eles consultam serviços disponíveis na internet para buscar dados atualizados, como CEP, clima, mapas, cotação de moedas, notícias e informações de produtos.
Neste projeto, o aplicativo enviará um CEP para o serviço ViaCEP e receberá como resposta dados de endereço. Para manter o foco, serão exibidos apenas a cidade e o estado.
Situação-problema
Imagine que uma empresa precisa criar uma tela simples para facilitar o preenchimento de cadastros. Em vez de pedir que o usuário digite cidade e estado manualmente, o aplicativo pode consultar essas informações automaticamente a partir do CEP.
Seu desafio é criar um aplicativo no App Inventor que leia um CEP, consulte a API ViaCEP e mostre na tela a cidade e o estado encontrados.
O que é uma API?
API é uma forma organizada de comunicação entre sistemas. Um aplicativo faz um pedido, um serviço processa esse pedido e devolve uma resposta em um formato que o programa consegue interpretar.
Cliente e servidor
No nosso exemplo, o aplicativo feito no App Inventor é o cliente. O ViaCEP é o serviço consultado. A internet faz a ponte entre os dois.
Fluxo do projeto
Digitar CEP → montar URL → consultar API → receber JSON → extrair cidade e estado → atualizar a tela.
Conhecendo o ViaCEP
O ViaCEP é um serviço gratuito para consulta de CEPs brasileiros. A consulta é feita por meio de uma URL organizada.
| Parte | Significado |
|---|---|
| https://viacep.com.br/ws/ | Endereço base do serviço. |
| 01001000 | CEP enviado para consulta. |
| /json/ | Formato da resposta solicitada. |
No aplicativo, o CEP digitado será encaixado no meio da URL: https://viacep.com.br/ws/CEP/json/.
Entendendo o JSON
JSON é um formato de dados baseado em pares de chave e valor. No retorno do ViaCEP, cada informação possui um nome.
uf
Indica o estado retornado pela API. Exemplo: SP.
localidade
Indica a cidade retornada pela API. Exemplo: São Paulo.
conteúdoDaResposta
No App Inventor, é o texto recebido pelo componente Web depois da consulta.
Construindo a interface
Monte uma tela simples para digitar o CEP, pesquisar e mostrar os campos de resultado.
| Componente | Nome | Função |
|---|---|---|
| Legenda | LegCEP | Orientar o usuário sobre o CEP. |
| CaixaDeTexto | CxCEP | Receber o CEP digitado. |
| Botão | BtPesquisar | Iniciar a consulta na API. |
| Legenda | LegEstado | Identificar o campo de estado. |
| CaixaDeTexto | CxEstado | Mostrar o estado retornado. |
| Legenda | LegCidade | Identificar o campo de cidade. |
| CaixaDeTexto | CxCidade | Mostrar a cidade retornada. |
| Web | Web1 | Consultar a API e receber a resposta. |
Componentes utilizados
Interface de Usuário
Os componentes visuais ficam na categoria Interface de Usuário: legenda, caixa de texto e botão.
Árvore de componentes
A tela utiliza poucos componentes visuais e um componente invisível: Web1.
O componente Web
O componente Web fica na categoria Conectividade. Ele permite acessar endereços da internet, enviar requisições e receber respostas.
Ao ser inserido, ele aparece na parte inferior como componente invisível.
Enviando a consulta
Quando o botão BtPesquisar for clicado, o aplicativo monta a URL juntando o endereço base do ViaCEP, o CEP digitado e o final /json/.
Depois disso, o bloco chama Web1.Obter para fazer a consulta.
Recebendo a resposta
Quando o componente Web recebe a resposta, o evento Web1.RecebeuTexto é executado automaticamente.
O texto recebido é decodificado como JSON. Em seguida, o aplicativo busca as chaves uf e localidade para preencher estado e cidade.
Testando o aplicativo
- Execute o aplicativo usando o MIT AI2 Companion.
- Digite um CEP válido no campo CxCEP.
- Clique em Pesquisar.
- Verifique se o estado aparece em CxEstado.
- Verifique se a cidade aparece em CxCidade.
- Teste outro CEP e observe se os dados mudam.
Desafios:
- Mostre também o bairro retornado pela API.
- Mostre também o logradouro.
- Crie um botão Limpar para apagar CEP, cidade e estado.
- Pesquise o que acontece quando o CEP não é encontrado.
Você acabou de aprender
- Que uma API permite a comunicação entre sistemas.
- Como montar uma URL de consulta.
- Como usar o componente Web do App Inventor.
- Como receber uma resposta em JSON.
- Como buscar valores por chave dentro de um dicionário.
- Como atualizar a interface com dados vindos da internet.
Conclusão: neste projeto, o aplicativo deixou de trabalhar apenas com dados digitados na tela e passou a consultar informações externas. Esse é um passo importante para criar aplicativos mais úteis e conectados. No próximo avanço, esse conhecimento ajudará a transformar uma ideia criada com auxílio de IA em um aplicativo real: Do Assistente ao Aplicativo.
9
Publicação APP
Depois de testar o aplicativo no Companion, o App Inventor permite gerar arquivos para instalação ou publicação.
Importante: esta etapa não substitui os testes. Primeiro o aplicativo deve funcionar corretamente no MIT AI2 Companion. Depois disso, ele pode ser compilado.
Compilando o aplicativo
O menu Compilar oferece formatos diferentes para distribuir o aplicativo Android.
APK
Arquivo usado para instalar o aplicativo diretamente em um dispositivo Android. É útil para testes, demonstrações e instalação manual.
AAB
Formato utilizado para publicação na Google Play. Ele é indicado quando o objetivo é distribuir o aplicativo oficialmente pela loja.
Antes de publicar
Revise interface, textos, funcionamento, permissões, imagens e testes. Publicar é uma etapa posterior ao desenvolvimento.
99
Exercícios de Interface
Pratique a construção de telas no App Inventor usando organizações, componentes visuais e propriedades.
Enunciado
Minhas Tarefas
Construa a interface de um aplicativo simples para registrar tarefas de estudo.
- Barra superior roxa com título.
- Ícone de tarefa à esquerda.
- Campos: Título, Categoria, Prioridade e Data Limite.
- Campo maior para Descrição.
- Botões: Adicionar, Editar e Excluir.
1. Observe
Analise o layout antes de montar.
Analise o layout antes de montar.
2. Divida
Identifique organizações horizontais e verticais.
Identifique organizações horizontais e verticais.
3. Construa
Monte uma parte por vez no Designer.
Monte uma parte por vez no Designer.
Desafio: use uma organização horizontal para colocar imagem e campos lado a lado.
Enunciado
Cadastro de Produtos
Construa uma interface para cadastrar produtos de uma loja ou estoque.
- Barra superior azul com título.
- Imagem de produto à esquerda.
- Campos: Produto, Código, Preço e Qtd.
- Área separada para Categoria e Fornecedor.
- Botões: Novo, Salvar e Limpar.
1. Planeje
Separe dados principais e dados complementares.
Separe dados principais e dados complementares.
2. Organize
Use caixas agrupadas por assunto.
Use caixas agrupadas por assunto.
3. Ajuste
Distribua os botões com larguras semelhantes.
Distribua os botões com larguras semelhantes.
Desafio: crie grupos visuais usando bordas e cores diferentes.
Enunciado
Controle de Gastos
Construa uma interface para registrar gastos pessoais ou familiares.
- Barra superior verde com título.
- Ícone de dinheiro à esquerda.
- Campos: Descrição, Valor, Data e Tipo.
- Área de Resumo com dois campos.
- Botões: Registrar e Cancelar.
1. Agrupe
Separe entrada de dados e resumo.
Separe entrada de dados e resumo.
2. Compare
Veja o que fica em linha e o que fica em coluna.
Veja o que fica em linha e o que fica em coluna.
3. Finalize
Use dois botões grandes no rodapé.
Use dois botões grandes no rodapé.
Desafio: mantenha o botão Registrar mais destacado que o Cancelar.
Enunciado
Agendar Atendimento
Construa uma interface para agendar um atendimento, reunião ou consulta.
- Barra superior laranja com título.
- Imagem de usuário à esquerda.
- Campos: Nome, Telefone, Data e Horário.
- Campo maior para Observações.
- Botões: Agendar, Alterar e Cancelar.
1. Estruture
Monte a área de identificação.
Monte a área de identificação.
2. Destaque
Separe observações dos demais campos.
Separe observações dos demais campos.
3. Distribua
Coloque três botões no final.
Coloque três botões no final.
Desafio: deixe o botão Agendar com a mesma cor do cabeçalho.
Enunciado
Biblioteca Escolar
Construa uma interface para registrar livros e empréstimos de uma biblioteca.
- Barra superior escura com título.
- Ícone de livros à esquerda.
- Campos: Título, Autor, Código e Situação.
- Área separada para Aluno / Turma.
- Botões: Cadastrar, Emprestar e Devolver.
1. Identifique
Separe livro e aluno.
Separe livro e aluno.
2. Monte
Use organizações para criar blocos visuais.
Use organizações para criar blocos visuais.
3. Revise
Confira alinhamentos e proporções.
Confira alinhamentos e proporções.
Desafio: use três botões com cores diferentes sem perder legibilidade.
Parte 1 - Fundamentos da Programação Mobile
- Escolha três aplicativos que você utiliza e escreva qual problema cada um resolve.
- Para cada aplicativo escolhido, identifique uma tela, uma ação do usuário e um dado utilizado.
- Explique por que um desenvolvedor precisa pensar no fluxo do aplicativo.
Parte 2 - Planejamento e wireframe
- Escreva cinco requisitos funcionais para um aplicativo de tarefas, produtos, gastos, atendimento ou biblioteca.
- Desenhe um wireframe simples para uma das interfaces propostas acima.
- Compare o seu wireframe com a interface final escolhida e explique o que mudou.
Parte 3 - Designer e organizações
- Explique a diferença entre Organização Horizontal e Organização Vertical.
- Escolha uma das interfaces acima e escreva sua árvore de componentes.
- Monte a interface escolhida usando apenas o Designer do App Inventor.
- Renomeie todos os componentes com nomes claros.
- Altere cores, títulos e textos sem desorganizar o layout.
Estes exercícios reforçam a construção visual da interface. Depois de praticar o Designer, avance para os exercícios com eventos e lógica.
Exercícios com Eventos e Lógica
Agora que você já praticou a construção de interfaces no Designer do App Inventor, chegou o momento de desenvolver aplicativos que respondem às ações do usuário.
Exercício 1
Controle de Lâmpada
Situação-Problema
Imagine que você trabalha em uma empresa que desenvolve soluções para casas inteligentes. Um dos primeiros recursos que os clientes desejam é controlar lâmpadas pelo celular.
Embora neste exercício a lâmpada seja apenas uma imagem na tela, a mesma lógica poderá ser utilizada futuramente para controlar uma lâmpada real por meio de um microcontrolador, como Arduino ou ESP32.
Esse tipo de projeto combina Programação Mobile, Sistemas Embarcados e Internet das Coisas (IoT), permitindo que dispositivos físicos sejam controlados por aplicativos.
Objetivo
- Acender uma lâmpada virtual.
- Apagar uma lâmpada virtual.
- Alternar o estado ao clicar na imagem.
- Habilitar e desabilitar botões.
O que você vai aprender
- Eventos de clique.
- Manipulação de imagens.
- Propriedades dos componentes.
- Estrutura condicional.
Arquivos necessários
- Acesa.jpg
- Apagada.jpg
Componentes utilizados
| Componente | Nome |
|---|---|
| Tela | Screen1 |
| Imagem | imgLampada |
| Botão | btnAcesa |
| Botão | btnApagada |
Configurando a Screen1
Antes de inserir os componentes, configure a tela principal do aplicativo.
Faça assim
- Selecione Screen1.
- Localize a área de propriedades.
- Configure os valores abaixo.
| Propriedade | Valor |
|---|---|
| Título | Controle de Lâmpada |
| AlinhamentoHorizontal | Centro |
| AlinhamentoVertical | Superior |
| Orientação da Tela | Retrato |
Montando a interface
Monte uma tela semelhante ao modelo apresentado. Ela deve conter uma imagem da lâmpada e dois botões: um para acender e outro para apagar.
| Componente | Nome | Configuração |
|---|---|---|
| Image | imgLampada | Clicável = Verdadeiro |
| Button | btnAcesa | Texto = Acesa |
| Button | btnApagada | Texto = Apagada |
Atenção: a propriedade Clicável da imagem deve estar configurada como Verdadeiro. Sem isso, o usuário não conseguirá clicar diretamente na lâmpada.
Programação dos Blocos
Bloco 1 — Inicialização da Tela
Define o estado inicial do aplicativo quando ele for aberto.
- Botão Acesa habilitado.
- Botão Apagada desabilitado.
Bloco 2 — Botão Acesa
Quando o usuário clicar em Acesa, o aplicativo passa para o estado ligado.
- A imagem muda para Acesa.jpg.
- O botão Acesa é desabilitado.
- O botão Apagada é habilitado.
Bloco 3 — Botão Apagada
Quando o usuário clicar em Apagada, o aplicativo retorna ao estado desligado.
- A imagem muda para Apagada.jpg.
- O botão Apagada é desabilitado.
- O botão Acesa é habilitado.
Bloco 4 — Clique na Lâmpada
Quando o usuário clicar diretamente na imagem, o aplicativo verifica o estado atual da lâmpada e alterna entre acesa e apagada.
Este bloco usa a estrutura se / então / senão, permitindo que o aplicativo tome uma decisão.
Testando o aplicativo
- A lâmpada inicia apagada.
- O botão Acesa inicia habilitado.
- O botão Apagada inicia desabilitado.
- Ao clicar em Acesa, a imagem muda corretamente.
- Ao clicar em Apagada, a imagem retorna ao estado apagado.
- Ao clicar na lâmpada, ela alterna seu estado.
- Os botões são habilitados e desabilitados corretamente.
Aplicação no mundo real: a mesma lógica pode ser aplicada em automação residencial, tomadas inteligentes, ventiladores, projetos com Arduino, ESP32 e soluções de Internet das Coisas.
Desafio Extra — Botão Único: remova os botões Acesa e Apagada e crie apenas um botão chamado Alternar Estado. Ao clicar, se a lâmpada estiver apagada, ela deverá acender; se estiver acesa, ela deverá apagar.
Para pensar
Além das lâmpadas, quais outros equipamentos de uma casa inteligente poderiam ser controlados por um aplicativo semelhante?
Como você faria para que esse aplicativo controlasse uma lâmpada real utilizando um Arduino ou ESP32?
Exercício 2
Sistema de Login
Situação-Problema
Imagine que você foi contratado para desenvolver a tela de acesso de um sistema acadêmico. Antes de utilizar os recursos do sistema, os usuários precisam informar um nome de usuário e uma senha.
Além de validar as informações digitadas, o sistema deve limitar a quantidade de tentativas incorretas para evitar acessos indevidos.
Seu desafio é desenvolver um aplicativo de login utilizando o App Inventor, aplicando conceitos de interface, eventos, validação de dados, procedimentos e variáveis.
Objetivo
- Receber usuário e senha.
- Validar os dados digitados.
- Permitir visualizar ou ocultar a senha.
- Controlar tentativas incorretas.
O que você vai aprender
- Eventos de foco e clique.
- Caixa de senha e caixa de seleção.
- Variável global.
- Procedimento e validação.
Arquivos necessários
- login.png
- identificador.png
- senha.png
- exibirSenha.png e ocultarSenha.png
Componentes utilizados
| Componente | Nome |
|---|---|
| Tela | Screen1 |
| Caixa de Texto | cxtUsuario |
| Caixa de Senha | cxtSenha |
| Caixa de Seleção | cxsMostraSenha |
| Botão | botOK |
| Imagem | imgMostraSenha |
| Notificador | Notifier1 |
Configurando a Screen1
Antes de inserir os componentes, configure a tela principal do aplicativo.
Faça assim
- Selecione Screen1.
- Localize a área de propriedades.
- Configure os valores abaixo.
| Propriedade | Valor |
|---|---|
| Título | Sistema de Login |
| AlinhamentoHorizontal | Centro |
| AlinhamentoVertical | Superior |
| Orientação da Tela | Retrato |
Montando a interface
Monte uma tela semelhante ao modelo apresentado. Ela deve conter o título do aplicativo, ícone de login, campo de usuário, campo de senha, opção para mostrar ou ocultar a senha, botão OK e Notificador.
| Componente | Nome | Função |
|---|---|---|
| CaixaDeTexto | cxtUsuario | Receber o nome do usuário. |
| CaixaDeSenha | cxtSenha | Receber a senha digitada. |
| CaixaDeSeleção | cxsMostraSenha | Alternar entre mostrar e ocultar a senha. |
| Botão | botOK | Confirmar os dados informados. |
| Imagem | imgMostraSenha | Exibir o ícone visual de mostrar ou ocultar senha. |
Atenção: a CaixaDeSenha já oculta os caracteres digitados. A caixa de seleção será usada para alternar a propriedade que permite visualizar ou esconder a senha.
Programação dos Blocos
Variável global — tentativas
Crie a variável global tentativas com valor inicial 0.
Ela será usada para contar quantas vezes o usuário informou dados incorretos.
Bloco 1 — Inicialização da Tela
Prepara o aplicativo quando a tela é aberta.
- Configura o estado inicial dos componentes.
- Garante que o botão OK esteja disponível para uso.
- Deixa a tela pronta para receber usuário e senha.
Bloco 2 — Eventos de Foco
Quando o usuário entra ou sai dos campos, o aplicativo altera as cores para destacar o campo em uso.
- Ao receber foco: fundo amarelo e texto azul.
- Ao perder foco: fundo branco e texto preto.
- Esse comportamento vale para usuário e senha.
Bloco 3 — Botão OK
Quando o usuário clicar no botão OK, o aplicativo chama o procedimento VerificarCredencial.
Assim, a lógica principal fica organizada em um procedimento separado.
Bloco 4 — Mostrar e Ocultar Senha
Quando a caixa de seleção for alterada, o aplicativo mostra ou oculta a senha digitada.
- Se estiver marcada, a senha fica visível.
- Se estiver desmarcada, a senha volta a ficar oculta.
- O texto da opção e a imagem também são atualizados.
Bloco 5 — Procedimento VerificarCredencial
Este é o bloco principal do aplicativo. Ele valida campos vazios, verifica usuário e senha, controla as tentativas e bloqueia o acesso quando o limite é atingido.
- Se algum campo estiver vazio, exibe uma mensagem de aviso.
- Se usuário e senha estiverem corretos, libera o acesso.
- Se estiverem incorretos, soma uma tentativa.
- Ao atingir o limite, desabilita o botão e encerra o aplicativo.
Testando o aplicativo
- O campo usuário recebe destaque ao ganhar foco.
- O campo senha recebe destaque ao ganhar foco.
- A senha é ocultada inicialmente.
- A opção Mostrar Senha funciona corretamente.
- Os campos vazios são validados.
- O login correto é aceito.
- O login incorreto incrementa as tentativas.
- O sistema informa quantas tentativas restam.
- O sistema bloqueia após três erros.
Aplicação no mundo real: sistemas de autenticação são usados em aplicativos bancários, redes sociais, sistemas escolares, lojas virtuais, sistemas corporativos e aplicativos governamentais. Em sistemas reais, as credenciais normalmente são verificadas em servidores ou bancos de dados, com mecanismos adicionais de segurança.
Desafio Extra — Administrador: modifique o aplicativo para aceitar dois usuários diferentes: aluno / 123456 e admin / 654321. O sistema deverá permitir o acesso para qualquer uma das combinações válidas.
Para pensar
Em sistemas reais, é seguro armazenar usuários e senhas diretamente no aplicativo?
Como grandes sistemas verificam credenciais sem expor as senhas dos usuários?
Exercício 3
Calculadora de IMC
Situação-Problema
Imagine que você foi contratado para desenvolver um aplicativo simples para auxiliar profissionais da área da saúde no cálculo do Índice de Massa Corporal (IMC).
O IMC é uma medida utilizada para relacionar peso e altura, permitindo uma avaliação inicial da condição corporal de uma pessoa.
Seu desafio é criar um aplicativo capaz de calcular automaticamente o IMC e informar a classificação correspondente de acordo com uma tabela de referência.
Objetivo
- Informar peso e altura.
- Calcular o IMC.
- Identificar a situação correspondente.
- Exibir o resultado em uma mensagem.
O que você vai aprender
- Entrada de dados numéricos.
- Operações matemáticas.
- Variáveis globais.
- Procedimentos e condicionais.
Arquivo necessário
- IMC.png
Componentes utilizados
| Componente | Nome |
|---|---|
| Tela | Screen1 |
| Organização Vertical | OrgTopo |
| Organização Vertical | OrgMeio |
| Organização Horizontal | OrgBase |
| Imagem | ImgLogo |
| Legenda | legPeso |
| Caixa de Texto | cxPeso |
| Legenda | legAltura |
| Caixa de Texto | cxAltura |
| Botão | btCalcular |
| Botão | btLimpar |
| Notificador | Notificador1 |
Configurando a Screen1
Antes de inserir os componentes, configure a tela principal do aplicativo.
| Propriedade | Valor |
|---|---|
| Título | IMC |
| AlinhamentoHorizontal | Esquerda |
| AlinhamentoVertical | Topo |
| Orientação da Tela | Retrato |
Montando a interface
Monte uma tela semelhante ao modelo apresentado. Ela deve conter o logo do IMC, os campos para peso e altura e os botões Calcular e Limpar.
| Componente | Nome | Função |
|---|---|---|
| ImgLogo | ImgLogo | Exibir a imagem principal do aplicativo. |
| Legenda | legPeso | Orientar a digitação do peso. |
| CaixaDeTexto | cxPeso | Receber o peso em kg. |
| Legenda | legAltura | Orientar a digitação da altura. |
| CaixaDeTexto | cxAltura | Receber a altura em metros. |
| Botão | btCalcular | Calcular o IMC. |
| Botão | btLimpar | Limpar os campos. |
Tabela de Classificação do IMC
Utilize a tabela abaixo para determinar a situação do usuário.
Esta tabela é utilizada neste exercício para fins didáticos e não substitui avaliação médica profissional.
Programação dos Blocos
Variáveis Globais
Crie as variáveis global IMC e global Situacao.
- IMC armazenará o valor calculado.
- Situacao armazenará a classificação encontrada.
Procedimento VerificarSituacao
Crie um procedimento chamado VerificarSituacao. Ele será responsável por analisar o valor calculado do IMC e determinar a classificação correspondente.
O exemplo apresentado mostra apenas parte das classificações. Complete o procedimento usando todas as faixas da tabela de IMC.
Botão Calcular
Calcula o IMC, chama o procedimento VerificarSituacao e mostra o resultado com duas casas decimais no Notificador.
Botão Limpar
Limpa os campos de peso e altura e posiciona o cursor novamente em cxPeso.
Testando o aplicativo
- O peso é digitado corretamente.
- A altura é digitada corretamente.
- O IMC é calculado corretamente.
- O resultado aparece com duas casas decimais.
- A situação exibida corresponde à tabela.
- O botão Limpar apaga os campos.
- O cursor retorna para o campo peso.
Aplicação no mundo real: aplicativos semelhantes são utilizados em academias, clínicas, consultórios de nutrição, aplicativos de saúde, smartwatches e programas de acompanhamento físico.
Desafio Extra — Validação de Dados: impeça o cálculo quando o peso estiver vazio, a altura estiver vazia ou a altura for igual a zero. Nesses casos, exiba uma mensagem orientando o usuário a preencher corretamente os campos.
Para pensar
O IMC considera apenas peso e altura. Duas pessoas com o mesmo IMC podem ter condições físicas diferentes?
Quais outras informações poderiam ser utilizadas para complementar uma avaliação física?
Exercício 4
Jogo de Adivinhação
Situação-Problema
Imagine que você foi contratado para desenvolver um jogo simples para dispositivos móveis.
O desafio do jogador é descobrir um número secreto gerado aleatoriamente pelo aplicativo. A cada tentativa, o aplicativo informa se o número digitado é maior ou menor que o número correto.
Esse tipo de jogo é muito utilizado para ensinar conceitos fundamentais de programação, como variáveis, tomada de decisão, repetição de tentativas e controle do estado de um sistema.
Objetivo
- Gerar um número aleatório entre 1 e 100.
- Receber palpites do jogador.
- Informar se o número correto é maior ou menor.
- Controlar a quantidade de tentativas.
- Permitir reiniciar a partida.
O que você vai aprender
- Variáveis globais.
- Procedimentos.
- Eventos.
- Números aleatórios.
- Estruturas de decisão.
- Controle de tentativas.
Conceito principal
Este projeto apresenta a ideia de estado do jogo. A variável gameOver indica se a partida está em andamento ou se já terminou.
Componentes utilizados
| Componente | Nome |
|---|---|
| Tela | Screen1 |
| Legenda | legTitulo |
| Caixa de Texto | cxtPalpite |
| Botão | btAdvinhar |
| Legenda | legTentativas |
| Legenda | lblMensagem |
Configurando a Screen1
Antes de inserir os componentes, configure a tela principal do aplicativo.
| Propriedade | Valor |
|---|---|
| Título | Jogo de Adivinhação |
| AlinhamentoHorizontal | Centro |
| AlinhamentoVertical | Centro |
| Orientação da Tela | Retrato |
Montando a interface
Monte uma tela semelhante ao modelo apresentado. Ela deve conter o título do jogo, o campo para digitar o palpite, o botão para confirmar e os rótulos para exibir tentativas e mensagens.
| Componente | Nome | Função |
|---|---|---|
| Legenda | legTitulo | Exibir o título Adivinhe o Número! |
| CaixaDeTexto | cxtPalpite | Receber o palpite digitado. |
| Botão | btAdvinhar | Confirmar o palpite ou reiniciar o jogo. |
| Legenda | legTentativas | Mostrar a quantidade de tentativas restantes. |
| Legenda | lblMensagem | Mostrar mensagens de orientação ao jogador. |
Programação dos Blocos
Variáveis Globais
Crie três variáveis globais para controlar a partida.
- gameOver: indica se o jogo terminou.
- randomNumber: armazena o número secreto.
- tentativas: controla as tentativas restantes.
Procedimento gerarNumeroAleatorio
Este procedimento recebe um valor inicial e um valor final, retornando um número inteiro aleatório dentro desse intervalo.
No jogo, ele será usado para gerar o número secreto entre 1 e 100.
Procedimento reiniciarJogo
Este procedimento prepara uma nova partida.
- Gera um novo número aleatório.
- Reinicia as tentativas para 5.
- Define gameOver como falso.
- Limpa o campo de palpite e a mensagem.
- Atualiza o texto do botão para ADIVINHAR.
- Devolve o foco para o campo de palpite.
Screen1.Inicializar
Quando o aplicativo iniciar, a tela chama o procedimento reiniciarJogo.
Assim, toda a configuração inicial da partida fica organizada em um único procedimento.
Procedimento checarPalpite
Este é o procedimento principal do jogo. Ele analisa o palpite digitado pelo usuário e decide o que deve acontecer.
- Se o campo estiver vazio, exibe uma mensagem de aviso.
- Se o jogador acertar, encerra a partida.
- Se errar, reduz uma tentativa.
- Informa se o jogador deve tentar um número maior ou menor.
- Quando as tentativas chegam a zero, mostra o número correto e permite jogar novamente.
Botão ADIVINHAR
O botão possui duas funções.
- Se o jogo já terminou, ele chama reiniciarJogo.
- Se o jogo ainda está em andamento, ele chama checarPalpite.
Testando o aplicativo
- O aplicativo inicia com 5 tentativas.
- O número secreto é gerado automaticamente.
- Campo vazio exibe mensagem de aviso.
- O aplicativo informa se o número correto é maior.
- O aplicativo informa se o número correto é menor.
- O contador de tentativas é atualizado.
- O jogo encerra quando o número é descoberto.
- O jogo encerra quando as tentativas acabam.
- O botão reinicia a partida.
Aplicação no mundo real: embora seja um jogo simples, este projeto usa conceitos presentes em jogos digitais, aplicativos educacionais, simulações, sistemas de sorteio e sistemas que precisam controlar estados internos.
Desafio Extra — Níveis de Dificuldade: modifique o jogo para permitir que o usuário escolha o nível: fácil, com número entre 1 e 50; médio, com número entre 1 e 100; ou difícil, com número entre 1 e 500.
Para pensar
O computador consegue gerar números verdadeiramente aleatórios ou apenas números pseudoaleatórios?
Por que números aleatórios são importantes em jogos, sorteios e sistemas de segurança?