Daytona-Sample-React: Text-KI

Mein Daytona-Beispiel ist ein React-Projekt namens Mindsnap-prosemaster-daytona. Es handelt sich um eine sehr einfache, einsteigerfreundliche Anwendung, die mit React, Node und AI nach der MVC-Architektur entwickelt wurde

In unserer schnelllebigen Welt möchte niemand seine Zeit damit verbringen, Dinge zu konfigurieren, die Entwickler da draußen wollen einfach weitermachen und es programmieren. Klingt nach dir? Dann: Prost! Dann sind Sie bei uns genau richtig.

Aber Moment, wir alle wissen, dass Entwicklung nicht so funktioniert. Leider benötigen Sie selbst für die einfachsten Projekte Konfigurationstools, zu installierende Pakete, weiterzuleitende Ports, manchmal VPN-Setup und mehr. Hier kommt Daytona mit seiner einfachen, aber bahnbrechenden Lösung für Entwickler ins Spiel.

Fangen Sie an, neugierig zu werden, nicht wahr?

In diesem Beitrag begleite ich Sie durch meine Reise zum Aufbau von MindSnap ProseMaster – einer supereinsteigerfreundlichen Anwendung, die entwickelt wurde, um lange Texte in schnelle Zusammenfassungen, wichtige Erkenntnisse und unterhaltsame Mnemoniken umzuwandeln.

Beginnen wir mit einer kurzen Einführung darüber, wie ich diese Anwendung erstellt habe. Ich glaube, das war meine erste Anwendung, die ich mit React und Node erstellt habe. Es war ziemlich einfach. Vorausgesetzt, Sie wissen, wie API-Aufrufe erfolgen, wird dies ziemlich einfach sein!

Erstens handelt es sich hierbei um eine einseitige Anwendung mit einem Eingabefeld, in das Benutzer einen beliebigen Text eingeben können. Mit diesem Text und der Übergabe einer Eingabeaufforderung sende ich ihn nun an die Gemini-API. Die Antwort von der Gemini-API wird wieder auf dem Bildschirm angezeigt.

Also, wie habe ich, ein Entwickler, der sich mit Containern oder ähnlichem nicht auskennt, von Daytona erfahren?

Nun, dafür müssen wir Quira danken. Bei Quira’s Quest 023 gewann Daytona einen riesigen Preispool von 6.000 USD. Sobald ich davon erfuhr, fing ich an, meine Projekte durchzublättern, um mich für die Quest einzureichen!

Ich erinnere mich noch deutlich daran, dass ich dachte, ich sollte ein einfaches Projekt wählen, da es bei einem komplexen Projekt schwieriger sein könnte, einen DevContainer für meinen Arbeitsbereich einzurichten. Aber, oh Gott, ich hätte nicht falscher liegen können.

Ich weiß, dass einige Leser mit Entwicklungscontainer und Arbeitsbereich nicht vertraut sind. Aber keine Sorge! Ich habe sie alle in diesem Blog behandelt, also lesen Sie einfach weiter und langsam wird Ihnen alles klar.

Lassen Sie uns tatsächlich mit diesen Begriffen beginnen:

• Dev Container: Eine vorkonfigurierte Umgebung, die alle für die Entwicklung erforderlichen Tools und Einstellungen enthält.

• Arbeitsbereich: Dies ist ein digitaler Raum, in dem wir alle Dateien, Codes und jeweiligen Projekte, an denen wir arbeiten, speichern und organisieren können.

• Port: Stellen wir uns das wie eine Tür vor, durch die Daten zwischen unserer Entwicklungsumgebung und anderen Diensten oder Geräten fließen.

• PostCreateCommand: Ein wichtiger Befehl von devcontainer.json, der nach dem Einrichten der Entwicklungsumgebung automatisch ausgeführt wird. Ich denke, dies wird verwendet, um Einrichtungsaufgaben abzuschließen.

Mit Daytona habe ich herausgefunden, wie einfach es ist, Entwicklungsumgebungen einzurichten und zu verwalten, unabhängig von Ihrem Kenntnisstand. Bleiben Sie hier, um von meinen Erfahrungen zu lernen und zu sehen, wie Daytona Ihr nächstes Projekt reibungsloser und effizienter machen kann!

Lassen Sie uns näher darauf eingehen, wie ich angefangen habe
Ich lerne eher visuell! Das bedeutet, dass ich mir lieber Videos oder Bilder der Umsetzung ansehe, als lange, umfangreiche Texte durchzulesen. Daher habe ich wie üblich die Anweisungen nicht gelesen, die wirklich einfach und leicht zu befolgen waren.

