Duet AI während des gesamten Softwareentwicklungszyklus verwenden

1. Übersicht

Das Google Cloud-Entwicklerteam arbeitet tagtäglich mit zahlreichen Google Cloud-Produkten und -Diensten. Anhand dieser Produkte lassen sich Anwendungen in der Cloud entwickeln, testen, bereitstellen und verwalten. Mit Unterstützung von Duet AI können Entwickler bei der Nutzung von Google Cloud-Produkten produktiver sein, indem sie den interaktiven Chat, die Codeunterstützung und eingebettete Integrationen von Duet AI nutzen.

Hinweis:Da es sich bei Duet AI um eine Technologie in der Frühphase handelt, kann sie Ergebnisse generieren, die plausibel erscheinen, aber sachlich falsch sind. Wir empfehlen Ihnen, alle Ausgaben von Duet AI vor der Verwendung zu validieren. Weitere Informationen finden Sie unter Duet-KI in Google Cloud und Responsible AI.

In diesem Lab wird der „Cymbal Superstore“ mithilfe von Duet AI bereitgestellt Web-App für Lebensmittel. Anschließend werden Sie eine neue Funktion entwickeln und bereitstellen sowie das Front- und Back-End der App erstellen. Außerdem erhalten Sie Unterstützung von Duet beim Schreiben von Tests für Ihre App und erfahren, wie Duet in andere Google Cloud-Tools eingebunden werden kann.

Zielsetzungen

Die folgenden Themen werden behandelt:

• Sie können eine vorhandene Webanwendung mit Duet AI optimieren.
• Die Anwendung in Cloud Run bereitstellen.
• Du kannst Duet AI auffordern, einen Fehler in der Anwendung zu erklären und eine Lösung zu finden.
• Entwickeln Sie mithilfe von Duet AI Tests für die Anwendung.
• Anwendungslogs mithilfe von Duet AI ansehen.

Vorbereitung

• Google Cloud Platform-Konto und ein Projekt mit aktivierter Abrechnung
• Linux-Basis

2. Einrichtung

In diesem Abschnitt werden alle Schritte behandelt, die für den Einstieg in dieses Lab erforderlich sind.

Projekt erstellen

Erstellen Sie ein neues Google Cloud-Projekt, um die Bereinigung zu erleichtern.

• Rufen Sie https://console.cloud.google.com auf.
• Klicken Sie auf das Drop-down-Menü für die Projektauswahl.
• Wählen Sie „Projekt erstellen“ aus.
• Geben Sie ihm einen einprägsamen Namen, z. B. „intro-to-containers“

Duet AI im Google Cloud-Projekt aktivieren

Wir aktivieren jetzt die Duet AI API in unserem Google Cloud-Projekt. Gehen Sie dazu so vor:

1. Gehen Sie zum Dashboard unter https://console.cloud.google.com und prüfen Sie, ob Sie das Google Cloud-Projekt ausgewählt haben, mit dem Sie für dieses Lab arbeiten möchten. Klicken Sie oben rechts auf das Duet AI-Symbol.

2. Rechts in der Konsole wird das Duet AI-Chatfenster geöffnet. Klicken Sie wie unten gezeigt auf die Schaltfläche „Aktivieren“. Wenn Sie die Schaltfläche „Aktivieren“ nicht sehen, sondern stattdessen eine Chat-Oberfläche angezeigt wird, haben Sie Duet AI wahrscheinlich bereits für das Projekt aktiviert und können direkt mit dem nächsten Schritt fortfahren.

3. Nach der Aktivierung können Sie Duet AI testen, indem Sie eine oder zwei Abfragen stellen. Es werden einige Beispielabfragen angezeigt, aber Sie können beispielsweise „Was ist Cloud Run?“ ausprobieren.

Duet AI antwortet mit der Antwort auf Ihre Frage. Sie können rechts oben auf das Symbol _ klicken, um das Duet AI-Chatfenster zu schließen.

Duet AI in der Cloud Shell-IDE aktivieren

Für den Rest des Codelabs verwenden wir die Cloud Shell-IDE. Wir müssen Duet AI in der Cloud Shell-IDE aktivieren und konfigurieren und die folgenden Schritte ausführen:

