Convertir tu web en una app móvil
HTML-код
- Опубликовано: 29 авг 2024
- En este tutorial te enseño cómo convertir tu web en una app móvil usando Ionic y Angular.
Ten en cuenta que puedes hacerlo usando React o Vue también =)
Si te ha gustado no olvides dejar tu like y comentario para más vídeos como este.
Redes de Programación en Español (Incluyendo perfil de Github donde está el repo del proyecto):
▬▬▬▬▬▬▬▬▬▬
- Ve todas mis redes aquí: my.bio/prog-es
Enlaces de interés:
▬▬▬▬▬▬▬▬▬▬
- PARTE 2: • Como publicar tu app e...
- Instalar Ionic: ionicframework...
- Instalar Node y NPM: nodejs.dev/
- Configurar android studio: ionicframework...
- Plugins Ionic: ionicframework...
- Comandos Ionic: ionicframework...
- AirDroid: play.google.co...
PARTE 2: ruclips.net/video/m2nl3_fUtkg/видео.htmlsi=nYD1_fAHaMZSxZJV
Enorme descubrimiento al ver este video, suscrito al canal desde ya. Gracias.
¡Muchísimas gracias! Bienvenido a Programación en español =) Un gran saludo y que tengas buen código!
es una opción muy interesante para una app rápida y que no necesite mucho interacción con el móvil, gracias por estos contenidos, suscrito 👍
¡Muchísimas gracias por el comentario y la sub! Me alegra un montón que te haya gustado el vídeo, un gran saludo y que tengas buen código!
Gran video, estoy empezando en el mundo de la tecnologia y me parece genial encontrar este contenido en youtube!
Seria genial que hicieras la segunda parte! 👍🏼👍🏼
Muchas gracias por tu comentario! Me anoto segunda parte para firmarla y cambiar cosas como el título e iconos =)
Gracias por el tiempo y lo detallado de la explicación.
Un suscriptor nuevo
Desde:
Bogota Colombia 🇨🇴
Grandeeeee, un abrazo desde aquí y gracias por tu comentario y sub!! Un saludo y que tengas buen código!!
No puedo dejar de pensar en Saúron , pero enorme aporte.Gracias!! exitos!!
xD Sauron es quien nos corrige el código asjdhaksdhakjsd muchas gracias por tu comentario!
Yo lo que hice una vez fue crearme un webview que es la creación de un navegador web en android y luego le decía que al abrirlo buscara la url de mi pagina responsiva hecha en Bootstrap y ya, pero por supuesto esto es mas profesional porque puede acceder a los elementos del dispositivo y eso es esencial.
Esencialmente es lo que hacemos con ionic en este caso, sin embargo, como bien dices, si queremos hacer una app con acceso a alguna funcionalidad del móvil, podemos hacerla con ionic sin problema =)
Oye hermano muchas gracias eres genial . Si de hecho espero segunda parte. ... Vale te cuento soy estudiante y estamos creando en clase una app web pero me tope este video y me parece genail lo voy a aplicar y se que con tu explicación quedara genial para app movil . Gracias 😎✨👌🏻
Mil gracias!!! En efecto, grabaré segunda parte para la publicación de la app en cuanto me libere de pendientes en la lista de videos =) Un saludo y que tengas buen código!
Gracias. Me encantó el vídeo.
Una pregunta. No afecta el php al momento de ponerlo en móvil?
@@_7u7-nayelilopez10 No, lo que haces con ionic es cargar la web en un browser dentro de la app, el código de la app no tiene nada que ver con el de la web así que no importa con qué esté desarrollada la web en cuestión =)
@@programacion-esgracias ❤. Te admiro . Me es de ayuda muchas gracias 😎👩🏻💻🤙🏻
@@_7u7-nayelilopez10 Muchas graciaaaas!! =)
Excelente video, muchas gracias, si pudieras hacer la segunda parte para subirlo a play store seria genial
Primero la tendrías que firmar, y luego tendrías que tener cuenta de desarrollado, de ahí la puedes subir
Muchas gracias por tu comentario! Me anoto hacer segunda parte donde también muestro cómo cambiar el título e iconos de la app =)
Espero con ansias tu video explicando como subir la app al play store!! Muchas gracias!
Se viene pronto, ya estoy preparando el material =)
Muy bien video, gracias! Por cierto comentas que para hacer la app para iOS se necesita un Mac, no hay ninguna otra forma?
Hay servicios en la nube donde puedes alquilar máquinas con MacOS, pero siempre tendrás que hacerlo desde MacOS, no puedes compilar una app iOS desde windows o linux porque necesitas XCode =)
Hola Bro, muchas gracias por el video excelente, estaría genial la segunda parte
¡Muchas gracias a ti por comentar! Pronto publicaré la segunda parte para subir una app Ionic a la Play Store =)
Excelente justo lo que necesitaba para no hacerla nativa a la pagina gracias
Esoooo, me alegra que te haya sido útil, un saludo y que tengas buen código!!
Buenas! He seguido tu tutorial perfectamente explicado. He probado la version web y funciona, he probado con bluestack la apk y funciona pero cuando la he instalado en mi movil me aparece pagina web no disnonible y el siguiente error:
"net::ERR_CLEARTEXT_NOT_PERMITTED"
Alguna idea? Veo que por foros comentan tocar el archivo resources/android/xml/network_security_config.xml pero esa ruta y ese archivo yo no los tengo
Mmm, tienes varias opciones, puedes probar creando tu el archivo y agregando la config al xml o usando algún plugin que haga el fix por ti, creo que hay uno llamado plugin-cleartext justamente =)
20 años esperando que alguien me explicará la metodologia de como partir con una apps.. para alquién que no viene del mundo pragramación
Esoooo espero el video te haya sido útil, un saludo y que tengas buen código!!
muy buen aporte! lo voy a probar, ya que necesito hacer algo como esto. gracias
Esooo ya me cuentas qué tal! Un saludo y que tengas buen código!
genial tu video funciona al 100% si puedes sube la segunda parte te agradeceria mucho
Muchas gracias por comentar!!! Prepararé la segunda parte para subirla próximamente =) un saludo y que tengas buen código!
Excelente aporte , muchas gracias!!! Una pregunta, si queremos usar las funciones del movil como por ejemplo el gps o la camara, esto que explicas tan bien valdría? perdona mi ignorancia en el caso de que sea una pregunta tonta, estoiy empezando en este mundo e intento hacer una app que interactue con opciones del movil como la camara, posicionamiento. MUCHAS GRACIAS !!!!!
Hola! Si, si quieres acceder a este tipo de funcionalidades tienes plugins de capacitor para hacerlo e implementarlas en tus componentes, te dejo por aquí la lista de plugins con su documentación y ejemplos =) ionicframework.com/docs/native/camera
@@programacion-es muchas gracias por la respuesta!!! Miraré lo que me comentas . Sigue así ...saludos máquina !!!
@@78ballenero grandeeee, muchas gracias a ti!! Un saludo!!
excelente video explicado 100% un suscriptor mas
Muchísimas gracias!!! Bienvenido =) un saludo y que tengas buen código!!
Me ha funcionado a la perfección.
¿Sabes cómo puedo hacer para que los links externos de mi web se abran en el navegador nativo y no en la propia app?
He estado leyendo la documentación pero me estoy volviendo loco.
PD: Todos los enlaces externos tienen un "_blank"
¡Muchas gracias de antemano!
¡Hola! Podrías echarle un ojo al paquete inAppBrowser (está en la doc de ionic) a ver si te ayuda =)
Muchas gracias! Justo lo que buscaba. ¿El video para publicar la app ya está disponible?
Ya lo tienes aquí ruclips.net/video/m2nl3_fUtkg/видео.html =)
Excelente tutorial, quiero pensar que si al ingresar la instrucción "ionic cap build" si eliges "ios" también te daría la opción de generar tu aplicación para Iphone pero, que herramienta usarías para generar la aplicación en vez de Android Studio??
En este caso necesitarías una MacBook, para generar y publicar los .ipa (extensión de las apps para iOS) se haría a través de XCode =)
Excelente ,tener cuidado con la versión de android que despliega el apk si se despliega en Android 12 no es compatibles con versiones menores en los dispositivos tener en cuenta
¡Muchas gracias por el aporte! =)
sabes como resolver eso de las versiones ?
Muy bueno y muy fácil de entender. Te consulto, sabes si es compatible con una web de woocomerce este método también?
¡Si que puedes! Al final estás creando un webview que carga una web, mientras esté disponible en internet funcionará =)
Si tengo una web en react tengo que hacer tu tuto y crear esa app en react? o puedo hacer tu tuto en ionic y angular y redirigir mi pagina en react?
Puedes hacerlo de varias formas, si la web está desplegada, puedes seguir el tutorial y cargarla en el webview, si quieres usar react en vez de angular, también puedes hacerlo, si quieres crear la app con las mismas funcionalidades de la web, ya sería desarrollarla con ionic o react-native en vez de tener un webview cargando la web desplegada
Buenos dias, muchas gracias, el video es bien claro, de ionic no se nada, segui los paso de este video y todo quedo bien, lo que hice, que no esta en el video, fue que actualice node, por lo demás todo bien.
Pero al momento de ejecutar en el dispositivo y/o en el emulador, me queda la pantalla en blanco, puse varios url distintos y en ninguno funciono, debe ser un pequeño error mio, pero no se como resolverlo. Gracias de antemano
Probablemente sea tema de versiones, tienes la versión actualizada de este video aquí ruclips.net/video/m2nl3_fUtkg/видео.html
Si la app web tiene backend y DB, es el mismo proceso? O esto aplica sólo para páginas estáticas?
Es el mismo proceso =)
Ionic no estaba próximo a morir? *no es hate, es una pregunta real, hace un tiempo vi que ya no se estaba actualizando.
No, todo lo contrario, siguen sacando releases y han mejorado muchas cosas, ahora se integra con capacitor y también puedes crear tus apps con vue o react =)
Hola excelente video y muy funcional, dos preguntas 1 porque cuando realizo otra diferente desde dar ionic start, al momento de pasarla a mi móvil si tengo una que hice me la toma como para actualizar y no tener dos diferentes, y 2 si mi web necesita permisos como de cámara y lectores como se los agrego al momento de hacer la app?
¡Hola! Recuerda que estás generando otro paquete de la misma app, al ser el mismo paquete (nombre, etc) lo tomará como actualización (por eso cuando actualizamos de la play store no se instalan todas las versiones de todas las apps) Para los permisos, tienes que agregar los necesarios en el manifest de la app para que Android permita al usuario dar los permisos a tu aplicación =)
Hola, me está encantando tu vídeo y me he puesto a hacerlo al mismo tiempo para una web que tengo. El problema llega en el minuto 7:13 cuando dice de importar los módulos, ya que IONIC no me ha creado el archivo home.module.ts ¿Puede ser debido a la versión? Uso las más recientes.
Si, en efecto, se debe a la versión, tienes aquí la segunda parte del vídeo donde muestro cómo publicar la app y aprovecho de hacer el mismo ejemplo rápido con la última versión =) ruclips.net/video/m2nl3_fUtkg/видео.html
@@programacion-es Muchísimas gracias!!!
Espectacular! Muchas gracias :D en poco y nada pude pasar mi web a Android gracias a ti :D una consulta: estoy intentando indicar con loadstart que se realizará una descarga de una imagen, pero no hay caso. ¿sabrás al respecto alguna solución?
Esooo, mil gracias por el comentario! En cuando al loadStart, revisa si estás usando la implementación del InAppBrowser y que tienes una versión actualizada, échale un ojo a este hilo: forum.ionicframework.com/t/inappbrowser-loadstart-not-firing-in-ionic-4/146658/4
Hola bro buen video , esperando la segunda parte masterizada , saludos
bro una consulta si hago un cambio en el ionic como lo actualizo en el android ?
@@johnypress Si es un cambio en la app, debes hacer otro build, si es en la web, se actualizará solo porque la cargará al abrir la app =)
Excelente, solo una duda, en mi app web, desde un navegador de android me deja tomar fotos con la camara, pero si lo hago siguiendo tus pasos, no se activa la cámara, alguna idea?
Si, recuerda que estás creando una app, no estás interactuando directamente con un navegador, por lo que la app tiene que tener permisos de acceso a la cámara y, de necesitarlo, funciones específicas para abrir la cámara del dispositivo, échale un ojo a esto: ionicframework.com/docs/native/camera
Gracias por tu video muy util para algunas app que no requieras o no valga la pena reahacer de cero si ya la tienes en web. Para agregarle la funcionalidad de Notificaciones push seria con el procedimiento habitual para ionic con iOS y Android o hay algo adicional que se deba considerar ?
Puedes utilizar un servicio como firebase para las notificaciones, también hay un paquete para usar con Ionic: ionicframework.com/docs/native/push
Hola amigo gracias por enseñarnos, pero te cuento que no me funciono,, todas las versiones que tengo ahora son mas nuevas, incluyendo el android studio, y nada funciona, por favor como hago, que se debe cambiar, si lo modificas para las nuevas versiones de agosto 2024
Tienes el vídeo con versiones actualizadas aquí: ruclips.net/video/m2nl3_fUtkg/видео.html
Hola por favor avisar si vas a realizar la 2da parte. Muchas gracias y muy bueno el video
Hola! Planeo hacerla, no la he grabado todavía porque no me ha dado tiempo de ponerme al día con las actualizaciones del procedimiento de publicación de apps en la playstore, en cuanto pueda ponerme al día, grabo el vídeo y lo publico, un saludo!
Hola, hice todo el proceso pero cuando abro la app, inicia el navegador como normalmente lo hace, en realidad no me esta ejecutando como una app ¿que puedo hacer? gracias
Mmm puedes revisar cómo estás usando el plugin, puede que te esté llamando a un navegador del móvil en vez de cargar la web en el inappbrowser
si el utiliza permisos de cámaras y micrófono, como podría solicitar los permisos de manera correcta y de manera nativa?
Cada plugin para usar alguna funcionalidad como la cámara y el micrófono tiene métodos para manejar los permisos, te dejo como ejemplo la doc del plugin de la cámara: ionicframework.com/docs/native/camera
Hola como estan exelente el video solo una pregunta en mi ignorancia como configurar el entorno de desarrollo? porque a mi no me aparee en la terminal lo mismo que a usted y ademas ya instale todos los componentes pero cuando le pregunto la vercion me dice que no tengo nada instalado
Échale un ojo a la documentación y sigue los pasos para el setup: ionicframework.com/docs/intro/cli
@@programacion-es ya lo realice con un video que tienes con su configuracion y extenciones, ahora el problema que tengo es que siguiendo el video a hoy las cosas no estan de la misma manera o ya se nombran diferente o simplemente no estan, si nos podrias regalar otros 18 minutos de su valioso tiempo se lo agradeceria enormemente... de antemano mil gracias.
@@jorgearmandovillanuevaquic9799 Ya lo tienes actualizado en este vídeo donde comento la nueva estructura y, además, cómo publicar la app =) ruclips.net/video/m2nl3_fUtkg/видео.html
que tal amigo oye quiero compilar para ios y todo bien pero cuando instalo la app me abre el safari y me muestra todo jaja el url bar. hace zoom o sea se abre otra ventana de safari me abre la app se queda en blanco y luego me lanza a safari. y pues se pierden las propiedades, como seria? por favor ayuda.
Mmm, podrías echarle un ojo al plugin del inappbrowser a ver si tiene alguna config específica para iOS
Hola amigo, muy bien explicado, muchas gracias, pero al momento de hacer ionic cap build, se abre android studio, pero me da error "Could not create parent directory for lock file ....'.", saludos!
Échale un ojo a este hilo a ver si te ayuda =) stackoverflow.com/questions/37086806/android-studio-failed-to-apply-plugin-id-com-android-application
El video el Buenisimo, superbien explicado muchas gracias.
Estoy siguiendo las instrucciones, pero cuando llego al plugin in app browser, no se muestra en la pagina y veo un articulo de que esta dando problemas.
Hay alguna otra opcion en los plugins que se muestra en la pagina de ionic?
Hola! Muchas gracias por comentar! En cuanto a alternativas, si te da problemas el plugin de ionic puedes probar directamente con el equivalente de cordova: cordova.apache.org/docs/en/10.x/reference/cordova-plugin-inappbrowser/ cualquier cosa me comentas =) Un saludo y que tengas buen código!
hice el procedimiento como lo hiciste, pero cuando instalo la app en mi teléfono la pantalla queda en blanco. Como puedo solucionar esto?
Prueba en el emulador de Android Studio para que puedas ver los logs y detectar qué está fallando para corregirlo
Hola, excelente video, solo una duda. ¿que versión de ionic usas?
¡Hola! Al momento de grabar, la 6.20.1 =)
Muy buen video, muchas gracias
Gracias a ti por comentar! Un saludo!
Muy buen video!.. Quisiera preguntar ¿Si mi proyecto esta aún sin publicar, puede probarse con ionic?, aún está en desarrollo, pero me interesa para saber cómo va quedando, hacer pruebas y todo eso
Claroooo! Puedes probarlo de varias formas, directamente en el navegador o, si usas apis para acceder a funciones nativas, puedes generar un apk debug e instalarla en tu móvil con Android o usar también un emulador con android studio =)
Holaa buenisimo video, consulta ¿Si ya tengo hecha mi aplicacion web en Angular todavia puedo implementar ionic, siguiendo los mismos pasos del video?
Me imagino que al ejecutar el "ionic start", ¿lo hago directamente desde la carpeta donde tengo mi aplicativo de Angular? ¿O en plan estaria arruinando toda mi avance en Angular? Jajaja
¡Hola! En tu caso puedes hacer 1 de 2 cosas:
Si tienes tu webapp desplegada con angular en un server y quieres solo "encapsularla" como app móvil sin hacer la migración de la app, puedes hacer lo que muestro en el tutorial
Si, por otro lado, quieres aprovechar el código que tienes con Angular, tendrías que crear un nuevo proyecto de Ionic con Angular, migras el código de tu app a este proyecto de ionic y, ahí sí, comienzas a probar la migración con ionic start
Un saludo y que tengas buen código!!
@@programacion-es Hola! Tengo una aplicación en angular que aún no la subo al servidor, entonces me sigue corriendo con ng serve.. Seguiría los pasos del tutorial? O que deberia hacer? Saludos!
Hola, hace tiempo laburo con angular. Tengo varias web app echas. Si nocomorendimal podría crear una app con ionic con una web app que tenga alojada en algún hosting? Si es así me gustaría probarlo!
Si, el tutorial es independiente de cómo esté hecha la web, la puedes alojar en algún hosting y seguir el tutorial para llamarla desde el inappbrowser que usamos
Genial el video, una duda! como puedo cambiar la versión para subirla nuevamente a la playstore? ya que la subí una vez y la versión que tengo es la 1.0 y ahora le realice unos cambios y no encuentro como cambiarla
Si mal no recuerdo puedes hacerlo desde el capacitor.config.json o directamente en los archivos de Gradle, échale un ojo a este hilo donde comentan qué archivos específicamente: github.com/ionic-team/capacitor/issues/840#issuecomment-426234086
Una aplicación wed tipo marketplace, también se puede mudar a una app
Si, al final lo que estás cargando en el webview es una página web que ya está desplegada en su dominio y demás, sería como abrir la web desde el navegador del móvil, pero encapsulado en una app =)
Se puede monetizar la página web (app) cuando ya esté en play store ?
Con adds de la play store no, en teoría sería con las mismas ads de la web dado que estás embebiendo un webview =)
Grande!! Una pregunta, el motor del navegador de la app es chromium? La web que quiero encapsular solo acepta ese motor.
Por defecto si, échale un ojo a esta referencia ionicframework.com/docs/reference/browser-support
cual seria el proceso para que al tener mala conexión a internet (o nula), la app muestre al menos el contenido actual junto a un mensaje de Sin conexion?
Échale un ojo a este plugin: ionicframework.com/docs/native/network con eso detectas el estado de la conexión y puedes mostrar o redireccionar a donde necesites =)
Vengo del futuro, se puede hacer lo mismo con el plugin browser de capacitor? o funciona diferente?
Generalmente se usa para abrir enlaces de la app dentro de la app con el inappbrowser, pero, en teoría sí, podrías hacerlo usando el plugin =)
Excelente tutorial amigo, pero tengo una duda
El In App Browser oculta la barra de estado (Por lo menos en Android que he probado hasta ahora), dejando un horrible margen negro en la parte superior, pues se ocultan los iconos de batería, notificaciones, hora, etc.
Hay alguna manera para solucionar esto o que por lo menos la barra de estado se muestre? Apreciaría mucho tu ayuda de antemano gracias
Mmm, prueba agregando en el create la opción fullscreen: "no" a ver qué tal =) tienes todas las opciones en esta doc del plugin: cordova.apache.org/docs/en/10.x/reference/cordova-plugin-inappbrowser/
hola, andriod studio solo serviría para generar el apk de la aplicacion o hay que escribir codigo ahi?
En este caso solo lo uso para el build, pero podrías usarlo para lo que necesites =)
@@programacion-es esta muy bueno gracias por el video!!
Hola bro ! ¿Este tutorial serviría para mi web creada con WordPress?
Si! De hecho la web que muestro está con wordpress, el tutorial sirve independientemente de con qué esté hecha siempre y cuando esté online =)
¿Hay forma de que al compilar en iOS y al abrir la aplicación no cambie de pantalla al navegador y abra ahí la URL, sino que se quede como en Android dentro de la app?
Si mal no recuerdo lo puedes hacer con el paquete inAppBrowser =)
Hice una app con app marker pero cuando quiero abrir la app de google maps lo abre desde el navegador y no la app. hay alguna solucion?? crees que pueda pasar lo mismo si sigo este tutorial?
No sé si tienes acceso al código generado con app maker, pero para abrir en la app de maps puedes probar, en el enlace, cambiar el formato por algo como lo que muestran aquí a ver si te soluciona el problema =) forum.ionicframework.com/t/open-map-application/129549/3
Perfecto...... muchas gracias.
¡Gracias a ti por comentar! Un saludo!
Hola excelente vídeo! La verdad muy bien explicado, pero te comento tengo un problema al replicar una web, es que me sale el 'blank screen' y de ahí no pasa, seguí los mismos pasos del vídeo, pero tengo duda si es por la versión de IONIC que es la 7.1.1 y de node es v16.20.1 no se si eso tendra algo que ver o es otra cosa porque busque en foros y no encontré una solución a esto ya que las soluciones que vi no eran para replicar sitios web y eran mas confusos ya que mencionaban muchas variables de capacitor que no están en tu vídeo no se si podrias ayudarme ? Gracias y muchos éxitos siempre!
Mmm habría que hacer algo de debug, puedes probar ejecutando la app en un emulador de Android studio para ver los logs de la consola a ver si tienes algún error o te salta algo por compatibilidad =)
@@programacion-es me sucede lo mismo, probándolo también en el emulador de android, buena explicación, por cierto
@@sergiagustin1579 trata de revisar los logs del emulador para ver si te muestra algún error para poder guiarte en lo que puede estar pasando =)
me pasa lo mismo, lo pudieron solucionar?
disculpa a mino me aparese dentro de la carpeta home, home.module.ts no puedo agregar el componente al modulo :( sabras el porque
Puedes crear el módulo con el cli de Angular con el comando ng g module home =)
Que tal amigo una consulta como se haria para poder hacerlo con flutter es decir, yo tengo mi aplicativo web y quiero llevarlo a las tiendas de playstore y de apple pero queiro hacerlo con fluter, que solucion puedo considerar, desde ya muchas gracias por tu respuesta y excelente contenido
El principio sería similar, usando un webview para mostrar la web, te dejo un artículo que puede serte útil y, de todos modos, me anoto grabar un vídeo con el mismo ejemplo pero usando flutter =) acctgen1.hashnode.dev/flutter-webview-tutorial-1-convert-a-website-into-a-mobile-app
Hola, es muy interesante pero tengo una duda... como puedo hacer para que se pueda abrir la app móvil sin necesidad de tener conexión a internet? Cargar la interfaz y hacer usos de ella pero que almacene los datos temporalmente y los envíe cuando tenga conexión a internet?
Tienes algún video relacionado?
Podrías hacerlo con el plugin de ionic de network, si el estatus es offline, almacenas lo que necesites en un store, tipo localstorage o una bd local tipo sqlite y al detectar que ha cambiado el estatus de la red, envías la data. De momento no tengo vídeo, pero puedo anotarme hacer algo similar =)
@@programacion-es
Gracias! 🖐
Muy bueno tu video y explicación, en android funciona de maravilla pero en ios... las configuraciones que aparecen en la documentación no funcionan de la misma forma
En efecto, para iOS el procedimiento es ligeramente distinto y, claro, necesitas una Mac para poder hacer la publicación y demás procedimientos a través de XCode
@@programacion-es, primero que nada, gracias por tomarte el tiempo de responder, te comento que estoy utilizanzando una mac y Xcode , y me he encontrado con algunos problemas que en android no ocurren, por ejemplo al ejecutar la app, en ios igualmente abre safari... he revisado todas las configuraciones disponibles en la librería y no he podido solucionar ese efectos, ni eliminar el campo de la url.. en fin soy novato en esto a si q talves este omitiendo algo... solo quería compartir mi experiencia en ios.
Saludos... y gracias por compartir
gracias por el video, estoy creandolo desde linux ubuntu y se queda en blanco, no carga la pagina. En el inspeccionador me muestra este mensaje: ERROR Error: Uncaught (in promise): Error: Invalid provider for the NgModule 'HomePageModule' - only instances of Provider and Type are allowed, got: [?[object Object]?]
Error: Invalid provider for the NgModule 'HomePageModule' - only instances of Provider and Type are allowed, got: [?[object Object]?]
No tengo idea de cual es el problema.
Hola! Revisa bien dónde estás agregando los módulos, éstos no van en los providers, se registran en las rutas o en los imports, dependiendo de lo que necesites
Hola, una pregunta, si se realiza una actualización a la pagina Web, no se ve reflejado el cambio en la app, por tanto hay que volver a empaquetar?
Debería verse reflejado en la app ya que solo estás cargando la web en un webview =)
@@programacion-es muchas gracias en efecto si se actualiza aunque no en tiempo real, sino pasando un tiempo que aun no se exactamente cuanto, en cuanto tenga la respuesta la postearé.
Muchas gracias por tu opinión y ayuda, gracias a tu ejemplo también pude lograr hacer lo mismo para IOs, en efecto son mas detalles pero tu video me sirvió en gran manera, infinitas gracias.
@@IvanAg777 Muchísimas gracias por comentar y por el feedback, un gran abrazo!
Tengo una duda: cómo puedo hacer para que cuando la app no tenga conexión a internet salga una pantalla que ponga que esta App requiere de conexión a internet?
Puedes usar el plugin Network para verificar el estado de la red, si el usuario está offline, puedes renderizar un componente en la app que le dé un mensaje o mostrarle un alert para notificarle que debe estar online, te dejo el link: ionicframework.com/docs/native/network =)
Saludos, excelente video. he seguido los pasos llegando hasta el apk pero en el teléfono la app se queda en blanco. pero tambien al iniciar ionic serve en el navegador también esta en blanco, y en la consola del navegador aparece el siguiente error: Error: Uncaught (in promise): NullInjectorError: R3InjectorError(HomePageModule)[InAppBrowser.... ....NullInjectorError: No provider for InAppBrowser!. Ya corregí tambien al final de las lineas import que debe aparecer "/ngx", escribiendo con el visual studio code no la agrega por defecto. Gracias de antemano
Hola! Asegúrate de que tienes el paquete inappbrowser instalado y que lo estás agregando en el array de providers del app.module de tu app =)
Excelente gracias
Esoooo, me alegra que te haya sido útil, un saludo y que tengas buen código!!
Ya parece que yo iba a andar pagando a la apple store para subirles mi app, que no era al reves? PWA y nos quitamos el yugo. Excelente video como siempre.
Hola Gran video. Pero necesito ayuda. tengo que dejar dos APP en una tablet. ambas son web y me a servido un monton el video. pero pasa que cuando compilo el segundo apk. la tablet me lo reconoce como una actulizacion del primer apk instalado y me lo sustituye, solo cambie el nombre del proyecto y la URL. saludos gracias por tu tiempo.
Hola! Te está haciendo eso porque es el mismo apk, para que lo tome como uno distinto, tienes que cambiar el nombre en el manifest.xml (o puedes crear otro proyecto con otro nombre y solo replicar el código). Cualquier cosa me dices =)
@@programacion-es Muchas Gracias. igual investigue y claro era eso. Saludos.
@@nadinalejandrosilvestre5203 Esoooo!
@@programacion-es Saludos. no pares. 💪
Mi hermano que buena informacion , seria genial que subieras un video de como subirlo la apk compilada a la play store. Tambien para usuarios que no somos miembros de la play store de google como seria el procedimiento para la licencia de desarrollador de la play store.
¡Muchas gracias por comentar! Lo tengo anotado para grabarlo próximamente, aprovecho de añadir también el cómo registrarse como desarrollador en la play store =)
@@programacion-es oye si pudiste hacer este tutorial?
@@manuelmillan6723 todavía no, lo tengo pendiente porque no me he podido actualizar con los cambios de firma y subida de apps, quiero hacerlo para principios de 2024 que tenga unos días para ponerme al tanto y grabarlo bien
Ya efectué todos los paso pero la App me sale en blanco no me aparece mi pagina
Échale un ojo a la consola a ver si te arroja algún error y verifica que estás usando la misma versión de Ionic, plugin, etc del vídeo =)
Hola, excelente contenido. Quería preguntarte si ofreces este servicio, necesito ayuda para crear la mía. Gracias!!!
Hola! De momento no estoy aceptando proyectos nuevos por falta de tiempo, pero en Discord tenemos un canal de ofertas de trabajo y puedes publicar lo que necesitas y seguro algún developer del server se anima
Aquí el link a Discord discord.gg/programacion-es
hola, tengo un problema, realice todo el proceso de instalacion de ionic todo iba bien pero cuando me dio error revise las carpetas y me di cuenta que faltaban las siguientes: home-routing.module.ts, home.module.ts, app-routing.module.ts, app.module.ts , trate de reinstalarlo pero todavia faltan
Probablemente tengas una versión más reciente de ionic y te está creando la app sin módulos, sin problema, échale un ojo a la parte 2 de este vídeo donde muestro el código actualizado y lo dejo en un repositorio en la descripción, aquí el link: ruclips.net/video/m2nl3_fUtkg/видео.html
@@programacion-esok gracias
Gracias por responder, era el JAVA_HOME, pero ahora me da otro error "Could not create parent directory for lock file" in gradle directory
Esto puede deberse a varias razones, en stack overflow o issues de github de gradle consigues algunos casos para probar a ver cuál es el tuyo para poder solucionarlo, probablemente sea algo del entorno que falte a nivel de config, permisos o servicio =)
@@programacion-es Gracias por contestar, ya esta solucionado, no me creeras, eran algunos acentos en el nombre de la carpeta 😞
@@fbellod86 Suele pasar =(
Buenas noches genial tu video ,puedo manejar notificaciones con esa apk
Tendrás que agregar esto ionicframework.com/docs/native/push-notifications
cuando compilo a traves de cordova la geolocalizacion de mi pagina leaflet funciona super bien, pero al hacerlo desde capacitor y android studio no, llevo algunos dias peleando con ese problema, a alguien le ha pasado algo similar?
pareciera ser un problema de cache de capacitor.
He visto que puede pasar si la url no tiene ssl, debe de ser https, de todos modos, te dejo un enlace a un artículo que quizás te sea útil medium.com/@tsung-wei_hsu/ionic-background-geolocation-easily-managed-with-leaflet-3ccbc315ec31
Hola sabes si puedo implementar comunicación entre la app y en navegador con post message?
Hay un ejemplo en la doc del repo: github.com/apache/cordova-plugin-inappbrowser#example-1 y te dejo un hilo donde conversan del tema también: github.com/apache/cordova-plugin-inappbrowser/issues/420
Si gracias también otro video de esto
Genial, me lo anoto =)
hola excelente vídeo 👍👍
Muchas gracias! =)
Ya hay segunda partes iata cambiar el icono ?
Si, la tienes aquí ruclips.net/video/m2nl3_fUtkg/видео.html
Tienes algún video de como instalar las cosas del inicio 0:50 a 1:10 jajajaja es que no se naaaaa de broma descargue Visual Studio jajajaja, pero hombre cobarde no conquista mujer bonita...
Lo intenté, pero me dice: No se puede cargar el archivo C:\Users\Cloost\AppData\Roaming
pm\ionic.ps1 porque la ejecución de scripts está deshabilitada en este sistema. No sé que es jajajjajaja
xD no sé si has probado ejecutarlos desde una terminal (powershell o cualquier otra) abierta como administrador, de todos modos te dejo algo por si te ayuda: www.cdmon.com/es/blog/la-ejecucion-de-scripts-esta-deshabilitada-en-este-sistema-te-contamos-como-actuar
saludos men, he intentado lo que has hecho en el min 11:20 pero me dice esto: [capacitor] [error] Platform [android] not found. ¿Que hago? tengo que instalar algo mals?
Asegúrate que hayas agregado la plataforma con el comando de capacitor add
@@programacion-es He logrado solucionar, pero me dice que tiene error de conexion, solo funciona con webs que esten subidas a internet? es que intente hacerlo funcionar con una conexion local de un proyecto de django, tipo 127.0.0.1:8000, pero no me funciona. Dice error de conexion a pensar que el server esta activo. por eso pregunto, ¿Tengo que subir la web a internet para que funcione?
@@JohanMarrugo Si, al final estás cargando un webview como app, así que, para encontrar la web a cargar, debe estar online
@@programacion-es perfecto gracias
hola ando en busca de alguin que me realice una app, tu esta disponible para hablarte que es lo que quiero y luego subir a iphone y android
Hola! Muchas gracias por considerarme pero de momento no estoy aceptando nuevos proyectos por falta de tiempo, un saludo!
¿Siguiendo los pasos del video lo puedo conseguir? no tengo ni idea de programación
Si, además, tendrás que configurar el entorno para usar todo, tienes todo en la documentación de Ionic: ionicframework.com/getting-started
Excelente video, podría hacer uno usando un proyecto c# y ionic?
Hola, muchas gracias por tu comentario! En este caso, Ionic no trabaja con c#, no sé si te referías a un caso/uso en particular, pero puedes echarle un ojo a la doc para ver con qué stack trabaja el framework y sus posibilidades y si necesitas algún tutorial detallado me dices para planificarlo, un saludo! =)
No me crea la carpeta android despues del ionic cap add android
Mmm, te recomiendo echarle un ojo a la doc: capacitorjs.com/docs/getting-started/with-ionic#add-platforms si el error persiste, puedes pasarte por nuestro Discord o por un directo de Twitch y lo vemos =)
Te hizo falta explicar que para la versión que estas utilizando, cuando los dev procedan a instalar deben seleccionar modules
Cierto, aunque en la versión 16 al iniciar un proyecto angular sigue teniendo un módulo principal en el que registra los componentes y lo mismo con los componentes a menos que le pases el --standalone, pero mil gracias por el aporte =)
@@programacion-es Que versión de Android esta utilizando?
amigo por casualidad tendras el codigo y me lo pudiera compartir
Claro! El código lo tienes en este repo: github.com/pedrovelasquez9/ionic-web-in-app/tree/master
Google Store No acepta apk tiene que ser aab
Si, lo tienes en la parte 2 donde muestro como generarlo y publicarlo
@@programacion-es Bro cómo transformó el HTML, css, javascript en mi tablet para monetizarlo en la Google Store
Hola, como lo puedo hacer con ionic Vue?
Puedes echarle un ojo a la documentación de Ionic con Vue aquí: ionicframework.com/docs/vue/overview =)
HOLA , otro video con la subida a la estore porfavor un saludo crack
Ya está en la lista para grabar, pronto lo grabaré 😎
Gracias!
Muchas gracias a ti por comentar!
De hecho trabajas con capacitor
Si, a través de Ionic 😎🤘👨💻
@@programacion-es Como Quasar
Pov: Me slatan 1000 errores jaja
asdhgasdasdfasg suele pasar xD
Holaa
Me gusta mucho tu canal y gracias por tomarte el tiempo
Ya pude crear la app pero tengo botones en mi página que redirigen a la app de whatsapp
Al momento de dar clic sale el siguiente error: Página web no disponible con el error "net:ERR_UNKNOWN_URL_SCHEME"
Espero me pueda ayudar, ya investigué y trate de varias formas, pero no logro dar con la solución
Muchas gracias :)
Échale un ojo a este plugin de capacitor para otros formatos de URL como el tel a ver si te ayuda =) ionicframework.com/docs/v5/native/deeplinks
Hola, me da error en el minuto 5:50 del video cuando pongo ionic cap sync
error: unknown option '--npm-client'
[ERROR] An error occurred while running subprocess capacitor.
capacitor init app-2 io.ionic.starter --npm-client npm exited with exit code 1.
Sabes por qué? gracias de antemano. Un saludo.
SOLUCIONADO: tenía una versión de Ionic antigua, la he actualizado y ya funciona.
Esooooo, muchas gracias por comentar la solución! Un saludo y que tengas buen código!
Hola, pude generar mi App Web pero Google la rechazo por el siguiente error
ERR_UNKNOWN_URL_SCHEME
Sabes como lo soluciono me pasa cuando le dan clic al boton de WhatsApp
Échale un ojo a este plugin de capacitor para otros formatos de URL como el tel a ver si te ayuda =) ionicframework.com/docs/v5/native/deeplinks