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

In dieser Anleitung erfahren Sie, wie Sie Gemini für Google Cloud, ein KI-gestütztes Tool Mitarbeitende in Google Cloud, zum Erkunden, Erstellen, Ändern, Testen und Bereitstellen Node.js-Beispielanwendung

Beachten Sie bei den folgenden Schritten, dass Sie ein Node.js-Entwickler sind und um eine einfache Webanwendung in JavaScript zu schreiben, die ein einfaches Formular verwendet. In dieser verwenden Sie das Express-Framework für die App und die EJS-Vorlagen für das HTML-Formular aus.

Dieses Handbuch richtet sich an Node.js-Entwickler, die Gemini zur Beschleunigung des Entwicklungsprozesses. Es wird davon ausgegangen, dass Sie vertraut mit grundlegenden Cloud-Konzepten, auch wenn sie nicht unbedingt mit Google Cloud vertraut sind.

Lernziele

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

  • 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 verfügbarer Mitbearbeiter in Google Cloud das einer Vielzahl von Nutzenden auf generativer KI basierende Unterstützung bietet, einschließlich Entwickelnden und Data Scientists. Um ein integriertes Unterstützung haben, ist Gemini in vielen Google Cloud-Produkte
  • Cloud Code for Cloud Shell-Plug-in: Ein IDE-Plug-in Erweiterung zur Unterstützung des Entwicklungszyklus von Anwendungen, die auf Google Cloud
  • Cloud Run: Ein vollständig verwalteter Dienst, mit dem Sie und Containeranwendungen bereitstellen. Google Cloud übernimmt die Skalierung und andere Infrastrukturaufgaben, damit Sie sich auf die Geschäftslogik Ihres Codes konzentrieren können. Preisinformationen finden Sie in der Cloud Run-Preise und verwenden Sie den Preisrechner um eine Kostenschätzung basierend auf Ihrer voraussichtlichen Nutzung zu erstellen.

Hinweise

  1. Google Cloud-Projekt erstellen Wenn Sie noch kein Google Cloud-Projekt haben, für diese Anleitung.
  2. Aktivieren Sie Cloud Shell.
  3. Richten Sie Gemini für Ihr Google Cloud-Nutzerkonto und ‐Projekt ein.
  4. Gemini für Cloud Shell aktivieren indem Sie das Projekt auswählen, auf das Zugriff Gemini-Funktionen.

Gemini auffordern, Node.js-Code zu generieren

Mit Gemini können Sie Node.js-Code anhand der Prompts generieren im Chat und die Beschreibungen in den Code-Kommentaren. Die Je mehr Code Sie schreiben und je mehr Kontext Sie Gemini zur Verfügung stellen, desto besser kann Gemini Sie bei der Entwicklung Ihrer App unterstützen. Hinweis dass die Antworten von Gemini je nach Frage variieren können. Fragen stellen oder den Kontext beschreiben. Antworten von Gemini, bevor die Vorschläge während des Entwicklungsprozesses.

Bevor du Gemini bittest, Startcode zu generieren, verwende die Cloud Shell-Terminal, um ein leeres Verzeichnis zu erstellen, und fügen Sie zwei leere -Dateien.

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 und öffnen Sie den Sie gerade im Cloud Shell-Terminal erstellt haben.

Pakete installieren

Sie möchten die Pakete express und ejs für Ihr Node.js-Anwendung Um Gemini um Hilfe bei der Installation dieser Apps zu bitten für Pakete, gehen Sie folgendermaßen vor:

  1. Klicken Sie im linken Bereich des Cloud Shell-Editors auf Spark Gemini

  2. Geben Sie im Bereich Gemini einen Prompt ein, z. B.:

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

  3. Klicken Sie auf Senden Senden.

    Gemini gibt eine Antwort zurück, die der folgenden ähnelt Folgendes:

    Zur Installation der Express- und EJS-Pakete für Node.js können Sie die folgenden Befehl:

    npm install express ejs

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

Authoring-Anwendungsdateien

Verwenden Sie nach der Installation der Pakete Gemini als Anleitung zum Fügen Sie der Datei app.js die installierten Pakete hinzu.

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

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

    Um die Express- und EJS-Pakete zu Ihrer app.js-Datei hinzuzufügen, verwenden Sie die folgenden Code:

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

    Dies erfordert die Express- und EJS-Pakete und stellen sie für die Sie in Ihrer app.js-Datei verwenden.

  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 eine Funktion, mit der Gemini Dateikommentare verwenden, um Code zu generieren. Wenn Sie beispielsweise einen Kommentar als Platzhalter in Ihrer Datei verwenden, können Sie Gemini auffordern, Code wie im Kommentar beschrieben.

Wenn du diese Funktion in deiner app.js-Datei verwenden möchtest, muss Gemini die im Cloud Shell-Editor aktiviert haben.

  1. Fügen Sie am Ende der Datei einen Kommentarplatzhalter hinzu, um das Web zu initialisieren Hier einige Beispiele:

    // Initialize express web app using ejs templating engine

  2. Bewegen Sie den Textcursor an das Ende des Kommentars und drücken Sie Control+Enter (für Windows und Linux) oder Control+Return (für MacOS), und dann die Tabulatortaste drücken, um die Funktionen zur Codegenerierung von Gemini zu nutzen um Code zu generieren.

    In der Antwort von Gemini befinden sich zwei Codezeilen unter Kommentar, ähnlich wie hier:

    // 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 können Sie die zusätzlichen Inhalte jederzeit löschen.

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

  1. 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

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

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

    Für die Kommentare in der Datei „app.js“ sollten jetzt folgende Dokumente angezeigt werden: entsprechenden Code, 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 Inhalt in die Datei package.json um.

  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 und gib einen Prompt ein wie:

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

    Die Antwort von Gemini sollte das Startskript vorschlagen Abhängigkeiten und sieht in etwa so aus:

    Sehr gern. Hier ist eine package.json-Datei, die Sie mit Ihrem app.js-Script verwenden können. Datei:

    {
  "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 (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. Nur die von Gemini bereitgestellten Inhalte kopieren und einfügen: Ihre package.json-Datei.

eJS-Vorlagen erstellen

Erstellen Sie ein views-Verzeichnis für Ihre ejs-Vorlagen, um Ihre Webanwendung fertigzustellen 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

Wenn Sie Ihren App-Code, Ihre Vorlagen und Ihre Anforderungen vollständig ausgefüllt haben, können Sie um zu 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 App zu starten:

    npm start

  3. Prüfen Sie, ob die App funktioniert. Wählen Sie oben die Schaltfläche Webvorschau aus. neben der Cloud Shell-Taskleiste. Wählen Sie dann die Portnummer das angezeigte Menü. Cloud Shell öffnet die Vorschau-URL in einem neuen Browserfenster aus.

Einheitentests schreiben

Nachdem Sie bestätigt haben, dass Ihre Node.js-App funktioniert, können Sie Einheitentests in Ihr test.js, bevor Sie die Anwendung in Cloud Run bereitstellen. Im Im folgenden Beispiel bitten Sie Gemini um Unterstützung bei Unittest wird generiert, wenn der HTTP-Antwortcode 200 ist.

  1. Fügen Sie am Ende der Datei app.js für den Export die folgende Zeile hinzu Ihre Anwendungsdatei.

    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 die Gemini-Chatfenster und geben Sie einen Prompt wie den folgenden 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: Folgendes:

    Sehr gern. Hier ist ein Unittest für die Route nach Hause in app.js, lautet der Antwortcode 200:

    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.

  4. Installieren Sie die Mocha-Test- und Supertest-Pakete mit dem folgenden Befehl: -Befehl in Ihrem Terminal:

    npm i mocha supertest

  5. Aktualisieren Sie Ihre package.json-Datei, um Ihr neues Testskript und dessen Pakete. 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 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 deine anderen Routen durchführen, frag weiterhin Gemini für Vorschläge zum Hinzufügen zur test.js-Datei.

In Cloud Run bereitstellen

Da Ihre App jetzt lokal ausgeführt wird, können Sie mit der Bereitstellung auf Google Cloud Cloud Run eignet sich für dieses Szenario gut da Sie aus Quellcode bereitstellen können und keine beim Ausführen Ihrer Anwendung.

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

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

    Gemini sollte in etwa so antworten:

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

    Um den Code in Ihrer app.js-Datei beispielsweise in Cloud Run verwenden Sie den folgenden Befehl:

    gcloud run deploy app --source .

    Mit diesem Befehl wird ein Container-Image aus Ihrer app.js-Datei erstellt und bereitgestellt an Cloud Run übergeben.

    Sie können auch das Flag --region verwenden, um die Region anzugeben, in der Sie Ihre Anwendung bereitzustellen. Wenn Sie Ihre Anwendung beispielsweise in der Region „us-central1“ bereitstellen möchten, würden Sie den folgenden Befehl verwenden:

    gcloud run deploy app --source . --region us-central1

    Weitere Informationen zum Bereitstellen in Cloud Run aus der Quelle finden Sie in der Cloud Run-Dokumentation.

  2. Verwenden Sie den gcloud-Befehl, den Gemini in auf die Antwort.

  3. Folgen Sie der Anleitung zur Auswahl einer Region und wählen Sie die Option zum Zulassen aus. nicht authentifizierte Aufrufe für Ihre Test-App. Nach der Bereitstellung der Anwendung erfolgreich war, wird in der Ausgabe eine Service-URL zurückgegeben.

Bereinigen

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

  1. Achtung: Das Löschen von Projekten hat folgende Auswirkungen: <ph type="x-smartling-placeholder">
      </ph>
    • Alle Inhalte des Projekts werden gelöscht. Wenn Sie eine eines vorhandenen Projekts für die Aufgaben in diesem Dokument. Wenn Sie es löschen, und löschen auch alle anderen Arbeiten, die Sie in dem Projekt geleistet haben.
    • Benutzerdefinierte Projekt-IDs gehen verloren. Als Sie dieses Projekt erstellt haben, haben Sie möglicherweise eine benutzerdefinierte Projekt-ID erstellt, die Sie im zu entwickeln. Um die URLs beizubehalten, die die Projekt-ID verwenden, z. B. ein appspot.com, löschen Sie ausgewählte Ressourcen im Projekt anstatt das gesamte Projekt zu löschen.

  2. Wenn Sie mehrere Architekturen, Anleitungen oder Schnellstarts können Sie das Überschreiten von Projektkontingenten vermeiden, Limits.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. Klicken Sie dann auf Löschen.

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

Nächste Schritte