Comenzar con PhoneGap
Introducción.
PhoneGap en pocas palabras es un framework para el desarrollo de aplicaciones móviles que posibilita a los desarrolladores a que implementen sus proyectos utilizando las tecnologías estándar de web: HTML5, CSS3 y Javascript, y este las convierte a aplicaciones híbridas, es decir, aplicaciones nativas de las diferentes plataformas móviles existentes que tienen acceso a gran parte del API nativo.
Tomado de http://www.phonegap.com/
Esto lo logra empaquetando la aplicación web original con un navegador basado en webkit para desplegarla como si fuera una aplicación verdaderamente nativa.
Actualmente este framework soporta seis de las principales plataformas móviles del mercado: iOS, Android, Blackberry, PalmOS, Windows Mobile y Symbian. Para mas información acerca del estado actual del soporte en cada una de estas plataformas consultar las características soportadas.
Existen otros frameworks similares a este entre los que se destacan Appcelerator Titanium, Mobl y Sencha Touch de los cuales espero estar escribiendo mas adelante.
Ahora, veremos el proceso de instalación de PhoneGap, la creación de un proyecto base para el desarrollo con este framework y la elaboración de un ejemplo simple.
Instalar PhoneGap.
Descargar la última versión disponible del framework desde la siguiente ubicación.
Acá se utilizará la versión 0.9.5.1 que corresponde con la primera que yo usè, para esta fecha, año 2014 ya tenemos la version 2.9.1 super estable.
$ wget http://phonegap.googlecode.com/files/phonegap-0.9.5.1.zip
Se descomprime el paquete recién descargado y se mueve a su ubicación final.
$ unzip phonegap-0.9.5.1.zip
$ mkdir ~/phonegap
$ mv phonegap-0.9.5.1 ~/phonegap/0.9.5.1
Crear un proyecto Android
A continuación se relacionan los pasos que se deben realizar para crear un proyecto PhoneGap para Android utilizando Eclipse y el plugin ADT instalados anteriormente.
Iniciar Eclipse y crear un nuevo proyecto a través del menú File > New > Android Project.
Crear un nuevo proyecto Android
En el diálogo de información del proyecto a crearse especificar al menos los siguientes campos y presione el botónFinish para continuar.
- Nombre del proyecto (project name).
- API de Android a utilizarse (build target). En este caso se utilizará el API 2.2. Podes usar API 17 tranquilamente.
- Nombre de la aplicación (application name).
- Crear una actividad (create activity).
Información básica del proyecto Android
En el Explorador de Paquetes (package explorer) de Eclipse crear bajo el proyecto una carpeta /assets/www y otra/libs.
Copiar en la carpeta /assets/www el archivo phonegap.0.9.5.1.js y copiar en /libs el archivophonegap.0.9.5.1.jar. Ambos archivos se encuentran bajo el directorio ~/phonegap/0.9.5.1/Android creado durante el paso de instalación anterior.
Estructura del proyecto Android
Hacer clic derecho sobre el directorio /libs y seleccionar el menú Build Path > Configure Build Path… Allí en la pestaña Libraries agregue la referencia a /libs/phonegap.0.9.5.1.jar presionando el botón Add JARs…
Agregar al proyecto la referencia al JAR de PhoneGap.
Realizar las siguientes modificaciones al código fuente de la actividad. Este archivo se ubica bajo la carpeta /src del proyecto (/src/com.jimezam.phonegap.demo/App.java en este caso).
- Reemplazar la línea 3 (import android.app.Activity;) con la siguiente: import com.phonegap.*;
- En la línea 6 cambiar la superclase de App de Activity a DroidGap.
- Reemplazar la línea 11 (setContentView(R.layout.main);) con la siguiente:super.loadUrl(“file:///android_asset/www/index.html”);
- Modificaciones a la actividad inicial.
Hacer clic derecho sobre el archivo AndroidManifest.xml y seleccionar el menú Open With… > Text Editor. A este documento realizar las siguientes modificaciones.
1. Agregar el siguiente texto entre la apertura de la etiqueta <manifest> y la apertura de la etiqueta <application>.
<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” />
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” />
2. Agregar el siguiente atributo a la etiqueta <activity>.
android:configChanges=”orientation|keyboardHidden”
Modificaciones al documento AndroidManifest.xml.
Finalmente crear el archivo /assets/www/index.html con el código fuente para la demostración.
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap demostration with Android</title>
<script type=”text/javascript” charset=”utf-8″ src=”phonegap.js”></script>
</head>
<body>
<h1>Hello Android’s World with PhoneGap</h1>
</body>
</html>
<html>
<head>
<title>PhoneGap demostration with Android</title>
<script type=”text/javascript” charset=”utf-8″ src=”phonegap.js”></script>
</head>
<body>
<h1>Hello Android’s World with PhoneGap</h1>
</body>
</html>
Ejecutar el proyecto en el emulador.
Seleccionar el menú Run > Run As > Android Application.
Ejecutar como aplicación Android.
Estos son un par de ejemplos de aplicaciones web simples ejecutándose con PhoneGap en el emulador de Android.
Hola Mundo web con Android
| 
The Simple List 0.1
|
