Unidade 8: Componentes avançados do App Inventor

Transcrição

1 Unidade 8: Componentes avançados do App Inventor

2 Indice 1. Introdução Abrindo Links de Web Envio de Correios Eletrônicos Uso de Mapas Realização de Chamadas Eletrônicas

3 Unidade 8. Componentes avançados do App Inventor 1. Introdução Nesta unidade vamos aprender a incluir funcionalidades mais avançadas nos seus aplicativos. Adicionaremos botões que tenham ligações com sites, enviem s, abram vídeos ou mapas. Aceite o desafio e converta-se em Desenvolvedor de aplicativos avançados com o AppInventor. 2. Abrindo links web No AppInventor, a forma de abrir um site, enviar um ou mostrar um mapa é muito similar. Basta abrir o aplicativo correspondente, isto é, abrir o navegador, Google Maps, ou o aplicativo de correio. Para usar esta funcionalidade, o AppInventor oferece um componente chamado ActivityStarter. Sua peculiaridade é que é invisível, isto é, não aparece na tela. Mas podemos acessar suas propriedades e podemos utilizá-lo no Editor de Blocos como qualquer outro componente. Para explicar o funcionamento deste componente criamos um novo projeto ao qual chamaremos Web. Quando estiver criado, arrastamos um botão da paleta de componentes para a Viewer. Alteramos o texto por Abrir link Web. Depois arrastamos o componente Activity Starter, situado na paleta de componentes clicando em Otherstuff. 3

4 Depois clicamos no componente ActivityStarter para ver suas propriedades. Existem vários espaços para preencher, mas nem todos devem ser preenchidos, Neste caso, preencheremos a propriedade Action e DataUri. A propriedade Action serve para definir que tipo de atividade será iniciada ao clicar no botão. No nosso caso, queremos abrir um site, por isso digitamos o seguinte código: android.intent.action.view. Leve em conta as minúsculas e as maiúsculas, e não deixe espaços. A propriedade DataUri define o site que queremos abrir. Neste caso digitamos: para abrir o site da Escola Técnica. Abrimos o Editor de Blocos para fazer o link deste componente com o botãoviewer. Uma vez aberto o Editor de Blocos, clicamos na guia My Blocks. Selecionamos o botão e arrastamos o bloco Button1.Click para a tela. 4

5 Precisamos conhecer os blocos que o componente ActivityStarter1 oferece e encaixar o adequado. Clicamos em ActivityStarter1 e procuramos o bloco chamado ActivityStarter1.StartActivity. É o bloco que necessitamos, arrastamos e encaixamos. Agora, inicializamos o emulador e o conectamos aoappinventor. Clicando no botão Web, a tela faz uma transição para uma nova tela onde é aberto o site que introduzimos. 5

6 Para retornar ao menu, clicamos no botão voltar do emulador, como se fosse um telefone. As únicas diferenças entre abrir um site ou outro estão nos parâmetros das propriedades dos ActivityStarter. Por exemplo, se quisermos incluir um vídeo do YouTube, digitamos a URL do vídeo no campo datauri. Ou ainda, vamos ao YouTube, abrimos o vídeo escolhido e copiamos o endereço Web da barra de endereços. Tente este por exemplo: O endereço copiado deve ser colado somente no campo DataUri do ActivityStarter. Assim, teremos o vídeo do YouTube integrado no aplicativo. 3. Envio de correios eletrônicos Nesta atividade vamos aprender a enviar s a partir do nosso aplicativo. Primeiro, arrastamos um botão e umactivitystarter para a Viewer. Alteramos o texto pad r ã o d o b o t ã o para Enviar correio. Depois definimos os parâmetros do ActivityStarter. Neste caso, no item Action digitamos o mesmo como se estivemos fazendo o link comum site normal: android.intent.action.view. A diferença é que no itemdatauri introduzimos o endereço de precedido pelo código mailto:. Ficaria assim: mailto:[email protected]. Com isso, estamos fazendo com que ao clicar no botão o aplicativo de correio se abra e, neste caso, preencherá automaticamente o espaço do endereço do destinatário do mail. Assim como no componente anterior, agora vamos para o Editor de Blocos na guia My Blocks. Selecionamos o botão e arrastamos o bloco Button1.Click para a tela. Só falta preencher o espaço deste botão. Clicamos no componente ActivityStarter e arrastamos o bloco ActivityStarter.StartActivity para a tela para que encaixe com o bloco Button1.Click da mesma forma que no caso anterior. 6

