Capacitor: La nueva forma de construir apps nativas con Ionic.
Вставка
- Опубліковано 19 вер 2024
- Capacitor es el sucesor de Apache Cordova y Adobe PhoneGap y esta inspirado en el funcionamiento de proyectos como React Native y TurboLinks. Es la nueva forma de construir apps nativas con Ionic en donde se puede generar apps para Android, IOS, Electron, PWA y WebApps.
Links:
Repo: github.com/nic...
blog.ionicfram...
github.com/ion...
Mis redes:
Github:github.com/nic...
Twitter: / nicobytes
Facebook: nicobytes
WebSite: nicobytes.com
Muy bueno este vídeo,
Me gusta mucho que se presente el porqué de las cosas
y la perspectiva histórica antes del video se lanzar directamente sobre el código.
Muchas gracias por el tiempo dedicado y el trabajo,
Muchas gracias Nicobyte por esta excelente explicación, seria muy interesante q realzaras el tutorial de realizar un plugin con capacitor. Muchas gracias por estos tutoriales. por mi parte e aprendido mucho de tus videos.
Hola! muchas gracias y si en este momento estoy organizando un serie de videos entre esos uno solo enfocado a capacitor.
Disculpa una pregunta... cuando apreto el boton BACK se me cierra la aplicacion celular... como puedo programar el boton BACK en el codigo Capacitorjs? 🙏🙏🙏
Admiro tu conocimiento, gracias por compartirla con la comunidad
Muchas gracias a ti por ver los videos, recuerda compartir!
Explicas muy bien 👍 te entiendo mucho y eso me hace seguir tus vídeos.
Muchas gracias por el video.
La verdad es que capacitor va a revolucionar el desarrollo para dispositivos móviles.
Excelete vido NicoByte realmente muy entendible
Gracias amigo siempre sacas buenos tutos!
*Buen video super*
Gracias man, ahora entiendo mas del tema, estoy entrando a este mundio de ionic con vue y nose aun como compilar en andoid y ios
Hola! me alegra que haya gustado el video, espero en los próximos meses subir una serie de videos hablando de capacitor y ionic.
Estimado te recomiendo quasar framework trabaja con vue.js y utiliza capacitor o cordova y te permite desarrollar spa, ssr, pwa, electron y app con la misma base de codigo
@@alejandroalfonsogarciagonzalez ok lo voy a buscar , gracias
quasar.dev/introduction-to-quasar
quasar.dev/quasar-cli/developing-capacitor-apps/introduction
Muy bueno, nuevo sub por aquí. Me gustaría que sigas con más videos de Capacitor.
Excelente explicación pita muy bueno capacitor esperando próximos tutoriales sobre como integrarlo en nuestros proyecto y poder utilizar todas sus ventajas. Podrias hacer una comparativa de proyectos realizado con quasar framework y ionic 4 ambos permite crear aplicaciones (spa, pwa, electron, app con capacitor, app cordova) una diferencia que vería que quasar permite crear SSR a diferencia de ionic 4
Haz un video creando un plugin y corriendolo en tu app si no es mucha molestia llevo mas de 10 horas intentandolo y la información sobre el tema es precaria, se nota que react esta acaparando todo el mercado
Hola! claro que si me gustaría hacerlo déjame lo organizo y lo voy a subir!
@@nicobytes yo también lo espero.Saludos.
Excelente! me suscribí a tu canal!
Si aceptas consideraciones para videos futuros: estaría muy novedoso ver algo de Stencil, que parece una gran herramienta para construir componentes nativos.! Saludos.
Hola, claro que acepto consideraciones y si espero hacer una serie de videos usando stencil.
hace lo de firebase de favor, gran vídeo como siempre, saludos.
Hola! si claro lo voy a tener en cuenta para los próximos videos.
Aquí en 2021. estaba desarrollando una app, pero de repente mezcle mucho ion-native(cordova) con capacitor muchos bugs de por medio xD, encontre este video y decidi o bien se utiliza cordova o utilizas capacitor. gracias por el refresh of memory.
Nico, muy buen video! Consulta: se puede usar Capacitor con Ionic 3? o solo con Ionic 4? Y otra consulta: si tengo un proyecto de pequeña envergadura en Ionic 3+Cordova, conviene agregar Capacitor al proyecto existente o seria preferible crear un nuevo proyecto en Ionic 4+ Capacitor y copiar y pegar el código? Gracias!
Excelente vídeo, como todos. ¿Tienes cursos actualizados de Angular e Ionic? Gracias
Gracias si sería bueno empezar a implementar capacitor y hacer pruebas de uso con sus plugins .. gracias éxitos.
Hola! si es la idea voy a ver si subo videos usando cada uno de los recursos que ya están disponibles para consumir.
Más videos porfavor !!
Hola! claro que si cada semana hay siempre uno nuevo.
muy interesante este avance de capacitotor, a ver si puedes enseñarnos a construir un plugin de capacitor con react y ionic, que casi solo tienes angular :( muchas gracias :D
Hola Nicolas, muchas gracias por tus aportes y los excelentes temas que se tratan en tus videos, de antemano un saludo desde La Montañita, Caqueta, Colombia. ahora si, vi tus videos de Docker y Node, se pudieran integrar Capacitor con Docker o serian plataformas aisladas, debido a que docker nos brinda un container para ejecutar en cualquiera lugar, y capacitor nos brinda una App para cualquier plataforma. Quedo atento a tu respuesta. un abrazo.
Hola, si es posible correr capacitor desde un contenedor sin embargo ten presente que capacitor compila hacia Android y IOS entonces debe tu contenedor también tener todo esto.
Muy bueno Nico, una cunsulta. Soporta cualquier version de Android. ? Por ejemplo tengo un celu MIUM Global 11.0.7 con Android 10 QP1A.
Ionic es recomendable usar de Android 5 en adelante
Q tal buena tarde una pregunta recomendarías tu appflow de iónic. Talvez podrías hacer un vídeo la verdad no hay documentación de sus ventajas o el uso de esta herramienta de iónic gracias maestro
Hola! gracias por ver el video, dale voy a anotarlo y veo si para los próximos videos hablo del tema.
Gracias maestro ojala pudieras hacer video de background geolocation con capacitor y una pregunta mas q características de mac recomiendas para desarrollo con ionic y angular
Hola! gracias por ver el video voy a ver lo del video de background geolocation para los próximos videos, en cuanto a Mac no sabría decirte pero esta es la conf de mi mac: 2.5 GHz Intel Core i5, 16 GB 1600 MHz DDR3 y un disco de estado solido.
Nico, gracias por compartir el conocimiento. Hay algo que no me quedo claro, al usar capacitor tambien trabaja como una especie de puente entre lo web y lo nativo como lo hace cordova? o se hablan directo como lo hace NativeScript?
Hola! aun sigue siendo por medio de un webview solo que mas optimo que Cordova.
@@nicobytes ok gracias. Por ahí leí que es un webview propio de capacitor y por eso lo pueden optimizar para quitarle cosas que no necesitan o tenerlo para que tenga mejor performance.
Gracias por el video...¿Cuando se ejecuta npx cap copy, no se sobre escribe lo que se realizó en código nativo?
hehe hola! se sobre escribe los los assets que tienen que ver con la carpeta www, pero si algún equipo nativo estuvo trabajando eso en cosas nativas eso no se borra.
Muchas gracias,
He intentado seguir el video, pero al compilar tengo el error en ./src/global.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
Require stack:
- C:\Users\chicn\OneDrive\Ambiente de Trabalho\Codigo\Capacitor\codelab-capacitor-preview
ode_modules\sass-loader\lib\loader.js
ya he hecho npm i node-sass pero continua igual, no sé si alguna idea sobre esto.
Buenas nico estoy tratando de hacer una app ionic 4 +capacitor, pero si tomo una app ya realizada con cordova y agrego lo q tu indica en el video me da este error android
events.js:167
throw er; // Unhandled 'error' event
Aligualsi inicio un proyecto nuevo con ionic start --capacitor me da el mismo error
Hola! puede que sea por algún problema con cordova por favor mira esta guia: capacitor.ionicframework.com/docs/cordova/migrating-from-cordova-to-capacitor
Push notifications con firebase
Hola! claro que si anotado!
Paga que hagas un login con Auth0+ionic no hay tutoriales de eso, ademas de ello utiliza capacitor
Hola estimado nicobytes, he estado probando este ionic 5 con el capacitor logre hacerlo correr con ionic serve, disculpa mi pregunta, ya tengo hechas apps en cordova y para mostrarla en la web en mi servidor privado donde solo copio la carpeta www a mi apache en linux. Mi pregunta es aun puedo hacer eso o ahora solo puedo crear estos proyectos para Android y iOS?. Espero comprendas mi pregunta. Quiero generar app iOS Android y web .
Buenas brother, tengo una duda inicie un proyecto con capacitor pero no veo la carpeta resources, que se me haya generado , hay otra forma de cambiar los iconos y el splash con capacitor?
Buenas, yo estoy haciendo una app con ionic 4 con firebase practicamente es un crud, no tendria ningun problema si lo hago con capacitor?? me quedo un poco dudo con eso. Muchas gracias por los video, ayudas muchisimo. (Y)
Hola! no tendrías ningún problema puede usar las bases de datos de firebase, el storage etc todo el sdk de js, lo que debes tener en cuenta es si quieres usar algo que tenga que ver con algo nativo como las notificaciones, aunque para esto ya hay solución capacitor.ionicframework.com/docs/guides/push-notifications-firebase
yo hice una aplicacion con angular y capacitor anda todo genial menos una cosa que no puedo dar con la tecla.
la aplicacion genera PDF lo hace todo bien pero en los descarga en el dispisitivo.. use jsPDF para generar los pdf en el navegador me los abre de una pero una vez pasada la aplicacion por android no descarga.
Excelente aporte, me motivo a migrar un app, pero que tengo lios con el qrScanner de cordova, conoces alguna alternativa para suplir este plugin ?
Hola, pues igual con capacitor puedes seguir usando plugin de cordova te recomiendo este ionicframework.com/docs/native/barcode-scanner
Hola nico, podrías hacer un vídeo de CanDeactivate en Ionic4, yo lo intenté hacer y nunca funcionó, no se consigue suficiente información de como implementarlo. Es practico para cuando un usuario le de a salir de una pantalla sin haber guardado los cambios.
Hola! ok me parece un genial sugerencia así lo tomare para los próximos videos.
Buenos días.. sabes si se puede detectar si se presiona el botón de encendido de un celular con ionic 4?
Hola! puedes ver si hay un plugin, aunque puedes ver si alguno de los eventos nativos de capacitor te sirve capacitor.ionicframework.com/docs/apis/app
Como podrias relacionar django con estoy frontend? Estoy buscando algun frontend que puede ir con django y no los has mencionado. Alguna razon? Me gustaria hacer web apps pero poder migrar a android apps tambien en su momento.
Mencionas que se puede usar ionic framework-capacitor, pero con una sintaxis de React(JSX). Como sería la creación del proyecto ?
No exactamente es así , debes usar Stencil Js un framework que es creado por el grupo de Ionic y es retrocompatible con React y Angular ya que soporta JSX y Compenentes en TypeScript , aun que sinceramente recomendaría hacer tu app con Stencil js con JSX como sustituto de React en este caso.
Interesantemente como sabrás Ionic esta pensado para trabajarlo enteramente con Angular , asi que tu elige.
Hola! en este momento ya es posible la creación del proyecto con react así: ionic start name --type=react
si la mayoría de soporte esta para Angular pero sin embargo ya va saliendo soporte para react y vue.
Es posible hacer esto mismo pero sin ionic? Tengo mi propio UI, todo von div className y css.. en ese caso puedo generar una app móvil o si o si debo usar ionic?
Si es posible solo agregando capacitor y usando todo tu stack sin necesidad de ionic UI
@@nicobytes excelente! Muchas gracias.. se viene la App móvil jeje
Master, recien comienzo con capacitor y me preguntaba si puedo usar sdk nativo android (un plugin de video que creo debo agregar en el androidManifest.xml) junto con el codigo en angular? gracias por explicar de forma tan facil, saludos!
Directamente en el código de Angular no pero lo que si puedes hacer es consumir cualquier SDK y conectarlo a la API de Capacitor aquí la doc => capacitorjs.com/docs/android/custom-code
¿Es posible hacer Live Reload con Capacitor?
Nico, Ionic 5 o React native??
Porque la calidad de tus vídeos es 480 máximo?
He la verdad no se pero estoy viendo para mejorar la calidad de mis videos ahora ando viendo Adobe Premiere para que salgan mejor.
¿Para ejecutar siempre necesito android studio?
Si en capacitor ahora se usan las herramientas directas, cómo Android Studio o Xcode para ejecutar, compilar y subir a tiendas
Como utilizar indexeddb con capacitor
hola!, gracias por el video. Sabes si Capacitor funciona con ionic/vue ? no estoy logrando instalarlo.
Hola! si debería funcionar solo trata de seguir estos pasos capacitor.ionicframework.com/docs/getting-started
como se cambia el icono de la app?
Para capacitor se usa un paquete que es cordova-res es de ionic creo que pronto le van a cambiar el nombre hehe
@@nicobytes gracias
Cuesta configurarla no le crean
el android estudio me da error al tratar de encontrar el dispositivo fisico.. se quedadescargando algo que nunca termina... que porqueria de android estudio... con razon no segui el curso de android antes... se come los 8gb de ram que tengo... que rabia.
Confígurate bien y mejorá la forma de hablar por favor.
Si claro como digas...