Könnyű lokalizáció 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. Regisztrálj itt. Ingyenes, és nem kell hitelkártyát megadnod.

A TacoTranslate alkalmazás felhasználói felületén hozz létre egy projektet, majd lépj az API-kulcsok fülre. Hozz létre egy read kulcsot és egy read/write kulcsot. Ezeket környezeti változóként fogjuk elmenteni. A read kulcs az, amit public néven hívunk, a read/write kulcs pedig secret. Például hozzáadhatod őket egy .env fájlhoz a projekted gyökérkönyvtárában.

Emellett még két további környezeti változót is hozzá kell adnod: TACOTRANSLATE_DEFAULT_LOCALE és TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Az alapértelmezett tartalék (fallback) nyelvi kód. Ebben a példában az angolhoz a en-t állítjuk be.
• TACOTRANSLATE_ORIGIN: A „mappa”, ahol a szövegeid tárolódnak, például a webhelyed 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

Győződj meg róla, hogy soha ne szivárogtasd ki a titkos read/write API-kulcsot a kliensoldali éles környezetekbe.

A TacoTranslate beállítása

Inicializáld a TacoTranslate-et a React-alkalmazásodban úgy, hogy az alkalmazásodat a TacoTranslate kontextus-szolgáltatójával veszed körül:

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 használhatod az Translate komponenst az alkalmazásodban lefordított szöveg megjelenítésére! Mindenképp nézd meg dokumentációnkat további információkért és a beállításodra szabott 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őtakarékos: Automatizálja a lokalizáció és a karakterláncok gyűjtésének fárasztó 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, így csökkentve 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ő, pontos és magas színvonalú eredményeket.
• Skálázható megoldás: Könnyen hozzáadhat új nyelvek támogatását, ahogy az alkalmazása és ügyfélköre növekszik.

Kezdje el még ma!

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

Ajánljuk, hogy legyen egy zárt és biztonságos staging környezeted, ahol tesztelheted az éles alkalmazásodat, és új stringeket adhatsz hozzá az élesbe lépés előtt. Ez megakadályozza, hogy bárki bárki ellopja a titkos API-kulcsodat, és 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!