Jak przetestować wszystkie języki w aplikacji?

Czyli czego nauczyłem się od Netflixa i ich pseudo language

Przeczytałem ostatnio artykuł z tech bloga Netflixa (https://medium.com/netflix-techblog/pseudo-localization-netflix-12fff76fbcbe). Strasznie mi się spodobał i musiałem go przetestować.

• Czy do apki react native da się łatwo dodać język pseudo?
• Jak to wpłynie na projekt?
• Co się uda realnie osiągnąć?

Z takimi pytaniami usiadłem i zacząłem szukać.

i18next

Trafiłem na fajne rozwiązanie: https://github.com/i18next/i18next

Jest uniwersalne i działa na każdej platformie. A co najważniejsze - działa z react native. Pozwala szybko dodać dowolne języki do aplikacji a instalacja jest mega prosta.

Instalacja i dodanie do projektu

Zacznijmy od dodania paczki:

yarn add react-i18next

Wykorzystamy wersję z "wbudowanym" reactem dla ułatwienia.

Dalej robimy sobie folder i pliki:

/i18n/index.js
/i18n/en.json
/i18n/de.json

W pliku index będziemy trzymać całą konfigurację paczki, a w en.json i de.json odpowiednio język angielski i język niemiecki.

Przejdźmy do konfiguracji:

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import en from './en.json'
import de from './de.json'
// creating a language detection plugin using expo
// http://i18next.com/docs/ownplugin/#languagedetector
// for now it's setting english as default
const languageDetector = {
  type: 'languageDetector',
  async: false,
  detect: () => 'en',
  init: () => {},
  cacheUserLanguage: () => {}
}
i18n
  .use(languageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    resources: {
      en,
      de,
    },
    ns: ['common'],
    defaultNS: 'common',
  })
export default i18n

Jest to domyślna konfiguracja. Wykrywanie języków jest uproszczone do ustawiania na starcie języka angielskiego. Później pewnie będziesz to chciał zmienić, żeby brało język telefonu albo ustawiony w bazie danych. Potem jest inicjalizacja i18next oraz podłączenie języków. Na koniec dodaję też domyślną przestrzeń nazw (https://www.i18next.com/principles/namespaces), która oszczędzi mi trochę pisania przy najpopularniejszych zwrotach.

Na koniec export i mamy to. Nasza apka ma skonfigurowane języki.

Teraz w App.js czy index.js czy gdziekolwiek startujesz apkę musisz dodać jedną linię po wszystkich importach jakie masz.

import React, { Component } from 'react'
import i18n from './src/i18n' // You need to add this line

I gotowe. Teraz, żeby dodać możliwość tłumaczenia robimy tylko:

...
import { withTranslation } from 'react-i18next'
...
render() {
  const { t } = this.props
  return (
    <Text>{t('hello')}</Text>
  )
}
...
export default withTranslation()(OurComponent)

W ten sposób mamy już języki w apce. Dla ułatwienia to przykładowy plik en.json:

{
  "common": {
    "hello": "Welcome in the app!"
  }
}

Pseudo language

Czas na dodanie pseudo language, czyli jak z takiego widoku:

Osiągnąć taki:

Czas na nową paczkę

Nie bardzo lubię dodawać dużo paczek. Zawsze są z nimi problemy, jednak dla tej jednej - warto. Przerobi wybrany język na pseduo, czyli doda więcej znaków, otoczy nawiasami i pojawią się wystające haczyki.

Paczka: https://github.com/MattBoatman/i18next-pseudo

yarn add i18next-pseudo

Dodajemy ją do projektu i od razu wskakujemy do naszej konfiguracji w i18n/index.js.

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import Pseudo from 'i18next-pseudo'
import en from './en.json'
...

Dodajemy ją do importów i następnie używamy:

...
i18n
  .use(new Pseudo({
    letterMultiplier: 4,
    wrapped: true,
    languageToPseudo: 'pseudo'
  }))
  .use(languageDetector)
  .use(initReactI18next)
  .init({
...

Robimy, żeby powtarzało litery aż czterokrotnie. Wszystko zależy od wymagań, bo to ustawienie pokaże jak się będzie apka zachowywać dla długich słów. Dajemy wrapped na true, żeby otoczyło nam nasze wyrazy [wyraz]. Dzięki temu zobaczymy czy przypadkiem nie ucinamy kawałku tekstu na rogach. Potem tylko piszemy jaki język użyjemy do zmiany na pseudo. Ja dodaję nowy do konfiguracji:

...
    resources: {
      en,
      pseudo: en
    },
    ns: ['common'],
    defaultNS: 'common',
    postProcess: ['pseudo']
  })
...

I na końcu tylko dajemy postProcess na nasz pseudo język i gotowe. Teraz wystarczy będzie tylko ustawić język w aplikacji na pseudo i można testować!

import i18n from './i18n'
...
i18n.changeLanguage('pseudo')

Teraz testuj

Koniec z testowaniem w ciemno. Języki o dowolnej długości słów czy wyrazów mogą zostać teraz dodane do aplikacji. Do tego możesz ciągle podczas developmentu używać języka pseudo, ponieważ jest czytelny a skutecznie wydłuża tekst i ułatwia testowanie.