DEV Community: nasa.wang

How to create a Offline Internationalization App:Source code and real app

nasa.wang — Mon, 11 Oct 2021 13:46:29 +0000

I put all the POC code in the previous article on github

nasawz / strapi_flutter_internation_poc

Offline Internationalization App Poc

The vast majority of internationalized apps are implemented by returning different languages through api requests. The so-called "content" does not refer to the UI interface of the APP, but the content information carried by the APP.

I have provided a different idea here. The core idea is to embed the part of the cloud API multilingual query that was originally in the cloud into the App by using Sqlite. There are three reasons:

First, for specific content and data with information boundaries, embedding the data from the cloud to the local will get a faster response speed.
Second, the users of the multilingual APP are people from various countries and regions. The network situation is complicated. The data can be embedded from the cloud to the local without being affected by the network and can be used offline.
Third, I don’t have a cloud server 😂…

View on GitHub

I took advantage of this technical feature to develop an app that specifically consulted the Chinese "Compendium of Materia Medica"'s vegetable and fruit boil health regimen. At present, I have translated the English version using Google translation.

https://www.shuge.org/ebook/ben-cao-gang-mu/

96 kinds of Chinese medicine fruits and vegetables are carefully selected for users. For each kind of fruits and vegetables' characteristics, effects, and purchase guidelines
The analysis of nutritional components, examples of dietary therapy, and health-preserving prescriptions of traditional Chinese medicine have made a comprehensive analysis, telling people that fruits and vegetables are the most natural, economical, and convenient way to cure diseases.

There are also special introductions and exquisite pictures of each kind of fruits and vegetables in the APP, with a quick search function, so that users can quickly find the information they need. At the same time, it also supports light and dark theme styles, and users can freely set according to their own habits.

The Vegetable and Fruit Therapy APP can not only tell users exactly what to eat and how to eat, but it can also help people establish the concept of vegetable and fruit health, which is worthy of repeated reading and permanent collection.

Dear friends, Take care of yourself~

How to create a Offline Internationalization App:Support multiple languages

nasa.wang — Mon, 11 Oct 2021 08:29:06 +0000

There is a column of locale in the Sqlite database that supports multiple languages, so you only need to change the Sql query conditions to find out the data in different languages.

Modify VegetableDao to add language query conditions

[project_root]/lib/app/data/dao/vegetalbe_dao.dart

import 'package:floor/floor.dart';
import 'package:strapi_flutter_internation_poc/app/data/entity/vegetable.dart';

@dao
abstract class VegetableDao {
  @Query('SELECT * FROM vegetables_v WHERE  locale = :locale')
  Future<List<VegetableV>> findAll(String locale);
}

Re-run the Floor code generator after modification

flutter packages pub run build_runner build

HomeController

[project_root]/lib/app/modules/home/controllers/home_controller.dart

  Future<void> getAllVegetables() async {
    final result = await DbService.to.db.vegetableDao.findAll('en');
    vegetables.value = result;
  }

The data displayed in this way is all in English

Next, integrate the internationalization features of GetX

Create a new language_service

[project_root]/lib/app/common/services/language_service.dart

Here, get_storage is used as a cache for the default language. Remember to increase the dependency of this library in the Flutter project. Use the command get install get_storage to quickly complete the installation.

import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get_storage/get_storage.dart';

class LanguageService extends GetxService {
  static LanguageService get to => Get.find();

  var box = GetStorage();
  var locale = Locale('en', 'US');
  var localeKey = 'en';

  Future<LanguageService> init() async {
    if (box.read('language') != null) {
      if (box.read('language') == 'zh-CN') {
        locale = Locale('zh', 'CN');
        localeKey = 'zh-CN';
      } else {
        locale = Locale('en', 'US');
        localeKey = 'en';
      }
    } else {
      if (ui.window.locale.languageCode == 'zh') {
        locale = Locale('zh', 'CN');
        localeKey = 'zh-CN';
      } else {
        locale = Locale('en', 'US');
        localeKey = 'en';
      }
    }

    return this;
  }

