Verabschieden Sie sich von der Angst vor dem Code und genießen Sie den Nervenkitzel der Entwicklung: Trae AI macht es einfach, Apps zu erstellen, und jeder kann ein Entwickler sein!

Die Softwareentwicklung erfährt durch die künstliche Intelligenz (KI) einen tiefgreifenden Wandel. Von der Code-Vervollständigung und Fehlerbehebung bis hin zur Generierung von Code durch Dialoge in natürlicher Sprache entwickelt sich KI in einem bemerkenswerten Tempo.

Kürzlich hat Byte Jump ein neues KI-Programmiertool auf den Markt gebracht: Trae, das in der Branche erneut große Aufmerksamkeit erregt hat.

Trae Die Benutzeroberfläche ist auf Chinesisch, was für chinesische Entwickler sehr freundlich ist und die Einstiegshürde senkt. Darüber hinaus ist Trae mit einem Claude 3.5 Die modellgesteuerten KI-Assistenten Sonnet und GPT-4o bieten Entwicklern eine leistungsstarke und intelligente Unterstützung.

existieren Builder-Modus Trae ist ein vollwertiger Assistent, der die Visionen der Entwickler versteht und ihnen hilft, reale Produkte von Grund auf zu entwickeln.

wie auch Chat-Modus Trae ist ein Full-Stack-Programmierer, der immer auf Abruf zur Verfügung steht, um auf die Programmierbedürfnisse der Entwickler einzugehen und ihnen zu helfen, ihre Entwicklungsaufgaben effizient zu erledigen.

Noch interessanter ist, dass das Trae-Tool fortschrittliche Modelle wie Claude 3.5 Sonnet und GPT-4o integriert, die den Nutzern jetzt kostenlos zur Verfügung stehen, was zweifellos ein Segen für Entwickler ist.

In diesem Artikel erfahren Sie, wie Sie mit Trae eine Anwendung von Grund auf durch Dialoginteraktion entwickeln und den neuen Charme der KI-Programmierung spüren können.

Schnellstart-Anleitung

1. die offizielle Website von Trae besuchen:

Interviews https://www.trae.ai/ Nachdem Sie die offizielle Website aufgerufen haben, sehen Sie die unten abgebildete Benutzeroberfläche. Klicken Sie auf "Herunterladen für macOS", um das Installationsprogramm herunterzuladen.

Bitte beachtenTrae wird derzeit nur unter macOS unterstützt, eine Windows-Version ist in Arbeit, also bleiben Sie dran.

2. die Installation und Erstinbetriebnahme:

Wenn Sie Trae zum ersten Mal nach der Installation öffnen, ist die Standardsprache vereinfachtes Chinesisch, was den Nutzungsgewohnheiten chinesischer Entwickler Rechnung trägt.

3. die Initialisierungskonfiguration und die Anmeldung:

Trae führt den Benutzer durch die Ersteinrichtung, z. B. die Auswahl des Themas, den Import der IDE-Konfiguration, das Hinzufügen von Befehlszeilen-Startelementen und schließlich zum Anmeldebildschirm.

Wichtige HinweiseBenutzer müssen sich anmelden, um die KI-Funktionen von Trae nutzen zu können. Der Anmeldeprozess kann die Verwendung eines webbasierten Tools erfordern, und die Nutzer können zwischen einer E-Mail-Registrierung oder einer Anmeldung über ein Drittanbieterkonto wählen.

4. eine Übersicht über die funktionalen Schnittstellen:

Nach erfolgreicher Anmeldung gelangen die Benutzer auf die Hauptschnittstelle von Trae, die eine Vielzahl von Plug-in-Erweiterungen unterstützt, die installiert werden können, um die Codierungsmöglichkeiten des Editors zu erweitern und so den individuellen Entwicklungsanforderungen gerecht zu werden.

Praktische Übung: Entwicklung eines AI-Frühlingsfest-Couplet-Generators

Um die Anwendungsmöglichkeiten von Trae intuitiver zu demonstrieren, wird dieser Artikel die Entwicklung eines KI-Frühlingsfest-Couplet-Generators als Beispiel nehmen und die Leser dazu bringen, den Spaß am Co-Programmieren mit KI zu erleben und exklusive Segenswünsche zum chinesischen Neujahr für sich und ihre Familien zu erstellen.

