PhoneGap Build Configuración para Generación de Aplicaciones ios

Transcripción

1 PhoeGap Build Cofiguració para Geeració de Aplicacioes ios Gabriel Huecas 27 de eero de 2016

2 ObjeAvo Cofigurar PhoeGap Build para que geere ua aplicació aava ios So muchos pasos, pero es ecesario dispoer de u disposiavo Apple que habrá que registrar

3 Ídice Ficheros ecesarios e PhoeGap Build CerAficado de desarrollador Apple Perfil de Sumiistro Cofiguració de PhoeGap Build

4 Compilació e PhoeGap Build Para ios o teemos ceraficado No key selected se muestra u mesaje de error

5 Ficheros requeridos Al pulsar e o key selected debemos proporcioar: u Atulo o ideaficador podemos teer varias claves U ceraficado de desarrollador de Apple e formato p12 U perfil de sumiistro provisioig profile

6 Pasos 1. ID de Apple 2. Licecia de Desarrollo 3. CerAficado de Desarrollador 4. Registrar el DisposiAvo Apple 5. Perfil de Sumiistro

7 1.- ID de Apple Se ecesita ID de Apple para los que ya so usuarios de Apple, puede usarse el mismo ID de icloud o de AppStore se puede obteer e h]ps://appleid.apple.com/accout

8 2.- Licecia de Desarrollo Para obteer ua Licecia de Desarrollo uirse al Apple Developer Program h]ps://developer.apple.com/programs/ Elegir etre desarrollador idepediete o empresa de desarrollo Cuesta 99$ US / año

9 CerAficado de Desarrollador Apple Apple proporcioa dos Apos de ceraficado desarrollador y distribuidor ecesitamos el primero Las aplicacioes ha de estar firmadas por u ceraficado válido para poder: ejecutar e disposiavo Apple publicar e AppStore

10 3.- Obteció del CerAficado Accedemos al IOS Provisioig Portal h]ps://developer.apple.com Pulsamos e Member Ceter, itroducimos el ID de Apple Pulsamos e CerAficates, IdeAfiers & Profiles

11 Después e CerAficates Y desplegamos CerAficates Developmet Y el la esq sup. derecha, pichamos el botó Añadir (+)

12 Seleccioamos ios App Developmet y CoAue Se os solicita u archivo CSR (CerAficate Sigig Request) o Solicitud de Firma de CerAficado viee las istruccioes de cómo hacerlo

13 Archivo CSR Hay muchas herramietas de gesaó de ceraficados, alguas icluidas e el S.O., otras se puede istalar Mac OS X, desde el Acceso a Llavero Widows, Ubutu: herramietas exteras opessl, gestores de CerAficados de IE, Firefox,

14 Geerar CSR e Mac OS X Abrimos Acceso a Llaveros E Aplicacioes -> UAlidades E el meú pricipal Acceso a Llaveros seleccioamos Asistete para CerAficados Seleccioamos Solicitar u ceraficado de ua autoridad de ceraficació

15 Rellee el formulario Itroduzca su direcció de correo Su ombre Seleccioe guardar e disco y pulse CoAuar Obteemos el fichero CSR

16 Solicitar el ceraficado Volvemos a la web de desarrolladores de Apple y subimos el fichero CSR Pulsamos el botó Geerate Nuestro ceraficado está listo para istalar pulsamos e Dowload, salvamos el fichero.cer y hacemos doble click para istalarlo e Acceso a Llaveros coviee hacer ua copia de seguridad y mateerlo a bue recaudo pulsamos doe para proseguir

17 CerAficado listo E CerAficates -> Developmet podemos ver uestro ceraficado y la fecha de expiració si pichamos, aparece iformació adicioal

18 Formato p12 El ceraficado está listo, pero PhoeGap Build exige formato p12 E Acceso a Llaveros -> CerAficados Meú cotextual sobre iphoe Developer Seccioamos la opció Exportar Nos pedirá ua clave, hay que recordarla para poder subirla a PhoeGap Build

19 4.- Registrar el disposiavo E Member Ceter: 1. E CerAficates, IdeAfiers & Profiles, seleccioamos Devices 2. Seleccioamos All 3. Pichamos el botó Añadir (+) e la esquia superior derecha 4. Seleccioamos Register Device 5. Itroducimos el ombre e ideaficador (UDID) de uestro disposiavo 6. Pichamos CoAue y luego Register

20 IdeAficador de DisposiAvo Hay que itroducir el UDID o cofudir co Número de Serie Coectamos el disposiavo al ordeador Desde itues: Suele mostrar el úmero de serie, pichamos hasta que poga UDID Desde Xcode (si dispoemos de u Mac): Meu Widow -> Devices

21 5.- Perfil de Sumiistro Ya podemos obteer el Provisioig Profile E la secció Provisioig Profile pichamos e Añadir (+), relleamos los datos y bajamos el fichero geerado extesió:.mobileprovisioig

22 Descargar el Perfil de Sumiistro Desplegamos el perfil y pulsamos e Dowload Ya teemos el segudo fichero

23 Cofiguració PhoeGap Build Relleamos los campos Atulo GH1 por ejemplo ceraficado p12 CerAficados.p12 Debemos recordar la clave asigada al fichero perfil de sumiistros.mobileprovisio

24 Otras claves E PhoeGap Build -> Edit Accout podemos acceder a uestras claves firmadas

25 Recompilamos todo

26 Gracias por su ateció! G. Huecas

27 Aplicacioes FirefoxOS Jua Quemada, DIT, UPM 1

28 FirefoxOS FirefoxOS es el uevo SO para móviles y tabletas w Desarrollado por la Fudació Mozilla Sus aplicacioes se programa e HTML5, CSS y Javascript Recursos y tutoriales Jua Quemada, DIT, UPM 2

29 Apps FirefoxOS Aplicacioes para istalar e móviles y tabletas Fucioado co o si coexió a Iteret w Costruidas co tecologías Web: URLs, HTTP, HTML, CSS, JavaScript,... Tambié puede istalarse e PCs o avegadores Tipos de WebApps Firefox OS hosted: alojadas e u servidor packaged: se descarga empaquetadas w Hay tres tipos Plai: aplicacioes Web covecioales Certified: co acceso a alguos elemetos restrigidos Privileged: co acceso a todos los recursos del móvil Jua Quemada, DIT, UPM 3

30 Hosted Apps Webapps publicadas e modo ejecutable e u servidor Web Puede ejecutarse desde u avegador Además de ser publicadas e ua tieda a través de su URL w para su istalació e u dispositivo FirefoxOS Mas ifo: w Características Necesita coexió a Iteret para ser ejecutadas Solo puede haber ua hosted WebApp por domiio Web Se gestioa a través del objeto predefiido avigator.mozapps co métodos istall(...) o checkistalled(...) Jua Quemada, DIT, UPM 4

31 Packaged WebApps Webapps empaquetadas e u fichero ZIP Puede ser publicadas e ua tieda w para su istalació e dispositivos Firefox OS Mas ifo: w Se puede publicar e tiedas o e servidores Solamete se puede istalar w No se puede ejecutar directamete e u avegador Puede ser autoomas w Fucioado si coexió a Iteret Se istala a través del objeto predefiido avigator.mozapps co método istallpackage(...) Jua Quemada, DIT, UPM 5

32 Firefox Marketplace Firefox Marketplace permite crear tiedas de aplicacioes alojadas e servidores w Los Marketplace FirefoxOS puede competir etre si será más o meos populares w depediedo de la aceptació de los usuarios será más o meos seguras w depediedo del cotrol de la seguridad realizado Market places co apps de Mozilla Jua Quemada, DIT, UPM 6

33 Fial del tema Muchas gracias! Jua Quemada, DIT, UPM 7

34 Reloj SVG como App FirefoxOS Jua Quemada, DIT, UPM 8

