COLETA SELETIVA Utilizando App Inventor -...

©Cláudio Medeiros dos Santos

1

COLETA SELETIVA

Utilizando App Inventor

Não autorizado qualquer alteração de formato ou conteúdo.

MATERIAL PROTEGIDO PELA LEI DE

DIREITOS AUTORAIS - lei 9610

AUTOR: Cláudio Medeiros dos Santos


2

Trabalhando com o APP INVENTOR

Por Cláudio Medeiros dos Santos

Parte do Mini Curso de desenvolvimento Faça Você Mesmo!

© 2017 por Élkia Desenvolvimentos

Proibida a Distribuição

Proibido a distribuição do conteúdo desse

tutorial, seja parcial ou total, fazer copias

parcial ou na totalidade do conteúdo, distribuir

cópias ou qualquer outra forma de divulgação

sem o prévio consentimento do autor.

Este e-book é indicado para quem quer conhecer uma nova

ferramenta de desenvolvimento. Com uma nova Visual e muito

mais dinâmica.

Mais Conteúdo em sua Web Site

Disponibilize este e-book para download em seu web site e ofereça

mais conteúdo aos seus visitantes.


3

APRESENTAÇÃO

Google App Inventor é uma ferramenta desenvolvida pela Google que permite a criação de aplicativos para smartphones que rodam o sistema operacional Android,

sem que seja necessário conhecimento em programação.

Segundo Harold Abelson, um investigador do MIT que trabalhou nesse projeto, o objetivo de Google App Inventor é permitir que utilizadores fossem também

criadores e não apenas consumidores.

Com uma interface simples e fácil de usar, o programa foge das linhas de

programação normal e possibilita até mesmo usuários comuns de lançarem seus

aplicativos. Graças ao recurso drag and drop, a programação das aplicações acontece de forma simples e intuitiva.

Interface simplificada

A interface de Google App Inventor é organizada de modo bastante semelhante às IDEs mais comuns, com algumas diferenças que visam uma otimização do

trabalho e melhor entendimento pelo usuário. No lugar de uma árvore de arquivos

do lado esquerdo da tela, por exemplo, a aplicação apresenta elementos que

podem ser utilizados na criação das aplicações, bastando um simples comando de “clique e arraste” para inserir o item desejado no projeto.

Praticidade sem igual

Para fazer uso das ferramentas de Google App Inventor não é preciso instalar

nada no computador. A aplicação funciona de modo inteiramente online,

diretamente de seu navegador. Para utilizá-la, basta ter uma conta de usuário da

Google.

Outros recursos

Google App Inventor disponibiliza também um poderoso editor de código em Java que pode rodar ou ser baixado no computador. Para isso, basta clicar no


4

botão “Open the blocks editor” e confirmar a operação. O editor, assim como a

aplicação principal, oferece uma interface simples e agradável de usar Fonte: http://www.techtudo.com.br/tudo-sobre/google-app-inventor.html

http://www.techtudo.com.br/tudo-sobre/google-app-inventor.html


5

SUMÁRIO

Página

I. Apresentação 3

II. SUMÁRIO 5-6

1- Analisando as plataformas

1.1- A escolha da Plataforma 7

1.2- O projeto 7-9

1.3- Dando um nome ao Aplicativo 9-10

1.4- A tela de desenvolvimento 10

1.5- O Espaço Menu 10-11

1.6- A Aba Pallete 11

1.7- A Aba propriedades e Componentes 11

1.8- O Palco 12

1.9- Estudo de casos 12

2.0 – Registrando dados do projeto 13

2- Projetando o Aplicativo

2.2- Criando a página Principal 14-17

2.3- Criando um logo 17-22

2.4- Incluindo os botões 22-24

2.5- Footer/ Rodapé 25-26

2.6- testando o Aplicativo 26-30

2.7 – A tela Sphash Screen 30-32

2.8 – Blocks 32- 37

3 – O formulário Cadastro de Coleta

3.1- A tela Cadastro de Coleta 39-45

3.2- Linkando a tela principal 45-46

3.3- Eventos do Botão cadastrar 46-48

4- Armazenamentos de dados

4.1 Armazenando os dados

4.2 – Trabalhando com Fusion

Connection

49-50


6

4.3 – Google Drive 50-52

4.4- Criando as tabelas 52- 56

4.5 Google Apis 57-64

4.6 Dando Acesso ao Google 64-67

4.7 Gravando os dados 67-74

4.8- testando o Aplicativo 75-76

5- LocalHost

5.1 76

5.2 organizando o espaço dos Blocks 77

5.3 Criando as variáveis e eventos 77-80

5.4 Criando as Consultas 80-82

5.5 Eventos da pesquisa 82-83

5.6 Analisando 83

5.7 Ao inicializar e testando 83-85

6- O Formulário Institucional

6.1 A Tela Institucional 85-86

6.2 A Tela Contato 86-91

6.3 A tela Desenvolvedor 91-92

6.4 A tela Sobre 93

6.5 Finalizando e testando 93

7- Análises do Tutorial 94


7

Analisando as plataformas

Podemos ter várias maneiras de desenvolver um aplicativo , sendo elas através

da própria Net, (Fabrica de Aplicativos, google, AppMachine e muitas outras) só

que as mesmas apenas nos dão o mínimo necessário, não atingindo nem

metade do que esperamos desenvolver. Sendo a grande maioria para uso de

redes sociais e no momento que necessitamos de algo mais complexo a mesma

não dão suporte as nossas necessidades (Banco de dados).

www.appmachine.com/pt-pt/

www.fabricadeaplicativos.com.br/

http://appinventor.mit.edu/explore/#

Em contra partida temos muitas plataformas fora da Net, que estão

completamente dentro do que esperamos (Visual Studio, Android Studio,

Apache, Intel XDK e muitos outros). Todos com uma grande gama de apoio aos

desenvolvedores, basta para isso ter tempo e dedicação para estudar as várias

plataformas que estão a nossa disposição.

https://msdn.microsoft.com/pt-br/dn308572.aspx

https://software.intel.com/pt-br/intel-xdk

https://developer.android.com/studio/index.html?hl=pt-br

https://cordova.apache.org

1.1 A escolha da Plataforma

Para esse projeto decidi, trabalhar com o App Inventor do Google,

abrangendo assim uma gama de linguagens (html, CSS, XHTM com Tablelless e

banco de dados Fusion ) Material muito presente no dia a dia dos nossos

alunos, já que os mesmos tem muita afinidade com o material lego e seus

blocos de encaixar.

1.2 O projeto

Abra o Google e conecte-se a sua conta de e-mail para podermos vincular nosso

projeto a sua conta.

http://www.appmachine.com/pt-pt/

http://www.fabricadeaplicativos.com.br/

http://appinventor.mit.edu/explore/

https://msdn.microsoft.com/pt-br/dn308572.aspx

https://software.intel.com/pt-br/intel-xdk

https://developer.android.com/studio/index.html?hl=pt-br

https://cordova.apache.org/

http://appinventor.mit.edu/explore/


8

Após esse processo, digite na barra de busca “app Inventor”.

Clique na opção MIT App Inventor e na tela que se abre, selecione Create APP!

ou se preferir, você pode navegar nas telas e descobrir as novidades da

plataforma, e até mesmo tutoriais bem bacana desenvolvidos por vários

desenvolvedores do mundo.


9

Caso escolha partir para o desenvolvimento, selecione criar App e na tela que

se abre.


10

Selecione Start new Project, essa tela, é onde ficarão armazenado todos os

seus projetos, no momento você apenas verá uma tela em branco, mas não se

preocupe, acredito que você irá preencher essa tela bem rapidinha.

1.3 Dando um nome ao seu Aplicativo

Aproveite para dar um nome bem sugestivo ao seu aplicativo, Apenas utilize

as normas de convenções que são:

Sempre comece com uma letra Maiúscula

Não deixe espaço entre as palavras

Inicie a segunda ou mais palavras com maiúscula, sem deixar espaço

entre elas.

Não utilize acentos nas palavras tais como “(Ç, til, pontos, caracteres

Alphanuméricos)”. Veja o exemplo abaixo

POSITIVO: CacaAsBaleias; LixaoOnLine.

NEGATIVO: Caça AsBaleias, Lixão OnLine


11

Não se preocupe se o nome parece esquisito, você poderá fazer as alterações

necessárias logo após criar o projeto.

1.4 A tela de desenvolvimento

Nesse momento você está de posse do espaço do desenvolvedor, vamos antes

de iniciar o desenvolvimento, conhecer um pouco sobre essa plataforma.

1.5 O espaço Menu

Nesse espaço ficam os dados do nosso projeto, e mais 04 opções de navegação,

sendo o mais utilizado o Project e o connect, já que o primeiro, nos leva de


12

volta a tela anterior para a escolha de outros aplicativos desenvolvidos, e o

segundo são as opções para teste do nosso aplicativo.

1.6 A Aba Palette

Essa é o espaço que você mais irá utilizar, ele contem todas as

ferramentas que necessitaremos

para o desenvolvimento do nosso

App.

Durante o desenvolvimento,

iremos utilizar as várias abas

disponíveis.

1.7 - A Aba Properties e Components

Esses espaços é aonde iremos renomear e formatar as ferramentas incluídas ao

palco, serão bastante utilizadas.


13

1.8 O Palco

Por padrão o AppInventor define a primeira tela como Screen1, as outras você

pode dar o nome que desejar

É nele que faremos a mágica acontecer.

1.9 ESTUDOS DE CASO E ANÁLISE DO PROJETO A SER DESENVOLVIDO

Antes de iniciarmos qualquer projeto, devemos desenvolver o hábito de

escrever e desenhar o que queremos desenvolver, ou seja, o passo a passo,

para que não tenhamos um problema sério ao final. Um dos grandes erros de

muitos desenvolvedores é não documentar seu projeto, e quando o mesmo

precisa retornar para algumas alterações após algum tempo, não se lembra de

todo o processo, perdendo assim horas preciosas para poder entender

novamente a lógica do projeto.


14

2.0 Registrando os dados para o Projeto

Devemos ter o bom senso de localizar o problema e achar a solução, só assim

estaremos no caminho correto para um bom aplicativo.

No decorrer do desenvolvimento poderemos acrescentar outros problemas e

novas soluções, mas tenha em mente seu objetivo, e não fuja de sua meta.

Uma boa solução é fazer um cronograma do passo a passo e ir tickando os

passos a passos feitos.


15

2.1 Projetando o Aplicativo

2.2 CRIANDO A PÁGINA PRINCIPAL – SCREEN1

Seguindo o nosso passo a passo, devemos desenvolver nossa tela inicial com 4

botões um Cabeçalho, para isso, selecione da aba Layout e arraste para o

palco principal 4 HorizontalArragement e renomeie cada um como segue.


16

Renomeie os HorizontalArragement para:

EspacoHeader,

Espaco1

Espaco2

EspacoFooter

Formatando os HorizontalArragement

Para o primeiro espaço Header altere suas propriedades, não se esquecendo de

alterar sua propriedade color para branco ou uma cor que mais lhe agrade.


17

A largura (Width) está com a opção Fill parente, ou seja, irá

sempre ficar com a largura do

aparelho. Juntamente com a

centralização horizontal e vertical.

Formatando o Espaço 02 e 03

Para o espaço 02 e 03 , a largura

(Width) deverá ser de 95%, ou

seja não deverá tomar todo o espaço do celular. E com o

AlignHorizontal Centralizado vai

dar uma ótima aparência.

O espaço Footer

O Espaço Footer deve ser igual ao espaço Header


18

Problemas na Centralização

Você deve ter notado que ao digitar 95% no espaço 1 e 2 eles não ficaram centralizados

conforme pode ser visto na imagem ao lado.

Solução: Basta selecionar nossa Screen1 e no

AlignHorizontal da Screen selecione Center -

3

2.3 Incluindo um Logo ao nosso projeto

Vamos incluir um logo ao nosso projeto, se por acaso você ainda não tem

nenhuma imagem e gostaria de produzir a sua própria, temos vários sites que

disponibilizam gratuitamente. O meu preferido é o LogoFactory, uma excelente

plataforma para desenvolvimento de seu logo. E melhor ainda é grátis. Basta

escolher uma imagem, digitar o nome do seu aplicativo e fazer download do seu

novo logo.

Obs.: O Flash player deve estar liberado para a produção da sua imagem.

http://www.logofactoryweb.com/default_lg.asp?lg=pt




19

Ao final basta fazermos download e será salvo uma imagem .jpg

Para ser utilizada ao nosso projeto.

Incluindo uma imagem ao projeto

Vamos incluir uma imagem ao nosso App, para isso, arraste da Aba

UserInterface


20

Na Aba properties inclua a nossa imagem gerada ao projeto clicando em

Image/UploadFile

Obs: Atente para a Aba Components, e verifique se o nosso componente

selecionado é mesmo a nossa Image, aproveite para renomear esse

componente para ImgLogo.


21

Logo após a inclusão do logo, altere as propriedades Width e Heigth para um

tamanho razoável, um bom tamanho a meu ver é 75px x75px, mas deixo a

vocês essa escolha.

Atende que nosso logo está ao centro, isso é necessário, pois iremos incluir um

Label com o nome do nosso aplicativo logo ao lado da imagem. Para isso,

arraste 03 Labels e renomeie para.

Esp1

lblTitulo

Esp2

No inicio pode parecer confuso, o uso de 03 label, mas como estamos

trabalhando com celulares e tablets, a centralização se faz necessária.

Alterando as propriedades dos Labels.

Para o Segundo label altere suas propriedades como segue


22

Dados

FontSize = 26

Text = Élkoleta

textAlign= Center

TextColor = Cinza Escuro

Para os outros dois Labels apenas deixe em branco os Text e Width para

fillParent, isso irá centralizar nosso texto principal


23

2.4 Incluindo os Botões

Arraste para dentro dos espaços 01 e 02 4 botões, lembrando-se de incluir

entre eles um label com seus Text em Branco em Width como FillParent,

Isso fará com que os Botões fiquem centralizados

Alterando as propriedades do Buttons

Antes de mais nada aproveite para renomear os buttons e os labels, conforme

Imagem abaixo.


24

Vamos incluir uma imagem em cada button, de preferencia com o tema

escolhido. Um bom site para baixar esses ícones é o

http://br.freepik.com/icones-gratis, mas você pode achar muitos outros de

excelente qualidade.

Formatando os Buttons

Altere as propriedades dos Buttons conforme imagem. Que praticamente são

apenas 03 itens

Largura, altura, e seu Text que deverá estar em branco.

http://br.freepik.com/icones-gratis


25

Para os Labels, deverá ser formatado igual ao Header. Com HorizontalAlign

igual a Fillparent e seu Text em Branco.

Dica:

Você pode centralizar os botões apenas colocando um label antes do buttons


26

2.5 Footer

Como queremos que o footer esteja sempre no fim da página, inclua um label

entre os HorizontalArragement e altere seu Height para Fillparent, não

esquecendo de apagar seu text, deixando-o em branco.

Para o espaço do Rodapé, inclua um Label e altere seu texto para algo que

descreva o seu aplicativo.

Aqui no rodapé abre-se uma gama de opções, que deixo a vocês acharem a

melhor forma de utilizar esse rodapé. Uma opção seria colocar os botões de


27

redes sociais. Que podemos explorar até o fim do desenvolvimento desse

aplicativo.

Esses botões utilizei imagens tiradas do Google Imagens e alterei suas

propriedades para Width 40px e heigth 40px. Mas as opções são muitas que

podem ser trabalhadas. Esse foi apenas um exemplo das diversas

possibilidades.

2.6 - Testando o Aplicativo

Para o teste do nosso aplicativo, você deve antes de tudo saber que temos

várias maneiras de se fazer esse processo. Um deles, consiste em baixar um

app na PlayStore, apenas digitando na caixa de busca AppInventor. Baixe

esse app em todos os celulares/tablets que você gostaria de testar.


28

Depois de feito a instalação dessas App, estamos prontos para o nosso

teste.

Na Aba Menu, selecione Connect e AllCompanion,

Essa escolha, irá criar um QRCode e pelo seu celular você deve escolher a

leitura do QRCode ou digitar o código gerado.


29

Note que temos algumas coisas para arrumar, e nada como alguns labels para

o conserto dessa estética apenas alterando o height para Fillparent.

Obs: Note que a partir de agora qualquer alteração feita, são refletidas

automaticamente no celular.

Abuse dos labels para centralizar nosso aplicativo e melhorar sua

estética.

Ao final teste seu aplicativo e faça as alterações que forem necessárias até ficar

com um visual excelente.


30

Configurando a tela Principal - Screen1

Vamos configurar a tela principal, para isso configure suas propriedades.

Altere:

AppName = O nome que irá

aparecer no Google Play

Icon = escolha nosso logo.

