Legacy: Primeros pasos con Laravel 9 o 10 Livewire 2

Crea tus primeras apps con Livewire junto con Alpine.js, Tailwind.css, vanilla JavaScript y Node

3.50 (28 reviews)
Udemy
platform
Español
language
Web Development
category
Legacy: Primeros pasos con Laravel 9 o 10 Livewire 2
195
students
20 hours
content
Feb 2024
last update
$49.99
regular price

What you will learn

Emplear Laravel Livewire de manera fluida y conocer sus componentes fundamentales

Componentes de Livewire y comunicación entre los mismos y del cliente al servidor

Envio de mensajes entre componentes

Integrar con Alpine JS, vanilla JavaScript y Node en general

Organización en la programación de múltiples módulos

Directivas de Livewire

Eventos de Livewire

Extender Livewire con plugins en JavaScript

Description

Este es un curso en el cual daremos los primeros pasos con Laravel Livewire, conoceremos los fascinantes componentes y atributos en Livewire para interconectar una clase en Laravel desde una página web en HTML; por lo tanto, no hay necesidad de usar peticiones axios, fetch o similares ya que, la estructura o scaffolding que nos trae Livewire se encarga de todo; trayendo un mundo de posibilidades infinitas y un desarrollo rápido en comparación de otras soluciones similares con el esquema clásico de:

Laravel + Rest Api + Vue

Este curso al ser de nivel intermedio, da por hecho que tienes conocimientos en Laravel básico.

En definitiva, aprenderás a conocer Laravel Livewire, qué cambios trae en un proyecto en Laravel básico, el uso de los componentes, propiedades a lo v-model de Vue, llamar a funciones desde una página HTML al servidor mediante atributos de Livewire y mucho más.

¿Qué aprenderemos?

A nivel técnico aprenderás a trabajar con las siguientes características en Laravel Livewire:

  1. Formas de instalar Laravel Livewire.

  2. Estructura del proyecto y que cambia con Laravel básico

  3. Funcionalidades que incorpora Livewire

  4. Esquema basado en peticiones

  5. Componentes de Livewire en detalle

  6. Formularios y los wire:model

  7. Filtros con los wire:model

  8. Primeros pasos con Laravel Livewire.

  9. Componentes de Livewire, botones, nav, formularios…

  10. Manejo de eventos, atributos, directivas y JavaScript de Livewire

  11. Eventos personalizados y de Livewire

  12. Comunicar componentes

  13. Ruteo y navegación de pantallas.

  14. El JavaScript de Livewire y comunicación directa con el servidor.

    1. Eventos

    2. Hooks

    3. Propiedades

    4. Métodos

    5. Listeners

  15. Extender Livewire con plugins en JavaScript

    1. CKEditor

  16. Introducción a Alpine JS

  17. Proyecto de To do List con Alpine.js

  18. Adaptar proyecto en Alpine con Livewire.

Proyectos o aplicaciones

Vamos a crear varios módulos en una aplicación como:

  • Aplicación tipo CRUD.

  • Formulario paso por paso.

  • Formulario con CKEditor y comunicación directa con la clase componente.

  • Carrito de compras.

  • Proyecto de To do List con Alpine.js y Livewire.

Ventajas de desarrollar en Laravel Livewire y de tomar este curso

  • Es estupendo para crear aplicaciones cuando requieres comunicar frecuentemente el cliente con el servidor.

  • Gracias a Laravel ofrece una excelente organización, es un framework rápido, potente, con librerías y helpers listas para usar y extensible con paquetes y librerías de terceros y propios del framework; a su vez.

  • Es ideal para crear aplicaciones reales mantenibles y escalables.

  • Aprenderás a desarrollar apps de manera organizada en Laravel Livewire en combinación de otras tecnologías.

  • En el curso abordaremos los puntos anteriores de una manera organizada y de manera básica e ir profundizando de a poco en cada uno de estos elementos.

Content

Introducción

Introducción
Recomendaciones
¿Qué es Laravel Livewire?

Primeros pasos con Livewire

Introducción
Mac y Linux: Crear un proyecto con el instalador de Laravel y Sail
Mac y Linux: Ejecutar el proyecto son Laravel Sail y Docker
Windows: Crear un proyecto con el instalador de Laravel y Laragon
Crear un proyecto en Laravel Sail, desde un proyecto base
Crear un proyecto en git
Características de un proyecto Livewire

Conociendo los componentes

Introducción
Creas las migraciones
Crear los componentes
Configurar las rutas
Crear los modelos
Save: Crear una categoría
Pantallas de errores
Atributos wire:x
Más pruebas con Livewire
Save: Aplicar validaciones
Usar componentes de Livewire
Ciclo de vida de un componente
Save: Actualizar una categoría
Index: Crear listado básico
Index: Listado paginado
Index: Eliminar
Index: Eliminar con diálogo de confirmación
Diálogo de Mensaje
Carga de imagen
Publicar en git

Componentes y estilos

Introducción
Formulario
Carta
Header del layout
Container
Tabla
Diálogo de alerta para eliminar: Componente de confirmación
Mensaje de acción realizada
Menú: Componente Dropdown (Modo PC)
Ajuste del menú anterior
Menú: Componente Dropdown (Modo Móvil)
Enlace para crear una categoría
Publicar en git

Componentes comunicar: Formulario paso por paso

Introducción
Crear migraciones principales
Crear componentes principales
Crear modelos principales
Crear formulario general
Tarea: Crear formulario persona
Probar relaciones generales y personas
Tarea: Crear formulario empresa
Probar relaciones generales y empresas
Tarea: Crear formulario detalle
Probar relaciones generales y detalles
Lógica inicial del formulario paso por paso
Directiva @livewire para renderizar componentes
Eventos: Comunicación de los componentes hijos al componente padre
Crear layout base
Definir step en clases
Objeto $wire
Demo: evento click con $wire
Regresar a los pasos anteriores
Enviar el id del contacto general a los componentes hijos
Habilitar el guardado
Habilitar la actualización
Detalles finales
Publicar en git

Práctica: Crear CRUD para los Post

Introducción
Post/Save: Crear formulario de creación y actualización
Post/Index: Crear listado
Publicar en git

Filtros y campos de búsqueda

Introducción
Seeders para los post
Filtros
Campo de búsqueda
Query String
Filtrar por rango de fecha
Publicar en git

Ordenación

Introducción
Ordenación manual
Ordenación por definición de columnas
Acomodar CSS de las columnas, recomendaciones
trait: Extender el esquema de ordenación a otros componentes
Tarea: Replicar ordenación para las categorías
Publicar en git

JavaScript en Livewire

Introducción
Hooks en JavaScript
Extender Livewire con plugins de JavaScript, CKeditor
Comunicación inversa: De la propiedad a CKEditor
Otras funciones de Livewire en JavaScript
Node y JavaScript de Livewire
Publicar en git

Propiedades en Livewire

Introducción
Personalizar la actualización de las propiedades en el wire:model
Propiedades computadas
Publicar en git

Blog: Listado y detalle de post

Introducción
Página de listado: Estructura inicial
Página de listado: Diseño
Layout
Página de listado: Reducir tamaño y alineado
Página de detalle
Botón de navegación
Colocar formulario paso por paso en detalle
Publicar en git

Carrito de compras: Estructura inicial

Introducción
Listado de productos: Esquema inicial
Item de carrito
Agregar un producto
Carrito a ítem
Gestión del ítem
Detalles finales
Publicar en git

Carrito de compras: Replicar en la base de datos

Introducción
Crear migración y modelo
Registrar cambios en la base de datos
Establecer sesión en el login
Publicar en git

Carrito de compras: Eventos y mensajes

Introducción
Plugin de mensajes toast
Escuchar eventos en Livewire JavaScript
Múltiples escuchadores
Publicar en git

Carrito de compras: Total de ítems

Introducción
Calcular total
Issue o Bug
Mostrar carrito con el total
Publicar en git

Extra: Alpine JS: Introducción

Introducción a Alpine.js
Livewire y Alpine
Preparar un proyecto
Mostrar contenido HTML con variables reactivas: x-data, click y x-show
Campos de textos y variables: x-model y x-text

Reviews

Leonardo
February 1, 2024
Curso desactualizado, el curso dice que esta en laravel 10 todo el curso esta en otra version al igual que livewire, tambien los links que da para su "blog" Estan caidos/no sirven
Jonathan
January 9, 2024
En primer punto cuando hacer propaganda de un curso o cuando lo muestras para venderlo, debes especificar que para el curso debes tener conocimientos previos de lo que sea que sea necesario. Por otro lado aunque ayas explicado muchas cosas en un curso anterior, es el deber del instructor refrescar conocimientos a los alumnos. Por otro lado el no me gusta repetir las cosas no aplica aquí, ya que tambien es el deber del instructor repetir las veces que sea necesario. El copiar y reutilizar es buena practica cuando ya eres practico en algo. En estos casos no. Inicias el curso explicando algunos componentes, los cuales vas a utilizar mas adelante pero los debites ocupar desde el momento en que se te muestran, demasiados pasos en cosas incensarais haciendo el entendimiento mas difícil. Si bien es cierto el instructor domina el tema, pero es muy complicado seguir el paso.

Charts

Price

Legacy: Primeros pasos con Laravel 9 o 10 Livewire 2 - Price chart

Rating

Legacy: Primeros pasos con Laravel 9 o 10 Livewire 2 - Ratings chart

Enrollment distribution

Legacy: Primeros pasos con Laravel 9 o 10 Livewire 2 - Distribution chart

Related Topics

4605234
udemy ID
3/20/2022
course created date
4/29/2022
course indexed date
Bot
course submited by