An dieser Stelle muss ich mich bei der Open-Source-Community bedanken, die Quira aufbaut. Einer meiner lieben Freunde, den ich in der Gemeinde kennengelernt habe, K OM, bot Hilfe an. Wir hofften auf einen Anruf, bei dem er drei einfache Schritte für den Einstieg erklärte:

1. Navigieren Sie zunächst zum Projekt und richten Sie eine Datei mit dem Namen „.devcontainer/devcontainer.json“ ein.
2. Generieren Sie einen Devcontainer mit dem Dev-Container-Generator
3. Bearbeiten Sie die Readme-Datei, um die Benutzer darauf aufmerksam zu machen und fertig zu machen!

Ist es wirklich so einfach? Nun, die kurze Antwort lautet JA. Aber da steckt noch mehr dahinter: Ich glaube gerne, dass das Testen des Arbeitsbereichs einen größeren Teil des Erlernens und Verwendens von Daytona ausmacht.

Was hat mich eigentlich motiviert? Und was war der frustrierendste Teil dieser Reise?
Die 100 ersten gültigen Einsendungen würden jeweils 50 USD erhalten! Wenn das für Sie kein motivierender Faktor ist, dann weiß ich nicht, was es ist.

Daytona hat diesen Spruch:

Aber das war für mich der frustrierendste Teil. Die Anwendung funktionierte auf meinem Computer, aber nicht auf dem Computer des Rezensenten, was mich kurzzeitig zu der Frage führte: Lohnt sich Daytona wirklich?

Haha, jetzt wo ich darüber nachdenke. Klingt wirklich lustig. Ich war derjenige, der falsche Konfigurationen vornahm und Daytona die Schuld gab, weil sie dachte, dass sie falsche Behauptungen aufstellte.

Ja, ich gebe zu, ich bin wegen der Belohnung gekommen, aber ehrlich gesagt bin ich wegen der Technologie geblieben. Ich habe all diese Frustrationen ertragen, weil ich gesehen habe, wozu Daytona wirklich fähig ist.

*Daher komme ich zu der Frage: Mit welchen konkreten Problemen hatte ich zu kämpfen? *

Das erste Problem, das bei mir auftrat, war, dass der Container, den ich mithilfe von KI generiert habe, beim Versuch, den Daytona-Arbeitsbereich zu erstellen, einen schwerwiegenden Fehler auslöste.

Nachdem ich dieses Problem gelöst hatte, fiel mir als nächstes auf, dass mein Projekt mit Vite erstellt wurde und es sich herausstellte, dass in diesem Fall nichts auf dem Bildschirm angezeigt wurde. Es wird als weiße, leere Seite angezeigt. Dies war ein Clientproblem.

Später, als ich das Client-Problem behoben hatte, reagierte mein Server nicht mehr.

Als sowohl mein Client als auch mein Server zu funktionieren begannen, bekam ich dieses CORS-Problem.

Schließlich habe ich den Server entfernt und direkt die API aufgerufen, aber dann habe ich beim Erstellen des Arbeitsbereichs eine Fehlermeldung erhalten, aber die IDE wurde trotzdem geöffnet. Es stellte sich heraus, dass ich meine devcontainer.json ändern musste, um sie an die Änderungen anzupassen, die ich in meinem Code vorgenommen hatte.

Lösungen und wie bin ich dazu gekommen?

Ehrlich gesagt waren mit allen Problemen sehr einfache Lösungen verbunden. Vielleicht hätte ich sie nie herausgefunden, wenn es nicht die Hilfe des Daytona-Teams gegeben hätte, insbesondere von Jafa, der geduldig die notwendigen Änderungen überprüfte und vorschlug. Er hat mir geholfen, mehr über Daytona zu erfahren, wie es funktioniert und warum es das Beste ist.

Einige Lösungen, die Sie möglicherweise benötigen, sind:

1. Wenn Ihr Projekt Vite verwendet, müssen Sie in Ihrer package.json Vite mit einem Host-Flag angeben. Es sollte ungefähr so ​​aussehen:
   

2. Wenn Sie sowohl Frontend- als auch Backend-Anforderungen haben, müssen Sie den Server-Port als weitergeleiteten Port hinzufügen. Sollte etwa so aussehen:
   

3. Und eine endgültige Lösung für alle Probleme, auf die Sie stoßen könnten, ist: FRAGEN. Kommen Sie zu Daytonas Slack und erzählen Sie ihnen von Ihrem Problem. Ich bin mir ziemlich sicher, dass Sie die Hilfe bekommen werden, die Sie suchen. Slack-Link

