التوطين السلس لتطبيقات React

كيف يعمل

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

npm install tacotranslate

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

داخل واجهة تطبيق TacoTranslate، أنشئ مشروعًا وانتقل إلى علامة تبويب مفاتيح واجهة برمجة التطبيقات. أنشئ مفتاحًا واحدًا 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

تأكد من عدم تسريب مفتاح واجهة برمجة التطبيقات السري 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!