使用 Google Antigravity 构建你的第一个 AI 驱动的 Web 应用：飞行追踪器教程
简介：欢迎来到开发者的新纪元
欢迎来到软件开发的新纪元。每一次模型智能的突破都鼓励我们重新思考开发的未来形态，而 Google Antigravity 正是我们对这一挑战的回应。它是一种由 AI 代理驱动的全新软件开发方式，其核心理念是将开发者从繁琐的执行者角色中解放出来，提升为高效的智能代理管理者。你的主要职责不再是逐行编写代码，而是构思解决方案、指导代理、审查产出，并最终自信地交付更高质量的产品。
本教程的目标是引导你这位初学者，从零开始，使用 Antigravity 构建一个功能性的飞行追踪器 Web 应用。在这个过程中，你将建立起对 AI 辅助开发的深刻理解和信心。
通过本教程，你将掌握三个核心技能：
* 高效指令（Prompting）：学习如何编写清晰、明确的指令来启动和指导 AI 代理，确保它准确理解你的意图。
* 并行工作流（Parallel Workflows）：体验如何同时委派多个任务（如 API 研究、Logo 设计和代码实现）给不同的 AI 代理，从而极大地提升开发效率。
* 人机协作（Human-in-the-loop Collaboration）：掌握何时以及如何从“管理者”无缝切换到“开发者”，亲自介入代码，完成从 90% 到 100% 的关键冲刺。
现在，让我们从准备工作开始，为你的第一个 Antigravity 项目打下坚实的基础。
1. 准备工作：设置你的 Antigravity 工作空间
1.1 初次见面与环境配置
首次启动 Antigravity 应用时，你将进入一个简单的引导流程。请根据个人偏好选择界面模式（本教程将使用亮色模式），然后使用你的 Google 账户登录。
在模式选择阶段，请务必选择 “代理辅助开发”（Agent Assisted Development）。这种模式的核心优势在于：它能让 AI 代理自主处理简单任务，仅在关键决策点或遇到难题时寻求你的帮助，从而实现最佳的人机协作效率。
1.2 理解你的新式 IDE：三大核心界面
Antigravity 的工作环境由三个协同工作的主要界面组成，它们共同为你提供了一个无缝的开发体验。
界面名称 (Interface Name) 核心功能 (Core Function) 关键优势 (Key Benefit for Beginners)
代理管理器 (Agent Manager) 在一个统一的界面管理和创建跨所有工作区的代理。 可以在一个地方启动多个后台任务，而无需打断你正在进行的主要工作。
编辑器 (Editor) 编写和修改代码，并包含一个智能的代理侧边栏。当你需要从代理手中接管并进行微调时使用。 这是一个功能齐全的 IDE，具备 AI 驱动的自动补全等功能，帮助你更快地完成编码。
浏览器 (Browser) 一个集成了代理的 Chrome 浏览器，用于自动化测试。 代理可以像真人一样点击、滚动和输入，自动验证它编写的功能是否正常工作，省去你手动测试的麻烦。
1.3 创建项目文件夹
现在，让我们来创建本次教程的项目空间。
1. 点击左侧边栏的“添加新工作区”（add a new workspace）。
2. 选择“打开文件夹”（Open Folder）。
3. 创建一个名为 flight-tracker 的新文件夹并打开它。
你的工作空间已经准备就绪。接下来，我们将见证 Antigravity 的魔力——仅用一个指令启动整个项目。
2. 第一个指令：用一个提示词搭建应用骨架
2.1 编写创世指令 (The Genesis Prompt)
我们将通过一个清晰的自然语言指令来启动我们的飞行追踪器应用。在 Antigravity 中，这就是你与 AI 代理沟通的方式。
为我构建一个 Next.js 的航班查询 Web 应用。用户可以输入航班号，应用将返回航班的开始时间、结束时间、时区、起飞地点和降落地点。暂时使用一个模拟 API 返回匹配的航班列表。将搜索结果显示在表单输入框下方。
这是一个非常有效的初始指令，因为它包含了三个关键元素：
* 技术栈：明确指定使用 Next.js。
* 核心功能：描述了用户交互（输入航班号）和期望的输出（显示航班信息）。
* 初始范围：通过要求使用“模拟 API”，为代理设定了一个清晰、可实现的第一步，避免了初期就陷入外部依赖的复杂性。
2.2 理解代理的“工作日志”：初识“产物” (Artifacts)
为了让你能完全信任代理并了解其工作进展，Antigravity 的代理会通过生成名为**“产物”（Artifacts）**的 Markdown 文件来保持工作过程的透明度。这些文件不只是日志，它们是旨在建立你对代理工作信任的机制，确保你能自信地合并其贡献，而无需数小时的手动审查。
以下是三种最重要的产物及其对你的价值：
* 任务列表 (Task List): 这是代理自己的待办事项清单。你可以随时打开它，查看代理计划执行哪些步骤，以及当前进行到了哪一步，让你对进度了如指掌。
* 实施计划 (Implementation Plan): 在编写任何代码 之前，代理会提交这份计划。它详细说明了代理的研究发现、技术选型以及它打算如何构建应用的具体方案。这是你作为“管理者”的第一个关键审查点。
* 演练报告 (Walkthrough): 任务完成后，代理会提交这份最终报告。它总结了已完成的工作，并提供截图、录屏或命令输出来证明功能已正确实现和验证，让你能快速验收成果。
2.3 审查实施计划
代理接收指令后，会首先进行研究并制定计划。完成后，你会在右侧边栏看到一份“实施计划”产物。点击打开它。
你会看到代理对项目需求的理解，包括它计划创建哪些 UI 组件、如何处理数据以及验证工作的思路。在现阶段，你只需快速浏览，确认代理的理解与你的预期一致。这份计划看起来很棒，所以我们可以直接批准它继续执行。
代理已经开始编码了。现在，让我们看看它是如何像一个真正的测试工程师一样，自己验证工作的。
3. 第一次审查：验证代理的工作成果
3.1 代理的自动化测试
当代理完成代码生成后，它不会直接把任务交还给你。相反，它会自动启动开发服务器，并请求你安装 Antigravity Chrome 扩展。安装完成后，你将亲眼见证 Antigravity 最强大的功能之一：代理驱动的自动化验证。
一个集成的浏览器窗口会自动打开，一个蓝色的小光标在屏幕上自主移动。它会像真人用户一样，在输入框中键入一个测试航班号（如“American Airlines flight 123”），并测试各种有效和无效的状态。
这一功能的核心价值在于：“代理不仅编写代码，还会亲自验证代码，确保交付给你的初步版本是可用的。” 这极大地提升了你对 AI 生成代码的信任度。
3.2 解读演练报告
代理完成自动化测试后，会提示你点击“审查”（Review）按钮，查看最终的“演练报告”。这份报告是你快速验证代理工作质量的最终凭证。它会清晰地总结已实现的功能，并附上它在测试过程中截取的屏幕截图或录屏，作为功能正常的有力证据。
应用的基础版本已经完成并经过了测试。接下来，我们将体验 Antigravity 最强大的功能之一：并行处理多个任务，让你像一个高效的团队领导者一样工作。
4. 并行开发：同时处理研究与设计任务
专业的开发者都知道，上下文切换是生产力最大的消耗。Antigravity 的设计初衷就是让你能将较小的任务委托给后台代理，从而保护你的深度专注时间，用于解决那些真正重要的复杂问题。这就像是“给你的大脑多线程”，让你能专注于一项任务，同时让其他工作在后台稳步推进。
4.1 任务 A - API 研究
我们的应用目前使用的是模拟数据。现在，我们让一个代理去研究如何接入真实的航班数据 API。
查找 Aviation Stack API 的资料。我已经有了一个 API 密钥，如果你想用 curl 命令进行测试，请查找文档，并确保使用 curl 的响应来生成接口。
代理接收任务后，会像一个研究员一样：它会进行谷歌搜索，找到并阅读 API 文档，甚至使用你提供的密钥在终端中运行 curl 命令来获取真实的数据样本。
任务完成后，代理会提交一份研究报告产物。你可以像在 Google 文档中一样审查它，通过高亮文本和留言的方式提供精准的反馈。例如：
1. 高亮 API 密钥相关的部分，留言：“请将我提供的密钥用在 .env.local 文件中。”
2. 高亮代码实现部分，留言：“将这些功能实现在一个 util 文件夹里，以便我之后应用到路由中。暂时不要修改路由。”
4.2 任务 B - AI 生成应用 Logo
在等待 API 研究的同时，我们再启动一个代理来为应用设计 Logo，让它看起来更专业。
为我的应用设计几个不同的 Logo 概念图。我想要一个极简风格的，一个经典风格的，一个明显是日历风格的，以及任何你认为合适的其他风格。我想把它用作应用的 favicon。
这个功能由 Google DeepMind 的 Nano Banana 模型驱动。代理会很快生成 4 个不同风格的 Logo 供你选择。审查后，你可以给出后续指令，比如：
“我非常喜欢这款经典航空风格的 Logo。请将它添加为我的 favicon，并且更新我的网站标题，因为它现在还在使用初始脚本生成的名字。”
你的新指令会被添加为一条“待处理评论”。这意味着代理足够智能，知道何时以及如何将这个新需求在一个逻辑停止点注入其当前的工作流程，而无需你进行微观管理。
两个后台任务都在稳步推进。现在，让我们切换角色，亲自下场编写一些代码，将应用从模拟数据升级到真实数据。
5. 无缝切换：从代理管理者到代码编辑器
5.1 进入编辑器
什么时候应该从“管理”切换到“编码”？答案是：当你想要进行精细的控制，或利用自己的领域知识来完成任务的最后冲刺时。Antigravity 让你可以在这两个角色之间无缝切换。
使用快捷键 command+e 或点击侧边栏的按钮，即可进入功能齐全的 Antigravity 编辑器。
5.2 集成真实 API
后台代理已经为我们准备好了与真实 API 交互的工具函数。现在，我们将在编辑器中完成最后的集成工作。
1. 在文件目录中，找到包含模拟航班逻辑的路由文件（page.tsx）。
2. 删除所有与模拟数据相关的旧代码。
3. 此时，编辑器的 AI 会自动感知上下文，并出现代码建议，提示使用 utils/aviation-stack.ts 中的新工具函数。按下 Tab 键接受它。
4. 再次按下 Tab 键，编辑器会自动为你添加所需的 import 语句，无需手动输入。
5. 在 UI 组件中，将所有使用旧数据类型的地方，通过编辑器的“tab-tab-tab”自动补全功能，快速地将数据类型从 Flight 替换为新的 API 数据类型 AviationStackFlightData。
非常棒！你已经成功地将真实数据接入了应用。现在，让我们来完成最后一个核心功能，为这个项目画上一个完美的句号。
6. 添加点睛之笔：集成谷歌日历
6.1 最后的指令
我们的应用现在可以显示真实的航班数据了。最后一步，我们希望用户能方便地将航班信息添加到自己的日历中。我们再次将这个任务交给代理。
对于每个航班结果，让整个卡片都可以点击，以打开一个包含航班信息（特别是时间和地点）的谷歌日历链接。用浏览器测试这个功能，完成后给我看一份演练报告。
这次，我们可以并排观察代理的工作过程。你会看到代理界面上会显示它的“思考过程”，例如“正在审查可点击项”或“正在映射航班数据到日历参数”，让你对其行为有更直观的了解。
6.2 最终验证
代理完成编码后，会再次启动浏览器进行测试。请注意，当浏览器由代理控制时，窗口会出现一个蓝色的边框。
代理会模拟用户操作：输入航班号 “American Airlines Flight 100”，然后点击搜索到的结果卡片。如果一切顺利，浏览器会成功跳转到一个预先填好了航班起飞时间、降落时间和地点的谷歌日历创建页面。
代理完成验证后，你也可以亲自在浏览器中重复这个操作，确认最终的功能完全符合预期。
我们的飞行追踪器应用现在功能齐全了！在结束之前，让我们完成最后一步，并回顾一下我们学到的知识。
7. 收尾工作与总结
7.1 提交你的工作
在 Antigravity 编辑器中，你可以找到一个“生成提交信息”（generate a commit message）的功能。这不仅仅是一个简单的文本生成器，它是一个“上下文感知”的功能。它会分析你与代理的对话历史、最终的代码变更，并生成一条专业且准确的 Git commit message。
7.2 你的 Antigravity 之旅总结
恭喜你！在短短几分钟内，你从零开始，构建并迭代了一个功能完善的 Web 应用。这展示了与 AI 代理协作的惊人效率。
让我们回顾一下本次教程中最重要的三个核心概念，这将是你未来使用 Antigravity 的基石：
* 指令驱动开发：你学会了通过清晰的自然语言指令来启动和迭代项目，将你的想法直接转化为代理的行动计划。
* 基于“产物”的审查：你掌握了通过审查实施计划和演练报告来管理和验证代理的工作。这是一种建立信任、确保质量的关键机制。
* 人机无缝协作：你体验了在代理管理器、浏览器和代码编辑器之间自由切换，根据任务需求，灵活地扮演“管理者”或“开发者”的角色。
你构建的不仅仅是一个应用，更体验了一种全新的开发者工作方式——通过架构解决方案、管理智能代理，并与 AI 驱动的伙伴共同完成任务的最后冲刺。Antigravity 团队已在全力构建未来。欢迎来到软件开发的未来。
