让 Gemini 助力 Google Cloud 开发 Node.js 应用

本教程将介绍如何使用 适用于 Google Cloud 的 Gemini for Google Cloud,由 AI 赋能 探索、创建、修改、测试和部署 Node.js 应用示例

对于以下步骤,假设您是一位 Node.js 开发者,并希望 使用基本形式的 JavaScript 编写简单的 Web 应用。在本课中, 您需要为应用使用 Express 框架,并为应用使用 EJS 模板 HTML 表单。

本指南面向希望使用 Gemini 来加快开发流程。它假定您 熟悉基本的云概念,但不一定是 Google Cloud。

目标

本教程将帮助您了解如何使用 Gemini 完成 以下:

  • 在 Cloud Shell 中开发 Node.js Web 应用。
  • 为 Node.js Web 应用编写单元测试。
  • 将 Node.js Web 应用部署到 Cloud Run。

使用的 Google Cloud 产品

本教程使用以下 Google Cloud 产品:

准备工作

  1. 创建 Google Cloud 项目 如果您还没有可以使用的 Google Cloud 项目
  2. 激活 Cloud Shell
  3. 确保已为您的 Google Cloud 用户账号和项目设置了 Gemini
  4. 启用 Cloud Shell 专用 Gemini 具体方法是选择 Gemini 功能。

提示 Gemini 生成 Node.js 代码

Gemini 可以帮助您根据提示生成 Node.js 代码 以及您在代码注释中撰写的说明。通过 您编写的代码越多,为 Gemini 提供的上下文就越多, 越优质的 Gemini 即可协助您开发应用。注意事项 Gemini 的回答可能会因你提问的方式而有所不同 问题或描述相关背景,因此,建议您查看 在接受建议前 Gemini 的回答 开发过程。

在请 Gemini 帮助生成起始代码之前,请使用 Cloud Shell 终端创建一个空目录, 文件。

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

在 Cloud Shell Editor 中,选择 content_copy 探索器,并打开 刚刚在 Cloud Shell 终端中创建的文件夹

安装软件包

您知道想要为您的 API 安装 expressejs 软件包, Node.js 应用。询问 Gemini 安装相关帮助 软件包,请按以下步骤操作:

  1. 在 Cloud Shell Editor 的左侧面板中,点击 spark Gemini

  2. Gemini 窗格中,输入如下提示:

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

  3. 点击发送 发送

    Gemini 会返回类似于 以下:

    如需安装适用于 Node.js 的 Express 和 ejs 软件包,您可以使用 以下命令:

    npm install express ejs
    
  4. 复制 Gemini 提供的命令,然后在 Cloud Shell 终端。

编写应用文件

安装软件包后,请使用 Gemini 获取相关指导 将已安装的软件包添加到 app.js 文件中。

  1. 在 Cloud Shell Editor 中打开 app.js 文件。
  2. 在 Gemini 对话中输入如下问题:

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

    Gemini 的回答大致如下:

    如需将 Express 和 ejs 软件包添加到 app.js 文件中,您可以使用 以下代码:

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

    这将需要 Express 和 ejs 软件包,并使其可供 使用此参数。

  3. 将 Gemini 提供的代码添加到 app.js 文件中。

生成带注释的代码

Cloud Code 插件有一项功能,让 Gemini 使用文件注释生成代码。例如,当您将评论添加为 占位符,您可以提示 Gemini 生成代码 如评论中所述。

如需在 app.js 文件中使用此功能,请确保 Gemini 已 已在 Cloud Shell Editor 中启用。

  1. 在文件末尾添加评论占位符,以初始化网页 应用。例如:

    // Initialize express web app using ejs templating engine
    
  2. 将您的文本光标移到评论的末尾,然后按 Control+Enter(适用于 Windows 和 Linux)或 Control+Return(适用于 MacOS)、 然后按 Tab 键即可使用 Gemini 的代码生成功能 生成代码。

    在 Gemini 的回答下方会显示两行代码 类似于以下内容:

    // Initialize express web app using ejs templating engine
    
    const app = express();
    app.set('view engine', 'ejs');
    

    如果代码生成输出与您的预期不同,请修改或 根据需要删除多余的内容。

接下来,添加更多评论,为您的 Express Web 生成基本功能 应用。

  1. 找到 app.js 文件的底部,然后添加以下注释:

    // 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. 为每个文件注释生成代码,类似于生成代码的方式 。

  3. 在接受建议之前,请检查所生成的代码是否准确。

    app.js 文件中的注释现在应该随附 与以下代码类似:

    // 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 });
    });
    

创建 package.json 文件

