Saltar al contenido principal

Construir con herramientas de IA

La Starter Application de Copera te da una base funcional desde el primer momento. Los asistentes de programación con IA pueden acelerar enormemente la rapidez con la que la personalizas y la extiendes — convirtiendo lo que podría tomar días en horas, y las 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 tarea es adaptar esta base a tu caso de uso específico — cambiar qué datos muestras, agregar nuevas páginas, conectar nuevas columnas del Board de Copera o configurar nuevos flujos de trabajo.

Las herramientas de IA destacan exactamente en este tipo de tareas. 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 Board de Copera, mejor será su resultado.

Usar Copera AI​

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

Lo que puedes pedirle:

  • "¿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 workspace, 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 los IDs de tabla que te dé Copera AI directamente en tu archivo config.ts. Esto facilita compartir un 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 antemano.

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 los Boards de Copera, 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/developer/guides/starter-application/overview"

Este único párrafo orienta a la IA sobre tu stack. A partir de aquí, puede generar código que usa 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 para humanos. Con este contexto, la IA sabe exactamente qué campos referenciar en cualquier código que genere.

// Example config.ts excerpt
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. Agregar un nuevo campo a la vista de detalle:

    "Agrega una columna 'Priority' a la página de detalle del ticket. El ID de 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 existentes de React Query del proyecto."

  3. Agregar un flujo de notificaciones:

    "Agrega 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 para 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

Siempre revisa 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 potenciados por IA (Cursor, Windsurf y otros)​

Los IDEs potenciados por IA integran el asistente de IA directamente en tu editor de código. Pueden leer toda tu base de código como contexto, lo que los hace especialmente eficaces para la Starter Application.

Apuntar 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

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

Agregar documentación como contexto​

La mayoría de los IDEs con IA te permiten agregar URLs o documentos como material de referencia. Agrega la documentación para desarrolladores de Copera:

https://university.copera.ai/developer/guides/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 agregar URLs de documentación en Settings > Features > Docs. Una vez indexada, la IA referenciará automáticamente los métodos y patrones del SDK desde 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 Board de Copera. Cuanto más específico seas con los IDs de columna y los nombres de tabla, más preciso será el código generado.

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

Referencia los patrones que ya existen. La Starter Application es intencionadamente consistente. 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 generar ocasionalmente llamadas a métodos del SDK que no existen o usar formas de argumentos desactualizadas. Coteja contra la documentación del SDK antes de lanzar.

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

Próximos pasos​