在 Duet AI 协助下开发 Node.js 应用

本教程介绍如何使用 Google Cloud 中依托 AI 技术的协作工具 Duet AI 来探索、创建、修改、测试和部署示例 Node.js 应用。

对于以下步骤,假设您是 Node.js 开发者,希望使用基本表单通过 JavaScript 编写一个简单的 Web 应用。在这种情况下,您将为应用使用 Express 框架,为 HTML 表单使用 EJS 模板。

本指南适用于希望使用 Duet AI 加速开发流程的 Node.js 开发者。本指南假定您熟悉基本的云概念,但不了解 Google Cloud。

目标

本教程将帮助您了解如何使用 Duet AI 执行以下操作:

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

使用的 Google Cloud 产品

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

  • Duet AI:Google Cloud 中始终在线的协作工具,为各种用户提供由生成式 AI 驱动的协助,包括开发者和数据科学家。为了提供集成式协助体验,许多 Google Cloud 产品中嵌入了 Duet AI。
  • Cloud Code for Cloud Shell 插件:一种 IDE 插件扩展程序,可为将在 Google Cloud 上运行的应用提供开发周期支持。
  • Cloud Run:一种全代管式服务,可用于构建和部署容器化应用。Google Cloud 负责处理伸缩任务和其他基础架构任务,因此您可以专注于代码的业务逻辑。如需了解价格信息,请参阅 Cloud Run 价格页面,并使用价格计算器根据您的预计使用情况来估算费用。

准备工作

  1. 如果您还没有可用于本教程的 Google Cloud 项目,请创建一个 Google Cloud 项目
  2. 激活 Cloud Shell
  3. 确保已为您的 Google Cloud 用户帐号和项目设置 Duet AI
  4. 选择有权访问 Duet AI 功能的项目,为 Cloud Shell 启用 Duet AI

提示 Duet AI 生成 Node.js 代码

Duet AI 可以根据您在聊天中提供的提示以及在代码注释中撰写的说明,帮助您生成 Node.js 代码。您编写的代码越多,提供给 Duet AI 的上下文越多,Duet AI 就能更好地帮助您开发应用。请注意,Duet AI 的响应可能会因您提问或描述上下文的方式而异,因此在开发过程中最好先查看 Duet AI 的回复,然后再接受建议。

在让 Duet AI 帮助生成起始代码之前,请使用 Cloud Shell 终端创建一个空目录,并添加两个空文件。

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

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

安装软件包

您知道要为 Node.js 应用安装 expressejs 软件包。如需让 Duet AI 帮助您安装这些软件包,请按以下步骤操作:

  1. 在 Cloud Shell Editor 的左侧面板中,点击 chat_spark Duet AI

  2. 在 Duet AI 窗格中,输入如下提示:

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

  3. 点击发送 发送

    Duet AI 会返回类似于以下内容的响应:

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

    npm install express ejs
    
  4. 复制 Duet AI 提供的命令,并在 Cloud Shell 终端中运行。

编写应用文件

安装软件包后,请使用 Duet AI 获取有关如何在 app.js 文件中添加已安装的软件包的指导。

  1. 在 Cloud Shell Editor 中打开 app.js 文件。
  2. 在 Duet AI 聊天中输入如下提示:

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

    Duet AI 的响应将类似于以下内容:

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

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

    这将需要 Express 和 ejs 软件包,并使其可在 app.js 文件中使用。

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

生成包含注释的代码

Cloud Code 插件有一项功能,可让 Duet AI 使用文件注释生成代码。例如,当您在文件中添加注释作为占位符时,您可以提示 Duet AI 按照注释中的说明生成代码。

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

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

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

    Duet AI 的响应会在注释下方显示两行代码,类似于以下内容:

    // 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. 在接受建议之前,查看生成的代码并确定 Duet 的响应是否准确。

    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 中,选择 chat_spark Duet AI,然后输入如下提示:

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

    Duet AI 的响应应建议指定的启动脚本和依赖项,并且类似于以下内容:

    好的。以下是可与 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. 请仅将 Duet AI 提供的内容复制并粘贴到 package.json 文件中。

创建 ejs 模板

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

  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。在以下示例中,您可以让 Duet AI 针对 HTTP 响应代码为 200 的情况生成单元测试。

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

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

  3. 如需测试响应何时返回 HTTP 200 状态代码,请打开 Duet AI 聊天窗格,然后输入以下提示:

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

    Duet AI 应返回类似如下内容的响应:

    好的。下面是针对 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
    

如果没有错误,您的测试应显示为通过。如果您想为其他路线添加其他测试,请继续向 Duet AI 寻求建议,以便将其添加到 test.js 文件中。

部署到 Cloud Run

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

  1. 在 Duet AI 聊天中,询问 Duet AI 如何使用 gcloud 直接从源代码部署到 Cloud Run:

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

    Duet AI 应返回类似如下内容的响应:

    您可以使用 gcloud 从当前目录中的源代码直接部署到 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. 使用 Duet AI 在响应中提供的 gcloud 命令。

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

清理

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

  1. 警告:删除项目会产生以下影响:
    • 项目中的所有内容都会被删除。如果您使用现有项目执行本文档中的任务,则删除该项目时,还将删除您已在该项目中完成的任何其他工作。
    • 自定义项目 ID 丢失。创建此项目时,您可能创建了要在将来使用的自定义项目 ID。如需保留使用该项目 ID 的网址(例如 appspot.com 网址),请删除项目内的所选资源,而不是删除整个项目。
  2. 如果您打算探索多个架构、教程或快速入门,重复使用项目可以帮助您避免超出项目配额限制。在 Google Cloud 控制台中,转到管理资源页面。

    转到“管理资源”

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

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

后续步骤