PENSAMENTO COMPUTACIONAL

MIT – App Inventor – Parte 2

1
Projeto/Desafio: APP Descarte Solidário

2
Mão na massa!!!

3
 APP Descarte Solidário - Algoritmo
Início
Selecionar o tipo do descarte (1- Móveis, 2 - Eletrodomésticos, 3 - Roupas, 4 -
Eletrônicos, 5 - Recicláveis e 6 - Lixo Eletrônico)
Informar a descrição detalhada do material a ser descartado
Selecionar o estado de conservação
Informar a data e horário
Informar o endereço
Ao clicar no botão de busca, pesquisar o endereço e exibir no mapa
a localização
Inserir uma foto do descarte, podendo ser uma foto já existente na
galeria ou bater direta da câmera
Exibir a foto na tela
Clicar no botão Salvar para armazenar as informações no banco de
dados
fim
4
APP Descarte
Solidário

5
Criando App
● Clique no botão “Iniciar novo projeto” ou vá
em “Projetos” > “Iniciar novo projeto...”

6
 Definindo a Interface - Tela entrada
● Adicione na tela os componentes

7
 Definindo a Interface - Tela cadastro
● Adicione na tela uma Legenda, e altere as propriedades: Largura
para "Preencher principal", Texto para "Tipo de Descarte"

8
Definindo a Interface - Tela cadastro
● Adicione na tela uma Lista Suspensa, e altere as propriedades:
Largura para "Preencher principal" e Cadeia de Elementos

9
Definindo a Interface - Tela cadastro
● Adicione na tela uma Legenda, e altere as propriedades:
Largura para "Preencher principal", Texto para "Descrição"

10
Definindo a Interface - Tela cadastro
● Adicione na tela uma Caixa de Texto, e altere as propriedades:
Largura para "Preencher principal", Dica para "Detalhes do
Descarte"

11
Definindo a Interface - Tela cadastro
● Adicione na tela uma Legenda, e altere as propriedades:
Largura para "Preencher principal", Texto para "Estado de
Conservação"

12
Definindo a Interface - Tela cadastro
● Adicione na tela uma Lista Suspensa, e altere as
propriedades: Largura para "Preencher principal" e Cadeia
de Elementos

13
Definindo a Interface - Tela cadastro
● Adicione na tela a Organização Horizontal (permite inserir e
organizar componentes)

14
Definindo a Interface - Tela cadastro
● Adicione na tela EscolheData, e altere a propriedade Texto para "Data"

15
Definindo a Interface - Tela cadastro
● Adicione na tela uma Legenda, e altere a propriedade
Alinhamento do Texto para "Esquerda: 0" - A legenda
receberá a data selecionada para visualização

16
 Definindo a Interface - Tela cadastro
● Adicione na tela EscolheHora, e altere a propriedade Texto
para "Hora"

17
Definindo a Interface - Tela cadastro
● Adicione na tela uma Legenda, e altere a propriedade
Alinhamento do Texto para "Esquerda: 0" - A legenda
receberá a hora selecionada para visualização

18
 Definindo a Interface - Tela cadastro
● Adicione na tela uma Legenda, e altere a propriedade
Alinhamento do Texto para "Esquerda: 0" - A legenda
receberá a resposta selecionada para visualização

19
Definindo a Interface - Tela cadastro
● Adicione na tela a Organização Horizontal (permite inserir componentes)

20
Definindo a Interface - Tela cadastro
● Adicione na tela uma Legenda, e altere a propriedade
Alinhamento do Texto para "Esquerda: 0"

21
Definindo a Interface - Tela cadastro
● Adicione na tela uma Caixa de Texto, e altere a propriedade
Dica para "Dica para a Caixa de Texto 1"

22
Definindo a Interface - Tela cadastro
● Adicione na tela um Botão para buscar o endereço

23
Definindo a Interface - Tela cadastro
● Adicione na tela um Map para inserir o Mapa para localizar o endereço

24
Definindo a Interface - Tela cadastro
● Adicione na tela um Maker para indicar no Mapa a localização

25
Definindo a Interface - Tela cadastro
● Adicione na tela a Organização Horizontal (permite inserir componentes)

26
Definindo a Interface - Tela cadastro
● Adicione na tela uma Legenda para inserir a foto do item

27
Definindo a Interface - Tela cadastro
● Adicione na tela Escolhe Imagem para escolher foto da galeria de fotos

28
Definindo a Interface - Tela cadastro
● Adicione na tela um Botão para tirar foto

29
Definindo a Interface - Tela cadastro
● Adicione na tela uma Legenda somente para dar um espaço
entre os componentes - visual

30
Definindo a Interface - Tela cadastro
● Adicione na tela uma Imagem para representar o aplicativo

31
 Definindo a Interface - Tela cadastro
● Adicione na tela a Organização Horizontal (permite inserir componentes)

32
Definindo a Interface - Tela cadastro
● Adicione na um Botão para Salvar

33
Definindo a Interface - Tela cadastro
● Adicione na tela um Botão para Listagem dos itens

34
Definindo a Interface - Tela cadastro
● Adicione na tela o componente Câmera
Componente não visível que tira uma foto usando a câmera do dispositivo
- depois que a foto é tirada, o caminho para o arquivo no telefone que
contém a foto fica disponível como argumento para o AfterPicture evento

35
Definindo a Interface - Tela cadastro
● Adicione na tela o componente Sensor de Localização
Componente Não-visível - informação de localização, incluindo
Latitude, Longitude, Altitude (se suportada pelo dispositivo),
velocidade (se suportada pelo dispositivo), e o endereço

36
Definindo a Interface - Tela cadastro
● Adicione na tela o componente Temporizador
Componente Não-visível que fornece o instante no tempo
usando o relógio interno do telefone
Pode disparar um timer em intervalos regulares e executar
cálculos de tempo, manipulações e conversões

37
Definindo a Interface - Tela cadastro
● Adicione na tela o componente TinyDB
Componente não visível que armazena dados
persistente para um aplicativo
Os itens de dados consistem em tags e valores.
Irá armazenar os dados de cada descarte

38
Definindo a Interface - Tela cadastro
● Adicione na tela o componente Notificador
O componente Notificador exibe mensagens de alerta e cria
entradas de log do Android por meio de uma variedade de
métodos

39
Definindo a Interface - Tela cadastro
● Adicione na tela o componente TinyDB (db_contador)
Mantém na base de dados um contador de marcas (simular gerador de
chaves primárias para cada descarte)

40
Criando App - Blocos
● Entrada: Controle, Texto, Procedimentos

41
Criando App - Blocos
● CadastroEvidencias: Variáveis, Matemática, Texto

42
Criando App - Blocos
● CadastroEvidencias: Controle, Procedimentos, Variáveis e
Matemática

43
Criando App - Blocos
● CadastroEvidencias: ativando sensor de localização

44
Procedimentos
● Procedimentos: o programa é dividido em partes menores,
responsáveis por executar determinadas tarefas, cujo
comportamento pode ou não variar de acordo parâmetros
de entrada
Trechos de códigos repetidos para execução de uma
instrução ou conjunto n vezes seguidas

45
Criando App - Blocos
● CadastroEvidencias: ativando sensor de localização (continuação)

46
Criando App - Blocos
● CadastroEvidencias: ativando Galeria de fotos

47
Criando App - Blocos
● CadastroEvidencias: Camera

● Ao clicar no botão a câmera é ativada para tirar foto

● O argumento de texto imagem é o caminho que pode

ser usado para localizar a imagem no telefone
48
Criando App - Blocos
● CadastroEvidencias: ativando Mapa

49
Criando App - Blocos
● CadastroEvidencias: ajustar legendas Data e Hora

50
Criando App - Blocos
● CadastroEvidencias: tipo de descarte

51
Criando App - Blocos
● CadastroEvidencias: ativando Salvar

52
Criando App - Blocos
● CadastroEvidencias: ativando Salvar (continuação)

53
Criando App - Blocos
● CadastroEvidencias

54
Opções para testar sua aplicação
1. Baixar o  App Inventor Companion App
para o seu dispositivo.
• Conexão wireless
2. Instalar um emulador
https://appinventor.mit.edu/explore/ai2/setup-emulator.html
3. Instalar um software que permita a conexão
via USB com seu dispositivo

55
Execução no Emulador
● Execute o emulador aiStarter

56
PENSAMENTO COMPUTACIONAL

MIT – App Inventor – Parte 2

57