HTML CSS3前端实例教程 阅读

·PAGE18··PAGE19··PAGE1·单元12AI辅助编程【学习导读】当前，AI编程正处于快速发展与广泛应用的重要阶段，它借助大语言模型（LLM）和代码理解技术，重新定义了软件开发的效率与模式，成为连接人类创意与机器执行的核心桥梁。如今的AI编程工具依托海量开源代码训练的模型，能实现自然语言转代码、代码补全、逻辑优化、错误修复等核心功能，成为开发者不可或缺的伙伴，让我们共同探索编程新范式，开启智能编程新篇章。【学习目标】知识目标了解AI辅助编程的概念。了解常用的AI辅助编程工具。了解AI编程的优势和挑战。了解AI编程助手—GitHubCopilot。能力目标1.能够熟悉AI辅助编程的概念。2.能够了解常用的AI辅助编程工具。3.能够理解AI编程优缺点。4.能够熟练使用GitHubCopilot辅助编程。素质目标培养学生动手能力。培养学生的探索精神。培养学生逻辑思维能力。【相关知识】12.1什么是AI辅助编程AI辅助编程是指利用人工智能技术来辅助或增强传统编程过程的方法，通过集成机器学习、自然语言处理、计算机视觉等AI技术，帮助开发者在编写、审查、优化代码的过程中提高效率和质量的一种编程方式。例如，当业余厨师如果准备一道复杂的菜肴时，需要按照食谱的步骤来操作。但食谱上的描述有时可能不够详细，或者厨师可能对某些步骤不太理解。这时，如果有一个智能的烹饪助手（类似于AI辅助编程工具），它就能帮助厨师更好地完成这道菜。这个智能烹饪助手可以完成以下工作。理解需求：当告诉助手你想做某道菜时，它能够理解你的意图，并提供相应的食谱。提供详细的步骤：食谱上的描述可能不够详细，但助手可以提供每一步的详细指导，包括所需的食材、工具、烹饪时间等。检查你的操作：在烹饪的过程中，助手可以实时监控操作，检查是否有错误或遗漏的步骤，并及时提醒。提供个性化的建议：根据口味偏好和烹饪水平，助手可以提供个性化的烹饪建议，让菜肴更加符合期望。这个例子中的智能烹饪助手，就类似于AI辅助编程工具在编程过程中的作用。它能够理解开发者的需求，提供详细的编程指导，检查代码中的错误，并为开发者提供个性化的建议，从而提高编程的效率和质量。12.2AI辅助编程工具AI辅助编程工具众多，包括通义灵码、CodeGeeX、GitHubCopilot、Tabnine等。这些工具通过智能代码补全、生成、解释等功能，显著提升了编程效率与质量。通义灵码能提供多语言支持及智能问答；CodeGeeX强调代码生成与翻译；GitHubCopilot在代码补全与修正上表现优异；Tabnine则利用深度学习实现高精度补全，这些工具各有特色，共同推动编程智能化发展。12.2.1工具介绍现在市面上AI辅助编程工具众多，下面介绍一下通义灵码、CodeGeexX、GitHubCopilot和TabNine等常用工具的功能。1.通义灵码通义灵码是阿里云推出的一款基于大模型的智能编码助手，旨在提高编程效率，支持多种编程语言和IDE。主要功能如下。（1）行级/函数级实时续写：根据当前语法和跨文件的代码上下文，实时生成建议代码。（2）自然语言生成代码：通过自然语言描述功能需求，自动生成代码。（3）单元测试生成：支持多种测试框架的单元测试代码生成。（4）代码注释生成：自动生成方法注释及行间注释。（5）代码解释与研发智能问答：提供代码解释和智能问答功能。语言支持：支持Java、Python、Go、JavaScript、TypeScript、C/C++等多种主流编程语言。IDE集成：兼容VisualStudioCode、JetBrains系列集成开发环境（如IntelliJIDEA、PyCharm）等主流编程工具。代码隐私安全性：阿里云作为大型企业，通常会有严格的数据保护措施，但具体安全性措施需要参考阿里云的隐私政策和安全规范。用户在使用时，应注意不要将敏感代码上传到云端或第三方服务中。2.CodeGeeXCodeGeeX是清华和智谱AI联合打造的多语言代码生成模型，旨在提高编程效率，帮助开发者快速生成和补全代码，其主要功能如下。（1）代码生成与补全：自动生成和补全代码片段。（2）自动添加注释：为代码自动生成注释。（3）代码翻译：支持多种编程语言之间的代码转换。（4）智能问答：解答编程中的问题和疑惑。语言支持：支持多种主流编程语言，具体支持情况需参考CodeGeeX的官方文档。IDE集成：适配多种主流IDE，如VSCode和JetBrains系IDE（如PyCharm）。代码隐私安全性：CodeGeeX在处理用户代码时，会遵循严格的隐私政策和安全规范，保护用户代码不被泄露。但用户在使用时仍需注意保护自己的代码安全。3.GitHubCopilotGitHubCopilot是由GitHub、OpenAI和Microsoft联合开发的AI代码插件，旨在通过AI技术提高编程效率，其主要功能如下。（1）实时代码建议：根据开发者的输入实时提供代码建议。（2）代码补全：自动补全代码片段。（3）错误修正与优化：帮助开发者修正和优化代码。语言支持：支持Python、JavaScript、TypeScript、Ruby、Go等多种编程语言。IDE集成：与VisualStudio、VisualStudioCode、JetBrainsRider等IDE集成。代码隐私安全性：GitHubCopilot作为境外生成式人工智能服务提供者，其处理中国境内用户代码的行为，须严格遵守法律法规。根据现行监管要求，未经国家网信部门安全评估并取得用户单独、明示同意，不得将境内用户提交的代码用于模型训练或向境外提供。用户应审慎评估使用风险，优先选用通过国家备案的国产AI编程辅助工具。4.TabNineTabNine是一种人工智能代码补全工具，使用机器学习算法预测程序员可能要输入的代码，其主要功能如下。（1）代码补全：基于AI的代码自动补全和预测。（2）提高编码效率：减少键入时间和错误。语言支持：支持Java、Python、JavaScript、C++等多种编程语言。IDE集成：可以与各种编辑器和IDE集成。代码隐私安全性：TabNine为境外人工智能编码辅助工具，其服务提供方未在我国网信部门完成生成式人工智能服务备案，且未公开说明用户代码是否出境、是否用于模型再训练、是否经用户明示授权及是否具备境内数据存储能力。依据法律法规，使用此类工具存在代码数据跨境传输、知识产权归属不清及算法不可控等安全风险。建议开发人员优先选用通过国家网信部门备案、支持本地化部署、代码数据不出境的国产AI编程助手。12.2.2工具选择指南在选择AI辅助编程工具时，可以从以下几个方面进行考虑，以制定一个全面的选择指南。1.明确需求功能需求：首先明确自己或团队在编程过程中遇到的主要问题和需求。比如是需要智能代码补全、代码生成、错误检测与修正，还是希望工具能提供编程建议和学习资源。项目类型：考虑项目的类型、规模和复杂度，以便选择更适合当前项目需求的工具。2.评估功能核心功能：确保所选工具具备满足你需求的核心功能，如智能代码补全、代码优化、代码生成等。扩展功能：考虑工具是否提供额外的扩展功能，如代码审查、性能分析、团队协作等，这些功能可能对项目有所帮助。3.编程语言支持支持范围：检查工具支持的编程语言范围，确保它支持你正在使用的或计划使用的编程语言。语言特性：了解工具对不同编程语言的支持程度，包括是否支持特定语言的高级特性或库。4.IDE集成兼容性：确保所选工具能够与你常用的集成开发环境（IDE）无缝集成，以提高开发效率。插件与扩展：了解工具是否提供IDE插件或扩展，以便在熟悉的环境中直接使用其功能。5.易用性与稳定性用户界面：评估工具的用户界面是否直观易用，是否提供足够的帮助文档和教程。稳定性：了解工具的稳定性和可靠性，包括其更新频率、修复速度以及用户反馈。6.代码隐私与安全数据保护：确认工具如何处理用户的代码数据，包括存储、传输和加密方式。隐私政策：需认真阅读本工具的隐私政策，确认其对用户提交的代码内容等开发数据的收集、存储、使用及保护措施符合国家数据安全与个人信息保护相关法律法规要求。7.成本与性价比定价模式：了解工具的定价模式和费用结构，包括是否提供免费试用、按需付费或订阅服务等选项。性价比：综合考虑工具的功能、性能、易用性和成本等因素，评估其性价比是否满足你的需求。8.社区与技术支持社区活跃度：查看工具的社区论坛、GitHub仓库等地方的用户活跃度，了解其他用户的反馈和经验。技术支持：了解工具提供商是否提供技术支持和客户服务，以便在遇到问题时能够得到及时解决。下面以GitHubCopilot为例，它是一个广受欢迎的AI辅助编程工具，具有以下优点。（1）功能强大：提供智能代码补全、代码生成、代码解释和调试建议等功能。（2）广泛支持：支持多种编程语言，包括Python、JavaScript、TypeScript等。（3）无缝集成：与VisualStudioCode等主流IDE无缝集成，提供流畅的开发体验。（4）稳定性高：基于开源社区广泛验证的技术架构，经长期迭代优化，具备良好的运行稳定性。（5）社区活跃：拥有庞大的用户群体和活跃的社区论坛，用户可以获得丰富的资源和支持。综上所述，选择AI辅助编程工具时应综合考虑以上各个方面因素，并根据自身需求和实际情况做出明智的选择。12.3AI辅助编程的优势与挑战AI辅助编程在提升编程效率、提高代码质量、降低编程门槛和推动技术创新等方面具有显著优势，但同时也面临着代码质量不确定性、适用性限制、人机协同挑战、数据安全与隐私保护以及知识产权与法律风险等挑战。为了充分发挥AI辅助编程的潜力，需要不断优化算法、提高适用性和加强数据安全管理等方面的努力。AI辅助编程的优势包括提升编程效率、提高代码质量、降低编程门槛、推动技术创新，详细说明如下。提升编程效率自动化代码生成：AI能够根据开发者的输入和上下文，自动生成代码片段，减少重复性的编码工作。这大大节省了开发者的时间，使他们能够更专注于解决复杂问题和进行创造性思考。智能代码补全：AI技术能够实时分析开发者的代码输入，提供智能的代码补全建议，提高编码速度和准确性。代码优化和重构：AI能够理解代码的逻辑和结构，提出优化和重构建议，帮助开发者编写更高效、更可维护的代码。提高代码质量错误检测与修正：AI能够在代码编写过程中实时检测潜在的错误和漏洞，甚至在代码执行前就能预测问题，从而避免常见的编程错误。智能代码审查：AI能够进行自动化的代码审查，发现潜在的代码质量问题和安全漏洞，确保代码的健壮性和安全性。降低编程门槛自然语言编程：AI使得非专业编程人员也能通过自然语言指令来实现特定功能的开发，降低了编程的门槛，促进了技术普及和创新。简化编程复杂性：AI能够将复杂的编程任务分解成更简单的子任务，使编程变得更加易于掌握和操作。推动技术创新新算法与工具：AI的引入推动了编程语言、框架及工具的革新，加速了新技术的研发与应用。创新思维：AI辅助编程解放了开发者的创造力，使他们能够将更多精力投入到创新和技术探索中。AI辅助编程的挑战包括代码质量的不确定性、适用性的限制、人机协同的挑战、数据安全与隐私保护、知识产权与法律风险。代码质量的不确定性算法局限性：当前AI算法在代码生成任务中仍处于发展阶段，其输出质量受训练数据、提示工程及任务复杂度等因素影响，可能存在与行业最佳实践存在偏差的情形，开发者需结合人工审查与测试进行必要验证。严格审查与测试：开发者需要对AI生成的代码进行严格审查和测试，以确保其质量和稳定性。适用性的限制业务场景差异：不同项目和业务场景的需求差异可能导致AI生成的代码适用性受限。特别是在处理复杂业务逻辑和特定需求时，AI的适应性可能不足。领域专家参与：为了提高AI算法的适应性，可能需要领域专家和具有丰富经验的开发者对生成的代码进行调整和优化。人机协同的挑战理解差异：开发者需要充分理解AI生成的代码，进行审查和优化；同时，AI算法也需要了解开发者的需求和意图，以生成符合要求的代码。这要求实现良好的人机协同。交互体验：改善开发者和AI算法之间的交互体验，提高合作效率和质量，是一个持续优化的过程。数据安全与隐私保护数据泄露风险：AI在训练过程中需要处理大量数据，这些数据可能包含敏感信息。一旦泄露或被滥用，将对企业和个人造成重大损失。隐私保护：采取多层加密和权限控制等措施保护数据安全，降低数据泄露的风险。知识产权与法律风险专利纠纷：AI生成的代码可能涉及专利技术和知识产权，需要在使用前进行严格的知识产权审核和风险评估。法律协议：与AI算法的提供方签订相关协议和合同，明确知识产权的归属和使用范围，以规避潜在的法律风险。12.4AI编程助手—GitHubCopilotGitHubCopilot（以下简称Copilot）是由GitHub和OpenAI联合开发的AI编码助手，是一款集成了先进人工智能技术的编程辅助工具，专为开发者设计。它能够在编程过程中实时分析上下文，智能预测并自动生成代码片段，极大提升编码效率。通过提供精准的代码补全、错误诊断及修正建议，Copilot不仅加速了开发流程，还促进了代码质量的优化。由于本书使用VSCode作为编辑器，且VSCode（建议版本1.96.1或更高）默认支持并可启用GitHubCopilot（AI编程助手），因此将其作为编程辅助工具。12.4.1登录账号Copilot登录账号后即可使用，下面介绍一下在VSCode中使用Copilot的方法。（1）打开VSCode编辑器，在顶部单击Copilot图标，打开Copilot聊天窗口，如图1.1和图1.2所示。图1.1Copilot图标图1.2Copilot聊天窗口在聊天窗口中输入“你好”并回车（或点击确认图标），如图1.3所示。此时VSCode会弹出提示登录窗口，如图1.4所示。单击【ContinuewithGitHub】按钮后，系统默认在浏览器中打开GitHub登录页面，如图1.5所示。图1.3在Copilot聊天窗口中输入“你好”图1.4VSCode中提示登录Copilot的弹窗图1.5登录Copilot的网页在网页中输入GitHub的用户名和密码后单击【Signin】按钮完成登录，登录成功后会再次跳转回VSCode编辑器中，此时Copilot处于登录状态，可响应用户提问，如图1.6所示。图1.6Copilot登录成功12.4.2使用工具完成“制作购物网站首页”项目安装完成Copilot插件并且登录后，就可以使用Copilot来辅助编程，能够自动补全语法结构、表达式、变量名等，并提供代码注释解释和自动调试功能。此外，Copilot还能根据代码上下文和注释，推荐相应的解决方案和代码片段，支持错误检测与修正，优化代码结构，甚至生成新代码。它兼容多种编程语言，如Python、JavaScript等，是开发者编写高质量代码的强大辅助工具。下面我们使用Copilot从0到1实现商业案例“制作购物网站首页”项目。1.创建文件夹和文件在Copilot聊天窗口中输入提示词—“创建仿写淘宝首页文件夹，在文件夹中创建imgs文件夹，以及创建index.js、style.css，index.html文件分别用来编写Javascript代码、css代码和html代码，图片文件放在imgs文件夹中”并按回车键执行命令，如图1.7所示。此时Copilot开始准备创建，此时单击【CreateWorkspace】按钮，在弹出的对话框中选择目标目录，如图1.8所示。图1.7让Copilot创建文件夹和文件图1.8选择创建目录选择好目录后，单击【SelectasPartentFolder】按钮，系统随即自动完成项目结构初始化，如图1.9所示。项目结构初始化完成后，VSCode将弹出对话框，提示用户在当前编辑器中打开该项目文件夹，如图1.10所示；用户确认后，单击【Open】按钮即可加载项目。Copilot创建的文件夹和文件如图1.11所示。注意：打开后如果发现Copilot创建的文件夹和文件名不对，可以手动调整。图1.9选择项目目录图1.10选择项目目录图1.11Copilot创建的文件夹和文件2.自动生成代码双击商业案例中的index.html文件，在浏览器中打开网页，然后使用微信、QQ等应用程序内置的截图功能截取网页完整图像，如图1.12所示；点击Copilot聊天窗口上方的AddContext按钮添加附件，如图1.13所示；接着VSCode会弹出文件选择对话框，如图1.14所示；点击ImagefromClipboard按钮，系统将自动把截图作为附件添加至Copilot聊天窗口中，如图1.15所示。图1.12商业案例网页截图图1.13添加Copilot附件图1.15成功添加Copilot附件图1.14VSCode选择Copilot上下文选项接着在Copilot聊天窗口中输入“按照附件图片帮我完善样式”并按下回车键执行命令，此时Copilot会根据图片的效果生成代码，如图1.15所示。图1.15Copilot生成的index.html代码3.应用index.html代码在VSCode编辑区域打开index.html窗口，等待Copilot代码生成完成后将鼠标悬浮在在Copilot聊天窗口中的index.html标题上，会出现几个图标，如图1.16所示。单击第一个图标，确认应用代码；此时VSCode将弹出“选择应用到哪个文件”的对话框，单击Activeeditor‘index.html’选项将代码应用到index.html文件中，如图1.17所示。图1.16Copilot应用代码图标图1.17Copilo选择应用代码的文件此时，Copilot会将生成的代码应用到index.html文件中，并标记出与原文件代码的差异：红色区域表示index.html文件中原有的代码，绿色区域表示Copilot生成的代码（如图1.18）。单击【Keep】按钮，即可将Copilot生成的代码应用至index.html文件，覆盖原有内容。图1.18Copilo生成的html代码和之前代码的对比4.应用style.css代码Copilo聊天窗口生成了style.css的代码。单击VSCode中的style.css文件，在VSCode编辑窗口中打开该文件；同时将鼠标悬浮在代码区域，单击ApplyinEditor按钮（如图1.19所示）。此时，VSCode弹出‘选择应用到哪个文件’的选项，单击【Activeeditor“style.css”】选项，将代码应用到style.css文件中（如图1.20所示）。图1.19准备应用Copilot生成的style.css代码图1.20Copilo选择应用代码的文件此时Copilot会将生成的代码应用到style.css文件中，并标记出与原文件代码的差异：红色区域表示style.css文件中原有的代码，绿色区域表示Copilot生成的代码，如图1.21所示。单击【Keep】按钮，即可将Copilot生成的代码应用至style.css文件，覆盖原有内容。图1.21Copilo生成的css代码和之前代码的对比5.引入图片由于Copilo不具备图像生成功能，因此index.html中<img>标签的src属性初始路径为占位符。请将参考设计稿所附imgs目录下的图片资源复制至本项目img目录，并同步更新index.html中所有<img>标签的src属性值，确保其指向正确的本地图片路径，具体操作参见图1.22和图1.23。图1.22Copilo生成的图片路径图1.23修改成新的图片途径6.预览页面效果修改完成后单击index.html文件在网页中打开，预览效果，如图1.24所示。从图中可以发现Copilot初步完成了页面的布局和样式，显著减少了前端编码工作量。图1.24页面初步效果7.优化细节Copilot目前只完成了基本的页面布局，还有很多细节不够完善，可进一步调整和优化，例如在对话框中继续输入“进一步完善页面样式，网页居中显示，商品一行展示3个，轮播图多添加几张并能自己滚动，顶部搜索区域根据效果图样式调整”，如图1.25所示。