PROGRAMACION MULTIPLATAFORMA

UNIDAD Nº III
ADICION DE APIS Y DESPLIEGE EN AMBIENTES PRODUCTIVOS.
SEMANA 6 Introducción

Estimados alumnos, sean todos bienvenidos a la semana 6. Durante esta semana

veremos el proceso de compilación de nuestra aplicación desarrollada a lo largo del curso.
Hemos abarcado los temas de diseño de componentes, Apis de externo, interfaces,
desarrollo de Apis propias mediante Amazon Web Services con microservicios serverless.

Finalmente, logramos el proceso de inserción de datos consumiendo servicios REST

desde nuestra aplicación.

Como parte final, veremos el proceso de compilación en las diferentes plataformas móviles
disponibles, hasta la publicación de la app.

2
 Ideas Fuerza

Compilación de app: Es uno de los procesos finales de nuestra aplicación para ser
pasada a producción, Ionic nos ofrece mediante apache cordova las herramientas para
poder compilar nuestra aplicación desarrollada durante el curso.

Splash-screen: es un elemento en nuestra aplicación que funciona como pantalla de

inicio en una aplicación móvil, Ionic tiene una plantilla por defecto ubicada en la carpeta
resources, esta pantalla la podemos modificar a nuestro gusto según la necesidad del
cliente.

Despliegue de aplicación: Es la etapa final del proceso de desarrollo de nuestra

aplicación, en este proceso tendremos que compilar nuestra aplicación y además de
realizar la firma mediante una key(Google Play ) para que esta pueda ser subida a
Google play, generación de id app(AppStore) luego de un proceso de revisión por parte
de Apple nos permitirá subir nuestra aplicación a la appStore.

3
 Desarrollo
10. Construcción para el proceso de Producción

Antes de sumergirnos en los pasos, es necesario dar una mirada general, de alto nivel,
al proceso de desarrollo que ha permitido llegar a este punto y cómo diverge a medida
que termina su aplicación, y posteriormente sea publicada en las tiendas. Muestra todo
lo que se ha hecho, además de la pre publicación:

Ahora aprenderá a crear iconos e imágenes de pantalla de inicio para su aplicación, y

algunas de las cosas que se deben hacer para eliminar el código de desarrollo de su
aplicación antes de publicar.

Este es el flujo general para compilar y publicar para cada plataforma. Ambas plataformas
generalmente tienen los mismos pasos para construir una aplicación, pero en los detalles
difieren.

Para Android, se usará el enfoque de línea de comandos, y con iOS usará el IDE de Xcode.
Aunque se puede compilar para iOS desde el comando, y también podría usar el IDE de
Android Studio para compilar para Android.

4
Estos son los pasos generales para ambas plataformas:

• Necesita un mecanismo para firmar su aplicación para ambas plataformas. Para

Android esto está hecho con un almacén de claves, y para iOS esto se llama
identidad de firma. Pero ambos hacen lo mismo: agregan una firma al archivo de
compilación que luego puede ser utilizado para verificar el autor.

• Debe compilar y optimizar el archivo de compilación en ambas plataformas. Para

Android, se sube el archivo de compilación a través de la página del desarrollador
de Google Play, y para iOS, Xcode conecta y carga el archivo a tu cuenta.

En este punto, sólo darse cuenta de que los pasos subyacentes involucrados son muy
similares para ambas plataformas, pero los matices sobre cómo funcionan, varían y se
cubren con más detalle para cada plataforma.

Iconos de creación y activos de pantalla bienvenidas

A medida que los teléfonos han mejorado a lo largo de los años, la calidad de imagen de
los gráficos ha necesitado para mejorar también. Para adaptarse a esto, tanto Android como
iOS requieren que las aplicaciones proporcionen un número de diferentes tamaños para los
iconos y el gráfico de pantalla de salpicaduras de carga para adaptarse a los diferentes
tamaños de pantalla y resoluciones.

