Actualización semana 02-9Jun - CKEditor Outtline - IA Generar contenido - Pasarela de Pagos Stripe

¡Bienvenidos a otra semana! Paso a comentar las actualizaciones ocurridas entre el 2 y el 9 de junio, que es la fecha actual. Como siempre, comienzo con lo que subí en el canal de YouTube y también en el blog. En el blog, por cierto, también voy subiendo otras publicaciones que puedes revisar en desarrollolibre.net/blog.

Youtube/Blog

Ya terminé de publicar todos los videos individuales sobre la Rest Api en CodeIgniter 4 y cómo consumirla mediante una aplicación en Vue. Este sería el último detalle de esa serie.

A partir de aquí, voy a cambiar un poco el formato de los videos en el canal. La idea es publicar un video más extenso que reúna toda la información, en lugar de dividirlo tanto paso a paso. Esto lo hago para que sea más consumible y mejor organizado. Por ende, publicaré menos videos a la semana, pero cada uno con mayor profundidad.

Acomodar diseño en SaveComponent con Tailwind CSS #CodeIgniter 4 - 45 - https://youtu.be/GZd4-87yJWI

Un video interesante es donde explico cómo creé el componente que permite navegar por el esquema del documento en CKEditor. Aunque aún tengo que mejorarle algunos detalles —por ejemplo, agregarle scroll—, explico cómo lo implementé desde cero. Esta funcionalidad suele ser de pago a través de un plugin, pero como soy algo pichirre, decidí desarrollarlo yo mismo.

CKEditor Document Outline/Esquema de documento GRATIS - https://youtu.be/aNY-fnzsloQ

Opinión personal sobre las migraciones
En otro video más personal, comento mi postura respecto al uso de migraciones. A mí me gusta tener toda la estructura de una tabla en una sola migración. No soy partidario de tener múltiples migraciones que agregan o modifican columnas, ya que eso genera desorganización cuando quieres revisar la estructura de una tabla.

En mi caso, suelo hacer los cambios de forma manual, genero el SQL y lo replico en los entornos que corresponda. Sé que rompe un poco las convenciones, pero como trabajo solo, me funciona:

El día a día de ser un Dev solitario: porque NO uso las migraciones para agregar columnas #Laravel - https://youtu.be/GElE29z1Wjs

Uso de la directiva @class en Blade
Otro video interesante es sobre el uso de la directiva @class en Blade, que permite aplicar clases condicionales de forma ordenada y limpia. Esto mejora bastante el mantenimiento del código frente a la forma tradicional de concatenar clases con condicionales:

Laravel blade cada vez se parece mas a Vue... directiva @class y otras - https://youtu.be/ATLTbgGOQPs

Optimización del SEO en el blog
También retomé la serie sobre cómo mejoré el SEO de mi blog. Explico cómo logré pasar el puntaje de Google PageSpeed de 33 a 99/100, de forma general para todas las publicaciones, gracias a que tengo una aplicación propietaria que me permite hacer ese tipo de optimizaciones a nivel global:

De 0 a 100 en Google Speed Test en tu proyecto Web - https://youtu.be/Tofwp4Z1f6Q

Mostrar campos condicionales con Livewire
Subí un video sobre cómo mostrar u ocultar campos en formularios usando Livewire, algo que me pidieron directamente desde el curso de Livewire. Esta es la primera parte, y ya tengo pendiente una segunda:

Mostrar campos de formulario en Laravel Livewire condicionalmente - https://youtu.be/vKo3jUHd3S8

Reflexión sobre el uso responsable de la IA
Publico también un video respondiendo a un comentario de una persona que sugirió que todo lo que publico lo genero simplemente pidiéndoselo a ChatGPT. En respuesta, explico lo que considero un buen uso de la inteligencia artificial.

Para mí, la IA es una herramienta más —como lo fueron los IDEs en su momento—, que nos ayuda a ser más eficientes y rápidos. Pero si no sabes qué pedir o cómo interpretar los resultados, terminarás generando basura. No reemplaza el conocimiento ni la experiencia:

