Como el corazón de tu aplicación, la página del tablero debe ser lo suficientemente flexible para adaptarse a las diversas necesidades de contenido. Los widgets que muestran todo tipo de datos siempre serán la base de cualquier aplicación de Ubidots, pero muchas veces otros tipos de contenido son críticos para la operación y necesitan un lugar de fácil acceso, como es el caso de la página del tablero.
Ahí es donde entran las Páginas de Tablero: te brindan una forma de adaptar aún más tu experiencia en Ubidots al expandir el tipo de contenido que se muestra en un lugar tan destacado como el tablero.
Requisitos
Una cuenta de Ubidots con plan Industrial en adelante.
1. Qué son las Páginas de Tablero
Las Páginas de Tablero son una forma de personalizar aún más tus aplicaciones de Ubidots definiendo el tipo de contenido que se muestra en cualquier tablero de manera granular. Mientras que un tablero predeterminado de Ubidots solo se puede usar para mostrar widgets y sus datos correspondientes, una Página de Tablero mostrará cualquier contenido que tú y tu operación necesiten.
Al usar una página de tablero personalizada, puede mostrar dos tipos de contenido:
Páginas personalizadas. De manera similar a un widget Canvas HTML, esta función le permite exponer interfaces de usuario livianas, personalizadas y diseñadas específicamente en los paneles de Ubidots o incluso de manera pública. La diferencia clave con respecto a un Canvas HTML es que una página carga el código personalizado tomando todo el ancho y alto del tablero desde donde se carga, en lugar de limitarse al contenedor de un widget.
Páginas existentes embebidas. Esto podría ser cualquier cosa, desde un video que explica cómo usar la plataforma hasta una aplicación de terceros que sea importante para su operación.
2. Creando una Página de Tablero
La creación de páginas de tablero, ya sea embebiendo URL ya existentes o páginas personalizadas, requiere solo unos pocos pasos:
Mientras estés en un tablero, haz clic en el botón de menú ubicado en la esquina superior izquierda de la pantalla. En el panel que se abre, crea un nuevo tablero o edita uno existente.
Desplázate hacia abajo en el menú de configuración hasta encontrar la opción "tipo de tablero". Selecciona la opción "personalizado" en el menú desplegable que está junto a esta opción.
Justo debajo de la opción "tipo de tablero", verás la opción "URL de página personalizada", pega la URL de la página que deseas embeber allí.
Configura otras opciones del tablero para satisfacer tus requisitos (como su nombre) y cuando hayas terminado, haz clic en el botón "guardar".
Notas importantes:
Algunas páginas no se pueden embeber. Esto no tiene nada que ver con Ubidots ni con la función de tipo de tablero, sino con una restricción configurada en esas páginas específicas, como es el caso de Google, por ejemplo.
Se puede interactuar con las páginas embebidas. Puedes usar los botones disponibles y navegar libremente a través de ellas.
Ciertas páginas son embebidas e interactivas, excepto por sus portales de inicio de sesión. Esto significa que no podrás iniciar sesión en esa página específica a través de un tablero de Ubidots.
3. Desarrollando Páginas de Tablero
Puedes desarrollar tus propias páginas usando HTML, JavaScript y React para crear visualizaciones completamente personalizadas que cumplan con requisitos que no son abordados de forma nativa por la plataforma.
Para desarrollar tu propia página personalizada e implementarla con éxito en Ubidots, debes consultar nuestra documentación técnica, donde se cubre cada aspecto y paso adecuadamente. Dicho esto, aquí hay una descripción general del proceso de creación de una página personalizada:
Las páginas personalizadas se estructuran en torno a un conjunto específico de archivos. Estos archivos no solo determinan la configuración de la página (por ejemplo, referencias a bibliotecas CSS y JavaScript expuestas a CDN locales o externas), sino que también definen su lógica y funcionalidad general. La estructura de archivos de una página es la siguiente:
├── manifest.toml
├── script.js
├── body.html
├── style.css
├── static
│ ├── some_files_or_folders
Luego de crear los archivos necesarios, el proceso continúa con la creación de la página en Ubidots. Una página personalizada es la entidad en Ubidots que contendrá el código personalizado de los archivos y proporcionará una referencia a este que se puede cargar desde una página del tablero.
Nota: Actualmente, todo el proceso CRUD (crear, leer, actualizar y eliminar) de las páginas se realiza a través de la API. Esto cambiará en un futuro cercano para que este proceso se realice a través de la interfaz de la plataforma.
Durante el proceso de creación de la página en Ubidots obtendrás el ID de tu página. Para finalizar el proceso, tienes que subir un archivo ZIP que contenga todos los archivos que creaste previamente y “ensamblar” la URL de tu página usando su ID, de esta manera:
https://industrial.ubidots.com/app/pages/public/<page_id>
Luego, esa URL se pega en el campo "URL de página personalizada" de un nuevo tablero. Una vez que guardes tu tablero, tu página se mostrará en él.
Recuerda leer nuestra documentación técnica para conocer en detalle el proceso de creación de una página personalizada. |