Frontend'i rahvusvahelistamine: põhjalik juhend mitmekeelse toe jaoks

Tänapäeva ühendatud maailmas ei ole globaalsele publikule suunatud veebirakenduste loomine enam luksus, vaid vajadus. Frontend'i rahvusvahelistamine (sageli lühendatult i18n, mis tuleneb 18 tähest 'i' ja 'n' vahel) on protsess, mille käigus kujundatakse ja arendatakse rakendus nii, et seda saaks kohandada erinevatele keeltele ja piirkondadele ilma tehnilisi muudatusi tegemata. See on enamat kui lihtsalt tõlkimine; see hõlmab kasutajaliidese (UI), sisu ja funktsionaalsuse kohandamist vastavalt erinevate lokaatide kultuurilistele ja keelelistele ootustele.

Miks on frontend'i rahvusvahelistamine oluline?

Tugeva i18n'i rakendamine pakub mitmeid eeliseid:

• Laiendatud haare: Sisenege uutele turgudele ja jõudke oluliselt suurema publikuni, pakkudes sisu nende emakeeles. Näiteks on toote turuletoomine Hispaanias palju edukam, kui seda esitletakse hispaania keeles, mitte ainult inglise keeles.
• Parem kasutajakogemus: Kasutajad on tõenäolisemalt valmis suhtlema veebisaidi või rakendusega, mis räägib nende keelt ja austab nende kultuurinorme. See toob kaasa suurema rahulolu, lojaalsuse ja konversioonimäärad. Kujutage ette Jaapani kasutajat, kes satub täielikult ingliskeelsele veebisaidile. Tal võib olla raskusi sisu mõistmisega ja liideses navigeerimisega, mis viib pettumuse ja lõpuks lahkumiseni.
• Parem brändi maine: Kaasamisele ja globaalsele ligipääsetavusele pühendumise demonstreerimine parandab teie brändi mainet ja positsioneerib teid tulevikku vaatava organisatsioonina. Lokaliseeritud sisu pakkumine näitab austust erinevate kultuuride vastu ja annab märku, et teie ettevõte väärtustab oma rahvusvahelisi kliente.
• Vähendatud tugikulud: Selge ja arusaadav sisu vähendab keelebarjääridest tulenevat klienditoe vajadust. Vähem tugipäringuid tähendab madalamaid tegevuskulusid ja tõhusamat töövoogu.
• SEO eelised: Lokaliseeritud sisu parandab teie otsingumootoritele optimeerimist (SEO) erinevates piirkondades, muutes kasutajatel lihtsamaks teie veebisaidi leidmise oma emakeeles. Otsingumootorid eelistavad sisu, mis on asjakohane kasutaja asukoha ja keeleseadete jaoks.

Frontend'i rahvusvahelistamise põhimõisted

Enne tehniliste aspektide juurde sukeldumist defineerime mõned põhimõisted:

• Lokaat (Locale): Lokaat identifitseerib konkreetse geograafilise piirkonna ja keele. Tavaliselt esitatakse see keelekoodi (nt 'en' inglise keele jaoks, 'fr' prantsuse keele jaoks) ja riigikoodiga (nt 'US' Ameerika Ühendriikide jaoks, 'CA' Kanada jaoks). Näideteks on 'en-US', 'fr-FR', 'es-ES', 'de-DE', 'ja-JP' ja 'zh-CN'. Lokaat määrab keele, kuupäeva ja kellaaja vormingud, valuutasümbolid ja muud kultuurilised tavad.
• Ressursikogumid (tõlkefailid): Need failid sisaldavad tõlkeid kõikidele teie rakenduses kasutatavatele tekstistringidele. Igal lokaadil on oma ressursikogum. Struktuur on tavaliselt võtme-väärtuse paar, kus võti on identifikaator ja väärtus on selle võtme tõlgitud tekst. Need failid on sageli JSON-vormingus.
• Rahvusvahelistamine (i18n): Rakenduse kujundamise ja arendamise protsess nii, et seda saaks kohandada erinevatele keeltele ja piirkondadele. See hõlmab rakenduse loogika eraldamist lokaliseeritud sisust.
• Lokaliseerimine (l10n): Rahvusvahelistatud rakenduse kohandamise protsess konkreetsele lokaadile. See hõlmab teksti tõlkimist, kuupäeva ja kellaaja vormingute kohandamist ning muude kultuuriliste tavade käsitlemist.

