A legjobb megoldás a nemzetköziesítésre (i18n) React alkalmazásokban

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 és a hozzá tartozó API kulcsokat. Hozz létre itt egy fiókot. Ingyenes, és nem kell hitelkártyát megadnod.

A TacoTranslate alkalmazás 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ó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 projekt 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 tartalék nyelvkód. Ebben a példában en-re állítjuk, azaz angolra.
• TACOTRANSLATE_ORIGIN: Az a „mappa”, ahová a sztringjeid kerülnek, például a weboldalad URL-je. Itt olvashatsz többet az origin-ekről.

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

Győződj meg róla, hogy soha ne szivárogtasd ki a titkos read/write API kulcsot a 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 a TacoTranslate kontextus szolgáltatóval veszed körü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 használhatod a Translate komponenst az alkalmazásod bármely részén a lefordított szöveg megjelenítéséhez! Ne felejts el ellátogatni dokumentációnkhoz további információkért és az adott beállításodra vonatkozó 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 helyiítés és a stringek gyűjtésének fárasztó folyamatát, így értékes időt takaríthat 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.
• Javított pontosság: Az AI á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 támogatást új nyelvekhez, ahogy az alkalmazás és az ügyfélkör nő.

Kezdje el még ma!

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

Ajánljuk, hogy legyen egy zárt és biztonságos staging környezeted, ahol tesztelheted az éles alkalmazást, és új szövegeket adhatsz hozzá, mielőtt élesbe mész. Ez megakadályozza, hogy bárki ellopja a titkos API kulcsodat, és hogy illetéktelen szövegek okozta felesleges bővülés történjen a fordítási projektedben.

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!