التوطين السلس لتطبيقات 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

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

ابدأ اليوم!

سيتم ترجمة تطبيق 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!