Executando verificação de segurança...
4
raffaeleloi
4 min de leitura ·

Criando meu portifolio com Antigravity IA + Desafio de criação do portifolio do google valendo $3.000 em prêmios

Decidi escrever um artigo detalhado descrevendo toda a minha jornada na criação do meu portfólio com a Antigravity IA.

Sequência:

  1. Ideia
  2. Abordagem/Estratégia
  3. Escolha da IA
  4. Conceitos-chave e escolhas para o aplicativo frontend
  5. Experiência/Jornada
  6. Fluxo de trabalho com IA
  7. Resultado
  8. Considerações finais

1. Ideia

Enquanto pesquisava opiniões sobre o evento WeAreDevelopers, do qual gostaria de participar um dia, encontrei uma opinião interessante no site dev.to. Depois de ler a opinião, me deparei com um pop-up do dev.to promovendo um Desafio de Frontend usando IA.
Eu já queria criar meu portfólio e entender melhor sobre IA, então foi a oportunidade perfeita para matar dois coelhos com uma cajadada só.

2. Abordagem

Minha ideia era usar o método de aprender fazendo. Eu não queria gastar muitas horas estudando a IA; em vez disso, queria ver o quão intuitiva era a IA que eu escolhi e até onde eu conseguiria chegar sem precisar fornecer instruções muito técnicas.

3. Escolha da IA

No desafio, tínhamos três opções de IA (do Google), e eu escolhi a Antigravity. Vou ser sincero: escolhi porque gostei do nome (você provavelmente já fez algo parecido em algum momento da sua vida, então não me julgue (risos)).

