Introdução ao Java com App Inventor

Conteudista: Prof. Márcio Esp. Belloni

Revisão Textual: Esp. Keli Francieli Cattoni

Objetivo da Unidade:

Compreender como a lógica de programação pode auxiliar na vida cotidiana;

Criar duas aplicações em Java utilizando o método de blocos com o app Inventor.

ʪ Material Teórico

ʪ Material Complementar

ʪ Referências
1 /3

ʪ Material Teórico

Introdução
A utilização de dispositivos móveis está cada vez mais evidente, com o acesso aos smartphones
mais facilitado atualmente. E a linguagem Java, devido às suas propriedades, é a mais utilizada
nos smartphones. Contudo, a complexidade do desenvolvimento nessa linguagem afasta os
desenvolvedores.

Basicamente, a programação desenvolve-se por meio de texto, ou seja, o código-fonte é

formado com textos em que se desenvolve a lógica computacional e conceitos já vistos pelo
aluno, como a abstração. O aluno aprendeu a programação por blocos e pode verificar o
desenvolvimento desse pensamento denominado pensamento computacional pelos blocos.
 Figura 1 – Logo do MIT App Inventor
Fonte: Reprodução

#ParaTodosVerem: a imagem apresenta um logo formando uma abelha de cores

predominantemente laranja e dois losangos, um verde e um roxo. Fim da
descrição.

O que é o App Inventor?

Na técnica de programar por blocos, unida ao recurso drag and drop (arrastar e soltar), a
programação acontece de forma simples e intuitiva. Esse é o principal recurso do MIT App
Inventor, um sistema em nuvem de programação por blocos.

Trata-se de uma solução que utiliza da programação de blocos para facilitar e tornar acessível o
desenvolvimento em Java. É como um jogo de montar com peças de blocos, tornando o
desenvolvimento, além de simples, um procedimento lúdico. Você não precisa conhecer a
sintaxe do Java, apenas aplicar a lógica de programação utilizando a programação em blocos.
Mas não é tão simples, porque ainda precisa aplicar conhecimentos de pensamento
computacional, como condições e abstração.

O MIT App inventor possui uma inteligência artificial bastante intuitiva e a capacidade de suportar
o desenvolvimento de grandes aplicativos é bastante considerável, tornando-se possível, além
de um aprendizado eficiente, desenvolver aplicações de nível profissional.

Como Utilizar o App Inventor

Para poder iniciar os estudos, acesse o site do MIT App Inventor.

Site
MIT App Inventor

Clique no botão para conferir o conteúdo.

ACESSE
Faça seu cadastro – você pode utilizar um e-mail Google – e clique em “Create Apps!” para
começar.
 Figura 2 – Se achar mais conveniente, troque o idioma do
App Inventor para português do Brasil
Fonte: Reprodução

#ParaTodosVerem: a imagem mostra um menu com diversos idiomas para o

MIT App Inventor. Dentre eles, está: inglês, português do Brasil, espanhol e
francês. Fim da descrição.

Ao clicar em “Iniciar novo projeto” e nomeá-lo, você encontrará a tela design.

Figura 3 – Tela design do App Inventor

Fonte: Reprodução

#ParaTodosVerem: a imagem mostra a tela de design do App Inventor: a paleta de

componentes com os componentes para criar o design; o visualizador, em que
você pode ver o design; a lista de componentes inseridos no design do
visualizador; a área para inserir mídias, em que se pode fazer upload dos
elementos de áudio e imagem; as propriedades do componente selecionado; e a
região para seleção e criação de telas e para alterar entre a interface de design e de
blocos. Fim da descrição.
No quadro verde da Figura 3, temos: 1) paleta de componentes; 2) visualizador; 3) lista de
componentes; 4) área para inserir mídias; 5) propriedade de componentes; e 6) região para
seleção e criação de telas e para alterar entre a interface de design e de blocos.

Na paleta de componentes, você encontrará uma série de componentes agrupados por assunto e
poderá fazer uma busca por um componente específico. O aluno irá selecionar o componente e
poderá arrastar e soltar na tela do simulador. Veja que é simples, pois basta arrastar e soltar para
posicionar o componente e, depois, poder alterar as propriedades do componente em
“Propriedades”.

Figura 4 – Tela de design do App Inventor. Nos quadros

destacados, a paleta e a propriedade de componentes
Fonte: Reprodução

#ParaTodosVerem: a imagem mostra tela de design do App Inventor: está em

evidência a paleta de componentes, com os componentes para criar o design e a
região para a seleção e a criação de telas e para alterar entre a interface de design
e de blocos. Fim da descrição.
Utilizando o Touch Screen do seu Smartphone
Vamos utilizar o seu smartphone para criar uma aplicação que utiliza o touch screen. A intenção é
criar um app que mostre uma bolinha na tela do smartphone controlada pelo dedo do usuário por
meio do uso do touch screen. Assim, você verá como funciona o design da tela, o uso dos blocos e
a forma com que o App Inventor consegue facilmente aproveitar os diversos sensores do
smartphone.

Inicialmente, crie um projeto e o nomeie como desejar.

Figura 5 – Neste campo, você poderá nomear o projeto

como desejar
Fonte: Reprodução

#ParaTodosVerem: a imagem mostra quadro o de criação de novo projeto do

App Inventor: o quadro mostra o título “Criar um novo projeto no App Inventor”.
Embaixo, há um local para inserir o nome do projeto com o label “Nome do
projeto”. Embaixo disso, estão os botões “Cancelar” e “OK”. Fim da descrição.

Na paleta de componentes, crie uma pintura. Trata-se de um quadro em que você poderá
desenhar a bolinha na tela.
 Figura 6 – Esta será a tela que você verá com a pintura
adicionada
Fonte: Reprodução

#ParaTodosVerem: a imagem mostra a tela do visualizador, que traz a pintura

inserida na tela do celular simulado. Fim da descrição.

Agora, vamos configurar o “screen”. Clique no fundo branco do screen1 e faça as seguintes
alterações na configuração:

Deixe “rolável” em aberto.

Agora, para que a “pintura” tome toda a tela do smartphone, clique na pintura. Você verá o painel
de configurações mudar para as configurações da pintura. Faça as seguintes alterações na
configuração:

Clique em “altura”, selecione “preencher principal” e confirme

em “OK”;
 Clique em “largura”, selecione “preencher principal” e confirme em “OK”.

Vamos desenhar a bolinha. Clique em “bola” e solte dentro da pintura. Aumente nas
configurações o raio da bolinha para 15. É simples!

Figura 7 – No círculo vermelho, está a configuração do raio

da bolinha
Fonte: Reprodução

#ParaTodosVerem: a imagem mostra a tela do visualizador do App Inventor: a

bola é inserida na pintura. Fim da descrição.

Agora, iremos programar o controle da bolinha. No canto superior direito, clique em blocos.
 Figura 8 – Tela de programação em blocos
Fonte: Reprodução

#ParaTodosVerem: a imagem mostra a tela blocos do app Inventor: à esquerda,

você tem os blocos e, logo abaixo, o espaço para upload de mídias. À direita,
temos o visualizador em que serão arranjados os blocos. Fim da descrição.

Clique em “bola” e você verá todas as opções de blocos que poderá utilizar.
 Figura 9 – Tela quando clicar em “bola”
Fonte: Reprodução

#ParaTodosVerem: a imagem mostra a tela blocos com os blocos que aparecem

quando se clica em “bola” do App Inventor: à esquerda, você tem os blocos e,
logo abaixo, o espaço para upload de mídias. À direita, aparecem os blocos
“quando bola1 ColidiuCom”, dentre outros. Fim da descrição.

Desejamos fazer duas lógicas condicionais:

 Quando a bolinha for arremessada, ajuste a velocidade e a direção de acordo com a
leitura do touch screen;

Quando a bolinha colidir com os cantos da tela (pintura), ela deverá tomar outra
direção.

O primeiro bloco será para satisfazer a lógica condicional “a) quando a bolinha for arremessada,
ajuste a velocidade e direção de acordo com a leitura do touch screen”.

Clique no quadro “Quando [Link]” e arraste até a tela do visualizador. Após,

adicione dois quadros verde “ajustar Bola1 direção para” e “ajustar Bola1 velocidade para”. Após,
encaixe o quadro laranja para obter as variáveis “velocidade” e “direção”.

Figura 10 – O bloco que controla a velocidade e a direção da

bolinha segundo o touch screen ficará assim
Fonte: Reprodução

#ParaTodosVerem: a imagem mostra o bloco “quando [Link]” do

App Inventor: abaixo, encaixado, temos “ajustar Bola1 . Velocidade para” e,
encaixado nesse bloco, “obter velocidade”. Abaixo deles, temos encaixado
“ajustar Bola1 . Direção para” e, encaixado nesse bloco, “obter Direção”. Fim da
descrição.

Façamos a mesma lógica para verificar a letra “b) Quando a bolinha colidir com os cantos da tela
(pintura), deverá tomar outra direção”. Veja que se trata de outra lógica condicional.
Clique novamente na bolinha e selecione o bloco laranja “Quando Bola1. AlcançouBorda” e
arraste para o visualizador. Arraste para o espaço fazer o bloco roxo “chamar Bola1. Quicar” e,
nesse, a variável borda. Vamos fazer isso de forma diferente. Aponte o bloco laranja em borda e
você verá todas as opções de blocos possíveis para o caso. Selecione “obter borda” e adicione no
espaço do bloco roxo.

Figura 11 – Visualizador deverá estar dessa forma quando

seguir todas as indicações
Fonte: Reprodução

#ParaTodosVerem: a imagem mostra parte do visualizador contendo todos os

blocos. O bloco “quando [Link]” do App Inventor: abaixo,
encaixado, temos “ajustar [Link] para” e, encaixado nesse bloco,
“obter velocidade”. Abaixo encaixado, temos “ajustar [Link]ção para” e,
encaixado nesse bloco, “obter Direção”. Outro bloco é “quando [Link]”,
no qual está encaixado o bloco “chamar [Link]”, em que está encaixado
“obter borda”. Fim da descrição.

Pronto! Você criou seu primeiro app no App Inventor.

Vamos para a fase de teste e testar seu aplicativo?

O App Inventor possui três formas diferentes de testar o aplicativo. Se seu celular estiver
conectado na mesma rede do computador, você poderá conectar seu celular ao App Inventor,
fazendo o download do App MIT AI2 Companion pela Store do seu sistema operacional (IoS ou
Android). No site do App Inventor, clique em conectar e “Assistente AI” e verá um QRCode. Basta
apresentar ao seu leitor de QRCode do MIT AI2 Companion para simular o app criado no seu
próprio celular. Caso o celular não esteja conectado diretamente na mesma rede do computador,
utilize a conexão USB e experimente “Conectar” e “USB”.
 Figura 12 – Aplicativo simulado no MIT AI2 Companion
Fonte: Reprodução

#ParaTodosVerem: a imagem mostra a tela de um celular com o aplicativo “MIT

AI2 Companion” rodando o aplicativo criado. Acima, está escrito screen1 e,
depois, há uma tela branca cobrindo toda a tela do celular com a bolinha preta
no meio. Fim da descrição.

Para distribuir seu mais novo aplicativo, clique em “Compilar” e selecione “.apk”. Agora, você
receberá um arquivo de instalação de seu aplicativo. Parabéns!

Um Clone de Space Invaders

Um jogo criado pela Taito Corporation e que foi um ícone dos anos 1980 é o denominado Space
Invaders, no qual você pilota uma nave para defender a Terra dos invasores espaciais. Você pode
ter um clone simplificado criado rapidamente no App Inventor.
Figura 13 – Tela do Space Invaders da Taito, lançado em
1978
Fonte: Reprodução

#ParaTodosVerem: a imagem mostra a tela do jogo Space Invaders. Na primeira

linha, está escrito “score 1, hi-score, score 2”. Na linha abaixo, estão os valores do
score 1, 0070, e do hi-score, 0880. Abaixo dos scores, há cinco linhas com os
monstrinhos brancos, uma linha com barreiras e, na próxima linha, a nave, que
 são verdes. Na última linha, está o número 3, duas naves verdes como vidas e,
depois, está escrito “credit 00”. Fim da descrição.

Para iniciar, à exemplo do capítulo anterior, vamos desenvolver o design do jogo. Crie um projeto
novo e o nomeie. Após, baixe as imagens “.png”.

[Link];

[Link].

Imagens do [Link]
8.3 KB

No design, devermos desenvolver a seguinte tela.

 Figura 14 – Tela do visualizador com o app proposto
Fonte: Reprodução

#ParaTodosVerem: a imagem traz um celular rodando o MIT AI2 Companion, o

qual roda o programa clone do Space Invaders. No título, está escrito “Space
Invaders”. Em uma tela preta abaixo, temos um disco voador azul e uma nave
com uma bolinha verde saindo dela. Abaixo, há um retângulo branco, no qual se
tem um quadro com o texto “Score: 0” e, abaixo dele, um botão com o texto
“Reset”. Fim da descrição.

Inicie criando a pintura (arraste e solte no visualizador). Vá em configurações e altere “cor de

fundo” como “preto” e a largura como “preencher principal” para que preencha toda a largura e
a altura com 300 pixels.
Figura 15 – Detalhe de como ficará a configuração da
“pintura”
Fonte: Reprodução
 #ParaTodosVerem: a imagem mostra um quadro contendo os componentes:
“screen1”, “figura1”, “foguete”, “disco”, “bola1”,
“HorizontalScrollArrangement”, “Label1”, “ScoreLabel”, “Botão1”,
“Temporizador1”. A “Pintura1” está selecionada e, do lado direito, estão as
propriedades “Cor de Fundo: preto”, “Imagem de fundo: nenhum”,
“ExtendMovesOutsideCanvas: desabilitado”, “Tamanho da fonte: 14.0”, “Altura:
300 pixels”, “Largura: preencher principal”, “LarguraDaLinha: 2.0”,
“CorDePintura: preto”, "TapThreshold: 15”, "AlinhamentoDoTexto: centro:1” e
“visível: habilitado”. Fim da descrição.

Ao lado da configuração, você verá um local denominado “Midia”, em que há um botão

denominado “Enviar Arquivo...”. Vamos inserir nesse campo os arquivos “.png” disponíveis no
portal ([Link] e [Link]).

Vamos inserir dentro da “Pintura1” o “SprinteImagem” duas vezes: uma para o foguete e outra
para o disco voador. Agora, renomeie os “SprinteImagem1” para foguete e “SprinteImagem2”
para disco. Depois, é só configurá-los, clicando em “imagem” e selecionando, respectivamente,
“rocket” e “saucer”. Isso vinculará os “SprinteImagem” às figuras de mídia.
 Figura 16 – Detalhe de como ficará a configuração para
“foguete” e “disco”
Fonte: Reprodução

#ParaTodosVerem: a imagem mostra um quadro contendo os componentes:

“screen1”, “figura1”, “foguete”, “disco”, “bola1”,
“HorizontalScrollArrangement”, “Label1”, “ScoreLabel”, “Botão1”,
“Temporizador1”. “Foguete” está selecionado e, no lado direito, estão as
propriedades “Ativado: habilitado”, “Direção: 0”, “Altura: automático”,
“Largura: automático”, “Intervalo: 100”, “Imagem: [Link]”, Rodar:
habilitado”, “Velocidade: 0.0”, “Visível: habilitado”, “x: 147”, “y: 230” e “z: 1.0”.
Fim da descrição.

Clique em “bola” e arraste-a para a “pintura1” no visualizador. Configure a cor para verde e a
propriedade raio para 8.

Agora, você verá a utilização de alguns componentes que podem ser inseridos na tela de design,
mas não são visíveis. Isso é o caso de temporizadores, bancos de dados e utilização de sensores.
Esses componentes não aparecem na tela do celular simulado no visualizador, mas embaixo,
como um componente invisível. Vamos fazer diferente dessa vez. Assim, o aluno conhecerá a
ferramenta de busca de componentes. Na paleta de componentes, na barra de busca, digite
“temporizador”. Aparecerá o componente temporizador. Arraste-o ao visualizador e ele
aparecerá embaixo do celular simulado.

Nas configurações, altere o intervalo para 3000.

Veja que o quadro de “score”, no qual se pode ver a pontuação, e o botão de reset estão
localizados em um local abaixo da pintura, bem inseridos e definidos. Isso significa que foram
organizados.

Selecione na paleta “organização” o componente “HorizontalScrollArrangement” e solte-o

abaixo da pintura. Dentro dele, colocaremos dois “labels”, que ficarão enfileirados. Na
configuração desses “labels”, altere o texto de um como “Pontos:” e, do outro, “0”.
Saiba Mais
É interessante sempre renomear os componentes que você usa
personalizando o nome dele, pois quando for para os blocos, será mais
fácil encontrar e compreender o que cada componente faz no seu app.

Por fim, arraste o componente “botão” para o visualizador abaixo do organizador. Nas
propriedades, mude o texto para “Reset”. O design do seu app estará pronto.

Em Síntese
Os componentes inseridos no design e suas respectivas alterações são:

Quadro 1 – Resumo dos componentes e suas respectivas propriedades

Componente Configuração
 Componente Configuração

Cor de fundo: preto;

Largura: Preencher principal;

Pintura
Altura: 300.

Y: 230;
SpriteImagem
Imagem: [Link].

Imagem: [Link].
SpriteImagem

Cor de Pintura: verde;

Bola
Raio: 8.

Intervalo: 3000.
Temporizador

HorizontalScrollArrangement
 Componente Configuração

Texto: Score.
Label

Texto: 0.
Label

Texto: Reset.
Botão

#ParaTodosVerem: O quadro apresenta os componentes utilizados no design e suas

configurações. Pintura: “Cor de fundo: preto”, “Largura: preencher principal”, “Altura: 300”.
SpriteImagem: “Y: 230”, “Imagem: [Link]”. SpriteImagem: “Imagem: [Link]”. Bola:
“Cor de Pintura: verde”, “Raio: 8”. Temporizador: “Intervalo: 3000”.
HorizontalScrollArrangement. Label: “Texto:” “Score:”. Label: “Texto: 0”. Botão: “Texto:
Reset”. Fim da descrição.

Clique em “blocos” para iniciar a programação em blocos do app. Verifique as etapas:

Se o app inicia, a bola some.

Clique no “Screen” e arraste o bloco “Inicializar”.

 Figura 17 – Bloco que inicializa a tela
Fonte: Reprodução

#ParaTodosVerem: a imagem mostra o bloco “quando [Link]” e

nele está encaixado o bloco “ajustar [Link]ível para”, no qual está encaixado o
bloco “falso”. Fim da descrição.

Se o foguete for arrastado, ajuste a posição em “x”.

Clique no foguete (lembre-se de que você alterou o nome do componente no design).

Figura 18 – Bloco que verifica se o foguete foi arrastado no

touch screen
Fonte: Reprodução

#ParaTodosVerem: A imagem mostra o bloco “quando [Link]” e

nele está encaixado o bloco “ajustar Foguete.x para”, no qual está encaixado o
bloco “xAtual”. Fim da descrição.

Se a bola alcança a borda, ela some.

 Figura 19 – Bloco que verifica se a bolinha alcançou a
