Pular para o conteúdo principal

Construindo com Ferramentas de IA

A Copera Starter Application dá a você uma base funcional pronta para uso. Os assistentes de código com IA podem acelerar dramaticamente a rapidez com que você a customiza e estende — transformando o que poderia levar dias em horas, e horas em minutos.

O Conceito​

Quando você trabalha com a Starter Application, você já tem autenticação, roteamento, data fetching e padrões de UI no lugar. Seu trabalho é adaptar essa base ao seu caso de uso específico — mudando quais dados você exibe, adicionando novas páginas, conectando novas colunas do Copera Board ou montando novos workflows.

As ferramentas de IA se destacam exatamente nesse tipo de tarefa. Dê a elas o contexto certo, e elas vão gerar novas páginas, componentes e rotas de API que se encaixam nos padrões do seu código existente. A chave é o contexto: quanto mais a IA entender sobre a estrutura do seu projeto e a configuração do seu Copera Board, melhor será o resultado.

Usando o Copera AI​

O Copera tem um assistente de IA nativo que já entende o seu workspace, seus boards e seus dados.

O que você pode perguntar a ele:

  • "Quais colunas o meu board Tickets tem, e quais são os IDs delas?"
  • "Como faço para consultar linhas da tabela Orders onde Status é 'Pending'?"
  • "Gere um snippet do Copera SDK que crie uma nova linha no meu board Projects com um Name e uma Due Date."

Como o Copera AI tem acesso direto à estrutura do seu workspace, ele pode lhe dar column IDs e nomes de tabela precisos sem que você precise procurá-los manualmente. Use-o como sua primeira parada quando precisar entender a estrutura dos seus dados antes de escrever código.

dica

Copie os column IDs e table IDs que o Copera AI lhe der diretamente para o seu arquivo config.ts. Isso facilita compartilhar um 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ê lhes dê contexto suficiente sobre o seu projeto logo de início.

Iniciando uma Conversa​

Abra uma nova conversa e forneça este contexto no começo:

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

Esse único parágrafo orienta a IA sobre o seu stack. A partir daqui, ela consegue gerar código que usa o SDK corretamente.

Compartilhando a Estrutura das Suas Colunas​

Cole seu arquivo config.ts na conversa. Esse arquivo mapeia os column IDs 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.

// Example config.ts excerpt
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 'Priority' à página de detalhes do ticket. O column ID no Copera é col_jkl012. Exiba-o como um badge colorido: vermelho para High, amarelo para Medium, verde para Low."

  2. Criando uma nova página de dashboard:

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

  3. Adicionando um workflow de notificação:

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

  4. Adaptando o app para um caso de uso diferente:

    "Converta esta aplicação de help desk em um catálogo de produtos. Preciso de colunas para Product Name, Price, Description e Image URL. Aqui estão os column IDs do meu board Copera..."

observação

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

Usando IDEs com IA (Cursor, Windsurf e Outras)​

IDEs com IA embutem o assistente de IA diretamente no seu editor de código. Eles conseguem ler todo o seu código para obter contexto, o que os torna particularmente eficazes para a Starter Application.

Apontando a IDE para a Sua Arquitetura​

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

  • O 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 um documento de referência nas configurações de contexto da sua IDE. A IA passará então a gerar código que segue os padrões estabelecidos em vez de inventar os seus próprios.

Adicionando Documentação como Contexto​

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

https://university.copera.ai/developer/guides/starter-application/overview

Isso dá à IA da IDE acesso à referência do SDK, para que ela 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 vai automaticamente referenciar os métodos e padrões do SDK a partir da documentação quando você pedir para ela gerar código.

Dicas para Melhores Resultados​

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

Construa incrementalmente. Comece com uma pequena mudança — adicione um único campo novo, crie uma única página nova — e teste-a antes de prosseguir. É muito mais fácil resolver problemas de uma pequena adição do que de uma grande.

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

Verifique as chamadas do SDK contra a documentação. Os assistentes de IA podem ocasionalmente gerar chamadas de método do SDK que não existem ou usar formatos de argumento desatualizados. Confira contra a documentação do SDK antes de colocar em produção.

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

Próximos Passos​