Madaling lokalisasyon para sa mga aplikasyon ng React

Paano ito gumagana

I-install ang package ng TacoTranslate gamit ang npm:

npm install tacotranslate

Kapag na-install mo na ang module, kailangan mong lumikha ng isang TacoTranslate account, isang translation project, at mga kaugnay na API key. Lumikha ng account dito. Libre ito, at hindi mo kailangang maglagay ng credit card.

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

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

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

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

Siguraduhing huwag kailanman ilantad 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 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>
	);
}

Ngayon ay maaari mo nang gamitin ang Translate component kahit saan sa iyong aplikasyon upang ipakita ang isinaling teksto! Huwag kalimutang tingnan ang aming dokumentasyon para sa karagdagang impormasyon, at para sa mga gabay sa pagpapatupad na naaangkop sa iyong konfigurasyon.

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 pinapagana ang nakakapagod na proseso ng lokalisasyon at pagkolekta ng mga string, na nagtitipid sa iyo ng mahalagang oras.
• Makatipid sa gastos: Binabawasan ang pangangailangan para sa manwal na pagsasalin, na nagpapababa ng iyong mga gastusin sa lokalisasyon.
• Pinahusay na katumpakan: Tinitiyak ng mga pagsasaling pinapagana ng AI ang kontekstuwal na katumpakan at mataas na kalidad ng mga resulta.
• Masusukat 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 na aplikasyon ay awtomatikong maisasalin kapag nagdagdag ka ng anumang mga string sa isang Translate component. Tandaan na tanging ang mga environment na may read/write na permiso sa API key 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 na aplikasyon at magdagdag ng mga bagong string bago ilunsad. Makakaiwas ito sa sinuman sinuman na magnakaw ng iyong lihim na API key, at posibleng magdulot ng paglobo sa iyong proyekto sa pagsasalin sa pamamagitan ng pagdaragdag ng mga hindi kanais-nais 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!