为基础应用生成代码后,创建并添加 将内容保存到 package.json 文件中。

  1. app.js 文件所在的同一目录中创建一个 package.json 文件。
  2. 在 Cloud Shell Editor 中,选择 spark Gemini 的话题,然后输入问题 例如:

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

    Gemini 的回答应该会建议启动脚本 依赖项,类似于以下内容:

    好的。以下是可与 app.js 配合使用的 package.json 文件 文件:

    {
      "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"
      }
    }
    

    此 package.json 文件包含以下信息:

    应用的名称 (my-app)
    应用版本 (1.0.0)
    应用的说明(使用 Express 和 EJS 的简单 Node.js Web 应用。)
    应用的主文件 (app.js)
    可在应用上运行的脚本(启动)
    应用的依赖项(Express 和 ejs)

  3. 仅复制 Gemini 提供的内容并将其粘贴到 您的 package.json 文件。

创建 ejs 模板

若要完成 Web 应用,请为您的 ejs 模板创建一个 views 目录 放在 app.jspackage.json 文件所在的同一目录中。

  1. 在您的终端中,输入以下内容:

    mkdir views
    touch views/index.ejs views/greeting.ejs
    
  2. 在编辑器中打开 index.ejs 文件,然后粘贴以下内容:

    <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. 在编辑器中打开 greeting.ejs 文件,然后粘贴以下内容:

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

在浏览器中预览应用

完成应用代码、模板和要求后,您现在可以 确认应用能否正常运行

  1. 运行以下命令以安装依赖项。

    npm install
    
  2. 运行以下命令以启动应用:

    npm start
    
  3. 确认应用能正常运行。选择位于顶部的网页预览按钮 位于 Cloud Shell 任务栏右侧然后选择 显示的菜单。Cloud Shell 会打开 预览网址

编写单元测试

确认 Node.js 应用可正常运行后,在您的 test.js 文件,然后再将应用部署到 Cloud Run。在 例如,你需要向 Gemini 求助: 在 HTTP 响应代码为 200 时生成单元测试。

  1. app.js 文件的底部,添加以下代码行以导出 应用文件

    module.exports = app;
    
  2. 打开 test.js 文件。

  3. 要测试响应何时返回 HTTP 200 状态代码,请打开 输入如下提示:

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

    Gemini 应该给出类似如下的回答: 以下:

    好的。下面是 app.js 中的主路由的单元测试,可以确保 响应代码为 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);
      });
    });
    

    此测试用于检查主路线是否返回状态代码 200。

    将建议的代码块添加到您的 test.js 文件中。

  4. 运行以下命令,安装 Mocha 测试和 supertest 软件包 命令:

    npm i mocha supertest
    
  5. 更新 package.json 文件,以包含新的测试脚本及其 软件包例如:

    {
      "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. 运行以下命令以运行测试:

    npm test
    

如果没有错误,您的测试应显示为已通过。如果您想将 针对其他路线进行其他测试,继续向 Gemini 提问 ,获取可添加到 test.js 文件中的建议。

部署到 Cloud Run

现在您的应用已在本地运行,您可以继续部署到 Google CloudCloud Run 非常适合这种情况 因为您可以从源代码进行部署, 管理基础架构。

  1. 在 Gemini 对话中,询问 Gemini 如何部署 从源代码部署到 Cloud Run gcloud:

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

    Gemini 应该会在回答类似如下的内容:

    您可以从源代码直接部署到 Cloud Run 在当前目录中运行为此,您可以 将 gcloud run deploy 命令与 --source flag.此标志指示 gcloud 使用您的来源 来构建容器映像并将其部署到 Cloud Run。

    例如,要将 app.js 文件中的代码部署到 Cloud Run,那么您可以使用以下命令:

    gcloud run deploy app --source .
    

    此命令将从您的 app.js 文件构建容器映像,并部署 Cloud Run

    您还可以使用 --region 标志指定 部署应用例如,如需将应用部署到 us-central1 区域, 则可以使用以下命令:

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

    如需详细了解如何从源代码部署到 Cloud Run 您可以参阅 Cloud Run 文档。

  2. 使用 Gemini 提供的 gcloud 命令, 响应。

  3. 按照提示选择区域,然后选择允许选项 对测试应用进行未经身份验证的调用。部署应用后 成功,输出将返回服务网址。

清理

为避免系统因资源向您的 Google Cloud 账号收取费用 您可以删除之前使用的 Google Cloud 项目, 为本教程创建的映像或者,您也可以删除各个资源。

  1. 注意:删除项目会产生以下影响: <ph type="x-smartling-placeholder">
      </ph>
    • 项目中的所有内容都会被删除。如果您使用的是 用于此文档中的任务的现有项目,那么当您将其删除时, 您还会删除您已在该项目中完成的其他任何工作。
    • 自定义项目 ID 会丢失。创建此项目时, 您可能已创建了想要在 。要保留使用项目 ID 的网址(例如 appspot.com 网址,请删除项目内的所选资源 而不是删除整个项目。
  2. 如果您打算探索多个架构、教程或 快速入门,重复使用项目可以帮助您避免超出项目配额 限制。在 Google Cloud 控制台中,前往管理资源页面。

    转到“管理资源”

  3. 在项目列表中,选择要删除的项目,然后 然后点击删除

  4. 在对话框中输入项目 ID,然后点击关停 删除项目。

后续步骤