Zökkenőmentes lokalizálás React-alkalmazásokhoz

Hogyan működik

Telepítse a TacoTranslate csomagot az npm segítségével:

npm install tacotranslate

Miután telepítetted a modult, létre kell hoznod egy TacoTranslate-fiókot, egy fordítási projektet és a hozzá tartozó API-kulcsokat. Regisztrálj itt. Ingyenes, és nem kell hitelkártyát megadnod.

A TacoTranslate alkalmazás felületén hozz létre egy projektet, és lépj az API-kulcsok fülére. Hozz létre egy read kulcsot és egy read/write kulcsot. Ezeket környezeti változókként fogjuk elmenteni. A read kulcsot mi public néven emlegetjük, míg a read/write kulcs a secret. Például hozzáadhatod őket a projekt gyökerében található .env fájlhoz.

Ezenkívül még két környezeti változót kell hozzáadnod: TACOTRANSLATE_DEFAULT_LOCALE és TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Az alapértelmezett tartalék (fallback) helyi beállítás kódja. Ebben a példában az angolhoz en-t állítjuk be.
• TACOTRANSLATE_ORIGIN: Az a „mappa”, ahol a szövegeid tárolódnak, például a webhelyed URL-címe. Itt olvashatsz bővebben az originokról.

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

Ügyelj rá, hogy soha ne szivárogtasd ki a titkos read/write API-kulcsot a kliensoldali éles környezetekbe.

A TacoTranslate beállítása

Inicializáld a TacoTranslate-et a React-alkalmazásodban úgy, hogy az alkalmazást beágyazod a TacoTranslate context providerbe:

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>
	);
}

Mostantól az alkalmazásod bármely részén használhatod a Translate komponenst a lefordított szöveg megjelenítéséhez! Ne felejtsd el megnézni dokumentációnkat további információkért és a te környezetedre szabott megvalósítási útmutatókért.

import {Translate} from 'tacotranslate/react';

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

A TacoTranslate használatának előnyei

• Időmegtakarítás: Automatizálja a lokalizálás és a sztringek gyűjtésének fáradságos folyamatát, így értékes időt takarít meg.
• Költséghatékony: Csökkenti a kézi fordítások szükségességét, ezáltal mérsékli a lokalizálási költségeket.
• Jobb pontosság: A mesterséges intelligencia által támogatott fordítások kontextushoz illő, pontos és kiváló minőségű eredményeket biztosítanak.
• Skálázható megoldás: Könnyen hozzáadható támogatás új nyelvek számára, ahogy az alkalmazás és az ügyfélkör növekszik.

Kezdje el még ma!

A React-alkalmazásodat automatikusan lefordítjuk, amikor bármilyen szöveget hozzáadsz egy Translate komponenshez. Fontos megjegyezni, hogy csak azok a környezetek, amelyek rendelkeznek az API-kulcsra vonatkozó read/write jogosultsággal, tudnak új, lefordítandó szövegeket létrehozni.

Javasoljuk, hogy legyen egy zárt és biztonságos staging környezeted, ahol tesztelheted az éles alkalmazásodat, és hozzáadhatsz új szövegeket, mielőtt élesítesz. Ez megakadályozza, hogy bárki ellopja a titkos API-kulcsodat, és hogy illetéktelen szövegek hozzáadásával felfúvódjon a fordítási projekted.

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!