Einen Debug-Assistenten mit Monday.com und GPT erstellen: Eine Schritt-für-Schritt-Anleitung

Erstellung einer NextJS-Anwendung mit Monday.com: Integration von KI für Fehlervorschläge

Jeder Programmierer kennt die Frustration beim Debuggen – alte Stack Overflow-Posts durchsuchen, versuchen, das Problem zu lokalisieren, und Stunden festhängen. Dieses Tutorial wird Sie anleiten, eine NextJS-Anwendung zu entwickeln, die mit Monday.com integriert ist, insbesondere unter Verwendung seines Incoming Bugs-Boards, um automatisierte Vorschläge zur Behebung von Bugs mit GPT zu generieren.

Was ist Monday.com?

Monday.com ist eine dynamische Web- und mobile Arbeitsmanagement-Plattform, die für operationale Effizienz, Projektverfolgung, Datenvisualisierung und Teamzusammenarbeit konzipiert ist. Zu den wichtigsten Funktionen gehören:

• Anpassbare Dashboards und Boards
• Automatisierungsfähigkeiten für sich wiederholende Aufgaben
• Integration mit verschiedenen anderen Anwendungen für einen nahtlosen Workflow

Einrichten Ihrer Monday-App

1. Erstellen Sie ein Monday.com-Entwicklerkonto, falls Sie noch keins haben.
2. Melden Sie sich bei Ihrem Dashboard an und fügen Sie einen neuen Artikel hinzu, indem Sie die Produktentwicklungsvorlage wählen (insbesondere das Bug Queue-Board).
3. Fügen Sie der Incoming Bugs-Tabelle eine neue Spalte mit dem Titel Vorschläge hinzu.
4. Navigieren Sie zu Ihrem Avatar → Entwickler → App erstellen und benennen Sie sie Debug-Assistent.
5. Setzen Sie im OAuth-Bereich die Berechtigungen für me:read, boards:read und boards:write.

Installationsschritte

Um unser Projekt zu starten, nutzen wir eine NextJS-App-Vorlage von Monday.com, die vorkonfigurierte React-Komponenten enthält:

1. Klonen und installieren Sie die Vorlage.
2. Fügen Sie Ihren OPENAI_API_KEY in die .env-Datei ein.
3. Starten Sie Ihren Entwicklungsserver.
4. Verwenden Sie ngrok, um einen Tunnel für Ihre lokale Umgebung zu erstellen. Dies ermöglicht es Ihnen, Ihren Server über eine öffentliche URL verfügbar zu machen.

Verbindung zu Monday.com herstellen

1. Fügen Sie in Ihrer Monday-App ein neues Feature mit dem Titel Debug-Widget hinzu, indem Sie die Dashboard-Widgets-Option verwenden.
2. Wählen Sie Benutzerdefinierte URL als Quelle und fügen Sie Ihre ngrok-URL ein.
3. Ändern Sie die Quelle in Veröffentlichter Build und fügen Sie die gleiche ngrok-URL hinzu.
4. Veröffentlichen Sie die erste Version Ihrer App.
5. Gehen Sie zu Ihrem Workspace, greifen Sie auf das Bug Queue-Board zu und fügen Sie das Debug-Widget hinzu.

Entwicklung der App

Ihr nächster Schritt: erstellen Sie es im Code-Editor:

1. Kopieren Sie die Boilerplate-Datei aus monday-ai-prompt-template/src/examples/livestream-example/boilerplate.tsx und benennen Sie sie in debug-assistant.tsx um.
2. Aktualisieren Sie den Komponenten-Namen von LivestreamExample in DebugAssistant.
3. Bearbeiten Sie die Haupt-App-Seite unter monday-ai-prompt-template/src/app/page.tsx, entfernen Sie die ContextExplorerExample-Komponente und fügen Sie die DebugAssistant hinzu.

Dropdowns einrichten

Importieren Sie in debug-assistant.tsx die erforderlichen Komponenten und fügen Sie Dropdowns für die Auswahl von Board und Spalte hinzu:

import dynamic from 'next';
//... Fügen Sie hier Ihre Dropdowns hinzu

Definieren der Prompt-Verarbeitung

Vervollständigen Sie als Nächstes die Funktion handleSend(), um Prompts an OpenAI zu senden und die Spalte zu aktualisieren:

const handleSend = async () => {
    // Vorgänge beim Senden behandeln
};

Behebung aktueller Bugs

Beachten Sie, dass die aktuellen NextJS-Versionen möglicherweise Abrufprobleme auf localhost verursachen. Um dies zu beheben:

1. Bearbeiten Sie app/api/openai/route.ts, um Probleme mit den Anfrage-Headern zu umgehen.
2. Kommentieren Sie die Authentifizierungsüberprüfung vorübergehend während der Entwicklung aus.

Testen der Anwendung

Gehen Sie zu Monday.com zurück und überprüfen Sie Ihr Debug-Widget unter dem Bug Insights-Board. Sie benötigen Folgendes für Ihre Anfrage:

• Wählen Sie im ersten Dropdown Incoming Bugs.
• Wählen Sie im zweiten Dropdown Vorschläge.
• Geben Sie Ihre Eingabebedingung an, z.B. "Schreiben Sie eine kurze technische Lösung für diese Fehlerbeschreibung: @Bug Description".

Nach einigen Augenblicken sollte die Vorschlags-Spalte auf Grundlage der GPT-Antwort automatisch ausgefüllt werden, was die Effektivität der Integration demonstriert!

Fazit

In diesem Tutorial haben wir erfolgreich eine Monday.com-App erstellt, die mit einer KI für automatisierte Bug-Lösungen integriert ist. Sie werden ermutigt, die Benutzeroberfläche zu personalisieren und die Anfragen anzupassen, um den Bedürfnissen Ihres Teams gerecht zu werden. Sobald die App bereit für die Produktion ist, sollten Sie in Betracht ziehen, sie auf einem stabilen Server bereitzustellen.

Bei weiteren Fragen oder Unterstützung können Sie sich gerne über soziale Plattformen wie LinkedIn oder Twitter mit uns in Verbindung setzen.