Cómo lo compilamos: el crucigrama de I/O

Este año, en Google I/O, anunciamos el lanzamiento de nuevos productos y herramientas para que compiles con IA. También lanzamos el Gemini API Dev Competition para que puedas aprovechar el poder de nuestras herramientas e integrar nuestros modelos de IA más capaces a fin de crear nuevas experiencias increíbles para los usuarios. Además, tendrás la oportunidad de ganar un superauto eléctrico DeLorean hecho a medida (¡y mucho dinero en efectivo!).

Para celebrar el inicio de nuestra serie de eventos I/O Connect y darte un poco de inspiración, pensamos que sería divertido mostrar algunas de nuestras herramientas favoritas que se integran con la API de Gemini. Presentamos el crucigrama de I/O, una versión útil del clásico crucigrama, que no solo pone a prueba tu conocimiento de I/O, sino que también te ofrece una visión práctica del poder de Flutter, Firebase y la API de Gemini.

¡Comencemos!

Cómo jugar

Paso 1: selecciona un equipo y elige una mascota. Cada equipo tiene un color en el tablero y todos contribuyen a la puntuación colectiva.

Paso 2: elige un lugar en el tablero para comenzar a encontrar palabras.

Paso 3: ¿no puedes encontrar una palabra? Puedes hacer clic en el botón "Sugerencia" y formular hasta diez preguntas de sí o no sobre la palabra para poder llegar a la solución.

Paso 4: envía tu puntuación a la tabla de clasificación, recolecta una insignia para tu perfil en el Programa para desarrolladores de Google y comparte tu destreza con el mundo.

¡Descubramos las tecnologías que usamos para compilar el juego!

Gemini: contenido seguro para la marca, actual y creativo

Este año, en I/O, nuestras charlas se centraron en encontrar un lugar esperable para comenzar con las palabras y pistas en el crucigrama. En este caso, le pedimos a Gemini Advanced que revisara 3 horas de video de la presentación de Google I/O en YouTube para crear palabras relacionadas con la tecnología y pistas para hacer que resolver el crucigrama sea una forma divertida de aprender sobre los anuncios de productos de I/O.

La app de Gemini permite a cualquier persona utilizar nuestros modelos de última generación para potenciar la creatividad en su trabajo. Utilizamos específicamente Gemini Advanced porque tiene una biblioteca de conocimientos más reciente, en comparación con muchos otros LLM, y puede acceder a Internet para obtener información actualizada.

La API de Gemini: crea experiencias con las capacidades del modelo Gemini

Lo realmente emocionante es que te permitimos compilar con los mismos modelos de Gemini. Con la API de Gemini, puedes integrar nuestros modelos de IA en tus apps. Para aumentar el compromiso y reducir la tasa de abandono, agregamos un giro al crucigrama: una función de "Sugerencia" diseñada para ayudar a los jugadores cuando se bloquean. Utilizamos Firebase Genkit con la API de Gemini, un nuevo marco de trabajo que permite agregar funciones de IA fácilmente al backend de cualquier app.

Cuando un jugador hace clic en el botón "Pedir una sugerencia" y hace una consulta, un flujo de Genkit toma su pregunta de sí o no, reúne pistas relevantes y consultas pasadas, y envía esta información al modelo de Gemini 1.5 Flash. El modelo, al que se la indicó específicamente que diera una respuesta de "sí" o "no", los acerca la palabra correcta.

Esta función tiene muchas más utilidades, así que, si quieres obtener más información, echa un vistazo a la publicación exhaustiva en el blog de Firebase.

Flutter and Dart: interfaz de usuario interactiva y rendimiento multiplataforma

La interfaz de usuario del juego se compiló con Flutter, que por su flexibilidad y el rendimiento en todas las plataformas, es la opción perfecta para crear un juego dinámico e interactivo.

Usamos el widget InteractiveViewer de Flutter para renderizar el tablero de crucigramas y permitir una navegación fluida. El widget se diseñó para manejar las interacciones del usuario, como el movimiento y el zoom en grandes áreas de contenido, por lo que es ideal para explorar nuestra amplia cuadrícula del crucigrama.

Dado que es una tarea de colaboración, en la que los jugadores están en el mismo tablero al mismo tiempo, el rendimiento es crucial para lograr una gran experiencia. Es por eso que el juego se compila en WebAssembly (WASM), que se graduó en el canal estable para aplicaciones web de Flutter en Google I/O.

Para obtener más detalles sobre temas como el uso de transformaciones de matriz dentro del widget InteractiveViewer, o cómo WASM nos ayudó a mantener una velocidad de fotogramas alta, echa un vistazo a la publicación exhaustiva de Flutter.

Firebase: hosting, restablecer el tablero y asegurar la experiencia de juego

Firebase proporcionó una serie de herramientas que funcionan en todas las plataformas para brindar funcionalidad de backend. La aplicación en vivo está alojada en Firebase Hosting y todos los datos de la aplicación se almacenan en Firestore. Firestore actúa en tiempo real, almacena actualizaciones en vivo a medida que los usuarios de todo el mundo completan el rompecabezas y aumenta y disminuye automáticamente a medida que los usuarios se unen y abandonan el juego.

Cuando se completa el crucigrama, todo el tablero se restablece, lo que significa que el juego está siempre activo y listo para jugar a medida que se unen nuevos usuarios. Esta funcionalidad es posible con Cloud Functions para Firebase.

Cuando la app de Flutter accede directamente a Firestore, configuramos la Verificación de aplicaciones y la autenticación anónima para proteger la API de la tabla de clasificación, de modo que solo los usuarios autenticados puedan acceder. Al utilizar Firebase Authentication, cada persona que se une al juego se autentica de forma anónima para realizar un seguimiento de su puntuación individual y mostrarla en la tabla de clasificación.

Dart Frog y Cloud Run: código compartido entre frontend y backend

Nuestra configuración de backend, compilada con Dart, administra las llamadas a la API, interactúa con la base de datos y maneja las solicitudes de la app de Flutter. Cloud Run proporciona ajuste de escala automático para garantizar una experiencia fluida.

Para evitar trampas, usamos un backend de Dart Frog. La aplicación lee desde Firestore, pero solo el backend de Dart Frog puede realizar cambios. Esta arquitectura, junto con la autenticación, garantiza el juego limpio.

Pruébalo

Prueba el crucigrama de I/O. Para quienes tengan curiosidad por las cuestiones técnicas, el código es abierto. Aunque lo más importante es que no podemos esperar a ver cómo aplicas lo que aprendimos en esta travesía a tus propias creaciones para el concurso de desarrolladores con la API de Gemini.

Para ayudarte a comenzar, lanzamos una ruta de aprendizaje para desarrolladores que te guiará a través de nuestro proceso de desarrollo. ¡Échale un vistazo!