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. Regisztrálj itt. Ingyenes, és nem szükséges hitelkártyát megadni.

A TacoTranslate alkalmazás felhasználói felületén hozz létre egy projektet, majd navigálj 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 kulcs az, amit publicnak nevezünk, a read/write kulcs pedig secret. Például hozzáadhatod őket egy .env fájlhoz a projekted gyökérkönyvtárában.

Továbbá hozzá kell adnod még két környezeti változót: TACOTRANSLATE_DEFAULT_LOCALE és TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Az alapértelmezett tartalék (fallback) helyi beállítás (locale) kódja. Ebben a példában en-re állítjuk (angol).
• TACOTRANSLATE_ORIGIN: A „mappa”, ahová a karakterláncok lesznek tárolva, például a weboldalad URL-je. További információk 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 a titkos read/write API-kulcsot soha ne szivárogtasd ki a kliensoldali éles környezetbe.

A TacoTranslate beállítása

Inicializáld a TacoTranslate-et a React-alkalmazásodban úgy, hogy az alkalmazásodat 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 a Translate komponenst bárhol használhatja az alkalmazásában a lefordított szöveg megjelenítéséhez! Mindenképpen nézze meg dokumentációnkat, ahol további információkat és az Ön beállításához tartozó megvalósítási útmutatókat talál.

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álás é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 iránti igényt, ezzel mérsékelve a lokalizációs költségeket.
• Nagyobb pontosság: A mesterséges intelligencia által támogatott fordítások kontextusnak megfelelő, magas 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élköre növekszik.

Kezdje el még ma!

A React-alkalmazásod automatikusan le lesz fordítva, amikor bármilyen sztringet hozzáadsz egy Translate komponenshez. Ne feledd, hogy csak azok a környezetek tudnak új, lefordítandó sztringeket létrehozni, amelyekhez az API-kulcsnak read/write jogosultsága tartozik.

Ajánlott egy zárt és biztonságos staging környezetet fenntartani, ahol tesztelheted az éles alkalmazásodat, és új sztringeket adhatsz hozzá, mielőtt élesbe lépteted. Ez megakadályozza, hogy bárki bárki ellopja a titkos API-kulcsodat, és potenciálisan felduzzassza a fordítási projektedet illetéktelen sztringek 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!