Unidade 1: Fundamentos

do App Inventor
 Indice

1. Introdução...…………………………………………………………………………………………….3
2. Primeiros passos com o App Inventor……...………………………………………………3
3. O Editor de blocos………………………………………………………………………………..…10
4. Criando o primeiro aplicativo............... ............................ ...14
5. Opções de visualização……………………………………………………………………………21

Unidade 1: Fundamentos do App Inventor 2

 Unidade 1. Fundamentos do App Inventor

1. Introdução
O AppInventor é uma plataforma de desenvolvimento de aplicativos Android pensado para pessoas com
pouco ou sem conhecimento algum sobre programação. Para desenvolver estes aplicativos, não é
necessário escrever código; basta arrastar e montar as peças como se fosse um quebra-cabeça para criar os
seus desenhos e definir o que eles farão.

Mas, oferece suficiente potência para desenvolver aplicativos simples e complexos. A combinação entre
potência e simplicidade converte a plataforma em um sistema revolucionário de aprendizado.

Com o AppInventor, você vai conseguir criar facilmente qualquer tipo de aplicativo que imaginar: desde
jogos, aplicativos para empresas, aplicativos de desenho ou os que utilizam mapas e GPS. Neste desafio,
você vai aprender o básico do AppInventor e vai criar os seus primeiros aplicativos que poderá
executar no seu próprio celular Android ou, caso não tenha, em um emulador de telefone celular no seu
computador.

Aceite o desafio e aprenda a criar seus próprios aplicativos Android.

2. Primeiros passos com o App Inventor

Bem-vindo ao desafio no qual você vai criar seu primeiro aplicativo móvel. Você já viu o vídeo
disponibilizado (Demonstração) sobre como começar a trabalhar com o AppInventor? O vídeo do gatinho
que anda sobre o teclado do computador e que serve de inspiração para sua dona criar um aplicativo?

Lembre-se que o AppInventor deve estar instalado e configurado para continuar. Também é necessário
que você se identifique com seu usuário e senha da sua conta no Google.

Para começar, vá à página do AppInventor http://beta.appinventor.mit.edu/ e selecione “sua conta”. Após

colocar a senha você entrará em sua área de trabalho. Aparecerá uma tela onde aparecem seus projetos.
Provavelmente a tela aparecerá em branco, o que significa que não tem nenhum projeto começado.

Unidade 1: Fundamentos do App Inventor 3

 Clique em “New”, e digite um nome para o projeto, por exemplo, “OlaMundo”, e depois clique em “OK”. Ao
digitar o nome, cuidado para não utilizar espaços; use apenas números e letras. O AppInventor não permite
nomes de projetos com espaços.

No AppInventor, você pode encontrar três partes bem diferentes:

Em primeiro lugar, o site através do qual é desenvolvida parte gráfica
(App Inventor Designer).
Em segundo lugar, o Editor de Blocos (Open the Blocks Editor), um aplicativo que você pode acessar
diretamente da seção Designer do site. E, por último, vai encontrar o emulador, um programa que simula
um telefone Android. E, é claro, se tiver um celular Android poderá testar os aplicativos que desenvolver no
seu próprio telefone.

Unidade 1: Fundamentos do App Inventor 4

Unidade 1: Fundamentos do App Inventor 5
 A página que você está vendo é a que vai utilizar para desenhar os aplicativos no AppInventor. Esta página
está dividida em cinco colunas. A primeira está na parte superior e é o Menu principal, a partir do qual você
pode salvar as últimas alterações (caso não tenham sido salvas automaticamente), criar ou eliminar telas e
abrir o Editor de Blocos.

As outras quatro colunas do AppInventor, da esquerda para a direita, são:

- “Palette”: Mostra a paleta ou biblioteca de componentes que você vai poder utilizar para desenvolver os
aplicativos. Dentro desta coluna, você pode encontrar dez categorias com diferentes ações:

Unidade 1: Fundamentos do App Inventor 6

 Basic Mostra componentes que permitem realizar ações básicas, tais como: adicionar
