Introduction

Guía de instalación del ADK

Guía de instalación del ADK

Tu editor de IA ya conoce tu base de datos de Ninox: listo en 10 minutos

Construyes interfaces de Ninox con los widgets de Arc Rider y quieres ayuda para escribir el código. Alguien que conozca tu base de datos, la sintaxis y cómo funcionan los widgets.

Eso es el Arc Rider Developer Kit (ADK). Conecta un editor de IA con tu base de datos de Ninox y nuestra documentación de widgets. Describes lo que quieres. La IA escribe el código.

No hace falta saber programar. Esta guía usa Cursor. Los mismos comandos valen para Claude Code.

Qué tienes al final

mi-proyecto-ninox/
├── .cursor/rules/       ← Reglas para la IA (sintaxis NinoxScript, propiedades)
├── docs/                ← Documentación de los widgets
├── ninox/               ← El esquema de tu base de datos (tablas, campos, relaciones)
├── spaces/              ← Tus configuraciones de widgets (archivos .arc)
└── package.json

La IA lee estos archivos en segundo plano. Tú describes lo que hay que construir.

Antes de empezar

• Una cuenta de Ninox con widgets de Arc Rider activos – <a href="/widgets">pedir widgets</a>
• <a href="https://nodejs.org">Node.js</a> 18 o superior. Instala la versión LTS una sola vez.

Paso 1: Instalar Cursor

<a href="https://cursor.com">Cursor</a> es un editor de código con IA integrada. Los archivos se quedan en tu ordenador. Cuando el esquema de Ninox está en local, la IA conoce tus tablas y campos. El plan gratuito basta para empezar.

1. Entra en <a href="https://cursor.com">cursor.com</a>. 2. Descarga la versión de tu sistema. 3. Instálala y crea una cuenta gratuita.

Paso 2: Crear la carpeta del proyecto

Crea una carpeta vacía, por ejemplo mi-proyecto-ninox. En Cursor elige File → Open Folder, o arrastra la carpeta a la ventana.

Paso 3: Instalar el ADK

Abre la terminal en Cursor (Terminal → New Terminal, o Ctrl + ` ``).

npm install @arcrider/developer-kit
npx arc-rider-init

El paquete incluye la documentación de los widgets, las reglas de la IA y la herramienta de Ninox que descarga el esquema. No hace falta un segundo paquete.

arc-rider-init crea:

• .cursor/rules/ – reglas de IA para NinoxScript y las propiedades de los widgets
• docs/ – la referencia de widgets
• ninox/ – aquí irá el esquema de tu base de datos
• spaces/ – tus configuraciones, por ejemplo spaces/dashboard/main.arc

Paso 4: Introducir los datos de acceso de Ninox

Crear una API key

1. Abre tu instancia de Ninox en el navegador. 2. Haz clic en el icono de tu perfil. 3. Ve a Ajustes → API Keys. 4. Crea una clave y cópiala.

Las API keys dan acceso completo a tus datos de Ninox. No las compartas. config.yaml se queda en tu equipo y no se sube a Git.

Dominio, ID del workspace e ID de la base de datos

Los IDs están en la URL del navegador cuando la base de datos está abierta.

Public Cloud (app.ninox.com):

• Ejemplo: https://app.ninox.com/#/teams/Xk7mNpQr2sT4wYz/database/a9b3c7d2e1f/
• ID del workspace: la parte después de teams/
• ID de la base de datos: la parte después de database/
• Dominio en la config: siempre https://api.ninox.com (no app.ninox.com)

Private Cloud: usa tu URL de API, por ejemplo https://meinefirma.ninoxdb.com. Lee los IDs de la URL del mismo modo.

Archivo de configuración

arc-rider-init ya ha creado ninox/config.yaml. Rellena environments.dev:

environments:
  dev:
    domain: https://api.ninox.com
    apiKey: tu-api-key
    workspaceId: TU_WORKSPACE_ID
    databases:
      - id: "TU_DATABASE_ID"
        name: "Mi proyecto"

app.ninox.com es solo la interfaz web. El dominio de la API es https://api.ninox.com.

Paso 5: Descargar el esquema

npm run ninox:download

Si hay varias bases de datos, eliges una. Con una sola se selecciona sola. Opcional: --db=TU_DB_ID.

Después, ninox/src/Objects/ tiene un archivo por tabla, con campos, tipos y relaciones. La IA usa esos nombres reales.

Tu primer prompt

Abre el agente de Cursor (Cmd+L en Mac, Ctrl+L en Windows) y prueba:

Crea un space nuevo "dashboard" y monta un layout de dashboard
para la tabla "Pedidos".
Arriba una barra de KPI: pedidos abiertos, importe total, importe medio.
Debajo una tabla con las columnas: título, cliente, importe, estado como badge.

La IA escribe spaces/dashboard/main.arc. Cada función tiene su propio space. Usa shared/ para colores, tipografía y piezas que comparten varios spaces.

Pegar el código en Ninox

1. Abre spaces/dashboard/main.arc. 2. Copia todo el archivo. 3. Pégalo en un campo de fórmula de Ninox, allí donde debe aparecer el widget.

Si prefieres la terminal, configura el campo en ninox/ninox-mapping.yaml y ejecuta npm run ninox:push.

ninox:upload puede cambiar la estructura de la base de datos. El flujo normal solo necesita ninox:download (leer) y ninox:push (escribir el código en un campo de fórmula).

Consejos para mejores prompts

Nombra tablas y campos:

Usa la tabla "Contactos" y muestra
los campos "Nombre", "Email", "Teléfono" y "Estado".

Cambia una cosa cada vez:

Añade paginación con 20 filas por página.
Muestra la columna "Importe" como número con €.

Preguntas frecuentes

¿Tengo que saber programar? No. Describes lo que quieres. La IA escribe el código. Tú lo pegas en Ninox.

¿Qué es npm? npm viene con Node.js. Descarga paquetes. Lo necesitas para la instalación. Después trabajas en Cursor.

¿Necesito la versión de pago de Cursor? No. El plan gratuito basta para empezar.

¿Qué pasa si cambia mi esquema? Vuelve a ejecutar npm run ninox:download.

¿Funciona sin los widgets de Arc Rider? No. Sin los widgets falta en Ninox el código global sobre el que se construyen las configuraciones. Necesitas una suscripción activa. Pídelos en la <a href="/widgets">tienda de widgets</a>.

Resumen

npm install @arcrider/developer-kit
npx arc-rider-init
npm run ninox:download