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

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

Die Benutzeroberfläche von Trae ist auf Chinesisch, was für chinesische Entwickler sehr freundlich ist und die Einstiegsschwelle senkt. Darüber hinaus ist Trae mit zwei KI-Assistenten ausgestattet, die von den Modellen Claude 3.5 Sonnet und GPT-4o angetrieben werden und Entwicklern eine leistungsstarke intelligente Unterstützung bieten.

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 Dokument wird der Projektentwicklungsprozess in vier Schritte unterteilt: Projektinitialisierung, grundlegende UI-Implementierung, Logik zur Generierung von Frühlingsfest-Koppelungen und Stiloptimierung.

Projekt-Initialisierung

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

Geben Sie in das Dialogfeld eine Beschreibung der Anforderung ein:

Ich möchte ein AI-Spring-Link-Generator-Projekt im aktuellen Verzeichnis erstellen, mit React + Tailwind CSS-Technologie-Stack.
Bitte helfen Sie mir bei den folgenden Schritten:
Initialisieren der Projektstruktur
*Konfigurieren der notwendigen Abhängigkeiten
Einrichten der grundlegenden Entwicklungsumgebung
Bitte beginnen Sie mit dem ersten Schritt.

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, die Benutzeroberfläche des Frühlingsfest-Generators zu implementieren. Das folgende Schnittstellen-Prototypdiagramm beschreibt die Schnittstellenanforderungen an die KI.

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 Generierung 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:

Bitte helfen Sie mir bei der Implementierung der Funktion zur Erzeugung eines Frühlingsfest-Couplets:
Wenn der Benutzer auf die Schaltfläche "Frühlingsfest-Couplet generieren" klickt, müssen die folgenden Aktionen durchgeführt werden:
Abrufen des vom Benutzer in das Eingabefeld eingegebenen Betreffs oder Schlüsselworts
Aufruf der Claude API, um ein Couplet mit den folgenden Anforderungen zu erzeugen:
Horizontales Couplet (vier Zeichen)
Paare (Paare mit sieben Zeichen)
Das Couplet sollte ordentlich sein und der festlichen Atmosphäre des chinesischen Neujahrs entsprechen.
Zeigen Sie die generierten Ergebnisse in den entsprechenden roten Bereichen an.

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.

Ganz gleich, 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:

Ich empfinde die derzeitige Hintergrundfarbe der Benutzeroberfläche als grau und etwas weniger festlich. Ich möchte die folgenden Änderungen vornehmen:
Ändern Sie die Hintergrundfarbe in Weiß, damit die roten Frühlingspaare besser ins Auge fallen und hervorstechen.
Vergrößern Sie den Abstand zwischen den linken und rechten Paaren.
Passen Sie die Schriftgröße an, um den Text der Paare auffälliger zu machen.
Bitte helfen Sie mir, den entsprechenden Style Code zu ändern.

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 die Schaltfläche "Vollständig akzeptiert"Schließen Sie die Aktualisierung ab.

Für die Optimierung von Schnittstellendetails kann es mehrere Gespräche mit der KI erfordern, um zu kommunizieren und Anpassungen vorzunehmen. 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 Laternenanimationseffekts muss der Benutzer beispielsweise Beispielbilder zur Verfügung stellen, damit die KI die Entwicklungsaufgabe effizienter erledigen kann.

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 an Bord kommen 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.