Localizzazione senza sforzo per le applicazioni React

Come funziona

Installa il pacchetto TacoTranslate tramite npm:

npm install tacotranslate

Una volta installato il modulo, dovrai creare un account TacoTranslate, un progetto di traduzione e le relative chiavi API. Crea un account qui. È gratuito e non richiede l'inserimento di una carta di credito.

Nell'interfaccia utente dell'applicazione TacoTranslate, crea un progetto e vai alla scheda delle chiavi API. Crea una chiave read e una read/write. Le salveremo come variabili d'ambiente. La chiave read è quella che chiamiamo public e la chiave read/write è secret. Ad esempio, potresti aggiungerle a un file .env nella root del tuo progetto.

Dovrai inoltre aggiungere altre due variabili d'ambiente: TACOTRANSLATE_DEFAULT_LOCALE e TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Il codice della locale di fallback predefinita. In questo esempio, lo imposteremo su en per l'inglese.
• TACOTRANSLATE_ORIGIN: La "cartella" in cui verranno memorizzate le tue stringhe, ad esempio l'URL del tuo sito web. Leggi di più sulle origini qui.

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

Assicurati di non divulgare mai la chiave API segreta read/write negli ambienti di produzione lato client.

Configurazione di TacoTranslate

Inizializza TacoTranslate nella tua applicazione React avvolgendo la tua applicazione nel provider di contesto 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>
	);
}

Ora puoi usare il componente Translate ovunque nella tua applicazione per visualizzare il testo tradotto! Assicurati di consultare la nostra documentazione per maggiori informazioni e per guide di implementazione specifiche per la tua configurazione.

import {Translate} from 'tacotranslate/react';

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

Vantaggi dell'utilizzo di TacoTranslate

• Risparmio di tempo: Automatizza il tedioso processo di localizzazione e la raccolta delle stringhe, facendoti risparmiare tempo prezioso.
• Economico: Riduce la necessità di traduzioni manuali, abbassando i costi di localizzazione.
• Maggiore accuratezza: Le traduzioni potenziate dall'IA garantiscono risultati contestualmente accurati e di alta qualità.
• Soluzione scalabile: Aggiungi facilmente il supporto per nuove lingue man mano che la tua applicazione e la tua base di utenti crescono.

Inizia oggi stesso!

La tua applicazione React verrà tradotta automaticamente quando aggiungi qualsiasi stringa a un componente Translate. Nota che solo gli ambienti con permessi read/write sulla chiave API saranno in grado di creare nuove stringhe da tradurre.

Raccomandiamo di avere un ambiente di staging chiuso e protetto dove puoi testare la tua applicazione di produzione, aggiungendo nuove stringhe prima del rilascio. Questo impedirà a chiunque chiunque di rubare la tua chiave API segreta e, potenzialmente, di gonfiare il tuo progetto di traduzione aggiungendo stringhe indesiderate.

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!