Actualización de la semana 7S- 14 Oct - Pad AB Unreal BP Hijos, ciclos providers, Oruta UI y +

Pads de AaB y Blueprints hijos, Cuando usar C4, Providers y ciclos infinitos, Seeders y Oruga UI Laravel Vue highlight - Cursos Carrito de compra Inertia, Propiedades en Livewire

Bienvenidos a otra semana y por aquí paso a explicarte todo el contenido que cargué para la semana de lo que sería el 7 de octubre hasta el 14 de octubre.

Youtube

Comenzando el momento en el cual estoy grabando este video así que vamos allá como siempre por aquí traigo al menos un par de videos sobre cómo crear PAD en este caso Recuerda que es el nuevo canal que tengo para YouTube para mostrar un poco cómo estoy creando mi primer videojuego y seguimos aquí trabajando un poquito con lo que son los pads o cómo nosotros podemos agregar ciertas características en este caso para ir del punto a a b empleando el componente de interset movement para precisamente hacer el movimiento y por aquí también.

Tenemos otro pad o mejor dicho otro video asociado a un real que habla un poco sobre lo que es la herencia de blueprints es decir colocamos un blueprints como hijo y conocer Cómo es el comportamiento precisamente cuando queremos mover o interactuar con el componente padre Qué pasa con el hijo ahí vemos varias cositas con eso en caso de que también te parezca interesante.

Una demo entiendes un video introductorio en este caso para la creción del una aplicación o módulo tipo blog entiéndese con listado y detalle asociado a Inertia.

Esto es sobre el objeto de wire que como quien dice viene siendo la mejor conexión o el mejor amigo que tenemos para conectar lo que es el el servidor con el cliente por aquí también tenemos un video como quien dice un poquito personal En lo cual te comento cuáles son mis consideraciones para emplear CodeIgniter 4 Al momento de desarrollar y para Quién pudiera aplicar este tipo de framework que en pocas palabras son para proyectos que se pudieran considerar pequeños o directamente también para las personas que no quieran seguir una curva de aprendizaje tan complicada como puede ser la de alabel o al menos larga es un poco aquí lo comentado Entonces por aquí también un video de lo que es las publicaciones originales del curso de Laravel 10 que voy también publicando poco a poco en este caso asociado los seeders para crear datos de prueba.

Por aquí otra demo en este caso para lo que es el javascript y el js de Livewire específicamente por aquí vamos a ver cómo emplearse CKEditor bueno primero vamos a conocer algunas cositas interesantes sobre el js del iware que ya también lo hemos presentado un poco vamos a indagar en algunas cositas más pero sobre todo vamos a enfocar la parte de integrar este tipo de plugins y con esto poder comunicar lo que es el javascript de Livewire Que obviamente va a ser aquí necesario porque por ejemplo vamos a asociarlo tal cual Tenemos aquí un bloque de texto obviamente toda esta información lo tiene que manejar Livewire en el servidor para poder manejarla pasar a la base de datos y esto lo vamos a hacer mediante javascript de Livewire y vamos a atarlo como quien dice con otro plugin externo en este caso mediante node de sec editor vamos a ver cómo podemos hacer esa comunicación de ambos mundos.

Por aquí también tenemos ya otro video un poco personal que es para Resaltar el código en este caso empleando Vue podemos emplear el siguiente plugin el de highlight.

Por aquí también otro video de que voy publicando poco a poco del curso original de Laravel que es sobre ORUGA UI Cómo configurarlo con Vue ya vengo para acá y este sería también del curso original de Laravel en este caso otra vez con uruga y como emplear en conjunto esta sería la presentación y esta como crear un listado este video también es algo personal y es una cosa que también me pasó por aquí cuando estoy desarrollando la aplicación de desarrollo libre Siempre voy dando aquí algunos pequeños tip que tengo un Provider que Recuerda que es la forma global que tenemos para manejar como quien dice la Data de la aplicación entiéndase el estado de la aplicación yo tengo aquí un par de providers en este caso es para manejar el tema al que me refiero tengo dos realmente para otra cosa pero me refiero a este para el tema aquí en el Main que es el archivo de arranque por aquí tengo este con el list en true se pudiera decir que es el valor por defecto que entiéndase que cada vez que se cambia algo de esta propiedad que tenemos aquí definida en cualquier parte de la aplicación ya que lo tenemos en la parte más alta automáticamente se llamaría este método y se volvería a construir Cuál era el problema que tenía Fíjate que lo tengo por aquí definido con el Listen en true y por aquí lo tengo definido con el list en falso que sería este otro que tenemos acá entonces este método se encarga de obtener el tema al inicio para configurarlo a nivel de la aplicación aparte de que otra vez cuando se cambie el tema en este caso en modo claro modo oscuro que es lo que hace este Provider entonces lo que hace es pasar toda la aplicación a modo oscuro según el tema que tenemos por aquí definido justamente acá Este es el que se encargaría Entonces el problema es que en conjunto con este método que lo que hace es inicializar la Data y con esto también tomar de mi servidor Cuál es el tema que tiene configurado es usuario por defecto y poder configurarlo a nivel de la aplicación el problemilla era que justamente cuando hacíamos esta actualización no importa si el valor de acting por ejemplo esto es un valor bullano tal cual puedes ver aquí si ya esto lo lo teníamos en true no importa automáticamente eso también lo toma como un cambio y por lo tanto esto se llamaba otra vez Cuál era el tema que cuando se llamaba otra vez este método se ejecutaba otra vez por lo tanto se volvía a actualizar y se volvía a llamar venía aquí otra vez se construyó otra vez todo el widget y se volvía a llamar y quedaba ahí un ciclo infinito Que obviamente sonar Que obviamente eso no era lo que yo quería Entonces estos listes son bastante como quien dice engaños en ese sentido ojo está bien la lógica pero Hay que tenerle cuidado a lo que me refiero ya que independientemente aquí lo que yo coloqué acá a la final se iba a llamar otra vez porque como quien dice el padre o el primero que se ejecuta viene siendo Este Entonces es un poco aquí lo he hablado en ese video ya acabado esto ya esto Prácticamente todo lo que vimos para YouTube  

Blog

Así que vamos a pasar a lo que hicimos en el blog por aquí un poco lo comentado un video publicado para iniciar con el javascript de Livewire por aquí lo de los providers que te comentaba precisamente Aquí también lo de View highlight y por aquí también es un un post un poco personal a la cual te indico una comparación entre lo que es Laravel inertia con la creación del esquema tradicional que sería una RESTAPI y que la consumes mediante Vue re ya que recordemos que inertia también tiene Vue entonces por eso que coloco aquí la conexión de View qué es lo que podemos emplear según sean nuestras necesidades aquí otra es de cómo emplear cuando emplear CodeIgniter 4 y esto también es un poco con lo comentado al inicio de la propiedad que tenemos llamada entangle que viene siendo el mejor amigo de alpine entonces es lo lo comentado acá ya por lo demás ya con esto terminamos lo que es las actualizaciones en el blog.

Cursos

En lo que se refiere a las actualizaciones a nivel de los cursos por aquí tenemos lo siguiente comenzando con el curso de inertia Recuerda que esto también lo llevo para el libro entonces aquí estamos implementando un carrito de compras y ahorita te lo muestro pero estamos creando aquí la estructura inicial que sería la parte visual Simplemente nos estamos enfocando al menos al momento en el cual estoy grabando este video en la parte funcional luego lo podemos aplicar una capita de css para que quede más bonito hacemos la parte funcional y también aquí estamos haciendo la réplica la base de datos para que no solamente se quede la sesión sino también lo tengamos ahí directamente en la base de datos y lo podemos replicar Al momento de login que fue justamente lo último que hice al momento en el cual antes de grabar este video en la parte del Livewire estamos aquí trabajando con la parte de sec editor y es por eso que publiqué los videos introductorios que te comentaba antes sobre CKEditor cómo poder integrarlo Aquí tienes un poco más de detalle aparte de instalarlo tenemos que aquí indicar al Livewire de que que no actualice este componente el de CK Editor cuando estamos construyendo el componente cuando va cambiando el componente porque si no lo va a destruir aplicar cierto css al CKEditor para que no se pierda el estilo entiéndese que tengo un sobreescribe todo el estilo de la aplicación Entonces ahora tenemos como quien dice que volver a activarlo un poco lo comentado acá y aquí las propiedades que tenemos en laravel algunas características que Considero que son importantes esta más que todo de manera teórica bueno por aquí un poco lo comentado propiedades computadas y otras opciones que ten aquí para las propiedades y finalmente por aquí lo que sería para el blog otra vez aquí creamos una aplicación sencillita tipo listado detalle para un blog y estamos comenzando bueno esta semana no hay cupón para Emi porque lo saco ya para la siguiente y esto sería todo lo que cubrí para la semana mencionada Así que sin más que decir nos vemos la semana próxima.

Integración con Inertia - Carrito compras

  1. Componente de Vue para administrar un Item del carrito

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

  2. Compartir datos del carrito mediante la sesión a Vue

    1. Vamos a realizar la adaptación para compartir la sesión en los componentes de Vue.

  3. Listado de Post en el carrito: Adaptar

    1. Adaptamos el listado de post del carrito al nuevo esquema.

  4. Vista de detalle del carrito

    1. Vamos a crear una página para el detalle del carrito.

  5. BD: Crear migración y modelo

    1. Vamos a crear la estructura para trabajar con la base de datos.

  6. BD: Registrar cambios en la base de datos

    1. Vamos a guardar la sesión del carrito en la base de datos.

  7. BD: Replicar carrito de la base de datos a sesión al momento del login

    1. Vamos a escuchar cuando ocurre el login y replicar en la sesión el carrito.

  8. Componente de Toast de Oruga UI

    1. Vamos a utilizar el componente de Toast cada vez que realicemos un cambio en el carrito.

 

Integración con Livewire - JS

  1. CKeditor: wire:ignore

    1. Vamos a evitar que el CKEditor se vea afectado por las actualizaciones de Livewire.

  2. Ckeditor: Detectar cambios al escribir

    1. Vamos a conocer como obtener el HTML generado por CKEditor y un evento para los cambios.

  3. Ckeditor: Registrar cambios en una propiedad de Livewire

    1. Vamos a registrar el HTML generado en el CKEditor en una propiedad.

  4. Ckeditor: Establecer contenido inicial

    1. Vamos a establecer el contenido por defecto al CKEditor.

  5. Ckeditor: Aplicar CSS al editor

    1. Vamos a aplicar un CSS al editor para que que se distinga los elementos Hx y listados.

  6. Node y JavaScript de Livewire

    1. Vamos a hablar de si podemos usar Node con el JavaScript de Livewire.

 

Integración con Livewire - Propiedades

  1. Opciones en las propiedades wire:model

    1. Hablaremos sobre algunas propiedades antiguas para diferir la actualización de las propiedades desde la vista.

  2. Propiedades computadas

    1. Vamos a presentar las propiedades computadas.

  3. Otros datos sobre las propiedades

    1. Vamos a conocer otras características de las propiedades

Integración con Livewire - Propiedades

  1. Cambios iniciales

  2. Página de listado: Estructura inicial

    1. Vamos a crear el esqueleto de la app.

- 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!
© 2025 Copyright | Contacto | Acerca de | Versión PC