הפתרון הטוב ביותר לאינטרנציונליזציה (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: קוד ה‑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 שלך על ידי עטיפת היישום ב־ספק ההקשר (context provider) של 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!