Por ejemplo, el iPhone 11 tiene una pantalla más grande proporcionan una imagen de
pantalla de inicio de carga que se adapta a ambos tamaños de teléfonos. Dispositivos
Android también tienen este problema, sobre todo porque en estos, existe una diversidad
mucho mayor en tamaños y resoluciones debido a los diferentes diseños de los fabricantes..
Crear imágenes para estas diferentes situaciones pueden requerir fácilmente docenas de

5
imágenes, por lo que se debe considerar es necesario hacer una versión para los modos
retrato y extendida, dependiendo de la orientación del dispositivo.

Debido a que es algo complejo crear tantas imágenes manualmente, Ionic implementó una
característica que toma un solo icono y una sola imagen de pantalla de inicio y genera los
diferentes tamaños que se necesitan para su aplicación. También registrará las imágenes
con el archivo cordova.xml, por lo que cuando se crea la aplicación, las imágenes se
vinculan correctamente.

Ionic es capaz de convertir los archivos utilizando su servicio remoto, por lo que sus
imágenes serán subidas a los servidores Ionic para su procesamiento. Esto significa que
no hay otras dependencias que necesita además de la interfaz de línea de comandos Ionic.
Las extensiones que soporta son: PNG, PSD (Photoshop) e AI (Illustrator).

Creación de iconos primarios

Para empezar, se necesita un gráfico de un icono, el que Ionic pueda usar para generar los
demás tamaño. Ionic requiere que se cree un icono que tenga al menos 192 píxeles
cuadrados, sin bordes redondeados. Te recomiendo que hagas el icono al menos de 1,024
píxeles cuadrados para que la calidad del icono siga siendo alta. Los iconos también se
modifican ligeramente para cada uno de los distintos dispositivos; por ejemplo, iOS puede
redondear los bordes del icono.

Estas son algunas de las consideraciones principales:

• Mantenga el icono simple. Los iconos no son muy grandes y deberían ser fáciles de
ver.

• Que sea memorable. El icono debe ser algo único representativo de su aplicación y
marca.

• Asegúrese de que se vea bien grande y pequeño. No te olvides de alejar y ver si

sigue siendo claro cuando es pequeño.

• Mantenga los colores simples. Evite usar muchos colores o colores que chocan.

6
Una vez que haya creado su icono y en un formato compatible, debe guardarlo en una de
las siguientes ubicaciones

Cada vez que desee generar los iconos, solo necesita ejecutar el siguiente comando Ionic:

Esto puede tardar unos momentos porque los archivos se cargan a los servidores de Ionic,
donde son convertidos, y descargado de nuevo en su proyecto. Una vez que esté completo,
debe revisar los iconos generados para confirmar que aparecen como desee para todos los
distintos tamaños.

11. Creando Imagen de pantalla de Bienvenida

La pantalla de bienvenida funciona muy similar al icono, excepto que hay un poco más de
complejidad al diseño de la pantalla de inicio. Los iconos solo se cambian de tamaño, pero
la pantalla de inicio es redimensionada y recortada para diferentes resoluciones y
orientaciones.

La fuente de pantalla de inicio debe ser de al menos 2.208 × 2.208 píxeles. Pero debería
limitar el diseño personalizado a un cuadrado en el centro alrededor de 1.200 × 1.200
píxeles.

Típicamente este cuadrado interior contiene algún tipo de logotipo de marca con un color
de fondo. No hay directrices claras para el uso de pantallas de inicio en iOS y Android, por
lo que debe considerar lo que proporcionará la mejor experiencia para sus usuarios.

7
Después de crear el gráfico de pantalla de bienvenida en un formato compatible, debe
guardarlo en una de las siguientes ubicaciones:

Para generar las imágenes de pantalla de inicio, ejecute el siguiente comando:

$ ionic resources –splash

8
Al igual que con los iconos, se cargará a los servidores Ionic para procesar las imágenes,
por lo que no hay que preocuparse por tener el software necesario en su máquina.

Si desea generar ambos iconos y pantallas de inicio a la vez, puede ejecutar el siguiente
comando:

$ ionic resources

Ahora que los iconos y las imágenes de pantalla de inicio están listas, es hora de preparar
la aplicación para el paso a producción.

12. Preparando la Aplicación para Producción

Hay algunas cosas que se debe comprobar para asegurarse de que la aplicación no tiene
nada innecesario, que puede ayudar a mejorar la velocidad y la estabilidad, y reducir el
tamaño del archivo de la aplicación. Ejecute sus pruebas automatizadas para asegurarse
de que incluso cuando se realice estos pasos, la aplicación sigue comportándose como se
esperaba.
Estos son algunos pasos que debe seguir antes de una publicación:

• Quite el plugin Cordova Console. Este plugin es parte de cómo Cordova le permite
depurar las aplicaciones, pero en producción no es necesario. Se debe quitar
ejecutando en la consola la siguiente sentencia: cordova plugin remove
org.apache.cordova.console

• Elimine los archivos innecesarios. Durante el desarrollo de la aplicación, puede

instalar o crear vistas adicionales que no termine usando. Quítelo desde la aplicación
para disminuir el tamaño del archivo.

• Elimine los archivos de biblioteca no utilizados. Ionic puede tener archivos instalados
en el directorio www/lib de su aplicación usando Bower, y a veces esos archivos de
9
 biblioteca también incluyen fuentes. Debe eliminar los archivos que no esté
utilizando.

• Comprima su código. Puede ejecutar su código a través de un sistema de

minificación JavaScript para ayudar a optimizar la ejecución y reducir el tamaño del
archivo.

• Comprima sus gráficos. Las imágenes pueden hacer que el tamaño del archivo de
la aplicación crezca. Intente comprimir los archivos y asegurarse de que no sean
más grandes de lo necesario.

La idea principal aquí es garantizar que todo esté listo para un uso generalizado. No
querrías que el código de depuración aparezca en tú aplicación, por ejemplo. Cuanto
más diligente seas sobre cómo mantener la aplicación limpia mientras se desarrolla, más
fácil será completar este paso.

13. Creación de aplicaciones de Android y publicación en Google Play

Ahora que tu aplicación está lista para ser creada en producción, hay algunos pasos que
se deben ejecutar para construirla en Android. Se deberá construir la aplicación usando
Cordova, firmar para verificar el origen y optimizar la aplicación creada. Se usará la línea
de comandos para ejecuta todos los pasos para Android, pero también puedes leer sobre
cómo usar Android Studio en http://mng.bz/T7G4. Utilizando la línea de comando.

Google Play Store es el lugar principal para publicar tus aplicaciones para Android. Para
realizarlo, necesitarás crear o vincular una cuenta de Google existente con Play Store
Developer Console.

10
A continuación, podrás crear un listado para tu aplicación que incluya el título, la
descripción, y otros detalles utilizados para categorizar y enumerar la aplicación. Una vez
que esté hecho, subirás el archivo APK de la aplicación Android creada y enviarás la
aplicación para revisión.

Configuración para firmar aplicaciones

Comience configurando un almacén de claves: un archivo que almacena de forma segura
la clave de seguridad que utilizará más tarde para agregar una firma a la aplicación.
Con la firma, el autor de la aplicación puede ser verificado a lo largo del tiempo. Puede leer
más sobre la firma en http://mng.bz/T7G4.

Creación de archivo para el lanzamiento

A continuación, construirá la aplicación con Cordova. El siguiente comando de compilación
construirá una versión lista para la versión de su aplicación:

$ cordova build --release android

Esto generará un nuevo archivo APK, que es el tipo de archivo de la aplicación Android,
dentro de plataform/Android/ant-build/cordovaapp-release-unsigned.apk. La línea de
comandos debe informar de la ruta exacta del archivo al archivo APK. Esta es una versión
sin firmar y lista para el lanzamiento de tú aplicación.

11
14. Optimizar el APK

El último paso es optimizar el archivo APK para que reduzca la cantidad de espacio y RAM
requerida por la aplicación en un dispositivo. La herramienta zipalign es de utilidad para
este trabajo: toma tu archivo APK firmado y crea una nueva versión APK optimizada que
deberás utilizar para cargar. Dentro del código, zipalign optimizará los bytes dentro para
una lectura óptima por los procesos del sistema operativo. Los detalles técnicos se pueden
encontrar en http://mng.bz/vWfu.
La herramienta zipalign solo toma el nombre del archivo firmado (recuerde, usted firmó el
archivo en su lugar y no ha cambiado el nombre de archivo en este ejemplo) y el nombre
del archivo que se va a generar. Cambia a KnowYourBrew.apk por el nombre de tu
aplicación:

$ zipalign –v 4 CordovaApp-release-unsigned.apk KnowYourBrew.apk

Cuando se genera el nuevo archivo, tiene una versión final de su aplicación Android que
puede usar para enviar a cualquier tienda Android. Ha terminado con la compilación inicial,
pero vamos a hablar rápidamente sobre cómo actualizar su aplicación.

15. Creación de aplicaciones iOS y publicación en la AppStore

Para compilar en iOS usando este proceso, deberá usar un Mac y Xcode, y tener una cuenta
de desarrollador de Apple configurada para el desarrollo de iOS.
Apple utiliza iTunes Connect como la forma de crear un listado en la AppStore y administrar
la aplicación. Agregará la lista de aplicaciones a iTunes Connect, rellena muchos detalles
como capturas de pantalla y metadatos, conecte Xcode para compilar y cargar su aplicación
y envíela para su revisión.

12
Si aún no ha configurado su cuenta de desarrollador de Apple y se ha registrado para Ios
Developer Program, tiene que hacer eso primero. Ir a
https://developer.apple.com/programs/ para registrarse; cuesta US$99/año formar parte del
Programa para desarrolladores de iOS.

Puede configurar una nueva cuenta para sus aplicaciones si tiene una cuenta personal
Apple.

Configurar certificados e ID

Una vez que tenga su cuenta, abre Xcode en tu Mac y ve a las preferencias. Si aún no ha
agregado su cuenta a Xcode en la pestaña Cuentas. Esto sincronizará Xcode con su
cuenta.
Comencemos con obtener una identidad de firma (también llamada certificado de
distribución). Esto es utilizado para firmar una aplicación y verificar que la aplicación fue
creada y enviada por la cuenta propietario. Puede revisar la documentación oficial sobre la
administración de certificados e identificadores en http://mng.bz/64k9. Los pasos básicos
son los siguientes:

1 Inicie sesión en su cuenta de desarrollador de Apple en Xcode si aún no lo ha hecho.

2 Vaya a Preferencias, administrar tu cuenta y certificados.

3 Cree una nueva identidad de firma específicamente para la distribución (no para el
desarrollo).

Ahora ha generado una nueva lista de aplicaciones que eventualmente estará disponible
para enviar a la AppStore. Se toma el ID de aplicación creada y lo conectas a este listado
de aplicaciones. Antes de completar todo lo que aparece en el listado, creará su aplicación
y la obtendrá cargado primero usando Xcode. Luego regresará para terminar la lista.

13
16. Crear y subir la aplicación con Xcode
Ahora que tiene un ID de aplicación y un listado de aplicaciones de iTunes Connect iniciado,
Xcode puede ayudar a construir y subir la aplicación. Primero se debe asegurarte de que el
proyecto Xcode hasta la fecha con su proyecto Cordova. Ejecute la tarea de compilación
de Cordova desde la raíz del proyecto en la línea de comandos:

$ cordova build ios --release

Esto asegurará que los últimos cambios de su proyecto estén configurados en el proyecto
iOS. Habiendo el archivo Platforms/IOS/AppName.XcodeProj en Xcode. Debería permitirte
ver los detalles acerca de su aplicación en la vista general, donde debe confirmar que las
cosas se ven como corresponde:

• El identificador del paquete debe coincidir con el valor especificado anteriormente en

el ID de la aplicación.

• Los números de versión y compilación deben reflejar lo que pretende que sea.
El equipo debe estar configurado en su cuenta de Apple.

• El destino de implementación y los dispositivos deben reflejar qué versiones y

dispositivos tienen la intención de apoyar.

Xcode es bueno al solicitarle que corrija ciertos errores si no ha configurado algo

correctamente. Revise cualquier mensaje de error y, en algunos casos, Xcode puede
incluso resolver para ti. También tendrá que asegurarse de que no tiene un dispositivo
conectado al ordenador.

