Executando verificação de segurança...
31

[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

AndroidiOS
TabNews App Versão AndroidTabNews 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.

Carregando publicação patrocinada...
4

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.

1

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.

1
1

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

1
1
2

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í.

1

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

2

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.

1
1
1
1
0
0