Node.js-Anwendung mit Gemini für Google Cloud-Unterstützung entwickeln

In dieser Anleitung erfahren Sie, wie Sie mit Gemini für Google Cloud, einem KI-gestützten Mitbearbeiter in Google Cloud, eine Node.js-Beispielanwendung untersuchen, erstellen, ändern, testen und bereitstellen können.

Gehen Sie bei den folgenden Schritten davon aus, dass Sie Node.js-Entwickler sind und eine einfache Webanwendung in JavaScript mit einem einfachen Formular schreiben möchten. 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 mit Gemini den Entwicklungsprozess beschleunigen möchten. Es wird davon ausgegangen, dass Sie mit grundlegenden Cloud-Konzepten vertraut sind, aber nicht unbedingt mit Google Cloud.

Lernziele

In dieser Anleitung erfahren Sie, wie Sie Gemini für folgende Aufgaben verwenden:

  • 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 Mitarbeiter in Google Cloud, der einer Vielzahl von Nutzern, einschließlich Entwicklern und Data Scientists, auf Basis generativer KI Unterstützung bietet. Gemini ist in viele Google Cloud-Produkte eingebettet, um eine integrierte Unterstützung zu bieten.
  • Cloud Code für Cloud Shell-Plug-in: Eine IDE-Plug-in-Erweiterung, die Unterstützung für Entwicklungszyklen für Anwendungen bietet, 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

  1. Erstellen Sie ein Google Cloud-Projekt, wenn Sie noch kein Google Cloud-Projekt haben, das für diese Anleitung verwendet werden kann.
  2. Aktivieren Sie Cloud Shell.
  3. Achten Sie darauf, dass Gemini für Ihr Google Cloud-Nutzerkonto und Ihr Projekt eingerichtet ist.
  4. Aktivieren Sie Gemini für Cloud Shell. Wählen Sie dazu das Projekt aus, dem Zugriff auf Gemini-Funktionen gewährt wurde.

Gemini auffordern, Node.js-Code zu generieren

Gemini kann Ihnen dabei helfen, anhand der von Ihnen im Chat eingegebenen Aufforderungen und der Beschreibungen, die Sie in den Codekommentaren schreiben, Node.js-Code zu generieren. Je mehr Code Sie schreiben und je mehr Kontext Sie Gemini bereitstellen, desto besser kann Gemini Sie bei der Entwicklung Ihrer App unterstützen. Beachten Sie, dass die Antworten von Gemini abhängig davon variieren können, wie Sie Fragen stellen oder den Kontext beschreiben. Daher empfiehlt es sich, die Antworten von Gemini zu prüfen, bevor Sie die Vorschläge während des Entwicklungsprozesses annehmen.

Bevor Sie Gemini dazu auffordern, Startcode zu generieren, erstellen Sie mit 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 gerade erstellten Ordner im Cloud Shell-Terminal.

Pakete installieren

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

  1. Klicken Sie im linken Bereich im Cloud Shell-Editor auf spark Gemini.

  2. Geben Sie im Bereich Gemini einen Prompt wie den folgenden ein:

    What is the command to install express and ejs packages for node.js?

  3. Klicke auf Senden Senden.

    Gemini gibt eine Antwort zurück, die in etwa so aussieht:

    Mit dem folgenden Befehl können Sie die Express- und Ejs-Pakete für Node.js installieren:

    npm install express ejs

  4. Kopieren Sie den von Gemini bereitgestellten Befehl und führen Sie ihn in Ihrem Cloud Shell-Terminal aus.

Authoring-Anwendungsdateien

Nach der Installation der Pakete können Sie Gemini als Hilfestellung verwenden, um die installierten Pakete in Ihrer app.js-Datei hinzuzufügen.

  1. Öffnen Sie die Datei app.js im Cloud Shell-Editor.

  2. Geben Sie im Gemini-Chat eine Aufforderung wie diese ein:

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

    Die Antwort von Gemini sieht in etwa so aus:

    Mit dem folgenden Code können Sie Ihrer app.js-Datei die Express- und Ejs-Pakete hinzufügen:

    const express = require('express');
const ejs = require('ejs');

    Hierfür werden die Express- und EJS-Pakete benötigt und in Ihrer app.js-Datei verwendet.

  3. 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 zum Generieren von Code verwenden kann. Wenn Sie Ihrer Datei beispielsweise einen Kommentar als Platzhalter hinzufügen, können Sie Gemini dazu 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.

  1. Fügen Sie am Ende der Datei einen Kommentarplatzhalter ein, um die Webanwendung zu initialisieren. Beispiel:

    // Initialize express web app using ejs templating engine

  2. Bewegen Sie den Textcursor ans Ende des Kommentars und drücken Sie Control+Enter (unter Windows und Linux) oder Control+Return (unter macOS) und dann die Tabulatortaste, um mit den Funktionen der Codegenerierung von Gemini Code zu generieren.

    Die Antwort von Gemini enthält unter dem Kommentar zwei Codezeilen, die in etwa so aussehen:

    // Initialize express web app using ejs templating engine

const app = express();
app.set('view engine', 'ejs');

    Wenn die Ausgabe der Codegenerierung von Ihren Erwartungen abweicht, ä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.

  1. Gehen Sie zum Ende der Datei app.js und fügen Sie 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

  2. Generieren Sie den Code für jeden Dateikommentar ähnlich wie den zuvor generierten Code.

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

    Die Kommentare in der Datei app.js sollten jetzt einen entsprechenden Code haben, 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 Ihre Basisanwendung generiert wurde, erstellen Sie Inhalte und fügen Sie der Datei package.json Inhalte hinzu.

  1. Erstellen Sie eine package.json-Datei im selben Verzeichnis wie Ihre app.js-Datei.

  2. Wählen Sie im Cloud Shell-Editor spark Gemini aus und geben Sie eine Eingabeaufforderung wie diese ein:

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

    Die Gemini-Antwort sollte das Startskript und die Abhängigkeiten vorschlagen, die angegeben werden sollen. Sie 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 Anwendung (my-app)
    Die Version der Anwendung (1.0.0)
    Eine Beschreibung der Anwendung (eine einfache Node.js-Webanwendung, die Express und EJS verwendet)
    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)

  3. 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 views-Verzeichnis für Ihre ejs-Vorlagen im selben Verzeichnis wie die Dateien app.js und package.json.

  1. Geben Sie im Terminal Folgendes ein:

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

  2. Ö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>

  3. Ö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>

Anwendung in einem Browser ansehen

Wenn Sie Ihren App-Code, Ihre Vorlagen und Ihre Anforderungen fertiggestellt haben, können Sie jetzt prüfen, ob Ihre App funktioniert.

  1. Führen Sie den folgenden Befehl aus, um die Abhängigkeiten zu installieren:

    npm install

  2. Führen Sie den folgenden Befehl aus, um die Anwendung zu starten:

    npm start

  3. Prüfen Sie, ob die App funktioniert. Wählen Sie rechts oben in der Cloud Shell-Taskleiste die Schaltfläche Webvorschau aus. Wählen Sie dann die Portnummer aus dem angezeigten Menü aus. In Cloud Shell wird die Vorschau-URL in einem neuen Browserfenster geöffnet.

Einheitentests schreiben

