Toolify Toolify logo
open
Home AI News DE Erstellen Sie eine Full-Stack-App mit React, OpenAI und Express

Erstellen Sie eine Full-Stack-App mit React, OpenAI und Express

Updated on Feb 06,2024

Erstellen Sie eine Full-Stack-App mit React, OpenAI und Express

Inhaltsverzeichnis:

  1. Einführung
  2. Schritt 1: Einrichten der Backend-Umgebung
  3. Schritt 2: Erhalten eines API-Schlüssels von OpenAI
  4. Schritt 3: Interaktion mit der OpenAI-API
  5. Schritt 4: Einrichten des Express-Servers
  6. Schritt 5: Erstellung der JSX-Datei
  7. Schritt 6: Einbinden von Tailwind CSS
  8. Schritt 7: Implementierung der Logik in der Komponente
  9. Schritt 8: Abschluss der Anwendung

🌐 Einführung

In dieser Serie werde ich Ihnen zeigen, wie Sie eine Full-Stack-Anwendung aufbauen können, indem Sie die OpenAI-API nutzen. Wir werden Dolly integrieren und auf der Backend-Seite Node.js und Express verwenden, während wir auf der Frontend-Seite React einsetzen. All dies können wir in nur 10 Minuten schaffen. Lassen Sie mich Ihnen schnell zeigen, wie das funktioniert.

🛠️ Schritt 1: Einrichten der Backend-Umgebung

Zuerst müssen wir die Backend-Umgebung einrichten. Öffnen Sie dazu den Backend-Ordner und initialisieren Sie die erforderlichen Dateien. Installieren Sie anschließend die benötigten Pakete wie Express, Body Parser, OpenAI und Dot EnV. Nachdem dies abgeschlossen ist, gehen Sie zum Frontend-Ordner und erstellen Sie ein neues React-Projekt mit dem Namen "Open AI GUI". Vergessen Sie nicht, auch die Datei ".ENV" und "index.js" im Backend-Ordner zu erstellen.

🔐 Schritt 2: Erhalten eines API-Schlüssels von OpenAI

Als nächstes benötigen wir einen API-Schlüssel von OpenAI. Gehen Sie dazu auf die OpenAI-Website und melden Sie sich an oder registrieren Sie sich. Nachdem Sie angemeldet sind, gehen Sie zu Ihrem Profil und klicken Sie dort auf "API Keys anzeigen". Erstellen Sie einen neuen geheimen Schlüssel und kopieren Sie ihn. Öffnen Sie die ".ENV" Datei im Backend-Ordner und fügen Sie den API-Schlüssel dort ein.

💻 Schritt 3: Interaktion mit der OpenAI-API

Jetzt können wir mit der Interaktion mit der OpenAI-API beginnen. Gehen Sie erneut auf die OpenAI-Website und rufen Sie die Beispiele auf. Wählen Sie das Beispiel "Summarize for a Second Grader" aus und kopieren Sie den dazugehörigen Code. Fügen Sie den Code in Ihre Anwendung ein, wickeln Sie ihn in eine asynchrone Funktion ein und importieren Sie die erforderlichen Module. Testen Sie die Funktion, indem Sie eine Anfrage stellen. Ersetzen Sie den fest codierten Text durch den vom Benutzer eingegebenen Text.

⚙️ Schritt 4: Einrichten des Express-Servers

Jetzt ist es an der Zeit, unseren Express-Server aufzusetzen. Installieren Sie die erforderlichen Module wie Express und Body Parser und richten Sie die CORS-Unterstützung ein, um eine Verbindung mit dem Frontend herzustellen. Stellen Sie sicher, dass der Server auf Port 4000 lauscht. Erstellen Sie dann die entsprechenden Endpunkte für die GPT- und Dolly-Funktionen. Verwenden Sie Thunderclient oder eine ähnliche Erweiterung, um Ihre APIs zu testen.

📃 Schritt 5: Erstellung der JSX-Datei

Jetzt können wir die Benutzeroberfläche erstellen, indem wir JSX-Code verwenden. Erstellen Sie einen Wrapper, der den gesamten Inhalt umschließt, und fügen Sie einen Titel hinzu. Erstellen Sie ein Formular, das die Benutzereingabe, die Auswahl des Endpunkts und einen Senden-Button enthält. Fügen Sie außerdem eine Ausgabemöglichkeit hinzu, um die Ergebnisse anzuzeigen.

🎨 Schritt 6: Einbinden von Tailwind CSS

Um das Aussehen unserer Anwendung zu verbessern, können wir Tailwind CSS verwenden. Folgen Sie den Anweisungen in der Dokumentation, um Tailwind in Ihr Projekt einzubinden. Fügen Sie die entsprechenden Direktiven in Ihre CSS-Datei ein und starten Sie die Anwendung erneut. Nun können Sie Tailwind in Ihrer Anwendung verwenden.

🧠 Schritt 7: Implementierung der Logik in der Komponente

Jetzt werden wir die Logik in der Komponente implementieren. Installieren Sie dazu das axios-Modul und richten Sie die erforderlichen Hooks ein. Erstellen Sie eine Funktion, um das Formular abzusenden, und behandeln Sie die Antwort entsprechend. Zeigen Sie die Ergebnisse anhand der Benutzerauswahl an, ob es sich um ein Bild oder einen Text handelt. Behandeln Sie auch mögliche Fehler und geben Sie diese aus.

🏁 Schritt 8: Abschluss der Anwendung

In diesem Video werden wir die letzte JSX-Datei erstellen, um unsere Anwendung abzuschließen. Entfernen Sie die Beispiel-DIV und erstellen Sie die erforderlichen JSX-Elemente für das Formular, die Benutzereingabe, die Ausgabe und den Button. Speichern Sie die Änderungen und testen Sie die Anwendung erneut. Jetzt haben Sie eine funktionierende Anwendung, die Sie an Ihre Bedürfnisse anpassen können.

Ich hoffe, Ihnen hat diese Anleitung gefallen. Wenn Sie weitere Fragen haben, lassen Sie es mich bitte wissen. Vielen Dank fürs Zuschauen und bis zum nächsten Mal!

Highlights:

  • Aufbau einer Full-Stack-Anwendung mit OpenAI-API
  • Integration von Dolly und GPT
  • Verwendung von Node.js, Express und React
  • Einrichten des Backends und Frontends
  • Anfordern eines API-Schlüssels von OpenAI
  • Interaktion mit der OpenAI-API
  • Einrichten des Express-Servers
  • Erstellung der Benutzeroberfläche mit JSX
  • Einbinden von Tailwind CSS
  • Implementierung der Logik in der Komponente

FAQ:

Frage: Kann ich die OpenAI-API kostenlos nutzen? Antwort: Ja, Sie können sich ohne Kreditkarte für den Zugriff auf einen API-Schlüssel registrieren.

Frage: Gibt es eine Begrenzung für die Anzahl der API-Anfragen? Antwort: Ja, es gibt Begrenzungen für die Anzahl der Anfragen. Weitere Informationen finden Sie auf der OpenAI-Website.

Frage: Kann ich die Anwendung an meine Bedürfnisse anpassen? Antwort: Ja, Sie können die Anwendung nach Belieben anpassen und erweitern.

Frage: Kann ich Tailwind CSS in anderen Projekten verwenden? Antwort: Ja, Sie können Tailwind CSS in beliebigen Projekten verwenden, um das Styling zu verbessern.

Ressourcen:

Anthropic: Der ChatGPT-Rivale, auf den Google 300 Millionen Dollar wettet!
Bauen Sie LLM und generative KI-Anwendungen mit Open Source und Hugging Face

Most people like

Related Articles
Top AI Tools
Weitere Tools
Empfehlen
Resourse
Browse by Alphabet
Top 1000 AI Tools Directory
Read more
About
Kontakt
toolify
Toolify, das Verzeichnis der besten AI-Websites und AI-Tools
English 简体中文 繁體中文 한국어 日本語 Português Español Deutsch Français Tiếng Việt

Copyright ©2026 toolify