Actualización la semana 14-21Oct - Carrito de Compras Livewire Inertia instanceOf, whereBetween y +

Hola a todos Bienvenidos a otra semana en la cual te voy a comentar Cuáles fueron las actualizaciones de la semana del 14 al 21 de octubre comenzando.

Youtube

Como siempre desde lo que subí en el canal de YouTube o los canales de YouTube por aquí.

Voy a ir a lo que sería las publicaciones del contenido para el curso antiguo del Laravel  que era el Laravel en su versión 10 por aquí estamos trabajando con lo que sería Vue entonces estamos instalando la iconografía también por aquí instalamos lo que es axios y también por aquí abajo tenemos lo que es crear un listado finalmente paginado en Vue así de simple.

Laravel Livewire como es cómo aplicar ordenaciones en Tablas y con esto tener una especie de Data Table como esto podemos ordenar por ID título y fecha en este caso está proyectos con inerti pero es equivalente es lo mismo recuerda que ambos cursos son hermanos.

Por aquí ahora tenemos lo que es el filtrado por rangos lo que podías ver por acá que puedo seleccionar una fecha desde y una fecha hasta y me aparecerían.

Por aquí las publicaciones que es empleando el whereBetween.

Por acá aquí también un video personal o exclusivo para lo que sería el canal de YouTube Como es el instanceof que es el mejor aliado para precisamente trabajar con las relaciones polimórficas ya que con ella al tener una relación polimórfica y acceder a la relación podemos saber si por ejemplo suponte que es una relación llamada File que puede ser libros que puede ser imágenes u otro entonces mediante este instanceof nos pueden indicar si es un libro si es una imagen u otro tipo de archivo lo podemos saber fácilmente entonces como que tal cual coloco en el título este viene siendo tu mejor aliado.

Por aquí también tenemos lo que es instalar CKEditor mediante node o mediante el npm que sería la opción más recomendada te voy a mostrar Cuáles son los pasos que son básicamente dos por una parte instalar lo que es el CKEditor y por otra parte obtener el código fuente de la estructura básica para tener un CKEditor completamente funcional.

Este viene siendo el video introductorio del curso del Laravel Livewire para las propiedades computadas y otras opciones como el de debounce y el Lazy.

Esta viene siendo otra introducción para la Laravel Livewire en este caso para lo que sería la web de tipo blog que eso ya se forma parte desde las actualizaciones de curso ahorita lo menciono y por aquí lo que es la introducción al javascript del Livewire y a lo que me refiero sería el oo wir entre otros agregados y cosas que tenemos ahí pendientes.

Por aquí también tenemos algunos datos y bueno datos adicionales sobre las propiedades de Livewire otra vez propiedades bloqueadas en este caso es decir poder colocarlo un Lock lo cual es muy importante si quieres valga la redundancia publicar una propiedad a nivel del componente pero no la quieres utilizar en tus formularios Entonces esto sería prácticamente obligatorio para que puedan un atacante evitar inyectarte una propiedad adicional que controle esa propiedad que en principio no tenía que estar expuesta por ejemplo que es el caso que nosotros vemos por aquí el ID el ID de una publicación suponte que es el ID de alguna orden tú la tienes ahí publicada a nivel de una propiedad pero la misma no la tienes expuesta en un formulario entonces puede ser algo delicado ya que un usuario puede editar o trabajar en base al formulario que tengas expuesto con el identificador o la orden de otro usuario entonces son cositas que hay que tener pendiente ahí para eso la podemos bloquear con el lot o directamente declararla como privada Aunque la gente de Livewire recomienda que la coloques con el Lock.

Por aquí también un video también bastante personal en la cual te hablo  cuál es mi experiencia o como yo llevo el día a día como desarrollador de software en este caso independiente completamente independiente pero por más que sea mi sitio físico al menos de momento viene siendo Venezuela que bueno aquí para hacer un resumen aquí como quien dice no se vive Si no se sobrevive creo que es una conclusión que tuve que también colocar en ese video pero bueno aprovecho y lo menciono ahorita ya a partir de aquí vamos a hacer esto de último.

