PhoneGap Desktop Ejecución de Aplicaciones Web (HTML/JS/CSS) en DisposiCvos Móviles

Transcripción

1 PhoneGap Desktop Ejecución de Aplicaciones Web (HTML/JS/CSS) en DisposiCvos Móviles Gabriel Huecas 26 de Enero de 2016

2 ObjeCvo Visualizar nuestras aplicaciones Web desarrolladas con HTML5/JS/CSS3 en disposicvos móviles Android, ios, Windows Phone, smartphones, tablets, Usaremos las herramientas PhoneGap Desktop y PhoneGap Developer App

3 Índice 1. Flujo de Trabajo 2. Programas a instalar a. UClidad de Computador (PhoneGap Desktop) b. Cliente para DisposiCvo Móvil (PhoneGap Developer App) 3. Primer Proyecto (por defecto): a. Realización del proyecto b. Visualizar en disposicvo móvil 4. Cronómetro Segundero

4 Flujo de Trabajo 1. Desarrollamos una app web 2. Servimos con PhoneGap Desktop 3. Accedemos desde el disposicvo móvil mediante PhoneGap Developer App 1 2 3

5 Programas a instalar PhoneGap Desktop en el ordenador en que desarrollamos la app HTML5/JS/CSS3 PhoneGap Developer App en el disposicvo móvil, que permite visualizar y probar la aplicación anterior

6 Instalación PhoneGap Desktop h_p://docs.phonegap.com/ge`ng-started/1- install-phonegap/desktop/ Descargar el instalador para Mac OS X o Windows Puede que haya que dar permisos de ejecución Con PhoneGap Desktop haremos visible la aplicación web, de forma que el cliente móvil pueda ejecutarla en el disposicvo deseado

7 Instalación PhoneGap Devel. App h_p://docs.phonegap.com/ge`ng-started/2- install-mobile-app/ Se ejecuta en el disposicvo móvil permite visualizar y probar la aplicación desarrollada sin necesidad de instalar entornos de compilación/ desarrollo nacvos de Android, ios, etc. Localizar en itunes, Google Play o Windows Phone Store

8 Abrimos la aplicación PhoneGap Desktop en nuestro ordenador y obtenemos una ventana como esta Primer Proyecto (I)

9 Primer Proyecto (II) Pulsamos el botón + y seleccionamos crear nuevo proyecto

10 Primer Proyecto (III) Introducimos la información básica de nuestro proyecto localización en el disco nombre de la aplicación idencficador (opcional) Y pulsamos crear proyecto (botón verde)

11 Primer Proyecto (IV) Vemos el proyecto accvo (borde izquierdo verde, botón ejecución en verde) Servidor accvo en verde Se muestra la dirección y puerto que sirve la app hay que introducirla en el cliente móvil Sólo un proyecto accvo a la vez! LISTO PARA ACCEDER DESDE El DISPOSITIVO MÓVIL!

12 Primer Proyecto (V) Ejecutamos PhoneGap Developer App en el disposicvo móvil (teléfono o tableta) 1. Pulsamos el icono 2. Tras un breve chequeo, obtenemos la primera pantalla

13 Primer Proyecto (VI) Nos aseguramos que la dirección y el puerto del servidor coinciden Servidor y disposicvo han de estar en la misma subred Y pulsamos Connect Aparece el mensaje DOWNLOADING y después EXTRACTING

14 Primer Proyecto (VII) Nuestra primera aplicación no hace mucho! Sólo comprueba que el disposicvo está listo

15 Primer Proyecto (VIII) ya es un proyecto HTML5/JS/CSS3 completo Se puede acceder al código, pinchando en el path del proyecto

16 Estructura del Primer Proyecto

17 Código del Primer Proyecto

18 Cronómetro Segundero Cuenta atrás los segundos podemos cambiarlo por minutos, más úcl Incrementa al pulsar el botón + o en el reloj Decrementa al pulsar el botón - Al llegar a cero suena una alarma y muestra una alerta

19 HTML Cronómetro Sonido a reproducir Botones - y + Cronómetro esfera del reloj manilla del cronómetro centro

20 CSS Cronómetro Eliminamos margen y relleno caja svg al 80% Ocupación en verccal y horizontal Colores del segundero, del fondo y del eje

21 JS Cronómetro temporizador actualizar cronómetro cuenta atrás incrementar segundero decrementar segundero alarma eventos

22 Proyecto PhoneGap Vamos a realizar un proyecto PhoneGap con el ejemplo visto Creamos un nuevo proyecto, de nombre Cronometro opcionalmente, añadimos el ID org.mooc.crono

23 Proyecto PhoneGap Tenemos un nuevo proyecto añadido hay que modificar el código Pinchamos en Local path para obtener el folder que concene el proyecto y luego nos situamos en el directorio www

24 Ficheros Cronómetro Segundero Copiamos el código del Cronómetro Antes de copiar los ficheros Después de copiar los ficheros

25 Apariencia Cronómetro Segundero Ejecutamos de nuevo el cliente en el móvil hay que rearrancar la aplicación móvil el servidor se actualiza automáccamente Ejecución en iphone Ejecución en Android

26 Gracias por su atención! G. Huecas

27 PhoneGap Build Generación de Aplicaciones Móviles Na7vas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016

28 Obje7vo Construir aplicaciones móviles mul7plataforma basadas en HTML5, JS & CSS3 Evitando el desarrollo na7vo para cada Sistema Opera7vo Sin necesidad de usar los lenguajes propios de Android/iOS/Windows Phone/etc. Mismo desarrollo (90-95% código) para todos los móviles Algunas adaptaciones menores Mediante PhoneGap Build

29 Índice Cordova PhoneGap Caracterís7cas básicas El entorno PhoneGap Adobe Build Generar aplicación móvil Android, ios, Windows Phone Ejemplo: Cronómetro Segundero adaptado a disposi7vos móviles

30 Cordova h\p://cordova.apache.org Es un entorno para Construir aplicaciones na7vas para disposi7vos móviles usando HTML, JS & CSS Conjunto de APIs de disposi7vo: permiten a los desarrolladores acceder a facilidades na7vas del disposi7vo desde JS Libre y de código abierto Apache So_ware Founda7on

31 PhoneGap h\p://phonegap.com Producto de Adobe Incluye Cordova Añade facilidades de generación de aplicaciones na7vas: PhoneGap Build obje7vo de este tema

32 S.O. móviles soportados Amazon FireOS Android Bada Blackberry10 FirefoxOS ios Symbian Tizen Ubuntu WebOS Windows 8 Windows Phone 7 Windows Phone 8 h\p://cordova.apache.org/docs/en/latest/guide/support/index.html

33 Empaquetamiento y Distribución Aplicaciones instaladas en forma na7va ios ->.ipa (iphone Applica7on Archive) Android ->.apk (Android Applica7on Package) Windows Phone ->.xap (Microso_ Window Phone OS applica7on package) Distribuidas a través de las correspondientes 7endas: itunes, Google Play, Amazon Market, BlackBerry App World, Windows Phone Marketplace, etc.

34 Interfaz El Interfaz de Usuario creado con HTML, CSS y JS ocupa toda la pantalla 100% x 100% Una única ventana Interfaz de usuario basado en WebView (Navegador Web) 100% x 100%

35 Vista Web na7va Diferentes motores de renderizado El resultado podría ser diferente en dis7ntos móviles Desarrollo Pruebas Experiencia de Usuario S.O. ios Android Etc. Componente UIWebView Android.webkit- WebView Etc.

36 Acceso al Disposi7vo Móvil Desde JS se accede a través de plugins a todas las funciones del móvil Plugin: código que proporciona funciones de acceso a sensores, conec7vidad, elementos básicos del disposi7vo el mismo API para ios, Android, etc. Por ejemplo, la brújula, la cámara, la vibración, contactos, geolocalización, h\ps://cordova.apache.org/plugins/

37 Ejecutar una aplicación Web 1. Compilar localmente requiere instalar PhoneGap/Cordova, el entorno de cada plataforma móvil (Android SDK, ios XCode, etc.) y conocimientos específicos de cada plataforma 2. En un servidor local PhoneGap Desktop App & PhoneGap Developer App 3. Compilar en la nube h\ps://build.phonegap.com 4. A par7r de Entornos de Desarrollo Na7vos: Android Studio/Intel XDK/otros Veremos el 3, que no requiere instalación ni aprender detalles específicos de cada plataforma

38 Resumen Cordova/PhoneGap Actúa como un contenedor de aplicaciones apps móviles HTML/JS/CSS, empaquetadas como si fueran na7vas Proporciona APIs de JS consistentes para todos los disposi7vos soportados Las plataformas móviles más importantes disponen de muy buen soporte Ex7ende JS a través de plugins Cordova es el motor de PhoneGap

