Unidade 1: Fundamentos do App Inventor

Unidade 1: Fundamentos do App Inventor 2

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

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.

http://beta.appinventor.mit.edu/

http://beta.appinventor.mit.edu/


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.


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:


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 Arrangement

Serve para a organização de tela. Estes componentes servem para organizar em tela 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® MINDSTORMS®

que inclui componentes mais complexos para o desenvolvimento de robots. Estes 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 prime time

Contém componentes que estão em fase de desenvolvimento e que também não 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”.


À 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.


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.


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.


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.


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.


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):


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”.


Alterando os textos, deverá ficar assim:


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.


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...”.


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.


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.


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.


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:


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 4 Clique em...

Documents

Transcript of Unidade 1: Fundamentos do App Inventor · Unidade 1: Fundamentos do App Inventor 4 Clique em...