Localização sem esforço para aplicações React

Como funciona

Instale o pacote TacoTranslate via npm:

npm install tacotranslate

Quando tiver o módulo instalado, terá de criar uma conta na TacoTranslate, um projeto de tradução e as chaves de API associadas. Crie uma conta aqui. É gratuita, e não é necessário adicionar um cartão de crédito.

Dentro da interface da aplicação TacoTranslate, crie um projeto e navegue até ao separador das chaves de API. Crie uma chave read e outra read/write. Vamos guardá‑las como variáveis de ambiente. A chave read é aquilo que chamamos public e a chave read/write é secret. Por exemplo, pode adicioná‑las a um ficheiro .env na raiz do seu projeto.

Também precisará de adicionar mais duas variáveis de ambiente: TACOTRANSLATE_DEFAULT_LOCALE e TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: O código de localidade de fallback predefinido. Neste exemplo, vamos defini‑lo como en, para inglês.
• TACOTRANSLATE_ORIGIN: A "pasta" onde as suas strings serão armazenadas, como a URL do seu site. Leia mais sobre origens aqui.

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

Certifique-se de nunca divulgar a chave de API secreta read/write em ambientes de produção do lado do cliente.

Configuração do TacoTranslate

Inicialize o TacoTranslate na sua aplicação React envolvendo a sua aplicação no provedor de contexto do 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>
	);
}

Agora pode usar o componente Translate em qualquer lugar da sua aplicação para mostrar texto traduzido! Não deixe de consultar a a nossa documentação para obter mais informações e para guias de implementação específicos para a sua configuração.

import {Translate} from 'tacotranslate/react';

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

Vantagens de usar o TacoTranslate

• Poupa tempo: Automatiza o tedioso processo de localização e recolha de strings, poupando-lhe tempo valioso.
• Rentável: Reduz a necessidade de traduções manuais, diminuindo os seus custos de localização.
• Maior precisão: As traduções impulsionadas por IA asseguram resultados contextualmente precisos e de alta qualidade.
• Solução escalável: Adicione facilmente suporte para novos idiomas à medida que a sua aplicação e a sua base de clientes crescem.

Comece hoje!

A sua aplicação React será traduzida automaticamente quando adicionar quaisquer cadeias de texto a um componente Translate. Tenha em atenção que apenas ambientes com permissões read/write na chave da API poderão criar novas cadeias de texto a serem traduzidas.

Recomendamos ter um ambiente de pré-produção fechado e seguro onde possa testar a sua aplicação de produção, adicionando novas cadeias de texto antes de ir para produção. Isto impedirá que qualquer pessoa qualquer pessoa roube a sua chave secreta da API e, potencialmente, infle o seu projeto de tradução ao adicionar cadeias de texto indesejadas.

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!