iOS App-Lokalisierung mit Phrase Strings

Dies öffnet den Add Project-Dialog, der es uns ermöglicht, die Anfangseinstellungen unseres neuen Projekts schnell zu konfigurieren.

Wir können unserem Projekt jeden Namen geben, den wir wollen

Wir müssen unserem Projekt einen Namen geben, und wir können jeden Namen wählen, den wir wollen. Wir verwenden .strings Dateien für den Großteil unserer Lokalisierung, also wählen wir diese Option als das Main Format für unser Projekt. Und natürlich wählen wir iOS als Haupttechnologie des Projekts. Das reicht, um loszulegen. Klick auf die Speichern Schaltfläche, um das Projekt zu erstellen.

Hinweis » Du kannst jede dieser Projekteinstellungen jederzeit über das Projekteinstellungen-Dialogfeld ändern.

Installation der Phrase CLI

Um unsere Übersetzungen mit Phrase synchronisieren zu können, brauchst du die Phrase CLI. Wenn wir Homebrew auf unserem Mac haben, ist das ziemlich einfach. Wir müssen nur zwei Befehle von der Kommandozeile aus ausführen:

$ brew tap phrase/brewed

tapping verschafft uns Zugriff auf das Phrase Homebrew Repository. Sobald das erledigt ist, können wir ausführen.

$ brew install phraseapp

Et voilà. Das sollte es sein. Um die Installation zu überprüfen, können wir $ phraseapp in der Befehlszeile ausführen. Wenn alles gut gelaufen ist, sollten wir eine Liste aller verfügbaren Befehle sehen, die die Phrase CLI bietet.

Hinweis » Wenn du Homebrew nicht verwenden möchtest, schau dir den vollständigen CLI-Installationsleitfaden für andere Installationsoptionen an.

Locales hinzufügen

Mit unserem erstellten Projekt können wir zum Locales Tab gehen, um die unterstützten Locales unserer App hinzuzufügen. Natürlich können wir Locales in unserem Projekt jederzeit hinzufügen oder löschen.

Lass uns diese Locales hinzufügen

Im Locales-Tab solltest du einen Füge das erste Locale hinzu-Button sehen. Lass uns auf diesen Knopf klicken. Wenn wir das tun, öffnet sich der Add Locale-Dialog.

Einfacher geht’s nicht

Wir geben unserem Locale einfach einen Namen und wählen die Ziel-Lokalisierung aus, die wir anvisieren. In meinem Fall füge ich Englisch hinzu. Wir können dann das Locale speichern und den Prozess für alle anderen Locales wiederholen, die wir anfangs in unserer App unterstützen möchten.

Initialisierung unseres Client-Projekts

Jetzt schauen wir uns unseren Client an, also unseren Entwicklungsrechner. Um unsere lokale Phrase-Umgebung für unser Projekt zu initialisieren, benötigen wir ein API-Zugriffstoken. Wir müssen auch eine lokale .phraseapp.yml-Datei generieren.

Einen API-Zugriffstoken erhalten

Um ein API-Zugriffstoken zu erstellen, können wir uns bei Phrase anmelden und zu unserer Profilseite gehen. Der Link zu unserer Profilseite befindet sich unter unserem Benutzernamen in der Navigationsleiste.

„Fartknocker2022“ ist kein angemessener Profilname

Sobald wir auf unserer Profilseite sind, können wir über den Link in der oberen Tab-Leiste zum Tab Zugriffstoken gehen.

Finde das Zugriffstoken Tab-Leisten-Element

Im Tab Access Tokens klickst du auf die Schaltfläche Generate Token. Dies öffnet den Generate Token-Dialog.

Nur ein Hinweis und schon kannst du loslegen.

Wir brauchen für unser Projekt sowohl Lese- als auch Schreibzugriff, da wir Übersetzungsdateien sowohl herunterladen als auch hochladen. Wir können diese Option also so belassen, wie sie ist. Wir können im Notiz-Feld eine beliebige identifizierende Notiz für uns selbst eingeben. Dies dient als Erinnerung an den Grund, warum wir dieses Token erstellt haben. Klick auf Speichern, um das Token zu generieren. Du solltest dann das neue Token zusammen mit einer Schaltfläche sehen, mit der du es in deine Zwischenablage kopieren kannst.

