Livro Inventor De Aplicativos - Microlins

AULA 01 ....................................................................................................... 5

1 - Introdução ao App Inventor .............................................................................. 6 1.1 - Primeiros Passos ............................................................................................. 6 1.2 - Interface de produção .................................................................................... 9

AULA 02 ..................................................................................................... 13

2 - Nosso primeiro App ..........................................................................................14 2.1 - App “Bateria_Eletronica” .............................................................................. 15 2.2 - Criação do App passo a passo ....................................................................... 15 2.3 - Programando nosso novo App ...................................................................... 24

AULA 03 ..................................................................................................... 29 3 - Diferentes modos de testar a Aplicação........................................................... 30 3.1 - Emulador .......................................................................................................33

AULA 04 ..................................................................................................... 37 4 - Verificação de condições e variáveis................................................................ 38

AULA 05 ..................................................................................................... 51 5 - Criando um cardápio mobile ............................................................................ 52

AULA 06 ..................................................................................................... 69

6 - Activity Starter, TinyDB e Clock ....................................................................... 70 6.1 - Novos componentes ......................................................................................70 6.2 - Projeto final ..................................................................................................70

Bibliografia ................................................................................................ 85

Imagens ................................................................................................................86

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

3

4

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

AULA 01 DESENVOLVIMENTO DE APLICATIVOS GOOGLE INVENTOR

Olá! Seja bem-vindo ao curso de Desenvolvimento de aplicativos com App Inventor! Neste capítulo, você verá todo o funcionamento da interface on-line do App Inventor para desenvolvimento de aplicativos em plataforma Android. Conhecerá, também, como é intuitivo o aprendizado desta poderosa ferramenta Open Source (código aberto) desenvolvida pelo MIT (Massachusetts Institute of Technology).

1 - Introdução ao App Inventor

1.1 - Primeiros Passos Para utilizar a ferramenta App Inventor, você necessariamente deverá possuir uma conta Google (a mesma utilizada para o Gmail). Caso você não possua uma conta, acesse o link a seguir: https://accounts.google.com/SignUp?continue=https%3A%2F%2Faccounts.google. com%2FManageAccount&hl=EN O App Inventor funciona como um software de criação de aplicativos, porém todo o processo de criação dos aplicativos será feito via browser (Ex.: Chrome – Preferencialmente –, Firefox etc.). Esse web app (software online) deve ser acessado no seguinte endereço: http://appinventor.mit.edu/explore/.

Fig. 1.1 - Página inicial do site do App Inventor

6

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Como você pode ver, o site do App Inventor é bem simples e objetivo. Nele você encontrará todos os pré-requisitos exigidos pelo sistema e saberá como adequar sua máquina para rodar a aplicação. Tudo isso acessando o menu verde Start. Ao clicar em Create, no canto superior direito da tela, automaticamente você será levado para a página de login do Google. Insira seus dados de login e senha e aceite os termos de utilização e integração a contas Google do App Inventor.

Fig. 1.2 - Integração da conta Google com o App Inventor

Fig. 1.3 - Termos de serviço do App Inventor

Após aceitar os termos de serviço, o sistema o levará para a interface de desenvolvimento (ambiente de trabalho), como nas imagens a seguir. O App Inventor convidará você a responder um questionário. Faça isso, se quiser. Se optar por fazer, clique em Take Survey Now. Se quiser responder posteriormente, clique em Take Survey Later. Se deseja não responder e não receber novamente esse convite, clique em Never Take Survey.

Fig. 1.4 - Convite para responder a um questionário

A próxima tela será uma mensagem de boas-vindas.

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

7

Fig. 1.5 - Tela de Início

Clique no canto superior esquerdo no botão Start New Project e verá a seguinte tela.

Fig. 1.6 - Nomeando seu primeiro projeto

Nomeie seu projeto como “Eletronic_Drum” ou “Bateria_Eletronica” e clique em OK. Observação: para nomear um projeto, você deverá seguir as regras de nomenclatura do App Inventor, e não poderá utilizar acentos ou espaços entre palavras. Se o nome do seu projeto for uma palavra composta, como “Bateria Eletronica”, utilize a forma utilizada anterior “Bateria_Eletronica”. A seguir, veja a tela da interface de produção (Designer) do App Inventor e, posteriormente, falaremos sobre todas as possibilidades que ela nos traz.

8

DESENVOLVIMENTO EXCEL DE APLICATIVOS AVANÇADO 2013 - GOOGLE INVENTOR

Fig. 1.7 - Interface de produção

1.2 - Interface de produção A interface de produção (Designer) do App Inventor é dividida em sete setores cujas funções são distintas. Veja a seguir.

Fig. 1.8 - Setores de produção na Interface do App Inventor

Chamaremos de setores os menus da interface de produção (Designer) para que você grave na memória as funções que cada um representa. Falaremos agora, brevemente, sobre cada um deles. • O Setor 1 (verde) é o nosso menu principal. É nele que iniciamos um novo projeto, salvamos um projeto, conectamos nosso projeto com um “emulador” (para testes de visualização), “compilamos” um projeto (salvar o projeto como uma aplicação Android do tipo .apk) e também que encontramos nosso menu Help (Ajuda) para suprir nossas dúvidas; • No Setor 2 (rosa), encontramos o nome do nosso projeto à esquerda e também os botões de gerenciamento de telas (visualizações) Screen1. Uma mesma aplicação poderá ter diversas telas e será nesse botão que faremos a migração entre elas. A seguir, temos o botão Add Screen para incluirmos no projeto uma nova tela e, posteriormente, o botão Remove Screen para remover. No canto superior esquerdo, temos dois importantes botões do App Inventor: Designer e Blocks. DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

9

O botão Designer ativa a interface inicial (visual) do projeto, cujos setores estamos enumerando agora. O botão Blocks (blocos) ativa o nosso ambiente de programação por de blocos, cuja tela você vê a seguir.

Fig. 1.9 - Ambiente de programação - Blocks

O ambiente é bem parecido com nossa interface de produção (Designer), porém será aqui que faremos toda a programação dos nossos componentes da aplicação. Explicaremos, posteriormente, esse ambiente (Blocks), quando já estivermos entendendo um pouco mais sobre lógica de programação. Voltemos ao ambiente Designer (interface de produção). • O Setor 3 (azul escuro) é certamente o cérebro do nosso projeto. Nele se encontram todas as possibilidades do projeto, como utilizar um botão, uma imagem, um som etc. • Para a visualização do projeto, temos o Setor 4 (laranja), no qual podemos ver tudo o que é inserido no projeto, a fim de arquitetarmos em tempo real nossas funcionalidades. • No Setor 5 (lilás), vemos os componentes inseridos no projeto e também podemos renomeá-los para nossa melhor compreensão. • No Setor 6 (verde escuro), encontramos as propriedades do componente selecionado, ou seja, se estivermos com o componente Button selecionado na tela de visualização (Setor 4), automaticamente veremos as propriedades desse componente e poderemos alterá-las. • No Setor 7 (azul claro), gerenciamos nossas mídias. É nele que fazemos o upload (envio) de arquivos de imagens (formatos .png e .jpg), sons (somente arquivos .mp3) e vídeos (somente arquivos .mp4). Agora que você conhece um pouco da interface gráfica, vamos aprender na prática como utilizá-la. Dessa forma, construiremos nossa primeira aplicação.

10

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Veja no próximo capítulo como fazer.

Fig. 1.10 - Tela de boas-vindas

A seguir, veja a tela inicial contendo projetos já feitos e o acesso à criação de novos projetos. Em seu primeiro acesso, obviamente, sua lista estará vazia, mas esse é só o começo!

DESENVOLVIMENTO DESENVOLVIMENTO DE APLICATIVOS DE APLICATIVOS - GOOGLE INVENTOR - GOOGLE INVENTOR

11

12

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

AULA 02 DESENVOLVIMENTO DE APLICATIVOS GOOGLE INVENTOR

Nesta segunda aula, daremos início ao nosso tão esperado primeiro aplicativo!

2 - Nosso primeiro App

