Könnyed lokalizáció React alkalmazásokhoz

Hogyan működik

Telepítsd 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, valamint a kapcsolódó API kulcsokat. Hozz létre fiókot itt. Ingyenes, és nem szükséges hitelkártya megadása.

A TacoTranslate alkalmazás felhasználói felületén hozz létre egy projektet, majd navigálj az API kulcsok fülre. Hozz létre egy read kulcsot és egy read/write kulcsot. Ezeket környezeti változóként fogjuk elmenteni. A read kulcsot nevezzük public kulcsnak, míg a read/write kulcs a secret kulcs. Például hozzáadhatod őket egy .env fájlhoz a projekted gyökérkönyvtárában.

Szükséged lesz még két környezeti változó hozzáadására is: TACOTRANSLATE_DEFAULT_LOCALE és TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Az alapértelmezett tartalék nyelvkód. Ebben a példában az en-t állítjuk be angol nyelvhez.
• TACOTRANSLATE_ORIGIN: Az a „mappa”, ahol a sztringjeid tárolódnak, például a weboldalad URL-je. További információk az eredetekről itt.

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

Ügyelj arra, hogy soha ne szivárogtasd ki a titkos read/write API kulcsot a kliens oldali éles környezetekbe.

A TacoTranslate beállítása

Inicializáld a TacoTranslate-et a React alkalmazásodban úgy, hogy az alkalmazásodat beburkolod a TacoTranslate context provideren keresztül:

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 használhatod az Translate komponenst az alkalmazásodban a lefordított szöveg megjelenítéséhez! Mindenképpen nézd meg dokumentációnkat.

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 helyiítés és a sztringgyűjtés fáradságos folyamatát, értékes időt spórolva meg.
• Költséghatékony: Csökkenti a manuális fordítások szükségességét, ezáltal mérsékli a helyiítési költségeket.
• Pontosság javítása: Az MI által vezérelt fordítások kontextusban pontos és magas minőségű eredményeket biztosítanak.
• Skálázható megoldás: Könnyedén hozzáadhat új nyelveket, ahogy az alkalmazás és az ügyfélkör növekszik.

Kezdje el még ma!

A React alkalmazásod automatikusan le lesz fordítva, amikor bármilyen szöveget hozzáadsz egy Translate komponenshez. Ne feledd, hogy csak azok a környezetek, amelyek rendelkeznek read/write jogosultsággal az API kulcson, képesek új fordítandó sztringeket létrehozni.

Ajánljuk, hogy legyen egy zárt és biztonságos tesztelési környezeted, ahol kipróbálhatod az éles alkalmazást, és hozzáadhatod az új sztringeket az éles indulás előtt. Ez megakadályozza, hogy bárki ellopja a titkos API kulcsodat, és esetlegesen felfújja a fordítási projektedet illetéktelen sztringek hozzáadásával.

Ne felejtsd el megtekinteni a teljes példákat GitHub profilunkon. Ha bármilyen problémába ütközöl, nyugodtan keress minket, és örömmel segítünk.

A TacoTranslate lehetővé teszi, hogy React alkalmazásaidat gyorsan és automatikusan lokalizáld bármilyen nyelvre és bármely nyelvről. Fordíts ingyen!