Localització sense esforç per a aplicacions React

Com funciona

Instal·la el paquet TacoTranslate via npm:

npm install tacotranslate

Quan tinguis el mòdul instal·lat, hauràs de crear un compte de TacoTranslate, un projecte de traducció i les claus API associades. Crea un compte aquí. És gratuït i no requereix que afegeixis una targeta de crèdit.

Dins de la interfície d'usuari de l'aplicació TacoTranslate, crea un projecte i navega a la pestanya de claus API. Crea una clau read i una clau read/write. Les desarem com a variables d'entorn. La clau read és la que anomenem public i la clau read/write és secret. Per exemple, podries afegir-les 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 la localització de reserva per defecte. En aquest exemple, el configurarem a en per a anglès.
• TACOTRANSLATE_ORIGIN: La “carpeta” on s’emmagatzemaran les vostres cadenes, com ara l’URL del vostre lloc web. Llegiu 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

Assegura’t de no filtrar mai la clau API secreta read/write als entorns de producció del costat client.

Configuració de TacoTranslate

Inicialitza TacoTranslate a la teva aplicació React envoltant la teva 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 en qualsevol lloc dins de la vostra aplicació per mostrar text traduït! Assegureu-vos de consultar la nostra documentació per a més informació i per a 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 tediós de localització i recollida de cadenes, estalviant-te un temps preciós.
• Rendible: Redueix la necessitat de traduccions manuals, disminuint els teus costos de localització.
• Millora en l’exactitud: Les traduccions impulsades per IA garanteixen resultats contextulament precisos i d’alta qualitat.
• Solució escalable: Afegeix suport fàcilment per a nous idiomes a mesura que la teva aplicació i base de clients creixen.

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 sobre 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 fer-la pública. Això evitarà que algú robí la teva clau API secreta i que el teu projecte de traducció s'inflï per afegir cadenes no autoritzades.

Assegura’t de consultar els exemples complets al nostre perfil de GitHub. Si tens qualsevol problema, no dubtis a posar-te en contacte amb nosaltres, i estarem més que 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!