Antes de iniciarmos nossa criação, vamos falar um pouco sobre Lógica de Programação. Muitos têm pavor da palavra programação, como se ela quisesse dizer “Bicho de Sete Cabeças”. Entretanto, isso não é verdade. Prova disso é que todos nós somos programadores natos. Sim, você ouviu bem! Desde muito pequenos, aprendemos a programar tudo o que fazemos, em nosso cérebro, seja quando estamos aprendendo a caminhar ou dar nossos primeiros passos. Ou seja, usamos a programação mesmo em uma tarefa simples que fazemos todos os dias, como escovar os dentes. Veja como funciona nossa programação diária de “escovar os dentes”. Primeiramente, verifi camos no banheiro se temos tudo de que precisamos, ou seja, uma pia, água, escova de dente, pasta de dente e toalha de rosto. Esses são nossos componentes. Depois, temos que saber o que fazer com eles, ou seja, quais são nossas ações. Em seguida, fazemos da seguinte forma: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16.

Pegamos a escova de dente; Abrimos a torneira para sair a água; Molhamos a escova de dente; Fechamos torneira; Pegamos a pasta de dente; Colocamos pasta de dente na escova; Fechamos o tubo da pasta de dente; Guardamos o tubo da pasta de dente; Escovamos os dentes; Abrimos novamente a torneira; Enxaguamos a boca e lavamos a escova; Fechamos a torneira; Guardamos a escova de dentes; Pegamos uma toalha; Enxugamos o rosto e as mãos na toalha; Penduramos a toalha.

Descrita dessa forma, uma simples atividade como a de escovar os dentes demonstra o quanto nossa vida depende dessa lógica de programação. Na concepção de aplicativos, não é diferente. Temos de saber o que fazer, com o que, quando e para quê. Isso é Lógica de Programação. Agora que você compreende um pouco mais sobre Lógica de Programação, vamos iniciar a criação do nosso primeiro aplicativo (App). O primeiro passo para quem vai construir um aplicativo é idealizá-lo, ou seja, visualizar mentalmente ou por meio de rascunhos toda a interface gráfi ca do seu App (como ele será visto). Você deverá também estabelecer um fl uxo sobre o funcionamento da aplicação, desde a abertura dele ao fechamento. Veremos na prática como isso funciona.

14

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

2.1 - App “Bateria_Eletronia” Primeiramente, devemos saber como funciona uma bateria eletrônica para, assim, imaginarmos como será o nosso aplicativo. Fizemos um arquivo wireframe, como se fosse um rascunho do que será nosso App. Veja na imagem a seguir.

Fig. 2.1 - Wireframe do projeto

Nesse wireframe, podemos ver que teremos cinco botões, sendo eles Chimbal, Caixa, Tom1, Prato e Bumbo. A ideia é que, quando clicarmos nesses botões, eles emitam seu respectivo som. Utilizaremos imagens e sons para esse nosso projeto. Todos os arquivos estão no link a seguir: https://www.dropbox.com/sh/6xtd213p9vfh49y/ AAA0ooqL09h84dNfVHPOhrn_a?dl=0 Ao abrir o link, clique em Baixar. Guarde o local no qual o arquivo foi salvo, encontre-o em seu computador, clique sobre o arquivo e descompacte o arquivo. Caso não consiga acessar o link ou tenha difi culdades para baixar os arquivos, peça para seu professor os arquivos solicitados. Agora vamos abrir o App Inventor no computador e começar a criar.

2.2 - Criação do App passo a passo Como visto no capítulo anterior, para criamos um aplicativo, devemos iniciar um projeto no App Inventor. Acesse o link http://appinventor.mit.edu e clique em Create. Se você tiver acessado recentemente o App Inventor, ao acessá-lo novamente, ele automaticamente já estará logado em sua conta. Se o sistema pedir, entre com seus dados de acesso de sua conta Google. Ao entrar no ambiente, clique no projeto criado anteriormente para ser levado à interface de produção. Caso não tenha criado um projeto, clique em New project e nomeie como “Bateria_ Eletronica” seu novo projeto.

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

15

Fig. 2.2 - Nomeando o projeto

Agora, vamos prosseguir com o passo a passo da criação. Neste momento, atente-se apenas a repetir os passos solicitados. Vejamos nossa primeira tela de produção.

Fig. 2.3 - Ambiente de criação

Nosso primeiro passo será estabelecer nosso layout (disposição dos objetos). Para isso, faremos o seguinte; Clique na seção Layout, localizada no Setor 3 do nosso ambiente de produção. Em seguida, clique, arraste e solte, para o Setor 4 (visualização), o componente TableArrangement. Sua tela deverá fi car como na imagem a seguir.

Fig. 2.4 - Componente TableArrangement

16

DESENVOLVIMENTO EXCEL DE APLICATIVOS AVANÇADO 2013 - GOOGLE INVENTOR

Esse componente é utilizado para estabelecer um layout (disposição dos elementos) no formato de tabela, para que consigamos inserir nossos objetos iniciais. Agora, com o componente selecionado (TableArrangement), vá até o Setor 6 (Propriedades) e escreva, no campo Columns (colunas), o número 2. No campo Rows (linhas), coloque também o valor 2. No campo Width (largura), selecione o valor Fill parent (Preencher pai), que significa estabelecer para a largura o tamanho da largura da tela. Clique em OK. Em seguida, configure o campo Height (altura) com o valor Automatic e clique em OK. Sua tela deverá ficar como a imagem a seguir.

Fig. 2.5 - Configurando as propriedades do TableArrangement

O próximo passo será inserir os botões dentro do nosso TabletArrangement. Lembre-se de que ele possui duas colunas e duas linhas, ou seja, ele funciona como um container capaz de abrigar quatro componentes. Clique no Setor 3, na seção User interface (interface do usuário), e depois clique e arraste para dentro do componente TableArrangement o componente Button (Botão). Faça isso novamente com mais três botões. Sua tela deverá ficar como a imagem a seguir.

Fig. 2.6 - Componente Button inserido dentro do componente TableArrangement

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

17

Com o componente Button1 selecionado, vá até o menu Propriedades e encontre o campo Text. Observe que, nesse campo, já há uma informação inserida, o texto “Text for Button1”. Perceba que esse texto aparece sobre nosso Button1 no Setor 4 (visualização). Apague-o e, depois, vá até o campo Image (imagem) e clique para alterar o valor. Em seguida, clique em Upload file… (enviar arquivo). Ao clicar, o sistema abrirá um campo para upload de uma nova imagem (media). Sua tela deverá aparecer como na imagem a seguir.

Fig. 2.7 - Enviando uma imagem

Clique em Choose file (escolher arquivo), encontre o arquivo “chimbal_active.png”, que deverá estar dentro da pasta Bateria_Eletronica/imagens/, e depois clique em OK. Sua tela deverá aparecer como a figura a seguir.

Fig. 2.8 - Imagem enviada

Agora, vamos repetir os passos anteriores de inserção de imagem para os botões Button2, Button3 e Button4. Lembre-se de sempre selecionar o botão que você deseja configurar.

18

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Após confi gurar os botões, sua tela deverá fi car como na fi gura a seguir:

Fig. 2.9 - Botões confi gurados com imagens

O próximo passo será inserir nosso último botão (Bumbo). Perceba que esse botão é maior e ocupará todo o restante de nossa tela. Dessa forma, nosso botão será inserido fora do componente TableArrangement. No menu Palette (paleta), na seção User interface, clique, arraste e solte o componente Button dentro do espaço em branco que restou na nossa Screen1. Sua tela deverá fi car como a fi gura a seguir.

Fig. 2.10 - Novo component Button5 inserido

DESENVOLVIMENTO DESENVOLVIMENTO DE APLICATIVOS DE APLICATIVOS - GOOGLE INVENTOR - GOOGLE INVENTOR

19

Agora, vamos alterar as propriedades do componente Button5, como fizemos com os botões anteriores, você ainda se lembra? A primeira delas será apagar o texto no campo Text; a segunda será alterar a largura (Width) para o valor Fit to parent e a terceira será configurar o valor da altura (Height) para o valor Automatic. Agora, vamos efetuar o upload correspondente ao componente do Button5 (Bumbo), cuja imagem será “bumbo_ active.png”. Encontre o arquivo e configure-o, como feito nos botões anteriores. Sua tela deverá ficar como a figura a seguir.

