Oficina do I Simpósio das Engenharias ACET da Unoesc Campus Joaçaba - SC. Ministrado em conjunto com a profa. Rogeria Ramos.

1. OFICINA
Desenvolvimento de
Aplicativos para Android
com APP Inventor
Rogeria Ramos, Profª MSc.
Christiane Barbieri de Pelegrin, Engª de Computação

2. Pra começar...
1. Abrir o AppInventor: ai2.appinventor.mit.edu
2. Entrar com seu email do gmail
3. Acessar no menu Projects/Start new project
– Project name: Doador
4. Na barra de ferramentas, clique no Button (botão) e
arraste para a tela
5. No menu Iniciar do Windows, buscar por aiStarter e
executar
6. No AppInventor, acessar o menu Connect/Emulator

3. PROJETO PILOTO – Projeto Doação
AppDoadorAppHemocentro

4. – AppDoador
• Tela Criar Conta
PROJETO PILOTO – Projeto Doação
– AppDoador
• Tela Login

5. – AppDoador
• Tela Dashboard
PROJETO PILOTO – Projeto Doação
– AppDoador
• Tela Pesquisar Hemocentro

6. – AppDoador
• Tela Consultar Estoque
PROJETO PILOTO – Projeto Doação
– AppDoador
• Tela Processo Doação

7. – AppHemocentro
• Tela Criar Conta
PROJETO PILOTO – Projeto Doação
– AppHemocentro
• Tela Login

8. – AppHemocentro
• Tela Registrar Doação
PROJETO PILOTO – Projeto Doação
– AppHemocentro
• Tela Consultar Estoque

9. • AppDoador: Screen1
– Incluir imagem
– incluir botão Criar Conta
– incluir Botão Login
PROJETO PILOTO – Projeto Doação

10. 1. Criar Conta
– criar a nova tela
– incluir o componentes
PROJETO PILOTO – Projeto Doação
2. Login
– criar a nova tela
– incluir o componentes
3. Codificar navegação: Screen1 => Criar Conta => Login

11. • AppDoador: Criar Conta
– Acessar sua conta do Google Drive
– Clicar com o botão direito => Mais => Google
Fusion Tables => Conectar
– Clicar com o botão direito => Mais => Google
Fusion Tables => Create Empty Table
– Nomear a tabela e os campos com seus tipos
• Nome da tabela: Doador
• Campos: nome, sobrenome, email, telefone, senha,
tipoSangue
PROJETO PILOTO – Projeto Doação

12. • AppDoador: Criar Conta
– CRIAR NOVO PROJETO
• Acessar console.developers.google.com
• Novo projeto
• Outras APIs conhecidas => Fusion Table APIs => ATIVAR
• Ir para Credenciais => Criar Credenciais => Chave da
conta de serviço
• Marcar a opção P12
• Criar sem papel
PROJETO PILOTO – Projeto Doação

13. • Módulo Doador: Criar Conta
– CRIAR NOVO PROJETO
PROJETO PILOTO – Projeto Hemocentro

14. • Módulo Doador: Criar Conta
– CRIAR NOVO PROJETO
PROJETO PILOTO – Projeto Hemocentro

15. • AppDoador: Criar Conta
– Instalar o certificado (download depois da criação
da conta de serviço)
–Lembrar-se da senha notasecret
– Compartilhar a tabela criada no Drive
1. Ir no Console de desenvolvedores google
2. Gerenciar contas de serviço
3. Copiar o ID da conta de serviço criada
4. Ir na tabela no Drive => Compartilhar => Convidar
pessoas => colar o ID da conta de serviço (pode
Editar)
PROJETO PILOTO – Projeto Doação

16. • AppDoador: Criar Conta
– No projeto App Inventor
• Adicionar FusionTable e configurar propriedades
• KeyFile procurar o certificado instalado
• ServiceAccountEmail: colar o ID da conta de serviço
• Marcar UseServiceAuthentication
– Buscar o ID da tabela criada no Drive
• Abrir a tabela
• Menu File=> About this table => copiar o ID
• Adicionar o bloco Inicialize Global e colar o ID no bloco
text
PROJETO PILOTO – Projeto Doação

17. • AppDoador: Criar Conta
– Lógica:
• Associar a tabela pelo id
• Inserir dados (INSERT ROW...)
• Buscar resultado da inserção
– se sucesso então
» abrir tela Dashboard
– senão
» mensagem de erro
• Quando backpressed => mostrar Screen1
PROJETO PILOTO – Projeto Doação

18. • AppDoador: Login
– Incluir FusionTable e configurar como na tela
Criar Conta
– Associar a tabela pelo id
– Lógica:
• Quando clicar no botão Login
– criar uma Query para buscar o email e senha
SELECT email, senha FROM global id WHERE
email = campoEmail.text AND senha = campoSenha.text
• enviar consulta
• Quando o “pegar Resultado” (GotResult)
– Se no result contém o texto do campoEmail Então
» abrir a tela Dashboard
– Senão
» Mensagem “Email ou senha incorretos!”
PROJETO PILOTO – Projeto Doação
Tabela

19. • AppDoador: Consultar Estoque
– Incluir FusionTable e configurar como na tela Criar
Conta
– Associar a tabela pelo id
– Lógica:
• Fazer uma Query para SOMAR a quantidade do tipo de
sangue selecionado na lista
SELECT SUM(quantidade) as q FROM global id WHERE
tip_sangue = listaTipoSangue.selection
• Enviar Query
• Quando o “pegar Resultado”(GotResult)
– Se result é vazio então
» exibir no label Quantidade “0 ml”
– Senão
» exibir no label Quantidade o valor do result
PROJETO PILOTO – Projeto Doação

20. • AppDoador: Processo Doação
– Passo a passo
• Table arrangement
• Imagens
PROJETO PILOTO – Projeto Doação

21. OFICINA
Desenvolvimento de
Aplicativos para Android
com APP Inventor
Rogeria Ramos, Profª MSc. - rogeria.ramos@unoesc.edu.br
Christiane Barbieri de Pelegrin, Engª de Computação - christiane.bdp@gmail.com
• Vídeos:
– https://www.youtube.com/watch?annotation_id
=annotation_970704623&feature=iv&src_vid=YT
K9fW0HEfA&v=7QIZ_frEDFA

22. OFICINA
Desenvolvimento de
Aplicativos para Android
com APP Inventor
Rogeria Ramos, Profª MSc. - rogeria.ramos@unoesc.edu.br
Christiane Barbieri de Pelegrin, Engª de Computação - christiane.bdp@gmail.com
• Repositório com os projetos:
– https://github.com/christianebdp/AplicativoHemocentro
– https://github.com/christianebdp/AplicativoDoador

23. Rogeria Ramos, Profª MSc. - rogeria.ramos@unoesc.edu.br
Christiane Barbieri de Pelegrin, Engª de Computação - christiane.bdp@gmail.com
AGRADECEMOS SUA
PRESENÇA!