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

تأكد من مراجعة الأمثلة الكاملة على ملفنا في GitHub. إذا واجهت أي مشكلات، لا تتردد في الاتصال بنا، وسنكون سعداء جدًا لمساعدتك.

تتيح لك TacoTranslate تعريب تطبيقات React الخاصة بك تلقائيًا وبسرعة من وإلى أي لغة. ترجم مجانًا!