Fig. 2.11 - Novo component Button5 configurado

Perfeito! Agora, vamos renomear nossos componentes para que tenhamos um maior e melhor controle sobre nossos próximos passos. Clique em cada um dos componentes localizados no Setor 5 (Components) e, em seguida, clique em Rename (renomear). Note que uma nova tela aparecerá, conforme a imagem a seguir.

Fig. 2.12 - Renomeando componentes

20

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Faça isso com todos os componentes e sua tela deverá ficar como a figura a seguir.

Fig. 2.13 - Componentes renomeados

Nosso próximo passo será configurar o background (imagem de fundo) do nosso componente Screen1. No Setor 5, selecione o componente Screen1, que diz respeito a todo o conteúdo do nosso aplicativo. Agora, vá até o Setor 6 (propriedades) e altere o valor do campo BackgroundImage. Clique em Upload File... e encontre no seu computador a imagem “bg2.png” . Note que o procedimento de inserção é o mesmo dos botões anteriores. Após inserir a imagem do background, sua tela deverá ficar como na figura a seguir.

Fig. 2.14 - Configurando imagem de fundo do componente Screen1

Ótimo! Nosso próximo passo será inserir os componentes de som (Sound) em nosso projeto. Diferentemente do componente Button, o componente Sound fica dentro da seção Media, no menu Palette. Após encontrá-lo, clique sobre ele, segure-o e arraste-o até o Setor 4. Observe que o componente Sound não é um objeto visual e, neste caso, ele aparecerá abaixo da nossa visualização Screen1 como Non-visible components (componentes não visíveis).

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

21

Após inserido o componente Sound1, sua tela deverá fi car como a fi gura a seguir.

Fig. 2.15 - Componente Sound1 inserido

Repita o passo anterior mais quatro vezes, totalizando a inserção de cinco novos componentes de som (Sound), sendo Sound2, Sound3, Sound4 e Sound5. Sua tela deverá fi car assim

Fig. 2.16 - Componentes de som inseridos

As propriedades dos componentes de som são apenas duas: MinimumInterval (intervalo mínimo), que diz respeito ao intervalo de tempo (pausa) entre dois sons, e Source (fonte), no qual iremos efetuar o upload dos nossos arquivos de áudio (.mp3). No caso do MinimumInterval, vamos confi gurar todos os nossos componentes de som com o intervalo “0” (zero). Com o componente Sound1 selecionado, vamos clicar em Source, em propriedades, e depois em Upload File... . Encontraremos em nosso computador o arquivo de áudio “hihat.mp3” e faremos upload dele. Em seguida, vamos fazer o mesmo procedimento com os demais componentes de som. Para o componente Sound2, selecionaremos o arquivo “snare.mp3”; para o componente Sound3, selecionaremos o arquivo “tom1.mp3”; para o componente Sound4, selecionaremos o arquivo “crash.mp3” e, fi nalmente, para o componente Sound5, selecionaremos o arquivo “kick.mp3”. Todos os arquivos estão na pasta Bateria_Eletronica/sons/.

22

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Nosso próximo passo será renomear os componentes de som. Proceda com os passos a seguir: • • • • •

Renomeie Renomeie Renomeie Renomeie Renomeie

o o o o o

componente componente componente componente componente

Sound1 Sound2 Sound3 Sound4 Sound5

para para para para para

chimbal_sound; caixa_sound; tom1_sound; prato_sound; bumbo_sound.

Sua tela deverá fi car como a fi gura a seguir.

Fig. 2.17 - Componentes de som renomeados

Aqui, termina a inserção de conteúdo do nosso aplicativo. Agora, vamos para a tão esperada programação. Veja a seguir.

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

23

2.3 - Programando nosso novo App Como você já sabe, temos dois tipos de ambientes no App Inventor: o ambiente Designer, no qual estivemos até o momento, e o ambiente Blocks, que conheceremos agora. É no ambiente Blocks que faremos toda a programação do nosso App, ativando as funções que cada objeto terá na aplicação. Veja na fi gura a seguir o ambiente Blocks. Lembre-se de que, para ativá-lo, basta clicar no Setor 2, no botão Blocks.

Fig. 2.18 - Ambiente Blocks

Devemos, neste momento, nos atentarmos apenas a duas coisas: à seção Built-in, cujas ramifi cações são tipos de códigos utilizados, e, mais abaixo, à seção Screen1, que contém todos os componentes inseridos anteriormente. Lembre-se do que foi dito no início deste material: sempre devemos saber o que vamos fazer e também com quem ou com o que vamos fazer. No nosso caso, especifi camente, temos que fazer o seguinte: • • • • •

Ao clicar (ou tocar com o dedo) no botão CHIMBAL, devemos ativar o Play do áudio respectivo, no caso “hihat.mp3”; Ao clicar (ou tocar com o dedo) no botão CAIXA, devemos ativar o Play do áudio respectivo, no caso “snare.mp3”; Ao clicar (ou tocar com o dedo) no botão TOM 1, devemos ativar o Play do áudio respectivo, no caso “tom1.mp3”; Ao clicar (ou tocar com o dedo) no botão PRATO, devemos ativar o Play do áudio respectivo, no caso “crash.mp3”; Ao clicar (ou tocar com o dedo) no botão BUMBO, devemos ativar o Play do áudio respectivo, no caso “kick.mp3”.

Faremos isso da seguinte maneira: encontre e selecione no menu lateral o componente Chimbal, conforme fi gura seguinte.

24

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Fig. 2.19 - Componente do tipo Button Chimbal selecionado

Note que o elemento selecionado é um botão (Button). O sistema coloca à frente dele um ícone que lembra um botão. Quando esse tipo de elemento é selecionado, o sistema automaticamente nos dá diversas opções de ação (Functions ou funções). No caso, precisamos da função de clique (.click). Nesse caso, devemos selecionar essa opção (primeira da lista). Sua tela deverá fi car como a fi gura a seguir.

Fig. 2.20 - Componente Button Chimbal com acão de clique

DESENVOLVIMENTO EXCEL DE APLICATIVOS AVANÇADO 2013 - GOOGLE INVENTOR

25

Faça isso com os demais componentes do tipo “Botão” e sua tela deverá fi car como a fi gura a seguir.

Fig. 2.21 - Componentes do tipo Button com funções de clique

As próximas ações que devemos incluir estarão conectadas às ações anteriores. Observe que os blocos inseridos até o momento são como peças de um quebra-cabeças, cujo formato se encaixa exatamente às funções que iremos inserir. Agora, as ações ocorrerão nos componentes de som, cujo ícone lembra um alto-falante. Observe. Clique no componente de som chimbal_sound e verá a tela a seguir.

Fig. 2.22 - Componente do tipo Sound Chimbal selecionado

26

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Note que, agora, as ações apresentadas pelo sistema são outras, pois se trata de um componente de áudio. Precisamos da ação de Play (.play) para tocarmos nosso áudio. Essa ação aparece em segundo lugar na lista. Clique, segure e arraste essa ação de Play até a ação de clique do componente em questão (Chimbal). Conecte, como a figura seguinte.

Fig. 2.23 - Ação de .play do componente Sound conectado à ação .click

Muito bem! Agora, faça o mesmo com os outros componentes de áudio, conectando as ações .play às ações .click de cada um, respectivamente. Sua tela deverá ficar como na figura a seguir:

Fig. 2.24 - Ação de .play dos componentes Sound conectados à ação .click

Com isso, finalizamos as ações referentes ao conteúdo do nosso App. Agora, estamos prontos para testar. Veremos como instalar o emulador no próximo capítulo e também como testar nosso aplicativo diretamente em um smartphone Android.

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

27

28

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

AULA 03 DESENVOLVIMENTO DE APLICATIVOS GOOGLE INVENTOR

Agora que já conseguimos criar nosso primeiro aplicativo, chegou a tão esperada hora de o testarmos para podermos confi rmar se tudo está funcionando corretamente, que é exatamente o que faremos nesta aula.

3 - Diferentes modos de testar a Aplicação

O site do App Inventor nos traz três opções de teste para as aplicações criadas dentro do ambiente de produção.

Fig. 3.1 - Opções para testar a aplicação do App Inventor

A primeira opção, e também a mais recomendada pelo App Inventor, é o teste via wi-fi diretamente em um dispositivo Android. Essa opção é a mais recomenda, pois nela você terá a verdadeira impressão que um usuário Android terá quando o aplicativo estiver pronto, ou seja, é um teste muito fi el. Com o teste diretamente no dispositivo Android, você terá condições de avaliar se o projeto visual está fl uido e se o processamento da aplicação feita pelo smartphone corresponde ao esperado. Sem contar que somente nessa opção você terá condições reais de tocar na tela do dispositivo. Para poder efetuar esse teste, primeiramente será necessário possuir um dispositivo Android. Será necessário também efetuar o download do aplicativo MIT AI2 Companion, facilmente encontrado no link a seguir, que o levará para o ambiente de download da Google Play (acesse diretamente de um dispositivo Android): https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3 Também será possível efetuar o download por meio do QRCODE a seguir (é necessário possuir um leitor QRCODE em seu smartphone):

Fig. 3.2 - Download do MIT AI2 Companion via QRCODE

30

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Após instalar o aplicativo MIT AI2 Companion no smartphone, verifi que se seu computador, no qual o App Inventor está sendo executado, e seu smartphone estão utilizando a mesma rede wi-fi (requisito mínimo). Somente assim será possível efetuar esse teste. Agora que tudo está confi gurado, vamos voltar ao ambiente de produção em que nosso projeto está aberto. Com o aplicativo MIT AI2 Companion aberto em seu smartphone, vamos clicar em CONECT, localizado no Setor 1 da interface de produção. Posteriormente, vamos clicar em AI Companion. Veja a fi gura a seguir.

Fig. 3.3 - Acessando teste wi-fi via AI Companion

Observe que, ao clicar no botão AI Companion, o sistema automaticamente vai gerar um código, que poderá ser lido via QRCODE no aplicativo MIT AI2 Companion, em seu smartphone. Você poderá digitá-lo também dentro da aplicação. Veja, na fi gura seguinte, a aplicação aberta no smartphone com a opção via digitação do código gerado.

Fig. 3.4 - Acessando o teste no smartphone via código “connect with code”

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

31

Veja, a seguir, a tela com o leitor QRCODE ativado no smartphone.

Fig. 3.5 - Acessando o teste no smartphone via QRCODE “scan QR code”

Em ambas as situações, o resultado é o mesmo, como você pode ver na fi gura a seguir.

Fig. 3.6 - Testando a aplicação diretamente no smartphone via wi-fi

Esse mesmo teste via smartphone pode ser feito via USB. Para isso, você precisará de um smartphone Android, um cabo USB conectado no computador no qual o App Inventor estiver sendo executado (com os drivers reconhecidos pelo computador), e com o modo de armazenamento ativo no celular. Para efetuar esse teste, clique em CONECT e, depois, em USB. Aguarde o processamento e visualize a sua aplicação. O teste você confere na fi gura a seguir.

32

DESENVOLVIMENTO EXCEL DE APLICATIVOS AVANÇADO 2013 - GOOGLE INVENTOR

Fig. 3.7 - Testando a aplicação diretamente no smartphone via USB

3.1 - Emulador Podemos também testar a aplicação diretamente no computador com o uso do emulador fornecido pelo MIT. O emulador se chama aiStarter e as informações de instalação podem ser encontradas no link a seguir: http://appinventor.mit.edu/explore/ai2/setup-emulator.html Nesse link, você encontrará informações de instalação nas plataformas MacOs, Windows e Linux. Será necessário efetuar o download do pacote de instalação do aiStarter (emulador). Caso o emulador não esteja instalado na sua máquina ou caso você sinta dificuldades para efetuar a instalação, peça ajuda e maiores informações para seu Instrutor. Depois de instalado o aiStarter, para efetuar o teste com o emulador, volte ao App Inventor, clique em CONECT e depois em Emulador, como na figura a seguir.

Fig. 3.8 - Testando a aplicação com o emulador instalado

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

33

Se tudo estiver devidamente instalado, o App Inventor abrirá uma mensagem de carregamento do emulador.

Fig. 3.9 - Emulador sendo iniciado

Posteriormente, você verá o emulador na tela do seu computador, conforme as imagens a seguir. Observação: o processo de carregamento do emulador pode levar de 1 a 2 minutos.

Fig. 3.10 - Emulador iniciando o Android

34

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Em seguida desbloqueie o Android (emulador) para que a aplicação possa ser inicializada.

Fig. 3.11 - Desbloqueio do Android no emulador

Pronto! O próximo passo é testar nossa aplicação no emulador. Clique nos botões da bateria eletrônica e verifi que se estão funcionando. Se tudo estiver certo, para cada clique você terá um som correspondente.

Fig. 3.12 - Aplicativo Android sendo testado no emulador

Muito bem! Chegamos ao fi nal da nossa primeira criação de um aplicativo utilizando o App Inventor. Você acaba de criar um aplicativo simples e de conhecer um pouco mais dessa ferramenta poderosa que é o App Inventor. Vamos continuar nossa caminhada e conhecer muito mais sobre desenvolvimento de aplicativos Android nos capítulos a seguir.

DESENVOLVIMENTO DESENVOLVIMENTO DE APLICATIVOS DE APLICATIVOS - GOOGLE INVENTOR - GOOGLE INVENTOR

35

36

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

AULA 04 DESENVOLVIMENTO DE APLICATIVOS GOOGLE INVENTOR

Nesta aula, aprofundaremos ainda mais nossos estudos em programação para a criação aplicativos mobile.

4 - Verificação de condições e variáveis

Em programação, utilizamos em determinados momentos algumas estruturas de seleção e também fazemos verifi cações. Estruturas de seleções são algumas perguntas que podemos fazer para o nosso código. Veja um exemplo: Vamos supor que precisamos fazer um suco de laranja e, por algum equívoco, compramos também, junto ao nosso pacote de laranjas, uma lima da pérsia (parecida com uma laranja). Nesse caso, teremos que fazer algum teste em todas as frutas que compramos para saber se o que estamos selecionando para o nosso suco é uma laranja ou uma lima da pérsia. O teste mais óbvio será provar as frutas. Assim, identifi caremos a lima da pérsia como a mais azeda e a excluiremos da produção do suco. Nesse nosso caso específi co, fi zemos a verifi cação na condição da fruta. Se for azeda, excluímos; do contrário, selecionamos. Assim também funciona em programação. Temos alguns elementos capazes de testar nossa ação (funções) de diversas maneiras. Iremos citar algumas maneiras pertinentes ao nosso aprendizado inicial, mas antes falaremos um pouco sobre as variáveis. As variáveis são como caixas, na qual guardamos “coisas” e “ações”. Em programação, utilizamos o termo “carregar” algo em determinada variável. Para entendermos como funciona a variável, vamos a um exemplo simples e prático. Supondo que teremos que carregar alguns sacos de cimento em um percurso de 10 metros lineares utilizando uma carriola (ferramenta de construção civil), teremos a quantidade de sacos de cimento como nossa variável, ou seja, nosso peso pode variar. Com base nessa variável (peso), podemos determinar a velocidade com que levaremos os sacos de cimento: quanto mais peso, menos velocidade em detrimento da difi culdade imposta. É óbvio que, para melhor entendermos essas estruturas, teremos que praticar bastante. A primeira condição, de que falamos anteriormente, é a condição IF (se), uma maneira de, por meio da programação, perguntar algo para alguma coisa (exemplo da fruta: SE fosse azeda, excluía; do contrário, selecionava). O contrário da condição IF é a condição ELSE (mais), que, apesar da tradução literal, serve para dar uma nova opção para uma ação específi ca. Se fôssemos utilizar a condição ELSE no exemplo anterior (suco), faríamos o seguinte: se a fruta for azeda, faça uma limonada; do contrário, faça o suco de laranja. Compreenderam? Vamos entender na prática.

