Não recomendo mais o uso de Phonegap para apps multiplataforma, mas sim React Native. Leia esta série de tutoriais.
Recentemente escrevi um post tratando dos mais diversos frameworks para desenvolvimento mobile para as mais variadas plataformas. Desde soluções conhecidíssimas como os frameworks nativos até soluções mais exóticas visando aumento de produtividade, principalmente no que tange desenvolver uma só vez e fazer build para mais de uma plataforma.
O post de hoje trata justamente sobre isso, e se enganou quem pensou que eu ia usar o Corona SDK, cujos posts estão espalhados por este blog. O post de hoje vai para todos aqueles webdesigners que sonharam em ter aplicações desenvolvidas para dispositivos móveis mas que não entendem bulhufas de Java, Objective-C e muito menos Lua.
Que tal desenvolvermos para 7 plataformas diferentes com apenas três siglas mágicas: HTML, CSS e JS!
PhoneGap
Em 2009 três amigos desenvolvedores da empresa Nitobi, criaram um fork do Apache chamado Callback, que visava ser um container web para dispositivos móveis e ao mesmo tempo um framework web. A idéia dos três amigos era que qualquer desenvolvedor web que conhecesse HTML + CSS + JS pudessem desenvolver sistemas para dispositivos móveis acessando os recursos dos dispositivos através de um intrincado framework JS + poderosos recursos nativos que eles tiveram de desenvolver com C++ e Objective-C. Pois bem, muito tempo depois o tal projeto se tornou o que hoje chamamos de PhoneGap, o Apache Callback se tornou o Apache Cordova e a Nitobi foi comprada pela Adobe (essa é pra quem achava que a Adobe estava fora da briga mobile…). Hoje o projeto é mantido por várias empresas como Adobe, RIM, Microsoft e IBM, que ajudam a escrever os algoritmos de comunicação com seus dispositivos e o projeto tornou-se open-source, gratuito e suporta hoje as plataformas Android, iOS, Windows Phone 7, Bada, WebOS, BlackBerry e Symbian.
PhoneGap permite aos desenvolvedores criarem aplicações de acordo com as normas das lojas de aplicativos de forma extremamente rápida usando APIs de comunicação com os hardwares dos aparelhos, e se mantém através de doações de usuários e empresas e através de um serviço de build na nuvem, para que o desenvolvedor front-end mais preguiçoso da face da terra não precise nem mesmo saber compilar um projeto no Xcode ou Eclipse para que sua aplicação funcione.
A Prática
Nossa primeira prática com esse framework será sobre a plataforma Android. Em uma próxima oportunidade quero mostrar o poder de interoperabilidade da ferramenta, mas por ora estou com uma preguiça danada, ahusashausa. Faremos um simples Olá Mundo para Android usando HTML, CSS e Javascript de forma bem básica e amadora. Para começar, baixe a última versão do PhoneGap no site oficial: http://phonegap.com/
Extraia o conteúdo do download e verá que temos uma pasta de documentos com toda a documentação do PhoneGap em arquivos HTML e uma pasta de bibliotecas com uma biblioteca para cada plataforma. Sim isso mesmo, não existe mágica. Para cada plataforma existe uma versão diferente do framework. Mas não se assuste, salvo se usar recursos de hardware específicos de uma plataforma, um mesmo site desenvolvido por você irá funcionar em qualquer um desses frameworks. O processo de instalação das bibliotecas muda conforme o framework, aqui demonstrarei como configurar o Eclipse/MotoDev para utilizar a biblioteca Android.
Eu recomendo o MotoDevAndroid Studio para desenvolvimento Android por diversas razões que não cabem ser explicadas aqui novamente. Se quer saber os motivos e/ou não sabe como baixar/configurar o dito-cujo, sugiro ler este meu guia curto e objetivo sobre o assunto. Como este post é antigo, nele eu estava usando o MotoDev, que nada mais é do que o Eclipse para Android.
Abra o MotoDev e crie um novo Android Project. Dê o nome de OlaMundo a ele, defina a versão do Android como 2.2 (a mais comum atualmente) e certifique-se de que ele é o único projeto aberto em seu Package Explorer. Caso tenha algum outro projeto aberto, feche-o para evitar conflitos posteriores que impedem a compilação correta da aplicação.
Na raiz de seu projeto você terá de criar uma pasta libs. Dentro da pasta assets você terá de criar uma pasta www. E por fim, dentro da pasta res você terá de criar uma pasta xml. Com estas pastas criadas, vamos ao segundo passo: vá na pasta do PhoneGap, dentro da lib do Android e copie o arquivo com extensão .js pra dentro da pasta assets/www do seu projeto. Aproveite que está com a pasta do phoneGap aberta e copie o conteúdo da pasta xml para dentro da pasta res/xml do seu projeto. E por fim, copie o arquivo .jar da pasta do phoneGap pra dentro da pasta libs do seu projeto. Qualquer um que já tenha hospedado algum site algum dia sabe para qeu serve a pasta www dentro de um container web, e aqui a função dela é exatamente a mesma: qualquer arquivo colocaod nesta pasta será interpretado pelo Apache Cordova como um site, mas rodará nos dispositivos como se fosse uma aplicação nativa. Seu PackageExplorer deve se parecer com a imagem ao lado.
Ainda temos algumas coisas pra ajustar antes de poder sair rodando nossa aplicação web. Temos de dizer ao Android Project que ele tem uma nova dependência além do tradicional arquivo jar do Android. Para fazer isso, clique com o botão direito sobre a pasta lib e vá em Build Path > Configure Build Path. Vá na aba Libraries e clique em “Add Jars”, navegue até a pasta lib e marque o .jar que veio com o phonegap. Isto permitirá a adição das bibliotecas Java que integram o Apache Cordova ao Android, então o nosso próximo passo é criar nossa aplicação propriamente dira, que desta vez, não é feita com Activities.
Vá na sua Activity principal do projeto, geralmente MainActivity, e troque o conteúdo do arquivo pelo seguinte código:
|
1 2 3 4 5 6 7 8 9 10 |
import android.os.Bundle; import org.apache.cordova.*; public class MainActivity extends DroidGap { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index.html"); } } |
Note que este trecho de código irá carregar o seu index.html, isso se você tiver um é claro. Vou deixar aqui a cargo de sua criatividade. Imagine que a www é a pasta FTP do seu provedor de hospedagem e que ele somente suporta HTML + CSS + JS, nada de linguagens server side. Crie um index.html e coloque dentro de assets/www para que a app funcione. Calma, que ela ainda não está funcionando, ainda temos um último ajuste a fazer, desta vez no AndroidManifest.xml para fornecer ao PhoneGap algumas permissões. No seu AndroidManifest.xml, inclua o seguinte código entre as tags <uses-sdk …/> e <application…/>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.BROADCAST_STICKY" /> |
e além disso, inclua o seguinte código dentro da tag <activity>:
|
1 |
android:configChanges="orientation|keyboardHidden" |
Testando
Após toda essa parafernália de configuração, finalmente podemos testar nossa aplicação usando o simulador do Android disponível através do MotoDev. O funcionamento de uma aplicação construída com PhoneGap é o mesmo de qualquer outro framework e isto você perceberá na primeira execução. No final deste post incluí o código fonte do projeto que possui um exemplo simples de CSS, de HTML e um botão que dispara um alert Javascript, que psmem, exibe um Toast tradicional do Android (espécie de MessageBox tosca). Tendo essas possibilidades em mente, imagine o que você pode fazer com um JQuery Mobile ou coisas do gênero e talvez um web-service em um servidor remoto fornecendo conteúdo dinâmico à app!
Conclusões
E o que acontece com os frameworks multiplataforma como Corona e Marmalade?
Bom, na minha humilde opinião, desenvolver games com um desses frameworks de scripting ainda é muito mais fácil do que usando HTML e JS.
Ainda assim, muitas empresas, como o banco Bradesco, optaram por soluções como PhoneGap para desenvolvimento de suas aplicações, trazendo aos usuários uma experiência muito semelhante à vivenciada nos Internet Bankings por aí.
Resumindo, PhoneGap é uma excelente alternativa para desenvolvimento de aplicações multi-plataforma que não terão o look-and-feel nativo das plataformas, mas que se assemelharão a páginas web tradicionais. também é uma ótima pedida aos desenvolvedores web tradicionais, inclusive que podem usar o DreamWeaver como IDE para o desenvolvimento Android com PhoneGp.
Em posts futuros espero cobrir o uso de PhoneGap para uso de recursos de hardware dos celulares e também o uso de phonegap para desenvolvimento de apps para iPhone. Afinal, nem só de Android vive o mundo mobile. Até a próxima!
Olá, tudo bem?
O que você achou deste conteúdo? Conte nos comentários.