Mayo 2022: Alpine, Livewire y Django

Hola a todos! por aqui paso a decir las buenas nuevas! este mes está dedicado a Alpine.js asociado al curso de Livewire y que tambien se va a migrar al curso de Django; ademas, ya esta disponible un libro corto sobre Alpine.js.

CONTENIDO DEL MES

Youtube:

1. Lista de reproducción curso de Laravel Livewire
2. Componente para crear, peticiones post con axios  - Oruga UI Vue 3 #Laravel 9 |11
3. Validaciones y errores de formulario - Oruga UI Vue 3 #Laravel 9 | 12
4. Instalar y configurar Laravel Breeze en un proyecto en Laravel 9: Tailwind.css y Alpine.js
5. Lista de reproducción curso de Laravel 
6. Formulario para crear y editar CRUD- Oruga UI Vue 3 #Laravel 9 | 13
7. Libro: Primeros pasos con Laravel 9 con Livewire; conoce como funciona este potente scaffolding
8. Eliminar Post desde listado CRUD - Oruga UI Vue 3 #Laravel 9 | 14
9. Configurar Tailwind CSS en un proyecto con Oruga UI, Vue 3  y #Laravel 9 | 15

 Blog:

1. Iconografía Material Design en Vue 3 con oruga UI
2. Componente de Paginación en Oruga UI Vue 3 y Laravel
3. Todo sobre el widget Scaffold en Flutter
4. Componente formulario para crear y editar empleando Vue 3 con Oruga UI
5. Definir filtros o campos de búsqueda en CodeIgniter 4
6. Configurar Tailwind CSS en un proyecto con Oruga UI, Vue 3 y Laravel 9
7. En Vue.js, ¿cómo usar múltiples router-views, en un componente?
8. Primeros pasos con Alpine.js, tu nuevo y ligero framework JavaScript
9. Creando nuestra primera figura geométrica en Three.js un cubo

Mis cursos:

Para el curso de Django

Vistas basadas en clases (CBV): Web de libros, introducción

Vistas basadas en clases (CBV): Web de libros, introducción

1. Crear proyecto y aplicación
   1. Vamos a comenzar un nuevo proyecto y con esto la estructura base.
2. Crear modelo inicial
   1. Vamos a crear el modelo inicial para la aplicación
3. Crear formulario inicial
   1. Vamos a crear el formulario inicial para la aplicación.
4. Crear las primeras CBV para manejar el formulario y de éxito
   1. Vamos a presentar algunas clases basadas en vistas, la de formulario y genérica.
5. UpdateView: Actualizar
   1. Vamos a conocer la VBC para actualizar.
6. CreateView: Crear
   1. Vamos a conocer la VBC para crear.
7. DeleteView: Borrar
   1. Vamos a conocer la VBC para borrar.
8. DetailView: Detalle
   1. Vamos a conocer la VBC para el detalle.
9. IndexView: Listado
   1. Vamos a conocer la VBC para el listado.

Vistas basadas en clases (CBV): Autenticación

1. LoginView: Vista para el login
   1. Vamos a presentar la VBC para el login.
2. LogoutView: Vista para el logout
   1. Vamos a presentar la VBC para cerrar sesión.
3. PasswordChangeView: Vista para cambiar la contraseña
   1. Vamos a presentar la VBC para cambiar la contraseña.
4. PasswordChangeRest: Vista para cambiar restablecer la contraseña
   1. Vamos a presentar la VBC para restablecer la contraseña.

Manejo de archivos CSVs y PDFs

1. Crear un proyecto
   1. Vamos a crear un nuevo proyecto y aplicación y registrar el mismo a nivel del proyecto.
2. Crear un CSV
   1. Vamos a crear un CSV.
3. Leer un archivo
   1. Vamos a leer un CSV mediante Python.
4. Leer un archivo diccionario
   1. Vamos a leer un CSV mediante Python en modo diccionario.
5. Escribir un archivo
   1. Vamos a crear un CSV mediante Python.
6. Escribir un archivo diccionario
   1. Vamos a crear un CSV mediante Python en modo diccionario.
7. Palabra reservada with
   1. Vamos a conocer una variante al momento de trabajar con los archivos, que es indicando el contexto.

Aplicación de TO DO con Django y Alpine

1. Crear espacio virtual, proyecto y aplicación inicial
   1. Vamos a preparar el proyecto y esqueleto inicial.
2. Migrar la aplicación de to do list a Django
   1. Vamos a crear su vista y template para la app de Alpine.
3. Crear modelo y migración para los to do
   1. Vamos a crear el modelo y migración de los to do.
4. Crear una Rest Api para los to do
   1. Vamos a crear una Rest Api en DRF.
5. Instalar axios
   1. Vamos a instalar el paquete de axios para el envío de peticiones.
6. Popular listado de todos desde la Rest Api
   1. Vamos a mostrar el listado de to do desde la base de datos en Alpine.
7. Crear to do desde Django
   1. Vamos a crear un to do desde Django y su api.
8. Editar un todo
   1. Vamos a actualizar un to do.
9. Eliminar un to do
   1. Vamos a eliminar un to do en la base de datos.
10. Marcar completado un to do
    1. Vamos a marcar como completado un to do.
11. Reordenación en base a IDs: Rest Api
    1. Vamos a presentar un esquema de ordenación en base a un array de IDs en el servidor.
12. Sobre la reordenación
    1. Vamos a hablar de algunos posibles esquemas de ordenación.
13. Reordenación en base a IDs: Cliente
    1. Vamos a presentar un esquema de ordenación en base a un array de IDs en el cliente.
14. Mostrar todos ordenados
    1. Vamos a mostrar los todos ordenados al momento de ingresar a la página.
15. Eliminar todos los to do
    1. Vamos a eliminar todos los to do.
16. Proteger con autenticación requerida y realizar adaptaciones
    1. Vamos a definir la rest api como protegida con login.

Curso de Laravel Livewire

Alpine JS: Introducción

1. Atributos: x-bind
   1. Vamos a presentar el bind de atributos.
2. Atributos: múltiples valores
   1. Vamos a trabajar con múltiples valores para los atributos.
3. Atributos: style
   1. Vamos a trabajar con el atributo de estilos.
4. Ciclos y condicionales: x-for y x-if
   1. Vamos a conocer el uso del for y condicional.
5. Bloque de script
   1. Vamos a organizar el código anterior en un bloque de script.
6. Aplicación de todo: Búsqueda
   1. Vamos a crear una aplicación tipo TODO, primero, el campo de búsqueda.
7. Aplicación de todo: Crear Todos
   1. Vamos a crear todos.
8. Marcar todo completada
   1. Vamos a realizar la opción marcar una tarea como completada.
9. Eliminar todo
   1. Vamos a realizar la opción de eliminar un todo.
10. Borrar todos los todos
    1. Vamos a realizar la opción de borrar todos los todos.
11. Modificar un todo
    1. Vamos a realizar la opción de modificar un todo.
12. Configurar Bootstrap 5
    1. Vamos a adaptar el estilo de B5 en la app.
13. Extra: Guardar de manera persistente
    1. Vamos a guardar los datos de manera persistente..

Alpine y plugins externos: Sortable

1. Sortable: Ordenable
   1. Vamos a instalar y configurar un plugin para hacer ordenable el listado.
   2. http://sortablejs.github.io/Sortable/

Aplicación de TODO con Livewire y Alpine

1. Adaptar la app de Todo de Alpine en Livewire
   1. Vamos a clonar el proyecto de Alpine en Livewire.
2. Crear migración y modelo
   1. Vamos a crear el modelo  y migración de los to do
3. Crear to do desde Livewire
   1. Vamos a crear un to do desde Livewire y la clase componente.