Assisti ao vídeo introdutório no site da Antigravity (https://antigravity.google), que apresentou o seguinte método:

  • Plano de implementação
  • Pré-requisitos
  • Arquitetura proposta
  • Etapas de implementação
  • Plano de verificação

4. Conceitos-chave e escolhas para o aplicativo frontend

Frontend:

  • Next.js (Não tenho muita familiaridade com ele, por isso ele foi o escolhido)
  • TypeScript

Conceitos-chave:

  • Fácil de alterar
  • Separação de responsabilidades
  • Arquitetura MVC
  • UI bonita
  • Feature-based (~~atomic design)

5. Experiência/Jornada

Vou destacar alguns momentos do processo de criação do portfólio que me fizeram refletir sobre certas abordagens da IA.

  • Downgrade da versão do Node

Para usar a versão mais recente do Next.js, a versão do Node instalada na minha máquina não era compatível. Em vez de sugerir uma atualização, a IA decidiu fazer um downgrade do Next.js (eu a interrompi antes disso).

Isso me chamou a atenção: por que a IA não sugeriu atualizar o Node.js?

  • Acessando páginas da web

Durante o processo de criação do meu portfólio, forneci para a IA alguns links públicos para meus perfis do GitHub e do LinkedIn. A IA abriu um navegador e buscou as informações.

Isso foi bastante impressionante e interessante observar os passos que ela seguiu.

  • Todas as entidades em um único arquivo

A primeira escolha da IA ​​foi criar todas as entidades em um único arquivo. Embora seja uma questão muito básica, frequentemente percebo que a IA escolhe as soluções mais "baratas" e "compactas". Precisamos prestar atenção nisso. A IA consegue ler um código-fonte inteiro facilmente, nós não.

  • Atomic Design... literalmente

Essa é meio engraçada. Nos pré-requisitos que forneci à IA, defini o Atomic Design, mas a IA construiu a seguinte estrutura:

Image description

Bem, essa não era minha intenção. Eu queria usar o Atomic Design, mas não os nomes literais das pastas. Eu gostaria mais de uma separação mais orgânica em vez de usar nomes conceituais para cada pasta.

  • Component delegation

Não conheço muito bem o Next.js, então não estava claro para mim como as coisas funcionavam. Depois de algumas trocas de ideias com a IA, chegamos à ideia de delegação de componentes, da qual gostei bastante.

6. Fluxo de trabalho da IA

Gostei muito da abordagem da Antigravity. Ela consiste em duas ou três etapas, dependendo dos prompts fornecidos. Essas etapas são representadas como arquivos Markdown e exigem sua aprovação.

  • Proposta

A IA fornece um arquivo Markdown contendo algumas ideias e opções para você escolher, seguidas pelos prós e contras de cada escolha.

  • Plano de implementação

Antes de colocar a mão na massa, a IA mostra o plano, as etapas e o objetivo da ação que está tentando implementar.

Essa etapa me deu uma ótima noção do que a IA está pensando e como planeja alcançar o resultado. É muito melhor do que deixar a IA fazer tudo e revisar o resultado apenas no final.

  • Demonstração

Após aprovar o plano de implementação proposto pela IA, você pode ver o que foi implementado e o resultado final.

No geral, é uma ótima ideia.

7. Resultado

Este é o meu aplicativo e vou detalhar a arquitetura e explicar minhas escolhas.

Descrição da imagem

  • app: Contém as páginas
  • components: relacionados a UI e a abordagem baseada em funcionalidades
  • models: entidades que representam o domínio
  • services and data: Decidi simular um arquivo JSON com o

Você também pode conferir o meu post original: https://dev.to/raffaeleloi/creating-my-portfolio-with-antigravity-ai-40pe

Carregando publicação patrocinada...
2
nfoj

Olá, vi o post e queria fazer uma pergunta: você não complicou demais algo simples?

Genuinamente não estou reclamando, apenas estou querendo entender, pois seu post me passa uma sensação de usar uma bazuca para matar uma mosca, seu design é simples e um html, css já mais doque sobra para fazer o que você fez.

Acredito que deveria ter gastado um pouquinho mais de energia criando um design mais interessante, doque pensando em arquitetura para algo que mal deveria ter 2 pastas.

Não é uma crítica, apenas uma pergunta e observação, caso não goste do comentário apenas ignore. Abraço.

1
raffaeleloi
  • Autor
    Autor

Achei excelente sua pergunta, e é algo que costumo perguntar também quando me deparo com alguns projetos.
Respondendo sua pergunta, tenho dois modos de resposta:
Na teoria: Sim, é realmente um projeto bem estruturado e com muitas features e subdivisões para um projeto simples que é só renderizar um portfólio. Existem maneiras muito mais simples de se fazer onde eu teria o mesmo retorno em termos de interface porém com muito menos código.
Na prática: Bom, não consegui sentir a complexidade, esse é um ponto interessante, pois ao todo se eu tiver gastado 4 horas com esse projeto é muito. A IA conseguiu abstrair a complexidade e toda a parte chata enquanto eu só fui revisando a arquitetura gerada, foi bem impressionante a facilidade e rapidez com que foi tudo gerado, até porque minha base maior de atuação é no backend. A facilidade de criação de toda essa estrutura foi tão legal que decidi colocar o projeto em uma fase de possível expansão que vou comentar mais no tema abaixo.

Expansão futura?
Depois que vi a estrutura gerada, pensei que poderia fazer tudo rodar em prol do currículo JSON, assim eu poderia ter um backend (ideia futura) que pegasse todas as informações de alguém, agrupasse e melhorasse elas e por fim devolver um JSON seguindo aquela estrutura. Desse modo tudo isso viraria um gerador automático de portifólio pronto. Idea ambiciosa, mas quem sabe? haha

2
nfoj

Obrigado pela resposta, eu verdadeiramente gosto de entender como as pessoas chegaram as conclusões que chegaram, entendi agora melhor porque decidiu seguir assim.

Entender pessoas e decisões envolvem mais camadas de abstração doque qualquer código, espero que siga com o projeto e desejo sucesso. 😁

1
2
AlexandreSeemund

Agora o pessoal não tem mais desculpas para não cria um portifólio hehe, a única coisa que eu não entendi bem é a parte de extras, aquilo são algumas libs que tu ja usou? Agora uma pergunta que não tem a ver com o post, como é a pós de Software Architecture da FIAP? Estava pensando em fazer

2
raffaeleloi
  • Autor
    Autor

Fala Alexandre, sim, agora as desculpas acabaram rs.

Sobre a parte dos extras, aquilo são projetos que eu desenvolvi que estão no meu github e algumas outras curiosidades como os artigos que escrevo.

Na questão da FIAP, eu achei o conteúdo das aulas e das lives bem maçantes e até cansativos para ser sincero, mas a parte prática que na minha época foi em grupo me ajudou bastante, nós tivemos que desenvolver um sistema e depois separar em microserviço, usar kubernetes, docker e alguns modelos arquiteturais bem interessantes. Então no resumo de tudo, acho que a parte prática com o grupo e as conexões que geraram foram muito benéficas para mim.