A legjobb megoldás a React-alkalmazások nemzetköziesítéséhez (i18n)

Hogyan működik

Telepítse a TacoTranslate csomagot az npm segítségével:

npm install tacotranslate

Miután telepítetted a modult, létre kell hoznod egy TacoTranslate-fiókot, egy fordítási projektet és a hozzá tartozó API-kulcsokat. Hozd létre fiókodat itt. Ingyenes, és nem kell hitelkártyát megadnod.

A TacoTranslate alkalmazás felhasználói felületén hozz létre egy projektet, és navigálj az API-kulcsok fülére. Hozz létre egy read kulcsot és egy read/write kulcsot. Ezeket környezeti változókként fogjuk menteni. A read kulcsot public néven ismerjük, a read/write kulcs pedig secret. Például hozzáadhatod őket a projekt gyökérkönyvtárában található .env fájlhoz.

Ezenkívül még két környezeti változót kell hozzáadnod: TACOTRANSLATE_DEFAULT_LOCALE és TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Az alapértelmezett tartalék (fallback) locale kódja. Ebben a példában a en-t állítjuk be az angolhoz.
• TACOTRANSLATE_ORIGIN: A “mappa”, ahol a szövegeid lesznek tárolva, például a weboldalad URL-je. Bővebben az originokról itt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Ügyelj rá, hogy soha ne szivárogtasd ki a titkos read/write API-kulcsot a kliensoldali éles környezetekbe.

A TacoTranslate beállítása

Inicializálja a TacoTranslate-et a React-alkalmazásában úgy, hogy az alkalmazást a TacoTranslate kontextus szolgáltatójába (context provider) csomagolja:

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>
	);
}

Mostantól a Translate komponenst bárhol használhatod az alkalmazásodban a lefordított szöveg megjelenítéséhez! Mindenképp nézd meg dokumentációnkat további információkért és az adott beállításodra szabott megvalósítási útmutatókért.

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

A TacoTranslate használatának előnyei

• Időmegtakarítás: Automatizálja a lokalizáció és a sztringek gyűjtésének fáradságos folyamatát, így értékes időt takarít meg.
• Költséghatékony: Csökkenti a kézi fordítások szükségességét, ezáltal mérsékli a lokalizációs költségeket.
• Javított pontosság: A mesterséges intelligencia által támogatott fordítások kontextusuknak megfelelően pontos és kiváló minőségű eredményeket biztosítanak.
• Skálázható megoldás: Könnyen hozzáadhat új nyelvek támogatását, ahogy az alkalmazása és ügyfélbázisa nő.

Kezdje el még ma!

A React-alkalmazásod automatikusan lefordításra kerül, amikor bármilyen stringet hozzáadsz egy Translate komponenshez. Ne feledd, hogy csak azok a környezetek, amelyeknél az API-kulcs rendelkezik read/write jogosultsággal, lesznek képesek új, fordítandó stringeket létrehozni.

Javasoljuk, hogy legyen egy zárt, biztonságos staging-környezeted, ahol tesztelheted a produkciós alkalmazást, és élesítés előtt adhatsz hozzá új stringeket. Ez megakadályozza, hogy bárki ellopja a titkos API-kulcsodat, és ezzel potenciálisan felduzzassza a fordítási projektedet nem kívánt stringek hozzáadásával.

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!