Localization Wiki for Multi-Language Support for Self-enrollment mobile app for openIMIS

Introduction

This document provides guidance on dynamically managing localization for applications, using the provided JSON structure as a model. The system supports multiple languages and offers a streamlined way to add or update translations.

Supported Languages

Currently, the application supports the following languages:

French (fr_FR)
English (en_US)
Nepali (np_NP)
Lao (lo_LA)

JSON Structure Overview

The localization data is structured in a JSON format, where each language is represented as a key-value pair. The language code serves as the primary key, and each key contains a set of translated phrases and text strings.

Example Structure

    "languages": {
        "fr_FR": {
            "selected_language": "Fr",
            "greeting": "Bonjour",
            "enrollment": "Inscription",
            "theme": "Thème",
            "openimis": "openIMIS",
            "poverty_status": "Statut de Pauvreté",
            "search": "Recherche",
            "policy": "Politique",
            "search_for_insuree": "Rechercher un assuré...",
            "new_enrollment": "Nouvelle Inscription",
            "head": "Titulaire",
            "head_chfid_is_required": "Le CHFID du titulaire est requis",
            "head_chfid": "CHFID du Titulaire",
            "last_name": "Nom de Famille",
            "given_name": "Prénom",
            "phone": "Téléphone",
            "chfid": "CHFID",
            "offline_enrollment": "Enrolls",
            "search_instruction": "Tapez votre identifiant de membre ou scannez avec le code QR",
            "logout_message": "You are about to logout"
        },
        "en_US": {
            "selected_language": "En",
            "greeting": "Hello",
            "enrollment": "Enrollment",
            "theme": "Theme",
            "openimis": "openIMIS",
            "poverty_status": "Poverty Status",
            "search": "Search",
            "policy": "Policy",
            "search_for_insuree": "Search for Insuree...",
            "new_enrollment": "New Enrollment",
            "head": "Head",
            "head_chfid_is_required": "Head CHFID is required",
            "head_chfid": "Head Chfid",
            "last_name": "Last Name",
            "given_name": "Given Name",
            "phone": "Phone",
            "chfid": "CHFID",
            "offline_enrollment": "Enrolls",
            "search_instruction": "Type your membership ID or scan with QR code",
            "logout_message": "Vous êtes sur le point de vous déconnecter"
        },
        "np_NP": {
            "selected_language": "NP",
            "greeting": "Hello",
            "enrollment": "Enrollment",
            "theme": "Theme",
            "openimis": "openIMIS",
            "poverty_status": "Poverty Status",
            "search": "खोजी",
            "enrollment": "भर्ना",
            "policy": "नीति",
            "search_for_insuree": "विमित खोजी गर्नुहोस...",
            "new_enrollment": "नयाँ दर्ता",
            "head": "प्रमुख",
            "head_chfid_is_required": "घरमुलिको विमित नं अनिवार्य छ",
            "head_chfid": "घरमुलिको विमित नं",
            "last_name": "नाम",
            "given_name": "थर",
            "phone": "फोन",
            "chfid": "विमित नं",
            "offline_enrollment": "भर्ना बिबरण",
            "search_instruction": "बीमा नं अथवा QR कोड स्क्यान गर्नुहोस",
            "logout_message": "लगआउट गर्दैहुनुहुन्छ ?"
        },
        "lo_LA": {
            "selected_language": "ພາສາລາວ",
            "greeting": "ສະບາຍດີ",
            "enrollment": "ລົງທະບຽນ",
            "theme": "ຫົວຂໍ້",
            "openimis": "openIMIS",
            "poverty_status": "ສະຖານະຍາກຈົນ",
            "search": "ຄົ້ນຫາ",
            "policy": "ນະໂຍບາຍ",
            "search_for_insuree": "ຄົ້ນຫາຜູ້ໄດ້ຮັບປະກັນ...",
            "new_enrollment": "ລົງທະບຽນໃຫມ່",
            "head": "ຫົວໜ້າ",
            "head_chfid_is_required": "ຕ້ອງການເລກປະຈໍາຕົວ CHFID ຂອງຫົວໜ້າ",
            "head_chfid": "ເລກປະຈໍາຕົວ CHFID ຂອງຫົວໜ້າ",
            "last_name": "ນາມສະກຸນ",
            "given_name": "ຊື່",
            "phone": "ໂທລະສັບ",
            "chfid": "CHFID",
            "offline_enrollment": "ລົງທະບຽນແບບອອບລາຍ",
            "search_instruction": "ພິມເລກປະຈໍາຕົວຂອງທ່ານ ຫຼື ສະແກນດ້ວຍລະຫັດ QR",
            "logout_message": "ທ່ານກຳລັງຈະອອກຈາກລະບົບ"
        }
    }

Adding a New Language

Identify the language code following the IETF BCP 47 standard (e.g., "es_ES" for Spanish).
Create a new object within the "languages" field using the language code as the key.
Add the translated phrases following the existing structure.
Validate the JSON syntax to ensure consistency.

Example for Adding Spanish

"es_ES": {
    "selected_language": "Es",
    "greeting": "Hola",
    "enrollment": "Inscripción"
}

Updating Existing Translations

Locate the desired language object by its language code.
Update the relevant key-value pairs as needed.
Save the changes and test the application for correctness.

