Desarrollo de Aplicaciones Móviles Hibridas

6 DE NOVIEMBRE DE 2013

UNIVERSIDAD PRIVADA ANTENOR ORREGO X Congreso Internacional de Ingeniería de Sistemas, Software y Telecomunicaciones

DESARROLLO DE APLICACIONES MÓVILES HÍBRIDAS EN MS VISUAL STUDIO 2012 Instructor: Giancarlo Marín Gaitán Microsoft Certified Professional, Microsoft Technology Associate Presidente IEEE Computer Society UPAO Correo: [email protected] Twitter: @GianMarin

CONTENIDO 1

Términos y Condiciones de Uso [3 minutos] ........................................................................................ 3

2

Introducción a Visual Studio 2012 ....................................................................................................... 3 2.1

3

4

5

6

Introducción a PhoneGap .................................................................................................................... 4 3.1

Concepto [2 minutos] ................................................................................................................... 4

3.2

Ventajas [1 minuto] ...................................................................................................................... 4

3.3

Consideraciones [1 minuto] .......................................................................................................... 5

Introducción a Tipos de Aplicación Móviles ......................................................................................... 5 4.1

Aplicaciones Nativas [2 minutos] .................................................................................................. 5

4.2

Aplicaciones Web [1 minutos] ...................................................................................................... 6

4.3

Aplicaciones Híbridas [2 minutos]................................................................................................. 6

4.4

Resumen APP Nativa vs APP Web vs APP Híbrida [2 minutos] ..................................................... 7

Instalación Previa ................................................................................................................................. 8 5.1

Instalación de Microsoft Visual Studio 2012 [2 minutos] ............................................................. 8

5.2

Instalación de SDK Windows Phone 8.0 [2 minutos] .................................................................... 9

Tutorial – Windows Phone 8.0 .............................................................................................................. 9 6.1

7

Concepto [2 minutos] ................................................................................................................... 3

Instalación .................................................................................................................................... 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

Finalizando Tutorial - Compilación...................................................................................................... 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

1 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

2 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

1 TÉRMINOS Y CONDICIONES DE USO Duración del tutorial: 105 Minutos en total distribuidos en: 20 de introducción, 75 de programación y 10 de preguntas/respuestas. Si faltase tiempo, con gusto las dudas que tengan serán respondidas mediante correo electrónico o vía 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 navegación en internet y reproducción de música. Las preguntas se realizarán al final; se sugiere anotar cualquier tipo de duda para luego hacerla saber; en caso falte tiempo para la resolución de dudas, vía correo electrónico obtendrán respuestas.

2 INTRODUCCIÓN A VISUAL STUDIO 2012 2.1 CONCEPTO Microsoft Visual Studio es un entorno de desarrollo integrado (IDE, por sus siglas en inglés) para sistemas operativos Windows. Soporta varios lenguajes de programación, 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 versión .NET 2002). Así se pueden crear aplicaciones que se intercomuniquen entre estaciones de trabajo, páginas web y dispositivos móviles.

3 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

