1. 概览
如今，使用 AI 构建应用从何处着手？对于我们大多数人来说，这通常始于一个简单的问题：“我能否快速为我一直在思考的问题设计原型解决方案？”。这正是 Google AI Studio 的用武之地。您可以在这里快速设计任何原型。在此 Codelab 中，我们将使用 Vibe 编码构建一个简单的 Web 应用，并将其部署到 Cloud Run。
构建内容
准备好编写代码来打造 Web 应用并让其他人试用该应用了吗？我们将创建一个 Web 应用并将其部署到 Cloud Run，而这一切都只需使用 AI Studio 即可完成。在本实验中，您将：
- 使用 Vibe 编码构建简单的 Web 应用
- 测试应用是否按预期运行
- 在 Cloud Run 上部署应用
要求
2. 准备工作
- 在 Google Cloud Console 的项目选择器页面上，选择或创建一个 Google Cloud 项目。
- 确保您的 Cloud 项目已启用结算功能。了解如何检查项目是否已启用结算功能。
- 如果您有兑换赠金的链接，可以按照此处的兑换说明进行操作。
3. 原型
前往 Google AI Studio。开始输入提示，描述您想要构建的应用。我的提示如下：
Create a formal looking frontend application that has two buttons: "Snowflakes" and "Balloons". If the user clicks on the "Snowflakes" button, snowflakes of medium size should start falling on the screen from top to bottom for 5 seconds. If the user clicks on the "Balloons" button, balloons of medium size should start floating from the bottom of the screen and float to the top for 5 seconds.
选择所需型号。在此示例中，我们使用的是 Gemini 3 Pro 预览版。点击构建按钮。
根据这一简单描述，AI Studio 将构建一个与您提供的描述完全匹配的 Web 应用。生成应用需要 2-3 分钟。
如果您发现应用存在任何问题，可以随时提供其他提示来纠正应用的行为。例如，将雪花的大小增加到当前大小的两倍。
请参阅下方生成的应用快照：
4. 部署到 Cloud Run
现在，应用已准备就绪，接下来我们将其部署到 Cloud Run。
- 点击 AI Studio 页面右上角类似火箭的按钮。当鼠标悬停在该按钮上时，按钮会显示“部署应用”。
- 系统随即会打开弹出式窗口“在 Google Cloud 上部署应用”。
- 点击选择 Cloud 项目下拉菜单。
- 从下拉菜单中选择项目。如果您无法在下拉菜单中找到自己的项目，请点击导入项目，然后从导入项目窗格中选择相应项目。
- 选择项目后，系统会验证该项目是否已启用结算功能。由于我们在初始步骤中已将结算账号关联到项目，因此此验证将通过。
- 点击部署应用按钮，然后等待应用部署到 Cloud Run。
请注意，Cloud Run 服务名称将自动生成。
- 部署应该会在几分钟内完成，然后您会获得应用网址。点击该网址，您就可以看到已部署的 Web 应用。
5. 清理
为避免系统因本博文中使用的资源向您的 Google Cloud 账号收取费用，请按照以下步骤操作：
- 在 Google Cloud 控制台中，前往管理资源页面。
- 在项目列表中，选择要删除的项目，然后点击删除。
- 在对话框中输入项目 ID，然后点击关停以删除项目。
6. 恭喜
恭喜！您已成功在 AI Studio 上完成了应用 Vibe-Coding，并将其部署到了 Cloud Run！
AI Studio 是开发和测试应用的理想平台，可让用户立即直观地看到其设计在实际应用中的效果。
AI Studio 与 Cloud Run 的无缝集成可让用户轻松地将应用直接部署到 Google Cloud 上。利用 Cloud Run 可获得无服务器环境的所有固有优势，摆脱复杂的基础设施管理和开销。