Actualización semana 20En-27En - CKEditor CRUD Form Laravel - Vue 3 + RestApi CodeIgniter 4
Youtube, JWT Sanctum y Vue, Suscripciones en Laravel Cashier y Stripe, Api Rest Vue y CodeIgniter 4- fetch Blog Libros/ Cursos Suscripciones en Laravel Cashier y Stripe, Api Rest Vue y CodeIgniter 4- fetch axios
Bienvenido a otra semana en la cual paso a hablar sobre las actualizaciones to el contenido que creé para la semana del 20 de enero al 27 de enero comenzando como siempre con lo que he subido para el canal de YouTube
YouTube
Aquí podemos dividirlo creo que son en cuatro bloques por una parte todavía voy subiendo lo que es el contenido para el Json Web Token que en este caso es mediante Vue sanctum y una RestAPI es decir sanctum para la parte de protección aquí puedes ver los videos en los cuales estoy trabajando con la parte de el logout se pudiera decir sería este y este que tenemos acá arriba
Lo siguiente es el contenido que estoy subiendo al curso moderno de larabel en este caso la parte de las suscripciones en Stripe es decir para poder aquí puedes ver que hacemos un poco de todo vemos varios métodos para cancelarla finalizarla algunas pruebas y por supuesto tratar los periodos de gracia que es cuando el usuario tiene una suscripción la cancela pero todavía no ha terminado de disfrutar esos días y por lo tanto todavía tiene ese periodo que lo llaman ellos como periodo de gGracia hasta que finalice la suscripción
Aquí también tenemos otra forma de trabajar fácilmente con la suscripción en Laravelque en este caso es mediante el objeto de checkout guest create que recordemos que es el que nosotros utilizamos para generar el sesión ID pero también Aquí lo podemos configurar para manejar una suscripción eso es lo bonito de todo esto que es el prácticamente el mismo código
Aquí también tengo uno para fastapi este no lo estás tomando en cuenta pero para la parte de datos de ejemplo ahí lo puedes ver
Aquí también tenemos para la parte de coiner que estoy retomando un poco el curso estoy también publicando algunas cosas y estamos finalmente haciendo la integración para consumir la RestApi codeigniter 4 mediante una aplicación en vue en este caso así que esto también te lo puedes tomar como una introducción a Vue 3 en caso de que quieras algo un poquito más moderno es decir algo más actual y no sepas cómo trabajar con Vue por un poco como es la temática del curso que para mí codiner 4 es un curso para iniciales porque es como quien dice estás entrando a la parte del desarrollo web en este caso con framework php entonces doy siempre todo un poco más como quien dice de base y voy haciendo introducciones muy puntuales cada vez que vamos trabajando con Vue 3 así que si quieres aprender Vue
También te recomiendo que veas estos videos y he subido varios en este caso es para explicar un poco la estructura de carpetas que tenemos para Vue una vez generado el proyecto mediante node por lo demás aquí hacemos el primer fetch como te digo vamos de a poco para CodeIgniter 4 entonces presentamos aquí un poquito lo que es el uso de los fetch que viene siendo la forma como quien dice de base o de manera nativa que tenemos para realizar peticiones http mediante la RestAPI javascript y vamos básicamente haciendo eso por lo demás aquí tienes el resto del contenido
Aquí también tengo un video promocional en este caso para el libro de Livewire 3 con la Laravel 11 que en este caso ya lo actualicé bueno vamos con el blog.
- Suscripciones en Stripe: Primeros pasos, Cancelar, Finalizada, pruebas, Períodos de Gracias... - https://www.youtube.com/watch?v=K8bxZIx2foM
- Logout: Destruir cookie/Token JWT del usuario - Vue Laravel - 07 - https://www.youtube.com/watch?v=sitzqPc2Lww
- Estructura del proyecto en Vue: Consumir API REST en CodeIgniter 4 - 03 - https://www.youtube.com/watch?v=ZlqlQOAsUJ4
- Libro: Primeros pasos con Laravel 11 Livewire 3; edición 2025 - https://www.youtube.com/watch?v=EXJ3Tjx4Zdw
- Suscripción fácil en Stripe en Laravel Cashier: Pago por el objeto Checkout::guest()-create() - https://www.youtube.com/watch?v=ylhudyO7KYc
- Logout: Destruir token JWT - Laravel + Sanctum + Rest Api + Vue - https://www.youtube.com/watch?v=XrVzNghtKkc
- Datos de Ejemplo del Request FastAPI - Datos de ejemplos desde el argumento, Body - https://www.youtube.com/watch?v=suhkcncnrng
- Carpeta de los módulos de node - Vue 3 + Rest Api + CodeIgniter 4 - 04 - https://www.youtube.com/watch?v=4n7CED7mFgk
- Nuestro primer fetch en Vue 3 con CodeIgniter 4 - 07 - https://www.youtube.com/watch?v=EXcZRhRJekA
- Un poco más sobre los componentes en Vue - 05 - https://www.youtube.com/watch?v=mezzs8F8E3k
Blog
Por aquí lo tengo lo que tenemos por acá es más o menos lo mismo que te hablaba sobre el canal de YouTube aquí la parte de suscripciones las carpetas de los módulos de node para Vue un proyecto en Vue dato de ejemplo en FastAPI seguimos aquí con las suscripciones mediante el objeto que te comentaba antes hay que explicar la estructura de carpetas que tenemos en Vue Seguimos aquí con las suscripciones a nivel de Stripe con á y todo lo demás y por aquí estamos creando un proyecto en Vue que como te indicaba antes vamos a consumir la apir de CodeIgniter 4 bueno esto es el otro canal que te indicaba que voy tratando un poquito más temas tipo Gamer Entonces por aquí voy hablando de las cosas que no me gustan de la realidad virtual en este caso con las metaquest Seguimos aquí con Vue y Vue y C4 los primeros pasos
Aquí también te hablo un poco de cómo modularize mi plataforma de pago en este caso para la venta de mis cursos y libros en stry Piper esto es con referente a que como son varias plataformas también son varios recursos entonces tenemos que modularizar todo lo más posible para que pueda ser fácilmente reutilizable y escalable es básicamente lo que estoy comentando por ahí entonces te voy dando pequeños tips sobre lo que yo hice emplear laar verer con conader 4 esto también ahorita que retomé el curso de C4 también hablo sobre cómo actualizar versiones antiguas es decir yo tenía un proyecto de cider 4 hace 3 años que no lo actualizado 2 3 años y obviamente ya han sacado varias versiones entonces actualizar una pequeña pesadilla porque ellos también van actualizando un poco mira que aquí en el config cambio una cosa aquí en el Filter cambio otra cosa entonces actualizar todo eso de manera manual en un proyecto antiguo es una pesadilla es mejor crearse uno nuevo copiar todo el contenido antiguo incluyendo el repositorio en git y simplemente ya terminas de atarlo todo de configurarlo y trabajas con un proyecto completamente nuevo en vez de estar haciendo esos cambios de manera manual
Un video también hay un poquito de humor se pudiera decir unas recomendaciones locas que me hace la ia de YouTube y por aquí también unos problemas que tenía con el Mac mini aquí creo que se coló también contenido de la semana pasada pero bueno no sé qué pasó con las fechas Así que esto es todo con respecto al blog
Cursos y Libros
En cuanto a las actualizaciones a nivel de los de los cursos y también a futuro de los libros un poco también lo comentado es decir estoy aquí trabajando en el curso de con C4
Así que aquí tenemos básicamente todos los videos completos sin no solamente los expuestos en el canal de YouTube tal cual puedes ver en este caso estamos es otra vez con comenzando desde cero creando una aplicación en vi3 viendo los primeros pasos para ver cómo demonios funciona Vue 3 haciendo las primeras peticiones haciendo el primer axios en reemplazo de los fetch y por aquí creando nuestro primer componente que como siempre va a ser el de listado presentamos aquí la estructura base y a partir de aquí aprovechamos es por eso que te digo que est esta estos primeros videos que
Estoy publicando tanto en el curso como en canal de YouTube ya que est esto lo voy a ir publicando poco a poco también algunos al menos en el canal de YouTube te sirven para aprender a trabajar con Vue aquí y el ciclo de vida en este caso específico a la función de cre aunque también Hablamos sobre un poco sobre el diagrama es decir el resto de los métodos del ciclo de vida que tenemos ahí con View y presentamos aquí una de las joyas de las coronas cuando trabajamos con Vue el before un poco como trabaja y también aquí aprovechamos para aprender otra forma de trabajar con las promesas que es con el axios y los fetch y una demo sobre cómo funciona la reactividad en vi es decir cuando se cambia una variable veamos cambo reflejado en toda la aplicación se poda decir o en todo el componente aquí como te dije ya terminé la parte del á de casher con Vue y stripe entonces aquí también coloqué lo que es los últimos videos y ya a partir de aquí tengo que colocar aquí el sec editor estamos trabajando es con sec editor para integrarlo aquí en nuestra aplicación esto fue el último que grabé ahorita que pudimos integrar el plugin de sec editor para que cuando hagamos aquí un cambio entonces estamos aquí un sen aquí se actualizó fíjate aquí Sí vengo aquí coloco unos tres recargo aquí tenemos el cambio Entonces estamos integrando lo que es sec editor como parte del formulario no es tan directo Entonces eso es lo que estamos haciendo aquí entonces comenzamos como siempre yendo a la página en este caso para generar el build para que nos genere toda la estructura y a partir de ahí lo instalamos en nuestro proyecto y a partir de ahí lo estamos estableciendo un poco con lo que son las publicaciones y finalmente es esta parte finalmente también explico un poquito qué fue el código generado
CodeIgniter 4
CORS en CodeIgniter 4, la forma fácil
Vamos a configurar los CORS en C4 de una manera sencilla.
Pruebas con los fetch
Vamos a realizar algunas pruebas con los fetch.
Axios en reemplazo de los fetch
Vamos a instalar y configurar axios.
Nuestro primer axios
Vamos a crear nuestra primera petición axios.
CORS en CodeIgniter 4, la forma fácil, definir URL de desarrollo
Vamos a conocer como podemos configurar una URL en los cors.
Componente de listado: Estructura base
Vamos a crear la estructura
Componente de listado: Ciclo de vida, Created
Vamos a popular el listado de películas desde el método de Created que forma parte del ciclo de vida de una app en vue.
Componente de listado: v-for y async await
Vamos a conocer cómo emplear los v-for, y conocer también el uso del async y await.
Demo: Reactividad de Vue y uso de funciones
Vamos a conocer un poco más sobre la radiactividad de vue y crear el bloque de funciones.
Laravel Cashier, Vue y Stripe - CKEditor
Stripe: Pago suscripción por el objeto Checkout::guest()->create()
Vamos a hacer una demostración haciendo una suscripción desde el objeto Checkout.
Stripe: Manejo de claves
Vamos a modularizar el acceso a la clave pública desde la app de Laravel.
CKEditor - WYSIWYG, Primeros pasos
Hablamos sobre los formateadores de texto.
CKEditor, Primeros pasos
CKEditor el mejor editor WYSIWYG.
CKEditor, Generar build
Generar el build de salida
CKEditor, Instalar NPM y Configurar el build
Vamos a instalar la CKEditor en el proyecto en Laravel.
CKEditor, Crear UI en el proyecto
Vamos a emplear CKEditor en el proyecto.
CKEditor, Integrar CKEditor en el CRUD de los Posts
Vamos a embeber el CKEditor como parte del formulario para que ahora el contenido del post sea enriquecido/html.
CkEditor, explicar el código generado en el build
Vamos a hablar un poco sobre el archivo generado.
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter