腾讯云AI代码助手编程挑战赛-【用AI构造AI-打造属于个人的Copilot】

@[腾讯ai代码助手]

概要

• 使用腾讯云ai编程助手辅助编程
• 使用AI构造AI 打造属于个人的Copilot

作品简介

• 腾讯云AI编程助手结合TDesign，为开发者提供了一站式的智能开发解决方案。腾讯云AI编程助手基于混元代码大模型，能够实现代码的智能补全、生成、优化与重构，以及错误检测与修复等功能，支持超过100种编程语言，无缝集成到Visual Studio Code、JetBrains系列IDE等主流开发环境中，极大地提升了开发的便捷性
• 例如，在Vue前端页面的编程或Java的面向对象编程中，AI代码助手都能提供精准的代码补全和建议
• TDesign作为腾讯推出的企业级设计体系，提供了跨平台和跨技术栈的应用构建优势，支持Vue、React及微信小程序等多种前端框架和技术平台，其设计覆盖了颜色、字体、动画、图标、布局以及暗黑模式等方面，旨在降低开发者入门的门槛，提升用户体验
• 通过使用TDesign，开发者可以快速构建风格统一、高质量的界面，无需从零开始设计，从而节省大量时间和精力
• 本次在开发一个AI聊天界面时，腾讯云AI编程助手可以帮助我快速生成和优化代码，提高开发效率。而TDesign则提供了丰富的组件和设计资源，如按钮、输入框、对话气泡等，使得我能够轻松搭建出美观、易用的聊天界面。

实现过程

1.开发环境

VsCode2024，Node16，npm 8

2.开发流程

（1）下载腾讯云ai代码助手

（2）RAG知识库生成/下载提供的Demo

关键技术解析

腾讯AI代码助手快捷键功能详细阐述

（1） 通过快捷键 Ctrl + I 将需要理解的上下文内容添加到对话上下文中

在使用腾讯AI代码助手时，开发者可以通过快捷键 Ctrl + I（Windows）或 ⌘ + ⌃ + I（macOS）快速将当前代码文件的上下文内容添加到对话上下文中。这个功能非常有用，尤其是在需要AI助手理解代码的背景和上下文信息时。具体操作如下：

操作步骤：

• 1打开需要处理的代码文件。
• 2将光标放在需要AI助手理解的代码段附近。
• 3按下 Ctrl + I（Windows）或 ⌘ + ⌃ + I（macOS）快捷键。
  AI助手会自动将当前代码文件的上下文内容添加到对话上下文中，以便更好地理解代码的背景和意图。
• 应用场景：
  当你需要AI助手解释某段代码的工作原理时，可以使用这个快捷键将上下文内容添加到对话中，AI助手会更准确地理解代码的背景，从而提供更详细的解释。
• 具体示例:
  选中 按下Ctrl + I（Windows）
  
  说出这段上下文中你想要的效果即可

（2）使用快捷键 Alt + I 开启内联对话并生成代码

快捷键 Alt + I（Windows）或 Opt + I（macOS）用于开启内联对话，开发者可以通过这个快捷键将想要实现的功能或目的叙述给AI助手，让AI助手生成相应的代码。具体操作如下：

操作步骤：

• 1打开需要处理的代码文件。
• 2将光标放在需要生成代码的位置。
• 3按下 Alt + I（Windows）或 Opt + I（macOS）快捷键。
  AI助手会弹出一个输入框，让你输入具体的指令或描述。
  输入完成后，AI助手会生成相应的代码，并显示在代码编辑器中。
  你可以选择接受或取消生成的代码。
• 应用场景：

当你需要生成一个新的函数或代码段时，可以使用这个快捷键开启内联对话，输入你的需求，AI助手会生成相应的代码。例如，你可以输入“生成一个冒泡排序的函数”，AI助手会生成相应的代码段，你可以选择是否将其插入到代码文件中。

示例：

• 原先给的模板程序运行出来的界面：
  
  我想要的效果：
  [让界面整体层次感更加清晰 各个组件之间有边界感 使得我的界面更加美观 用户的头像和对话框在右边绿色背景 ai的头像和对话框在左边 给对话框设置合适的大小和颜色]
  使用快捷键【alt+i】唤出内联对话:
  

将你想要的效果 说给ai助手让他帮你实现
然后进行生成 然后决定采用哪些：

• 代码生成ing：
  
  生成的代码自行选择保留
  
  最后生成的效果如图所示(代码内容由ai生成自行采纳)：
  

（3）如何从ai中得到自己想要的回复

• 攥写合适的提示词

例如:

• Role: 在vue环境下的CSS界面优化大师
• Background: 用户希望提升网页界面的美观度，同时确保代码的可编译性，并保持原有逻辑不变。
• Profile: 你是一位专业的CSS界面优化大师，拥有丰富的前端开发经验，擅长使用CSS对网页界面进行美化和优化。
• Skills: 你精通CSS选择器、布局技术（如Flexbox和Grid）、响应式设计以及性能优化技巧。
• Goals: 根据用户的描述，对用户的页面布局和样式进行优化，提升页面的美观度，同时确保代码的可编译性，并保持原有逻辑不变。
• Constrains: 优化后的代码必须能够通过编译，且不得改变原有页面的业务逻辑。
• OutputFormat: 优化后的HTML和CSS代码将按照可以直接使用的格式输出，确保用户可以直接复制粘贴使用。
• Workflow:
  1. 分析用户提供的页面代码，理解页面结构和现有样式。
  2. 根据页面的布局和样式需求，提出优化方案。
  3. 应用优化方案，编写或修改CSS代码，同时保持HTML结构的完整性。
  4. 确保优化后的代码可以通过编译，并且页面的业务逻辑保持不变。
  5. 按照给定的输出格式提供完整的代码。
• Initialization: 在第一次对话中，请直接输出以下：您好，我是您的CSS界面优化大师。请提供您需要优化的页面代码，我将根据您的需求进行优化，并保持原有逻辑不变。现在，让我们开始吧！

赛题使用ai开发需求如下：

1.增强点赞点踩的反馈表单

2.扩展对话中代码的样式或对话呈现样式

3.实现主题风格切换

4.实现对话分享，下载对话记录

1.增强点赞点踩的反馈表单
（1）使用理解上下文对话 【ctrl+i】引入上下文
（2）提出需求
<我现在需要 增强我代码中的点赞点踩操作 请你在我点击按钮以后生成一个反馈的表单弹窗 并且布局样式合理 将改动的地方注释出来 区分于源代码 >

生成后的效果如下

个人觉得界面不太美观 于是需要新的需求 让他理解在生成的基础上进行优化

• (3)攥写ai可以理解你需求的提示词

• Role: 代码生成大师
• Background: 用户需要在已有的代码基础上进行修改或添加新的功能，且已知环境中TDesign组件已经可用，无需再次导入。
• Profile: 你是一位经验丰富的软件开发专家，精通多种编程语言和框架，能够迅速理解和修改代码逻辑，同时对TDesign组件有深入的了解和使用经验。
• Skills: 熟练掌握代码编辑、调试和优化技巧，能够准确识别代码中的关键部分并进行有效的修改。具备良好的代码组织和注释习惯，确保代码的可读性和可维护性。
• Goals: 根据用户的需求，对现有代码进行必要的修改或添加新的功能，同时确保代码的稳定性和性能。使用TDesign组件来增强代码的功能和用户体验。
• Constrains: 在修改代码时，必须保持原有代码的结构和逻辑尽可能不变，只在必要时进行修改。所有新增或修改的代码部分都需要进行详细的注释，以便其他开发者理解和维护。
• OutputFormat: 在代码中对改动的部分进行注释，使用清晰、准确的语言描述改动的目的和方法。注释应遵循编程规范，确保代码的整洁和可读性。
• Workflow:
  1. 仔细阅读和理解用户提供的代码和需求说明。
  2. 确定需要修改或添加功能的代码位置。
  3. 使用TDesign组件进行代码的修改或功能添加，并在改动处添加详细的注释。
  4. 测试修改后的代码，确保功能正常且没有引入新的错误。
  5. 提供修改后的代码，并对用户进行必要的说明和指导。
• Examples:
  • 例子1：用户需要在网页中添加一个按钮，点击后弹出一个对话框。

    // 使用TDesign的Button组件和Dialog组件实现按钮点击弹出对话框的功能
    <t-button onClick={handleClick}>点击我</t-button>
    <t-dialog visible={visible} onClose={handleClose}>
      <p>这是一个对话框</p>
    </t-dialog>
    // 定义状态和处理函数
    const [visible, setVisible] = useState(false);
    const handleClick = () => {
      setVisible(true); // 显示对话框
    };
    const handleClose = () => {
      setVisible(false); // 关闭对话框
    };
    

  • 例子2：用户希望在表格中添加筛选功能。

    // 使用TDesign的Table组件的筛选功能
    <t-table columns={columns} data={data} rowKey="id" />
    // 定义表格列和数据
    const columns = [
      {
        title: '姓名',
        colKey: 'name',
        filter: {
          type: 'single-select',
          // 自定义筛选菜单
          menu: <t-select onChange={handleNameFilterChange} />,
        },
      },
      // 其他列定义...
    ];
    const handleNameFilterChange = (value) => {
      // 根据筛选条件更新表格数据
      // ...
    };
    

• Initialization: 在第一次对话中，请直接输出以下：我是代码生成大师，请你述说你的需求吧！

我的输入：
我现在觉得我代码中的 点赞点踩之后弹窗出来的表单界面样式觉得不够美观 我现在有组件TDesign已经应用全局 我需要让他看起来更有层次感 更有边界感 整体布局背景美观 并且弹窗以后希望有一个提示 请你将改动的地方注释出来

• 实现效果：
  
• 结果：
  还是比较令人满意的 知道运用已有的条件进行生成

2.扩展对话中代码的样式或对话呈现样式

文章开始给出的示例中已经实现了该效果
当然如果需要的话还是可以继续修改

3.实现主题风格切换

• (1)因为该需求是对全局上下文 所以建议还是使用添加上下文【ctrl+i】的方式进行代码生成
• (2)前置ai可以理解并且你想要效果的提示词
• (3)对你想要达到的需求 尽量更加细化的输入
  
• 找到你想要的部分并且插入进入你的代码
  

他给我的方案是在全局css的样式中进行一个伪根类的创建全局变量
然后去创建一个根元素替换根类进行切换样式的方法
把你想要的根据他的提示放到相应的位置

实现的效果如下可以 切换为 【暗黑风】

4.实现对话分享，下载对话记录

• (1)输入需求
  
  (2)提取相应的信息插入代码中
  

可以看到完美实现了【分享】功能

（3）将下载对话的代码也放到相应位置

可以看到完美的实现了下载对话记录的功能

下载的文件

5优化布局
我看到最上面的三个按钮的布局以及样式比较普通
于是我决定进行优化
(1)【alt+i】选中该区域代码输入自己想实现的效果

• 结果：
  
• 完美实现想要的效果 并且 直接全部采纳 没有一点多余的操作

6.对代码进行全部评审 对给出的意见进行修改

腾讯云AI代码助手在上述过程中的助力

1. 提供思路
   腾讯云AI代码助手不仅是一个代码生成工具，更是一个智能的开发伙伴。它能够根据开发者的需求，提供多种解决方案和代码实现思路。例如，当开发者不确定如何实现某个功能时，AI代码助手可以通过分析上下文，给出多种可能的实现方式，并解释每种方式的优缺点。这种智能化的建议帮助开发者在短时间内找到最佳的实现路径，避免了在复杂逻辑中迷失方向。

2. 方便快捷
   AI代码助手的集成使得开发过程更加流畅。它能够实时分析代码，提供即时的代码补全、错误检测和优化建议。开发者无需频繁切换窗口或查阅文档，AI助手会在编码过程中自动提供相关的API文档、代码片段和最佳实践。这种无缝的集成大大减少了开发者的认知负担，使得他们能够专注于业务逻辑的实现，而不是琐碎的语法和API细节。

3. 节省大量的代码操作
   AI代码助手通过智能代码补全、自动生成代码片段等功能，显著减少了手动编写代码的工作量。例如，当开发者输入部分代码时，AI助手会通过分析上下文，自动提示可能的代码补全选项。使用Tab键可以快速选择并补全代码，避免了手动输入长串的代码或函数名。此外，AI助手还能自动生成常见的代码结构，如循环、条件判断、函数定义等，进一步加快了开发速度。

4. 内联对话直接修改代码
   AI代码助手支持内联对话功能，开发者可以直接在代码编辑器中与AI进行交互，提出修改需求或询问代码优化建议。AI助手会根据开发者的要求，直接在代码中进行修改或提供修改建议。例如，开发者可以选中一段代码，询问AI助手如何优化或重构，AI助手会立即给出修改后的代码，并解释修改的原因。这种内联对话的方式省去了手动插入代码的烦恼，使得代码修改和优化变得更加高效。

使用说明

到VSCODE 插件下载 腾讯ai代码助手

腾讯云AI代码助手还提供了丰富的快捷键支持，进一步提升了开发效率。以下是一些常用的快捷键及其功能：

Tab：快速补全代码。当AI助手提示代码补全选项时，按下Tab键可以自动补全代码，减少手动输入。

Ctrl + Space：手动触发代码补全。当开发者需要代码提示时，可以按下Ctrl + Space，AI助手会立即显示相关的代码补全选项。

Ctrl + Enter：内联对话。开发者可以在代码编辑器中按下Ctrl + Enter，直接与AI助手进行对话，提出修改需求或询问代码优化建议。

Alt + Enter：快速修复。当AI助手检测到代码中的错误或潜在问题时，按下Alt + Enter可以快速查看修复建议，并一键应用修复。

Ctrl + Shift + F：全局代码搜索。开发者可以按下Ctrl + Shift + F，在整个项目中搜索特定的代码片段或函数，AI助手会提供相关的搜索结果和上下文信息。

建议

• 当你在使用腾讯AI代码助手时，首先要明确自己的需求是全局性的还是局部性的。如果需求是全局性的，比如你正在编写一个大型项目，需要让助手全面了解整个项目的架构和逻辑，那么你可以使用快捷键“Ctrl+I”。通过这个操作，你可以将项目的上下文信息完整地传递给助手，使其能够深入理解项目的整体情况。在提供上下文后，要使用简洁明了且符合助手理解习惯的提示词来表达你想要达成的效果，比如“优化整个项目的性能”“梳理项目中的数据流向”等，然后就可以与助手展开深入的对话，共同探讨如何从全局层面提升项目的质量和效率。

• 而如果是局部性的需求，例如你正在处理代码中的某个特定函数或模块，想要对其进行修改以实现某个具体功能，那么只需使用快捷键“Alt+I”，将这个局部需求告知助手。助手就会精准地聚焦于你所指定的代码部分，直接在代码上进行修改，为你提供针对性的解决方案。在整个编写代码的过程中，腾讯AI代码助手就像一个智能的编程伙伴，它能够实时理解你的代码语义。当你遇到看不懂的代码段落或复杂的逻辑时，可以随时让助手进行代码解释，它会用通俗易懂的语言告诉你这些代码的作用和实现原理，帮助你更好地理解代码，从而更高效地完成编程任务。