Full-Stack Laravel 13 Livewire 4 + IA + Alpine.js Desde Cero

Hablamos sobre el Software necesario e instalación de las herramientas para crear una app en Livewire.

Hablamos sobre que es Livewire, que nos ofrece y características modernas.

Creamos un proyecto en Laravel Livewire desde el instalador de Laravel.

Vemos que podemos agregar Livewire como una dependencia de Laravel, ideal si quieres un proyecto limpio.

Hablamos sobre la composicion de un proyecto en Laravel Livewire.

Damos un repaso más teórico de lo que es Livewire actualmente.

Hablamos sobre los tipos de componentes que tenemos disponibles en Laravel Livewire.

Crearemos las migraciones de post, tags y categorias para nuestros componentes.

Creamos los modelos de los posts, categorias y tags.

Crearemos los componentes para nuestra app y sus rutas.

Creamos la logica para crear una categoria.

Veremos algunos atributos de Livewire que podemos emplear al igual que el wire:submit.

Veremos las 3 formas de aplicar validaciones.

Hablamos sobre el ciclo de vida de los componentes de Livewire.

Creamos el listado de TODOS los registros.

Creamos un listado paginado.

Implementamos la opción de eliminar.

Implementamos la opción para eliminar con confirmación.

Implementamos los mensajes de confirmación para las operaciones realizadas.

Implementamos la opción de cargar imágenes.

Usaremos Laravel Boost con la Skill de Flux para mejorar el diseño de la app.

Vamos a emplear la IA para poder generar unos CRUDs, además de hablar sobre volt y estilos.

vamos a conocer algunas características extras de las propiedades de Laravel Livewire, como personalizar la fase de actualización de los wire:model, como el uso de las propiedades computadas.

Presentamos el uso de las clases formularios en Laravel Livewire.

Veremos como emplear las redirecciones en Livewire.

Hablamos sobre los problemas entre los eventos y redirecciones y cual usar.

Veremos como podemos crear redirecciones y enlaces tipo SPA.

Vamos a conocer como puedes perisistir datos a travez de la navegación.

En este capítulo, vamos a conocer todo lo que nos ofrece en JavaScript de Livewire y combinarlo con otros plugins, conoceremos los hooks en JavaScript, consumir propiedades, funciones y uso de los eventos.

Veremos como usar el wire:confirm para poder realizar comprobaciones antes de eliminar.

Ha partir de este punto, el resto del contenido del capitulo es netamente referencial y NO vamos a implementar nada en la aplicación, son simplemente funcionalidades como desarrollador debes de conocer para poder dominar Inertia.

Descubre cómo utilizar la tecnología de Stream en Livewire 4 para enviar datos al navegador antes de que la tarea termine.

Veremos como mostrar mensajes o estados de carga al configurar determinados botones.

Veremos la alternativa moderna al wire:loading que presentamos anteriormente, usando atributos de Tailwind.

Dame un ejemplo del uso de Teleport para transportar el contenido que quieras mostrar.

Veremos como podemos definir estilos especificos al componente.

Veremos como podemos cargar componentes secundarios en segundo plano y no bloquear la carga del componente principal.

Veremos el uso de las propiedades computadas, son métodos que se pueden consumir como si fueran una propiedad y son cacheadas.

Hablamos sobre propiedades reactivas modelable, push, reset entre otros.

Veremos como optimizar la navegación entre páginas mediante enlaces en livewire.

Veremos como podemos inyectar clases cuando se visita una URL en Laravel.

Veremos como podemos realizar animaciones entre estados al usar la "reactividad" en Livewire.

Veremos como detectar si un formulario esta "sucio" es decir, que el usuario a interactuado con el formulario.

Veamos como podemos renderizar con condicionales en el cliente.

Veremos como podemos verificar cuando un bloque HTML es visible o invisible en Livewire y ejecutar algo.

Conocemos como ocultar un bloque de HTML con la directiva de wire:cloak

Veremos como podemos mostrar un bloque HTML cuando el usuario pierde la conexión con el servidor.