ScreenOrientation: Queremos que

nosso aplicativo apareça sempre

na vertical, por isso escolha Portrait

Title= O título do nosso aplicativo,

digite Élkoleta.

AlignVertical: Center

Com isso, já podemos salvar e testar nosso aplicativo, atente para o

AlignVertical = Center ele será

necessário para a próxima etapa

Resultado Final


31

Resumo: Para inicio de desenvolvimento estamos no caminho da felicidade,

com os principais métodos de construção de um aplicativo visto apenas nessa

primeira tela.. Temos muito ainda a caminhar mas, com esse primeiro passo

já dá uma gama do que é possível fazer com o AppInventor

2.7 Splash Screen

Vamos criar nossa tela de Abertura, conhecida como Splash Screen, temos

muitas maneiras de cria-la, escolhi o que achei a mais fácil de entendimento e

praticidade.

O desenvolvimento

Selecione todos os itens da nossa tela Screen 1 e altere sua propriedade para

Visible false

Faça isso para todos os itens, até que a tela principal fique totalmente em

branco.

Após, inclua um HorizontaArragement, renomeie para EspacoSplash e

altere suas propriedades conforme segue. AlignHorizontal e AlignVertical =

center


32

Após esse processo, seu logo deve estar ao centro da tela.

Incluindo um Timer

Para que a mágica possa acontecer, vamos incluir um timer da Aba Sensor,

arraste para o centro da tela e note que o mesmo se posiciona no Rodapé, esse

é um componente Não-Visível, mas será de grande ajuda.

Configurando o Timer

Para as configurações do Timer apenas altere seu TimeInterval para 4000 ou

seja 4 segundos.


33

Escondendo a tela Splash

Selecione o Item EspacoSplah e deixe seu status de Visible para False.

Ficando nossa tela em branco novamente. E na sequencia habilite todos os

outros espaços voltando à forma anterior.


34

2.8 - Blocks

Nesse momento, estamos entrando em um novo mundo, o de desenvolvimento

e da lógica de programação. Aqui é onde tudo acontece e merece um estudo

aprofundado sobre os eventos que queremos que nosso aplicativo faça.

Clique no botão Blocks no Menu a direita

E na tela que se abre temos um palco e a direita as opções de eventos de cada

item incluído na nossa Screen1.


35

Como queremos um evento na nossa tela de inicialização, devemos escolher

nossa Screen1, e localizar o evento de inicialização.

Arraste para o centro do palco nosso evento

Aqui a ideia é que ao inicializar nossos HorizontalArragements da tela Scree1

que estão visíveis, fiquem ocultas e que apenas apareça nossa splash Screen

por 4 segundos, após esse tempo nossa Splah se oculte e apareça nossas

HorizontalArragements novamente.

Selecione nosso EspacoSplah e selecione sua propriedade Visible,


36

Arrastando para dentro do nosso Screen de inicialização

Selecione da aba logic o item true

e arraste-o para o espaço após a palavra to.

Ou seja, ao inicializar nosso EspacoSplash estará visível, basta agora

deixarmos os outros espaços como false,

Lembrando que após 4 segundos o estado dos espaços deverão voltar ao

normal, então devemos configurar nosso Clock para fazer esse processo.


37

Não há dificuldades já que temos apenas que fazer o mesmo processo só que

agora ao inverso, o que é false passa para true e vice e versa.

Arraste para o centro da tela nosso Clock.Timer. e faça o mesmo processo

invertendo as condições do item visible.

Salve o projeto


38

E faça os testes, se precisar altere o tempo do clock para mais ou menos.

Dependendo da sua escolha pode agradar ou não o cliente final.

Erro na Estética da Splash Screen

Percebi que ao inicializar nossa Splah não centraliza, isso se dá as nossas

labels incluídas para a centralização,

Para resolver isso, renomeie as labels (image Acima) e fiz o mesmo processo

como se fosse um Espaço normal. Ficando nossos blocks da seguinte forma.

Com isso o resultado foi bem positivo. E você já está incluso no mundo dos

grandes desenvolvedores com o desenvolvimento de seu primeiro evento.


39

3.1 - A tela de Cadastro de Coleta

Para a nossa próxima tela devemos analisar os dados que queremos cadastrar e

quais os dados que queremos pesquisar no momento de se fazer uma pergunta

ao Aplicativo

E nada como desenhar nosso modelo antecipadamente.

Fiz o esboço na Paint, mas pode ser feito até mesmo em uma folha de caderno.

A ideia e fazer o layout seguindo o modelo e na sequencia trabalharmos a parte

de desenvolvimento, utilizando banco de dados para armazenamento dos dados

gravados.

Criando a tela de Cadastro

Na tela inicial clique no botão Add Screen e na tela que se abre de o nome

para nosso formulário CadColeta


40

Será aberto um novo formulário em branco que iremos seguir os mesmos

passos do formulário Principal.

Configure esse novo formulário como segue:

Inclua 03 HorizontalArragement e 01 Table arragement para a coleta dos

Dados, e configure conforme a tela Inicial Screen1. Apenas alterando os nomes

dos espaços para:

EspHeader


41

EspDados

EspBotoes

EspConsultas

Monte o Cabeçalho utilizando a mesma técnica anterior, com logo, label, e

acrescente um Button para podermos retornar a tela anterior.

Atente para os itens que foram renomeados, dando uma atenção especial ao

Button e a Imagem inserida ao button.

O espaço Dados

Dentro do espaço dados será inserido nossos textBox para o Cadastro do

nosso aplicativo, atente que nossa tabela já vem com duas linhas e duas

colunas, para acrescentarmos mais linhas apenas altere as propriedades da

tabela.


42

