أفضل حل للتدويل (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: "المجلد" حيث سيتم تخزين سلاسل النص الخاصة بك، مثل عنوان URL لموقعك الإلكتروني. اقرأ المزيد عن الأصول هنا.

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 السري الخاص بك، ومن الممكن أن يمنع تضخم مشروع الترجمة الخاص بك عن طريق إضافة سلاسل غير مرغوب فيها.

Be sure to check out the complete examples over at our GitHub profile. If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Translate for free!