Cómo Personalizar la Aplicación Web de Traccar HTML React

Curso de traccar

Accede al curso de traccar aqui: Curso de traccar

¿Te has preguntado cómo darle tu toque personal a la aplicación web de Traccar? Personalizar su apariencia puede hacer que tu experiencia sea más agradable y adaptada a tus gustos. En este artículo, te explicaremos paso a paso cómo cambiar los colores, logos y otros elementos visuales de Traccar.

Si estas buscando algo menos avanzado te recomendaria revisar esta entrada Cómo Personalizar la Aplicación Web de Traccar desde la plataforma

Puedes encontrar el video guiado aquí Cómo Personalizar Traccar Web.

También te podría interesar cómo actualizar Traccar en DigitalOcean.

Preparación del Entorno

Antes de sumergirnos en la personalización, es importante que tengas el entorno adecuado configurado. Aquí te dejamos los pasos necesarios para preparar tu entorno de desarrollo:

Descargar el Código Fuente: Ve al repositorio de Traccar en GitHub y clona el proyecto o descárgalo directamente.
Instalar Dependencias: Asegúrate de tener instalado Node.js y Visual Studio Code. Abre una terminal, navega al directorio del proyecto y ejecuta npm install para instalar las dependencias necesarias.
Configurar el Servidor: Si ya tienes tu servidor de Traccar listo, puedes conectarlo al entorno local cambiando las configuraciones necesarias en el archivo vite.config.js.

Cambiar los Colores de la Aplicación

Los colores juegan un papel crucial en la apariencia de cualquier aplicación. Aquí te mostramos cómo puedes personalizar los colores en Traccar:

Editar la Paleta de Colores

Ubicar el Archivo de Estilos: Abre el archivo src/common/theme/palette.js.
Modificar Colores: Dentro de este archivo, encontrarás las variables que definen los colores principales de la aplicación. Por ejemplo:
```
  primary: {
    main: "#0dd3ba",
  },
```
Utilizar Herramientas de Colores: Puedes usar herramientas como Coolors para generar paletas de colores atractivas.

Implementar los Cambios

Guardar y Compilar: Después de hacer los cambios, guarda el archivo y compila el proyecto con npm run build.
Ver los Resultados: Inicia el servidor con npm run start y revisa los cambios en tu navegador.

Personalizar los Logos e Imágenes

El logo de tu aplicación es una parte esencial de su identidad visual. Cambiarlo es sencillo:

Cambiar el Logo

Ubicar la Carpeta Public: Navega a la carpeta public.
Reemplazar el Logo: Encuentra el archivo del logo actual (por ejemplo, logo.png) y reemplázalo con tu nuevo logo. Asegúrate de que el nombre del archivo coincida.

Ajustar el Código

Modificar el Código HTML: Si es necesario, ajusta el archivo HTML correspondiente (por ejemplo, index.html) para asegurarte de que el logo se muestra correctamente.
Verificar los Cambios: Guarda todos los archivos y vuelve a iniciar el servidor para verificar los cambios.

Ajustes Adicionales

Además de los colores y logos, puedes personalizar otros elementos de la interfaz:

Cambiar el Tamaño de los Elementos

Modificar Dimensiones: En el archivo theme.scss, también puedes ajustar las dimensiones de los elementos clave. Por ejemplo:
```
$header-height: 60px;
$sidebar-width: 250px;
```
Guardar y Compilar: Realiza los cambios necesarios, guarda el archivo y compila el proyecto.

Modo Oscuro y Claro

Configurar Modos: Añade configuraciones para soportar modos oscuro y claro, ajustando las variables de colores según el modo seleccionado.
Probar los Modos: Asegúrate de probar ambos modos para verificar que los colores se adapten correctamente.

Personalización desde la Plataforma (Sin Código)

Si prefieres no modificar el código fuente de React, Traccar permite personalizar la marca básica de la aplicación directamente desde la plataforma mediante la configuración del servidor.

1. Carga de Imágenes

Puedes reemplazar las imágenes básicas y logotipos cargando tus archivos desde la configuración del servidor. Asegúrate de respetar los nombres exactos:

apple-touch-icon-180x180.png: Icono para dispositivos Apple (180x180 px).
favicon.ico: Icono estándar para la pestaña del navegador.
logo.svg: Logotipo principal vectorial.
pwa-192x192.png / pwa-512x512.png: Iconos para PWA.

2. Parámetros de Marca (Atributos)

En la configuración del administrador puedes establecer los siguientes atributos del sistema:

Logo de la Imagen: Define la URL o ruta del logo para la pantalla de inicio de sesión.
Nombre del Servidor: Título corto de la página web.
Descripción del Servidor: Texto descriptivo para metadatos de la PWA.
Colores del Tema: Ajusta el color primario (por defecto índigo) y secundario (por defecto verde) sin tocar archivos de estilo.

Conclusión

Personalizar la aplicación web de Traccar puede hacerse a través de código React para un control absoluto, o mediante el panel de administración para cambios rápidos de marca. Experimenta y ajusta la plataforma según las necesidades de tu marca.

Si te ha gustado este tutorial, ¡no dudes en compartirlo y dejar tus comentarios sobre qué más te gustaría aprender!

Contenido del curso