Introducción a Ionic + Capacitor para Angular Devs: Crea tu primera App
Вставка
- Опубліковано 19 вер 2024
- #ionic #angular
Crea tu primera aplicación en móvil usando Ionic + Angular, aquí tendrás un primer vistazo de como se comporta este ecosistema
⏰ Timeline
00:30 Introducción a Ionic
02:02 Demo App
02:55 Instalación de Ionic
05:54 Usando Ionic Framework
08:04 Agregar ionic a una Angular App
13:00 Creando vistas
22:50 Creando un Slide Menu
27:16 Usando ion-icons
30:48 Introducción a Capacitor
33:35 Agregar capacitor a una Angular App
36:16 Tomando fotos con la camara
43:23 Usando Ionic PWA Elements
45:25 Creando un grid para la galería
47:10 Generando app para Android
51:54 Probando la App
54:00 Conclusiones
😀 Mis cursos
platzi.com/tea...
Puedes apoyar este canal, invitandome un cafe ☕www.buymeacoff...
🌐 Mis redes
Instagram: / nicobytes
Twitter: / nicobytes
Github: github.com/nic...
Facebook: nicobytes
WebSite: nicobytes.com
En este video te enseño paso a paso a crear tu primera aplicación en móvil usando Ionic + Capacitor + Angular para crear una app para Android, aquí tendrás un primer vistazo de como se comporta este ecosistema.
El curso se extenderá?
Cuando harás un video de como consumir una api/rest con capacitor?
Gracias Nico por tan excelente tutorial, de ahi empece a aprender Ionic para mi crecimiento personal y profesional, un gran saludo desde las bellas tierras colombianas.
Muchas gracias por el vídeo!! A mi me encantaría seguir viendo contenido sobre Ionic y Angular 😄😄
Felicidades Nico tus videos son un aporte importante para los desarrolladores. Saludos desde Tupiza Bolivia
Gracias Nico! Muy bueno este curso, te felicito como siempre muy claro!
Llegué a tu curso y me puse feliz de que seas vos que lo daba, porque necesito hacer en una app una pagina que en una seccion se abra la camara para capturar el Documento de Identidad de la persona, y llegue a este video que me aclaro bastante el tema del uso de la camara. Ahora imagino que me quedara usar CSS para generar el Overlay y seccionarlo a solo una porcion en horizontal que contenga la camara. Si se te ocurre alguna idea que me ayude, siempre agradecido por tu excelente didactica
Felicitaciones por tu participación en la comunidad Ionic Developer Expert!
Usted no se cansa de impresionarme 😮
Gracias por el video, te veo bastante por platzi, sería genial un curso actualizado de ionic en 2023.
Gracias maestro.
Esperamos un video con las novedades de Ionic7.
Por aquí estamos estudiando duro Ionic con Angular y Capacitor, gracias por darnos tu apoyo y tu entusiasmo.
Por si acaso no sabes porque puedo tener este error ? Ya he preguntado en todos lados y no encuentro respuesta. Me sale luego de ejecutar el comando ionic cap open android
Cannot convert string value 'UNIFIED_TEST_PLATFORM' to an enum value of type 'com.android.builder.model.AndroidGradlePluginProjectFlags$BooleanFlag' (valid case insensitive values: APPLICATION_R_CLASS_CONSTANT_IDS, TEST_R_CLASS_CONSTANT_IDS, TRANSITIVE_R_CLASS, JETPACK_COMPOSE, ML_MODEL_BINDIN
Hola nico, entiendo que este video fue hecho con una version de angular anterior a la 17. Por favor pudieras crear un video usando la ultima versión de angular? Gracias por compartir el conocimiento, sus videos son muy buenos. Saludos
Extraordinario, muchas gracias.
Grande Nico, esperamos con ansian un video de angluar 15
Eres buenisimo explicando las cosas ! Gracias
Por si acaso no sabes porque puedo tener este error ? Ya he preguntado en todos lados y no encuentro respuesta. Me sale luego de ejecutar el comando ionic cap open android
Cannot convert string value 'UNIFIED_TEST_PLATFORM' to an enum value of type 'com.android.builder.model.AndroidGradlePluginProjectFlags$BooleanFlag' (valid case insensitive values: APPLICATION_R_CLASS_CONSTANT_IDS, TEST_R_CLASS_CONSTANT_IDS, TRANSITIVE_R_CLASS, JETPACK_COMPOSE, ML_MODEL_BINDIN
Excelente video, muchas gracias era lo que andaba buscando.❤
Buen video estimado, dan más motivos para inscribirme en tus cursos de platzi, gracias por el contenido
Gracias Nico, cuando inicié hace 3 años un proyecto, me decanté por aprender Angular y tu contenido ha sido de mucha ayuda. También tuve la encrucijada de ir directamente a Ionic pero en ese momento apenas llegaba Capacitor y no había mucha info para un Jr. y quedarme con Cordova no era una opción. Al final he usado Angular con bootstrap, PWA pero me faltan las notificaciones push a IOS. La pregunta es: que tan complicado sería migrar ese proyecto a Ionic? o sería mejor compilarlo con Ionic tal cual está para poder publicarlo en las tiendas? Gracias.
Podrías agregarle ionic para poder compilarlo cómo primer paso, segundo agregar el plugin de oneSignal... Generar un híbrido jajaja y luego darle un re style a tu proyecto con los componentes de ionic.
Por si acaso no sabes porque puedo tener este error ? Ya he preguntado en todos lados y no encuentro respuesta. Me sale luego de ejecutar el comando ionic cap open android
Cannot convert string value 'UNIFIED_TEST_PLATFORM' to an enum value of type 'com.android.builder.model.AndroidGradlePluginProjectFlags$BooleanFlag' (valid case insensitive values: APPLICATION_R_CLASS_CONSTANT_IDS, TEST_R_CLASS_CONSTANT_IDS, TRANSITIVE_R_CLASS, JETPACK_COMPOSE, ML_MODEL_BINDIN
has un curso en platzi de ionic
el android estudio requiere alguna configuracion para lograr hacer lo que hiciste al compilar y emular ?
Excelente, una pregunta que configuración tiene tu compu?
Hola, te consulto, estoy tratando de hacer lo mismo pero de capturar video, con capacitor no hay un plugin que lo haga, esta el media-capture de cordova pero hay problemas para instalarlo
has videos de ionic en platzi yo quiero eres pro :D
Gracias por el video, consulta si yo hago cambios en el código debo hacer todo el proceso para volver a generar la app para Android
Genial Nico... tengo un problema al crear la app android... las peticiones en el navegador funcionan bien pero al convertir a una app nativa android no funcionan.
Un tutorial haciendo CRUD a una rest API en Codeigniter 4
Como siempre un super video! mil gracias, una duda, veo que ionicframework tiene sus propios componentes "nativos" por ejemplo para la camara pero tu en este caso usaste directo el que esta en capacitor y veo que se implementan diferente ¿recomiendas mas que sea directo el de capacitor? es que intente tambien con el de ionicframework pero se implementa distinto y aparte creo que es mas trabajo porque hay que meterlo al modulo, etc. y no me funciono en web como con el que tu usaste directo de capacitor, me encantaria tu opinion, nuevamente muchas gracias!
Muchas gracias Nicobytes, esperando un crash course de ionic 7
Va a salir algún curso en platzi sobre ionic?
Seguirás incorporando nuevos componentes y/o conceptos relacionados con Ionic?
Hola, Genial!! cuando se viene el curso de Ionic???
¡Hola! ¿Tienes algún video o tutorial para agregar el login con JWT a una API Rest? Muchas gracias.
Estimado, una consulta. Si me pasan un código fuente de git o cualquier origen. Como la hago funcionar en mi equipo? Con un npm install?
Cannot convert string value 'UNIFIED_TEST_PLATFORM' to an enum value of type 'com.android.builder.model.AndroidGradlePluginProjectFlags$BooleanFlag' (valid case insensitive values: APPLICATION_R_CLASS_CONSTANT_IDS, TEST_R_CLASS_CONSTANT_IDS, TRANSITIVE_R_CLASS, JETPACK_COMPOSE, ML_MODEL_BINDING)
Me sale ese error luego de ejecutar npx cap open adnroid :C. Me sale en la console de android studio.
A Platzi le ha gustado este video xD. es broma, buen video, IONIC es una herramienta muy buena cuando ya le agarras el hilo.
Amigo cuando harás el video de Angular 15
nico necesito un curso tuyo de ionic donde puedo verlo o comprarlo ? saludos exito en todo
hola, si tengo linux como puedo hacer para compilar una app para apple
Nico como estas?? Ayudaaa!! no me funciona el npx cap open android, dice que no esta instalado android estudio, ya he hecho de todo y nada por favor.
nocobytes ¿La neta, la neta, actualmente en marzo 2023 qué tan recomendable consideras Ionic sobre sus competidores React-Native y Flutter?
Si usas angular porque debería precuparte React Native?
Hola amigo, espero respondas, te comento tengo em pequeño problema con IonIcons, me funcionan todos los compoenente expeto ese, el problemas esta en que no me muestra ningun icono salvo hasta pongo la script, pero no creo que sea la manera correcta o no se si sabes porque esta pasando ese detalle, cabe recalcalr que no estoy usando ningun otro tipo de framework
tienes que importar los scripts en el index.html, esa parte no la hizo en el video
hice todo, en el navegador me funciona pero a la hora de iniciarlo en android solo me tira una pantalla en blanco, tienes alguna idea de que pude haber echo mal?
vale la pena aprender ionic hoy en dia?
Hola a todos y gracias de antemano, en particular a vos Nico. Alguien tendra el directorio android que genera para importarlo en Android Studio, estoy con un error al momento de hacer el buid y ya he revisado el video como 20 veces para saber donde puedo estar fallando. La diferencia que tengo con el video es que mi desarrollo lo tengo dentro de WSL y el Visual Studio lo monte directamente en windows.
Este es error por si les suena a alguno, ya lo he buscado en google y aplicado lo que dicen pero sigue fallando
Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.
> Could not resolve all task dependencies for configuration ':app:debugCompileClasspath'.
> Could not resolve project :capacitor-android.
.......
Ya encontre el problema, solo estaba copiando el directorio android desde el contenedor, tambien se debe copiar node_modules o mejor el package.json y hacer el npm install para armar la carperta de node_modules
Hola, a que se debe que aparezca error = "ng g c pages/home --style=none" Error: Unknown argument: style
Eso es porque es atributo es --styles
Hola deberiamos apostar a esto o pwa ?
A Ionic le viniese bien actualizar material en sus componentes, se ven como del 2015 🥹