PhoneGap

Build
Conguracin para Generacin de
Aplicaciones iOS
Gabriel Huecas

27 de enero de 2016

ObjeAvo
Congurar PhoneGap Build para que genere
una aplicacin naAva iOS
Son muchos pasos, pero es necesario disponer de
un disposiAvo Apple que habr que registrar

ndice

Ficheros necesarios en PhoneGap Build

CerAcado de desarrollador Apple
Perl de Suministro
Conguracin de PhoneGap Build

Compilacin en PhoneGap Build

Para iOS no tenemos
cerAcado
No key selected
se muestra un mensaje
de error

Ficheros requeridos
Al pulsar en no key
selected debemos
proporcionar:
un Atulo o idenAcador
podemos tener varias
claves

Un cerAcado de
desarrollador de Apple
en formato p12

Un perl de suministro
provisioning prole

Pasos
1.
2.
3.
4.
5.

ID de Apple
Licencia de Desarrollo
CerAcado de Desarrollador
Registrar el DisposiAvo Apple
Perl de Suministro

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

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 / ao

CerAcado de Desarrollador Apple

Apple proporciona dos Apos de cerAcado
desarrollador y distribuidor
necesitamos el primero

Las aplicaciones han de estar rmadas por un

cerAcado vlido para poder:
ejecutar en disposiAvo Apple
publicar en AppStore

3.- Obtencin del CerAcado

Accedemos al
IOS Provisioning Portal
h]ps://developer.apple.com
Pulsamos en Member Center,
introducimos el ID de Apple
Pulsamos en CerAcates, IdenAers & Proles

 Despus en
CerAcates
Y desplegamos
CerAcates
Development
Y el la esq sup. derecha,
pinchamos el botn
Aadir (+)

 Seleccionamos iOS App Development y ConAnue

Se nos solicita un archivo CSR (CerAcate Signing
Request) o Solicitud de Firma de CerAcado
vienen las instrucciones de cmo hacerlo

Archivo CSR
Hay muchas herramientas de gesAn de
cerAcados,
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 CerAcados de IE, Firefox,

Generar CSR en Mac OS X

Abrimos Acceso a Llaveros

En Aplicaciones -> UAlidades

En el men principal Acceso a Llaveros

seleccionamos Asistente para CerAcados
Seleccionamos Solicitar un cerAcado de una
autoridad de cerAcacin

Rellene el formulario
Introduzca su
direccin de correo
Su nombre
Seleccione guardar
en disco
y pulse ConAnuar

Obtenemos el
chero CSR

Solicitar el cerAcado
Volvemos a la web de desarrolladores de
Apple y subimos el chero CSR
Pulsamos el botn Generate
Nuestro cerAcado est listo para instalar
pulsamos en Download, salvamos el chero .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

CerAcado listo
En CerAcates -> Development podemos
ver nuestro cerAcado y la fecha de
expiracin
si pinchamos, aparece informacin adicional

Formato p12
El cerAcado est listo, pero PhoneGap Build
exige formato p12
En Acceso a Llaveros -> CerAcados
Men contextual sobre iPhone Developer
Seccionamos la opcin Exportar
Nos pedir una clave, hay que recordarla para poder
subirla a PhoneGap Build

4.- Registrar el disposiAvo

En Member Center:
1. En CerAcates, IdenAers & Proles,
seleccionamos Devices
2. Seleccionamos All
3. Pinchamos el botn Aadir (+) en la esquina
superior derecha
4. Seleccionamos Register Device
5. Introducimos el nombre e idenAcador (UDID)
de nuestro disposiAvo
6. Pinchamos ConAnue y luego Register

IdenAcador de DisposiAvo
Hay que introducir el UDID
no confundir con Nmero de Serie

Conectamos el disposiAvo al ordenador

Desde iTunes:
Suele mostrar el nmero de serie, pinchamos
hasta que ponga UDID

Desde Xcode (si disponemos de un Mac):

Menu Window -> Devices

5.- Perl de Suministro

Ya podemos obtener el Provisioning Prole
En la seccin Provisioning Prole pinchamos
en Aadir (+), rellenamos los datos y bajamos
el chero generado
extensin: .mobileprovisioning

Descargar el Perl de Suministro

Desplegamos el perl y
pulsamos en Download
Ya tenemos el segundo
chero

Conguracin PhoneGap Build

Rellenamos los campos
Atulo
GH1 por ejemplo

cerAcado p12
CerAcados.p12
Debemos recordar la clave
asignada al chero

perl de suministros
.mobileprovision

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

Recompilamos todo

Gracias por su atencin!

G. Huecas
Twi]er: @ghuecas
www.dit.upm.es/~gabriel

Aplicaciones FirefoxOS

Juan Quemada, DIT, UPM

FirefoxOS
FirefoxOS es el nuevo SO
n

para mviles y tabletas

w Desarrollado por la Fundacin Mozilla

Sus aplicaciones se programan en

n

HTML5, CSS y Javascript

Recursos y tutoriales
n

https://marketplace.firefox.com/developers/docs/firefox_os

n
n

https://marketplace.firefox.com/developers/docs/quick_start
https://developer.mozilla.org/es/docs/Aplicaciones/Comenzando_aplicaciones

https://developer.mozilla.org/en-US/Apps/Reference
Juan Quemada, DIT, UPM