Inclua um Label para o darmos o nome ao Titulo e um textBox na segunda

coluna, aproveite para alterar os nomes dos componentes.

Poe padrão os Labels são iniciados por Lbl e os TextBox por Txt, assim:

Renomeie para :

LblRua e TxtRua

Aproveite para alterar os dados e de cada item, sendo a propriedade do textBox

com o text em Branco.

Faça o mesmo para o Item cidade:


43

Para o Item Estado, vamos incluir outro componente o Spinner, ele irá nos criar

uma caixa com vários itens pré-cadastrados.

Altere o nome do Label e aproveite para renomear os componentes.

Para o item Spinner inclua os dados que queremos que o nosso usuário escolha,

como estamos trabalhando com os Estados, inclua as Siglas de todos os


44

estados na propriedade ElementFromString, não esquecendo de incluir uma

vírgula entre as siglas.

Faça o mesmo processo para os dias da coleta. Apenas alterando os dados para

Seg, Ter, Qua. etc.

Ao final você terá sua tela praticamente pronta, basta agora incluirmos 02

buttons no espaço apropriado.

O espaço Botões

Inclua 02 button no espBotoes e entre eles vários Labels para a centralização

dos mesmos.


45

Aproveite para renomear os buttons e o labels, desmarcando o text do label

para que o mesmo não apareça.

Inclua 02 imagens de acordo com o tema proposto, inclusão e pesquisa.

O footer

Esse espaço será reservado para o resultado da nossa pesquisa, que será o

tema de outro capítulo, já que existem várias formas de mostrarmos o

resultado de uma pesquisa. No momento deixe apenas como esta.

3.2 Linkando a tela Principal a nossa tela de cadastro


46

Retorne a nossa tela principal

Screen1 e selecione nosso Blocks para criarmos um evento ao botão cadastro

de Coleta (BtnCadastrar)

3.3 Criando o Evento do Btncadastrar

Abra o Blocks e selecione o item Click do BtnCadastrar .


47

Inclua no Evento do Click do botão o item da Aba Control “Open another

screen”

E arraste para dentro do evento clique do botão

Feito isso, precisamos indicar qual screenName desejamos abrir, que no nosso

caso é o formulário criado CadColeta.

Arraste para o novo item da Aba Text um TextString e digite dentro da caixa o

nome do Formulário criado.

E digite dentro da caixa o nome do Formulário criado.

Com isso já podemos testar nosso aplicativo e verificar se tudo está correto,

Aproveite para fazer o mesmo processo no botão voltar do Formulário

CadColeta.


48

Apenas inclua um CloseScreen, pois não queremos deixar na memória a tela

que estamos fechando. Fazendo isso, estamos economizando espaço na

memória do usuário. E torna o aplicativo muito mais ágil.

Salve e faça os testes.

Verifique que o sistema esteja funcionando corretamente e que há necessidade

de se fazer alterações na estética do Formulário CadColeta. E a inclusão de

Labels, entre os espaços resolve todos os nossos problemas. Atente que, quase

não se tem espaço entre os botões e o espaço dados, e um label entre eles

resolveria esse problema.

4.1 O armazenamento dos dados.

Existem várias maneiras de se armazenar os dados, e para se trabalhar com

aplicativos temos algumas opções, algumas não tão boas em comparação aos

bancos desenvolvidos para Desktop.


49

Acredito que essas opções podem melhorar em muito no decorrer dos tempos.

Tipos de Armazenamentos

Atualmente temos 05 tipos de armazenamentos

Shared Preferences

Armazena dados primitivos provados em pares chave-valor.

Internal Storage ou Local Storage

Armazena dado privado na memória do dispositivo.

Você pode salvar arquivos diretamente na memória interna do dispositivo.

Por padrão, arquivos salvos na memória interna são privados a sua

aplicação e outras aplicações não podem acessá-las (nem o usuário).

Quando o usuário desinstala a aplicação, esses arquivos são removidos.

External Storage

Armazena dados públicos no cartão de memória.

Os dispositivos compatíveis com o Android suportam o uso de memórias

externas onde você pode salvar arquivos. Essa memória pode ser uma mídia de armazenamento removível (como um cartão SD) ou uma memória interna (não

removível). Os arquivos salvos na memória externa podem ser lidos por

qualquer outro dispositivo ou aplicação e podem ser modificados pelo usuário

quando ele ativar a transferência USB ao conectar o dispositivo com um computador.

Cuidado: Arquivos armazenados na memória externa podem desaparecer se o

usuário montar a mídia em um computador ou remover o cartão, e não existe

nenhuma medida de segurança sobre os arquivos salvos nesse tipo de

memória. Todas as aplicações podem ler e escrever arquivos localizados em memórias externas e o usuário pode removê-los.

SQLite Databases

Armazena dados estruturados num banco de dados privado.

O Android fornece suporte completo a banco de dados SQLite. Qualquer

banco de dados que você criar será acessível pelo nome por qualquer

classe da aplicação, mas não fora da aplicação.

http://developer.android.com/guide/topics/data/data-storage.html#pref

http://developer.android.com/guide/topics/data/data-storage.html#filesInternal

http://developer.android.com/guide/topics/data/data-storage.html#filesExternal

http://developer.android.com/guide/topics/data/data-storage.html#db


50

Network Connection

Armazena dados na web no seu servidor de rede.

Você pode usar a rede (quando disponível) para armazenar e recuperar dados

de seus serviços baseados e web. Para executar operações de rede, use classes dos seguintes pacotes:

Escolhendo a plataforma de banco de Dados

Vimos que temos algumas opções para armazenamento, e para esse curso,

escolhi a Network Connection, e a localhost. Uma por se tratar em algo

bem conhecido das pessoas a “Nuvem”. A vantagem que seus dados sempre

