Development

Environment setup

This app was developed using dart, the flutter framework and Tensorflow (lite). Flutter needs to be installed. For this please follow the guide on the official website.

Note: There are some utility scripts that require a python installation.

Now the repository of DaKanji needs to be cloned:

git clone https://github.com/CaptainDario/DaKanji-Application

Then all necessary packages need to be installed:

flutter pub get

Now some additional files are necessary:

1. Copy the dictionary files from the release section of DaKanji dictionary assets/dict
2. Copy the kagome binaries from [the release section of kagome dart to blobs
3. Copy the TF Lite binaries from the release section of TFLite binaries to blobs

Note: the tf lite models are not included in the repo and are not available, all ml features are replaced with mock models.

Updating app icons

iOS / Android

For updating the icons the flutter_launcher_icons package was used. To update all icons, replace media/icon.png and run:

flutter pub run flutter_launcher_icons:main

Windows

windows/runner/resources/app_icon.ico

png → ico: https://convertico.com/

MacOS

macos/Runner/Assets.xcassets/AppIcon.appiconset

Linux

note: only snap support

uses the default image from the assets

assets/images/dakanji/icon.png

Updating icons font

For generating the icon font fluttericon.com is being used. The configuration file can be found at: assets/icons/svg_to_font/fluttericon.com/config.json. Uploading this file to fluttericon.com will show the current icon set. New Icons can then be added via dropping .svg-files into the web ui. After adding new icons, download the new project and replace the old files in assets/icons/svg_to_font/fluttericon.com/ and also replace lib/data/da_kanji_icons_icons.dart with the newly generated file.

Deep Linking

Other applications can link to DaKanji via deep linking. The base link is defined as dakanji://dakanji.

A table with all supported deep links can be found here. You can try them out directly in your browser.

Adding a tutorial

When adding a tutorial to NewScreen do the following

1. create new file lib/data/show_cases/NewScreen.dart and add a class that extends Tutorial following the approach of the other tutorials in that folder
   1. Add the tutorial texts to the google sheet like the other tutorials
2. lib/data/tutorials.dart integrate the new tutorial in Tutorials
3. Add the tutorial to lib/domain/user_data/user_data.dart so that the progress gets tracked
   1. Update the generated code with flutter pub run build_runner build --delete-conflicting-outputs
4. Add to the NewScreen widget a variable includeTutorial
5. Add a postFrameCallback to the screen to trigger the tutorial

...
@override
void initState() {

  super.initState();

  // after first frame
  WidgetsBinding.instance.addPostFrameCallback((Duration timeStamp) async {

    // init tutorial
    final OnboardingState? onboarding = Onboarding.of(context);
    if (onboarding != null && widget.includeTutorial && 
      GetIt.I<UserData>().showTutorialnewScreen) {
      onboarding.showWithSteps(
        GetIt.I<Tutorials>().newScreenTutorial.indexes![0],
        GetIt.I<Tutorials>().newScreenTutorial.indexes!
      );
    }
  });
}
...

6. Add Focus widgets to all widgets that should be highlighted during the tutorial and set their focusNode to the matching one from NewScreenTutorial
7. Add the new tutorial to lib/dakanji_app.dart in onGenerateRoute (PageRouteBuilder and switch(settings.name))