Madaling lokalisasyon para sa mga React na aplikasyon

Paano ito gumagana

I-install ang package na TacoTranslate gamit ang npm:

npm install tacotranslate

Kapag na-install mo na ang module, kakailanganin mong lumikha ng isang TacoTranslate account, isang proyekto sa pagsasalin, at mga kaugnay na API key. Gumawa ng account dito. Libre ito, at hindi ito nangangailangan ng pagdagdag ng credit card.

Sa UI ng aplikasyon ng TacoTranslate, gumawa ng proyekto at pumunta sa tab ng API keys nito. Lumikha ng isang read key at isang read/write key. Isasama namin ang mga ito bilang mga environment variable. Ang read key ay tinatawag naming public at ang read/write key naman ay secret. Halimbawa, maaari mo silang idagdag sa isang .env file sa root ng iyong proyekto.

Kailangan mo ring magdagdag ng dalawang karagdagang environment variable: TACOTRANSLATE_DEFAULT_LOCALE at TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Ang default na fallback na locale code. Sa halimbawang ito, itatakda namin ito sa en para sa Ingles.
• TACOTRANSLATE_ORIGIN: Ang “folder” kung saan itatago ang iyong mga string, tulad ng URL ng iyong website. Magbasa pa tungkol sa mga origin dito.

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

Tiyaking huwag kailanman ibunyag ang lihim na read/write API key sa mga client-side na production environment.

Pagsasaayos ng TacoTranslate

I-initialize ang TacoTranslate sa iyong React application sa pamamagitan ng pagbabalot ng iyong application sa loob ng TacoTranslate context provider:

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>
	);
}

Maaari mo nang gamitin ang Translate na component kahit saan sa loob ng iyong aplikasyon upang ipakita ang isinaling teksto! Siguraduhing tingnan ang ang aming dokumentasyon para sa karagdagang impormasyon at para sa mga gabay sa implementasyon na angkop sa iyong setup.

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

Mga Benepisyo ng Paggamit ng TacoTranslate

• Nakakatipid ng oras: Awtomatikong isinasagawa ang nakakapagod na proseso ng lokalisasyon at pagkolekta ng mga string, kaya nakakatipid ka ng mahalagang oras.
• Matipid: Binabawasan ang pangangailangan para sa manu-manong pagsasalin, na nagpapababa ng iyong gastos sa lokalisasyon.
• Mas mataas na katumpakan: Tinitiyak ng mga pagsasaling pinapagana ng AI ang mga resulta na tumpak sa konteksto at mataas ang kalidad.
• Solusyong napapalawak: Madaling magdagdag ng suporta para sa mga bagong wika habang lumalago ang iyong aplikasyon at base ng mga customer.

Magsimula na ngayon!

Awtomatikong isasalin ang iyong React application kapag nagdagdag ka ng anumang mga string sa isang Translate component. Tandaan na tanging mga environment na may read/write na permiso sa API key ang makakalikha ng mga bagong string para maisalin.

Inirerekomenda naming magkaroon ng sarado at secure na staging environment kung saan maaari mong subukan ang iyong aplikasyong nasa produksyon, at magdagdag ng mga bagong string bago mag-live. Pipipigilan nito ang sinuman sinuman mula sa pagnanakaw ng iyong lihim na API key, at posibleng magdulot ng sobrang paglobo sa iyong proyekto sa pagsasalin sa pamamagitan ng pagdaragdag ng mga ligaw na string.

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!