INTEGRTR Translation Hub: Internationalisieren Sie Ihre React-App

In Organisationen, die an Anwendungen für ein globales Publikum arbeiten, ist die Bedienung der Benutzer in mehreren Sprachen eine inhärente Anforderung. Der Prozess der Unterstützung dieser mehrsprachigen Nutzung ist bekannt als Internationalisierung (i18n).

Für viele dieser Unternehmen ist die Internationalisierung kein nachträglicher Gedanke, sondern ein integraler Bestandteil des Entwicklungsprozesses. Dennoch kann die Implementierung ein wenig mühsam sein, da die Entwickler möglicherweise nicht alle Sprachen kennen, in die ihre Anwendung übersetzt werden soll. Selbst wenn sie Übersetzer wie Google Translations verwenden, kann die manuelle Übersetzung des gesamten Textinhalts in der Anwendung eine mühsame Aufgabe sein. Abgesehen davon wird es auch schwierig, Eingaben von nicht-technischen Nutzern entgegenzunehmen, wenn die Sprachdateien zusammen mit dem Quellcode in der Regel auf GitHub veröffentlicht werden.

Wir bei INTEGRTR Da wir ERP-Software entwickeln, die auf der ganzen Welt eingesetzt wird, war die Internationalisierung schon immer ein wichtiger Bestandteil unseres Entwicklungsprozesses, und wir standen vor ähnlichen Problemen. Um diese Probleme zu lösen und die Internationalisierung einfacher und leichter für uns zu machen, haben wir eine Lösung entwickelt, die wir nun in die Welt bringen können. Wir nennen sie - INTEGRTR Übersetzungszentrum, unsere zentrale Anlaufstelle für die Internationalisierung aller unserer Anwendungen im Handumdrehen! Translation Hub vereinfacht maschinell erstellte Übersetzungen, hilft bei der Verwaltung manueller Übersetzungen und hält Ihre Übersetzungen mit Ihrem Versionskontrollsystem wie Git synchron.

In diesem Blog werden wir einen Blick darauf werfen, wie wir die Internationalisierung in einer React-App einrichten können und wie wir INTEGRTR Translation Hub verwenden können, um Übersetzungen für unsere Anwendung zu verwalten. Dafür benötigen wir aber zunächst eine Anwendung.

Um die Internationalisierungsfunktionen von Translation Hub zu demonstrieren, haben wir ein minimalistisches Spiel in React erstellt. Bevor wir uns also näher mit der Internationalisierung und Drehscheibe für ÜbersetzungenLassen Sie uns das Spiel einmal kurz durchgehen.

Hinweis: Dieser Blog behandelt nur die Einrichtung der Internationalisierung in einer React-App und wie wir die INTEGRTR Übersetzungszentrum um die App zu übersetzen. Die Logik des Spiels wird hier nicht erklärt.

Hier ist ein kleiner Einblick in das Spiel. Bunt, nicht wahr? Spielen Sie es hier.

Das Spiel heißt ColorShuffle. Das Spiel ist wirklich einfach! Alles, was du tun musst, ist, die Kreise in der zweiten Reihe zu drehen, indem du auf sie klickst/tippst und den oberen Quadranten des Kreises mit der darüber angezeigten Farbe abgleichst. Jedes Mal, wenn du auf einen Kreis klickst/tippst, drehen sich die benachbarten Kreise mit. Alles, was Sie tun müssen, um zu gewinnen, ist, alle oberen Quadranten der Kreise mit der jeweiligen oben angezeigten Farbe in so wenigen Umdrehungen wie möglich in Übereinstimmung zu bringen. Das ist ColorShuffle für Sie.

Wenn Sie einen Blick auf den Quellcode des Spiels werfen wollen, können Sie sich in der GitHub-Repositorium.

Richten wir die Internationalisierung in unserer Anwendung ein!

Da wir nun wissen, was Internationalisierung ist und wir die Anwendung, die wir erstellen, gesehen haben, lassen Sie uns darüber sprechen, wie wir sie in unserer Anwendung einrichten können, indem wir React Intl.

Einführung in React Intl

React Intl ist ein Teil der FormatJSeine Sammlung von JavaScript Internationalisierungsbibliotheken. Diese Bibliothek bietet uns React-Komponenten und APIs, die uns bei der Internationalisierung von Zeichenketten, Daten und Währungen helfen.

Sie können mehr über react-intl lesen hier

Einrichtung

Wir können die Bibliothek installieren react-intl mit einem Paketmanager wie Garn oder npm

