Jak przetestować wszystkie języki w aplikacji?

07/14/20192 min czytania — w Programowanie

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',
})
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>
)
}
...
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:

before

Osiągnąć taki:

after

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.

Patryk Szczygło
Programista w Netguru. Bloger od 2017 roku. Miłośnik podróży, książek i elektroniki. Stworzył własny blockchain w JavaScript. Marzy o automatyzacji i robotyce w życiu.