80
Aplicaciones multiplataforma con PhoneGap y jQuery Mobile Adrián Catalán adriancatalan@elementalg eeks.com @ykro

Devfest Lima2012

  • Upload
    ykro

  • View
    1.239

  • Download
    1

Embed Size (px)

DESCRIPTION

https://github.com/ykro/devfestlima2012-phonegap

Citation preview

Page 1: Devfest Lima2012

Aplicaciones multiplataforma con

PhoneGap y jQuery MobileAdrián Catalán

[email protected]@ykro

Page 2: Devfest Lima2012

¿qué necesitamos?

Page 3: Devfest Lima2012

Código en https://github.com/ykro/devfestlima20

12-phonegap

Page 4: Devfest Lima2012
Page 5: Devfest Lima2012

• 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

Page 6: Devfest Lima2012

• PhoneGap–http://phonegap.com/download

Page 7: Devfest Lima2012

Creamos un nuevo proyecto de Android

dentro de Eclipse

Page 8: Devfest Lima2012
Page 9: Devfest Lima2012

Podemos agregar un ícono personalizado y editarlo con algunas

opciones

Page 10: Devfest Lima2012
Page 11: Devfest Lima2012

Creamos una actividad nueva y

dependiendo de la versión puede ser

más complejo

Page 12: Devfest Lima2012
Page 13: Devfest Lima2012

Colocamos los valores deseados

para los datos de la actividad y el layout

Page 14: Devfest Lima2012
Page 15: Devfest Lima2012

Dentro de la estructura del

proyecto deben existir 2 carpetas

Page 16: Devfest Lima2012

/assets/www/libs

Page 17: Devfest Lima2012

Si no existe alguna de ellas es

necesario crearla

Page 18: Devfest Lima2012
Page 19: Devfest Lima2012
Page 20: Devfest Lima2012
Page 21: Devfest Lima2012

De la carpeta descargada de

Cordova buscamos la carpeta

/lib/android

Page 22: Devfest Lima2012

Copiamos el archio cordova-2.1.0.js a /assets/www

Page 23: Devfest Lima2012
Page 24: Devfest Lima2012

Repetir el proceso para el archivo

cordova-2.1.0.jar a /libs

Page 25: Devfest Lima2012
Page 26: Devfest Lima2012

Y también para la carpeta /xml con

destino a /res dentro del proyecto

Page 27: Devfest Lima2012
Page 28: Devfest Lima2012

Es necesario modificar el archivo

de la actividad dentro de la carpeta /src

Page 29: Devfest Lima2012
Page 30: Devfest Lima2012

En vez de heredar de Activity se hará

de DroidGap (requiere import)

Page 31: Devfest Lima2012

ReemplazarsetContentView(R.layo

ut.main);

por super.loadUrl("file:///android_asset/www/i

ndex.html");

Page 32: Devfest Lima2012
Page 33: Devfest Lima2012

Si Eclipse muestra algún error de referencias es

necesario limpiar el proyecto

Page 34: Devfest Lima2012
Page 35: Devfest Lima2012

Si el error permanece agregar

la librería (.jar) al Build Path

Page 36: Devfest Lima2012

Click derecho en el proyecto y luego “Configure Build

Path”

Page 37: Devfest Lima2012
Page 38: Devfest Lima2012

De la pantalla de configuración

tomar la opción “Add JARs”

Page 39: Devfest Lima2012
Page 40: Devfest Lima2012

Y luego elegir el JAR de Cordova

Page 41: Devfest Lima2012
Page 42: Devfest Lima2012
Page 43: Devfest Lima2012

Luego editar el archivo

AndroidManifest.xml

Page 44: Devfest Lima2012

Haga click derecho sobre el archivo, seleccione “Open

With” y luego “Text Editor”

Page 45: Devfest Lima2012
Page 46: Devfest Lima2012
Page 47: Devfest Lima2012

En la parte que dice <!-- agregar permisos -->

agregar el siguiente contenido

Page 48: Devfest Lima2012
Page 49: Devfest Lima2012

En el mismo archivo modificar la actividad creada y agregue una nueva actividad como

se indica a continuación

Page 50: Devfest Lima2012
Page 51: Devfest Lima2012

En la carpeta /assets/www agregar

un archivo nuevo llamado index.html y colocar contenido de

prueba

Page 52: Devfest Lima2012
Page 53: Devfest Lima2012
Page 54: Devfest Lima2012

<html><body>

<h1>Hello World</h1></body></html>

Page 55: Devfest Lima2012

Ejecutar y ver el resultado en el

emulador

Page 56: Devfest Lima2012
Page 57: Devfest Lima2012
Page 58: Devfest Lima2012

Usando el API de Instagram

http://instagram.com/developer/

Page 59: Devfest Lima2012
Page 60: Devfest Lima2012
Page 61: Devfest Lima2012

Usando jQuery mobile y mapas

http://code.google.com/p/jquery-ui-map/

Page 62: Devfest Lima2012
Page 63: Devfest Lima2012
Page 64: Devfest Lima2012
Page 65: Devfest Lima2012
Page 66: Devfest Lima2012
Page 67: Devfest Lima2012
Page 68: Devfest Lima2012
Page 69: Devfest Lima2012
Page 70: Devfest Lima2012
Page 71: Devfest Lima2012
Page 72: Devfest Lima2012
Page 73: Devfest Lima2012
Page 74: Devfest Lima2012
Page 75: Devfest Lima2012
Page 76: Devfest Lima2012
Page 77: Devfest Lima2012
Page 78: Devfest Lima2012

Código en https://github.com/ykro/devfestlima20

12-phonegap

Page 79: Devfest Lima2012

¿preguntas?

Page 80: Devfest Lima2012

Aplicaciones multiplataforma con

PhoneGap y jQuery MobileAdrián Catalán

[email protected]@ykro