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

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

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!