Sequência Didática
Aula 5

Sensores e Funções no App Inventor

Na quinta aula se espera reforçar os conceitos apresentados nas aulas anteriores realizando uma revisão geral; retomar também a construção do aplicativo de cálculo do fatorial; compreender o que é e como utilizar o sensor acelerômetro no App Inventor, como atribuir foco em componentes de interface e criar várias telas num único aplicativo; assimilar como ocorre a escrita de algoritmos através da criação de procedimentos ou funções no App Inventor; resolver diferentes problemas matemáticos desenvolvendo um aplicativo móvel como desafio final.

Três Momentos Pedagógicos


Problematizar com os alunos quais as suas percepções e as mudanças provocadas a partir da aplicação dos conhecimentos adquiridos nas aulas anteriores. Ainda, quais sensores do smartphone eles utilizam a partir dos aplicativos instalados em seus dispositivos e como acreditam que podem incorporar esses sensores no desenvolvimento de apps pelo App Inventor. Provocar a discussão a respeito de como partes de algoritmos podem ser reaproveitadas para evitar a rescrita das instruções e como podemos resolver problemas e automatizar tarefas repetitivas com tal técnica.

Compreender como utilizar o sensor acelerômetro no desenvolvimento de um aplicativo no App Inventor, bem como realizar o controle de foco em diferentes componentes de interface. Apresentar o conceito de procedimento ou função e demonstrar como utilizá-lo na escrita de algoritmos no App Inventor. Ainda, indicar como se dá a criação e o fluxo de navegação entre diferentes telas em um mesmo aplicativo através do desenvolvimento de um exemplo prático.



Retomar a discussão sobre a repetição de partes de um algoritmo a partir do mecanismo conhecido como procedimento ou função. Analisar os aplicativos desenvolvidos nas aulas anteriores procurando identificar blocos de comandos repetitivos que poderiam ser agrupados em uma função, ou conjuntos de instruções que, mesmo não duplicadas, poderiam ser dispostas em formato de procedimento para simplificar o problema, dividindo o algoritmo em partes menores.

Como tarefa, lançar o desafio de resolver diferentes problemas matemáticos desenvolvendo um aplicativo móvel com base nos conhecimentos adquiridos no decorrer das aulas.

Revisão do Desafio da Aula 4

Escaneie ou clique no QR Code ao lado para baixar o arquivo do projeto do App Inventor (*.aia) com a resolução do desafio proposto na aula anterior. Aproveite para revisar e comparar com o aplicativo de cálculo do fatorial que você desenvolveu.

Sensor Acelerômetro

O App Inventor possui diferentes componentes que possibilitam o uso de sensores do smartphone na construção de aplicativos móveis (ex: sensor de luz, de pressão do ar, localização, temperatura, etc). No caso do acelerômetro, trata-se de um componente invisível que mede a aceleração aproximada em três dimensões usando unidades do Sistema Internacional em m/s2, detectando se a posição do smartphone está sendo alterada (MIT, 2020) (clique aqui para saber mais).

O acelerômetro está disponível na paleta "Sensores" e, ao ser inserido, permanece invisível à interface da aplicação, podendo ser manipulado a partir de dois blocos de controle, um que verifica a alteração da aceleração do movimento e outro que identifica se o aparelho está sendo sacudido. Em nosso exemplo, utilizaremos o bloco "Sacudindo", conforme a figura ao lado.

Vamos entender na prática?

No App Inventor, vamos alterar o aplicativo de cálculo do fatorial (desafio da aula 4), fazendo com que o mesmo comportamento do botão "Limpar" seja realizado ao sacudir o smartphone.

  • Na janela de Designer, arrastar para a tela um componente “SensorAcelerômetro;

  • Na janela de Blocos, no bloco do “SensorAcelerômetro1”, inserir o evento “Sacudindo[1];

  • Ajustar a propriedade “Texto” dos campos número e fatorial conforme realizado anteriormente para o "btLimpar" [2];










Foco

