Curso primeros pasos con Laravel Livewire + Alpine.js y Tailwind.css

• Categorías
• /
• Laravel
• /
• Curso primeros pasos con Laravel Livewire + Alpine.js y Tailwind.css

En este curso vas a aprender Laravel Livewire desde cero, hasta conocer sus detalles más importantes; recuerda que debes de saber programar en Laravel para ver este curso.

Laravel es un framework fascinante, inmenso y con una curva de aprendizaje algo elevada y con múltiples opciones; este libro no es para iniciales y da por hecho de que ya sabes programar en Laravel.

Laravel Livewire lleva el desarrollo de Laravel un poco más allá; automatizando procesos rutinarios en esquemas muy flexibles en base a componentes, los componentes de Livewire que nos permite comunicar cliente y servidor de una manera muy simple, eficiente y sencilla.

Laravel Livewire no es un framework, es solamente una capa o scaffolding que agrega ciertas características extras al framework que podemos utilizar para crear grandes aplicaciones, con menos esfuerzo y tiempo de desarrollo.

¿Qué es Laravel Livewire?

Livewire es un scaffolding para Laravel, el cual no es más que un esqueleto o capa que agregan ciertas funcionalidades extras en Laravel mediante el uso de componentes de Livewire; los mismos componentes de Laravel básico, pero con añadidos muy interesantes que son los que conforman a Livewire.

Además de esto, un proyecto en Livewire ya nos trae configurados Tailwind.css y Alpine.js

Con todo estos conocimientos podrás emplearlos para crear tus propias aplicaciones en Flutter.

¿Qué nos ofrece Livewire?

Crear aplicaciones web modernas es difícil, herramientas como Vue y React son extremadamente poderosas, pero la complejidad que agregan al flujo de trabajo de un desarrollador de pila completa es una locura.

Pensando en lo anterior, Laravel Livewire es un marco completo para Laravel que simplifica la creación de interfaces dinámicas, sin dejar la comodidad de Laravel; en pocas palabras nos permite usar esquemas similares a los de Vue y React directamente en Laravel.

Podemos trabajar con esquemas similares a los de Laravel y Vue, pero de una manera más directa y simple; el desarrollo de Laravel está fuertemente ligado al uso de componentes; los mismos componentes de Laravel pero con agregados importante de Laravel Livewire lo que permite escalar enormemente el uso de componentes:

1. Vincular mediante el archivo de rutas.
2. Comunicación sencilla basada en acciones, eventos y funciones entre el cliente y el servidor.
3. Agrega funcionalidades como paginación, carga de archivos, query string entre otras.

En definitiva, con Livewire, podemos hacer lo mismo que hacemos con Laravel y sus controladores, pero de una manera más sencilla en la cual podemos usar los componentes y reutilizar piezas de código que nos ofrece Livewire para hacer una comunicación muy sencilla entre el servidor con el cliente.

Aparte de que, dependiendo como decidas instalar a Laravel Livewire, puedes habilitar opciones que ya vienen de gratis como:

1. Sistema de autenticación con registro, recuperación de credenciales.
2. Vista de perfil con carga de usuario.
3. Manejo de roles mediante equipos.
4. Manejo de la API Tokens mediante Laravel Breeze con una interfaz administrable.

En definitiva, Livewire no es un framework, lo puedes ver como un paquete más que agrega funcionalidades extras a algunos elementos de Laravel que en definitiva lo convierten en un scaffolding o esqueleto para nuestras aplicaciones.

Para esta tecnología, tenemos que emplear dos documentaciones aparte (sin contar con la de Laravel).

La que nos ofrece la estructura del proyecto:

https://jetstream.laravel.com/2.x/stacks/livewire.html

Y la que nos ofrece Laravel Livewire al momento de desarrollar:

https://laravel-livewire.com/

Estructura del curso

La lista de reproducción la puedes ver por aquí:

https://www.desarrollolibre.net/academia/free/primeros-pasos-con-laravel-livewire

Vamos a evaluar uno a uno cada una de las secciones que veremos en el curso:

Requisitos previos y requisitos

Para tomar este curso, es importante que sepas programar en Laravel básico.

Como aprender Laravel

En mi blog, encontrarás múltiples recursos de interes; actualmente tengo publicaciones, vídeos en Youtube y un curso sobre Laravel 10 junto con un libro que sigue la misma temática.

