A minha primeira experiência na criação de um componente personalizado do Qodly com IA

Nesta publicação do blogue, conto a história de como comecei a desenvolver o meu primeiro componente personalizado para o Qodly sem escrever uma única linha de código nem criar nada por conta própria. Todo o trabalho árduo foi feito pela IA, orientada por instruções claras.

Com apenas algumas instruções adequadas, consegui o meu primeiro componente personalizado utilizando o VSCode e o Github Copilot. Graças à IA, pode concentrar-se em especificar as suas necessidades, no que pretende, e esquecer as complexas questões técnicas de desenvolvimento.

Continua a ler para saberes mais.

Antes de começar

Conforme explicado na documentação, se precisares de um componente que o 4D Qodly Pro não forneça de forma nativa, um componente personalizado é uma solução flexível.

Pode ser partilhado entre diversos projetos ou dentro da comunidade Qodly. Uma vez disponível, é utilizado tal como qualquer componente nativo do Qodly.

Primeiro, assisti a esta demonstração completa. Depois de ter compreendido a ideia principal, segui estes passos.

Os dois ingredientes

Descarregar as competências

Para funcionar corretamente, a IA necessita de um conjunto de competências. As competências são as diretrizes que a IA deve seguir como método. Graças a estas competências, a IA sabe como implementar um componente personalizado (framework, arquitetura, etc.), bem como escrever testes automatizados.

Descarreguei essas competências deste repositório do GitHub.

No VS Code, criei uma pasta vazia e, em seguida, criei a pasta .github/skills com as competências no seu interior.

Depois, chegou a minha vez

O meu papel consistia em descrever o contrato do componente: as suas entradas, os eventos a monitorizar, o seu comportamento, etc.

Com base nessa breve especificação e nas competências, a IA implementa o componente personalizado por si própria.

A informação a fornecer é:

– o nome e a finalidade do componente

– propriedades: as propriedades que determinam o comportamento do componente

– aparência: o aspeto do componente no modo de design e no modo de renderização

– eventos: as ações do utilizador às quais o componente deve responder

– comportamento: como o componente se comporta em função dos eventos e das suas propriedades

Tudo isto é fornecido à IA em linguagem natural.

Exemplo: um componente personalizado «copiar para a área de transferência»

O meu objetivo era ter um componente muito simples, capaz de copiar uma fonte de dados de cadeia de caracteres do Qodly para a área de transferência (do computador onde ocorre o clique). Este componente não existe de forma nativa no 4D Qodly Pro.

Primeiro prompt principal

Está na hora de dar a instrução à IA. Tal como explicado no vídeo, a instrução baseia-se numa espécie de mini-especificação: um contrato composto por três partes principais, conforme descrito acima.

Após instalar as competências, enviei a minha primeira solicitação:

Aqui está o texto da solicitação para copiar e colar:

Estamos numa pasta vazia.

Temos apenas algumas competências na pasta .gihub.

Essas competências têm como objetivo criar componentes personalizados para o Qodly.

Vamos começar a criar um componente personalizado.

Utilize a skill qodly-custom-component.

Crie uma estrutura inicial com o @qodly/cli e, em seguida, implemente o componente utilizando a estrutura padrão Build / Render / Config / Settings.

Cria um componente do zero para o Qodly. O componente deve utilizar um contrato de três partes: Props, Events e Behavior.

Quando necessário, pede-me para introduzir o nome do componente, a versão e outras informações necessárias

Eis os detalhes:

Os Props definem o que entra no componente:
• datasource: fonte de dados do Qodly (string) obrigatória
• aparência do componente no modo de design e quando renderizado: um ícone comum de cópia

Os eventos definem o que sai do componente:
• onClick: disparado quando se clica no componente

Comportamento:
• Quando o componente é clicado, copia-se o conteúdo da fonte de dados associada para a área de transferência local (a área de transferência do computador onde ocorreu o clique).
• Se a fonte de dados estiver vazia ou nula, nada é copiado e a área de transferência local do computador onde ocorreu o clique permanece inalterada.
• Se o componente não estiver vinculado a uma fonte de dados Qodly do tipo String, nada é copiado e a área de transferência local do computador onde ocorreu o clique permanece inalterada.

A resposta da IA

Eis a resposta que recebi:

E o meu componente personalizado «copyclipboard » já tinha sido criado

A testar o meu trabalho

Depois, perguntei como testar o componente localmente. O Copilot indicou-me que executasse:

O componente personalizado pode então ser testado localmente abrindo http://localhost:5001/ num navegador

É necessário executar uma instância do 4D

http://localhost:5001/ é o URL local do servidor Vite. Este serve apenas um ambiente de desenvolvimento local que inclui o componente personalizado. Para tirar partido de todas as funcionalidades do Qodly Studio, tais como as fontes Qodly e as funções ORDA disponíveis, deve certificar-se de que a instância do Qodly Studio de um projeto 4D está a ser servida na porta HTTPS 7443.

Por isso, criei e abri um projeto 4D vazio com estas definições web:

E as definições de administração web da instância 4D são:

Desta forma, a instância do Qodly Studio do meu projeto 4D é disponibilizada em https://localhost:7443/studio. É utilizada pelo ambiente de desenvolvimento local enquanto se executa http://localhost:5001/.

E aqui está o resultado!

Compilação e publicação

Para compilar e publicar a versão final do meu componente personalizado, bastou pedir ao Copilot para o compilar, tal como foi feito para outros componentes personalizados já existentes. Apresentei um exemplo ao Copilot (por exemplo, https://github.com/b-fadwa/Qodly-file-download).

Também pedi que publicasse o componente num determinado repositório do GitHub, incluindo tanto o código-fonte como as versões.

E é tudo.

O que isto abre como possibilidades

Esta primeira experiência mostra que a IA reduz consideravelmente as barreiras à extensão do Qodly Studio. Se conseguir descrever o que um componente deve fazer (as suas propriedades, os seus eventos e o seu comportamento), a IA pode criá-lo por si.

As possibilidades de personalização do Qodly Studio são, portanto, muito amplas: hoje, um botão «copiar para a área de transferência», mas amanhã qualquer componente de que as suas aplicações necessitem, sem ser necessário ser um especialista em front-end. O único limite real é a clareza da sua especificação.