3 INTRODUCCIÓN A PHONEGAP 3.1 CONCEPTO Es un framework que nos brinda la posibilidad de crear aplicaciones que se pueden compilar para diferentes plataformas móviles (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 código 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. Además está disponible en formato de plugin. Es importante destacar que si bien Adobe está trabajando con herramientas para facilitar el uso de Phonegap, el código ha sido entregado también a la Fundación Apache para que se mantenga como Open Source. Este proyecto en la Fundación se encuentra bajo el nombre de Apache Cordova.

PhoneGap cuenta con una librería JavaScript que nos da una API de funciones que nos permitirá potenciar lo que nos ofrece el navegador. Es decir, podremos tener funcionalidades más allá del estándar para acceder, por ejemplo, a algunas opciones del sistema. Dentro de lo que es PhoneGap, también encontraremos librerías nativas que funcionan como una especie de “puente” entre el código JavaScript y cada una de las plataformas nativas, esto les da a los desarrolladores un elemento extra para ir un paso más allá con sus aplicaciones y saltar limitaciones impuestas.

3.2 VENTAJAS    

Programación: HTML5, CSS3 y javascript. Los programadores web se pueden adaptar fácilmente al mundo móvil mediante este framework. Integración con frameworks de desarrollo web: JQuery Mobile, Sencha Touch, Dojo, jQTouch entre otros. Rapidez: Con PhoneGap puedes realizar una aplicación sencilla en poco tiempo. Multiplataforma: El mismo código fuente es usado en todas las plataformas.

4 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

    

Stores: Una vez finalizado el proyecto se puede empaquetar y subir fácilmente 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. Documentación: En su página web oficial, se puede encontrar una amplia sección de documentación con ejemplos. PhoneGapBuild: Dispone de un potente compilador multiplataforma en la nube. Permite convertir la aplicación web en aplicaciones móviles (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 cálculos intensivos.

4 INTRODUCCIÓN A TIPOS DE APLICACIÓN MÓVILES 4.1 APLICACIONES NATIVAS Se desarrollan exclusivamente para un sistema operativo móvil, 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 añadidos. Las aplicaciones nativas pueden acceder a todas las funcionalidades nativas del dispositivo, aumentando sus posibilidades y rendimiento. Por ejemplo en rendimiento gráfico o acceso a funcionalidades GPS, datos, cámara, etc.

5 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

4.2 APLICACIONES WEB Permiten un desarrollo multiplataforma basado en tecnologías 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 prácticamente cualquier celular o dispositivo móvil. Se desarrolla una sola vez se ve en muchos sistemas distintos.

4.3 APLICACIONES HÍBRIDAS Mantienen el carácter multiplataforma en gran parte, siguen usando tecnologías Web, aunque corren localmente en el dispositivo, pudiendo ejecutarse también sin conexión a Internet. Al estar embebidas en un navegador de una aplicación 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, cámara, etc. Además mantiene el modo de distribución de las apps nativas ya que pueden ofrecerse a los App Stores de las diferentes marcas.

6 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

4.4 RESUMEN APP NATIVA VS APP WEB VS APP HÍBRIDA APP

Device Access

Speed

Development Cost

App Store

Native

Full

Expensive

Available

Hybrid

Full

Reasonable

Available

Low Overhead

Web

Partial

Very Fast Native Speed as Necessary Fast

Approval Process Mandatory

Reasonable

Not Available

None

7 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

5 INSTALACIÓN PREVIA 5.1 INSTALACIÓN DE MICROSOFT VISUAL STUDIO 2012 -

OPCION 1: Para instalarlo puede descargarlo en su versión express para Windows Phone en el siguiente link > http://www.microsoft.com/visualstudio/esn/products/visual-studio-expressproducts#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 página oficial de DreamSpark (https://www.dreamspark.com/Student/), previamente creándose una cuenta para la verificación si es que es alumno de una universidad con convenio. Los pasos para la activación 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

8 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

5.2 INSTALACIÓN DE SDK WINDOWS PHONE 8.0 Para la instalación 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 instalación es necesario contar con Sistema Operativo Windows 8.

6 TUTORIAL – WINDOWS PHONE 8.0 6.1 INSTALACIÓN 6.1.1 Descargar PhoneGap El primer paso consistirá en descargar PhoneGap en su página oficial (http://phonegap.com/install/) en su versión 2.8.0, para lo cual hacemos clic en la opción ‘PhoneGap 2.8.0’.

9 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

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: Después 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.

10 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

-

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

-

PASO 6: Seleccionamos ‘Plantillas’, luego la sub-opción ‘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’

11 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

6.1.3 -

-

-

-

Entorno de Trabajo Properties: o AppManifest.xml: Es el manifiesto de Silverlight, un simple archivo con el manifiesto de la aplicación requerido para generar el paquete XAP. o AssemblyInfo.cs: Otro archivo de configuración que contiene meta-información como el nombre y versión 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 específicos de la aplicación como el título, la ubicación de los íconos, las habilidades y similares. References: contiene las referencias de las librerías. ServicesReferences: contiene las referencias a servicios alojados en un servidor específico. cordova: es la carpeta donde se alojan todas las librerías en archivos .js propias de PhoneGap tales como compilación, emular, etc. cordovalib: es la carpeta donde se alojan las clases .cs que permite hacer debug de la aplicación. Images: es la carpeta donde se guardan las imágenes propias de la aplicación nativa Windows Phone. Plugins: es la carpeta donde se guardan todos los plugins que representan las características de un móvil, 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 usarán en la aplicación. o img: es la carpeta donde se guardan todas las imágenes que se usarán en la aplicación. o js: es la carpeta donde se guardan todos los archivos .js que se usarán en la aplicación. o cordova.js: es el archivo ‘mágico’ en base a javascript que le da vida a la aplicación. o index.html: es el archivo de inicio de la aplicación 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 configuración de la aplicación. App.xaml.cs: Inicialización del teléfono, es aquel donde se guardan los eventos globales de una aplicación nativa Windows Phone. ApplicationIcon.png: Esta imagen debe ser reemplazada con la que va a representar la aplicación. Es la que observarán los usuarios al ver la aplicación en el teléfono. Background.png: Esta es la imagen que va a ser usada cuando la aplicación es fijada en la pantalla de inicio. Lo más astuto sería usar un diseño similar al de ApplicationIcon.png. config.xml: Es un archivo sigue un estándar de la W3C conocido como ‘widgets’ y es aquel donde se detalla todas las configuraciones que debe tener la aplicación. MainPage.xaml: La página inicial de una aplicación nativa Windows Phone MainPage.xaml.cs: Archivo de CodeBehind para la página inicial.

12 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

-

SplashScreenImage.jpg: Esta una imagen predeterminada que será desplegada mientras se carga la aplicación. Se puede reemplazar con otra de nuestro agrado, pero recuerden que su único propósito es notificar al usuario que la espera es debido a que la aplicación está cargando. Version: La versión 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’.

1 2 3 4

5 2

6 2

Donde: 1. Permite la codificación al español, el cual nos posibilita utilizar letras como la ñ 2. Este tag nos permitirá según sus atributos “device-width” que el ancho de la pantalla del dispositivo, es independiente al tamaño, posición o resolución del dispositivo móvil y “userscalable=no” que el sitio se muestra en su escala original y que el usuario no tiene posibilidad de cambiar el tamaño. 3. Nombre del título de la página 4. Librería propia de PhoneGap. 5. JavaScript de una nuestra aplicación donde se hace uso de notificaciones. 6. Párrafo que se mostrará en la aplicación, el cual hace un llamado a una función cuando se le da clic.

13 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

La estructura de la notificación de confirmación (notification.confirm) es la siguiente: -

Definición: Muestra un cuadro de diálogo de confirmación personalizable. navigator.notification.confirm(message, confirmCallback, [title], [buttonLabels]) o o o o

-

message: Mensaje del diálogo. (String) confirmCallback: Devolución de llamada para invocar con el índice del botón pulsado (1, 2 o 3), o cuando el diálogo es despedido sin presionar un botón (0), (Function) title: Título del diálogo (String) (Optional, Default: "Confirm") buttonLabels: Cadena separada por comas con etiquetas de los botones (String) (Optional, Default: "OK,Cancel")

Descripción: muestra un cuadro de diálogo nativo que es más personalizable que la confirmación de la función del navegador. Function notification.confirm confirmCallback : El confirmCallback se llama cuando el usuario ha pulsado uno de los botones del cuadro de diálogo de confirmación. La devolución de llamada toma el argumento buttonIndex (Number), que es el índice del botón presionado. Es importante tener en cuenta que el índice utiliza la indización basada en uno, por lo que el valor será 1, 2, 3, etc

Como buena práctica es considerable usar el diferentes tipos código en carpetas distintas es por ello que el código de nuestra aplicación en JavaScript lo alojaremos en su carpeta respectiva llamada “js” con el donde de index.js.

De tal manera que ahora nuestro código del index.html quedará de esta manera:

14 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

-

PASO 2: Adicionaremos un ejemplo haciendo uso de la cámara. En el archivo index.js se agregará:

15 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

Y en el archivo index.html lo siguiente:

Además no olvidar que para el funcionamiento de nuestra aplicación se deberá habilitar las “capacidades” del móvil en el archivo XMAppManifest.xml:

16 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

Se selecciona las ‘capacidades’ que usará el móvil:

17 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

Una vez codificado la apariencia de nuestra aplicación será la siguiente:

6.3 MODO VISUALIDAD -

PASO 1: Daremos apariencia a la aplicación usando el Framework JQuery-Mobile. Lo podemos bajarlo desde su página oficial (http://jquerymobile.com/) JQuery-Mobile: Es un framework desarrollado por jQuery que combina HTML5 y jQuery para la creación de portales web móviles. 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 página mucho más sencilla.

18 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

-

PASO 2: Una vez descargado las librerías 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’.

19 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

-

PASO 4: Recodificamos la página del index.html

20 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

-

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

21 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

En el archivo css/index.css

-

PASO 7: Configurar el config.xml

22 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

7 FINALIZANDO TUTORIAL - COMPILACIÓN 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 día un conjunto de características muy útiles para el trabajo en equipo.

23 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

-

PASO 1: Para ello nos crearemos una cuenta GitHub en su página 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

24 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

-

PASO 3: Una vez creado copiamos dentro de la carpeta el directorio donde están alojado nuestra aplicación.

-

PASO 4: Cuando se vaya terminado de copiar, regresamos a GitHub y seleccionamos la opción 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’.

25 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

-

PASO 6: Una vez detallado los cambios nos mostrará un mensaje de confirmación.

-

PASO 7: Después se procede a publicar el repositorio

26 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

-

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

Nos pedirá que creemos un archivo README que es una descripción de todo tu proyecto. Es recomendable añadirlo.

7.2 PHONEGAP BUILD Es un marco de desarrollo basado en estándares, de código abierto para la creación de aplicaciones móviles multiplataforma con HTML, CSS y JavaScript para iOS, Android ™, Windows ® Phone, webOS, BlackBerry ® y mucho más.

-

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

27 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

-

PASO 2: Una vez accedido seleccionamos la opción open-source y copiamos la URL de la aplicación

28 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

-

PASO 3: Describimos la aplicación a compilar

o o

-

Enable debugging: Es una herramienta que permite realizar debug a nuestra aplicación de forma remota vía consola web 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 compilación durante el desarrollo.

PASO 4: Procedemos a compilar

29 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

-

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 Documentación de PhoneGap http://docs.phonegap.com/en/2.8.0/index.html Comunidad PhoneGap en Español http://www.phonegapspain.com/ Elementos HTML https://developer.mozilla.org/es/docs/HTML/Elemento Comunidad Académica en Tecnologías 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 Rodrígo Díaz 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, dedicación y esfuerzo, espero que hayan aprendido cómo se trabaja una aplicación móvil, ahora es su turno de compartir el conocimiento en su grupo de amigos. Internet es mucho más que ratos de juego y ocio en las redes sociales, éstas mismas tienen gran material de cientos, miles y millones de cibernautas que también van compartiendo conocimiento, el punto clave

30 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO

es buscar y de preferencia en inglés, si desconoces el inglés, no hay problema, en internet también se aprende idiomas. Siempre busquen, investiguen más allá de lo que las clases pueden llegar, no veamos la competencia entre nuestros entornos, la verdadera competencia radica en superarse a uno mismo día a día. En Facebook existen grupos de programación bastante buenos tanto en inglés como en español, en Youtube hay gran cantidad de tutoriales desde muy básicos hasta niveles increíbles, en Twitter, por medio de #hastags encuentras información en directo y las personas responden con bastante respeto. Y bueno, ya estando en el final de la redacción del tutorial, los invito a participar de la comunidad en tecnologías 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 más que agregar me despido hasta una próxima ocasión. ¡Saludos! Atte. Giancarlo Marín Gaitán. Líder de la Comunidad en Tecnologías Microsoft UPAO.net | Presidente IEEE Computer Society UPAO PD: Si quedaron dudas pendientes, un correo a: [email protected] y desean elegir una opción más simple: envíen un tweet @GianMarin. ¡Gracias!

31 Comunidad Académica Microsoft UPAO.net http://www.facebook.com/UPAO.net

IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO