Desarrollo de Aplicaciones Móviles Hibridas

DESARROLLO DE APLICACIONES MVILES
HBRIDAS EN MS VISUAL STUDIO 2012

Instructor: Giancarlo Marn Gaitn
Microsoft Certified Professional, Microsoft Technology Associate
Presidente IEEE Computer Society UPAO
Correo: giankrlo_91@hotmail.com
Twitter: @GianMarin
6 DE NOVIEMBRE DE 2013
UNIVERSIDAD PRIVADA ANTENOR ORREGO
X Congreso Internacional de Ingeniera de
Sistemas, Software y Telecomunicaciones

1
Comunidad Acadmica Microsoft UPAO.net IEEE Computer Society UPAO
http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO

CONTENIDO
1 Trminos y Condiciones de Uso [3 minutos] ........................................................................................ 3
2 Introduccin a Visual Studio 2012 ....................................................................................................... 3
2.1 Concepto [2 minutos] ................................................................................................................... 3
3 Introduccin a PhoneGap .................................................................................................................... 4
3.1 Concepto [2 minutos] ................................................................................................................... 4
3.2 Ventajas [1 minuto] ...................................................................................................................... 4
3.3 Consideraciones [1 minuto] .......................................................................................................... 5
4 Introduccin a Tipos de Aplicacin Mviles ......................................................................................... 5
4.1 Aplicaciones Nativas [2 minutos] .................................................................................................. 5
4.2 Aplicaciones Web [1 minutos] ...................................................................................................... 6
4.3 Aplicaciones Hbridas [2 minutos]................................................................................................. 6
4.4 Resumen APP Nativa vs APP Web vs APP Hbrida [2 minutos] ..................................................... 7
5 Instalacin Previa ................................................................................................................................. 8
5.1 Instalacin de Microsoft Visual Studio 2012 [2 minutos] ............................................................. 8
5.2 Instalacin de SDK Windows Phone 8.0 [2 minutos] .................................................................... 9
6 Tutorial Windows Phone 8.0 .............................................................................................................. 9
6.1 Instalacin .................................................................................................................................... 9
6.1.1 Descargar PhoneGap [2 minutos] ......................................................................................... 9
6.1.2 Configurar PhoneGap a Visual Studio Windows Phone 8.0 [10 minutos] ....................... 10
6.1.3 Entorno de Trabajo [10 minutos] ........................................................................................ 12
6.2 Modo Introductorio [20 minutos] ............................................................................................... 13
6.3 Modo Visualidad [40 minutos] .................................................................................................... 18
7 Finalizando Tutorial - Compilacin ...................................................................................................... 23
7.1 Github [10 minutos] .................................................................................................................... 23
7.2 PhoneGap Build [10 minutos] ..................................................................................................... 27
8 Recursos Extras [2 minutos] ................................................................................................................ 30
9 Palabras Finales [2 minutos] ............................................................................................................... 30

2

3

1 TRMINOS Y CONDICIONES DE USO
Duracin del tutorial: 105 Minutos en total distribuidos en: 20 de introduccin, 75 de programacin y 10
de preguntas/respuestas. Si faltase tiempo, con gusto las dudas que tengan sern respondidas mediante
correo electrnico o va twitter.
Para el presente tutorial no se requiere experiencia alguna en desarrollo web pero s conocimiento en
desarrollo de aplicaciones, hoy aprenderemos con ejemplos simples y directos, tengan en cuenta las
siguientes recomendaciones para lograr un aprendizaje exitoso:

Celulares en silencio.
Tener sus sentidos enfocados en el presente tutorial.
Leer detenidamente este material.
Prohibida la navegacin en internet y reproduccin de msica.
Las preguntas se realizarn al final; se sugiere anotar cualquier tipo de duda para luego hacerla
saber; en caso falte tiempo para la resolucin de dudas, va correo electrnico obtendrn
respuestas.
2 INTRODUCCIN A VISUAL STUDIO 2012
2.1 CONCEPTO
Microsoft Visual Studio es un entorno de desarrollo integrado (IDE, por sus siglas en ingls) para sistemas
operativos Windows. Soporta varios lenguajes de programacin, tales como Visual C++, Visual C#, Visual
J#, y Visual Basic .NET, al igual que entornos de desarrollo web como ASP.NET, aunque actualmente se
han desarrollado las extensiones necesarias para muchos otros.
Visual Studio permite a los desarrolladores crear aplicaciones, sitios y aplicaciones web, as como servicios
web en cualquier entorno que soporte la plataforma .NET (a partir de la versin .NET 2002).
As se pueden crear aplicaciones que se intercomuniquen entre estaciones de trabajo, pginas web y
dispositivos mviles.

4

3 INTRODUCCIN A PHONEGAP
3.1 CONCEPTO
Es un framework que nos brinda la posibilidad de crear aplicaciones que se pueden compilar para
diferentes plataformas mviles (iOS, Android, Blackberry, Windows Phone, WebOS y Symbian, entre
otras). La gran ventaja de este producto es que estas versiones, pueden crearse a partir de un cdigo
desarrollado en HTML, CSS y JavaScript, potenciado, claro, por los nuevos elementos y APIs que nos trae
HTML5.
Desarrollado originalmente por Nitobi pero ha sido adquirido por Adobe. Adems est disponible en
formato de plugin. Es importante destacar que si bien Adobe est trabajando con herramientas para
facilitar el uso de Phonegap, el cdigo ha sido entregado tambin a la Fundacin Apache para que se
mantenga como Open Source. Este proyecto en la Fundacin se encuentra bajo el nombre de Apache
Cordova.

PhoneGap cuenta con una librera JavaScript que nos da una API de funciones que nos permitir potenciar
lo que nos ofrece el navegador. Es decir, podremos tener funcionalidades ms all del estndar para
acceder, por ejemplo, a algunas opciones del sistema.
Dentro de lo que es PhoneGap, tambin encontraremos libreras nativas que funcionan como una especie
de puente entre el cdigo JavaScript y cada una de las plataformas nativas, esto les da a los
desarrolladores un elemento extra para ir un paso ms all con sus aplicaciones y saltar limitaciones
impuestas.
3.2 VENTAJAS
Programacin: HTML5, CSS3 y javascript. Los programadores web se pueden adaptar fcilmente
al mundo mvil mediante este framework.
Integracin con frameworks de desarrollo web: JQuery Mobile, Sencha Touch, Dojo, jQTouch
entre otros.
Rapidez: Con PhoneGap puedes realizar una aplicacin sencilla en poco tiempo.
Multiplataforma: El mismo cdigo fuente es usado en todas las plataformas.

5

Stores: Una vez finalizado el proyecto se puede empaquetar y subir fcilmente a las diferentes
stores (AppleStore, PlayStore, etc.).
Facilidad de Uso: Existe multitud de formas de usar PhoneGap, con Adobe DreamWeaver (a partir
de CS6) o con el plugin para XCode o Eclipse o directamente mediante la SDK.
Documentacin: En su pgina web oficial, se puede encontrar una amplia seccin de
documentacin con ejemplos.
PhoneGapBuild: Dispone de un potente compilador multiplataforma en la nube. Permite
convertir la aplicacin web en aplicaciones mviles (una para cada plataforma).
Moda: Solo hay que echar un vistazo a las redes sociales. PhoneGap es uno de los frameworks de
moda. Twitter: @phonegap.
3.3 CONSIDERACIONES
No es recomendable para aplicaciones que requieran de animaciones avanzadas y clculos
intensivos.
4 INTRODUCCIN A TIPOS DE APLICACIN MVILES
4.1 APLICACIONES NATIVAS
Se desarrollan exclusivamente para un sistema operativo mvil, como puede ser Android, iOS, BlackBerry,
Windows Phone, etc. Se pueden crear aplicaciones en varios sistemas, por supuesto, pero son proyectos
creados por separado, con los consiguientes costes aadidos.
Las aplicaciones nativas pueden acceder a todas las funcionalidades nativas del dispositivo, aumentando
sus posibilidades y rendimiento. Por ejemplo en rendimiento grfico o acceso a funcionalidades GPS,
datos, cmara, etc.

6

4.2 APLICACIONES WEB
Permiten un desarrollo multiplataforma basado en tecnologas Web como HTML, CSS, JavaScript, etc.
Corren en muchas ocasiones en servidores Web y son visibles en cualquier dispositivo que tenga un
navegador, es decir prcticamente cualquier celular o dispositivo mvil. Se desarrolla una sola vez se ve
en muchos sistemas distintos.

4.3 APLICACIONES HBRIDAS
Mantienen el carcter multiplataforma en gran parte, siguen usando tecnologas Web, aunque corren
localmente en el dispositivo, pudiendo ejecutarse tambin sin conexin a Internet.
Al estar embebidas en un navegador de una aplicacin nativa tienen el mismo tipo de acceso a las APIs
nativas de cada sistema operativo as como a los recursos propios del sistema tipo procesador, GPS,
cmara, etc. Adems mantiene el modo de distribucin de las apps nativas ya que pueden ofrecerse a los
App Stores de las diferentes marcas.

7

4.4 RESUMEN APP NATIVA VS APP WEB VS APP HBRIDA

APP Device Access Speed Development Cost App Store
Approval
Process
Native Full Very Fast Expensive Available Mandatory
Hybrid Full
Native Speed as
Necessary
Reasonable Available Low Overhead
Web Partial Fast Reasonable Not Available None

8

5 INSTALACIN PREVIA
5.1 INSTALACIN DE MICROSOFT VISUAL STUDIO 2012
- OPCION 1: Para instalarlo puede descargarlo en su versin express para Windows Phone en el
siguiente link > http://www.microsoft.com/visualstudio/esn/products/visual-studio-express-
products#d-express-for-windows-phone