Meine Vorschläge, Warum Daytona verwenden?
Ich würde lieber fragen, warum nicht Daytona? Es ist super einfach zu bedienen und leicht zu verwalten. Es stellt sicher, dass Sie sich nicht mehr mit der komplexen Einrichtung von Entwicklungsumgebungen herumschlagen müssen

Mit Daytona können Sie sich auf das Wesentliche konzentrieren, anstatt sich um die Einrichtung zu kümmern.

Einige der besten Funktionen, die Daytona meiner Meinung nach zu einer attraktiven Option für Entwickler machen, sind:

• Einzelbefehl:
  Starten Sie Ihre gesamte Entwicklungsumgebung mit nur einem Befehl. Sie müssen die Dinge nicht manuell einrichten – alles ist sofort einsatzbereit.

• Läuft überall:
  Ganz gleich, ob Sie sich auf Ihrem Laptop, einem Remote-Server oder in der Cloud befinden – Ihre Entwicklungsumgebung funktioniert überall. Es ist völlig flexibel, sodass Sie von jeder Maschine aus arbeiten können.

• IDE-Unterstützung:
  Nahtlose Integration mit beliebten Tools wie VS Code und JetBrains. Außerdem gibt es eine integrierte Web-IDE, sodass Sie ohne Einrichtung mit dem Codieren beginnen können.

• Sicherheit:
  Verbindet Sie automatisch über ein sicheres VPN mit Ihrer Entwicklungsumgebung. Dadurch bleiben Ihre Daten sicher und Sie können auch aus der Ferne sicher arbeiten.

Diese Funktionen sparen Zeit, erhöhen die Flexibilität und sorgen für einen reibungslosen und sicheren Entwicklungsprozess. Hey, was kann ein Entwickler mehr verlangen? Es ist perfekt für Entwickler aller Niveaus.

Ehrliches Feedback!
Nun zu behaupten, dass es perfekt ist, ist vielleicht etwas zu weit hergeholt. Obwohl es meiner Meinung nach eines der besten in der Branche ist, gibt es bestimmte Änderungen, die das Benutzererlebnis tatsächlich verbessern könnten.

• Vorgefertigte Framework-spezifische Vorlagen Ja, ich meine Vorlagen, keine Beispiele. Was ist so unterschiedlich zwischen ihnen? Ich weiß, dass Daytona Beispiele sammelt, damit Entwickler auf diese Beispiele zurückgreifen und an der Optimierung des Daytona-Arbeitsbereichs arbeiten können.

Aber wenn Daytona gebrauchsfertige Vorlagen für einige der beliebten Tech-Stacks bereitstellt, einschließlich einer vorkonfigurierten devcontainer.json-Datei. So etwas wie ein interaktiver Einrichtungsassistent, der einige Vorlagen unterstützt.

• Ein-Klick-Umgebungsfreigabe Ich denke, Daytona kann sofort eine Funktion zum Teilen von Entwicklungsumgebungen hinzufügen. Entwickler können einen Link zur Zusammenarbeit an Teamkollegen senden.

So etwas wie Daytona Share, das eine sichere Verbindung zur Umgebung generiert, auf die über die integrierte Web-IDE zugegriffen werden kann. Wir können hier sogar live zusammenarbeiten, wie in Google Docs.

• Vielleicht ein KI-gestützter Troubleshooter Ich habe darüber nachgedacht, weil viele Projekte an sehr einfachen Dingen wie falsch konfigurierten Ports, nicht übereinstimmenden Abhängigkeiten usw. festhielten.

Das sind noch einmal meine Gedanken darüber, was es besser machen könnte!

Imbiss:
Das einfache Sprichwort; Beurteilen Sie ein Buch nicht nach seinem Einband. Daytona ist viel mehr als das, was ich beschrieben habe, und Sie werden es nie herausfinden, wenn Sie es nicht versuchen. Worauf warten Sie noch? Probieren Sie es jetzt aus!

Und noch eine letzte Sache, bevor ich Sie verabschiede: Ich möchte dem gesamten Quira- und Daytona-Team meinen tiefsten Dank dafür aussprechen, dass es sich das ausgedacht hat. Ein großes Lob!

Github-Link zu meinem Projekt
Github-Link von Daytona
Link zu Daytona Quest

Das obige ist der detaillierte Inhalt vonDaytona-Sample-React: Text-KI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!