Nachdem Sie sich vergewissert haben, dass Ihre Node.js-Anwendung funktioniert, können Sie Einheitentests in die Datei test.js schreiben, bevor Sie die Anwendung in Cloud Run bereitstellen. Im folgenden Beispiel bitten Sie Gemini um Unterstützung beim Generieren eines Einheitentests für den HTTP-Antwortcode 200.

  1. Fügen Sie am Ende der Datei app.js die folgende Zeile hinzu, um die Anwendungsdatei zu exportieren.

    module.exports = app;

  2. Öffnen Sie Ihre test.js-Datei.

  3. Um zu testen, wann die Antwort einen HTTP 200-Statuscode zurückgibt, öffnen Sie das Gemini-Chatfenster und geben Sie eine Eingabeaufforderung wie diese 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 sehen Sie einen Unittest für die Homeroute 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 den vorgeschlagenen Codeblock in die Datei test.js ein.

  4. Installieren Sie die Mocha-Test- und Supertest-Pakete, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

    npm i mocha supertest

  5. Aktualisieren Sie die Datei package.json, um das neue Testskript und die zugehörigen Pakete hinzuzufügen. 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"
  }
}

  6. Führen Sie den folgenden Befehl aus, um die Tests auszuführen:

    npm test

Der Test sollte als bestanden angezeigt werden, wenn keine Fehler auftreten. Wenn Sie zusätzliche Tests für Ihre anderen Routen hinzufügen möchten, fragen Sie Gemini weiterhin nach Vorschlägen für die Datei test.js.

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 sie aus Quellcode bereitstellen können und bei der Ausführung der Anwendung keine Infrastruktur verwalten müssen.

  1. Fragen Sie im Gemini-Chat zu Gemini, wie die Bereitstellung in Cloud Run direkt aus Ihrem Quellcode mit gcloud erfolgt:

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

    Gemini sollte in etwa so antworten:

    Sie können Bereitstellungen mit gcloud direkt aus Ihrem Quellcode in Ihrem aktuellen Verzeichnis in Cloud Run vornehmen. Dazu können Sie den Befehl gcloud run deploy mit der --source flag verwenden. Dieses Flag weist gcloud an, Ihren Quellcode zu verwenden, um ein Container-Image zu erstellen und in Cloud Run bereitzustellen.

    Wenn Sie beispielsweise den Code in der Datei app.js in Cloud Run bereitstellen möchten, verwenden Sie den folgenden Befehl:

    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 zum Bereitstellen in Cloud Run aus Quellcode finden Sie in der Cloud Run-Dokumentation.

  2. Verwenden Sie den gcloud-Befehl von Gemini in der Antwort.

  3. Folgen Sie den Aufforderungen zur Auswahl einer Region und wählen Sie die Option zum Zulassen nicht authentifizierter Aufrufe für die Testanwendung aus. Nach der erfolgreichen Bereitstellung der Anwendung wird in der Ausgabe eine Dienst-URL zurückgegeben.

Bereinigen

Damit Ihrem Google Cloud-Konto die in dieser Anleitung verwendeten Ressourcen nicht in Rechnung gestellt werden, können Sie das Google Cloud-Projekt löschen, das Sie für diese Anleitung erstellt haben. Alternativ haben Sie die Möglichkeit, die einzelnen Ressourcen zu löschen.

  1. Achtung: Das Löschen von Projekten hat folgende Auswirkungen:
    • Alle Inhalte des Projekts werden gelöscht. Wenn Sie für die Aufgaben in diesem Dokument ein vorhandenes Projekt verwendet haben, werden beim Löschen auch alle anderen Arbeiten gelöscht, die Sie im Rahmen des Projekts geleistet haben.
    • Benutzerdefinierte Projekt-IDs gehen verloren. Beim Erstellen dieses Projekts haben Sie möglicherweise eine benutzerdefinierte Projekt-ID erstellt, die Sie weiterhin 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.

  2. Wenn Sie mehrere Architekturen, Anleitungen oder Kurzanleitungen durcharbeiten möchten, können Sie durch die Wiederverwendung von Projekten eine Überschreitung der Projektkontingente vermeiden.Rufen Sie in der Google Cloud Console die Seite Ressourcen verwalten auf.

    Zur Seite „Ressourcen verwalten“

  3. Wählen Sie in der Projektliste das Projekt aus, das Sie löschen möchten, und klicken Sie dann auf Löschen.

  4. Geben Sie im Dialogfeld die Projekt-ID ein und klicken Sie auf Beenden, um das Projekt zu löschen.

Nächste Schritte