No dia 27 de outubro Brenda e eu facilitamos uma oficina para criação de uma calculadora de Pegada Hídrica lá na Escola Politécnica da UFBa, como parte da programação da Semana Nacional de Ciência & Tecnologia 2017. Quem estava conosco participando foram os estudantes do Colégio Estadual de Plataforma. Animados, curiosos, interessados, participando total. Valeu, galera, e desculpem pela correria ao final da oficina!

Infelizmente, o tempo foi mais curto do que imaginamos, e não deu para concluir toda a calculadora na sexta. Assim, para nos redimir, e também para compartilhar o que fizemos com mais pessoas. Brenda elaborou um super tutorial com o passo a passo da Calculadora de Pegada Hídrica, e que já serve um pouco para ter uma visão de como é programar usando o App Inventor.

Curtiu? Então se ajeita, pega uma água, e senta bem confortável aí, que lá vem história…

Mas, antes, para tudo. Pra que eu quero calcular a Pegada Hídrica, se nem sei o que é isso? Vamos por partes… Quantos litros de água você acha que um simples café da manhã gasta para ser produzido, até chegar na sua mesa?

Uma calculadora da Pegada Hídrica serve justamente para você poder fazer esse tipo de cálculo. E este tutorial é para você fazer a sua própria calculadora. 😀

Pegada Hídrica é um indicador da quantidade de água que se gasta na produção de produtos e serviços. Também se fala em consumo de água indireto, nesse caso.

Para completar esse tutorial, você vai precisar de:

  • Um computador com acesso à internet;
  • Uma conta do Google, para usar o App Inventor;
  • Para instalar e testar o aplicativo:
    • um celular tipo smartphone, com Android, com alguma memória disponível;
    • autorizar a instalação de software de fontes desconhecidas (isso é feito no celular, nas configurações);
    • um cabo USB ou
    • o aplicativo do MIT AI2 Companion no celular, e acesso à internet no celular, para baixar o aplicativo.
  • Uma imagem legal para usar de plano de fundo, no aplicativo.

Além disso, o tutorial pode demorar um pouquinho, e, se você nunca mexeu com App Inventor antes, algumas partes podem ser meio confusas. Então, separe um tempo para fazer o tutorial de boas, sem precisar parar muito, e podendo ler as instruções direitinho!

E aí, tudo pronto? Vamos nessa!

Para começar, abra o App Inventor: http://ai2.appinventor.mit.edu/. Lembre que você vai precisar ter uma conta da google, então, se não tem, separe um tempo para criar uma.

[Não sabe pra que lado vai o app inventor? Relaxa que fizemos um tutorial para isso também: Tutorial AppInventor]

Tela 1

A Tela 1 recebe informações do usuário

Tela 2

Tela 2 – Mostra o resultado calculado pro usuário

