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 API key associate. Crea un account qui. È gratuito e non richiede di inserire una carta di credito.

All'interno dell'interfaccia utente dell'applicazione TacoTranslate, crea un progetto e naviga nella 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 root del tuo progetto.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Il codice della lingua 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 racchiudendo 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 utilizzare il componente Translate ovunque nella tua applicazione per visualizzare il testo tradotto! Assicurati di consultare la nostra documentazione per maggiori informazioni e per le guide all'implementazione specifiche per il tuo setup.

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 tedioso processo di localizzazione e raccolta delle stringhe, facendoti risparmiare tempo prezioso.
• Conveniente: Riduce la necessità di traduzioni manuali, abbassando i costi di localizzazione.
• Maggiore precisione: Le traduzioni basate su AI 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 base di utenti crescono.

Inizia oggi stesso!

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

Consigliamo di avere un ambiente di staging chiuso e sicuro dove poter testare la tua applicazione in produzione, aggiungendo nuove stringhe prima di andare in live. Questo impedirà a chiunque di rubare la tua chiave API segreta e potenzialmente di gonfiare il progetto di traduzione aggiungendo stringhe indesiderate.

Assicurati di dare un'occhiata agli esempi completi sul nostro profilo GitHub. Se riscontri problemi, non esitare a contattarci, saremo più che felici di aiutarti.

TacoTranslate ti permette di localizzare automaticamente le tue applicazioni React rapidamente da e verso qualsiasi lingua. Traduci gratis!