
Una breve introducción al curso
Aquí explicaremos cómo vamos a llevar el curso y sus diferentes secciones
Instalaciones que necesitaremos para seguir el curso
Breve introducción a la sección
Un resumen puntual de los temas que aquí tocaremos
Una breve introducción sobre las aplicaciones híbridas
Una comparación lógica entre los pro y contras de cada una
Aquí empezaremos a conocer un poco más de ionic
Crearemos nuestra primera aplicación de ionic y la haremos correr en el navegador web
Detalle de todos los directorios y archivos que se encuentran en un proyecto de ionic
Detallamos los demás directorios de un proyecto de ionic
Una forma de ver simultáneamente IOS, Android y Windows Phone a la vez
Aquí les dejo el código fuente del programa como se encuentra en este momento
Un resumen puntual de lo que veremos a continuación
Empezaremos un proyecto utilizando Angular CLI
Navegaremos entre componentes mediante un menú que haremos
Manejando un módulo de páginas
Aquí implementaremos toda una ruta que cargue de forma perezosa
Aquí mostraremos la información de los posteos en el componente POSTS
De esta forma podemos enviar información al componente hijo
Un resumen puntual de los temas que vamos a cubrir en esta sección
Un resumen puntual de los temas que aquí veremos
Aquí comenzaremos oficialmente nuestra primera aplicación de ionic
Aquí aprenderemos a cambiar la pantalla de inicio de nuestra aplicación
Aquí aprenderemos como crear el botón para regresar a la página anterior
Aquí vamos a trabajar reutilizando el header en nuestras páginas
Aquí vamos a aprender a crear una lista
Aquí pueden descargar el código fuente de la sección para futuras referencias
Temas puntuales que cubriremos en esta sección
Aquí les mostraré la aplicación funcionando que haremos en esta sección
Aquí les mostraré cómo continuar el proyecto anterior en caso de que no lo tuvieran
El action sheet, es una ventana de diálogo que muestra opciones en la aplicación, debe ser manualmente despachada y aparece super puesta en la aplicación
La alerta, es un control que se pone sobre la pantalla, bloqueando las interacciones del background y obligando al usuario a seleccionar una opción
Un elemento de ionic que nos permite colocar una imagen circular en un elemento
Aquí utilizaremos los botones de ionic con sus diferentes propiedades
Aquí aprenderemos a utilizar el componente de cards en ionic
Componente especializado para la selección de fechas
Aquí vamos a personalizar varios ion-datetimes para que se adapte a lo que necesitamos
Aquí aprenderemos a colocar los botones flotantes o FABS
Uso del grid de ionic para diseños responsive
Aquí controlaremos el ancho que queremos darle a cada columna en diferentes dispositivos
Manejando el scroll infinito
Aquí usaremos inputs para capturar información del usuario
Empezaremos la listas y sus opciones de slides
Aquí aprenderemos a utilizar el ion-item-sliding
Una elegante forma de ordenar listas
Un elemento utilizado para hacer esperar al usuario hasta que una tarea termine
Es momento de añadir el menú a nuestra aplicación
Aquí aprenderemos a controlar las acciones del menú
Aquí trabajaremos creando una pantalla modal, y su envío de información entre padre-hijo e hijo-padre
Este es un elemento que nos permite mostrar información sobre la página actual y a la vez tener interacciones personalizadas
Usaremos un video para explicar ambos componentes, son bastante simples de usar y elegantes
Es un control utilizado para realizar pull y cargar datos
Un elemento muy usado para realizar búsquedas en una lista
Aquí vamos a crear un Pipe y un módulo que nos permitan filtrar la información de la lista
Aquí utilizaremos este componente para trabajar con selecciones
Este elemento es lo que se está usando actualmente para mostrar al usuario un tipo de loading
Aquí aprenderemos a trabajar con los slides de ionic, que realmente es una implementación de idangero.us
El Split pane nos permite tener dos elementos en pantalla simultáneamente, en este caso queremos nuestro menú y el root principal de nuestra aplicación
Aquí aprenderemos a integrar los tabs en nuestra aplicación
Aquí vamos a trabajar con el ion-toast, que es usado para mostrar información sin bloquear la aplicación
Una breve introducción de lo que veremos en esta sección
Un resumen puntual de los temas que veremos a continuación
Aquí realizaremos la configuración mínima necesaria para probar nuestras apps directamente en los dispositivos
Aquí aprenderemos a configurar Android Studio y nuestro equipo virtual
Aquí aprenderemos a correr nuestra aplicación de ionic en la máquina virtual que creamos en el video pasado
Esta es otra forma de correr la aplicación en el emulador de Android
Aquí correremos la aplicación en un android real
Aquí realizaremos las instalaciones necesarias para poder ejecutar nuestra app en IOS
Aquí aprenderemos a correr nuestra aplicación en un emulador de iox
Aquí aprenderemos a emular la aplicación en IOS sin abrir el proyecto de Xcode
Aquí aprenderemos a correr nuestra aplicación en un iPhone real
Un resumen puntual de lo que veremos en esta sección
Aquí tenemos los temas que cubriremos en esta sección
Demostración de la aplicación funcionando
Comenzaremos la creación de nuestra aplicación de noticias
Aquí comenzaremos nuestro primer servicio para consumir la información de la API de newsapi.org
Aquí aprenderemos una forma muy rápida para manejar la estructura de la información que retorna una API
Vamos a mostrar los artículos de las noticias en nuestra aplicación
Aquí vamos a crear dos componentes que nos permitan reutilizar la estructura que acabamos de crear
Aquí empezaremos a trabajar con la página de encabezados
Aquí puliremos nuestro servicio para que podamos reutilizar mejor el código actual
Aquí crearemos la funcionalidad para poder crear un scroll infinito en nuestras páginas
Aquí haremos un infinite scroll por categoría
Aquí aprenderemos a abrir la noticia en el navegador por defecto del dispositivo
Aquí vamos a crear un action-sheet para desplegar opciones en las noticias
Aquí aprenderemos a compartir información en redes sociales y todo lo que tenga disponible el dispositivo
Aquí aprenderemos a guardar información físicamente en el dispositivo
Aquí leeremos las noticias que guardamos en el storage
Una breve introducción a la sección
Temas puntuales que veremos en esta sección
Aquí comenzaremos la preparación de nuestro ejercicio que convertiremos en una PWA en esta sección
Seguiremos el tutorial que la gente de ionic nos facilita para publicar una PWA
Aquí vamos a preparar nuestra aplicación para desplegarla en un hosting
Aquí usaremos un servicio de Firebase para desplegar nuestra aplicación en la nube y poderla probar en un dispositivo móvil
Aquí mostraremos como funciona nuestra PWA en un dispositivo móvil
Aquí usaremos la función del Share API para compartir información de las noticias
Les dejo el código fuente de la sección para que puedan usarlo para verificar contra el suyo
Si desean saber más sobre PWAs, tengo un curso dedicado al mismo tema
Una breve introducción sobre lo que haremos en esta sección
Temas puntuales que aprenderemos en esta sección
Este es el resultado final de la aplicación que crearemos en esta sección
Aquí comenzaremos a crear nuestra aplicación de peliculas
Necesitaremos un API Key para poder utilizar TheMovieDB API
Aquí comenzaremos a consumir nuestra API para traer las películas de estreno
Aquí vamos a crear la interfaz de la respuesta de TheMovieDB
Aquí vamos a agrupar nuestros pipes en un módulo y usarlo para mostrar las imágenes de las peliculas
Es momento de optimizar la aplicación para tener URLs centralizados y mejorar la forma de realizar peticiones HTTP
Aquí vamos a realizar un ejercicio de optimizar nuestros slideshows
Es momento de crear otro arreglo de películas, pero en esta ocasión serán las populares
Aquí aprenderemos a crear un arreglo de dos películas por slide
Aquí aprenderemos una forma de cargar más slides al slideshow de películas populares
Aquí abriremos un modal con los detalles de la película que deseamos.
Aquí utilizaremos servicios de TheMovieDB para traer el detalle de la película y los actores de la misma
Aquí vamos a mostrar el detalle de la película
Aquí crearemos el diseño de la página de búsqueda de películas
Aquí vamos a trabajar haciendo una consulta al API de TheMovieDB para traer todos los resultados de la película buscada
Es momento de trabajar la página de la búsqueda de películas
Es momento de guardar la información en el storage
Es momento de implementar una pequeña validación para controlar los posibles duplicados
Aquí tenemos que trabajar en dos métodos, uno para cargar las películas del storage y otro para verificar si existe una película en el arreglo de películas favoritas
Aquí crearemos una pantalla para mostrar los favoritos
Aquí vamos a realizar la tarea de agrupar los favoritos por género
Un pequeño detalle
Pueden descargar el código fuente realizado en esta sección
Nota Legacy:
Despúes de varios años desde el lanzamiento inicial de este curso, queremos informarte que el mismo ha pasado a ser versión legacy. Esto implica que su contenido no recibirá actualizaciones adicionales y nuestro equipo de Co-instructores no continuará proporcionando soporte a preguntas relacionadas a este curso.
Entendemos que en algunos entornos todavía se utiliza la versión del framework / tecnología que se presenta en este curso. Por lo tanto, puedes realizar el curso sin problemas, aunque es posible que te encuentres con diferencias entre lo que se muestra en el video y su uso en la actualidad.
Te invitamos a unirte a nuestra comunidad en Discord, donde podrás recibir apoyo y resolver tus dudas.
Agradecemos tu comprensión.
Acerca de este curso:
ionic es un framework que nos permite tomar nuestro conocimiento de Angular y crear aplicaciones multiplataforma que pueden correr en Android, IOS, convertirse en una PWA o crear una aplicación web, todo con un mismo repositorio de código.
Este es un curso sumamente completo que abarca todos los temas necesarios para crear aplicaciones y desplegarlas en Google PlayStore o Apple AppStore, sin contar que también haremos PWAs y despliegues en la web de nuestras aplicaciones.
Puntualmente, estos son los temas que cubrimos en el curso:
ionic framework desde cero
Conceptos importantes de Angular (componentes, lazyload y módulos)
Creación de aplicaciones reales
Creación de PWAs
Diseño adaptativo
Firebase Hosting
Push Notification Grupales
Push Notification a usuarios en específico
Uso la página de Onesignal para envío de mensajes grupales
Uso de la API de OneSignal para mensajes push automáticos o controlados
Explicación de la mayoría de componentes de ionic con su respectiva configuración
CRUD
Generación de un backend propio
Manejo y creación de JsonWebTokens
Subida de archivos
Consumo de diversas APIS
Aplicaciones verticales y horizontales
Aplicaciones con diseños atractivos
Uso de Mapbox para mapas
Uso de Plugins de cordova
ShareAPI de Google
Mapbox API
Compartir en Redes sociales y cualquier otra aplicación instalada en el móvil
Generación de Archivos de texto y envío de los mismos
Despliegue de aplicaciones en Apple AppStore
Despliegue de aplicaciones en Google PlayStore
Alphas y Betas de Google
Test Flight de Apple
Configuración de simuladores para IOS y Android
Uso del DevApp
Storage Nativo
indexedDB
Animaciones personalizadas
Y muchos otros temas más
Este es un curso extenso con muchas clases y tareas, muchas aplicaciones y ejercicios para asegurar el aprendizaje del framework haciendo ejercicios prácticos y reales, todo lo haremos de cero, cada línea de código será explicada y ustedes mismos lo harán y probarán para que vean los resultados por ustedes mismos.
Es importante que deben de tener una pequeña base de Angular (Angular 2 o superior) para poder seguir el curso sin problemas.
No se olviden de ver los videos gratuitos del curso y animarlos a que se inscriban a este curso super cargado de ionic!