Di adiós a la ansiedad por el código y abraza la emoción del desarrollo: Trae AI facilita la creación de aplicaciones, ¡y todo el mundo puede ser desarrollador!

El desarrollo de software está experimentando una profunda transformación impulsada por la inteligencia artificial (IA). Desde la finalización de código y la corrección de errores hasta la generación de código mediante el diálogo en lenguaje natural, la IA evoluciona a un ritmo notable.

Recientemente, Byte Jump relanzó una nueva herramienta de programación de IA: Trae, que volvió a suscitar una gran atención en el sector.

Trae La interfaz está en chino, lo que resulta muy amigable para los desarrolladores chinos y reduce el umbral para empezar. Además, Trae está equipado con un Claude 3.5 Los asistentes de IA basados en modelos Sonnet y GPT-4o ofrecen a los desarrolladores una asistencia potente e inteligente.

existe Modo constructor Trae es un asistente de pleno derecho que entiende la visión del desarrollador y le ayuda a crear productos reales desde cero.

así como Modo chat Trae es un programador de pila completa que siempre está disponible para responder a las necesidades de programación de los desarrolladores y ayudarles a completar sus tareas de desarrollo de manera eficiente.

Y lo que es aún más emocionante, la herramienta Trae integra modelos avanzados como Claude 3.5 Sonnet y GPT-4o, que ahora están a disposición de los usuarios de forma gratuita, sin duda una gran ayuda para los desarrolladores.

A continuación, este artículo experimentará Trae en profundidad, mostrando cómo desarrollar una aplicación desde cero a través de la interacción de diálogo, y sentir el nuevo encanto de la programación de IA.

Guía de inicio rápido

1. Visita el sitio web oficial de Trae:

entrevistas https://www.trae.ai/ Después de entrar en el sitio web oficial, los usuarios verán la interfaz como se muestra a continuación. Haga clic en "Descargar para macOS" para descargar el instalador.

AtenciónPor el momento, Trae sólo es compatible con macOS, pero se está preparando una versión para Windows, así que permanezca atento.

2. Instalación y puesta en marcha inicial:

Al abrir Trae por primera vez tras la instalación, el idioma por defecto es el chino simplificado, que tiene en cuenta los hábitos de uso de los desarrolladores chinos.

3. Configuración de inicialización e inicio de sesión:

Trae guiará al usuario a través de la configuración inicial, como la selección del tema, la importación de la configuración IDE, la adición de elementos de inicio de línea de comandos y, finalmente, a la pantalla de inicio de sesión.

Notas importantesEl proceso de inicio de sesión: Los usuarios tendrán que iniciar sesión para experimentar las capacidades de inteligencia artificial de Trae. El proceso de inicio de sesión puede requerir el uso de una herramienta basada en web, y los usuarios pueden elegir entre el registro por correo electrónico o el inicio de sesión en una cuenta de terceros.

4. Visión general de las interfaces funcionales:

Una vez iniciada la sesión, los usuarios accederán a la interfaz principal de Trae, que admite un amplio conjunto de extensiones de complementos que pueden instalarse para mejorar las capacidades de codificación del editor y satisfacer las necesidades de desarrollo individuales.

Ejercicio práctico: desarrollo del generador de coplas de la Fiesta de la Primavera de la IA

Para demostrar de forma más intuitiva las capacidades de aplicación de Trae, este artículo tomará como ejemplo el desarrollo de un Generador de Parejas de la Fiesta de Primavera de la IA, y llevará a los lectores a experimentar la diversión de co-programar con la IA y personalizar bendiciones exclusivas del Año Nuevo Chino para ellos y sus familias.

En este artículo, el proceso de desarrollo del proyecto se divide en cuatro pasos: inicialización del proyecto, implementación básica de la interfaz de usuario, lógica de generación de coplas del Festival de Primavera y optimización del estilo.

Inicialización del proyecto

En primer lugar, cambia al modo Constructor y crea un archivo llamado ai-couplet de nuevos proyectos.

Introduzca una descripción del requisito en el cuadro de diálogo:

我想在当前目录创建一个 AI 春联生成器的项目，使用 React + Tailwind CSS 技术栈。
请帮我完成以下步骤：
初始化项目结构
*配置必要的依赖
设置基本的开发环境
请开始第一步。

Trae AI responde rápidamente proporcionando comandos de inicialización del proyecto, y el usuario simplemente hace clic en "estar en movimiento" para ejecutarlo.

A continuación, la IA ayudará a configurar los archivos de estilo necesarios. El usuario revisa los cambios, confirma que son correctos y hace clic en "Aceptado en su totalidad" para completar la configuración.

Con unos pocos clics, la inicialización del proyecto está completa y el proyecto en marcha.

Vale la pena mencionar que Trae tiene una función de vista previa web incorporada, que puede mostrar el efecto de la interfaz en tiempo real, proporcionando una gran comodidad para la depuración de proyectos front-end.

Implementación básica de la interfaz de usuario

Una vez finalizada la inicialización del proyecto, el siguiente paso es empezar a implementar la interfaz de usuario del generador de la Fiesta de la Primavera. Describa los requisitos de la interfaz a la IA consultando el diagrama del prototipo de interfaz que figura a continuación.

Al enviar una breve solicitud con un diagrama prototipo, Trae comprende inmediatamente la intención del diseño y empieza a escribir código automáticamente. El usuario sólo tiene que revisar los cambios del documento y hacer clic en "Aceptado en su totalidad"es decir.

