أفضل حل للعولمة (i18n) في تطبيقات React

كيف تعمل

قم بتثبيت حزمة TacoTranslate عبر npm:

npm install tacotranslate

عند تثبيت الوحدة، ستحتاج إلى إنشاء حساب في TacoTranslate، ومشروع ترجمة، ومفاتيح API المرتبطة به. أنشئ حسابًا هنا. إنه مجاني، ولا يتطلب منك إضافة بطاقة ائتمان.

داخل واجهة تطبيق TacoTranslate، قم بإنشاء مشروع، وتوجه إلى تبويب مفاتيح API الخاصة به. أنشئ مفتاحًا واحدًا read, ومفتاحًا واحدًا read/write. سنقوم بحفظهما كمتغيرات بيئية. المفتاح read هو ما نسميه public والمفتاح read/write هو secret. على سبيل المثال، يمكنك إضافتهما إلى ملف .env في جذر مشروعك.

ستحتاج أيضًا إلى إضافة متغيري بيئة آخرين: TACOTRANSLATE_DEFAULT_LOCALE و TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: رمز اللغة الافتراضية الاحتياطية. في هذا المثال، سنضبطه على en للغة الإنجليزية.
• TACOTRANSLATE_ORIGIN: "المجلد" حيث سيتم تخزين سلاسل النص الخاصة بك، مثل عنوان موقعك الإلكتروني. اقرأ المزيد عن الأصول هنا.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

تأكد من عدم تسريب مفتاح API السري read/write إلى بيئات الإنتاج على جانب العميل.

إعداد TacoTranslate

قم بتهيئة TacoTranslate في تطبيق React الخاص بك عن طريق تغليف تطبيقك بمزود سياق TacoTranslate:

import React, {useState} from 'react';
import TacoTranslate, {Translate} from 'tacotranslate/react';

const tacoTranslate = createTacoTranslateClient({
	apiKey: 'YOUR_API_KEY',
});

export default function App() {
	const [locale, setLocale] = useState('en');

	return (
		<TacoTranslate client={tacoTranslate} locale={locale}>
			<Translate string="Hello, world!"/>
		</TacoTranslate>
	);
}

يمكنك الآن استخدام مكون Translate في أي مكان داخل تطبيقك لعرض النصوص المترجمة! تأكد من مراجعة توثيقنا لمزيد من المعلومات، وللحصول على أدلة التنفيذ الخاصة بإعدادك.

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

فوائد استخدام TacoTranslate

• توفير الوقت: يُؤتمت العملية المملة للترجمة وجمع النصوص، مما يوفر لك وقتًا ثمينًا.
• فعالية من حيث التكلفة: يقلل من الحاجة للترجمات اليدوية، مما يخفض تكاليف التوطين الخاصة بك.
• دقة محسّنة: تضمن الترجمات المدعومة بالذكاء الاصطناعي نتائج دقيقة وسياقية وعالية الجودة.
• حل قابل للتوسع: أضف دعمًا للغات جديدة بسهولة مع نمو تطبيقك وقاعدة عملائك.

ابدأ اليوم!

سيتم ترجمة تطبيق React الخاص بك تلقائيًا عند إضافة أي سلاسل نصية إلى مكون Translate. لاحظ أن البيئات التي تمتلك أذونات read/write فقط على مفتاح API هي التي ستكون قادرة على إنشاء سلاسل جديدة للترجمة.

نوصي بوجود بيئة اختبار مغلقة ومأمونة حيث يمكنك اختبار تطبيق الإنتاج الخاص بك، وإضافة سلاسل جديدة قبل إطلاقه. سيساعد ذلك في منع أي شخص من سرقة مفتاح API السري الخاص بك، ومنع زيادة حجم مشروع الترجمة الخاص بك عن طريق إضافة سلاسل غير مرغوب فيها.

تأكد من مراجعة الأمثلة الكاملة على صفحة GitHub الخاصة بنا. إذا واجهت أي مشاكل، لا تتردد في التواصل معنا، وسنكون أكثر من سعداء لمساعدتك.

يتيح لك TacoTranslate تعريب تطبيقات React الخاصة بك تلقائيًا بسرعة إلى ومن أي لغة. ترجم مجانًا!