A több tartalomszolgáltatási csatorna miatt webhelyeit és webes alkalmazásait a nemzetközi közönség számára kell optimalizálni, ami egyéni felhasználói élményt tesz szükségessé. A nemzetközi felhasználóknak képesnek kell lenniük arra, hogy a tartalmat a helyi vagy preferált nyelvükön tekintsék meg, ami nagyobb forgalmat tesz lehetővé, és kiterjeszti a tartalom elérését. A nemzetköziesítés egy olyan folyamat, amely ezt lehetővé teszi.

A nemzetköziesítés egy olyan folyamat, amelynek során egy alkalmazás több nyelven is támogatja a megjelenítést. A nemzetköziesítés úgy fejleszti a webhelyet, hogy a lokalizáció könnyebbé váljon. Ez azt jelenti, hogy a dinamikus tartalommal való betöltése a felhasználó nyelvi preferenciáinak vagy a felhasználó tartózkodási helyének megfelelően összességében leegyszerűsödik. A nemzetköziesítést a vállalati szintű alkalmazások esetében szabványos üzleti gyakorlatnak tekintik, hogy azokat globálisan értékesítsék.

Ebben a cikkben végigvezetem a nemzetköziesítés és a lokalizáció folyamatát egy Angular alkalmazás esetében az Angular i18n könyvtár segítségével, és később elmagyarázom, hogyan lehetne ezt jobban kezelni egy olyan fej nélküli CMS-szel, mint a ButterCMS.

Miért: Az Angular lokalizáció fontossága a vállalkozás számára

A nyelv a világ különböző kultúráinak szerves része. Egyes helyiek számára örömteli, ha a webes tartalmakat a helyi nyelvükön tekinthetik meg. A lokalizáció az alábbi előnyökkel jár:

• Javítja a felhasználói élményt a webhely előnyös módon történő megjelenítésével
• Növeli a forgalmat, mivel a felhasználók jobban érdeklődnek a személyre szabott tartalom iránt
• A termékértékesítés világszerte javul a támogatásnak köszönhetően. a helyi tömeg támogatásának köszönhetően több régióban
• A webes alkalmazás USP-jeként működhet a piacon

Az alkalmazás nemzetközivé tétele csökkenti a többnyelvű webhely létrehozására és karbantartására fordított teljes időt és erőfeszítést. Úgy strukturálja a webhelyet, hogy egyetlen webhely minimális erőfeszítéssel több nyelven is tudjon tartalmat szolgáltatni.

A nemzetköziesítést gyakran i18n-ként rövidítik, ami a nemzetköziesítésre meghatározott szabvány. A következő részben az Angular lokalizáció terminológiáit, fogalmait és az alkalmazás internalizálásának folyamatát fogjuk megérteni egy Angular lokalizációs példán keresztül.

Mi: Angular lokalizáció terminológiái és folyamata

A nemzetköziesítés elsősorban a weboldal tartalmának lokalizálása előtt álló akadályok elhárítására és a weboldal alkalmassá tételére összpontosít néhány olyan örökölt funkcióra, mint a kétirányú szöveg, a nem szabványos karaktertérképek támogatása, a függőleges szöveg támogatása és főként a világ regionális nyelveinek támogatása.

El kell értenünk néhány terminológiát és fogalmat, mielőtt beleugranánk a folyamatba:

Lokál

A lokál annak a helynek az azonosítója, ahonnan a tartalmat elérjük. A lokalizációk kulcsszavak szabványosított listáját jelölik annak a helynek az azonosítására, ahonnan a webes tartalomhoz hozzáférünk. Minden webalkalmazás-keretrendszer meghatározza a követendő helyi kódok saját készletét. Ezek azonban egy bizonyos szabványt követnek, hogy könnyen azonosíthatók legyenek.

Kétirányú szöveg

A világ legtöbb nyelvét balról jobbra írják. Azonban még ma is számos olyan nyelv van, amelyet jobbról balra írnak és olvasnak. Ez szükségessé teszi, hogy a nemzetköziesítési folyamat támogassa a karakterek bármelyik irányban történő megjelenítésének lehetőségét.

Unicode

Az Unicode a szimbólumok és hangulatjelek szabványa. A világ számos ősi nyelve tartalmaz szimbólumok formájában megjelenő írásjeleket. A webes alkalmazásoknak alapból támogatniuk kell ezeket a szimbólumokat, hogy nemzetközivé tudják tenni az alkalmazást.

A nemzetköziesítés folyamata elsősorban az alábbi lépéseken alapul:

• A címkék létrehozása minden olyan nyelvterülethez, amelyet támogatni kívánunk
• A webalkalmazás módosítása és a statikus címkék eltávolítása, hogy a dinamikusan betöltött címkékkel helyettesítsük őket
• Transzformációk alkalmazása a tartalomra, például a dátumra, képek, idő, naptárak és mások
• Az alkalmazás alapértelmezett nyelvterületének beállítása

A következő részben ezt a folyamatot fogjuk végigjárni egy Angular alkalmazás esetében.

