ანგულარის i18n
ანგულარის i18n
როცა გვსურს ანგულარში სხვადასხვა ენების შემოტანა, ამ დროს წავაწყდებით ორ ტერმინს: ინტერნაციონალიზაციას და ლოკალიზაციას. ეს ტერმინები
ერთმანეთთან კავშირში არიან თუმცა ისინი ერთს და იმავეს არ ნიშნავენ. ინტერნაციონალიზაცია მეტწილადად მოიხსენიება, როგორც i18n
. ეს არის პროცესი,
როცა ვამზადებთ და დიზაინს ვარჩევთ ჩვენი აპლიკაციისთვის, რომელსაც ექნება მრავალი ენის მხარდაჭერა. ინტერნაციონალიზაციის ნაწილი მოიცავს
შემდგომ ეტაპებს:
- დავყოთ ჩვენი აპლიკაციის კონტენტები თარგმანისთვის და მოვამზადოთ რენდერის პროცესისთვის.
- განვანაახლოთ ჩვენი აპლიკაცია ორმხრივი ტექსტებისთვის:
ltr
(მარცხნიდან მარჯვნივ) ანrtl
(მარჯვნიდან მარცხნივ).
შემდგომ უნდა გადავიდეთ ლოკალიზაციის პროცესზე. ლოკალიზაცია ეს არის პროცესი, როცა ვქმნით ვერსიებს
სხვადასხვა ტიპის ლოკალისთვის. ლოკალში (locale
) იგულისხმება, ამ შემთხვევაში, შემდგომი ასპექტები:
- სხვადასხვა ტექსტების თარგმანი.
- სხვადასხვა ადგილმდებარეობის მიხედვით განსხვავებული დროის ფორმატები, მაგალითად:
7/22/2002
ან22/7/2022
. - სხვადასხვა ტიპის რიცხვები და ვალუტები.
ლოკალის ფორმატია: {ენის_id}-{ენის_გაფართოვება}
მაგალითად:
en-US
(English, The United States)ka-GE
(ქართული, საქართველო)fr-CA
(French, Canada)
ასერომ, თუ ინტერნაციონალიზაცია გულისხმობს ზოგადად აპლიკაციაში სხვადასხვა ენებისთვის მხარდაჭერის შემოტანას, ლოკალიზაცია გულისხმობს აპლიკაციის კონკრეტულ ენაზე მომზადებას.
ინტერნაციონალიზაციის პროცესი საჭიროა რეალურად მოხდეს ერთხელ და შემდგომ მთლიანი აპლიკაცია შედგიძლიათ გახადოთ ლოკალური იმდენი ენისთვის, რამდენი ენისთვისაც გჭირდებათ, კოდის ცვლილების გარეშე. თუ გაზრდით თქვენს აპლიკაციას, აუცილებლად უნდა გაატაროთ ინტერნაციონალიზაციაში ახალი გვერდები.
ინსტალიაცია
ინტერნაციონალიზაციის პაკეტის დასაინსტალირებლად, დაგვჭირდება ანგულარის CLI-ს გამოყენება:
ng add @angular/localize
ინსტალაციის დროს ამოგვიგდებს ეთანხმებით თუ არა ანგულარის პაკეტის დაინსტალირებას, რასაც უნდა დავეთანხმოთ.
შემდგომ შევუდგეთ angular.json-ში build
-ის ქვეშ i18n
ველის დამატებას.
{
"projects": {
// ...
"project_name": {
// ...
"i18n": {
"sourceLocale": "en-US",
"locales": { "ka-GE": "src/locale/messages.ka.xlf" }
},
// ...
"architect": {
// ...
"build": {
// ...
"options": {
// ...
"localize": ["ka-GE"]
}
}
}
}
}
}
ამ კოდის დამატებით ვამბობთ თუ რომელი ლოკალების ჩატვირთვის შესაძლებლობა გვექნება. sourceLocale
არის აპლიკაციის მთავარი ენა, ანუ რა ენაზე დავიწყეთ აპლიკაციის აწყობა. locale
ობიექტი ამ შემთხვევაში განსაზღვრავს თუ ჩვენს აპლიკაციას რომელი ლოკალების მხარდაჭერა გააჩნია და ამავდროულად სად იქნება კონკრეტული ლოკალი მოთავსებული.
ამ შემთხვევაში დავამატეთ "ka-GE
", რომელიც შესაძლებლობას გვაძლევს, რომ ქართული ლოკალი მოვზადოთ, ხოლო მასზე მინიჭებული მისამართი მიუთითებს თუ სად იქნება
მოთავსებული ინფორმაცია ამ ლოკალის შესახებ, ეს ფაილი ჯერ არ შეგვიქმნია მაგრამ მალე შევქმნით. localize
მასივის დამატებით ანგულარს ვეუბნებით,
თუ რომელი ლოკალი შექმნას, როცა მოხდება ლოკალიზაციის პროცესი აპლიკაციაში.
მარტივად დავარედაქტიროთ app.component.html
:
<h1>Page header</h1>
<img src="https://raw.githubusercontent.com/educata/everrest/main/assets/images/educata-bg-white.png" alt="educata project logo" />
ახლა უნდა დავიწყოთ ლოკალიზაციისთვის მომზადება ანუ იმ ადგილების მონიშვნა, რომლის ლოკალიზაცია გვსურს, ამას html
-ში ვაკეთებთ i18n
ატრიბუტის დამატებით.
<h1 i18n>Page header</h1>
ზოგჯერ დაგვჭირდება თვითონ ატრიბუტების გადათარგმნაც, რაც მეტწილად გვეხმარება accsessibility
ნაწილში, მაგალითად: alt
, aria-label
და ა.შ.
<img i18n-alt src="https://raw.githubusercontent.com/educata/everrest/main/assets/images/educata-bg-white.png" alt="educata project logo" />
ხოლო app.component.ts
მხარეს, შევიტანოთ მცირედი მოდიფიკაციები. პირველ რიგში დავაინჯექტოთ კონსტრუქტორში Title
და გამოვიყენოთ დაინჯექტებული სერვისი იმისათვის,
რომ შევცვალოთ დოკუმენტის title
.
title = 'Test page';
constructor(private titleService: Title) {
this.titleService.setTitle(this.title);
}
ამ ნაწილით განახლებას ვუკეთბთ ჩვენს title
მაგრამ გვჭირდება ცოტა განსხვავებული მიდგომა, რომ როცა მოხდება ლოკალიზირება
ეს ცვლადი შეიცვალოს იმ კონკრეტული ენის მნიშვნელობით.
constructor(private titleService: Title) {
this.titleService.setTitle($localize`${this.title}`);
}
$localize
თეგის დამატებით ვნიშნავთ სტრინგებს ლოკალიზაციისთვის.
მაშასადამე, ნებისმიერი ცვლადი, რომელიც გვინდა რომ ტაიპსკრიპტის ფაილში გადაითარგმნოს, მოინიშნება ამ თეგით:
export class MyComponent {
someString = $localize`This value can be localized!`;
messages = [$localize`hello`, $localize`goodbye`];
}
ამ პროცესების გავლის შემდგომ გვჭირდება საშუალება, რომლითაც მონიშნულ ელემენტებს ერთმანეთისგან განვაცალკევებთ თარგმანისათვის.
ng extract-i18n --output-path src/locale
ბრძანების გაშვების შემდგომ უნდა დაგენერირდეს messages.xlf
ფაილი src/locale
-ში, რომელიც არის თავდაპირველი ენისათვის, ჩვენს შემთხვევაში - ინგლისური.
დავაკოპიროთ ეს ფაილი, მოვათავსოთ იგივე დირექტორიაში და დაკოპირებულ ფაილს გადავარქვათ სახელი messages.ka.xlf
-ზე, აქ შევინახავთ ქართულ თარგმანს.
ფაილის გახსნის შევამჩნევთ, რომ თითოეულ მესიჯის ფაილს გააჩნია სექცია, ამ სექციაში არის თარგმანის აიდი და ორიგინალი ტექსტი.
<source>
თეგი მიუთითებს სათარგმნ ტექსტს, რომელსაც უნდა მივამატოთ <target>
თეგი სადაც კონკრეტულად თარგმანი იქნება.
ჩვენ შემთხვევაში:
<source>Page header</source>
<target>გვერდის სათაური</target>
<source>educata project logo</source>
<target>educata პროექტის ლოგო</target>
შევამოწმოთ ჩვენს მიერ ლოკალიზირებული აპლიკაცია, გავუშვათ ბრძანება:
ng serve --o
გაიხსნება ბრაუზერში ჩვენი აპლიკაცია, რომელიც არის გადათარგმნილი ქართულ ენაზე, თუმცა ng serve
მხოლოდ ლოკალურად აწყობს ანგულარის აპლიკაციას,
რომელიც არის უბრალოდ სადეველოპმენტო სერვერი, ჩვენ გვჭირდება ლოკალიზირებული აპლიკაციის მომზადება, იგივე ბილდის პროცესი:
ng build --localize
მომზდებულ ფაილში, ბილდის პროცესის შემდგომ შეამჩნევთ, რომ გვაქვს ორი ფოლდერი en-US
და ka-GE
, ორივე ფოლდერი არის ანგულარის
აპლიკაცია, მაგრამ შეგიძლიათ სხვადასხვა ქვე დომეინებიდან გამომდიანრე ისე ატვირთოთ ფოლდერი, რომ მიიღოთ ორი გადათარგმნილი ვებ აპლიკაცია.
მაგალითად: educata.ge
(ქართულისთვის) და educata.dev
(ინგლისურისთვის).
დასკვნა
ანგულარის ჩაშენებული i18n
პაკეტით, დავბილდეთ (build
პროცესი) ორი სხვადასხვა ენის აპლიკაცია. ეს გვაძლევს საშუალებას,
რომ ავტვირთოთ ორი ან მეტი გადათარგმნილი ვებ გვერდი სხვადასხვა ქვე დომეინზე. შესაძლებელია ძირითადი ენის აპლიკაცია
არ გაუშვათ ქვე დომეინზე და დავტოვოთ ძირ დომეინზე (სტანდარტულ დომეინზე, ქვე დომეინების გარეშე).
შემდგომ თავში განვიხილავთ სხვა პაკეტის გამოყენებას, რომელიც არ არის ანგულარის მიერ შექმნილი თუმცა ისიც ფართოდ გამოიყენება.
მცირედი განსხვავება ის არის, რომ ეს პაკეტი არის third-party
პაკეტი, რომლის მიზანია რეალურ დროში მოხვდეს ენის ცვლილება.