1. Starten Sie Cloud Shell über das unten angezeigte Symbol. Es kann ein bis zwei Minuten dauern, bis die Cloud Shell-Instanz gestartet ist.

2. Klicken Sie je nach Fall auf „Editor“ oder „Editor öffnen“ und warten Sie, bis die Cloud Shell-IDE angezeigt wird. Sie verwenden das „neue“ und nicht den alten Editor.

3. Klicken Sie wie dargestellt in der unteren Statusleiste auf die Schaltfläche "Cloud Code - Sign in" (Cloud Code - Anmelden). Autorisieren Sie das Plug-in wie angegeben. Wenn "Cloud Code – kein Projekt" angezeigt wird in der Statusleiste auf dieses und dann das entsprechende Google Cloud-Projekt aus der Liste der Projekte aus, mit denen Sie arbeiten möchten.

4. Klicken Sie rechts unten auf die Duet AI-Schaltfläche und wählen Sie das richtige Google Cloud-Projekt aus, für das wir die Cloud AI Companion API aktiviert hatten.

5. Nachdem Sie Ihr Google Cloud-Projekt ausgewählt und autorisiert haben, sollten Sie in der Cloud Code-Statusmeldung in der Statusleiste nachsehen, ob Duet AI auf der rechten Seite aktiviert ist (siehe unten):

Duet AI ist jetzt einsatzbereit.

3. Duet AI verwenden

Im Rahmen dieses Labs erstellen Sie eine Webanwendung. Im Lab finden Sie viele Orte, an denen Sie Duet ausprobieren können. Wenn Sie neugierig sind, können Sie Duet aber auch irgendwo im Lab fragen.

Beispielsweise verwenden Sie Terraform, um die Basisanwendung zu erstellen und bereitzustellen. Wenn Sie nicht wissen, was Terraform ist, können Sie Duet fragen. Wenn Sie die einzelnen Schritte verstehen möchten, können Sie sie in Duet erklären. Möchten Sie den Code tatsächlich öffnen und nach bestimmten Zeilen fragen? Testen Sie Duet –

Hinweis:Da es sich bei Duet AI um eine Technologie in der Frühphase handelt, kann sie Ergebnisse generieren, die plausibel erscheinen, aber sachlich falsch sind. Wir empfehlen Ihnen, alle Ausgaben von Duet AI vor der Verwendung zu validieren. Weitere Informationen finden Sie unter Duet-KI in Google Cloud und Responsible AI.

4. Webanwendung erstellen

In diesem Lab wird der Web-App für Lebensmittel. In den nachfolgenden Aufgaben dieses Labs entwickeln Sie mit Duet AI eine neue Funktion und stellen sie in dieser App bereit. Bevor Sie sehen können, wie Duet AI Ihnen hilft, vorhandenen Code zu verstehen, benötigen Sie bereits vorhandenen Code, mit dem Sie arbeiten können. Daher erstellen Sie jetzt die Frontend- und Backend-Komponenten dieser App.

Sie wechseln zwischen Cloud Shell und dem Cloud Shell-Editor, während Sie an diesem Projekt arbeiten. Das geht ganz einfach über die Schaltflächen oben auf dem Bildschirm:

Umgebung konfigurieren

Führen Sie die Befehle in Cloud Shell aus.

1. Legen Sie die Projekt-ID fest:

gcloud config set project <Google Cloud Project ID>

2. Führen Sie Docker Credential Helper aus:

gcloud auth configure-docker

3. Wenn Sie gefragt werden, ob Sie fortfahren möchten, geben Sie „Y“ ein.
4. Um den „Cymbal Superstore“ herunterzuladen Anwendungscode ausführen, führen Sie den folgenden Befehl aus dem Stammverzeichnis in Cloud Shell aus. Damit wird der Cymbal Superstore-Code von GitHub abgerufen.

git clone https://github.com/GoogleCloudPlatform/cymbal-superstore

5. Sie müssen mehrere APIs aktivieren, damit dieser Code ordnungsgemäß ausgeführt wird. Geben Sie in Cloud Shell den folgenden Befehl ein:

gcloud services enable cloudresourcemanager.googleapis.com compute.googleapis.com artifactregistry.googleapis.com serviceusage.googleapis.com run.googleapis.com bigquery.googleapis.com 

