Actualización de la semana 23-30 Sep - Filtros Livewire, Vue, Dark Mode, SEO Laravel CRUD y +
Hola a todos Bienvenidos a otra semana en la cual vamos a ver cuál es el contenido que cargué para la semana del 23 al 30 Mejor dicho del 23 al 30.
Youtube
Entonces como siempre comenzando con lo que son los videos subidos al canal de YouTube aquí es un video muy interesante de el uso de los componentes del Livewire Recuerda que el Livewire tiene o la mayor característica de Livewire es el uso de los componentes que son vitaminizado si los comparamos con lo que tenemos en Laravel básico.
Aquí te voy explicando un poco de cómo puedes utilizar los componentes que ya tenemos ahí definidos.
Aquí saqué un video un poco promocional que es presentando lo que es la actualización del libro del Laravel para lo que sería la edición 2024 que ya lo terminé hace algunas semanas y bueno me falta ver a sacar un poco el video.
Aquí otro video comentando un poco de Udemy los cupones que bueno una plataforma que cada vez menos entiendo tenemos cuatro tipos de cupones dos que son asociados a completamente gratis una plataforma que por más que sea veo que siempre está luchando intentar tener más ingresos simplemente sofocando a lo que es el es decir pagándole cada vez menos al instructor Recuerda que el instructor es el que se lleva la comisión no curiosamente no son ellos pero bueno siempre están colocando muchos cupones a lo que se refiere colocarlos prácticamente gratis por lo demás es un precio regular y el precio mínimo entonces bueno es el esquema que tienen una plataforma muy cerrada como siempre te he comentado Pero bueno es lo que hay.
Aquí sería la presentación de lo que es de los componentes en Inertia, un video básico o inicial aquí un video también definido directamente o creado directamente para lo que es el canal de YouTube que me han preguntado mucho que es el Dark Mode en Laravel Pero obviamente es una característica de Tailwind ahí te menciono las dos formas una es de manera Global en el archivo de configuración de Tailwind y la otra es de manera opcional definiendo una clase llamada dark y con esto ya tú lo controlas mediante javascript o lo que tú quieras emplear para definir cuando tienes el modo oscuro o no Y también cómo definir el estilo específico para el modo oscuro ya que es algo que nosotros tenemos que implementar.
Una demostración entiéndese un video introductorio para los posts para en este caso Laravel Livewire actualización de la semana pasada.
Esto ya es un video de lo que forma los videos que Estoy publicando poco a poco sobre el curso antiguo del Laravel 10 en este caso del Laravel santum para crear una web de tipo spa recordemos que tenemos dos tipos de autentificación de tipo spa y de tipo web tokens Entonces esta comienza con la primera otro video que forma parte del curso de Laravel básico.
El nuevo que es un paquete para crear meta etiquetas para el Seo.
Aquí otra vez del curso básico de Laravel que es el uso de los seeders-
Otro video sobre las pruebas unitarias Recuerda que grabé demasiado contenido para las pruebas entonces.
Aquí voy publicando otro que es el php unit pest y es la presentación de ambos una pequeña comparación Y a partir de aquí.
- Curso Laravel Livewire - Empleando los componentes en nuestros propios desarrollos - https://www.youtube.com/watch?
v=_fG5e082YxA - Libro: Primeros pasos con Laravel 11; edición 2024 - https://www.youtube.com/watch?
v=aoOmPHne2D4 - Cupones GRATIS, precio mínimo y regular en Udemy - https://www.youtube.com/watch?
v=kS3b7tH9MrQ - Curso Laravel Inertia - Presentación y qué es Inertia, Jetstream y + - https://www.youtube.com/watch?
v=5I4VIp8_u84 - Habilitar el Dark Mode o modo oscuro en Tailwind + Laravel y Vue - 2 FORMAS - https://www.youtube.com/watch?
v=lZv77wuP0rg - Demo: Curso/Libro Laravel 11 Livewire - CRUD para los POSTs #7 - https://www.youtube.com/watch?
v=XScaPu1kPO4 - Actualización de la semana 16-23 Julio - Paso por paso form, libros Upload Laravel Inertia Livewire+ - https://www.youtube.com/watch?
v=eRvQlwGoN2A - Curso Laravel - Autenticar una web SPA con Sanctum 2 - https://www.youtube.com/watch?
v=CpRzkQM3NBo - Curso Laravel - SEO, algunos paquetes para generar meta etiquetas - https://www.youtube.com/watch?
v=rIXTBuNxgPY - Curso Laravel - Crear un seeder para los posts 3 - https://www.youtube.com/watch?
v=-RF3BZMUAvs - Curso Laravel - Pruenas Unitarias y de Integración con PHPUnit y Pest, Presentación - https://www.youtube.com/watch?
v=7rjFkXXG9vM
Cursos
Tenemos las actualizaciones a nivel de los cursos en ambos casos tanto en inertia como en Livewire por aquí creamos lo que es el filtro sería esto que tenemos acá es lo mismo pero en la implementación en cada una de las tecnologías correspondientes y vemos cómo lo creamos y con esto tenemos una especie de jquery DataTable obviamente bueno volvemos acá y es un poco lo comentado vamos creando Campos por Campos primero comenzamos con los de tipo selección luego Rango de fecha y el de search Que obviamente tiene comportamientos distintos porque son Campos distintos y en ambos casos vamos siguiendo esa organización en ambos casos también y para ambos proyectos o ambos cursos también comenzo con la parte de la ordenación ya precisamente ahorita aquí termina de la ordenación con Tailwind que sería la de las columnas que tenemos acá tal cual puedes ver es básicamente eso y vuelvo acá Bueno aquí es el filtro de la otra la ordenación y poco más y el cupón que en este caso saqué para la semana de em en caso de que te interese ya.
Integración con Inertia - Filtro
Implementar funcionalidad del filtro
Vamos a terminar de implementar del filtro
Filtrar por rango de fecha
Vamos a crear los selects en el componente de Vue para los elementos del formulario para el filtro.
Valores aplicados en los filtros desde el componente en Vue
Vamos a colocar los valores de los props en el componente de Vue.
Campo de búsqueda: HTML
Vamos a crear un filtro por fechas.
Aplicar filtros sin usar un botón
Vamos a enviar los datos sin usar un botón.
debounce, retardo en los eventos
Vamos a realizar un retardo al momento de escribir en el campo de tipo búsqueda.
Extra: Filtros con cláusulas condicionales, when
Vamos a aplicar los filtros definidos antes empleando los whens, que es la manera predefinida en Laravel.
Integración con Inertia - Ordenación
Ordenación: Presentación
Vamos a hablar sobre el desarrollo a implementar.
Ordenación: Controlador
Vamos a crear la estructura necesaria para la ordenación desde el controlador.
Ordenación: HTML y pruebas
Vamos a crear la estructura para la ordenación de las columnas del listado.
Integración con Livewire - Filtro
Introducción
Filtrar por rango de fecha
Vamos a crear un filtro por fechas.
Query String: Parámetros en la URL
Vamos a implementar el queryString de los filtros y campo de búsqueda.
Filtrar por rango de fecha
Vamos a crear un filtro por fechas.
Query String: Parámetros en la URL
Vamos a implementar el queryString de los filtros y campo de búsqueda.
Extra: new Post
Vamos a ver una demostración de empleando new Post en vez de una consulta con el where
Extra: cláusulas condicionales con el when
Vamos a reemplazar el filtro actual con el uso de los when.
Integración con Livewire - Ordenación
- Presentación
Blog
Con esto vamos a lo que sería el blog más o menos lo mismo parte del contenido que he subido por acá en este caso es para la un componente de paginación personalizada recordemos que el inertia no tenemos un componente de paginación Entonces lo tenemos que crear nosotros por alguna razón no lo consideraron interesante implementarlo para poder utilizarlo entonces creamos uno nosotros este Sería para el proceso de crear y editar publicaciones en liveware entonces Esto básicamente es copiado del curso en la cual tenemos una sección para crear CRUD para los posts primero comenzamos con el de la categoría luego lo hacemos rapidito para los posts
Un poquito aquí lo reflejado el Dark Mode en Tailwind como te comentaba un video.
También un poco promocional de la aplicación de desarrollo libre en la cual estoy como quien dice una recopilación de todo los videos que he sacado sobre la aplicación de desarrollo libre.
Aquí para implementar múltiples filtros este video también creo que lo había publicado la semana pasada y ahorita publiqué la publicación en la cual te comento un poco Cuál es mi experiencia puede parecer una característica sencilla pero realmente se hace un poquito compleja cuando tenemos múltiples filtros y sobre todo cuando tienen también características distintas.
Por aquí seguimos un poco con el nuevo canal de YouTube que creé que es en base al desarrollo de videojuegos como te he comentado si te interesa te puedes suscribir en la cual estamos creando aquí lo que es un pad o una plataforma que se cae de manera automática cuando detecta una colisión con el jugador sería eso básicamente por lo demás ese sería todo el contenido que saqué para las bueno para la semana mencionada y sin más que decir nos vemos la semana próxima
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter