توطين سلس لتطبيقات 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 فقط ستكون قادرة على إنشاء سلاسل جديدة للترجمة.

نوصي بوجود بيئة اختبار مغلقة ومؤمَّنة (staging) حيث يمكنك اختبار تطبيق الإنتاج الخاص بك وإضافة سلاسل جديدة قبل الإطلاق. سيمنع ذلك أي شخص من سرقة مفتاح 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!