6. Wechseln Sie im heruntergeladenen Code zum Terraform-Verzeichnis:

cd cymbal-superstore/terraform

5. Da in diesem Lab Spanner nicht eingesetzt wird, verwenden wir eine Version der Terraform-Anleitung, in der Spanner nicht installiert ist. Geben Sie in Cloud Shell den folgenden Befehl ein:

mv main.tf.nospanner main.tf

8. Damit Sie den Projektnamen und die Projektnummer nicht jedes Mal neu eingeben müssen, wenn Sie einen Terraform-Befehl ausführen, erstellen Sie eine Datei mit dem Namen terraform.tfvars in diesem terraform-Verzeichnis. Fügen Sie dieser Datei zwei Zeilen mit den folgenden Informationen hinzu und speichern Sie die Datei. Diese Informationen finden Sie im Projekt-Dashboard.

project_id="Your project id"
project_number=Your project number

9. Initialisieren Sie Terraform mit der folgenden Zeile:

terraform init

10. Stellen Sie abschließend die Terraform-Ressourcen mit dem folgenden Befehl in Ihrem Projekt bereit. Möglicherweise werden Sie aufgefordert, „Ja“ einzugeben. während dieser Bereitstellung. Dies kann bis zu 10 Minuten dauern. Nehmen Sie sich daher die Zeit, das Architekturdiagramm unter https://github.com/GoogleCloudPlatform/cymbal-superstore/blob/main/assets/architecture.png zu untersuchen. Sie können sich auch den vorhandenen Code ansehen und Duet verwenden, um uns zu helfen, ihn zu verstehen.

terraform apply

Nachdem dieser Befehl erfolgreich ausgeführt wurde, sollte die Ausgabe in etwa so aussehen:

11. Aktualisieren Sie das Front-End, damit in der Ausgabe mit dem Back-End inventory_cr_endpoint kommuniziert wird. Kopieren Sie dazu den Wert von inventory_cr_endpoint, öffnen Sie cymbal-superstore/frontend/.env.production und ersetzen Sie den Wert von REACT_APP_INVENTORY_URL.
12. Führen Sie terraform apply noch einmal aus. Dies sollte nur eine Minute dauern, da die Frontend-Anwendung „React“ mit der aktualisierten Backend-URL noch einmal in Cloud Storage bereitgestellt wird.
13. Öffne frontend_ip in einem Browser. Das Cymbal Superstore-Front-End sollte angezeigt werden. Es kann einige Minuten dauern, bis die Änderungen wirksam werden, daher müssen Sie sie möglicherweise mehrmals überprüfen.

14. Klicken Sie links auf der Cymbal-Startseite auf New Arrivals (Neu eingetroffen). Eine simulierte Frontend-Seite mit Platzhalterprodukten wird angezeigt. Dies ist zu erwarten, da Sie in der nächsten Aufgabe dieses Labs den Back-End-Code der Inventory API implementieren, um die neue Produktseite bereitzustellen.

Wenn die Anwendung im Browser nicht angezeigt wird, sollten Sie prüfen, ob Cloud Run korrekt bereitgestellt wurde. Das geht so:

• Rufen Sie über das Hauptmenü der Cloud Console Cloud Run auf.
• Wählen Sie den Dienst inventory aus der Liste der Dienste aus.
• Wählen Sie auf den Tabs der Inventarseite „REVISIONEN“ aus.

• Achten Sie darauf, dass die Cloud Run-Anwendung wie erwartet bereitgestellt ist:

Ist dies nicht der Fall, können Sie ihn bereitstellen, indem Sie „BEARBEITEN &“ auswählen. NEUE REVISION BEREITSTELLEN und die Standardwerte akzeptieren.

5. Backend der Webanwendung ändern

Jetzt verwenden wir Duet-KI, um unserem Web-App-Backend Funktionen hinzuzufügen.

In dieser Aufgabe fordern Sie Duet AI zur Codevervollständigung auf, um den Endpunkt /newproducts in der App zu implementieren. Sie erstellen im Back-End einen Endpunkt, um die neuen Produkte aus Firestore abzurufen und diesen Endpunkt zu testen, bevor Sie die Änderung bereitstellen.

Endpunkt /newproducts entwickeln

