Actualización la semana 14-21Oct - Carrito de Compras Livewire Inertia instanceOf, whereBetween y +sss

Bienvenidos a otra semana en la cual paso a hablar sobre las actualizaciones que publiqué de la semana del 21 de octubre hasta la del 28 de octubre.

Youtube

Comenzando por aquí con las actualizaciones hacia el canal de YouTube.

Por aquí voy a comenzar recuerda que yo voy publicando poco a poco varios videos o al menos voy a ver si publico poco a poco la totalidad del curso el curso original del Laravel de manera gratuita por lo que es el canal de YouTube voy publicando poco a poco algunos videos entonces voy a comenzar
 con los con este pack de videos que Recuerda que por aquí estamos consumiendo a la fecha lo que es la RestAPI que creamos anteriormente con una aplicación en vio no es empleando inertia sino es creando una aplicación en vi directamente mediante el proyecto del arabel mediante node según la integración que tenemos ahí estamos en la parte del crud el crud para los posts, entonces por aquí estamos creando el boceto para que podamos crear un componente de guardado para los post por aquí más abajo tenemos la parte del listado de selección y también configuramos lo que es Vue router eso sería creo que lo principal.

Por acá aquí también lo estamos configurando aquí sería para la parte de los parámetros el que tengo aquí abajo y esta sería la configuración inicial entonces bueno las actualizaciones la semana pasada 

Aquí también tengo lo que es el proceso de crear y editar un crud para los posts Laravel Livewire, un video que combina ambas operaciones y ahí puedes agarrar varios trucos 

Por aquí otro video de opinión en la cual te comento qué es mejor si emplear Laravel inertia o directamente emplear Laravel más una RestAPI más Vue React o sea lo que sea que tú quieras emplearlo para consumirlo es un video otra vez de opinión en este caso precisamente asociado a lo que es la aplicación de desarrollo libre la de Academia Mejor dicho en la cual se encuentra disponible tanto en web como en formato móvil en este caso una aplicación en Flutter entonces a partir de ese ejemplo puedo sacar algunos criterios y te voy comentando que pudiera ser mejor para un proyecto similar o que cumpla estas tipo de características a las cuales vamos a querer exponer o extender la aplicación en múltiples plataformas empleando otras tecnologías y es precisamente para esto que se crea una rapi las relaciones polimórficas de tipo muchos a muchos en caso de que alguien no conozca las las relaciones polimórficas o quiera tener ahí un refrescamiento le recomiendo este video un video promocional de la aplicación de la que te acabo de comentar la de Academia para Flutter.

Por aquí también el Bottom sheet cómo puedes emplear el Bottom sheet empleando Flutter algunos tips que tienes que tener en cuenta sobre todo para la parte el manejo de estados en Flutter.

También este que no se me ha olvidado que también es un video para mí siempre muy importante recuerda que yo voy trabajando o tengo un tiempo trabajando con Udemy es mi plataforma principal aunque tengo una relación un poco de amor y odio con la misma porque hay muchas cosas que realmente no me gustan como funciona y uno no entiende por qué funcionan así Y a partir de ciertas cosas que uno va interactuando con ellos uno se puede enterar de Por qué funciona tan mal y es precisamente lo que comento por aquí que udemy no recibe retroalimentación a qué me refiero con esto a qué cosas tan obvias que bueno pueden parecer obvias para nosotros y que ellos deberían de tener presentes parece que lo pasan por alto por cualquiera que sea la razón en este caso doy el ejemplo de que cada vez que yo Voy subiendo un bendito curso que son cursos de desarrollo de software yo siempre empleo aquí lo puedes ver y es por eso que habrí aquí la web academia siempre empleo lo que son los logos de las tecnologías con las cuales voy a trabajar sobre todo aquí para la parte del ábel o tecnologías web que siempre se emplean muchas cosas ya por ejemplo para flurer bueno simplemente flurer y ya pero por ejemplo para lo que es los cursos del árabe sobre todo que se emplea que se emplea el ambiente de Node obviamente php Siempre voy metiendo un poquito de Livewire de inertia de Tailwind también algo de Bootstrapsi es necesario ese montón de cosas por ahí también Vue entonces colocando lo que son los logos de las tecnologías Aquí también recuerda que al ser tecnologías de desarrollo siempre los logos a veces no ayudan mucho por ejemplo el de dango simplemente es una un texto que dice Django con una tipografía y creo que es un poco común todo esto ya que se hace un poco difícil crear un logo de una tecnología que funciona para crear que es empleada para crear simplemente aplicaciones al menos a mi juicio y es por eso que siempre se ven directamente a colocar muchas veces el nombre de la tecnología con una tipografía un poco bueno personalizada y a tomar por el saco poco más que decir entonces volviendo un poco a lo que te comentaba por aquí de que Udemy no hace retroalimentación siempre me están poniendo peros con esto que ellos dicen que la imagen tiene texto y ellos mismos colocan ahí la alerta la única forma que se permita el texto es que sean alusivos a la tecnología entiéndase los logos de la tecnología cosa que siempre pasa entonces me parece increíble que todavía cada vez que yo publico un curso me estén colocando pelos de que mira esta por ejemplo esta imagen bueno fue con esta la Livewire este fue el último que subí que que dicen que tiene texto y claro que tiene texto tiene el texto de php que es el logo de php El de node que es el logo de node el de js también entre comillas viene siendo el logo de js y el texto de Livewire que lo coloqué por acá entonces Todavía te van poniendo pegas con esto lo mismo me pasó con el inertia que está un poco más arriba y a lo que me refiero que ya son tecnologías tan comunes como son php node o npm o directamente js que me parece increíble que todavía ellos no hayan tomado yo no soy el único que subo las imágenes así tú revisas en la plataforma de udem buscas por node o lo que sea muchas de ellas van a tener el logo de la tecnología por lo mencionado antes y me parece increíble que todavía a esta altura de la vida no hayan tomado ese reclamos que le hace las personas justamente o como quien dice la defensa que tú aleg para que te publiquen tu curso diciendo que está bien que estos son logos no son textos que yo coloqué a capricho sino son los logos de las tecnologías Me parece increíble que todavía ellos no hayan tomado esa crítica para mejorar el proceso y con esto publicar de una vez el curso sin importarle estos textos que otra vez son permitidos porque forman parte del logo o los logos de las tecnologías con las cuales están trabajando que a la final para que se entienda yo precisamente le dije eso y al la final aceptan es decir sin hacer ningún cambio y puedes ver las imágenes de los cursos em y vas a ver que son exactamente las mismas.

 

