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.

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy