So greifen Sie auf Ihren Code in Coderick AI zu und bearbeiten ihn

Coderick AI erstellt Ihr Projekt anhand Ihrer Anweisungen im Chat. Dabei entsteht eine echte Codebasis – mit denselben Dateien, mit denen auch Entwickler arbeiten würden. Über den Tab „CODE“ können Sie diese Codebasis direkt in Coderick AI öffnen, den Code lesen und nachvollziehen sowie jederzeit manuelle Änderungen vornehmen.

Was bietet Ihnen der Tab „Code“ in Ihrem Coderick-AI-Projekt?

Der größte Vorteil von Coderick AI besteht darin, dass Sie Ihre Wünsche in natürlicher Sprache beschreiben können – ohne Code schreiben oder verstehen zu müssen. Es gibt jedoch Situationen, in denen Sie genau wissen, was geändert werden muss – eine CSS-Klasse, ein Farbwert, ein einzelnes Attribut. In solchen Fällen kann es schneller sein, die Änderung selbst vorzunehmen, als sie zu beschreiben. Manchmal möchten Sie auch einfach sehen, was erstellt wurde.

Der Zugriff auf den Code bietet Ihnen insbesondere folgende Vorteile:

• Vollständige Transparenz. Sie können jede von Coderick AI erstellte Datei öffnen und lesen. Dadurch bleibt kein Teil Ihres Projekts eine Blackbox.
• Manuelle Änderungen ohne Credit-Verbrauch. Wenn Sie eine Datei selbst bearbeiten, werden keine Credits verbraucht. Das ist anders, als wenn Sie Coderick AI bitten, die Änderung für Sie vorzunehmen. Für kleine Anpassungen, die Sie bereits selbst durchführen können, ist die direkte Bearbeitung daher schneller und kostengünstiger.
• Jedes Speichern ist ein Wiederherstellungspunkt. Bei jedem erfolgreichen Speichern wird eine neue Version erstellt, zu der Sie später zurückkehren können. So können Sie Änderungen bedenkenlos ausprobieren.
• Keine Bindung. Sie können eine einzelne Datei oder Ihr gesamtes Projekt als .zip-Datei herunterladen.

Wie greife ich auf den Code-Tab zu?

Öffnen Sie Ihr Projekt in Coderick AI und wählen Sie dann „CODE“ in der Tab-Leiste oberhalb des Vorschaubereichs aus. Dort finden Sie auch die Tabs „IN DER VORSCHAU ANZEIGEN” und „VISUELL BEARBEITEN“.

Die Vorschau wird durch die Codeansicht ersetzt: Links sehen Sie die Dateistruktur und rechts den Editor.

Ihre Dateien durchsuchen

In der Dateistruktur werden die Dateien und Ordner Ihres Projekts angezeigt. Wählen Sie einen Ordner aus, um ihn zu erweitern, und wählen Sie anschließend eine Datei aus, um sie im Editor zu öffnen.

Bei größeren Projekten erleichtern Ihnen zwei Funktionen die Navigation:

• Mehrere Dateien gleichzeitig öffnen. Wenn Sie eine zweite Datei öffnen, wird die erste nicht geschlossen. Jede geöffnete Datei erhält einen eigenen Tab am oberen Rand des Editors. So können Sie bequem zwischen Dateien wechseln, wenn sich eine Änderung über mehrere Dateien erstreckt. Schließen Sie eine Datei über das ✕ auf ihrem Tab.
• Dateistruktur einklappen. Über das Steuerelement links neben den Dateitabs können Sie die Dateistruktur ausblenden und dem Editor die gesamte Breite zur Verfügung stellen. Wählen Sie das Steuerelement erneut aus, um die Dateistruktur wieder einzublenden.

Bearbeiten und Speichern

Sie können direkt im Editor tippen und jede Datei manuell ändern. Manuelle Bearbeitungen verbrauchen keine Credits.

Sobald Sie eine Änderung vornehmen, zeigt die Symbolleiste den Hinweis auf nicht gespeicherte Änderungen an. Gleichzeitig werden die Schaltflächen „VERWERFEN“ und „SPEICHERN“ aktiviert. Außerdem erscheint auf dem Tab jeder geänderten Datei ein Punkt.

