INSTITUTO FEDERAL DE EDUCAÇÃO DO MARANHÃO

CAMPUS SÃO JOÃO DOS PATOS

GRUPO DE PESQUISAS EM TECNOLOGIAS DIGITAIS NO ENSINO
FORMAÇÃO CONTINUADA DE PROFESSORES

TUTORIAL APP INVENTOR

São João dos Patos-MA

2020

1
 Apresentação

Prezados (as), este material é parte da proposta de formação continuada

de professores, submetida e aprovada ao Edital de fluxo contínuo nº
001/PROEXT/IFMA, como projeto emergencial de extensão: Curso básico de
instrumentalização do App Inventor. Assim, apresentamos algumas
ferramentas da Plataforma App Inventor como forma de tutorial. Dessa maneira,
nos colocamos a disposição para quaisquer esclarecimentos pelo e-
mail: gptede@[Link].

Atenciosamente,
GPTEDE

2
 Menu

1 App Inventor- introdução............................................. 4

2 Primeiro acesso........................................................... 9
3 Interface designer ....................................................... 10
4 Interface blocos........................................................... 17
5 Iniciando um aplicativo................................................ 22
6 Gerando um instalador para seu aplicativo ................. 23

3
1. App Inventor- introdução

O App Inventor é uma plataforma on-line, de aplicação open source

(código aberto), ou seja, um modelo de desenvolvimento que
promove licenciamento livre para a criação de design ou esquematização de um
produto, o que permite a redistribuição universal e o torna de simples acesso,
manuseio ou modificação, por qualquer indivíduo. O recurso permite a criação
de aplicativos das mais diversas características na extensão apk, executável em
smartphones, monitor tablets com sistema operacional Android.
Inicialmente criada pela Google no ano de 2009 e mantida atualmente
pelo Massachusetts Institute of Thecnology-MIT, disponibiliza acesso a iniciantes
de programação, em diversos idiomas inclusive o português do Brasil.
A ferramenta apresenta potencial para inspirar o fortalecimento
intelectual e criativo do estudante. Dessa forma, professores e alunos podem
construir ou criar aplicativos diversos para um mesmo conteúdo, para conteúdos
diferentes ou para resolver situações problema. Permite considerar os processos
didáticos para sua construção, complementados pela validação de resultados de
problemas propostos em exercícios e atividades. Segundo o site oficial da
plataforma MIT App Inventor, disponível em [Link]
projeto busca democratizar o desenvolvimento de software, capacita
especialmente os jovens, ao passar do consumo para a criação de tecnologia.
Segundo Duda e Silva (2015), a construção dos comandos dos
aplicativos é efetuada por meio da chamada “programação visual”, na qual as
ações são estruturadas pela justaposição de blocos lógicos, semelhantes a
peças de quebra-cabeça, que facilitam a compreensão da programação, evita o
desânimo quando um “erro” de programação ocorre, possibilita fácil identificação
e correção dos blocos e de comandos. Nesse contexto, torna-se essencial para
o ensino de Pirâmides, uma vez que o conteúdo requer a utilização de estruturas
em blocos que se assemelham a álgebra. Por outro lado, para a construção dos
aplicativos, essas estruturas devem ser compreendidas como relações entre
variáveis e elementos matemáticos convertidas para blocos de programação.
Para o acesso à plataforma, o usuário deverá realizar um cadastro
com conta de e-mail da Google que proporciona livre acesso ao ambiente ao

4
permitir a construção dos aplicativos em dois ambientes diferentes: (a) designer
- exibe a aparência do aplicativo que se instalará na tela do smartphone ao ser
aberto, além das colunas: paleta, visualizador, componentes e propriedades,
conforme ilustrado na figura 1.

Figura 1: Ambiente Designer do App Inventor

Fonte: Silva (2019)

e; (b) Blocks (Blocos), a qual deve ocorrer a estruturação da programação das

ferramentas de comando organizadas no layout, como dispostos na figura 2.

Figura 2:Ambiente Blocks do App Inventor

Fonte: Silva (2019)

O ambiente de blocos dispõe de comandos de controle, lógica,

Matemática, texto, listas, cores, variáveis e procedimentos que permitem

5
personalizar a aplicação criada com a instrumentalização da plataforma para
servir na construção de produto ao processo educativo.
Na figura abaixo, apresentamos o exemplo da tela de um aplicativo
construída no App Inventor, para o cálculo da área da base e do volume da
Pirâmide de base hexagonal, bem como sua programação.

