Avenida de Castilla,1 - Edificio Best Point - Oficina 21B28830 San Fernando de Henares (Madrid)

tel./fax: +34 91 675 33 06info@autentia.com - www.autentia.com

Somos su empresa de Soporte a Desarrollo Informático.Ese apoyo que siempre quiso tener...

1. Desarrollo de componentes y proyectos a medida

TecnologíaDesarrolloSistemas

Gran Empresa

Producción

autentia

Certificacióno Pruebas

Verificación previa

RFP Concurso

Consultora 1

Consultora 2

Consultora 3

Equipo propio desarrolloPiloto

3a

3b

1. Definición de frameworks corporativos.2. Transferencia de conocimiento de nuevas arquitecturas.3. Soporte al arranque de proyectos.4. Auditoría preventiva periódica de calidad.5. Revisión previa a la certificación de proyectos.6. Extensión de capacidad de equipos de calidad.7. Identificación de problemas en producción.

3. Arranque de proyectos basados en nuevas tecnologías

¿Qué ofrece Autentia Real Business Solutions S.L?

Para más información visítenos en: www.autentia.com

Compartimos nuestro conociemiento en: www.adictosaltrabajo.com

Gestor portales (Liferay)Gestor de contenidos (Alfresco)Aplicaciones híbridas

Tareas programadas (Quartz)Gestor documental (Alfresco)Inversión de control (Spring)

BPM (jBPM o Bonita)Generación de informes (JasperReport)ESB (Open ESB)

Control de autenticación y acceso (Spring Security)UDDIWeb ServicesRest ServicesSocial SSOSSO (Cas)

Spring MVC, JSF-PrimeFaces /RichFaces, HTML5, CSS3, JavaScript-jQuery

JPA-Hibernate, MyBatisMotor de búsqueda empresarial (Solr)ETL (Talend)

Dirección de Proyectos Informáticos.Metodologías ágilesPatrones de diseñoTDD

2. Auditoría de código y recomendaciones de mejora

4. Cursos de formación (impartidos por desarrolladores en activo)

1/13/14 Empezando con PhoneGap

www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=EmpezandoPhoneGap 1/4

Entra en Adictos a través de

Entrar

E-­mail

Contraseña

Deseo registrarmeOlvidé mi contraseña

Inicio Quiénes somos Formación Comparador de salarios Nuestros libros Más

» Estás en: Inicio Tutoriales Empezando con PhoneGap

Síguenos a través de:

Catálogo de servicios

Autentia

Últimas Noticias

» IX Autentia Cycling Day(ACTUALIZADO)

» Autentia en la carrera delas empresas

» Spring 4.0 ¿qué hay denuevo amigo?

» Torneo de pádel solidarioAMEB

» Próxima charla: Gradlecomo alternativa a Mavenpara la construcción deproyectos en Java

Histórico de noticias

Últimos Tutoriales

» SOA vs. SOAP y REST

» Mi primera vista en ZKcomo desarrollador JSF (I).

» Transicionespersonalizadas en iOS7

» Spring BeanPostProcessor

» Cómo montar un raid1 enuna máquina corriendodebian.

Ver todos los tutoriales del autor

Rubén Aguilera Díaz-­Heredero

Consultor tecnológico de desarrollo de proyectos informáticos.

Ingeniero en Informática, especialidad en Ingeniería del Software

Puedes encontrarme en Autentia: Ofrecemos servicios de soporte a desarrollo,factoría y formación

Somos expertos en Java/J2EE

Fecha de publicación del tutorial: 2014-­01-­13 Tutorial visitado 1 veces Descargar en PDF

Empezando con PhoneGap

0. Índice de contenidos.

1. Entorno2. Introducción3. Instalando PhoneGap4. Creando nuestro primer proyecto PhoneGap5. Conclusiones

1. Entorno

Este tutorial está escrito usando el siguiente entorno:

Hardware: Portátil Mac Book Pro 17" (2,6 Ghz Intel Core i7, 8 GB DDR3)Sistema Operativo: Mac OS X Snow Leopard 10.6.4PhoneGap 3.3.0-­0.18.0NodeJS 0.10.24

2. Introducción

