Capacitación formadores Generación de

capacidades en el Ecosistema Digital de

Bogotá

Formación especializada TI
 Ionic
Framework Front-end
Conectarse a un api
Vamos a consumir el mismo servicio que habíamos hecho en angular, para
consumir el api de artículos. Así que vamos primero a crear un proyecto y luego
vamos a incorporar los servicios que necesitamos.
Servicios y Providers
HttpClient

Es importante agregar HttpClientModule en el archivo app.module.ts el uso de este módulo es

necesario dentro de la aplicación usaremos la dependencia HttpClient

Crear el provider

Para la rápida creación de providers vamos a usar el generador de ionic

ionic g provider user-service

ionic creará un archivo para nuestro servicio que estará en
src/providers/user-service.ts:
Recuerda que debes agregar este provider dentro del array providers en app/app.module.ts
Crear providers
Generamos los providers para usuarios y artículos y podemos traer las mismas
funciones que ya habíamos creado en nuestro proyecto de angular para
consumir el API creada en Ruby on Rails.
Provider usuarios
Provider articulos
Creemos algunas paginas
Ahora que ya tenemos los providers definidos vamos a crear los componentes
desde los cuales vamos a consumir estos recursos, iniciemos con las páginas
que necesitamos para loguearnos o crear cuenta.
Definición iniciar sesión
Vista iniciar sesión
Definición crear cuenta
Vista crear cuenta
Validación pagina de inicio
Vamos a crear algunos botones en la pagina de inicio para iniciar
sesión, crear cuenta, cerrar sesión y entrar a la página de
artículos. Así que vamos a crear una variable bandera de login
para comprobar cuales botones se deben mostrar, al igual que en
angular la validación la vamos a hacer con localStorage.
Vista pagina de inicio
Usamos ngIf para verificar
cuales botones debemos
mostrar.
ionViewCanEnter()
Para crear guards en Ionic debemos apoyarnos en el método ionViewCanEnter,
este método se ejecuta antes de cargar la pagina. Si este método retorna falso
no se cargara la pagina, en caso contario si.

Primero creemos la página desde donde vamos a traer los artículos.

Guard traer artículos
En nuestro caso vamos a validar si un
usuario ya inicio sesión para permitirle ver
los artículos. Si ya existe la variable de
sesión se va a cargar la pagina, sino
mostraremos un alert y no se va a cambiar
de página.

Como probablemente debamos usar esta

misma validación en varias páginas
podríamos crear un método en algún servicio
y llamarlo cada vez que necesitemos.
Consumir provider articulos
Ya sabemos como consumir servicios en Angular, vamos a realizarlo de la
misma manera en ionic desde nuestra página(componente) de Ionic.
Pagina ver Articulo
Esta página va a funcionar de una manera similar a la anterior, con la diferencia
de que ahora vamos a pasar un parámetro a la pagina. Para hacer esto desde
verArticulos en el método push vamos a enviar un parámetro de la siguiente
manera:
Recibir parametro
Para recibir parámetros lo hacemos mediante el servicio navParams desde su
método get().
Ver un articulo
Eliminar un articulo
Desde la vista de ver artículo vamos a eliminarlo. Agreguemos un botón y
consumamos el método delete de nuestro servicio. Para agregar una pequeña
confirmación usemos las opciones avanzadas de un alert.
Editar articulo
Vamos a crear una nueva página y en esta vamos a obtener nuevamente un parámetro id, por medio del
cual vamos a traer un articulo y luego mediante un botón en un formulario lo vamos a editar.
Estilos formulario
Probablemente el resultado de los estilos de nuestro formulario no sea el
esperado, ya que los textarea en ionic no lucen muy bien. Pero, recuerda que
tenemos CSS disponible para adecuarlo a nuestras necesidades.
Crear articulo
Finalmente creemos una página para crear artículos, a la cual podemos acceder
desde la página de ver todos los artículos. En este vamos a consumir el método
create de nuestro servicio y vamos a redirigir a ver el articulo creado.
Despliegue de aplicaciones con cordova
Probar su aplicación en el navegador con ionic serve o con un emulador es rápido, fácil y conveniente
cuando su aplicación está en desarrollo, pero eventualmente tendrá que probar en un dispositivo. No
solo es la única forma de probar con precisión cómo se comportará y cómo se comportará tu
aplicación, muchos complementos de Ionic Native solo funcionarán cuando se ejecuten en hardware
real.

Dispositivos Android
Desplegar en un dispositivo Android es un proceso bastante sencillo. Si tiene un entorno de desarrollo
de Android que funcione, ya está listo.
Requisitos
● Java JDK
● Estudio Android
● Herramientas de Android SDK actualizadas, plataformas y dependencias de componentes.
Disponible a través del SDK Manager de Android Studio
dispositivos iOS
A diferencia de Android, los desarrolladores de iOS necesitan generar un perfil de aprovisionamiento
para firmar con código sus aplicaciones para realizar pruebas. La buena noticia es que, a partir de iOS9,
puede desarrollar y probar sus aplicaciones en su dispositivo iOS sin una cuenta paga de Desarrollador
de Apple. Esto es particularmente bueno para los desarrolladores que desean probar el desarrollo móvil
con Ionic, ya que ahorra el costo pero aún ofrece muchas de las características de tener una cuenta de
Desarrollador de Apple completa. Para ver un desglose completo de las características incluidas,
consulte los documentos de Apple .

Requisitos
● Xcode 7 o superior
● iOS 9
● Una identificación de Apple gratuita o una cuenta de desarrollador de Apple paga
Agregar Plataformas
Al crear un proyecto nuevo de Ionic si tenemos instalado cordova el nos
preguntara si queremos agregar las plataformas para el despliegue, si
confirmamos esta instrucción no debemos hacer nada adicional para iniciar la
compilación. Sino lo hicimos basta con agregar el siguiente comando.

Ionic platform add ios

Ionic platform add android

Instalar Android Studio
Como vimos en los requisitos necesitamos Android Studio para compilar nuestra
aplicación en un APK. Para descargarlo vamos a la página oficial de Android
developers.

https://developer.android.com/studio/
Despliegue de android
Ahora que nuestra aplicación esta completa veamos como se hace el despliegue
en apps nativas para los diferentes sistemas operativos a través de cordova.
Para el caso de Android simplemente debemos ejecutar el comando:

Luego de unos minutos se generará un proyecto en java equivalente a nuestro

código de Ionic. Y si tenemos correctamente configurado Android Studio
también encontraremos dentro del proyecto Android un Build en APK
Recurso recomendado
● https://creator.ionic.io

Creator es una sencilla herramienta de arrastrar y soltar para pasar de la

idea al App Store , con solo arrastrar el mouse.