PhoneGap – Revista Mobile Parte 3

Veja:
Revista Mobile parte 1
Revista Mobile parte 2
OBS: O APK gerado por esse post pode ser baixado aqui, As fotos ficaram grandes, irei arrumar assim que possível, como elas estão no meu servidor na internet, não será necessário pegar um novo APK.

Estou acompanhando meu blog e vi que muitas pessoas acessam o projeto mobile, irei fazer o último passo. Para instalar o HTML criado nos passos anteriores, iremos usar o PHONEGAP. O que seria isso? É uma idéia que eu gosto muito, você consegue rodar páginas em html5+css dentro de um pacote no formato nativo em várias plataformas como: IOS, Android, black berry, etc.. Sem contar que ele adiciona novas funcionalidades no javascript como usar acelerômetro, tirar fotos, vibrar, etc..

O objetivo desse último tutorial é justamente colocar a página, que acessa os serviços, dentro de um aplicativo no celular, usando somente a internet para pegar dados dos produtos ou imagens.

Pré-requisitos para a Parte 3:
1) Instalar java 1.7
2) Instalar eclipse
3) Instalar SDK Android
4) Download do phonegap (Para os passos 2,3 e 4) Os Arquivos se encontram na pasta Android

CONFIGURAÇÃO

Considerando que seu ambiente Android está correto e que tenha criado um projeto vazio, vamos seguir os seguintes passos:

1) No Diretório ROOT, do projeto, crie 2 novos diretórios (Clica com segundo botão no projeto -> new -> folder):
/libs
/assets/www

2) Copiar o arquivo phonegap.js para a pasta /assets/www

3) Copiar o phonegap.jar para a pasta /libs , adicione no class path, clicando com segundo botão em cima do jar -> Build path -> add to Build Path

4) Copiar o a pasta Xml, dentro do zip do download anterior, para a pasta /res

5) Na classe principal criada pelo projeto, coloque o import com.phonegap.*; a classe, que estende o Activity, para estender DroidGap.

6) Setar o view para a página html que deseja

super.loadUrl("file:///android_asset/www/index.html");

Passo 5 e 6 ficam assim:

package br.byiorio.revistamobile;

import android.os.Bundle;
import com.phonegap.DroidGap;


public class RevistaMobileActivity extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.clearCache();
        super.loadUrl("file:///android_asset/www/index.html");
        //setContentView(R.layout.main);
    }
}

7) Copiar todo o conteúdo byiorio, mobile+jquery, na pasta /assets/www.

8 ) Existem permissões que devem ser colocadas no xml AndroidManifest.xml do seu projeto, nem todas são necessárias, o correto é verificar qual tipo de aplicação vai desenvolver e colocar somente as necessárias. Em nosso caso usaremos o ACCESS_NETWORK_STATE, mas pode deixar todas para testar.

<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<uses-permission android:name="android.permission.CAMERA" />
<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" />

9) Colocar no AndroidManifest.xml com mais uma opção do seu activity principal

android:configChanges="orientation|keyboardHidden"

10) Colocar no AndroidManifest.xml abaixo do seu activity

<activity android:name="com.phonegap.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> <intent-filter> </intent-filter> </activity>

Passo 8 9 e 10 ficam assim:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.byiorio.revistamobile"
    android:versionCode="1"
    android:versionName="1.0" >

      <uses-sdk android:minSdkVersion="7"/>

    <supports-screens
        android:anyDensity="true"
        android:largeScreens="true"
        android:normalScreens="true"
        android:resizeable="true"
        android:smallScreens="true" />

    <uses-permission android:name="android.permission.CAMERA" />
    <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" />

    <application
        android:icon="@drawable/icon"
        android:label="@string/app_name" >
        <activity
            android:name=".RevistaMobileActivity"
            android:label="@string/app_name" 
             android:configChanges="orientation|keyboardHidden">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        
        <activity
            android:name="com.phonegap.DroidGap"
            android:configChanges="orientation|keyboardHidden"
            android:label="@string/app_name" >
            <intent-filter>
            </intent-filter>
        </activity>
    </application>

</manifest>

11) Verifique o passo a passo nas fotos e o resultado final.

Alterações no Projeto após o phonegap:

Agora com phonegap, posso adicionar novos scripts:

1) Coloquei uma função para chamar meu script somente quando o celular estiver pronto:

           //adiciona evento quando
	    document.addEventListener("deviceready", onDeviceReady, false);

            //Quando o aparelho estiver pronto, roda meus scripts    
	    function onDeviceReady() {
	       //Meus scripts
	    }

2) Consigo checar se o celular tem conexão com a internet com o seguinte comando javascript.

	    function checkConnection() {
	        var networkState = navigator.network.connection.type;

	        var states = {};
	        states[Connection.UNKNOWN]  = 'Unknown connection';
	        states[Connection.ETHERNET] = 'Ethernet connection';
	        states[Connection.WIFI]     = 'WiFi connection';
	        states[Connection.CELL_2G]  = 'Cell 2G connection';
	        states[Connection.CELL_3G]  = 'Cell 3G connection';
	        states[Connection.CELL_4G]  = 'Cell 4G connection';
	        states[Connection.NONE]     = 'No network connection';
	       // alert('Connection type: ' + states[networkState]);
	        
	        return !(networkState == Connection.UNKNOWN || networkState == Connection.NONE);
	    }

Tendo conexão irei usar o jquery para acessar meu serviço na internet e recolher as informações, e mostrar a revista no celular.

6 comentários em “PhoneGap – Revista Mobile Parte 3

  • 3 de março de 2012 em 11:11
    Permalink

    Faltou o comando super.clearCache(); na classe

    Resposta
  • 3 de março de 2012 em 19:10
    Permalink

    Rodou blz o apk no meu android !

    Resposta
  • 3 de outubro de 2014 em 14:22
    Permalink

    RODA SIM, no meu tablet GT-N8000 SANSUNG RODOU SEM PROBLEMAS.
    Só faltou para o tuto ficar completo, por dois botões, tipo MAIS INFO e COMPRAR.

    Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Blue Captcha Image
Atualizar

*

Facebook

Get the Facebook Likebox Slider Pro for WordPress
WordPress SEO fine-tune by Meta SEO Pack from Poradnik Webmastera