Beachten Sie beim Bearbeiten Ihrer Dateien die folgenden Tipps:

• Experimentieren Sie frei. Nehmen Sie eine Änderung vor, schreiben Sie sie um, machen Sie sie rückgängig. Erst wenn Sie „Speichern” auswählen, werden Ihre Änderungen auf Ihr Projekt angewendet. Mit CTRL + Z können Sie eine Änderung rückgängig machen und mit CTRL + Y wiederherstellen.
• Speichern Sie mehrere Änderungen als einen gemeinsamen Build. Beim Speichern wird eine neue Version Ihres Projekts mit allen vorgenommenen Änderungen erstellt. Wenn Sie Ihre Änderungen sammeln und erst speichern, wenn Sie fertig sind, erzeugt ein bewusstes Speichern einen einzigen Build – anstatt das Projekt nach jeder einzelnen Änderung neu zu erstellen.
• Sie können Ihre Änderungen verwerfen. Über die Schaltfläche „VERWERFEN“ können Sie Ihre nicht gespeicherten Änderungen verwerfen und die Dateien auf ihren zuletzt gespeicherten Stand zurücksetzen.
  

  

Was passiert beim Speichern?

Im Chat-Panel wird eine neue Versionskarte mit der Bezeichnung „Code bearbeiten“ und einem Zeitstempel angezeigt. Diese Version dient als Wiederherstellungspunkt. Über die Steuerelemente der Karte können Sie die betreffende Version anzeigen oder Ihr Projekt später auf diese Version zurücksetzen, falls eine nachfolgende Änderung nicht wie gewünscht funktioniert. Kurz gesagt: Jedes erfolgreiche Speichern erstellt eine Version, auf die Sie bei Bedarf zurückgreifen können.

Coderick AI auf eine bestimmte Datei verweisen

Sie müssen nicht jede Änderung selbst vornehmen. Sie können die geöffnete Datei in Ihrer nächsten Chat-Nachricht referenzieren. Die Datei wird dann als Chip oberhalb des Eingabefelds angezeigt. Anschließend beschreiben Sie wie gewohnt in natürlicher Sprache, was Sie ändern möchten.

Durch die Referenzierung wird die Bearbeitung auf diese Datei fokussiert. Dadurch kann Coderick AI Änderungen und Erklärungen schneller und präziser durchführen, da nicht erst ermittelt werden muss, welchen Teil Ihres Projekts Sie meinen.

Ihren Code durchsuchen

Es gibt zwei Suchfunktionen für unterschiedliche Aufgaben.

Im gesamten Projekt suchen: Verwenden Sie das Suchfeld oberhalb der Dateistruktur und wählen Sie das Suchsymbol aus. Die Ergebnisse werden in zwei Bereichen angezeigt, jeweils mit einer Trefferanzahl:

• Dateien: Dateien, deren Name mit Ihrer Suche übereinstimmt.
• In Dateien: Dateien, deren Inhalt mit Ihrer Suche übereinstimmt. Für jede Datei wird die Anzahl der Treffer angezeigt.

So können Sie eine Datei finden, wenn Sie sich an ihren Namen erinnern, oder nach einer Zeichenfolge suchen, wenn Sie nur noch wissen, was im Code steht.

In der geöffneten Datei suchen: Drücken Sie CTRL + F oder wählen Sie das Suchsymbol in der Symbolleiste des Tabs „Code“ aus, um die Suchleiste für die aktuell geöffnete Datei zu öffnen. Jede Übereinstimmung wird hervorgehoben und ein Trefferzähler angezeigt.

Ihren Code herunterladen

Über das Download-Symbol in der Symbolleiste des Tabs „Code“ können Sie zwischen zwei Optionen wählen:

• Ausgewählte Datei herunterladen: Lädt die aktuell im Editor geöffnete Datei herunter.
• Gesamte Codebasis herunterladen: Lädt das gesamte Projekt als .zip-Archiv herunter.