Hola a todos! por aqui paso a decir las buenas nuevas! este mes está dedicado a CodeIgniter, Laravel Inertia y Electron; en el cual, ya empecé a realizar algunas actualizaciones en el curso de CodeIgniter, en el manejo de las rutas, integracion con PayPal y actualizacion de algunos videos sobre las rutas en CodeIgniter

Ya disponible el curso sobre Laravel Inertia que seguirá los mismos lineamientos que el de Laravel Livewire.

 

CONTENIDO DEL MES

Youtube:

1. Rutas en CodeIgniter 4: Argumentos 2
2. PRIMERAS PRUEBAS, Crear un registro en Cloud Firestore con #Flutter Web 2022 2
3. App To Do List Web, AppBar o barra de navegación | 2
4. App To Do List en #Flutter Drop Down Button | 3
5. App To Do List #Flutter Web -  CircleAvatar | 4
6. Rutas en CodeIgniter 4: Comando para ver las rutas: spark routes
7. App To Do List #Flutter Web -  Dialogo | 5
8. Crear un sencillo listado animado en Flutter
9. App To Do List #Flutter Web -  Modal y Formulario | 6
10. App To Do List, Estilo para el Formulario del Modal en Flutter | 7
11. Componente de Layout Naive UI Vue 3 #Django | 12
12. App To Do List, Constraint Layout en Flutter para definir un ancho y alto máximo o mínimo | 8
13. Terminando de maqueter un Navbar y pruebas con los Flex de Tailwind.css, 5 claves a tener en cuenta
14. App To Do List, Obtener el tamaño de un widget BoxConstraints | 9
15. App To Do List, en Flutter Flex | 10
16. App To Do List, en Flutter Calendario para selección simple o por rango | 11
17. App To Do List, en Flutter Modelo de TO DO | 12
18. App To Do List #Flutter - Listado con ListView.builder | 13
19. App To Do List, #Flutter Crear un ListView animable | 14
20. App To Do List, #Flutter Listado Vacio TO DO | 15
21. App To Do List, #Flutter Listado con imagen TO DO | 16
22. App To Do List, #Flutter Habilitar o deshabilitar imagen en listado TO DO | 17
23. App To Do List, #Flutter Animar Listado TO DO | 18
24. Primera app con Electron.js: Introducción
25. Primera app con Electron.js: Crear un Proyecto
26. Instalar Tailwind CSS en Laravel 9 con Vite
27. Primera app con Electron.js: Estructura base de la aplicación 2
28. App To Do List, #Flutter ElevatedButton y FloatActionButton para crear | 19
29. Primera app con Electron.js: Pruebas con CSS 3
30. Primera app con Electron.js: Pruebas con el HTML y CSS 4
31. Primera app con Electron.js: Incluir Bootstrap 5
32. Clase Game en Flame #Flutter juegos en 2D

 Blog:

1. Integrar CKEditor en Laravel Inertia
2. Generar un eje cartesiano en Three.js - Axes
3. Curso primeros pasos con Laravel Inertia + Vue.js y Tailwind.css
4. Configurar Laravel Sanctum para la autenticación SPA y por API Tokens
5. Filtros sobre un listado o tabla en Laravel Livewire
6. Diálogos de confirmación en Laravel Inertia con Oruga UI
7. Crear token de autenticación en Laravel Sanctum para una Rest Api
8. Actualización del instalador de Laravel
9. Enum con extensiones en Flutter
10. Crear token de autenticación en Laravel Sanctum para una Rest Api
11. LogOut, destruir la sesión en Laravel Sanctum junto con Vue
12. Crear un proyecto en Electron.js
13. Activar la consola de desarrolladores en Chrome (Debug) de una ventana en Electron.js
14. Menús multiplataformas en Electron js
15. Primera app con Electron, creando una ventana
16. Habilitar la integración con Node en Electron.js
17. SQFlite para manejar una base de datos con SQLite en Flutter
18. Comunicación entre procesos en Electron.js
19. Demo: instalar CodeIgniter 4 manualmente sin composer

Mis libros:

Nuevos capítulos Libro Inertia:
--Capítulo 13: En este capítulo vamos a crear el módulo de blog de vista al usuario final, un listado y página de detalle.
--Capítulo 14: En este capítulo vamos a crear un carrito de compras, que incluye el típico CRUD y pantallas.

Nuevos capítulos en el libro de CodeIgniter:

--Capítulo 16:  Este capítulo conoceremos cómo integrar la plataforma de PayPal en CodeIgniter, para poder procesar pagos directamente desde la aplicación.

 

Mis cursos:

