Bezproblemowa lokalizacja aplikacji React

Jak to działa

Zainstaluj pakiet TacoTranslate za pomocą npm:

npm install tacotranslate

Gdy masz już zainstalowany moduł, będziesz musiał utworzyć konto TacoTranslate, projekt tłumaczeniowy oraz powiązane klucze API. Utwórz konto tutaj. To darmowe i nie wymaga podawania danych karty kredytowej.

W interfejsie aplikacji TacoTranslate utwórz projekt i przejdź do zakładki z kluczami API. Utwórz jeden klucz read oraz jeden klucz read/write. Zapiszemy je jako zmienne środowiskowe. Klucz read nazywamy public, a klucz read/write to secret. Na przykład, możesz dodać je do pliku .env w katalogu głównym projektu.

Będziesz także musiał dodać dwie kolejne zmienne środowiskowe: TACOTRANSLATE_DEFAULT_LOCALE oraz TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Domyślny kod zapasowego języka. W tym przykładzie ustawimy go na en dla angielskiego.
• TACOTRANSLATE_ORIGIN: „Folder”, w którym będą przechowywane Twoje ciągi tekstowe, na przykład adres URL Twojej strony internetowej. Przeczytaj więcej o originach tutaj.

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

Upewnij się, że nigdy nie ujawnisz sekretnego klucza API read/write w środowiskach produkcyjnych po stronie klienta.

Konfigurowanie TacoTranslate

Zainicjuj TacoTranslate w swojej aplikacji React, opakowując aplikację w dostawcę kontekstu 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 możesz używać komponentu Translate w dowolnym miejscu w swojej aplikacji, aby wyświetlać przetłumaczony tekst! Koniecznie sprawdź naszą dokumentację, aby uzyskać więcej informacji oraz przewodniki dotyczące implementacji dostosowane do Twojej konfiguracji.

import {Translate} from 'tacotranslate/react';

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

Zalety korzystania z TacoTranslate

• Oszczędność czasu: Automatyzuje żmudny proces lokalizacji i zbierania ciągów znaków, oszczędzając cenny czas.
• Opłacalność: Zmniejsza potrzebę ręcznych tłumaczeń, obniżając koszty lokalizacji.
• Poprawiona dokładność: Tłumaczenia wspomagane AI zapewniają kontekstowo dokładne i wysokiej jakości rezultaty.
• Skalowalne rozwiązanie: Łatwo dodawaj wsparcie dla nowych języków wraz ze wzrostem aplikacji i bazy klientów.

Rozpocznij już dziś!

Twoja aplikacja React zostanie przetłumaczona automatycznie, gdy dodasz jakiekolwiek ciągi tekstowe do komponentu Translate. Należy pamiętać, że tylko środowiska z uprawnieniami read/write dotyczącymi klucza API będą mogły tworzyć nowe ciągi do przetłumaczenia.

Zalecamy posiadanie zamkniętego i zabezpieczonego środowiska staging, w którym możesz testować swoją aplikację produkcyjną, dodając nowe ciągi przed jej udostępnieniem. Zapobiegnie to kradzieży Twojego sekretnego klucza API przez niepowołane osoby oraz potencjalnemu rozrostowi projektu tłumaczeniowego przez dodawanie nieautoryzowanych ciągów.

Pamiętaj, aby zobaczyć pełne przykłady na naszym profilu GitHub. Jeśli napotkasz jakiekolwiek problemy, śmiało skontaktuj się z nami, a chętnie pomożemy.

TacoTranslate pozwala automatycznie lokalizować Twoje aplikacje React szybko na i z dowolnego języka. Tłumacz za darmo!