- OPCION 2: Si es alumno de la UPAO u otra universidad que tenga convenio con Microsoft puede
adquirir el Visual Studio 2012 desde la pgina oficial de DreamSpark
(https://www.dreamspark.com/Student/), previamente crendose una cuenta para la
verificacin si es que es alumno de una universidad con convenio. Los pasos para la activacin de
su cuenta DreamSpark lo puede encontrar en el lbum de nuestro fanpage UPAO.net >
https://www.facebook.com/media/set/?set=a.463245450386390.110067.183409578369980&t
ype=3

9

5.2 INSTALACIN DE SDK WINDOWS PHONE 8.0
Para la instalacin del SDK de Windows Phone 8.0 se puede descargarlo en el siguiente link >
http://www.microsoft.com/es-es/download/details.aspx?id=35471 . Cabe resaltar para su instalacin es
necesario contar con Sistema Operativo Windows 8.

6 TUTORIAL WINDOWS PHONE 8.0
6.1 INSTALACIN
6.1.1 Descargar PhoneGap
El primer paso consistir en descargar PhoneGap en su pgina oficial (http://phonegap.com/install/) en
su versin 2.8.0, para lo cual hacemos clic en la opcin PhoneGap 2.8.0.

10

6.1.2 Configurar PhoneGap a Visual Studio Windows Phone 8.0
- PASO 1: Una vez descargado, procedemos a descomprimirlo.

- PASO 2: Luego nos dirigimos a la carpeta y copiamos el archivo Cordova WP8_2_8_0.zip

- Paso 3: Despus nos dirigimos a la carpeta, creamos una carpeta con el nombre de PhoneGap
WP8.

- PASO 4: Ingresamos a dicha carpeta y pegamos el archivo anteriormente copiado.

11

- PASO 5: Por consiguiente, iniciamos nuestro Visual Studio 2012 y nos dirigimos a crear un nuevo
proyecto

- PASO 6: Seleccionamos Plantillas, luego la sub-opcin Visual C # y buscamos el nombre que le
asignamos a la carpeta creada en el PASO 3. Dentro de ella se encuentra el proyecto a utilizar,
para lo cual le pondremos de nombre X_Tutorial_Congreso

12

6.1.3 Entorno de Trabajo
- Properties:
o AppManifest.xml: Es el manifiesto de Silverlight, un
simple archivo con el manifiesto de la aplicacin requerido
para generar el paquete XAP.
o AssemblyInfo.cs: Otro archivo de configuracin que
contiene meta-informacin como el nombre y versin del
programa y que es incorporada en el ensamblaje final.
o WMAppManifest.xml: Es el manifiesto de Windows
Phone, es un archivo con metadatos describiendo
aspectos especficos de la aplicacin como el ttulo, la
ubicacin de los conos, las habilidades y similares.
- References: contiene las referencias de las libreras.
- ServicesReferences: contiene las referencias a servicios alojados
en un servidor especfico.
- cordova: es la carpeta donde se alojan todas las libreras en
archivos .js propias de PhoneGap tales como compilacin, emular,
etc.
- cordovalib: es la carpeta donde se alojan las clases .cs que
permite hacer debug de la aplicacin.
- Images: es la carpeta donde se guardan las imgenes propias de la
aplicacin nativa Windows Phone.
- Plugins: es la carpeta donde se guardan todos los plugins que
representan las caractersticas de un mvil, tales como: Notification, Camera, File, etc.
- resources: es la carpeta donde se guardan los recursos necesarios para la aplicaciones tales por
ejemplo: audios.
- www:
o css: es la carpeta donde se guardan todas las hojas de estilo que se usarn en la aplicacin.
o img: es la carpeta donde se guardan todas las imgenes que se usarn en la aplicacin.
o js: es la carpeta donde se guardan todos los archivos .js que se usarn en la aplicacin.
o cordova.js: es el archivo mgico en base a javascript que le da vida a la aplicacin.
o index.html: es el archivo de inicio de la aplicacin en base a html5
- App.xaml: Diccionario de recursos globales. La idea es ver este archivo como el web.config en
ASP.NET. Aqu es donde se ubican datos globales y de configuracin de la aplicacin.
- App.xaml.cs: Inicializacin del telfono, es aquel donde se guardan los eventos globales de una
aplicacin nativa Windows Phone.
- ApplicationIcon.png: Esta imagen debe ser reemplazada con la que va a representar la aplicacin.
Es la que observarn los usuarios al ver la aplicacin en el telfono.
- Background.png: Esta es la imagen que va a ser usada cuando la aplicacin es fijada en la pantalla
de inicio. Lo ms astuto sera usar un diseo similar al de ApplicationIcon.png.
- config.xml: Es un archivo sigue un estndar de la W3C conocido como widgets y es aquel donde
se detalla todas las configuraciones que debe tener la aplicacin.
- MainPage.xaml: La pgina inicial de una aplicacin nativa Windows Phone
- MainPage.xaml.cs: Archivo de CodeBehind para la pgina inicial.

13

- SplashScreenImage.jpg: Esta una imagen predeterminada que ser desplegada mientras se carga
la aplicacin. Se puede reemplazar con otra de nuestro agrado, pero recuerden que su nico
propsito es notificar al usuario que la espera es debido a que la aplicacin est cargando.
- Version: La versin de PhoneGap.
6.2 MODO INTRODUCTORIO
- PASO 1: Como paso introductorio realizamos un ejemplo haciendo uso de notificaciones, para lo
cual haremos lo siguiente en el archivo index.html de la carpeta www.

Donde:
1. Permite la codificacin al espaol, el cual nos posibilita utilizar letras como la
2. Este tag nos permitir segn sus atributos device-width que el ancho de la pantalla del
dispositivo, es independiente al tamao, posicin o resolucin del dispositivo mvil y user-
scalable=no que el sitio se muestra en su escala original y que el usuario no tiene posibilidad de
cambiar el tamao.
3. Nombre del ttulo de la pgina
4. Librera propia de PhoneGap.
5. JavaScript de una nuestra aplicacin donde se hace uso de notificaciones.
6. Prrafo que se mostrar en la aplicacin, el cual hace un llamado a una funcin cuando se le da
clic.

1
2
3
4
5

2
6

2

14

La estructura de la notificacin de confirmacin (notification.confirm) es la siguiente:
- Definicin: Muestra un cuadro de dilogo de confirmacin personalizable.
navigator.notification.confirm(message, confirmCallback, [title], [buttonLabels])
o message: Mensaje del dilogo. (String)
o confirmCallback: Devolucin de llamada para invocar con el ndice del botn pulsado (1,
2 o 3), o cuando el dilogo es despedido sin presionar un botn (0), (Function)
o title: Ttulo del dilogo (String) (Optional, Default: "Confirm")
o buttonLabels: Cadena separada por comas con etiquetas de los botones (String)
(Optional, Default: "OK,Cancel")

- Descripcin: muestra un cuadro de dilogo nativo que es ms personalizable que la confirmacin
de la funcin del navegador.
- Function notification.confirm confirmCallback : El confirmCallback se llama cuando el
usuario ha pulsado uno de los botones del cuadro de dilogo de confirmacin.
La devolucin de llamada toma el argumento buttonIndex (Number), que es el ndice del botn
presionado. Es importante tener en cuenta que el ndice utiliza la indizacin basada en uno, por
lo que el valor ser 1, 2, 3, etc
Como buena prctica es considerable usar el diferentes tipos cdigo en carpetas distintas es por ello
que el cdigo de nuestra aplicacin en JavaScript lo alojaremos en su carpeta respectiva llamada js
con el donde de index.js.

De tal manera que ahora nuestro cdigo del index.html quedar de esta manera:

15

- PASO 2: Adicionaremos un ejemplo haciendo uso de la cmara.
En el archivo index.js se agregar:

16

Y en el archivo index.html lo siguiente:

Adems no olvidar que para el funcionamiento de nuestra aplicacin se deber habilitar las
capacidades del mvil en el archivo XMAppManifest.xml:

17

Se selecciona las capacidades que usar el mvil:

18

Una vez codificado la apariencia de nuestra aplicacin ser la siguiente:

6.3 MODO VISUALIDAD
- PASO 1: Daremos apariencia a la aplicacin usando el Framework JQuery-Mobile. Lo podemos
bajarlo desde su pgina oficial (http://jquerymobile.com/)

JQuery-Mobile: Es un framework desarrollado por jQuery que combina HTML5 y jQuery para la
creacin de portales web mviles.
Nos permite generar aplicaciones cuya apariencia ser siempre la misma independientemente del
dispositivo desde el que acceda un usuario siempre que este usuario acceda desde un dispositivo
que acepte HTML5.
Este framework nos provee de ciertas herramientas que nos hacen la tarea de crear una pgina
mucho ms sencilla.

19

- PASO 2: Una vez descargado las libreras de JQuery-Mobile lo agregaremos el proyecto de tal
manera que quede de la siguiente manera:

- PASO 3: Adicionamos las referencias a nuestro proyecto en el archivo index.html.

20

- PASO 4: Recodificamos la pgina del index.html

21

- PASO 6: Para no tener inconvenientes con el footer de pgina se le agregar lo siguiente:
En el archivo js/index.js

22

En el archivo css/index.css

- PASO 7: Configurar el config.xml

23

7 FINALIZANDO TUTORIAL - COMPILACIN
7.1 GITHUB
Es un excelente servicio de alojamiento de repositorios de software con este sistema, que lejos de
quedarse en esta funcionalidad, ofrece hoy en da un conjunto de caractersticas muy tiles para el trabajo
en equipo.

24

- PASO 1: Para ello nos crearemos una cuenta GitHub en su pgina oficial (https://github.com/).
Luego descargaremos su respectivo software para Windows. Una vez instalado, lo ejecutamos y
nos pedir que nos loguemos.

- PASO 2: Una vez logueado creamos un nuevo repositorio

25

- PASO 3: Una vez creado copiamos dentro de la carpeta el directorio donde estn alojado nuestra
aplicacin.

- PASO 4: Cuando se vaya terminado de copiar, regresamos a GitHub y seleccionamos la opcin de
abrir repositorio del repositorio creado.

- PASO 5: Nos aparecer lo siguiente y nos pedir que describamos los nuevos archivos, para lo cual
lo detallaremos como 1er cambio.

26

- PASO 6: Una vez detallado los cambios nos mostrar un mensaje de confirmacin.

- PASO 7: Despus se procede a publicar el repositorio

27

- PASO 8: Para verificar la publicacin del repositorio podemos ingresar con nuestra cuenta creada
a GitHub y poder visualizarlo.

Nos pedir que creemos un archivo README que es una descripcin de todo tu proyecto. Es
recomendable aadirlo.
7.2 PHONEGAP BUILD
Es un marco de desarrollo basado en estndares, de cdigo abierto para la creacin de aplicaciones
mviles multiplataforma con HTML, CSS y JavaScript para iOS, Android , Windows Phone, webOS,
BlackBerry y mucho ms.

- PASO 1: Accedemos a PhoneGap Build para lo cual nos logueamos con nuestra cuenta GitHub

28

- PASO 2: Una vez accedido seleccionamos la opcin open-source y copiamos la URL de la aplicacin

29

- PASO 3: Describimos la aplicacin a compilar

o Enable debugging: Es una herramienta que permite realizar debug a nuestra aplicacin
de forma remota va consola web
o Enable hydration: Es una herramienta que entrega actualizaciones directamente a su
dispositivo de los desarrollares de nuevas versiones y/o construcciones; a la vez que se
reduce significativamente los tiempos de compilacin durante el desarrollo.

- PASO 4: Procedemos a compilar

30

- PASO 5: Una vez compilado podemos descargar las extensiones propias de las distintas
plataformas que deseamos instalar.

8 RECURSOS EXTRAS
- Microsoft Virtual Academy http://www.microsoftvirtualacademy.com
- Documentacin de PhoneGap http://docs.phonegap.com/en/2.8.0/index.html
- Comunidad PhoneGap en Espaol http://www.phonegapspain.com/
- Elementos HTML https://developer.mozilla.org/es/docs/HTML/Elemento
- Comunidad Acadmica en Tecnologas Microsoft
UPAO.net http://www.facebook.com/UPAO.net
- IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO
- Comunidades Microsoft Per http://www.facebook.com/CMSPeru
- Microsoft Geeks http://geeks.ms
- Blog de Rodrgo Daz Concha, Microsoft MVP ASP.net/Silverlight http://rdiazconcha.com
- Blog de Peter Concha MSP de Ecuador http://ptrconcha.wordpress.com/
9 PALABRAS FINALES
Gracias por su paciencia, dedicacin y esfuerzo, espero que hayan aprendido cmo se trabaja una
aplicacin mvil, ahora es su turno de compartir el conocimiento en su grupo de amigos.
Internet es mucho ms que ratos de juego y ocio en las redes sociales, stas mismas tienen gran material
de cientos, miles y millones de cibernautas que tambin van compartiendo conocimiento, el punto clave

31

es buscar y de preferencia en ingls, si desconoces el ingls, no hay problema, en internet tambin se
aprende idiomas.
Siempre busquen, investiguen ms all de lo que las clases pueden llegar, no veamos la competencia entre
nuestros entornos, la verdadera competencia radica en superarse a uno mismo da a da.
En Facebook existen grupos de programacin bastante buenos tanto en ingls como en espaol, en
Youtube hay gran cantidad de tutoriales desde muy bsicos hasta niveles increbles, en Twitter, por medio
de #hastags encuentras informacin en directo y las personas responden con bastante respeto.
Y bueno, ya estando en el final de la redaccin del tutorial, los invito a participar de la comunidad en
tecnologas Microsoft UPAO.net y/o formar parte de la IEEE Computer Society UPAO, del mismo modo los
invito visitar un proyecto blogero: www.codesinapsys.com y sin nada ms que agregar me despido hasta
una prxima ocasin.
Saludos!
Atte. Giancarlo Marn Gaitn. Lder de la Comunidad en Tecnologas Microsoft UPAO.net | Presidente IEEE
Computer Society UPAO
PD: Si quedaron dudas pendientes, un correo a: giankrlo_91@hotmail.com y desean elegir una opcin
ms simple: enven un tweet @GianMarin.
Gracias!

Desarrollo de Aplicaciones Móviles Hibridas

Transféré par

Informations du document

Copyright

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Desarrollo de Aplicaciones Móviles Hibridas

Transféré par

Droits d'auteur :

DESARROLLO DE APLICACIONES MVILES

HBRIDAS EN MS VISUAL STUDIO 2012

Vous aimerez peut-être aussi