terça-feira, 12 de junho de 2012

Tutorial - Parte 4 - Fazendo um Genius em PhoneGAP

Vamos instalar a nossa aplicação?
- Primeiro, baixe o PhoneGap: http://phonegap.com/download;
- Expanda o arquivo zip;

Para Android:
- Abra o Eclipse e crie um novo projeto Android (selecione a versão 2.2 do Android);
- Crie em seu projeto no Eclipse, as pastas libs e assets/www;
- Jogue na pasta libs o arquivo cordova-X.X.X.jar do diretorio /lib/android que esta dentro do zip;
- Jogue no pasta assets/www o arquivo cordova-X.X.X.js do  diretorio /lib/android que esta dentro do zip;
- Clique com o botão direito no projeto (Eclipse) e vá em Properties;


- Nos itens a esquerda, vá para o item "Java Build Path";
- Na aba "Libraries", adicione o arquivo cordova-X.X.X.jar da pasta libs (interno do projeto);
- Agora, abra o arquivo "AndroidManifest.xml" em um editor (pode ser no Eclipse mesmo) e adicione as seguintes linhas entre as tags "uses-sdk" e "application":

    <supports-screens
        android:anyDensity="true"
        android:largeScreens="true"
        android:normalScreens="true"
        android:resizeable="true"
        android:smallScreens="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 na tag "activity" adicione as seguintes propriedades (dentro da tag):

            android:screenOrientation="portrait"
            android:configChanges="orientation|keyboardHidden"

- Agora abra a classe <Nome_do_Projeto>Activity (deve ser a única na pasta src) e mude ela para extender de DroidGap e use o método loadUrl no onCreate de sua classe:

package org.toolbox.game.genius;

import org.apache.cordova.DroidGap;

import android.os.Bundle;

public class <Nome_do_Projeto>Activity extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
    }
}

- Crie ou coloque o arquivo html da aplicação que a gente criou (no caso, o nosso genius) na pasta assets/www e renomeie para index.html (caso este não se chame assim);
- Se você criou um javascript separado, coloque nesta pasta (se ele estiver em outra pasta, coloque ele dentro da mesma hierarquia, ou seja, coloque a pasta completa :) );
- Clique no menu "Window"-> "AVD Manager"


- Crie um emulador, clicando no botão "New" (se já não existir), coloque um nome para este "dispositivo" e escolha em "Target" o valor "Android 2.2 - API Level 8";
- Clique no botão "Create AVD";
- Selecione o projeto no "Package Explorer" e clique no item "Run"->"Run" do menu principal;
- Selecione o item "Android Application" e clique no botão "Ok";

Se der certo, ele abrirá o simulador (agora, você deve esperar um bom tempo...) e aparecerá esta tela:


Legal, não?
O próximo passo é instalar no iOS e, com isso, será o fim de nosso tutorial! :)


Nenhum comentário: