Text es un componente de tipo Display. Permite mostrar texto estático o dinámico con formato, usando sintaxis Markdown. Al arrastrarlo al lienzo viene con un contenido de ejemplo precargado (título, texto con negrita y link, y una lista).
Propiedades
Al seleccionar Text en el lienzo, el panel derecho muestra “Properties of Text” con las siguientes opciones:
Component ID: identificador único del componente, autogenerado (ej. txt_aef2f592).
Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).
Content (Markdown): campo de texto donde se escribe el contenido usando sintaxis Markdown (títulos con #, negrita con **texto**, links con [texto](url), listas con -, etc.).
Variant: menú desplegable que define el estilo tipográfico del texto. Opciones: Heading 1, Heading 2, Heading 3, Body, Caption.
Align: menú desplegable que define la alineación del texto. Opciones: Left, Center, Right.
Color: selector de color para el texto, con paleta visual y campos numéricos R / G / B para definir el color de forma manual.
Style → Custom Class: campo para asignar una clase CSS personalizada.
Style → Custom Style: campo de texto para CSS personalizado aplicado directamente a este componente.
Delete Component: elimina el componente del lienzo.
Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions .
Ejemplo de uso
El contenido se escribe en Markdown dentro de Content. Por ejemplo:
markdown
# Bienvenido a Nexus
Con este componente podés escribir texto con **negrita**, *cursiva* y enlaces, como este a la [documentación de Rocketbot](https://docs.rocketbot.com/).
- Primer ítem
- Segundo ítem
Con Variant se define si ese bloque de texto se comporta como un encabezado (Heading 1/2/3), texto de cuerpo (Body) o texto pequeño auxiliar (Caption). Con Align se controla la alineación horizontal, y con Color el color del texto.
Nexus – Elemento: Live Ticker
¿Qué es?
Live Ticker es un componente de tipo Display. Muestra una cinta de datos con desplazamiento continuo (scroll horizontal automático), ideal para destacar métricas o indicadores en tiempo real. Al arrastrarlo al lienzo viene con datos de ejemplo precargados (Revenue, NPS, Open incidents).
Propiedades
Al seleccionar Live Ticker en el lienzo, el panel derecho muestra “Properties of LiveTicker” con las siguientes opciones:
Component ID: identificador único del componente, autogenerado (ej. ltk_ca180ff8).
Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).
Ticker Label: texto que aparece fijo al inicio de la cinta (ej. LIVE).
Items (JSON): campo de código donde se define el contenido de la cinta en formato JSON. Cada ítem se compone de:
title: nombre del dato (ej. “Revenue”).
value: valor mostrado (ej. “$142.4k”).
delta: variación mostrada junto al valor (ej. “+8.2%”).
deltaDirection: dirección de la variación. Acepta "up" (variación positiva, se muestra en verde) y "down" (variación negativa, se muestra en rojo).
El editor valida el JSON en tiempo real (marca “✓ valid” cuando el formato es correcto).
Behavior → Loop Duration (sec): tiempo en segundos que tarda la cinta en completar un ciclo de desplazamiento (valor de ejemplo: 24).
Style → Custom Class: campo para asignar una clase CSS personalizada.
Style → Custom Style: campo de texto para CSS personalizado aplicado directamente a este componente.
Delete Component: elimina el componente del lienzo.
Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions.
Ejemplo de uso
Para agregar un nuevo ítem a la cinta, hay que ubicarse en la última llave } del bloque anterior dentro de Items (JSON), agregarle una coma, y pegar el nuevo bloque a continuación:
⚠️ Importante: la coma va pegada a la llave } del bloque anterior, no al principio del bloque nuevo.
Nexus – Elemento: Tabs
¿Qué es?
Tabs es un componente de tipo Layout (estructura). Organiza contenido en pestañas de navegación, mostrando una sección de contenido a la vez según la pestaña seleccionada. Al arrastrarlo al lienzo, viene con 3 pestañas de ejemplo precargadas (Overview, Details, Metrics).
Propiedades
Al seleccionar Tabs en el lienzo, el panel derecho muestra “Properties of Tabs” con las siguientes opciones:
Component ID: identificador único del componente, autogenerado (ej. tab_79660d88).
Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).
Tabs (JSON): campo de código donde se define el contenido en formato JSON. Cada pestaña se compone de:
label: texto visible de la pestaña.
value: identificador interno de la pestaña.
content: contenido que se muestra al seleccionar esa pestaña.
El editor valida el JSON en tiempo real (marca “✓ valid” cuando el formato es correcto).
Default Tab Value: define qué pestaña se muestra seleccionada por defecto al cargar la pantalla, referenciando el value de esa pestaña (ej. overview).
Style → Variant: menú desplegable que define el estilo visual de las pestañas. Opciones:
Underline: las pestañas se muestran como texto simple, con la pestaña activa subrayada/resaltada en color.
Pill: las pestañas se muestran como botones tipo “píldora”, con la pestaña activa marcada con fondo de color sólido.
Style → Custom Class: campo para asignar una clase CSS personalizada.
Style → Custom Style: campo de texto para CSS personalizado aplicado directamente a este componente.
Delete Component: elimina el componente del lienzo.
Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions.
Ejemplo de uso
Para agregar una nueva pestaña, hay que ubicarse en la última llave } del bloque anterior dentro del JSON de Tabs, y agregarle una coma. Después, pegar el nuevo bloque a continuación. Quedaría así:
⚠️ Importante: la coma va pegada a la llave } del bloque anterior (el último que ya existía en el JSON), no al principio del bloque nuevo. Si el bloque anterior era el último de la lista, hay que agregarle esa coma antes de pegar el nuevo bloque debajo.
Para que una pestaña específica aparezca seleccionada al abrir la pantalla, hay que colocar su value en el campo Default Tab Value (ej. resumen).
Nexus – Elemento: Accordion
¿Qué es?
El Accordion es un componente de tipo Layout (estructura). Muestra contenido organizado en secciones colapsables, cada una con un título y un contenido que se expande o contrae al hacer clic. Al arrastrarlo al lienzo, viene con 3 secciones de ejemplo precargadas (Section 1, Section 2, Section 3).
Propiedades
Al seleccionar el Accordion en el lienzo, el panel derecho muestra “Properties of Accordion” con las siguientes opciones:
Component ID: identificador único del componente, autogenerado (ej. acc_d0ebb60d).
Visibility → Hidden on load: casilla para que el Accordion esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).
Sections (JSON): campo de código donde se define el contenido del Accordion en formato JSON. Cada sección se compone de:
title: título de la sección.
content: contenido/texto que se muestra al expandir la sección.
open: solo puede usarse en la primera sección del arreglo; agregarla en cualquier otra sección genera un error de validación del JSON.
El editor valida el JSON en tiempo real (se ve la marca “✓ valid” cuando el formato es correcto).
Behavior → Allow Multiple Open: casilla que define si se puede tener más de una sección abierta a la vez.
Desactivado: al abrir una sección, las demás se cierran automáticamente (solo una abierta a la vez).
Activado: permite tener todas las secciones abiertas al mismo tiempo, sin límite.
Style → Custom Class: campo para asignar una clase CSS personalizada.
Style → Custom Style: campo de texto para CSS personalizado aplicado directamente a este componente.
Delete Component: elimina el Accordion del lienzo.
Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions.
Ejemplo de uso
Para agregar una nueva sección, se copia un bloque completo dentro del JSON de Sections (incluyendo la coma que lo separa del bloque anterior) y se modifican sus valores de title y content. Por ejemplo, para sumar una cuarta sección:
[
{
"title": "Section 4",
"content": "Contenido de la sección 4"
}
]
⚠️ Importante: la coma va pegada a la llave } del bloque anterior (el último que ya existía en el JSON), no al principio del bloque nuevo. Si el bloque anterior era el último de la lista, hay que agregarle esa coma antes de pegar el nuevo bloque debajo.
El Accordion no tiene límite de 3 secciones — se pueden agregar tantas como se necesite repitiendo este bloque.
Nexus – Elemento: Container
¿Qué es?
El Container es un componente de tipo Layout (estructura). Funciona como una caja flexible para agrupar otros componentes dentro del lienzo. Al arrastrarlo, aparece como un bloque vacío con el mensaje “Drop components here”, listo para recibir otros elementos en su interior.
Propiedades
Al seleccionar el Container en el lienzo, el panel derecho muestra “Properties of Container” con las siguientes opciones:
Component ID: identificador único del componente, autogenerado (ej. cnt_a36b5eba). Se usa para referenciarlo desde otras partes de la app (queries, acciones, scripts).
Visibility → Hidden on load: casilla para que el Container esté oculto al cargar la pantalla. Puede mostrarse luego en tiempo de ejecución mediante una acción de tipo Show (ver sección Events & Actions).
Direction: define la orientación en que se acomodan los componentes puestos dentro del Container. Opciones confirmadas: Vertical y Horizontal.
Gap (px): espacio entre los elementos internos del contenedor, en píxeles (valor por defecto: 16).
Padding (px): espacio interno entre el borde del contenedor y su contenido, en píxeles (valor por defecto: 16).
Background Color: color de fondo del contenedor.
Style → Custom Class: campo para asignar una clase CSS personalizada al componente.
Style → Custom Style: campo de texto para escribir CSS personalizado aplicado directamente a este componente.
Delete Component: botón para eliminar el Container del lienzo.
Events & Actions: sistema para definir comportamientos interactivos (qué pasa cuando ocurre determinado evento sobre el componente). Ver documentación aparte: Nexus – Events & Actions
Ejemplo de uso
Al colocar varios componentes dentro del Container (por ejemplo, textos, botones u otros elementos), estos quedan agrupados como una unidad dentro del lienzo. El panel de propiedades sigue mostrando las mismas opciones del Container aunque tenga contenido adentro.
Las propiedades Gap y Padding son las que permiten controlar visualmente el espaciado del grupo:
Aumentar el Gap separa más los componentes entre sí.
Aumentar el Padding agranda el espacio entre el borde del Container y los componentes de adentro, empujándolos hacia el centro.
Nexus – Screens
Las Screens (pantallas) son las vistas individuales que componen una aplicación en Nexus. Cada aplicación puede tener múltiples screens, construidas mediante un editor visual de tipo “arrastrar y soltar”.
1. Gestión de Screens
La sección Screens muestra el listado de pantallas existentes, con opción de crear una nueva. También hay un apartado de Deleted screens, con botón Restore para recuperarlas.
Cada screen en el listado muestra nombre, slug, fecha de última edición, y tres acciones:
Ícono de casa: convierte a esa screen en la pantalla principal (Home Screen) de la app.
Ícono de lápiz: editar la screen.
Ícono de tacho: eliminar la screen.
2. Crear una nueva Screen
Al hacer clic en “+ New Screen” se abre un formulario:
Screen Name: nombre de la pantalla.
Slug: identificador único (autogenerado, editable).
Set as default screen: define esta pantalla como principal desde su creación.
Initial Template: permite partir de una plantilla en vez de un lienzo vacío:
None (empty canvas): lienzo vacío.
Analytics Dashboard: pantalla de ejemplo con filtros, tarjetas de estadísticas (Revenue, Orders, Conversion) y gráfico de barras.
Admin CRUD: pantalla de ejemplo con buscador/filtros, tabla de administración con acciones por fila y paginación.
Landing + CTA: pantalla tipo landing, con título, texto, botón de acción e imagen/preview.
3. El Editor de Screens
El editor se divide en tres áreas:
Izquierda – Components: panel con todos los elementos disponibles para arrastrar al lienzo, organizados por categorías (Layout, Display, Form, Data).
Centro – Lienzo (Canvas): área de diseño donde se arma la pantalla.
Derecha – Propiedades: al no haber nada seleccionado, muestra Screen Settings (ancho, padding, grid overlay, color de fondo, comportamiento de borrado, CSS personalizado). Al seleccionar un componente del lienzo, muestra las propiedades específicas de ese componente.
Herramientas de la barra superior:
History: deshacer/rehacer cambios.
Reference: panel con funciones, queries, variables y componentes disponibles ($fn, $query, $var, $comp).
Preview: vista previa de la pantalla.
Save: guardar cambios.
Ícono sol/luna: alterna modo claro/oscuro del editor.
Ícono circular rojo (estrella): abre un asistente de IA (chatbot) dentro del editor.
4. Componentes disponibles
Cada componente, al arrastrarse al lienzo, despliega en el panel derecho sus propias propiedades de configuración (y en muchos casos, la opción de Events & Actions para definir comportamientos interactivos). El detalle de configuración de cada uno se documenta por separado.
Events & Actions es el sistema de Nexus para definir comportamientos interactivos en los componentes. Se encuentra en la pestaña Behavior de cada componente, mediante el botón + Add Action. Al agregarla, se abre un panel “New Action” donde se configura un disparador (Trigger) y una acción a ejecutar (Action Type). Según el Action Type elegido, el panel muestra dinámicamente los campos correspondientes a esa acción.
Trigger
Menú desplegable que define qué evento dispara la acción. Opciones disponibles:
On Click: se ejecuta al hacer clic sobre el componente.
On Load: se ejecuta al cargar el componente/pantalla.
On Change: se ejecuta cuando cambia el valor del componente.
On Event: se ejecuta ante un evento personalizado.
Action Type
Menú desplegable con el tipo de acción a ejecutar. Opciones disponibles:
Navigate
Show Alert
Execute Query
Execute API Call
Set Value
Run Script
Show Components
Hide Components
Enable Components
Disable Components
Refresh Component
Cada una de estas opciones despliega campos adicionales específicos, detallados a continuación.
Navigate
Target URL / Path: ruta o URL de destino a la que navega al ejecutarse la acción (ej. “/dashboard”).
Show Alert
Message: texto del mensaje a mostrar (ej. “Operation successful”).
Type: menú desplegable con el tipo de alerta, que determina su estilo visual. Opciones: –Select a type–, Info, Success, Warning, Error.
Execute Query
Query: menú desplegable donde se selecciona la consulta a ejecutar (placeholder “Select a query…”).
Parameters: sección para definir los parámetros que recibe la consulta. Con el botón + Add se agrega una fila por parámetro, compuesta por:
field (column): nombre del campo/columna al que corresponde el parámetro.
Valor asociado: referencia al dato que se pasa a ese campo (ej. $comp.inp_1, tomando el valor de otro componente).
Cada fila tiene un ícono de papelera para eliminarla.
If executed successfully (✓): bloque para configurar, mediante un botón “+”, una o más acciones que se ejecuten automáticamente si la query se ejecuta con éxito (por defecto: “No actions configured”).
If there is an error (✕): bloque equivalente para configurar acciones que se ejecuten si la query falla.
Execute API Call
API Call: menú desplegable donde se selecciona la llamada a API a ejecutar (placeholder “Select an API call…”).
Parameters: sección para definir los parámetros que recibe la API call. Con el botón + se agrega una fila por parámetro, compuesta por:
param name: nombre del parámetro.
Valor asociado: referencia al dato que se pasa a ese parámetro (ej. $comp.inp_1).
Cada fila tiene un ícono de papelera para eliminarla.
If executed successfully (✓): bloque para configurar, mediante un botón “+”, acciones que se ejecuten automáticamente si la API call responde con éxito.
If there is an error (✕): bloque equivalente para configurar acciones que se ejecuten si la API call falla.
Set Value
Assignments: sección para definir las asignaciones de valor a ejecutar. Con el botón + Add se agrega un bloque TARGET COMPONENT, compuesto por:
Select target component…: menú desplegable que lista los componentes disponibles en el lienzo (ej. “cnt_01bd8b73 (Container)”).
PROPERTY: propiedad del componente a modificar (ej. “value”).
VALUE / EXPR: valor o expresión a asignar (placeholder “$comp.inp_1 or text”), pudiendo ser un valor fijo o una referencia al dato de otro componente.
Cada bloque tiene un ícono de papelera para eliminarlo.
+ Add another assignment: permite agregar múltiples bloques TARGET COMPONENT, para asignar valores a varios componentes en una sola acción.
Run Script
Function: menú desplegable donde se selecciona la función/script a ejecutar (placeholder “Select a function…”).
Parameters: sección para definir los parámetros que recibe la función. Con el botón + se agrega una fila por parámetro, compuesta por:
param name: nombre del parámetro.
Valor asociado: referencia al dato que se pasa a ese parámetro (ej. $comp.inp_1).
Cada fila tiene un ícono de papelera para eliminarla.
If executed successfully (✓): bloque (resaltado en verde) para configurar acciones que se ejecuten si la función termina con éxito.
If there is an error (✕): bloque (resaltado en rojo) para configurar acciones que se ejecuten si la función falla.
Show Components
Muestra componentes que estaban ocultos (por ejemplo, los que tienen activada la casilla “Hidden on load”).
Components: sección donde se eligen los componentes a mostrar. Con el botón + se agrega una fila por componente, compuesta por:
Select component…: menú desplegable que lista los componentes disponibles en el lienzo (ej. “cal_03579022 (Calendar)”).
Un ícono de papelera para eliminar la fila.
Si no hay ningún componente seleccionado, el panel indica “No components selected. Add at least one.” (hay que agregar al menos uno).
From a Function: Nexus muestra un ejemplo de código de referencia (no es un campo configurable). Sirve para ejecutar esta misma acción desde un script de tipo Run Script, devolviendo lo siguiente:
Oculta componentes que están visibles en pantalla.
Components: sección donde se eligen los componentes a ocultar. Con el botón + se agrega una fila por componente, compuesta por:
Un menú desplegable que lista los componentes disponibles en el lienzo (ej. “cal_03579022 (Calendar)”).
Un ícono de papelera para eliminar la fila.
From a Function: Nexus muestra un ejemplo de código de referencia (no es un campo configurable). Sirve para ejecutar esta misma acción desde un script de tipo Run Script, devolviendo lo siguiente:
Habilita componentes que estaban deshabilitados, para que vuelvan a poder usarse.
Components: misma estructura que Hide Components (botón +, desplegable de componentes y papelera para eliminar cada fila), con el texto de ayuda “Select the components to enable.”
From a Function: Nexus muestra un ejemplo de código de referencia (no es un campo configurable). Sirve para ejecutar esta misma acción desde un script de tipo Run Script, devolviendo lo siguiente:
Deshabilita componentes para que no puedan usarse (por ejemplo, evitar que se interactúe con ellos).
Components: misma estructura que Hide Components, con el texto de ayuda “Select the components to disable.”
From a Function: Nexus muestra un ejemplo de código de referencia (no es un campo configurable). Sirve para ejecutar esta misma acción desde un script de tipo Run Script, devolviendo lo siguiente:
Vuelve a cargar componentes, para que actualicen su información.
Components to Refresh: sección donde se eligen los componentes a refrescar. Con el botón + Add se agrega una fila por componente, compuesta por:
Un menú desplegable que lista los componentes disponibles en el lienzo (ej. “cal_03579022 (Calendar)”).
Un ícono de papelera para eliminar la fila.
Si no se selecciona ningún componente, se refrescan todos los componentes de la pantalla (“Leave empty to refresh all components on the screen”).
Nexus – Guía de Primer Acceso
Esta guía describe el proceso de solicitud de acceso, los niveles de permisos disponibles y la experiencia inicial dentro de Rocketbot Nexus.
1. Requisitos Previos y Licenciamiento
Para acceder a Nexus, es necesario contar con la Licencia Suite Completa de Rocketbot.
Si deseas solicitar un entorno de prueba para evaluar el producto:
Ponte en contacto con el equipo de Soporte de Rocketbot.
Solicita la activación del Modo Prueba / Trial para la herramienta Nexus en tu cuenta.
2. Tipos de Permiso y Niveles de Acceso
El comportamiento de la plataforma variará dependiendo del rol o permiso asignado a tu usuario por el administrador de Rocketbot:
A. Usuario sin Permiso “Maker” (Sin proyectos asignados/Proyecto compartido)
Si es la primera vez que ingresas a Nexus y no cuentas con el rol de Maker, no tendrás permisos para crear nuevos proyectos ni administrarlos.
Pantalla de inicio: Al ingresar, la interfaz mostrará el mensaje:“No applications have been shared with you yet. You’ll see apps here when someone invites you.”
Proyectos Compartidos: Si un usuario con rol Maker te comparte una aplicación vía correo electrónico, podrás acceder únicamente a la interfaz en modo ejecución o lectura (vista previa/operativa). No podrás editar, alterar ni acceder a la lógica del diseñador de la aplicación.
B. Usuario con Permiso “Maker” (Desarrollador / Administrador)
Una vez que el administrador de Rocketbot otorga los permisos de Maker, se habilita el panel completo de gestión de aplicaciones.
Panel Principal (My Applications): Se habilitará la barra de información de tu entidad (Plan asignado, límite de aplicaciones, usuarios e interfaces permitidos) y el botón + New Application.
Gestión y Creación: Desde este panel podrás crear nuevos proyectos desde cero, diseñar vistas, construir interfaces avanzadas y administrar el ciclo de vida de tus aplicaciones.
3. Estados de la Interfaz
Estado del Usuario
Vista en Pantalla
Capacidades
Sin Permisos / Sin Proyectos
Mensaje No applications shared
Esperar invitación o asignación de rol Maker por Soporte.
Invitado a Aplicación
Dashboard de ejecución
Interactuar con la vista desarrollada sin permisos de edición.
Perfil Maker
Dashboard con botón + New Application
Crear, editar, publicar y gestionar aplicaciones completas.
Nexus – Dashboard
Requisito previo: Para acceder a la interfaz de desarrollador del Dashboard, es indispensable contar previamente con el Modo Maker activado.
En la esquina superior derecha de la interfaz se encuentra desplegado el Menú de Usuario, al cual se accede haciendo clic sobre el correo electrónico asociado a la cuenta.
Opciones del Menú:
Información de Cuenta: Muestra el correo electrónico del perfil actual.
Rol / Permiso: Muestra la insignia del nivel de acceso actual (por ejemplo, MAKER).
Dashboard: Enlace directo para regresar a la vista principal de gestión de aplicaciones.
MCP Keys: Sección destinada a la gestión de claves de integración y conectores.
Logout: Opción para cerrar la sesión activa de forma segura.
2. Barra Superior Informativa y Preferencias de Tema
En la parte superior de la pantalla principal se ubican los indicadores generales de la entidad y las herramientas de personalización visual:
Cambio de Tema (Dark / Light): Ubicado en la esquina superior derecha (icono de sol/luna), permite alternar entre el modo oscuro y el modo claro según la preferencia del usuario.
Barra de Métricas del Plan:
Entity: Nombre de la entidad u organización activa.
Plan: Tipo de suscripción (ej. Enterprise).
Apps: Cantidad de aplicaciones creadas respecto al total permitido.
Limits: Límites configurados de usuarios por aplicación y pantallas por aplicación.
Expires: Fecha de vencimiento de la suscripción o plan actual.
3. Gestión de Aplicaciones Propias (My Applications)
En este panel principal se listan todas las aplicaciones creadas por el usuario donde posee permisos de edición y administración.
Herramientas de Organización y Búsqueda:
Modo de Vista: Permite alternar entre Vista de Cuadrícula (Grid) y Vista de Lista (List) según la comodidad visual.
Barra de Búsqueda: Filtro por texto para localizar aplicaciones rápidamente por su nombre o descripción.
Filtro de Estado (All statuses): Menú desplegable para segmentar proyectos según su estado:
Draft (Borradores)
Published (Publicados)
All statuses (Todos los estados)
Tarjeta de Aplicación:
Cada aplicación creada muestra la siguiente información y acciones:
Icono identificativo y título.
Estado actual (ej. Draft o Published).
Descripción de la aplicación.
Antigüedad / Fecha de creación.
Botones de Acción:
✏️ Editar: Permite ingresar al entorno de desarrollo e iteración de la app.
🗑️ Borrar: Elimina la aplicación seleccionada.
4. Proyectos Compartidos (Shared With Me)
En la sección inferior se muestran aquellos proyectos a los cuales el usuario ha sido invitado por otros creadores o entidades (ejemplo: Municipalidad Virtual).
Nivel de Permisos: En estas aplicaciones no se cuentan con permisos de modificación.
Modo Lectura / Ejecución: El usuario únicamente dispone de la vista de uso de la aplicación, sin opción de editar su estructura, diseño o lógica interna.
5. Creación de una Nueva Aplicación
Para iniciar un nuevo proyecto, se debe seleccionar el botón + New Application ubicado en el panel principal. Esto desplegará el formulario lateral de configuración inicial.
Campos de Configuración:
Campo
Descripción
Name *
Nombre de la aplicación (campo obligatorio).
Description
Resumen o propósito general del proyecto.
Icon
Selección de un icono predeterminado desde la galería integrada.
Custom emoji or icon URL
Permite ingresar un emoji personalizado o pegar el enlace de un icono externo (https://...).
Card Background / Custom color
Paleta de colores predefinidos o selector de color personalizado para la tarjeta en el Dashboard.
Preview
Muestra en tiempo real cómo se visualizará la tarjeta de la aplicación.
Published
Casilla de verificación: Si se deja desmarcada, la aplicación se guardará como Draft. Al marcarla, pasa a estado Publicado, permitiendo que los usuarios autorizados tengan acceso a ella.
Al finalizar la configuración, se presiona el botón Create Application.
Nota: Una vez creada la aplicación, se redirigirá automáticamente a un nuevo menú de desarrollo interactivo con las herramientas avanzadas para diseñar, construir y modificar los componentes de la app.
Nexus: Edición de Aplicación — App Overview
La sección App Overview es el panel de configuración general para una aplicación dentro de Nexus. Desde esta vista se gestionan las pantallas, la interfaz (encabezados, pies de página, temas), la asignación de usuarios, las claves de API, las variables globales, los tokens de Gateway y los registros de actividad.
1. Cabecera e Identificador de App
En la parte superior de la interfaz de edición se muestran los datos de identificación de la aplicación:
Nombre de la Aplicación: Se visualiza con un icono de lápiz a su lado para modificar el nombre del proyecto.
ID: Muestra el identificador único de la aplicación junto a un botón para copiarlo al portapapeles.
2. Pantallas (Screens)
Esta sección está destinada a la gestión y creación de las vistas de la aplicación.
🔗 Nota sobre la edición de Pantallas: La configuración, diseño y maquetación detallada de las pantallas cuenta con su propia documentación dedicada debido a su complejidad. Puedes acceder a ella a través del siguiente enlace: [Guía detallada de edición de Screens].
Opciones disponibles en el panel:
+ New Screen: Botón para crear una nueva pantalla.
Pantallas Eliminadas (Deleted screens): Muestra el listado de pantallas que han sido borradas, permitiendo recuperarlas mediante el botón Restore.
3. Configuración del Encabezado (Header Configuration)
Permite definir los elementos visuales de la barra superior en la aplicación:
Logo URL: Campo para ingresar el enlace de la imagen del logotipo.
Header Title: Campo para definir el título visible en el encabezado.
Background Color / Text Color: Controles para elegir el color del fondo y del texto mediante código hexadecimal o selector visual.
Preview: Vista previa interactiva de la barra según los colores y el título ingresados.
+ Add Menu Item: Botón para añadir elementos o secciones de menú al encabezado. Al hacer clic en él, se despliega un formulario para configurar el elemento con las siguientes opciones:
Label: Campo de texto para ingresar el nombre visible del item del menú.
Icon (optional): Permite asignar un ícono o emoji para acompañar al texto del enlace.
Link Type: Selección mediante botón de opción para definir el tipo de destino:
Screen: Redirige a una pantalla interna de la aplicación. Habilita el menú desplegable Select Screen (-- Select a screen --) para seleccionar la pantalla deseada.
Custom URL: Permite ingresar un enlace o dirección web externa.
Botón de eliminación (X rojo): Permite remover el item de menú creado.
Show User Profile in Header: Casilla de verificación para activar o desactivar la visualización del perfil de usuario en la barra superior.
Botones de acción:
Reset: Para restaurar los valores anteriores.
Save Configuration: Para guardar los cambios realizados.
4. Configuración del Pie de Página (Footer Configuration)
Administra la barra inferior de la aplicación:
Enable Footer: Casilla de verificación para habilitar o deshabilitar la presencia del pie de página.
Background Color / Text Color: Ajuste de color del fondo y texto del footer.
Height (px): Campo numérico para definir la altura en píxeles del pie de página.
HTML Content: Área de texto que permite ingresar código HTML personalizado (como etiquetas <div>, estilos o texto).
Preview: Muestra en pantalla el resultado final del código HTML y colores seleccionados.
Botones de acción:Reset y Save Configuration.
5. Configuración de Tema (Theme Configuration)
Establece las preferencias de apariencia visual de la app:
Default Theme for App: Selector desplegable para definir el tema predeterminado (Light) que se aplicará al abrir la app cuando no haya preferencias guardadas en el navegador del usuario.
Show theme switch button in runtime app: Casilla de verificación que, al estar activa, muestra el botón para que los usuarios alternen el tema visual durante la ejecución de la app.
Botones de acción:Reset y Save Configuration.
6. Usuarios de la Aplicación (Users)
Sección App Users destinada a invitar y asignar roles a otros usuarios mediante correo electrónico.
Invitar usuarios:
Email: Campo de texto (user@example.com) para colocar la dirección del invitado.
Role: Desplegable con tres niveles de acceso:
Viewer: Puede ver la aplicación publicada y sus datos.
Maker: Puede editar el contenido de la app (queries, llamadas a API, funciones).
Admin: Puede gestionar usuarios además de poseer todas las capacidades de un Maker.
+ Invite: Botón para enviar la invitación al usuario.
7. Claves de API (API Keys)
Sección para generar llaves de acceso programático a los datos de la aplicación a través de la API externa.
Generación de llaves:
Key Name: Campo de texto para nombrar la clave (ej. Production Backend, Mobile App…).
Expiration: Selector desplegable con opciones de caducidad: 30 días, 60 días, 90 días o Sin expiración.
Generate: Botón para crear la API Key.
Guía de uso en interfaz (How To Use):
Autenticación: Requiere incluir la clave en el encabezado X-API-Key de la petición HTTP.
Endpoints disponibles (Available endpoints):
Tablas (TABLES):
GET /api/v1/external/tables — Listar tablas (List tables).
GET /api/v1/external/tables/:id — Obtener tabla (Get table).
POST /api/v1/external/tables — Crear tabla (Create table).
PUT /api/v1/external/tables/:id — Actualizar tabla (Update table).
DELETE /api/v1/external/tables/:id — Eliminar tabla (Delete table).
Filas (ROWS):
GET /api/v1/external/tables/:id/rows — Listar filas con opciones de límite y desplazamiento (List rows (limit, offset)).
POST /api/v1/external/tables/:id/rows — Insertar fila (Insert row).
PUT /api/v1/external/rows/:id — Actualizar fila (Update row).
DELETE /api/v1/external/tables/:id/rows — Borrar todas las filas (Erase all rows).
PUT /api/v1/external/tables/:id/rows/:rowId/cells/:col — Actualizar celda específica (Update cell).
Consultas (QUERIES):
GET /api/v1/external/queries — Listar consultas (List queries).
POST /api/v1/external/queries/:id/execute — Ejecutar consulta (Execute query).
8. Variables de la Aplicación (Variables)
Permite definir variables globales (App Variables) como llaves de API o constantes de configuración para usarlas en queries, llamadas API y funciones JS.
Creación de variables (+ / New Variable):
Key: Nombre de la variable (acepta letras, números y guiones bajos; no se puede editar una vez creada).
Value: Valor asignado a la variable.
Secret: Casilla opcional para enmascarar el valor en la interfaz gráfica y excluirlo del frontend (disponible únicamente del lado del servidor).
Botones:Create y Cancel.
Uso dentro de la plataforma (How To Use):
En Queries (filtro de valor):$var.MY_API_KEY o {{var.MY_API_KEY}}.
En API Calls (URL, headers, body):{{var.MY_API_KEY}} o $var.MY_API_KEY.
En JS Functions:const key = $var.MY_API_KEY;.
9. Pasarela (Gateway)
Sección Gateway Tokens encargada de administrar los tokens para conectar el agente rbnx-gateway con bases de datos locales.
Creación y gestión de Tokens:
+ New Token: Abre la opción para asignar un Name (ej. Local MySQL Server) y presionar Create.
Token generado: Genera una cadena que debe copiarse en el momento (Copy), ya que no se vuelve a mostrar.
Archivos auxiliares: Incluye enlace de descarga para config.yaml y botón con icono de descarga para el agente ejecutable.
Acciones en lista de tokens: Cada token creado muestra su estado (Active) y cuenta con opciones para deshabilitarlo o eliminarlo (icono de papelera).
Pasos indicados en la interfaz (How to use the Gateway?):
Crear un token y descargar el archivo config.yaml.
Descargar el agente rbnx-gateway para la plataforma correspondiente.
Editar config.yaml con los detalles de la base de datos local.
Ejecutar el comando ./rbnx-gateway --config config.yaml.
En la app, crear un DataSource de tipo Gateway On-Premises y seleccionar dicho token.
10. Registros de Actividad (Activity Logs)
Muestra la lista de acciones realizadas por usuarios con rol Maker y Viewer en la aplicación.
Listado de datos en tabla:
USER: Dirección de correo del usuario.
METHOD: Método de la petición (DELETE, POST, etc.).
PATH: Ruta del endpoint consultado (ej. /api/v1/gateway/gateway-tokens/...).
STATUS: Código de respuesta de la petición (ej. 200, 201).
DURATION: Tiempo de respuesta medido en milisegundos (ej. 25ms).
DATE: Fecha y hora exacta de la acción.
Botón Refresh: Ubicado en la parte superior derecha para actualizar el historial de eventos.