Hinweis » Stelle sicher, dass du das Token kopierst und an einem sicheren Ort aufbewahrst, da es dir nur einmal in der Phrase-Konsole angezeigt wird.

Hol dir dein Token, solange es noch heiß ist

Erstelle unsere Client-Konfiguration

Jetzt, da wir unser Zugriffstoken haben, können wir unser Projekt auf unserem Entwicklungsrechner initialisieren. Vom Projektverzeichnis aus können wir den folgenden Befehl in der Befehlszeile ausführen.

$ phraseapp init

Führe diesen Befehl aus, und der Phrase-Papagei photobombt dein Terminal. Wir werden nach unserem API-Zugangstoken gefragt, und wir können das oben generierte einfügen.

Uns wird dann eine Liste unserer Phrase-Projekte angezeigt, und wir können eines auswählen, um es mit unserem lokalen Projekt zu verknüpfen.
Danach werden wir aufgefordert, unser Standard-Lokalisierungsformat auszuwählen. Wir haben das Format festgelegt, als wir unser Projekt in der Phrase-Webkonsole erstellt haben, also können wir einfach Enter drücken, um das gleiche Format zu verwenden.
Gib dann den Dateipfad zu deiner Datei Localizable.strings an. Wir haben diese Datei noch nicht erstellt, also kannst du Enter drücken, um vorerst bei der Standardpfadvorlage zu bleiben. Wir bearbeiten diesen Wert später.
Die Datei .phraseapp.yml wird jetzt generiert. Schließlich wirst du gefragt, ob du einen ersten Upload deiner Übersetzungsdateien machen oder hochladen willst. Drück n, um diesen Schritt vorerst zu überspringen.

Hinweis » Es könnte eine gute Idee sein, unsere .phraseapp.yml unter Versionskontrolle zu stellen. Das wird es anderen Entwicklern im Projekt erleichtern, Übersetzungen zu synchronisieren.

Unsere erste Lokalisierung in XCode hinzufügen

Nachdem die Initialisierung von Phrase abgeschlossen ist, kannst du dich jetzt auf deine iOS-App konzentrieren. Um es lokalisierbar zu machen, müssen wir mindestens eine Sprache in XCode hinzufügen. Wir tun dies, indem wir unser Projekt im Navigator auswählen, das Projekt selbst (nicht ein spezifisches Ziel) in der Zielliste auswählen und dann auf die ➕ Schaltfläche unter Localizations klicken. Wähle hier Arabisch aus. Du kannst jede gewünschte Sprache hinzufügen.

Klick ➕ für 🌍

Ein Dialog wird geöffnet, in dem wir die Dateien und die Referenzsprache für die Storyboard-Übersetzungen unseres neuen Locales auswählen können. Wir können Base als Referenzsprache ausgewählt lassen. Lass uns Localizable Strings für unsere Dateitypen auswählen. Dies wird dem Format entsprechen, das wir für unser Projekt in Phrase festgelegt haben.

Füge Quellübersetzungsdateien hinzu

Standardmäßig verwendet XCode die Strings in unseren Main.storyboard und LaunchScreen.storyboard als Quellübersetzungen. In meinem Fall sind diese auf Englisch. Es ist gut, diese Strings in ihrer eigenen Localizable.strings-Datei zu haben, damit wir sie als Quellübersetzungen in Phrase verwenden können. Wähle unsere Main.storyboard Datei aus und aktiviere das Englisch Kontrollkästchen im Dateiinspektor unter Lokalisierungen.

Wir wollen unsere Quellübersetzungen in Phrase

Client-Konfiguration wird aktualisiert

Jetzt, da du deine ersten Übersetzungsdateien hast, kannst du deine .phraseapp.yml aktualisieren und die Pfade hinzufügen. So kannst du sie über die CLI mit Phrase synchronisieren. Sobald wir unsere Quell- und Zielpfade hinzugefügt haben, wird unsere .phraseapp.yml ungefähr so aussehen.

phraseapp:
  access_token: <your_access_token>
  project_id: <your_project_id>
  push:
    sources:
    - file: ./Views/en.lproj/Main.strings
      params:
        file_format: strings
  pull:
    targets:
    - file: ./Views/ar.lproj/Main.strings
      params:
        file_format: strings

