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

A TacoTranslate alkalmazás felhasználói felületén hozz létre egy projektet, és lépj az API-kulcsok fülre. Hozz létre egy read kulcsot és egy read/write kulcsot. Ezeket környezeti változókként fogjuk elmenteni. A read kulcsot nevezzük public-nak, a read/write kulcs pedig secret. Például felveheted őket egy .env fájlba a projekt gyökérkönyvtárába.

Ezen felül még két környezeti változót kell hozzáadnia: 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 az en-t állítjuk be.
• TACOTRANSLATE_ORIGIN: A „mappa”, ahová a szövegeid lesznek tárolva, például a weboldalad URL-je. Itt olvashatsz bővebben az originokról.

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

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

TacoTranslate beállítása

Inicializáld a TacoTranslate-et a React-alkalmazásodban úgy, hogy az alkalmazást beágyazod a TacoTranslate context providerbe:

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ásában használhatja a Translate komponenst a lefordított szöveg megjelenítéséhez! Feltétlenül nézze meg a dokumentációnkat további információkért és az Ön beállításaihoz igazodó 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 karakterláncok 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 iránti igényt, ezzel mérsékli a lokalizációs költségeket.
• Javított pontosság: AI-vezérelt fordítások biztosítják a kontextusnak megfelelő, pontos és kiváló minőségű eredményeket.
• Skálázható megoldás: Egyszerűen hozzáadhatsz új nyelvek támogatását, ahogy az alkalmazásod és az ü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, új lefordítandó szövegek csak azokban a környezetekben hozhatók létre, ahol 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 új szövegeket adhatsz hozzá élesítés előtt. Ez megakadályozza, hogy bárki ellopja a titkos API-kulcsodat, és potenciálisan felduzzaszthatja a fordítási projektedet, ha illetéktelen szövegeket adnak hozzá.

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!