使用 AI 结对编程构建应用程序：我们 Sprint 的经验教训

作为开发人员，我们一直在寻找提高生产力和简化工作流程的方法。随着人工智能的最新进展（并且我坚信这些技术将改变游戏规则），我决定在现实世界的开发场景中测试这些工具。

• 我的目标：在短短 7 小时内构建一个全栈人工智能驱动的食物追踪应用程序 PoC。

• 结果：效果非常好！但并非没有挑战。

这是我作为开发伙伴所学到的关于使用 AI 的知识。

项目

目标雄心勃勃但重点突出：创建一款移动应用程序，让用户拍摄食物并使用人工智能识别自动将其记录到食物追踪器中。技术堆栈包括我的首选：Quasar Framework（VueJS 框架）、Google Firebase 和 Capacitor（移动开发框架），以及用于 AI 推理的 Google Gemini 2.0 Flash。

没什么特别花哨的，但足够复杂来测试人工智能辅助。

人工智能工具

我使用了人工智能工具的组合来协助项目的不同方面：

1. ChatGPT（o1 模型）：用于高层规划、需求收集和一般指导
2. Claude 3.5 Sonnet via WindSurf/Cascade：对于代码生成和特定的开发任务，我使用了 Codeium 的一个名为 WindSurf 的工具。它本质上是一个基于 Visual Studio Code 构建的 IDE，具有 A.I.内置代码编写器。它可以直接访问文件，并且可以通过版本控制快速编写和编辑整个文件。
3. Google Gemini 2.0 Flash：用于图像识别和食物分类。这个型号超级强大而且超级便宜。

“AI 作为开发实习生”的方法

我获得的最有价值的见解之一是将人工智能视为初级开发人员或实习生。这种思维模式完全改变了我处理合作的方式。正如您不会将整个项目放在新实习生的办公桌上并期望完美的结果一样，我学会了：

• 明确说明
• 将任务分解为可管理的块
• 审查输出并提供反馈
• 不要一次期待太多
• 需要时给予指导和指示

这种方法带来了更好的回报，并且比将人工智能视为“无所不知”或“完全不可靠”更有效。

什么效果好

规划和要求

事实证明，人工智能在规划阶段非常有帮助。我从一个粗略的项目大纲开始，并使用迭代提示来完善它。例如，我最初的提示之一是：

Can you help me plan out making the following app in 7 hours:

<information about the app>

Detail out how long I should spend on each section, 
and revise my overall plan as needed.

这引发了反复讨论，帮助明确了项目范围和时间表，从而制定了更加现实和详细的计划。

文档

人工智能工具擅长生成和维护文档。它可以快速创建全面的 Markdown 文件，并随着项目的发展不断更新。这为实际开发工作腾出了宝贵的时间。

迭代开发

将开发分解为更小、更有针对性的提示被证明是非常有效的。我没有尝试立即生成整个组件，而是使用了一系列提示，每个提示都建立在前一个提示的基础上。例如：

1. 首先，设置 Firebase 后端基础设施
2. 然后，构建前端样板
3. 接下来是相机捕捉屏幕等特定功能
4. 最后，添加数据处理和显示功能

我发现的一个巧妙的技巧是让 A.I.记录进度和后续步骤，以便在提示之间可以有一些参考内容。由于我使用的是 WindSurf，因此我可以使用“主提示”来保持对话继续进行。主提示将指示人工智能。在编写代码时回顾笔记并添加内容。

错误修复和后期开发

WindSurf 的另一个亮点是错误修复和开发后任务。

测试我的应用程序并注意到一些错误后，我将列表传递给 WindSurf，它可以快速识别和纠正问题，甚至生成测试用例以确保修复有效。这节省了我大量的时间和精力。

我有以下错误列表，只有少数情况我需要手动修复它们：

Can you help me plan out making the following app in 7 hours:

<information about the app>

Detail out how long I should spend on each section, 
and revise my overall plan as needed.

• [x] BUG>拍照并点击取消后相机一片空白（网页实现）
• [x] BUG> 在检测到的食物视图中如果没有检测到食物，列表为空白，这很好，但我们应该显示某种图标和文本来解释没有食物被检测到。添加或检测到
• [x] BUG> 在“检测到的食物”视图中，最好将每个项目（文本标题、置信度、删除按钮、选择匹配的食物下拉列表）更好地分组以清楚地表明所有这些元素都是同一食品检测的一部分。这可以通过 q 卡、一些更好的样式或其他方式来完成
• [ * ] BUG> 在“检测到的食物”视图中，尝试打开仅通过搜索添加的内容（而不是通过相机添加的项目）的下拉列表时，“选择匹配食物”下拉列表无法正确重新打开)
• [x] BUG> 在“检测到的食物”视图中，“取消”按钮应让用户返回仪表板 如果输入为空，则 debounceSearch 不应触发
• [-] 功能>参赛作品提交（后端） - 获取IMG，并调整大小、裁剪、压缩等，使图像很好地适合128*128的正方形。为图像创建多种尺寸，并在提交记录中添加图像链接（旁边是imageUrl）
• [x] 功能> 仪表板 - 显示每个捕获的膳食条目的 IMG，加载适当的大小
• [x] 功能> 添加查看餐食页面 ->显示所有详细信息、图表和内容
• [x] 功能> 添加编辑膳食功能 ->从相机页面视图中带回模态，但仅使用模态。不要启动相机。
• [x] 功能> 添加删除餐食功能
• [x] 功能>历史查看餐食：能够按天查看所有餐食条目，分页。使用类星体时间轴 ->菜单中有“用餐”按钮，请转到此页面。此页面应显示与 IndexPage.vue 上的膳食条目相同类型的卡片
• [x] 功能>历史查看水：能够查看所有水条目，分页，按天，使用类星体时间线 ->菜单中有“水”按钮，请转到此页面。此页面应显示与 IndexPage.vue
上的水条目显示的相同类型的卡片
• [x] BUG>水历史编辑不起作用
• [x] BUG>水历史数据很奇怪

挑战和陷阱

并非一切都一帆风顺。出现了一些关键挑战：

文件编辑问题

我在文件修改方面发现了一些限制：

• 打开的文件有时看似被 WindSurf 锁定/变得不可编辑
• 较长的对话绝对会降低代码编辑的质量

注意：在撰写本文时，文件锁定/归档编辑失败的错误似乎已在最新版本的 WindSurf 中修复。

上下文管理

人工智能辅助的质量在较长的对话中会下降。我学会了为新组件开始新的对话并提供简洁的上下文，而不是试图维持一个漫长的会话。

随着代码变得越来越长、越来越复杂，人工智能很难跟上。我必须将任务分解为更小、更易于管理的块以保持质量，或者必须提供大量细节和上下文以保持 AI 正常运行。

偏离轨道意味着删除功能、删除相关代码，或者有时完全构建错误的东西。这是一个很大的时间消耗，我必须非常小心地让人工智能保持在正轨上，或者决定手动编码。

知道何时手动编码

有时，自己做会更快。学会识别这些时刻可以节省大量时间并减少挫败感。正如我的开发日志中所述：“当它工作时，它工作得很好。当它不工作时，它可能会浪费时间。”

出现的最佳实践

1. Git 频繁提交：在让 AI 做出重大更改之前，提交您当前的状态。如果出现问题，这可以提供简单的后备方案。

2. 准备样板代码：在使用 AI 辅助之前设置项目结构和基本配置。就我而言，这意味着：

   • 设置 Quasar/Vue CLI
   • 配置 Firebase CLI 和组件
   • 建立基本项目结构

3. 清晰详细的提示：尽可能具体地表达您的要求。包括相关背景和示例。在需求和设计阶段花费尽可能多的时间，并提供尽可能多的细节。这些注释和指导不仅可以帮助您更好地执行项目，还可以极大地提高人工智能生成的代码的质量。

4. 迭代反馈：毫不犹豫地纠正或指导人工智能。例如，当我收到与要求不太相符的输出时，我提供了具体的反馈：
   

Can you help me plan out making the following app in 7 hours:

<information about the app>

Detail out how long I should spend on each section, 
and revise my overall plan as needed.

这种具体的反馈通常会带来快速、准确的纠正。

判决

使用人工智能绝对加速了开发。虽然需要指导和偶尔的纠正，但 ChatGPT 和 Claude 以及 WindSurf 的结合使我比在同一时间范围内单独取得的进步要大得多。

也就是说，成功需要了解这些工具的功能和局限性。关键是在人工智能协助和人类专业知识之间找到适当的平衡，充分发挥各自的优势。

期待

这个实验表明，未来人工智能工具将成为开发工作流程中不可或缺的一部分——目前，不是取代开发人员，而是增强他们的能力。关键是学习有效地使用这些工具，了解它们的优点和局限性，并开发能够最大限度地发挥其优势并同时最大限度地减少其缺点的工作流程。

对于有兴趣将 AI 融入其工作流程的开发人员，我建议从小处开始，建立清晰的交互模式，并随着您对 AI 的功能和局限性更加熟悉而逐渐扩大 AI 的作用。

这些工具处于初级开发人员的水平，很快有了足够的训练数据和迭代，他们将能够做更多的事情。我可以看到这些工具最终编写整个应用程序并处理大部分开发过程。在模型能够模拟高级开发人员之前，我们仍然需要人工监督和指导。

优势：

• 文档：生成和维护文档
• 小错误修复/故障排除：识别和纠正错误
• 单元测试：生成测试用例并确保代码质量
• 代码生成/小组件：编写样板代码和基本组件以帮助您入门
• 规划和需求收集：概述项目范围和时间表
• 基础设施设置：配置基本项目结构和设置，包括 Terraform、Dockerfile 等
• 快速学习和原型生成：快速学习新框架并生成原型

弱点：

• 复杂逻辑：处理复杂的业务逻辑或复杂的算法
• 设计和用户体验：创建具有视觉吸引力的界面或用户体验
• 编写更大的组件：端到端地编写复杂的模块或更大的组件
• 上下文/记忆：在长时间对话或跨多个组件中维护上下文
• 复杂调试：解决复杂问题或边缘情况，通常需要指导才能发挥作用
• 了解最新技术：跟上最新的框架、库和最佳实践

我很高兴看到这项技术的发展方向以及它将如何塑造软件开发的未来。

图片！！！

以下是我在 7 小时内构建的应用程序的一些快速屏幕截图。虽然并不完美，但这是一个坚实的开始！

（用相机捕捉食物）

（将图像发送给AI进行食物识别）

（查看结果 - 将食物添加到跟踪器）

（确认食物入境）

（仪表板视图）

（食物入口视图）

无耻但相关的插件：

虽然我仍在开发本文中提到的食品应用程序，但我能够使用 WindSurf 和 A​​.I. 快速完成另一个项目

如果您对人工智能驱动的 Git CLI 帮助程序感兴趣，以便更轻松地维护提交消息和发行说明，请查看 eGit

以上是使用 AI 结对编程构建应用程序：我们 Sprint 的经验教训的详细内容。更多信息请关注PHP中文网其他相关文章！