Sammud frontend'i rahvusvahelistamise rakendamiseks

Siin on samm-sammuline juhend i18n'i rakendamiseks teie frontend rakenduses:

1. i18n teegi valimine

Erinevate frontend raamistike jaoks on saadaval mitmeid suurepäraseid i18n teeke. Õige teegi valimine sõltub teie projekti konkreetsetest nõuetest ja kasutatavast raamistikust. Mõned populaarsed valikud on järgmised:

• i18next: Väga populaarne ja mitmekülgne JavaScripti i18n teek, mis töötab erinevate raamistikega (React, Angular, Vue.js jne) ja isegi puhta JavaScriptiga. See on tuntud oma paindlikkuse ja ulatuslike funktsioonide poolest, sealhulgas mitmusevormid, kontekstipõhised tõlked ja tõlgete laadimine erinevatest allikatest.
• React Intl (FormatJS): Teek, mis on spetsiaalselt loodud Reacti rakenduste jaoks. See pakub laiaulatuslikku tööriistakomplekti kuupäevade, numbrite ja valuutade vormindamiseks ning mitmusevormide ja soolise vastavuse käsitlemiseks. See on osa suuremast FormatJS projektist.
• ngx-translate: Võimas i18n teek Angulari rakenduste jaoks. See pakub funktsioone nagu tõlkefiltrid (pipes), direktiivid ja HTTP laadijad tõlkefailide haldamiseks. See integreerub sujuvalt Angulari sõltuvuste süstimise süsteemiga.
• vue-i18n: Ametlik i18n teek Vue.js jaoks. See pakub lihtsat ja intuitiivset API-d teie Vue.js komponentide tõlkimiseks. See toetab funktsioone nagu mitmusevormid, nimega vormindamine ja kohandatud direktiivid.

I18n teegi valimisel arvestage järgmiste teguritega:

• Raamistiku ühilduvus: Veenduge, et teek ühildub teie kasutatava raamistikuga (React, Angular, Vue.js jne).
• Funktsioonid: Hinnake teegi funktsioone, nagu mitmusevormid, kuupäeva ja kellaaja vormindamine, valuuta vormindamine ja tugi erinevatele tõlkefailivormingutele.
• Kasutuslihtsus: Valige teek, mida on lihtne õppida ja kasutada. Arvestage dokumentatsiooni selgust ja näidete olemasolu.
• Jõudlus: Arvestage teegi mõju teie rakenduse jõudlusele. Mõned teegid võivad olla jõudsamad kui teised.
• Kogukonna tugi: Kontrollige teegi kogukonna tuge. Suur ja aktiivne kogukond võib pakkuda väärtuslikku abi ja ressursse.

2. i18n teegi seadistamine

Kui olete i18n teegi valinud, peate selle oma projektis installima ja seadistama. Seadistusprotsess sõltub valitud teegist. Siin on üldine ülevaade kaasatud sammudest:

