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á tartozó API kulcsokat. Itt hozhatsz létre fiókot. Ingyenes, és nem kell hozzá bankkártya.

A TacoTranslate alkalmazás felhasználói felületén hozz létre egy projektet, majd navigálj az API kulcsok fülére. 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-nak, míg a read/write kulcs a secret. Például hozzáadhatod őket egy .env fájlhoz a projekted gyökerében.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Az alapértelmezett tartalék helyi kód. Ebben a példában en-re, azaz angolra állítjuk.
• TACOTRANSLATE_ORIGIN: Az a „mappa”, ahol a szövegeid tárolva lesznek, például a weboldalad URL-je. További információ az origin-ekrő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 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 a TacoTranslate kontextus providerrel 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 bárhol az alkalmazásodban, hogy lefordított szöveget jeleníts meg! Mindig nézd meg 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 helyesbítés és a karakterláncgyűjtés fárasztó folyamatát, így értékes időt takaríthatsz meg.
• Költséghatékony: Csökkenti a manuális fordítások szükségességét, így mérsékli a helyesbítési költségeidet.
• Javított pontosság: A mesterséges intelligencia által támogatott fordítások kontextusban pontos és magas színvonalú eredményeket biztosítanak.
• Skálázható megoldás: Könnyedén adhatsz hozzá új nyelvi támogatást, ahogy az alkalmazásod és az ügyfélköröd 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. Felhívjuk a figyelmed, hogy csak azok a környezetek, amelyek rendelkeznek read/write jogosultsággal az API kulcson, képesek ú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, új szövegeket hozzáadva mielőtt élőbe lépne. Ez megakadályozza, hogy bárki ellopja a titkos API kulcsodat, és potenciálisan felduzzassza a fordítási projektedet illetéktelen szövegek hozzáadásával.

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!