Ich habe die beste Kurzlinking-Plattform der Welt lokalisiert

Im Rahmen des Spiels mit Tolgee habe ich versucht, dub.co, ein etabliertes Open-Source-Unternehmen, in andere Sprachen zu übersetzen! Ich habe 1 Stunde gebraucht und die Ergebnisse sind erstaunlich!

---

In diesem Tutorial führe ich Sie durch einen einfachen und effizienten Ansatz zur Lokalisierung in einer Next.js-Anwendung mit Tolgee – einer Plattform, die für schnelles und autonomes Übersetzungsmanagement entwickelt wurde.

Sie erfahren außerdem, wie Sie Tolgee in Dub.co integrieren, eine beliebte Link-Management-Plattform, die es Benutzern ermöglicht, in ihren bevorzugten Sprachen auf die Anwendung zuzugreifen und mit ihr zu interagieren.

Voraussetzungen

Um dieses Tutorial vollständig zu verstehen, müssen Sie über grundlegende Kenntnisse von React oder Next.js verfügen.

Sie müssen außerdem Folgendes einrichten:

• Tolgee-Projekt – ein bestehendes Projekt mit mindestens zwei Sprachübersetzungen.
• Tolgee CLI – ermöglicht Ihnen die Interaktion mit der Tolgee-Plattform von Ihrem Computer aus über die Befehlszeile.
• Docker – erforderlich zum Ausführen von Dub.co. Es handelt sich um eine Open-Source-Plattform, die Containerisierung nutzt, um das Erstellen, Bereitstellen und Ausführen von Anwendungen zu vereinfachen.
• Docker Compose – eine Softwareanwendung zum Definieren und Ausführen von Docker-Anwendungen mit mehreren Containern.
• Python (Version 3.8 oder höher): erforderlich für die Konfiguration einiger Pakete von Dub.co.

---

Was ist Tolgee?

Tolgee ist eine entwicklerfreundliche Lokalisierungsplattform, die es Ihnen ermöglicht, Ihre Anwendung in jede beliebige Sprache zu übersetzen, ohne Ihren Code zu ändern. Es ist für Webanwendungen konzipiert, unterstützt aber auch mobile und Desktop-Anwendungen.

Mit Tolgee müssen Sie nicht nach Schlüsseln in Ihrem Quellcode suchen, Lokalisierungsdateien bearbeiten oder Daten für Übersetzer manuell exportieren. Tolgee bietet kontextbezogene Übersetzung, ein Übersetzungsgedächtnis zum Verfolgen bereits übersetzter Zeichenfolgen, maschinelle und automatische Übersetzungen und vieles mehr.

Bitte helfen Sie uns mit einem Stern. ?

Es würde uns helfen, mehr Artikel wie diesen zu erstellen?

Stern Sie das Tolgee-Repository ⭐

---

So richten Sie Dub.co auf Ihrem lokalen Computer ein

Dub.co ist eine Open-Source-Link-Management-Plattform, die es Marketingteams ermöglicht, leistungsstarke Analysen zu ihren Links hinzuzufügen, Kurzlinks zu erstellen, QR-Codes für Links zu generieren und vieles mehr. Es wurde von Steven Tey (ehemals Vercel) erstellt.

Folgen Sie diesen Schritten, um Dub.co auf Ihrem Computer einzurichten:

Klonen Sie das Dub.co GitHub-Repository, indem Sie das folgende Code-Snippet ausführen.

git clone https://github.com/dubinc/dub.git

Navigieren Sie in den Ordner dub und installieren Sie die Projektabhängigkeiten:

git clone https://github.com/dubinc/dub.git

Benennen Sie im Ordner apps/web die Datei .env.example in .env um.

Erstellen Sie ein neues Tinybird-Konto und kopieren Sie Ihr Admin Auth Token in die .env Datei.

pnpm install

Navigieren Sie in das Verzeichnis packages/tinybird und installieren Sie die Tinybird-CLI mit dem folgenden Befehl:

TINYBIRD_API_KEY=<your_admin_auth_token>

Führen Sie den folgenden Befehl in Ihrem Terminal aus und geben Sie Ihr Admin-Authentifizierungstoken ein, wenn Sie zur Authentifizierung mit der Tinybird-CLI aufgefordert werden:

pip3 install tinybird-cli

Veröffentlichen Sie die Tinybird-Datenquelle und -Endpunkte, indem Sie das folgende Code-Snippet ausführen:

tb auth

Erstellen Sie eine Upstash-Datenbank und kopieren Sie die folgenden Anmeldeinformationen aus dem REST-API-Abschnitt in die Datei .env:

tb push

Navigieren Sie zur Registerkarte „QStash“ und kopieren Sie die folgenden Anmeldeinformationen in die Datei „.env“.

UPSTASH_REDIS_REST_URL=<your_rest_url>
UPSTASH_REDIS_REST_TOKEN=<your_rest_token>

Führen Sie als Nächstes im Verzeichnis apps/web den folgenden Befehl aus, um den Docker Compose-Stack zu starten:

QSTASH_TOKEN=
QSTASH_CURRENT_SIGNING_KEY=
QSTASH_NEXT_SIGNING_KEY=

Generieren Sie den Prisma-Client und erstellen Sie seine Datenbanktabellen mit den folgenden Befehlen:

docker-compose up

Dub.co unterstützt mehrere Authentifizierungsmethoden. Erstellen Sie eine GitHub-App und kopieren Sie die URL unten als Rückruf-URL.

npx prisma generate
npx prisma db push

Zum Schluss starten Sie den Entwicklungsserver:

http://localhost:8888/api/auth/callback/github

Sie können auf die Webanwendung zugreifen, indem Sie in Ihrem Browser zu http://localhost:8888 navigieren, einen Arbeitsbereich erstellen und loslegen. Wenn Sie auf Probleme stoßen, lesen Sie die vollständige Installationsanleitung für detailliertere Hilfe.

---

So konfigurieren Sie Tolgee in einer Next.js-Anwendung

In diesem Abschnitt erfahren Sie, wie Sie Tolgee zu einer Next.js-Anwendung hinzufügen und es so konfigurieren, dass es mehrere Sprachen unterstützt, sodass Benutzer in ihrer bevorzugten Sprache auf die App zugreifen können.

Um die Lokalisierung in Next.js-Anwendungen zu implementieren, müssen Sie das Tolgee React SDK installieren.

pnpm dev

Als nächstes erstellen Sie ein Tolgee Platform-Konto und melden sich bei Ihrem Dashboard an.

Fügen Sie ein neues Projekt hinzu, indem Sie auf die Schaltfläche „Projekt“ klicken und Ihre bevorzugten Sprachen für das Projekt auswählen. Für diese Anwendung verwenden wir fünf Sprachen: Englisch (als Basissprache), Chinesisch, Hindi, Spanisch und Arabisch.

Klicken Sie auf das Profilsymbol in der oberen rechten Ecke Ihres Dashboards und wählen Sie dann Projekt-API-Schlüssel aus, um einen API-Schlüssel für Ihr Tolgee-Projekt zu erstellen.

Erstellen Sie eine .env.development.local und kopieren Sie Ihren API-Schlüssel in die Datei:

git clone https://github.com/dubinc/dub.git

Wählen Sie im Seitenleistenmenü „Übersetzungen“ aus und fügen Sie dem Projekt eine neue Übersetzung hinzu.

Sie können einen Übersetzungsschlüssel erstellen, den zu übersetzenden Inhalt oder die Zeichenfolge hinzufügen, eine Beschreibung bereitstellen und ihn dann speichern.

Tolgee bietet standardmäßig verschiedene maschinelle Übersetzungsoptionen, sodass Sie Inhalte problemlos in die verfügbaren Sprachen in Ihrem Projekt übersetzen können.

Herzlichen Glückwunsch! Sie haben die Tolgee-Plattform für Übersetzungen in Ihrer Anwendung erfolgreich eingerichtet. Als nächstes konfigurieren wir Tolgee innerhalb des Dub.co-Projekts, um Übersetzungen einfach direkt in der Anwendung zu generieren.

So richten Sie die Lokalisierung in Dub.co ein

In diesem Abschnitt werde ich Sie durch die Konfiguration von Tolgee zur Unterstützung von Client-Server-Interaktionen innerhalb des Dub.co-Projekts führen.

Installieren Sie zunächst das Tolgee CLI-Paket.

pnpm install

Führen Sie den folgenden Codeausschnitt aus, um sich mit Ihrem Projekt-API-Schlüssel bei Ihrer Tolgee-Plattform anzumelden.

TINYBIRD_API_KEY=<your_admin_auth_token>

Als nächstes erstellen Sie einen Ordner i18n im Verzeichnis apps/web. In diesem Ordner werden die JSON-Dateien gespeichert, die Übersetzungen für die verschiedenen Sprachen enthalten, die im Tolgee-Plattformprojekt verfügbar sind.

pip3 install tinybird-cli

Rufen Sie im Verzeichnis apps/web die in Ihrem Tolgee-Projekt erstellten Sprachübersetzungen ab, indem Sie den folgenden Codeausschnitt ausführen:

tb auth

Das obige Code-Snippet füllt den Ordner i18n automatisch mit den verschiedenen Sprachübersetzungen, die innerhalb der Tolgee-Plattform erstellt wurden.

tb push

Erstellen Sie einen Ordner tolgee, der Tolgee-Konfigurationen im Verzeichnis apps/web enthält:

git clone https://github.com/dubinc/dub.git

Fügen Sie eine Datei shared.ts im Verzeichnis tolgee hinzu und kopieren Sie dann den folgenden Codeausschnitt in die Datei:

pnpm install

Der obige Codeausschnitt konfiguriert Tolgee mit Standard- und Fallbacksprachen, um die Lokalisierung innerhalb der Anwendung zu ermöglichen.

Als nächstes erstellen Sie eine Datei client.tsx im Verzeichnis tolgee und kopieren dann den folgenden Codeausschnitt in die Datei:

TINYBIRD_API_KEY=<your_admin_auth_token>

Die Datei client.tsx dient der Übersetzung von Client-Komponenten und ermöglicht außerdem die In-Context-Funktionalität für vom Server gerenderte Komponenten. Das obige Code-Snippet definiert die Komponente TolgeeNextProvider, die die gesamte Dub.co-Anwendung umschließt und Konfigurationen bereitstellt, die zum Verwalten von Sprachänderungen und Übersetzungen erforderlich sind.

Erstellen Sie eine benutzerdefinierte Datei locale.ts im Ordner tolgee und kopieren Sie den folgenden Codeausschnitt hinein:

pip3 install tinybird-cli

Erstellen Sie abschließend eine Datei server.tsx im Ordner tolgee und kopieren Sie dann den folgenden Codeausschnitt in die Datei:

tb auth

Die Anwendung nutzt den React-Server-Cache für die gemeinsame Nutzung der Tolgee-Instanz zwischen Komponenten in einem einzigen Rendering. Dadurch kann die App die Tolgee-Instanz überall in den Serverkomponenten verwenden.

Herzlichen Glückwunsch! Sie haben Tolgee erfolgreich konfiguriert und können nun mit dem Hinzufügen von Übersetzungen zu verschiedenen Inhalten innerhalb der Anwendung beginnen.

---

So übersetzen Sie Ihre Bewerbungsinhalte mit Tolgee

Hier erfahren Sie, wie Sie Inhalte in Ihrer Webanwendung übersetzen und sehen, wie Tolgee eine einfache In-App-Übersetzung ermöglicht.

Um zu beginnen, müssen Sie die gesamte Dub.co-Anwendung mit der Komponente TolgeeNextProvider umschließen, die in tolgee/client.tsx definiert ist. Navigieren Sie zum Ordner apps/web/app, gehen Sie dann zum Verzeichnis app.dub.co/(dashboard) und aktualisieren Sie die Datei layout.tsx wie unten gezeigt:

tb push

Das obige Code-Snippet umschließt die Dashboard-Routen mit dem Tolgee-Anbieter und ermöglicht so den Sprachwechsel und die Lokalisierung in der gesamten Anwendung.

Tolgee bietet zwei Hooks, die Ihnen bei der Auswahl und Übersetzung von Text in Ihrer Anwendung helfen: useTolgee und useTranslate.

• Der useTolgee-Hook gibt die Tolgee-Instanz zurück, sodass Sie verschiedene Ereignisse abonnieren können, die beim Übersetzen von Text erneute Renderings auslösen.
• Der useTranslate-Hook enthält eine Übersetzungsfunktion (t-Funktion), die die tatsächlichen Übersetzungen direkt in der App rendert.

Aktualisieren Sie die Datei page.tsx im Verzeichnis app.dub.co/(dashboard)/[slug], indem Sie den folgenden Codeausschnitt hinzufügen:

"Client verwenden";
import { PageContent } aus „@/ui/layout/page-content“;
WorkspaceLinksClient aus „./page-client“ importieren;
///?? Tolgee-Installationen
import { useTolgee, useTranslate } from „@tolgee/react“;
import { setUserLocale } aus „tolgee/locale“;


Standardfunktion WorkspaceLinks() exportieren {
  const { t } = useTranslate();
  const tolgee = useTolgee(["pendingLanguage"]);
  const language = tolgee.getPendingLanguage();

  zurückkehren (
    <PageContent title="Links">
    {/**-- HTML-Eingabe zur Auswahl der bevorzugten Sprache --*/}
      <div className="flex w-full flex-col px-10">
        <p>Sprache auswählen</p>
        <auswählen
          defaultValue={Sprache}
          className="rounded-sm"
          name="Gebietsschema"
         >



<p>Das obige Code-Snippet zeigt ein HTML-Tag <strong><select> an, mit dem Benutzer verschiedene Sprachen auswählen und zwischen ihnen wechseln können. Das Element <strong>{t("hello")}</strong> verwendet die Übersetzungsfunktion von Tolgee, um einen Wert des „Hallo“-Schlüssels basierend auf der ausgewählten Sprache darzustellen.

<p><img src="https://img.php.cn/upload/article/000/000/000/173093241088271.jpg" alt="I have localized the best short-linking platform in the world"></p>

<p>Schließlich können Sie den verbleibenden Inhalt in der gesamten Anwendung aktualisieren, um Sprachänderungen zu unterstützen, sodass Benutzer alle Komponenten in ihrer ausgewählten Sprache anzeigen können.</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173093241165470.jpg" alt="I have localized the best short-linking platform in the world"></p>

<p>Tolgee bietet außerdem eine kontextbezogene Übersetzungsfunktion, mit der Sie Zeichenfolgen direkt in Ihrer Anwendung übersetzen können, sei es in der Entwicklung oder Produktion, indem Sie einfach auf den Text klicken und die Alt- oder Wahltaste gedrückt halten.</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173093241362494.jpg" alt="I have localized the best short-linking platform in the world"></p>

<p>Herzlichen Glückwunsch! Sie haben das Projekt für dieses Tutorial erfolgreich abgeschlossen.</p>

<p>Der Quellcode für dieses Tutorial ist hier verfügbar:</p>

<p>https://github.com/JanCizmar/dub-with-tolgee</p>


<hr>

<h2>
  
  
  Abschluss
</h2>

<p>Bisher haben Sie gelernt, wie Sie mit Tolgee Lokalisierung zu Ihren Softwareanwendungen hinzufügen, Unterstützung für mehrere Sprachen implementieren und den Sprachwechsel innerhalb eines realen Projekts nahtlos gestalten.</p>

<p>Tolgee ist eine schnelle, entwicklerorientierte Lokalisierungsplattform, mit der Sie Ihren Inhalten Kontext hinzufügen und in Sekundenschnelle Übersetzungen erstellen können. Es unterstützt außerdem mehrere JavaScript-Frameworks, darunter Vue, Angular und Svelte, und lässt sich für mehr Flexibilität in Tools wie Figma und eine REST-API integrieren.</p>

<p>Wenn Sie Ihren Benutzern ein personalisiertes Erlebnis bieten möchten, ist Tolgee eine ausgezeichnete Wahl. Fühlen Sie sich frei, einen Beitrag zu leisten und unser GitHub-Repository zu markieren, und treten Sie unserer Slack-Community bei, um mit anderen in Kontakt zu treten und sich mit dem Team auszutauschen.</p><p>Danke fürs Lesen!</p>


          

            
        

Das obige ist der detaillierte Inhalt vonIch habe die beste Kurzlinking-Plattform der Welt lokalisiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!