• Curso Laravel Livewire - Proceso de Crear y Editar (CRUD) para los posts - https://www.youtube.com/watch?v=lhF6t-rMnJ4
• Udemy NO hacer Retroalimentación - Te voy a dar razones por las cuales Udemy no hace Retroalimentación al momento de publicar los cursos.
• Curso Laravel  - Save.vue: Crear boceto para componente de guardado - https://www.youtube.com/watch?v=vub4ytg95pk
• Actualización la semana 14-21Oct - Carrito de Compras Livewire Inertia instanceOf, whereBetween y + - https://youtu.be/R9jcey9IeXE
• Curso Laravel  - Instalar y configurar Vue Router 8 - https://www.youtube.com/watch?v=cv_pUBwZXuU
• Crear un listado estático de Widgets en un Wrap/Row en base a un listado de objetos en Flutter - https://www.youtube.com/watch?v=EfLQ3O5t2rY
• Curso Laravel  - Parámetros opcionales en las ruta de Vue en Laravel para Vue Router 9 - https://www.youtube.com/watch?v=4YuFdAfh8jU
• Emplear Laravel Inertia o crear una app en Laravel + Rest Api + Vue/React - https://www.youtube.com/watch?v=dN1qeOd1aSs
• Curso Laravel - Cargar y popular un SELECT de categorías en Vue 10 - https://youtu.be/5rAPelWDW5Q
• Curso Laravel  - Relaciones polimórficas de tipo muchos a muchos entre post y etiquetas - https://www.youtube.com/watch?v=8EVNKaEbCVQ
• DesarrolloLibre, App Android, Tutoriales Online y Blog - V5,  Compras y Descargas de Libros y + - https://www.youtube.com/watch?v=7wQIUj4SYFc
• Bottom sheet, showModalBottomSheet, StatefulBuilder y Manejo de estado en Flutter - https://www.youtube.com/watch?v=0152kpeOml4

Cursos

Ya con esto terminamos las actualizaciones en en el canal de YouTube voy a pasar aquí para lo que sería las actualizaciones de los cursos que voy trabajando en el de inertia y en el de liveware El de inertia va un poco más adelantado por aquí ya terminé lo que es la aplicación de todo aquí me faltó colocar la introducción la cual lo más interesante no es tanto crear recuit sino crear pocos crear mini proyectos en este caso sería asociado al a la aplicación de todolist y con esto ir aprendiendo un poquito las mañas de la tecnología quiénes puede serir para certa operación etcétera por ejemplo aquí potenciamos lo que es inertia con un plugin específico para View para la parte de reordenación y también aprendimos un poco Cómo podemos como quien dice trastear con View para obtener datos adicionales en este caso un listado o un array con los ids de los todos que nosotros vamos a querer ordenar para luego poder aplicar la ordenación también aquí otro punto importante o interesante es la parte de edición de un todo que fue lo que hicimos que le pegamos un click habilita un input luego le editamos el input o editamos el todo damos un enter y ya lo tenemos editado un proceso interesante que también lo podemos hacer fácilmente con Vue y este también me parece muy interesante quitando un poco lo que es el crud como te digo que es algunos problemas que existen para la sincronización de las operaciones es decir que por ejemplo cuando nosotros creamos eliminamos actualizamos no por la forma en la cual implementamos los cambios no aparecen reflejados y es un poco como funciona inertia de manera interna es un poco lo comentado aquí algunas posibles variantes o adaptaciones que pudieras hacer el código mencionado aquí también tenemos lo que es el carrito de compras con lar es lo que bueno tenemos por aquí aquí tenemos el botón de voy aquí lo podemos agregar ya sale aquí lo que sería el tooltip aquí podemos editar las cantidades aquí también en alguna parte tenemos el listado Bueno aquí no he iniciado sesión del carrito de compras entonces vamos haciendo esas operaciones y aquí también lo podemos modificar y se preserva ya el valor.

