Node.js-Anwendung mit Duet-KI-Unterstützung entwickeln

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

Gehen Sie bei den folgenden Schritten davon aus, dass Sie Node.js-Entwickler sind und eine einfache Webanwendung in JavaScript mit einer einfachen Form schreiben möchten. In diesem Szenario verwenden Sie das Express-Framework für die Anwendung und die EJS-Vorlagen für das HTML-Formular.

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

Lernziele

In dieser Anleitung erfahren Sie, wie Sie Duet-KI für Folgendes verwenden:

  • Node.js-Webanwendung in Cloud Shell entwickeln
  • Autoreneinheitstests für Ihre Node.js-Webanwendung.
  • Node.js-Webanwendung in Cloud Run bereitstellen

Verwendete Google Cloud-Produkte

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

  • Duet-KI: Ein immer aktiver Mitarbeiter in Google Cloud, der einer Vielzahl von Nutzern, einschließlich Entwicklern und Data Scientists, mit generativer KI Unterstützung bietet. Für eine integrierte Unterstützung ist Duet-KI in viele Google Cloud-Produkte eingebettet.
  • 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 die Kosten für Ihre voraussichtliche Nutzung kalkulieren.

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. Prüfen Sie, ob Duet-KI für Ihr Google Cloud-Nutzerkonto und Ihr Projekt eingerichtet ist.
  4. Aktivieren Sie Duet-KI für Cloud Shell. Wählen Sie dazu das Projekt aus, dem Zugriff auf Duet-KI-Features gewährt wurde.

Duet-KI zum Generieren von Node.js-Code auffordern

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

Bevor Sie Duet-KI zum Generieren von Startcode auffordern, erstellen Sie mit dem Cloud Shell-Terminal ein leeres Verzeichnis und fügen zwei leere Dateien hinzu.

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

Wählen Sie im Cloud Shell-Editor die Option content_copy Explorer aus und öffnen Sie den gerade 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. So bitten Sie Duet-KI um Hilfe bei der Installation dieser Pakete:

  1. Klicken Sie im linken Bereich im Cloud Shell-Editor auf chat_spark Duet-KI.

  2. Geben Sie im Duet-KI-Bereich eine Eingabeaufforderung ein, z. B.:

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

  3. Klicke auf Senden Senden.

    Duet-KI gibt eine Antwort wie diese zurück:

    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 Duet-KI bereitgestellten Befehl und führen Sie ihn in Ihrem Cloud Shell-Terminal aus.

Author-Anwendungsdateien

Nach der Installation der Pakete erhalten Sie von Duet-KI eine Anleitung zum Hinzufügen der installierten Pakete in die Datei app.js.

  1. Öffnen Sie die Datei app.js im Cloud Shell-Editor.
  2. Geben Sie im Duet-KI-Chat eine Aufforderung ein, z. B.:

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

    Die Antwort von Duet-KI sieht in etwa so aus:

    Mit dem folgenden Code können Sie die Express- und ejs-Pakete in Ihre app.js-Datei einfügen:

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

    Dafür sind die Express- und EJS-Pakete erforderlich und zur Verwendung in der app.js-Datei verfügbar.

  3. Fügen Sie den von Duet-KI bereitgestellten Code in die Datei app.js ein.

Code mit Kommentaren generieren

Das Cloud Code-Plug-in hat ein Feature, mit dem Duet-KI mithilfe von Dateikommentaren Code generieren kann. Wenn Sie Ihrer Datei beispielsweise einen Kommentar als Platzhalter hinzufügen, können Sie Duet-KI auffordern, Code wie im Kommentar beschrieben zu generieren.

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

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

    // Initialize express web app using ejs templating engine
    
  2. Bewegen Sie den Textcursor an das 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 zur Codegenerierung von Duet-KI Code zu generieren.

    Die Antwort von Duet-KI enthält zwei Codezeilen unter dem Kommentar, 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. Fügen Sie am 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
    
  2. Generieren Sie den Code für jeden Dateikommentar ähnlich wie zuvor generiert.

  3. Prüfen Sie den generierten Code und bestimmen Sie, ob die Duet-Antwort korrekt ist, bevor Sie die Vorschläge annehmen.

    Die Kommentare in der Datei app.js sollten jetzt einen 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 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 chat_spark Duet-KI aus und geben Sie eine Eingabeaufforderung wie diese ein:

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

    Die Antwort von Duet-KI 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 Anwendung (my-app)
    Die Version der Anwendung (1.0.0)
    Eine Beschreibung der Anwendung (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)

  3. Kopieren Sie nur den von Duet-KI bereitgestellten Inhalt und fügen Sie ihn in die Datei package.json ein.

EJS-Vorlagen erstellen

Erstellen Sie zum Fertigstellen der 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>
    

Vorschau der Anwendung in einem Browser ansehen

Nachdem Sie den Anwendungscode, die Vorlagen und die Anforderungen abgeschlossen haben, können Sie 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 Menü aus. In Cloud Shell wird die Vorschau-URL in einem neuen Browserfenster geöffnet.

Einheitentests schreiben

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

  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. Wenn Sie testen möchten, wann die Antwort einen HTTP 200-Statuscode zurückgibt, öffnen Sie das Duet-KI-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?

    Die Antwort von Duet-KI sollte in etwa so aussehen:

    Sehr gern. Hier sehen Sie einen Einheitentest für die Heimatroute 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 Heimatroute 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 vorliegen. Wenn Sie zusätzliche Tests für Ihre anderen Routen hinzufügen möchten, fragen Sie weiterhin Duet-KI 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 beim Ausführen der Anwendung keine Infrastruktur verwalten müssen.

  1. Fragen Sie im Duet-KI-Chat, wie Sie mit gcloud direkt aus Ihrem Quellcode in Cloud Run bereitstellen können:

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

    Die Antwort von Duet-KI sollte in etwa so aussehen:

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

    Verwenden Sie beispielsweise den folgenden Befehl, um den Code in der Datei app.js 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 zum Bereitstellen in Cloud Run aus dem Quellcode finden Sie in der Cloud Run-Dokumentation.

  2. Verwenden Sie den gcloud-Befehl, den Duet-KI in der Antwort bereitgestellt hat.

  3. Folgen Sie den Aufforderungen zur Auswahl einer Region und wählen Sie die Option zum Zulassen nicht authentifizierter Aufrufe für Ihre Testanwendung aus. Nachdem die Anwendung erfolgreich bereitgestellt wurde, wird 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 für diese Anleitung erstellte Google Cloud-Projekt löschen. 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 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 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.
  2. Wenn Sie mehrere Architekturen, Anleitungen oder Kurzanleitungen durcharbeiten möchten, können Sie durch die Wiederverwendung von Projekten das Überschreiten der Projektkontingente verhindern.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