Dies teilt dem Phrase-Client mit, welche Dateien hochgeladen werden, wenn wir push (unsere Quell-Dateien) und welche heruntergeladen werden, wenn wir pull (unsere Ziel-Dateien). Pushing ist im Grunde hochladen, und Pulling ist herunterladen.
Um jedoch in der Lage zu sein, unsere Übersetzungen zu Phrase zu pushen und zu pullen, müssen wir Locale-IDs zu unserer .phraseapp.yml-Datei hinzufügen. Wir können diese von der Phrase Webkonsole erhalten. Wenn wir zum Locales-Tab in der Konsole navigieren, finden wir ein Zahnrad-Symbol neben jedem Locale.

Hab keine Angst, klick auf das Zahnrad

Ein Klick auf dieses Symbol öffnet den Dialog „Edit Locale“. Von dort aus können wir zum API-Tab navigieren, um die ID des Locales zu erhalten.

Da ist sie, die ID

Mit unseren Locale-IDs in der Hand können wir unsere .phraseapp.yml-Datei aktualisieren.

phraseapp:
  access_token: <your_access_token>
  project_id: <your_project_id>
  push:
    sources:
    - file: ./Views/en.lproj/Main.strings
      params:
        locale_id: fd935424a9ef2dfd054d982ccb7a8064
        file_format: strings
  pull:
    targets:
    - file: ./Views/ar.lproj/Main.strings
      params:
        locale_id: 9c380148d7c1827b6c1db12f0b1a9da8
        file_format: strings

Alles klar, jetzt kannst du deinen ersten push machen. Dies wird unsere Quelldatei zu Phrase hochladen und es uns ermöglichen, die Zielübersetzungen zu erstellen. Lass uns den folgenden Befehl im gleichen Verzeichnis ausführen, das unsere .phraseapp.yml enthält, auf der Kommandozeile:

$ phraseapp push

Wenn alles gut gelaufen ist, sollten wir eine Ausgabe wie die folgende sehen:

Views/en.lproj/Main.strings wird hochgeladen... abgeschlossen!
Prüf die Upload-ID: fa27e27bd0f4256295d49af64efd8069, Dateiname: Main.strings für Informationen über Verarbeitungsergebnisse.

Und wenn du die Phrase-Webkonsole besuchst, solltest du sehen, dass die Liste der Locales jetzt zeigt, dass es ausstehende Übersetzungen gibt.

Wir haben etwas zu übersetzen

Hinweis » Du kannst deine Dateien auch über die Webkonsole zu Phrase hochladen, und es gibt einige Randfälle, auf die du beim Hochladen achten solltest.

Super, großartig! Wir haben jetzt unser Projekt mit Phrase synchronisiert. Lass uns mit dem Übersetzen loslegen.

iOS-App-Lokalisierung mit Phrase im Einsatz

Bisher haben wir unsere Main.storyboard Beschriftungen hochgeladen. Jetzt sind sie bereit, damit du sie in der Phrase Webkonsole übersetzen kannst. Lass uns die Konsole öffnen und zu {Projektname} > Locales > ar navigieren, um unsere ausstehenden arabischen (Ziel-)Übersetzungen zu sehen.
Unsere Übersetzungsschlüssel sind in der linken Seitenleiste der Seite aufgelistet, jeweils mit ihrer englischen Quellübersetzung. Du kannst eine dieser Übersetzungen auswählen und den Editor nutzen, um die arabische Übersetzung einzugeben und zu speichern.

Viel besser als das Arbeiten mit .strings-Dateien

Unerwünschte String-Schlüssel entfernen

Zuerst wollen wir jedoch einige dieser Schlüssel ausdünnen. Unsere App hat ein paar Beschriftungen, die dynamisch von unseren View-Controllern befüllt werden, deshalb willst du diese nicht direkt übersetzen. Füge diese Schlüssel zu deiner Blockliste hinzu, damit Phrase sie nicht mehr verwaltet. Navigiere zuerst zu unserer Hauptprojektseite. Dann wählen wir in der Tab-Leiste Mehr > Blockierte Schlüssel (früher Blacklisted Keys).

Lass uns diesen wuchernden Busch zurückschneiden

Sobald wir auf der Blocked Keys-Seite sind, können wir einfach auf die Blockierten Schlüssel hinzufügen-Schaltfläche oben rechts auf dem Bildschirm klicken, um einen Dialog zu öffnen, in dem wir unseren problematischen Schlüssel eingeben.

Denke daran, den Schlüssel, nicht den Wert hinzuzufügen