Así que no la implemento en este curso eso ya lo veo o lo vemos en el curso básico de Laravel ya que sería lo mismo ya eso sería código en el servidor y realmente aquí poco más que decir ya te mostré lo que estamos haciendo ya también estoy a punto de terminarla bueno el cupón de la semana.

 

Integración con Inertia - To Do

1. Editar un todo

   1. Vamos a actualizar un to do.

2. Editar un todo: Mostrar errores

   1. Vamos a aplicar validaciones y mostrar errores al momento de actualizar un to to.

3. Eliminar un to do

   1. Vamos a eliminar un to do en la base de datos.

4. Marcar completado un to do

   1. Vamos a marcar como completado un to do.

5. Eliminar todos los to do

   1. Vamos a eliminar todos los to do.

6. Reordenación, e instalar el plugin

   1. Vamos a instalar el plugin de Drag and Drop para reordenar los todos.

7. Reordenación, configuración inicial con los To Do en Vue

   1. Vamos a configurar nuestro listado de To Do con el plugin de reordenar.

8. Reordenación, crear listado de To Dos ordenados

   1. Vamos a generar un listado con las PKs de los To Do ordenados.

9. Reordenación, aplicar cambios en el servidor

   1. Vamos a reordenar los to do desde el servidor.

10. Problemas con la sincronización de las operaciones

    1. Hablaremos sobre los problemas que tenemos al momento de sincronizar los datos

 

Integración con Livewire - Carrito de Compras

1. Implementación hasta entonces

2. Crear migración y modelo

   1. Vamos a crear la estructura para trabajar con la base de datos.

3. Registrar cambios en la base de datos

   1. Vamos a guardar la sesión del carrito en la base de datos.

4. Establecer sesión en el login

   1. Vamos a escuchar cuando ocurre el login y replicar en la sesión el carrito.

5. Registrar cambios en la base de datos

   1. Vamos a guardar la sesión del carrito en la base de datos.

6. Replicar de la base de datos a la sesión en el login

   1. Vamos a escuchar cuando ocurre el login y replicar en la sesión el carrito.

7. Demo: Listener login mediante módulo aparte

   1. Vamos a conocer como implementar un listener mediante comandos de artisan.

8. Plugin de mensajes toast

   1. Vamos a instalar y configurar un plugin de toast.

   2. https://www.npmjs.com/package/toast-me

9. Definir y escuchar eventos personalizados de Livewire

   1. Vamos a escuchar los eventos desde el ítem del carrito desde JS.

Blog

Aquí automáticamente vamos rapidito a lo que es el blog no hay mucho que contar acá porque más o menos lo que yo saqué para el canal de YouTube también lo publiqué por aquí entonces de igual manera le hacemos un repaso lo del Bottom sheet como te comentaba aquí los filtros y cláusulas condicionales when en Laravel es decir si quieres aplicar un filtro o alguna condición un weare en base a si existe no alguna propiedad es decir una condición buana puedes emplear lo que es el wien Cómo crear un listado estático en esto también lo publiqué en el canal de YouTube creo que lo pasé por alto cCómo crear un listado estático de widget es decir tenemos un listado de String enteros objetos o lo que tú quieras y cómo puedes crear un listado como este en este caso no es empleando otra vez no es empleando L viw para que sea más sencillo simplemente empleamos un column un Road o directamente un web y ahí lo vemos cómo lo puedes hacer en caso de que no te recuerdes es sencillo Pero puede que se pase por alto aquí es eliminar algunos caracteres de html del sec editor algunos truquitos que estoy mostrando para trabajar con se editor esto para una plataforma de caía esto es del nuevo canal de YouTube en este caso es instalar y configurar CKEditor en Livewire también puedes tomar los mismos pasos para Laravel se pudiera decir una opinión personal del dispositivo de metaquest en este caso esto esto también es del otro canal de YouTube que más que todo lo asocio un poco a lo que es el Gaming y este tipo de dispositivos y lo del fate udem que te comentaba al inicio.

Esto también es un video un poco personal esto fue de la semana pasada y ahí lo puedes ver si te interesa así que pues nada sin más que decir esto es todo lo que subí para para la semana mencionada y sin más que decir nos vemos en la siguiente semana

https://www.desarrollolibre.net/blog

30-10-2024 - Andrés Cruz

In english

• Categoría
• /
• Programación básica
• /
• Actualización la semana 14-21Oct - Carrito de Compras Livewire Inertia instanceOf, whereBetween y +sss