In diesem Artikel wird der Projektentwicklungsprozess in vier Schritte unterteilt: Projektinitialisierung, grundlegende UI-Implementierung, Logik zur Generierung von Frühlingsfest-Kopplungen und Stiloptimierung.

Projekt-Initialisierung

Wechseln Sie zunächst in den Builder-Modus und erstellen Sie eine Datei namens ai-couplet von neuen Projekten.

Geben Sie in das Dialogfeld eine Beschreibung der Anforderung ein:

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

Trae AI antwortet schnell mit Befehlen zur Projektinitialisierung, und der Benutzer klickt einfach auf "in Bewegung sein" zur Ausführung.

Die KI hilft dann bei der Konfiguration der erforderlichen Stildateien. Der Benutzer überprüft die Änderungen, bestätigt, dass sie korrekt sind, und klickt auf "Vollständig akzeptiert", um die Konfiguration abzuschließen.

Mit ein paar einfachen Klicks ist die Projektinitialisierung abgeschlossen und das Projekt ist einsatzbereit.

Es ist erwähnenswert, dass Trae eine eingebaute Web-Vorschau-Funktion hat, die den Interface-Effekt in Echtzeit zeigen kann, was für das Debuggen von Front-End-Projekten sehr praktisch ist.

Grundlegende UI-Implementierung

Nachdem die Initialisierung des Projekts abgeschlossen ist, besteht der nächste Schritt darin, mit der Implementierung der Benutzeroberfläche des Frühlingsfest-Generators zu beginnen. Beschreiben Sie die Schnittstellenanforderungen an die KI anhand des nachstehenden Diagramms für den Schnittstellenprototyp.

Nach einer kurzen Eingabeaufforderung, die ein Prototypendiagramm enthält, versteht Trae sofort die Entwurfsabsicht und beginnt automatisch mit dem Schreiben von Code. Der Benutzer überprüft einfach die Änderungen am Dokument und klickt auf "Vollständig akzeptiert", das heißt.

Eine ästhetisch ansprechende Benutzeroberfläche für den Frühlingsfest-Generator wird schnell präsentiert, mit Oberflächenelementen, die in hohem Maße mit dem Bild des Prototyps übereinstimmen und in Bezug auf Schriftarten und Farbschema sogar noch ästhetischer sind.

Anhand des oben beschriebenen Interaktionsprozesses können wir sehen, dass Trae nicht nur den Code versteht, sondern auch den Bildinhalt genau analysiert. Der gesamte Prozess der Schnittstellenentwicklung verläuft reibungslos und natürlich, was die traditionelle Schnittstellenentwicklung einfach und effizient macht.

Implementierung der Logik zur Erzeugung von Frühlingsfest-Paaren

Nachdem die Benutzeroberfläche erstellt wurde, besteht die Hauptaufgabe darin, die Funktion zur Erzeugung von Frühlingsfest-Paaren zu implementieren. Diese Funktion nimmt Benutzereingaben entgegen und ruft die Claude-API auf, um die entsprechenden Frühlingsfest-Paare zu erzeugen.

Die Entwicklung dieser Funktionalität wird mit Trae AI weiter vervollständigt:

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

Trae AI hat die Entwicklung der Funktion schnell abgeschlossen, einschließlich der API-Schnittstellenaufrufe, der Fehlerbehandlung und anderer Logik. Während des Testprozesses erschien jedoch die Meldung "Fehler bei der Erstellung von Frühlingsfest-Paaren".

Machen Sie sich keine Sorgen über Probleme, geben Sie sie einfach an die KI weiter, damit diese sie behebt.

Die Nutzer können sogar einen Screenshot mit einer kurzen Beschreibung des Problems an die KI senden, damit diese das Problem besser verstehen und lösen kann.

Nach mehreren Optimierungs- und Anpassungsrunden haben wir schließlich eine voll funktionsfähige und stabile Funktion zur Erzeugung von Frühlingsfest-Couplets erreicht.

