Unidade 1: Fundamentos do App Inventor

Transcrição

1 Unidade 1: Fundamentos do App Inventor

2 Indice 1. Introdução Primeiros passos com o App Inventor O Editor de blocos Criando o primeiro aplicativo Opções de visualização 21 Unidade 1: Fundamentos do App Inventor 2

3 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 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

4 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

5 Unidade 1: Fundamentos do App Inventor 5

6 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

7 Basic Media Animation Social Sensors Screem Arrangement LEGO MINDSTORMS Other stuff Not ready for prime time Mostra componentes que permitem realizar ações básicas, tais como: adicionar botões, imagens, etiquetas, textos, etc... Pode encontrar componentes para: gravar vídeos, tirar fotos, reproduzir áudio, etc.. Inclui elementos de animação para adicionar ao seu aplicativo Onde pode encontrar componentes que servem para se comunicar com outras pessoas como, por exemplo, fazer ligações, enviar s, mensagens SMS ou nos comunicarmos via Twitter Onde pode encontrar componentes que servem para, entre outras coisas, utilizar o GPS do telefone ou o acelerômetro 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. que inclui componentes mais complexos para o desenvolvimento de robots. Estes componentes não fazem parte do nosso curso. Recursos que inclui componentes para: ler códigos de barras, bluetooth ou de reconhecimento de voz, entre outros 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. Unidade 1: Fundamentos do App Inventor 7

8 Unidade 1: Fundamentos do App Inventor

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

10 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

11 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

12 Unidade 1: Fundamentos do App Inventor 11

13 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

14 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

15 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

16 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

17 Alterando os textos, deverá ficar assim: Unidade 1: Fundamentos do App Inventor 16

18 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

19 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

20 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

21 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

22 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

23 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

24 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 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 e esperar o ícone do telefone ficar verde. Unidade 1: Fundamentos do App Inventor

25 Unidade 1: Fundamentos do App Inventor