#Prática: desenvolvendo o plugin de marca d'água

Este caso mostra como, com uma única frase, fazer a IA desenvolver um plugin de marca d'água NocoBase completo — desde a criação do scaffold até a verificação de funcionamento, todo o processo realizado pela IA.

#Resultado final

Depois que o plugin é habilitado:

• A página do NocoBase exibe uma marca d'água semitransparente sobreposta, mostrando o nome do usuário logado
• A marca d'água não pode ser removida apagando o DOM — uma verificação periódica a regenera automaticamente
• Em "Configurações de plugin", é possível ajustar o texto da marca d'água, a opacidade e o tamanho da fonte

#Pré-requisitos

Certifique-se de que você já tem:

1. Um ambiente de desenvolvimento NocoBase em execução (a inicialização do NocoBase CLI instala automaticamente as NocoBase Skills)
2. Um editor com suporte a Agent de IA aberto (por exemplo, Claude Code, Codex, Cursor, etc.)

#Começando

No diretório raiz do seu projeto NocoBase, envie o seguinte prompt à IA:

Ajude-me a usar a skill nocobase-plugin-development para desenvolver um plugin de marca d'água para o NocoBase.
Requisitos: sobreponha uma marca d'água semitransparente nas páginas, exibindo o nome do usuário logado, para evitar vazamentos via captura de tela.
Verifique periodicamente se o DOM da marca d'água foi removido. Se foi, regenere-o.
Na página de configurações do plugin, permita configurar o texto da marca d'água, a opacidade e o tamanho da fonte.
O nome do plugin é @my-project/plugin-watermark

#O que a IA fez

Após receber os requisitos, a IA executa automaticamente as seguintes etapas:

#1. Analisar requisitos e confirmar o plano

A IA primeiro analisa quais pontos de extensão do NocoBase são necessários para este plugin e, em seguida, apresenta um plano de desenvolvimento. Por exemplo:

Servidor:

• Uma tabela watermarkSettings para armazenar as configurações de marca d'água (texto, opacidade, tamanho da fonte)
• Uma API personalizada para ler e escrever as configurações de marca d'água
• Configuração de ACL: usuários autenticados podem ler, administradores podem escrever

Cliente:

• Página de configurações do plugin, com formulário para configurar os parâmetros da marca d'água
• Lógica de renderização da marca d'água, lendo as configurações e sobrepondo-as na página
• Detecção contra adulteração, com timer monitorando o DOM da marca d'água

Após confirmar o plano, a IA começa a escrever o código.

#2. Criar o scaffold do plugin

yarn pm create @my-project/plugin-watermark

A IA gera a estrutura padrão de diretórios do plugin em packages/plugins/@my-project/plugin-watermark/.

#3. Escrever o código do servidor

A IA gera os seguintes arquivos:

• Definição da tabela de dados — tabela watermarkSettings, contendo os campos text, opacity, fontSize
• API personalizada — interfaces para ler e atualizar as configurações de marca d'água
• Configuração de ACL — usuários autenticados podem ler as configurações de marca d'água, administradores podem modificá-las

#4. Escrever o código do cliente

• Página de configurações do plugin — um formulário Ant Design para configurar texto, opacidade (slider) e tamanho da fonte
• Renderização da marca d'água — cria uma camada canvas/div em tela cheia sobre a página, exibindo o nome do usuário logado
• Detecção contra adulteração — MutationObserver + timer, garantia dupla; se o DOM for removido, será regenerado imediatamente

#5. Internacionalização

A IA gera automaticamente os pacotes de idiomas em chinês e inglês, sem necessidade de operação adicional:

• src/locale/zh-CN.json — Tradução em chinês
• src/locale/en-US.json — Tradução em inglês

#6. Habilitar o plugin

yarn pm enable @my-project/plugin-watermark

Após habilitar, abra uma página do NocoBase e você verá a marca d'água sobreposta ao conteúdo.

#Quanto tempo levou todo o processo

Do prompt ao plugin pronto para uso, levou cerca de 3 a 5 minutos. A IA realizou as seguintes tarefas:

#Quer criar mais plugins?

O plugin de marca d'água envolve principalmente renderização no frontend e armazenamento simples no backend. Se você quer saber o que mais a IA pode fazer por você — como blocos personalizados, relacionamentos complexos entre tabelas, extensões de workflow, etc. — confira Recursos suportados.

#Links relacionados

• Início rápido do desenvolvimento de plugins com IA — Início rápido e visão geral dos recursos
• Recursos suportados — Tudo o que a IA pode fazer por você, com exemplos de prompts
• Desenvolvimento de plugins — Guia completo de desenvolvimento de plugins NocoBase
• NocoBase CLI — Ferramenta de linha de comando para instalar e gerenciar o NocoBase