• Laravel Livewire Ordenación por columnas en las tablas - Datatable - https://www.youtube.com/watch?v=2An9u9lqANE
• Curso Laravel  - Configurar axios para el proyecto Vue 3 - https://www.youtube.com/watch?v=40fqbNRcAIs
• Curso Laravel Inertia -  Filtrar por rangos de Fecha whereBetween - https://www.youtube.com/watch?v=DkTqOMrlbeU
• instanceof es tu mejor aliado en las Relaciones Polimorficas en Laravel - https://www.youtube.com/watch?v=7gu72dP3crc
• Curso Laravel  - Instalar iconografía 5 - https://www.youtube.com/watch?v=I150fO38b90
• Laravel Livewire - Instalar y Configuración Inicial de CKEditor NPM - https://www.youtube.com/watch?v=h85MSjc_qzQ
• Demo: Curso/Libro Laravel 11 Livewire - Propiedades Computadas, debounce, lazy ... #11 - https://www.youtube.com/watch?v=pQzDqVSLNaI
• Demo: Curso/Libro Laravel 11 Livewire - Web Blog #12 - https://www.youtube.com/watch?v=CeJxtAOGdeo
• Laravel Livewire - Introducción al JavaScript - https://www.youtube.com/watch?v=pykSqR5v1iM
• Curso Laravel  - List.vue: Paginado 6 - https://www.youtube.com/watch?v=9yVjBa1CIhE
• Como es mi trabajo de desarrollador de software desde Venezuela - https://www.youtube.com/watch?v=kaiRGdJ8I_c
• Datos sobre las propiedades en Laravel Livewire, propiedades bloqueadas - https://www.youtube.com/watch?v=GpHFVkxy8EM

Cursos

Vamos a ir a las actualizaciones a nivel de los cursos que recuerda que estoy trabajando en el curso de lightware e inertia que a la fecha ya se encuentran disponibles en la plataforma de udem En caso de que también te interesa obtenerlos por ahí Recuerda que la última versión la Laravel 11 que viene siendo la última de la fecha entonces por aquí tenemos lo que es la creación de un sencillo blot que sería una página como la siguiente la que tenemos por acá un listado con el filtrado que también creamos aquí para el dashboard la sección del posted que obviamente no debería estar aquí porque todos las publicaciones que están aquí tienen que estar posteadas y la página de detalle y esto lo estamos aprovechando Por una parte para poder incrustar otros componentes como ser el paso por paso y ver cuál es la experiencia y mencionar Ah algunas cositas y por otra parte para implementar lo que es un carrito de compras una especie de carrito de compras voy a darle aquí a filtrar como el que estás viendo en pantalla para poder valga la redundancia en base a alguna tipificación que colocamos para las publicaciones poder adquirir este producto en este caso no vamos a llegar a la plataforma de pago porque no nos interesa en este curso nos interesa es manejar o conocer inertia lightware pero es básicamente eso bueno por lo demás aquí tenemos todos los pasos obviamente el layout el diseño de la página detalle la navegación el formulario de filtrado etcétera por aquí también tenemos lo que es a nivel de iner el carrito de compras que era el que te presentaba antes ya lo terminamos tal cual puedes ver aquí tenemos la opción de aquí tenemos los item anteriores u aquí tenemos la posibilidad de agregar el actual el que estamos viendo en pantalla obviamente es como quien dice un boceto faltaría bastante trabajo para terminarlo pero mi intención no es mostrar una página bonita ni nada por el estilo sino es conocer características de Livewire o inertia ya que hagamos hacemos otra vez este tipo de desarrollos bien por lo demás aquí tenemos la aplicación de todo que la estamos comenzando que sería lo que puedes ver en pantalla de momento funciona la parte de creación todo cuatro por aquí aparece el listado y poco más vamos a empezar a partir de hoy a trabajar en la parte de eliminación y de edición pero es eso básicamente lo que cubrimos acá la parte de errores de formulario también que aparezca por aquí también le cambiamos el estilo al campo y poco más realmente por acá Bueno lo mismo del carrito de compras pero en este caso des el punto de vista del Livewire aquí también tenemos la parte de el manejo de los eventos.

Integración con Livewire - Blog

1. Introducción

2. Página de listado: Diseño

   1. Vamos a trabajar en el diseño de la página de listado.

3. Layout

   1. Vamos a crear y configurar un layout para el módulo de blog.

4. Página de detalle

   1. Vamos a crear la página de detalle.

5. Botón de navegación

   1. Vamos a crear el botón de navegación.

6. Colocar formulario paso por paso en detalle

   1. Vamos a colocar el formulario paso por paso en el detalle del post.

Integración con Inertia - Carrito compras

1. Introducción

2. Calcular total

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

3. Crear botón flotante

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

4. Palabras finales

Integración con Inertia - To Do

1. Crear el esqueleto de la aplicación de to do: Controlador y componente Vue

   1. Vamos a crear la estructura base de la app to do.

2. Crear el esqueleto de la aplicación de to do: Listado y Formulario

   1. Vamos a crear la estructura base de la app to do para el listado de to do.

3. Crear migración y modelo

   1. Vamos a crear el modelo  y migración de los to do.

4. Crear to do

   1. Vamos a crear un to do desde en el servidor.

5. Crear to do: Errores y validaciones

   1. Vamos a aplicar validaciones y mostrar errores al momento de crear un to to.

6. Popular listado de todos

   1. Vamos a mostrar el listado de to do de la base de datos.

       

Integración con Livewire - Carrito de Compras

1. Listado de productos: Esquema inicial

   1. Vamos a crear el esqueleto del módulo.

2. Item de carrito

   1. Vamos a crear el componente y estructura inicial de un ítem del carrito.

3. CRUD en sesión: Agregar un producto

   1. Vamos a implementar la opción de agregar un producto al carrito.

4. CRUD en sesión: Eliminar un producto

   1. Vamos a implementar la opción de eliminar un producto al carrito.

5. Formulario para agregar un producto

   1. Vamos a crear un formulario para poder agregar post de tipo publicidad

6. Formulario para agregar un producto: Eventos

   1. Vamos a corregir la implementación en el uso de los eventos.

Blog

Vamos a pasar a las publicaciones como primera publicación aquí tenemos un video que también es del nuevo canal de YouTube en el cual hablo sobre mi experiencia después de dos meses y hago énfasis en dos meses con el dispositivo de metaquest que en resumen es un dispositivo bastante curioso y también muy diferente a lo que nosotros podemos estar acostumbrados si lo comparamos con un televisor una consola de videojuegos un teléfono ya que al ser tan intrusivo o tan invasivo se ha a veces un poco difícil de utilizarlo y también tenemos unas expectativas un poco exra en los cuales Aunque es muy invasivo entiéndase que no puedes hacer absolutamente más nada mientras los utilizas inclusive cuando lo estás utilizando tiene que estar muy al pendiente de tu ambiente para bueno no matarte por por unas escaleras o chocar con algo a la final la experiencia en mi caso en particular no es del todo satisfactoria por varios motivos entre esos incluidos entonces.

Por aquí lo menciono lo he comentado antes mi experiencia de trabajar desde acá desde Venezuela por aquí también tenemos bueno Esto es una actualización del curso básico algún texto cambie por ahí el lo que te comentaba las propiedades el Livewire en este caso las propiedades bloqueadas y también lo que es el uso de las propiedades en general algunas cositas adicionales que tenemos pendiente esto también publiqué el video que me haba faltado colocarlo en el listado que es las superficies resbalosas como la implementamos en un real y por aquí lo que es la instalación del sec editor mediante Note por aquí también tenemos lo que te comentaba del Instant of aquí puedes ver un ejemplo de esto aquí por ejemplo tenemos la relación polimórfica llamada File aquí nosotros accedemos al archivo como quien dice no sé cómo mencionarlo en español pero si fuera etiqueta sería como etiqueta Entonces no sé cómo sería la traducción de fillable pero otra vez pudiera ser un libro pudiera ser una imagen pudiera ser otro tipo de archivo entonces obviamente muchas veces tú necesitas en base a esto hacer alguna operación pero si es un libro vas a hacer una operación distinta y si es una imagen vas a hacer otra operación por ejemplo acceder a una ubicación específica del disco.

Entonces es imprescindible que realices este tipo de lógica ya sea a nivel de condicional o también a nivel del query mediante eloquent cosa que hablo en este video Entonces si trabajas con esto recomendadísimo que veas este video para tener ahí algunos tips adicionales y aquí finalmente la parte ordenación que te comentaba antes de Livewire que siempre lo comparo con lo que es jquery Data Table que sería la imagen que estás viendo aquí en pantalla por lo además esto sería todo lo que hicimos o subí para esta semana La semana de 14 al el 21 de octubre y sin más que decir nos vemos la semana próxima.