Aplicações multiplataformas com Adobe PhoneGap

O Adobe PhoneGap é um framework open-source da Apache (Apache Cordoba) que foi comprado pela Adobe. O objetivo dele é o desenvolvimento de aplicações multiplataformas (ex: Apple iOS, Google Android, HP webOS, Microsoft Windows Phone, Nokia Symbian OS and RIM BlackBerry, ...) utilizando HTML 5, CSS 3 e JavaScript. Ele permite acesso ao acelerômetro, câmera, bússola, contatos, arquivos e armazenamento, geolocalização, mídia, rede, notificações, ...

Nesse post, vamos criar um exemplo para a plataforma Android. O primeiro passo é fazer o download do Eclipse Classic e do PhoneGap. Se você já tem um eclipse configurado com o ADT e possui o SDK, ignore as próximas etapas e vá para o próximo parágrafo. Caso contrário, descompacte o eclipse e execute-o. Vá Help, Install New Software, clique em Add e especifique o Name: "ADT Plugin" e em Location, coloque: "https://dl-ssl.google.com/android/eclipse/". Clique em OK. Marque as opções e clique em Next, Next, concorde com os termos e Finish. Reinicie o eclipse e configure o ADT. Especifique um local para o plugin baixar o Android SDK, clique em Finish e aceitei os termos para instalar.

Descompate o PhoneGap. No Eclipse, vá em File, New, Android Application Project.

Informe os dados da aplicação e clique em Next. Configure os ícones da aplicação e clique em Next.

Crie uma Activity em Branco e clique em Next. Especifique o nome da Activity e do Layout e clique em Next. Se por acaso na próxima tela pedir para instalar alguma biblioteca, realize a instalação e clique em Finish.

No projeto criado, copie o arquivo cordova-XXX.jar (do PhoneGap baixando anteriormente, pasta: lib/android) para a pasta lib do seu projeto. Na pasta assets, crie uma pasta www e copie o arquivo cordova-XXX.js para essa pasta. Você deverá ter uma estrutura semelhante à essa:

Copie também o conteúdo da pasta xml do PhoneGap para a pasta res do seu projeto. Altere o conteúdo da sua activity principal (se você seguiu o padrão deverá ser o arquivo MainActivity.java) para o seguinte conteúdo.

package seupacote; // não precisa alterar essa linha no seu codigo

import org.apache.cordova.DroidGap;
import android.os.Bundle;

public class MainActivity extends DroidGap {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
    }

}

Edite o arquivo AndroidManifest.xml e logo após a abertura da tag manifest, insira o conteúdo da tag supports-screens, conforme o seguinte exemplo:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="seu pacote"
    android:versionCode="1"
    android:versionName="1.0" >
<supports-screens
        android:anyDensity="true"
        android:xlargeScreens="true"
        android:largeScreens="true"
        android:normalScreens="true"
        android:resizeable="true"
        android:smallScreens="true" />
<uses-permission android:name="android.permission.INTERNET" />
...

Se você observar no código acima, é necessário também colocar o uses-permission para INTERNET. Coloque, também, os valores de que precisa monitorar (configChanges) na Activity criada:

...
        <activity
            android:name=".MainActivity"
            android:label="@string/title_activity_main" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale">
...

Configurações feitas, agora é só criar sua aplicação HTML e executar. Crie um arquivo index.html dentro da pasta www e execute a aplicação. De PhoneGap aí não tem nada. Para criar algo que vale a pena, dê uma olhada nos exemplos aqui: http://docs.phonegap.com/en/2.0.0/

Você pode se perguntar, qual a diferença entre fazer a aplicação dessa forma, ou utilizar o PhoneGap. A grande vantagem de se utilizar o PhoneGap é que você terá uma biblioteca JavaScript para realizar operações nativas no aparelho, como obter acesso à Câmera, ou utilizar o GPS e o mesmo código JavaScript pode ser utilizado para criar aplicações em outros devices como aparelhos iOS. Para maiores informações sobre como realizar isso, acesse a API do PhoneGap (Apache Cordoba): http://docs.phonegap.com/en/2.0.0/

Share on Facebook

Tweet

Follow us