botões, imagens, etiquetas, textos, etc...
Media Pode encontrar componentes para: gravar vídeos, tirar fotos, reproduzir áudio, etc..
Animation Inclui elementos de animação para adicionar ao seu aplicativo
Social Onde pode encontrar componentes que servem para se comunicar com outras pessoas
como, por exemplo, fazer ligações, enviar emails, mensagens SMS ou nos
comunicarmos via Twitter
Sensors Onde pode encontrar componentes que servem para, entre outras coisas, utilizar o GPS
do telefone ou o acelerômetro
Screem Serve para a organização de tela. Estes componentes servem para organizar em tela
Arrangement outros componentes como imagens ou botões. Há três tipos diferentes de
Arrangement: HorizontalArrangement, VerticalArrangement e TableArrangement.
Estes objetos servem para alinhar nossos componentes na tela, isto é, nos ajudam a
colocá-los onde queremos.
LEGO® que inclui componentes mais complexos para o desenvolvimento de robots. Estes
MINDSTORMS® componentes não fazem parte do nosso curso.
Other stuff Recursos que inclui componentes para: ler códigos de barras, bluetooth ou de
reconhecimento de voz, entre outros
Not ready for Contém componentes que estão em fase de desenvolvimento e que também não
prime time
estudaremos neste curso.

Um pouco mais à direita, na parte central, está a “Viewer”, que é a representação da tela do telefone. O
que você vir aqui, é o que verá na tela do telefone. A forma de construir o desenho consiste em ir
arrastando componentes a partir da “Palette” para a “Viewer”.

Unidade 1: Fundamentos do App Inventor 7

Unidade 1: Fundamentos do App Inventor
 À direita da Viewer pode ver a coluna “Components”. Nela, pode ver todos os componentes que da tela; é
aqui é onde se pode alterar o nome dos componentes ou eliminar os que você tiver em “Viewer”.
Agora você só pode ver dois componentes: Screen, que é a tela que aparece, e o botão que acabou de
inserir.

Unidade 1: Fundamentos do App Inventor 8

 E, por último, mais à direita, está a coluna “Properties”. Nesta seção, você pode configurar as propriedades
dos componentes da tela. Por exemplo, alterar os parâmetros como a cor dos textos, o tamanho e a forma
dos botões ou o fundo de tela, entre outras opções.
Como pode ver, é possível alterar o texto do botão modificando apenas o texto que aparece no campo
Text.

Unidade 1: Fundamentos do App Inventor 9

 3. O Editor de Blocos (Blocks Editor)

O Editor de Blocos é uma ferramenta oferecida pelo AppInventor que permite dizer aos componentes o
que devem fazer. Por exemplo “O que ocorre ao clicar no botão?”. Para abrir o Editor de Blocos, clique no
botão Opem the Blocks Editor que pode encontrar no site do AppInventor.

Ao clicar neste botão, é executado um arquivo (geralmente é automático, mas ele pede sua
permissão para executar. É nesta hora que o Java é necessário estar instalado, pois ele é executado). Ao ser
executado, é aberto o Editor de Blocos e aparece um aplicativo muito simples com uma tela vazia onde
definir o que o nosso app deve fazer.

Unidade 1: Fundamentos do App Inventor 10

Unidade 1: Fundamentos do App Inventor 11
 O Editor de Blocos está composto de três partes. A primeira está na parte superior e permite: salvar as
alterações (quando não forem salvas automaticamente), desfazer alterações ou refazê-las. Também pode
executar o emulador a partir desta tela.

Unidade 1: Fundamentos do App Inventor 12

 A segunda parte está na parte esquerda, formada por um menu de blocos com as ferramentas necessárias
para definir como se comporta o aplicativo.

Esta parte contém todos os módulos, isto é, as peças de quebra-cabeça que podemos utilizar para definir o
que farão nossos aplicativos. Você verá que há 3 abas de comandos: “Built-in”, “My Blocks” e “Advanced”.
My Blocks contém as peças de quebra-cabeça correspondentes aos módulos que adicionamos
anteriormente na seção desenho. Ou seja, se em desenho você tiver adicionado um botão e uma imagem,
em My Blocks verá as peças do quebra-cabeça correspondentes ao botão e a imagem.
A aba “Built-in” contém os elementos básicos que vão ajudá-lo a definir como o aplicativo vai se comportar.
Contém: cores, números e peças de quebra-cabeça para fazer operações matemáticas e, inclusive, peças de
quebra-cabeça para criar ou trabalhar com texto, etc. Mais adiante descobrirá mais detalhes. Por último, a
aba “Advanced” com componentes mais avançados que, por enquanto, não serão utilizados.

