Desenvolvendo aplicativos multiplataforma com tecnologias web

Transcrição

1 phonegap_ Desenvolvendo aplicativos multiplataforma com tecnologias web Criando aplicativos para tablets e smartphones com o Phonegap Este artigo aborda o desenvolvimento de aplicativos para smartphones e tablets com o uso do framework Phonegap, que dá suporte a tecnologias web, tais como HTML5, CSS3, JavaScript e JQuery. O Phonegap se responsabiliza pela conversão da linguagem web para a linguagem nativa do dispositivo móvel, sendo o único que dá suporte a sete plataformas, contendo uma API repleta de funções para o desenvolvimento móvel, como accelerometer, geolocation, compass, camera, connection e storage. Com a crescente evolução do mercado de smartphones e tablets, dispositivos vêm sendo lançados para diferentes plataformas, dentre estas se destacam Android, ios, Windows Phone, Blackberry e Symbian. Isto traz ao desenvolvedor de aplicativos o grande obstáculo de ter de conhecer um vasto número de linguagens de programação e diferentes tipos de tecnologia. Essa necessidade vem dando espaço ao surgimento de frameworks para o desenvolvimento móvel que dão suporte ao uso de linguagens web como HTML, CSS e JavaScript, as quais 79% dos desenvolvedores pretendem utilizar em seus aplicativos, conforme destacado na pesquisa trimestral realizada pela Appcelerator em março de 2012, onde também foi levantado que 33% dos desenvolvedores possuem interesse por utilizar recursos de geolocalização e notificação. Este artigo apresenta o desenvolvimento de / 48

2 Marcelo Kasperbauer Software Developer Sênior, possui cinco anos de experiência com foco em aplicações Java Web. Já trabalhou como instrutor de formações Java e consultor em análise e desenvolvimento de Software Web. aplicativos com o uso do framework Phonegap, que dá suporte ao uso de HTML, CSS, JavaScript e outros, se responsabilizando pela conversão da linguagem web para a linguagem nativa do dispositivo, livrando o desenvolvedor da necessidade de compilar código para diferentes plataformas. Dentre os frameworks para o desenvolvimento móvel existentes, o Phonegap se destaca por ser o único que dá suporte ao desenvolvimento para sete plataformas, contendo uma API repleta de funções para o desenvolvimento móvel, tais como geolocation, accelerometer, compass, camera e outros, além de possuir integração com diversas ferramentas, como JQuery-mobile, Prototype e Sencha Touch. Este artigo visa demonstrar como configurar o ambiente de desenvolvimento para trabalhar com o Phonegap com foco na plataforma Android, explorando os recursos disponíveis na API deste framework utilizando HTML5, JavaScript e CSS3. Conhecendo o Phonegap Criado em 2009 pela empresa Nitobi e adquirido pela Adobe em 2011, o Phonegap é um framework open source que provê ao desenvolvedor de aplicativos a capacidade de trabalhar com dispositivos móveis de forma transparente com o uso de linguagens web como HTML5, CSS3 e JavaScript, se responsabilizando pela conversão das mesmas para a linguagem nativa de cada plataforma móvel, livrando o desenvolvedor da necessidade de ter de conhecer linguagens como Objetive C ou Java. Atualmente, o Phonegap se encontra na versão e é o único que dá suporte a sete plataformas conforme pode ser visto na figura 1, possuindo mais de 1 milhão de downloads, sendo utilizado por aproximadamente 400 mil desenvolvedores e contendo casos de sucesso dentre os aplicativos publicados, como, por exemplo, BBC Olympics e Wikipedia, que foram disponibilizados para Android, ios e Blackberry. Figura 1. Plataformas suportadas pelo Phonegap. Configurando o Projeto Neste artigo, é dado foco no desenvolvimento para a plataforma Android, porém utilizando o framework Phonegap. Com exceção da plataforma ios, são necessários apenas pequenos ajustes de código para a geração do aplicativo para as outras plataformas suportadas. Para se trabalhar com ios, é necessário um computador mac, apple id e a licença de desenvolvedor da Apple. O primeiro passo para a configuração do ambiente de desenvolvimento para a plataforma Android será realizar o download da versão mais recente na página do framework. Para tanto, acesse e click no botão de download da versão Após ter realizado o download do Phonegap, nosso próximo passo será realizar o download da IDE Eclipse. Para isto, acesse eclipse.org/downloads/ e selecione a opção Eclipse Classic 4.2, ou qualquer outra de sua preferência que seja superior a versão 3.4 (requisito do Phonegap). Será necessário fazer a instalação do plugin para desenvolvimento Android ADT. Para isso, siga as instruções disponíveis em com/sdk/installing/installing-adt.html. Agora que temos as ferramentas necessárias configuradas, vamos criar nosso primeiro projeto com Phonegap. Selecione o menu File, seguido de New e Android Project. vamos chamar o nosso projeto de hellophonegap. Clique em next e preencha os campos conforme mostrado na figura 2. O campo Application Name define como será chamada a nossa aplicação; este será o nome que irá ser exibido abaixo do ícone do aplicativo quando o mesmo estiver no dispositivo e também será o exibido no cabeçalho do aplicativo. Package Name será o local onde a classe Activity será criada, que será o nosso único arquivo Java. Selecione a checkbox Create Activity para que o Eclipse se responsabilize pela criação da mesma no nosso Package. A classe Activity representa uma atividade responsável pela interação entre aplicação e usuário, e é responsável por iniciar o aplicativo Android. Por fim, o campo Minimum SDK será onde definiremos a versão mínima que nosso aplicativo suportará. Ao final, clique no botão finish para que o projeto seja criado. 49 \

3 Figura 2. Criando o projeto. Agora que o projeto está criado, faremos algumas modificações necessárias para trabalhar com Phonegap. No diretório raiz, crie um diretório chamado / libs e um diretório chamado /assets contendo um subdiretório chamado /www, que conterá um subdiretório chamado /js. Descompacte o zip do Phonegap, acesse o diretório /lib/android e copie o arquivo de código-fonte chamado cordova js para dentro do seu novo diretório /js. Copie o arquivo cordova jar para dentro do seu diretório /libs e, por fim, copie o diretório /xml do Phonegap para dentro do seu diretório /res. A estrutura de seu projeto deve ficar conforme figura 3. Figura 3. Estrutura do projeto. Nosso próximo passo será adicionar o arquivo cordova jar ao build path de nosso projeto. Para isso, clique com o botão direito no projeto, seguido de properties e selecione a opção Java Build Path. Clique no botão chamado Add Jars e selecione o arquivo cordova jar, que se encontra dentro de nosso recém-criado diretório /libs. Por restrições do Phonegap, é fundamental que o diretório /libs fique dentro do diretório raiz no mesmo nível de /src. Após selecionar o arquivo e clicar no botão ok, o Java Build Path de nosso projeto deve estar conforme a figura 4. Figura 4. Java Build Path. Agora que nosso build path está configurado, vamos fazer alguns ajustes na nossa classe Activity. Selecione o arquivo HelloPhonegapActivity.java que criamos dentro de src.com.mundoj.activity e substitua seu conteúdo pelo código da Listagem 1. Observe que neste arquivo, ao contrário das aplicações Android nativas, a nossa classe Activity é filha da classe DroidGap do Phonegap e não da classe Activity do Android. A DroidGap funciona como uma classe main, que se responsabiliza pela iniciação do aplicativo Android, chamando o método oncreate, que define qual será o arquivo html inicial a ser carregado pelo aplicativo. Listagem 1. Implementação da classe Activity. package com.mundoj.activity; import org.apache.cordova.droidgap; import android.os.bundle; public class HelloPhonegapActivity extends DroidGap public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); super.loadurl( file:///android_asset/www/ index.html ); Será necessário alterar o arquivo AndroidManifest. xml, o qual contém algumas configurações básicas de nosso aplicativo para dar algumas permissões que o Phonegap precisa. Para isto, adicione o código da Listagem 2 acima da tag <application>. Com estas permissões, o Phonegap será capaz de trabalhar com os recursos do dispositivo móvel, como localização, internet, áudio, contatos e outros. Listagem 2. Alterando as permissões no androidmanifest. supports-screens android:largescreens= true android:normalscreens= true android:smallscreens= true android:resizeable= true android:anydensity= true /> / 50

4 VIBRATE /> ACCESS_COARSE_LOCATION /> ACCESS_FINE_LOCATION /> ACCESS_LOCATION_EXTRA_COMMANDS /> READ_PHONE_STATE /> INTERNET /> RECEIVE_SMS /> <uses-permission <android:name= android. RECORD_AUDIO /> MODIFY_AUDIO_SETTINGS /> <uses-permission android:name=. READ_CONTACTS /> WRITE_CONTACTS /> WRITE_EXTERNAL_STORAGE /> ACCESS_NETWORK_STATE /> GET_ACCOUNTS /> BROADCAST_STICKY /> Concluídas as configurações necessárias, nosso último passo será a criação do arquivo index.html dentro de /www. Conforme definido em nossa classe Activity, este será o primeiro arquivo de nosso aplicativo a ser carregado e exibido ao usuário. Após criar o arquivo, insira dentro dele o código da Listagem 3. Para conferir o resultado de nosso hello world, clique com o botão direito no projeto Android, seguido de Run as e selecione Android Application. O aplicativo será exibido no emulador, contendo o resultado demonstrado na figura 5. Listagem 3. Trabalhando com HTML. <html> <head> <title>mundo J</title> <script type= text/javascript charset= utf-8 src= js/cordova js > <style type= text/css > h1 { font-family: Helvetica, Geneva, Arial, sans-serif; color: blue; </style> </head> <body> <h1 class= h1 >Olá Phonegap! Bem vindo a mundo J!</h1> </body> </html> Figura 5. Hello World. Explorando a API O Phonegap possui uma poderosa API repleta de funções úteis ao desenvolvimento móvel, como localização, bússola e aceleração, os quais estão disponíveis em grande parte dos tablets e smartphones disponíveis no mercado. Através das permissões que alteramos na Listagem 2, a API do Phonegap tem acesso aos recursos que iremos acessar. Portanto, se você não tem interesse em recursos, como, por exemplo, áudio, você poderá remover esta permissão de seu AndroidManifest.xml. Neste artigo, faremos uma breve explicação das principais funções da API. Vamos começar explorando a função Accelerometer, que é responsável por capturar a movimentação do dispositivo móvel nos eixos x, y e z, retornando valores positivos e negativos. A Accelerometer possui 51 \

5 uma função chamada getcurrentacceleration, que é a movimentação corrente do dispositivo. Adicione o código da Listagem 4 no seu index.html abaixo da tag script, execute a aplicação no emulador e você verá o resultado conforme figura 6. Listagem 4. Função Accelerometer. navigator.accelerometer. getcurrentacceleration( onsuccess, onerror); function onsuccess(acceleration) { alert( Acceleration X: + acceleration.x + \n + Acceleration Y: + acceleration.y + \n + Acceleration Z: + acceleration.z + \n ); function onerror() { alert( onerror! ); Figura 6. Resultado da função Accelerometer. A função Compass funciona como uma bússola, retornando a direção a qual o dispositivo móvel está apontando. A Compass possui uma função chamada getcurrentheading, que retorna em graus a posição apontada. Adicione o código da Listagem 5 no seu index.html abaixo da tag script, execute a aplicação no emulador e você verá o resultado conforme figura 7. function onsuccess(heading) { alert( Heading: + heading. magneticheading); function onerror(compasserror) { alert( Compass Error: + compasserror. code); Figura 7. Resultado da função Compass. Agora vamos explorar a função Device da API do Phonegap, que obtém as informações de hardware e software do dispositivo móvel, sendo capaz de retornar informações, como nome, plataforma e versão do dispositivo. Adicione o código da Listagem 6 no seu index.html abaixo da tag script, execute a aplicação no emulador e você verá o resultado conforme figura 8. Listagem 6. Função Device. alert( Device Name: + device.name + <br /> + Device Cordova: + device.cordova + <br /> + Device Platform: + device.platform + <br /> + Device UUID: + device.uuid + <br /> + Device Version: + device.version + <br /> ); Listagem 5. Função Compass. navigator.compass.getcurrentheading( onsuccess, onerror); Figura 8. Resultado da função Device. / 52

6 Nossa próxima função será a Connection, que é responsável por identificar o tipo de conexão, a qual o dispositivo móvel está conectado. Adicione o código da Listagem 7 no seu index.html abaixo da tag script, execute a aplicação no emulador e veja o resultado conforme figura 9. Listagem 7. Função Connection. checkconnection(); function checkconnection() { var networkstate = navigator.network. connection.type; var states = {; states[connection.unknown] = Unknown states[connection.ethernet] = Ethernet states[connection.wifi] = WiFi states[connection.cell_2g] = Cell 2G states[connection.cell_3g] = Cell 3G states[connection.cell_4g] = Cell 4G states[connection.none] = No network alert( Connection type: + states[networkstate]); Figura 9. Resultado da função Connection. Nossa última função será Geolocation, que provê informações relativas à geolocalização do dispositivo móvel possuindo uma função JavaScript chamada getcurrentposition, que retorna as informações de latitude, longitude e altitude. Adicione o código da Listagem 8 no seu index.html abaixo da tag script e execute a aplicação no seu dispositivo. Como o emulador não provê as informações de localização, não será possível emular as mesmas e, dessa forma, será necessário ter habilitada a opção de localização do seu dispositivo. Listagem 8. Função Geolocation. navigator.geolocation.getcurrentposition( onsuccess, onerror); function onsuccess(position) { alert( Latitude: + position.coords. latitude + <br /> + Longitude: + position.coords.longitude + <br /> + Altitude: + position.coords.altitude + <br /> ); function onerror(error) { alert( code: + error.code + \n + message: + error.message + \n ); Considerações Finais Este artigo apresenta uma forma de desenvolver aplicações para dispositivos móveis utilizando as linguagens web suportadas pelo framework Phonegap, que dá suporte ao desenvolvimento de aplicativos móveis para sete plataformas, possuindo uma API repleta de funções úteis para a mobilidade. Sugere-se ao leitor após leitura deste artigo compilar os aplicativos para outras plataformas e utilizar os demais recursos disponíveis na API do framework. Muitas das informações necessárias podem ser encontradas no site do Phonegap. > > > > Beginning Android Application Development > Phonegap Beginner s Guide /referências 53 \