Wir fügen einfach den Schlüssel hinzu, klick auf Speichern und wiederhole das für jeden Schlüssel, den wir unseren Übersetzern nicht zeigen möchten.

Hinweis » Lies mehr über das Blockieren, Löschen und Ausschließen von Schlüsseln in unserem Leitfaden, Arbeiten mit Schlüsseln.

Übersetzen: Der Übersetzungseditor

Jetzt kannst du jede der verbleibenden Übersetzungen auswählen, ihre arabische Übersetzung im Übersetzungseditor hinzufügen und auf die Speichern-Schaltfläche klicken.

Der Komfort des Phrase Übersetzungseditors

Es ist wirklich so einfach. Und das Tolle ist, dass der Entwickler, der an der App arbeitet, weder auf die 100% vollständigen Übersetzungen noch auf eine Dateifreigabe von Übersetzern warten muss. Du kannst die neuesten Übersetzungen jederzeit mit dem Phrase Client herunterladen.

Übersetzungen herunterladen (abrufen)

Wir können jederzeit aktuelle Übersetzungen abrufen, indem wir den folgenden Befehl in der Befehlszeile ausführen.

$ phraseapp pull

Wenn du jetzt den pull Befehl ausführst, solltest du eine Nachricht wie diese sehen:

Heruntergeladen ar in Views/ar.lproj/Main.strings

Wir sollten jetzt alle aktuellen arabischen Übersetzungen in unserem Projekt haben. Wir können dies überprüfen, indem wir unsere Views/ar.lproj/Main.strings öffnen.

/* Class = "UILabel"; text = "ARTIST"; ObjectID = "2aL-Sw-YDC"; */
"2aL-Sw-YDC.text" = "الفنان ";
/* Class = "UIBarButtonItem"; title = "Back"; ObjectID = "cL2-YV-w5P"; */
"cL2-YV-w5P.title" = "رجوع";
// ...

Phrase hat alle unsere arabischen Übersetzungen heruntergeladen. Das spart so viel Zeit, besonders bei großem Umfang. Stell dir Teams von Entwicklern und Übersetzern vor, die an einer App mit nur vier oder fünf unterstützten Sprachen arbeiten. Jede Sprache kann ihren eigenen Übersetzer oder ein Übersetzerteam haben, und du musst all diese .strings Dateien hin und her verwalten. Phrase macht unsere Lokalisierungsarbeit bereits deutlich reibungsloser.
Wenn wir unsere App auf Arabisch starten, können wir sehen, dass alle unsere Storyboard-Labels tatsächlich übersetzt wurden.

Al salam alykum

Code übersetzen: eine Localizable.strings-Datei hinzufügen

Bisher haben wir uns darauf konzentriert, Main.storyboard zu übersetzen. Das ist alles gut und schön, aber was ist mit dem Code? Oft hast du Strings in deinem Code eingebettet, die du lokalisieren musst.
Zum Beispiel: Angenommen, du möchtest am unteren Rand des Track-Detail-Bildschirms deiner App einen Copyright-Hinweis hinzufügen.

Du musst für dein Recht kämpfen

Zuerst fügen wir eine Localizable.strings-Datei zu unserem XCode-Projekt hinzu und stellen sicher, dass sie lokalisiert ist, indem wir die Datei auswählen und auf Localize im Dateiinspektor klicken. Nachdem wir das getan haben, können wir die Kästchen für Arabisch und Englisch unter Lokalisierungen für die Datei ankreuzen.
Jetzt können wir die englische Localizable.strings öffnen und folgendes hinzufügen.

"copyright" = "Copyright © %@ %@. Alle Rechte vorbehalten;

Dies ist eine formatierte Zeichenfolge, die dynamische Zeichenfolgen enthält, die in unserem Swift-Code interpoliert werden. Tausche die %@ %@ mit dem aktuellen Jahr und dem Namen des Künstlers aus, da sich diese Werte in unserer App dynamisch ändern.
Angenommen, wir haben das Copyright-Label in unserem Storyboard erstellt und mit einem Outlet in unserem Controller verknüpft, können wir dann unseren Controller so aktualisieren:

