Gua.

Phonegap - Primera aplicacin mvil

Qu es phonegap?
PhoneGap es un framework para el desarrollo de aplicaciones mviles, PhoneGap permite a los
programadores desarrollar aplicaciones para dispositivos mviles utilizando herramientas genricas tales
como JavaScript, HTML5 y CSS3. Las aplicaciones resultantes son hbridas, es decir que no son realmente
aplicaciones nativas al dispositivo, pero no se tratan tampoco de aplicaciones web (teniendo en cuenta que
son aplicaciones que son empaquetadas para poder ser desplegadas en el dispositivo incluso trabajando con
el API del sistema nativo).
PhoneGap se incorpora el uso de una interfaz de comandos a travs de consola. (CMD para windows y
Terminal para Mac)
PhoneGap maneja API que permiten tener acceso a elementos como el acelermetro, la cmara, los
contactos en el dispositivo, la red, el almacenamiento, las notificaciones, etc. Estas API se conectan al sistema
operativo usando el cdigo nativo del sistema a travs de una Interfaz de funciones en Javascript.
PhoneGap permite el desarrollo ya sea ejecutando las aplicaciones en nuestro navegador web, sin tener que
utilizar un simulador dedicado a esta tarea, y brinda la posibilidad de soportar funciones sobre frameworks
como Sencha Touch o JQuery Mobile.

Instalacin
Para instalar phonegap, primero necesitaremos descargar el Node.js de su pgina oficial http://nodejs.org/

Instalando Node.js
Una vez descargamos el Node.js seguiremos los pasos necesarios para su instalacin y esperamos a que
termine el proceso.

Al terminar la instalacin del Node.js abriremos nuestra consola de comandos. Esto lo encontramos en el
men inicio y escribimos cmd, al abrirlo aparecer la siguiente ventana. En donde escribiremos esta linea de
comando npm install -g phonegap. (El comando npm ha sido generado por Node.js y nos facilita la
instalacin de phonegap.

Instalando Phonegap
Una vez escrita la linea de comando o CLI (comand line interface) aparecer en la consola varias lineas de
cdigo que nos indica que el paquete se esta instalando correctamente.

Para asegurarnos que phonegap se ha instalado correctamente, escribimos la palabra phonegap y

aparecer una lista de los comandos que podemos utilizar para nuestro proyecto. Entre ellos estn:
run
local
remote
platform
plugin
create
cd

(ejecuta una plataforma, android o IOS)

(para desarrollar en un entorno local)
(para desarrollar o ejecutar una accin de un directorio remoto)
(para actualizar una plataforma de trabajo)
(sirve para crear, remover o listar plugins que se pueden usar en nuestro proyecto)
(lo utilizaremos para crear nuestros proyectos)
(servir para escoger nuestro directorio de trabajo)

Crear un proyecto
Para crear un nuevo proyecto o espacio de trabajo tenemos que definir un directorio en nuestro equipo, para
ello debemos escribir el comando cd (change directory) y seguido de ello escribir la ruta completa o relativa
de donde queremos crear nuestro proyecto, por ejemplo:
cd Desktop
Esta lnea de comando servir para indicar que queremos crear nuestro proyecto en el escritorio.
Otro ejemplo seria el siguiente:
cd C:\Users\Kenny\Documents
Esta lnea de comando define que nuestro proyecto ser creado en nuestro disco local C especificamente en
la carpedate Documents del usuario Kenny. (Debemos escribir maysculas y minsculas correctamente)
Luego para crear nuestro proyecto ejecutaremos la siguiente linea de cdigo. En dnde phonegap ejecuta
el comando, create es nuestra accin a ejecutar y my-app es el nombre de nuestro proyecto; a este ltimo
podemos asignar cualquier nombre.
phonegap create my-app
En este caso nuestro directorio era Desktop, as que podemos verificar que apareci una nueva carpeta
llamada my-app

Al abrir esta carpeta encontraremos los archivos que phonegap ha creado de nuestro proyecto, en ella
podremos instalar plataformas o plugins, pero esta vez, nos enfocaremos en la carpeta www que contiene
todos nuestros archivos HTML, CSS, Javascripts e imagenes.

Configuracin de archivos
Modificaremos el archivo config.xml en este archivo podremos definir la informacin de nuestra aplicacin y
algunas opciones de visualizacin. La etiqueta <name>, <description>, <author> nos serviran para detallar la
informacin que se mostrar en nuestra aplicacin es decir el nombre, descripcin y autor.
Tambin podemos definir algunas preferencias, por ejemplo si nuestra aplicacin puede verse solo en
portrait, landscape o ambos y entre otras opciones.
Ms abajo en este mismo archivo encontraremos la ruta de los iconos de nuestra app, este aparecera cuando
algn usuario la descargue y tiene fines de presentacin en cada una de las plataformas o dispositivos en los
que estar disponible.

El segundo archivo que modificaremos ser el index.html, en este incluiremos nuestro primer contenido de la
pantalla principal de nuestra aplicacin, ademas incluiremos las imagenes, estilos css y javascript que
utilizamos. Podemos tomar de referencia lo visto en las clases de HTML y CSS para aplicar el contenido que
deseamos.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See
https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>

Una vez tengamos listos nuestros archivos, convertiremos la carpeta principal

my-app a formato .zip para poder exportarlo a phonegap build.

Crear la app
Entramos a la URL de phonegap build https://build.phonegap.com/people/sign_in e iniciaremos sesin
con nuestra cuenta para poder accesar al panel de phonegap build.

Y finalmente subiremos nuestro archivo .zip para que phonegap convierta nuestro archivos html a un archivo
de instalacin para los diferentes sistemas operativos. IOS (.ipa), Android (.apk), windows (.xap)

Instalando la aplicacin
Para descargar o instalar nuestra app en nuestros dispositivos podemos utilizar un scaner QR para obtener
el enlace de descarga de nuestra app y posteriormente instalarla, o bien descargar el archivo .apk en el caso
de Android y conectar nuestro dispositivo al ordenador, luego se coloca el archivo .apk en la carpeta de
descargas, lo buscamos en el dispositivo e instalamos.
Listo, ya creamos nuestra primera app!

Opcin 1 - QR scan

Opcin 2 - Descargar archivo APK(android)