A ButterCMS és az Angular használatával dinamikus tartalmat tesz lehetővé, amelyet a marketingesei frissíthetnek.

Kezdés

Az alkalmazás nemzetközivé tételének megkezdéséhez szükség van egy kész Angular alapalkalmazásra. Abban az esetben, ha nem rendelkezik ilyennel, használhatja az itt letölthető alkalmazást.

A bemutatóhoz az Angular v9-et fogjuk használni. Az Angular v9 alapkönyvtárakon kívül az Angular i18n könyvtárat fogjuk felhasználni a folyamathoz. A bemutatóban egy meglehetősen egyszerű üzleti weboldalt fogunk nemzetközivé tenni. A végeredményről készült honlap képernyőkép az alábbiakban látható:

A szükséges csomagok telepítése és az alkalmazás beállítása

A nemzetköziesítés folyamatának megkezdéséhez az első lépés a szükséges nemzetköziesítési plugin hozzáadása az Angular projekthez. Ehhez hajtsa végre az alábbi parancsot.

ng add @angular/localize

A telepített csomag minden olyan támogató funkciót biztosít, amely megkönnyíti a nemzetköziesítés megvalósítását. Egy előre definiált konstanskészletet biztosít a lokalitás meghatározásához, valamint néhány szabványos metódust a szöveg, például a dátum és az idő formázásához.

Most itt az ideje, hogy beállítsuk a lokalitásokat az alkalmazásunkhoz. A locale jelentését már tárgyaltuk az előző részben. A támogatott területi lista beállításának célja, hogy az alkalmazás eldönthesse, hogy melyik területi listát kell megjelenítenie, amikor a megtekintő alapján a helyi. Az Angular az en-US-t használja alapértelmezett locale-ként a tartalom rendereléséhez, ha az adott locale-t nem támogatja az alkalmazás. Egy adott locale regisztrálásához módosítsa a app.module.ts fájlt az alábbiak szerint.

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module';import { AppComponent } from './app.component';import { AboutComponent } from './about/about.component';import { ContactComponent } from './contact/contact.component';import { NavComponent } from './nav/nav.component';import { HomeComponent } from './home/home.component';import { FooterComponent } from './footer/footer.component';import { registerLocaleData } from '@angular/common';import localeFr from '@angular/common/locales/fr';import localeDe from '@angular/common/locales/de';registerLocaleData(localeFr);registerLocaleData(localeDe);@NgModule({ declarations: , imports: , providers: , bootstrap: })export class AppModule {}

Megjegyezzük itt, hogy két különböző locale fájlt importáltunk – francia és német – és regisztráltuk ugyanazt. A támogatni kívánt régiónak megfelelő locale azonosításához az Angular locales-t vizsgálhatja meg.

A következő lépés az, hogy teszteljük, hogy ez az implementáció működik. Ehhez meg kell jelölnünk a statikus címkéket, hogy támogassák a nemzetköziesítést. Ehhez jelöljük meg a HTML-címkéket a i18n attribútummal az alábbiak szerint:

<h6 i18n>we are ready to help you</h6>

Ezt az attribútumot az Angular fordítóprogramok ismerik, és segít a fordítómoduloknak azonosítani a helyspecifikus fordításokkal módosítandó címkéket. Továbbá, hogy pontosabbak legyünk, hozzáadhatunk egy egyedi azonosítót, jelentést vagy leírást a címkéhez az alábbiak szerint:

Megjelölés & Leírás

<h6 i18n="slidersubheading|Pointer text for the customer">we are ready to help you</h6>

A fenti kódrészletben az i18n érték első darabja a tartalom jelentése, a cső(|) utáni másik darab pedig a tartalom leírása. Ez segít a fordítónak pontosan azonosítani, hogy miről szól a tartalom, és ennek megfelelően megjeleníti az egyéni szöveget.

Kiegészítésképpen megadhat egy egyedi azonosítót is a @@ előtag használatával, ahogy a továbbiakban látható

Identifier

A tag könnyebb azonosítása érdekében a tag egyedi azonosítójának megadására is támaszkodhat. Ez segít az alkalmazandó címke gyorsabb azonosításában. A további részben meg fogjuk érteni, hogy milyen problémával szembesülünk az azonosító nélkül. Egyelőre az azonosító hozzáadásához használjuk az alábbi szintaxist.

<h6 i18n="@@subtopicslider">we are ready to help you</h6>

Lokális fájlok létrehozása

Az alkalmazás egyéni címkék megjelenítésének lehetővé tétele érdekében most létre kell hoznunk az egyéni címkefájlokat minden olyan lokalitáshoz, amelyet támogatni tervezünk. Az alapértelmezett locale fájl létrehozásához használjuk az alábbi parancsot.

ng xi18n

Ezzel a paranccsal kivonjuk az összes címkézett címkét, és egy message.xlf fájlt generálunk belőle. Az alábbi kódrészlet egy ilyen címke tartalmát mutatja a kinyert message.xlf fájlból.

