چگونه برنامه Next.js خود را در 5 دقیقه با Crowdin ترجمه کنید

Summarize this content to 400 words in Persian Lang
برای اکثر وب‌سایت‌هایی که از سیستم‌های مدیریت محتوا مانند Webflow یا WordPress استفاده می‌کنند، محلی‌سازی مشکلی نیست، زیرا می‌توان آن را نسبتاً آسان از طریق سیستم انجام داد.

اما برای راه حل های سفارشی، مانند برنامه های وب سفارشی با استفاده از Next.js یا فقط React ساده، این می تواند بسیار دردناک باشد.

هنگامی که مشتری می خواهد محصول را به زبان دیگری داشته باشد، یکی از توسعه دهندگان باید کد را باز کند و رشته ها را به صورت دستی ترجمه کند، زیرا این فرآیند اغلب فنی است که نمی توان آن را برون سپاری کرد و به طور کامل توسط مترجمان انجام می شود.

اکنون، تصور کنید که باید کل برنامه وب را به بیش از یک زبان ترجمه کنید – به سادگی تعداد زیادی از توسعه دهندگان کارهای دستی برای آن وقت ندارند.

ما تصمیم گرفتیم ببینیم آیا راه حلی برای این موضوع در بازار وجود دارد یا خیر، کمی تحقیق کردیم و تصمیم گرفتیم Crowdin را امتحان کنیم – و فکر می کنیم عالی است! ارائه می دهد:

پشتیبانی از تقریبا همه زبان ها

ادغام با بیش از 600 برنامه (از جمله ادغام GitHub)
آسان برای استفاده از UI برای ترجمه رشته

بنابراین برای نیازهای خود ما یک خط لوله محلی سازی در اطراف Crowdin ایجاد کردیم و می خواستیم آن را با شما به اشتراک بگذاریم.

خط لوله محلی سازی

در برنامه های ما، رشته های قابل ترجمه در موارد خاص ذخیره می شوند فایل های ترجمه (معمولا در فرمت JSON). علاوه بر ذخیره رشته های قابل ترجمه در فایل های ترجمه، ما معمولاً از نوعی استفاده می کنیم چارچوب بین المللی سازی (به عنوان مثال next-i18next برای برنامه های Next.js ما).

نمونه ما ساختار پوشه:

/project-root
/public
/locales
/en-INTL
common.json
/sl-SI
common.json

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مثال فایل ترجمه common.json:

{
“welcome_message”: “Welcome to our app!”,
“login_button”: “Login”,
“logout_button”: “Logout”
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای به روز نگه داشتن فایل های ترجمه، از Crowdin CLI استفاده می کنیم آپلود کنید فایل های منبع و دانلود کنید ترجمه ها

هنگامی که رشته ها در Crowdin در دسترس هستند، مشتریان یا مترجمان اختصاصی ما روی ترجمه رشته ها به زبان های مقصد در بستر وب Crowdin کار می کنند.

پس از اتمام ترجمه، Crowdin's ادغام با GitHub مرحله بعدی را خودکار می کند. Crowdin به طور خودکار یک را ایجاد می کند درخواست کشش در مخزن GitHub پروژه.

نمونه کد

در این بخش، راهنمای گام به گام نحوه اجرای خط لوله از قسمت قبل را بررسی خواهیم کرد.

ایجاد حساب کاربری و پروژه در وب سایت Crowdin

دانلود Crowdin CLI. اگر از macOS استفاده می کنید، به راحتی می توانید استفاده کنید هومبرو:

brew install crowdin@4

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

فایل پیکربندی

پس از نصب، شما نیاز دارید CLI را پیکربندی کنید برای کار با پروژه Crowdin خود.

شما می توانید این کار را با ایجاد یک انجام دهید فایل پیکربندی (crowdin.yml) در دایرکتوری ریشه پروژه شما. فایل پیکربندی را می توان با دستور زیر ایجاد کرد:

crowdin init

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پس از ایجاد فایل پیکربندی، تنظیم کنید اعتبار Crowdin. می توانید آنها را در Crowdin Web UI پیدا کنید.

‘project_id_env’: ‘CROWDIN_PROJECT_ID’
‘api_token_env’: ‘CROWDIN_PERSONAL_TOKEN’
‘base_path_env’: ‘CROWDIN_BASE_PATH’
‘base_url_env’: ‘CROWDIN_BASE_URL’

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

را preserve_hierarchy ویژگی باید تنظیم شود درست است. این تضمین می کند که ساختار دایرکتوری فایل های منبع در Crowdin حفظ می شود.

را files بخش در فایل پیکربندی مشخص می کند که کدام فایل ها باید با Crowdin همگام شوند. این شامل مسیرهای فایل های منبع و مکان های مربوط به آنها برای فایل های ترجمه شده است. اگر زبان مبدأ شما باشد در ایالات متحده و فایل های ترجمه در قرار دارند /public/locales//، files بخش باید به شکل زیر باشد:

– source: ‘/public/locales/en-US/*.json’
translation: ‘/public/locales/%locale%/%original_file_name%’
dest: ‘/%original_file_name%’

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بیایید این را توضیح دهیم:

source را مشخص می کند الگو برای فایل هایی که برای ترجمه آپلود می شوند.
translation محل فایل های ترجمه شده را مشخص می کند به صورت محلی قرار داده شده است. %locale% یک مکان نگهدار برای کد زبان مقصد است.
dest نشان می دهد نام فایل از ترجمه ها

بارگذاری/بارگیری ترجمه از Crowdin

برای ساده کردن فرآیند مدیریت فایل های ترجمه با Crowdin، دو دستورات سفارشی استفاده می شوند: push-i18n و pull-i18n.

ما این دستورات را در پروژه تعریف خواهیم کرد package.json فایل و فرآیند آپلود و دانلود فایل های ترجمه را خودکار می کند.

“push-i18n”: “crowdin upload sources && crowdin upload translations”

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

را push-i18n فرماندهی مسئول است هل دادن هر دو فایل های منبع و هر ترجمه های موجود به کرودین این دستور معمولاً زمانی اجرا می شود که می خواهید Crowdin را با آخرین نسخه فایل های محلی سازی پروژه خود به روز کنید.

“pull-i18n”: “crowdin download sources && crowdin download”

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

را pull-i18n فرمان فرآیند را کنترل می کند دانلود فایل ها از Crowdin تا پروژه محلی شما. این تضمین می کند که جدیدترین ترجمه های موجود در پروژه خود را دارید.

برای استفاده راحت از این دستورات آنها را به دستور اضافه کنید scripts بخش شما package.json فایل

به آپلود کنید رشته های به روز شده شما فقط استفاده کنید push-i18n. به به روز رسانی کنید رشته های محلی شما با تغییراتی که از مترجمان دیگر انجام شده است، اجرا می شوند pull-i18n.

نتیجه گیری

Crowdin یک راه حل عالی برای مشکل دردناک محلی سازی برنامه های وب ارائه می دهد. به جای نگه داشتن کار در سمت توسعه دهنده، کل فرآیند ترجمه را می توان توسط اعضای تیم غیر فنی از طریق داشبورد بصری انجام داد. ادغام های متعدد و پشتیبانی از زبان نیز یک مزیت است!

آیا ابزار محلی سازی دیگری را توصیه می کنید؟ در نظرات به ما اطلاع دهید!

این وبلاگ و تحقیقات زیربنایی آن توسط تیم عالی در zerodays.dev ساخته شده است.

/project-root 
  /public 
    /locales 
      /en-INTL 
        common.json
      /sl-SI 
        common.json

{
  "welcome_message": "Welcome to our app!", 
  "login_button": "Login", 
  "logout_button": "Logout"
}

brew install crowdin@4

crowdin init

'project_id_env': 'CROWDIN_PROJECT_ID'
'api_token_env': 'CROWDIN_PERSONAL_TOKEN'
'base_path_env': 'CROWDIN_BASE_PATH'
'base_url_env': 'CROWDIN_BASE_URL'

- source: '/public/locales/en-US/*.json'
  translation: '/public/locales/%locale%/%original_file_name%'
  dest: '/%original_file_name%'

"push-i18n": "crowdin upload sources && crowdin upload translations"

"pull-i18n": "crowdin download sources && crowdin download"