7 No emulador, ao clicar no botão Enviar correio, a tela faz uma transição para o aplicativo de mail com o destinatário preenchido. Este último só funcionará no caso de ter seu configurado no telefone ou no emulador. Se não quiser configurar seu no emulador, pode carregar o aplicativo no celular e testar para ver se funciona. 7

8 4. Uso de mapas Outra funcionalidade utilizada frequentemente nos aplicativos móveis são os mapas. Permite geolocalizar conteúdo sem um mapa e é muito útil para se orientar e encontrar pontos de interesse. O uso de mapas no AppInventor é muito similar ao que vimos até agora. Retornamos ao site do AppInventor e selecionamos o ActivityStarter. No item Action de Properties introduzimos o mesmo que nas vezes anteriores: android.intent.action.view. A diferença estará no itemdatauri. Você deve saber as coordenadas onde centralizar o mapa. Neste caso, vamos centralizá-lo na cidade de São Paulo (Brasil). Para obter as coordenadas vamos ao Google Maps (maps.google.com) e procuraremos São Paulo. Quando estiver na tela, clicamos no botão direito em algum ponto do mapa e selecionamos a opção O que há aqui? Na barra de pesquisa aparecerão as coordenadas desse lugar. Neste caso, o mapa estará no Centro da cidade de São Paulo, nas coordenadas: , Agora retornaremos ao site do AppInventor e, no itemdatauri, incluiremos o código: geo: , Fazemos o mesmo com os outros dois botões. Vamos ao Editor de Blocos e na guia My Blocks selecionamos Mapa. Depois arrastamos o bloco Button1.Click para a tela. Clicamos no bloco ActivityStarter e arrastamos o bloco ActivityStarter.StartActivity para o bloco do botão do mapa.

9 Selecionando o último botão no emulador, você vai ver que o mapa vai abrir e centralizar na Cidade de São Paulo. Contudo, queremos que não apenas centralize o mapa onde queremos, mas que também coloque uma marca nesse ponto. Para isso, será necessário modificar levemente o código que utilizamos no item DataUri do ActivityStarter. Retornamos ao site do AppInventor, selecionamos o componente ActivityStarter e substituímos o parâmetro DataUri pelo seguinte código: geo: , ?q= , Desta forma, dizemos ao aplicativo que o mapa apareça centralizado na região da cidade de São Paulo como antes, e que queremos pesquisar nessas coordenadas em concreto. Testando-o no emulador, veremos como, inicialmente, o mapa fica centralizado na cidade de São Paulo e, que quando encontra o endereço das coordenadas que indicamos, centraliza novamente o mapa, mas desta vez com o zoom adequado e com uma marca nessa posição.

10 5. Realização de chamadas telefônicas Outra funcionalidade muito útil que podemos integrar no nosso aplicativo é o uso de chamadas telefônicas aproveitando que estamos programando para um celular. Esta funcionalidade também é simples de implementar e parecida às anteriores. Primeiro arrastamos para Viewer um botão e o componente PhoneCall situado no item Social. Para definir o número de telefone a ser chamado de forma automática, vamos a properties e preenchemos o campo de texto PhoneNumber. Você pode preenchê-lo com seu telefone para verificar como funciona.

11 Agora daremos à funcionalidade apropriada no botão chamar. Clicamos no componente PhoneCall1 na guia My Blocks e verificamos que há um bloco chamado PhoneCall1.MakePhoneCall. Este é o bloco que devemos arrastrar para o último bloco Button1.Click. Se clicarmos no botão Chamada no emulador, é feita uma chamada telefônica. Como é um emulador, a chamada falha, mas se testarmos no telefone real, veremos que funciona bem. Exercícios: 1. Aproveitando o projeto do Aplicativo Turismo, vamos inserir links dos três pontos turísticos citados, além de sua posição geográfica, e acesso de discagem telefônica para cada um dos locais.