Curso y Libro Crea tu Tienda en Línea con Laravel 12 Livewire 3
Se recomienda adquirir el curso junto con el libro, ya que, el curso ofrece explicaciones más detalladas sobre el porqué de las cosas, en el libro, tienden a ser más generales.
Esta formación esta pensada para adquirir en paquete.
Está formación esta dirigida para aquellas personas que quieran aprender a crear una tienda en línea con Laravel, para ello, usaremos Laravel Livewire para implementar cada uno de los módulos, al ser Livewire un starter kit con el cual podemos crear interfaces interactuables con el backend de una manera muy limpia y sencilla si lo comparamos con el enfoque tradicional.
Además, también tenemos todo el potencial que tenemos en Laravel base.
Este recurso es especial si lo comparamos con otros recursos en mi plataforma:
Puntos claves
Antes de que adquieras este recurso, por favor, lee los siguientes puntos en los cuales, te comento las diferencias que tenemos con el resto de mis cursos para iniciales:
- Nivel medio-profesional: Se da por hecho de que el lector tiene al menos conocimientos básicos en Laravel que van desde las herramientas de desarrollo empleadas con VSC, Laravel Herd hasta su entorno.
- Mas especifico: Es un libro en el cual el objetivo es crear una aplicación tipo tienda en línea con nuestros conocimientos en Laravel, por lo tanto, no tendrá el mismo enfoque que mis otros cursos/libros en donde la codificación depende del tema a presentar, y con esto, el desarrollo serás más corto y conciso. Aquí el objetivo es únicamente la creación de la tienda en línea, por lo tanto, la tienda es el tema y lo que codifiquemos depende del objetivo a cumplir para la tienda.
- No es paso a paso: Es importante hacer énfasis en el punto anterior, para esta formación, NO ofrecemos un paso a paso para TODO, entiéndase que hay procesos como los dashboards, que muchas veces NO lo implementamos desde cero, si no, se muestra la implementación en base a una presentación (curso) y es por eso que mencionamos que es para un nivel medio-profesional, ya que, evitamos perder tiempo en procesos ya conocidos como los mencionados, de esta forma, se busca que inviertas tu tiempo en lo más importante, conociendo procesos y lógicas únicas.
- Código fuente por sección: Al igual que siempre, el código fuente estará disponible al final de cada sección pero NO será público NI estará disponible por GitHub.
- Precio: Al ser un curso/libro pensado para desarrolladores en Laravel y de un mayor nivel, también tiene un mayor precio que el resto de mis formaciones básicas, también, el curso está pensado en adquirir junto con el libro.
Objetivo
El objetivo de la formación son dos:
- La creación de la tienda en línea con las opciones básicas de realizar el pago mediante Stripe y PayPal, escalable fácilmente para otros métodos de pago.
- Explicar y llevar a la práctica conceptos cruciales para que puedas implementar (el porqué de las cosas) y adaptar la tienda en línea a tus necesidades; conceptos como:
- Lógica para manejar los pagos de manera centralizada y escalable mediante una entidad global llamada Payment.
- Porqué crear un sistema de capas para la pasarela de pago para su escalabilidad y mantenimiento.
- Usar una entidad genérica tipo producto o una especifica.
- Personalizar listados y detalles por producto.
Ventajas de desarrollar en Laravel Livewire y de tomar esta formación
- Es estupendo para crear aplicaciones cuando requieres comunicar frecuentemente el cliente con el servidor.
- Por tal motivo, es ideal para crear este tipo de aplicaciones como tiendas en líneas que tiene mucha interacción con el cliente y con esto al 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 una aplicación modular y escalable, lo cual te permitirá mejorar tus habilidades en el desarrollo de software.
Acepto recibir anuncios de interes sobre este Blog.
Con esta formación, podrás aprender a crear tu propia Web en Línea con Laravel Livewire y Pasarela de pagos mediante Stripe o PayPal, completamente escalable y personalizada.
- Andrés Cruz
Por aquí tienes el listado completo de clases que vamos a cubrir en el libro y curso:
Primeros pasos
-
1 Introducción
-
2 Sobre el creador
-
3 Sobre el curso
-
4 Crear un proyecto con Laravel Herd
Migraciones y Modelos principales
-
1 Introducción
-
2 Introducción
-
3 Categoría
-
4 Post
-
5 Book
-
6 Imágenes
-
7 Etiquetas
-
8 Payment
-
9 Ejecutar migraciones
-
10 Código Fuente
-
11 Trait para la gestión de las etiquetas
Creamos un trait para la gestión de las etiquetas.
-
12 Diseño para el listado de etiquetas
Mejoramos el diseño del bloque de asignación de etiquetas a la entidad.
-
13 Modelo Taggable
Te muestro el modelo de tipo etiquetable y los cambios realizados.
-
14 CRUD: Book
Mostramos el CRUD para los libros y los cambios
-
15 whereHas
Explicamos el uso de whereHas para consultas where con relaciones.
-
16 Preview de imágenes
Mostramos la implementación del preview para las imágenes.
-
17 Código fuente
Código fuente: https://www.desarrollolibre.net/public/books_courses/livewirestore/laravel-livewire-shopping-0.1.zip
CRUD para el blog
-
1 Introducción
-
2 Categoría: Crear/Actualizar, Estructura Inicial
Crearemos el componente de Livewire y su ruta.
-
3 Categoría: Crear/Actualizar, Validaciones
Crearemos las validaciones mediante una clase objeto.
-
4 Categoría: Crear/Actualizar, w-modals
Crearemos los campos de formulario.
-
5 Categoría: Crear
Crearemos el proceso para crear una categoría.
-
6 Categoría: Actualizar
Crearemos el proceso para actualizar una categoría.
-
7 Categoría: Listado
Crearemos el listado de las categorías
-
8 Categoría: Eliminar
Implementamos la operación de eliminar.
-
9 Categoría: Filtros
Vamos a crear un sistema de filtros para la tabla.
-
10 Categoría: Ordenación de columnas
Vamos a crear columnas ordenables.
-
11 Mi estrategia para las clases en el resto del curso
-
12 Algunas correcciones y cambios
Hablamos sobre algunas correcciones realizadas
-
13 Mensaje Flash
Configuramos el mensaje flash para las operaciones realizadas
-
14 Enlace en el sidebar
Definimos el enlace de navegaci n para el sidebar
-
15 Modularizar tabla
Modularizamos la tabla mediante un trait para la ordenaci n componente de th y CSS
-
16 CRUD: Tag
Vamos a crear el CRUD para las etiquetas.
-
17 CRUD: Post
Vamos a crear el CRUD para los posts.
-
18 Post: Upload
Vamos a implementar la carga de archivos para los posts.
-
19 Post: Verificaciones en el slug
Realizamos unas modificaciones para poder hacer unas verificaciones al slug cuando ya ha sido tomado.
-
20 Post: Ckeditor
Vamos a configurar CKEditor para definir el contenido enriquecido de nuestra app.
-
21 Post: Ckeditor y upload: Cliente
Vamos a configurar el JS del cliente para la carga de imágenes.
-
22 Post: Ckeditor y upload: Servidor
Vamos a completar el proceso de upload de imágenes de CKEditor en el servidor.
-
23 Post: Tag: Listado
Vamos a implementar el listado de etiquetas de los post.
-
24 Post: Tag: Asignar
Vamos a implementar la asignación de etiquetas al post.
-
25 Post: Tag: Listado de etiquetas del posts
Vamos a mostrar las etiquetas del posts.
-
26 Post: Tag: Remover
Vamos a implementar la opción de remover las etiquetas.
-
27 Post: Tag: Filtro
Vamos a crear un filtro de etiquetas para la asignación de etiquetas a post.
-
28 Demo, Post: Tag: Excluir del listado tags existentes
Vamos a excluir del listado, las etiquetas asignadas al post.
-
29 Código fuente
Código fuente: https://www.desarrollolibre.net/public/books_courses/livewirestore/laravel-livewire-shopping-0.2.zip
Blog Web
-
1 Introducción
-
2 Index
Mostramos la configuraci n para el listado
-
3 Detalle
Mostramos la configuración para el detalle.
-
4 Posts por categorías
Mostramos la configuración para mostrar los posts en base a la categoría.
-
5 Sitemap
Creamos el sitemap para el blog.
-
6 Estilos
Crearemos un estilo en común para el blog y el dashboard, como lo es Tailwind.css
-
7 Resto del CSS
Vamos a copiar el CSS para la carta.
-
8 Estilo botones
Vamos a crear un estilo para los botones.
-
9 Estilo para el blog: Primera parte
Aplicaremos algunos cambios de estilo en base a los cambios anteriores.
-
10 TailwindCCS Typography
Vamos a instalar un paquete para que configure tamaño y márgenes al texto.
-
11 Tipográfica
Vamos a buscar e instalar algunas tipografías para nuestra aplicación.
-
12 Cambiar tipográfica en la aplicación
Vamos a importar tipografía seleccionada anteriormente en nuestro proyecto.
-
13 Etiquetas Filtro
Mostramos las etiquetas del post en el detalle
-
14 Etiquetas Detalle
Mostramos las etiquetas del post en el detalle
-
15 Estilo para el blog: Segunda parte
Aplicaremos algunos cambios de estilo en base a los cambios anteriores.
-
16 Navbar: Bases
Implementamos el menú pc.
-
17 Navbar: Modo Responsivo
Implementamos el menú mobile.
-
18 Extra: Videos de Youtube
Veremos cómo podemos incrustar un video de YouTube responsivo.
-
19 Código fuente
Código fuente: https://www.desarrollolibre.net/public/books_courses/livewirestore/laravel-livewire-shopping-0.3.zip
Tienda Online: Libros
-
1 Introducción
-
2 Index
Mostramos la configuración para el listado.
-
3 Detalle
Mostramos la configuración para el detalle.
-
4 Index: Diseño
Mostramos el diseño para el listado.
-
5 Detalle: Diseño
Mostramos el diseño para la página de detalle.
-
6 Adaptar estilo del módulo para claro y oscuro
Vamos a hacer algunos cambios para adaptar la aplicación al modo claro oscuro.
-
7 PayPal, Stripe y las siguientes secciones
Voy a utilizar todo el material que explico como usar PayPal y Stripe en un proyecto en Laravel que vimos en el curso de Laravel Base.
-
8 Paypal: Presentación
Vamos a presentar el entorno de desarrollo de PayPal.
-
9 PayPal: Sitio web y configuraciones
Vamos a obtener las claves de acceso del sitio web.
-
10 PayPal: Implementar un sencillo sistema de pagos en el cliente, Configuración inicial
Vamos a implementar la página en el cliente para mostrar los botones de paypal.
-
11 PayPal: Implementar un sencillo sistema de pagos en el cliente, Crear Orden
Vamos a crear la orden en PayPal.
-
12 PayPal: Implementar un sencillo sistema de pagos en el servidor, Recibir orden
PayPal: Implementar un sencillo sistema de pagos en el servidor, Recibir orden
-
13 PayPal: Implementar un sencillo sistema de pagos en el servidor, Generar token
Vamos a generar el token de acceso para poder procesar la orden.
-
14 PayPal: Implementar un sencillo sistema de pagos en el servidor, Completar orden
Vamos a completar la orden en el servidor.
-
15 PayPal: Implementar un sencillo sistema de pagos en el servidor, Siguientes pasos
Vamos a hablar sobre los siguientes pasos que quedan pendiente, modo producción, ver las peticiones realizadas en paypal y el siguiente paso para procesar la orden.
-
16 PayPal Resumen de la Implementaci n
Veremos c mo qued la configuraci n en base a la implementaci n anterior
-
17 Adaptar PayPal: Parámetros importantes del pago
Vamos a identificar y crear propiedades para cada dato que nos interese registrar como el ir del pago, estado, traza, etc.
-
18 Adaptar PayPal: Establecer Parámetros del pago
Vamos a establecer los parámetros definidos anteriormente en base a la respuesta de PayPal.
-
19 Controlador base de pago
Vamos a crear el controlador de pago y convertir la clase de PayPal a un trait.
-
20 Controlador base de pago: Método para procesar el pago
Vamos a crear un método global para procesar los pagos de PayPal y Stripe.
-
21 BookController: Estructura base
Creamos la estructura base de la clase book para recibir el pago.
-
22 BookController: Generar el Payment
Vamos a crear un pago a un libro.
-
23 Definir BasePayment cómo abstract
Definimos la clase de pago como abstracta para que no puedas crear rutas. Clases Abstractas: https://www.youtube.com/watch?v=AGASNrTXE3w
-
24 Componente de pago para PayPal
Vamos a crear un componente de Laravel para incorporar el plugin de pago.
-
25 Configurar ruta de pago
Configuramos la ruta de pago.
-
26 Stripe y las siguientes clases
Hablamos de los siguientes videos para stripe.
-
27 Stripe y Laravel: Introducción a Stripe y Laravel Cashier
Vamos a dar una introducci n a todo el ecosistema de Stripe y Laravel
-
28 Instalar y configurar Laravel Cashier
Vamos a instalar y configurar Laravel Cashier
-
29 Instalar Vue Stripe
Vamos a instalar Vue Stripe
-
30 Crear Price Id y el Dashboard de Stripe
Vamos a crear el price ID en el dashboard de stripe
-
31 Vue Stripe Crear Componente
Vamos a crear el componente y adaptarlo a nuestras necesidades
-
32 Integraci n solo en el cliente riesgos y limitantes
Vamos a habilitar la integraci n con el cliente y hablar sobre las limitantes y riesgos
-
33 Explicar el c digo anterior
Vamos a explicar el c digo anterior
-
34 Par metros
Vamos a conocer el resto de los par metros que podemos utilizar
-
35 Par metro priceID incorrecto
Evaluemos la respuesta cuando colocamos un priceID invalido
-
36 Extra: Vue Stripe: Crear Componente desde cero
Vamos a crear el componente de Stripe desde cero
-
37 Laravel Cashier: Terminando las configuraciones
Vamos a terminar de configurar la instalaci n de cashier el modelo de usuario
-
38 Error de Curl en Laravel Stripe
Error al hacer las peticiones en Stripe
-
39 session ID Generar con Laravel Cashier
Vamos a crear el session orden de stripe
-
40 session ID Par metros
Vamos a configurar par metros para el m todo anterior
-
41 session ID Consumir desde la app en Vue
Vamos a consumir el sessionID desde el componente en Vue
-
42 session ID Remover par metros del componente StripeCheckout
Vamos a conocer que par metros podemos remover del componente de Vue una vez establecida el sessionID
-
43 session ID: sessionID en la URL de retorno
Vamos a conocer como retornar la URL de retorno
-
44 session ID: Crear componente de retorno
Vamos a crear un componente de ejemplo al momento de redireccionar
-
45 session ID: Obtener sessionID en el cliente
Vamos a obtener el sessionID obtenido de un pago exitoso
-
46 session ID: Obtener detalle del session en el servidor
Vamos a obtener el session orden en base al sessionId
-
47 session ID: Procesar
Vamos a procesar la orden desde el servidor
-
48 session ID: Enviar petición desde el cliente
Vamos a crear una petici n axios para enviar al cliente
-
49 Obtener el detalle del Payment Intent
Vamos a conocer sobre el payment intent que ser a una especie de factura asociado al session
-
50 Analizando un sessionID no completado
Vamos a realizar algunas pruebas para conocer m s en detalle el sessionId y el paymentIntent
-
51 Pagos rechazados
Veremos el estatus del intent al ser el pago rechazado
-
52 Resumen
Daremos un resumen hasta este momento de lo visto
-
53 Stripe Resumen de la Implementación
Veremos cómo queda la configuración en base a la implementación anterior.
-
54 Adaptar Stripe
Hablamos del código necesario para seguir la implementación
-
55 Stripe: Controlador para crear el session
Creamos el método controlador para crear la sesión.
-
56 Stripe: Controlador para crear el session
Creamos el método controlador para crear la sesión.
-
57 Stripe: Array de precios posible
Vamos a crear un array de los precios posibles que tiene el producto que vamos a vender.
-
58 Stripe: Crear botón de cobro
Creamos el botón de cobro de Stripe.
-
59 Cambios en la plantilla maestra
Vamos a agregar el enlace de la tienda y permitir usar la plantilla de web desde la herencia de plantillas.
-
60 Pantalla de éxito en el pago
Vamos a implementar la pantalla de pago exitoso.
-
61 Pantalla de error en el pago
Creamos la pantalla para mostrar un error en el pago.
-
62 Pantalla de cancelado en el pago
Creamos la pantalla para mostrar un pago cancelado.
-
63 Autenticación opcional
Vamos a realizar algunos cambios para permitir solo se puedan realizar pagos para usuarios autenticados.
-
64 Detalle del pago solo para el dueño
Vamos a configurar para que el pago se vea solamente para el usuario dueño del pago.
-
65 Verificar que la orden de pago ya no existe en la BD
Vamos a verificar si la ordenID no existe en la BD.
-
66 Manejar un mensaje de error y mostrar ventana de error
Vamos a configurar el mensaje para cuando existan errores en el pago, en este ejemplo, la orden existente.
-
67 Manejo de errores: Página de error y éxito
Vamos a mostrar las páginas de errores
-
68 PayPal y retorno de las respuestas
Retornamos respuestas JSON para peticiones axios al momento de procesar el pago.
-
69 Terminar la implementación con Stripe: Parte 1
Implementamos el flujo básico para adaptar a Stripe en nuestro módulo.
-
70 Terminar la implementación con Stripe: Parte 2
Vamos a terminar la implementación realizada en la clase anterior.
-
71 Módulo de usuario para ver los pagos realizados
Vamos a mostrar la implementación de un módulo para pagos realizados.
-
72 Extra: Pagando...
Definimos un loading al darle click al botón de PayPal.
-
73 Extra: Componente de componentes para la pasarela de pago
Creamos un componente padre para Laravel y Alpine.
-
74 Extra: Pagando... Adaptar Stripe
Vamos a implementar los cambios en la pasarela de pago de Stripe para poder mostrar el loading al momento de realizar el pago.
-
75 Resumen
-
76 Código fuente
Código fuente: https://www.desarrollolibre.net/public/books_courses/livewirestore/laravel-livewire-shopping-0.4.zip
Tienda: Producto
-
1 Introducción
-
2 Migración y modelo
Presentamos la migración y el modelo tipo producto.
-
3 Dashboard: CRUD
Presentamos el CRUD para el producto y el tipo.
-
4 Store: Listado y detalle
Vamos a mostrar la página de listado y detalle para la tienda del producto.
-
5 Store: Pasarelas
Vamos a mostrar la implementación de la pasarela de pago.
-
6 Store: Reutilizar stripeCreateSession para generar sessionID
Migramos la generación del session ID de Stripe.
-
7 Store: Filtros por tipo
Vamos a crear el filtro por tipo producto para el listado de la tienda.
-
8 Store: Modificar ruta detalle
Vamos a modificar la ruta de detalle para agregar el tipo.
-
9 Store: Filtros por tipo
Vamos a crear el filtro por tipo producto para el listado de la tienda.
-
10 Código fuente
Código fuente: https://www.desarrollolibre.net/public/books_courses/livewirestore/laravel-livewire-shopping-0.5.zip
Varios cambios
-
1 Introducción
Formación explicativa, de que va? https://youtu.be/T-G6QKjNGiM
-
2 Vistas con diseños diferentes: Listado
Vamos a personalizar el listado por tipo producto de manera opcional.
-
3 Vistas con diseños diferentes: Detalle
Vamos a personalizar el detalle por tipo producto de manera opcional.
-
4 Roles de usuario admin regular: Explicación y estructura
Vamos a explicar el sistema de roles de permisos que vamos a usar y generar la migración.
-
5 Roles de usuario admin regular: Middleware
Creamos el middleware y asociados para proteger el módulo dashboard por usuario autenticado.
-
6 Actualizar rol de usuario con tinker
Usamos tinker para actualizar el rol del usuario.
-
7 Modularizar rutas con funciones
Vamos a modularizar nuestras rutas mediante funciones.
-
8 Errores log pagos u otros
Vamos a definir un log para un posible error de PayPal y hablar sobre este esquema.
-
9 Pagos en dashboard: Listado
Vamos a crear el listado de pagos en el dashboard.
-
10 Pagos en dashboard: Traza
Vamos a mostrar la traza del pago en el listado mediante un modal.
-
11 Pagos en dashboard: Pagos manuales
Implementamos opción de pagos locales para crear y actualizar.
-
12 Pagos en dashboard: Pagos manuales, Paymable
Definimos el campo de paymable para los formularios de crear y editar.
-
13 Pagos en dashboard: Filtros
Implementamos un sistema de filtros para el listado.
-
14 Pagos en dashboard: Filtros, tipos al seleccionar producto
Al seleccionar que el tipo producto es un producto, definimos un filtro para los tipos.
-
15 Vista de perfil para el usuario
Creamos la pagina de perfil del usuario
-
16 Vista perfil para el curso: Traducción
Vamos a crear las configuraciones para permitir la app multi idioma.
-
17 Vista perfil para el curso: Cambiar lenguaje
Implementamos el componente de perfil la opción de cambiar el lenguaje.
-
18 Middleware para actualizar el idioma
Creamos in middleware para TODAS las rutas de web para actualizar el lenguaje.
-
19 Cupón: Migración y Modelo
Crearemos la migración y el modelo para los cupones.
-
20 Cupón: Dashboard
Creamos el proceso administrativo para los cupones.
-
21 Cupón: Generar
Vamos a generar el cupón de manera automatizada.
-
22 Cupón: Componente de Livewire para el pago
Te muestro un error sobre el ciclo de vida de Alpine por el cual, tengamos que adaptar el desarrollo posterior.
-
23 Layout para la tienda
Creamos un nuevo layout para la tienda.
-
24 Problemas con eventos de Livewire (Ej, wire:click) y ejecutar JavaScript
Hablamos sobre los eventos de Livewire y la inyección de JS.
-
25 Cupón: Definir evento en JavaScript
Vamos a crear el evento de JavaScript para cargar el plugin de PayPal.
-
26 Cupón: Ocultar botón de Stripe
Vamos a ocultar la pasarela de pago mediante CSS por defecto.
-
27 Cupón: Carga del script de PayPal mediante JS
Explicamos el porqué cargamos el JS de PayPal mediante JS para evitar el Detected container element removed from DOM.
-
28 Cupón: Mejor diseño: Botones de pago
Realizamos una mejora de diseño para los botones
-
29 Cupón: Repaso
Damos un repaso de TODO lo hecho hasta ahora para el sistema de cupones
-
30 Cupón: Repaso
Damos un repaso de TODO lo hecho hasta ahora para el sistema de cupones
-
31 Cupón: Validar
Instalamos una opción para cupón en el cliente y lo aplicamos.
-
32 Cupón: Configurar mensajes
Vamos a configurar el envío de mensajes.
-
33 Cupón: Establecer en los componentes
Vamos a pasar el cupón en cada uno de los componentes
-
34 Cupón: Validar y Procesar o Aplicar en la orden
Vamos a validar el cupón y aplicarlo como consumido.
-
35 Url para generar SessionId de Stripe
Vamos a cambiar la URL para generar el sessionID
-
36 Cupón: Mostrar cupón aplicado en el dashboard
Vamos a mostrar cuando se aplica o no un cupón en el listado.
-
37 Cupón: Buscar por cupón aplicado en el dashboard
Vamos a definir un enlace para ver el cupón consumido.
-
38 Pasarela de pago: Actualizar páginas y tienda del libro
Vamos a adaptar la pasarela de pago para el resto de las pantallas de detalle.
-
39 Aviso de producto comprado
Mostramos una alerta para indicar que el producto ya fue comprado.
-
40 Modo Oscuro
Permitimos cambiar entre el modo claro y oscuro.
-
41 Mejor diseño: Varios
Vamos a hacer algunos cambios sutiles para mejorar el diseño en la app.
-
42 view-transition: CSS para cambiar entre páginas
Vamos a crear una suave transiciones entre las páginas.
-
43 view-transition-name: transiciones entre imágenes
Vamos a conocer como podemos hacer transiciones entre las imágenes.
-
44 Código fuente
Código fuente https://www.desarrollolibre.net/public/books_courses/livewirestore/laravel-livewire-shopping-0.6.zip