Olá pessoal, tudo bem com vocês?
Hoje iremos fazer uma postagem técnicas, onde iremos desenvolver um editor de produtos. No qual o usuário poderá escolher um determinado produto e sua cor, adicionar textos, imagens e fazer uploads.
O principal objetivo é analisar o quanto a inteligência artificial auxilia na codificação do projeto, quais são os desafios e quais práticas podem serem adotadas.
Vamos lá?
Resultado do Projeto:
https://marcelo3macedo.github.io/canvas-editor/
Tópicos
- Técnica utilizada
- O objetivo
- Codificação Limpa
- Dividir e conquistar
- Limitações e Desafios ao utilizar IA
- A construção do projeto
- Resultado do Projeto
Técnica utilizada
A técnica utilizada será a popular ‘vibe coding’ onde o desenvolvimento será feito com auxílio de ferramentas de inteligência artificial. Elas serão usadas oferecendo sugestões de código, completando trechos automaticamente, ou gerando o código através de uma descrição especificada.
O projeto em questão será um ‘Editor de Produtos’, uma solução no qual já trabalhei no passado e o projeto em si levou meses de desenvolvimento.
Uma comparação exata do tempo de desenvolvimento não é possível, uma vez o primeiro projeto passou pela etapa de definição e o experimento atual irá recriar um projeto já definido.
A ferramenta de IA a ser utilizada será o ChatGPT, onde através de prompts iremos alimentar o nosso projeto.
O objetivo
O objetivo principal é atingir o desenvolvimento de um projeto de Editor de Produtos, no qual o usuário possa:
- Escolher um tipo de produto.
- Definir a cor desejada desse produto.
- Acessar uma galeria de imagens.
- Filtrar, pesquisar e selecionar uma imagem.
- Adicionar textos modificando cores, fontes, alinhamento e formato.
- Realizar uploads de imagens e adicionar no produto.
- Salvar a imagem final e baixá-la para seu computador.
- Selecionar, mover e deletar elementos da camiseta.
Sendo assim é um projeto de complexidade alta, não sendo possível com apenas um comando o mesmo seja 100% criado pela inteligência artificial.
Será necessário a criação por partes, sendo implementado aos poucos e de forma organizada para que os objetivos sejam atingidos.
Codificação Limpa
Um conceito importante para ser entendido quando for desenvolver sistema com auxílio de inteligência artificial é a codificação limpa. Através dela será possível atingir os objetivos de forma progressiva sem gerar uma complicação de código que gere perda de tempo e complicação no desenvolvimento do sistema.
Codificação limpa refere-se a um conjunto de práticas e princípios que visam tornar o código mais legível, compreensível e fácil de manter. Isso inclui o uso de nomes de variáveis e funções descritivos, a organização lógica do código, a eliminação de duplicações e a escrita de funções pequenas e focadas em uma única tarefa.
Imagine que seu código é como um guarda-roupa.
- Um guarda-roupa bem organizado (ou “limpo”) tem roupas dobradas e penduradas de forma ordenada, com cada peça em seu devido lugar.
- Isso facilita encontrar o que você precisa rapidamente, sem ter que revirar tudo.
- Da mesma forma, um código limpo permite que você (ou qualquer outra pessoa) entenda e modifique o código facilmente, sem ter que “revirar” tudo para encontrar o que precisa.
Dividir e Conquistar na Programação Orientada por IA
A técnica de “dividir e conquistar” envolve quebrar um problema complexo em partes menores e mais gerenciáveis. Isso é especialmente eficaz na programação assistida por IA por várias razões:
- Foco em Tarefas Específicas: Ao dividir o problema, você pode usar a IA para focar em resolver partes específicas do código, como otimizar uma função ou corrigir um bug em um módulo específico.
- Sugestões Mais Precisas: Com problemas menores e mais bem definidos, a IA pode oferecer sugestões mais precisas e relevantes, pois o contexto é mais claro.
- Iteração Rápida: Ao trabalhar em partes menores, você pode iterar rapidamente, testando e ajustando o código com a ajuda da IA, o que acelera o desenvolvimento.
- Facilidade de Integração: Soluções para partes menores podem ser integradas de forma mais eficiente, garantindo que o sistema como um todo funcione harmoniosamente.
Em resumo, a codificação limpa e a técnica de dividir e conquistar são práticas que não só melhoram a qualidade do código, mas também potencializam o uso de ferramentas de IA, tornando o processo de desenvolvimento mais eficiente e eficaz.
Limitações e Desafios ao utilizar IA
Quando se utiliza IA para gerar ou auxiliar na programação de sistemas muito grandes, algumas dificuldades podem surgir, especialmente relacionadas aos limites dos modelos de IA.
Limites do Modelo
- Contexto Limitado: Muitos modelos de IA têm um limite de contexto, o que significa que eles só podem “lembrar” de uma quantidade limitada de informações de uma vez. Se o sistema for muito grande, o modelo pode não conseguir manter todo o contexto necessário para fazer sugestões precisas.
- Resumir Conteúdo: Para lidar com o limite de contexto, algumas ferramentas de IA podem tentar resumir ou priorizar informações. Isso pode levar à perda de detalhes importantes, resultando em sugestões menos precisas ou relevantes.
- Perda de Coerência: À medida que o sistema cresce, manter a coerência e a integridade do código pode se tornar mais desafiador. A IA pode ter dificuldade em entender a arquitetura geral ou as interdependências entre diferentes partes do sistema.
A construção do projeto
De forma resumida, o desenvolvimento do projeto foi dividido em partes, utilizando a técnica de dividir e conquistar.
A primeira parte definimos um escopo técnico para a IA seguir de maneira em que o nosso projeto entre em um caminho e o siga até o fim.
- Informações técnicas foram passadas para a IA, como: utilização do framework React, a utilização da biblioteca Konva, seguir padrões de código e arquitetura limpa, linguagem em typescript.
Na segunda etapa focamos em construir uma barra lateral, ela terá algumas funcionalidades de permitirão adicionar elementos a nossa arte.
- Foi solicitado a IA quais era os menus desejados: Produtos, Imagens, Upload, Textos e salvar.
- Especificado que deveria ter um ícone e o nome no menu.
- Design com fundo transparente foi solicitado.
Na terceira etapa, focamos em construir pop-ups para quando o usuário clicar em um item do menu, ele abra uma tela no qual terá mais informações para o usuário.
- No caso de produtos, ao abrir uma tela especifiquei que o usuário poderia escolher o tipo e a cor do produto.
- Foi necessário deixar claro exatamente a ordem dos eventos, senão a resposta não seria o esperado. Especifiquei que primeiramente o usuário selecionaria um tipo de produto e na próxima etapa selecionaria a cor e teria que clicar em um botão para aplicar.
- Na tela de imagens especifiquei as seguintes informações:
- Galeria de imagens com paginação mostrando 20 elementos.
- Permitindo filtro por categoria e por nome.
- Em textos especifiquei que o usuário poderá informar o texto desejado, as cores, a fonte, o alinhamento e o formato.
- Em upload detalhei que uma amostra da imagem que foi feita upload será mostrada ao usuário e somente será incluso quando ele clicar no botão de ação.
- No salvar, ele criará uma imagem do que o usuário já editou e permitirá salvar em um arquivo o resultado de sua criação.
Na quarta etapa, pedi a criação da tela de edição, no qual o usuário poderá interagir com a arte:
- Foi necessário especificar que um produto padrão será carregado inicialmente.
- Os eventos de adição de imagem, textos e troca de produtos foram criados.
- Tive problemas em relação a seleção das imagens e textos, foi necessário detalhar o comportamento quando um objeto é selecionado e quais ações podem serem feitas.
- Ocorreu alguns bugs na adição, edição, mudança de tamanho e seleção de componentes.
A partir da segunda etapa (barra lateral), já foi percebido que a IA começou a perder o contexto, criando respostas que estavam desalinhadas com o projeto.
- Para evitar isso, tendo uma visão clara do que e onde queria chegar, foi dividido em partes as solicitações de maneira em que por bloco em bloco a aplicação fosse construída.
- O tempo de desenvolvimento foi altamente produtivo, ainda que não conhecia a biblioteca konva em questão.
- Alguns ajustes técnicos foram necessários, ainda há uma necessidade de conhecer o código que está sendo gerado uma vez que após X respostas geradas a IA começa a perder o contexto.
Resultado do Projeto
O projeto está disponível em:
- https://github.com/marcelo3macedo/canvas-editor
E a parte visual pode ser acessada em: - https://marcelo3macedo.github.io/canvas-editor/
Por hoje é só pessoal, espero que tenham gostado.
Até a próxima.