Dites adieu à l'angoisse du code et découvrez le plaisir du développement : Trae AI facilite la création d'applications, et tout le monde peut devenir développeur !

Le développement de logiciels subit une profonde transformation sous l'impulsion de l'intelligence artificielle (IA). De l'achèvement du code et de la correction des bogues à la génération de code par le dialogue en langage naturel, l'IA évolue à un rythme remarquable.

Récemment, Byte Jump a relancé un nouvel outil de programmation de l'IA : Trae, qui a de nouveau suscité une grande attention dans le secteur.

Trae L'interface est en chinois, ce qui est très convivial pour les développeurs chinois et abaisse le seuil de démarrage. De plus, Trae est équipé d'un Claude 3.5 Sonnet et GPT-4o Les assistants IA pilotés par modèle offrent aux développeurs une assistance puissante et intelligente.

existent Mode constructeur Trae est un assistant à part entière qui comprend la vision du développeur et l'aide à construire des produits concrets à partir de la base.

ainsi que Mode chat Trae est un programmeur complet qui est toujours disponible pour répondre aux besoins des développeurs en matière de programmation et les aider à accomplir leurs tâches de développement de manière efficace.

Plus intéressant encore, l'outil Trae intègre des modèles avancés tels que Claude 3.5 Sonnet et GPT-4o, qui sont désormais disponibles gratuitement pour les utilisateurs, ce qui constitue sans aucun doute une aubaine pour les développeurs.

Cet article présente ensuite Trae en profondeur, en montrant comment développer une application à partir de zéro grâce à l'interaction du dialogue, et en ressentant le nouveau charme de la programmation de l'IA.

Guide de démarrage rapide

1) Visitez le site officiel de Trae :

entretiens https://www.trae.ai/ Après avoir accédé au site officiel, les utilisateurs verront l'interface comme indiqué ci-dessous. Cliquez sur "Télécharger pour macOS"pour télécharger le programme d'installation.

à noterTrae n'est actuellement supporté que sur macOS, mais une version Windows est en cours d'élaboration, alors restez à l'écoute.

2. l'installation et la mise en service initiale :

Lorsque vous ouvrez Trae pour la première fois après l'installation, la langue par défaut est le chinois simplifié, qui tient compte des habitudes d'utilisation des développeurs chinois.

3. configuration d'initialisation et connexion :

Trae guidera l'utilisateur à travers la configuration initiale telle que la sélection du thème, l'importation de la configuration de l'IDE, l'ajout d'éléments de démarrage en ligne de commande, et enfin jusqu'à l'écran de connexion.

Notes importantesLes utilisateurs devront s'identifier pour bénéficier des capacités de Trae en matière d'intelligence artificielle. Le processus de connexion peut nécessiter l'utilisation d'un outil web, et les utilisateurs peuvent choisir entre l'enregistrement par courrier électronique ou la connexion à un compte tiers.

4) Aperçu des interfaces fonctionnelles :

Après s'être connecté, l'utilisateur accède à l'interface principale de Trae, qui prend en charge un riche ensemble de modules d'extension pouvant être installés pour améliorer les capacités de codage de l'éditeur afin de répondre aux besoins de développement individuels.

Exercice pratique : développement d'un générateur de couplets pour la fête du printemps de l'IA

Afin de démontrer les capacités d'application de Trae de manière plus intuitive, cet article prendra pour exemple le développement d'un générateur de couplets pour la fête du printemps, et amènera les lecteurs à expérimenter le plaisir de la co-programmation avec l'IA et de la personnalisation de bénédictions exclusives pour le Nouvel An chinois, pour eux-mêmes et pour leur famille.

Dans ce document, le processus de développement du projet est divisé en quatre étapes : initialisation du projet, mise en œuvre de l'interface utilisateur de base, logique de génération des couplets de la fête du printemps et optimisation du style.

Initialisation du projet

Tout d'abord, passez en mode Builder et créez un fichier nommé ai-couplet de nouveaux projets.

Entrez une description de l'exigence dans la boîte de dialogue :

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

Trae AI répond rapidement en fournissant des commandes d'initialisation du projet, et l'utilisateur n'a plus qu'à cliquer sur "être en mouvement"pour l'exécuter.

L'IA aidera ensuite à configurer les fichiers de style nécessaires. L'utilisateur examine les modifications, confirme qu'elles sont correctes et clique sur "Acceptée dans son intégralité"pour terminer la configuration.

En quelques clics, l'initialisation du projet est terminée et le projet est opérationnel.

Il convient de mentionner que Trae dispose d'une fonction de prévisualisation Web intégrée, qui permet d'afficher l'effet de l'interface en temps réel, ce qui facilite grandement le débogage des projets frontaux.

Mise en œuvre de l'interface utilisateur de base

Une fois l'initialisation du projet terminée, l'étape suivante consiste à commencer à mettre en œuvre l'interface utilisateur du générateur de la fête du printemps. Reportez-vous au diagramme de prototype d'interface suivant pour décrire les exigences de l'interface avec l'IA.

En envoyant une brève invite contenant un prototype de diagramme, Trae comprend immédiatement l'intention de la conception et commence à écrire le code automatiquement. L'utilisateur n'a plus qu'à examiner les modifications apportées au document et à cliquer sur "Acceptée dans son intégralité"c'est-à-dire.