38

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Para isso, voltemos ao App Inventor, no ambiente Designer. Com nosso projeto “Bateria_ Eletronica” aberto, inclua um novo áudio no projeto, utilizando o componente Sound, facilmente encontrado dentro da seção Media. Veja a fi gura a seguir.

Fig.4.1 - Incluindo novo componente de som (Sound)

Renomeie o componente para “wrong”, como na fi gura a seguir.

Fig. 4.2 - Renomeando o componente de áudio

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

39

Nas propriedades do componente, confi gure o MinimumInterval para o valor “0” (zero). No campo Source, encontre o áudio específi co com o nome de “wrong.mp3”. O áudio encontra-se na pasta Sons, cujo download foi efetuado.

Fig. 4.3 - Enviando novo áudio para o projeto

Agora que você já enviou o áudio “wrong.mp3” para o novo componente de som, vamos para o ambiente de programação Blocks. Sua tela deverá aparecer como na imagem a seguir.

Fig. 4.4 - Ambiente de programação Blocks

40

DESENVOLVIMENTO EXCEL DE APLICATIVOS AVANÇADO 2013 - GOOGLE INVENTOR

Note que, ao rolar os elementos localizados à esquerda de sua tela, você encontrará o componente de som “wrong”. Clique sobre ele e selecione a ação wrong.play, como na imagem a seguir.

Fig. 4.5 - Ação .play no novo componente de áudio

Ao incluir a ação de “play” no ambiente de programação, o App Inventor irá sinalizar como um erro, mas não se preocupe: trata-se apenas de uma mensagem sinalizando a não existência de “pai” para a ação específica. O áudio “wrong.mp3” refere-se ao som de “Erro”, como uma campainha. A ideia é tocá-lo quando nossa condição for contrária à condição atual. Até o momento, não fizemos nenhuma verificação no nosso código, apenas mandamos o App Inventor tocar os áudios quando os botões forem clicados. Para efetuar uma verificação no código, primeiramente vamos focar no clique do botão Chimbal. Criaremos duas variáveis, que serão “Tocar” e “naoTocar”. Existem regras de nomenclatura para a criação de variáveis, dentre elas o fato de não utilizar acentos e não haver espaços entre as palavras. Para criar uma variável, no menu Blocks, selecione a seção Variables. Clique em Inicialize global Name to, como na imagem seguinte.

Fig. 4.6 - Criando uma variável local

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

41

Perceba que o bloco da variável pode ser renomeado no campo Name. Clique e renomeie sua variável para o valor Tocar. Aproveite para reorganizar seus blocos no ambiente de programação, como na imagem a seguir.

Fig. 4.7 - Renomeando a variável local

Agora, “falaremos” para o nosso código que a variável local Tocar tem como valor a lógica True (verdadeiro). Para isso, vá até o menu lateral esquerdo, na seção Logic, e clique no valor True. Arraste e conecte a variável Tocar, como na imagem a seguir.

Fig. 4.8 - Valor True para a variável Tocar

Agora, faremos a inclusão de uma nova variável com o nome de naoTocar, cujo valor é contrário à variável Tocar. Ou seja, colocaremos o valor False. Veja na figura a seguir como seu código deverá ficar.

42

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Fig. 4.9 - Nova variável naoTocar com valor False

Agora, vamos incluir a condição IF em nosso código. Para isso, vá até o menu lateral esquerdo, na seção Control, e selecione a condição IF, como na fi gura a seguir.

Fig. 4.10 - Adicionando o bloco IF ao código

Vamos, agora, utilizar um bloco de comparação matemática em nosso código que funciona assim: elemento “A” pode ser igual, diferente, maior, menor, maior igual ou menor igual ao elemento “B”. Para entender melhor, no menu lateral, na seção Math (matemática), selecione o segundo bloco que aparece na lista, como na fi gura a seguir. Aproveite para reorganizar seu código, separando o botão de clique do componente Chimbal mais acima da tela.

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

43

Fig. 4.11 - Adicionando a comparação matemática

Agora, precisamos entender o processo de condicional no código. Queremos verificar se as variáveis criadas são True ou False. Tudo isso será feito dentro da nossa ação de clique, afinal é nela que a verificação será feita. Observe que, no bloco IF, existem duas conexões, uma fará a verificação e a outra conectará a ação que será feita. Nesse caso, desconecte a ação de .play do botão de clique e conecte-a no nosso IF, como na figura a seguir.

Fig. 4.12 - Reconectando a ação de play à condicional criada

O próximo passo é arrastar nossa condicional para dentro do nosso clique, carregando a ação de .play que acabamos de reconectar. Veja a figura a seguir.

44

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Fig. 4.13 - Conectando a condicional criada com o antigo clique

Depois disso, devemos conectar nossa comparação matemática ao nosso IF, que agora está dentro da ação de clique. Veja na figura a seguir como deverá ficar sua programação.

Fig. 4.14 - Conectando a comparação matemática ao nosso IF

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

45

Você se lembra de que, anteriormente, havíamos falado sobre a condicional ELSE, que seria contrária à condicional IF? Pois é, vamos implementá-la no código. Para isso, note que, no bloco IF, existe um ícone em azul. Clique nele e selecione o valor ELSE. Arraste-o para a direita do pop-up, como na imagem a seguir.

Fig. 4.15 - Implementando a condicional IF com ELSE

Note que sua condicional agora está composta por IF e ELSE.

Fig. 4.16 - Condicional IF com ELSE

46

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Agora, arraste o bloco .play do componente wrong criado anteriormente para dentro da condicional ELSE e conecte, como na fi gura a seguir.

Fig. 4.17 - Condiciona ELSE com ação de play

Para que nosso conjunto de ações funcione, precisamos completar nossa comparação matemática. Podemos resolvêla de diversas maneiras, por isso a programação é tão interessante, pois é pura criatividade. Vamos incluir mais dois novos blocos. O primeiro deles será o bloco GET (obter), que está dentro da seção Variables, localizada no menu lateral esquerdo da tela. Veja a imagem a seguir.

Fig. 4.18 - Adicionando o bloco SET na programação

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

47

O bloco GET faz referência às variáveis criadas, podendo ser Tocar ou naoTocar. Confi gure o bloco GET com a variável Tocar por meio do seletor existente.

Fig. 4.19 - Carregando a variável Tocar dentro do bloco GET

Conecte o bloco GET, no primeiro valor que está vazio, no bloco de comparação matemática, como na fi gura a seguir.

Fig. 4.20 - Conectando a variável Tocar com GET à comparação matemática

Agora, inclua um novo bloco GET na programação. Desta vez, confi gure-a com a variável naoTocar. Na sequência, conecte-a ao segundo campo da comparação matemática. Sua tela deverá fi car como a fi gura a seguir.

48

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Fig. 4.21 - Conectando a variável naoTocar com GET à comparação matemática

Observe que, nesse momento, já não haverá mais nenhuma mensagem de erro na tela, pois sua ação (função) está correta. Porém, vamos analisar a nossa comparação matemática imposta na verifi cação IF. Note que estamos querendo saber nessa comparação SE a variável Tocar é IGUAL ( = ) à variável naoTocar. Lembre-se de que, ao criarmos as variáveis, determinamos valores para elas, sendo que a variável Tocar tem o valor True e a variável naoTocar tem o valor False. Ou seja, elas NÃO são iguais. Neste caso, nossa verifi cação IF não foi validada, sendo a condição ELSE favorável. Conclusão: ao efetuar o teste no emulador ou no smartphone, note que o áudio “wrong.mp3” será tocado. Vamos testar? Proceda com os passos aprendidos anteriormente para emular a sua aplicação. Caso tenha dúvidas, peça ajuda para seu professor.

DESENVOLVIMENTO EXCEL DE APLICATIVOS AVANÇADO 2013 - GOOGLE INVENTOR

49

Viram como ficou? Muito bem! Agora vamos alterar a nossa comparação matemática e verificar se a variável Tocar é DIFERENTE ( ≠ ) da variável naoTocar, alterando o seletor da comparação matemática para o símbolo ≠. Veja a imagem a seguir.

