I18n hay &ldquo;quốc tế h&oacute;a&rdquo; l&agrave; quy tr&igrave;nh dịch ứng dụng hay web sang nhiều ng&ocirc;n ngữ kh&aacute;c. Vấn đề l&agrave;, l&agrave;m thế n&agrave;o để đồng bộ kh&oacute;a JSON trong tất cả tệp ng&ocirc;n ngữ?
Trong b&agrave;i viết n&agrave;y, Tek4vn sẽ hướng dẫn c&aacute;c bạn đồng bộ h&oacute;a tệp bản dịch i18n trong ứng dụng React bằng JavaScript.
<h2 style="text-align: justify;">Giải th&iacute;ch b&agrave;i to&aacute;n</h2>
Một lập tr&igrave;nh vi&ecirc;n phần mềm thường d&agrave;nh nhiều thời gian x&acirc;y dựng phần tử UI chứa văn bản, hướng dẫn hoặc c&aacute;c phần tử HTML kh&aacute;c được d&ugrave;ng để hiển thị văn bản tới người d&ugrave;ng. Văn bản sẽ n&agrave;y phụ thuộc v&agrave;o ng&ocirc;n ngữ được người d&ugrave;ng lựa chọn v&agrave; thường được truy xuất từ tệp JSON tương ứng của c&aacute;c cặp key/value.
<code>// V&iacute; dụ: Tệp tiếng Anh</code>
<code>{</code>
<code>&nbsp;"title": "Example Ltd.",</code>
<code>&nbsp;"tagline": "Find the best examples right here.",</code>
<code>&nbsp;"subtitle": "This is a demo website",</code>
<code>&nbsp;...</code>
<code>}</code>
<code>// V&iacute; dụ: Tệp tiếng Đức</code>
<code>{</code>
<code>&nbsp;"tagline": "Hier finden Sie die besten Beispiele.",</code>
<code>&nbsp;"subtitle": "Dies ist eine Demo-Website",</code>
<code>&nbsp;...</code>
<code>}</code>
Triển khai giao diện người d&ugrave;ng (v&iacute; dụ, khi <code>title</code> v&agrave; <code>tagline</code> được thay thế bằng gi&aacute; trị tương ứng trong tệp ng&ocirc;n ngữ đ&iacute;ch):&nbsp;
<code>&lt;h1&gt;{title}&lt;/h1&gt; =&gt; to render the title text</code>
<code>&lt;p&gt;{tagline}&lt;/p&gt; =&gt; to render the tagline text</code>
<h2 style="text-align: justify;">Vậy vấn đề ở đ&acirc;y l&agrave; g&igrave;?&nbsp;</h2>
Từ kinh nghiệm ph&aacute;t triển nhiều ứng dụng web, bạn sẽ thấy những tệp dịch (tệp JSON) c&oacute; thể c&oacute; k&iacute;ch cỡ rất lớn. Nếu th&ecirc;m 1 bản dịch cho kh&oacute;a mới (giả sử l&agrave; trường <code>description</code>), ch&uacute;ng ta phải sao ch&eacute;p kh&oacute;a n&agrave;y v&agrave;o từng tệp ng&ocirc;n ngữ (nhiều khả năng l&agrave; 1 kh&oacute;a cho mỗi ng&ocirc;n ngữ được hỗ trợ).
C&aacute;c kh&oacute;a c&oacute; thể lồng v&agrave;o nhau kh&ocirc;ng theo thứ tự v&agrave; c&oacute; khả năng bị tr&ugrave;ng lặp.&nbsp; T&oacute;m lại: bước n&agrave;y phải thực hiện theo c&aacute;ch thủ c&ocirc;ng n&ecirc;n rất tốn thời gian v&agrave; kh&ocirc;ng được sắp xếp theo thứ tự.
<h2 style="text-align: justify;">Ng&ocirc;n ngữ dự ph&ograve;ng</h2>
Trong v&iacute; dụ tr&ecirc;n, tệp tiếng Đức kh&ocirc;ng chứa bản dịch cho <code>title</code><code> </code>- tức l&agrave; tệp bản dịch kh&ocirc;ng được đồng bộ h&oacute;a.
Tuy nhi&ecirc;n, với thư viện React như <a href="https://react.i18next.com/">react-i18next</a>, ta c&oacute; thể chỉ định ng&ocirc;n ngữ dự ph&ograve;ng mặc định - trong trường hợp thiếu bản dịch, bản dịch từ ng&ocirc;n ngữ dự ph&ograve;ng (thường l&agrave; tiếng Anh) sẽ được hiển thị tới người d&ugrave;ng.
Nếu bạn nghĩ rằng c&aacute;ch n&agrave;y c&oacute; thể khiến tệp bị ph&acirc;n mảnh th&igrave; bạn đ&atilde; đ&uacute;ng rồi đ&oacute;. Kh&ocirc;ng g&igrave; tệ hơn việc cung cấp cho người d&ugrave;ng cuối một bản dịch lộn xộn v&agrave; kh&ocirc;ng nhất qu&aacute;n.
<h2 style="text-align: justify;">Đồng bộ h&oacute;a c&aacute;c tệp dịch</h2>
Giả sử bạn muốn th&ecirc;m bản ghi nội dung dịch mới bằng ng&ocirc;n ngữ mẹ đẻ (chẳng hạn như tiếng Anh), bạn băn khoăn l&agrave;m thế n&agrave;o để tạo một tập lệnh đơn giản c&oacute; thể triển khai trong phi&ecirc;n cuối c&ugrave;ng nhằm đồng bộ c&aacute;c kh&oacute;a của ng&ocirc;n ngữ &ldquo;ch&iacute;nh&rdquo; với tệp của tất cả ng&ocirc;n ngữ kh&aacute;c. Điều n&agrave;y c&oacute; khả thi kh&ocirc;ng?
Tất nhi&ecirc;n rồi! V&agrave; c&aacute;ch l&agrave;m rất đơn giản!
<h3 style="text-align: justify;">Bước 1: Sắp xếp c&aacute;c ng&ocirc;n ngữ</h3>
Đầu ti&ecirc;n cho tất cả tệp cần dịch v&agrave;o một thư mục (trong v&iacute; dụ n&agrave;y l&agrave; <code>locales</code>) Lưu &yacute; rằng <code>common_en-US.json</code> l&agrave; tệp chứa nội dung l&agrave; ng&ocirc;n ngữ ch&iacute;nh - tiếng Anh.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/f0f09052-d527-4a2a-b5d7-dd8a272f3299" alt="Đồng bộ h&oacute;a tệp bản dịch i18n trong ứng dụng React bằng JavaScript" />
<h3 style="text-align: justify;">Bước 2: Duyệt qua Tệp chứa ng&ocirc;n ngữ ch&iacute;nh</h3>
B&acirc;y giờ cần th&ecirc;m 1 tập lệnh để duyệt qua danh s&aacute;ch c&aacute;c kh&oacute;a JSON trong tệp ng&ocirc;n ngữ ch&iacute;nh (tiếng Anh) v&agrave; trả về tất cả c&aacute;c kh&oacute;a. Tiếp theo, ta so s&aacute;nh c&aacute;c kh&oacute;a trong tệp ng&ocirc;n ngữ kh&aacute;c với c&aacute;c kh&oacute;a n&agrave;y, bổ sung c&aacute;c kh&oacute;a c&ograve;n thiếu.
<pre class="language-python"><code>import translations from "../locales/common_en-US.json";

const keys: string[] = [];

type TranslationRecord = {
 [P in string]: string | TranslationRecord;
};

const _traverseTranslations = (obj: TranslationRecord, path: string[]) =&gt; {
 Object.keys(obj).forEach((key) =&gt; {
 const objOrString = obj[key];
 if (typeof objOrString === "string") {
 keys.push([...path, key].join("."));
 } else {
 _traverseTranslations(objOrString, [...path, key]);
 }
 });
};

export const traverseTranslations = () =&gt; {
 _traverseTranslations(translations, []);
 return keys;
};</code></pre>
<h3 style="text-align: justify;">Bước 3: Đồng bộ h&oacute;a c&aacute;c tệp dịch</h3>
Đ&acirc;y l&agrave; phần triển khai trọng t&acirc;m của b&agrave;i to&aacute;n. Đầu ti&ecirc;n, ta triển khai h&agrave;m <code>traverseTranslations()</code> từ bước 2 để lấy danh s&aacute;ch c&aacute;c đường dẫn c&oacute; trong tệp ng&ocirc;n ngữ ch&iacute;nh (tiếng Anh).
Tiếp theo, ta đọc cấu tr&uacute;c JSON hiện tại của c&aacute;c tệp trong thư mục <code>locales</code>. Ta kiểm tra xem mỗi tệp c&oacute; chứa tất cả đường dẫn/kh&oacute;a cần thiết kh&ocirc;ng (dựa tr&ecirc;n bước trước). Nếu tệp gốc đ&atilde; được dịch sẵn sang ng&ocirc;n ngữ đ&iacute;ch th&igrave; kh&ocirc;ng cần phải thay đổi bản ghi đ&oacute;, nếu kh&ocirc;ng c&oacute; sẵn, ch&uacute;ng ta chỉ cần đơn giản th&ecirc;m bản ghi c&ugrave;ng với bản dịch tiếng Anh.
Cuối c&ugrave;ng, ch&uacute;ng ta ghi tệp trở lại hệ thống tệp v&agrave; định dạng sao cho đẹp mắt bằng c&aacute;ch sử dụng <a href="https://prettier.io/">Prettier</a>. Như vậy l&agrave; ta đ&atilde; ho&agrave;n th&agrave;nh!
<pre class="language-python"><code>import fs from "fs";
import { join } from "path";
import prettier from "prettier";
import english from "../locales/common_en-US.json";
import { traverseTranslations } from "./traverseTranslations";

const paths = traverseTranslations();

const set = (string: string, obj: any, value: string) =&gt; {
 const [current, ...rest] = string.split(".");
 rest.length &gt;= 1
 ? set(rest.join("."), (obj[current] = obj[current] || {}), value)
 : (obj[current] = value);
 return obj;
};

const get = (object: any, path: string, defval = undefined) =&gt; {
 return path
 .split(".")
 .reduce((xs, x) =&gt; (xs &amp;&amp; xs[x] ? xs[x] : defval), object);
};

export interface IHash {
 [locale: string]: number;
}

let missingKeys: IHash = {};

fs.readdirSync(join(__dirname, "../locales")).forEach((locale) =&gt; {
 if (locale === "common_en-US.json") {
 return; // No need to analyse the master file
 }

 const filename = join(__dirname, "../locales", locale);

 let data: any;

 try {
 data = JSON.parse(fs.readFileSync(filename, { encoding: "utf-8" }));
 } catch (err: any) {
 throw new Error(`${locale}: ${err.message}`);
 }

 paths.forEach((p) =&gt; {
 if (get(data, p, undefined) === undefined) {
 set(p, data, get(english, p, undefined));
 missingKeys[locale] = missingKeys[locale] ? missingKeys[locale] + 1 : 1;
 }
 });

 fs.writeFileSync(
 filename,
 prettier.format(JSON.stringify(data), {
 parser: "json",
 })
 );
});

console.log("NEW TRANSLATIONS REQUIRED:");
console.log(missingKeys);</code></pre>
<h3 style="text-align: justify;">Bước 4: Triển khai code sử dụng NPM</h3>
Cuối c&ugrave;ng, ch&uacute;ng ta sẽ triển khai code th&ocirc;ng qua lệnh <code>npm run sync:i18n</code>. Ch&uacute;ng ta sẽ thực thi trong tệp <code>package.json</code> của dự &aacute;n:
<pre class="language-python"><code>{
 "name": "example",
 "version": "1.0.0",
 "private": true,
 "scripts": {
 "start": "react-scripts start",
 "sync:i18n": "ts-node --project ../scripts/tsconfig.json ../scripts/syncTranslations.ts",
 "build": "react-scripts build",
 "test": "react-scripts test"
 }
}</code></pre>
Nếu đang sử dụng TypeScript, nhớ th&ecirc;m <code>tsconfig.json</code> v&agrave;o c&ugrave;ng thư mục với 2 tập lệnh kh&aacute;c. Xem <a href="https://gist.github.com/olafwrieden/b028ce5f74ae933249aa33c149705059%23file-tsconfig-json">v&iacute; dụ tsconfig.json</a>
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/e0de4b35-376c-4daa-855c-a7b61cb7713f" alt="Đồng bộ h&oacute;a tệp bản dịch i18n trong ứng dụng React bằng JavaScript" />
B&acirc;y giờ, mỗi khi th&ecirc;m cặp key/value i18n v&agrave;o bản dịch tiếng Anh, ta chỉ cần chạy <code>npm run sync:i18n</code> để đồng bộ h&oacute;a kh&oacute;a mới n&agrave;y với tệp của tất cả ng&ocirc;n ngữ kh&aacute;c.&nbsp; Kh&aacute; đơn giản, phải kh&ocirc;ng?
<h2 style="text-align: justify;">Hạn chế của phương ph&aacute;p n&agrave;y</h2>
<ol>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Nếu kh&oacute;a của bản dịch thay đổi th&igrave; sao? V&iacute; dụ: <code>title</code> phải được lồng trong <code>app.title</code>&nbsp; - khi thực thi code, <code>app.title</code> được th&ecirc;m v&agrave;o dưới dạng kh&oacute;a mới, thay v&igrave; thay thế kh&oacute;a hiện tại.</li>
</ol>

Admin

i18n với React App và JavaScript

Cùng tác giả

Admin

Có liên quan