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

Ako to funguje

Nainštalujte balík TacoTranslate pomocou npm:

npm install tacotranslate

Po nainštalovaní modulu budete musieť vytvoriť účet TacoTranslate, prekladový projekt a príslušné API kľúče. Vytvorte si účet tu. Je to zadarmo a nevyžaduje pridanie kreditnej karty.

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ľúč je to, čo 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 tiež musieť pridať dve ďalšie premenné prostredia: TACOTRANSLATE_DEFAULT_LOCALE a TACOTRANSLATE_ORIGIN.

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

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

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

Nastavenie TacoTranslate

Inicializujte TacoTranslate vo vašej 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>
	);
}

Teraz môžete komponent Translate použiť kdekoľvek vo vašej aplikácii na zobrazenie preloženého textu! Určite si pozrite 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 šetrí váš cenný čas.
• Nákladovo efektívne: Znižuje potrebu ručných prekladov, čím znižuje vaše náklady na lokalizáciu.
• Zlepšená presnosť: Preklady poháňané umelou inteligenciou zabezpečujú kontextovo presné a vysoko kvalitné výsledky.
• Škálovateľné riešenie: Jednoducho pridajte podporu pre nové jazyky, keď vaša aplikácia a zákaznícka základňa rastú.

Začnite ešte dnes!

Vaša React aplikácia bude automaticky preložená, keď pridáte ľubovoľné reťazce do komponentu Translate. Majte na pamäti, že len prostredia s oprávneniami read/write na API kľúči budú schopné vytvárať nové reťazce na preklad.

Odporúčame mať uzavreté a zabezpečené stagingové prostredie, kde môžete otestovať svoju produkčnú aplikáciu a pridávať nové reťazce pred spustením do prevádzky. Týmto zabránite tomu, aby niekto niekto ukradol váš tajný API kľúč a potenciálne preťažil 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!