Fig. 4.22 - Reconfigurando a comparação matemática

Note que, ao configurar o valor da comparação matemática para ≠, você fez a seguinte pergunta para a programação da verificação IF: se a variável Tocar for DIFERENTE ( ≠ ) da variável naoTocar, toque o áudio chimbal_sound. Neste caso, a verificação foi favorável ao IF. Sendo assim, note que, ao emular o aplicativo, o som Chimbal será tocado corretamente, e não mais o áudio “wrong.mp3”. Faça agora esse mesmo conjunto de verificações e comparações para os outros componentes de clique em sua programação. Aproveite para alternar os valores das comparações matemática e, assim, efetuar novos testes. Sua tela poderá ficar como na figura a seguir.

Fig. 4.23 - Condicionais e verificações inseridas em todos os componentes de clique

Parabéns! Você acaba de se aprofundar ainda mais no mundo da programação e na criação de aplicativos mobile. Pratique, tente novas ações e experiências para aprimorar ainda mais seu conhecimento. 50

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

AULA 05 DESENVOLVIMENTO DE APLICATIVOS GOOGLE INVENTOR

Hoje, vamos criar um novo aplicativo. Será um cardápio mobile, muito útil nos dias de hoje e, ainda assim, muito pouco utilizado. Veja essa oportunidade de aprender como uma possibilidade de criar algo que, se bem lapidado, poderá ser comercializado futuramente e trazer valores monetários também.

5 - Criando um cardápio mobile

Para criar nosso novo aplicativo, utilizaremos novas imagens, que podem ser baixadas no link a seguir: https://www.dropbox.com/sh/3cd8znn2zqzigc3/AAC3MtJDn5OFS_r9I2O_t6Sqa?dl=0 Caso não consiga efetuar o download das imagens pelo link, peça para seu Instrutor os arquivos solicitados. Vamos para o App Inventor iniciar um novo projeto. Nomeie o projeto como Cardapio_Mobile (sem espaços entre as palavras e sem acentos).

Fig. 5.1 - Novo projeto - Cardápio Mobile

Nosso cardápio consiste em termos quatro telas (Screens) em um mesmo projeto. Para isso, clique no Setor 2, no botão Add Screen. Repita o procedimento até possuirmos quatro telas, que serão: Screen1, Screen2, Screen3 e Screen4. Selecione a Screen1, como na fi gura a seguir.

Fig. 5.2 - Seelcionando a Screen1

52

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

A Screen1 será a nossa tela de apresentação (início) e as demais telas serão nossos pratos selecionados. Para o desenvolvimento dessa aplicação, vamos utilizar um importante componente do App Inventor, o Listpicker, que é capaz de gerar uma lista de objetos que podem ser clicados e direcionar para novas telas ou novas ações. Primeiramente, vamos confi gurar nossa tela inicial. Na Screen1, adicione como backgroundImage (em propriedades) a imagem cheffmenu.png, como na fi gura a seguir.

Fig. 5.3 - Inserindo backgroundImage na Screen1

Sua Screen1 deverá fi car como na fi gura a seguir. Lembre-se de confi gurar o valor de BackgroundColor da Screen1 para None.

Fig. 5.4 - BackgroundImage da Screen1

O próximo passo será incluir o componente Listpicker. Clique e arraste para a Screen1. Note que o componente Listpicker se comporta como um botão ao ser inserido na tela. Confi gure-o com width Fill Parent e height Automatic. Limpe o texto no campo Texto das propriedades do Listpicker e insira uma imagem cujo nome é cliqueaqui.png.

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

53

Fig. 5.5 - Inserindo imagem no Listpicker

Sua tela deverá fi car como na fi gura a seguir.

Fig. 5.6 - Imagem inserida no Listpicker

Lembre-se de editar o valor de BackgroundColor do Listpicker para None (nenhum). Agora, vamos inserir as demais imagens nas próximas telas.

54

DESENVOLVIMENTO EXCEL DE APLICATIVOS AVANÇADO 2013 - GOOGLE INVENTOR

Selecione a Screen2.

Fig. 5.7 - Selecionando a Screen2

Na Screen2, vamos inserir um botão e, posteriormente, uma imagem. Para o botão, renomeie o texto para “Clique para voltar”. Para o width do botão, insira o valor Fill parent e, para o heigth, o valor Automatic. Sua Screen2 deverá ficar assim.

Fig. 5.8 - Inserindo um botão na Screen2

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

55

Acima do botão inserido, arraste o componente Image e configure-o com width Fill parent e height 800 pixels.

Fig. 5.9 - Inserindo Image na Screen2

Nas propriedades do componente Image, no campo Picture, insira a imagem exemplo_a.png.

Fig. 5.10 - Fazendo upload da imagem no componente Image

Sua tela deverá ficar como na figura a seguir.

56

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Fig. 5.11 - Imagem inserida no componente Image

Observe que a rolagem da tela foi ativada, pois temos uma imagem com altura maior do que a Screen. Role até o fi nal e note que nosso botão inserido anteriormente está no rodapé da nossa tela.

Fig. 5.12 - Componentes Image e Button inseridos na Screen2

Agora, faça o mesmo com a Screen3 e com a Screen4, porém, para a Screen3, utilize a imagem exemplo_b.png. Para a Screen4, utilize a imagem exemplo_c.png. Lembre-se de sempre adicionar primeiro o componente Button na tela e, posteriormente, o componente Image acima do Button.

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

57

Agora que você já inseriu as imagens e os componentes, vamos programá-los. Selecione a Screen1 e o ambiente Blocks referente a ela. A primeira coisa que devemos fazer é criar uma variável. Vamos nomeá-la como listaCardapio.

Fig. 5.13 - Variavel listaCardapio criada na Screen1

Agora, vamos utilizar o bloco Make a list, localizado na seção Lists, e conectá-lo com a nossa variável listaCardapio. Como teremos uma lista com três exemplos, clique no ícone azul do bloco Make a list e insira mais um item, como na figura a seguir.

Fig. 5.14 - Conectando bloco Make a list com três itens à variável listaCardapio

58

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Agora, temos que inserir para cada item do bloco Make a list um bloco de texto. Edite cada bloco com os valores: Exemplo A, Exemplo B e Exemplo C, respectivamente. Sua tela deverá ficar como na figura a seguir.

Fig. 5.15 - Inserindo blocos de texto no bloco Make a list

Agora, já temos nossa variável com os valores necessários para ser utilizada no componente Listpicker. Será preciso carregar nossa variável logo na inicialização do aplicativo, para que nossos seletores estejam ativos (lista de opções). Selecione o componente Screen1, clique no bloco When Screen1 inicialize e arraste-o, como na figura a seguir.

Fig. 5.16 - Inserindo o bloco When Screen1 inicialize

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

59

Esse bloco fará o carregamento da seleção de objetos do Listpicker. Para isso, selecione o componente Listpicker, arraste-o e conecte ao bloco Set Listpicker1 elements to o bloco When Screen1 inicialize, como na fi gura a seguir.

Fig. 5.17 - Conectando o bloco Set Listpicker1 elements to ao When Screen1 inicialize

O próximo passo será conectar a variável listaCardápio ao Listpicker. Utilize o bloco GET, como na fi gura a seguir.

Fig. 5.18 - Conectando a variável ao bloco Set Listpicker1 elements to

60

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Neste momento, efetue um teste com o emulador ou com um dispositivo smartphone e verifi que se o funcionamento está como nas fi guras a seguir.

Fig. 5.19 - Emulando o aplicativo

Fig. 5.20 - Listpicker no emulador

Note que, ao clicar na tela inicial, automaticamente você é levado para o Listpicker, como na imagem anterior. Repare que, ao clicar em uma das opções, o App Inventor retorna para a tela inicial, pois ainda não implementamos a ação após o objeto selecionado.

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

61

Agora, com o componente Listpicker selecionado, arraste para o ambiente Blocks o bloco When Listpicker1 .AfterPicking.

Fig. 5.21 - Selecionando o bloco When Listipker1.AfterPicking

Fig. 5.22 - Bloco When Listipker1 .AfterPicking inserido