Nossa calculadora deve ficar mais ou menos assim (essas imagens são da que nós fizemos. Se você não quer seguir todo o tutorial e em vez disse prefere mexer com algo já feito, você pode baixar o projeto da nossa calculadora: https://goo.gl/DUt1Zd).

 

 

No app inventor, vamos precisar dos seguintes componentes para a primeira tela:

  • Localizados em Interface de Usuário: Legenda, Caixa de Texto e Botão
Componentes de Interface

Componentes de Interface

  • Localizados em Organização: Organização Horizontal e Organização em Tabelas
Componentes de Organização

Componentes de Organização

  • Localizado em Armazenamento: TinyDB
Componente de Armazenamento

Componente de Armazenamento

[Quer saber o que é cada um desses elementos? Manda um comentário aí que a gente explica! (; ]

Quando estiver pronta, primeira tela deverá ficar assim:

Para isso, vamos fazer o seguinte:                                    

1º passo: Inserir o título

Inserindo o título da tela

1º passo: Inserindo o título da tela

  1. Componente: Texto de Legenda;
  2. A largura na opção de “preencher principal” serve para ocupar o espaço todo da tela, aqui;
  3. Lembre-se de sempre renomear os componentes, para facilitar o processo na hora de colocar a lógica dos componentes, com os blocos. Use nomes que descrevam o que o componente é ou faz!
  4. Depois de mudar a opção da largura, você pode posicionar o texto onde ficar melhor: centralizado, à direita ou à esquerda. Aqui, “Seu nome” está alinhado à esquerda, enquanto “Calcule sua pegada” está centralizado.

2º Passo. Nome do usuário:

Segundo passo: Nome de usuário

2º passo: Nome de usuário

  1. A caixa de texto é onde o usuário deverá digitar alguma informação, então essa caixa deve ficar em branco;
  2. A dica serve para colocar orientações ao usuários, nesse caso, será “digite aqui seu nome” – e só irá ficar visível no celular;
  3. Para os componentes ficarem lado a lado, utilizamos uma Organização Horizontal. A largura será “preencher principal” para ocupar o espaço todo restante, e deixar o campo grande;
  4. Não esqueça de renomear o componente!

3º Passo: Organização em tabela

Segundo passo: Organização em tabela

3º passo: Organização em tabela

  1. Aqui, vamos colocar quantas colunas vamos precisar; no nosso caso 3: uma para os nome do itens, uma para as quantidades que o usuário informará e outra para informações de consumo do item;
  2. Largura: preencher principal;
  3. Linhas: coloque o número da quantidade de produto que sua calculadora for apresentar.

4º Passo: inserindo produtos

4º Passo: inserindo produtos

4º Passo: inserindo produtos

  1. Lembre de renomear o componente;
  2. A largura do campo nesse caso será de 15%, para ficar em um tamanho que permita digitação, sem esconder os outros textos da linha;
  3. Ao habilitar a opção “Somente Números”, só será permitido a digitação de números no campo.

5º Passo: Botão

5º Passo: Botão

5º Passo: Botão

  1. O botão ficará dentro de um Organizador Horizontal;
  2. A largura do organizador será preencher principal;
  3. Escolhemos alinhamento central, para que o botão fique centralizado.

6º Passo: Inserindo o banco de dados

6º Passo: Inserindo o banco de dados

6º Passo: Inserindo o banco de dados

  1. Esse componente é encontrado em Armazenamento. Pegue o TinyDB e o arraste e solte em qualquer lugar da tela da calculadora;
  2. Ele vai aparecer na parte de componentes invisíveis;
  3. Não esqueça de renomeá-lo!

Pronto, tudo pronto na primeira tela, agora, vamos programá-la! #PartiuBlocos!

PartiuBlocos!

PartiuBlocos!

Na aba Blocos, irá aparecer uma tela assim:

A tela inicial da aba Blocos

A tela inicial da aba Blocos

Na parte esquerda aparecem todos os componentes que colocamos na tela de Designer e os itens internos que contêm as funções padrão do App Inventor. Nos blocos, iremos fazer o seguinte:

1º passo: inicializando a primeira tela, para poder adicionar nossos produtos e a quantidade mínima de água que eles gastam.

Blocos tela 1: Inicializar nossos produtos

Blocos tela 1: Inicializar nossos produtos

Vamos selecionar o componente Screen1 (screen significa tela, em inglês :P). Ao clicar, vamos procurar o bloco: “quando Screen1. inicializar fazer ”, vamos usar esse bloco para depois adicionar os produtos e seus valores ao banco de dados, assim que a primeira tela aparecer. Para selecionar um bloco, basta arrastá-lo para a área em branco.

2º passo: adicionando produtos ao banco de dados

Blocos, tela1: adicionar produtos ao banco de dados

Blocos, tela1: adicionar produtos ao banco de dados

Vamos agora clicar no banco de dados (procure pelo nome de componente que deu) e pegar o bloco “Chamar (nome do seu banco)”. Aqui em nosso exemplo será “DadosProdutosConsumo . ArmazenarValor”. rótulo – Será o nome do produto. valor para armazenar – será a quantidade de água gasta (não se preocupe, vamos informar esses valores também, aqui!). Você vai repetir esse bloco para armazenar valor para cada um dos produtos que aparecerem na tela 1. Se quiser acrescentar um novo produto lá, precisará colocá-lo aqui também. Esse bloco vai se encaixar dentro do bloco que escolhemos “quando Screen1. inicializar fazer ”

3º passo: colocando a lógica no botão para calcular o resultado

Blocos, tela1: colocando a lógica no botão para calcular o resultado

Blocos, tela1: colocando a lógica no botão para calcular o resultado

Vamos no botão que criamos e escolhemos o bloco “quando o botão for clicado fazer”.

4º passo: verificando se tem algum campo em branco, se tiver, atribuímos zero (0).

Blocos, tela1: verificando se tem algum campo em branco, se tiver, atribuímos zero (0)

Blocos, tela1: verificando se tem algum campo em branco, se tiver, atribuímos zero (0)

O bloco “se” fica dentro das opções de Controle. Vamos encaixá-lo dentro do bloco que escolhemos para quando o botão for clicado, no passo anterior.

Agora começamos a ver a importância dos nosso componentes estarem bem nomeados! 🙂

Esse bloco será repetido para cada item de produto, então faça um ctrl+c ctrl+v (também conhecido como copiar e colar) para cada produto que aparece na tela 1 (ou clique com o botão direito do mouse e escolha “Duplicar”);

Blocos, tela1: duplicando produtos para o banco de dados

Blocos, tela1: duplicando produtos para o banco de dados

Esses blocos aparecem quando clicamos em um componente.

5º passo: devemos armazenar o valor do cálculo de consumo no banco de dados. Deve ficar assim:

Blocos, tela1: a função!

Blocos, tela1: a função!

Repare que o valor para ser armazenado é uma função. Essa função é justamente o cálculo, que está dentro da função:CalculaPegadaHidrica – esse bloco vai aparecer depois que a gente fizer o procedimento (que é uma função).

6º passo: a função para calcular!

Blocos, tela1: a função para calcular!

Blocos, tela1: a função para calcular!

O componente da função fica dentro de Procedimentos; devemos pegar o bloco “ParaProcedimento resultado”

7º passo: O cálculo

Blocos, tela1: o cálculo

Blocos, tela1: o cálculo

O cálculo é uma soma das multiplicações das quantidades consumidas de produtos pelo consumo de água de cada um, então pegamos o que o usuário digitou, multiplicamos pelo produto que está armazenado no banco e vamos somando todos. Lembre-se que se você acrescentar mais produtos, precisará mexer neste cálculo aqui!

8º passo: Enviar o resultado para a tela 2!

Blocos, tela1: enviando o resultado para a tela 2!

Blocos, tela1: enviando o resultado para a tela 2!

Nosso botão que será responsável por isso; depois de fazer o cálculo, ele abrirá a tela 2 e enviará o resultado e o nome do usuário para serem mostrados na tela 2.

P.s.: Preste bastante  atenção à ordem desses blocos, pois a ordem é essencial para que funcione tudo certo, especialmente a verificação se o valor que o usuário digitou algum valor ou não.

Para adicionar uma nova tela ao aplicativo, clique no botão “Adicionar Tela…” e escolha um nome para essa segunda tela. Preste atenção, pois o nome tem que ser o mesmo que você usou quando programou os blocos na Tela 1!!

Adicionando outra tela

Adicionando outra tela

A tela 2 terá essa aparência: teremos Legendas, Organização Horizontal, uma Imagem, um TinyDB e um Botão para voltar à tela anterior.

A tela2

A tela2

Para adicionar a imagem:

Tela2: adicionando a imagem

Tela2: adicionando a imagem

  1. Escolha o componente Imagem;
  2. Coloque a altura para “preencher principal”;
  3. A largura para “preencher principal”;
  4. Escolha uma imagem no seu computador.

Depois de tudo feito, vamos aos Blocos desta tela:

Os blocos da tela 2

Os blocos da tela 2

Na tela 2, só receberemos o resultado da tela 1. A única que coisa precisamos fazer é ajustar nossas legendas para os valores que vêm da tela 1.

Então, quando a tela for inicializada, vamos adicionar na legenda “Nome” para o  nome da pessoa e mostrar o valor do cálculo na legenda “Resultado”.

E no botão que adicionamos, vamos colocar a opção de voltar para a tela anterior.

Tudo feito! E agora??

Bom, agora você precisa compilar o seu aplicativo e passar ele para o seu celular, de algum modo, pra poder testar e mostrar pra todo mundo! Você pode fazer isso utilizando um leitor de QR Code (você vai precisar usar a internet de seu celular), ou um cabo USB. Nas duas opções, você vai precisar instalar um apk no celular, então você precisa configurar o aparelho para ele aceitar isso, antes!

Materiais extras:

Essas tabela contêm os valores do consumo de água de alguns produtos; reduzimos o valor para as quantidades em que os consumimos habitualmente (ou tentamos, 😛 ):

Tabela1: alguns produtos de consumo

Tabela1: alguns produtos de consumo.

Tabela2: mais alguns produtos que consumimos

Tabela2: mais alguns produtos que consumimos


Juliana Fajardini

Uma pessoa em busca de se encontrar. E em busca de encontrar seus lugares no mundo, e como contribuir para construir outros mundos possíveis. Bacharel em Sistemas de Informação, com experiência em análise e elaboração de projetos; revisão e tradução (inglês e português); metodologias para start ups; manutenção de software; LaTeX y otras cositas más. Gosto de pedalar, mover o corpo, ler, escrever, poesias, comer, cozinhar, compartilhar, ver lugares, conhecer pessoas... Estou na OxenTI Menina porque... me acolheram e sentiram que posso contribuir <3 E porque... acredito que é preciso envolver-se para que a vida faça sentido, no meio de tanta coisa sem sentido neste mundo...

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *