Actualización la semana 28-04Nov - Vue + Rest API Laravel, Drawer en Flutter, Inertia Pruebas


Hola a todos Bienvenidos a otra semana en las cuales te voy a hablar las actualizaciones de la semana del 28 de octubre al 4 de noviembre 

YouTube

Así que bueno por aquí comenzamos con una demo en este caso para la aplicación de tipo todolist para el curso de Laravel inertia por aquí tenemos lo que es precisamente un video que publiqué del todo de la aplicación de todo que construimos que me pareció interesante y es que cuando le pegamos click a simplemente un un spam por ejemplo un P lo que tú quieras lo convertimos a un campo de Test un input para que lo podamos editar esto fue un como quien dice un truquillo que hicimos ahí para poder editar el todo en línea.

Tenemos lo que es parte del curso del Laravel básico el curso del Laravel que voy publicando de la versión anterior que es para la Rest API estamos ahí creando una aplicación con Vue y consumiendo la Rest API y en este caso para crear un post la actualización de la semana pasada.

Otro video muy interesante que está enfocado o a inertia o a Livewire no importa pero es para la parte de los listeners los escuchadores que es directamente para Laravel como los puedes registrar o bueno Cómo funciona el esquema por aquí tenemos las propiedades computadas Livewire.

Te comento un video otra vez de tipo personal porque considero al menos para mí que Google Keep es la mejor aliada para lo que es un desarrollador en este caso como yo inclusive para notas del día a día ya que es una aplicación completamente gratuita es una aplicación multiplataforma y a diferencia de Evernote que antes también era gratuita no nos va a estar saltando cada rato una alerta y tampoco nos va a bloquear por una cantidad determinada de equipos En las cuales tengas que tener instalada la aplicación que en evern serían solamente dos y como es de Google me gusta mucho los servicios de Google está integrado con todo lo demás entonces a mí me va estupendo pudiera mejorar un poco lo que es la gestión del contenido del texto que me parece un poquito simple pero así funciona bastante bien le podemos copiar imágenes del portapapeles podemos colocar así un simple listado como el que vemos a continuación colocando el asterisco y poco más.

Otro video de tipo personal en este caso para crear un custom scaffold en este caso es asociado a Flutter otra cosa que yo te recomiendo que fue justamente lo que yo hice para la aplicación de Academia que voy repitiendo ciertos estilos Entonces esto fue lo que hice creé un custom scaffold un widget personalizado que simplemente empleé en vez del scaffold tradicional en cada una de las páginas emple este para poder por ejemplo aprovechar el Drawer y cualquier otra configuración que tú quieras colocar ahí por ejecutar antes de iniciarse tras páginas o lo que tú quieras.

También forma parte del curso básico de Laravel en este caso para el proceso de actualizar y de crear y este sería el de actualizar pero lo mismo que te comentaba.

Esto es para eliminar caracteres des CKEDITOR en este caso asociado al curso de Livewire y esto es interesante para cuando estás copiando un contenido html que esto no he publicado el video a la fecha pero suponte que eh es una estás copiando un contenido html de un agente de un tercero es decir por ejemplo yo lo hago de Google docs que estoy exportando los libros entonces me genera muchos atributos muchas cosas que yo no quiero lo quiero limpiar un poco antes de guardarlo entonces lo hago justamente antes de guardar en la base de datos justamente cuando estoy obteniendo los datos del sec editor hago un proceso adicional para sanear todos estos atributos que yo no quiero aquí mediante la pestaña de source recuerda que se puede hacer esa operación aquí seguimos esto también es un video un poco de carácter personal es para las partes de configuraciones de las var entorno son mis recomendaciones que yo te hago cuando quieres subir un proyecto en Laravel a producción que en pocas palabras siempre ha es simplificar lo más posible el archivo para que no tengas ningún problema en producción más que todo de que se pueda cambiar alguna configuración rápidamente cuando estemos haciendo alguna prueba no nos demos cuenta ya que cuando las configuraciones están a nivel de las carpetas correspondientes o de los archivos correspondientes es mucho más seguro el archivo pune es más que todo está enfocado es para la parte de desarrollo al menos Esa es mi recomendación hacia ti.

Repaso de las pruebas unitarias ya que ahorita en el curso del Laravel inertia estoy trabajando con las pruebas unitarias o de integración y aquí estoy comencé la sección es haciendo un repaso A las pruebas en caso de que te interese también trabajar con las pruebas ya con esto terminamos todo lo que es alusivo a la publicación de YouTube.

Cursos

Entonces vamos ahora con las actualizaciones a nivel de los cursos que sigo trabajando en los cursos de Livewire e inertia por aquí en el curso de Livewire que recuerda que lo que se emplea aquí es componentes vitaminizado en Laravel con Blade entonces para hacer la parte del cliente más versátil se emplea Alpine esto si lo comparamos con Inertia que emplea Vue entonces aquí estamos dando una pequeña introducción al pjs conociendo sus características básicas si ya conoces Vue  está de suerte ya que es más o menos lo mismo el 80% 70 por del framework se puede decir que es prácticamente igual pero quitando la V por una X y alguna cosita más por ahí en la forma en la cual se implementan los componentes aquí es la una clase que me había faltado para la aplicación de todolist que terminé la semana pasada y hay algunos problemas de sincronización que tenemos en inertia entonces te voy mostrando ahí algunos cb que tenemos que podemos utilizar para recargar de cierta forma no la página sino el Proc de todos para que se visualicen en base a los cambios de creación y eliminación aquí la parte de las pruebas como te comentaba iniciamos con un paso una prueba base partiendo de lo que tenemos el arab básico lo que ya nosotros conocemos del curso básico y Aquí vamos viendo los pequeños cambios ya que recuerda que aquí en Laravel básico vamos es un Blade y aquí ya sería un componente emp entonces obviamente la cosa cambia tenemos ahí un objeto muy interesante que es el objeto page que lo tenemos tanto al momento de desarrollar y también en las pruebas entonces aquí lo vamos a conocer un poco más en detalle ya que necesitamos conocer la estructura que tenemos para las pruebas es decir este bendito método de aserción que tenemos acá para saber exactamente qué es lo que tenemos ahí qué es lo que podemos evaluar y bueno por aquí algunos métodos importantísimos el de has y el de where que eso te lo comento en el curso el de has es para probar simplemente que la que el PR esté ahí y el de We ya lo podemos probar con un valor en específico tal cual puedes ver por acá aquí probamos de que categorías existe y aquí ya probos por un valor en específico Bueno aquí algunas cositas más que los puedes Sidar de esta forma para probar al un valor en específico terminamos la prueba y ya con esto que esto fue lo que acabo de grabar en la parte de terminar la prueba para el módulo de blog de detalle y también comenzando con la de listado ya ahorita nos falta configurar la base de datos autenticación y demás Pero y vamos el lare seguimos un poquito con lo que es el carrito de compras  por aquí es que vamos estamos ahí terminando algunos detalles o mejor dicho ya aquí terminamos los detalles ya que el último sección es esta la de alpin y listo por acá.

Introducción a Alpine JS

  1. Introducción a Alpine.js

    1. Vamos a hablar un poco sobre el framework.

  2. Livewire y Alpine

    1. Vamos a comparar ambos frameworks.

  3. Preparar un proyecto

    1. Vamos a crear un proyecto para trabajar con Alpine.

  4. Mostrar contenido HTML con variables reactivas: x-data, click y x-show

    1. Vamos a conocer el esquema básico, con un componente para mostrar u ocultar bajo demanda.

  5. Campos de textos y variables: x-model y x-text

    1. Vamos a mapear una variable a un campo de texto.

  6. Atributos: x-bind

    1. Vamos a presentar el bind de atributos.

  7. Atributos: clases

    1. Vamos a mostrar el bind de clases.

Integración con Inertia - To Do List

  1. Extra: Problemas de Sync, Otras soluciones

    1. Vamos a dar algunas consideraciones que puedes tener en cuenta para sincronizar las operaciones.

Integración con Inertia - Pruebas

  1. Repaso

    1. Presentamos conceptos claves e importancias de las pruebas.

  2. Prueba base

    1. Vamos a crear la prueba básica como lo haríamos en Laravel básico.

  4. De Laravel a Inertia

    1. Vamos a conocer el método de aserción de inertia.

  5. Objeto $page

    1. Conoceremos el objeto de page retornado por el método de aserción.

  6. Método has

    1. Vamos a conocer cómo emplear el método de has.

  8. Método where

    1. Vamos a conocer el método de where para comprobar por valores.

  9. has y where: Anidaciones

    1. Vamos a conocer cómo inspeccionar datos anidados.

  10. Terminar la prueba

    1. Palabras finales sobre la prueba actual.

  12. Blog: Prueba para el detalle

    1. Crearemos la prueba para el detalle de un post en el blog.

  13. Dashboard: Prueba para listado

    1. Prueba para el dashboard del listado.

  14. Dashboard, Categoría: Prueba para crear, GET

    1. Prueba para el formulario de creación de una categoría

 

Integración con Livewire - Carrito Compras

  1. Correcciones y actualizar cantidades del ítem en el carrito

    1. Voy a mostrarte los cambios realizados para reparar el error que aparecía al momento de agregar el item y de modificar cantidades.

  2. Calcular total de ítems

  3. Vamos a calcular el total de elementos en el carrito.

  4. Mostrar carrito con el total

    1. Vamos a mostrar el total en una vista y crear el botón de carrito mostrando el total.

Blog

En cuanto al blog es más o menos lo mismo por aquí tenemos Cómo puedes manejar las preferencias de usuarios es un campo json es un video bastante personal que yo lo utilizo para la aplicación de Academia en vez de tener un campo para que el usuario seleccione si quiere el modo oscuro otro campo para si Quiero activar el autoplay y cualquier cosa que se me ocurra a mí Por ejemplo ahorita estoy alineando la aplicación de flurer el botoncito de flotado entonces ahí tuvieras que crear otro campo si lo quisiera sincronizar simplemente tengo un único campo para manejar estas preferencias y lo manejo mediante un json te voy explicando un poquito cuál es la estructura que estoy siguiendo bueno esto es del Canal anterior digo el nuevo canal de YouTube que en este en este caso es Yo me compré las metaquest más que todo las quería era para desarrollar pero ya que las tengo me gusta utilizar los dispositivos como quien dice m multipropósito y estoy probando ahí uno que otro jueguito y mi opinión personal En caso que te interese aquí seguimos un poquito con la aplicación en Flutter en este caso algunas cositas que voy sacando de la aplicación de flurer de academia de Academia que es para que puedas variar el scaffold o crear un Custom Scaffold es un poco lo comentado antes y con esto puedes variar varias cosas tanto el contenido que estás viendo si queda aquí fijo lo que es el scaffold o si la pantalla es más pequeña no tienes espacio y lo conviertes en un menudo de hamburguesa estoy explicando aquí las ventajas la de Google kit que te comentaba antes los eventos de listener que también te comentaba antes que era asociado aquí en este caso al curso del arab lar pero lo puedes aplicar al curso del árabe básico actualización de la semana pasada y también lo que te comentaba del campo por aquí también el bottom sheet en flutter como lo puedes implementar en flutter y ya con esto terminaríamos actualizaciones y lo del campo era esto lo que te comentaba aquí tenemos un spam que es para mostrar un listado normalito cuando le pegamos un click lo que hacemos es editar o pasar a modo edición este campo aquí estamos aprovechando las ventajas que nos trae javascript que es que podemos crear opciones así aunque no existan entonces aquí le establecemos a true y en base condicional que tenemos por aquí arriba esto se va a mostrar si esto es negativo o simplemente no está definido pero si est es positivo pasamos a modo edición entonces Fíjate que es el mismo campo pero aquí lo podemos editar y cuando le pegamos un enter podemos editar el campo Entonces es una actualización inteligente en el campo in situ o en el sitio me pareció Interesante como te comentaba y por aquí te lo quería mostrar así que bueno y aquí restablecemos todo para que cuando le demos un enter pase otra vez al spam Así que esto es básicamente todas las actualizaciones que vimos para la semana mencionada,

- Andrés Cruz

In english

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy

Acepto recibir anuncios de interes sobre este Blog.

Udemy

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
¡Hazte afiliado en Gumroad!
© 2024 Copyright | Contacto | Acerca de | Versión PC