Update week 02-9Jun - CKEditor Outline - AI Generate content - Stripe Payment Gateway

▶

Welcome to another week! I'm going to comment on the updates that occurred between June 2nd and June 9th, which is the current date. As always, I'm starting with what I posted on my YouTube channel and also on my blog. On the blog, by the way, I'm also posting other posts that you can check out at desarrollolibre.net/blog.

Youtube/Blog

I've already finished publishing all the individual videos about the REST API in CodeIgniter 4 and how to use it in a Vue application. This will be the final detail in that series.

From now on, I'm going to change the format of the videos on the channel a bit. The idea is to publish a longer video that summarizes all the information, rather than breaking it down step by step. I'm doing this to make it more manageable and better organized. Therefore, I'll publish fewer videos per week, but each one will be more in-depth.

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

An interesting video explains how I created the component that allows you to navigate the document outline in CKEditor. Although I still need to improve some details—for example, adding scrolling—I explain how I implemented it from scratch. This feature is usually paid for through a plugin, but since I'm a bit of a slob, I decided to develop it myself.

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

Personal Opinion on Migrations
In another more personal video, I discuss my position on the use of migrations. I like to have the entire table structure in a single migration. I'm not a fan of having multiple migrations that add or modify columns, as this creates disorganization when you want to review a table's structure.

In my case, I usually make the changes manually, generate the SQL, and replicate it to the appropriate environments. I know it breaks conventions a bit, but since I work alone, it works for me:

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

Using the @class Directive in Blade
Another interesting video is about using the @class directive in Blade, which allows you to apply conditional classes in a clean and organized manner. This significantly improves code maintenance compared to the traditional method of concatenating classes with conditionals:

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

Blog SEO Optimization
I've also resumed the series on how I improved my blog's SEO. I explain how I managed to increase my Google PageSpeed ​​score from 33 to 99/100, across all posts, thanks to a proprietary application that allows me to perform these types of optimizations globally:

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

Displaying Conditional Fields with Livewire
I uploaded a video on how to show or hide fields in forms using Livewire, something I was asked for directly from the Livewire course. This is the first part, and I'm already planning a second one:

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

Reflection on the Responsible Use of AI
I also posted a video responding to a comment from someone who suggested that everything I post is generated simply by asking ChatGPT. In response, I explain what I consider to be a good use of artificial intelligence.

For me, AI is just another tool—much like IDEs were in their day—that helps us be more efficient and faster. But if you don't know what to ask for or how to interpret the results, you'll end up generating garbage. It doesn't replace knowledge or experience:

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

Analysis and Critique of Duolingo
In another video, I discuss the Duolingo app, particularly its free version. I'm uploading a series of four videos (three are already available), in which I discuss how, curiously, the app itself sabotages itself by displaying so many ads that it interrupts the learning flow. It's a critique mixed with reflections on product development and user experience:

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

Course/Book Progress: Implementing a Payment Gateway with Stripe

As for the course, this week I've been working intensively on the payment gateway. It's not very visual yet, as we're in the stage of creating screens for canceled payments, errors, etc., but everything is progressing well.

We've already configured the entire integration with Stripe, starting by creating a trait that acts as the first layer of the system. This trait handles basic operations with Stripe. On top of that, we have a layer that acts as an intermediary between several gateways (Stripe, PayPal), and then a third layer that contains the business logic: assigning products, marking them as purchased, etc.

I consider this modular and scalable design essential, because a poorly designed gateway is very difficult to maintain. If you only use an AI to "generate a payment gateway" for you, you'll most likely end up with a generic, unstructured block of code that's difficult to adapt and scale.

In contrast, I'm implementing a solution that:

• 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

Here, for example, are some of the screens that are already ready: error screen, store, payment buttons with PayPal integration, properly configured routes, etc. Everything is set up so that even if the user reloads or navigates back, the system won't crash.

This type of implementation isn't something AI can do alone. It's the result of applying knowledge accumulated over more than 10 years of developing real-world applications.

Store: Books

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

14. PayPal y retorno de las respuestas

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

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

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