生成式AI工具与项目实践 课件 项目7 代码生成与AI编程

项目7代码生成与AI编程CONTENTS目录任务1

AI编程助手功能详解任务2

代码自动生成与错误调试任务3

项目开发中的AI辅助编程任务4

不同专业背景的编程实践编程能力职场价值编程能力正成为各专业学生面向职场的核心竞争力之一，受各行业职场重视。传统编程学习困境传统编程学习门槛高、调试流程繁琐，使得众多非计算机专业学习者望而却步。AI编程助手指引变革AI编程助手普及后，可通过自然语言生成代码、定位报错、迭代优化，重构编程方式。【项目导读】编程能力现状【项目导读】项目核心内容

01AI编程助手认知从认识三类AI编程助手的能力边界出发，开启AI辅助编程的学习与实践之旅。网页对话式编程体验依次体验网页对话式编程、Agent式编程工具的完整操作使用流程。

02编程思维能力跃升通过真实编程场景，建立自然语言驱动代码生成思维，借助AI实现编程能力快速提升。

03实操技能积累赋能为学习者的学习、实习与职场工作，积累可迁移的AI辅助编程实操技能。【学习目标】AI编程助手认知了解对话式、补全式、Agent式三类AI编程助手的定义、特点、能力边界，掌握工具适用场景与选型逻辑。Cline模式协作要点理解Cline的Plan模式与Act模式工作机制，掌握diff审查与人工确认的协作原则。AI辅助编程技能掌握AI辅助编程提示词基本构成要素，了解多文件项目开发与自动报错修复基础流程。Cline插件环境搭建可在PyCharm中完成Cline插件安装与GLMAPIKey配置，独立完成环境搭建及连通验证。网页对话编程实操能运用网页对话式编程完成代码生成、报错调试与多轮迭代，掌握提示词撰写与追问优化技巧。Agent式编程操作可使用Cline完成单文件生成、多文件项目搭建及代码报错自动定位修复，具备基础Agent式编程能力。【技能目标】【素质目标】

编程协作观念培养树立“AI辅助、人工主导”的编程协作观念，养成审查AI代码、验证运行结果的严谨习惯。增强对AI生成代码的批判性思维，树立负责任的审查意识，坚守程序质量与数据安全底线。

跨专业能力养成培养跨专业迁移能力，结合自身专业方向设计编程应用场景，将AI编程工具融入真实学习工作需求。AI编程助手功能详解任务1任务1：AI编程助手功能详解

AI编程能力升级此前网页对话类AI仅能通过输入提示词生成内容，而AI编程助手可深度参与开发，能打开文件、运行程序、修复报错。

AI编程助手体系梳理将系统梳理其发展脉络与类型划分，涵盖对话式生成、IDE自动补全、Agent式编程，搭建完整认知框架。

实操环境搭建任务将完成PyCharm与Cline插件的环境搭建，为后续AI编程相关的实操任务做好准备。7.1.1AI编程助手的类型与发展

AI编程助手特性并非单一形态工具，是按AI参与程度由浅到深、逐步演进的工具谱系。理解该谱系可帮助在实际编程场景中选合适工具，避免盲目追先进。

AI编程助手分类目前主流AI编程助手可依据交互方式与能力边界的不同，大致分为三类。7.1.1AI编程助手的类型与发展

（1）对话式编程助手以网页对话框为载体，用户用自然语言提编程需求，AI生成代码，是门槛最低的AI辅助编程形态（2）补全式编程助手以IDE插件形式存在，编写代码时依上下文实时给局部建议，按Tab采纳，被动跟随输入节奏。按照交互方式与能力边界的不同，目前主流的AI编程助手大致可分为三类：Agent式工具特性是当前能力最强、自动化程度最高的一类，可自主完成读写文件、执行命令等开发动作，Cline属于此类。三类工具核心区别对话式仅负责回答问题，补全式按需提示补全，Agent式可直接动手完成开发任务。AI编程助手演进历程早期以代码补全为主，逐渐发展出对话生成代码能力，最新一代具备自主操作开发环境能力。演进背后驱动力源于大模型对开发场景的理解能力和工具调用能力的持续提升。7.1.1AI编程助手的类型与发展（3）Agent式编程助手7.1.2对话式编程

对话式编程逻辑操作逻辑简单，将编程需求转化为清晰提示词提交给AI，即可获取可直接使用的代码。对话式编程优势无需安装任何插件，只要能打开AI对话网页即可使用，是入门AI辅助编程的第一步。对话式编程演示以批量重命名文件夹内图片为例，演示对话式编程的实际操作效果。可选AI工具说明可使用豆包、千问、DeepSeek、元宝等AI工具进行对话式编程操作。7.1.2对话式编程（1）第一轮对话该脚本按os.listdir()读取顺序编号，若需按文件创建或修改时间排序，可追加排序逻辑。7.1.2对话式编程（2）第二轮对话（迭代优化）

对话式编程优势上手快、交流自然，能基于对话逐步完善代码，满足基础编程需求。

对话式编程局限单击此处添加项正文

对话式编程局限需人工在网页与IDE间反复复制代码、反馈问题，复杂频繁修改时效率低下。

Agent编程引入原因对话式编程的复制粘贴循环拖慢复杂需求的开发效率，是引入Agent式编程的重要原因。7.1.3补全式编程

补全式编程助手定义补全式编程助手是嵌入IDE的AI插件，能依据输入代码上下文实时预测补全代码，可一键采纳或忽略。

常见补全式工具列举常见补全式编程工具含通义灵码、腾讯CodeBuddy、讯飞星火编程助手等国产工具，多为IDE插件，可自动唤醒补全。

补全式工具定位特点定位近于打字智能提示，适配明确思路、提速敲代码场景，不整段生成代码、不自主执行操作/命令

三类工具使用逻辑三类工具并非互斥，实际开发中常配合使用，理解各类工具能力边界比追热门工具更重要。7.1.4Agent式编程Agent式助手核心特点是自动化程度最高的编程工具，具备自主动手能力，无需人工在网页和IDE间来回操作。Agent式助手权限范围获用户授权后，可自主读写项目文件、执行终端命令，还能依据报错自动定位修复问题。Cline工具运行形式本书选用的Agent式编程工具为Cline，以IDE插件形式运行，拥有多项核心功能。（1）Plan（规划）与Act（执行）双模式Plan模式：理解需求、分析结构、规划方案、确认细节；Act模式：执行修改文件、运行命令操作。（2）文件读写与多文件理解Cline可读取项目文件结构，理解文件引用关系，修改文件时自动联动检查相关文件是否需同步调整。（3）终端命令执行Cline可在集成终端直接运行安装第三方库、运行脚本、执行测试等命令，并实时读取输出结果。7.1.4Agent式编程7.1.4Agent式编程

（4）diff审查与checkpoint回滚Cline核心功能特性文件修改以diff形式展示供用户确认，每步操作生成检查点，可一键回滚至之前状态。1.运行环境准备要求需预先安装PyCharm2025.2版本与Python3.14.0版本，可分别从对应官网下载，按默认选项安装。2.Cline插件安装步骤打开PyCharm进入设置，在插件栏搜索Cline并安装，应用或重启后点击右侧工具栏图标打开欢迎界面。

PyCharm设置插件搜索“Cline”

安装Cline

右侧工具栏Cline图标

Cline欢迎界面7.1.4Agent式编程

3.GLMAPIKey配置注册登录智谱AI平台生成APIKey，在PyCharm的Cline配置界面选择对应选项，填入指定信息完成配置。

智谱AI开放平台

“APIKey”管理页面

Cline配置界面

为Cline配置API

Cline主界面7.1.4Agent式编程

4.配置验证操作方法在Cline对话输入框发送指令，若终端成功输出“Cline配置成功！”，则说明配置生效。Act模型运行代码自动生成与错误调试任务2任务2：代码自动生成与错误调试网页生成核心环节

在对话式编程基础上，学习借助AI生成可运行、可视化效果直观的网页作品。

程序报错调试方法

掌握通过对话定位程序报错问题并修复的方法，需人工验证AI修复方案是否有效。

任务完整流程体验

从生成网页入手，经报错调试，再做网页功能迭代，完整体验三个阶段的编程过程。7.2.1生成一个简单个人介绍网页

案例实践说明学习网页对话生成代码后，以结构简单、无基础要求的个人介绍网页作为首个对话式编程完整实践案例。

案例操作步骤1.新建文本文件，粘贴代码后保存为“index.html”。2.双击文件用浏览器打开，查看居中白色卡片内容。个人介绍网页网页迭代核心逻辑网页并非一次定型，需根据实际效果反复调整内容、布局和风格，多轮追问打磨是对话式编程常用方式。网页两轮迭代任务在7.2.1生成的个人介绍网页基础上，先补充一个内容模块，再调整页面的布局与配色。7.2.2网页功能迭代与布局调整7.2.2网页功能迭代与布局调整

第一轮：增加作品展示模块将指定代码插入原文件对应位置，保存刷新浏览器，可看到卡片下方新增浅蓝色作品展示小模块。

增加作品展示模块7.2.2网页功能迭代与布局调整第二轮：调整标签位置与主题配色

网页样式布局调整将颜色代码替换原有.tag和.work-item对应样式，调整HTML标签顺序，实现标签紧跟姓名下方，配色变为绿色系。对话式编程迭代要点对话式编程可修复报错、打磨页面细节，但AI给出建议后需人工确认效果，必要时追问调整，遵循ACT优化法则循环推进。调整标签位置与主题配色7.2.3代码报错示例与对话式调试

示例脚本说明为讲清报错调试完整流程，将以独立的计算学生平均分Python小程序为例，与前文网页案例无关。

程序报错情况说明在PyCharm运行代码时未正常输出，直接报错中断，需复制完整报错信息找AI咨询。7.2.3代码报错示例与对话式调试

问题解决，这个案例说明，AI在处理报错时通常会做两件事：（1）翻译报错信息把“IndexError:listindexoutofrange”这种技术术语转化成“下标超出范围”这种容易理解的中文解释。（2）定位根因指出具体是哪一行、什么逻辑导致的错误，而不只是简单地把代码改对。项目开发中的AI辅助编程任务3任务3：项目开发中的AI辅助编程

网页编程局限分析体验网页对话式编程全流程，发现其存在明显局限，代码修改与报错处理需人工在网页和PyCharm间反复粘贴。

Agent式编程工具体验切换至Agent式编程工具Cline，体验更高自动化程度的编程操作，它可直接读写项目文件、执行终端命令、理解多文件项目结构。7.3.1Cline的基础操作流程Cline标准使用流程Cline标准使用流程分两阶段：Plan阶段理解需求、规划方案，Act阶段执行操作。7.3.1Cline的基础操作流程网页生成案例演示

Cline模式切换操作先切换到Plan模式查看对应界面输出，再通过右下角切换按钮切换至Act模式查看输出。Cline成果验证展示Act模式下Cline已在项目01文件夹创建index.html，网页实现浅米色背景、居中标题、首行缩进正文的排版效果，符合需求。

Cline提示词

Plan模式下Cline输出7.3.1Cline的基础操作流程案例优势说明与任务2网页对话式编程不同，此案例代码无需人工复制粘贴，全程由Cline在PyCharm内自动完成从需求到文件生成保存的流程

Act模式下Cline输出

网页效果Cline核心优势介绍Cline核心优势：可处理多文件、多层目录项目，还能在终端执行命令完成文件检查等操作。7.3.2多文件项目协作与命令自动执行在Cline中输入提示词如下：7.3.2多文件项目协作与命令自动执行操作步骤说明

模式切换操作指引先切换至Plan模式查看对应Cline输出界面，再通过右下角按钮切换到Act模式查看输出界面。

项目文件生成情况Act模式下Cline在02文件夹下创建css、js、pages三子文件夹及对应文件，还通过tree/F命令检查目录。

项目效果展示说明本次操作涉及的多个文件代码未做展示，仅对网页运行效果进行了呈现。Cline提示词

Plan模式下Cline输出

Act模式下Cline输出7.3.2多文件项目协作与命令自动执行案例价值总结

本案例核心价值在于实现一次指令生成多层目录并自动校验的自动化流程，为网页对话式编程所不及。网页运行效果7.3.3报错自动修复Cline调试能力介绍Cline具备自动发现并修复代码报错的能力，可自行运行代码、读取输出、定位并修复问题，无需人工参与。7.3.3报错自动修复提供代码对照参考

01提供参考对照依据给出选择排序代码的正确版本及运行结果，作为后续排查错误、验证修复效果的对照参考。

02定位代码错误问题指出sort_bug.py文件中仅一处错误：内层循环里min_idx=j被误写为min_idx=i，使找最小值逻辑失效，代码无报错但排序结果错误。Cline操作流程展示1.切换至Plan模式输入提示