39 Cronómetro con Vibración Al terminar la cuenta atrás Cambiamos la alarma por un pi7do Añadimos vibración, quitamos el alert Añadimos cordova.js: acceso a funciones del disposi7vo Inicializamos el disposi7vo ondeviceready func7on podríamos mover el cuerpo de onload() a este método Usamos interact.min.js para mejorar prestaciones al hacer click en la esfera para incrementar el segundero Añadimos config.xml para dar permisos y accesos Incluimos iconos a diferentes resoluciones

40 Modificaciones (I) Añadimos iconos para las diferentes resoluciones de disposi7vos móviles 36, 48, 62, 72, 96, 173 son las más comunes conviene llamarlas así generadas a par7r de la esfera del reloj Añadimos interact.min.js mejor interacción con el móvil

41 Modificaciones (II) incluimos interact.min.js y cordova.js Añadimos es7los específicos para móviles Añadimos addeventlistener y ondeviceready()

42 Modificaciones (III) Cambiamos la reproducción de sonido por un pi7do y una vibración Y borramos el div con el sonido en el body

43 config.xml El fichero config.xml proporcionado con7ene el nombre de la app, su descripción, información del autor importa las principales bibliotecas de acceso a hardware no se usan todas, van como ejemplo carga los iconos

44 PhoneGap Build en la nube Permite compilar una aplicación web a una aplicación na7va móvil Requiere crear una cuenta en Phonegap Build Sin coste permite un número ilimitado de aplicaciones públicas y una privada se puede adquirir licencias para más Genera un código QR, que se puede escanear desde el móvil para instalar la aplicación

45 h\ps://build.phonegap.com

46

47 Pantalla inicial subir el código desde un repository GIT empaquetado como un.zip

48 Subir el código Hacemos un.zip con el código el nombre y el icono aparecen en la zona de app Icono y nombre de la aplicación pinchar aquí para generar las apps na7vas

49 código Bidi para descarga e instalación en el móvil paquetes compilados en dis7ntas plataformas

50 Aplicación na7va iphone Android

51 Gracias por su atención! G. Huecas

52 PhoneGap Build Configuración para Generación de Aplicaciones ios Gabriel Huecas 27 de enero de 2016

53 ObjeAvo Configurar PhoneGap Build para que genere una aplicación naava ios Son muchos pasos, pero es necesario disponer de un disposiavo Apple que habrá que registrar

54 Índice Ficheros necesarios en PhoneGap Build CerAficado de desarrollador Apple Perfil de Suministro Configuración de PhoneGap Build

55 Compilación en PhoneGap Build Para ios no tenemos ceraficado No key selected se muestra un mensaje de error

56 Ficheros requeridos Al pulsar en no key selected debemos proporcionar: un Atulo o idenaficador podemos tener varias claves Un ceraficado de desarrollador de Apple en formato p12 Un perfil de suministro provisioning profile

57 Pasos 1. ID de Apple 2. Licencia de Desarrollo 3. CerAficado de Desarrollador 4. Registrar el DisposiAvo Apple 5. Perfil de Suministro

58 1.- ID de Apple Se necesita ID de Apple para los que ya son usuarios de Apple, puede usarse el mismo ID de icloud o de AppStore se puede obtener en h]ps://appleid.apple.com/account

59 2.- Licencia de Desarrollo Para obtener una Licencia de Desarrollo unirse al Apple Developer Program h]ps://developer.apple.com/programs/ Elegir entre desarrollador independiente o empresa de desarrollo Cuesta 99$ US / año

60 CerAficado de Desarrollador Apple Apple proporciona dos Apos de ceraficado desarrollador y distribuidor necesitamos el primero Las aplicaciones han de estar firmadas por un ceraficado válido para poder: ejecutar en disposiavo Apple publicar en AppStore

61 3.- Obtención del CerAficado Accedemos al IOS Provisioning Portal h]ps://developer.apple.com Pulsamos en Member Center, introducimos el ID de Apple Pulsamos en CerAficates, IdenAfiers & Profiles

62 Después en CerAficates Y desplegamos CerAficates Development Y el la esq sup. derecha, pinchamos el botón Añadir (+)

63 Seleccionamos ios App Development y ConAnue Se nos solicita un archivo CSR (CerAficate Signing Request) o Solicitud de Firma de CerAficado vienen las instrucciones de cómo hacerlo

64 Archivo CSR Hay muchas herramientas de gesaón de ceraficados, algunas incluidas en el S.O., otras se pueden instalar Mac OS X, desde el Acceso a Llavero Windows, Ubuntu: herramientas externas openssl, gestores de CerAficados de IE, Firefox,

