Actualización la semana 04-11Nov - Pruebas en Inertia, Introducción Alpine, Eventos Livewire y +


Bienvenidos a otra semana en la cual paso ya automáticamente a comentar las actualizaciones todo el contenido que subí para la semana del 4 de noviembre al 11 de noviembre

YouTube

Así que al igual que siempre comenzando un poco con lo que publiqué en mi canal de YouTube por aquí te voy comentando la actualización de la semana pasada por aquí también tenemos lo que es siguiendo el curso básico el inicial con larabel 10 que es otra vez consumir bueno crear un post con Vue y una restapi.

Ya partir de aquí tenemos contenido original en este caso forma parte del curso de Livewire y es cómo puedes emplear los toas es decir mostrar un mensaje en base a alguna confirmación aquí lo interesante no es tanto emplear el toas sino es la parte del manejo de los eventos que también una vez que suceda algún evento en el servidor entiéndase en el componente que nosotros por supuesto lo enviamos es personalizable también lo podemos escuchar desde javascript para hacer algo y en este caso es mostrar un toast en la práctica por ejemplo cuando eliminemos un registro un todo enviamos un mensaje vía toast mediante ese evento que te comentaba.

Aquí también un video exclusivo de YouTube en este caso para el manejo de dominios y subdominios aquí te muestro un poco cómo es o cómo lo tengo configurada la aplicación de desarrollo libre que recuerda que tengo tres módulos ahí el de Academia que es la tienda en línea de las para los libros los cursos y demás el blog en sí y también la parte administrativa entonces yo tengo subdominio por ejemplo para la web de Academia por lo tanto la web de Academia solamente se puede acceder mediante subdominio de academia.desarrollolibre.net que es el subdominio este subdominio también perfectamente podía ser otro dominio si así lo configuras pero en este ejemplo es un subdominio otra vez por lo tanto cualquier navegación que yo haga aquí por ejemplo aquí en el el Slash libros solamente es accedida porque configuré esas rutas para este subdominio te muestro cómo es es muy sencillo pero es importante también que lo entiendas obviamente esto es un ejemplo y lo puedes configurar en distintos propósitos por ejemplo para otros dominios y también es importante notar o acotar que es la misma aplicación es decir una aplicación tiene un dominio y dos subdominios para mi ejemploclaro está pero esto otra vez lo puedes personalizar a gusto te muestro ahí un poco cómo son las configuraciones.

Ya a partir de aquí te muestro un poco las las pruebas unitarias o de integración en laravel inertia lo que tenemos ahí de diferencia o el agregado que tenemos si lo comparamos con el Laravel básico que es la el objeto de inertia con el cual nosotros podemos hacer algunas pruebas para inertia en este caso la diferencia fundamental aquí es que manejamos componentes en Vue entiendase desde el controlador y desde el arbel básico serían vistas por lo tanto ahí tenemos que hacer algunos cambios y con esto algunas nuevas comparaciones es importante también acotar que todo esto las pruebas unitarias y de integración para inercia son exclusivas para el controlador por lo tanto lo que es el componente si le pegamos aquí un clitk o algo ahí tuvos que emplear las pruebas normalitas en Vue bueno otra vez aquí ahorita voy con este seguiendo un poquito con la lo de las pruebas en inercia tenemos lo que es el objeto page ya que justamente esos métodos el que te comentaba por aquí que configuramos nos devuelve un objeto page y es importante conocer qué demonios es este objeto page cómo lo podemos manipular cómo lo podemos sar cómo lo podemos segmentar para poder hacer las pruebas perfectamente ya que si no sabemos en qué consiste no sabemos cómo van a estar formadas esas pruebas y es algo que también te explico en este video.

Por aquí también es un video exclusivo de YouTube en la cual te muestro cómo yo organizo mi código ccs en este caso es el mismo proyecto del arab el de desarrollo libre y es básicamente Cuántos módulos tengas vas a tener esa misma cantidad de archivos ccs ya que usualmente en los módulos vamos a tener algún ccs exclusivo para dichos módulos y también muchas veces vamos a tener css en común por ejemplo para los botones para componentes de cartas y demás por lo tanto podemos crear un archivo de css en común que luego podemos importar en el resto en la cual vamos a definir el css exclusivo por supuesto est es un esquema que tú puedes adaptar a gusto en base a tus necesidades pero te muestro es básicamente cómo funciona cómo lo tengo implementado la siguiente clase sería bueno es un poco con lo que te comentaba con los toast definir los eventos y escuchadores en Livewire.

Por aquí también tenemos el uso de las relaciones polimórficas de tipo muchos a muchos que bueno la considero bastante interesante por ser de muchos a muchos y también por ser de tipos polimórficas así que esto también forma parte del curso nuevo del Laravel.

Finalmente Aquí tengo un video que rompe un poquito lo que estoy acostumbrado a hacer en este caso es sobre el Mac Mini o el Mac en general que hace poco se renovaron al M4 Y seguramente muchas personas quieren adquirir un mac porque también son excelentes para el desarrollo de software y te voy comentando un poquito qué es lo que yo consideraría ya yo he empleado Mac desde la Intel del 2018 que fue la última que salió utilicé esa mac utilicé La M1 Y actualmente tengo la m2 pro con la ventajas que esta me trae que es un disco duro de 512 GB y también de 16 de ram entonces aquí básicamente lo que te comento es que el modelo de base de base que cuesta unos 579 que trae 16 Gb de ram que está bastante bien pero el problema ahí es el disco duro que es muy pequeño el disco duro usualmente se pue se puede solucionar de cierta forma es instalando un disco duro externo en este caso mediante los puertos de thunderbolt pero el problema es que hay ciertos programas por ejemplo sobre todos los desarrollo por ejemplo Android Studio por ejemplo unre por dar algunos ejemplos que eso siempre se va a instalar es en el disco duro interno de la máquina por lo tanto con 256 GB te va a quedar muy escaso inclusive y te muestro que la máquina que yo tengo actual de 512 Ya tengo la mitad justamente la mitad del disco duro ocupado y es porque instalo por ejemplo un real Android Studio y todo lo demás Por lo tanto el modelo básico para mí es insuficiente y solo te lo recomendaría si estás completamente seguro ya que Recuerda que te lo estoy recomendando es para desarrollo si estás completamente seguro de que tu ambiente no va a ser por ejemplo no vas a instalar un real no vas a instalar ningún juego es decir cualquier programa que su que sue más de unos 30 40 GB porque si es así te vas a quedar corto entonces bueno por ahí me voy y te voy indicando algú opciones disponibles es decir voy comparando que otra pudiera ser interesante en vez de comprarte esta mejor comprar este combo y esas cositas así en caso de otra vez quieras adquirir un mac ahí te doy algunos tits en caso de que te interese.

Cursos

Ya por aquí pasamos a las actualizaciones a nivel de los cursos en cuanto al del iwar aquí Estoy es con la sección de alpine js ya que recuerda que alpine js forma parte importante del de Livewire y por lo tanto me parece prudente hacer una introducción a dicho framework js que es muy similar a Vue si ya con Vue el 70 por de Vue de lo que hacemos en Vue se puede hacer aquí, se pudiera decir tenemos x-if que es el equivalente a los v-if los show la sintaxis muy similares pero por más que sea vamos a ir presentando poco a poco y también viendo las diferencias que tenemos ese otro 30% que sería diferente entonces como siempre vamos comenzando trabajando con los atributos os en este caso Bueno el último que salió fue el de estilo pero antes de eso hay otros más por ejemplo de las clases los condicionales los for aquí una comparación entre los ciclos con objeto y condicionales para seguir puliendo un poquito lo que habíamos antes el bloque de script ya que usualmente los componentes alpine se definen es directamente en el html pero si es mucho código entonces es mejor definirlo en un bloque aparte como si fuera en Vue para referenciar elementos bastante útil y no lo tenemos en por ejemplo Vue esto sería algo diferente y a partir de aquí vamos haciendo una aplicación de todo list al igual que hicimos con inertia pero en este caso obviamente enfocado alpine.

Estamos es comenzá primero implementándose importantísimo para el modo de desarrollo adaptamos las pruebas anteriores el sistema de autenticación recordemos que tenemos un módulo protegido por autenticación el módulo de dashboard y por aquí ya a partir de esto seguimos trabajando en las mismas pruebas que teníamos que es trabajando en el módulo de dashboard haciendo las pruebas para las categorías y luego las pasamos directamente para las publicaciones y es lo que estamos haciendo.

Introducción a Alpine JS

  1. Atributos: style

    1. Vamos a trabajar con el atributo de estilos.

  2. Condicionales: x-if

    1. Vamos a conocer el uso del condicional.

  3. Ciclos: x-for

    1. Vamos a conocer el uso del for.

  4. Ciclo for con objetos y condicionales

    1. Ejemplo en donde empleamos los objetos y con condicionales.

  5. Bloque de script

    1. Vamos a organizar el código anterior en un bloque de script.

  6. x-ref

    1. Conoceremos cómo crear una referencia a cualquier elemento HTML.

  7. Aplicación de todo: Listado

    1. Vamos a crear el listado para los TODO.

  8. Aplicación de todo: Búsqueda

    1. Vamos a crear una aplicación tipo TODO, primero, el campo de búsqueda.

  9. Aplicación de todo: Crear Todos

    1. Vamos a crear todos.

  10. Marcar todo completada

    1. Vamos a realizar la opción marcar una tarea como completada.

  11. Eliminar todo

    1. Vamos a realizar la opción de eliminar un todo.

  12. Borrar todos los todos

    1. Vamos a realizar la opción de borrar todos los todos.

  13. Modificar un todo

    1. Vamos a realizar la opción de modificar un todo.

Integración con Inertia - Pruebas

  1. Configurar base de datos

    1. Vamos a configurar una base de datos de prueba.

  2. Facades y adaptar pruebas anteriores

    1. Vamos a crear unos factories para generar datos de prueba.

  3. Autenticación

    1. Vamos a autenticar un usuario para los módulos protegidos por autenticación.

  4. Dashboard: Prueba para crear, POST

    1. Vamos a crear la prueba para crear una categoría.

  5. Tarea: Dashboard: Prueba para editar

    1. Vamos a crear la prueba para editar una categoría.

  6. Dashboard: Prueba para eliminar

    1. Vamos a crear la prueba para eliminar una categoría.

  7. Dashboard: Pruebas para el Post

    1. Crearemos las pruebas para el post, partiendo de las pruebas de las categorías.

  8. Dashboard: Pruebas para el Post, Ordenación en el index

    1. Corregimos el problema que tenemos para la prueba del index y la ordenación.

Blog

El blog que tenemos más o menos el mismo contenido esto también lo publiqué el día bueno esto es mentira esto esto ya saldría un poquito del del flujo pero ahí lo tenemos como puedes explicar rotaciones en unre lo del mat que te comentaba los eventos escuchad en este caso también con los toas y todo lo demás Esto es para el resaltado del código del highlight para Vue es decir que el código cuando tú utilices la etiqueta pre te aparezca con un estilo aplicado en este caso empleamos bueno plugin específico para Vue te muestro cómo lo puedes configurar aquí lo mismo que te comentaba cómo puedes organizar tu código aquí tenemos el archivo de base el base.css así lo llamé yo y luego lo heredamos desde el resto de los módulos que van a necesitar este sss en común por ejemplo para los botones ahí te lo explico un poquito aquí lo de los dominios que te comentaba también dominios y subdominios ahí tienes bueno la parte escrita el de los toas en este caso es para aquí me equivoqué en imagen ahora que estoy viendo porque es para lar y coloqué aquí inertia pero para alla y finalmente aquí tenemos la importancia de modularizar la aplicación en este caso enfocada a las rutas cosa que me ayudó muchísimo para que yo pueda tener organizado las rutas sobre todo para la aplicación academia en la cual yo estoy siguiendo lo que es una aplicación en Vue  mi restapi que también lo utilizo para consumir la aplicación que creé para flurer cosa que ya también te comentaba en otro video las ventajas de este enfoque en vez de emplear la arabel inertia preferí por este enfoque aunque ya aunque ya tenía unos añitos simplemente lo fui renovando y a partir de aquí todo lo que he un poco manejado con las rutas anteriormente tenía por ejemplo unas rutas definidas para tutoriales que lo puedes ver de dos formas una simple que es simplemente el esquema de tutoriales y la completa en la cual te devuelve el tutorial la sección y las clases otra vez tutoriales viene siendo los cursos los cursos tienen secciones y también tienen clases entonces a partir de ahí cree dos esquemas de rutas y te voy mostrando ahí algunos truquitos por ejemplo cuando quieres traerte un tutorial ya sea simple o no mediante el slot o mediante el ID puedes emplear perfectamente el mismo controlador y ese tipo de esquemas así que bueno eso viene siendo Prácticamente todo lo que subimos para la semana mencionada y sin más que decir nos vemos la semana próxima

- Andrés Cruz

In english

Andrés Cruz

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

Andrés Cruz En Udemy

Acepto recibir anuncios de interes sobre este Blog.