¡Hola, bienvenid@s al curso de Laravel y ChatGPT! Continuando con la creación de las vistas, hoy veremos como generar las Rutas, vistas Blade, HTML, CSS para la funcionalidad Viviendas con ChatGPT. Con esta funcionalidad tendremos un sistema pequeño pero funcional todo creado con la ayuda de ChatGPT.
¡Empecemos!
Crear el CRUD para la funcionalidad Viviendas
Ahora nos toca crear el CRUD para la funcionalidad de Viviendas, utilizaremos nuevamente la inteligencia artificial de ChatGPT para crear cada una de las vistas incluyendo código HTML y CSS que nos permitirán crear el diseño de nuestras vistas. También, veremos las relaciones que tiene la funcionalidad de “Viviendas” con “Zonas” para que en las vistas reflejemos estas relaciones.
Crear las rutas para la funcionalidad Viviendas
Comenzaremos por crear las rutas para la funcionalidad de Viviendas, para esto realizamos la siguiente pregunta a ChatGPT.
“Crear las rutas para el controlador de Viviendas”
ChatGPT genera las rutas para la funcionalidad Viviendas con las acciones típicas de un CRUD. Copiamos y pegamos el código generado en nuestra aplicación en el archivo web.php.
Crear la vista listar Viviendas
Ahora comenzaremos por crear la vista para listar las viviendas, para esto realizamos la siguiente pregunta a ChatGPT.
“Crear la vista para el listado de viviendas, utiliza Laravel blade, HTML y CSS todo en un solo archivo”
ChatGPT genera las instrucciones y el código necesario para crear la vista “Viviendas”. Si observamos el código vemos “$vivienda->zona->nombre” obtiene automáticamente la zona en que se encuentra la vivienda, esto es por las relaciones que tiene el modelo “Zona” con el modelo “Vivienda”.
Para realizar las pruebas de nuestra aplicación iniciaremos el servidor local de Laravel, el servicio de MySQL y en el navegador escribimos la siguiente ruta http://127.0.0.1:8000/viviendas para ver los resultados.
Crear el formulario para registrar nueva Vivienda
Continuando con el desarrollo, ahora vamos a crear el formulario para crear una nueva vivienda, para esto realizamos la siguiente pregunta a ChatGPT.
“Crear el formulario vivienda utilizando laravel blade, html y css todo en una sola página”
ChatGPT genera las instrucciones y el código necesario para crear el formulario de vivienda. Si observamos el código vemos que no muestra la relación que existe con el modelo “Zona”. Volvemos a generar la pregunta a ChatGPT añadiendo este requerimiento.
“Crear la vista para el listado de viviendas con la relación que tiene con el modelo Zona, utiliza Laravel blade, HTML y CSS todo en un solo archivo”
ChatGPT genera otra respuesta esta vez con la relación que existe con el modelo “Zona”, todo el código Blade, HTML y Tailwind CSS en un mismo archivo.
Primeramente, creamos el archivo create.blade.php en la ruta “resources/views/viviendas/”, y copiamos y pegamos todo el código generado. Al realizar las las pruebas de la funcionalidad de crear nueva vivienda genera un error.
El error generado nos indica que la variable “$zonas” no existe en el contexto de la vista “crear nueva vivienda”. Seguramente es porque desde el controlador no estamos enviando la variable donde se encuentran todas las zonas, Preguntemos a ChatGPT cómo podemos solucionar este problema.
“En la vista crear nueva vivienda tengo el error el Undefined variable $zonas”
ChatGPT no indica cómo podemos solucionar el problema (en este caso es creando la variable $zona en el controlador Viviendas).
Realizamos las pruebas nuevamente de la funcionalidad de crear nueva vivienda.
Crear el formulario para editar una Vivienda
Continuando con el desarrollo, ahora vamos a crear el formulario para editar una vivienda, para esto realizamos la siguiente pregunta a ChatGPT.
“Crear el formulario para editar una vivienda con la relación que existe con el modelo Zona, utilizando laravel blade, html y css todo en una sola página”
ChatGPT genera las instrucciones y el código necesario para crear el formulario de editar una vivienda. Primeramente, creamos el archivo edit.blade.php en la ruta “resources/views/viviendas/”, y copiamos y pegamos todo el código generado.
Crear la vista eliminar una vivienda
Por último, vamos a crear la funcionalidad de eliminar una vivienda. Si observamos el archivo index de la funcionalidad de viviendas, podemos observar que la funcionalidad ya fue creada por ChatGPT junto con el listado de viviendas y las acciones de crear, editar y ver. Realizamos las pruebas de la funcionalidad de eliminar una vivienda.
Recuerda que todo el código fuente generado en esta clase y las demás clases está disponible en GitHub totalmente gratis para su descarga.
Ejercicios de la clase
- Realizar la funcionalidad de “Ver vivienda” utilizando la herramienta de ChatGPT, utiliza estilos HTML y CSS modernos y personalizados de acuerdo a tu estilo.
- Realiza un menú de opciones para poder navegar entre los módulos de “Zonas” y “Viviendas” utilizando estilos HTML y CSS y los componentes de Blade.
Hasta aquí ya tenemos una aplicación web totalmente funcional y lista para su uso. Todo esto desarrollado con la ayuda de ChatGPT, sin la necesidad de codificar código (esto no significa que puedes crear aplicaciones web sin saber programar, de hecho como mínimo se requiere conocimientos basico de programacion y Laravel, conocer la estructura y las funcionalidades que te ofrece este framework de PHP, así dar las instrucciones correctas a ChatGPT para crear aplicaciones funcionales y de acuerdo a tus necesidades). Para cualquier duda o consulta de la clase de hoy puedes dejarnos un comentario. En la siguiente clase veremos cómo crear la documentación del proyecto y subir a un repositorio de GitHub.
¡Te espero en la siguiente clase!
Saludos y éxitos.
Victor Peña
Desarrollador de software Backend Developer, experto en Laravel Framework, PHP, JavaScript y MySQL. Creador de contenidos de emprendimiento y desarrollo de software.