ionic 5: Crear aplicaciones IOS, Android y PWAs con Angular
4.8 (3,272 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
12,350 students enrolled

ionic 5: Crear aplicaciones IOS, Android y PWAs con Angular

Google Play Store, Apple App Store, PWAs, Push Notifications, despliegues en la web, tabletas y mucho más
4.8 (3,272 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
12,350 students enrolled
Created by Fernando Herrera
Last updated 3/2020
Spanish
Spanish [Auto]
Current price: $119.99 Original price: $199.99 Discount: 40% off
2 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 29 hours on-demand video
  • 30 articles
  • 53 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Crear aplicaciones móviles para IOS, Android, tabletas y aplicaciones web con el mismo código
  • Crear PWAs utilizando ionic
  • Subir tu aplicación a Google Play Store y/o Apple App Store
  • Dominar el framework de ionic
  • Usar recursos nativos del dispositivo
  • Comprender sobre el desarrollo web y desarrollo móvil
  • Aprender a crear aplicaciones híbridas
Course content
Expand all 275 lectures 29:00:20
+ Introducción
4 lectures 17:06

Una breve introducción al curso

Preview 01:45

Aquí explicaremos cómo vamos a llevar el curso y sus diferentes secciones

¿Cómo funcionará el curso?
04:02

Suena bastante obvio, pero es necesario explicarlo.

¿Cómo hacer preguntas?
03:25

Instalaciones que necesitaremos para seguir el curso

Instalaciones necesarias para seguir el curso
07:54
+ ¿Qué es ionic?
11 lectures 53:24

Breve introducción a la sección

Introducción a la sección
01:25

Un resumen puntual de los temas que aquí tocaremos

Temas puntuales de la sección
00:29

Una breve introducción sobre las aplicaciones híbridas

Preview 02:57

Una comparación lógica entre los pro y contras de cada una

Híbrido vs Nativo
08:52

Aquí empezaremos a conocer un poco más de ionic

¿Qué es ionic framework?
03:23

Crearemos nuestra primera aplicación de ionic y la haremos correr en el navegador web

Nuestra primera aplicación de ionic
07:55

Detalle de todos los directorios y archivos que se encuentran en un proyecto de ionic

Estructura de un proyecto de ionic - Parte 1
14:50

Detallamos los demás directorios de un proyecto de ionic

Estructura de un proyecto de ionic - Parte 2
05:04

Una forma de ver simultáneamente IOS, Android y Windows Phone a la vez

ionic lab
02:45
Depurar una aplicación de ionic - debugger
05:26

Aquí les dejo el código fuente del programa como se encuentra en este momento

Código fuente de la sección
00:18
+ Reforzamiento de Angular
13 lectures 01:05:08
Introducción a la sección
01:34

Un resumen puntual de lo que veremos a continuación

Temas puntuales de la sección
00:24

Empezaremos un proyecto utilizando Angular CLI

Inicio del proyecto - AngularBases
03:28
Componentes básicos
05:58
Implementar las rutas de nuestra aplicación
07:04

Navegaremos entre componentes mediante un menú que haremos

RouterLink y MenuComponent
05:54

Manejando un módulo de páginas

Módulo de páginas
03:55

Aquí implementaremos toda una ruta que cargue de forma perezosa

LazyLoad de PostsComponent
09:12
Servicios y data externa
07:04

Aquí mostraremos la información de los posteos en el componente POSTS

Mostrar POSTS en el componente
07:56

De esta forma podemos enviar información al componente hijo

@Input - Enviar información hacia un componente hijo
05:11
@Output - Emitir eventos desde el componente hijo
07:15

Aquí tienen el código terminado de la sección

Código fuente de la sección
00:12
+ Bases de ionic
9 lectures 45:06

Un resumen puntual de los temas que vamos a cubrir en esta sección

Introducción a la sección
01:38

Un resumen puntual de los temas que aquí veremos

Temas puntuales de la sección
00:20

Aquí comenzaremos oficialmente nuestra primera aplicación de ionic

Inicio del proyecto - Componentes
04:30

Aquí aprenderemos a cambiar la pantalla de inicio de nuestra aplicación

Cambiando la pantalla principal de la aplicación
05:47
Navegación entre páginas
05:03

Aquí aprenderemos como crear el botón para regresar a la página anterior

Back Button - Botón para regresar a la página anterior
07:38

Aquí vamos a trabajar reutilizando el header en nuestras páginas

Módulo de componentes - Header
11:21

Aquí vamos a aprender a crear una lista

ion-list: Listas en ionic - Parte 1
08:30

Aquí pueden descargar el código fuente de la sección para futuras referencias

Código fuente de la sección
00:19
+ Componentes de ionic y su uso en una aplicación
40 lectures 05:31:58
Introducción a la sección
01:21

Temas puntuales que cubriremos en esta sección

Temas puntuales de la sección
00:37

Aquí les mostraré la aplicación funcionando que haremos en esta sección

Objetivo final de esta sección - componentes
01:44

Aquí les mostraré cómo continuar el proyecto anterior en caso de que no lo tuvieran

Continuación del proyecto - Componentes
01:40

Una pequeña anotación para que no nos perdamos al inicio de cada video

Nota: ¿Cómo ver los siguientes videos de esta sección?
01:41

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

ion-action-sheet
12:33

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

ion-alert
12:32

Un elemento de ionic que nos permite colocar una imagen circular en un elemento

ion-avatar
07:36

Aquí utilizaremos los botones de ionic con sus diferentes propiedades

ion-button
11:39

Aquí aprenderemos a utilizar el componente de cards en ionic

ion-card
09:21
ion-checkbox
08:41

Componente especializado para la selección de fechas

ion-datetime
11:20

Aquí vamos a personalizar varios ion-datetimes para que se adapte a lo que necesitamos

ion-datetime - Parte 2 - Personalización
07:05

Aquí aprenderemos a colocar los botones flotantes o FABS

ion-fab
10:31
Creando variables de color - SCSS - ionic Generator
06:43

Uso del grid de ionic para diseños responsive

ion-grid - ion-row - ion-col
08:26

Aquí controlaremos el ancho que queremos darle a cada columna en diferentes dispositivos

ion-grid - Control del ancho en diferentes pantallas
05:10

Manejando el scroll infinito

ion-infinite-scroll
11:48

Aquí usaremos inputs para capturar información del usuario

ion-input
12:01

Empezaremos la listas y sus opciones de slides

ion-list
09:42

Update

Nota: De actualización
00:07

Aquí aprenderemos a utilizar el ion-item-sliding

ion-item-sliding
08:19

Una elegante forma de ordenar listas

ion-list-reorder
11:58

Un elemento utilizado para hacer esperar al usuario hasta que una tarea termine

ion-loading
06:21

Es momento de añadir el menú a nuestra aplicación

ion-menu
10:09

Aquí aprenderemos a controlar las acciones del menú

ion-menu parte 2 - opciones
12:48

Aquí trabajaremos creando una pantalla modal, y su envío de información entre padre-hijo e hijo-padre

ion-modal
12:35

Este es un elemento que nos permite mostrar información sobre la página actual y a la vez tener interacciones personalizadas

ion-popover
10:53
ion-popover - Acciones y posicionamiento
08:35

Usaremos un video para explicar ambos componentes, son bastante simples de usar y elegantes

ion-progress-bar y ion-range
08:08

Es un control utilizado para realizar pull y cargar datos

ion-refresher
08:55

Un elemento muy usado para realizar búsquedas en una lista

ion-searchbar
08:40

Aquí vamos a crear un Pipe y un módulo que nos permitan filtrar la información de la lista

ion-searchbar - Aplicando el filtro en la lista
09:15

Aquí utilizaremos este componente para trabajar con selecciones

ion-segment
15:27

Este elemento es lo que se está usando actualmente para mostrar al usuario un tipo de loading

ion-skeleton-text
09:41

Aquí aprenderemos a trabajar con los slides de ionic, que realmente es una implementación de idangero.us

ion-slides
14:48

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

ion-split-pane
07:30

Aquí aprenderemos a integrar los tabs en nuestra aplicación

ion-tabs
11:34

Aquí vamos a trabajar con el ion-toast, que es usado para mostrar información sin bloquear la aplicación

ion-toast
03:51
Código fuente de la sección
00:13
+ Correr aplicaciones en dispositivos físicos y emulados
13 lectures 01:08:01

Una breve introducción de lo que veremos en esta sección

Introducción a la sección
01:22

Un resumen puntual de los temas que veremos a continuación

Temas puntuales de la sección
00:30

Aquí comenzaremos a configurar todo lo necesario para poder probar nuestra aplicación utilizando el ionic devApp

DevApp - Pre-requisitos
03:06

Aquí utilizaremos el ionic DevApp para lanzar la aplicación y probarla en tiempo real

DevApp - Corriendo nuestra aplicación
04:44

Aquí realizaremos la configuración mínima necesaria para probar nuestras apps directamente en los dispositivos

Dispositivos físicos y emuladores - Configuración inicial
01:58

Aquí aprenderemos a configurar Android Studio y nuestro equipo virtual

Configuración de máquina virtual Android
08:40

Aquí aprenderemos a correr nuestra aplicación de ionic en la máquina virtual que creamos en el video pasado

Correr nuestra app de ionic en el emulador de Android
08:34

Esta es otra forma de correr la aplicación en el emulador de Android

Segunda forma de correr una aplicación en el emulador de Android
07:51

Aquí correremos la aplicación en un android real

Correr aplicación en un Android Real
05:49

Aquí realizaremos las instalaciones necesarias para poder ejecutar nuestra app en IOS

Instalaciones necesarias para probar nuestra app en IOS
08:29

Aquí aprenderemos a correr nuestra aplicación en un emulador de iox

Correr nuestra app en un emulador de IOS
06:07

Aquí aprenderemos a emular la aplicación en IOS sin abrir el proyecto de Xcode

Emular la aplicación sin pasar por Xcode
05:28

Aquí aprenderemos a correr nuestra aplicación en un iPhone real

Desplegar la aplicación en un iPhone
05:23
+ Aplicación de noticias
22 lectures 02:26:41

Un resumen puntual de lo que veremos en esta sección

Introducción a la sección
01:24

Aquí tenemos los temas que cubriremos en esta sección

Temas puntuales de la sección
00:26

Demostración de la aplicación funcionando

Preview 01:54

Comenzaremos la creación de nuestra aplicación de noticias

Inicio del proyecto - NoticiasApp
03:17

Aquí comenzaremos nuestro primer servicio para consumir la información de la API de newsapi.org

Servicio para consumir las noticias de NewsApi.org
06:35

Aquí aprenderemos una forma muy rápida para manejar la estructura de la información que retorna una API

Interfaces para el manejo de la información
04:47

Vamos a mostrar los artículos de las noticias en nuestra aplicación

Mostrar los artículos de noticias
11:05

Aquí vamos a crear dos componentes que nos permitan reutilizar la estructura que acabamos de crear

Componente de noticias y componente de noticia
09:31

Aquí empezaremos a trabajar con la página de encabezados

Página de encabezados
10:08

Aquí puliremos nuestro servicio para que podamos reutilizar mejor el código actual

Cargar noticias por categoría - Servicio
10:56

Cargaremos los encabezados dependiendo de la categoría seleccionada

Mostrar encabezados dependiendo de la categoría
07:10

Aquí crearemos la funcionalidad para poder crear un scroll infinito en nuestras páginas

Implementar infinite-scroll - TopHeadlines
09:52

Aquí haremos un infinite scroll por categoría

Infinite-scroll - Por categorias
05:35

Aquí aprenderemos a abrir la noticia en el navegador por defecto del dispositivo

Abrir el sitio web de la noticia en el navegador del dispositivo
08:25

Aquí vamos a crear un action-sheet para desplegar opciones en las noticias

Mostrar action-sheet en las noticias
10:02

Aquí aprenderemos a compartir información en redes sociales y todo lo que tenga disponible el dispositivo

Compartir noticia en redes sociales y Whatsapp
06:46

Aquí aprenderemos a guardar información físicamente en el dispositivo

Guardar noticia en el dispositivo localmente
09:47

Aquí leeremos las noticias que guardamos en el storage

Cargar las noticias del storage
08:24

Aquí aprenderemos a mostrar información cuando no hay nada en nuestros favoritos

Mostrar un mensaje cuando no hay favoritos
04:52

Aquí aprenderemos a configurar nuestro componente de noticia, para que muestre la opción de borrar de favoritos

Configurar el componente de noticia para borrar favoritos
09:01

Aquí puliremos detalles de nuestra aplicación

Detalles estéticos de nuestra aplicación de noticias
06:28

Código de todo lo que hicimos en la sección

Código fuente de la sección
00:15
+ Publicar una aplicación de ionic como PWA
10 lectures 40:43

Una breve introducción a la sección

Introducción a la sección
01:31

Temas puntuales que veremos en esta sección

Temas puntuales de la sección
00:31

Aquí comenzaremos la preparación de nuestro ejercicio que convertiremos en una PWA en esta sección

Inicio de proyecto - PWA
02:03

Seguiremos el tutorial que la gente de ionic nos facilita para publicar una PWA

Configuración de una PWA
09:44

Aquí vamos a preparar nuestra aplicación para desplegarla en un hosting

Preparar la aplicación para desplegarla en un hosting
03:38

Aquí usaremos un servicio de Firebase para desplegar nuestra aplicación en la nube y poderla probar en un dispositivo móvil

Firebase Hosting - Desplegar nuestra aplicación web en la nube
08:06

Aquí mostraremos como funciona nuestra PWA en un dispositivo móvil

Corriendo nuestra PWA en un dispositivo móvil
05:25

Aquí usaremos la función del Share API para compartir información de las noticias

PWA - Share API
09:20

Les dejo el código fuente de la sección para que puedan usarlo para verificar contra el suyo

Código fuente de la sección
00:11

Si desean saber más sobre PWAs, tengo un curso dedicado al mismo tema

Más información sobre las PWAs
00:13
+ Aplicación de peliculas
27 lectures 03:17:06

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

Introducción a la sección
00:43

Temas puntuales que aprenderemos en esta sección

Temas puntuales de la sección
00:12

Este es el resultado final de la aplicación que crearemos en esta sección

Preview 02:10

Aquí comenzaremos a crear nuestra aplicación de peliculas

Inicio de proyecto - PeliculasApp
02:42

Necesitaremos un API Key para poder utilizar TheMovieDB API

Creando un API Key en TheMovieDB
03:21

Aquí comenzaremos a consumir nuestra API para traer las películas de estreno

Servicio para traer las películas de estreno
08:31

Aquí vamos a crear la interfaz de la respuesta de TheMovieDB

Crear la interfaz de la respuesta y películas
04:18

Aquí vamos a agrupar nuestros pipes en un módulo y usarlo para mostrar las imágenes de las peliculas

Mostrar películas - pipe.module y pipe imagen
10:56

Es momento de optimizar la aplicación para tener URLs centralizados y mejorar la forma de realizar peticiones HTTP

Variables globales de nuestra aplicación
10:24

Aquí vamos a realizar un ejercicio de optimizar nuestros slideshows

Componente SlideShow y componente SlideShow-Poster
12:20

Es momento de crear otro arreglo de películas, pero en esta ocasión serán las populares

Mostrar películas populares
04:36

Aquí aprenderemos a crear un arreglo de dos películas por slide

Mostrar pares de películas
07:58

Aquí aprenderemos una forma de cargar más slides al slideshow de películas populares

Cargar más películas horizontalmente
11:44

Aquí abriremos un modal con los detalles de la película que deseamos.

Modal con los detalles de la película
08:04

Aquí utilizaremos servicios de TheMovieDB para traer el detalle de la película y los actores de la misma

Información de la película y actores
09:27

Aquí vamos a mostrar el detalle de la película

Mostrar detalles de la película
10:44
Mostrar detalles de la película - Parte 2
13:21

Aquí crearemos el diseño de la página de búsqueda de películas

Diseño de la página de búsqueda de películas
08:04

Aquí vamos a trabajar haciendo una consulta al API de TheMovieDB para traer todos los resultados de la película buscada

Servicio para buscar películas
04:24

Es momento de trabajar la página de la búsqueda de películas

Diseño de la página de búsqueda de películas
11:05

Es momento de guardar la información en el storage

Guardar películas en el storage
06:32

Es momento de implementar una pequeña validación para controlar los posibles duplicados

Prevenir duplicados en nuestro storage de películas
04:54

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

Cargar favoritos del storage y verificar si existe una película por ID
12:24

Aquí crearemos una pantalla para mostrar los favoritos

Mostrar pantalla de favoritos
12:49

Aquí vamos a realizar la tarea de agrupar los favoritos por género

Tarea: Favoritos por género
10:18

Un pequeño detalle

Pequeños arreglos estéticos en ios
04:48

Pueden descargar el código fuente realizado en esta sección

Código fuente de la sección
00:17
+ Aplicación lectora de códigos de barra y QR
22 lectures 02:11:21

Una breve introducción a la sección

Introducción a la sección
01:04

Un temario de lo que veremos a continuación

Temas puntuales de la sección
00:12

Esto es el producto final de nuestra aplicación lectora de códigos

Preview 02:05

Aquí comenzaremos a crear nuestro proyecto del QRScanner

Inicio del proyecto - QRScanner
04:23

Aquí explicaremos el tema sobre el ciclo de vida de las páginas en ionic

Ciclo de vida de una página en ionic
06:10

Empezaremos a realizar la lectura de un código QR

Plugin: Barcodescanner - Leer un código QR
10:20

Aquí vamos a leer el código QR desde el dispositivo para poder confirmar la información que tenemos

Leer código QR desde el dispositivo móvil
04:55

Aquí crearemos un modelo que nos ayude a controlar la información del escaneo

Modelo para manejar la información del QR
08:14

Aquí vamos a crear un servicio encargado de guardar en el dispositivo todos los escaneos

Servicio para almacenar los escaneos
06:31

Aquí haremos el diseño HTML de mostrar registros

Mostrar registros en el historial
07:05

Aquí haremos persistente la información de los registros escaneados

Guardar la información de los registros en el storage
08:17

Aquí crearemos un método para abrir el registro y realizar una acción determinada por el tipo

Abrir URL en el navegador por defecto del dispositivo
08:57

Aquí empezaremos a trabajar con la parte de mapas

Preparar nuestra aplicación para escanear ubicaciones geográficas
03:01

Aquí seguiremos los pasos para obtener un api key en mapbox

Crear un API Key en Mapbox
03:25

Aquí aprenderemos a movernos a otra pantalla de forma automática y a recibir parámetros por URL

Preparar la página del mapa
10:18

Aquí tomaremos las coordenadas y las usaremos para cargar el Mapbox

Mostrar el mapa con las coordenadas recibidas
06:18

Aquí vamos a trabajar creando edificios 3D y marcadores en el mapa

Edificios 3D y marcadores
07:20

Aquí implementaremos un botón para regresarnos a la pantalla del historial

Botón para regresar al historial
03:50

Aquí vamos a realizar un pequeño proceso para crear un archivo CSV y luego enviarlo por correo

Preparar la información que deseamos enviar por correo
09:35

Creando un archivo físico en el dispositivo

Crear un archivo físico con extensión csv
12:06

En esta clase vamos a enviar el correo electrónico adjuntando el archivo generado

Enviar un correo electrónico con el archivo generado
07:05

Aquí tienen el código fuente en caso de que lo lleguen a necesitar.

Código fuente de la sección
00:09
Requirements
  • Es necesario conocer las bases de Angular ( Angular 2 o superior)
  • Conocimiento básico de html, css y js es necesario
  • No es necesario conocimiento previo de ionic
  • No es necesario conocer Java, Objective-C, Swift u otro lenguaje de programación
  • Es necesario poder realizar instalaciones en el equipo
  • Para desplegar aplicaciones en la Apple App Store, es necesario una Mac
Description

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:

  1. ionic framework desde cero

  2. Conceptos importantes de Angular (componentes, lazyload y módulos)

  3. Creación de aplicaciones reales

  4. Creación de PWAs

  5. Diseño adaptativo

  6. Firebase Hosting

  7. Push Notification Grupales

  8. Push Notification a usuarios en específico

  9. Uso la página de Onesignal para envío de mensajes grupales

  10. Uso de la API de OneSignal para mensajes push automáticos o controlados

  11. Explicación de la mayoría de componentes de ionic con su respectiva configuración

  12. CRUD

  13. Generación de un backend propio

  14. Manejo y creación de JsonWebTokens

  15. Subida de archivos

  16. Consumo de diversas APIS

  17. Aplicaciones verticales y horizontales

  18. Aplicaciones con diseños atractivos

  19. Uso de Mapbox para mapas

  20. Uso de Plugins de cordova

  21. ShareAPI de Google

  22. Mapbox API

  23. Compartir en Redes sociales y cualquier otra aplicación instalada en el móvil

  24. Generación de Archivos de texto y envío de los mismos

  25. Despliegue de aplicaciones en Apple AppStore

  26. Despliegue de aplicaciones en Google PlayStore

  27. Alphas y Betas de Google

  28. Test Flight de Apple

  29. Configuración de simuladores para IOS y Android

  30. Uso del DevApp

  31. Storage Nativo

  32. indexedDB

  33. Animaciones personalizadas

  34. 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!

Who this course is for:
  • Una persona con conocimiento básico de Angular
  • Una persona que desee crear aplicaciones móviles
  • Una persona que quiera crear PWAs que tengan el aspecto nativo de una app móvil
  • Personas que quieran saber cómo desplegar sus aplicaciones en Google Play Store y Apple App Store