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

Ako to funguje

Nainštalujte balík TacoTranslate pomocou npm:

npm install tacotranslate

Keď máte modul nainštalovaný, budete si musieť vytvoriť účet TacoTranslate, prekladový projekt a príslušné API kľúče. Vytvorte si účet tu. Je to zadarmo a nevyžaduje zadanie údajov o kreditnej karte.

V použí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ľúč nazývame secret. Napríklad ich môžete pridať do súboru .env v koreňovom adresári vášho projektu.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Predvolený kód záložnej (fallback) lokality. V tomto príklade ho nastavíme na en pre angličtinu.
• TACOTRANSLATE_ORIGIN: „Priečinok“, kde budú vaše reťazce uložené, napríklad URL adresa vášho webu. Prečítajte si viac o originách tu.

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

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

Nastavenie TacoTranslate

Inicializujte TacoTranslate vo svojej React aplikácii tak, že obalíte aplikáciu poskytovateľom 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>
	);
}

Môžete teraz použiť komponent Translate kdekoľvek vo vašej aplikácii na zobrazenie preloženého textu! Nezabudnite si pozrieť našu dokumentáciu pre viac informácií a implementačné návody špecifické pre vaše nastavenie.

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 šetrí drahocenný čas.
• Nákladovo efektívne: Znižuje potrebu manuálnych prekladov a tým znižuje náklady na lokalizáciu.
• Vylepšená presnosť: Preklady poháňané umelou inteligenciou zabezpečujú kontextovo presné a vysokokvalitné výsledky.
• Škálovateľné riešenie: Jednoducho pridajte podporu pre nové jazyky, ako vaša aplikácia a zákaznícka základňa rastú.

Začnite ešte dnes!

Vaša React aplikácia sa bude automaticky prekladať, keď pridáte akékoľvek reťazce do komponentu Translate. Upozorňujeme, že iba prostredia s oprávneniami read/write k API kľúču budú môcť vytvárať nové reťazce na preklad.

Odporúčame mať uzavreté a zabezpečené stagingové prostredie, kde môžete testovať produkčnú aplikáciu a pridávať nové reťazce pred spustením do prevádzky. Týmto zabránite komukoľvek ukradnúť váš tajný API kľúč a prípadne nafúknuť váš prekladový projekt pridaním nežiaducich 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!