Nuevo curso en Laravel Inertia

Actualizado el curso de Laravel para indicar el soporte con Vue y Vite

Integrar PayPal en CodeIgniter

1. Sobre la integración
2. Crear aplicación en CodeIgniter y estructura base
   1. Vamos a crear un nuevo proyecto y funciones para trabajar en el proyecto.
3. Sitio de desarrolladores de PayPal
   1. Vamos a conocer las páginas que vamos a usar para trabajar con API de PayPal.
   2. https://developer.paypal.com/developer/applications
   3. https://developer.paypal.com/api/rest/
4. CURL Request
   1. Vamos a conocer el mecanismo a utilizar para realizar peticiones HTTP.
5. Botón de PayPal JS
   1. Vamos a crear el botón para crear la orden por PayPal.
   2. https://developer.paypal.com/sdk/js/reference/
6. Generar el token de acceso
   1. Vamos a generar el token de acceso para poder procesar la orden.
7. Demo: Procesar la orden, CURL CodeIgniter
   1. Vamos a procesar la orden mediante CURL de CodeIgniter.
8. Procesar la orden, CURL PHP
   1. Vamos a procesar la orden mediante CURL de PHP.
9. Detalles finales
   1. Vamos a componer la ruta y realizar una petición fetch con la orden.Hola a todos! por aqui paso a decir las buenas nuevas! este mes está dedicado a CodeIgniter, Laravel Inertia y Electron; en el cual, ya empecé a realizar algunas actualizaciones en el curso de CodeIgniter, en el manejo de las rutas, integracion con PayPal y actualizacion de algunos videos sobre las rutas en CodeIgniter

Curso de Laravel

 

Vue 3: Consumir Rest Api protegida por Sanctum por tokens y sesión

1. Login: Crear ventana
   1. Vamos a crear el esquema inicial para la ventana de login.
2. Login: Enviar petición y obtener token
   1. Vamos a enviar la petición y obtener el token de acceso.
3. Manejar token de acceso
   1. Vamos a realizar algunos cambios para poder manejar el token de acceso desde Vue.
4. Consumir el token
   1. Vamos a guardar el token de acceso de manera global en la página global de Vue mediante variables.
5. Redirecciones
   1. Vamos a implementar algunas redirecciones al realizar el login.
6. Enviar token en las peticiones
   1. Vamos a conocer como podemos enviar el token mediante peticiones los recursos protegidos.
7. LogOut: Destruir sesión
   1. Implementaremos la opción de logout.
8. Manejo de los datos de usuario (token) mediante una cookie
   1. Vamos a conocer como podemos registrar los datos de usuario mediante una cookie.
9. Logout: Destruir la cookie del usuario
   1. Vamos a eliminar la cookie  del usuario.
10. Verificar token de usuario, conceptos claves
    1. Vamos a explicar como funciona la verificación del token del usuario.
11. Verificar token de usuario, implementación final
    1. Vamos a terminar la implementación anterior.
12. Logout: Destruir token
    1. Vamos a eliminar el token del usuario.
13. Unificar Token y sesión
    1. Vamos a integrar el token de auth y el manejo de la sesión en uno solo en el componente de Auth.
14. Proteger rutas por autenticación requerida
    1. Vamos a crear un esquema para verificar la ruta antes de ingresar y con esto, verificar que el usuario esté autenticado.
15. Detalles finales
    1. Vamos a terminar de configurar el resto de los componentes enviando el token de autenticación, solucionar el problema de logout y mostrar datos de usuario.
16. Demo: Logout parcial
    1. Vamos a hablar sobre eliminar los datos de usuario de manera parcial al hacer el logout.

Vue 3: Detalles visuales

1. Ventana de login
   1. Trabajaremos en la ventana de login, una carga centrada.
2. NavBar
   1. Crearemos la estructura del header.
3. NavBar: Enlaces de navegación
   1. Crearemos el diseño de los enlaces de navegación.
4. NavBar: Logo
   1. Crearemos un logo para el navbar.
5. Container
   1. Vamos a definir el container para la app.
6. NavBar: Avatar
   1. Vamos a crear el avatar en el header.
7. Pruebas con los Flex y NavBar: Detalles finales
   1. Vamos a aplicar detalles finales para alinear el contenido.
8. Carta para los componentes CRUD
   1. Vamos a aplicar el CSS de carta a los componentes de listado y guardar.
9. Bloquear botón de login al momento del submit
   1. Vamos a bloquear el botón al hacer el login.

Curso de Electron

• Varios videos para generar la aplicación de salida, asi como actualizar a la ultima version de Electron y tecnologias relacioadas.
• Actualizacion de la aplicacion inicial de Vue 2 a Vue 3:

