[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

[Python + Tkinter] Fast Music 1.0

En este proyecto se hizo un completo reproductor de música en Python usando ttkbootstrap para la interfaz gráfica, usa Sqlalchemy para trabajar con una base de datos Sqlite que gestiona la configuración y manejo de multimedia del programa.

Las funciones incorporadas son :

* Reproducción de música, videos y streams.
* Sincronización de toda la muisca usando Google Drive.
* Se pueden descargar uno o varios videos de youtube para convertir en MP3 o MP4 según se necesite.
* Permite descargar playlists completas de youtube y convertir en música o videos.
* El reproductor registra en la base de datos las ultimas playlists seleccionadas para cargarlas siempre al inicio de la aplicación.  

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

 

 

Para instalar las dependencias se necesita ejecutar el siguiente comando :

pip install -r requirements.txt

Ademas se tienen que crear las credenciales para el servicio "Google Drive API" en la URL https://console.cloud.google.com, una vez creado todo se descargan las credenciales y se guardan en el mismo directorio del programa con el nombre de client_secrets.json.

Una vez configurado todo, se puede ejecutar la aplicación app.py para iniciar el programa, cuando se inicie se debe cargar la ventana "Configuración" y configurar todos los directorios que se necesitan para escanear las canciones y videos, también es necesario especificar el directorio donde están guardadas las canciones en Google Drive y se deben configurar los directorios donde se van almacenar las canciones descargadas. Cuando todos esos datos estén configurados se podrá iniciar el escáner desde ese misma ventana y reproducir cualquier archivo multimedia que se necesite.

 

 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

 

[Flask] Quick Launcher 1.0

En este proyecto se hizo un sistema para lanzar procesos en segundo plano que usa Flask con Bootstrap 5, usando MySQL para gestionar los datos de la aplicación. Esta pensando para gestionar servidores y facilitar los manejos de los comandos de cada uno, ya sean de proyectos de Laravel, NodeJS, Angular, React o cualquier otro. También incluye una función para que ejecute en el navegador la URL del proceso ejecutado después de un tiempo de espera asignado en el sistema.

Las funciones incorporadas son :

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

Posibilidad de cambiar usuario y contraseña.

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

Se puede agregar, editar y borrar procesos. En la sección de procesos se pueden gestionar las tareas de cada proceso.

En la página principal se listan todas los procesos registrados donde se pueden ejecutar y detener las tareas de cada uno. También hay una sección de logs donde se muestran los procesos activos con sus PID asociados y se pueden cerrar por tarea o por proceso.

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.

En la carpeta principal se debe renombrar el archivo .env.example a solo .env y editar la configuración con los datos de tu conexión MySQL, el SECRET_KEY que seria la clave para generar el JWT.

Para instalar la librería de conexión a MySQL en Linux el comando debería ser :

sudo apt-get install python3-pymysql

De lo contrario si están usando Windows seria :

pip install PyMySQL

Posteriormente debemos terminar de instalar las dependencias con el siguiente comando :

pip install -r requirements.txt

Para ejecutar Flask en Windows se debe hacer de la siguiente manera :

python -m flask

De lo contrario si están usando Linux bastaría con usar simplemente el comando flask, teniendo en cuenta esto para ejecutar las migraciones de Flask deben ejecutar los siguientes comandos :

flask db init

flask db migrate

flask db upgrade

flask seed

Finalmente para iniciar el sistema se debe ejecutar este comando :

flask --app main.py --debug run --port=8888

 

Github

[Django + Angular] Fast Music 1.0

En este proyecto se hizo un completo reproductor de música, las tecnologías que usa son Django como Backend y Angular como Frontend, la base de datos que usa es MySQL.

Las funciones incorporadas son :

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

Posibilidad de cambiar usuario y contraseña.

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

Se puede sincronizar una carpeta de Google Drive con la carpeta local del sistema donde se guardara toda la música, también se puede hacer el efecto contrario, que seria sincronizar la carpeta local del sistema con la carpeta de Google Drive.

Incorpora un escaneo de carpeta local donde se deben registrar todas las canciones guardadas cada una en su playlist o carpeta correspondiente.

En el reproductor de música se puede filtrar por playlists que serán guardadas en Redux, lo mismo seria para filtrar por nombre de canción. Ademas se pueden fijar canciones como favoritas lo que hará que se cree una playlist aparte al principio de la lista para poder localizar de una forma mas eficiente.

También incorpora un reproductor de estaciones o streams, en esa sección se pueden registrar, editar y borrar estaciones, para mayor comodidad incorpora un buscador por nombre que usa Redux. Ademas contiene las funciones de importar las estaciones en formato json, exportar las estaciones para descargar en formato json y la función de validar todas las estaciones para verificar su correcto funcionamiento y borrarlas en caso de no estén funcionando.

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.

En la carpeta del Backend que sería "sistemaApi" se debe renombrar el archivo .env.example a solo .env y editar la configuración con los datos de tu conexión MySQL. También se debe editar el SECRET_KEY con tu propia clave, se puede generar una con el siguiente comando :

python3 -c 'from django.core.management.utils import get_random_secret_key; print(get_random_secret_key())'

Después se tienen que crear las credenciales para el servicio "Google Drive API" en la URL https://console.cloud.google.com, una vez creado todo se descargan las credenciales y se guardan en el mismo directorio del archivo manage.py con el nombre de client_secrets.json.

Una vez terminado todo se deben seguir estos pasos :

Para instalar las dependencias de Django :

pip install django djangorestframework djangorestframework_simplejwt

sudo apt install pkg-config

sudo apt-get install gcc libmysqlclient-dev python3-dev

pip install mysqlclient

pip install django-cors-headers

pip install python-dotenv

Para instalar el modulo necesario para sincronizar con Google Drive :

pip install PyDrive

Para realizar las migraciones de Django :

python3 manage.py makemigrations

python3 manage.py migrate

Para crear el usuario por defecto :

python3 manage.py createsuperuser

Finalmente para iniciar el servidor se debe ejecutar este comando :

python3 manage.py runserver 7777

En la carpeta del Frontend que sería "sistemaFrontend" se debe ejecutar el siguiente comando para instalar las dependencias :

npm install

En esa misma carpeta deben ir al directorio "environments" para modificar los archivos environment.ts reemplazando las variables "apiUrl" y "filesUrl" por la ruta de su servidor Backend.

Finalmente para iniciar el servidor se debe ejecutar este comando :

npm run start

Github

[Laravel + Angular] Fenix Tasks 1.0

 

En este proyecto se hizo un sistema para registrar espacios de trabajo en los cuales se pueden asignar tareas y registrar los tiempos de trabajo. Este sistema usa Laravel como Backend y desde el lado de Frontend usa Angular con Material. La base de datos elegida para este proyecto fue MySQL.

Las funciones incorporadas son :

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

Posibilidad de cambiar usuario y contraseña.

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

Se puede agregar, editar y borrar espacios de trabajo. En la misma sección se maneja un filtro de redux para buscar por nombre. En cada espacio de trabajo se puede establecer la fecha de inicio, la fecha de finalización y el estado en el que se encuentra el espacio.

Dentro de los espacios se pueden crear, editar y borrar tareas, las mismas también se manejan por fechas de inicio y finalización, además poseen un cronómetro para medir el tiempo que lleva cada tarea.

En el inicio del dashboard se muestran unas estadísticas del sistema que consisten en mostrar dos gráficos, en el primero se muestran los espacios que tuvieron más días de trabajo y en el segundo gráfico se muestran los que demoraron menos. También se muestran dos tablas, en la primera se muestran las 3 tareas que llevaron más tiempo y en la segunda se muestran las que menos.

Se incluye un calendario donde se muestran las fechas de inicio y finalización de todas los espacios y tareas creados.

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.

En la carpeta del Backend que sería "sistema-api" se debe renombrar el archivo .env.example a solo .env y editar la configuración con los datos de tu conexión MySQL, el SECRET_KEY que sería la clave para generar el JWT.

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

composer install

php artisan key:generate

php artisan migrate

php artisan db:seed --class=DatabaseSeeder

php artisan storage:link

Finalmente para iniciar el servidor se debe ejecutar este comando :

php artisan serve --port=7777

En la carpeta del Frontend que sería "sistema-frontend" se debe ejecutar el siguiente comando para instalar las dependencias :

npm install

En esa misma carpeta deben ir al directorio "environments" para modificar los archivos environment.ts reemplazando las variables "apiUrl" y "imagesUrl" por la ruta de su servidor Backend.

Finalmente para iniciar el servidor se debe ejecutar este comando :

npm run start

  

Github