View
1.239
Download
1
Category
Preview:
DESCRIPTION
https://github.com/ykro/devfestlima2012-phonegap
Citation preview
Aplicaciones multiplataforma con
PhoneGap y jQuery MobileAdrián Catalán
adriancatalan@elementalgeeks.com@ykro
¿qué necesitamos?
Código en https://github.com/ykro/devfestlima20
12-phonegap
• Eclipse Classic 4.2.1–http://www.eclipse.org/
downloads/• Android SDK –http://developer.android.com/
sdk/installing/index.html• ADT Plugin–http://developer.android.com/
sdk/installing/installing-adt.html
• PhoneGap–http://phonegap.com/download
Creamos un nuevo proyecto de Android
dentro de Eclipse
Podemos agregar un ícono personalizado y editarlo con algunas
opciones
Creamos una actividad nueva y
dependiendo de la versión puede ser
más complejo
Colocamos los valores deseados
para los datos de la actividad y el layout
Dentro de la estructura del
proyecto deben existir 2 carpetas
/assets/www/libs
Si no existe alguna de ellas es
necesario crearla
De la carpeta descargada de
Cordova buscamos la carpeta
/lib/android
Copiamos el archio cordova-2.1.0.js a /assets/www
Repetir el proceso para el archivo
cordova-2.1.0.jar a /libs
Y también para la carpeta /xml con
destino a /res dentro del proyecto
Es necesario modificar el archivo
de la actividad dentro de la carpeta /src
En vez de heredar de Activity se hará
de DroidGap (requiere import)
ReemplazarsetContentView(R.layo
ut.main);
por super.loadUrl("file:///android_asset/www/i
ndex.html");
Si Eclipse muestra algún error de referencias es
necesario limpiar el proyecto
Si el error permanece agregar
la librería (.jar) al Build Path
Click derecho en el proyecto y luego “Configure Build
Path”
De la pantalla de configuración
tomar la opción “Add JARs”
Y luego elegir el JAR de Cordova
Luego editar el archivo
AndroidManifest.xml
Haga click derecho sobre el archivo, seleccione “Open
With” y luego “Text Editor”
En la parte que dice <!-- agregar permisos -->
agregar el siguiente contenido
En el mismo archivo modificar la actividad creada y agregue una nueva actividad como
se indica a continuación
En la carpeta /assets/www agregar
un archivo nuevo llamado index.html y colocar contenido de
prueba
<html><body>
<h1>Hello World</h1></body></html>
Ejecutar y ver el resultado en el
emulador
Usando el API de Instagram
http://instagram.com/developer/
Usando jQuery mobile y mapas
http://code.google.com/p/jquery-ui-map/
Código en https://github.com/ykro/devfestlima20
12-phonegap
¿preguntas?
Aplicaciones multiplataforma con
PhoneGap y jQuery MobileAdrián Catalán
adriancatalan@elementalgeeks.com@ykro
Recommended