استخراج مفاتيح i18n باستخدام الذكاء الاصطناعي

تحويل تطبيق React موجود لدعم لغات متعددة هو أحيانًا عملية مملة تتضمن البحث عن النصوص المكتوبة بشكل ثابت واستبدالها بمفاتيح الترجمة.

تعمل واجهة سطر أوامر Lingo.dev بسلاسة مع بيئات التطوير المدعومة بالذكاء الاصطناعي مثل Cursor وGitHub Copilot وأدوات مماثلة لأتمتة استخراج المحتوى القابل للترجمة من مكونات React الخاصة بك.

يمكن استخدام المفهوم الموضح أدناه لأي مجموعة تقنية، ولكن للبساطة ولتوضيح الفكرة، سنستخدم تطبيق React بسيط كمثال.

المتطلبات الأساسية

قبل استخراج المفاتيح، قم بإعداد التدويل الأساسي في تطبيق React الخاص بك. للحصول على تعليمات الإعداد الكاملة، راجع وثائق react-intl.

بعد اتباع إعداد التدويل لمجموعة التقنيات الخاصة بك، يجب أن يكون لمشروعك:

• القدرة على التبديل بين اللغات بشكل ديناميكي في التطبيق
• هيكل مشروع أساسي لتنظيم ملفات الترجمة

عملية الإعداد

تثبيت وتكوين واجهة سطر أوامر Lingo.dev:

npx lingo.dev@latest init

إنشاء ملف مصدر فارغ:

mkdir -p src/locales
echo '{}' > src/locales/en.json

تكوين ملف i18n.json:

{
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "json": {
      "include": ["src/locales/[locale].json"]
    }
  }
}

استخراج المفاتيح باستخدام الذكاء الاصطناعي

حدد مكون React الخاص بك واستخدم بيئة التطوير المتكاملة بالذكاء الاصطناعي لاستخراج النصوص المضمنة في الكود:

قبل الاستخراج:

function WelcomeCard() {
  return (
    <div className="card">
      <h2>Welcome to our platform</h2>
      <p>Start your journey with us today</p>
      <button>Get started</button>
    </div>
  );
}

متطلبات الاستخراج:

1. استبدال النصوص المضمنة في الكود بمكونات وخطافات react-intl
2. استخدام تنسيق ICU للمتغيرات وصيغ الجمع
3. هيكلة المفاتيح بشكل هرمي حسب تنظيم المكونات
4. إضافة جميع المفاتيح إلى ملف JSON المصدر
5. الحفاظ على اتساق اصطلاحات التسمية

استعلام الذكاء الاصطناعي:

Extract all hardcoded strings from React components and:

1. Replace with react-intl:
   - Use useIntl hook for dynamic strings
   - Use FormattedMessage for static text
   - Add ICU formatting for variables ({name}) and plurals ({count})

2. Structure translation keys:
   - Group by component hierarchy (components.*, pages.*)
   - Use descriptive, nested keys (header.nav.home)
   - Match component structure in JSON

3. Update locales:
   - Add all keys to src/locales/en.json
   - Maintain consistent naming across app

بعد الاستخراج بواسطة الذكاء الاصطناعي:

import { useIntl } from "react-intl";

function WelcomeCard() {
  const intl = useIntl();

  return (
    <div className="card">
      <h2>{intl.formatMessage({ id: "welcome.title" })}</h2>
      <p>{intl.formatMessage({ id: "welcome.description" })}</p>
      <button>{intl.formatMessage({ id: "welcome.getStarted" })}</button>
    </div>
  );
}

ملف en.json المُنشأ:

{
  "welcome.title": "Welcome to our platform",
  "welcome.description": "Start your journey with us today",
  "welcome.getStarted": "Get started"
}

المعالجة الدفعية

للمكونات المتعددة، حدد جميع الملفات واستخدم نفس الموجه الشامل. يمكن لبيئات التطوير المتكاملة المدعومة بالذكاء الاصطناعي مثل Cursor وGitHub Copilot وغيرها معالجة ملفات متعددة في وقت واحد، مع الحفاظ على تسمية المفاتيح بشكل متسق عبر تطبيقك.

إنشاء الترجمة

بمجرد أن تستخرج بيئة التطوير المتكاملة للذكاء الاصطناعي المفاتيح، قم بإنشاء الترجمات:

npx lingo.dev@latest i18n

هذا ينشئ إصدارات مترجمة من ملف المصدر الخاص بك:

src/locales/
  en.json    (المصدر مع المفاتيح المستخرجة)
  es.json    (الترجمات الإسبانية)
  fr.json    (الترجمات الفرنسية)
  de.json    (الترجمات الألمانية)

التحقق

بعد الاستخراج، تحقق من الإعداد الخاص بك:

تحقق من تغطية الترجمة:

npx lingo.dev@latest i18n --frozen

يفشل هذا الأمر إذا كانت هناك أي ترجمات مفقودة، مما يضمن تغطية كاملة.

اختبر باستخدام لغات مختلفة:

// قم بتبديل اللغة في تطبيقك للتحقق من عمل الترجمات
<IntlProvider locale="es" messages={spanishMessages}>
  <WelcomeCard />
</IntlProvider>