Intro a Ionic Framework, Angular, Platzinger, y Ionic CLI

Clase 1 de 57 • Curso de Ionic Avanzado 2017

Resumen

En este Curso de Ionic Avanzado el profesor Eduardo Ibarra, también profesor de cursos como el de Ionic y el de Angular, te enseñara conceptos mas avanzados de Ionic desde implementar acceso nativo a cámara, geolocalización y hasta vibración misma del celular.

Revisaremos los conceptos básicos de Ionic de forma rápida, aunque es recomendable haber visto antes el Curso Básico de Ionic.

¿Qué es Ionic?
Es un framework basado en Angular para crear aplicaciones hibridas, gracias al uso de Cordova se puede acceder a las características nativas de los dispositivos.

¿Qué es Angular?
Es un framework basado en TypeScript que permite crear Single Page Applications.

¿Qué es Cordova?
Es un framework open-source usado para el desarrollo de aplicaciones móviles a partir de tecnologías web. Brinda una API en JavaScript para poder acceder a las características nativas del dispositivo.

Estos tres frameworks serían muy difíciles de ensamblar manualmente, sin embargo, existe la herramienta de consola Ionic CLI que te ayudara entre algunas cosas a:

Transpilar código de TypeScript a JavaScript.
Crear un servidor local el cual se refrescará automáticamente ante cualquier cambio que hagas en tus archivos.
Exportar tu app para iOS o Android.

Ricardo Celis

teacher•

En la sección de Archivos encuentras las slides completas de este curso en PDF!

Bienvenido y recuerda ir dejando todas tus dudas =)

Jorge Luis Paiva Huamán

student•

Si mi App no usará características nativas puedo omitir Apache Cordoba... (en IONIC 5) Igual podrìa compilar para iOS y Android sin cordoba?

Erik Elyager

student•

Yo creo que sí, pero yo no sacrificaría las características nativas, aunque todo depende de la App.

Por cierto, hay curso mucho más reciente donde usamos Ionic 4 te lo recomiendo.

Alejandro Estupiñan

student•

Este curso me emociona, estaria bien un curso de los errores que se presentan, ahorita yo tengo esta app que me truena la hice en electronjs, agradeceria una ayuda

MacBook-Air-de-Alejandro:src alexhack$ npm run electron

> smartboxes@0.1.0 electron /Users/alexhack/Desktop/workspace/backup/appsb
> npm run build-electron && electron dist/


> smartboxes@0.1.0 build-electron /Users/alexhack/Desktop/workspace/backup/appsb
> ng build --prod && copy src\electron\* dist


Date: 2018-08-30T05:45:59.462Z
Hash: ceac8738a366a83aba62
Time: 7131ms
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.34c57ab7888ec1573f9c.css (styles) 0 bytes [initial] [rendered]
chunk {2} polyfills.cdf87a8e5b31fe8a11f1.js (polyfills) 130 bytes [initial] [rendered]
chunk {3} main.a2bc6cab25d0aa41c17a.js (main) 128 bytes [initial] [rendered]

ERROR in Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'OpaqueToken' was called in 'AngularFireModule'
    'AngularFireModule' references 'FirebaseUserConfig'
      'FirebaseUserConfig' calls 'OpaqueToken'.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! smartboxes@0.1.0 build-electron: `ng build --prod && copy src\electron\* dist`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the smartboxes@0.1.0 build-electron script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/alexhack/.npm/_logs/2018-08-30T05_45_59_516Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! smartboxes@0.1.0 electron: `npm run build-electron && electron dist/`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the smartboxes@0.1.0 electron script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/alexhack/.npm/_logs/2018-08-30T05_45_59_549Z-debug.log
MacBook-Air-de-Alejandro:src alexhack$```

Noel Skenshee Augustin

student•

Puedo aplicar los conocimientos obtenidos de este curso a vue ?

Camilo Martínez Rincón

student•

Chicos/as una pregunta, se puede hacer el backend con Spring Boot y funciona completamente bien si?

Miguel Angel Velazquez Romero

student•

Si, claro. A mi parecer eso ya es algo avanzado, pero aquí tienes un tuto que puedes seguir para llevarlo a cabo:

Ionic 4: CRUD y autenticación JWT con Spring Boot y MySQL: Capítulo 10: Login

Camilo Martínez Rincón

student•

Uffff, MUCHISIMAS GRACIAS!!!!!!! no sabes cuanto llevo buscando un tuto así

Jorge Luis Paiva Huamán

student•

SPA. Pregunta seria. Si tengo una App HTML full ajax, es una SPA?

Wandy Rafael Santana Evangelista

student•

Hola @cocoPaiva -Depende, si solo manejas un solo HTML y le inyectas todo desde JS, pues si. Recuerda, #NuncaParesDeAprender 💚

Jorge Luis Paiva Huamán

student•

Hay técnicas o herramientas que podemos usar para que una aplicacion web en asp net mvc , php o java se pueda llevar a un entorno de estos ? para producir una app híbrida?

Erik Elyager

student•

Todo depende de la arquitectura de las aplicaciones, pero por ejemplo: php y java pueden ser tus lenguajes del lado del servidor, puedes servir una API que sea consumida por tu App en Ionic. Lo mismo con .Net pero en este caso yo recomendaría tal vez mirar Xamarin.

Juan C Felizzola

student•

¡Comenzemos con el curso!
Sería bueno un curso de TypeScript para complementar la carrera de Desarrollo con Angular.

Erika Luna

teacher•

Esa es una super idea. Pero mientras te dejo este link que es en dónde yo aprendi un poco más. --> https://www.typescriptlang.org/

Juan C Felizzola

student•

Gracias 😄

Mario Alejandro Cortez Salinas

student•

Si…! que emoción! 😄

Carlos Uriel de Jesus Sánchez González

student•

¿Qué es Ionic?
Es un framework completo para desarrollar aplicaciones moviles hibridas. Esta basado en Angular y usa Cordova para acceder a caracteristicas nativas de los dispositivos
¿Qué es Angular?
Es un framework basado en TypeScript que permite crear Single Page Applications.
¿Qué es Cordova?
Es un framework open-source usado para el desarrollo de aplicaciones móviles a partir de tecnologías web. Brinda una API en JavaScript para poder acceder a las características nativas del dispositivo.
Estos tres frameworks serían muy difíciles de ensamblar manualmente, sin embargo, existe la herramienta de consola Ionic CLI que te ayudara entre algunas cosas a:
Transpilar código de TypeScript a JavaScript.
Crear un servidor local el cual se refrescará automáticamente ante cualquier cambio que hagas en tus archivos.
Exportar tu app para iOS o Android.

Luis Carlos Chacon Assmar

company_admin•

que version de IONIC estas usando?

Fernanda Aragon

student•

Se está usando la versión 3 de Ionic, pronto vendrá la actualización del curso con la nueva versión 4 de Ionic.

Oscar Ortega

student•

Hola, ¿tienes noticias de cuando estará disponible el curso de ionic 4? Gracias!

Guido Ciardiello

student•

No compren este curso, termina siendo lo mismo que el de angular y no tiene nada de ionic

Xavier Alexandro Basir Jeffrey

student•

Ya vi el curso de ionic 4 sin embargo este proyecto se ve tan interesante y completo que lo abordaré haciendo los ajustes pertinentes para la versión de ionic 4! :D

Mateo Loaiza Rios

student•

Amigos les comparto como quedo el vistaso final de mi version de Platzinger publicada en la Play Store. https://play.google.com/store/apps/details?id=io.ionic.platzinger :D PDTA: Todavía faltan algunas validaciones y correcciones de errores :p

Intro a Ionic Framework, Angular, Platzinger, y Ionic CLI

Introducción a Ionic

Intro a Ionic Framework, Angular, Platzinger, y Ionic CLI

Instalación de Ionic y más herramientas en Mac OS

Instalación de Ionic y más herramientas de desarrollo en Windows

Estructura de nuestra App con Ionic

Arquitectura de una app en Ionic

Proyecto: Platzinger App

Repositorio del curso

Qué son pages y cómo generar las primeras de nuestra app

Navegación básica entre pages

Reto: Página “Acerca de” accesible desde el menú lateral

Tomando los conceptos compartidos de Angular y Ionic

Basics de Angular y TypeScript

Aclaraciones Ionic vs Angular

Cómo usar tipos de datos con typescript

Qué son e implementando interfaces de TypeScript

NgFor aplicado en la lista de usuarios

NgIf aplicado en la lista de usuarios

Navegación con parámetros

Accediendo a nuestros usuarios con conversation.ts

Creando un servicio de usuarios e inyectando el servicio en nuestros pages

Pipes en TypeScript (Date, Number, Json)

Creando nuestro propio 'Pipe' para buscar entre nuestros contactos

Reto: Mostrar un icono diferente según el status del usuario

Agregando estilos con CSS a nuestra aplicación

Cómo usar estilos CSS y referenciar recursos

Implementando estilos en la pantalla de login

Implementando estilos en la pantalla de home

Implementando estilos en la pantalla de conversación

Usando ngStyle y ngClass para añadir estilos dinámicos

Cambiar icono según status

Acceso a datos remotos

Información importante antes de continuar

¿Qué es Firebase?

Reemplazo del servicio de usuarios por un servicio dinámico con conexión a Firebase

Login/Registro de usuarios con email y password

Login/Registro de usuarios con Facebook

Implementando Log Out

Creando un CRUD implementando un API REST HTTP (con diversos backends)

Opciones y Acceso Nativo

Crear page de Perfil

Editar datos básicos del perfil de usuario

Configurando Android Studio

Capturar fotos de cámara y álbum

Preparando aplicación para recibir fotos desde la cámara y galería del Android

Guardando y asignando una foto de perfil al usuario desde la cámara

Preparando aplicación para utilizar geolocalización

Conectándonos al API de Google

Conversación

Más estilos

Enviando un mensaje (con reproducción de sonido)

Mostrando conversación

Enviando un zumbido (con reproducción de sonido y animación)

Amigos

Planeación previa para la característica / Cómo generaremos las solicitudes

Enviando una solicitud de amistad

Revisando solicitudes de amistad

Aceptando solicitudes de amistad

Mostrando sólo amigos

Componentes anidados (con paso de parámetros)

Deploy

Exportando app para iOS y complementando con Xcode

Exportando app para web, complementando con Firebase Hosting

Conclusiones del curso

Contenido Bonus

Publicando nuestra aplicación en Android y iOS stores

Cuéntanos