Como tudo começou: o I/O Crossword

JUN 26, 2024
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)

No Google I/O deste ano, anunciamos novos produtos e ferramentas para ajudar você a criar usando a IA. Também lançamos a Competição para desenvolvedores de APIs do Gemini, que incentiva o uso da potência de nossas ferramentas e a integração de nossos melhores modelos de IA para criar novas experiências incríveis para os usuários e ainda oferece a chance de ganhar um supercarro DeLorean elétrico customizado (além de muito dinheiro!).

Então, para comemorar o início da série de eventos do I/O Connect e trazer um pouco de inspiração, achamos que seria divertido demonstrar algumas de nossas ferramentas favoritas anunciadas no Google I/O que se integram à API Gemini. Apresentamos o I/O Crossword, uma variação do jogo clássico de palavras cruzadas que testa seu conhecimento sobre o Google I/O e fornece uma visão prática da potência do Flutter, do Firebase e da API Gemini.

Vamos lá?


Como jogar

Etapa 1: selecione uma equipe escolhendo um mascote. Cada equipe tem uma cor no tabuleiro, e todos os participantes contribuem para a pontuação coletiva.

Etapa 2: escolha uma casa no tabuleiro para começar a formar as palavras.

Etapa 3: está com dificuldades em uma palavra? Clique no botão "Hint" e faça até dez perguntas do tipo sim ou não sobre ela para obter orientações e chegar a uma solução.

Etapa 4: envie sua pontuação para o placar, colete um selo para seu perfil no Programa Google Developers e compartilhe com o mundo a sua habilidade com as palavras cruzadas!

Vejamos os detalhes de cada uma das tecnologias que usamos para criar o jogo!


Gemini:
conteúdo criativo, relevante e seguro para as marcas

Como ponto de partida para as palavras e pistas do I/O Crossword, usamos tudo o que foi discutido no Google I/O deste ano. Neste caso, pedimos que o Gemini Advanced analisasse três horas de vídeo da palestra de abertura do Google I/O no YouTube para criar palavras e pistas relevantes e relacionadas à tecnologia e fazer com que o jogo de palavras cruzadas fosse uma maneira divertida de conhecer os anúncios de produtos do Google I/O.

O app Gemini permite que qualquer pessoa use nossos modelos de última geração para potencializar a criatividade no trabalho. Usamos especificamente o Gemini Advanced porque ele tem um limite de corte de conhecimento mais recente em comparação com muitos outros LLMs e é capaz de acessar a Internet para obter informações atualizadas.


API Gemini:
criação de experiências com os recursos do modelo Gemini

O que é mais interessante é que estarmos permitindo que você crie com os mesmos modelos Gemini. Com a API Gemini, você pode integrar nossos modelos de IA a seus aplicativos. Para aumentar o engajamento e reduzir a desistência de usuários, adicionamos um aspecto novo às palavras cruzadas: um recurso de dica criado para fazer com que os jogadores não desistam quando tiverem dificuldades. Usamos o Firebase Genkit com a API Gemini, um novo framework que permite adicionar recursos de IA com facilidade ao back-end de qualquer app.

Quando um jogador clica no botão "Ask for a hint" e faz uma pergunta, um fluxo do Genkit captura a pergunta do tipo sim ou não, coleta pistas relevantes e perguntas anteriores e envia essas informações para o modelo Gemini 1.5 Flash. O modelo, especificamente instruído para dar uma resposta "sim" ou "não", conduz o jogador para que ele encontre a palavra correta.

Há muito mais por trás desse recurso, então, se você quiser saber mais, confira a postagem detalhada no blog do Firebase!

Flutter e Dart: interface do usuário interativa e desempenho multiplataforma

A IU do jogo foi criada com o Flutter. A flexibilidade e o desempenho do Flutter nas diferentes plataformas fizeram dele a escolha perfeita para criar um jogo dinâmico e interativo.

Utilizamos o widget InteractiveViewer do Flutter para renderizar o tabuleiro de palavras cruzadas e facilitar a navegação. O widget foi projetado para lidar com interações do usuário, como distanciamento e zoom em áreas de conteúdo grandes, o que o tornou ideal para explorar nossa ampla grade de palavras cruzadas.

Como o jogo é uma experiência colaborativa, na qual os usuários jogam no mesmo tabuleiro ao mesmo tempo, o desempenho é crucial para proporcionar uma excelente experiência de jogo. Por esse motivo, o jogo é compilado no WebAssembly (WASM), que passou para o canal estável para apps da Web do Flutter no Google I/O.

Para obter mais detalhes sobre temas como o uso de transformações de matriz no widget InteractiveViewer ou como o WASM nos ajudou a manter uma alta taxa de frames, confira o detalhamento do Flutter!


Firebase
: hospedagem, redefinição do tabuleiro e proteção da experiência de jogo

O Firebase forneceu uma série de ferramentas que funcionam em várias plataformas para fornecer funcionalidade de back-end. O aplicativo ativo é hospedado no Firebase Hosting e todos os dados do aplicativo são armazenados no Firestore. O Firestore atua em tempo real, armazenando atualizações ao vivo à medida que usuários de todo o mundo completam o quebra-cabeça, aumentando e diminuindo automaticamente conforme os usuários entram e saem do jogo.

Quando as palavras cruzadas estão completas, o tabuleiro é redefinido, o que significa que o jogo está sempre ativo e pronto para novos usuários. Essa funcionalidade usa a tecnologia do Cloud Functions para Firebase.

Configuramos o App Check e a autenticação anônima para proteger a API do placar quando o app do Flutter acessa o Firestore diretamente, para que apenas usuários autenticados tenham acesso. Com o Firebase Authentication, todos os usuários que entram no jogo são autenticados anonimamente para que seja possível acompanhar a pontuação individual e exibi-la no placar.


Dart Frog e Cloud Run:
compartilhamento de código entre front-end e back-end

Nossa configuração de back-end, criada com o Dart, gerencia chamadas de API, interage com o banco de dados e lida com solicitações do app do Flutter. O Cloud Run fornece escalonamento automático para garantir uma experiência perfeita.

Para evitar trapaças, usamos um back-end do Dart Frog. O app faz a leitura no Firestore, mas apenas o back-end do Dart Frog pode fazer alterações. Essa arquitetura, em conjunto com a autenticação, garante um jogo justo.


Sua vez de tentar

Experimente o I/O Crossword em primeira mão. Para os usuários mais curiosos, o código é aberto. Mas o mais importante é que mal podemos esperar para ver como você aplicará as lições que aprendemos nessa jornada às suas próprias criações para a Competição para desenvolvedores de APIs do Gemini.

Para ajudar você a começar, lançamos um Programa de treinamentos para desenvolvedores que orienta você ao longo de nosso processo de desenvolvimento. Confira!