14
 Ahora puede compilar la aplicación como un archivo (que es la aplicación incluida para
cargar), y luego lo subirá. La documentación completa se encuentra en
http://mng.bz/20m2. Los pasos generales son los siguientes:

1 Crear un nuevo archivo de su aplicación, que hará que una compilación de su

aplicación pueda se presentará más adelante.

2 Validar el archivo que acaba de crear, lo que asegurará que el archivo pueda ser
cargado correctamente y pasa las pruebas de validación.

3 Enviar la aplicación, la que enviará el archivo a iTunes Connect.

¡Ahora que ha terminado y subido su aplicación, solo tiene que completar el iTunes
Connect y enviarlo para su revisión!

ionic cordova build :

Al igual que ejecutar cordova build directamente, pero también crea archivo web con
configuración desde ionic build y proporciona comprobaciones amigables.

Para pasar opciones adicionales a la CLI de Cordova, use el --separador después de los
argumentos de la CLI de Ionic.

La CLI de Cordova requiere un separador para los argumentos específicos de la plataforma

para las compilaciones de Android, por lo que se requiere un separador adicional para la
CLI de Ionic, pero no es necesario para las compilaciones de iOS. Vea los comandos de
ejemplo para usar con separadores. Para evitar usar banderas, considere usar –buildConfig
con un archivo build.json.

15
Input

platform

Descripción La plataforma para construir (por ejemplo android, ios)

Opciones

--no-build

Descripción No invocar una compilación iónic

--debug

Descripción Marcar como una compilación de depuración

-release

Descripción Marcar como una versión de lanzamiento

16
 -device

Descripción Implementar una compilación en un dispositivo

--emulator

Descripción Implementar una compilación en un emulador

Opciones avanzadas

--buildConfig=<file>

Descripción Use la configuración de compilación especificada

--configuration=<conf>

Descripción Especifique la configuración a utilizar.

Alias -c

--source-map

Descripción Mapas de origen de salida

17
17. Preparación de recursos en ionic

Con el siguiente comando:

ionic cordova resources

Ionic puede generar automáticamente iconos y pantallas de presentación a partir de

imágenes con formato ( .png , .psd o .ai ) para sus plataformas Cordova.

La imagen de origen para los iconos debería ser idealmente de al menos 1024 × 1024px
y estar ubicada en la ruta resources/icon.png. La imagen de origen para las pantallas de
bienvenida debería ser idealmente de al menos 2732 × 2732px y ubicada en la ruta
resources/splash.png. Si tu usaste el comando ionic start, los recursos deberían haber
sido creados de forma predeterminada en el directorio resources/, donde se puede
sobrescribir.

También se pueden generar iconos específicos de la plataforma y pantallas de

presentación colocándolos en los respectivos recursos / <plataforma> / directorio. Por
ejemplo, para generar un icono en Android, coloca tu imagen en resources / android /
icon.png .

Entradas

platform

Descripción The platform for which you would like to generate resources
(ios, android)

18
Opciones

-icon

Descripción Generar recursos de íconos

Alias -i

--splash

Descripción Generar recursos de pantalla de bienvenida

Alias -s

--no-cordova-res

Descripción No generar recursos localmente; usar servidores iónicos

19
--force

Descripción Fuerza de regeneración de recursos

Aliases -f

20
 Conclusión

En conclusión, mediante los procesos de compilación es posible desplegar con cordova

en distintas plataformas, esto nos permite tener un control sobre las versiones y
cumplimento de los estándares a nivel de firma de nuestras aplicaciones desarrolladas en
ionic, que vimos a lo largo del curso.

21
 Bibliografía

• Jeremy Wilken. (2016). Ionic in Action. New York: Manning.

• IonicFramework. (2019). Ionic cordova plugin. De IonicFramework Sitio web:

https://ionicframework.com/docs/cli/commands/cordova-plugin

• Android. (2019). Firma tu app. De Android Sitio web:

https://developer.android.com/studio/publish/app-signing?hl=es-419

• Android. (2015). Introducción a Android Studio. De Android Sitio

web: https://developer.android.com/studio/intro

22
23