  void changeLocale(l) {
    if (l == Locale('zh', 'CN')) {
      localeKey = 'zh-CN';
      updateLocale(Locale('zh', 'CN'));
    } else if (l == Locale('en', 'US')) {
      localeKey = 'en';
      updateLocale(Locale('en', 'US'));
    }
    box.write('language', localeKey);
  }

  void updateLocale(_l) {
    locale = _l;
    Get.updateLocale(_l);
  }
}

GetX Cli can quickly generate the multi-language configuration required by the GetX framework from a JSON file.

Create two new JSON files under [project_root]/assets/locales

en_US.json

{
  "app": {
    "name": "VAF"
  },
  "locale": {
    "title": "Language",
    "zh": "中文",
    "en": "English"
  }
}

zh_CN.json

{
  "app": {
    "name": "蔬果"
  },
  "locale": {
    "title": "语言",
    "zh": "中文",
    "en": "English"
  }
}

run

get generate locales assets/locales

out[project_root]/lib/generated/locales.g.dart

class AppTranslation {
  static Map<String, Map<String, String>> translations = {
    'zh_CN': Locales.zh_CN,
    'en_US': Locales.en_US,
  };
}

class LocaleKeys {
  LocaleKeys._();
  static const app_name = 'app_name';
  static const locale_title = 'locale_title';
  static const locale_zh = 'locale_zh';
  static const locale_en = 'locale_en';
}

class Locales {
  static const zh_CN = {
    'app_name': '蔬果',
    'locale_title': '语言',
    'locale_zh': '中文',
    'locale_en': 'English',
  };
  static const en_US = {
    'app_name': 'VAF',
    'locale_title': 'Language',
    'locale_zh': '中文',
    'locale_en': 'English',
  };
}

Add the initialization of LanguageService in main.dart

Future<void> initServices() async {
  print('starting services ...');
  await Get.putAsync(() => DbService().init());
  await Get.putAsync(() => LanguageService().init());
  print('All services started...');
}

Modify runApp to add multi-language configuration

  runApp(
    GetMaterialApp(
      title: "Application",
      initialRoute: AppPages.INITIAL,
      getPages: AppPages.routes,
      translationsKeys: AppTranslation.translations,
      locale: LanguageService.to.locale,
      fallbackLocale: Locale('zh', 'CN'),
    ),
  );

Adjust the query conditions in the Controller

final result = await DbService.to.db.vegetableDao.findAll('en');

    final result = await DbService.to.db.vegetableDao
        .findAll(LanguageService.to.localeKey);

Modify the text in the interface to reference multilingual resources

      appBar: AppBar(
        title: Text('Vegetables'),
        centerTitle: true,
      ),

      appBar: AppBar(
        title: Text(LocaleKeys.app_name.tr),
        centerTitle: true,
      ),

Run it again to see the interface that defaults to Chinese

Make a little improvement and add a button to switch languages

appBar: AppBar(
        title: Text(LocaleKeys.app_name.tr),
        centerTitle: true,
        actions: [
          IconButton(
              onPressed: () {
                Get.dialog(SimpleDialog(
                  title: Text(LocaleKeys.locale_title.tr),
                  children: <Widget>[
                    SimpleDialogOption(
                      onPressed: () {
                        LanguageService.to.changeLocale(Locale('en', 'US'));
                      },
                      child: Padding(
                        padding: const EdgeInsets.symmetric(vertical: 6),
                        child: Text(LocaleKeys.locale_en.tr),
                      ),
                    ),
                    SimpleDialogOption(
                      onPressed: () {
                        LanguageService.to.changeLocale(Locale('zh', 'CN'));
                      },
                      child: Padding(
                        padding: const EdgeInsets.symmetric(vertical: 6),
                        child: Text(LocaleKeys.locale_zh.tr),
                      ),
                    ),
                  ],
                ));
              },
              icon: Icon(Icons.language))
        ],
      ),

Very convenient and fast to complete the language switch

How to create a Offline Internationalization App:Use Sqlite database

nasa.wang — Mon, 11 Oct 2021 06:50:23 +0000

https://pub.dev/packages/floor

Configure the reference pubspec.yaml of the dependent library in the Flutter project

dependencies:
  flutter:
    sdk: flutter
  floor: ^1.2.0

dev_dependencies:
  floor_generator: ^1.2.0
  build_runner: ^2.1.2

Create entity and view [project_root]/lib/app/data/entity/vegetalbe.dart

import 'package:floor/floor.dart';

@Entity(tableName: "vegetables")
class Vegetable {
  @PrimaryKey(autoGenerate: true)
  final int? id;

  final String name;

  final String locale;

  final String desc;

  @ColumnInfo(name: 'created_at')
  final int createTime;

  @ColumnInfo(name: 'updated_at')
  final int updateTime;

  Vegetable(
    this.id,
    this.name,
    this.locale,
    this.desc, {
    int? createTime,
    int? updateTime,
  })  : this.createTime = createTime ?? DateTime.now().millisecondsSinceEpoch,
        this.updateTime = updateTime ?? DateTime.now().millisecondsSinceEpoch;
}

@DatabaseView(
    'SELECT v.id,   v.name, v.desc, v.locale,   uf.hash,    uf.ext,     v.created_at,   v.updated_at from   vegetables v LEFT OUTER JOIN upload_file_morph ufm on   v.id = ufm.related_id LEFT OUTER JOIN upload_file uf on ufm.upload_file_id = uf.id;',
    viewName: "vegetables_v")
class VegetableV {
  final int id;
  final String name;
  final String locale;
  final String? desc;
  final String? hash;
  final String? ext;

  @ColumnInfo(name: 'created_at')
  final int createTime;

  @ColumnInfo(name: 'updated_at')
  final int updateTime;

  VegetableV(
    this.id,
    this.name,
    this.locale,
    this.desc,
    this.hash,
    this.ext, {
    int? createTime,
    int? updateTime,
  })  : this.createTime = createTime ?? DateTime.now().millisecondsSinceEpoch,
        this.updateTime = updateTime ?? DateTime.now().millisecondsSinceEpoch;
}

For specific details, please refer to https://floor.codes/database-views/

Create "Data Access Objects" according to the view[project_root]/lib/app/data/dao/vegetalbe_dao.dart

import 'package:floor/floor.dart';
import 'package:strapi_flutter_internation_poc/app/data/entity/vegetable.dart';

@dao
abstract class VegetableDao {
  @Query('SELECT * FROM vegetables_v')
  Future<List<VegetableV>> findAll();
}

Create Database management class [project_root]/lib/app/data/database.dart

import 'dart:async';
import 'package:floor/floor.dart';
import 'package:sqflite/sqflite.dart' as sqflite;
// daos
import 'dao/vegetable_dao.dart';
// entitys
import 'entity/vegetable.dart';

part 'database.g.dart'; // the generated code will be there

@Database(version: 1, entities: [Vegetable], views: [VegetableV])
abstract class AppDatabase extends FloorDatabase {
  VegetableDao get vegetableDao;
}

Run Floor's code generator

flutter packages pub run build_runner build
[INFO] Generating build script...
[INFO] Generating build script completed, took 480ms

[INFO] Initializing inputs
[INFO] Reading cached asset graph...
[INFO] Reading cached asset graph completed, took 67ms

[INFO] Checking for updates since last build...
[INFO] Checking for updates since last build completed, took 651ms

[INFO] Running build...
[INFO] 1.1s elapsed, 0/1 actions completed.
[INFO] 2.2s elapsed, 0/1 actions completed.
[INFO] 4.0s elapsed, 0/1 actions completed.
[INFO] 8.4s elapsed, 0/1 actions completed.
[INFO] Running build completed, took 8.8s

[INFO] Caching finalized dependency graph...
[INFO] Caching finalized dependency graph completed, took 34ms

[INFO] Succeeded after 8.8s with 2 outputs (2 actions)

This will generate a database.g.dart in the same directory as database.dart

Use GetX's Service scheme to create db service [project_root]/lib/app/common/services/db_service.dart.dart

Please pay special attention here

Unlike the official documentation of Floor, Floor will generate a sqlite database based on the entity. I will provide the existing database files to Floor for use without generating new database files.

import 'dart:io';
import 'package:get/get.dart';
import 'package:path/path.dart';
import 'package:floor/floor.dart';
import 'package:flutter/services.dart';
import 'package:sqflite/sqflite.dart';
import 'package:strapi_flutter_internation_poc/app/data/database.dart';