4. Popular listado de todos desde Livewire
   1. Vamos a mostrar el listado de to do desde la base de datos en Alpine.
5. Reordenación: Actualizar arrays en el cliente y servidor
   1. Vamos a presentar un esquema de ordenación el clásico de construir el array desde cero.
6. Reordenación: Actualizar en la base de datos con un evento
   1. Vamos a guardar los to do en la base de datos.
7. Reordenación: Segundo esquema, splice
   1. Vamos a presentar un esquema de ordenación, el de quitar y colocar el todo.Bug en Livewire y Alpine parte 1
8. Reordenación: Tercer esquema, solo IDs
   1. Vamos a presentar un esquema de ordenación.
   2.  
9. Bug en Livewire y Alpine parte 2
   1. Seguiremos hablando del bug
10. Eliminar un to do
    1. Vamos a eliminar un to do en la base de datos.
11. Borrar todos los todos
    1. Vamos a realizar la opción de borrar todos los todos.
12. Modificar un todo
    1. Vamos a realizar la opción de modificar un todo.
13. Configurar Bootstrap 5
    1. Vamos a adaptar el estilo de B5 en la app.
14. Extra: Guardar de manera persistente
    1. Vamos a guardar los datos de manera persistente.

Aplicación de TO DO con Livewire y Alpine

1. Adaptar la app de Todo de Alpine en Livewire
   1. Vamos a clonar el proyecto de Alpine en Livewire.
2. Crear migración y modelo
   1. Vamos a crear el modelo  y migración de los to do.
3. Crear to do desde Livewire
   1. Vamos a crear un to do desde Livewire y la clase componente.
4. Popular listado de todos desde Livewire
   1. Vamos a mostrar el listado de to do desde la base de datos en Alpine.
5. Reordenación: Actualizar arrays en el cliente y servidor
   1. Vamos a presentar un esquema de ordenación el clásico de construir el array desde cero.
6. Reordenación: Actualizar en la base de datos con un evento
   1. Vamos a guardar los to do en la base de datos.
7. Reordenación: Segundo esquema, splice
   1. Vamos a presentar un esquema de ordenación, el de quitar y colocar el todo.
8. Bug en Livewire y Alpine parte 1
   1. Hablaremos sobre un bug actualmente.
9. Reordenación: Tercer esquema, solo IDs
   1. Vamos a presentar un esquema de ordenación.
10. Bug en Livewire y Alpine parte 2
    1. Seguiremos hablando del bug.
11. Eliminar un to do
    1. Vamos a eliminar un to do en la base de datos.
12. Editar un todo
    1. Vamos a actualizar un to do.
13. Marcar completado un to do
    1. Vamos a marcar como completado un to do.
14. Eliminar todos los to do
    1. Vamos a eliminar todos los to do.
15. Extra: Reordenación de los to do por axios
    1. Vamos a realizar la reordenación mediante una petición en axios.

Alpine JS: Otras características

1. x-ignore, ignorar un bloque de HTML
   1. Veremos cómo ignorar un bloque de HTML.
2. x-teleport, transportar un template
   1. Veremos cómo copiar el contenido de un componente en otra parte del DOM.
3. x-effect, observar cambios en variables
   1. Veremos cómo detectar cambios en variables.
4. $watch, observar propiedades
   1. Veremos cómo crear un observable.
5. x-html, renderizar variables con HTML
   1. Veremos cómo imprimir contenido HTML.
6. $id, crea IDs dinámicos y organizados
   1. Veremos cómo generar IDs dinámicos.
7. $el, referencia al elemento
   1. Veremos cómo referenciar un elemento como si fuera un selector.
8. $store, almacenar datos de manera global 
   1. Veremos cómo almacenar datos en el store.
9. $nextTick, Script luego de aplicar cambios en el DOM
   1. Veremos cómo verificar si los cambios fueron realizados por Alpine en el DOM.