1. Installige teek: Kasutage teegi installimiseks oma paketihaldurit (npm, yarn või pnpm). Näiteks i18next'i installimiseks käivitage: npm install i18next või yarn add i18next.
2. Seadistage teek: Initsialiseerige i18n teek oma soovitud seadetega, näiteks vaikelokaat, tõlkefailide asukoht ja muud konfiguratsioonivalikud. See hõlmab tavaliselt i18n konfiguratsioonifaili loomist või teegi initsialiseerimist teie põhirakenduse failis.
3. Laadige tõlkefailid: Laadige iga lokaadi tõlkefailid i18n teeki. Seda saab teha HTTP-päringute abil, failide otse importimisega või kohandatud laadija abil.
4. Määrake algne lokaat: Määrake oma rakenduse algne lokaat. See võib põhineda kasutaja brauseri seadetel, tema asukohal või kasutaja eelistusel.

Näide (kasutades i18next'i Reactiga):

Esmalt installige vajalikud paketid:

            npm install i18next react-i18next i18next-browser-languagedetector i18next-http-backend

            

              
                Copy
              
            
          

Seejärel looge i18next'i seadistamiseks fail i18n.js:

            import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import HttpApi from 'i18next-http-backend';

i18n
  .use(HttpApi)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,
    detection: {
      order: ['localStorage', 'cookie', 'htmlTag', 'queryString', 'navigator'],
      caches: ['localStorage']
    },
    backend: {
      loadPath: '/locales/{{lng}}/translation.json'
    },
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

            

              
                Copy
              
            
          

Lõpuks importige fail i18n.js oma põhirakenduse faili (nt index.js):

            import './i18n';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    
        
    
);

            

              
                Copy
              
            
          

3. Ressursikogumite (tõlkefailide) loomine

Ressursikogumid on teie i18n rakenduse süda. Need sisaldavad iga lokaadi jaoks tõlgitud tekstistringe. Tavaliselt loote iga toetatava keele jaoks eraldi ressursikogumi.

Kõige levinum vorming ressursikogumite jaoks on JSON. Iga JSON-fail sisaldab võtme-väärtuse paari, kus võti on identifikaator ja väärtus on selle võtme tõlgitud tekst.

Näide (en.json - inglise keel):

            {
  "greeting": "Hello, world!",
  "welcome_message": "Welcome to our website.",
  "product_name": "Awesome Product",
  "add_to_cart": "Add to Cart"
}

            

              
                Copy
              
            
          

Näide (fr.json - prantsuse keel):

            {
  "greeting": "Bonjour, le monde !",
  "welcome_message": "Bienvenue sur notre site web.",
  "product_name": "Produit Génial",
  "add_to_cart": "Ajouter au panier"
}

            

              
                Copy
              
            
          

Parimad tavad ressursikogumite jaoks:

• Kasutage tähendusrikkaid võtmeid: Valige võtmed, mis on kirjeldavad ja kergesti mõistetavad. Vältige üldiste võtmete nagu "string1" või "text2" kasutamist. Selle asemel kasutage võtmeid, mis peegeldavad teksti tähendust, näiteks "greeting" või "welcome_message".
• Korrastage oma faile: Korraldage oma ressursikogumid loogilisse kataloogistruktuuri. Levinud lähenemisviis on luua iga keele jaoks eraldi kataloog (nt locales/en, locales/fr).
• Kasutage ühtset vormingut: Kasutage kõigi oma ressursikogumite jaoks ühtset vormingut. See muudab tõlgete haldamise ja hooldamise lihtsamaks.
• Vältige teksti koodi sisse kirjutamist: Ärge kunagi kirjutage teksti otse oma rakenduse koodi. Kasutage alati i18n teeki tõlgitud teksti hankimiseks ressursikogumitest.

4. Tõlke rakendamine oma komponentides

Kui olete oma i18n teegi seadistanud ja ressursikogumid loonud, võite hakata oma komponentides tõlget rakendama. Konkreetne lähenemisviis sõltub kasutatavast i18n teegist ja raamistikust, millega töötate.

Siin on mõned levinud tehnikad:

• Tõlkefunktsioon/Hook: Enamik i18n teeke pakub funktsiooni või hook'i, mida saate kasutada antud võtme jaoks tõlgitud teksti hankimiseks. Näiteks i18next'is saate kasutada funktsiooni t: t('greeting'). React Intlis saate kasutada useIntl hook'i.
• Tõlkekomponendid: Mõned teegid pakuvad komponente, mida saate kasutada tekstistringide mähkimiseks ja nende automaatseks tõlkimiseks. Näiteks React Intlis saate kasutada komponenti FormattedMessage.
• Filtrid (Pipes)/Direktiivid: Angularis saate kasutada tõlkefiltreid tekstistringide tõlkimiseks otse oma mallides. Näiteks saate kasutada filtrit translate: {{ 'greeting' | translate }}.

Näide (kasutades i18next'i Reactiga):

            import React from 'react';
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();

  return (
    

      
{t('welcome_message')}
      
{t('greeting')}
      {t('add_to_cart')}
    
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

5. Mitmusevormide käsitlemine

Mitmusevormide käsitlemine on tekstistringide kohandamine erinevatele kogustele. Erinevatel keeltel on mitmuse moodustamiseks erinevad reeglid. Näiteks inglise keeles on kaks mitmuse vormi (ainsus ja mitmus), samas kui mõnedel keeltel on keerukamad mitmuse reeglid.

Enamik i18n teeke pakub mehhanisme mitmusevormide käsitlemiseks. Need mehhanismid hõlmavad tavaliselt spetsiaalse süntaksi kasutamist teie ressursikogumites, et määrata antud tekstistringi erinevad mitmuse vormid.

Näide (kasutades i18next'i):

en.json:

            {
  "item_count": "{{count}} item",
  "item_count_plural": "{{count}} items"
}

            

              
                Copy
              
            
          

fr.json:

            {
  "item_count": "{{count}} article",
  "item_count_plural": "{{count}} articles"
}

            

              
                Copy
              
            
          

            import React from 'react';
import { useTranslation } from 'react-i18next';

function MyComponent({ count }) {
  const { t } = useTranslation();

  return (
    
{t('item_count', { count: count, plural: count !== 1 })}
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

6. Kuupäevade, numbrite ja valuutade vormindamine

Erinevatel lokaatidel on kuupäevade, numbrite ja valuutade vormindamiseks erinevad tavad. Näiteks Ameerika Ühendriikides on kuupäevavorming tavaliselt KK/PP/AAAA, samas kui Euroopas on see sageli PP/KK/AAAA. Samamoodi on USA dollari valuutasümbol '$', euro puhul aga '€'.

Enamik i18n teeke pakub funktsioone kuupäevade, numbrite ja valuutade vormindamiseks vastavalt praegusele lokaadile. Need funktsioonid kasutavad tavaliselt standardit International Components for Unicode (ICU).

Näide (kasutades React Intl'i):

            import React from 'react';
import { useIntl, FormattedDate, FormattedNumber, FormattedCurrency } from 'react-intl';

function MyComponent() {
  const intl = useIntl();

  const currentDate = new Date();
  const price = 1234.56;

  return (
    

      
Current Date: 
      
Number: 
      
Currency: 
    
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

7. Paremal-vasakule (RTL) keelte käsitlemine

Mõned keeled, nagu araabia ja heebrea keel, kirjutatakse paremalt vasakule. RTL-keelte jaoks rakenduste ehitamisel peate tagama, et teie kasutajaliides on peegeldatud, et see vastaks teksti suunale.

RTL-keelte käsitlemiseks on mitu tehnikat:

• CSS-i loogilised omadused: Kasutage füüsiliste omaduste (nt margin-left, margin-right) asemel CSS-i loogilisi omadusi (nt margin-inline-start, margin-inline-end). Loogilised omadused kohanduvad automaatselt teksti suunaga.
• Atribuut 'direction': Kasutage atribuuti direction, et määrata teksti suund kogu dokumendile või konkreetsetele elementidele. Määrake RTL-keelte jaoks atribuudi direction väärtuseks rtl.
• JavaScripti teegid: Kasutage JavaScripti teeke, mis pakuvad RTL-tuge, näiteks rtlcss.

Näide (kasutades CSS-i loogilisi omadusi):

            .my-element {
  margin-inline-start: 10px; /* LTR-is võrdne margin-left'iga, RTL-is margin-right'iga */
  margin-inline-end: 20px;   /* LTR-is võrdne margin-right'iga, RTL-is margin-left'iga */
}

            

              
                Copy
              
            
          

8. Kasutaja lokaadi tuvastamine

Parima kasutajakogemuse pakkumiseks peate tuvastama kasutaja eelistatud lokaadi. Selleks on mitu viisi:

• Brauseri seaded: Kasutaja brauser saadab eelistatud keelte loendi päises Accept-Language. Saate sellele päisele juurdepääsemiseks kasutada JavaScripti ja määrata kasutaja eelistatud lokaadi.
• Geolokatsioon: Saate kasutada geolokatsiooni kasutaja asukoha määramiseks ja tema eelistatud lokaadi järeldamiseks. See lähenemisviis ei ole siiski alati täpne, kuna kasutajad võivad asuda piirkonnas, kus räägitakse teist keelt.
• Kasutaja eelistused: Lubage kasutajatel oma eelistatud lokaat käsitsi valida teie rakenduse seadetes. See on kõige usaldusväärsem lähenemisviis, kuna see annab kasutajatele täieliku kontrolli oma keele-eelistuste üle. Salvestage kasutaja lokaadi eelistus küpsisesse või kohalikku mällu.

Näide (kasutades JavaScripti brauseri keele tuvastamiseks):

            const userLocale = navigator.languages && navigator.languages[0]
    || navigator.language
    || navigator.userLanguage;

            

              
                Copy
              
            
          

9. Oma rahvusvahelistatud rakenduse testimine

Testimine on ülioluline, et tagada teie i18n rakenduse korrektne toimimine. Peaksite oma rakendust testima erinevates lokaatides, et veenduda, et tekst on õigesti tõlgitud, kuupäevad, numbrid ja valuutad on õigesti vormindatud ning kasutajaliides on kohandatud RTL-keelte jaoks.

Siin on mõned testimisstrateegiad:

• Käsitsi testimine: Testige oma rakendust käsitsi erinevates lokaatides, muutes oma brauseri keeleseadeid või kasutades rakenduses keelevahetajat.
• Automatiseeritud testimine: Kasutage automatiseeritud testimisvahendeid, et veenduda, et tekst on õigesti tõlgitud ja kasutajaliides on kohandatud erinevatele lokaatidele.
• Lingvistiline testimine: Laske emakeelena kõnelejatel oma tõlked üle vaadata, et tagada nende täpsus ja kultuuriline sobivus.

10. Tõlgete haldamine

Tõlgete haldamine võib olla keeruline ülesanne, eriti suurte ja paljude keeltega rakenduste puhul. Kaaluge tõlkehaldussüsteemi (TMS) kasutamist tõlkeprotsessi sujuvamaks muutmiseks.

TMS aitab teil:

• Hoida ja korraldada oma tõlkeid: TMS pakub keskset hoidlat kõigile teie tõlgetele.
• Hallata tõlkijaid: TMS võimaldab teil määrata tõlkeülesandeid erinevatele tõlkijatele ja jälgida nende edenemist.
• Automatiseerida tõlke töövoogu: TMS suudab automatiseerida paljusid tõlkeprotsessi samme, näiteks tõlketaotluste saatmist, tõlgete ülevaatamist ja tõlgete integreerimist teie rakendusse.
• Tagada järjepidevus: TMS aitab tagada teie tõlgete järjepidevuse, pakkudes funktsioone nagu tõlkemälu ja terminoloogia haldamine.

Mõned populaarsed TMS-lahendused on järgmised:

• Transifex
• Phrase (endine Lokalise)
• Crowdin
• Smartling

Täiustatud rahvusvahelistamise tehnikad

Kui olete i18n'i põhitõed selgeks saanud, võite uurida mõningaid täiustatud tehnikaid oma rakenduse rahvusvahelistamise edasiseks täiustamiseks:

• Kontekstipõhised tõlked: Kasutage konteksti, et pakkuda sama võtme jaoks erinevaid tõlkeid sõltuvalt kontekstist, milles seda kasutatakse. Näiteks sõnal "run" võib olla erinev tähendus sõltuvalt kontekstist (nt "run a marathon" vs "the program is running").
• Sooline vastavus: Käsitsege soolist vastavust keeltes, kus nimisõnadel ja omadussõnadel on erinevad vormid sõltuvalt isiku või objekti soost, millele nad viitavad.
• Kahesuunaline tekst: Toetage kahesuunalist teksti, mis ühendab samas dokumendis nii vasakult paremale kui ka paremalt vasakule suunatud teksti. See on levinud keeltes nagu araabia ja heebrea keel.
• Muutujate interpoleerimine: Kasutage muutujate interpoleerimist dünaamiliste väärtuste lisamiseks oma tõlgetesse. Näiteks saate kasutada muutujate interpoleerimist kasutaja nime või praeguse kuupäeva lisamiseks tõlgitud sõnumisse.
• Tõlgete laisklaadimine: Laadige tõlkefaile nõudmisel, et parandada oma rakenduse jõudlust. See on eriti kasulik suurte ja paljude keeltega rakenduste puhul.

Levinud lõksud, mida vältida

Siin on mõned levinud lõksud, mida frontend'i rahvusvahelistamise rakendamisel vältida:

• Teksti koodi sisse kirjutamine: Vältige teksti otse oma rakenduse koodi sisse kirjutamist. Kasutage alati i18n teeki tõlgitud teksti hankimiseks ressursikogumitest.
• Mitmusevormide eiramine: Ärge unustage mitmusevorme erinevates keeltes õigesti käsitleda.
• Ebaühtlase terminoloogia kasutamine: Kasutage kõigis oma tõlgetes ühtset terminoloogiat. TMS aitab teid selles.
• Mitte põhjalik testimine: Testige oma rakendust põhjalikult erinevates lokaatides, et tagada, et kõik töötab õigesti.
• RTL toe unarusse jätmine: Kui toetate RTL-keeli, veenduge, et rakendate RTL toe õigesti.
• Ühe suuruse sobivuse eeldamine: Pidage meeles, et erinevatel kultuuridel on erinevad ootused ja eelistused. Kohandage oma rakendus vastavalt iga lokaadi spetsiifilistele vajadustele. Näiteks isikliku ruumi mõiste varieerub kultuuriti suuresti; kasutajaliidese kujundused peaksid seda peegeldama.

Kokkuvõte

Frontend'i rahvusvahelistamine on ülioluline aspekt globaalsele publikule veebirakenduste loomisel. Järgides selles juhendis toodud samme, saate luua rakendusi, mis on ligipääsetavad, kaasahaaravad ja kultuuriliselt sobivad kasutajatele üle kogu maailma. Investeerimine i18n'i ei tähenda ainult teksti tõlkimist; see tähendab tõeliselt lokaliseeritud ja isikupärastatud kasutajakogemuse pakkumist, mis suurendab kaasatust, lojaalsust ja lõppkokkuvõttes edu globaalsel turul. Ärge unustage valida õigeid tööriistu, planeerida oma rakendust hoolikalt ja testida põhjalikult, et tagada sujuv ja tõhus rahvusvahelistamisprotsess. Tõeliselt kaasava ja kasutajasõbraliku kogemuse loomiseks arvestage oma disainis ja sisus lisaks keelelistele erinevustele ka kultuurilisi nüansse.