<trans-unit datatype="html"> <source>About Us</source> <context-group purpose="location"> <context context-type="sourcefile">src/app/about/about.component.html</context> <context context-type="linenumber">7</context> </context-group></trans-unit>

Amint látható, a kódrészlet tartalmazza a forrásfájl nevét, a címke egyedi azonosítóját és a megfelelő címkét angol nyelven. Most ahhoz, hogy a tartalom más nyelven – esetünkben franciául és németül – is megjeleníthető legyen, két másik locale fájlt kell létrehozni – messages.fr.xlf és messages.de.xlf. Ezeket a fájlokat fogja felhasználni az alkalmazás készítésekor a megfelelő nyelvekre. A fordítások egyszerűsítése érdekében használhatja az xlf-translate modult.

Lokális alapú tartalom betöltése az alkalmazásba

Végül itt az ideje, hogy konfiguráljuk az alkalmazást a kívánt címkék létrehozására és beépítésére. Ehhez először is építsük fel az alkalmazást francia lokalitással. Az alkalmazás építése előtt konfigurálnunk kell az alkalmazást, hogy felhasználja az általunk létrehozott fájlokat.

Módosítsuk a angular.json konfigurációs fájlt az alábbiak szerint

{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "internationalisation": { "projectType": "application", "i18n": { "locales": { "fr": "messages.fr.xlf", "de": "messages.de.xlf" } }, ... "architect": { "build": { ... "configurations": { "production": { ... }, "fr": { "localize": , ... }, "de": { "localize": , ... } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "internationalisation:build" }, "configurations": { "production": { "browserTarget": "internationalisation:build:production" },"fr": { "browserTarget": "internationalisation:build:fr" }, "de": { "browserTarget": "internationalisation:build:de" } } }, ... } }}, "defaultProject": "internationalisation"}

A fenti módosítás során az alábbi műveleteket hajtottuk végre:

• Hozzáadtuk az i18 konfigurációját, hogy értesítsük az alkalmazást a támogatott lokalizációkról és azok lokális fájljainak helyéről
• Konfiguráltuk a francia(fr) és német(de) építési attribútumokat
• Konfiguráltunk egy másik böngészőcélt a francia és német nyelvhez

A ButterCMS használata az Angularral, hogy dinamikus tartalmat tegyen lehetővé, amelyet a marketingesei frissíthetnek.

Futtassa most az alábbi parancsot, hogy megkapja a francia nyelvű fejlesztői buildet:

ng serve --configuration=fr

A fenti parancs kiszolgálja az Angular alkalmazást francia címkékkel. A francia nyelvű alkalmazás kezdőlapja az alábbiakban látható. Amint látható, a címkék automatikusan kiválasztásra kerülnek a definiált fájlból és felhasználásra kerülnek.

A lokalizált build létrehozásához a következő parancsot használhatja:

ng build --prod --localize

A fenti parancs létrehoz egy lokalizált buildet az összes támogatott nyelvhez. A kimenetet a dist könyvtárban láthatja az alábbiak szerint:

Challenges with Angular application localization

Noha a lokalizáció folyamata meglehetősen egyszerű az Angular esetében, vannak bizonyos kihívások. Ezek közül néhány kihívás a következő:

• Egyedi alkalmazás telepítése minden egyes nyelvterülethez
• A címkék konfigurálása minden nyelvterülethez
• Az idő- és.időigényes fejlesztés
• Minden új tartalom újbóli telepítését igényli az összes lokális build
• Nehéz automatizálni a build és a telepítés folyamatát

Ezekre a kihívásokra a fej nélküli CMS motor, mint a ButterCMS ad megoldást

Az Angular alkalmazások lokalizálása a ButterCMS használatával

A ButterCMS egy fej nélküli motor, amely a tartalom zökkenőmentes kezeléséhez biztosítja a backendet. A tartalom lokalizálása minden vállalati szintű projekt elsődleges követelménye.

A ButterCMS segítségével a következő előnyöket kapja az Angular lokalizációs folyamataihoz:

• Egyszerűsített és automatizált tartalomfordítás a Google Translate segítségével
• Szabályozható fordítási folyamat
• Számos támogatott lokalizáció
• Egyetlen Angular projektépítés több nyelven is képes megjeleníteni a tartalmat
• Az új tartalom több nyelven is megjeleníthető anélkül, hogy újratelepítésre lenne szükség
• Az idő…megtakarítás a szerzők számára
• Nincs szükség fejlesztői beavatkozásra a tartalom frissítéséhez

A ButterCMS használatával történő lokalizáció részletes folyamata itt található.

Következtetés

A nagyméretű szervezeteknek szükségük van a nemzetköziesítésre, és a folyamat egyszerűsítése drasztikus hatással lehet a teljes fejlesztési költségekre. Az Angular elegendő erőforrást biztosít egy alkalmazás nemzetközivé tételéhez a fejlesztés során. A ButterCMS-szel integrálva a backend kezelése könnyedén megoldható, és az új tartalmak több nyelven is megjeleníthetők anélkül, hogy újratelepítésre lenne szükség.