Lista de tareas utilizando Laravel, base de datos MySQL y Vue.

Demo: https://lista-tareas.yizack.com

Video demostración

• Tecnologías
• Requerimientos para reproducción
• Pasos de instalación del proyecto
• Pasos para ejecutar el proyecto
• REST API
• Ejemplo
• Información adicional (Base de datos)
• Desarrollo

• Backend:
  • Laravel (PHP Framework)
  • Composer
  • MySQL
  • Node.js
  • Vite
  • Inertia
• Frontend:
  • Vue 3
  • Bootstrap 5

• Descargar e Instalar GitHub CLI
• Descargar e Instalar PHP y MySQL, yo he utilizado XAMPP (PHP 8.2.4) como entorno
• Dentro de la carpeta C:\xampp\php, habilitar la extensión zip en el archivo php.ini de PHP si es necesario para habilitar la instalación de los paquetes de composer. Buscar ;extension=zip y cambiarlo por extension=zip
• Descargar e instalar Composer (2.5.8)
• Descargar e instalar Node.js (18.16.1)
• Instalar pnpm utilizando el comando npm install pnpm@latest -g

1. Clonar el repositorio de GitHub.

gh repo clone Yizack/prueba-intermedio-tareas

2. Cambiar de directorio

cd prueba-intermedio-tareas

3. Para instalar paquetes de composer del proyecto ejecutar

composer install

4. Comando para instalar paquetes npm utilizando pnpm

pnpm install

Para la ejecución del proyecto se necesitará realizar los siguientes pasos.

1. IMPORTANTE: Renombrar el archivo .env.example a .env para hacer uso de las variables de entorno.

2. Iniciar Apache y MySQL por ejemplo en XAMPP

3. Abrir una consola en el directorio del proyecto y ejecutar el siguiente comando para realizar la migración de la base de datos

php artisan migrate

4. Generar una clave de aplicación

php artisan key:generate

5. Ejecutar la build de Vue con Vite

pnpm build

6. Para iniciar el servidor, ejecutar

php artisan serve

7. Acceder a la dirección http://localhost:8000 en el navegador.

8. Pantalla inicial si todo se ha ejecutado correctamente.

Puntos finales de la API

La API web devuelve todos los datos de respuesta como un objeto JSON. A continuación se muestran tablas con la descripción de todas las propiedades.

Captura del funcionamiento

El framework de Laravel nos permite crear migraciones de nuestra estructura de base de datos fácilmente utilizando el directorio database/migrations con código PHP. Por ejemplo, ver el archivo tareas_table.php

Igualmente también nos facilita la creación de rutas de nuestra api utilizando el directorio routes y el archivo api.php, a estas rutas podemos asignarles funciones de un controlador para obtener las tareas y realizar las modificaciones de nuestra base de datos.

El archivo del controlador de tareas donde se encuentran las acciones está localizado en app/Http/Controllers/TareaController.php

Para motivos de demostración de conocimiento también he creado un archivo con instrucciones para crear la tabla de la base de datos y los procedimientos de almacenado en caso de que no exista una opción de migración de base de datos como la que ofrece Laravel.

El archivo con las instrucciones se puede encontrar en db.sql

Para realizar cambios en entorno de desarrollo

1. Ejecutar el comando de entorno de desarrollo de Vite

pnpm dev

2. En otra consola sin cerrar la consola anterior, ejectuar el servidor

php artisan serve