borda da tela
Fonte: Reprodução

#ParaTodosVerem: a imagem mostra o bloco “quando [Link]çouBorda” e

nele está encaixado o bloco “ajustar [Link]ível para”, no qual está encaixado o
bloco “falso”. Fim da descrição.

Se o temporizador conta 3000 (ms), o disco assume uma nova posição.

O bloco azul de valores aleatórios encontra-se no conjunto de blocos “Matemática”.

Figura 20 – Bloco que conta o tempo para a mudança de

posição
Fonte: Reprodução

#ParaTodosVerem: a imagem mostra o bloco “quando [Link]”

e nele está encaixado o bloco “ajustar Disco.x para”, no qual está encaixado o
bloco “inteiro aleatório (bloco zero) até”. Nesse bloco, temos encaixado o bloco
de subtração subtraindo os valores dos blocos “[Link]” menos
“Disco. Largura”. Fim da descrição.
 Se a bola colide com o disco, a bola desaparece, o score soma mais 1 e o disco assume
nova posição aleatória.

Figura 21 – Bloco que verifica se a bola colidiu com algo (o

disco)
Fonte: Reprodução

#ParaTodosVerem: a imagem mostra o bloco “quando [Link]” e nele

estão encaixados três blocos. Primeiro, está o bloco“ajustar [Link]ível para”
e, nesse bloco, esta encaixado o bloco “falso”. O segundo bloco é “ajustar
[Link] para” e nele está encaixado o bloco de soma somando os
blocos “[Link]” e o bloco “1”. O terceiro bloco é “ajustar Disco.x
para” e nele está encaixado o bloco de subtração subtraindo os blocos
“[Link]” e o bloco “[Link]”. Fim da descrição.

Se o botão for clicado, o score volta a 0.

Figura 22 – Bloco que verifica se o botão “Reset” foi

acionado
Fonte: Reprodução

#ParaTodosVerem: a imagem mostra o bloco “quando Botã[Link]” e nele

está encaixado o bloco “ajustar [Link] para”, no qual está encaixado
o bloco “0”. Fim da descrição.
 Se o foguete for tocado, a bola aparece, assume velocidade e direção e se movimenta.

Figura 23 – Bloco que define o que acontece quando você

toca o foguete
Fonte: Reprodução

#ParaTodosVerem: a imagem mostra o bloco “quando [Link]” e nele

estão e encaixados quatro blocos: Primeiro o bloco “chamar [Link]” e
neste encaixado em x o bloco que soma os blocos “Foguete.x” e o bloco de
divisão entre “[Link]” e o bloco com o número “2”. Segundo bloco
“ajustar [Link]ível para” e neste encaixado o bloco “verdadeiro”. Terceiro
bloco “ajustar [Link] para” e neste encaixado o bloco “5”. Quarto
bloco “ajustar [Link]ção para” e neste encaixado o bloco “90”. Fim da
descrição.
2/3

ʪ Material Complementar

Indicações para saber mais sobre os assuntos abordados nesta Unidade:

Sites

QuizMe for App Inventor 2

Clique no botão para conferir o conteúdo.

ACESSE

Crie um App que Traduz

Clique no botão para conferir o conteúdo.

ACESSE

Introduction to Machine Learning: Image Classification

Clique no botão para conferir o conteúdo.

 ACESSE

Leitura

TalkToMe: A beginner App Inventor app

Clique no botão para conferir o conteúdo.

ACESSE

Oficina App Inventor

Clique no botão para conferir o conteúdo.

ACESSE
3/3

ʪ Referências

MICHEL, B. MIT App Inventor. Disponível em:

<[Link] Acesso em:
01/01/2023.

MIT APP INVENTOR. Disponível em: <[Link] Acesso em: 01/01/2023.

MIT APP INVENTOR. Tutorials for MIT App Inventor. c2012-2022. Disponível em:
<[Link] Acesso em: 12/01/2023.