Programação Mobile com App Inventor

Programação Mobile

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

Tela final da Agenda de Contatos — Resultado visual da interface que será construída.

Importante: nesta primeira parte, vamos trabalhar apenas com o Designer. A programação dos blocos será construída em uma etapa posterior.

Fundamentos da Programação Mobile

Antes de construir um aplicativo, é preciso entender o que ele é e por que ele existe.

O que é um app?

Um aplicativo é um software criado para rodar em dispositivos móveis. Ele possui telas, comandos, dados e uma finalidade.

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?

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.

Wireframe da Agenda de Contatos — Wireframe: rascunho visual da interface antes da implementação.

Planejamento e aplicativo — Da ideia ao aplicativo: levantamento, desenho da solução e construção.

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.

Entendendo a estrutura do Designer

Antes de montar a tela, precisamos entender como os componentes serão organizados.

Layout com organizações horizontais e verticais — Organizações horizontais e verticais controlam a posição dos componentes na tela.

Árvore hierárquica da interface

A interface é formada por componentes dentro de outros componentes.

Screen1
├─ OrgTopoTitulo
│  └─ LegTitulo
├─ OrgFotoDados
│  ├─ OrgFoto
│  │  └─ ImgFoto
│  └─ OrgDadosPessoais
│     ├─ LegNome
│     ├─ CxTNome
│     ├─ LegTelefone
│     ├─ CxTTelefone
│     ├─ LegEmail
│     └─ CxTEmail
├─ OrgBotoes1
│  ├─ btWhatsApp
│  ├─ btEmail
│  ├─ btEndereco
│  └─ btNotas
├─ OrgCidadeEstado
│  ├─ OrgCidade
│  │  ├─ LegCidade
│  │  └─ CxTCidade
│  └─ OrgEstado
│     ├─ LegEstado
│     └─ CxTEstado
└─ OrgBotoes2
   ├─ btSalvar
   └─ btCancelar

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. O aplicativo ainda não possui inteligência, pois a programação dos blocos será feita em outra etapa.

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.

2. Divida
Identifique organizações horizontais e verticais.

3. Construa
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.

2. Organize
Use caixas agrupadas por assunto.

3. Ajuste
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.

2. Compare
Veja o que fica em linha e o que fica em coluna.

3. Finalize
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.

2. Destaque
Separe observações dos demais campos.

3. Distribua
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.

2. Monte
Use organizações para criar blocos visuais.

3. Revise
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 trabalham apenas a construção visual da interface. A programação dos blocos será acrescentada em outra etapa.