Localizzazione senza sforzo per 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 chiavi API associate. Crea un account qui. È gratuito e non richiede l’inserimento di una carta di credito.

All'interno dell'interfaccia utente dell'applicazione TacoTranslate, crea un progetto e naviga alla scheda delle chiavi API. Crea una chiave read e una chiave 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 radice del tuo progetto.

Dovrai anche aggiungere altre due variabili d’ambiente: TACOTRANSLATE_DEFAULT_LOCALE e TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Il codice della localizzazione predefinita di riserva. In questo esempio, lo imposteremo su en per l'inglese.
• TACOTRANSLATE_ORIGIN: La “cartella” dove verranno memorizzate le tue stringhe, come 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 in qualsiasi punto della tua applicazione per visualizzare il testo tradotto! Assicurati di consultare la nostra documentazione per ulteriori informazioni e per le guide all’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'uso di TacoTranslate

• Risparmio di tempo: Automatizza il processo noioso di localizzazione e raccolta delle stringhe, facendoti risparmiare tempo prezioso.
• Conveniente: Riduce la necessità di traduzioni manuali, abbassando i costi della localizzazione.
• Maggiore accuratezza: Le traduzioni supportate dall'IA garantiscono risultati accurati nel contesto e di alta qualità.
• Soluzione scalabile: Aggiungi facilmente il supporto a 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.

Consigliamo di avere un ambiente di staging chiuso e sicuro dove poter testare la tua applicazione di produzione, aggiungendo nuove stringhe prima del rilascio. Questo impedirà a 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!