Könnyed lokalizálás React-alkalmazásokhoz

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ájuk tartozó API-kulcsokat. Itt hozhatsz létre fiókot. Ingyenes, és nem kell hozzá hitelkártyát megadnod.

Nyissa meg a TacoTranslate alkalmazás felhasználói felületét, hozzon létre egy projektet, majd lépjen az API-kulcsok fülre. Hozzon létre egy read kulcsot, és egy read/write kulcsot. Elmentjük őket környezeti változóként. A read kulcs az, amit public néven nevezünk, a read/write kulcs pedig secret. Például hozzáadhatja őket a projekt gyökérkönyvtárában található .env fájlhoz.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Az alapértelmezett tartalék (fallback) locale-kód. Ebben a példában az angolhoz en-t állítjuk be.
• TACOTRANSLATE_ORIGIN: Az a „mappa”, ahol a szövegeid lesznek tárolva, például a weboldalad URL-je. További információ 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 kliensoldali éles környezetekbe.

A TacoTranslate beállítása

Inicializálja a TacoTranslate-et a React-alkalmazásában azzal, hogy az alkalmazást a TacoTranslate kontextus-szolgáltatóba 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 bárhol az alkalmazásodban használhatod a Translate komponenst a lefordított szöveg megjelenítésére! Feltétlenül nézd meg a dokumentációnkat további információkért és az adott beállításodra vonatkozó implementációs ú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álás és a szöveggyűjtés fárasztó folyamatát, értékes időt takarítva meg.
• Költséghatékony: Csökkenti a kézi fordítások szükségességét, ezzel mérsékli a lokalizációs költségeket.
• Javított pontosság: A mesterséges intelligencia által vezérelt fordítások biztosítják a kontextusnak megfelelő, magas színvonalú eredményeket.
• Skálázható megoldás: Könnyedén hozzáadhatsz új nyelvek támogatását, ahogy az alkalmazásod és ügyfélköröd növekszik.

Kezdje el még ma!

A React-alkalmazásod automatikusan le lesz fordítva, amikor bármilyen szöveget hozzáadsz egy Translate komponenshez. Ne feledd, hogy csak azok a környezetek lesznek képesek új, lefordítandó sztringek létrehozására, amelyeknél az API-kulcshoz read/write jogosultság tartozik.

Javasoljuk, hogy legyen egy zárt és biztonságos staging környezeted, ahol tesztelheted az éles alkalmazásodat, és az élesítés előtt hozzáadhatsz új sztringeket. Ez megakadályozza, hogy bárki ellopja a titkos API-kulcsodat, és hogy illetéktelenek által hozzáadott sztringekkel felduzzassák a fordítási projektedet.

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!