Bezproblémová lokalizace React aplikací

Jak to funguje

Nainstalujte balíček TacoTranslate pomocí npm:

npm install tacotranslate

Jakmile máte modul nainstalovaný, budete si muset vytvořit účet u TacoTranslate, projekt překladu a související API klíče. Vytvořte si účet zde. Je to zdarma a nevyžaduje zadání platební karty.

V uživatelském rozhraní aplikace TacoTranslate vytvořte projekt a přejděte na kartu API klíčů. Vytvořte jeden read klíč a jeden read/write klíč. Uložíme je jako proměnné prostředí. read klíč označujeme jako public a read/write klíč je secret. Například je můžete přidat do souboru .env v kořenovém adresáři vašeho projektu.

Také budete muset přidat dvě další proměnné prostředí: TACOTRANSLATE_DEFAULT_LOCALE a TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Výchozí kód fallback lokality. V tomto příkladu jej nastavíme na en pro angličtinu.
• TACOTRANSLATE_ORIGIN: „Složka“, kde budou uloženy vaše textové řetězce, například URL vaší webové stránky. Zde si přečtěte více o origins.

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

Ujistěte se, že tajný read/write API klíč nikdy neunikne do produkčního prostředí na straně klienta.

Nastavení TacoTranslate

Inicializujte TacoTranslate ve své React aplikaci tak, že obalíte aplikaci poskytovatelem 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>
	);
}

Komponentu Translate můžete nyní použít kdekoli ve své aplikaci pro zobrazení přeloženého textu! Nezapomeňte si pro více informací a návody k implementaci specifické pro vaše prostředí prohlédnout naši dokumentaci.

import {Translate} from 'tacotranslate/react';

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

Výhody používání TacoTranslate

• Úspora času: Automatizuje únavný proces lokalizace a shromažďování řetězců, čímž vám ušetří drahocenný čas.
• Nákladově efektivní: Snižuje potřebu ručních překladů a tím i náklady na lokalizaci.
• Zlepšená přesnost: Překlady podporované umělou inteligencí zajišťují kontextově přesné a kvalitní výsledky.
• Škálovatelné řešení: Snadno přidáte podporu nových jazyků, jak vaše aplikace a zákaznická základna rostou.

Začněte ještě dnes!

Vaše React aplikace bude automaticky přeložena, když přidáte jakékoliv řetězce do komponenty Translate. Všimněte si, že pouze prostředí s oprávněními read/write k API klíči budou moci vytvářet nové řetězce k překladu.

Doporučujeme mít uzavřené a zabezpečené stagingové prostředí, ve kterém můžete otestovat svou produkční aplikaci a přidávat nové řetězce před jejím spuštěním. Tím zabráníte tomu, aby kdokoli ukradl váš tajný API klíč a potenciálně nenafoukl váš překladový projekt přidáváním nežádoucích řetězců.

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!