Diese Seite wurde von der Cloud Translation API übersetzt.

Node.js-App mit Gemini zur Unterstützung durch Google Cloud entwickeln

In dieser Anleitung erfahren Sie, wie Sie Gemini für Google Cloud für Google Cloud, ein KI-gestütztes Tool zur Zusammenarbeit in Google Cloud, verwenden, um eine Node.js-Beispielanwendung zu erkunden, zu erstellen, zu ändern, zu testen und bereitzustellen.

Bei den folgenden Schritten sollten Sie davon ausgehen, dass Sie Node.js-Entwickler sind und eine einfache Webanwendung in JavaScript schreiben möchten, die ein einfaches Formular verwendet. In diesem Szenario verwenden Sie das Express-Framework für die App und die EJS-Vorlagen für das HTML-Formular.

Dieser Leitfaden richtet sich an Node.js-Entwickler, die Gemini verwenden möchten, um den Entwicklungsprozess zu beschleunigen. Dabei wird davon ausgegangen, dass Sie mit den grundlegenden Cloud-Konzepten vertraut sind, aber nicht unbedingt mit Google Cloud.

Lernziele

In dieser Anleitung erfahren Sie, wie Sie mit Gemini Folgendes tun können:

Node.js-Webanwendung in Cloud Shell entwickeln
Erstellen Sie Einheitentests für Ihre Node.js-Webanwendung.
Stellen Sie Ihre Node.js-Webanwendung in Cloud Run bereit.

Verwendete Google Cloud-Produkte

In dieser Anleitung werden die folgenden Google Cloud-Produkte verwendet:

Gemini: Ein immer aktiver Mitbearbeiter in Google Cloud, der einer Vielzahl von Nutzern, einschließlich Entwicklern und Data Scientists, Unterstützung durch generative KI bietet. Um eine integrierte Unterstützung zu bieten, ist Gemini in viele Google Cloud-Produkte eingebettet.
Cloud Code for Cloud Shell-Plug-in: Eine IDE-Plug-in-Erweiterung, die den Entwicklungszyklus für Anwendungen unterstützt, die in Google Cloud ausgeführt werden.
Cloud Run: Ein vollständig verwalteter Dienst, mit dem Sie Containeranwendungen erstellen und bereitstellen können. Google Cloud übernimmt die Skalierung und andere Infrastrukturaufgaben, damit Sie sich auf die Geschäftslogik Ihres Codes konzentrieren können. Preisinformationen finden Sie auf der Seite Cloud Run-Preise. Mit dem Preisrechner können Sie eine Kostenschätzung für Ihre voraussichtliche Nutzung erstellen.

Hinweise

Erstellen Sie ein Google Cloud-Projekt, wenn Sie noch kein Google Cloud-Projekt haben, das für diese Anleitung verwendet werden kann.
Aktivieren Sie Cloud Shell.
Richten Sie Gemini für Ihr Google Cloud-Nutzerkonto und ‐Projekt ein.
Aktivieren Sie Gemini für Cloud Shell, indem Sie das Projekt auswählen, dem Zugriff auf Gemini-Funktionen gewährt wurde.

Gemini auffordern, Node.js-Code zu generieren

Gemini kann Ihnen helfen, Node.js-Code anhand der Prompts, die Sie im Chat geben, und der Beschreibungen, die Sie in den Codekommentaren schreiben, zu generieren. Je mehr Code du schreibst und je mehr Kontext du Gemini zur Verfügung stellst, desto besser kann Gemini dich bei der Entwicklung deiner App unterstützen. Hinweis: Die Antworten von Gemini können variieren, je nachdem, wie du eine Frage stellst oder den Kontext beschreibst. Daher empfiehlt es sich, die Antworten von Gemini zu überprüfen, bevor du die Vorschläge während des Entwicklungsprozesses annimmst.

Bevor Sie Gemini um die Generierung von Startcode bitten, erstellen Sie mit dem Cloud Shell-Terminal ein leeres Verzeichnis und fügen Sie zwei leere Dateien hinzu.

mkdir node-js-with-gemini
cd node-js-with-gemini
touch app.js test.js

Wählen Sie im Cloud Shell-Editor content_copy Explorer aus und öffnen Sie den soeben erstellten Ordner im Cloud Shell-Terminal.

Pakete installieren

Sie wissen, dass Sie die Pakete express und ejs für Ihre Node.js-App installieren möchten. Wenn Sie Gemini um Hilfe bei der Installation dieser Pakete bitten möchten, gehen Sie so vor:

Klicken Sie im linken Bereich des Cloud Shell-Editors auf spark Gemini.
Geben Sie im Bereich Gemini einen Prompt ein, z. B.:

What is the command to install express and ejs packages for node.js?
Klicken Sie auf Senden Senden.

Gemini gibt eine Antwort zurück, die in etwa so aussieht:
Zum Installieren der Express- und EJS-Pakete für Node.js können Sie den folgenden Befehl verwenden:
```
npm install express ejs
```
Kopieren Sie den von Gemini bereitgestellten Befehl und führen Sie ihn im Cloud Shell-Terminal aus.

Authoring-Anwendungsdateien

Verwenden Sie nach der Installation der Pakete Gemini als Anleitung zum Hinzufügen der installierten Pakete zu Ihrer app.js-Datei.

Öffnen Sie die Datei app.js im Cloud Shell-Editor.
Geben Sie im Gemini-Chat einen Prompt ein, z. B.:

How do I add these packages to my app.js file?

Die Antwort von Gemini sieht in etwa so aus:
Verwenden Sie den folgenden Code, um die Express- und ejs-Pakete Ihrer app.js-Datei hinzuzufügen:
```
const express = require('express');
const ejs = require('ejs');
```
Dazu benötigen Sie die express- und ejs-Pakete und stellen sie zur Verwendung in Ihrer app.js-Datei zur Verfügung.
Fügen Sie den von Gemini bereitgestellten Code in die Datei app.js ein.

Code mit Kommentaren generieren

Das Cloud Code-Plug-in hat ein Feature, mit dem Gemini Dateikommentare verwenden kann, um Code zu generieren. Wenn Sie beispielsweise einen Kommentar als Platzhalter in Ihrer Datei hinzufügen, können Sie Gemini auffordern, Code wie im Kommentar beschrieben zu generieren.

Damit Sie dieses Feature in Ihrer app.js-Datei verwenden können, muss Gemini im Cloud Shell-Editor aktiviert sein.

Fügen Sie am Ende der Datei einen Kommentarplatzhalter ein, um die Webanwendung zu initialisieren. Beispiel:
```
// Initialize express web app using ejs templating engine
```
Bewegen Sie den Textcursor an das Ende des Kommentars und drücken Sie Control+Enter (Windows und Linux) bzw. Control+Return (MacOS) und dann die Tabulatortaste, um mit den Funktionen zur Codegenerierung von Gemini Code zu generieren.

Die Antwort von Gemini enthält unter dem Kommentar zwei Codezeilen, etwa so:
```
// Initialize express web app using ejs templating engine

const app = express();
app.set('view engine', 'ejs');
```
Wenn die Ausgabe der Codegenerierung nicht Ihren Erwartungen entspricht, ändern oder löschen Sie den zusätzlichen Inhalt nach Bedarf.

Fügen Sie als Nächstes weitere Kommentare hinzu, um die Basisfunktionen für Ihre Express-Webanwendung zu generieren.

Fügen Sie zum Ende der Datei app.js die folgenden Kommentare hinzu:

// add urlencoded middleware to parse form data

// define the home route

// create a /greeting POST route with a `name` parameter

// create a /greeting route that accepts a name parameter

// start the server on port 8080

Generieren Sie auf ähnliche Weise Code für jeden Dateikommentar wie zuvor.

Bevor Sie die Vorschläge annehmen, prüfen Sie den generierten Code auf Richtigkeit.

Die Kommentare in der Datei app.js sollten jetzt den entsprechenden Code enthalten, der in etwa so aussieht:

// add urlencoded middleware to parse form data
app.use(express.urlencoded({ extended: true }));

// define the home route
app.get('/', (req, res) => {
  res.render('index');
});

// create a /greeting POST route with a `name` parameter
app.post('/greeting', (req, res) => {
  const name = req.body.name || 'World';
  res.render('greeting', { name });
});

// start the server
const port = process.env.PORT || 8080;
app.listen(port, () => {
  console.log(`App listening on port ${port}`);
  console.log('Press Ctrl+C to quit.');
});

// create a /greeting route that accepts a name parameter
app.get('/greeting/:name', (req, res) => {
  res.render('greeting', { name: req.params.name });
});

Datei „package.json“ erstellen

Nachdem der Code für die Basisanwendung generiert wurde, erstellen Sie Inhalte in der Datei package.json und fügen Sie sie hinzu.

Erstellen Sie eine package.json-Datei im selben Verzeichnis wie Ihre app.js-Datei.
Wählen Sie im Cloud Shell-Editor spark Gemini aus und geben Sie einen Prompt wie diesen ein:

Based on my app.js file, can you create a package.json file?

Die Antwort von Gemini sollte das Startskript und die anzugebenden Abhängigkeiten vorschlagen und sieht in etwa so aus:
Sehr gern. Hier ist eine package.json-Datei, die Sie mit Ihrer app.js-Datei verwenden können:
```
{
  "name": "my-app",
  "version": "1.0.0",
  "description": "A simple Node.js web app using Express and EJS.",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },

  "dependencies": {
    "express": "^4.17.1",
    "ejs": "^3.1.6"
  }
}
```
Diese Datei „package.json“ enthält die folgenden Informationen:

Der Name der App („my-app“)
Die Version der App (1.0.0)
Eine Beschreibung der App, z. B. eine einfache Node.js-Webanwendung mit Express und EJS.
Die Hauptdatei der App (app.js)
Die Skripts, die in der App ausgeführt werden können (Start)
Die Abhängigkeiten der App (Express und EJS)
Kopieren Sie nur den von Gemini bereitgestellten Inhalt und fügen Sie ihn in Ihre package.json-Datei ein.

ejs-Vorlagen erstellen

Erstellen Sie zum Fertigstellen Ihrer Webanwendung ein Verzeichnis views für Ihre ejs-Vorlagen im selben Verzeichnis wie die Dateien app.js und package.json.

Geben Sie in Ihrem Terminal Folgendes ein:

mkdir views
touch views/index.ejs views/greeting.ejs

Öffnen Sie die Datei index.ejs im Editor und fügen Sie Folgendes ein:

<html>
<body>
    <form action="/greeting" method="post">
    <label for="name">What's your name?</label>
    <input type="text" id="name" name="name" autofocus />
    <button type="submit">Submit</button>
    </form>
</body>
</html>

Öffnen Sie die Datei greeting.ejs im Editor und fügen Sie Folgendes ein:

<html>
<body>
    <a href="/">Home</a>
    <p>Hello <%= name %>~</p>
</body>
</html>

Vorschau der Anwendung in einem Browser ansehen

Wenn Sie den App-Code, die Vorlagen und die Anforderungen vollständig festgelegt haben, können Sie jetzt prüfen, ob Ihre App funktioniert.

Führen Sie den folgenden Befehl aus, um die Abhängigkeiten zu installieren:
```
npm install
```
Führen Sie den folgenden Befehl aus, um die App zu starten:
```
npm start
```
Prüfen Sie, ob die App funktioniert. Klicken Sie rechts oben in der Cloud Shell-Taskleiste auf die Schaltfläche Webvorschau. Wählen Sie dann die Portnummer aus dem Menü aus. Cloud Shell öffnet die Vorschau-URL in einem neuen Browserfenster.

Einheitentests schreiben

Nachdem Sie geprüft haben, ob Ihre Node.js-Anwendung funktioniert, können Sie Einheitentests in Ihre test.js-Datei schreiben, bevor Sie die Anwendung in Cloud Run bereitstellen. Im folgenden Beispiel bitten Sie Gemini um Unterstützung beim Generieren eines Einheitentests, wenn der HTTP-Antwortcode 200 lautet.

Fügen Sie am Ende der Datei app.js die folgende Zeile hinzu, um die Anwendungsdatei zu exportieren.
```
module.exports = app;
```
Öffnen Sie Ihre test.js-Datei.
Um zu testen, ob die Antwort einen HTTP 200-Statuscode zurückgibt, öffne den Gemini-Chatbereich und gib einen Prompt wie diesen ein:

Can you generate a unit test for my home route in app.js to assert that the response code is 200?

Gemini sollte in etwa so antworten:
Sehr gern. Hier ist ein Einheitentest für die Route nach Hause in app.js, mit dem sichergestellt wird, dass der Antwortcode 200 lautet:
```
const assert = require('assert');
const request = require('supertest');

const app = require('./app.js');
describe('GET /', () => {
  it('should return a 200 response code', async () => {
    const response = await request(app).get('/');
    assert.equal(response.status, 200);
  });
});
```
Hier wird geprüft, ob die Privatroute den Statuscode 200 zurückgibt.
Fügen Sie der Datei test.js den vorgeschlagenen Codeblock hinzu.
Installieren Sie die Mocha-Test- und Supertest-Pakete, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:
```
npm i mocha supertest
```

Aktualisieren Sie die Datei package.json, um das neue Testskript und die zugehörigen Pakete einzuschließen. Beispiel:

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "A simple Node.js web app using Express and EJS.",
  "main": "app.js",
  "scripts": {
    "start": "node app.js",
    "test": "mocha"
  },
  "dependencies": {
  "express": "^4.17.1",
  "ejs": "^3.1.6",
  "mocha": "^10.2.0",
  "supertest": "^6.3.3"
  }
}

Führen Sie die Tests mit dem folgenden Befehl aus:
```
npm test
```

Wenn keine Fehler vorliegen, sollte der Test als bestanden angezeigt werden. Wenn Sie weitere Tests für Ihre anderen Routen hinzufügen möchten, bitten Sie Gemini weiterhin um Vorschläge zum Hinzufügen zu Ihrer test.js-Datei.

In Cloud Run bereitstellen

Da Ihre Anwendung jetzt lokal ausgeführt wird, können Sie mit der Bereitstellung in Google Cloud fortfahren. Cloud Run eignet sich für dieses Szenario gut, da Sie Anwendungen aus Quellcode bereitstellen können und beim Ausführen der Anwendung keine Infrastruktur verwalten müssen.

Fragen Sie Gemini im Gemini-Chat, wie die Bereitstellung mit gcloud direkt aus dem Quellcode in Cloud Run erfolgen kann:

What is the gcloud command for deploying a Cloud Run service from source code?

Gemini sollte in etwa so antworten:
Mit gcloud können Sie aus Ihrem Quellcode im aktuellen Verzeichnis direkt in Cloud Run bereitstellen. Dazu können Sie den Befehl gcloud run deploy mit dem --source flag verwenden. Dieses Flag weist gcloud an, mit Ihrem Quellcode ein Container-Image zu erstellen und in Cloud Run bereitzustellen.

Verwenden Sie beispielsweise den folgenden Befehl, um den Code in Ihrer app.js-Datei in Cloud Run bereitzustellen:
```
gcloud run deploy app --source .
```
Mit diesem Befehl wird aus Ihrer app.js-Datei ein Container-Image erstellt und in Cloud Run bereitgestellt.

Sie können auch das Flag „--region“ verwenden, um die Region anzugeben, in der Sie Ihre Anwendung bereitstellen möchten. Um Ihre Anwendung beispielsweise in der Region „us-central1“ bereitzustellen, verwenden Sie den folgenden Befehl:
```
gcloud run deploy app --source . --region us-central1
```
Weitere Informationen zur Bereitstellung in Cloud Run aus dem Quellcode finden Sie in der Cloud Run-Dokumentation.
Verwenden Sie den gcloud-Befehl, den Gemini in der Antwort bereitgestellt hat.
Folgen Sie den Aufforderungen zur Auswahl einer Region und wählen Sie die Option aus, um nicht authentifizierte Aufrufe für Ihre Testanwendung zuzulassen. Nachdem die Anwendung erfolgreich bereitgestellt wurde, wird in der Ausgabe eine Dienst-URL zurückgegeben.

Bereinigen

Wenn Sie vermeiden möchten, dass Ihrem Google Cloud-Konto die in dieser Anleitung verwendeten Ressourcen in Rechnung gestellt werden, können Sie das für diese Anleitung erstellte Google Cloud-Projekt löschen. Alternativ haben Sie die Möglichkeit, die einzelnen Ressourcen zu löschen.

Achtung: Das Löschen von Projekten hat folgende Auswirkungen:
- Alle Inhalte des Projekts werden gelöscht. Wenn Sie ein vorhandenes Projekt für die Aufgaben in diesem Dokument verwendet haben, löschen Sie beim Löschen auch alle anderen Arbeiten, die Sie im Projekt erledigt haben.
- Benutzerdefinierte Projekt-IDs gehen verloren. Beim Erstellen dieses Projekts haben Sie möglicherweise eine benutzerdefinierte Projekt-ID erstellt, die Sie in Zukunft verwenden möchten. Damit die URLs, die die Projekt-ID verwenden, z. B. eine appspot.com-URL, erhalten bleiben, sollten Sie ausgewählte Ressourcen innerhalb des Projekts löschen, anstatt das gesamte Projekt zu löschen.
Wenn Sie mehrere Architekturen, Anleitungen oder Kurzanleitungen durcharbeiten möchten, können Sie durch die Wiederverwendung von Projekten das Überschreiten von Projektkontingenten vermeiden.Rufen Sie in der Google Cloud Console die Seite Ressourcen verwalten auf.

Zur Seite „Ressourcen verwalten“
Wählen Sie in der Projektliste das Projekt aus, das Sie löschen möchten, und klicken Sie auf Löschen.
Geben Sie im Dialogfeld die Projekt-ID ein und klicken Sie auf Beenden, um das Projekt zu löschen.

Nächste Schritte

Überblick über Gemini für Google Cloud lesen
Informationen zu Kontingenten und Limits von Gemini sowie zu unterstützten Standorten
Mit Cloud Run aus Quellcode bereitstellen