Pular para o conteúdo principal

Desenvolvendo com Ferramentas de IA

O Copera Starter Application oferece uma base funcional pronta para uso. Assistentes de codificação com IA podem acelerar significativamente como você o personaliza e estende — transformando dias de trabalho em horas, e horas em minutos.

O Conceito​

Ao trabalhar com o Starter Application, você já tem autenticação, roteamento, busca de dados e padrões de interface prontos. Sua tarefa é adaptar essa base ao seu caso de uso específico — mudar quais dados exibir, adicionar novas páginas, conectar novas colunas de Boards da Copera ou configurar novos fluxos de trabalho.

As ferramentas de IA são excelentes exatamente para esse tipo de tarefa. Com o contexto correto, elas geram novas páginas, componentes e rotas de API que seguem os padrões do seu projeto existente. A chave é o contexto: quanto mais a IA entender sobre a estrutura do seu projeto e sobre a configuração dos seus Boards, melhor será o resultado.

Usando o Copera AI​

A Copera possui um assistente de IA integrado que já entende seu workspace, seus boards e seus dados.

O que você pode perguntar:

  • "Quais colunas o meu board de Tickets tem e quais são os IDs delas?"
  • "Como consulto linhas da tabela Orders em que o Status seja 'Pendente'?"
  • "Gere um trecho de código com o Copera SDK que crie uma nova linha no meu board de Projects com Nome e Data de Vencimento."

Como o Copera AI tem acesso direto à estrutura do seu workspace, ele fornece IDs de colunas e nomes de tabelas precisos sem que você precise procurá-los manualmente. Use-o como primeiro recurso quando precisar entender sua estrutura de dados antes de escrever código.

dica

Copie os IDs de colunas e tabelas que o Copera AI fornecer diretamente para o seu arquivo config.ts. Isso facilita o compartilhamento de contexto preciso com outras ferramentas de IA depois.

Usando Claude, ChatGPT ou Gemini​

Assistentes de IA de propósito geral funcionam bem para gerar páginas, componentes e lógica — desde que você forneça contexto suficiente sobre o projeto desde o início.

Iniciando uma Conversa​

Abra uma nova conversa e forneça este contexto no início:

"Estou construindo uma aplicação personalizada usando o Copera SDK (@copera.ai/sdk). A aplicação se conecta aos Copera Boards, que funcionam como meu banco de dados. Estou trabalhando a partir do Copera Starter Application. A documentação da plataforma está em https://university.copera.ai/university/developers/starter-application/overview"

Esse único parágrafo orienta a IA sobre sua stack. A partir daí, ela pode gerar código que usa o SDK corretamente.

Compartilhando a Estrutura das Suas Colunas​

Cole o conteúdo do seu arquivo config.ts na conversa. Esse arquivo mapeia os IDs de colunas do seu Board para nomes legíveis por humanos. Com esse contexto, a IA sabe exatamente quais campos referenciar em qualquer código que gerar.

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

Exemplos de Prompts que Funcionam Bem​

  1. Adicionando um novo campo à tela de detalhes:

    "Adicione uma coluna 'Prioridade' à página de detalhes do ticket. O ID da coluna na Copera é col_jkl012. Exiba-a como um badge colorido: vermelho para Alta, amarelo para Média, verde para Baixa."

  2. Criando uma nova página de painel:

    "Crie uma nova página em /dashboard que exiba a contagem de tickets agrupada por Status. Use os padrões do React Query já existentes no projeto."

  3. Adicionando um fluxo de notificação:

    "Adicione uma notificação por email quando a coluna Status de um ticket mudar para 'Concluído'. Use a integração de webhook do Copera SDK."

  4. Adaptando a aplicação para outro caso de uso:

    "Converta este aplicativo de suporte em um catálogo de produtos. Preciso de colunas para Nome do Produto, Preço, Descrição e URL da Imagem. Aqui estão os IDs de colunas do meu board da Copera..."

observação

Sempre revise o código gerado por IA antes de executá-lo. Verifique se os IDs de colunas correspondem aos valores reais do seu config.ts e se as chamadas de API seguem os padrões do Starter Application.

Usando IDEs com IA Integrada (Cursor, Windsurf e Outros)​

IDEs com IA integrada incorporam o assistente de IA diretamente no seu editor de código. Eles podem ler toda a sua base de código para obter contexto, o que os torna particularmente eficazes para o Starter Application.

Apontando o IDE para a Sua Arquitetura​

O Starter Application inclui um arquivo CLAUDE.md tanto em base-application-api/ quanto em base-application-web/. Esses arquivos foram escritos especificamente para que assistentes de IA possam entender:

  • A stack de tecnologia (framework, bibliotecas, versões)
  • A estrutura de pastas e onde cada tipo de arquivo pertence
  • Convenções de código e padrões de nomenclatura
  • Como se conectar ao Copera SDK

Adicione o arquivo CLAUDE.md como documento de referência nas configurações de contexto do seu IDE. A IA então gerará código que segue os padrões estabelecidos, em vez de inventar os próprios.

Adicionando a Documentação como Contexto​

A maioria dos IDEs com IA permite adicionar URLs ou documentos como material de referência. Adicione a documentação de desenvolvedor da Copera University:

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

Isso fornece ao assistente de IA do IDE acesso à referência do SDK, para que ele possa gerar chamadas de API precisas.

dica

No Cursor, você pode adicionar URLs de documentação em Settings > Features > Docs. Uma vez indexada, a IA referenciará automaticamente os métodos do SDK e os padrões da documentação quando você pedir para gerar código.

Dicas para Melhores Resultados​

Sempre compartilhe seus IDs de colunas. As ferramentas de IA não conseguem adivinhar a estrutura do seu Board da Copera. Quanto mais específico você for sobre IDs de colunas e nomes de tabelas, mais preciso será o código gerado.

Construa de forma incremental. Comece com uma pequena mudança — adicione um único novo campo, crie uma nova página — e teste antes de avançar. É muito mais fácil depurar uma adição pequena do que uma grande.

Referencie os padrões já existentes. O Starter Application é intencionalmente consistente. Ao pedir para uma IA gerar algo novo, aponte para um arquivo existente que faça algo similar: "Gere uma nova página seguindo o mesmo padrão que TicketDetailPage.tsx."

Verifique as chamadas do SDK na documentação. Assistentes de IA podem ocasionalmente gerar chamadas de método do SDK que não existem ou que usam argumentos desatualizados. Confira com a documentação do SDK antes de publicar.

Use o Copera AI para perguntas sobre dados, IA externa para perguntas sobre código. O Copera AI conhece seus boards; Claude e ChatGPT sabem como escrever componentes React. Use cada um para o que faz de melhor.

Próximos Passos​