Une interface esthétiquement agréable est rapidement présentée, avec des éléments d'interface très cohérents avec l'image du prototype et encore plus esthétiques en termes de polices de caractères et de couleurs.

Le processus d'interaction ci-dessus montre que Trae comprend non seulement le code, mais qu'il analyse également avec précision le contenu de l'image. L'ensemble du processus de développement de l'interface est fluide et naturel, ce qui rend le travail traditionnel de développement de l'interface facile et efficace.

Génération de couplets pour la fête du printemps : implémentation logique

Après avoir créé l'interface utilisateur, la tâche principale consiste à mettre en œuvre la fonction de génération des couplets de la Fête du Printemps. Cette fonction prend en compte les données de l'utilisateur et appelle l'API de Claude pour générer les couplets de la Fête du Printemps correspondants.

Le développement de cette fonctionnalité se poursuit avec Trae AI :

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

Trae AI a rapidement terminé le développement de la fonctionnalité, y compris les appels à l'interface API, la gestion des erreurs et d'autres aspects logiques. Cependant, au cours du processus de test, le message "Failed to generate Spring Festival couplets" (Échec de la génération des couplets de la fête du printemps) est apparu.

Ne vous préoccupez pas des problèmes, renvoyez-les simplement à l'IA pour qu'elle les résolve.

Les utilisateurs peuvent même envoyer à l'IA une capture d'écran accompagnée d'une brève description du problème afin d'aider l'IA à comprendre et à résoudre le problème avec plus de précision.

Après plusieurs séries d'optimisations et d'ajustements, nous avons finalement obtenu une fonction de génération de couplets pour la fête du printemps entièrement fonctionnelle et stable.

Désormais, que vous tapiez "maison", "printemps" ou tout autre mot-clé, Trae peut générer des couplets du Nouvel An chinois de bonne facture et de bon augure.

Optimisation du style de l'interface

Ensuite, essayez de passer en mode Chat pour optimiser l'affichage des couplets de la fête du printemps.

Après être passé en mode "chat", il continue à communiquer avec l'IA sur les besoins d'optimisation dans un dialogue en langage naturel, avec des captures d'écran de l'interface :

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

Trae AI est également prompt à fournir des codes de modification de style spécifiques que l'utilisateur doit examiner.

Cliquez "appareilAprès avoir confirmé qu'il n'y a pas d'erreurs, cliquez sur le bouton " ".Acceptée dans son intégralité"Compléter la mise à jour.

L'optimisation des détails de l'interface peut nécessiter plusieurs conversations et ajustements avec l'IA. L'utilisateur n'a qu'à décrire clairement l'intention de la modification.

Par exemple, le style actuel des couplets est légèrement monotone et l'atmosphère festive peut encore être améliorée. Vous pouvez donc demander à l'IA des suggestions d'optimisation.

Inspirés par la suggestion d'AI, nous avons décidé d'ajouter deux petites lanternes sur les côtés gauche et droit de la bannière pour renforcer l'atmosphère festive. Afin d'exprimer plus clairement le concept, nous avons recherché des images de lanternes sur l'internet et avons dessiné un schéma simple que nous avons envoyé à AI en lui demandant de nous aider à réaliser le projet.

Trae AI a rapidement compris l'intention du design et a commencé à écrire le code. L'ajout des éléments de la lanterne a été rapidement achevé avec des résultats satisfaisants, et a même ajouté un effet dynamique de balancement d'un côté à l'autre pour rendre la lanterne plus vivante.

L'ajout de lanternes confère à l'interface une forte connotation de Nouvel An chinois. En observant que la zone au milieu du couplet est légèrement vide, nous avons décidé d'ajouter le mot "福" au milieu du couplet. Nous avons également dessiné un schéma et l'avons envoyé à l'IA pour qu'elle nous aide à le réaliser.

remarques finales

Comme le montre cet article, Trae joue le rôle d'un assistant de programmation efficace pendant le développement du projet "AI Spring Festival", en aidant le développeur à créer une application entièrement fonctionnelle grâce à des interactions de dialogue naturelles et fluides.

Bien sûr, en tant que nouveau produit, Trae a encore quelques points à perfectionner.

Par exemple, lors de la réalisation de l'effet d'animation de lanterne, l'utilisateur est invité à fournir des images d'exemple pour aider l'IA à accomplir la tâche de développement plus efficacement.

Pour certaines règles de configuration couramment utilisées, l'éditeur n'a pas encore fourni d'options globales, de sorte que les utilisateurs doivent répéter les paramètres lorsqu'ils les réutilisent, ce qui rend le processus d'exploitation un peu fastidieux. Nous espérons que l'équipe Trae optimisera ces détails dans les versions ultérieures.

Néanmoins, nous pensons que les outils de programmation de l'IA tels que Trae seront perfectionnés au fur et à mesure que les développeurs se joindront à nous et nous feront part de leurs commentaires positifs. Les outils et les artisans se complètent, ce qui améliorera considérablement l'efficacité du développement de logiciels.

L'ajout de la technologie de l'IA a sans aucun doute abaissé le seuil de programmation, permettant à un plus grand nombre de personnes de participer au développement de logiciels et de créer des produits Internet plus pratiques et plus créatifs.

À l'avenir, nous pourrions être à l'aube d'une ère d'accélération de l'innovation en matière de produits Internet.