A terceira parte ocupa o resto da tela, é a tela para onde arrastar os elementos a partir do menu de blocos.
Funciona da mesma forma que no site do AppInventor.

Unidade 1: Fundamentos do App Inventor 13

 4. Criando o primeiro aplicativo
Para explicar o funcionamento do Editor de Blocos, você vai começar fazendo um aplicativo simples.
Criamos então um novo projeto.
Então, feche a tela do Editor de Blocos (clicando no X de fechar do Windows). Vamos iniciar:

1. Clique em My Projects;
2. Clique em seguida em New;
3. E na janela que se abre em Project Name: olamundo
4. Clique em Ok.

A tela com o nome do Projeto aparecerá assim (repare que o nome de seu projeto está no canto à
esquerda):

Unidade 1: Fundamentos do App Inventor 14

 Próximos Passos:

5. Clicaremos em cima do item Label (dentro do item Basic, à esquerda) e arrastaremos até a área central
da tela (Viewer), que representa a tela do seu aparelho celular.

A tela ficará assim:

Para alterar o texto da etiqueta, selecione-a na Viewer (Tela central), clicando em cima. Ao fazer a
alteração, em Properties (à direita) aparecem as propriedades deste elemento. Escolha a opção Text e
altere o nome por outro que escolher, por exemplo: Olá Mundo!

6. Agora arraste um botão Button (dentro do item Basic, à esquerda) para a Viewer. Aparece um texto
por defeito no botão, mas você pode modificá-lo se o selecionar e alterar o texto que aparece em
Properties. Pode alterá-lo por outro nome mais adequado como, por exemplo, “Continuar”.

Unidade 1: Fundamentos do App Inventor 15

 Alterando os textos, deverá ficar assim:

Unidade 1: Fundamentos do App Inventor 16

 Feito isto, podemos continuar com o estudo do funcionamento do Editor de Blocos (clique em Open the
Blocks Editor). Abra o Editor de Blocos e clique na aba da parte superior direita My Blocks, onde verá
todos os elementos que arrastou anteriormente para o site do AppInventor. Se prestar atenção na
coluna Components, verá que aparecem os mesmos elementos da coluna My Blocks do Editor de Blocos.

Ao clicar, por exemplo, em Button1, aparece uma janela onde pode ver todos os blocos que relacionados
com esse botão. Em função do bloco que escolher, o botão fará uma coisa ou outra.

Unidade 1: Fundamentos do App Inventor 17

 Como você está vendo, os blocos têm uma forma parecida a de um quebra-cabeça. De fato, ao encaixar
blocos entre si é como se desse lógica ao aplicativo.

Obs.: Eles devem encaixar-se perfeitamente e inclusive fazem um barulho como um “click”, como se tivesse
encaixado. Se isto não acontecer, você escolheu o item errado.

Por exemplo, se quiser que o aplicativo mostre a mensagem “Bem-vindo ao mundo do AppInventor” na
etiqueta Label1 cada vez que clicar no botão, você deve: clicar em Button1 e ver que componentes há
disponíveis. No primeiro bloco aparece “whem Button1.Click do” que em inglês quer dizer “ao clicar no
Button1 fazer”. Isto quer dizer que ao clicar no Button1 os componentes que colocarmos dentro desta peça
de quebra-cabeça serão executados. Como você quer alterar o conteúdo da etiqueta, ao clicar no botão
arraste esse bloco para a tela.

Tudo o que estiver nesse bloco será executado quando o botão for clicado. Selecione agora o componente
Label1 e veja os blocos que o Editor de Blocos oferece agora. Como o que você quer é modificar o conteúdo
dessa etiqueta, localize um bloco que tenha o texto “set Label1.Text to”, que em inglês significa
“estabelecer o texto da Label1 a...”.

Unidade 1: Fundamentos do App Inventor 18

 Uma vez localizado o bloco, arraste para a tela de tal forma que encaixe com o bloco que você já tinha.

Como você está vendo, ambos os blocos encaixam perfeitamente. Mas, ainda falta algo para terminar de
alterar o conteúdo da etiqueta: o texto a ser incluído. Clique na guia “Built-In” onde estão todos os blocos
básicos de que dispõe. Depois em “Text” e veja que o primeiro bloco só contém um texto, e que encaixa
com o espaço que ainda não foi preenchido.

Unidade 1: Fundamentos do App Inventor 19

 Arraste esse bloco de tal forma que encaixe com o espaço vazio. Para escrever dentro dele, dê dois cliques
em cima da palavra text

Com isto, o aplicativo já vai estar funcionando. Ao clicar no botão, alterará o texto da Label1 pelo texto
“text”. Por último, pode alterar esse texto para que apareça, por exemplo, “Bem-vindo ao mundo do
AppInventor”. Clique na palavra “text” em negrito e altere o texto.

Se você realizou os passos corretamente, ao clicar no botão o texto da etiqueta será alterado. Parabéns!
Você já terminou o seu primeiro aplicativo. No próximo vídeo, explicaremos como executá-lo.

Unidade 1: Fundamentos do App Inventor 20

 4. Opções de visualização
Uma vez desenvolvido seu primeiro aplicativo, vai querer ver como funciona no seu celular ou no
emulador. Para testar os aplicativos, o AppInventor oferece várias opções, uma delas consiste em testar os
aplicativos em um emulador e as outras opções são para testar os aplicativos em um dispositivo real.
Como você viu na introdução ao AppInventor, um emulador é uma simulação de um telefone real em nosso
computador.

Quando instalamos o aplicativo do AppInventor que explicamos no item configuração, entre outras coisas,
instalamos um emulador do Android. Para abri-lo, siga os passos abaixo:

Estando no Editor de Blocos e, uma vez aqui, observe mais detalhadamente a barra de menu.

Na parte da direita, pode ver dois botões: “New emulator” e “Connect to Device...”.

Com o botão “New emulator” você abre um novo emulador e com o botão “Connect to Device...” conecta o
AppInventor com o emulador para que o aplicativo em questão seja executado. Clique no botão “New
emulator”. Quando o emulador estiver inicializado, aparecerá a tela de bloqueio clássica do Android, onde
devemos destravar clicando e arrastando no desenho do cadeado, com se fosse um aparelho celular de
verdade.

Unidade 1: Fundamentos do App Inventor 21

 Após emulador que simula um telefone celular dentro de seu computador estiver carregado, aparecerá
assim em sua tela e você então conectará seu programa e ele para ver seu primero aplicativo funcionando
neste celular (não esqueça de destravar o aparelho celular clicando em cima do cadeado e arrastando-o:

Unidade 1: Fundamentos do App Inventor 22

 No Windows, às vezes, junto com o emulador aparece uma tela preta com uma mensagem de erro ou
advertência. Isto é normal, não tem problema. Não feche essa tela. Se fechá-la, o emulador fechará
também.
Agora que o emulador já está inicializado, clique no botão “Connect to Device...” para conectá-lo ao
AppInventor e poder visualizar o aplicativo.

Ao clicar, aparecerá um menu onde é possível escolher o dispositivo com o qual queremos conectar o
AppInventor. No nosso caso, devemos selecionar “emulator-5554”. Ao selecioná-lo, o ícone cinza do
telefone fica amarelo, o que indica que está tentando estabelecer a conexão...

… quando o AppInventor estiver conectado ao emulador, o ícone ficará verde.

Chegado a este ponto, o aplicativo já está sendo executado no emulador. Para poder utilizá-lo, basta
desbloquear o emulador como se fosse um telefone convencional, deslocando a barra de bloco para a
direita.

Se executar o aplicativo anterior, verá como efetivamente o texto da etiqueta muda ao clicar no botão.

Não é necessário reinicializar o emulador cada vez que você quiser testar algo novo, já que ao estar
“conectado”, qualquer modificação que fizermos no AppInventor aparecerá de forma imediata no
emulador. Contudo, se vir que o emulador não atualiza o aplicativo pode clicar novamente no “emulator-
5554” e esperar o ícone do telefone ficar verde.

Unidade 1: Fundamentos do App Inventor

Unidade 1: Fundamentos do App Inventor