62

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Esse bloco corresponde ao objeto clicado no Listpicker (objeto selecionado). Neste bloco, faremos a seguinte verifi cação com IF/ELSE: se o texto referente ao clique retornar o valor Exemplo A, vamos para a Screen2; se retornar o texto Exemplo B, vamos para a Screen3; se retornar o texto Exemplo C, vamos para a Screen4. Primeiramente, vamos inserir uma condição IF dentro do bloco When Listipker1.AfterPicking e dentro dela vamos implementar mais dois ELSE/IF, como na fi gura a seguir.

Fig. 5.23 - Inserindo condicional ELSE/IF dentro do bloco When Listipker1 .AfterPicking

Precisaremos conectar em nossas condicionais IF e ELSE/IF um bloco de comparação de texto, como na fi gura a seguir.

Fig. 5.24 - Inserindo comparação de texto aos nossos IF e ELSE

DESENVOLVIMENTO EXCEL DE APLICATIVOS AVANÇADO 2013 - GOOGLE INVENTOR

63

Sua tela deverá fi car como na fi gura a seguir.

Fig. 5.25 - Comparação de texto inserida aos nossos IF e ELSE

Note que o seletor de comparação de texto deverá fi car com o valor IGUAL ( = ). Lembre-se de que queremos comparar o valor do texto recebido na seleção do Listpicker com o valor inserido no campo posterior. Dessa forma, insira o bloco Listpicker.Selection em cada campo inicial da nossa comparação de texto. Sua tela deverá fi car como a fi gura a seguir.

Fig. 5.26 -Variável listaCardapio inserida na comparação de texto

64

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Agora, nos campos restantes, vamos inserir os valores de comparação, que são: Exemplo A, Exemplo B e Exemplo C. Utilize o bloco Text. Sua tela deverá fi car como a fi gura a seguir.

Fig. 5.27 - Comparando o texto da variavel recebida com o texto inserido

Já temos nossas condicionais inseridas, porém ainda não inserimos as ações para cada uma delas. Agora é simples: vamos inserir o bloco Open another screen sreen name em cada uma das ações Then dos nossos IF e ELSE. Para isso, localize o bloco Open another screen screen name, que está na seção Control, no menu lateral esquerdo.

Fig. 5.28 - Bloco Open another screen screen name

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

65

Insira os blocos Open another screen screen name para cada uma das ações Then dos nossos IF e ELSE. Sua tela deverá ficar como a figura a seguir.

Fig. 5.29 - Blocos Open another screen screen name inseridos

Agora, faremos a inserção de mais três blocos de texto, cada um contendo a informação referente à tela que vamos migrar após a validação dos IF/ELSE. O primeiro deles será o texto “Screen2”, o segundo o texto “Screen3” e, por último, o texto “Screen4”. Conecte os blocos de texto criados às ações de troca de tela, como na figura a seguir.

Fig. 5.30 - Blocos de texto com os valores conectados

Ótimo! Aqui terminamos a programação da nossa Screen1. Agora, vamos programar os cliques dos botões das telas Screen2, Screen3 e Screen4. Selecione a Screen2 no botão correspondente localizado no Setor 2. Agora, com o componente Button1 selecionado, insira um bloco .click na tela. Posteriormente, você deverá inserir um bloco Open another screen screen name e preenchê-lo com um bloco de texto cujo valor será Screen1.

66

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Perceba que estamos programando o retorno para a Screen1 após o clique no botão Clique para voltar. Sua tela deverá fi car como a fi gura a seguir.

Fig. 5.31 - Clique do componente Button1 confi gurado

Repita esses passos nas telas Screen3 e Screen4, fazendo sempre a mesma referência no bloco de Text para o valor Screen1 (retornar para a Screen1). Perfeito! Agora, podemos efetuar nosso teste fi nal no emulador ou smartphone e verifi car o funcionamento do nosso novo aplicativo Cardápio Mobile.

DESENVOLVIMENTO EXCEL DE APLICATIVOS AVANÇADO 2013 - GOOGLE INVENTOR

67

68

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

AULA 06 DESENVOLVIMENTO DE APLICATIVOS GOOGLE INVENTOR

Nesta aula, faremos o fechamento do curso de App Inventor. É muito importante que você recorde os passos anteriores e os repita diversas vezes para a fi xação do conteúdo.

6 - Activity Starter, TinyDB e Clock

Faremos agora um novo e último projeto. Neste projeto, você conhecerá três novos componentes non-visibles (invisíveis) na interface Designer, porém são componentes muito importantes e de enorme utilidade em projetos que necessitam de atividades nativas do sistema operacional Android, bem como em automação de projetos.

6.1 - Novos componentes O Activity Starter é um componente responsável por integrar ações nativas do Android (do sistema operacional) com as ações do usuário. O componente TinyDB é o banco de dados da aplicação. Ele é capaz de indexar informações dentro da aplicação para que ela consuma os dados salvos. Os dados são salvos com chaves (tags), dessa forma é possível consumir dados de diversas chaves em determinadas situações. O componente Clock é responsável pela automação da aplicação. É a persistência automatizada, podendo ser utilizado como uma espécie de timer para determinadas ações dentro da aplicação.

6.2 - Projeto final Nosso projeto fi nal tem como objetivo consumir dados inseridos na aplicação, gravar automaticamente os dados inseridos e acessar uma função nativa do sistema operacional. Faremos um App de pesquisa nas redes sociais. Teremos auxílio de um componente que estamos vendo pela primeira vez, cujo nome é TextBox, que possibilita a chamada (utilização) do teclado virtual (função nativa) na inserção de texto. Neste novo desenvolvimento, você utilizará novas imagens, que podem ser baixados no link a seguir: https://www.dropbox.com/sh/66yvxt8eg6oeva8/AADVb6ZXLTwUo-8AWVsAtIt6a?dl=0 Se não for possível acessar o link, peça para o seu educador disponibilizar os arquivos. Primeiramente, inicie um novo projeto com o nome Search_Social.

70

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Fig. 6.1 - Novo projeto Search Social

O próximo passo será inserimos, com o auxílio do menu lateral, à esquerda da interface de produção do App Inventor, o componente TableArrangement. Vamos confi gurá-lo com duas colunas e duas linhas. Confi gure o width com o valor Fill parent e o height com valor Automatic, como na imagem a seguir.

Fig. 6.2 - TableArrangement

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

71

Faremos a inserção de quatro botões dentro do TableArrangement, respeitando as disposições impostas de duas colunas e duas linhas. Confi gure os botões com o width no tamanho de 160 pixels e o height com 160 pixels também. Lembre-se de remover os textospadrão dos botões inseridos. Veja a seguir.

Fig. 6.3 - Botões inseridos

Agora, vamos inserir as respectivas imagens referentes aos botões. Fique à vontade para posicioná-las. Veja a seguir.

Fig. 6.4 - Imagens dos botões inseridas

72

DESENVOLVIMENTO EXCEL DE APLICATIVOS AVANÇADO 2013 - GOOGLE INVENTOR

Agora, vamos inserir o componente TextBox acima do nosso TableArrangement. Para as configurações desse componente, insira, no campo Hint, o texto search here. O width deverá estar com Fill parent e o height com 100 pixels. Para o BackgroundColor, configure a cor Light Gray. Perceba que temos um checkbox com os dizeres Multiline (multilinhas). Clique e selecione essa opção. Sua tela deverá ficar como a imagem a seguir.

Fig. 6.5 - TextBox inserido e configurado

Agora, vamos inserir os componentes non-visibles. Faremos, primeiramente, a inserção do componente Activity Starter, facilmente encontrado no menu lateral da seção Conectivity. Arraste-o para a interface de produção. Nas configurações, preencheremos apenas o campo referente à seção Action com o valor android.intent.action.VIEW (escrito exatamente dessa forma). Veja como sua tela deverá ficar na figura a seguir.

Fig. 6.6 - Activity Starter inserido

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

73

Agora, faremos a inserção do componente TinyDB (banco de dados), que será encontrado na seção Storage. Arraste-o para a interface de produção. Nesse componente, não será necessário efetuar nenhuma configuração.

Fig. 6.7 - TinyDB inserido

