Walang kahirap-hirap na lokalidad para sa mga React application

Paano ito gumagana

I-install ang TacoTranslate package gamit ang npm:

npm install tacotranslate

Kapag na-install mo na ang module, kakailanganin mong gumawa ng TacoTranslate account, isang translation project, at mga kaugnay na API keys. Gumawa ng account dito. Libre ito, at hindi kailangang magdagdag ng credit card.

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: Ang default fallback locale code. Sa halimbawang ito, itatakda namin ito sa en para sa English.
• TACOTRANSLATE_ORIGIN: Ang “folder” kung saan ilalagay 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

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

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

Maaari mo nang gamitin ang Translate na component kahit saan sa loob ng iyong aplikasyon upang ipakita ang isinalin na teksto! Siguraduhing 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 ng Oras: Ina-awtomatiko ang nakakapagod na proseso ng lokal na pagsasaayos at pagkolekta ng mga string, kaya nakakatipid ka ng mahalagang oras.
• Makatipid sa Gastos: Pinapababa ang pangangailangan para sa manu-manong pagsasalin, kaya bumababa ang iyong gastusin sa lokal na pagsasaayos.
• Pinahusay na Katumpakan: Tinitiyak ng AI-powered na mga pagsasalin ang kontekstwal na tumpak at mataas na kalidad na mga resulta.
• Nasusukat na Solusyon: Madaling magdagdag ng suporta para sa mga bagong wika habang lumalaki ang iyong aplikasyon at base ng mga customer.

Magsimula na ngayon!

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

Inirerekomenda namin na magkaroon ng isang sarado at secured na staging environment kung saan maaari mong subukan ang iyong production application, na nagdaragdag ng mga bagong string bago ito i-live. Ito ay magpipigil sa kahit sino na manakaw ang iyong lihim na API key, at posibleng magdulot ng sobrang dami sa iyong proyekto ng pagsasalin sa pamamagitan ng pagdaragdag ng mga rogue 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!