Aquí las secciones y clases completas del curso:

Por aquí tienes el listado completo de clases que vamos a cubrir en el libro y curso:

Introducción

• 1 Introducción

• 2 Sobre el curso

• 3 Laravel Livewire Libro

• 4 Requerimientos para tomar el curso

• 5 ¿Qué es Laravel Livewire?

Primeros pasos con Livewire

• 1 Introducción

• 2 Mac y Linux: Crear un proyecto con el instalador de Laravel y Sail

  Vamos a crear un proyecto en Laravel.

• 3 Mac y Linux: Ejecutar el proyecto son Laravel Sail y Docker

  Vamos a preparar todo para poder usar Sail con Docker para nuestro proyecto.

• 4 Windows: Crear un proyecto con el instalador de Laravel y Laragon

  Vamos a crear un proyecto Laravel Livewire en entorno Windows.

• 5 Crear un proyecto en Laravel Sail, desde un proyecto base

  Vamos a crear un proyecto en Livewire partiendo de un proyecto base de Laravel.

• 6 Crear un proyecto en git

  Vamos a subir el proyecto a git.

• 7 Características de un proyecto Livewire

  Vamos a presentar que es lo que tenemos en detalle, el proyecto, sus características y cómo funciona.

Conociendo los componentes

• 1 Introducción

• 2 Creas las migraciones

  Vamos a crear las migraciones para el proyecto.

• 3 Crear los componentes

  Vamos a crear los componentes iniciales.

• 4 Configurar las rutas

  Vamos a crear las rutas para las categorías.

• 5 Crear los modelos

  Vamos a crear los modelos.

• 6 Save: Crear una categoría

  Vamos a crear el proceso para crear una categoría.

• 7 Pantallas de errores

  Vamos a conocer la pantalla de errores de Livewire.

• 8 Atributos wire:x

  Vamos a presentar otros atributos que tenemos disponibles.

• 9 Más pruebas con Livewire

  Vamos a realizar pruebas con Livewire.

• 10 Save: Aplicar validaciones

  Vamos a realizar validaciones del lado del servidor y mostrar las mismas en la vista.

• 11 Usar componentes de Livewire corrección

• 12 Usar componentes de Livewire

  Vamos a usar los componentes de Livewire del lado de nuestro componente.

• 13 Ciclo de vida de un componente

  Explicaremos el ciclo de vida de los componentes de Livewire.

• 14 Save: Actualizar una categoría

  Trabajaremos en el apartado de actualizar un registro existente.

• 15 Index: Crear listado básico

  Vamos a crear un componente de listado.

• 16 Index: Listado paginado

  Vamos a adaptar la paginación.

• 17 Index: Eliminar

  Vamos a eliminar una categoría mediante un botón.

• 18 Index: Eliminar con diálogo de confirmación

  Vamos a crear un diálogo de confirmación para eliminar.

• 19 Diálogo de Mensaje

  Vamos a mostrar un componente para mostrar información sobre las operaciones CRUDs.

• 20 Carga de imagen

  Vamos a hacer el upload de una imagen.

• 21 Publicar en git

Componentes y estilos

• 1 Introducción

• 2 Formulario

  Vamos a adaptar el diseño del formulario con el componente de Livewire.

• 3 Carta

  Vamos a crear un componente de carta.

• 4 Header del layout

  Vamos a definir el header para el layout.

• 5 Container

  Vamos a crear un contenedor.

• 6 Tabla

  Vamos a mejorar la presencia de la tabla.

• 7 Diálogo de alerta para eliminar: Componente de confirmación

  Vamos a trabajar en un componente de alerta.

• 8 Mensaje de acción realizada

  Vamos a hacer un box para los diálogos de confirmación.

• 9 Menú: Componente Dropdown (Modo PC)

  Vamos a colocar la opción para el menú.

• 10 Ajuste del menú anterior

  Vamos a realizar un pequeño cambio en el menú anterior.

• 11 Menú: Componente Dropdown (Modo Móvil)

  Vamos a crear el menú para el modo móvil.

• 12 Enlace para crear una categoría

  Vamos a crear la opción para crear el enlace para la categoría.

• 13 Publicar en git

Componentes comunicar: Formulario paso por paso

• 1 Introducción

• 2 Crear migraciones principales

  Vamos a crear las migraciones para los formularios.

• 3 Crear componentes principales

  Vamos a crear los componentes de Livewire para los formularios

• 4 Crear modelos principales

  Vamos a crear los modelos.

• 5 Crear formulario general

  Vamos a crear el formulario para crear el contacto general.

• 6 Tarea: Crear formulario persona

  Vamos a crear el formulario para crear el contacto por persona.

• 7 Probar relaciones generales y personas

  Vamos a probar la relación entre general y persona y su inversa.

• 8 Tarea: Crear formulario empresa

  Vamos a crear el formulario para crear el contacto por empresa.

• 9 Probar relaciones generales y empresas

  Vamos a probar la relación entre general y empresa y su inversa.

• 10 Tarea: Crear formulario detalle

  Vamos a crear el formulario para crear el contacto por detalle.

• 11 Probar relaciones generales y detalles

  Vamos a probar la relación entre general y detalle y su inversa.

• 12 Lógica inicial del formulario paso por paso

  Vamos a crear los condicionales para manejar un paso o el otro.

• 13 Directiva @livewire para renderizar componentes

  Vamos a aprender a renderizar componentes de Livewire desde un archivo blade.

• 14 Eventos: Comunicación de los componentes hijos al componente padre

  Vamos a conocer la comunicación entre componentes.

• 15 Crear layout base

  Vamos a crear el layout base para la sección de contacto.

• 16 Definir step en clases

  Vamos a pasar el diseño a clases.

• 17 Objeto $wire

  Vamos a conocer el objeto $wire para trabajar desde el bloque de script en Livewire.

• 18 Demo: evento click con $wire

  Vamos a realizar una demostración del evento click en Alpine.js y su uso con Livewire.

• 19 Regresar a los pasos anteriores

  Vamos a crear el botón para paso atrás.

• 20 Enviar el id del contacto general a los componentes hijos

  Vamos a definir el PK del componente padre (general) y se lo pasamos a los hijos.

• 21 Habilitar el guardado

  Vamos a realizar el proceso para guardar los comentarios en la base de datos.

• 22 Habilitar la actualización

  Vamos a habilitar el proceso de actualización.

• 23 Detalles finales

  Pequeños detalles de CSS.

• 24 Publicar en git

  Publicar en git

Práctica: Crear CRUD para los Post

• 1 Introducción

• 2 Post/Save: Crear formulario de creación y actualización

  Vamos a crear el proceso de crear y actualizar.

• 3 Post/Index: Crear listado

  Vamos a crear el listado de los posts y la opción de eliminar.

• 4 Publicar en git

Filtros y campos de búsqueda

• 1 Introducción

• 2 Seeders para los post

• 3 Filtros

  Vamos a crear la opción de los filtros para los seleccionables.

• 4 Campo de búsqueda

  Vamos a crear un campo de búsqueda para varios campos.

• 5 Query String

  Vamos a implementar el queryString de los filtros y campo de búsqueda.

• 6 Filtrar por rango de fecha

  Vamos a crear un filtro por fechas.

• 7 Publicar en git

Ordenación

• 1 Introducción

• 2 Ordenación manual

  Vamos a crear el esquema para la ordenación.

• 3 Ordenación por definición de columnas

  Vamos a crear la estructura para la ordenación de las columnas del listado.

• 4 Acomodar CSS de las columnas, recomendaciones

  Vamos a acomodar unos aspectos de alineación de los th en la columna.

• 5 trait: Extender el esquema de ordenación a otros componentes

  Vamos a crear reutilizable el componente de ordenación.

• 6 Tarea: Replicar ordenación para las categorías

  Vamos a replicar el esquema de ordenación para las categorías.

• 7 Publicar en git

JavaScript en Livewire:

• 1 Introducción

• 2 Hooks en JavaScript

  Vamos a presentar el uso de los hooks en JavaScript.

• 3 Extender Livewire con plugins de JavaScript, CKeditor

  Vamos a instalar y configurar CKEditor.

• 4 Comunicación inversa: De la propiedad a CKEditor

  Vamos a realizar la actualización desde la propiedad a CKEditor.

• 5 Otras funciones de Livewire en JavaScript

  Vamos a conocer otras funciones de JavaScript útiles para el desarrollo.

• 6 Node y JavaScript de Livewire

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

• 7 Publicar en git

Propiedades en Livewire

• 1 Introducción

• 2 Personalizar la actualización de las propiedades en el wire:model

  Vamos a trabajar con las propiedades del lado del wire:model para diferir las actualizaciones al servidor.

• 3 Propiedades computadas

  Vamos a presentar las propiedades computadas.

• 4 Publicar en git

Blog: Listado y detalle de post

• 1 Introducción

• 2 Página de listado: Estructura inicial

  Vamos a crear el esqueleto de la app.

• 3 Página de listado: Diseño

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

• 4 Layout

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

• 5 Página de listado: Reducir tamaño y alineado

  Vamos a realizar un acomodo extra.

• 6 Página de detalle

  Vamos a crear la página de detalle.

• 7 Botón de navegación

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

• 8 Colocar formulario paso por paso en detalle

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

• 9 Publicar en git

Carrito de compras: Estructura inicial

• 1 Introducción

• 2 Listado de productos: Esquema inicial

  Vamos a crear el esqueleto del módulo.

• 3 Item de carrito

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

• 4 Agregar un producto

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

• 5 Gestión del ítem

  Vamos a crear la gestión del ítem.

• 6 Detalles finales

  Vamos a definir los detalles finales del carrito de compras.

• 7 Publicar en git

Carrito de compras: Replicar en la base de datos

• 1 Introducción

• 2 Crear migración y modelo

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

• 3 Registrar cambios en la base de datos

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

• 4 Establecer sesión en el login

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

• 5 Publicar en git

Carrito de compras: Eventos y mensajes

• 1 Introducción

• 2 Plugin de mensajes toast

  Vamos a instalar y configurar un plugin de toast.

• 3 Escuchar eventos en Livewire JavaScript

  Vamos a escuchar los eventos desde el ítem del carrito desde JS.

• 4 Múltiples escuchadores

  Vamos a escuchar en varios lugares los eventos.

• 5 Publicar en git

Carrito de compras: Total de items

• 1 Introducción

• 2 Calcular total

  Vamos a calcular el total de elementos en el carrito.

• 3 Issue o Bug

• 4 Mostrar carrito con el total

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

• 5 Publicar en git

Extra: Alpine JS, Introducción

• 1 Introducción a Alpine.js

  Vamos a hablar un poco sobre el framework.

• 2 Livewire y Alpine

  Vamos a comparar ambos frameworks.

• 3 Preparar un proyecto

  Vamos a crear un proyecto para trabajar con Alpine.

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

  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

  Vamos a mapear una variable a un campo de texto.

• 6 Atributos: x-bind

  Vamos a presentar el bind de atributos.

• 7 Atributos: múltiples valores

  Vamos a trabajar con múltiples valores para los atributos.

• 8 Atributos: style

  Vamos a trabajar con el atributo de estilos.

• 9 Ciclos y condicionales: x-for y x-if

  Vamos a conocer el uso del for y condicional.

• 10 Bloque de script

  Vamos a organizar el código anterior en un bloque de script.

• 11 Introducción

  Introducción

• 12 Aplicación de todo: Búsqueda

  Vamos a crear una aplicación tipo TODO, primero, el campo de búsqueda.

• 13 Aplicación de todo: Crear Todos

  Vamos a crear todos.

• 14 Marcar todo completada

  Vamos a realizar la opción marcar una tarea como completada.

• 15 Eliminar todo

  Vamos a realizar la opción de eliminar un todo.

• 16 Borrar todos los todos

  Vamos a realizar la opción de borrar todos los todos.

• 17 Modificar un todo

  Vamos a realizar la opción de modificar un todo.

• 18 Configurar Bootstrap 5

  Vamos a adaptar el estilo de B5 en la app.

• 19 Extra: Guardar de manera persistente

  Extra: Guardar de manera persistente

• 20 Publicar en git

• 21 Atributo ref

Alpine y plugins externos: Sortable

• 1 Introducción

• 2 Sortable: Ordenable

  Vamos a instalar y configurar un plugin para hacer ordenable el listado.

• 3 Publicar en git

Aplicación de TODO con Livewire y Alpine

• 1 Introducción

• 2 Adaptar la app de Todo de Alpine en Livewire

  Vamos a clonar el proyecto de Alpine en Livewire.

• 3 Crear migración y modelo

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

• 4 Crear to do desde Livewire

  Vamos a crear un to do desde Livewire y la clase componente.

• 5 Popular listado de todos desde Livewire

  Vamos a mostrar el listado de to do desde la base de datos en Alpine.

• 6 Reordenación: Actualizar arrays en el cliente y servidor

  Vamos a presentar un esquema de ordenación el clásico de construir el array desde cero.

• 7 Reordenación: Actualizar en la base de datos con un evento

  Vamos a guardar los to do en la base de datos.

• 8 Reordenación: Segundo esquema, splice

  Vamos a presentar un esquema de ordenación, el de quitar y colocar el todo.

• 9 Bug en Livewire y Alpine parte 1

  Hablaremos sobre un bug actualmente.

• 10 Reordenación: Tercer esquema, solo IDs

  Vamos a presentar un esquema de ordenación.

• 11 Bug en Livewire y Alpine parte 2

  Seguiremos hablando del bug.

• 12 Eliminar un to do

  Vamos a eliminar un to do en la base de datos.

• 13 Editar un todo

  Vamos a actualizar un to do.

• 14 Marcar completado un to do

  Vamos a marcar como completado un to do.

• 15 Eliminar todos los to do

  Vamos a eliminar todos los to do.

• 16 Extra: Reordenación de los to do por axios

  Vamos a realizar la reordenación mediante una petición en axios.

• 17 Publicar en git

Migrar de Bootstrap a Tailwind

• 1 Introducción

• 2 Migrar HTML

  Vamos a convertir el contenido de Bootstrap 5 a Tailwind.css.

• 3 Publicar en git

Alpine JS: Otras características

• 1 Introducción

• 2 x-ignore, ignorar un bloque de HTML

  Veremos cómo ignorar un bloque de HTML.

• 3 x-teleport, transportar un template

  Veremos cómo copiar el contenido de un componente en otra parte del DOM.

• 4 x-effect, observar cambios en variables

  Veremos cómo detectar cambios en variables.

• 5 $watch, observar propiedades

  Veremos cómo crear un observable.

• 6 x-html, renderizar variables con HTML

  Veremos cómo imprimir contenido HTML.

• 7 $id, crea IDs dinámicos y organizados

  Veremos cómo generar IDs dinámicos.

• 8 $el, referencia al elemento

  Veremos cómo referenciar un elemento como si fuera un selector.

• 9 $store, almacenar datos de manera global

  Veremos cómo almacenar datos en el store.

• 10 $nextTick, Script luego de aplicar cambios en el DOM

  Veremos cómo verificar si los cambios fueron realizados por Alpine en el DOM.

• 11 $dispatch, eventos personalizados

  Vamos a conocer como manejar eventos personalizados.

• 12 $root, acceder atributos en el root

  Vamos a conocer como acceder a atributos del root del componente.

• 13 Plugin, máscaras

  Vamos a conocer un nuevo plugin para manejar la máscara de los inputs.

• 14 Publicar en git

Proyectos en Alpine.js con Tailwind.css

• 1 Cart Api Rest

  Presentación

• 2 Cards Api: Estructura inicial

  Crearemos el listado de usuarios.

• 3 Cards Api: Tailwind

  Aplicaremos el estilo con Tailwind.css.

• 4 Cards Api: Búsqueda

  Vamos a crear un campo de búsqueda para las cartas.

• 5 Cards Api: Variar cantidad de cartas, estructura

  Vamos a crear la estrVamos a crear la parte funcional para variar las cantidades.uctura básica para variar las cantidades.

• 6 Cards Api: Hover

  Vamos a crear un efecto hover.

• 7 Cards Api: Variar cantidad de cartas, script

  Vamos a crear la parte funcional para variar las cantidades.

• 8 Cards Api: Loading

• 9 Cards Api: Deshabilitar input range

  Vamos a deshabilitar el input de tipo rango al momento de realizar una petición.

• 10 Accordion: Estructura inicial

  Vamos a crear un nuevo componente, el cuerpo básico.

• 11 Acordeón

• 12 Accordion: Animación

  Vamos a desplegar y contraer el acordeón de manera animada.

• Laravel
• Livewire
• Alpine.js
• PHP
• tailwind CSS