Bezproblémová lokalizácia pre React aplikácie

Ako to funguje

Nainštalujte balík TacoTranslate cez npm:

npm install tacotranslate

Keď máte modul nainštalovaný, budete si musieť vytvoriť účet v TacoTranslate, prekladateľský projekt a prislúchajúce API kľúče. Vytvorte si účet tu. Je to zadarmo a nevyžaduje to pridanie kreditnej karty.

V užívateľskom rozhraní aplikácie TacoTranslate vytvorte projekt a prejdite na kartu API kľúčov. Vytvorte jeden read kľúč a jeden read/write kľúč. Uložíme ich ako premenné prostredia. read kľúč nazývame public a read/write kľúč je secret. Napríklad ich môžete pridať do súboru .env v koreňovom adresári vášho projektu.

Budete musieť pridať ešte dve ďalšie premenné prostredia: TACOTRANSLATE_DEFAULT_LOCALE a TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Predvolený záložný kód lokality. V tomto príklade ho nastavíme na en pre angličtinu.
• TACOTRANSLATE_ORIGIN: „Zložka“, kde budú vaše reťazce uložené, napríklad URL adresa vašej webovej stránky. Viac o pôvodoch si prečítajte tu.

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

Uistite sa, že nikdy neprezradíte tajný read/write API kľúč do produkčných prostredí na strane klienta.

Nastavenie TacoTranslate

Inicializujte TacoTranslate vo vašej React aplikácii tak, že obalíte svoju aplikáciu do poskytovateľa kontextu TacoTranslate:

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>
	);
}

Teraz môžete použiť komponent Translate kdekoľvek vo vašej aplikácii na zobrazovanie preloženého textu! Nezabudnite si pozrieť našu dokumentáciu pre viac informácií a návody na implementáciu prispôsobené vášmu nastaveniu.

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

Výhody používania TacoTranslate

• Úspora času: Automatizuje zdĺhavý proces lokalizácie a zhromažďovania reťazcov, čím vám ušetrí cenný čas.
• Nákladovo efektívne: Znižuje potrebu manuálnych prekladov, čím znižuje vaše náklady na lokalizáciu.
• Zlepšená presnosť: Preklady poháňané AI zabezpečujú kontextovo presné a kvalitné výsledky.
• Škálovateľné riešenie: Jednoducho pridávajte podporu nových jazykov, ako rastie vaša aplikácia a zákaznícka základňa.

Začnite ešte dnes!

Vaša React aplikácia bude automaticky preložená, keď pridáte akékoľvek reťazce do komponentu Translate. Všimnite si, že len prostredia s povoleniami read/write na API kľúči budú schopné vytvárať nové reťazce na preklad.

Odporúčame mať uzavreté a zabezpečené staging prostredie, kde môžete otestovať svoju produkčnú aplikáciu a pridávať nové reťazce pred jej spustením naživo. Týmto sa zabráni tomu, aby niekto ukradol váš tajný API kľúč a potenciálne nafúkol váš prekladateľský projekt pridávaním nežiadaných reťazcov.

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!