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.
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:
- 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.
- 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.
- 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:
- Starten Sie Cloud Shell über das unten angezeigte Symbol. Es kann ein bis zwei Minuten dauern, bis die Cloud Shell-Instanz gestartet ist.
- 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.
- 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.
- 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.
- 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 –
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.
- Legen Sie die Projekt-ID fest:
gcloud config set project <Google Cloud Project ID>
- Führen Sie Docker Credential Helper aus:
gcloud auth configure-docker
- Wenn Sie gefragt werden, ob Sie fortfahren möchten, geben Sie „Y“ ein.
- 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
- 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
- Wechseln Sie im heruntergeladenen Code zum Terraform-Verzeichnis:
cd cymbal-superstore/terraform
- 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
- 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 diesemterraform
-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
- Initialisieren Sie Terraform mit der folgenden Zeile:
terraform init
- 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:
- Aktualisieren Sie das Front-End, damit in der Ausgabe mit dem Back-End
inventory_cr_endpoint
kommuniziert wird. Kopieren Sie dazu den Wert voninventory_cr_endpoint
, öffnen Siecymbal-superstore/frontend/.env.production
und ersetzen Sie den Wert vonREACT_APP_INVENTORY_URL
. - 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. - Ö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.
- 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.
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
- Öffnen Sie die Datei
cymbal-superstore/backend/index.ts
im Cloud Shell-Editor. - Scrollen Sie in der Datei
index.ts
zum Kommentar fürDEMO 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)
- 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 (
).
- Wählen Sie im Menü „Weitere Aktionen“ die Option „Code generieren“ aus.
- 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.
- 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.
- 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 .
- Speichern Sie die Datei
index.ts
.
Endpunkt /``newproducts
testen und Fehler beheben
- Wechseln Sie in Cloud Shell zum Verzeichnis
cymbal-superstore/backend
. Geben Sie den folgenden Befehl ein:
npm run start
Dadurch wird der Endpunkt gestartet.
- 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.
- 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.
- 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.
- Öffnen Sie
backend/index.test.ts
. Generieren Sie im Duet AI-Chat mit dem Prompt einen Test für die Funktionnewproducts()
:
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.
- 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.