Example: Updating Greeting in French

"fr_FR": {
    "greeting": "Salut"
}

Implementing Localization in Mobile Apps (Flutter)

To dynamically switch between languages in a Flutter application, the localization data can be read directly from a configuration file such as mobile_config.json. The app can then update the UI dynamically based on the selected language.

Structure of mobile_config.json

The configuration file follows the JSON format as shown earlier. It contains language codes as keys, each holding a set of translated phrases.

Implementation in App

Add the flutter_localizations package to your pubspec.yaml file.
Read the configuration file during app initialization using the dart:convert package.
Store the localization data in a state management solution (e.g., Provider or GetX).
Update UI elements dynamically based on the selected language.

Language service

import 'dart:ui';

import 'package:get/get.dart';
import 'package:get/get_core/src/get_main.dart';
import 'package:get_storage/get_storage.dart';

class LanguageService {
  final _storage = GetStorage(); // Assuming you're using GetStorage for persistence
  final Rx<Locale?> _selectedLocale = Rx<Locale?>(null);

  LanguageService() {
    _loadCurrentLocale();
  }

  void _loadCurrentLocale() async {

    final localeCode = await _storage.read<String>('language');
    if (localeCode != null) {
      final parts = localeCode.split('_');
      _selectedLocale.value = Locale(parts[0], parts.length > 1 ? parts[1] : '');
      Get.updateLocale(_selectedLocale.value!);
    }
  }

  void updateLocale(Locale locale) async {
    _selectedLocale.value = locale;
    Get.updateLocale(locale);
    final localeString = '${locale.languageCode}_${locale.countryCode}';
    await _storage.write('language', localeString);
    print('Locale written to storage: $localeString');
  }


  Locale? get currentLocale => _selectedLocale.value;
}

import 'dart:convert';
import 'package:get/get.dart';
import 'package:get_storage/get_storage.dart';

class Languages extends Translations {
  @override
  Map<String, Map<String, String>> get keys {
    final storage = GetStorage();
    final configJson = storage.read('configurations');
    if (configJson == null) {
      // Return default translations if configuration is not available
      return {
        'fr_FR': {
          'selected_language': 'french',
          'greeting': 'Bonjour',
          'enrollment': 'Enrôlement',
          'Theme': 'थेम',
          'openimis': 'openIMIS',
          'poverty_status': 'État de pauvreté',
        },
        'en_US': {
          'selected_language': 'English',
          'greeting': 'Hello',
          'enrollment': 'Enrollment',
          'theme': 'Theme',
          'openimis': 'openIMIS',
          'poverty_status': 'Poverty Status',
        },
      };
    }

    // Parse JSON string to a Map
    // final Map<String, dynamic> config = json.decode(configJson);

    // Extract the languages map
    final Map<String, dynamic> languages = configJson['languages'] ?? {};

    // Convert to required format for GetX
    return languages.map(
          (key, value) {
        final Map<String, String> languageMap = {};
        if (value is Map<String, dynamic>) {
          value.forEach((k, v) {
            languageMap[k] = v.toString();
          });
        }
        return MapEntry(key, languageMap);
      },
    );
  }
}

Advantages

Dynamic updates based on user preferences.
No need to hardcode language strings within the application.
Easy to update or add new languages through mobile_config.json.

To dynamically switch between languages in a mobile application, the localization data can be read directly from a configuration file such as mobile_config.json. The app can then update the UI dynamically based on the selected language.

Structure of mobile_config.json

The configuration file follows the JSON format as shown earlier. It contains language codes as keys, each holding a set of translated phrases.

Implementation Example

Read the configuration file during app initialization.
Extract the language code from user settings or device preferences.
Load the corresponding language object from mobile_config.json.
Update UI elements dynamically.

Example in React Native or other framework

import config from './mobile_config.json';

const getLocalizedText = (key, language) => {
    return config.languages[language][key] || 'Text not available';
};

const greeting = getLocalizedText('greeting', 'en_US');
console.log(greeting);  // Output: Hello

Advantages

Dynamic updates based on user preferences.
No need to hardcode language strings within the application.
Easy to update or add new languages through mobile_config.json. To dynamically switch between languages, use the following logic:

Detect the user's preferred language from settings or browser configuration.
Load the corresponding object from the "languages" JSON.
Update the UI elements based on the loaded translations.

Error Handling

If a key is missing, defaults to english.

Best Practices Followed:

Keep the JSON structure consistent for all language objects.
Use descriptive keys to make translation management easier.
Regularly update the translations to accommodate new UI elements or features.

Contact

For support or contributions, reach out to the development team at info@tinker.com.np.

Localization - Self Enrollment Mobile App

Localization Wiki for Multi-Language Support for Self-enrollment mobile app for openIMIS

Introduction

Supported Languages

JSON Structure Overview

Example Structure

Adding a New Language

Example for Adding Spanish

Updating Existing Translations

Example: Updating Greeting in French

Implementing Localization in Mobile Apps (Flutter)

Structure of mobile_config.json

Implementation in App

Language service

Advantages

Structure of mobile_config.json

Implementation Example

Example in React Native or other framework

Advantages

Error Handling

Best Practices Followed:

Contact

Did you encounter a problem or do you have a suggestion?

Please contact our Service Desk