Figura 3: Tela do aplicativo VOLPIR (Volume da Pirâmide)

Fonte: Silva (2019)

Na figura 3, o layout da tela “Pirâmide Hexagonal Regular” possui

estruturas de blocos programadas para o cálculo da área da base do hexágono
a partir da medida do lado e do volume da pirâmide hexagonal a partir da área
da base e da altura, possui como elemento da paleta uma legenda ( ) na parte
superior da tela, que indica o tema trabalhado; dispõe de duas imagens ( ), uma
da base e outra da pirâmide que expõe os elementos do objeto; uma caixa de
entrada ( ) para que o usuário digite a medida do lado do hexágono (base), que
quando tocada com o dedo sobre a tela ocasiona a exposição automática do
teclado, seguida do botão ( ) que calcula a área da base quando inserida a
medida do lado; analogamente, uma caixa de entrada de valores para digitar a
medida da altura da pirâmide que admite o mesmo tratamento que a caixa de
texto anterior, no entanto, possui como pré-requisito o cálculo da área da base
para calcular o volume.

6
 A tela se completa com três botões: limpar – utilizada quando se quer
calcular o valor da área da base e do volume ao atribuir novos valores após os
já calculados, o botão voltar- direciona o aplicativo para a tela de apresentação,
e por fim, o botão sair que fecha o aplicativo. Segue abaixo a programação em
blocos da tela do aplicativo.

Figura 4: Programação em blocos da tela do volume da Pirâmide hexagonal

Fonte: Silva (2019)

Os blocos de programação da figura acima, estão estruturados de

acordo com a necessidade e a criatividade do usuário, o que permite alteração
em qualquer etapa do aprendizado. Por outro lado, a criatividade não basta por
si só para garantir o funcionamento correto do aplicativo, pois para isso, precisa-
se da estrutura matemática. A estrutura (A) refere-se à programação do botão
calcular área da base - quando tocado, “ajusta” a legenda “área” para o resultado
dos valores digitados na entrada (caixa de texto) - submetida à expressão 𝑆𝑏 =
3.𝑙2 √3
. A estrutura (B) refere-se à programação do botão calcular o volume da
2

pirâmide - quando tocado, “ajusta” a legenda “volume” para o resultado dos

𝑆𝑏 .ℎ
valores digitados na entrada (caixa de texto) - submetida à expressão 𝑆𝑏 = .
3

Já a estrutura (C) garante que quando o botão limpar for tocado, os valores das
caixas de texto medida do lado e medida da altura da pirâmide, e, das legendas
área e volume limpem os valores dos elementos citados. A estrutura (D) faz com
que, ao ser pressionado o botão voltar, a tela se feche, emergindo a tela inicial
do aplicativo. Por fim, a estrutura (E) fecha todo o aplicativo quando o botão sair
for pressionado.

7
 Nessa perspectiva, considera-se a potencialidade oferecida pelo
processo de construção dos aplicativos para o meio educacional, que ainda é
bastante “tímida” no ensino de matemática, mas por outro lado, ganha espaço
no meio tecnológico ao potencializar o processo de ensino e aprendizagem.
Assim, nossa decisão de construir aplicativos matemáticos não foi aleatória,
partiu da dificuldade em encontrar uma ferramenta que auxiliasse no cálculo e
na compreensão de fórmula e relação dos elementos da Pirâmide no
desenvolvimento de questões que exigem cálculo sem perder de vista o caráter
contextualizado dos problemas propostos, parte de uma construção do próprio
aluno, ao invés de utilizarmos aplicativos já prontos.
Um dos fatores que nos motivou para a utilização do App Inventor na
estruturação dos aplicativos foi a possibilidade de serem executados em um
sistema operacional popular, o Android, presente em 93% dos smartphones no
Brasil (IDC, 2016). Outro fator relevante é a dispensabilidade de conhecimento
técnico de linguagens de programação para a estruturação dos aplicativos. Fato
que se constatou com a coleta de dados e em seguida, com a oferta de um curso
para o nivelamento dos alunos sobre o uso da plataforma.

Texto extraído de SILVA (2019)

8
2. Primeiro Acesso

O primeiro passo para acessar, será acessar ao

site [Link] e efetuar o seu cadastro.

Para tal, basta clicar no botão “Criar aplicativos” e preencher o formulário

de cadastro, necessitando pra isso, de e-mail Google.

Seguidamente, selecione o idioma desejado para elaborar seus projetos,

no nosso caso, utilizaremos o português do Brasil como idioma neste tutorial.

A ferramenta da barra de títulos (projetos) possui diversas opções,

inclusive, para iniciar a construção do seu primeiro aplicativo, que para isso,

9
basta selecionar a primeira opção, e em seguida clicar na opção “iniciar novo
projeto”, como na figura abaixo:

3. Interface designer

Optamos por considerar aqui duas interfaces: (a) Designer, caracterizada

pela etapa inicial de criação do aplicativo, seguida da interface (b) Blocos,
possibilita programar os aplicativos:

Interface Designer

10
 Subdividimos a interface designer em quatro estruturas, como mostra a
figura a cima, assim identificadas: i) paleta; ii) visualizador; iii) componentes; e;
iv) propriedades. Passaremos a exemplificar, a seguir, cada uma.

i. Paleta

Localizada na coluna esquerda do ambiente designer, a ferramenta paleta

disponibiliza os recursos: interface do usuário, organização, mídia, desenho e
animação, mapas, sensores, social, armazenamento, conectividade, LEGO
MINDSTORMS, experimental e extensão.

Para estruturar a tela do aplicativo, você precisa selecionar uma

ferramenta, disponível nos itens, arrastar e soltar na tela modelo visualizador do
aplicativo no designer. Segue a descrição das ferramentas de cada item. A paleta
utiliza o estilo de organização chamado de Drop Down menu no quando ao clicar
em outro item, o item superior irá se fechar e o debaixo irá se abrir. Para
reconhecer as peculiaridades de cada ferramenta, as mesmas carregam um
ícone de ajuda ao seu lado. Basta clicar e obter informações.
11
 A interface do usuário disponibiliza as ferramentas mais comuns da
construção de um aplicativo: botão, caixa de seleção, escolher data, imagem,
legenda, escolhe lista, visualizador de listas, notificador, caixa de senha,
deslizador, lista suspensa, switch, caixa de texto, escolhe hora, navegador web,
com funções bem definidas para o projeto desejado.

Na organização, encontramos as ferramentas “organizadores”:

horizontal, vertical, tabela e arranjo de rolagem. Sugere-se que os organizadores
são os primeiros elementos a serem selecionados para a tela. A organização da
tela é primordial para uma boa estética visual e geométrica da tela do aplicativo.

O item mídia, disponibiliza ferramentas com recursos de: câmera de

vídeo, câmera, escolher imagem, tocador de áudio, som, gravador,
reconhecedor de voz, texto para falar, reprodutor de vídeo, tradutor yandex.

A peculiaridade do item desenho e animação disponibiliza ferramentas

muito específicas, como: bola, pintura e sprite imagem. Para quem busca criar
aplicativos com jogos, essas ferramentas são ideais, no entanto, possuem
limitações bem acentuadas.

Em mapas, encontramos os recursos: círculo, retângulo, polígono,

navegação, marcador, mapa, cadeia ou corda de linhas e coleção de recursos.
Com tais ferramentas é possível disparar um recurso da coleção e também
acionar um evento correspondente do objeto de coleção.

O item sensores dispõe de uma variedade plural de ferramentas,

disponibiliza: sensor de aceleração, código de barras, barômetro, temporizador,
giroscópio, hidrômetro, sensor de luz, sensor de localização, sensor magnético,
nier field (leitura e escrita de rótulos de texto), sensor de orientação, pedômetro,
sensor de proximidade e termômetro. Tais elementos, permitem criar os mais
diversos tipos de aplicativo.

Para o item social, estão disponíveis as ferramentas: escolher contato,

escolher e-mail, ligação, números de telefones, compartilhamento, mensagem
SMS e Twitter.

Em armazenamento, encontramos disponíveis a cloudDB, TinnyDB e

TinnywebDB.

12
 Já em conectividade encontramos as ferramentas: iniciador de
atividades, cliente e servidor bluetooth, serial (arduíno) e web.

Especificamente para robótica, a plataforma disponibiliza o

LEGOMIDSTORMS, com as ferramentas de Next e Ev3 nas mais diversas
opções, que versam, se acionados à comandos.