estarão no mesmo local e acessível a qualquer momento, mesmo se você tiver problemas no seu celular os dados estarão sempre preservados. E a Localhost,

para poder dar mais uma opção de escolha a você desenvolvedor.

Escolha qual mais se adapta a sua necessidade. Ou se preferir, você

pode testar os dois ao mesmo tempo e ao final fazer sua escolha.

Network Connection

LocalHost

4.2 Trabalhando com Fusion Conection

Vamos conhecer essa plataforma que para muitos ainda é nova, mas que faz grande sucesso entre os desenvolvedores, por se tratar de algo bem prático e

parecida com o nosso Excell. O maior problema encontrado entre os

desenvolvedores é a conexão entre seu aplicativo e o fusion Conection.

4.3 - O Google Drive

Como estamos trabalhando com o App Inventor, e você já está conectado na

Internet, apenas selecione o nosso Drive.

http://developer.android.com/guide/topics/data/data-storage.html#netw


51

Na tela que se abre clique em Novo- Mais – Google Fusion Tables


52

Na próxima tela que se abre, apenas clique em Create empty table

E será aberta uma plataforma para a digitação dos valores que queremos

armazenar

4.4 Alterando o nome da Tabela

Clique no nome New Table e renomeie para Elkoleta ou algo que melhor lhe

agrade. Após digitar o novo nome apenas clique em salvar


53

Obs: atente que no seu Google Drive, já consta a nossa tabela com o

novo nome, faça a verificação clicando na Aba do Google Drive.

Sabemos que temos que armazenar os dados da (“Rua, Cidade, UF, Dias de Coleta”) nessa ordem, e que todos os resultados deverão ser em formato de

Texto.

Criando a Tabela

Clique em Edit e na sequencia Change columns, para podermos editar nossa

tabela.


54

Na tela que se abre altere os dados já cadastrados.

Para o segundo item altere os dados number para Cidade tipo Text.


55

Faça o mesmo processo para os itens faltantes e ao final salve nossa tabela.

Atente para as alterações feitas na tabela.

Preenchendo nossa tabela com dados


56

De um clique Duplo no campo Rua, ou se desejar Edit rows para

preenchermos nossa tabela com alguns dados.

Ao retornarmos a tela anterior já temos nossos dados gravados com sucesso

Mas, isso é apenas o primeiro passo, temos que conectar nossa tabela ao nosso aplicativo e para isso vamos utilizar de uma plataforma do google pouco


57

conhecida de muitos desenvolvedores o Console de Apis do Google ou para

muitos Google Apis

4.5 - Google Apis

Nessa plataforma o Google nos disponibiliza a conexão de até 7 Aplicativos mais do que isso, ou você exclui 01 ou compra mais espaço. Mas para o que

desejamos fazer 7 é mais do que necessário.

Na tela que se abre clique em novo Projeto, apenas clicando na seta ao lado

do logo Google Apis

Digite um nome sugestivo para o nosso projeto e clique em Criar.


58

Ao clicar em Clicar em Criar será aberta a biblioteca de Apis

De o nome que será criado o seu projeto no App Inventor

Depois de criado o projeto, temos que pesquisar a Api criada, para isso clique

em Fusion Project


59

Isso irá permitir a comunicação com nosso aplicativo, então na próxima tela

basta ativar o Api

Ativar as credenciais

Na tela que se abre, selecione a Credicial, Chave da Conta de serviço.


60

Da Conta de serviço que se abre, selecione Nova Conta de Serviço e preencha

conforme Imagem abaixo.

Ao Clicar em criar, selecione na próxima tela Sem Papel.


61

Será criada a nota e um download se iniciará com o numero da conta atente

para a senha, você irá utilizar ela em breve. “notasecret”

Instalando o Certificado baixado

Instale o certificado, mas antes guarde esse downloads em uma pasta você

poderá utilizar esse certificado várias vezes, se precisar utilizar outra máquina.


62

Local que foi baixado o Certificado


63

Ao final teremos nossa aplicação com Certificado

Retorne ao Google drive e você verá um aplicativo Fusion disponível.

Vamos passar permissão para poder gerenciar o banco de dados para isso

retorne ao console developer do apis e clique em gerenciar contas de serviço


64

Na tela que se abre atente para o e-mail criado da sua conta, copie para

darmos permissão ao fusion de editar nossa tabela.

4.6 Dando acesso ao Fusion Tables

Retorne ao nosso Google drive e com o direito no arquivo criado, vamos

compartilhar e convidar as pessoas utilizando esse link para ser utilizado pelos

usuários.

Para isso clique com o direito na nossa tabela e em seguida compartilhar

Na tela que se abre, cole o link copiado das nossas credenciais.


65

3.5 Não se esqueçam de desmarcar a caixa Notificar pessoas.

Ao final clique em concluído e o processo todo está pronto. Basta agora

informar o App Inventor que nossa Api foi criada utilizando o endereço da nossa

tabela.

Linkando o Fusion com o App Inventor

Abra o app inventor e inclua no formulário CadColeta, o item da Aba Storage

FusionTableControl, ele é um componente Não Visível, por isso ele ira se

posicionar no Rodapé.


66

No item FusionTable, configure conforme imagem, trazendo para nossa Key

File , a Biblioteca baixado, ela é o link que fara a conexão a nossa tabela criado

no Google Drive.

No item e-mail, é o mesmo que utilizamos no compartilhamento.

Copie e cole no espaço devido


67

Para o ApiKey , iremos pegar o link do nosso aplicativo do Google drive , copie

tudo que estiver após o = e antes da #

Cole na nossa API Key

4.6 Gravando os Dados

Agora que já está tudo configurado, vamos abrir nosso Blocks e fazer a coisa

acontecer. Iniciaremos com a inclusão de uma variável da Aba Variables o

inicialize global.


68

Arraste ao Centro da tela e inclua um Text em branco, ele será nossa id de

contato com o FusionTables ,ela é a mesma que colamos na ApiKey.

Arraste para o palco o evento do botão BtnGravar-Click

E do nosso FusionTablesControl o evento de Inserir.


69

Vamos indicar ao FusionTablesControl que grave os dados na nossa tabela,

para isso, encoste o mouse na nossa variável ID, e aguarde aparecer as

opções de Get e Set

Escolha o get Global Id e, encaixe no nosso tableId do FusionTableControl,

aproveite para incluir da Aba Text, um text em Branco e um Join. Conforme

imagem abaixo.

Devemos dizer ao FusionControl para incluir os dados na seguintes colunas

Cadastradas na tabela, para isso utilizando de Aspas Duplas “ “ Inclua os nomes

dos nossos campos, separados por uma virgula.


70

Vamos agora informar ao FusionTabesControl que as colunas deverão receber

os dados do que for digitado no nossos TextBox, para isso vamos precisar de

mais algumas string no nosso Join, Apenas encoste o mouse na engrenagem e

inclua 08 Strings ao nosso Join.

Obs: O Join tem o poder de concatenar (juntar) valores na ordem que

você necessita.

Feito isso, devemos seguir o mesmo caminho digitado na nossa columns, que é

“Rua”, ”Cidade”, ”UF”, ”DiaColeta”.

Inclua um Text em branco e uma Aspa simples e na sequencia arraste para a

segunda string o textBox txtRua


71

Finalizando no próximo TextBox em Branco com Aspa simples e uma virgula

no meio, estamos

Obs: Atente que estamos trabalhando com os TextBox. Cuidado para não

incluir os dados do Label que são muitos parecidos. Esse erro é muito comum

e difícil de encontrar devido à falta de atenção.

Faça o mesmo processo para todos os outros itens conforme imagem abaixo.

Lembrando que estamos trabalhando com Spinner no campo UF e Dias de

Coleta e queremos coletar o que foi selecionado nesses campos.


72

E para finalizar vamos dar uma mensagem ao usuário que os dados foram

gravados com sucesso e limpar os textBox para ser liberado a outros cadastros.

Retorne ao design e inclua o componente Notifier ao palco, ele é mais um

componente Não visível. Mas responsável pelas mensagens que daremos aos

usuários.


73

Retorne ao Blocks e inclua um ShowAlertNotice,

Juntamente com um Text em branco ao nosso evento click. Digitando dentro

dele uma mensagem de sucesso.

Obs: Aqui poderíamos utilizar um IF Then Else, caso os dados não sejam

gravados, mas isso é material para um próximo tutorial.


74

Limpados os dados gravados

Assim como gravamos devemos incluir os dados dos textBox e uma caixa de

texto zerada, veja a imagem abaixo.

Com isso já podemos salvar e testar nosso aplicativo.


75

Estou utilizando o próprio emulador do App Inventor. Há muitos tutoriais na

Web ensinando como instala-lo e usa-lo,

Verifique no drive se os dados cadastrados foram salvos.


76

Como podemos verificar os dados estão na nossa tabela salva agora basta

partirmos para a coleta desses dados no nosso aplicativo.

5.1 Trabalhando com o banco de dados Localhost

Para o nosso banco local host, apenas abra nosso CadColeta e araste para o

centro um componente chamado TinyDb, ele é um componente não visível. Da

Aba Storage

Aba nosso Blocks e vamos organizar o espaço que nesse momento deve estar

bem poluído.


77

5.2 Organizando o espaço do Blocks

Clique com o direito no centro da tela e escolha Collapse Block e na sequencia

Arrange Blocks Verticalmente, com isso já irá dar uma estética bem melhor

ao seu espaço de trabalho.

5.3 Criando a Variável Dados

Inicie criando uma variável e de o nome ColetaDados, e da Aba List inclua a

variável um Create empty list, ou seja vamos criar uma lista de dados em

branco

Eu inclui mais um botão de salvar, a fim de não excluir o que já fizemos, e dei o

nome de CadastrarII ao final do projeto você pode decidir qual banco de dados

mais lhe agrada.


78

Retornando ao Blocks Inclua nosso componente ao Palco e dentro dele uma

item da Aba list

Add items to list, ele será responsável de criar nossa lista e enviar os dados

para a lista da nossa variável, então, para isso anexe um get global Coleta

Dados a nossa lista.

Juntamente com os dados dos nossos TextBox.

Vamos armazenar os dados no nosso Banco de dados, passando a rua como

parâmetro, aqui podemos passar qualquer parâmetro


79

Agora basta dar uma mensagem de Cadastro Ok e fechar o processo

Simples assim, faça os testes e veja que está tudo funcionando corretamente.


80

Agora já podemos criar a tela de pesquisa.

5.4 A tela Relatório

Crie mais uma Screen e de o nome de listaPorRua ou ListaCidade ou algo

que mais lhe agrade.

Aproveite para arrastar para dentro do palco um TinyDb1. Nosso banco de

dados


81

Na nossa tela Inclua 02 HorizontalArragement um para o Cabeçalho (Faça o

mesmo processo anterior),e dentro do segundo inclua um ListView

Configure o listView conforme imagem abaixo

E após o listView, inclua um TableArragement para mostrar os dados com 8

labels dentro deles, sendo 04 como Titulo e 04 que serão os resultados,


82

demarquei os espaços, mas você pode deixar o Text em branco para não

aparecer os “nnnnn” que coloquei como marcação.

Não se esqueça de renomear os labels.

5.5 O Evento da Pesquisa

Abra nosso Blocks e inclua duas variáveis sendo a primeira com o mesmo

nome do Formulário CadColeta, é dele que estão vindo nossos dados.

E o segundo é a variável irá criar nossa lista.

Montei o processo abaixo e acredito que você não terá dificuldades para

replicar,


83

5.6 Analisando

Estamos recebendo os dados da variável Coleta de dados, e incluindo ao

banco de dados, e montando a nossa listView em branco.

Na sequencia pegamos os valores da variável e incluímos os dados aos nossos

labels, na mesma sequencia que foi gravado no CadColeta.

5.7 Ao Inicializar

Selecione nosso Formulário e arraste para o palco o evento de inicialização, e

dentro dele vamos pegar nosso set Global TagDadosII, e inclui-lo ao evento,

note abaixo que estamos pegando os dados do banco de dados e montando

nossa listView com os dados da TagdadosII

Terminando assim nosso relatório, para testar basta digitar o nome de alguma

rua cadastra, e você verá o resultado. Teste e refaça se algo de errado.


84

O resultado Obtido com nossa

consulta.

Foi bem satisfatório

Com isso terminamos a parte do cadastro, para edição ou exclusão, você pode

ir direto ao Google drive e fazer as alterações por lá.


85

6.1 A tela Institucional

Todo aplicativo, deve ter uma tela Institucional, é nela que o usuário procura

informações sobre suas dificuldades e até mesmo é um excelente local para

fazer sua propaganda.

O nosso layout terá a seguinte forma (Muito parecida com nossa tela Screen1)

não acha...

Para isso crie uma 05 Screen de nome

Institucional

Contato

Sobre

Dúvidas

Desenvolvedor

E monte conforme a imagem acima deixo, os detalhes com vocês, já que foram

visto esse processo de desenvolvimento nas páginas anteriores.

Apenas vou mostrar o espaço blocks que por sinal é bem simples,


86

Praticamente ele apenas abre as telas que criamos e um evento do botão

fechar, que retorna a tela principal.

6.2 A tela Contato

Aqui trabalhei com vários horizotalArragement, e deixei invisível , vou detalhar

o passo a passo, acompanhe


87

Na abertura da tela irá aparecer o header, e os dois espaços “telefone e E-

mail”.

Atente que iniciei com um label superior, a fim de dar um espaço no

cabeçalho, onde o espaço header já é de conhecimento de vocês, apenas criei

um espaço Dados com um Vertical Arragement e inclui dentro dele 02

HorizontalArragement.

Sendo o primeiro para o telefone de contato e o segundo para enviar um

e-mail para o desenvolvedor.

Ao clicar em uma das opções ira aparecerem o espaço correspondente a

escolha.

A escolha me Ligue

Ao escolher Ligue para mim, irá aparecer o espaço com 02 labels, visualize a

imagem abaixo


88

A escolha envie-me um e-mail

Aqui foram trabalhados vários horizontalArragement, para uma melhor estética,

Lembrando que esses dois espaços deverão estar como invisíveis, e só

aparecerão ao clicar nos botões.


89

Acrescentando componentes.

Acrescente dois componentes Não visíveis a nossa tela, o Clock já conhecido

nosso é o ActivityStarter1

Criando os Eventos da tela de Contato

Abra nosso Blocks e crie os procedimentos conforme imagem, acredito que

nesse momento vocês não terão dificuldades de reproduzir os eventos.

Inicializamos com as cores dos botões e deixando false os espaços de e-mail e

telefone. Quando selecionamos o botão e-mail, o espaço telefone fica invisível e


90

aparece o que escolhemos e vice e versa. E o botão cancelar deixa invisíveis as

duas opções de espaço.

Para o Botão enviar atente ao textos em especial ao caminho

“android.intent.action.VIEW” ele diz que estaremos utilizando o servidor

android como ação do evento de enviar o e-mail.

Faça os testes e os acertos se forem necessários


91

Essa mensagem de erro se dá, devido estar utilizando um

emulador, em um aparelho normal

ele irá abrir o e-mail do Google.

6.3 A tela desenvolvedor

Uma tela simples, mas que explana toda a equipe que desenvolveu, coloque

sua foto e suas qualificações nesse espaço.


92


93

Nota: Não se preocupe com o texto não caber na tela, ao rodar o aplicativo ele

irá se encaixar perfeitamente.

6.4 A tela Sobre o Aplicativo

Uma tela simples que deve conter tudo sobre o aplicativo, como funciona, sua

versão, e qual a finalidade. Uma boa explanação é tudo que o usuário precisa

para avaliar seu aplicativo positivamente.

Idêntico ao anterior, sem muitos detalhes apenas informe o máximo possível de

dados ao usuário.

6.5 Finalizando

Retorne a tela inicial e link todos os botões as telas criadas e faça os devidos

testes e correções se forem necessárias.

Boa sorte nesse novo caminho...


94

7.0 Análises do tutorial

Chegamos ao fim desse tutorial, poderíamos produzir muitas coisas para

implementar esse aplicativo, como Mapas de onde estamos, animações, vídeos

explicativos, dar um ranking nas cidades que mais coletam o lixo urbano etc.

Mas, para fins didáticos, e para aqueles que não conheciam nada sobre

desenvolvimento de aplicativos, abre-se um novo mundo de grandes

expectativas e de trabalho. Atente que só estamos produzindo para 01

plataforma “Android” temos no mínimo mais de 12 opções de plataformas e

cabe a você, entrar nesse novo mundo com conhecimento e garra.

Cláudio Medeiros dos Santos Desenvolvedor.net

COLETA SELETIVA Utilizando App Inventor -...

Documents

Transcript of COLETA SELETIVA Utilizando App Inventor -...