Me acusan de emplear mal la IA y generar mi libro con IA - https://youtu.be/T_kacBkExPw

Análisis y crítica a Duolingo
En otro video, comento sobre la aplicación Duolingo, particularmente en su versión gratuita. Estoy subiendo una serie de 4 videos (ya hay 3 disponibles), en los que hablo de cómo, curiosamente, la misma app se autosabotea al mostrar tanta publicidad que interrumpe el flujo de aprendizaje. Es una crítica mezclada con reflexiones sobre desarrollo de producto y experiencia de usuario:

El plan gratis de Duolingo es cada día mas difícil de usar - https://youtu.be/dQCabOMOdh0

Avances en el curso/Libro: implementación de pasarela de pago con Stripe

En cuanto al curso, esta semana estuve trabajando intensamente en la pasarela de pago. No es algo muy visual aún, ya que estamos en la etapa de crear pantallas de pago cancelado, errores, etc., pero todo avanza bien.

Ya configuramos toda la integración con Stripe, comenzando por crear un trait que actúa como la primera capa del sistema. Este trait se encarga de las operaciones básicas con Stripe. Encima de eso, tenemos una capa que actúa como intermediaria entre varias pasarelas (Stripe, PayPal), y luego una tercera capa que contiene la lógica de negocio: asignar productos, marcarlos como comprados, etc.

Este diseño modular y escalable lo considero fundamental, porque una pasarela mal hecha es muy difícil de mantener. Si solo usas una IA para que te "genere una pasarela de pago", lo más probable es que obtengas un bloque de código genérico, sin estructura, difícil de adaptar y escalar.

Por el contrario, yo estoy implementando una solución que:

• Es completamente modular
• Permite escalar fácilmente a nuevos productos o pasarelas
• Se adapta a errores sin romper el flujo
• Es mantenible a largo plazo

Aquí tienes, por ejemplo, algunas de las pantallas que ya están listas: pantalla de error, tienda, botones de pago con integración a PayPal, rutas correctamente configuradas, etc. Todo está preparado para que, incluso si el usuario recarga o navega hacia atrás, el sistema no se rompa.

Este tipo de implementación no es algo que la IA pueda hacer sola. Es el resultado de aplicar conocimientos acumulados durante más de 10 años desarrollando aplicaciones reales.

Tienda: Libros

1. Stripe: Trait

   1. Convertimos el controlador de Stripe a trait.

2. Stripe: Controlador para crear el session

   1. Creamos el método controlador para crear la sesión.

3. Stripe: Array de precios posible

   1. Vamos a crear un array de los precios posibles que tiene el producto que vamos a vender.

4. Stripe: Crear botón de cobro

   1. Creamos el botón de cobro de Stripe.

5. Cambios en la plantilla maestra

   1. Vamos a agregar el enlace de la tienda y permitir usar la plantilla de web desde la herencia de plantillas.

6. Pantalla de éxito en el pago

   1. Vamos a implementar la pantalla de pago exitoso.

7. Pantalla de error en el pago

   1. Creamos la pantalla para mostrar un error en el pago.

8. Pantalla de cancelado en el pago

   1. Creamos la pantalla para mostrar un pago cancelado.

9. Autenticación opcional

   1. Vamos a realizar algunos cambios para permitir solo se puedan realizar pagos para usuarios autenticados.

10. Detalle del pago solo para el dueño

    1. Vamos a configurar para que el pago se vea solamente para el usuario dueño del pago.

11. Verificar que la orden de pago ya no existe en la BD

    1. Vamos a verificar si la ordenID no existe en la BD.

12. Manejar un mensaje de error y mostrar ventana de error

    1. Vamos a configurar el mensaje para cuando existan errores en el pago, en este ejemplo, la orden existente.

13. Manejo de errores: Página de error y éxito

    1. Vamos a mostrar las páginas de errores

15. PayPal y retorno de las respuestas

    1. Retornamos respuestas JSON para peticiones axios al momento de procesar el pago.

16. Terminar la implementación con Stripe: Parte 1

    1. Implementamos el flujo básico para adaptar a Stripe en nuestro módulo.