Embora grande parte da interação de um aplicativo móvel ocorra através de toques na tela realizados pelo usuário sem uma ordem preestabelecida, é possível determinar o foco de alguns componentes, tornando-os ativos, para direcionar a sequência de ações do usuário ou simplesmente melhorar a sua experiência de uso do aplicativo.

No App Inventor, o foco pode ser estabelecido através do evento "PedirFoco" disponível em diferentes blocos de interface de usuário, a exemplo das caixas de texto, conforme a figura ao lado.

Vamos entender na prática?

No App Inventor, ainda no aplicativo de cálculo do fatorial, vamos ajustar o foco para o componente "txtNumero" após o cálculo do fatorial e após a limpeza dos campos, de modo que o "Número" fique ativo e o usuário já possa digitar um novo valor para executar o cálculo novamente.

  • Na janela de Blocos, no bloco do “txtNumero”, inserir o procedimento PedirFoco” após a última alteração da propriedade "Texto" do evento "Sacudindo" do acelerômetro [1]. Repetir o mesmo no evento "Clique" do "btLimpar" e do "btCalcular";












Procedimento

Como vimos nas aulas anteriores, a escrita de algoritmos pode otimizar a realização de tarefas repetitivas. Da mesma forma, a capacidade de ser executado uma ou mais vezes é umas das premissas de qualquer algoritmo, porém a repetição da escrita de um bloco de comandos que realiza a mesma função não é uma boa prática. Para que a formulação do algoritmo não se torne repetitiva, existe o conceito de procedimento, também conhecido como função, subprograma ou sub-rotina (ASCENCIO; CAMPOS, 2012).

Um procedimento consiste em uma sequência de blocos ou código armazenado sob um nome, sendo utilizado para economizar espaço e tempo de programação, já que pode ser usado várias vezes num mesmo programa (MANZANO; OLIVEIRA, 2016). Portanto, um procedimento possibilita repetir blocos de comandos sem que seja necessário reescrevê-los, bastando chamar o procedimento pelo seu nome sempre que sua sequência de instruções deva ser executada.

No App Inventor, a criação de uma função ocorre a partir de um bloco interno de "Procedimentos" com o formato "para procedimento fazer", conforme a figura ao lado. Já o bloco de chamada do procedimento só é exibido após a sua criação e possui o formato "chamar procedimento".

Vamos entender na prática?

No App Inventor, seguindo no aplicativo de cálculo do fatorial, vamos criar um procedimento para limpar os campos de número e fatorial e chamá-lo no evento "Clique" do botão limpar e no evento "Sacudindo" do sensor acelerômetro.

  • Na janela de Blocos, no bloco interno deProcedimentos”, inserir a função para procedimento fazere alterar seu nome para "limpar" [1];

  • No procedimento "limpar", ajustar a propriedade “Texto” dos campos número e fatorial [2];

  • No evento "Clique" do "btLimpar", inserir o bloco de chamada do procedimento "limpar" [3]; Repetir o mesmo para o método "Sacudindo" do sensor acelerômetro [4];





Várias Telas

É comum aplicativos móveis se fazerem valer de mais de uma tela em função da limitação de tamanho da interface dos smartphones. O App Inventor permite a criação de várias telas num único aplicativo a partir do botão "Adicionar tela ..." localizado na barra superior da janela de Designer.

Ao criar uma nova tela, é necessário lhe atribuir um nome que, posteriormente, será utilizado para a navegação através de blocos de "Controle". Para abrir as telas criadas, deve-se utilizar o bloco "abrir outra tela nomeDaTela", selecionando a tela desejada entre as criadas anteriormente.

Ao abrir uma tela, é recomendado fechá-la ao retornar à tela principal ou anterior através do bloco "fechar tela", afim de liberar memória do sistema.

Vamos entender na prática?

No App Inventor, seguindo no aplicativo de cálculo do fatorial, vamos criar uma nova tela denominada "Tela Inicial" que consistirá na tela de abertura do aplicativo com um um botão centralizado que possibilitará o acesso a tela de cálculo do fatorial criada anteriormente.

  • Na janela de Designer, clicar no botão "Adicionar Tela ..." e informar o nome "TelaInicial";

  • Selecionar o componente “TelaInicial” e desmarcar a propriedade "TítuloVisível";

  • Arrastar para a tela um componente “OrganizaçãoVertical” e alterar:

- AlinhamentoHorizontal = Centro:3

- AlinhamentoVertical = Centro:2

- CorDeFundo = Preto

- Altura = Preencher principal...

- Largura = Preencher principal...

  • Arrastar para a tela um componente “Botão” e alterar:

- Renomear = btInicial

- CorDeFundo = Azul

- FonteNegrito = V

- TamanhoDaFonte = 18

- Forma = arredondado

- Texto = Cálculo do Fatorial

- AlinhamentoDoTexto = centro:1

- CorDeTexto = Branco

  • Na janela de Blocos, nos blocos do "btInicial", inserir o evento "Clique" e, nos blocos de "Controle", inserir o evento "abrir outra tela nomeDaTela Screen1" [1];

  • Na janela de Designer, alternar a tela para "Screen1", inserir um componente "Botão" e alterar:

- Renomear = btVoltar

- FonteNegrito = V

- Texto = ⬅️ Voltar

- AlinhamentoDoTexto = centro:1

  • Na janela de Blocos, nos blocos do "btVoltar", inserir o evento "Clique" e, nos blocos de "Controle", inserir o evento "fechar tela" [2];















Desafio Final

Aproveite os conhecimentos obtidos nas aulas anteriores e selecione um ou mais dos desafios abaixo para implementar um aplicativo. Procure incluir no aplicativo as funcionalidades abordadas na aula 5.

1. Calculadora de Juros Compostos
Uma aplicação no valor de R$ "x" é feita por um período de "y" meses a juros de "z"% ao mês. Qual o valor que será resgatado ao final do período?

2. Números Primos
Solicitar que o usuário digite um número, informar se o número é primo e listar todos os números primos até esse número digitado.

3. Sequência de Fibonacci
Solicitar que o usuário informe um número e listar a quantidade de termos da Sequência Fibonacci correspondente. Trata-se de uma sequência de números, começando em zero, onde cada termo subsequente corresponde a soma dos dois anteriores. Ex: 0, 1, 1, 2, 3, 5, 8 ...

4. Tabuada
Calcular e exibir a tabuada completa de um número informado pelo usuário. Ex:
1 x 1 = 1;
2 x 1 = 2; ...

5. Números Pitagóricos
Solicitar que o usuário informe um número e listar todos os Números Pitagóricos entre 1 e o número digitado. Um número inteiro positivo é dito um Número Pitagórico se existem inteiros positivos a e b tais que a2 + b2 = c2 , por exemplo: 3, 4 e 5. Ex:
a b c
3 4 5
5 12 13 ...

Questionário final

No intuito possibilitar a comparação de resultados entre a caracterização inicial dos sujeitos até a percepção posterior às práticas propostas, optou-se por utilizar um questionário de percepção final, desenvolvido na ferramenta Google Formulários, com perguntas de avaliação das atividades desenvolvidas.

Clique abaixo para realizar o download da aula 5.

Vamos aprofundar os conhecimentos?

Para saber mais sobre sensores, procedimentos e várias telas, explore o material abaixo que contém vídeos sobre a temática abordada na aula 5.

Criando o jogo "Mini Golf" com o sensor acelerômetro, Prof. Cassio Onodera (IFSP)

Aula sobre Procedimentos, Prof. Dr. Sérgio de Oliveira (UFSJ)

Múltiplas telas no App Inventor, Laboratório de Mídias Educacionais (UNIFAL)

Referências

ASCENCIO, Ana F. G.; CAMPOS, Edilene A. V. de. Fundamentos da Programação de Computadores: Algoritmos, Pascal, C/C++ e Java. 3. ed. São Paulo: Pearson, 2012.


MANZANO, J.; OLIVEIRA, J. Algoritmos - Lógica para desenvolvimento de Programação. 28. ed. São Paulo: Saraiva, 2016.


MIT. MIT App Inventor. 2020. Disponível em: http://appinventor.mit.edu. Acesso em: 25 de mar. de 2020.