[Trae AI IDE] App do TabNews criado com um único prompt

Vi um shorts do Gabriel Fróes, do Código Fonte TV, falando sobre a Trae (IDE da ByteDance) e resolvi testar com um prompt bem simples:

Crie um App que utilize a API do TabNews. Utilize React Native

Com apenas esse prompt, sem nenhuma interação adicional, o Trae Builder gerou uma aplicação React Native completa e funcional, incluindo:

  • Estrutura completa do projeto
  • Sistema de navegação
  • Integração com a API do TabNews
  • Múltiplas telas (Home, Post e User)

Prévia do app

Android iOS
TabNews App Versão Android TabNews App Versão iOS

Funcionalidades

  • Visualização das postagens relevantes do TabNews
  • Leitura de posts individuais e seus comentários
  • Visualização de perfis de usuários e suas contribuições
  • Atualização por gesto de "puxar para baixo" (pull-to-refresh)
  • Rolagem infinita
  • Interface limpa e intuitiva

Tecnologias Utilizadas

  • React Native
  • Expo
  • React Navigation
  • Axios

Estrutura do Projeto

src/
  screens/
    HomeScreen.js  # Feed principal de posts
    PostScreen.js  # Visualização individual de post com comentários
    UserScreen.js  # Visualização de perfil do usuário
App.js  # Componente principal da aplicação

Créditos

Este projeto foi criado usando o Trae Builder, demonstrando o potencial do desenvolvimento assistido por IA na criação de aplicações totalmente funcionais a partir de prompts simples.

O código gerado está disponível no repositório do GitHub.

Animal, n aguentei e tive q te copiar, mas usando agora o bolt.new Mudei um pouco o prompt, somente com React, para web.

Crie um App que utilize a API do TabNews. Utilize React

O Resultado foi similar, mas além disso tbm com um único click o site foi hospedado.

Link do site: https://sparkly-banoffee-d3d9dd.netlify.app/

print talvez eu faça uma POC mais elaborada pra testar o poder dessa I.A e faço um post nessa sua linha.

Estou testando aqui a ferramenta e ela está me surpreendendo. Pedi para criar uma landing page sem passar outros tipos de dados e, mesmo assim, o sistema fez a leitura da minha code base, percebeu o padrão e buscou por imagens que eu tinha salvo, acertando mais ou menos de primeira.

Diante disso, vou começar a testar para alguns projetos pessoais, não relacionados ao trabalho, pois ainda preciso prezar pela segurança. Vou tentar acreditar que o acesso é restrito apenas ao que eu permitir, e não às páginas superiores ou a outras páginas.

tem como fazer o vscodium(ou o vscode) usar o deepseek local para esse tipo de uso?

tem sim, existe uma gama de plugins opensource como codium, ai cursor q da pra integrar diretamente no vscode e usar deepseek local. Mas a velocidade vai depender muito do seu pc
O Código Fonte TV também fez vídeo sobre isso: [youtube@codigofontetv - Use DeepSeek de Graça no VS Code (Testamos)](https://youtu.be/WRQCFU8nLsY)

Caramba! E pelo que vi do código, fez melhor que muito dev júnior que eu conheço.

Desculpe amigo, o código é horrível. Esses conhecidos seus ainda não são Devs Júnior
Pois é, são os que estão chegando no mercado formados via Pokedéx. Fui chamado para salvar alguns projetos em clientes diferentes e o código estava desse nível pra baixo, vai por mim a coisa tá feia por aí.
n sou do react native. Mas pq o código é horrível? me pareceu realmente sem boas práticas, mas nada q chegasse a ser horrível baseado no escopo simples e pequeno da idea de App
Não existe essa de "projeto **pequeno**" ou "projeto **grande**". Se o código estiver mal estruturado, qualquer mudança pode ser um **problema**. No projeto da postagem toda a lógica, os componentes e os estilos de cada tela estão **misturados dentro de um único arquivo**. Agora imagine um aplicativo com várias telas e funcionalidades escritas dessa forma. Um simples ajuste pode virar um pesadelo porque você não sabe onde mexer sem correr o risco de quebrar algo ou criar um bug que vai **passar dias ou semanas pra consertar** ou você pode pedir ajuda da IA pra bagunçar mais ainda. Por exemplo, se nesse código você tivesse que implementar um sistema de curtidas para comentários e postagens, onde cada um pode ser curtido e descurtido separadamente, você provavelmente teria que espalhar lógica repetitiva por vários lugares do código, mas se o projeto estivesse organizado com componentes menores, como um `Comments.js` para listar os comentários e um `CommentItem.js` para representar cada comentário individualmente, você saberia exatamente onde colocar a lógica de curtidas, evitando repetição desnecessária e tornando futuras alterações muito mais simples.

Muito interessante! nesse momento considero as IAs boas para otimizar o aprendizado.

Muito bom o experimento, vou conferir a IDE, e tem utilizado para coisas diferentes deste exemplo?

Gostei dessa novidade. Será que o Filipe Deschamps topa fazer um Review no YouTube?

Vale um vídeo do Filipe falando sobre isso. Sensacional o resultado.

Uma sensação de que estamos cada vez mais próximos do nosso fim =/

ps: Nós programadores, rsrs.

Seria incrível o Felipe fazer um vídeo sobre