Mühelose Lokalisierung für React-Anwendungen

Wie es funktioniert

Installieren Sie das TacoTranslate-Paket über npm:

npm install tacotranslate

Wenn Sie das Modul installiert haben, müssen Sie ein TacoTranslate-Konto, ein Übersetzungsprojekt und die zugehörigen API-Schlüssel erstellen. Erstellen Sie hier ein Konto. Es ist kostenlos und erfordert keine Angabe einer Kreditkarte.

Innerhalb der TacoTranslate-Anwendungsoberfläche erstellen Sie ein Projekt und navigieren zur Registerkarte API-Schlüssel. Erstellen Sie einen read Schlüssel und einen read/write Schlüssel. Wir speichern diese als Umgebungsvariablen. Der read Schlüssel wird als public bezeichnet und der read/write Schlüssel als secret. Zum Beispiel könnten Sie sie zu einer .env Datei im Stammverzeichnis Ihres Projekts hinzufügen.

Sie müssen außerdem zwei weitere Umgebungsvariablen hinzufügen: TACOTRANSLATE_DEFAULT_LOCALE und TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Der standardmäßige Fallback-Sprachcode. In diesem Beispiel setzen wir ihn auf en für Englisch.
• TACOTRANSLATE_ORIGIN: Der „Ordner“, in dem Ihre Strings gespeichert werden, wie zum Beispiel die URL Ihrer Website. Hier erfahren Sie mehr über Origins.

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

Stellen Sie sicher, dass der geheime read/write API-Schlüssel niemals in clientseitige Produktionsumgebungen gelangt.

Einrichtung von TacoTranslate

Initialisieren Sie TacoTranslate in Ihrer React-Anwendung, indem Sie Ihre Anwendung im TacoTranslate-Kontextanbieter einbinden:

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>
	);
}

Sie können nun die Translate Komponente überall in Ihrer Anwendung verwenden, um übersetzten Text anzuzeigen! Schauen Sie sich unbedingt unsere Dokumentation für weitere Informationen und für Implementierungsanleitungen speziell für Ihre Einrichtung an.

import {Translate} from 'tacotranslate/react';

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

Vorteile der Nutzung von TacoTranslate

• Zeitersparnis: Automatisiert den mühsamen Prozess der Lokalisierung und das Sammeln von Strings, wodurch Sie wertvolle Zeit sparen.
• Kosteneffizient: Reduziert den Bedarf an manuellen Übersetzungen und senkt Ihre Lokalisierungskosten.
• Verbesserte Genauigkeit: KI-gestützte Übersetzungen gewährleisten kontextuell genaue und hochwertige Ergebnisse.
• Skalierbare Lösung: Unterstützen Sie neue Sprachen einfach, während Ihre Anwendung und Kundenbasis wächst.

Starten Sie noch heute!

Ihre React-Anwendung wird automatisch übersetzt, wenn Sie Zeichenketten zu einer Translate Komponente hinzufügen. Beachten Sie, dass nur Umgebungen mit read/write Berechtigungen für den API-Schlüssel neue Zeichenketten zur Übersetzung erstellen können.

Wir empfehlen, eine geschlossene und gesicherte Staging-Umgebung einzurichten, in der Sie Ihre Produktionsanwendung testen und neue Zeichenketten hinzufügen können, bevor Sie live gehen. Dies verhindert, dass jemand Ihren geheimen API-Schlüssel stiehlt und möglicherweise Ihr Übersetzungsprojekt durch das Hinzufügen unerwünschter Zeichenketten belastet.

Stellen Sie sicher, dass Sie sich die vollständigen Beispiele auf unserem GitHub-Profil ansehen. Wenn Sie auf Probleme stoßen, zögern Sie nicht, uns jederzeit zu kontaktieren, wir helfen Ihnen gerne weiter.

TacoTranslate ermöglicht es Ihnen, Ihre React-Anwendungen schnell und automatisch in jede Sprache zu lokalisieren und zurück. Kostenlos übersetzen!