نحوه محلی سازی یک برنامه React با استفاده از Transifex Native

مدتی است که ما از Transifex Native برای محلی سازی برنامه‌ React خود استفاده می‌کنیم و می‌خواهیم نشان دهیم که به راحتی می‌توانید این کار را در برنامه خود انجام دهید.

چرا باید به Transifex Native اهمیت دهید؟ زیرا Transifex Native بازطراحی پشته محلی سازی است. برخی از صفات این رویکرد جدید عبارتند از:

یک سینتکس محلی سازی واحد در تمام پروژه‌ها.
امکان فشرده‌سازی آسان محتوا از محیط توسعه یا تولید.
Transifex Native از تحویل محتوای Over The Air (OTA) استفاده می‌کند که به معنی عدم نیاز به فایل یا رفت و برگشت بین بخش‌های مهندسی و محلی‌سازی است.

اما بیایید پیش برویم و به کد برسیم و ببینیم که با چند خط کد و چند دستور ترمینال می‌توانیم چه نتیجه‌ای بگیریم.

نصب وابستگی‌ها

ما قصد داریم یک برنامه React ساده را با کمک ابزار create-react-app به نمایش بگذاریم اما روند کار با هر نوع برنامه React یکسان است. راهنمای ساده ما با چند دستور برای نصب تمام وابستگی‌های مورد نیاز شروع می‌شود.

npx create-react-app txnative-demo
cd txnative-demo
npm install --save @transifex/native @transifex/react @transifex/cli
npm start

سپس باید اطمینان حاصل کنیم که متغیرهای محیط REACT_APP_TRANSIFEX_SECRET و REACT_APP_TRANSIFEX_TOKEN را در اختیار داریم. آن‌ها به منبع Transifex مرتبط هستند. TOKEN یک کلید عمومی در نظر گرفته می‌شود که می‌تواند از یک منبع Transifex بخواند و بعدا در آموزش ما از SECRET استفاده می‌شود تا رشته‌ها را برای ترجمه به یک منبع Transifex فشرده کند.

پیشوند _REACT_APP وجود دارد تا برنامه React بتواند آن‌ها را با کد کلاینت حل کند.

اضافه کردن کد

اکنون که همه موارد لازم را نصب کردیم، می‌توانیم App.js را باز کرده و محتوای آن را با کد زیر جایگزین کنیم:

import React from 'react';

import { tx } from '@transifex/native';
import { T } from '@transifex/react';

tx.init({ token: process.env.REACT_APP_TRANSIFEX_TOKEN, sourceLocale: 'en' });

function App() {
  return (
    <>
      <p><T _str="hello world" /></p>
    </>
  );
}

export default App;

جالب به نظر نمی‌رسد؟ ما کتابخانه‌های مقدماتی Transifex Native را با یک توکن و زبان منبع پروژه وارد می‌کنیم.

جالب‌ترین چیز در اینجا کامپوننت <T> است. این همان چیزی است که رشته‌ای را علامت گذاری می‌کند که قابل ترجمه است. ما رشته خود را به ویژگی str_ اضافه می‌کنیم و هنگامی که در مرحله بعدی وارد می‌کنیم، در Transifex به عنوان یک رشته قابل ترجمه در دسترس خواهد بود.

در اینجا نتیجه آنچه ساخته شده است را می‌بینید:

همچنین اجازه دهید یک سلکتور زبان ساده به این کد اضافه کنیم:

import React from 'react';
 
 import { tx } from '@transifex/native';
 import { T } from '@transifex/react';
 
 tx.init({ token: process.env.REACT_APP_TRANSIFEX_TOKEN, sourceLocale: 'en' });
 
 function App() {
   return (
     <>
       <p><T _str="hello world" /></p>
+      <button onClick={() => tx.setCurrentLocale('en')}>English</button>
+      <button onClick={() => tx.setCurrentLocale('el')}>Greek</button>
     </>
   );
 }

ما دو دکمه اضافه کردیم که زبان فعلی را تنظیم می‌کنند:

جای دادن رشته‌ها

کاری که ما تاکنون انجام داده‌ایم این است که فقط راه خود را از طریق کد پیدا کنیم. ما رشته‌های خود را برای ترجمه با کامپوننت <T> علامت‌گذاری کرده‌ایم و دو دکمه برای تغییر زبان اضافه کرده‌ایم، اما فعلا هیچ کاری انجام نمی‌دهد. وضعیت فعلی در بستر Transifex برای پروژه ما به شرح زیر است:

ما یک زبان داریم:

نحوه محلی سازی یک برنامه React با استفاده از Transifex Native

و یک منبع بدون رشته داخل آن:

نحوه محلی سازی یک برنامه React با استفاده از Transifex Native

مرحله بعدی انتقال محتوای قابل ترجمه ما به Transifex است. این را می‌توان با یک دستور در ترمینال انجام داد:

npx txjs-cli push \
    --token=$REACT_APP_TRANSIFEX_TOKEN \
    --secret=$REACT_APP_TRANSIFEX_SECRET \
    --verbose \
    src

بعد از اجرای این دستور، یک گزارش درباره رشته‌هایی که تجزیه و به Transifex رانده شده‌اند، دریافت می‌کنیم:

Parsing all files to detect translatable content...
⸨████████████████████████████████████████⸩ 5/5 /src/setupTests.js
✓ Processed 5 file(s) and found 1 translatable phrase.
✓ Content detected in 1 file(s).
/src/App.js
  └─ adb6d4ba2eded700fd14e66100fcf268: hello world
    └─ occurrences: ["/src/App.js"]
Uploading content to Transifex... Success
✓ Successfully pushed strings to Transifex.
Created strings: 1
Updated strings: 0
Skipped strings: 0
Deleted strings: 0
Failed strings: 0
Errors: 0

اگر صفحه ویرایشگر را رفرش کنیم، می‌بینیم که یک رشته برای ترجمه در دسترس داریم. بیایید این رشته را ترجمه کنیم:

نحوه محلی سازی یک برنامه React با استفاده از Transifex Native

اگر برنامه خود را رفرش کنیم و روی دکمه "Greek" کلیک کنیم، باید محتوای ترجمه شده را ببینیم:

با جابجایی بین زبان‌ها می‌بینیم که ترجمه‌ها بدون نیاز به رفرش مجدد صفحه بارگیری می‌شوند.

سلکتور زبان فعلی ما رمزگذاری شده است، بنابراین هر بار که ما یک زبان جدید اضافه می‌کنیم باید یک دکمه جدید به صورت دستی به برنامه خود اضافه کنیم. این کار خسته کننده است بیایید آن را خودکار کنیم.

import React from 'react';
 
 import { tx } from '@transifex/native';
-import { T } from '@transifex/react';
+import { T, useLanguages } from '@transifex/react';
 
 tx.init({ token: process.env.REACT_APP_TRANSIFEX_TOKEN, sourceLocale: 'en' });
 
 function App() {
+  const languages = useLanguages();
   return (
     <>
       <p><T _str="hello world" /></p>
       <button onClick={() => tx.setCurrentLocale('en')}>English</button>
-      <button onClick={() => tx.setCurrentLocale('el')}>Greek</button>
+      {languages.map(({ code, name }) => (
+        <button key={code} onClick={() => tx.setCurrentLocale(code)}>
+          {name}
+        </button>
+      ))}
     </>
   );
 }
 
 export default App;

دوباره تغییرات ساده. ما زبان‌های موجود را از Transifex دریافت می‌کنیم و برای ایجاد سوئیچر پویای خود از طریق این زبان‌ها حلقه می‌زنیم. به خاطر داشته باشید که این آخرین باری است که کد برنامه خود را تغییر می‌دهیم.

بیایید سعی کنیم یک زبان جدید به Transifex اضافه کنیم و ببینیم چه اتفاقی برای برنامه React ما می‌افتد:

نحوه محلی سازی یک برنامه React با استفاده از Transifex Native