Egyszerű 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ájuk tartozó API-kulcsokat. Itt hozhatsz létre fiókot. Ingyenes, és nem kell bankkártyát megadnod.

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

Ezenfelü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) locale kódja. Ebben a példában az en-t állítjuk be angolra.
• TACOTRANSLATE_ORIGIN: A „mappa”, ahová a karakterláncaid lesznek tárolva, például a webhelyed URL-je. További információ az originokról itt.

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

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

A TacoTranslate beállítása

Inicializáld a TacoTranslate-et a React-alkalmazásodban úgy, hogy az alkalmazásodat a TacoTranslate kontextus-providerrel körbeveszed:

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 bárhol az alkalmazásodban használhatod a Translate komponenst, hogy lefordított szöveget jeleníts meg! Mindenképpen tekintsd meg a dokumentációnkat további információkért és az adott beállításodra vonatkozó implementációs ú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áció és a sztringek begyűjtésének unalmas folyamatát, így értékes időt takarít meg.
• Költséghatékony: Csökkenti a kézi fordítások iránti igényt, ezáltal mérsékli a lokalizációs költségeket.
• Javított pontosság: A mesterséges intelligencia által vezérelt fordítások kontextushoz illő, magas színvonalú eredményeket biztosítanak.
• Skálázható megoldás: Könnyen hozzáadhat új nyelvek támogatását, ahogy az alkalmazása és az ügyfélköre növekszik.

Kezdje el még ma!

A React-alkalmazásodat automatikusan lefordítjuk, amikor bármilyen szöveget hozzáadsz egy Translate komponenshez. Figyelem: csak azok a környezetek, amelyek az API-kulcson read/write jogosultsággal rendelkeznek, lesznek képesek új, lefordítandó szövegek létrehozására.

Javasoljuk, hogy legyen egy zárt és biztonságos staging környezeted, ahol tesztelheted az éles alkalmazásodat, és új szövegeket adhatsz hozzá még az éles indulás előtt. Ez megakadályozza, hogy bárki bárki ellopja a titkos API-kulcsodat, és potenciálisan felduzzassa a fordítási projektedet azáltal, hogy illetéktelenek rosszindulatú szövegeket adnak hozzá.

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!