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

Hogyan működik

Telepítse a TacoTranslate csomagot npm-mel:

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 kell megadnod hitelkártyaadataidat.

A TacoTranslate alkalmazás felületén hozzon létre egy projektet, és lépjen az API-kulcsok fülre. Hozzon létre egy read kulcsot és egy read/write kulcsot. Ezeket környezeti változókként fogjuk elmenteni. A read kulcsot public néven említjük, a read/write kulcsot pedig secret. Például hozzáadhatja őket egy .env fájlhoz a projekt gyökérkönyvtárában.

Ezenkívül még két környezeti változót is hozzá kell adnod: 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 az en-t állítjuk be, azaz angolra.
• TACOTRANSLATE_ORIGIN: Az a „mappa”, ahová a szövegeid kerülnek tárolásra, 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

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

A TacoTranslate beállítása

Inicializálja a TacoTranslate-et a React-alkalmazásában úgy, hogy az alkalmazást a TacoTranslate kontextus-providerével csomagolja be:

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álhatja az Translate komponenst az alkalmazásában a lefordított szöveg megjelenítéséhez! Mindenképp nézze meg a dokumentációnkat további információkért és az Ön beállításaihoz tartozó 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 fordítandó szövegek 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, ezáltal mérsékli a lokalizációs költségeket.
• Nagyobb pontosság: A mesterséges intelligencia által támogatott fordítások kontextushoz illő, magas színvonalú eredményeket biztosítanak.
• Skálázható megoldás: Könnyedén adhat hozzá új nyelveket, ahogy az alkalmazása és ügyfélköre növekszik.

Kezdje el még ma!

A React-alkalmazásod automatikusan lefordításra kerül, amikor bármilyen szöveget hozzáadsz egy Translate komponenshez. Ne feledd, hogy csak azok a környezetek, amelyeknél az API-kulcshoz read/write jogosultság tartozik, képesek új, lefordítandó szövegeket létrehozni.

Javasoljuk, hogy legyen egy zárt és biztonságos staging környezeted, ahol tesztelheted az éles alkalmazást, és előzetesen hozzáadhatod az új szövegeket, mielőtt élesbe mész. Ez megakadályozza, hogy bárki ellopja a titkos API-kulcsodat, és potenciálisan felduzzadja a fordítási projektedet rosszindulatú szövegek 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!