import UIKit
class TrackDetailsViewController: UIViewController {
    // ...
    @IBOutlet weak var copyrightLabel: UILabel!
    var track: Verfolgen?
    override func viewDidLoad() {
        super.viewDidLoad()
        if let track = track {
            // ...
            copyrightLabel.text = getCopyrightText(artistName: track.artistName)
        }
    }
    func setup(with track: Track) {
        self.track = track
    }
    fileprivate func getCopyrightText(artistName: String) -> String {
        let format = NSLocalizedString("copyright", comment: "")
        let currentYear = "\(Calendar.current.component(.year, from: Date()))"
        return String.localizedStringWithFormat(format, currentYear, artistName)
    }
}

Fügen wir jetzt unsere Localizable.strings-Datei zu unserer .phraseapp.yml hinzu, damit wir damit in Phrase arbeiten können.

phraseapp:
  access_token: <dein_access_token>
  project_id: <your_project_id>
  push:
    sources:
    - file: ./Views/en.lproj/Main.strings
      params:
        locale_id: fd935424a9ef2dfd054d982ccb7a8064
        file_format: strings
    - file: ./en.lproj/Localizable.strings
      params:
        locale_id: fd935424a9ef2dfd054d982ccb7a8064
        file_format: strings
  pull:
    targets:
    - file: ./Views/ar.lproj/Main.strings
      params:
        locale_id: 9c380148d7c1827b6c1db12f0b1a9da8
        file_format: strings
    - file: ./ar.lproj/Localizable.strings
      params:
        locale_id: 9c380148d7c1827b6c1db12f0b1a9da8
        file_format: strings

Wie zuvor fügen wir die englische Localizable.strings Datei als Quelle und ihre arabische Entsprechung als Ziel hinzu.
Führe dann $ phraseapp push aus, um die neue Übersetzung zu Phrase hochzuladen. Sobald das erledigt ist, können wir unsere Phrase Webkonsole öffnen und zu den arabischen Übersetzungen unseres Projekts navigieren. Wenn wir unseren Schlüssel gefunden haben, kannst du den Übersetzungseditor nutzen, um unsere formatierte Zeichenfolge zu übersetzen.

Wieder dieser schöne Editor

Beachte, wie Phrase unsere %@ Platzhalter kennt. Tatsächlich können wir auf diese Platzhalter (oder jedes beliebige Wort) in der ursprünglichen englischen Quelle klicken, damit sie automatisch an der Cursorposition im Editor eingefügt werden. Das ist sehr praktisch für Übersetzer, da du dir die kniffligen Zeichenfolgen, aus denen unsere Platzhalter bestehen, nicht merken musst.
Sobald wir unsere Übersetzung gespeichert haben, können wir $ phraseapp pull auf unserem lokalen Rechner ausführen, um sie abzurufen. Nachdem der pull abgeschlossen ist, können wir unsere App auf Arabisch ausführen, um unser Update zu sehen.

Hinweis » Wenn wir mehrere Ziele haben, aggregiert Phrase alle Übersetzungen zu einer großen Liste und fügt diese Liste bei allen Zielen ein. Das bedeutet tatsächlich, dass unsere Ziele Kopien voneinander sein werden. Solange wir keine Schlüssel in unseren .strings Dateien duplizieren, sollte das wirklich kein Problem sein.

Das ist unsere kleine App, komplett übersetzt.

Hinweis » Du kannst das abgeschlossene, funktionierende XCode-Projekt von Github holen.
Hinweis » Um noch mehr Zeit zu sparen, lerne, wie du die Lokalisierung von Storyboards mit Phrase automatisierst, indem du Automatisiere die Lokalisierung von iOS-Storyboards liest.

Es ist vorbei

Das war unser Ausflug in die iOS-App-Lokalisierung mit Phrase Strings. Hoffentlich beginnst du die Zeitersparnis zu sehen, die dir der l10n-Workflow von Phrase Strings bietet.—Und wir haben nur einige seiner Funktionen behandelt. Phrase Strings ist für Entwickler gemacht und bietet dir eine umfangreiche CLI sowie eine API, die du anbinden kannst, um eigene Lokalisierungs-Workflows zu erstellen. Das Beste daran ist, dass Phrase Strings nur eines der Übersetzungsprodukte innerhalb der Phrase Lokalisierungsplattform ist. Dies ermöglicht es dir, dich mit einem vollwertigen Übersetzungsmanagementsystem zu verbinden, während deine Übersetzungsbedürfnisse wachsen. Registriere dich für eine kostenlose 14-tägige Testversion und lass es die ganze Arbeit übernehmen, damit du dich auf den Code konzentrieren kannst, den du liebst.