ionic 2 y ionic 3: Crea apps para Android e iOS desde cero.
4.7 (601 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,506 students enrolled
Wishlisted Wishlist

Please confirm that you want to add ionic 2 y ionic 3: Crea apps para Android e iOS desde cero. to your Wishlist.

Add to Wishlist

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

Creemos apps para nuestros dispositivos móviles con el conocimiento que tenemos de Angular, HTML, CSS y JavaScript
4.7 (601 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,506 students enrolled
Created by Fernando Herrera
Last updated 8/2017
Spanish
Curiosity Sale
Current price: $10 Original price: $180 Discount: 94% off
30-Day Money-Back Guarantee
Includes:
  • 18.5 hours on-demand video
  • 28 Articles
  • 29 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Crear aplicaciones para Android e IOS
  • Aplicar sus conocimientos de HTML, CSS y JavaScript para personalizar sus apps
  • Realizar pruebas Alphas, Betas y Producción en Google Play Store
  • Realizar despliegues en la App Store y realizar pruebas utilizando TestFlight
  • Dominar el framework de ionic 2 y ionic 3
  • Poder utilizar recursos nativos de los dispositivos móviles
  • Crear sus propios servicios REST
View Curriculum
Requirements
  • Es recomendado algún conocimiento de Angular 2 o Angular 4, pero el curso tiene una introducción al tema incluido
  • Es necesario saber un poco sobre HTML básico
  • No es necesario conocimiento alguno sobre ionic o cordova
  • Conocimiento de JavaScript básico es recomendado
Description

Angular 4, nos permite crear poderosas aplicaciones web que no sólo son eficientes y rápidas, sino que también nos permite desarrollar aplicaciones nativas con la ayuda de ionic,  que se pueden distribuir en Google Play Store y en la Apple App Store.

 Este curso esta orientado a enseñarte desde los fundamentos básicos de ionic actualizado con la versión 3, hasta crear una app completa. El curso es 99% práctico, con tareas, ejercicios, exámenes y evaluaciones que te asegurarán aprender el framework sin problemas.

Este curso cuenta con más de 200 clases, desarrollando más de 10 apps y también incluye el despliegue en Google Play Store y en la Apple App Store. Aprenderás a utilizar las alfas y betas de Google y usaremos el TestFlight para probar remotamente nuestras apps en iOS.

Para mencionar algunos temas que cubrimos en el curso: 

  • Toma o selección de fotografías
  • Subida de archivos a Firebase
  • Autenticación de una app con Facebook
  • Uso de recursos nativos como la cámara, Geolocalización, selector de imágenes, almacenamiento y más.
  • Envío de notificaciones Push
  • Uso de Google Maps
  • Creación de contactos
  • Consumo y creación de servicios REST
  • Despliegues en la Apple App Store y Google Play Store
  • Uso de Alfas, Betas y Testflight
  • Preparación y firma de los APKs y APIs
  • Uso de una extensa cantidad de componentes de ionic

El curso tiene por objetivo brindarte todo el conocimiento necesario para crear aplicaciones con un conocimiento básico de Angular (Angular 2, Angular 4 o superior), dentro del curso hay una sección donde refrescamos el conocimiento de Angular para manejar lo mínimo necesario para seguir el curso sin problemas.

Cada ejercicio esta hecho de manera simple, con videos cortos y con objetivos específicos que te ayudaran cuando tengas que regresar para recordar algún tema en especifico.

 

 

Who is the target audience?
  • Personas que desean crear aplicaciones para IOS y Android con su conocimiento de HTML, CSS y JS
  • Personas que deseen crear su app hibrida multiplataforma
  • Realizar despliegues en la App Store y Google Play Store
  • Estudiantes que tengan conceptos básicos de programación
Students Who Viewed This Course Also Viewed
Curriculum For This Course
208 Lectures
18:43:57
+
Introducción al curso de ionic 2
4 Lectures 10:45

Una pequeña introducción sobre cómo trabajaremos en el curso.

¿Cómo funcionará el curso?
03:20

Es algo obvio, pero es mejor decirlo para ayudarnos todos.

¿Cómo realizar preguntas?
00:44

Instalaciones necesarias para seguir el curso
05:52
+
Introducción a ionic 2
12 Lectures 40:13

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

Introducción a la sección
00:42


Comenzando el curso, es fundamental saber qué es ionic 2 y como trabaja

Preview 03:18

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

ionic 2 y ionic 3 - Introducción y actualizaciones
03:23

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

Introducción a la documentación de ionic 2
04:17

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

Introducción a la aplicación ionic view
01:26

Puede que sea obvio, pero es bueno explicarlo.

Notas importanes
00:22

Actualizaciones del CLI de ionic
00:25

Aquí crearemos nuestra primera aplicación de ionic 2

Aplicación de Tabs - Creando nuestra primera aplicación en ionic 2
04:46

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

Comandos del CLI
09:00

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

Estructura del proyecto en ionic 2
07:36

Aprenderemos a utilizar una de las herramientas que nos ofrece el equipo de ionic, para poder realizar pruebas de nuestro programa en los dispositivos.

Usando ionic view para un rápido despliegue de nuestras apps
04:35

Vamos a repasar unos conceptos básicos

Examen teórico #1
10 questions
+
App #1 - SonidosApp
13 Lectures 42:54

Una breve descripción de la sección

Introducción a la sección
00:50

Puntualmente aprenderemos sobre los siguientes temas

Preview 00:15

Esta es la aplicación que vamos a crear en esta sección

Preview 00:48

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

Diagrama de la App - Sonidos
01:34

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

Iniciando la App de sonidos
03:30

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

Creando listas con ion-list y ion-item
03:07

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

Mostrando un listado de todos los animales *ngFor
04:53

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

Evento click o tap dentro de un ion-item
06:21

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

Afinando los controles de reproducción de audio
05:26

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,

Deslizar para borrar - ion-item-sliding
04:37

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

Refrescar halando la página - Refresher
04:26

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

Cambiar el orden de la lista
07:00

Examen para repasar los conocimientos adquiridos.

Examen teórico #1
5 questions

Código fuente de la sección.

Código fuente de la aplicación de Sonidos
00:07
+
Navegación entre pantallas, modals, tabs y menú lateral.
16 Lectures 01:12:34

Una breve introducción a lo que veremos.

Introducción a la sección
00:54

Puntualmente los temas que aprenderemos aquí

Preview 00:27

Resumen visual de lo que lograremos en la sección

Preview 01:04

Introducción a la navegación en ionic
02:38

Es importante aprender y comprender esto

Actualización del generador de páginas - ionic 3
02:12

Empezamos con un tema fundamental que necesitamos aprender

Inicio del proyecto - Navegación, modals, tabs y menú lateral
10:04

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

Cambiando la página root
03:01

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

Navegación entre páginas - NavController
04:56

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

Enviar y recibir parámetros entre páginas - navParams
09:50

Aprenderemos a retornar a pantallas de forma controlada.

Regresando a la pantalla anterior y al root - pop y navPop
03:38

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

Crear Tabs manualmente
08:59

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

Modal - Crear, enviar y recibir parámetros
12:06

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

Crear un menú lateral
05:24

Estas son dos formas de controlar el menú lateral

Mostrar y ocultar el menú lateral desde eventos y atributos HTML
05:14

Podemos realizar ciertas configuraciones por defecto de ionic

Cambiar la palabra back en el NavController
01:51

Vamos a repasar el contenido visto hasta el momento

Examen teorico #2
5 questions

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

Código fuente de la aplicación de Navegación
00:15
+
Probando la aplicación en un dispositivo - Developer Mode
7 Lectures 35:00

Un resumen de lo que aprenderemos aquí

Introducción a la sección
01:05

Un resumen puntual de lo que esta sección ofrece

Preview 00:20

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

Desplegando app en iOS - Developer mode
12:07

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

Desplegando app en Android - Developer mode
10:46

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

Tarea práctica #1 - Realizar pruebas de depuración
02:45

Una posible solución al problema!

Resolución de la tarea práctica #1
07:52

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

Código fuente de la sección
00:05
+
App #2 - QRAPP - Lector de códigos QR
18 Lectures 01:32:00

Un breve resumen de lo que aprenderemos aquí

Introducción a la sección
01:04

Puntualmente estos son los temas que vamos a tocar aquí

Preview 00:23

Este es el resultado de la aplicación funcionando, esto es lo que haremos a continuación!

Preview 01:41

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

Diagrama de la aplicación, pasos a seguir para crearla
00:56

Vamos a comenzar a crear la aplicación

Inicio del proyecto - QRAPP
02:45

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

Creación de los Tabs y un modelo de datos
07:22

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

BarcodeScanner - usando recursos nativos
06:13

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

ToastController - Notificaciones en pantalla
03:05

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

Probando el lector QR en el dispositivo y pruebas locales
07:35

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

Servicio para manejar el historial y realizar acciones con el código QR
08:38

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

Página del listado y lanzar el navegador web nativo
09:31

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

Trabajando con Google Maps para mostrar la ubicación
08:32

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

Modal - Google Maps con las coordenadas de la ubicación
11:18

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 

Leer una Vcard y extraer información de ella
06:12

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

Crear un contacto en la agenda del dispositivo
09:54

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

Tarea práctica #2 - Creación del envío de un email
01:45

Una forma de resolver el problema

Resolución de la tarea práctica #2 - Creación de un email
04:49

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

Código fuente de la aplicación - QRAPP
00:17
+
8gag - Aplicación de fotos e imágenes
19 Lectures 02:21:28

Una breve introducción a la sección

Introducción a la sección
00:37

Puntualmente, estos son los temas que aprenderemos aquí

Preview 00:22

Este es el resultado en nuestro dispositivo

Preview 02:01

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

Diagrama de la aplicación - 8gag
01:53

Inicio del proyecto - 8gag
08:53

Seguiremos trabajando con las pantallas de nuestra aplicación

Diseño de las pantallas y modal
09:32

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

Actualizado - Conexion a Firebase
11:45

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

Usando Pipes en nuestra aplicación
05:27

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

Tomar una fotografía y mostrarla en pantalla
10:47

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

Selector de imágenes - Image picker
08:06

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

Servicio de carga de archivos a Firebase
17:41

Vamos a poner en uso el servicio que creamos en nuestro dispositivo!

Cargando imágenes a Firebase desde el dispositivo
09:56

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

Controlando la carga de las imágenes por grupos
09:51

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

Crear un scroll infinito - infinite scroll
09:45

Vamos a implementar una autenticación por Facebook para nuestra aplicación, para que sólo los usuarios registrados, puedan subir fotografías

Autenticación con Facebook
14:42

Realizaremos la autenticación de Facebook, corriendo en el dispositivo.

Autenticación en una aplicación nativa iOS - Android
12:13

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

Tarea práctica #3 - Social Sharing
00:48

Realizaremos juntos la resolución de la tarea

Resolución de la tarea práctica #3 - Social Sharing
06:53

Código fuente de la app - 8gag
00:15
+
Misceláneos - Información que necesitamos conocer
15 Lectures 01:13:42

Un breve resumen de lo que la sección contiene

Introducción a la sección - Misceláneos
01:12

Estos son los temas que aprenderemos puntualmente

Preview 00:16

Este es el producto final de la sección

Preview 01:30

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

Inicio del proyecto - Misceláneos
01:45

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.

Ciclo de vida de una página
04:03

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

Preparando el ejemplo - ionic 3
08:12

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

Demostración del ciclo de vida de una página
08:19

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

Creando una introducción a nuestra app - Slides
08:43

Guardando en el storage del dispositivo información

Storage nativo del dispositivo
10:54

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

Leer los ajustes para poder determinar que página mostrar al inicio
07:14

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.

Grabar y leer del Storage nativo del dispositivo
08:21

Dos conceptos necesarios para realizar acciones especificas.

App pause (background) y resume (re activarse)
04:11

¿Pensaron que se iban a salvar?

Tarea práctica #4 - Alertas y Loadings
00:50

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

Resolución de la tarea práctica #4 - Alertas y Loadings
07:54

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

Código fuente de la app - Misceláneos
00:18
+
Push notifications - Enviar notificaciones
10 Lectures 48:29

Una breve introducción de lo que a continuación veremos

Introducción a la sección
00:54

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

Preview 00:14

Al finalizar la sección, este es el resultado que conseguiremos desarrollar

Preview 00:24

Vamos a comenzar nuestro proyecto de envío de notificaciones

Inicio del proyecto - Push Notifications
03:01

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

Cumpliendo los pre-requisitos
07:24

Firebase Cloud Messaging

Credenciales push - FCM y API KEY
04:29

Ahora continuamos con la instalación real del plugin y su uso

Enviar y recibir Notificaciones Push
09:09

Estos son los pasos que necesitamos cumplir para poder enviar notificaciones push a dispositivos con iOS

Pre-requisitos de iOS
19:47

Es hora de probar todo nuestro código

Enviando notificaciones iOS y Android simultáneamente
02:56

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

Código fuente de la App - Notificaciones
00:10
+
Tracker App - Control de flota de taxis
20 Lectures 01:50:51

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

Introducción a la sección
00:48

Un resumen puntual de todo lo que aprenderemos aquí

Preview 00:22

Al finalizar la sección, habremos creado nuestra aplicación para los dispositivos y también una aplicación de escritorio que nos ayudara a darle seguimiento a nuestros vehículos

Preview 01:09

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

Diagrama de las aplicaciones - Tracker
01:21

Vamos a comenzar con nuestra aplicación de seguimiento!

Inicio de la aplicación - Tracker
05:23

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

Controlando la funcionalidad visual del login
06:52

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

Configuraciones de Firebase y servicio del Usuario
10:23

Realizaremos un control para almacenar la información del usuario tanto para un login correcto o uno incorrecto

Proceso cuando el usuario es correcto o incorrecto
06:21

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

Almacenando la clave del usuario - Storage
08:12

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.

Cargando del storage y determinar la pantalla de inicio
08:15

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

Obteniendo la ubicación y coordenadas del dispositivo
07:49

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

Grabar las coordenadas en Firebase
06:24

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

Ver las coordenadas en un mapa
03:52

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

Usando el objeto de Firebase para actualizar el mapa y el nombre del usuario
06:38

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

Logout y pruebas en el dispositivo
09:56

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

Inicio de la aplicación de escritorio
06:54

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

Tarea - Crear las conexiones con Firebase
01:30

Esta es una forma de resolver la tarea

Resolución de la tarea de conexiones a Firebase
07:15

Vamos a realizar el seguimiento de los taxistas

Activar seguimiento en el mapa
11:08

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

Código fuente de las aplicaciones - Tracker y compañera
00:19
6 More Sections
About the Instructor
Fernando Herrera
4.7 Average rating
6,220 Reviews
21,761 Students
12 Courses
Analista de Sistemas y Desarrollador Web

Soy un analista de sistemas de computo, con poco más de 17 años en el mundo del desarrollo de aplicaciones de todo tipo.

Me encanta programar, crear cosas que la gente use, enseñar, también soy maestro sustituto en una universidad en las clases de programación, soy autor de código en Envato Marketplace.

Aquí en Udemy, he tenido la increíble experiencia de poder enseñar a muchos alumnos, y espero seguir mejorando mis cursos y los temas con forme la actualidad vaya cambiando.