Egal, ob Sie nun "Zuhause", "Frühling" oder ein anderes Stichwort eingeben, Trae kann gut ausgearbeitete, verheißungsvolle chinesische Neujahrspaare erstellen.

Optimierung des Schnittstellenstils

Versuchen Sie als nächstes, in den Chat-Modus zu wechseln, um die Anzeige der Frühlingsfest-Paare weiter zu optimieren.

Nach dem Umschalten in den Chat-Modus kommuniziert er weiterhin mit der KI über den Optimierungsbedarf in einem Dialog in natürlicher Sprache und mit Screenshots der Schnittstelle:

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

Trae AI ist ebenfalls schnell in der Lage, spezifische Stiländerungscodes anzugeben, die der Benutzer zur Überprüfung des Codes benötigt.

Klick "Gerät"Nachdem Sie bestätigt haben, dass es keine Fehler gibt, klicken Sie auf "Vollständig akzeptiert"Schließen Sie die Aktualisierung ab.

Für die Optimierung von Schnittstellendetails kann es mehrere Gespräche und Anpassungen mit der KI erfordern. Der Nutzer muss nur die Absicht der Änderung klar beschreiben.

Zum Beispiel ist der aktuelle Couplet-Stil etwas eintönig und die festliche Atmosphäre kann noch verbessert werden.

Inspiriert von AIs Vorschlag beschlossen wir, zwei kleine Laternen links und rechts des Banners anzubringen, um die festliche Atmosphäre zu verstärken. Um das Designkonzept deutlicher zum Ausdruck zu bringen, suchten wir im Internet nach Bildern von Laternenmaterial und zeichneten ein einfaches schematisches Diagramm, das wir an AI schickten und um Unterstützung bei der Umsetzung des Designs baten.

Trae AI verstand schnell die Designabsicht und begann mit dem Schreiben des Codes. Die Hinzufügung der Laternenelemente war bald mit zufriedenstellenden Ergebnissen abgeschlossen und fügte sogar einen dynamischen Effekt des Hin- und Herschwingens hinzu, um die Laterne noch lebendiger zu machen.

Die Hinzufügung von Laternen verleiht der Schnittstelle ein starkes Aroma des chinesischen Neujahrs. Da wir festgestellt haben, dass der Bereich in der Mitte des Paares etwas leer ist, haben wir beschlossen, das Wort "福" in der Mitte des Paares einzufügen. Wir zeichnen auch ein Schema und senden es an die KI, damit sie uns bei der Umsetzung hilft.

Schlussbemerkungen

Wie in diesem Beitrag gezeigt wird, spielt Trae während der Entwicklung des Projekts "AI Spring Festival" die Rolle eines effizienten Programmierassistenten, der den Entwickler bei der Erstellung einer voll funktionsfähigen Anwendung durch natürliche und reibungslose Dialoginteraktionen unterstützt.

Als neues Produkt muss Trae natürlich noch ein paar Dinge perfektionieren.

Bei der Realisierung des Laternen-Animationseffekts muss der Benutzer beispielsweise Beispielbilder zur Verfügung stellen, um die KI anzuleiten, die Entwicklungsaufgabe effizienter zu erledigen.

Für einige häufig verwendete Konfigurationsregeln hat der Editor noch keine globalen Optionen bereitgestellt, so dass die Benutzer die Einstellungen wiederholen müssen, wenn sie sie wiederverwenden wollen, was die Bedienung etwas umständlich macht. Wir gehen davon aus, dass das Trae-Team diese Details in späteren Versionen optimieren wird.

Dennoch glauben wir, dass KI-Programmierwerkzeuge wie Trae perfektioniert werden, wenn mehr Entwickler mitmachen und positives Feedback geben. Werkzeuge und Handwerker ergänzen sich gegenseitig, und das wird die Effizienz der Softwareentwicklung erheblich verbessern.

Die Einführung der KI-Technologie hat zweifellos die Programmierschwelle gesenkt, so dass sich mehr Menschen an der Softwareentwicklung beteiligen und praktischere und kreativere Internetprodukte entwickeln können.

Möglicherweise stehen wir am Rande einer Ära des Innovationsschubs bei Internetprodukten.