基于腾讯云 AI 代码助手的Web端宝可梦图鉴实践记录

目录

• 一、Web端宝可梦图鉴实践流程
• • 1.1、AI 代码助手安装与配置
  • 1.2、需求分析与基本原型
  • 1.3、技术选型和框架搭建
  • 1.4、实践细节
• 二、腾讯云 AI 代码助手使用体验
• • 2.1、获得的帮助与建议
  • 2.2、结语

在编程的世界里，效率和质量是永恒的追求，每一位开发者不断追求的是如何以更快的速度、更高的质量完成代码的编写与调试。另一方面，大型语言模型，凭借其强大的神经网络架构和庞大数据训练，已具有模拟人类的语言理解与创造的能力，而这种能力的突破性进展让AI编程也成为现实。

本篇文章，将介绍使用腾讯云 AI 代码助手开发一款Web端宝可梦图鉴。

一、Web端宝可梦图鉴实践流程

1.1、AI 代码助手安装与配置

本次实践使用到的腾讯云 AI 代码助手是由腾讯云自研的一款开发编程提效辅助工具，其巧妙地以插件形式融入VS Code或JetBrains系列IDE中，在编程中，其可以对 IDE 中的对业务代码进行全面解析、自动补全、快速检查、清晰解释、单元测试、技术咨询。
首先，打开Visual Studio Code工具，点击左侧扩展栏-搜索腾讯云AI代码助手工具，可以看到腾讯云官方为我们已经开发并一直维护这个插件，我们选择Tencent Cloud AI Code Assistan进行安装：

安装成功后，就可以开始使用了，插件主要有左侧对话面板、编辑器内功能面板。左侧对话面板和传统的聊天软件类似，可以回答技术问题、圈选代码解释、单元测试生成、代码修复建议、文档注释生成。而右侧编辑器内则可以实时自动识别 IDE 编辑器中可视范围内的所有代码，并基于代码内容提供补全的代码信息，使开发者在不离开代码编写环境的前提下进行交互。

1.2、需求分析与基本原型

安装好AI代码助手后，接下来我们让腾讯云AI代码助手为我们分析一下Web平台的宝可梦图鉴应用的基本需求：

根据助手的建议，这款图鉴的核心要聚焦于宝可梦信息的全面展示与灵活搜索，首要任务是清晰展示每只宝可梦的基础资料，包括但不限于宝可梦的名称、独特的编号、所属的属性类别以及最重要的图片。

另外表格上方要提供宝可梦的筛选和检索功能，用户可以根据宝可梦的属性进行筛序，可以根据宝可梦的名称进行搜索，当用户点击某个宝可梦的链接或图标时，网页能够展示该宝可梦的详细信息。根据上述需求，项目主界面的简单原型如下：

1.3、技术选型和框架搭建

根据腾讯云AI代码助手的建议，本次项目技术栈选用：Vue3++Vite+TypeScript+Less+Axios，API的话我们直接选择开放的宝可梦api：https://pokeapi.co/

下面打开终端用Vite创建一个初始的Vue项目，然后使用npm安装Axios、Less、Element Plus、Vue Router等相关依赖，并去掉与项目不相关的页面、样式和配置，保留基本页面结构。

1.4、实践细节

创建好项目结构后，接下来我们继续借助腾讯云 AI 代码助手进行核心代码开发工作，首先，我们要设计宝可梦类，包括宝可梦的id、名称、种族、被动、能力值、身高、体重，这里可以写好注释后，直接使用快捷键alit+\，让代码助手将其补全。

在路由的设置中，我们也可以借助腾讯云 AI 代码助手为我们进行相关路由配置，只需要注释写明路由的名称和path路径，CodeWhisperper会自动为我们创建路由项并将component指向相应的组件位置。

在API的设置中，我们同样也可以在注释里表明我们需要一个根据宝可梦种族返回宝可梦列表的API，腾讯云 AI 代码助手会采用Restful风格为我们提示一个规范的函数，并且函数名也很直观：

在开发中，我们实际还遇到需要将服务器返回的JSON格式数据解析为JavaScript对象的工具函数，而现在我们只需要在注释中写明并按下Alt+\，腾讯云 AI 代码助手就能根据设计好的宝可梦类为我们写出解析函数：

另外，腾讯云 AI 代码助手还能对选中的代码片段进行分析和逻辑检查：

完成了宝可梦类的设计、路由的设计、api接口的书写、一些工具函数的书写，剩下的设计交互和样式同样可以采用相同的方法完成，最终的效果如下：

二、腾讯云 AI 代码助手使用体验

2.1、获得的帮助与建议

从工作效率提升的角度来看，腾讯云AI代码助手不仅能够识别并补全常见的代码片段，还能根据上下文预测开发者可能需要的代码结构或函数，极大地加速了编码过程，让开发者能够更专注于业务逻辑的创新与实现。

在错误检测与修复方面，AI代码助手能够即时捕捉代码中的潜在问题，无论是语法错误、逻辑错误还是性能瓶颈，都能迅速给出反馈。这种即时反馈机制不仅帮助开发者避免了后期调试的繁琐，还培养了开发者编写高质量代码的习惯。

在处理复杂项目或团队协作时，AI代码助手的作用更加凸显，通过智能的代码检查功能，AI代码助手能够发现潜在的代码冲突、冗余代码或性能瓶颈，为团队提供宝贵的优化建议。

比较不足的是，目前腾讯云AI代码助手没有提供离线访问的功能。考虑到某些用户可能受限于内网环境以及部分代码工程的敏感性，如果能够允许AI代码助手在无网络时仍能使用部分核心功能，会更加方便。另外，当前腾讯云AI代码助手的历史记录存储条数并没有缓存，重启后无法看到之前的对话记录，这在在处理大型项目或频繁切换代码片段时略显不便。

2.2、结语

总的来说，经过本次实践体验，从个人的角度来讲，腾讯云 AI 代码助手在程序开发中承担了很大一部分同质化的繁杂工作。只需用自然语言描述你的意图和需求，它就能协助完成从需求分析到代码编写，再到快速诊断和功能迭代的全过程。

这种能力使得原本只有程序员才能理解的代码，现在变得易于大众理解，大大降低了编程的入门门槛。无论是编程新手还是资深开发者，都可以通过与 AI 代码助手的互动，显著提高自己的日常生产力。