Madaling paglokalis ng mga React application

Paano ito gumagana

I-install ang package ng TacoTranslate gamit ang npm:

npm install tacotranslate

Kapag naka-install na ang module, kailangan mong gumawa ng TacoTranslate account, isang proyektong pagsasalin, at mga kaugnay na API key. Gumawa ng account dito. Libre ito, at hindi mo kailangang maglagay ng credit card.

Sa UI ng TacoTranslate, gumawa ng isang proyekto at pumunta sa tab na API keys nito. Gumawa ng isang read key, at isang read/write key. Ise-save namin ang mga ito bilang mga environment variable. Ang read key ang 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.

Kakailanganin 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 ise-save ang iyong mga string, tulad ng URL ng iyong website. Basahin ang higit pa tungkol sa mga pinagmulan dito.

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

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

Pagsasaayos ng TacoTranslate

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

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 na ngayong gamitin ang Translate component kahit saan sa iyong aplikasyon upang ipakita ang isinaling teksto! Siguraduhing tingnan ang ang aming dokumentasyon para sa karagdagang impormasyon, at para sa mga gabay sa pagpapatupad na naaangkop sa iyong setup.

import {Translate} from 'tacotranslate/react';

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

Mga pakinabang ng paggamit ng TacoTranslate

• Nakakatipid ng oras: Awtomatikong pinapadali ang nakakapagod na proseso ng lokalisasyon at pagkolekta ng mga string, kaya nakakatipid ka ng mahalagang oras.
• Epektibo sa gastos: Binabawasan ang pangangailangan para sa manu-manong pagsasalin, kaya bumababa ang iyong gastos sa lokalisasyon.
• Pinahusay na katumpakan: Tinitiyak ng mga pagsasaling pinapagana ng AI ang kontekstwal na katumpakan at mataas na kalidad na mga resulta.
• Solusyong nasusukat: Madaling magdagdag ng suporta para sa mga bagong wika habang lumalago ang iyong aplikasyon at batayan ng mga customer.

Magsimula na ngayon!

Awtomatikong isasalin ang iyong aplikasyong React kapag nagdagdag ka ng anumang 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 na isasalin.

Inirerekomenda namin na magtayo ng isang nakasarado at ligtas na staging environment kung saan maaari mong subukan ang iyong production application at magdagdag ng mga bagong string bago ito ilunsad. Mapipigilan nito ang sinumang magnanakaw ng iyong lihim na API key, at posibleng magdulot ng sobrang pagdami ng mga string sa iyong proyekto ng pagsasalin dahil sa pagdaragdag ng mga hindi awtorisadong 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!