Diga adeus à ansiedade do código e abrace a emoção do desenvolvimento: o Trae AI facilita a criação de aplicativos, e todos podem ser desenvolvedores!

O desenvolvimento de software está passando por uma profunda transformação impulsionada pela inteligência artificial (IA). Desde a conclusão do código e a correção de bugs até a geração de código por meio do diálogo em linguagem natural, a IA está evoluindo em um ritmo impressionante.

Recentemente, a Byte Jump relançou uma nova ferramenta de programação de IA: Trae, que mais uma vez despertou grande atenção no setor.

A interface de usuário do Trae é em chinês, o que é muito amigável para os desenvolvedores chineses e reduz o limiar para começar. Além disso, o Trae é equipado com dois assistentes de IA acionados pelos modelos Claude 3.5 Sonnet e GPT-4o, oferecendo aos desenvolvedores um suporte inteligente avançado.

existir Modo construtor Trae é um assistente completo que entende a visão do desenvolvedor e o ajuda a criar produtos reais desde o início.

bem como Modo de bate-papo Trae é um programador full-stack que está sempre à disposição para atender às necessidades de programação dos desenvolvedores e ajudá-los a concluir suas tarefas de desenvolvimento com eficiência.

Ainda mais interessante, a ferramenta Trae integra modelos avançados, como o Claude 3.5 Sonnet e o GPT-4o, que agora estão disponíveis gratuitamente para os usuários, o que é, sem dúvida, uma vantagem para os desenvolvedores.

A seguir, este artigo apresentará o Trae em profundidade, mostrando como desenvolver um aplicativo do zero por meio da interação de diálogo e sentir o novo encanto da programação de IA.

Guia de início rápido

1 - Visite o site oficial do Trae:

entrevistas https://www.trae.ai/ Depois de entrar no site oficial, os usuários verão a interface conforme mostrado abaixo. Clique em "Download para macOS" para fazer o download do instalador.

ObserveNo momento, o Trae só é compatível com o macOS, mas uma versão para Windows está sendo desenvolvida, portanto, fique atento.

2. instalação e partida inicial:

Quando você abre o Trae pela primeira vez após a instalação, o idioma padrão é o chinês simplificado, que leva em conta os hábitos de uso dos desenvolvedores chineses.

3. configuração de inicialização e login:

O Trae guiará o usuário pela configuração inicial, como a seleção do tema, a importação da configuração do IDE, a adição de itens de inicialização da linha de comando e, finalmente, a tela de login.

Observações importantesLogin: Os usuários precisarão fazer login para experimentar os recursos de IA da Trae. O processo de login pode exigir o uso de uma ferramenta baseada na Web, e os usuários podem escolher entre o registro por e-mail ou um login de conta de terceiros.

4. visão geral das interfaces funcionais:

Após o login bem-sucedido, os usuários entrarão na interface principal do Trae, que oferece suporte a um rico conjunto de extensões de plug-in que podem ser instaladas para aprimorar os recursos de codificação do editor e atender às necessidades de desenvolvimento individuais.

Exercício prático: desenvolvimento do gerador de dísticos do AI Spring Festival

Para demonstrar os recursos de aplicativos do Trae de forma mais intuitiva, este artigo tomará como exemplo o desenvolvimento de um gerador de pares de Festival da Primavera com IA e levará os leitores a experimentar a diversão de coprogramar com IA e personalizar bênçãos exclusivas do Ano Novo Chinês para si mesmos e suas famílias.

Neste artigo, o processo de desenvolvimento do projeto é dividido em quatro etapas: inicialização do projeto, implementação básica da interface do usuário, lógica de geração de dísticos do Spring Festival e otimização do estilo.

Inicialização do projeto

Primeiro, mude para o modo Builder e crie um arquivo chamado par de ai de novos projetos.

Digite uma descrição do requisito na caixa de diálogo:

Quero criar um projeto de gerador de links AI spring no diretório atual, usando a pilha de tecnologia React + Tailwind CSS.
Por favor, me ajude com as seguintes etapas:
Inicializar a estrutura do projeto
*Configurar as dependências necessárias
Configurar o ambiente de desenvolvimento básico
Inicie a primeira etapa.

O Trae AI responde rapidamente, fornecendo comandos de inicialização do projeto, e o usuário simplesmente clica em "estar em movimento" para executar.

Em seguida, a IA ajudará a configurar os arquivos de estilo necessários. O usuário revisa as alterações, confirma que estão corretas e clica em "Aceito na íntegra" para concluir a configuração.

Com alguns cliques simples, a inicialização do projeto é concluída e o projeto está em funcionamento.

Vale a pena mencionar que o Trae tem uma função integrada de visualização na Web, que pode mostrar o efeito da interface em tempo real, o que é muito conveniente para a depuração de projetos front-end.

Implementação básica da interface do usuário

Após a conclusão da inicialização do projeto, a próxima etapa é começar a implementar a interface do usuário do Spring Festival Generator. Descreva os requisitos da interface para a IA, consultando o diagrama do protótipo de interface abaixo.

Ao enviar um breve prompt contendo um diagrama de protótipo, o Trae entende imediatamente a intenção do projeto e começa a escrever o código automaticamente. O usuário simplesmente revisa as alterações no documento e clica em "Aceito na íntegra", isto é.

Uma interface esteticamente agradável do Spring Festival Generator é apresentada rapidamente, com elementos de interface altamente consistentes com a imagem do protótipo e ainda mais agradáveis esteticamente em termos de fontes e esquema de cores.

A partir do processo de interação acima, podemos ver que o Trae não apenas entende o código, mas também analisa com precisão o conteúdo da imagem. Todo o processo de desenvolvimento da interface é suave e natural, tornando o trabalho tradicional de desenvolvimento de interface fácil e eficiente.

