Localització senzilla per a aplicacions React

Com funciona

Instal·leu el paquet TacoTranslate mitjançant npm:

npm install tacotranslate

Un cop tingueu el mòdul instal·lat, haureu de crear un compte a TacoTranslate, un projecte de traducció i les claus d'API associades. Creeu un compte aquí. És gratuït i no requereix que afegiu una targeta de crèdit.

Dins de la interfície de l'aplicació TacoTranslate, crea un projecte i ves a la pestanya de claus API. Crea una clau read i una clau read/write. Les guardarem com a variables d’entorn. La clau read és la que anomenem public i la clau read/write és secret. Per exemple, les podries afegir a un fitxer .env a la carpeta arrel del teu projecte.

També hauràs d’afegir dues variables d’entorn més: TACOTRANSLATE_DEFAULT_LOCALE i TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: El codi de localització predeterminat de reserva. En aquest exemple, el configurarem a en per a l’anglès.
• TACOTRANSLATE_ORIGIN: La “carpeta” on s’emmagatzemaran les teves cadenes, com ara la URL del teu lloc web. Llegeix més sobre els orígens aquí.

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

Assegureu-vos de no filtrar mai la clau API secreta read/write als entorns de producció del costat client.

Configuració de TacoTranslate

Inicialitzeu TacoTranslate a la vostra aplicació React envoltant la vostra aplicació amb el proveïdor de context 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>
	);
}

Ara podeu utilitzar el component Translate a qualsevol lloc de la vostra aplicació per mostrar textos traduïts! Assegureu-vos de consultar la nostra documentació per obtenir més informació i guies d’implementació específiques per a la vostra configuració.

import {Translate} from 'tacotranslate/react';

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

Beneficis d'utilitzar TacoTranslate

• Estalvi de temps: Automatitza el procés feixuc de localització i recopilació de cadenes, estalviant-te un temps valuós.
• Rendible: Redueix la necessitat de traduccions manuals, disminuint els teus costos de localització.
• Precisió millorada: Les traduccions impulsades per IA garanteixen resultats contextuals precisos i d’alta qualitat.
• Solució escalable: Afegeix fàcilment suport per a nous idiomes a mesura que creix la teva aplicació i base de clients.

Comença avui mateix!

La teva aplicació React es traduirà automàticament quan afegeixis qualsevol cadena a un component Translate. Tingues en compte que només els entorns amb permisos read/write a la clau API podran crear noves cadenes per traduir.

Recomanem tenir un entorn de staging tancat i segur on puguis provar la teva aplicació de producció, afegint noves cadenes abans de posar-la en funcionament. Això evitarà que algú robi la teva clau API secreta i, potencialment, que s'inflï el projecte de traducció afegint cadenes no autoritzades.

Assegura't de consultar els exemples complets al nostre perfil de GitHub. Si tens qualsevol problema, no dubtis a contactar-nos, i estarem encantats d'ajudar-te.

TacoTranslate et permet localitzar automàticament les teves aplicacions React ràpidament cap a i des de qualsevol idioma. Traduir gratis!