Apps FirefoxOS
Aplicaciones para instalar en mviles y tabletas
n

Funcionando con o sin conexin a Internet

w Construidas con tecnologas Web: URLs, HTTP, HTML, CSS, JavaScript, ...

Tambin pueden instalarse en PCs o navegadores

Tipos de WebApps Firefox OS

n
n

hosted:
alojadas en un servidor
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 mvil

Juan Quemada, DIT, UPM

Hosted Apps
Webapps publicadas en modo ejecutable en un servidor Web
n
n

Pueden ejecutarse desde un navegador

Adems de ser publicadas en una tienda a travs de su URL
w para su instalacin en un dispositivo FirefoxOS

Mas info:
w https://developer.mozilla.org/en-US/Marketplace/Options/Hosted_apps

Caractersticas
n
n

Necesitan conexin a Internet para ser ejecutadas

Solo puede haber una hosted WebApp por dominio Web

Se gestionan a travs del objeto predefinido navigator.mozApps

n

con mtodos install(....) o checkInstalled(....)

Juan Quemada, DIT, UPM

Packaged WebApps
Webapps empaquetadas en un fichero ZIP
n

Pueden ser publicadas en una tienda

w para su instalacin en dispositivos Firefox OS

Mas info:
w https://developer.mozilla.org/en-US/Marketplace/Options/Packaged_apps

Se pueden publicar en tiendas o en servidores

n

Solamente se pueden instalar

w No se pueden ejecutar directamente en un navegador

Pueden ser autonomas

w Funcionando sin conexin a Internet

Se instalan a travs del objeto predefinido navigator.mozApps

n

con mtodo installPackage(....)

Juan Quemada, DIT, UPM

Firefox Marketplace
Firefox Marketplace permite crear
n

tiendas de aplicaciones alojadas en servidores

w https://developer.mozilla.org/en-US/Marketplace

Los Marketplace FirefoxOS pueden competir entre si

n

sern ms o menos populares

w dependiendo de la aceptacin de los usuarios

sern ms o menos seguras

w dependiendo del control de la seguridad realizado

Market places con apps de Mozilla

n

https://marketplace.firefox.com
Juan Quemada, DIT, UPM

Final del tema

Muchas gracias!

Juan Quemada, DIT, UPM

Reloj SVG como App FirefoxOS

Juan Quemada, DIT, UPM

Reloj SVG como App

Incluimos el reloj SVG como
n
n

hosted App
packaged App

Ambas estn publicadas en

n

Google Drive de asignatura

w https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/
Juan Quemada, DIT, UPM

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

Despus se arranca (Start Simulator) y se selecciona la versin 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

Instalar hosted App en simulador FirefoxOS

2. Introducir URL del instalador en el navegador y clicar (ejecutar instalador)

https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/hosted/install.htm
3. clicar en botn de instalar

6. Aplicacin
instalada

4. clicar para
confirmar instalacin
1. clicar para desplegar el navegador
y poder instalar la hosted App
Juan Quemada, DIT, UPM

4. clicar para
volver a escritorio

11

Reloj SVG: hosted App

Para crear una hosted App con
Reloj SVG se debe aadir a
clock.htm:
n

Iconos
w que se mostrarn en el escritorio

Instalador
w de la WebApp en el escritorio

Manifiesto
w con informacin de instalacin

El ejemplo suministrado incluye

adems estilos y tipografas
Juan Quemada, DIT, UPM

12

manifest.webapp
Fichero en formato JSON (JavaScript Object Notation)
n

Con informacin de instalacin, recursos, diseador,

n Los URLs son relativos con path absoluto

JSON es un formato muy habitual para manifiestos

versin

nombre que aparece en el escritorio

descripcin para tienda
URL de WebApp en servidor

iconos escritorio
equipo/empresa desarrolladora
Juan Quemada, DIT, UPM

13

install.html

Juan Quemada, DIT, UPM

14

Instalar hosted App en simulador FirefoxOS

2. Introducir URL del instalador en el navegador y clicar (ejecutar instalador)

https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/hosted/install.htm
3. clicar en botn de instalar

6. Aplicacin
instalada

4. clicar para
confirmar instalacin
1. clicar para desplegar el navegador
y poder instalar la hosted App
Juan Quemada, DIT, UPM

4. clicar para
volver a escritorio

15

Reloj SVG: packaged App

Componentes
n

Instalador
w de la WebApp en el escritorio

Manifiesto
w con informacin de instalacin del

paquete
n

App empaquetada
w Zip con todos los ficheros de la App

los mismos ficheros de la hosted App

n Salvo manifiesto: URLs relativos
w OJO: Los ficheros deben empaquetarse
sin ms, sin estar en ningn directorio
n

Juan Quemada, DIT, UPM

16

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 estn 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

index.html

Juan Quemada, DIT, UPM

18

Instalar packed App en simulador FirefoxOS

2. Introducir URL del instalador en el navegador y clicar (ejecutar instalador)
https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/packed/
3. clicar en botn de instalar

6. Aplicacin
instalada

1. clicar para desplegar el navegador

y poder instalar la hosted App

4. clicar para
confirmar instalacin

Juan Quemada, DIT, UPM

4. clicar para
volver a escritorio

19

Final del tema

Muchas gracias!

Juan Quemada, DIT, UPM

20

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