65 Generar CSR en Mac OS X Abrimos Acceso a Llaveros En Aplicaciones -> UAlidades En el menú principal Acceso a Llaveros seleccionamos Asistente para CerAficados Seleccionamos Solicitar un ceraficado de una autoridad de ceraficación

66 Rellene el formulario Introduzca su dirección de correo Su nombre Seleccione guardar en disco y pulse ConAnuar Obtenemos el fichero CSR

67 Solicitar el ceraficado Volvemos a la web de desarrolladores de Apple y subimos el fichero CSR Pulsamos el botón Generate Nuestro ceraficado está listo para instalar pulsamos en Download, salvamos el fichero.cer y hacemos doble click para instalarlo en Acceso a Llaveros conviene hacer una copia de seguridad y mantenerlo a buen recaudo pulsamos done para proseguir

68 CerAficado listo En CerAficates -> Development podemos ver nuestro ceraficado y la fecha de expiración si pinchamos, aparece información adicional

69 Formato p12 El ceraficado está listo, pero PhoneGap Build exige formato p12 En Acceso a Llaveros -> CerAficados Menú contextual sobre iphone Developer Seccionamos la opción Exportar Nos pedirá una clave, hay que recordarla para poder subirla a PhoneGap Build

70 4.- Registrar el disposiavo En Member Center: 1. En CerAficates, IdenAfiers & Profiles, seleccionamos Devices 2. Seleccionamos All 3. Pinchamos el botón Añadir (+) en la esquina superior derecha 4. Seleccionamos Register Device 5. Introducimos el nombre e idenaficador (UDID) de nuestro disposiavo 6. Pinchamos ConAnue y luego Register

71 IdenAficador de DisposiAvo Hay que introducir el UDID no confundir con Número de Serie Conectamos el disposiavo al ordenador Desde itunes: Suele mostrar el número de serie, pinchamos hasta que ponga UDID Desde Xcode (si disponemos de un Mac): Menu Window -> Devices

72 5.- Perfil de Suministro Ya podemos obtener el Provisioning Profile En la sección Provisioning Profile pinchamos en Añadir (+), rellenamos los datos y bajamos el fichero generado extensión:.mobileprovisioning

73 Descargar el Perfil de Suministro Desplegamos el perfil y pulsamos en Download Ya tenemos el segundo fichero

74 Configuración PhoneGap Build Rellenamos los campos Atulo GH1 por ejemplo ceraficado p12 CerAficados.p12 Debemos recordar la clave asignada al fichero perfil de suministros.mobileprovision

75 Otras claves En PhoneGap Build -> Edit Account podemos acceder a nuestras claves firmadas

76 Recompilamos todo

77 Gracias por su atención! G. Huecas

78 Aplicaciones FirefoxOS Juan Quemada, DIT, UPM 1

79 FirefoxOS FirefoxOS es el nuevo SO n para móviles y tabletas w Desarrollado por la Fundación Mozilla Sus aplicaciones se programan en n HTML5, CSS y Javascript Recursos y tutoriales n n n n Juan Quemada, DIT, UPM 2

80 Apps FirefoxOS Aplicaciones para instalar en móviles y tabletas n n Funcionando con o sin conexión a Internet w Construidas con tecnologías Web: URLs, HTTP, HTML, CSS, JavaScript,... También pueden instalarse en PCs o navegadores Tipos de WebApps Firefox OS n hosted: alojadas en un servidor n packaged: se descargan empaquetadas w Hay tres tipos n n n Plain: aplicaciones Web convencionales Certified: con acceso a algunos elementos restringidos Privileged: con acceso a todos los recursos del móvil Juan Quemada, DIT, UPM 3

81 Hosted Apps Webapps publicadas en modo ejecutable en un servidor Web n n n Pueden ejecutarse desde un navegador Además de ser publicadas en una tienda a través de su URL w para su instalación en un dispositivo FirefoxOS Mas info: w Características n n Necesitan conexión a Internet para ser ejecutadas Solo puede haber una hosted WebApp por dominio Web Se gestionan a través del objeto predefinido navigator.mozapps n con métodos install(...) o checkinstalled(...) Juan Quemada, DIT, UPM 4

82 Packaged WebApps Webapps empaquetadas en un fichero ZIP n n Pueden ser publicadas en una tienda w para su instalación en dispositivos Firefox OS Mas info: w Se pueden publicar en tiendas o en servidores n n Solamente se pueden instalar w No se pueden ejecutar directamente en un navegador Pueden ser autonomas w Funcionando sin conexión a Internet Se instalan a través del objeto predefinido navigator.mozapps n con método installpackage(...) Juan Quemada, DIT, UPM 5

83 Firefox Marketplace Firefox Marketplace permite crear n tiendas de aplicaciones alojadas en servidores w Los Marketplace FirefoxOS pueden competir entre si n n serán más o menos populares w dependiendo de la aceptación de los usuarios serán más o menos seguras w dependiendo del control de la seguridad realizado Market places con apps de Mozilla n Juan Quemada, DIT, UPM 6

84 Final del tema Muchas gracias! Juan Quemada, DIT, UPM 7

85 Reloj SVG como App FirefoxOS Juan Quemada, DIT, UPM 8

86 Reloj SVG como App Incluimos el reloj SVG como n n hosted App packaged App Ambas están publicadas en n Google Drive de asignatura w Juan Quemada, DIT, UPM 9

87 Arrancar el simulador de FirefoxOS en Firefox Las apps se instalan en el simulador incluido en Firefox n Firefox incluye a partir de Firefox 30.0 un simulador de FirefoxOS w Se arranca seleccionando Tools -> Web Developer -> App Manager n Después se arranca (Start Simulator) y se selecciona la versión 1.4 (Firefox 1.4) w OJO! La app con el Reloj dada está probada en Firefox 1.4 y 1.3 y pueden no funcionar en otras versiones Juan Quemada, DIT, UPM 10

88 Instalar hosted App en simulador FirefoxOS 2. Introducir URL del instalador en el navegador y clicar (ejecutar instalador) 3. clicar en botón de instalar 6. Aplicación instalada 1. clicar para desplegar el navegador y poder instalar la hosted App 4. clicar para confirmar instalación Juan Quemada, DIT, UPM 4. clicar para volver a escrit orio 11

89 Reloj SVG: hosted App Para crear una hosted App con Reloj SVG se debe añadir a clock.htm: n n n n Iconos w que se mostrarán en el escritorio Instalador w de la WebApp en el escritorio Manifiesto w con información de instalación El ejemplo suministrado incluye además estilos y tipografías Juan Quemada, DIT, UPM 12

90 manifest.webapp Fichero en formato JSON (JavaScript Object Notation) n Con información de instalación, recursos, diseñador, n Los URLs son relativos con path absoluto JSON es un formato muy habitual para manifiestos versión nombre que aparece en el escritorio descripción para tienda URL de WebApp en servidor iconos escritorio equipo/empresa desarrolladora Juan Quemada, DIT, UPM 13

91 install.html Juan Quemada, DIT, UPM 14

92 Instalar hosted App en simulador FirefoxOS 2. Introducir URL del instalador en el navegador y clicar (ejecutar instalador) 3. clicar en botón de instalar 6. Aplicación instalada 1. clicar para desplegar el navegador y poder instalar la hosted App 4. clicar para confirmar instalación Juan Quemada, DIT, UPM 4. clicar para volver a escrit orio 15

93 Reloj SVG: packaged App Componentes n n n Instalador w de la WebApp en el escritorio Manifiesto w con información de instalación del paquete App empaquetada w Zip con todos los ficheros de la App n los mismos ficheros de la hosted App n Salvo manifiesto: URLs relativos w OJO: Los ficheros deben empaquetarse sin más, sin estar en ningún directorio Juan Quemada, DIT, UPM 16

94 package.manifest Fichero en formato JSON (JavaScript Object Notation) n Con informacion sobre la webapp empaquetada JSON representa datos como literales de objetos JavaScript n Todos los datos están serializados en el fichero como un string version (igual al del manifest.webapp) nombre (igual al del manifest.webapp) URL a paquete en tienda equipo/empresa desarrolladora (igual al del manifest.webapp) Juan Quemada, DIT, UPM 17

95 index.html Juan Quemada, DIT, UPM 18

96 Instalar packed App en simulador FirefoxOS 2. Introducir URL del instalador en el navegador y clicar (ejecutar instalador) 3. clicar en botón de instalar 6. Aplicación instalada 1. clicar para desplegar el navegador y poder instalar la hosted App 4. clicar para confirmar instalación Juan Quemada, DIT, UPM 4. clicar para volver a escrit orio 19

97 Final del tema Muchas gracias! Juan Quemada, DIT, UPM 20

98 Ejercicio Empaquetar como App FirefoxOS, tanto hosted, como packaged, el reloj animado basado en SVG o en CANVAS (solo uno, el que se prefiera) propuestos como ejercicios P2P opcionales en los temas SVG y CANVAS. Publicar dichas apps en Google Drive para que se puedan instalar por terceros. Juan Quemada, DIT, UPM 21