Integration von FBT + Crowdin + GitHub

Veröffentlicht

(Jorge Dalmendray) (22. Dezember) , 2020)

In einem (vorherigen Artikel) habe ich skizziert So integrieren Sie das FBT-Framework (Facebook Translation) in Ihre React Native-Anwendung. Ich schloss diesen Artikel mit einer Erklärung, wie wir eine Lücke im Übersetzungsprozess hatten: die eigentliche Übersetzung selbst.

Schauen wir uns den Übersetzungsprozess etwas genauer an:

  1. Schreiben Sie Code während des Umbruchs Ihre Zeichenfolgen in fbt -Tags
  2. Extrahieren Sie alle Zeichenfolgen aus dem Quellcode und halten Sie sie für Übersetzungen bereit. Dies wird durch ein einfaches Skript in der fbt-Bibliothek verwaltet.
  3. GAP: Senden Sie die Zeichenfolgen zur Übersetzung
  4. GAP: Nachdem Übersetzungen eingegangen sind, müssen wir sie so schnell wie möglich wieder in die App aufnehmen können wir können
  5. profitieren!

Geben Sie Crowdin ein. Crowdin ist eine Cloud-basierte Lösung, die das Lokalisierungsmanagement für Ihr Team optimiert. Es ist ein Tool zum Verwalten Ihrer Zeichenfolgen, zum Einstellen von Übersetzern und zum Sicherstellen, dass die Übersetzungen korrekt und im Kontext Ihrer App sind.

In diesem Artikel werde ich erklären, wie Sie Ihr GitHub-Repo in Crowdin integrieren, um automatisch neue Zeichenfolgen hochzuladen für Übersetzungen und wie Sie automatisch eine Pull-Anfrage (PR) erstellen, wenn Ihre Übersetzungen fertig sind.

Bei Verwendung von FBT können Sie alle Zeichenfolgen aus Ihrem Quellcode extrahieren, indem Sie zwei einfache Skripts ausführen:

  1. fbt-manifest: Dieses Skript findet alle Quelldateien mit fbt() -Aufrufen oder -Tags in ihnen

  2. fbt-collect: Dieses Skript empfängt die Eingabe des Skripts fbt-manifest, durchsucht alle darin enthaltenen Dateien und extrahiert die Zeichenfolgen und die Beschreibung in eine separate Datei. Nennen wir es .source\_strings.json

An dieser Stelle müssen Sie Crowdin mitteilen, wo sich Ihre .source\_strings.json -Datei befindet. Sie wird dann gelesen Fügen Sie diese Zeichenfolgen nach einem von Ihnen festgelegten Zeitplan zur Plattform hinzu und informieren Sie die Übersetzer über die neuen Zeichenfolgen, die zur Übersetzung bereit sind.

Schritte zur Integration von Crowdin in Ihre GitHub-Repo

  1. Integrieren Sie Ihr GitHub-Repo mit Crowdin : Dies ermöglicht Crowdin zu r Lesen Sie von Ihrem Repo und reichen Sie dann PRs zur Überprüfung ein. Hinweis: Wenn Sie GitHub nicht verwenden, lesen Sie bitte andere Crowdin-Integrationen
  2. Erstellen Sie eine crowdin.yml Konfigurationsdatei im Stammverzeichnis Ihres Projekts. Hier teilen Sie Crowdin mit, wo die Quellzeichenfolgen abgerufen und Übersetzungen abgelegt werden sollen. Ein Beispiel für den folgenden Dateiinhalt:

files:
- source: /i18n/fbt/.source\_strings.json
translation: /i18n/fbt/translations/\%two\_letters\_code\%/translation.json

Weitere Informationen zu dieser Konfigurationsdatei finden Sie unter Crowdins Dokumentation .

Zu diesem Zeitpunkt, wenn Ihre wird durch Ausführen der Skripte von fbt aktualisiert. Je nach dem bei der Integration in GitHub festgelegten Synchronisierungszeitplan werden neue Zeichenfolgen in die Crowdin-Plattform importiert.

Anschließend können Sie professionelle Übersetzungsdienste bestellen über die Plattform oder wählen Sie die Verwendung von maschinellen Übersetzungen , wenn neue Übersetzungen hinzugefügt werden, Crowdin erstellt eine PR zurück in Ihrem Repo. Zu diesem Zeitpunkt können Sie die Änderungen manuell akzeptieren und zusammenführen oder eine GitHub-Aktion erstellen, um die Änderungen automatisch zu akzeptieren und zusammenzuführen!

Konvertieren der Crowdin-Ausgabe in ein lesbares FBT-Format

Der letzte Schritt zuvor Sie können die Übersetzungen verwenden, um das Skript fbt-translate auszuführen. Dieses Skript generiert eine Datei, die die FBT-Plattform versteht und die Sie eventuell im Code festlegen.

fbt-translate :

"translate-fbts": "fbt-translate --translations translations/*.json --jenkins > src/translatedFbts.json"

Verwendung in React :

init({
translations: require("../translatedFbts.json"),
hooks: {
getViewerContext: () => viewerContext,
},
});

Verwendung in React Native:

  • Für React Native / Android Wir müssen die Ausgabe des Skripts fbt-translate in eine Android-String-Ressourcendatei konvertieren. Ein Skript hilft Ihnen bei diesem Schritt:

"generate-android-fbt": "babel-node i18n/scripts/generate-android-localizables-executor.js"

Nachdem Sie dies ausgeführt haben, können Sie Ihre Android-Anwendung ausführen.

  • Für React Native / iOS müssen wir die Ausgabe von fbt-translate Skript in eine iOS-String-Ressourcendatei .Es gibt kein Skript, um dies zu erreichen, aber wir sind immer offen für Beiträge 🙂

Letzte Gedanken

An diesem Punkt sollten Sie in der Lage sein, Zeichenfolgen automatisch aus Ihrer App zu extrahieren Laden Sie sie auf Crowdin hoch und erhalten Sie eine PR, wenn die Übersetzungen fertig sind. Wie Sie vielleicht bemerkt haben, sind einige Schritte in diesem Prozess manuell. Einige Vorschläge:

Erstellen Sie GitHub-Aktionen, CircleCI-Schritte (oder was auch immer Sie für CI / CD verwenden), um Folgendes auszuführen:

  • fbt-manifest und fbt-collect jedes Mal, wenn Sie eine PR zusammenführen
  • Von Crowdin automatisch erstellte PRs zusammenführen
  • fbt-translate nach dem Zusammenführen von Crowdin-PRs
  • Führen Sie für Android die generate-android-localizables-executor.js nach dem fbt-translate -Skript

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.