ionic 2 y ionic 3: Crea apps para Android e iOS desde cero.

Aquí tendremos una idea de lo que haremos en esta sección

Una breve introducción para comprender conceptos y aclararnos el panorama

Aquí los voy a guiar para aprender como funciona la documentación de ionic 2

Vista guiada del paso a paso de la creación de una cuenta de ionic

Que son conocidas como las aplicaciones Legacy

Nota importante de la próxima clase

Una forma rápida de ver las aplicaciones corriendo en el dispositivo.

Puede que sea obvio, pero es bueno explicarlo.

Comandos útiles para trabajar con la versión vieja de ionic

Aquí crearemos nuestra primera aplicación de ionic 2

Hay una serie de comandos del CLI que es bueno que conozcamos de antemano.

La estructura de una aplicación de ionic 2 es la siguiente

Enlace e información útil

Aquí aprenderemos a utilizar ionic DevAPP para poder ver rápidamente nuestra aplicación en vivo en el dispositivo con cambios en tiempo real

Vamos a repasar unos conceptos básicos

Una breve descripción de la sección

Es una excelente práctica realizar esto, para saber que es lo que tenemos que hacer antes de comenzar a tirar código.

Ahora si empezaremos a tocar código de programación. (al fin!)

Empezaremos creando un listado de elementos utilizando el ion-list y ion-item para crear el aspecto de la aplicación

Utilizando las directivas estructurales de Angular, podemos crear items de una forma muy fácil.

Vamos a comenzar a trabajar con eventos simples para reproducir el sonido de los animales.

Vamos a mejorar el comportamiento de la aplicación para evitar que se monten sonidos y otras cosas.

Vamos a implementar otra función de ionic, para crear la función de eliminar cuando se desliza el dedo sobre un item de la lista,

Vamos a implementar un Refresher, para poder disparar un evento cuando jalamos la página.

Implementaremos el método de ordenamiento de las listas en ionic.

Examen para repasar los conocimientos adquiridos.

Código fuente de la sección.

Una breve introducción a lo que veremos.

Es importante aprender y comprender esto

Empezamos con un tema fundamental que necesitamos aprender

Vamos a cambiar la primera página que es cargada cuando nuestra aplicación es lanzada en nuestro dispositivo.

Vamos a comenzar a desplazarnos de una página a otra muy fácilmente usando el navController

Aprenderemos a enviar y recibir parámetros de una página a otra.

Aprenderemos a retornar a pantallas de forma controlada.

Aquí aprenderemos a agregar y utilizar los tabs de forma manual.

Creando modals, y diferentes formas de usarlo para obtener y recibir información del mismo.

De esta forma ionic nos permite crear lo que se conoce como un menú lateral.

Estas son dos formas de controlar el menú lateral

Podemos realizar ciertas configuraciones por defecto de ionic

Vamos a repasar el contenido visto hasta el momento

Les dejo el código fuente por si acaso tuvieron algún inconveniente.

Un resumen de lo que aprenderemos aquí

Aprenderemos a realizar pruebas en un iPhone, iPad o emulador iOS 

Aprenderemos a realizar pruebas en nuestro dispositivo Android o bien crear un emulador para probarlo ahí

Para afianzar los conocimientos, vamos a crear una aplicación pequeña con navegaciones y depuraciones.

El objetivo principal es dominar los conceptos básicos de las aplicaciones en ionic 2

Una posible solución al problema!

Aquí les dejo el código fuente de la aplicación hecha por si tuvieron algún problema

Un breve resumen de lo que aprenderemos aquí

Siempre es buena práctica, realizar un diagrama de las pantallas y acciones esperadas

Vamos a comenzar a crear la aplicación

Vamos a crear los tabs y también crear un modelo o clase, que nos ayudara a tener ordenado nuestros escaneos 

Nuestro primer recurso nativo - BarcodeScanner, aprenderemos a usarlo y a la vez explicaremos el uso de cualquier otro recurso nativo.

Crearemos un sistema para poder mostrar en pantalla los errores que vayan apareciendo en nuestra aplicación

Probaremos el lector QR en el dispositivo y también aprenderemos a realizar pruebas locales.

Aquí aprenderemos a utilizar servicios para poder manejar la data de diferentes formas.

Mostraremos un listado de los items guardados y abriremos el navegador nativo.

Aquí aprenderemos a trabajar con mapas de google para poder visualizar la ubicación cuando leemos coordenadas del QR.

Aquí aprenderemos a conectar y crear un API KEY para poder usar un mapa de google en nuestra aplicación

Trabajaremos en leer una Vcard de un contacto en un código QR para extraer la información que posteriormente servirá para crear un contacto en la agenda del dispositivo 

Vamos a crear un contacto en la agenda del dispositivo que estemos usando, basados en el código QR leído.

Esta tarea los pondrá a prueba con sus conocimientos adquiridos hasta el momento.

Una forma de resolver el problema

Aquí les dejo el código fuente de la aplicación que acabamos de crear

Una breve introducción a la sección

Siempre es buena práctica saber que es lo que tenemos que hacer antes de comenzar a tirar código

Seguiremos trabajando con las pantallas de nuestra aplicación

Vamos a realizar una conexión a Firebase para obtener información de los posts

Aquí tomaremos la información de Firebase y la colocaremos en nuestro homePage

Los pipes son una forma de modificar data de forma visual únicamente, lo podemos utilizar de la siguiente manera

Usaremos el recurso nativo de la cámara, para tomar una fotografía y mostrarla en pantalla, previo a la subida de la misma a Firebase

Similar a la cámara, podemos seleccionar fotografías del carrete de las imágenes del dispositivo.

Realizaremos el servicio que nos permitirá realizar cargas y crear registros en Firebase

Aprenderemos un par de cosas interesantes sobre Firebase

Aquí obtendremos la última imagen cargada en firebase, para guardar el lastkey

Ya no usaremos el observador de Firebase, sino, que haremos querys a Firebase para obtener los siguientes registros.

Vamos a cargar registros de forma paginada para poder mostrar más imágenes con forme vayamos bajando en nuestro scroll

La tarea será realizar e implementar la opción de compartir en Facebook

Realizaremos juntos la resolución de la tarea

Un breve resumen de lo que la sección contiene

Vamos a crear un proyecto para poder explicar todo lo que a continuación aprenderemos.

Aquí aprenderemos una serie de métodos que son ejecutados cuando nuestra página es creada, destruida o ya no se encuentra en la parte superior de la pila de páginas.

Vamos a crear 2 páginas adicionales, una de ellas usando el método tradicional y la otra usando características nuevas de ionic 3

Vamos a poner en práctica lo aprendido en la clase anterior

Muchas aplicaciones, cuando son iniciadas por primera vez, muestran un pequeño tutorial, aquí aprenderemos a hacer uno para nuestra app

Guardando en el storage del dispositivo información

Vamos a utilizar el servicio que creamos para determinar qué pantalla es la que se debe de mostrar al iniciar la aplicación

En esta clase vamos a aprender como grabar información en el storage nativo y a la vez, poder determinar cuando vamos a mostrar el slide inicial.

Dos conceptos necesarios para realizar acciones especificas.

¿Pensaron que se iban a salvar?

Vamos a resolver la tarea juntos, espero que lo lograran!

Les adjunto el código fuente por si acaso tuvieron algún problema siguiéndola.

Vamos a comenzar nuestro proyecto de envío de notificaciones

Antes de poder enviar notificaciones, necesitamos cumplir unos pre-requisitos que nos pide ionic

Requisitos únicamente para IOS

Requisitos únicamente para Android

Trabajaremos configurando nuestra app para recibir push notifications

Es hora de probar todo nuestro código

Aquí les dejo el código fuente de la aplicación.

Una breve introducción a lo que haremos en esta sección

Siempre es bueno realizar este diagrama, ya que nos ayuda a enfocarnos en realizar únicamente lo que necesitamos

Vamos a comenzar con nuestra aplicación de seguimiento!

Vamos a trabajar un poco con la estética y cómo debería de trabajar la pantalla login

Configuraremos Firebase y crearemos un servicio que nos permita controlar el acceso.

Vamos a almacenar la clave del usuario para poder verificar cuando existe o cuando no.

Vamos a cargar del storage del dispositivo para determinar si la clave del usuario existe para poder determinar si nos vamos al home o al login.

Vamos a trabajar con la ubicación y coordenadas del dispositivo, las cuales usaremos para mostrarlo en el mapa.

Vamos a grabar las coordenadas en Firebase, para ir actualizandolas cada vez que cambien

Trabajaremos con la interfaz de usuario para mostrar un mapa que siga los cambios de los valores del objeto de Firebase

Usaremos la información del observable de Firebase, para poder actualizar la información del home.

Vamos a realizar una serie de pruebas y también trabajar con el logout.

Vamos a crear rápidamente una aplicación que nos servirá para poder dar seguimiento a las personas que tengan la aplicación

Es una tarea simple, pero es necesario hacerlo para afianzar los conocimientos adquiridos

Esta es una forma de resolver la tarea

Vamos a realizar el seguimiento de los taxistas

Les facilito el código por si acaso tienen algún inconveniente