[Laravel + VueJS] Wallpaper Manager

Este proyecto es un sistema de gestión de wallpapers desarrollado con Laravel en el backend y VueJS (integrado con Vuetify) en el frontend. Utiliza una base de datos MySQL.

Funcionalidades principales

- Autenticación obligatoria mediante OAuth2 (Laravel Passport).
- Posibilidad de cambiar usuario y contraseña.
- Cambio dinámico de tema (modo claro/oscuro).
- Gestión completa de wallpapers: agregar, editar y eliminar.
- Organización de wallpapers por horarios y estaciones del año.
- Búsqueda de wallpapers por nombre, horarios y estaciones desde la página principal.
  - Se utiliza Pinia para conservar los filtros de búsqueda mientras se navega por la aplicación.
- Visualización de gráficos estadísticos que muestran la cantidad de wallpapers por horario y por estación.

Capturas de pantalla

A continuación, se muestran algunas imágenes del sistema en funcionamiento:

Instalación del proyecto

Backend (Laravel)

1. Renombrar el archivo .env.example a .env.
2. Configurar la conexión a la base de datos MySQL en el archivo .env.
3. Ejecutar los siguientes comandos:

composer install

php artisan key:generate

php artisan migrate

php artisan passport:keys --force

php artisan passport:client --password

> ⚠️ Al ejecutar el comando anterior, se te proporcionará el client id y client secret. Copia estos valores y colócalos en el archivo .env en las variables PASSPORT_CLIENT_ID y PASSPORT_CLIENT_SECRET.

php artisan db:seed --class=DatabaseSeeder

php artisan storage:link
 

Frontend (VueJS)

Para instalar las dependencias del frontend, ejecuta:

npm install

Iniciar la aplicación

Para levantar la aplicación en modo desarrollo, ejecuta:

php artisan serve --port=9090

npm run dev

Pruebas unitarias

Este proyecto incluye pruebas unitarias para verificar el correcto funcionamiento de los endpoints de Laravel.

1. Renombrar el archivo .env.testing.example a .env.testing.
2. Configurar la conexión a la base de datos de pruebas y generar un APP_KEY con el siguiente comando:

php -r "echo 'base64:'.base64_encode(random_bytes(32)).\"\n\";"

3. Ejecutar las pruebas:

php artisan test

Deberías recibir un resultado similar a:

  PASS  Tests\Feature\ApiEndpointsTest
✓ el usuario puede iniciar sesion                                                                                                              1.60s  
✓ el usuario autenticado puede validarse                                                                                                       0.10s  
✓ el usuario puede actualizar su perfil                                                                                                        0.11s  
✓ se pueden listar las estaciones                                                                                                              0.10s  
✓ se puede cargar una estacion                                                                                                                 0.09s  
✓ se pueden listar los horarios                                                                                                                0.10s  
✓ se puede cargar un horario                                                                                                                   0.09s  
✓ se pueden listar los wallpapers                                                                                                              0.12s  
✓ se puede cargar un wallpaper                                                                                                                 0.10s  
✓ se puede crear un wallpaper                                                                                                                  0.13s  
✓ se puede actualizar un wallpaper                                                                                                             0.11s  
✓ se puede eliminar un wallpaper                                                                                                               0.11s  
✓ las estadisticas devuelve datos correctos                                                                                                        0.10s  

Tests:    13 passed (84 assertions)
Duration: 2.94s 

Uso con Docker

1. Renombrar el archivo .env.docker.example a .env.docker que esta en la carpeta docker.
2. Configurar los datos de conexión a la base de datos (excepto DB_HOST, que ya viene predefinido).
3. Ejecutar los siguientes comandos para la instalación y configuración en entorno Docker:

docker compose up -d --build

4. Acceder al contenedor para ejecutar los comandos de configuración:

docker exec -it wallpapers_laravel bash

5. Ejecutar las migraciones y sembrado de la base de datos:

php artisan migrate --seed

6. Crear el cliente de Passport para password grant:

php artisan passport:client --password

> ⚠️ Al igual que en la instalación normal, copia el client id y client secret generados y colócalos en las variables PASSPORT_CLIENT_ID y PASSPORT_CLIENT_SECRET del archivo docker/.env.docker.

Script de automatización (Go)

El proyecto incluye un script escrito en Go, ubicado en la carpeta scripts, que permite automatizar la selección y cambio del wallpaper en función de la hora del día y la estación del año.

¿Qué hace este script?

- Realiza login en el sistema usando la API (/api/v1/ingreso).
- Descarga la lista de wallpapers disponibles desde /api/v1/wallpapers.
- Filtra los wallpapers según:
  - La estación actual (verano, otoño, invierno, primavera).
  - El momento del día (mañana, tarde, noche, madrugada).
- Selecciona uno al azar entre los que cumplen con ese criterio.
- Lo descarga a la carpeta downloads/ y lo establece como fondo de pantalla.
  - Funciona tanto en Linux (GNOME) como en Windows.
- Repite el proceso cada 1 hora (en el código actual: cada 20 segundos para pruebas).
 

Ejecución

Para ejecutar el script:

cd scripts
go run wallpaper.go

Github

[NodeJS + VueJS] Registro de series 1.0

En este proyecto se hizo un sistema para registrar series y todos los datos necesarios para poder organizarlas, esta hecho en NodeJS con Sequelize y VueJS con Vuetify. Permite usar como base de datos MySQL y PostgreSQL.

Las funciones incorporadas son :

Inicio de sesión obligatorio para usar el sistema protegido con JWT.

Rutas protegidas para poder acceder al dashboard.

Posibilidad de cambiar usuario y contraseña.

Posibilidad de cambiar el theme completo del sistema a un modo oscuro o claro.

Se pueden agregar, editar y borrar géneros. En esta misma sección se usa Pinia para poder filtrar por nombre en el buscador y poder recordar el filtro al cambiar de página.

Se pueden agregar, editar y borrar series. En esta misma sección se usa Pinia para poder filtrar por nombre, géneros y estados.

A continuación se muestran unas imágenes del sistema en funcionamiento.

Para la correcta instalación del sistema se deben seguir los siguiente pasos.

Desde la carpeta "backend", se debe renombrar el archivo .env.example a solo .env y editar la configuración con los datos de tu conexión a la base de datos. En el caso de la variable "DB_CONNECTION" se puede elegir entre "mysql" y "postgres" dependiendo de que motor se desee usar.

Una vez editado el archivo .env se deben ejecutar los siguiente comandos :

npm install

sequelize db:migrate

sequelize db:seed:all

Finalmente para iniciar el servidor se debe ejecutar este comando :

npm run start

Desde la carpeta "frontend", se debe renombrar el archivo .env.example a solo .env y editar las variables con el nombre de "VITE_API_URL" y "VITE_API_URL_IMAGES" por la URL correspondiente a su backend.

Una vez editado el archivo .env se deben ejecutar los siguiente comandos :

npm install

Finalmente para iniciar el servidor se debe ejecutar este comando :

npm run dev

 Github

 

Fenix Launcher 1.0

Es un proyecto hecho en Net Core 6, VueJS con Vuetify y MySQL, sirve para ejecutar procesos con tareas mediante comandos del sistema.

Los procesos y tareas se pueden registrar cómodamente mediante un CRUD para ambos casos. Una vez ejecutado los procesos los PID de cada uno son guardados en la base de datos para poder cerrar en cualquier momento.

El sistema usa un usuario y contraseña para proteger la aplicación, las rutas están protegidas mediante la validación de un JWT que se guarda en la sesión del usuario, también en el apartado del perfil se pueden cambiar los datos por defecto que son "supervisor" para el usuario y la contraseña.

Unas imágenes : 

Github

Registro de películas y series

Es un proyecto para organizar películas y series de forma organizada, esta hecho en Net Core 6, VueJS con Vuetify y MySQL. El sistema incluye un usuario y clave para proteger los datos usando JWT Token, el usuario y clave por defecto es "supervisor". Se pueden agregar, editar y borrar registros y filtrarlos por "finalizados" o "sin terminar" en un buscador. Además el usuario y clave por defecto se puede cambiar cuando se necesite.

Unas imágenes de ejemplo : 

Github

Generador de tutoriales 1.1

Un programa hecho en Django con VueJS para generar tutoriales para canciones de guitarra, primero se crea un nuevo tutorial, para después ir a la sección de capturas, cargar el video y realizar capturas de imagen con descripción que se irán guardando, las capturas se pueden editar, ordenar y borrar. Una vez hecho este proceso se va a la sección de generar y se mostraran las imágenes con las descripciones ordenadas en una galería que permite mostrar las imágenes con las aclaraciones de cada una.

El proyecto ha sido actualizado a su version 1.1 y ahora puede buscar por título ademas de filtrar por dificultad y genéro. Tambien puede mostrar estadísticas que muestran cuantos tutoriales hay por dificultad y genéro.

Si ejecutan el proyecto por primera vez deben crear la base de datos SQLite con los siguientes comandos : 

manage.py makemigrations

manage.py migrate 

Para ejecutar el proyecto se debe usar el comando : 

manage.py runserver 9999

Unas imágenes :

Github

Generador de tutoriales 1.0

Un programa hecho en Django con VueJS para generar tutoriales para canciones de guitarra, primero se crea un nuevo tutorial, para después ir a la sección de capturas, cargar el video y realizar capturas de imagen con descripción que se irán guardando, las capturas se pueden editar, ordenar y borrar. Una vez hecho este proceso se va a la sección de generar y se mostraran las imágenes con las descripciones ordenadas en una galería que permite mostrar las imágenes con las aclaraciones de cada una.

Para ejecutar el proyecto se debe usar el comando "manage.py runserver 9999".

Unas imágenes : 

Github