Walang kahirap-hirap na lokal na pagsasalin para sa mga React na aplikasyon

Paano ito gumagana

I-install ang TacoTranslate package gamit ang npm:

npm install tacotranslate

Kapag na-install mo na ang module, kailangang gumawa ka ng TacoTranslate account, isang proyekto para sa pagsasalin, at mga kaukulang API keys. Gumawa ng account dito. Libre ito, at hindi kailangan magdagdag ng credit card.

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

Kakailanganin mo ring magdagdag ng dalawang karagdagang environment variables: TACOTRANSLATE_DEFAULT_LOCALE at TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Ang default na fallback locale code. Sa halimbawang ito, itatakda natin ito sa en para sa Ingles.
• TACOTRANSLATE_ORIGIN: Ang “folder” kung saan ise-store ang iyong mga string, tulad ng URL ng iyong website. Basahin pa ang 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 ilabas ang lihim na read/write API key sa mga client side production environment.

Pagse-set up ng TacoTranslate

I-initialize ang TacoTranslate sa iyong React application sa pamamagitan ng pag-wrap ng iyong application sa 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 komponent sa kahit saan sa loob ng iyong aplikasyon upang ipakita ang isinaling teksto! Tiyaking tingnan ang aming dokumentasyon para sa karagdagang impormasyon, at para sa mga gabay sa pagpapatupad 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 sa Oras: Ina-awtomatiko ang nakakapagod na proseso ng lokal na pagsasalin at pag-kolekta ng mga string, na nakakatipid ng iyong mahalagang oras.
• Mas Matipid: Binabawasan ang pangangailangan para sa manu-manong pagsasalin, kaya bumababa ang iyong gastos sa lokal na pagsasalin.
• Pinabuting Katumpakan: Tinitiyak ng AI-powered na mga pagsasalin ang kontekstwal na tama at mataas na kalidad na mga resulta.
• Nasusukat na Solusyon: Madaling magdagdag ng suporta para sa mga bagong wika habang lumalago ang iyong aplikasyon at base ng mga customer.

Magsimula na ngayon!

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

Inirerekomenda namin na magkaroon ng isang sarado at ligtas na staging environment kung saan maaari mong subukan ang iyong production application, at magdagdag ng mga bagong string bago ito ilunsad. Ito ay makakaiwas sa sinumang magnakaw ng iyong lihim na API key, at maaaring makaiwas din sa pagpapalobo ng iyong translation project sa pamamagitan ng pagdagdag ng mga hindi awtorisadong string.

Tiyaking tingnan ang kumpletong mga halimbawa sa aming GitHub profile. Kung makaranas ka ng anumang problema, huwag mag-atubiling makipag-ugnayan, at ikalulugod naming tumulong.

Pinapahintulutan ka ng TacoTranslate na awtomatikong i-localize ang iyong mga React application nang mabilis papunta at mula sa anumang wika. Mag-translate nang libre!