O próximo componente a ser inserido será o Clock. Ele é encontrado na seção Storage. Arraste-o para a interface de produção e mantenha as configurações-padrão do componente.

Fig. 6.8 - Componente Clock inserido

Termina aqui nosso trabalho na interface Designer. Vamos para a interface Blocks para editarmos nossa programação.

74

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Com a interface de Blocks aberta, devemos primeiramente interpretar as funções .click que teremos. Serão quatro ações, uma para cada botão inserido - Button1, Button2, Button3 e Button4. Insira as ações, conforme a fi gura a seguir.

Fig. 6.9 - Ações de clique inseridas

Agora, faremos a inserção do componente Set ActivityStarter1.DataUri to. Faremos a inserção desse componente em todas as ações de clique inseridas. Note que essa ação está ligada ao componente ActivityStarter, ou seja, para inserir as ações, primeiramente devemos clicar nesse componente. Sua tela deverá fi car como a fi gura a seguir.

Fig. 6.10 - Blocos Set conectados aos cliques

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

75

O próximo passo será inserir um bloco do tipo Text com a ação Join (juntar) em cada um dos componentes Set recém-inseridos. Sua tela deverá ficar como a figura a seguir.

Fig. 6.11 - Blocos Join conectados aos blocos Set

Faremos a inserção de um bloco de texto editável para cada primeira conexão dos blocos Join inseridos anteriormente. Veja como deverá ficar.

Fig. 6.12 - Blocos Text conectados aos blocos Join

76

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Agora, no conector que sobrou do bloco Join, vamos inserir o bloco TextBox1.text em cada um deles, como na figura a seguir.

Fig. 6.13 - Blocos TextBox1 conectados aos blocos Join

Perceba que Button1 faz referência ao ícone da rede social Facebook. Já o Button2 faz referência ao Twitter e os Button3 e Button4 fazem referência ao YouTube e ao Google Plus, respectivamente. Agora, vamos editar os blocos Text inseridos, sendo que cada um terá um texto diferente. Veja a seguir os textos que devem ser inseridos em cada botão. • • • •

Button1 Button2 Button3 Button4

-

https://www.facebook.com/search.php?q= https://twitter.com/search?q= https://www.youtube.com/results?search_query= https://plus.google.com/s/

Veja a seguir como deve ficar a estrutura.

Fig. 6.14 - Textos inseridos nos blocos Text

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

77

Acabamos de descrever um link para cada rede social clicada. Agora, faremos a inserção da programação do nosso banco de dados. Utilizaremos o bloco Call TinyDB1.StoreValue conectado ao nosso bloco ActivityStarter1. Para encontrar esse bloco, lembre-se de manter selecionado o componente TinyDB1. Veja a fi gura a seguir.

Fig. 6.15 - Bloco Call TinyDB1.StoreValue conectado

Como você pode ver, esse bloco possui duas conexões e elas são obrigatórias. Faremos a inserção de um bloco Text na conexão Value e novamente vamos inserir o bloco TextBox1, desta vez nas conexões valueToStore. Insira, no bloco Text, o texto Search (procurar).

Fig. 6.16 - Blocos Text e TextBox1 conectados ao .StoreValue do banco de dados

78

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Agora, faremos a inserção do bloco responsável por inicializar a ação do ActivityStarter. Esse bloco se chama Call ActivityStarter.StartActivity. Vamos conectá-lo logo abaixo do bloco Call TinyDB1.StoreValue. Lembre-se de selecionar o componente ActivityStarter1.

Fig. 6.17 - Bloco .StartActivity conectado

Aqui terminamos nossa função de clique, mandando e recebendo informações do banco de dados, porém ainda temos que confi gurar outras ações ligadas à inicialização do nosso App e também ligadas à nossa persistência automatizada, responsável por gravas nossos dados no banco automaticamente, de 1 em 1 segundo. Selecione a Screen1 e, em seguida, encontre o bloco When Screen1 initialize. Coloque-o no ambiente Blocks. Agora, conecte o bloco Set TextBox1.Text ao bloco inserido anteriormente. Você deverá ter a seguinte tela.

Fig. 6.18 - Set TextBox1.Text conectado

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

79

Conecte agora o bloco Call TinyDB1.GetValue ao bloco inserido anteriormente.

Fig. 6.19 - Get TinyDB1 .GetValue conectado

Note que esse bloco traz, já conectado com ele, um bloco Text. Vamos inserir mais um e vamos editá-los com os textos Search e Search here, respectivamente.

Fig. 6.20 - Get TinyDB1 .GetValue com tags confi guradas

80

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Agora, vamos programar o componente Clock1 com a ação .Timer. Selecione o componente Clock1 e, em seguida, o bloco When Clock1.Timer.

Fig. 6.21 - Inicializando o componente Clock1

Lembre-se de que esse componente é responsável pelo nosso salvamento automático, ou seja, ele fará o salvamento automático das nossas informações no banco de dados. Conecte a esse componente o bloco Call TinyDB1.StoreValue.

Fig. 6.22 - Call TyniDB1 .StoreValue conectado

DESENVOLVIMENTO EXCEL DE APLICATIVOS AVANÇADO 2013 - GOOGLE INVENTOR

81

Na sequência, vamos conectar um bloco de Text, cujo texto será novamente Search. Logo abaixo, na conexão ValueToStore, o bloco TextBox1.Text, como na fi gura a seguir.

Fig. 6.23 - Blocos Text e TextBox1 .Text conectados

Com isso, fi nalizamos nossa programação. Agora, devemos testar nossa aplicação e ver o que ela é capaz de fazer.

Fig. 6.24 - Testando a aplicação

Se você seguiu corretamente os passos, sua aplicação deverá agir da seguinte forma: Ao inserir uma palavra simples ou composta no componente TextBox1 e, posteriormente, clicar em um dos botões, automaticamente sua aplicação acionará um recurso nativo do seu smartphone, o browser de navegação. Ao retornar do browser para o aplicativo, note que a pesquisa inserida anteriormente está mantida no TextBox1, pois temos o componente Clock1, que salva nossas informações automaticamente em nosso banco TinyDB1. Faça diversas pesquisas em seu novo aplicativo para compreender melhor seu funcionamento.

82

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

6.3 - Conclusão Aqui termina nosso curso de desenvolvimento de aplicativos com o App Inventor. Note que você aprendeu diversos recursos e poderá usá-los de maneiras distintas. Navegue sempre pelo site do App Inventor para acompanhar tutoriais e informações atualizadas sobre essa valiosa ferramenta de criação.

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

83

84

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Bibliografia

Júlio Battisti MCSE, MCSA, MCDBAeE MCSD, Windows Server 2003 – Curso Completo Sites: Disponível em: . Acesso em 16 de Out. de 2014. Disponível em: . Acesso em: 16 de Out. de 2014. Disponível em: Acesso em: 16 de Out. de 2014. Disponível em: Acesso em: 18 de Out. de 2014. Disponível em: Acesso em: 19 de Out. de 2014. Disponível em: Acesso em: 19 de Out. de 2014.

-

Disponível em: Acesso em: 19 de Out. de 2014. Disponível em: Acesso em: 19 de Out. de 2014. Disponível em: Acesso em: 19 de Out. de 2014. Disponível em: Acesso em: 19 de Out. de 2014. Disponível em: Acesso em: 19 de Out. de 2014. Disponível em: Acesso em: 19 de Out. de 2014. Disponível em: Acesso em: 19 de Out. de 2014. Disponível em: Acesso em: 19 de Out. de 2014. Disponível em: Acesso em: 19 de Out. de 2014. Disponível em: Acesso em: 19 de Out. de 2014. Disponível em: Acesso em: 19 de Out. de 2014. Disponível em: Acesso em: 19 de Out. de 2014. Disponível em: Acesso em: 19 de Out. de 2014.

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

85

Disponível em: Acesso em: 19 de Out. de 2014. Disponível em: Acesso em: 19 de Out. de 2014. Disponível em: Acesso em: 19 de Out. de 2014.

Imagens: A responsabilidade pelos direitos autorais das imagens desta obra é do autor.

86

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR