Könnyed lokalizáció 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á kapcsolódó API kulcsokat. Hozz létre fiókot itt. Ingyenes, és nem kell hozzá bankkártyát megadnod.

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

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 visszaesési helykód. Ebben a példában en-re állítjuk az angol nyelvhez.
• TACOTRANSLATE_ORIGIN: Az a „mappa”, ahol a sztringjeid tárolva lesznek, például a webhelyed URL-je. További információ az origin-ökrő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 a titkos read/write API kulcsot soha ne szivárogtasd ki kliens oldali éles környezetbe.

A TacoTranslate beállítása

Inicializáld a TacoTranslate-et a React alkalmazásodban úgy, hogy az alkalmazásodat becsomagolod a TacoTranslate kontextus szolgáltatóba:

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 fordított szöveg megjelenítéséhez! Ne felejtsd el megnézni a 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 fárasztó lokalizációs és sztringgyűjtési folyamatokat, értékes időt spórolva meg Önnek.
• Költséghatékony: Csökkenti a kézi fordítások szükségességét, így mérsékelve a lokalizációs költségeket.
• Javított pontosság: Az AI-alapú fordítások kontextusosan pontos és magas színvonalú eredményeket biztosítanak.
• Skálázható megoldás: Könnyedén hozzáadhat támogatást új nyelvekhez, ahogy növekszik az alkalmazása és az ügyfélköre.

Kezdje el még ma!

A React alkalmazásod automatikusan le lesz fordítva, amikor bármilyen szöveget hozzáadsz egy Translate komponenshez. Felhívjuk a figyelmedet, hogy csak azok a környezetek, amelyek rendelkeznek read/write jogosultságokkal az API kulcson, képesek új, lefordítandó szövegek létrehozására.

Ajánljuk, hogy legyen egy zárt és biztonságos staging környezeted, ahol tesztelheted az éles alkalmazásodat, és új szövegeket adhatsz hozzá, mielőtt élővé teszed. Ez megakadályozza, hogy bárki ellopja a titkos API kulcsodat, és hogy illetéktelen szövegekkel felfújd a fordítási projektedet.

Mindig tekintse meg a teljes példákat GitHub profilunkon. Ha bármilyen problémába ütközik, nyugodtan vegye fel velünk a kapcsolatot, és örömmel segítünk.

A TacoTranslate lehetővé teszi, hogy React alkalmazásait automatikusan, gyorsan lokalizálja bármilyen nyelvre és bármilyen nyelvről. Fordítson ingyen!