Implementação da lógica de geração de dísticos do Festival da Primavera

Depois de ter a interface do usuário, a tarefa principal é implementar a função de geração de dísticos do Festival da Primavera. Essa função recebe a entrada do usuário e chama a API do Claude para gerar os dísticos correspondentes do Festival da Primavera.

O desenvolvimento dessa funcionalidade continua a ser concluído com a Trae AI:

Por favor, ajude-me a implementar a função de geração de pares do Festival da Primavera:
Quando o usuário clica no botão "Generate Spring Festival Couplet", as seguintes ações precisam ser executadas:
Obter o assunto ou a palavra-chave inserida pelo usuário na caixa de entrada
Chamar a API do Claude para gerar um dístico com os seguintes requisitos:
Dístico horizontal (quatro caracteres)
Dísticos (dísticos de sete caracteres)
O dístico deve ser limpo e estar de acordo com a atmosfera festiva do Ano Novo Chinês.
Exiba os resultados gerados nas áreas vermelhas correspondentes.

A Trae AI concluiu rapidamente o desenvolvimento do recurso, incluindo chamadas de interface de API, tratamento de erros e outras lógicas. No entanto, durante o processo de teste, apareceu a mensagem "Failed to generate Spring Festival couplets" (Falha ao gerar dísticos do Festival da Primavera).

Não se preocupe com os problemas, apenas continue enviando-os de volta para a IA corrigir.

Os usuários podem até mesmo enviar uma captura de tela para a IA com uma breve descrição do problema para ajudar a IA a entender e resolver o problema com mais precisão.

Após várias rodadas de otimização e ajustes, finalmente conseguimos uma função de geração de dísticos do Spring Festival totalmente funcional e estável.

Agora, independentemente de você digitar "home" (casa), "spring" (primavera) ou qualquer outra palavra-chave, o Trae pode gerar dísticos bem elaborados e auspiciosos para o Ano Novo Chinês.

Otimização do estilo da interface

Em seguida, tente mudar para o modo Chat para otimizar ainda mais a exibição dos dísticos do Festival da Primavera.

Depois de mudar para o modo Chat, ele continua a se comunicar com a IA sobre as necessidades de otimização em um diálogo de linguagem natural, com capturas de tela da interface:

Acho que a cor de fundo da interface atual é cinza e um pouco menos festiva. Gostaria de fazer os seguintes ajustes:
Modificar a cor de fundo para branco para tornar os dísticos vermelhos da primavera mais atraentes e proeminentes.
Aumentar o espaçamento entre os dísticos da esquerda e da direita.
Ajustar o tamanho da fonte para tornar o texto dos dísticos mais atraente.
Por favor, ajude-me a modificar o código de estilo relevante.

O Trae AI também é rápido em fornecer códigos de modificação de estilo específicos que o usuário precisa para revisar o código.

Clique em "aparelho", o Trae exibirá as alterações novamente e, depois de confirmar que não há erros, clique em "Aceito na íntegra" Conclua a atualização.

Para a otimização dos detalhes da interface, podem ser necessárias várias conversas e ajustes com a IA. O usuário só precisa descrever claramente a intenção da modificação.

Por exemplo, o estilo atual do dístico é um pouco monótono e ainda há espaço para melhorias na atmosfera festiva, portanto, você pode pedir à IA sugestões de otimização.

Inspirados pela sugestão da AI, decidimos acrescentar duas pequenas lanternas nos lados esquerdo e direito do banner para melhorar a atmosfera festiva. Para expressar o conceito do design com mais clareza, procuramos imagens de materiais de lanternas na Internet e desenhamos um diagrama esquemático simples, que enviamos à AI e pedimos ajuda para realizar o design.

A adição dos elementos da lanterna foi logo concluída com resultados satisfatórios, e até mesmo adicionou um efeito dinâmico de oscilação de um lado para o outro para tornar a lanterna mais animada.

A adição de lanternas dá um forte sabor de Ano Novo Chinês à interface. Observando que a área no meio do dístico está ligeiramente vazia, decidimos adicionar a palavra "福" no meio do dístico. Também desenhamos um esquema e o enviamos à IA para nos ajudar a realizá-lo.

observações finais

Conforme demonstrado neste documento, o Trae desempenha o papel de um assistente de programação eficiente durante o desenvolvimento do projeto "AI Spring Festival", ajudando o desenvolvedor a criar um aplicativo totalmente funcional por meio de interações de diálogo naturais e suaves.

É claro que, como um produto novo, Trae ainda tem algumas coisas a aperfeiçoar.

Por exemplo, no processo de realização do efeito de animação de lanterna, o usuário deve fornecer imagens de exemplo para orientar a IA a concluir a tarefa de desenvolvimento com mais eficiência.

Para algumas regras de configuração comumente usadas, o editor ainda não forneceu opções globais, de modo que os usuários precisam repetir as configurações ao reutilizá-las, o que torna o processo de operação um pouco complicado. Esperamos que a equipe do Trae otimize esses detalhes em versões posteriores.

No entanto, acreditamos que as ferramentas de programação de IA, como o Trae, serão aperfeiçoadas à medida que mais desenvolvedores participarem e fornecerem feedback positivo. Ferramentas e artesãos se complementam, e isso aumentará muito a eficiência do desenvolvimento de software.

Sem dúvida, a adição da tecnologia de IA reduziu o limite de programação, permitindo que mais pessoas participem do desenvolvimento de software e criem produtos de Internet mais práticos e criativos.

Olhando para o futuro, podemos estar no limiar de uma era de surto de inovação de produtos da Internet.