jueves, 20 de septiembre de 2012

Hola Mundo con Phonegap, parte 2


Vamos a crear nuestra primera aplicación con Phonegap para Android.
La primera parte es crear nuestro proyecto vacío y todas las dependencias necesarias
  1. Crear un proyecto Android normal y corriente desde el Wizard de Eclipse
  2. Añadir dos nuevos directorios al proyecto:
    • /libs
    • assets/www
  3. Copiar cordova-1.8.0.js al directorio assets/www (desde el directorio donde instalamos el SDK de Phonegap)
  4. Copiar cordova-1.8.0.jar al directorio libs (desde el directorio donde instalamos el SDK de Phonegap)
  5. Actualizar el proyecto en Eclipse para que reconstruya el Build Path e incluya la nueva librería que hemos copiado
Con ésto ya tendremos todo configurado para desarrollar nuestra aplicación usando el SDK de Phonegap. Ahora vamos a cambiar el contenido de nuestra primera actividad por una web gracias a Phonegap:
  1. Editar la actividad que haya creado el wizard de Eclipse de ésta forma:
    1. Añadir import org.apache.cordova.*; a los import
    2. Cambiar la clase de la que hereda la atividad de Activity a DroidGap
    3. Reemplazar setContentView() por super.loadUrl(“file:///android_asset/www/index.html”);
    Quedará de ésta forma:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    package com.seroton.phonegap.statuslist;
     
    import android.app.Activity;
    import android.os.Bundle;
    import org.apache.cordova.*;
     
    public class statusListPhoneGapActivity extends DroidGap
    {
        @Override
        public void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            super.loadUrl("file:///android_asset/www/index.html");
        }
    }
  2. Editar AndroidManifest.xml y añadir éstos dos cambios:
    1. Añadir lo siguiente:
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      <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" />
    2. Hacer que la actividad soporte el cambio de orientación añadiendo:
      1
      android:configChanges="orientation|keyboardHidden|screenSize"
  3. Crear el archivo index.html en el directorio assets/www:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Cordova</title>
    <script type="text/javascript" charset="utf-8" src="cordova-1.8.0.js"></script>
    </head>
    <body>
    <h1>Hello World</h1>
    </body>
    </html>
    4. Crear el archivo res/xml/plugins.xmlcon éste contenido:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <?xml version="1.0" encoding="utf-8"?>
    <plugins>
        <plugin name="App" value="org.apache.cordova.App"/>
        <plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/>
        <plugin name="Device" value="org.apache.cordova.Device"/>
        <plugin name="Accelerometer" value="org.apache.cordova.AccelListener"/>
        <plugin name="Compass" value="org.apache.cordova.CompassListener"/>
        <plugin name="Media" value="org.apache.cordova.AudioHandler"/>
        <plugin name="Camera" value="org.apache.cordova.CameraLauncher"/>
        <plugin name="Contacts" value="org.apache.cordova.ContactManager"/>
        <plugin name="File" value="org.apache.cordova.FileUtils"/>
        <plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager"/>
        <plugin name="Notification" value="org.apache.cordova.Notification"/>
        <plugin name="Storage" value="org.apache.cordova.Storage"/>
        <plugin name="Temperature" value="org.apache.cordova.TempListener"/>
        <plugin name="FileTransfer" value="org.apache.cordova.FileTransfer"/>
        <plugin name="Capture" value="org.apache.cordova.Capture"/>
        <plugin name="Battery" value="org.apache.cordova.BatteryListener"/>
        <plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>
    </plugins>
Ya podemos ejecutarlo en el emulador o en nuestro device conectado por USB y veremos corriendo nuestra primera aplicación Phonegap. Pronto desarrollaremos ejemplos más complejos.
¡Happy coding!

Publicado por en
Etiquetas: ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)