Uma ferramenta não visível que permite armazenar dados em um banco

de dados da Web desenvolvido pelo Firebase, e também permite que os usuários
do seu aplicativo compartilhem dados entre si. “Por padrão, os dados serão
armazenados no banco de dados compartilhado Firebase do App Inventor. Caso
contrário, você pode especificar o URL da sua Firebase. Estamos nos referindo
ao item Experimental firebaseDB”. (texto extraído da plataforma App Inventor).

Por fim, o comando extensão permite exportar extensões de

aplicabilidade de outras plataformas compatíveis, computador ou websites. Veja
abaixo, a expansão do item mídia, bem como a exposição das ferramentas
contidas no item.

A seguir, observaremos o visualizador, um dos elementos mais

importantes do ambiente designer.

13
ii. Visualizador

O visualizador é literalmente o espaço gráfico onde você irá acompanhar

a interface, screen, ou tela em construção do seu aplicativo. Permite visualizar
todos os itens arrastados da palheta, que irão ficar visíveis nesta tela (desde que
permitido), a qual está simulando a tela de um smartphone, tablet ou monitor
com o sistema Android.

A opção por um dos formatos deve ser indicada antes de iniciar a

configuração do seu projeto de aplicativo, pois as ferramentas incluídas podem
variar de tamanho ou necessitar de ajustes de acordo com o tamanho da tela
preterida.

Vemos agora a ponte entre a parte gráfica e a parte de programação do

aplicativo, os componentes.

14
iii. Componentes

A coluna localizada ao centro direita do designer, será preenchida

hierarquicamente associada às seleções de ferramentas arrastadas da paleta
para a tela de visualização gráfica do aplicativo, e estarão sujeitas à renomeação
e exclusão. Logo abaixo, também há o botão do media que permite importar
arquivos, nessa guia você poderá fazer o upload de imagens ou sons que
pretende usar na aplicação.

Chamamos atenção para a importância de renomear os elementos de

programação da tela do aplicativo, pois algumas ferramentas dispostas nos
componentes serão essenciais para a programação em blocos.

Por fim, no ambiente design, encontramos a coluna de propriedades.

15
iv. Propriedades

Essa coluna de ferramentas permite alterar propriedades do elemento

selecionado para a tela, que foi clicado, podendo renomear o objeto à sua
criatividade de acordo com a permissões de: cor de fundo da tela, altura, largura,
texto dos botões, das caixas de entrada e legendas, entre outros itens.

A seguir, temos a interface de blocos, disponíveis para seleção, no canto

superior direito da tela. Este ambiente deverá ser acessado após a estruturação
da tela (ambiente gráfico) do aplicativo.

16
4. Interface blocos

O acesso ao ambiente blocos, é feito a partir de um botão

localizado no canto superior direito da tela, ao lado de propriedades.

Segue em destaque, as principais ferramentas disponíveis em blocos.

O ambiente blocos é basicamente subdividido em oito itens específicas,

dispostos no quadro abaixo:

Item Identificação Função

Seleciona, adiciona e remove telas
a Botões de menu
(consequentemente sua programação)
Abre caminho para a escolha de blocos
b Tipos de blocos específicos, categorizados em: controle,
lógica, matemática, texto, lista,

17
 dicionários, cores, variáveis e
procedimentos.
Remanescentes da tela de visualização
gráfica (fica em sintonia com os blocos e
c Componentes
seus tipos de acordo com a ferramenta
adicionada à tela).
Informa de maneira quantitativa quando
d Indicador de erro há blocos com estruturação incompleta
ou inconsistente.
Acolhe os blocos selecionados e permite
Visualizador de
e visualizar as escolhas realizadas pelo
programação
programador.
Permite acomodar blocos específicos ou
f Mochila estruturas de blocos para posteriormente
serem utilizados em outros projetos.
Amplia e reduz a imagem gráfica dos
g Zoom
blocos de programação.
Apaga permanentemente um bloco ou
h Lixeira
estrutura indesejada.

Uma atenção especial deve ser dada aos tipos de blocos categorizados
na coluna de blocos (internos), pois a programação adequada de um aplicativo
depende da seleção correta dos blocos (categorizados).

Principais blocos por categoria

Identificação Exemplos de blocos

Controle (cor
laranjas)

18
Lógica (cor
verde)

Matemática (cor
azul)

Texto (cor
púrpura)

19
Lista (azul
ciano)

Dicionários –
novo (azul
escuro)

Cores (cor
cinza)

20
 Variáveis (cor
magenta)

Procedimentos
(cor roxa)

Ao selecionar componentes, novos blocos específicos são

disponibilizados. Seguem alguns, mais utilizados:

Principais blocos por categoria

Identificação Exemplos de blocos

Botão

21
 Legendas

Os tipos de blocos podem variar de acordo com a necessidade, sendo

que os citados no quadro acima para legenda, também poderão aparecer
quando os componentes, a exemplo o botão, for selecionado e analogamente, o
inverso também ocorrerá entre legendas, botões e blocos.

5. Iniciando um aplicativo

Para dar início a um aplicativo, selecione a primeira opção da guia de

menus “projeto”. Além de iniciar um projeto, poderão ser encontradas várias
funções no mesmo recurso. Segue a imagem:

22
 Vale destacar que a opção importar projeto (aia.) no computador ou só
repositório, implica em ter posse de versão editável de um aplicativo já
construído, e salvo no seu computador ou em repositório (para isso, ver como
salvar aplicativo construído, no item logo a seguir.

A opção de exportar o projeto (aia.) para o meu computador implica em

efetuar o download dos arquivos de aplicativos já construídos e salvos no próprio
ambiente do App Inventor gerado na conta cadastrada por você.

6. Gerando um instalador para seu aplicativo

Após concluir a estruturação de seu aplicativo e seguidamente o desejo

de instala-lo, há dois caminhos: a) via Qr code, e b) instalador para PC.

a) Instalar com Qr code

Passo 1- Clicar em compilar e em seguida “App (fornecer o Qr code para o Apk)

Passo 2- Aguarde o processamento do Qr code.

23
Passo 3- De posse do Qr code, utilize um leitor do seu smartphone (se não tiver
instalado, deverá fazer uso do play story para baixar um leitor de Qrcode gratuito.

Após apontar o leitor instalado para o código, iniciará a instalação

automaticamente, é só aceitar os termos e começar a utilizar.

b) Instalar com instalador para PC

Analogamente à etapa anterior, selecione App (salvar apk em meu

computador).

Passo 1- Clique em compilar, em seguida “App (salvar apk em meu computador)”

24
Passo 2 – Aguarde a barra de download estar totalmente completa.

Passo 3- O instalador estará disponível na pasta download do seu computador.

Passo 4- Utilizando um cabo de USB, ou o bluetooth do computador e do

smartphone o instalador deverá ser designado para seu aparelho para posterior
instalação.

Caso deseje testar o aplicativo antes de instalar, utilize o Emulador,

disponível na opção “Conectar”, localizada na barra de Menu.

Para mais ideias de como construir aplicativos para o ensino de

matemática, adquira o livro Ensino de Pirâmides na construção de aplicativos
para smartphones. Na obra, você encontrará vários aplicativos, o passo a
passo de como construí-los, seus instaladores e sugestões metodológicas de
atividades.

INPORTANTE!

Você deve estar se perguntando onde estão, nesse tutorial, as

orientações para construir aos aplicativos, não é?
Para isso, você deve fazer nosso curso básico de
instrumentalização. Vamos lá?
O Grupo de Pesquisa em Tecnologias Digitais-GPTeDE, sentir-se-à
honrado em contar com você!
Até lá!

25
REFERÊNCIAS

DUDA, R.; SILVA, S. de C. R. da. Desenvolvimento de aplicativos para

Android com uso do App Inventor: uso de novas tecnologias no processo
de ensino-aprendizagem em matemática. Revista Conexões, v. 11, N.
[Link] Grossa: UEPG, 2015. Disponível em:
[Link]

IDC, Releases. Estudo da IDC Brasil aponta vendas de 10.3 milhões de

celulares no primeiro trimestre. São Paulo, 2016. Disponível em:
[Link]

SILVA, Renato D. N. Ensino de Pirâmides na construção de aplicativos para

smartphones. 2019. 293f. Dissertação (Mestrado em Ensino de Matemática) -
Universidade do Estado do Pará, Belém, 2019.

SILVA, Renato D. N, PEREIRA, Cinthia C.M.; ALVES, Fábio da C. Ensino de

Pirâmides na construção de aplicativos para smartphones. Curitiba: Appis,
2020.

26