1. Öffnen Sie die Datei cymbal-superstore/backend/index.ts im Cloud Shell-Editor.
2. Scrollen Sie in der Datei index.ts zum Kommentar für DEMO TASK START um Zeile 95, in dem Sie eine Gruppe von Zeilen sehen, die für diese Aufgabe auskommentiert sind. Entfernen Sie alle kommentierten Zeilen und ersetzen Sie sie durch den folgenden Duet AI-Prompt:

// Get new products from Firestore (added < 7 days ago) and quantity > 0 (in stock)

3. Wenn Sie Duet AI auffordern möchten, den Funktionscode zu generieren, wählen Sie den gesamten Kommentar aus und klicken Sie dann auf die Glühbirne ( ).
4. Wählen Sie im Menü „Weitere Aktionen“ die Option „Code generieren“ aus.
5. Bewegen Sie den Mauszeiger auf den generierten Code und klicken Sie in der Duet AI-Symbolleiste auf „Akzeptieren“. Duet AI füllt den Funktionscode für den Endpunkt „/newproducts“ aus.

Hinweis: Duet AI generiert möglicherweise mehrere Versionen des Codes für Ihren Prompt. Sie können durch die Liste in der Symbolleiste scrollen und dann eine bestimmte Version auswählen.

6. Der generierte Code sollte in etwa so aussehen:

app.get("/newproducts", async (req: Request, res: Response) => {
  const products = await firestore
    .collection("inventory")
    .where("timestamp", ">", new Date(Date.now() - 604800000))
    .where("quantity", ">", 0)
    .get();
  const productsArray: any[] = [];
  products.forEach((product) => {
    const p: Product = {
      id: product.id,
      name: product.data().name,
      price: product.data().price,
      quantity: product.data().quantity,
      imgfile: product.data().imgfile,
      timestamp: product.data().timestamp,
      actualdateadded: product.data().actualdateadded,
    };
    productsArray.push(p);
  });
  res.send(productsArray);
});

Viele dieser Zeilen werden unter Umständen unterstrichen, um auf potenzielle Lizenzprobleme zu warnen. Für dieses Lab können Sie eine Schnellkorrektur anwenden. Prüfen Sie in Zukunft aber diese Warnungen.

7. Wenn der generierte Code nicht dem Beispiel aus dem vorherigen Schritt entspricht, können Sie ihn jetzt ersetzen oder sich später ansehen, wie Duet Ihnen bei der Fehlerbehebung helfen kann. Es gibt auch eine Version des Codes mit dem erwarteten Fehler in der Datei scripts/solutioncode-with-bug.ts .
8. Speichern Sie die Datei index.ts.

Endpunkt /``newproducts testen und Fehler beheben

1. Wechseln Sie in Cloud Shell zum Verzeichnis cymbal-superstore/backend. Geben Sie den folgenden Befehl ein:

npm run start

Dadurch wird der Endpunkt gestartet.

2. Um die Ergebnisse des Endpunkts anzuzeigen, öffnen Sie ein anderes Terminal mit dem Pluszeichen (+) in der Menüleiste von Cloud Shell und führen Sie den folgenden Befehl aus:

curl localhost:8000/newproducts

Möglicherweise wird im neuen Terminal der Fehler curl: (52) Empty reply from server und im Terminal, das den Endpunkt ausführt, eine lange Fehlermeldung mit den Details 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' angezeigt.

3. Lassen Sie uns diesen Fehler beheben. Zunächst müssen wir jedoch verstehen, was die Fehlermeldung bedeutet. Dazu fragen wir Duet. Öffnen Sie den Duet AI-Chat über das Menü auf der linken Seite des Cloud Shell-Editors und stellen Sie Folgendes:

I'm querying Cloud Firestore and getting this error: 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' What does it mean?

Duet sollte Ihnen einige Optionen zur Behebung des Problems bieten, z. B. einen der Ungleichheitsfilter entfernen. Um dieses Problem zu lösen, löschen Sie die Zeile .where("quantity", ">", 0) aus index.ts, sodass unsere Abfrage nur einen Filter enthält.

