Saltar al contenido principal

Construir con herramientas de IA

La Copera Starter Application te da una base funcional lista para usar. Los asistentes de programación con IA pueden acelerar drásticamente la rapidez con la que la personalizas y la extiendes — convirtiendo lo que podría tardar días en horas, y horas en minutos.

El concepto​

Cuando trabajas con la Starter Application, ya tienes la autenticación, el enrutamiento, la obtención de datos y los patrones de UI en su lugar. Tu trabajo es adaptar esta base a tu caso de uso específico — cambiar qué datos muestras, añadir nuevas páginas, conectar nuevas columnas de Copera Board o conectar nuevos flujos de trabajo.

Las herramientas de IA destacan exactamente en este tipo de tarea. Dales el contexto adecuado y generarán nuevas páginas, componentes y rutas de API que encajan con los patrones de tu base de código existente. La clave es el contexto: cuanto más entienda la IA sobre la estructura de tu proyecto y la configuración de tu Copera Board, mejor será su resultado.

Usar Copera AI​

Copera tiene un asistente de IA integrado que ya entiende tu espacio de trabajo, tus boards y tus datos.

Lo que puedes preguntarle:

  • "¿Qué columnas tiene mi board de Tickets y cuáles son sus IDs?"
  • "¿Cómo consulto filas de la tabla Orders donde Status sea 'Pending'?"
  • "Genera un snippet del SDK de Copera que cree una nueva fila en mi board de Projects con un Name y una Due Date."

Como Copera AI tiene acceso directo a la estructura de tu espacio de trabajo, puede darte IDs de columna y nombres de tabla precisos sin que tengas que buscarlos manualmente. Úsalo como tu primera parada cuando necesites entender la estructura de tus datos antes de escribir código.

consejo

Copia los IDs de columna y de tabla que Copera AI te dé directamente en tu archivo config.ts. Esto facilita compartir contexto preciso con otras herramientas de IA más adelante.

Usar Claude, ChatGPT o Gemini​

Los asistentes de IA de propósito general funcionan bien para generar páginas, componentes y lógica — siempre que les des suficiente contexto sobre tu proyecto de entrada.

Iniciar una conversación​

Abre una nueva conversación y proporciona este contexto al principio:

"Estoy construyendo una aplicación personalizada usando el SDK de Copera (@copera.ai/sdk). La aplicación se conecta a Copera Boards, que actúan como mi base de datos. Estoy trabajando a partir de la Copera Starter Application. La documentación de la plataforma está en https://university.copera.ai/university/developers/starter-application/overview"

Este único párrafo orienta a la IA hacia tu stack. A partir de aquí, puede generar código que use el SDK correctamente.

Compartir la estructura de tus columnas​

Pega tu archivo config.ts en la conversación. Este archivo mapea los IDs de columna de tu Board a nombres legibles. Con este contexto, la IA sabe exactamente qué campos referenciar en cualquier código que genere.

// Fragmento de ejemplo de config.ts
export const COLUMNS = {
  TICKET_TITLE: 'col_abc123',
  TICKET_STATUS: 'col_def456',
  TICKET_ASSIGNEE: 'col_ghi789',
  TICKET_PRIORITY: 'col_jkl012',
};

Ejemplos de prompts que funcionan bien​

  1. Añadir un nuevo campo a la vista de detalle:

    "Añade una columna 'Priority' a la página de detalle del ticket. El ID de la columna en Copera es col_jkl012. Muéstrala como una insignia de color: rojo para High, amarillo para Medium, verde para Low."

  2. Crear una nueva página de dashboard:

    "Crea una nueva página en /dashboard que muestre los recuentos de tickets agrupados por Status. Usa los patrones de React Query existentes del proyecto."

  3. Añadir un flujo de notificación:

    "Añade una notificación por correo cuando la columna Status de un ticket cambie a 'Done'. Usa la integración de webhooks del SDK de Copera."

  4. Adaptar la app a un caso de uso diferente:

    "Convierte esta aplicación de mesa de ayuda en un catálogo de productos. Necesito columnas para Product Name, Price, Description e Image URL. Aquí están los IDs de columna de mi board de Copera..."

nota

Revisa siempre el código generado por IA antes de ejecutarlo. Verifica que los IDs de columna coincidan con los valores reales de tu config.ts y que las llamadas a la API sigan los patrones de la Starter Application.

Usar IDEs con IA (Cursor, Windsurf y otros)​

Los IDEs con IA incorporan el asistente de IA directamente en tu editor de código. Pueden leer toda tu base de código para obtener contexto, lo que los hace especialmente efectivos para la Starter Application.

Orientar el IDE hacia tu arquitectura​

La Starter Application incluye un archivo CLAUDE.md tanto en base-application-api/ como en base-application-web/. Estos archivos están escritos específicamente para que los asistentes de IA puedan entender:

  • El stack tecnológico (framework, bibliotecas, versiones)
  • La estructura de carpetas y dónde pertenece cada tipo de archivo
  • Las convenciones de código y los patrones de nomenclatura
  • Cómo conectarse al SDK de Copera

Añade el archivo CLAUDE.md como documento de referencia en la configuración de contexto de tu IDE. La IA generará entonces código que siga los patrones establecidos en lugar de inventar los suyos propios.

Añadir documentación como contexto​

La mayoría de los IDEs con IA te permiten añadir URLs o documentos como material de referencia. Añade la documentación para desarrolladores de Copera University:

https://university.copera.ai/university/developers/starter-application/overview

Esto le da a la IA del IDE acceso a la referencia del SDK, para que pueda generar llamadas a la API precisas.

consejo

En Cursor, puedes añadir URLs de documentación en Settings > Features > Docs. Una vez indexada, la IA referenciará automáticamente los métodos y patrones del SDK de la documentación cuando le pidas que genere código.

Consejos para obtener los mejores resultados​

Comparte siempre tus IDs de columna. Las herramientas de IA no pueden adivinar la estructura de tu Copera Board. Cuanto más específico seas sobre los IDs de columna y los nombres de tabla, más preciso será el código generado.

Construye de forma incremental. Empieza con un cambio pequeño — añade un único campo nuevo, crea una nueva página — y pruébalo antes de continuar. Es mucho más fácil solucionar una pequeña adición que una grande.

Referencia los patrones que ya existen. La Starter Application es intencionadamente coherente. Cuando le pidas a una IA que genere algo nuevo, apúntala a un archivo existente que haga algo similar: "Genera una nueva página que siga el mismo patrón que TicketDetailPage.tsx."

Verifica las llamadas al SDK contra la documentación. Los asistentes de IA pueden, ocasionalmente, generar llamadas a métodos del SDK que no existen o usar formas de argumentos desactualizadas. Coteja con la documentación del SDK antes de publicar.

Usa Copera AI para preguntas de datos, IA externa para preguntas de código. Copera AI conoce tus boards; Claude y ChatGPT saben escribir componentes de React. Usa cada uno para lo que mejor hace.

Próximos pasos​