class DbService extends GetxService {
  static DbService get to => Get.find();

  late AppDatabase db;

  Future<DbService> init() async {
    final callback = Callback(
      onCreate: (database, version) {},
      onOpen: (database) {
        print('onOpen database');
        getDatabasesPath().then((value) => print(value));
      },
      onUpgrade: (database, startVersion, endVersion) {},
    );

    var dbDir = await getDatabasesPath();
    var dbPath = join(dbDir, "app_database.db");

    await deleteDatabase(dbPath);

    ByteData data = await rootBundle.load("assets/db/data.db");
    List<int> bytes =
        data.buffer.asUint8List(data.offsetInBytes, data.lengthInBytes);
    await File(dbPath).writeAsBytes(bytes);

    db = await $FloorAppDatabase
        .databaseBuilder(dbPath)
        .addCallback(callback)
        .build();
    return this;
  }
}

Instantiate DbService [project_root]/lib/main.dart

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await initServices();

  runApp(
    GetMaterialApp(
      title: "Application",
      initialRoute: AppPages.INITIAL,
      getPages: AppPages.routes,
    ),
  );
}

Future<void> initServices() async {
  print('starting services ...');
  await Get.putAsync(() => DbService().init());
  print('All services started...');
}

Modify the home_controller code to read the Sqlite database [project_root]/lib/app/modules/home/controllers/home_controller.dart

import 'package:get/get.dart';
import 'package:strapi_flutter_internation_poc/app/common/services/db_service.dart';
import 'package:strapi_flutter_internation_poc/app/data/entity/vegetable.dart';

class HomeController extends GetxController {
  final vegetables = Rx<List<VegetableV>>([]);

  @override
  void onInit() {
    super.onInit();
  }

  @override
  void onReady() {
    super.onReady();
  }

  Future<void> getAllVegetables() async {
    final result = await DbService.to.db.vegetableDao.findAll();
    vegetables.value = result;
  }

  @override
  void onClose() {}
}

Test it briefly

controller.getAllVegetables();

  Future<void> getAllVegetables() async {
    final result = await DbService.to.db.vegetableDao.findAll();
    vegetables.value = result;
    print(result);
  }

out

I/flutter ( 7396): starting services ...
I/flutter ( 7396): onOpen database
I/flutter ( 7396): /data/user/0/com.nasawz.strapi_flutter_internation_poc.strapi_flutter_internation_poc/databases
I/flutter ( 7396): All services started...
[GETX] Instance "DbService" has been created
[GETX] Instance "DbService" has been initialized
[GETX] Instance "GetMaterialController" has been created
[GETX] Instance "GetMaterialController" has been initialized
[GETX] GOING TO ROUTE /home
[GETX] Instance "HomeController" has been created
[GETX] Instance "HomeController" has been initialized
I/flutter ( 7396): [Instance of 'VegetableV', Instance of 'VegetableV', Instance of 'VegetableV', Instance of 'VegetableV', Instance of 'VegetableV', Instance of 'VegetableV', Instance of 'VegetableV', Instance of 'VegetableV']

success! The data is read out.

Use GetX's Obx feature to display data on the interface

import 'package:flutter/material.dart';

import 'package:get/get.dart';
import '../controllers/home_controller.dart';

class HomeView extends GetView<HomeController> {
  @override
  Widget build(BuildContext context) {
    controller.getAllVegetables();
    return Scaffold(
      appBar: AppBar(
        title: Text('Vegetables'),
        centerTitle: true,
      ),
      body: Obx(() => ListView.builder(
          itemCount: controller.vegetables.value.length,
          itemBuilder: (context, index) {
            var vegetable = controller.vegetables.value[index];
            return Padding(
              padding: const EdgeInsets.all(18.0),
              child: Container(
                child: Row(
                  children: [
                    Container(
                      // color: Colors.red,
                      child: Image.asset(
                        'strapi/public/uploads/thumbnail_${vegetable.hash}${vegetable.ext}',
                        fit: BoxFit.contain,
                        width: 140,
                        height: 140,
                      ),
                    ),
                    Container(
                      width: Get.width - 18 * 2 - 140 - 18,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            vegetable.name,
                            style: Get.textTheme.headline6,
                          ),
                          Text(
                            vegetable.desc!,
                            style: Get.textTheme.subtitle1,
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            );
          })),
    );
  }
}

How to create a Offline Internationalization App:Data modeling

nasa.wang — Mon, 11 Oct 2021 05:54:42 +0000

With Strapi's powerful content management functions, data modeling can be carried out freely.

First set the language type supported by Strapi GLOBAL SETTINGS> Internationalization

Setting up Strapi in this way supports both Chinese and English

Next, use the CONTENT TYPE BUILDER function for modeling. Here we take vegetables as an example to build a vegetable data model.

Content-Types Builder> Create new collection type

Enable the internationalization function in the advanced settings Enable localization for this Content-Type

Click Save and Strapi will automatically restart. After the restart is completed, an order will be opened in the COLLECTION TYPES on the left to the data model just created.

Next, add some data here

Use the Removebg website to quickly create beautiful transparent background images

After the save is successful, you can edit other language versions in the language selection on the right, and copy the content from the existing languages.

Such a piece of data supports multiple languages

How to create a Offline Internationalization App:Build the project structure

nasa.wang — Sun, 10 Oct 2021 11:43:30 +0000

The first step, use get cli to generate the basic project structure

https://pub.dev/packages/get_cli

get create project:strapi_flutter_internation_poc
  1) Flutter Project
  2) Get Server
1
? What is your company's domain?  Example: com.yourcompany  com.nasawz.strapi_flutter_internation_poc

what language do you want to use on ios?

  1) Swift
  2) Objective-C
1

what language do you want to use on android?

  1) Kotlin
  2) Java
1

Do you want to use null safe?

  1) Yes!
  2) No
1

do you want to use some linter?

  1) no
  2) Pedantic [Deprecated]
  3) Effective Dart [Deprecated]
  4) Dart Recommended
1

Running `flutter create D:\poc\strapi_flutter_internation_poc` …

$ flutter create --no-pub -i swift -a kotlin --org com.nasawz.strapi_flutter_internation_poc D:\poc\strapi_flutter_internation_poc
Creating project ....
  lib\main.dart (created)
  pubspec.yaml (created)
  README.md (created)
  test\widget_test.dart (created)
  .gitignore (created)
  .idea\libraries\Dart_SDK.xml (created)
  .idea\libraries\KotlinJavaRuntime.xml (created)
  .idea\modules.xml (created)
  .idea\runConfigurations\main_dart.xml (created)
  .idea\workspace.xml (created)
  .metadata (created)
 .......
 ........
Wrote 81 files.

All done!
In order to run your application, type:

  $ cd .
  $ flutter run

Your application code is in .\lib\main.dart.


Running `flutter pub get` …

$ flutter pub get
Running "flutter pub get" in strapi_flutter_internation_poc...      2,666ms
$ dart migrate --apply-changes --skip-import-check
Migrating D:\poc\strapi_flutter_internation_poc

See https://dart.dev/go/null-safety-migration for a migration guide.

Analyzing project...
All sources appear to be already migrated.  Nothing to do.
✓  File: analysis_options.yaml created successfully at path: analysis_options.yaml
  1) GetX Pattern (by Kauê)
  2) CLEAN (by Arktekko)
1

Your lib folder is not empty. Are you sure you want to overwrite your application?
 WARNING: This action is irreversible

  1) Yes!
  2) No
1
✓  'Package: get installed!
✓  File: main.dart created successfully at path: lib\\main.dart
✓  File: home_controller.dart created successfully at path: ./lib\app\modules\home\\controllers\\home_controller.dart
✓  File: home_view.dart created successfully at path: ./lib\app\modules\home\\views\\home_view.dart
✓  File: home_binding.dart created successfully at path: ./lib\app\modules\home\\bindings\\home_binding.dart
✓  File: app_routes.dart created successfully at path: lib\\app\\routes\\app_routes.dart
✓  File: app_pages.dart created successfully at path: lib\\app\\routes\\app_pages.dart
✓  home route created successfully.
✓  Home page created successfully.
✓  GetX Pattern structure successfully generated.

Running `flutter pub get` …

$ flutter pub get
Running "flutter pub get" in strapi_flutter_internation_poc...

So far we have a Flutter-based project structure.

Next, let us incorporate Strapi into the project.

Step two, integrate into Strapi

https://strapi.io/

Enter the project directory

 cd .\strapi_flutter_internation_poc

Use "create-strapi-app" to initialize the project

npx create-strapi-app strapi
npx: installed 146 in 14.856s
? Choose your installation type Quickstart (recommended)
? Would you like to use a template? (Templates are Strapi configurations designed for a specific use case) No
Creating a quickstart project.
Creating a new Strapi application at D:\poc\strapi_flutter_internation_poc\strapi.
Creating files.
Dependencies installed successfully.

Your application was created at D:\poc\strapi_flutter_internation_poc\strapi.

Available commands in your project:

  yarn develop
  Start Strapi in watch mode.

  yarn start
  Start Strapi without watch mode.

  yarn build
  Build Strapi admin panel.

  yarn strapi
  Display all available commands.

You can start by doing:

  cd D:\poc\strapi_flutter_internation_poc\strapi
  yarn develop


> strapi@0.1.0 build D:\poc\strapi_flutter_internation_poc\strapi
> strapi build "--no-optimization"

Building your admin UI with development configuration ...

√ Webpack
  Compiled successfully in 27.43s

Running your Strapi application.

Here Strapi is installed successfully and started locally http://localhost:1337

After you can see this interface, you can pause it first, and modify the configuration of Strapi first. Point the address of the default Sqlite database in Strapi to the assets folder of the Flutter project.

First create the corresponding folder assets/db

edit [project_root]/strapi/config/database.js

module.exports = ({ env }) => ({
  defaultConnection: 'default',
  connections: {
    default: {
      connector: 'bookshelf',
      settings: {
        client: 'sqlite',
        filename: env('DATABASE_FILENAME', '../assets/db/data.db'),
      },
      options: {
        useNullAsDefault: true,
      },
    },
  },
});

Restart the Strapi project after the modification is completed

npm run develop

admin@poc.com
nrVABVAAYq9geTY

Modify the configuration file pubspec.yaml of the Flutter project and put the path of the database under assets

flutter: 
  assets: 
    - assets/db/
  uses-material-design: true

In subsequent developments, Flutter can use Strapi's database files.

Now see the project structure as shown below

How to create a Offline Internationalization App:Technology

nasa.wang — Sun, 10 Oct 2021 11:43:08 +0000

I have provided a different idea here. The core idea is to embed the part of the cloud API multilingual query that was originally in the cloud into the App by using Sqlite. There are three reasons:

First, for specific content and data with information boundaries, embedding the data from the cloud to the local will get a faster response speed.
Second, the users of the multilingual APP are people from various countries and regions. The network situation is complicated. The data can be embedded from the cloud to the local without being affected by the network and can be used offline.
Third, I don’t have a cloud server 😂.

Technology

The APP is developed using Flutter, which can complete both iOS and Android versions of the APP at the same time. At the Flutter framework level, I chose the GetX framework. This framework is very easy to get started and is a highly integrated framework. Basically commonly used functions such as routing, state machines, dependencies, themes, internationalization, etc. have been built in. It can be said to be very friendly to novices.

For the operation of Sqlite data, I chose Floor in the Flutter library. I really like his definition of Entity, which is very friendly for data extraction and binding in subsequent development. Of course, the library currently does not support a full set of Sqlite features, for example, you cannot use "count(*)" to count data, but you can use the view features in Sqlite to circumvent it.

In terms of content management, Strapi is selected here, using the Sqlite database and enabling multi-language support. In this way we will get a Sqlitedb database. By customizing the configuration file of Strapi, it can be perfectly integrated with the Flutter project.

Recommend some very convenient tools, DBeaver is used to view the actual data structure of the Sqlite database generated by the management Strapi project. There is also a website "remove bg" I really like this website, it can perfectly help you remove the background in the picture material when developing the APP, so that your APP can be a lot more colorful!