我们的构建过程：I/O 大会填字游戏

2024年6月26日

Jay Chang Senior Product Marketing Manager Developer Activations

Kelvin Boateng Product Marketing Manager Flutter & Dart

Link to Youtube Video (visible only when JS is disabled)

在今年的 Google I/O 大会上，我们宣布推出可帮助您使用 AI 进行构建的新产品和工具。我们还推出了 Gemini API 开发者竞赛，旨在鼓励您利用我们工具的强大功能并整合我们最强大的 AI 模型，从而为用户打造出色的全新体验。此外，您还有机会赢得 DeLorean 定制款电动超跑（外加大量现金！）
。
因此，为了庆祝 I/O Connect 系列活动开幕，并为您提供一些灵感，我们认为展示我们在 I/O 大会上宣布的一些与 Gemini API 集成的工具会很有趣。推出 I/O 填字游戏有助于为经典填字游戏带来转折，不仅可以测试您对 I/O 的了解是否全面，还可以让您亲身体验 Flutter、Firebase 和 Gemini API 的强大功能。

让我们开始吧！

玩法

第 1 步：通过选择吉祥物来选择团队。每个团队在面板上都有对应的颜色，并且每个人都为集体分数做出贡献。

第 2 步：在面板上选择一个地方即可开始答题。

第 3 步：在某个单词上卡住了？单击“提示”按钮，最多询问十个可以引导您找到解决方案的“是”或“否”问题。

第 4 步：将您的分数提交到排行榜，收集可在您的 Google 开发者计划个人资料中显示的徽章，并与世界分享您的填字游戏能力！

让我们深入了解开发这款游戏所使用的每项技术！

Gemini：品牌安全、主题和创意内容

我们在今年的 I/O 大会上所讨论的一切都是从 I/O 填字游戏的单词和线索开始的。在这个案例中，我们让 Gemini Advanced 回顾了 YouTube 上时长 3 小时的 Google I/O 大会主题演讲的片段，以创建与技术相关的热门单词和线索，让填字游戏成为了解 I/O 大会产品公告的有趣方式。

Gemini 应用让任何人都可以使用我们最先进的模型来提高工作中的创造力。我们专门使用了 Gemini Advanced，因为与许多其他 LLM 相比，它的知识库截止日期更近，并且可以通过访问互联网来获取最新信息。

Gemini API：使用 Gemini 模型功能打造体验

但真正令人兴奋的是，我们允许您使用相同的 Gemini 模型进行构建。借助 Gemini API，您可以将我们的 AI 模型集成到您的应用中。为了提升吸引力和减少流失率，我们在填字游戏中注入了新的元素，即旨在让玩家在陷入困境时不离开游戏的“提示”功能。我们将 Firebase Genkit 与 Gemini API 结合使用，后者是一个新的框架，可让开发者轻松地将 AI 功能添加到任何应用的后端。

玩家点击“获取提示”按钮并提出问题后，Genkit 流会回答是否问题，收集相关线索和过去的问题，并将这些信息发送给 Gemini 1.5 Flash 模型。然后，模型会按照专门的指示给出“是”或“否”的答案，推动玩家填写正确的单词。

此功能的基础还有很多。如果您想了解更多信息，请查看 Firebase 博客上的深度技术帖子！

Flutter 和 Dart：交互式界面和多平台性能

游戏界面使用 Flutter 构建而成。Flutter 具有跨平台的灵活性和高性能，使其成为构建动态互动游戏的绝佳选择。

我们依靠 Flutter 的 InteractiveViewer 微件来渲染填字游戏面板并实现顺畅导航。该微件专为处理大型内容区域上的平移和缩放操作等用户交互而设计，是探索广阔填字游戏网格的理想之选。

由于游戏是一种玩家同时在同一面板上玩游戏的协作体验，因此性能对于出色的游戏体验至关重要。这就是我们采用 WebAssembly (WASM) 编译游戏的原因，它在 Google I/O 大会上升级为 Flutter 网络应用的稳定渠道。

有关在 InteractiveViewer 微件中使用矩阵变换等主题的更多详情，或 WASM 如何帮助我们保持高帧率，请查看 Flutter 深度技术文章！

Firebase：托管、重置面板并确保游戏体验

Firebase 提供了許多跨平台工作的工具來提供後端功能。即時應用程式託管在 Firebase Hosting 上，應用程式中的所有資料都儲存在 Firestore 中。 Firestore 即時運行，在世界各地的用戶完成拼圖時儲存即時更新，並在用戶加入和離開遊戲時自動縮放。

填字游戏完成后，整个面板将会重置，这意味着游戏始终在线，所以新用户加入时即可开始游戏。此功能由 Cloud Functions for Firebase 提供支持。

当 Flutter 应用直接访问 Firestore 时，我们设置了 App Check 和匿名身份验证来保护排行榜 API，以便只有经过身份验证的用户才能访问。使用 Firebase Authentication，我们对加入游戏的每个用户都进行匿名身份验证，以跟踪他们的个人分数，并在排行榜上显示相应分数。

Dart Frog 和 Cloud Run：在前端和后端之间共享代码

我们的后端设置使用 Dart 构建而成，可管理 API 调用，与数据库交互，并处理来自 Flutter 应用的请求。Cloud Run 提供自动扩缩功能，以确保流畅的体验。

我们使用 Dart Frog 后端来防止作弊。该应用会读取 Firestore 数据，但只有 Dart Frog 后端可以进行更改。这种架构与身份验证一起确保游戏公平。

亲自试用

亲身体验 I/O 填字游戏。如果您对技术方面的问题充满好奇，请查看我们的开源代码。但最重要的是，我们迫不及待地想看看您如何将我们在这段旅程中学到的经验教训应用到您自己的 Gemini API 开发者竞赛作品中。

为了帮助您开始使用，我们推出了开发者在线课程，以指导您完成我们的开发流程。快来看看吧！