Aprende Ionic 8 con proyectos prácticos
Aprende Ionic de forma práctica
Certificado oficial emitido por la SEPA través del Gobierno del Estado de México
12 meses de acceso
En línea · 60 h
24 unidades
Nivel intermedio
Qué aprenderás
Lo que serás capaz de hacer
Ionic es un SDK completo de código abierto para desarrollo de aplicaciones móviles híbridas con la que podemos crear nuestros proyectos para diferentes plataformas como android, ios, etc. En este curso, explicaremos los conceptos básicos sobre este framework , como instalar plugins de cordova, compilar nuestras aplicaciones y testear nuestras apps en un nuestro propio móvil. Si sabes angular, este curso te será mucho más fácil, sino sabes no te preocupes, lo iremos enseñando durante el curso. Estos son los proyectos que haremos: Counter app : Aplicación para contar de 0 a 99. Veremos los conceptos básicos. Disponible en vista previa sin necesidad de comprar el curso. Task List app: Aplicación para gestionar una lista de tareas. Veremos algunos componentes básicos de ionic como ion-list o ion-input. Pokedex app: Aplicación que muestra una lista de los pokemons. Veremos como obtener datos desde una API. Coupons app: Aplicación para gestionar cupones y añadir nuevos cupones con QR. Vemos como usar el plugin de QR Scanner. Shopping list app : Aplicación para gestionar una lista de la compra usando SQLite. Veremos como utilizar SQLite para nuestras aplicaciones. NFC Rooms: Aplicación para gestionar las tarjetas NFC de un hotel. Veremos como utilizar NFC y como autenticarnos con nuestro teléfono (FaceID, huellas, etc). Solo para android. Events DDR app: Aplicación para gestionar los eventos de DRR, con posibilidad de mandar notificaciones. Vemos como manejar notificaciones en nuestras apps y como usar Firebase. La parte de las notificaciones, solo para Android. Burguer Queen app : Aplicación de nuestra franquicia de comida rápida favorita en app. Veremos como gestionar datos con nuestra propia api (docker) y con pagos en Stripe. Todas las aplicaciones están en ionic 8, usando capacitor. ¡Os espero!
- Aprendar a manejar los conceptos básicos de IONIC
- Aprender a instalar plugins cordova/capacitor
- Aprender a realizar tus propias apps móviles con IONIC
- Publicar tus aplicaciones en la play store
Temario
UNIDAD 1 - Introducción · 4 leccionesUNIDAD 1 - Introducción
UNIDAD 1 - Introducción · 4 lecciones
UNIDAD 1 - Introducción
- ¡Pregunta!
- Sobre las calificaciones tempranas
- Redes sociales
- Discord
UNIDAD 2 - Versiones utilizadas en el curso y ayuda · 2 leccionesUNIDAD 2 - Versiones utilizadas en el curso y ayuda
UNIDAD 2 - Versiones utilizadas en el curso y ayuda · 2 lecciones
UNIDAD 2 - Versiones utilizadas en el curso y ayuda
- Versiones
- Ayuda
UNIDAD 3 - Preparación del entorno Windows · 7 leccionesUNIDAD 3 - Preparación del entorno Windows
UNIDAD 3 - Preparación del entorno Windows · 7 lecciones
UNIDAD 3 - Preparación del entorno Windows
- Instalar Visual Studio Code
- Instalar NodeJS
- Abrir una terminal en Windows
- Instalar Ionic cli
- Instalar Java (JDK)
- Instalar Android Studio
- Instalando versiones de Android
UNIDAD 4 - Preparación del entorno Mac · 5 leccionesUNIDAD 4 - Preparación del entorno Mac
UNIDAD 4 - Preparación del entorno Mac · 5 lecciones
UNIDAD 4 - Preparación del entorno Mac
- Instalar Visual Studio Code
- Instalar NodeJS
- Abrir una terminal en Mac
- Instalar Ionic cli
- Instalar XCode
UNIDAD 5 - Documentacion IONIC · 4 leccionesUNIDAD 5 - Documentacion IONIC
UNIDAD 5 - Documentacion IONIC · 4 lecciones
UNIDAD 5 - Documentacion IONIC
- Documentación componentes IONIC
- Iconos Ionic
- CSS Utilities Ionic
- Plugins Capacitor Ionic
UNIDAD 6 - Cursos recomendados (opcional) · 2 leccionesUNIDAD 6 - Cursos recomendados (opcional)
UNIDAD 6 - Cursos recomendados (opcional) · 2 lecciones
UNIDAD 6 - Cursos recomendados (opcional)
- Curso HTML/CSS
- Curso Angular
UNIDAD 7 - A tener en cuenta antes de empezar con las aplicaciones · 2 leccionesUNIDAD 7 - A tener en cuenta antes de empezar con las aplicaciones
UNIDAD 7 - A tener en cuenta antes de empezar con las aplicaciones · 2 lecciones
UNIDAD 7 - A tener en cuenta antes de empezar con las aplicaciones
- ionic info
- A tener en cuenta
UNIDAD 8 - APP 01 - Counter · 14 leccionesUNIDAD 8 - APP 01 - Counter
UNIDAD 8 - APP 01 - Counter · 14 lecciones
UNIDAD 8 - APP 01 - Counter
- Resultado esperado
- Creación del proyecto
- Como arrancar nuestro proyecto
- Páginas en IONIC
- Header de nuestra app
- Footer de nuestra app
- Iconos en nuestros botones
- Dando funcionalidad a nuestros botones
- Dando estilos a nuestra app
- Como depurar nuestro código
- Ciclo de vida en una aplicación ionic
- Guardar nuestro numero con @capacitor/preferences
- Iconos de nuestra app
- Descarga de la aplicación
UNIDAD 9 - Testear en Android · 5 leccionesUNIDAD 9 - Testear en Android
UNIDAD 9 - Testear en Android · 5 lecciones
UNIDAD 9 - Testear en Android
- Compilar para Android
- Activar modo desarrollador en android
- Arrancar en un dispositivo real
- Arrancar en un dispositivo emulado
- Conectar aplicación Android a nuestro navegador
UNIDAD 10 - Testear en IOS · 6 leccionesUNIDAD 10 - Testear en IOS
UNIDAD 10 - Testear en IOS · 6 lecciones
UNIDAD 10 - Testear en IOS
- Comandos recomendados
- Compilar para ios
- Arrancar en un dispositivo emulado
- Modo desarrollador Iphone
- Confiar app en iphone
- Arrancar en un dispositivo real
UNIDAD 11 - PWA · 4 leccionesUNIDAD 11 - PWA
UNIDAD 11 - PWA · 4 lecciones
UNIDAD 11 - PWA
- Crear nuestra PWA
- Desplegando en Vercel
- Instalando nuestra PWA en un móvil
- Descarga aplicación
UNIDAD 12 - APP 02 - Task List · 14 leccionesUNIDAD 12 - APP 02 - Task List
UNIDAD 12 - APP 02 - Task List · 14 lecciones
UNIDAD 12 - APP 02 - Task List
- Resultado esperado
- Creación del proyecto
- Carpeta pages
- Preparando formulario con ion-input y ion-button
- Añadir tarea
- Comprobar si la tarea esta repetida
- Mostrar nuestras tareas con ion-list
- AlertService
- Opciones para los items de nuestra lista con ion-item-sliding
- Mostrando una alerta de confirmación antes de eliminar
- Eliminar tarea
- Ordenar los items de nuestra lista con ion-reorder-group y ion-reorder
- Recuperar las tareas con @capacitor/preferences
- Descarga de la aplicación
UNIDAD 13 - APP 03 - Pokedex · 24 leccionesUNIDAD 13 - APP 03 - Pokedex
UNIDAD 13 - APP 03 - Pokedex · 24 lecciones
UNIDAD 13 - APP 03 - Pokedex
- Resultado esperado
- Creación proyecto
- Creación de páginas y servicios
- Rutas
- Pokeapi
- Modelo Pokemon
- Habilitar CapacitorHttp
- Preparando nuestro servicio de pokemon
- Recuperar pokemons
- Procesamos los datos de los pokemons
- Obteniendo los pokemons en nuestra pagina
- Mostrando un mensaje mientras cargan nuestros pokemons con ion-loading
- Mostrando nuestros pokemons
- Scroll infinito con ion-infinite-scroll
- Mejorando estilos de nuestra app
- Navegación al detalle de nuestro pokemon
- Obtener un pokemon por ID
- Volver a nuestra lista de pokemons
- Mostrar información básica del pokemon
- Mostrar habilidades del pokemon
- Pipe para obtener un stat concreto
- Mostrar estadísticas del pokemon
- Puliendo detalles
- Descarga de la aplicación
UNIDAD 14 - ¡Practica! · 1 leccionesUNIDAD 14 - ¡Practica!
UNIDAD 14 - ¡Practica! · 1 lecciones
UNIDAD 14 - ¡Practica!
- Ejercicio
UNIDAD 15 - APP 04 - Cupones · 23 leccionesUNIDAD 15 - APP 04 - Cupones
UNIDAD 15 - APP 04 - Cupones · 23 lecciones
UNIDAD 15 - APP 04 - Cupones
- Resultado esperado
- Creación proyecto
- Adaptando nuestros tabs
- Interface CouponData
- Clase Coupon
- Obtener cupones de un fichero
- Dividir en segmentos con ion-segment
- Pipe para filtrar cupones por categoria
- Mostrar nuestros cupones
- Template coupons
- Activar/desactivar cupones
- Guardar cupones
- Recuperar cupones
- Mostrando un QR con angularx-qrcode
- Regulando el brillo con @capacitor-community/screen-brightness
- Cambio de estado de la app
- Colocando icono de camara en nuestro header
- Instalando @capacitor/barcode-scanner
- Escanear QR codes
- Mostrando toasts
- Guardar cupones escaneados
- Probando nuestra app en Android
- Descarga de la aplicación
UNIDAD 16 - APP 05 - Shopping list · 39 leccionesUNIDAD 16 - APP 05 - Shopping list
UNIDAD 16 - APP 05 - Shopping list · 39 lecciones
UNIDAD 16 - APP 05 - Shopping list
- Resultado esperado
- Creación del proyecto
- Instalación de dependencias
- Estructura de nuestra base de datos
- Copiar fichero sql-wasm.wasm
- Servicio SQLite
- Descargar base de datos SQLite
- Conectarnos a nuestra base de datos SQLite
- Iniciar nuestro servicio SQLite
- Añadiendo jeep-sqlite
- Mejorando nuestro servicio con signals
- Añadiendo pantalla de carga con ion-loading
- executeQuery
- executeInstruction
- Modelo Item y Unit
- Abrir un modal con ion-modal
- Preparando nuestro formulario
- Servicio para las unidades
- Formulario para crear un item
- Crear un item
- Obtener items
- Obtener las unidades de nuestros items
- Actualizar nuestro itemsSignal al guardar un nuevo item
- Modelo GroupItem
- Mostrar items
- Checkbox para seleccionar items
- Actualizar un item
- Borrar un item
- Filtrar items
- Como cambiar de theme en Ionic
- Toggle para cambiar de theme
- Creando nuestro propio tipo
- Obtener theme de nuestra base de datos SQLite
- Actualizar theme en nuestra base de datos SQLite
- Directiva Theme
- Entrada y salida en una directiva
- Mostrar texto cuando no haya items usando un computed signal
- Tachar items completados añadiendo una clase con ngClass
- Descarga de la aplicación
UNIDAD 17 - APP 06 - NG Rooms · 17 leccionesUNIDAD 17 - APP 06 - NG Rooms
UNIDAD 17 - APP 06 - NG Rooms · 17 lecciones
UNIDAD 17 - APP 06 - NG Rooms
- Resultado esperado
- Requisitos para este proyecto
- Creación del proyecto
- Preparar tabs
- AlertService
- Instalar plugin fingerprint para la biometria
- Usando FingerprintAIO
- Añadiendo inputs a nuestros alerts
- Instalar plugin NFC
- Usando el plugin NFC
- Desuscripción del NFC [Forma 1]
- Escribimos la información de la habitación en la tarjeta NFC
- Leer la información de la habitación en la tarjeta NFC
- Desuscripción del NFC [Forma 2]
- Añadir HTML en nuestros alerts
- Mejorando nuestros tabs
- Descarga de la aplicación
UNIDAD 18 - APP 07 - Events DDR · 54 leccionesUNIDAD 18 - APP 07 - Events DDR
UNIDAD 18 - APP 07 - Events DDR · 54 lecciones
UNIDAD 18 - APP 07 - Events DDR
- Resultado esperado
- Creación del proyecto
- Creando nuestras páginas
- Rutas
- Creación proyecto Firebase
- Instalar las dependencias para conectar con Firebase
- Modelo user
- Formulario Login
- Servicio Auth
- Crear nuestro usuario en Firebase
- Detectar si estamos o no logueados
- Logout
- Componente Toolbar
- Afinando nuestro Toolbar
- Restringir accesos a rutas protegidas
- Modelo Event
- Componente FormEvent
- Instalando moment
- Validador pattern en la URL
- Creando nuestro formulario de eventos
- ion-datetime-button para fechas
- Validación de nuestro formulario de eventos
- Volviendo atrás con un ion-fab-button
- Submit en nuestro formulario de eventos
- Event Service
- Crear evento
- Obtener eventos
- Mostrando nuestro eventos
- Filtrar eventos
- Estilos de eventos
- Refresco de eventos
- Añadiendo un ion-loading
- ion-fab para ir a crear un evento
- Opciones evento
- Abrir una URL con Browser Capacitor
- Preparando nuestro evento para actualizar
- Obtener un evento por id
- Actualizar evento
- Borrar un evento
- Modelo Notification
- Instalar @capacitor/notifications y onesignal
- Configurar Cloud Messaging de Firebase
- Configurar OneSignal
- Servicio de notificaciones
- Enviando notificaciones con la API de OneSignal
- Enviar notificación al crear un evento
- Borrar notificación con la API de OneSignal
- Actualizar una notificación al actualizar un evento
- Evento al hacer click en nuestras notificaciones
- Agregar app android en Firebase
- Probando nuestras notificaciones
- Limpieza de componentes y pequeñas mejoras
- Como importar/exportar los índices y reglas de Firebase
- Descarga de la aplicación
UNIDAD 19 - Instalando todo lo necesario para la siguiente aplicación (Windows) · 3 leccionesUNIDAD 19 - Instalando todo lo necesario para la siguiente aplicación (Windows)
UNIDAD 19 - Instalando todo lo necesario para la siguiente aplicación (Windows) · 3 lecciones
UNIDAD 19 - Instalando todo lo necesario para la siguiente aplicación (Windows)
- Instalación Docker desktop
- Instalación Mongodb Compass
- Instalación Postman
UNIDAD 20 - Instalando todo lo necesario para la siguiente aplicación (Mac) · 3 leccionesUNIDAD 20 - Instalando todo lo necesario para la siguiente aplicación (Mac)
UNIDAD 20 - Instalando todo lo necesario para la siguiente aplicación (Mac) · 3 lecciones
UNIDAD 20 - Instalando todo lo necesario para la siguiente aplicación (Mac)
- Instalación Docker desktop
- Instalación Mongodb Compass
- Instalación Postman
UNIDAD 21 - Alternativa a docker - Burguer queen · 1 leccionesUNIDAD 21 - Alternativa a docker - Burguer queen
UNIDAD 21 - Alternativa a docker - Burguer queen · 1 lecciones
UNIDAD 21 - Alternativa a docker - Burguer queen
- Descarga proyecto backend como alternativa a docker
UNIDAD 22 - APP 08 - Burguer Queen App · 75 leccionesUNIDAD 22 - APP 08 - Burguer Queen App
UNIDAD 22 - APP 08 - Burguer Queen App · 75 lecciones
UNIDAD 22 - APP 08 - Burguer Queen App
- Resultado esperado
- Creación del proyecto
- Creando nuestras páginas
- Preparando traducciones
- Header
- Footer
- Menú
- Comprobando el estado de red con @capacitor/network
- Pagina not-network
- Instalando nuestra imagen de docker
- Modelo Category
- Obtener categorías
- Loading y refresh de categorías
- Mostrar categorías
- Pipe para mostrar imágenes
- Navegación a los productos de una categoría
- Modelo Product
- Obtener productos de una categoría
- Loading y refresh de productos de una categoría
- Mostrar los productos de una categoría
- Navegación a un producto
- Obtener un producto dado su id
- Mostrar producto
- Cantidad del producto
- Mostrar extras del producto
- Usando ion-checkbox en extras de una sola opción
- Usando ion-radio en extras de varias opciones
- Marcando la opción seleccionada con ion-radio-group
- Calcular el total del producto
- ion-fab para añadir el producto
- Modelo Order
- Creando los atributos de nuestra orden interna
- Servicio UserOrder
- Inicializar y guardar nuestra orden
- Buscar producto en nuestra orden
- Añadir producto a nuestra orden
- Numero de productos en nuestra orden
- Total de nuestra orden
- Eliminar un producto de nuestra orden
- Añadir y eliminar la cantidad de un producto de nuestra orden
- Resetear orden
- Modificar usuario y dirección en nuestra orden
- Mostrar el número de productos en nuestra orden con ion-badge
- Arreglar la carga inicial de nuestro userOrdeService
- Componente para mostrar los productos de nuestra orden
- Mostrando el total y los productos nuestra orden
- Mostrar extras de los productos de nuestra orden
- Aumentar y decrementar cantidades
- Mostrar alerta antes de borrar un producto en nuestra orden
- Botón para pagar
- Componente login
- Creando nuestro formulario de login
- AuthService
- Login en nuestra aplicación
- Obtener usuario actual al loguearnos
- Volver atras en login
- Logout
- Enlace para crear una nueva cuenta
- Formulario para crear una cuenta
- Crear una cuenta
- Autentificación en la página de pago
- Preparando los pasos en la página de pago
- Lista de productos en la página de pago
- Setear la dirección de la orden
- Creando cuenta en Stripe
- Modelos CreatePaymentIntent y Payment
- Instalar Stripe
- Crear payment intent
- Preparando nuestro pago
- Crear orden
- Probando el pago con Stripe desde nuestro móvil
- Arreglando la redirección de network
- Arreglando el problema de la dirección del usuario
- Ajustando el ion-radio en movil
- Descarga de la aplicación
UNIDAD 23 - Apps de otras ediciones · 1 leccionesUNIDAD 23 - Apps de otras ediciones
UNIDAD 23 - Apps de otras ediciones · 1 lecciones
UNIDAD 23 - Apps de otras ediciones
- 2048 [ionic 7]
UNIDAD 24 - Generar APK para Android · 1 leccionesUNIDAD 24 - Generar APK para Android
UNIDAD 24 - Generar APK para Android · 1 lecciones
UNIDAD 24 - Generar APK para Android
- Generar APK firmado
Certificado oficial
Tu certificado lo emite la SEP, no solo una plataforma
Al demostrar la competencia recibes un certificado emitido por la Secretaría de Educación Pública a través del Gobierno del Estado de México: un documento oficial que puedes presentar con confianza ante cualquier empleador o institución.
Tu certificado con INEC
- Lo emite la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México
- Documento oficial con folio verificable en línea
- Lo otorga la Universidad Tecnológica Fidel Velázquez
Otras plataformas en línea
- Constancia privada emitida por la misma plataforma
- Solo acredita horas cursadas o asistencia
- Sin respaldo de una autoridad educativa
Cómo funciona
Tu itinerario, de la inscripción al certificado
- 1
Inscripción con pago único
Pagas $2,800 MXN una sola vez y entras de inmediato al curso.
- 2
Estudias a tu ritmo
24 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
Cuestionarios para comprobar lo aprendido.
- 4
Certificado
Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
Lo que obtienes
Un certificado oficial de la SEP
Muestra · verificable por folio y QR
- Emitido por la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México. No es una constancia privada: es un documento oficial, y ese respaldo marca la diferencia frente a otras plataformas en línea.
- Contenido impartido por Disco Duro de Roer.
- Folio y QR verificables para compartirlo con quien te contrate.
Medios que necesitas
Equipo de cómputo
Conexión estable a internet
Pago único
Empieza hoy, a tu ritmo
Un solo pago y acceso inmediato al curso completo durante 12 meses.
- 24 unidades · 311 lecciones · 60 h
- 12 meses de acceso
- Certificado emitido por la SEP (Gob. del Estado de México) con folio verificable
Preguntas frecuentes
Sobre tu inscripción
¿Cómo es el pago?
Un solo pago de $2,800 MXN. No hay mensualidades ni cargos recurrentes.
¿Cuánto tiempo tengo acceso?
12 meses desde tu inscripción, 24/7, para avanzar a tu ritmo.
¿Quién imparte el contenido?
El curso es impartido por Disco Duro de Roer; INEC gestiona tu inscripción, evaluación y certificado.
¿Qué pasa cuando vence mi acceso?
Puedes renovar tu cuenta tú mismo desde la plataforma, sin trámites ni esperas.