4. Wiederholen Sie die ersten beiden Schritte oben, um den Server neu zu starten und die Liste der Produkte abzurufen. Sie sollte jetzt erfolgreich sein. Falls nicht, verwenden Sie Duet, um das Problem zu ermitteln (oder verwenden Sie die korrigierte Lösung in scripts/solutioncode-bug-fixed.ts, um fortzufahren).

Änderung bereitstellen

Führen Sie einfach terraform apply aus dem Verzeichnis terraform in Cloud Shell noch einmal aus, um die geänderte Anwendung bereitzustellen. Anschließend können Sie die Anwendung unter der von Terraform bereitgestellten IP-Adresse aufrufen.

6. Tests schreiben

Eine wichtige Aufgabe, die häufig nicht priorisiert wird, ist das Erstellen von Tests für den Code in einem Projekt. Wie Sie vielleicht schon herausgefunden haben, kann Duet beim Erstellen dieser Tests helfen.

Lassen Sie uns Tests für den soeben erstellten newproducts-Code erstellen.

1. Öffnen Sie backend/index.test.ts. Generieren Sie im Duet AI-Chat mit dem Prompt einen Test für die Funktion newproducts():

Help me write an Express.js test using Jest, in typescript, for the GET /newproducts handler in index.ts. Should check if the response code is 200 and the list of new products is length 8.

Sie werden feststellen, dass import Zeilen bereitgestellt werden, die sich bereits in der Datei befinden. Kopieren Sie nur den Test describe() in die Datei in den angegebenen Zeilen. Speichern Sie die Datei.

Alternativ können Sie den Prompt verbessern und Duet anweisen, keine Importanweisungen einzubeziehen, sodass Sie genau den Code erhalten, den Sie benötigen.

2. Wenn Sie sich die Ergebnisse des Tests ansehen möchten, wechseln Sie in Cloud Shell zum Verzeichnis backend und führen Sie den folgenden Befehl aus:

npm run test

7. Logging

Duet AI kann Ihr Projekt auch nach der Bereitstellung unterstützen. In diesem Abschnitt sehen wir uns Logs mithilfe von Duet AI an.

Kehren Sie zur Cloud Console zurück und prüfen Sie, ob Duet ausgeführt wird. Fragen Sie Duet, wo die Logs zu finden sind. Du kannst auch einen eigenen Prompt ausprobieren. Wenn er keine passende Antwort liefert, sollte der folgende Prompt funktionieren.

How can I view the Cloud Run logs for the service called 'inventory'?

Duet AI schlägt vor, die Cloud Run-Seite aufzurufen, den Inventardienst auszuwählen und dann die Logs dieses Dienstes zu prüfen. Sie sollte etwa so aussehen:

Wählen Sie eines der Elemente aus und bitten Sie Duet AI, es zu erklären. Sie sollten eine Beschreibung des Eintrags in natürlicher Sprache erhalten.

Sie können Logeinträge auch im Log-Explorer ansehen, den Sie über die Option „Logging“ im Hauptmenü öffnen können. Ein Vorteil der Anzeige von Logeinträgen aus dem Log-Explorer besteht darin, dass die Option zum Erklären von Einträgen integriert ist, wie unten gezeigt:

8. Glückwunsch!

Herzlichen Glückwunsch – Sie haben mithilfe von Duet AI erfolgreich Code verstanden, den Sie möglicherweise noch nie gesehen haben. Sie haben diesen Code optimiert, Tests dafür erstellt und Duet verwendet, um Logeinträge zu verstehen.

Bereinigen

Projekt löschen

Zur Bereinigung löschen wir unser Projekt einfach.

• Wählen Sie im Navigationsmenü die Option „IAM & Verwaltung
• Klicken Sie dann im Untermenü auf „Settings“ (Einstellungen)
• Klicken Sie auf das Papierkorbsymbol mit dem Text „Projekt löschen“.
• Folge der Anleitung

In diesem Lab haben Sie Folgendes gelernt:

• Sie können eine vorhandene Webanwendung mit Duet AI optimieren.
• Die Anwendung in Cloud Run bereitstellen.
• Du kannst Duet AI auffordern, einen Fehler in der Anwendung zu erklären und eine Lösung zu finden.
• Entwickeln Sie mithilfe von Duet AI Tests für die Anwendung.
• Anwendungslogs mithilfe von Duet AI ansehen.