Iniciamos la sección de desarrollo móvil con nuestra primera aplicación con Phonegap, para ello vamos a explicar desde la instalación de las herramientas necesarias hasta la ejecución en el móvil, entonces manos a la obra.

Qué es Phonegap

Phonegap es un Framework para desarrollar aplicaciones móviles utilizando el estándar de la web (HTML5, CSS3 y JavaScript), implemente un núcleo que permite reconocer los sensores y características que presentan los dispositivos móviles como son la cámara, acelerometro, GPS, etc., y para interactuar con su API se utiliza JavaScript.

Instalación de Phonegap Desktop

Debemos descargar e intalar el programa Phonegap Desktop desde la página web de Phonegap, descargamos la versión para Windows, salvo que tengas otro sistema operativo. Un vez culminado la descarga procedemos con su instalación, la misma que es muy sencilla sólo seguimos el asistente hatsa culminar el proceso.

Una vez instalado ejecutamos la aplicación Phonegap Desktop que lo tenemos en el conjunto de aplicaciones instaladas de nuestro sistema, y debemos tener la siguiente pantalla:

phonegap-app-desktop

Creando el proyecto Phonegap

Para empezar a trabajar con este Framework, vamos a crear nuestro primer proyecto. En la aplicación hacemos click en el botón +, o en todo caso hacemos click en el menú File, y seleccionamos Create New Project, ingresamos los datros del proyecto como la carpeta en donde se va guardar, el nombre, y el id o espacio de nombre para el proyecto.

phonegap-app-proyecto

Al dar click en el botón Create project, tendremos nuestro primer proyecto Phonegap creado.

phonegap-app-proyecto2

Si nos fijamos en la imagen anterior en la parte inferior tenemos un mensaje que dice Server running on http://IP:3000, donde IP es una dirección de red en la cuál está conectado la PC, y es necesario que para ejecutar la aplicación PhoneGap en nuestro móvil que también se encuentre conectado en la misma red. Hasta esta parte ya tenemos listo el proyecto.

Ejecutando nuesta primera aplicación PhoneGap

Para proceder con la ejecución de la aplicación Hola en nuestro móvil tenemos que instalar en nuestro Android la siguiente aplicación PhoneGap Developer, esta App la encontramos en el Google Play.

phonegap-app-google-play

Ejecutamos la aplicación y tendremos la siguiente pantalla.

phonegap-app-pantalla

Si nos fijamos en la imágen anterior, nos pide una dirección IP, justamente ahí vamos a colocar la dirección IP que teníamos en el Phonegap Desktop, esta aplicación se va conectar, extraer, instalar y ejecutar nuestra primera aplicación Phonegap en nuestro móvil.

Damos click en el botón Connect y veremos el proceso antes mencionado, no está de más volver a indicar que tanto nuestra PC en donde tenemos instalado el PhoneGap Desktop y el móvil se encuentren en la misma red. Al ejecuta tendremos el siguiente resultado.

phonegap-ejecucion

 

Editamos el código de la aplicación

Para ello nos vamos a valer de un editor para el desarrollo de páginas web, en este caso voy a utilizar Sublime Text, nos ubicamos en la carpeta en donde tenemos creado el proyecto, ubicamos la carpeta del proyecto > www > y abrimos el archivo index.html.

phonegap-app-codigo

El código anterior es el que se crea por defecto al momento de crear el proyecto, vamos a editarlo y dejarlo como se muestra continuación:

phonegap-app-codigo2

 

Una vez editado el archivo index.html, regresamos a la aplicación en nuestro móvil y se debería actualizar con los nuevos cambios realizados donde se indica el mensaje “Ejecutando phonegap en Android”, para mostra la plataforma nos hemos basado en el objeto device de Phonegap con su atributo platform para mostrar el sistema operativo en donde se está ejecutando la aplicación.

phonegap-ejecucion

Entonces podemos ver la ejecución con el cambio realizado, terminamos esta pequeña guía de como ejecutamos nuestra primera aplicación PhoneGap de forma fácil. En siguientes Posts veremos mas funciones de este Framework.

[maillite]