Actualización semana 11-18Nov - Pruebas en Inertia, Introducción Alpine TodoApp, optimizar Querys +
Hola a todos bienvenidos a otra semana en la cual paso a comentar las actualizaciones de la semana del 11 de noviembre al 18 de noviembre para el canal de YouTube el blog y por supuesto los cursos cursos y libros.
Youtube
Comenzando como siempre con el canal de YouTube por aquí como primera clase tenemos es el método de has que acompaña también el método de where y has() que lo viamos la semana pasada que son métodos específicos para las pruebas unitarias o integración de cualquier tipo con la Laravel inertia que en este caso son para comparar los datos de los props que viene siendo la diferencia fundamental que tenemos con las pruebas en ar básico y esta es la única clase que subí de este tipo para esta semana.
Lo siguiente es la actualizaciónes la semana pasada claro está.
También aquí que forma parte del curso de Laravel Livewire en este caso es la introducción alpine ya que recordemos que al pin forma parte crucial de lo que es el Livewire entonces tenemos varias cositas aquí tenemos un ejemplo mínimo con el bloque de x-data que definir lo que es un componente el evento click y mostrar algún contenido aquí también tenemos comentando lo anterior Livewire y alpine js son los mejores aliados por lo comentado antes forma parte del scaffolding del Livewire y también aquí tenemos lo que es preparar un proyecto e instalación de la CDN que es para realizar pruebas es lo recomendado con alpine js.
Aquí también lo que es el evento de teclado en este caso ya esto es para Laravel Livewire mediante el wire click enter importantísimo para cuando precisamente queremos darle o escuchar el evento de teclado podamos enviar una petición como si fuera con axios pero en este caso es empleando los mensajes internos de Livewire directamente al servidor a un método de un componente.
Aquí también tenemos lo que es los hooks en javascript en este caso específico de Livewire es decir el javascript del lado del Livewire optimizar consultas esto es un video específico o exclusivo para lo que es el canal de YouTube en la cual bueno explico un poco lo que son la importancia de optimizar las consultas mediante el es decir cuando queremos tener una consulta relacional por ejemplo post y categorías traernos también las categorías traer solamente los campos que nosotros vamos a utilizar por ejemplo para los listados suponte que tenemos precisamente los post y las categorías y vamos a construir un listado no tiene sentido usualmente no es lo que queremos traernos también el contenido el contenido del post ya que simplemente quisiéramos lo que es el título y la descripción pero el contenido no haría falta entonces es importante hacer este tipo de optimizaciones sobre todo cuando estamos construyendo una API Rest.
Otro video específico para lo que es el canal de YouTube que son manejar las preferencias de usuario desde un campo json bueno suena un poco complicado o difícil de entender pero me refiero a esto yo en este caso para precisamente la aplicación de Academia quería mantener algunas configuraciones específicas para el usuario inicialmente fue el modo oscuro que es cambiarlo acá y lo lo quería guardar y lo guardé en una preferencia de usuario por lo tanto cada vez que recargo esta preferencia se queda guardada Bueno ahorita no estoy autenticado pero cuando me autentico luego se me ocurrió colocarle el autoplay la primera idea sería crear una columna para cada una de ellos pero obviamente esto es algo Bastante molesto porque las preferencias van a ir cambiando poco a poco entonces lo que yo hice fue crear unas un solo campo llamado preferencias o algo similar en las cuales mediante un Jason un objeto Jason un texto a la final iba guardando esas preferencias y es así de simple por lo tanto lo podía escalar tanto como yo quisiera entonces te muestro cómo hice las configuraciones tanto a nivel del servidor del árabe y también del cliente que en este caso es Vue.
Aquí tenemos un vídeo que tenía bastante antiguo por ahí aunque es actual pero no lo había publicado que manejar las preferencias en una aplicación de Flash para modo de desarrollo y esto sería todo lo que tiene que ver con lo que es los videos subidos al canal de YouTube.
- Método de has() para verificar existencia en Pruebas Unitarias/Integración - Laravel Inertia 5 - https://www.youtube.com/watch?v=FJPv-JkUMBQ
- Introducción a Alpine.js - Primer Componente - x-data, evento Click, x-show - 1 - https://www.youtube.com/watch?v=vOASMLvckfM
- Actualización la semana 04-11Nov - Pruebas en Inertia, Introducción Alpine, Eventos Livewire y + - https://www.youtube.com/watch?v=h5ziCVeWE4U
- Laravel Livewire - Hooks en JavaScript - https://www.youtube.com/watch?v=SsPLONfGOik
- Curso Laravel - Proceso CRUD para actualizar un Post 14 - https://www.youtube.com/watch?v=ZP8yv5vh4fo
- Curso Laravel - Obtimizar Consultas con Eloquent - https://www.youtube.com/watch?v=5JvzVduevBI
- Curso Laravel - Exponer y personalizar variables CSS de Oruga UI en Vue 20 - https://www.youtube.com/watch?v=N9RSZ8sHaik
- Manejar Preferencias de Usuario desde un campo JSON en Laravel - https://www.youtube.com/watch?v=_xJ8Ax7R9Pk
- Livewire y Alpine JS, los mejores aliados 2 - https://www.youtube.com/watch?v=kXBgpYZDYmE
- Preparar un proyecto e instalación de la CDN de Alpine JS - 3 - https://www.youtube.com/watch?v=rJ1foo4PIjA
- Manejar las configuraciones del proyecto desde un archivo aparte en Flask - https://www.youtube.com/watch?v=qR3VyV8kWvk
- Laravel Livewire: Evento enter de teclado wire:keydown.enter - https://www.youtube.com/watch?v=Vf-mlQs7RrI
Cursos
Pasamos aquí al contenido subido a nivel de los cursos que todavía me encuentro trabajando en lo que es el curso de Livewire y lo que es el curso de larabel inertia Entonces por aquí comenzando con lo que subí para el curso de Livewire que como te comentaba viene formando parte de Alpine, la aplicación de todolist ya finalmente la terminamos aquí un poco lo mismo ya habíamos creado la aplicación de todolist con al pin entonces aquí lo que hicimos fue adaptar la aplicación de todo a Livewire entonces creamos las migraciones los modelos creamos el componente delare luego el método para poder crearlos y bueno poco a poco todo.
Una introducción alpine que ya la esa sí la terminé entonces esos son los videos que voy exponiendo poco a poco en el canal de YouTube.
Para inertia como te comentaba estamos trabajando con las pruebas ya vimos la parte más crucial que era las características específicas de inertia los métodos de as cómo evaluar el componente y algunas cositas más y ahorita ya estamos pasando a evaluar directamente cada uno de los bueno componentes las funcionalidades los módulos como lo quieras llamar que implementamos a lo largo del curso y estamos ahorita en el paso por paso tal cual puedes ver verificamos el primer paso el segundo paso bueno el primer paso para el post el get son dos pasos eh para el de company el de get también el de post por aquí y también verificar lo que es el stat que era una de los bueno de los pasos mentales acá que era para determinar en qué paso nos encontramos si en el uno en el dos o en el tres el cupón de la semana y finalmente.
Introducción a Alpine JS
Configurar Bootstrap 5
Vamos a adaptar el estilo de B5 en la app.
Extra: Guardar de manera persistente
Vamos a guardar los datos de manera persistente.
Sortable: Ordenable
Vamos a instalar y configurar un plugin para hacer ordenable el listado.
Aplicación de To Do con Livewire y Alpine
Adaptar la app de Todo de Alpine en Livewire
Vamos a clonar el proyecto de Alpine en Livewire.
Crear migración y modelo
Vamos a crear el modelo y migración de los to do.
Crear to do desde Livewire
Vamos a crear un to do desde Livewire y la clase componente.
Crear migración y modelo
Vamos a crear el modelo y migración de los to do.
Crear to do desde Livewire
Vamos a crear un to do desde Livewire y la clase componente.
Popular listado de todos desde Livewire
Vamos a mostrar el listado de to do desde la base de datos en Alpine.
Reordenación: Actualizar arrays en el cliente y servidor
Vamos a presentar un esquema de ordenación el clásico de construir el array desde cero.
Reordenación: Actualizar en la base de datos con un evento
Vamos a guardar los to do en la base de datos.
Integración con Inertia - Pruebas
Dashboard: Pruebas para el Post, upload
Vamos a realizar una corrección en el módulo de dashboard sobre el upload.
Dashboard: Pruebas para el Post, aserciones adicionales
Vamos a implementar algunos métodos de aserciones adicionales.
Paso por Paso: Primer paso, Get
Vamos a crear las pruebas para el primer paso del formulario paso por paso, el get.
Paso por Paso: Primer paso, Post
Vamos a crear las pruebas para el primer paso del formulario paso por paso, el post.
Paso por Paso: Segundo paso, Company, Get
Vamos a crear las pruebas para el segundo paso del formulario paso por paso, el get.
Verificar step
Verificar la propiedad de step.
Implementar Facades para los pasos
Implementamos los facades de los pasos por pasos.
Paso por Paso: Segundo paso, Company, Post
Vamos a crear las pruebas para el segundo paso del formulario paso por paso, el post.
Blog
Ya pasamos a lo que son las actualizaciones a nivel del blog aquí este también lo que te comentaba antes eh manejar el evento key down enter en Livewire importantísimo otra vez para hacer peticiones al componente las configuraciones que te comentaba la instalación del pin los mejores aliados como te comentaba bueno esto es un poquito una copia de lo que que tenemos o lo que publiqué en el canal de YouTube optimizar las consultas en la base de datos aquí el ejemplo mínimo que te comentaba sobre el pin esto también es específico del canal de bueno el otro canal que estoy manejando aparte o paralelo al principal que es para aplicar rotaciones en una plataforma un video también muy personal que creo que no lo subí aquí Qué raro que es cuál Mac mini yo te recomendaría para desarrollo algunos tip que espero que te sirvan y a partir de aquí ya sería contenido de la otra semana Así que pues nada este fue todo el contenido que subí para la semana mencionada así que sin más que decir vamos a la nos vemos en otro vídeo,
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter