Bagaimana Kami Membuatnya: Teka-teki silang I/O

Di Google I/O tahun ini, kami mengumumkan produk dan alat baru untuk membantu Anda membangun dengan AI. Kami juga meluncurkan Kompetisi Developer Gemini API untuk mendorong Anda memanfaatkan kekuatan alat dan mengintegrasikan model AI kami yang paling mumpuni untuk membangun pengalaman baru yang luar biasa bagi pengguna–Anda berkesempatan memenangkan supercar listrik DeLorean yang dibuat khusus (ditambah uang tunai dalam jumlah yang sangat besar!).

Jadi, untuk merayakan dimulainya rangkaian acara I/O Connect dan memberi Anda beberapa inspirasi, kami pikir akan sangat menyenangkan menampilkan beberapa alat favorit kami yang diumumkan di I/O yang terintegrasi dengan Gemini API. Memperkenalkan Teka-teki silang I/O, sebuah inovasi teka-teki silang klasik yang tidak hanya menguji pengetahuan Anda tentang berbagai hal terkait I/O, tetapi juga memberi Anda gambaran langsung mengenai kekuatan Flutter, Firebase, dan Gemini API.

Mari kita dalami!

Cara Bermain

Langkah 1: Pilih tim dengan memilih maskot. Setiap tim memiliki warna di papan, dan setiap orang berkontribusi pada skor kolektif.

Langkah 2: Pilih tempat di papan untuk mulai memecahkan kata.

Langkah 3: Kesulitan menjawab sebuah kata? Klik tombol "Hint" dan ajukan hingga sepuluh pertanyaan ya atau tidak tentang kata tersebut untuk memandu Anda menemukan solusinya.

Langkah 4: Kirimkan skor ke papan peringkat, kumpulkan badge untuk profil Anda di Program Developer Google, dan bagikan kepiawaian teka-teki silang Anda dengan dunia!

Mari kita bahas lebih lanjut mengenai masing-masing teknologi yang kami gunakan untuk membangun game ini!

Gemini: Aman bagi merek, topikal, dan konten kreatif

Tempat yang tepat untuk memulai kata dan petunjuk dalam Teka-teki silang I/O adalah semua hal yang telah kami bicarakan di I/O tahun ini. Dalam kasus ini, kami meminta Gemini Advanced untuk meninjau cuplikan sesi utama Google I/O selama 3 jam dari YouTube untuk membuat kata-kata dan petunjuk yang berhubungan dengan teknologi dan topik yang dibahas agar memecahkan teka-teki silang menjadi cara yang menyenangkan untuk mempelajari pengumuman produk I/O.

Aplikasi Gemini memungkinkan siapa pun menggunakan model canggih kami untuk meningkatkan kreativitas dalam karyanya. Kami secara khusus menggunakan Gemini Advanced karena memiliki tingkat pengetahuan termutakhir dibandingkan dengan banyak LLM lainnya dan bisa mengakses internet untuk mendapatkan informasi terkini.

Gemini API: Membangun pengalaman dengan kemampuan model Gemini

Namun, yang sangat menarik adalah kami memudahkan Anda membangun dengan model Gemini yang sama. Dengan Gemini API, Anda bisa mengintegrasikan model AI kami ke dalam aplikasi Anda. Untuk meningkatkan engagement dan mengurangi churn, kami menambahkan sentuhan pada teka-teki silang – fitur "Hint" yang dirancang agar pemain tetap berada di dalam permainan ketika mereka bingung. Kami menggunakan Firebase Genkit dengan Gemini API, framework baru yang memungkinkan penambahan fitur AI secara mudah ke backend aplikasi apa pun.

Ketika seorang pemain mengklik tombol "Ask for a hint" dan mengajukan pertanyaan, alur Genkit membawa pertanyaan ya atau tidak mereka, mengumpulkan petunjuk yang relevan dan pertanyaan sebelumnya, serta mengirimkan informasi ini ke model Gemini 1.5 Flash. Model ini, yang secara khusus diinstruksikan untuk memberikan jawaban "yes" atau "no", akan mengarahkan mereka ke kata yang benar.

Masih banyak lagi yang mendasari fitur ini, jadi jika Anda ingin mempelajari lebih lanjut, lihat postingan mendalam di blog Firebase tentang hal ini!

Flutter dan Dart: Antarmuka pengguna yang interaktif dan performa multiplatform

UI game ini dibangun dengan Flutter. Fleksibilitas dan performa Flutter di berbagai platform menjadikannya pilihan yang tepat untuk membangun game yang dinamis dan interaktif.

Kami mengandalkan widget InteractiveViewer dari Flutter untuk merender papan teka-teki silang dan memungkinkan navigasi yang mulus. Widget ini dirancang untuk menangani interaksi pengguna, seperti menggeser dan melakukan zoom pada area konten yang luas, yang membuatnya ideal untuk menjelajahi kotak-kotak teka-teki silang kami yang besar.

Karena game ini merupakan pengalaman kolaboratif dengan para pemain bermain di papan yang sama pada waktu yang sama, performa sangatlah penting untuk pengalaman bermain yang luar biasa. Karena itulah game ini dikompilasi ke WebAssembly (WASM), yang telah masuk ke saluran stabil untuk aplikasi web Flutter di Google I/O.

Untuk detail selengkapnya tentang topik, seperti menggunakan transformasi matriks dalam widget InteractiveViewer, atau bagaimana WASM membantu kami mempertahankan kecepatan frame tinggi, simaklah pembahasan mendalam tentang Flutter!

Firebase: Menghosting, mereset papan, dan mengamankan pengalaman bermain game

Firebase menyediakan sejumlah alat yang berfungsi lintas platform untuk menyediakan fungsionalitas backend. Aplikasi langsung dihosting di Firebase Hosting dan semua data dari aplikasi disimpan di Firestore. Firestore bertindak secara real-time, menyimpan pembaruan langsung saat pengguna dari seluruh dunia menyelesaikan teka-teki, secara otomatis meningkatkan dan menurunkan skala saat pengguna bergabung dan keluar dari game.

Ketika teka-teki silang selesai, seluruh papan akan direset, yang berarti game ini selalu aktif dan siap dimainkan saat ada pengguna baru yang bergabung. Fungsionalitas ini didukung oleh Cloud Functions for Firebase.

Ketika aplikasi Flutter mengakses Firestore secara langsung, kami menyiapkan App Check dan autentikasi anonim untuk mengamankan API papan peringkat sehingga hanya pengguna terautentikasi yang dapat mengaksesnya. Dengan menggunakan Firebase Authentication, setiap pengguna yang bergabung dalam permainan yang terautentikasi secara anonim untuk melacak skor masing-masing dan menampilkannya di papan peringkat.

Dart Frog dan Cloud Run: Berbagi kode antara frontend dan backend

Penyiapan backend kami, yang dibangun dengan Dart, mengelola panggilan API, berinteraksi dengan database, dan menangani permintaan dari aplikasi Flutter. Cloud Run menyediakan penskalaan otomatis untuk memastikan pengalaman yang mulus.

Untuk mencegah kecurangan, kami menggunakan backend Dart Frog. Aplikasi ini membaca dari Firestore, tetapi hanya backend Dart Frog yang bisa melakukan perubahan. Arsitektur ini, bersama dengan autentikasi, memastikan permainan yang sportif.

Cobalah Sendiri

Rasakan pengalaman Teka-teki silang I/O secara langsung. Bagi Anda yang ingin tahu secara teknis, kodenya tersedia secara open source. Namun yang terpenting, kami tidak sabar menantikan bagaimana Anda menerapkan pelajaran yang telah kami pelajari dalam perjalanan ini ke dalam kreasi Anda sendiri untuk Kompetisi Developer Gemini API.

Untuk membantu Anda memulai, kami telah meluncurkan Jalur Pembelajaran Developer untuk memandu Anda melalui proses pengembangan kami. Cobalah lihat!