likes
comments
collection
share

Copilot AI 编程训练营第二天:1 小时 0 手写开发一个购物车系统

作者站长头像
站长
· 阅读数 6

经过训练营第一天的学习,大家都已经能基本熟练的使用 GitHub Copilot 进行辅助编程啦。

第二天,是考验学习成果的一天,我们需要在 2 小时内,通过 GitHub Copilot 完全 0 代码开发一个购物车系统。

熟练使用的同学,大概 1 小时就能完成啦!

我们开始今天的分享~

前置内容(可以文末领取)

  1. 一个默认的 Spring Boot 框架。
  2. 一段需求描述。
  3. 一段啤酒数据的 Json 数据。

分析需求

输入需求文档,可以复制内容到 Copilot,也可以直接上传文件到 GPT-4.0。

@workspace 目标:开发一个购物车。购物车应该允许用户添加和删除产品。 需求描述: 1、创建一个带有以下方法的 API Rest 1)使用页偏移和限制获取啤酒列表。 2)按 id 获取啤酒详细信息。 3)通过名称、描述、标语、与食物搭配和价格搜索啤酒。 2、在主页面创建产品列表。 3、创建一个搜索栏来筛选产品。 4、当用户点击产品时跳转到描述页面。 5、创建一个购物车。 1)将产品添加到购物车。 2)从购物车中删除产品。 3)计算购物车中产品的总价格。 请你分析上述需求文档,结合项目结构,生成 controller 层代码。

Copilot AI 编程训练营第二天:1 小时 0 手写开发一个购物车系统

Copilot AI 编程训练营第二天:1 小时 0 手写开发一个购物车系统

controller 层代码框架就生成好了,我们直接复制粘贴到 Controller 目录下即可。

解析 Json 数据

解析 Json 数据生成 Java Bean 对象

这个 Json 文件有点大,生成 Java Bean 对象的时候,可以选择其中一个对象进行生成。

也可以,把文件 copy 到 VS Code Studio 中,在 chat 中可以和 Edit 区域进行联动(这个还是很高级的~),可以直接问 Chat。

阅读这个 json 文件,帮我生成一个 Java Bean 对象

Copilot AI 编程训练营第二天:1 小时 0 手写开发一个购物车系统

我们把代码 copy 到 model 目录(可以自己创建)下。这个时候,我们的代码是如下图结构所示:

Copilot AI 编程训练营第二天:1 小时 0 手写开发一个购物车系统

解析 Json 数据工具类

根据 Json 数据文件,直接生成一个工具类,帮我们读取 Json 数据。

阅读这个json文件,帮我生成一个读取完整json数据的Java工具类。

Copilot AI 编程训练营第二天:1 小时 0 手写开发一个购物车系统

我们 copy 包配置到 pom.xml 文件中,然后创建一个 util 文件夹,存放工具代码。

这个方法是我们的核心工具方法,我们让 Copilot 帮我们生成单元测试。

选中这个方法,选择 Copilot,下拉选择 Gernerate Tests 生成单元测试。

import org.junit.jupiter.api.Test;
import static org.junit.jupiter.api.Assertions.*;

class JsonUtilTest {

    @Test
    void testReadJsonFile() {
        // Arrange
        String fileName = "beers.json";

        // Act
        List<Beer> beers = JsonUtil.readJsonFile(fileName);

        // Assert
        assertNotNull(beers);
        assertEquals(3, beers.size());
        // Add more assertions based on your specific JSON file and expected results
    }
}

验证无误之后,继续往下,如果有问题,让 Copilot 帮你修复代码!

后端代码

啤酒商品 Controller 代码

这一步,我们让 Copilot 帮我们完善具体的方法内容。

使用页偏移和限制获取啤酒列表,啤酒列表数据使用 JsonUtil 类读取 src/main/resources/beers.json 文件获取。 请你根据上述描述,生成 getProducts 方法的完整内容

Copilot AI 编程训练营第二天:1 小时 0 手写开发一个购物车系统

我们把内容 copy 到方法体中。

第二个方法,prompt:

按 id 获取啤酒详细信息,啤酒列表数据使用 JsonUtil 类读取 src/main/resources/beers.json 文件获取。然后使用 stream api 进行过滤返回匹配的 beer 对象进行返回。 请你按照上述描述,生成 getProductById 方法的完整内容。

第三个方法,prompt:

通过名称、描述、标语、与食物搭配和价格搜索啤酒。啤酒列表数据使用 JsonUtil 类读取 src/main/resources/beers.json 文件获取。然后使用 stream api 进行过滤返回匹配的 beer 对象数组。 请你按照上述描述,生成 searchProducts 方法的完整内容。

购物车 Controller 代码

我们使用 workspace 命令,直接让 Copilot 生成 CartController 代码。

@workspace 请你使用本地缓存购物车数据的方式,实现购物车的controller代码编写。

Copilot AI 编程训练营第二天:1 小时 0 手写开发一个购物车系统

生成前端代码

虽然阿七是一个后端工程师,不会前端代码,但是无所谓,Copilot 什么语言都会。

有了 workspace 命令,全局性质的代码也不在话下!

@workspace 生成一个html页面,能够查询 beers 分页数据、详情数据;往购物车里添加beer、删除beer,计算购物车里的总价格。 要求:能够正确调用对应的接口。 现在,请你输出对应的html页面

Copilot AI 编程训练营第二天:1 小时 0 手写开发一个购物车系统

我们在 Resources 下创建一个 static 文件夹,创建一个 index.html 文件,把 Copilot 生成的内容 Copy 到 index.html 文件中。

启动 Spring Boot 项目,浏览器打开 localhost:8080/index.html。

我们发现有些问题,包括页面的问题,以及后端代码的问题,不要慌,都可以扔给 Copilot,让它帮我们解决。

问题排查

编译问题

启动项目的时候,我们发现 ProductController.java 类有编译问题,我们让 Copilot 帮我们修复。

Copilot AI 编程训练营第二天:1 小时 0 手写开发一个购物车系统

实体类导入 lombok 包

Copilot AI 编程训练营第二天:1 小时 0 手写开发一个购物车系统

Copilot AI 编程训练营第二天:1 小时 0 手写开发一个购物车系统

我们直接复制粘贴,就能解决代码问题。

总价格计算

修改计算购物车总价格的接口,让总价格等于购物车中所有beer的price之和

前端页面问题

刚开始页面很丑,可能也很大部分不满足我们的要求,我们让 Copilot 帮我们修改,直到满足我们的要求。

Copilot AI 编程训练营第二天:1 小时 0 手写开发一个购物车系统

这个html文件,啤酒列表展示了啤酒的描述。 但是描述内容太多了,修改展示的字段,只展示 name、tagline、price 三个字段

最后的功能展示

我们选择 Add to Cart,Cart 列表中就会多一个 beer 商品,Total Price 区域就会计算购物车中的总价格。

我们选择 Remove from Cart,Cart 列表中就会删除一个 beer 商品,Total Price 区域就会重新计算,扣减这个 beer 商品的价格。

Copilot AI 编程训练营第二天:1 小时 0 手写开发一个购物车系统

这样,我们大概花了 1 小时,一行代码都没有写,就完成了后端 Java 代码和前端 Html 代码的开发,并且整合发布,完成了一个简单的购物车功能啦!

转载自:https://juejin.cn/post/7317325063127482377
评论
请登录