La aplicación usa nodejs como backend y vue como frontend
La parte backend nodejs:
- Nodejs +14.0.0
- Base de datos Mongo para el registro y acceso de usuarios en la aplicación
- Ficheros para guardar la información de trackings de usarios. Más concretamente ficheros JSON que son leidos y editados mediante filesystem de nodejs
La parte frontend con vuejs:
- Login de usuario y autenticación con JWT
- Marcar tracking de horas trabajadas y pausas
- Visualizacoón de trackings por fechas
- Detección cuando el usuario ha cerrado o refrescado la App y caso de tener un descanso o trabajo en curso se guarda la hora actual
- Notificaciones de escritorio cuando inicie una Pausa. Configurable el tiempo que debe transcurrir para recibir la notificación
- Cambio de contraseña
- Definición de jornada laboral
Los usuarios con perfil administrador:
- Creación de nuevos usuarios
- Ver histórico de Trackings de cada usuario
Me hubiera gustado poder publicar la aplicación en Heroku y crear usuarios para que se pueda probar. Heroku tiene lo que llaman "Ephemeral Disk" (cuando la App se reinicia, se hace deploy o pasadas unas 24h se pierden los datos que la aplicación ha grabado en los ficheros). Se puede solucionar con AWS, para más detalles: https://devcenter.heroku.com/articles/active-storage-on-heroku Otras posibles alternativas serían cambiar el sistema de filesystem por base de datos o implementar Backend con firebase, Dropbox Api, Google Drive Api...
Si alguien estuviera interesado (me puede escribir por privado), podría crearle usuario y cargar datos Dummy para ver históricos aunque sus grabaciones serán "Efímeras"
Levantar la aplicación
Servidor node
El servidor nodejs usa http://localhost:8080/. El Build de vue se genera dentro de la carpeta public
// Instalación
npm install
// Arrancar servidor
npm run dev
Conexión con mongoDB
Será necesario crear un fichero (./config/config.env) para realizar la conexión con la base de datos. Yo he usado una cuenta Free con MongoDB, pero también podría ser local para testearlo
DATABASE=mongodb+srv://TU_USUARIO_MONGO_DB:<PASSWORD>@cluster0-bowo8.mongodb.net/NOMBRE_DE_TU_BASE_DE_DATOS?retryWrites=true
DATABASE_PASSWORD=contrasena_de_tu_base_de_datos
Crear directamente en la base de datos Mongo un usuario para poder acceder y crear a partir de este usuario, ya una vez logeado, el resto de usuarios
Los campos de la base de datos serán:
email: 'tu@email.com'
password: 'password_con_bcrypt_salt_10' //crear password usando Salt 10: https://bcrypt-generator.com/ (aunque se puede editar posteriormente)
name: 'tu nombre'
role: 'ADMIN'
Token encriptado con bcrypt. Puedes crear variable de entorno para Local y para Producción
// Ficheros:
// ./helpers/auth.js
// ./routes/auth.js
const jwtKey = process.env.JWT_SECRET || 'tu_palabra_super_secreta'
Aplicación vue
La aplicación vue se ejecutará en http://localhost:8081/ consumiendo datos del servidor
// Instalación
npm install
// Compilar y hot-reloads para desarrollo
npm run serve
// Compilar y minificar para producción
npm run build
Socket
Si la aplicación es llevada a producción, es necesario cambiar la ruta por el dominio que corresponda
// ./vue-client/src/main.js
Vue.use(new VueSocketIO({
debug: true,
connection: 'tu_dominio',
vuex: {
store,
actionPrefix: 'SOCKET_',
mutationPrefix: 'SOCKET_'
}
}));
Puede verse todo el código completo en mi Git