Rápidamente se presenta una interfaz estéticamente agradable del Generador de Fiestas de Primavera, con elementos de interfaz muy coherentes con la imagen del prototipo y aún más agradables estéticamente en cuanto a fuentes y combinación de colores.

A partir del proceso de interacción anterior, podemos ver que Trae no sólo entiende el código, sino que también analiza con precisión el contenido de la imagen. Todo el proceso de desarrollo de la interfaz es fluido y natural, lo que hace que el trabajo tradicional de desarrollo de interfaces sea fácil y eficiente.

Aplicación de la lógica de generación de coplas de la Fiesta de la Primavera

Tras disponer de la interfaz de usuario, la tarea principal es implementar la función de generación de coplas de la Fiesta de la Primavera. Esta función toma los datos introducidos por el usuario y llama a la Claude API para generar las correspondientes coplas de la Fiesta de la Primavera.

El desarrollo de esta funcionalidad sigue completándose con Trae AI:

请帮我实现春联生成功能：
当用户点击 “生成春联” 按钮时，需要执行以下操作：
获取输入框中用户输入的主题或关键词
调用 Claude API 生成一副对联，具体要求如下：
横批（四字）
上下联（七字对）
对仗工整，符合春节喜庆氛围
将生成结果分别展示在对应的红色区域中

Trae AI completó rápidamente el desarrollo de la función, incluidas las llamadas a la interfaz API, la gestión de errores y otros aspectos lógicos. Sin embargo, durante el proceso de prueba, apareció el mensaje "Error al generar las coplas del Festival de Primavera".

No te preocupes por los problemas, sigue devolviéndoselos a la IA para que los solucione.

Los usuarios pueden incluso enviar a la IA una captura de pantalla con una breve descripción del problema para ayudarla a entenderlo y resolverlo con mayor precisión.

Tras varias rondas de optimización y ajuste, por fin hemos conseguido una función de generación de coplas para la Fiesta de la Primavera totalmente funcional y estable.

Ahora, si tecleas "hogar", "primavera" o cualquier otra palabra clave, Trae puede generar coplas bien elaboradas y propicias para el Año Nuevo chino.

Optimización del estilo de la interfaz

A continuación, prueba a cambiar al modo Chat para optimizar aún más la visualización de las coplas de la Fiesta de la Primavera.

Tras pasar al modo Chat, sigue comunicándose con la IA sobre las necesidades de optimización en un diálogo en lenguaje natural, con capturas de pantalla de la interfaz:

我发现当前界面背景色为灰色，节日氛围略显不足。希望进行如下调整：
将背景色修改为白色，使红色的春联更加醒目突出。
适当增加左右对联之间的间距。
调整字体大小，使对联文字更加醒目。
请帮我修改相关样式代码。

Trae AI es igualmente rápido para dar códigos específicos de modificación de estilo que el usuario necesita para revisar el código.

Pulse "aparato", Trae volverá a mostrar los cambios, tras confirmar que no hay errores, pulse "Aceptado en su totalidad" Completa la actualización.

La optimización de los detalles de la interfaz puede requerir múltiples conversaciones y ajustes con la IA. El usuario solo tiene que describir claramente la intención de la modificación.

Por ejemplo, el estilo actual de las coplas es ligeramente monótono y aún se puede mejorar el ambiente festivo, por lo que puedes pedir a la IA sugerencias de optimización.

Inspirados por la sugerencia de AI, decidimos añadir dos pequeños farolillos a izquierda y derecha de la pancarta para realzar el ambiente festivo. Para expresar más claramente el concepto del diseño, buscamos imágenes de material de farolillos en internet y dibujamos un sencillo diagrama esquemático, que enviamos a AI y le pedimos ayuda para realizar el diseño.

Trae AI comprendió rápidamente la intención del diseño y empezó a escribir el código. La incorporación de los elementos de la linterna no tardó en completarse con resultados satisfactorios, e incluso se añadió un efecto dinámico de balanceo de lado a lado para dar más vida a la linterna.

Los farolillos añaden a la interfaz un fuerte sabor a Año Nuevo chino. Observando que la zona del centro de la copla está ligeramente vacía, decidimos añadir la palabra "福" en el centro de la copla. También dibujamos un esquema y se lo enviamos a la IA para que nos ayude a realizarlo.

observaciones finales

Como se muestra en este artículo, Trae desempeña el papel de un eficaz asistente de programación durante el desarrollo del proyecto "AI Spring Festival", ayudando al desarrollador a crear una aplicación totalmente funcional mediante interacciones de diálogo naturales y fluidas.

Por supuesto, como nuevo producto, Trae aún tiene algunas cosas que perfeccionar.

Por ejemplo, en el proceso de realización del efecto de animación de linterna, se pide al usuario que proporcione imágenes de ejemplo para guiar a la IA a completar la tarea de desarrollo de forma más eficiente.

Para algunas reglas de configuración de uso común, el editor aún no ha proporcionado opciones globales, por lo que los usuarios tienen que repetir los ajustes al reutilizarlas, lo que hace que el proceso de operación sea un poco engorroso. Esperamos que el equipo de Trae optimice estos detalles en versiones posteriores.

No obstante, creemos que herramientas de programación de IA como Trae se perfeccionarán a medida que más desarrolladores se unan a ellas y aporten comentarios positivos. Herramientas y artesanos se complementan, y esto mejorará enormemente la eficiencia del desarrollo de software.

La incorporación de la tecnología de IA ha rebajado sin duda el umbral de programación, lo que ha permitido a más personas participar en el desarrollo de software y crear productos de Internet más prácticos y creativos.

De cara al futuro, puede que estemos a las puertas de una era de innovación vertiginosa de los productos de Internet.