Cuando desarrollamos una aplicación móvil nuestro objetivo es que se pueda ejecutar en la mayor cantidad dedispositivos, pero nos encontramos con el problema de que algunos son Android, otros son IOS, otros FirefoxOS, ... ycada una de estas plataformas cuenta con distintos entornos y lenguajes de desarrollo. Lo que supone que nuestrodesarrollo se multiple por las n plataformas en las que queremos que esté disponible, lo que lo hace prácticamenteinviable.

En el caso de que nuestra aplicación no requiera de ningún servicio nativo del dispositivo (acceso a la cámara, loscontactos, el acelerómetro, ...) simplemente podremos desarrollar una aplicación web "responsive" que se ajuste altamaño de pantalla del dispositivo.

Si estamos en el caso de que nuestra aplicación tiene que acceder a alguno de estos servicios nativos, forzosamentetendrá que ser dentro del marco de una aplicación nativa. Con lo que nos encontramos con el problema de las distintasplataformas.

PhoneGap llega para solucionar este problema. Básicamente lo que nos ofrece es poder desarrollar nuestra aplicaciónen HTML5, CSS y Javascript y poder ejecutarla de forma nativa en las distintas plataformas;; ofreciendo un único APIJavascript para acceder a los servicios nativos.

De esta forma, por ejemplo, si nuestra aplicación necesita acceder a la cámara del dispositivo, solo tenemos que crearuna página HTML5 que haciendo una llamada Javascript nos permita hacer uso de la cámara de cualquier dispositivoindependientemente de su plataforma. Con lo que conseguimos ejecutar nuestra aplicación en todas las plataformas delmercado teniendo solo conocimientos de HTML5, CSS3 y Javascript. No tenemos que aprender Java, ni Objective-­C, niningún otro lenguaje;; reduciendo drásticamente el tiempo y por tanto el coste de desarrollo.

Inicialmente PhoneGap fue desarrollado por la empresa Nitobi pero tras la adquisición de ésta por parte de Adobe todoel proyecto se traslado a la Apache Software Foundation con el nombre de Apache Cordova, convirtiéndose PhoneGapen una distribución de Apache Cordova totalmente libre para su uso comercial.

3. Instalando PhoneGap

Empezar con PhoneGap se ha hecho mucho más fácil gracias a la incorporación de su CLI (Command Line Interface)basado en NodeJS.

Por tanto lo primero que tenemos que asegurarnos es que tenemos instalado en nuestra máquina de desarrollo NodeJS;;si no es así basta con ir a la página http://nodejs.org , pulsar en el botón "Install" y seguir los pasos de instalacióndependiendo del sistema operativo de nuestra máquina de desarrollo. Esto nos registrará automáticamente el npm(Node Packaged Modules) que nos permitirá la instalación de nuevos módulos entre ellos PhoneGap.

Cumplido el anterior paso lo único que tenemos que hacer es ejecutar esta sentencia en un terminal:

1/13/14 Empezando con PhoneGap

www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=EmpezandoPhoneGap 2/4

Últimos Tutoriales del

Autor

» Hello World en IOS sinStoryBoard

» Ejecutando MyBatis contradistintas bases de datos

» Gestionando relaciones enMyBatis

» Introducción a XQuery conejemplos

» Crear una rutina propia enTalend

Últimas ofertas de

empleo

2011-­09-­08Comercial -­ Ventas -­MADRID.

2011-­09-­03Comercial -­ Ventas -­VALENCIA.

2011-­08-­19Comercial -­ Compras -­ALICANTE.

2011-­07-­12Otras Sin catalogar -­MADRID.

2011-­07-­06Otras Sin catalogar -­LUGO.

view plain print ?

01. sudo npm install -­g phonegap

Esta ejecución nos instala el comando "cordova" necesario para empezar a utilizar PhoneGap.

4. Creando nuestro primer proyecto PhoneGap

La creación del proyecto es completamente independiente de cualquiera de las plataformas en las que vaya a ejecutarsela aplicación.

Para la creación vamos a abrir un terminal, nos vamos a posicionar en el directorio donde queramos tener nuestroproyecto y vamos a ejecutar:

view plain print ?

01. cordova create <path> [ID] [NAME] </path>

El campo PATH es obligatorio y los campos ID y NAME son opcionales, aunque es recomendable que se pongan dadoque si no se hace nos pondrá unos por defecto, con el nombre de HelloCordova;; que para proyectos "reales" no es lomás recomendable. ;;-­)

Por ejemplo:

view plain print ?

01. cordova create HolaMundo com.autentia.holamundo HolaMundo

Con este comando PhoneGap nos crea una carpeta con el nombre del proyecto (HolaMundo) donde encontramos eldirectorio www con los recursos web de nuestra aplicación: una home de ejemplo, css, js e imágenes, estos son losficheros que compondrán nuestra aplicación. Además del fichero config.xml que contiene información importante de laconfiguración y distribución de la aplicación.

Ahora vamos a añadir las plataformas en las que queremos que se pueda ejecutar nuestra aplicación. PhoneGap tienesoporte para Android, IOS, Blackberry, Windows Phone, Tizen, Amazon Fire OS. Para este ejemplo vamos a utilizar lasplataformas Android e IOS.

Antes de nada tenemos que asegurarnos de tener en nuestra máquina de desarrollo todo lo necesario para trabajar conAndroid e IOS. En el caso de IOS necesitamos que nuestra máquina de desarrollo sea un Mac y tener instalado lasúltimas versiones del SDK y el XCode. Para el caso de Android también necesitamos tener instalada la última versión delSDK y comprobar que todas las herramientas están definidas en el path del sistema. Es decir, que tenemos declarada lavariable de entorno PATH al menos de esta forma:

view plain print ?

01. export PATH=$ANDROID_SDK_HOME/tools:$ANDROID_SDK_HOME/platform-­tools:$PATH

Hecho esto podemos ejecutar en el terminal:

view plain print ?

01. cordova platform add ios android

Con este comando lo primero que hará PhoneGap será comprobar que se cumplen las condiciones antes especificadasde Android e IOS;; si no es así nos informará del error. Si es así nos montará dentro de nuestro proyecto los proyectosnativos de cada una de las plataformas especificadas. En nuestro caso nos creará un proyecto Android y otro IOS quepodremos abrir con el Android Studio y el XCode respectivamente.

Ahora construimos el proyecto para cada una de las plataformas con el comando:

view plain print ?

01. cordova build

Este comando hará que PhoneGap construya el proyecto para las dos plataformas anteriormente añadidas, en el casode querer solo Android, por ejemplo, acompañamos al comando con el nombre de la plataforma. Realiza una copia denuestra carpeta de recursos a cada uno de los proyectos, de tal forma que nosotros solo modificamos el código en unpunto del proyecto y PhoneGap se encarga de actualizar el proyecto de cada una de las plataformas.

view plain print ?

01. cordova build android

Ahora para visualizar nuestro proyecto en las distintas plataformas con el código que PhoneGap crea por defecto,bastará con ejecutar:

view plain print ?

01. cordova emulate

Este comando ejecuta los emuladores de las plataformas dadas de alta en el proyecto: IOS y android. Pero por temas derendimiento no aconsejo ejecutarlos a la vez. Para ejecutar cada uno de ellos, haríamos:

view plain print ?

01. cordova emulate android 02. cordova emulate ios

Con lo que desplegamos la aplicación que viene de ejemplo en los distintos emuladores como se puede apreciar en lasimágenes:

1/13/14 Empezando con PhoneGap

www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=EmpezandoPhoneGap 3/4

Esta obra está licenciada bajo licencia Creative Commons de Reconocimiento-­No comercial-­Sin obras derivadas 2.5

PUSH THIS Page Pushers Community Help?

----no clicks + + + + + + + +

0 people brought clicks to this page

powered by karmacracy

» Registrate y accede a esta y otras ventajas «

Anímate y coméntanos lo que pienses sobre este TUTORIAL:

5. Conclusiones

En este tutorial hemos visto lo rápido y fácil que es empezar a trabajar con PhoneGap gracias al CLI implementado enNodeJS. En siguiente tutorial de este tema desarrollaremos una aplicación que acceda a la cámara del dispositivo.

Cualquier duda o sugerencia en la zona de comentarios.

Saludos.

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |

Copyright 2003-­2014 © All Rights Reserved | Texto legal y condiciones de uso | Banners | Powered by Autentia | Contacto

1/13/14 Empezando con PhoneGap

www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=EmpezandoPhoneGap 4/4