TacoTranslate
/
DokumentacjaCennik
 
Artykuł
04 maj

Bezproblemowa lokalizacja aplikacji React

Czy chcesz rozszerzyć swoją aplikację React na nowe rynki? TacoTranslate niezwykle ułatwia lokalizację aplikacji React, pozwalając dotrzeć do globalnej publiczności bez zbędnych komplikacji.

Dlaczego warto wybrać TacoTranslate dla React?

  • Bezproblemowa integracja: Stworzona specjalnie dla aplikacji React, TacoTranslate bezproblemowo integruje się z Twoim istniejącym przepływem pracy.
  • Automatyczne zbieranie tekstów: Koniec z ręcznym zarządzaniem plikami JSON. TacoTranslate automatycznie zbiera teksty z Twojego kodu źródłowego.
  • Tłumaczenia oparte na SI: Wykorzystaj moc SI, aby zapewnić kontekstowo dokładne tłumaczenia, które pasują do tonu Twojej aplikacji.
  • Błyskawiczne wsparcie językowe: Dodaj obsługę nowych języków za jednym kliknięciem, czyniąc swoją aplikację dostępną globalnie.

Jak to działa

Zainstaluj pakiet TacoTranslate za pomocą npm:

npm install tacotranslate

Gdy masz zainstalowany moduł, musisz utworzyć konto TacoTranslate, projekt tłumaczeniowy i powiązane klucze API. Załóż konto tutaj. To bezpłatne i nie wymaga podawania karty kredytowej.

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

Musisz także dodać dwie zmienne środowiskowe: TACOTRANSLATE_DEFAULT_LOCALE oraz TACOTRANSLATE_ORIGIN.

  • TACOTRANSLATE_DEFAULT_LOCALE: Domyślny kod lokalizacji zapasowej. W tym przykładzie ustawimy go na en dla języka angielskiego.
  • TACOTRANSLATE_ORIGIN: „folder”, w którym będą przechowywane Twoje teksty, na przykład adres URL Twojej witryny. Dowiedz się więcej o originach tutaj.
.env
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 read/write klucza API w środowiskach produkcyjnych po stronie klienta.

Konfiguracja TacoTranslate

Zainicjuj TacoTranslate w swojej aplikacji React, opakowując ją 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 swojej aplikacji, aby wyświetlać tłumaczony tekst! Koniecznie sprawdź naszą dokumentację, aby uzyskać więcej informacji oraz przewodniki dotyczące implementacji specyficzne dla Twojej konfiguracji.

import {Translate} from 'tacotranslate/react';

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

Korzyści z korzystania z TacoTranslate

  • Oszczędność czasu: Automatyzuje żmudny proces lokalizacji i gromadzenia tekstów, oszczędzając cenny czas.
  • Opłacalne: Zmniejsza potrzebę ręcznych tłumaczeń, obniżając koszty lokalizacji.
  • Lepsza dokładność: Tłumaczenia wspierane przez AI zapewniają kontekstowo dokładne i wysokiej jakości wyniki.
  • Skalowalne rozwiązanie: Łatwo dodawaj obsługę nowych języków w miarę rozwoju aplikacji i bazy klientów.

Zacznij już dziś!

Twoja aplikacja React zostanie automatycznie przetłumaczona, gdy dodasz dowolne ciągi tekstowe do komponentu Translate. Zwróć uwagę, że tylko środowiska z uprawnieniami read/write do 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ć aplikację produkcyjną i dodawać nowe ciągi przed udostępnieniem jej na żywo. Dzięki temu nikt nie będzie mógł ukraść twojego tajnego klucza API ani potencjalnie zapełnić projektu tłumaczeń poprzez dodawanie niepożądanych ciągów.

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!

Produkt firmy NattskiftetWyprodukowano w Norwegii