Primera app con Vue: Integrar Vue 3 con Electron.js

1. Instalar Vue Cli y crear proyecto
   1. Vamos instalar Vue Cli para poder crear un proyecto en Vue.
2. Explicación del proyecto de Vue Cli y más recursos
   1. Vamos a explicar como funciona un proyecto creado por Vue Cli y donde puedes obtener más recursos.
3. Instalar el plugin de router mediante Vue
   1. Vamos a instalar el plugin de router mediante la Vue Cli.
4. Integrar Electron.js en el proyecto Vue
   1. Vamos a integrar electron a nuestro proyecto de Vue.
5. Generar app Vue en modo de producción
   1. Generamos el build de la aplicación en producción y realizaremos algunas pruebas.

Aplicación de tareas con Vue 3

1. List.vue: Listado
   1. Vamos a crear una simple lista de elementos empleando Vue.
2. List.vue: Crear tarea
   1. Vamos a crear una simple tarea.
3. List.vue: Eliminar tarea
   1. Vamos a crear el proceso para eliminar tareas desde el listado.
4. List.vue: Editar tarea
   1. Vamos a crear el proceso para editar tareas desde el formulario.
5. Emplear módulos de Electron.js desde Vue
   1. Vamos a hablar de la integración de Electron con Vue.
6. List.vue: Listado con datos desde el proceso principal
   1. Mandaremos datos desde el proceso principal para que sean consumidos desde la app en Vue.
7. List.vue: Crear
   1. Vamos a realizar la operación de crear un ítem en el proceso principal.
8. List.vue: Editar
   1. Vamos a realizar la operación de editar un ítem en el proceso principal.
9. List.vue: Eliminar
   1. Vamos a realizar la operación de eliminar un ítem en el proceso principal.
10. Electron DB
    1. Vamos a conocer el paquete de Electron DB para simular una base de datos mediante un archivo JSON.
11. Electron DB: Configuraciones iniciales
    1. Vamos a realizar las configuraciones iniciales para trabajar con Electron DB.
12. Electron DB: Obtenerlos todos
    1. Vamos a realizar las operaciones para obtener todos los items.
13. Electron DB: Crear
    1. Vamos a crear un ítem desde Electron DB.
14. Electron DB: Actualizar
    1. Vamos a realizar la operación de actualizar.
15. Electron DB: Eliminar
    1. Vamos a realizar la operación de eliminar.

Aplicación de tareas con Vue 3, Rest Api

1. Instalar express y axios
   1. Vamos a instalar el paquete para crear y consumir la Rest Api.
2. Rest Api: Obtener todos los registros
   1. Vamos a crear el recurso rest para obtener el listado de todos los registros.
3. List.vue, Rest Api y axios: Listado
   1. Mandaremos datos desde el proceso principal para que sean consumidos desde la app en Vue.
4. Configurar los cors
   1. Vamos a configurar los cors para poder consumir la rest api.
5. List.vue, Rest Api y axios: Crear
   1. Vamos a realizar la operación de crear un ítem en la rest api y consumirla desde la aplicación en Vue.
6. List.vue, Rest Api y axios: Editar
   1. Vamos a realizar la operación de editar un ítem en la rest api y consumirla desde la aplicación en Vue.
   2. Vamos a realizar la operación de editar un ítem en el proceso principal.
7. List.vue, Rest Api y axios: Eliminar
   1. Vamos a realizar la operación de eliminar un ítem en la rest api y consumirla desde la aplicación en Vue.
8. List.vue, Rest Api y axios: Recargar listado
   1. Vamos a recargar todo el listado de la aplicación cada vez que realicemos una operación de crear, actualizar o eliminar.

Aplicación de tareas con Vue 3, Rest Api y MySQL

1. Configurar MySQL
   1. Vamos a configurar MySQL en el proyecto con la rest api.
2. Rest Api y MySQL: Listado
   1. Vamos a realizar la operación de obtener el listado de ítems en la rest api y la base de datos MySQL.
3. Rest Api y MySQL: Crear
   1. Vamos a realizar la operación de crear un ítem en la rest api y la base de datos MySQL.
4. Rest Api y MySQL: Editar
   1. Vamos a realizar la operación de editar un ítem en la rest api y la base de datos MySQL.
5. Rest Api y MySQL: Eliminar
   1. Vamos a realizar la operación de eliminar un ítem en la rest api y la base de datos MySQL.
6. Configurar CORS para consumir desde un solo dominio
   1. Configuraremos los CORS en la aplicación de Electron para protegerlo mediante el origen.