Garn hinzufügen react-intl

Anmerkung: Ich verwende Garn in diesem Artikel für unsere Anforderungen an die Paketverwaltung, aber Sie können auch die npm auch. Einfach ersetzen Garn mit npm gleichwertige Befehle.

Einrichten

Als erstes müssen wir einen Ordner mit dem Namen intl  in /src Ordner (Sie können es auch in den Stammordner legen, wenn Sie das bevorzugen) und fügen Sie eine Standarddatei namens i18n.json oder i18n_de.json darin.

Sie können Ihr eigenes benutzerdefiniertes Präfix anstelle von i18n

// i18n.json

{
    "FARBE": "Farbe",
    "SHUFFLE": "Shuffle"
}

In dieser Standarddatei wird das Schlüssel-Wert-Paar für den gesamten Textinhalt unserer Anwendung gespeichert.

Sobald unsere Standarddatei fertig ist, müssen wir diese Datei in App.jsx und erstellen Sie einen Status, um das Gebietsschema zu behandeln.

// App.jsx

importiere {IntlProvider} von 'react-intl'

const selectedMessages = (lang) => {
  switch (lang) {
    // wir werden Fälle für andere Sprachen hinzufügen
    // sobald wir die i18n-Dateien für sie hinzufügen
    default:
      return en;
  }
};

export default function App() {
  const lang = window.location.pathname.split('/')[1];

  const [locale, setLocale] = useState({
    selectedLang: lang ? lang : 'en',
    messages: lang ? selectedMessages(lang) : en,
  });

  return (
    <intlprovider locale="{locale.selectedLang}" messages="{locale.messages}">
      <div classname="container">
        <gamename />
        <game />
        <options applangs="{appLangs}" locale="{locale}" updatelocalestate="{updateLocaleState}" />
        <externallink />
      </div>
    </intlprovider>
  );
}

lang ist die Sprache, die wir aus der URL abrufen. Wenn die URL eine Sprache angibt, verwenden wir diese bestimmte Sprache und setzen sie in die ausgewählteSprache Eigentum unseres Staates und selectedMessages() ist eine Funktion, die uns das Nachrichtenobjekt für die Sprache, die wir als Argument übergeben, zurückgibt.

Sobald der Zustand hergestellt ist, ist es an der Zeit, mit der Aktion zu beginnen...

React Intl bietet uns einen Internationalisierungskontextanbieter namens <IntlProvider>. Alles, was wir tun müssen, ist, unsere Anwendung mit diesem Anbieter zu verpacken. Indem wir unsere Anwendung mit <IntlProvider> machen wir den Internationalisierungskontext für alle React-Komponenten in der Anwendung verfügbar.

Wie Sie im obigen Code sehen können, übergeben wir zwei Requisiten an <IntlProvider>:

1. Ort: locale ist die aktuelle Sprache, in die unsere Anwendung übersetzt werden soll.
2. Nachrichten: enthält alle übersetzten Zeichenfolgen für die ausgewählte Sprache.

Auf der Grundlage der bereitgestellten Requisiten <IntlProvider> übergibt den notwendigen Kontext an alle darin verpackten Komponenten und übersetzt die Anwendung.

Die Standard-Sprachdatei ist nun vorhanden, der Internationalisierungskontextanbieter ist eingerichtet, und der nächste Schritt besteht darin, alle Textinhalte in unserer Anwendung zu finden und sie mit <FormattedMessage>.

// Spielname.jsx

importiere React von 'react';
import { FormattedMessage } from 'react-intl';

exportieren Sie Funktion Spielname() {
  return (
    <div classname="game-title">
      <span>
        <formattedmessage id="COLOR" />
      </span>
      <span>
        <formattedmessage id="SHUFFLE" />
      </span>
    </div>
  );
}

In der <FormattedMessage> Komponente, übergeben wir eine id der der Schlüssel zur übersetzten Zeichenfolge ist (Schlüsselpaarwerte in der Sprachdatei) die wir dort verwenden wollen. Wir müssen dies für alle Textinhalte in unserer Anwendung tun und das war's, die Einrichtung ist abgeschlossen! Wir pushen all diesen Code in unser Github Repo.

Anmerkung; INTEGRTR Übersetzungszentrum hat eine enge Integration mit Github, da Sie ab sofort nur noch Repos von Github hinzufügen können!

Nachdem wir nun die Internationalisierung eingerichtet haben, sehen wir, dass wir nur die Sprachdatei für Englisch haben. Wir wollen aber auch andere Sprachen unterstützen.

Wie ich bereits zu Beginn des Blogs erwähnt habe, kennt ein Entwickler möglicherweise nicht alle Sprachen, und das manuelle Hinzufügen all dieser Übersetzungen zur App kann eine mühsame Arbeit sein, und hier ist der Punkt INTEGRTR Translation Hub kommt zur Rettung!

Eingabe INTEGRTR Übersetzungszentrum!

INTEGRTR Translation Hub ist eine Anwendung, die entwickelt wurde, um unsere GitHub-Projekte im Handumdrehen zu übersetzen. Sie unterstützt sowohl private als auch öffentliche Repositories und IST EBENFALLS KOSTENLOS ZU VERWENDEN!

Erfahren Sie mehr über INTEGRTR Translation Hub in seinem FAQ-Abschnitt

Nun stellt sich die Frage, wie wir INTEGRTR Translation Hub nutzen können, um unsere GitHub-Projekte zu übersetzen?

Die Verwendung von INTEGRTR Translation Hub ist ein Kinderspiel. Lassen Sie mich Ihnen zeigen, wie Sie es verwenden können.

1. Besuchen Sie INTEGRTR Translation Hub : https://translate.integrtr.com

Wenn Sie auf den Link klicken, gelangen Sie auf die Landing Page von Translation Hub. Wie die Landing Page aussieht, sehen Sie auf dem folgenden Bild.

2. Anmelden/registrieren

Wenn Sie noch kein Konto haben, können Sie entweder ein Konto erstellen, indem Sie auf den Link "Anmelden" klicken, oder sich mit Ihrem Google-Konto anmelden. Sobald Sie sich angemeldet haben, erhalten Sie eine Bestätigungs-E-Mail. Nach der Bestätigung werden Sie auf die Anmeldeseite weitergeleitet, auf der Sie Ihre Anmeldedaten eingeben müssen, um sich bei der Anwendung anzumelden.

So sieht der Hauptbildschirm der App aus:

3. Projekt hinzufügen

Um mit der Übersetzung unserer Anwendung zu beginnen, müssen wir ein Projekt hinzufügen, indem wir "Projekt hinzufügen" wählen. Danach müssen wir uns mit unserem GitHub-Konto anmelden und sehen dann den unten stehenden Bildschirm:

Der nächste Schritt besteht darin, translation-assistant den Zugriff auf unsere Repositories zu erlauben. Dazu wählen wir die Schaltfläche "Configure on GitHub", die uns zu einer GitHub-Seite weiterleitet, auf der wir aufgefordert werden, die Repositories zu autorisieren, auf die wir zugreifen möchten.

Wenn Sie CI/CD- oder Bereitstellungs-Tools verwendet haben, die mit Github integriert sind, sollte Ihnen dieser Ablauf bekannt vorkommen.

Nach der Installation des Übersetzungsassistenten können wir sehen, dass unsere Repositories nun in Translation Hub eingepflegt sind.

4. Konfiguration

Klicken Sie auf das Repository, das Sie übersetzen möchten, und Sie werden auf die folgende Seite weitergeleitet:

Hier müssen wir als erstes den primären Zweig unserer GitHub Repo im Zweigstelle Feld. Im Neuer Projektname können wir den Namen unseres Übersetzungsprojekts hinzufügen.

Dann im Übersetzungen Pfad müssen wir den Pfad des Ordners angeben, in dem alle unsere Sprachdateien gespeichert sind (für mich ist es src/intl/ ).

In der Quelle Typ müssen wir den Quelltyp unserer Datei auswählen, ob es sich um eine .json Datei oder eine .properties Datei.

Als nächstes müssen wir die Translation Datei Präfix die wir in unseren Sprachdateien verwendet haben (alle meine Sprachdateien werden mit einem i18n Vorwahl: i18n.json).

Als Letztes müssen wir die Sprachen auswählen, in die wir unsere App übersetzen möchten. Wenn alle diese Schritte abgeschlossen sind, klicken Sie auf "Weiter" und lassen Sie Translation Hub die Arbeit machen!

Hinweis: Ihre Dateien werden möglicherweise nicht mit dem i18n Präfix, wählen Sie in diesem Fall die Option benutzerdefinierte und fügen Sie das benutzerdefinierte Präfix hinzu, das Sie in Ihren Dateien verwendet haben.

5. Übersetzung

Nachdem wir nun die Konfiguration vorgenommen haben, können wir uns an die Übersetzung unserer App machen. Die Seite, die Sie oben sehen, ist der Ort, an dem die ganze Magie passiert! Wir können die Übersetzungen entweder manuell oder automatisch hinzufügen.

Um dies manuell zu tun, müssen wir nur den übersetzten Text in die Textfelder eingeben. Für eine automatische Übersetzung können Sie entweder einzeln auf die Schaltfläche Übersetzen Sie auf jeden Text klicken.

Oder indem Sie auf die Schaltfläche Alles übersetzen in der oberen rechten Ecke, um den gesamten Text auf einmal zu übersetzen.

Wenn wir den gesamten Text übersetzt haben, müssen wir als Nächstes die Übersetzungen speichern, indem wir auf die Schaltfläche Speichern Sie in der rechten unteren Ecke des Bildschirms.

Wenn Sie mit jemandem zusammenarbeiten möchten, um Ihre Anwendungen zu übersetzen, können Sie dies tun, indem Sie auf die Schaltfläche "Anpassen" und fügen Sie die E-Mail-ID der Benutzer, die Sie hinzufügen möchten, in der Projektmitglieder Feld. Sie erhalten dadurch eine Einladung zur Nutzung von Translation Hub und können dann gemeinsam mit Ihrem Team an der Übersetzung Ihrer Bewerbung arbeiten.

6. Integration

Nun, da wir alle Texte in unserer Anwendung in die gewünschten Sprachen übersetzt haben, ist es an der Zeit, sie in unsere Anwendung zu integrieren, und das können wir auf zwei Arten tun:

• Exportieren der Dateien
• Erstellen einer PR (der einfachste Weg)

In der rechten oberen Ecke sehen Sie drei vertikale Punkte, klicken Sie darauf und Sie sehen zwei Optionen, Exportieren und PR erstellen.

Durch Auswahl des Exportieren Option, laden Sie eine .zip-Datei herunter, die alle übersetzten Sprachen enthält und die Sie in den Übersetzungsordner Ihrer Anwendung extrahieren können.

Durch Auswahl des PR erstellen Option wird ein PR in Ihrem GitHub Repo mit allen Änderungen erstellt. Sie können den PR genehmigen und er wird mit Ihrem Master zusammengeführt und Viola, Ihre Übersetzungsdateien sind jetzt Teil Ihrer Anwendung!

Das obige Bild zeigt, wie der PR aussehen wird. Alles, was Sie tun müssen, ist, den PR mit Ihrem primären Zweig zusammenzuführen, und dann sind Sie startklar.

Sobald die Übersetzungsdateien vorhanden sind, können Sie die Dateien in App.jsx und fügen Sie sie dem selectedMessages und fahren mit dem Aufbau der Logik für die Sprachauswahl fort.

// App.jsx

function mergeWithDefault(nachrichten) {
  return {
    ...en,
    ...messages,
  };
}

const selectedMessages = (lang) => {
  switch (lang) {
    case 'de':
      return mergeWithDefault(de);
    case 'bn':
      return mergeWithDefault(bn);
    case 'hi':
      return mergeWithDefault(hi);
    case 'kn':
      return mergeWithDefault(kn);
    case 'en':
    default:
      return en;
  }
};

Die mergeWithDefault verschmilzt die ausgewählte Sprache mit der Standardsprache, d.h. Englisch. Dadurch wird verhindert, dass die Anwendung abbricht, wenn einige Übersetzungen der ausgewählten Sprache nicht verfügbar sind.

Falls die übersetzten Zeichenfolgen der ausgewählten Sprache nicht verfügbar sind, zeigt die App die englische Variante des Textes an, da wir die ausgewählte Sprache mit dem Englischen zusammenführen.

Jetzt können Sie Übersetzungen mühelos aktualisieren, hinzufügen oder entfernen. Wenn Sie Änderungen an bestehenden Sprachen vornehmen, müssen Sie nicht einmal zusätzlichen Code schreiben. Von der Übersetzung bis hin zur PR-Erstellung können Sie sich um alles kümmern Translation Hub.

Schlussfolgerung

Mehrsprachige Anwendungen sind nicht einfach zu erstellen, aber mit Tools wie INTEGRTR Translation Hub hoffen wir, den Prozess einfacher und leichter zu machen. Machen Sie weiter und probieren Sie aus INTEGRTR Übersetzungszentrum um Ihre React-App auf der ganzen Welt zugänglich zu machen.