Veremos como agregar atributos en componentes en Livewire.

Veamos como podemos usar actualizaciones optimistas para mostrar cambios ANTES de que se apliquen el servidor.

Vamos a conocer como podemos reemplazar contenido en el ciclo de actualizacion de Livewire.

Veremos como referenciar elementos HTML en el DOM HTML de la forma Livewire.

Creamos las migraciones para los contactos.

Creamos los modelos de las migraciones anteriores.

Creamos los componentes de Livewire.

Creamos el proceso para crear un comentario general.

Implementamos el resto de los formularios con la IA.

Mostramos el uso de la propiedad step para poder mostrar y ocultar los formularios.

Vamos a explicar el uso de los eventos en Livewire.

Creación de un Layout Personalizado para el Contacto

Vamos a crear la barra indicadora para el paso por paso.

Implementamos en el indicador del paso por paso el uso del $wire para leer la propiedad de step y marcarlas.

Despachamos los eventos desde los hijos

Presentamos el uso de entangle para poder tener la sincronización entre el cliente y el servidor.

Comunicación Inversa: Del Padre a los Hijos - Enviar el id del contacto general a los componentes hijos

Implementamos el pase de parámetros entre el padre al hijo.

Habilitamos el guardado de registros para los componentes hijos.

Cargamos los datos del contacto en el formulario si existen.

Habilitamos la edición del paso por paso General y una redirección al momento de la creación del mismo.

Implementamos la opción de ir a atrás para el paso por paso.

Vamos a presentar el uso del Atributo Modelable.

Usamos la IA para que genere una clase abstracta de tipo paso para el paso por paso.

Creamos la data de prueba para poder filtrar.

Creamos los filtros HTML por búsqueda.

Implementamos los filtros y propiedades para aplicar los filtrados.

Creamos un campo de búsqueda para el filtro.

Creamos un filtro por rango de fecha.

Vamos a registrar los filtros en la URL, para que al recargar persistan los filtros.

Creamos la ordenación por columnas en la tabla.

Aplicamos la limpieza en base a un enlace en el filtro.

Usamos la IA para refactorizar nuestro datatable y que sea reutilizable.

Implementamos el datatable de categorías y tags.

Hacemos una práctica con la IA para refactorizar un fragmento de vista.

Creamos una app To Do List en Alpine, te muestro el proceso CRUD.

Adaptamos la app que creamos antes para poder usar Livewire, evaluamos que es lo que debemos cambiar y que debemos conservar.

Implementamos el listado y detalle de las publicaciones publicadas junto con su filtros implementados anteriormente.

Vamos a implementar el carrito de compras con listado y gestión de productos.

Explora el concepto de islas en Livewire. Optimiza componentes de Laravel mediante carga diferida (defer) y paralela. Apps interactivas de alto rendimiento.

Realizamos un sencillo rediseño de la app mediante un prompt.

Incluimos CKEdito para el contenido enriquesido de los posts.

Aprende a implementar reordenamiento Drag and Drop en Livewire 4 usando Wire Sore. Guía paso a paso para gestionar posiciones en tu base de datos fácilmente.

Hablamos sobre como reutilizar el formulario paso por paso desde el detalle.

Veremos como implementar el mensaje tipo toast.

Veremos como crear un asistente de IA con Laravel SDK IA, que se comsuma mediante Stream

Implementamos un RAG en local para el chat anterior con el cual, podremos consultar documentación local.

Te comparto una publicación en la cual, comparamos los proyectos realizados en este curso y libro.

Veremos el uso del paquete Livewire Filemanager.

Conoceremos cómo crear pruebas unitarias y de integración en la aplicación que creamos anteriormente mediante Pest.

Presentamos conceptos claves e importancias de las pruebas.

Daremos una introducción a las pruebas específicas para Laravel Livewire presentando sus métodos de aserción principales.

Vamos a crear la primera PHPUnit para la aplicación.

Hablaremos sobre elementos importantes que tenemos que tener en cuenta para implementar la prueba.

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