[AVLE] 다국어 적용 방법 (Internalization)

in hive-101145 •  3 years ago 

AVLE은 한국 커뮤니티가 만들고 있는데, 현재 지원되는 언어는 영어뿐입니다.

다국어를 지원하려면 표시되는 모든 문자에 대해서 다국어 지원하도록 코딩되어야 합니다.
AVLE은 현재 다국어 지원을 고려하여 개발되지 않았습니다.

아직 기본기능이 안되는 것들이 있지만, 구성은 갖췄기에 다국어 지원을 검토해 보려고 합니다.
Flutter에서 다국어 지원은 @anpigon님의 글을 참고하여 검토해 보고 있습니다.

[개발][Flutter] 플러터 암호화폐 지갑 앱 개발 일기 6번째

소스코드도 공개되어 있어서 참고가 되었습니다.
https://github.com/anpigon/flutter_steem_wallet_app/blob/develop/assets/locales/ko_KR.json
(git에서 master 브랜치가 아니라 develop 브랜치입니다.)

Getx를 사용한 다국어 지원

image.png

다국어 지원하는 것은 여러 프레임워크에서 대부분 비슷합니다.

  • 문자열에 대한 언어별 파일 생성
  • 코드에서 문자열 사용

Getx도 유사한 방식으로 사용됩니다.
https://github.com/jonataslaw/getx/#internationalization

참고로, Getx는 다국어 지원뿐만 아니라 네비게이션, 상태관리 등 여러 기능을 포함하는 훌륭한 패키지입니다.

언어 파일 생성

간단히 다음과 같이 ko_KR.json 한국어 파일을 생성합니다.

// file: ko_KR.json
{
    "g": {
        "title": "AVLE",
        "username": "계정",
        "password": "암호"
    },
    "Signup": {
        "title": "회원 가입"
    }
}

지원하고자 하는 언어마다 위와 같은 파일을 만들어야 합니다. 그래서 다국어 지원은 각 나라별 자원 봉사자들의 도움이 필요합니다.

Flutter 프로젝트에서 이 파일을 assets/locales/ko_KR.json에 위치시킵니다.

image.png

그런 다음 이 것을 코드에서 사용할 수 있도록 만들어야 합니다. 이 때 Getx를 사용합니다!

Getx CLI 설치

Getx의 다국어 기능을 사용하기 위해서 먼저, Getx CLI를 설치해야 합니다.

다음 페이지를 참고하여 진행합니다. 그런데 설명이 좀 부실한거 같네요.
https://github.com/jonataslaw/get_cli

여기서는 기존 프로젝트에 적용하는 것을 해보겠습니다.

// get_cli 패키지 설치
$ flutter pub global activate get_cli

// 프로젝트 루트 폴더로 이동, 아래 옵션에서 CLEAN 선택 (차이는 모르겠습니다)
$ get init
? Which architecture do you want to use? (Use arrow keys)
  GetX Pattern (by Kauê)
❯ CLEAN (by Arktekko)

// 그러면 다음과 같이 Warning이 표시됩니다. lib 폴더를 덮어쓰면 안됩니다. No를 선택합니다.
? Your lib folder is not empty. Are you sure you want to overwrite your application?
 WARNING: This action is irreversible (Use arrow keys)
  Yes!
❯ No

그러면 설치가 완료 됩니다. 그리고 다음과 같이 쳐보면 get cli 버전이 표시됩니다.

$ get -v
░██████╗░███████╗████████╗   ░█████╗░██╗░░░░░░██╗
██╔════╝░██╔════╝╚══██╔══╝   ██╔══██╗██║░░░░░░██║
██║░░██╗░█████╗░░░░░██║░░░   ██║░░╚═╝██║░░░░░░██║
██║░░╚██╗██╔══╝░░░░░██║░░░   ██║░░██╗██║░░░░░░██║
╚██████╔╝███████╗░░░██║░░░   ╚█████╔╝███████╗ ██║
░╚═════╝░╚══════╝░░░╚═╝░░░   ░╚════╝░╚══════╝ ╚═╝

Version: 1.7.1

언어 변환 파일 생성

그러면 이제 get_cli를 이용해서 위에서 만들었던 ko_KO.json 파일을 코드에서 사용할 수 있도록 하는 파일을 생성합니다.

// 프로젝트 루트 폴더로 이동
$ get generate locales
✓  File: locales.g.dart created successfully at path: lib/generated/locales.g.dart
✓  locale files generated successfully.

그러면 lib/generated/locales.g.dart에 해당 파일이 생성됩니다.

열어보면 이렇게 되어 있습니다.

// DO NOT EDIT. This is code generated via package:get_cli/get_cli.dart

// ignore_for_file: lines_longer_than_80_chars
// ignore: avoid_classes_with_only_static_members
class AppTranslation {
  static Map<String, Map<String, String>> translations = {
    'ko_KR': Locales.ko_KR,
    'en_US': Locales.en_US,
  };
}

class LocaleKeys {
  LocaleKeys._();
  static const g_title = 'g_title';
  static const g_username = 'g_username';
  static const g_password = 'g_password';
  static const Signup_title = 'Signup_title';
}

class Locales {
  static const ko_KR = {
    'g_title': 'AVLE',
    'g_username': '계정',
    'g_password': '암호',
    'Signup_title': '회원 가입',
  };
}

그럼 이제 코드에서 이것을 사용해 보겠습니다.

 TextFormField(
                            decoration: InputDecoration(
                              prefixIcon: const Icon(Icons.alternate_email),
                              hintText: 'g_username'.tr,

여기서 보면 'g_username'.tr처럼 문자 코드 뒤에 .tr만 붙여주면 됩니다.
이 기능을 사용하려면 다음을 임포트 해야 합니다.

import 'package:get/get_utils/src/extensions/internacionalization.dart';

문자열에 파라미터 사용

문자열이 고정되지 않고, 동적으로 바뀌도록 파라미터를 사용할 수 있습니다.

먼저, 언어 파일에 다음과 같이 만듭니다. 파라미터 부분에 @를 사용합니다.

// ko_KR.json 파일
 "PasswordDialog": {
        "password_guide": "@role 또는 그 이상의 암호를 입력하세요",

그런 다음 코드에서 아래 처럼 @로 입력한 부분을 파라미터로 대체할 수 있습니다.

Text('PasswordDialog_password_guide'.trParams({'role': '포스팅'})),

지금까지 get_cli를 이용하여 다국어 언어 파일을 생성하고 사용하는 방법을 알아봤습니다.
한가지 빼먹은 것이 있는데요, 앱을 아래처럼 GetMaterialApp으로 감싸야 한다는 것입니다.

  return GetMaterialApp(
      ...
      translationsKeys: AppTranslation.translations,
      locale: Get.deviceLocale,
      fallbackLocale: const Locale('en', 'US'),
    );

AVLE에 한국어 적용???

AVLE에 한국어를 적용하기 위한 방법을 테스트해봤습니다. 적용하는 것은 어렵지 않으나 상당한 작업량이라 시간이 걸립니다.

언제 적용할지는 검토해보겠습니다. 아직 AVLE이 안정화가 안되어 있어서 그 작업들을 먼저 처리할 예정입니다.

증인 투표 부탁드립니다.

아직 증인 투표 안하신 분들은 여기서 하실 수 있습니다.
https://steemitwallet.com/~witnesses
(find etainclub ranked at 32)

바로 하기
https://steemyy.com/witness-voting/?witness=etainclub&action=approve

@steemcurator01, Thank you for Your Support

hive-101145 avle kr-dev internalization steem development flutter getx
3 years ago by

Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

  • Disagreement on rewards
  • Fraud or plagiarism
  • Hate speech or trolling
  • Miscategorized content or spam

Submit
$4.29
  • Past Payouts $4.29
  • - Author $2.22
  • - Curators $2.07
53 votes
2
Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  
  • Trending
    • [-]
      ·  3 years ago 

    Upvoted! Thank you for supporting witness @jswit.
    default.jpg

    Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

    • Disagreement on rewards
    • Fraud or plagiarism
    • Hate speech or trolling
    • Miscategorized content or spam

    Submit
    $0.00
      1 vote
      [-]
        ·  3 years ago 

      다국어 적용까지~~~ 고생많으십니다.
      get_cli가 설명이 부실하긴하죠. ㅎㅎ
      그리고 CLEAN은 클린아키텍쳐라고 설명되어 있었던 걸로 기억합니다.
      하지만 저는 GetX Pattern 방식으로 코딩하는게 편하더군요

      Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

      • Disagreement on rewards
      • Fraud or plagiarism
      • Hate speech or trolling
      • Miscategorized content or spam

      Submit
      $0.00