AI编程工具在编程课教学中的应用

技术
, , ,

Author：黎家全，黄莹钧

From：计算机网络专业教研室

前言：在上编程课的时候，教师除了需要制作上课PPT，还需要：

  • 提前开发好需要演示的项目代码，提供源码给学生学习
  • 编写步骤详尽的实训指导书
  • 在实训过程中给学生解决代码问题

此时，若能使用AI编程工具辅助完成以上的工作，可以大大提高教师备课的效率。另外，也可以创作出更多的教学资源，为学生提供更丰富的学习资料。

常用AI编程工具

  • Cursor，功能强大的代码生成神器，只不过要收费，每个月20美刀价格不菲。新注册用户可以免费试用14天专业版

    O0OZqc.png

  • Windsurf：Cursor后出现的又一代码生成神器，价格比Cursor便宜，性价比更高

    O0OvAr.png

  • GitHub copilot，作为插件集成在VScode中，提供免费试用。适合使用VScode作为主力开发工具的开发者

  • Trae，字节对标Cursor的竞品，内部集成了最新的Deepseek V3引擎。不如Cursor那般强大，但胜在免费！国内首个AI IDE！

  • V0.dev，能够快速生成前端代码，包括复刻前端界面、生成React组件等，在前端开发领域使用较多

    O0OgCG.png

  • Deepseek，通用全能的大模型工具，开源免费。但提出的时间比较短，目前还未广泛集成到代码编辑器中，编程时需要将代码单独复制到编辑器中，有一点不方便。

    O0Opn1.png

  • 除了上面的工具之外，知名的还有 ChatGPT、豆包MarsCode、阿里的通义灵码。感兴趣可以自行下载体验

下面以《Python Web技术》课程为例，演示AI工具的使用

代码生成

教师不需要从头开发代码，只需要说出你的需求，就能给你写出能直接用来演示的代码：

例如，在《Python Web技术》的实训中，有这样一道编程题：

求阶乘之和。一个正整数的阶乘（factorial）是所有小于及等于该数的正整数的积。例如3的阶乘是 3! = 1 * 2 * 3 = 6。求 1! + 2! + 3! + 4! + … + 9! + 10! ，并打印计算结果。

Cursor代码生成

在 Cursor 中可以轻松生成这道题的参考代码，而且是直接在项目中生成，不用在聊天框复制过来非常方便。尤其是生成多个代码文件的时候，更能感受到这种便利性。

O0OL5b.png

生成的代码如果觉得满意，就Accept。否则Reject

生成后能直接运行代码，也能根据自己的需要对代码做进一步的修改：

O0OQwB.png

代码优化

可以看到生成的代码求阶乘时用了递归算法实现。递归法需要消耗的栈资源较多且效率较慢，因此还可以优化这里的代码，使用动态规划算法实现：

  1. 在 Cursor 中选中需要优化的代码片段，然后点击Edit

    O0O0ns.png

  2. 在弹出的窗口中输入你的需求，进行此处的代码优化

    O0Od8a.png

  3. 最后生成了满意的代码，操作全部在编辑器中完成，非常方便！

    O0OcDK.png

代码补全

代码补全在编程开发中非常有用，能够减少重复代码的编写，提高开发的效率。

下面以GitHub copilot举例代码补全功能，可以参考官方文档来完成

https://vscode.js.cn/docs/copilot/ai-powered-suggestions

  1. 先在VScode中安装 GitHub copilot 插件

    O0OVkS.png

  2. 登录GitHub的账号

  3. 在VSCode编辑器中键入代码，GitHub copilot 会给出代码补全的建议，按下 Tab 键即可自动补全

    O0OYpN.png

前端demo生成

能够快速生成直接可用的前端代码，只需根据自己的需求稍加修改，即可在课堂上演示。

例如，使用 V0.dev 仿照GitHub的登录页面，生成用户登录的前端代码：只需要在输入框中输入网址：https://github.com/login

O0O4m6.png

V0.dev 就会自动截图，并生成前端界面代码，支持实时预览。生成的效果如下所示，可以看到还原度非常之高

O0ODYP.png

生成的代码的技术栈为React、Typescript、TailwindCSS，如下所示：

O0OGSg.png

如果你想要生成 Vue 的代码，可以在聊天框中说明，V0.dev会帮你重新生成代码：

O0OEAl.png

文档生成

只需提供一份大纲（框架），就能为你生成包括代码在内的详细实训文档

下面以字节的 Trae 为例，输入《Python Web技术》课程的实训大纲，生成实训的操作文档：

  1. 传入大纲，并输入prompt指令进行提问
帮我生成一份实训指导书，主题为表单处理实战。实训会使用到 Flask 框架中的 Flask-WTF 实现表单处理的过程。下面给出了实训的大纲，请根据这份大纲为我生成包括代码和原理解释在内的详细的实训文档：

1.定义一个 ArticleForm 表单类，在类中实现三个表单控件：文章标题单行文本框、文章内容多行文本框、提交按钮。要求依次命名为title、content和submit

2.渲染表单。根据表单类定义的表单结构，将表单渲染到页面上。

3.接收表单数据及返回响应。点击新增按钮后，在一个新页面展示表单填写的内容（文章标题和文章内容）

4.数据验证。要求验证文章标题和文章内容均不得为空，并且验证文章标题的长度小于20个字。如果文章标题（内容）为空，利用消息反馈给用户提示一条警告消息：“文章标题（内容）不得为空。如果文章标题的长度大于20，则利用消息反馈给用户提示一条警告消息：“文章标题的长度不得超过20”

O0OfYC.png

  1. 获得实训文档，同时可直接将生成的代码保存到现有项目中

O0OjKi.png

代码纠错

学生可以借助 Deepseek 轻松实现代码纠错，找出程序出错的原因。减轻教师指导的负担。

例如学生在实训中遇到了一个 NameError: name 'a' is not defined 的报错，出错代码为：

print('hello world')

if a < 0:
  print('输入的数应该大于等于0')
else:
  print(a)

那么可以直接将代码和报错一同送入到 Deepseek 中：

我在运行Python代码的时候遇到了这个错误：NameError: name 'a' is not defined。请帮我分析代码出错的原因以及纠正错误的代码

代码如下：
print('hello world')
if a < 0:
  print('输入的数应该大于等于0')
else:
  print(a)

O0O95L.png

可以发现，Deepseek 为我们指出了代码出错的位置并给出了改正方案：

O0O2SX.png

寄语

Don’t resist the change. Open yourself to new possibilities.

不要抗拒改变。敞开心扉迎接新的可能性。

在AI时代的洪流中顺势而为，积极拥抱AI。一方面，探索AI工具在教学方面的应用，享受新技术带给我们的便利。另一方面应当保持独立思考，不能过于依赖AI工具而忽视了自身技术能力的提高。