A legjobb megoldás a React-alkalmazások nemzetközivé tételé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ájuk tartozó API-kulcsokat. Hozz létre fiókot itt. Ingyenes, és nem kell bankkártyát megadnod.

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. Elmentjük őket környezeti változókként. A read kulcsot nevezzük public, a read/write kulcs pedig secret. Például hozzáadhatod őket a projekt gyökerében lévő .env fájlba.

Ezen felül még két környezeti változót kell hozzáadnod: TACOTRANSLATE_DEFAULT_LOCALE és TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Az alapértelmezett tartalék (fallback) locale kódja. Ebben a példában az angolhoz en-t állítjuk be.
• TACOTRANSLATE_ORIGIN: A „mappa”, ahol a karakterláncaid 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 a kliensoldali éles környezetekbe.

TacoTranslate beállítása

Inicializáld a TacoTranslate-et a React-alkalmazásodban azzal, hogy az alkalmazást a TacoTranslate kontextus-szolgáltatóba csomagolod:

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 alkalmazásában a Translate komponenst, hogy lefordított szöveget jelenítsen meg! Mindenképpen nézze meg 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 sztringek gyűjtésének unalmas folyamatát, értékes időt takarítva meg Önnek.
• Költséghatékony: Csökkenti a kézi fordítások szükségességét, ezzel mérsékelve a lokalizációs költségeit.
• 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önnyen bővíthető új nyelvek támogatásával, ahogy az alkalmazása és ügyfélköre növekszik.

Kezdje el még ma!

A React-alkalmazásodat automatikusan lefordítja, amikor bármilyen szöveget hozzáadsz egy Translate komponenshez. Megjegyzés: csak azok a környezetek, ahol az API-kulcsnak read/write jogosultságai vannak, képesek új, lefordítandó szövegeket létrehozni.

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