35 Reloj SVG como App Icluimos el reloj SVG como hosted App packaged App Ambas está publicadas e Google Drive de asigatura w Jua Quemada, DIT, UPM 9

36 Arracar el simulador de FirefoxOS e Firefox Las apps se istala e el simulador icluido e Firefox Firefox icluye a partir de Firefox 30.0 u simulador de FirefoxOS w Se arraca seleccioado Tools -> Web Developer -> App Maager Después se arraca (Start Simulator) y se seleccioa la versió 1.4 (Firefox 1.4) w OJO! La app co el Reloj dada está probada e Firefox 1.4 y 1.3 y puede o fucioar e otras versioes Jua Quemada, DIT, UPM 10

37 Istalar hosted App e simulador FirefoxOS 2. Itroducir URL del istalador e el avegador y clicar (ejecutar istalador) 3. clicar e botó de istalar 6. Aplicació istalada 1. clicar para desplegar el avegador y poder istalar la hosted App 4. clicar para cofirmar istalació Jua Quemada, DIT, UPM 4. clicar para volver a escrit orio 11

38 Reloj SVG: hosted App Para crear ua hosted App co Reloj SVG se debe añadir a clock.htm: Icoos w que se mostrará e el escritorio Istalador w de la WebApp e el escritorio Maifiesto w co iformació de istalació El ejemplo sumiistrado icluye además estilos y tipografías Jua Quemada, DIT, UPM 12

39 maifest.webapp Fichero e formato JSON (JavaScript Object Notatio) Co iformació de istalació, recursos, diseñador, Los URLs so relativos co path absoluto JSON es u formato muy habitual para maifiestos versió ombre que aparece e el escritorio descripció para tieda URL de WebApp e servidor icoos escritorio equipo/empresa desarrolladora Jua Quemada, DIT, UPM 13

40 istall.html Jua Quemada, DIT, UPM 14

41 Istalar hosted App e simulador FirefoxOS 2. Itroducir URL del istalador e el avegador y clicar (ejecutar istalador) 3. clicar e botó de istalar 6. Aplicació istalada 1. clicar para desplegar el avegador y poder istalar la hosted App 4. clicar para cofirmar istalació Jua Quemada, DIT, UPM 4. clicar para volver a escrit orio 15

42 Reloj SVG: packaged App Compoetes Istalador w de la WebApp e el escritorio Maifiesto w co iformació de istalació del paquete App empaquetada w Zip co todos los ficheros de la App los mismos ficheros de la hosted App Salvo maifiesto: URLs relativos w OJO: Los ficheros debe empaquetarse si más, si estar e igú directorio Jua Quemada, DIT, UPM 16

43 package.maifest Fichero e formato JSON (JavaScript Object Notatio) Co iformacio sobre la webapp empaquetada JSON represeta datos como literales de objetos JavaScript Todos los datos está serializados e el fichero como u strig versio (igual al del maifest.webapp) ombre (igual al del maifest.webapp) URL a paquete e tieda equipo/empresa desarrolladora (igual al del maifest.webapp) Jua Quemada, DIT, UPM 17

44 idex.html Jua Quemada, DIT, UPM 18

45 Istalar packed App e simulador FirefoxOS 2. Itroducir URL del istalador e el avegador y clicar (ejecutar istalador) 3. clicar e botó de istalar 6. Aplicació istalada 1. clicar para desplegar el avegador y poder istalar la hosted App 4. clicar para cofirmar istalació Jua Quemada, DIT, UPM 4. clicar para volver a escrit orio 19

46 Fial del tema Muchas gracias! Jua Quemada, DIT, UPM 20

47 Ejercicio Empaquetar como App FirefoxOS, tato hosted, como packaged, el reloj aimado basado e SVG o e CANVAS (solo uo, el que se prefiera) propuestos como ejercicios P2P opcioales e los temas SVG y CANVAS. Publicar dichas apps e Google Drive para que se pueda istalar por terceros. Jua Quemada, DIT, UPM 21