Skip to content

Latest commit

 

History

History
210 lines (150 loc) · 5.91 KB

README.md

File metadata and controls

210 lines (150 loc) · 5.91 KB
Raw

I/O Crossword

I/O Crossword Header

coverage style: very good analysis

The crossword game built with the Gemini API, Flutter and Firebase for Google I/O 2024.

Built by Very Good Ventures in partnership with Google.

Created using Very Good CLI 🤖

You can also check out how we used Genkit to power the hints feature in its dedicated GitHub repository.

Getting Started 🚀

This project has different entry points.

  • main_local.dart that targets a local api that should be run first (see how to do it here).
$ flutter run -d chrome --target lib/main_local.dart --web-port 24514 --dart-define RECAPTCHA_KEY=<RECAPTCHA_KEY> --dart-define APPCHECK_DEBUG_TOKEN=<APPCHECK_DEBUG_TOKEN>

The specified web port is just an example that matches with the one set in the helper script to run the api.

  • main_development.dart that targets the dev api.
$ flutter run -d chrome --target lib/main_development.dart --dart-define RECAPTCHA_KEY=<RECAPTCHA_KEY> --dart-define APPCHECK_DEBUG_TOKEN=<APPCHECK_DEBUG_TOKEN>
  • main_debug.dart that targets the dev api and adds a visual layer to debug the crossword sections, their position, fps and other items.
$ flutter run -d chrome --target lib/main_debug.dart --dart-define RECAPTCHA_KEY=<RECAPTCHA_KEY> --dart-define APPCHECK_DEBUG_TOKEN=<APPCHECK_DEBUG_TOKEN>
  • main_staging.dart that targets the staging api.
$ flutter run -d chrome --target lib/main_staging.dart --dart-define RECAPTCHA_KEY=<RECAPTCHA_KEY>
  • main_production.dart that targets the production api.
$ flutter run -d chrome --target lib/main_production.dart --dart-define RECAPTCHA_KEY=<RECAPTCHA_KEY>

*I/O Crossword works on Web.

Environment variables

The RECAPTCHA_KEY and APPCHECK_DEBUG_TOKEN environment variables are used to make the app more secure with Firebase App Check. You will have to register your site for reCAPTCHA v3 and get a key.

Running Tests 🧪

To run all unit and widget tests use the following command:

$ flutter test --coverage --test-randomize-ordering-seed random

To view the generated coverage report you can use lcov.

# Generate Coverage Report
$ genhtml coverage/lcov.info -o coverage/

# Open Coverage Report
$ open coverage/index.html

Working with Translations 🌐

This project relies on flutter_localizations and follows the official internationalization guide for Flutter.

Adding Strings

  1. To add a new localizable string, open the app_en.arb file at lib/l10n/arb/app_en.arb.
{
    "@@locale": "en",
    "counterAppBarTitle": "Counter",
    "@counterAppBarTitle": {
        "description": "Text shown in the AppBar of the Counter Page"
    }
}
  1. Then add a new key/value and description
{
    "@@locale": "en",
    "counterAppBarTitle": "Counter",
    "@counterAppBarTitle": {
        "description": "Text shown in the AppBar of the Counter Page"
    },
    "helloWorld": "Hello World",
    "@helloWorld": {
        "description": "Hello World Text"
    }
}
  1. Use the new string
import 'package:io_crossword/l10n/l10n.dart';

@override
Widget build(BuildContext context) {
  final l10n = context.l10n;
  return Text(l10n.helloWorld);
}

Adding Supported Locales

Update the CFBundleLocalizations array in the Info.plist at ios/Runner/Info.plist to include the new locale.

    ...

    <key>CFBundleLocalizations</key>
	<array>
		<string>en</string>
		<string>es</string>
	</array>

    ...

Adding Translations

  1. For each supported locale, add a new ARB file in lib/l10n/arb.
├── l10n
│   ├── arb
│   │   ├── app_en.arb
│   │   └── app_es.arb
  1. Add the translated strings to each .arb file:

app_en.arb

{
    "@@locale": "en",
    "counterAppBarTitle": "Counter",
    "@counterAppBarTitle": {
        "description": "Text shown in the AppBar of the Counter Page"
    }
}

app_es.arb

{
    "@@locale": "es",
    "counterAppBarTitle": "Contador",
    "@counterAppBarTitle": {
        "description": "Texto mostrado en la AppBar de la página del contador"
    }
}

Generating Translations

To use the latest translations changes, you will need to generate them:

  1. Generate localizations for the current project:
flutter gen-l10n --arb-dir="lib/l10n/arb"

Alternatively, run flutter run and code generation will take place automatically.