Hola que tal bienvenidos a este curso de johnny en este vídeo voy a hacer una pequeña presentación de lo que va a ser el curso para los que no sepan todavía que si yo ni para mí a día de hoy es la mejor herramienta de código abierto para crear apps ahora nativas para android y ellos gracias a la ayuda de capacitor en este curso se va a desarrollar en angular ya que ahora mismo es lo más extendido y tenemos más documentación además tengo más experiencia pero podríamos haberlo creado en view real ya va script o stencil perfectamente lo mejor que tenemos en johnny que es que podemos crear apps para android y ellos con un solo código y te puedes imaginar el gran ahorro de tiempo y dinero que te puede suponer esto los clientes quieren gastar lo menos posible así que si decides aprender ionic y hacer este curso te aseguro que no te vas a arrepentir te preguntarás vale y qué vamos a dar en este curso y qué experiencia necesito decirte que no es necesario conocimientos previos porque vamos a empezar desde cero pero si tienes conocimientos de type script angular html css pues mejor ya que vamos a trabajar con estos lenguajes y te va a resultar más fácil entender qué es lo que estamos haciendo sobre el temario pues aprenderás a crear una app dioni desde montar el proyecto hasta compilarlo testearlo y subirlo a los markets además veremos funcionalidades interesantes como escanear códigos qr y códigos de barras llamadas a servicios consumiendo una app y con http client uso de componentes como alert scouts buttons etcétera navegación entre pantallas login y registro site bat lateral y mucho más es posible que cuando empieces este curso no esté terminado del todo por favor sea paciente y perdóname que necesito tiempo para prepararme en los vídeos y que tenga la mejor calidad posible para que puedas aprender en el menor tiempo posible y no perder tu tiempo voy a hacer este curso con mucha ilusión y espero que te guste y sobre todo que lo disfrutes nos vemos en el siguiente vídeo hasta luego.
Preparación del entorno #2
Curso programación en IONIC 6 desde 0. Aprende a como programar tus apps con ionic en el menor tiempo posible ⌚🚀 En este vídeo te voy a enseñar a montarte todo el entorno necesario para que puedas empezar a crear tu primera app de ionic. Suscríbete para no perderte los nuevos vídeos que voy subiendo y seguir aprendiendo.
Creando nuestra App #3
Hola qué tal en el vídeo anterior preparamos lo que es todo el entorno para empezar a crear nuestra aplicación y en este vídeo vamos a crearle a nuestra aplicación y aprobarla seguimos con la documentación de johnny y aquí lo segundo que nos dice es cómo empezar la aplicación nos está diciendo aquí es el comando pero realmente habrían otros comandos para empezar la aplicación en función de la plantilla que le queramos poner entonces vamos a irnos a internet y vamos a poner yo nick estar estar templates y aquí en la primera enlace nos aparece distintas formas de crearlo lo que nos está diciendo es que para crear el guión y que estar podemos hacerlo con todos estos templates el primero sería para meterle unos tabs que eso es las opciones del menú que hay en la barra inferior luego con blanco podríamos crear el proyecto vacío para empezarlo desde cero con seis menú sería para añadirle un menú en el sidebar lateral este es el que vamos a usar nosotros y luego está súper que nos viene como con páginas pre construidas y algunos providers y alguna información más luego también estaría conference que es como una aplicación ya más real con bastantes componentes que podemos usar tutorial con un tutorial que nos va explicando cómo es la aplicación y a ws que nos viene como con una configuración a un servicio nos vamos a ir a la ruta donde queramos crear el proyecto por ejemplo yo me voy a ir y aquí directamente lo voy a crear y haríamos vamos a ver la documentación lo que nos decía y es único start el nombre de la aplicación le vamos a poner y wap y le vamos a poner el template que queremos crear en nuestro caso queremos el site menú vamos a enter y aquí nos está preguntando qué framework queremos usar nosotros vamos a usar angular porque es donde hay más documentación y yo me manejo mejor pero podríamos usar react obvious y funcionaría perfectamente view se ha incorporado hace muy poco y está teniendo bastante éxito es posible que en un futuro pasemos todo a view pero de momento vamos a crear todo en angular y aquí nos está preguntando si queremos trabajar con capacitó yo te recomendaría darle que sí porque capacitor lo que te hace básicamente es compilar te la aplicación nativa te crea dos proyectos uno para android y otro para ellos y esto ha mejorado mucho la velocidad de las aplicaciones podría seguir trabajando con córdoba pero te recomiendo que uses capacitor además córdoba lo puede seguir usando para algunos plugins por ejemplo si por casualidad no existían.
Cómo CREAR páginas en IONIC 6 #4
Hola que tal bienvenidos a una nueva entrega de este curso de programación en múnich en el vídeo anterior vimos cómo crear la aplicación y en este vídeo vamos a ver cómo crear las pantallas para crear las pantallas vamos a ir como siempre la documentación y vamos a buscar el comando general y aquí nos explica cómo generar las páginas podríamos crear desde aquí páginas componentes directivas servicios y otros a nosotros ahora mismo nos interesan las páginas así que según lo que nos está diciendo la documentación pues habría que usar a johnny generate type que sería el tipo de fitur que vamos a hacer y pages que sería lo que vamos a crear ahora y el nombre entonces nos vamos a nuestro terminal y ponemos a johnny generate podemos ponerla solo para abreviar y pages en realidad hay que ponerlo en singular porque si no no funciona y el nombre de la página que en nuestro caso pues vamos a crear la página home esperamos un momento y ya la tendríamos creada esto lo que nos ha hecho ha sido crearnos una nueva carpeta dentro de app donde tenemos toda la estructura necesaria además nos debería haber creado en routing module pues la ruta a la página home aquí la tenemos paz y ya estaría creada correctamente la página no vamos a crear otra página y está por ejemplo que sea customers o y aquí nos ha creado la otra carpeta vale pues ahora para poder visualizar nuestras páginas pues las podemos poner por ejemplo en el menú entonces nos vamos al app que componen 10 y vamos a crearnos dos opciones más en el menú que esté en a home aquí tenemos que visualizar lo que sería la ruta en el el routing módulo y aquí tenemos home y costumbres que éste sería el path entonces la url va a ser solamente home aquí tendríamos el icon por si queremos modificarlo de momento vamos a dejarlo así lo vemos más adelante y la siguiente que sería customers que la ruta sería los tomen como tenemos aquí no sería costó más perdón vale pues con esto ya vamos a lanzar nuestro proyecto a ver si se visualizan correctamente vale pues aquí tenemos ya nuestra aplicación ejecutada vamos a irnos al menú y vemos cómo se han introducido correctamente las dos opciones de home y customers pulsamos en home y nos ha llevado a la página on porque vemos aquí en él en el nap bar como nos aparece el título de la página si nos vamos a customers pues efectivamente nos también nos aparece customers muy bien pues vámonos al siguiente vídeo donde vamos a empezar a modificar el diseño de este menú que hay mucha basura que no necesitamos hasta luego.
Modificando el MENÚ ion-menu – IONIC 6 #5
Hola qué tal bienvenido a una nueva entrega de este curso de programación en lion y en el vídeo anterior vimos cómo crear nuestras primeras páginas y la metimos dentro del menú y en este vídeo vamos a preparar el menú ya quitar todo aquello que no necesitemos y a mejorarlo un poco más visualmente entonces lo primero que tenemos que hacer nos vamos a la página de app componer en 10 y aquí vamos a borrar todas las páginas que no queremos están dentro de la raíz de app page pages vamos a dejar solamente estas dos además si os acordáis teníamos otras páginas abajo que son los label que los tenemos aquí dentro de este rey realmente esto no lo vamos ni a utilizar entonces lo dejamos aquí guardamos y vamos a ver si nos han hecho caso pues ya tendríamos solamente nuestras dos páginas otra cosa que podemos hacer desde esta página sería cambiar los iconos que los habíamos dejado con el warning y para cambiar los iconos nos vamos a esta página web y aquí podemos buscar los iconos que queramos por ejemplo yo para la home vamos a poner y aquí teníamos este de home tenemos que fijarnos en el field y vamos a poner este y para este mes pues vamos a ver si aquí alguno de podríamos poner algunos de estos por ejemplo título equipo guardamos y vamos a ver si nos ha hecho caso arrastramos el menú y efectivamente tendríamos ya los dos iconos cambiados perfecto aquí todavía nos ha quedado la información esta de inbox y el correo electrónico de ironic y también nos ha quedado lo del haber para modificar esto pues nos tendríamos que ir al html5 que estamos ocupando es un array con las páginas que van a ver pero lo que se está visualizando de realidad es el html y aquí ya estaríamos viendo el header y el correo electrónico entonces aquí pues por ejemplo podría poner poner un texto o la para dejarlo simple de momento ya lo iremos complicando y aquí esto del abl se hemos dicho que no lo vamos a ocupar entonces borramos la ves volvemos a guardar y vamos a ver que nos ha cambiado el diseño pues ya lo tendríamos vale pues vamos a dejar el vídeo en este punto y nos metemos en el vídeo siguiente ya con el tema de los estilos ya cambiar un poco los colores hasta luego.
Como modificar ESTILOS y COLORES ion-color – Curso IONIC 6 #6
Hola que tal bienvenidos a una nueva entrega de este curso de programación en ay onic en el vídeo anterior vimos cómo montar nuestro menú y en este vídeo vamos a cambiar los estilos de nuestra aplicación para cambiar un poco el tema de los colores y es así que nos vamos a ir a la carpeta theme variables y aquí estaríamos viendo todas las variables que podemos usar nosotros en nuestro proyecto que ya están predefinidas si os acordáis en otro vídeo os comenté por qué mi aplicación se estaba viendo así te oscura que básicamente era porque yo tenía el tema oscuro activado entonces para hacerlo más sencillo en este vídeo nosotros vamos a desactivar este este tema o sea el tema oscuro entonces nos iríamos a pérez colores kim dark y en vez de dar podríamos like si guardamos ya no estaría usando el tema oscuro aunque yo lo tuviera predefinido puesto entonces nosotros ahora vamos a crear un nuevo una nueva variable para poder usarla en nuestro proyecto entonces cogeríamos light y aquí vamos a poner que sea my color y aquí también vamos a modificarlo y vamos a empezar cambiar los colores hay una opción si nos vamos a la documentación tenemos aquí encima colors aquí nos explica un poco cómo hacerlo y tendríamos una opción que sería new color kreator entonces aquí le podemos decir el color que queremos usar por ejemplo vamos a a sí mismo y aquí nos estaría dando le damos a aceptar no estaría dando una serie de colores que nosotros podemos usar encima no está creando aquí le podemos decir que lo cree con la app con el nombre que queramos entonces esto ya solamente tendríamos que y copiarlo al final sería básicamente lo mismo una vez que tenemos aquí nuestro colon en variable guardamos y nos podemos ir ya a nuestro a nuestra página por ejemplo lo que queramos cambiar y aquí en el lion toolbar.
NAVEGACIÓN entre PÁGINAS, cómo cambiar de página en IONIC con Router – #7
Curso programación en IONIC 6 desde 0. Aprende a como programar tus apps con ionic en el menor tiempo posible ⌚🚀 Después de haber visto cómo modificar los estilos y colores: Como modificar ESTILOS y COLORES ion-color #6 👉https://youtu.be/NvnuOOXcM8I En este vídeo te voy a enseñar a como navegar entre pantallas con la libreria router de Angular, como siempre viendo la documentación de ionic para darte las herramientas para que lo puedas hacer tu solo sin necesidad de usar vídeos.
LISTAS con avatar ion-list – Curso de IONIC 6 #8
Hola que tal bienvenidos a una nueva entrega de este curso de programación en lion y en el vídeo anterior vimos cómo navegar entre pantallas vimos como estábamos aquí en la pantalla de customer si podíamos ir a la home y pulsando el botón pues si vamos también a customers vale pues en este vídeo lo que vamos a hacer va a ser usar el componente a jon list que sirve para crear listas básicamente entonces vamos a crear una lista aquí en la página de customer y vamos a ver cómo se hace bueno como siempre lo primero que tenemos que hacer es ir a la documentación vamos a poner hay un list para que nos lleve directamente y aquí tenemos la documentación oficial de ayón ik vale pues este componente pues no hace falta instalarlo en importarlo ni nada porque ya es nativo y si nosotros le damos aquí a useche a angular pues copiando solamente esto pues ya podríamos usarlo entonces vamos a ver si funciona realmente aquí donde teníamos nuestro botón pues vamos a quitarlo y vamos a poner lo que es el lion list guardamos vamos a ver si se visualiza y perfectamente ya tendríamos un listado tan fácil como esto por un rayón list y dividido por ítems cada ítem con su label vale pues podríamos mejorar esto un poco y si seguimos en la documentación aquí hemos visto un ejemplo que está bastante chulo y vamos a ir a hacerlo si no os queréis complicar pues podemos ir directamente a lo que es view source y vemos lo que es ya directamente el código entonces dentro de lion content podemos copiar nos toda esta información le damos a guardar y vamos a ver si se visualiza perfecto se estaría visualizando pero las imágenes no se están viendo porque no las tenemos descargadas si mira yo ya me las he descargado aquí en mi local simplemente para descargarla pues ya sabéis que tenéis aquí el git hub.
ion-grid en IONIC 6 – Tutorial #9
Hola y bienvenido a un nuevo curso de programación en a johnny donde vamos a ver cómo se usa el componente hay un grid un componente muy utilizado para distribuir lo que esta obligación en diferentes partes como si fuera una tabla vamos antes de usar mucho el tema de las tablas pero ahora ya queda un poco obsoleto pero antes de eso vamos a ver una cosa porque mira si os fijáis aquí cuando entramos a la ruta cuando accedemos por primera vez a la aplicación qué ruta está vacía pues nos lleva directamente a este folder inbox y esto es porque aquí en el home routing módulo perdón en el app routing module nos tenemos cuando el pase está vacío nos está redirigiendo directamente al folder inbox que esto no lo estamos usando es una página que venía por defecto pero no lo estamos dando uso así que vamos a quitarlo y entonces cuando venga vacío lo que queremos es que nos lleve a la página home pues ponemos home como aquí vemos el path y entonces ahora cuando recargamos pues le ponemos la ruta vacía que sería la inicial y directamente nos lleva a la home.
Leer JSON en IONIC 6 con HTTP y ngFor #10
Hola y bienvenido a un nuevo vídeo de este curso de programación en nayarit donde nos vamos a meter un poco ya en materia importante en este vídeo vamos a ver cómo usar el plugin http y también vamos a ver cómo se usa el engine for os acordáis que nosotros teníamos un listado de usuarios donde los estamos introduciendo manualmente estamos introduciendo uno por uno ahora lo que vamos a hacer es cargar todos estos usuarios de un jason entonces nos vamos a crear un nuevo jason para hacer la petición a ese jason y cargar todos los usuarios esto mismo valdría para usarlo a través de un servicio si tuviéramos todos los datos en una base de datos pues tendríamos que hacer la petición al servicio oa la app y si todavía no sabes que es una app y te dejo un vídeo por aquí arriba donde lo explicó detalladamente pero en este caso lo vamos a cargar todos los usuarios a través de un jason entonces para ello lo primero que tenemos que hacer sería tener el jason yo no me voy a quedar aquí una nueva carpeta donde ponga files por ejemplo y dentro de files voy a meter un nuevo fichero que sea justo mes por ejemplo aquí nos vamos a crear el jason yo ya lo tengo por aquí así que lo voy a pegar y vamos a meter pues tres usuarios simplemente aquí tenemos dentro de toda la data que sería como si fuera también una petición pues vamos a tener cada uno de los usuarios hand luke y le ya cada uno tiene pues el state una descripción y una imagen la imagen suele hacer referencia al nombre de la imagen y luego vamos a añadir lo que es la ruta que es lo que teníamos aquí la ruta vamos a guardar ya tendríamos el jason y ahora lo que tendríamos que hacer sería pues instalar el plugin de http y el nombre clark vamos a ir a internet vamos a poner http yonic y en la documentación oficial vamos a pulsar en angular si no lo tenemos aquí tenemos y aquí tenemos el cómo instalarlo si lo vamos a hacer a través de córdoba capacitó lo o enterprise nosotros como estamos trabajando con capacitor pues vamos a hacerlo de esta forma así que vamos a ir instalando lo vamos a abrir aquí otra consola el siguiente comando sería e instalarlo y vamos a sincronizar para que se guarden me los cambios aquí había un pequeño error jason vale y de mientras pues que se está sincronizando pues ya podemos ir trabajando nos vamos a ir ahora a nuestro app módulo para importar el plugin si nos vamos aquí a la documentación oficial pues estaríamos viendo cómo importar el http pero nosotros vamos a hacer uso del http client que es como una versión más moderna de angular entonces para importarlo pues vamos a poner aquí import http inmóvil y vamos a decir que lo importe de http m entonces vamos a meter de la gente entonces entonces vamos a meter esto como import.
Tutorial ngIf en Ionic con ejemplo – Curso Ionic 6 #11
Hola qué tal y bienvenido a un nuevo vídeo de este curso de programación en a jhon deere en el vídeo de hoy vamos a ver qué es la directiva en jeev que es y cómo funciona para eso vamos a ver un ejemplo básicamente la directiva en jeep funcionaría como cualquier ir en cualquier lenguaje de programación pues sirve para establecer condiciones para mostrar algún texto del mundo de la condición que queramos darle o darle un formato o que aparezca una información cualquier cualquier cosa valdría vale entonces nosotros en nuestro caso vamos a hacer un pequeño ejemplo en donde aquí en los customers van a aparecer en función de si tenemos permisos o no entonces si tenemos permisos pues no vamos a aparecer los clientes y si no tenemos permisos pues no aparecen un mensaje diciendo que no tenemos permisos vale pues recordamos aquí tenemos a nuestro type script de customer space y básicamente pues vamos a crearnos una variable que sea permisión y que sea muy leal para establecer si va a ser triunfos y aquí cuando nosotros creamos nuestra página en el límite pues vamos a decirle transmisión disc permisión para que coja de la clase this permisión igual a club por ejemplo entonces tenemos permisos por no mostrar a los clientes y aquí nosotros en nuestro html pues por ejemplo vamos a todo este año liszt y vamos a decir que muestre este año en list cuando tengamos permisos como lo hacemos pues tenemos que hacer lo siguiente tenemos que decirle a este disco angy if y aquí ponemos lo que viene a ser la propiedad de permisión que estamos diciendo aquí que sí permisión es true pues que nos muestre nos muestra esta información entonces nosotros tenemos aquí esta información y como permisión al abismo estruch pues no la muestra si por ejemplo permisión lo ponemos a fons pues no muestra nada porque no tendríamos nada entonces vamos a dejarlo aquí en falls y vamos a decirle que si no que si no tiene permisos vamos a crear un label simplemente y vamos a decir no tienes permisos para abrir los clientes l y aquí pues tendríamos que hacer exactamente lo mismo aunque aquí pero para hacer la negación para decirle que cuando sea sea falsa aparezca pues le tenemos que poner en la exclamación delante y ahora pues tendríamos que cuando es cuando no tiene permisos pues sabe y ahora pues ya tendríamos que cuando permisiones falls pues nos aparecerá este mensaje y en caso de que sea atroz pues nos aparece a esto de custom es pues básicamente este sería un ejemplo sencillo pero esto se puede pues extrapolar a cualquier otro otro caso pero bueno vamos a dejar el tema aquí y nos vamos en el vídeo siguiente hasta luego.
Tutorial ion-card en IONIC #12
Seguimos con el curso de programación en ionic 6 🚀🚀🚀 CURSO COMPLETO DE IONIC: https://youtu.be/-limeEkKArE En este vídeo aprendermos a usar el componente ion-card, y aplicaremos estilos para que nuestra app tenga un aspecto profesional. Para usar el ion-card haremos como en el vídeo anterior, donde cargaremos los datos de un json. Añadiremos imágenes y texto al ion-card.
Alerts y Toasts en IONIC Tutorial #13
Hola qué tal y bienvenido una vez más a este curso de programación en nyon y volvemos a la carga y esta vez venimos con vamos a mostrar lo que son las notificaciones o los mensajes de alerta que les podemos mostrar al usuario en este caso pues tendríamos dos que serían el tows y el alerta pues aquí vamos a mostrar el toast que lo tengo ya preparado que simplemente pues estamos mostrando aquí ciudad seleccionada y podrías poner todos tanto en el medio como en la parte de arriba y luego cambiar la duración ese sería uno y el otro sería sería este mensaje de alerta que te aparece con los botones que indiques luego en función de los botones que pongas pues ya puedes ejecutar la función que tú quieras o ir a donde quieras así que vamos a ver todo esto en detalle en este vídeo pues vamos a empezar.
