In großem Maßstab kann iOS-Lokalisierung eine ziemliche Herausforderung darstellen. Übersetzende beschäftigen sich nicht gern mit .strings Dateien, und wir Entwickler wollen uns nicht mit Uploads und Downloads herumschlagen, die wir manuell in unseren Projekten zusammenführen müssen.
Hier kommt Phrase Strings ins Spiel – die Software-Lokalisierungsplattform innerhalb der Phrase Localization Platform. Als professionelles Lokalisierungs-Tool für Entwickler*innen und Übersetzende kann Phrase Strings die schwere Arbeit der Lokalisierung übernehmen und uns mehr Zeit schenken, um uns auf die Geschäftslogik unserer App zu konzentrieren. Im Folgenden zeigen wir dir, wie wir unsere iOS-Apps Over-the-Air mit Phrase Strings übersetzen können.
Unsere App
Wir haben eine einfache Demo-App, an der wir in diesem Artikel gemeinsam arbeiten.
Unsere preisgekrönte Zwei-Bildschirm-App, Short Circuit, listet elektronische Musiktracks zusammen mit ihren Künstlern und Veröffentlichungsdaten auf. Um die Trackliste anzuzeigen, benutzen wir UITableView und verbinden es über einen UIViewController mit einem festcodierten Array von Tracks. Wenn du auf eine Track-Zeile tippst, öffnet sich ein Detailbildschirm, der die Track-Informationen anzeigt. Die App ist wirklich ganz einfach, und wir werden sie hier als Testumgebung für unsere Lokalisierungsarbeit mit Phrase verwenden.
Hinweis » Hol dir das Starter-Projekt für unsere App auf GitHub. Das abgeschlossene Projekt ist am Ende des Artikels verlinkt.
Einrichtung
Als ersten Schritt fügen wir ein neues Projekt zu Phrase hinzu, installieren Phrase CLI auf unserem Entwicklungsrechner und fügen unsere ersten Sprachversionen hinzu.
Hinweis » Bevor du ein Projekt hinzufügst, musst du eine Phrase-Organisation erstellen, wenn du noch keine hast. Eine Testversion ist 14 Tage lang kostenlos, und es dauert nur ein paar Minuten, um sie einzurichten.
Projekt zu Phrase hinzufügen
Wenn wir uns bei Phrase anmelden, gelangen wir zu unserem Tab Projekte. Füge hier ein neues Projekt hinzu, und zwar mit dem Button Projekt hinzufügen oben rechts auf der Seite.
Dies öffnet den Projekt hinzufügen-Dialog, der es uns ermöglicht, die Anfangseinstellungen unseres neuen Projekts schnell zu konfigurieren.
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 Hauptformat für unser Projekt. Und natürlich wählen wir iOS als Haupttechnologie des Projekts. Das genügt für den Anfang. Klick auf die Schaltfläche Speichern, um das Projekt zu erstellen.
Hinweis » Du kannst jede dieser Projekteinstellungen jederzeit ändern, und zwar über das Dialogfeld Projekteinstellungen.
Installation von Phrase CLI
Um unsere Übersetzungen mit Phrase synchronisieren zu können, brauchst du 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/brewedtapping verschafft uns Zugriff auf das Phrase Homebrew-Repository. Sobald das erledigt ist, können wir ausführen.
$ brew install phraseappEt voilà. Das sollte es gewesen 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 Phrase CLI bietet.
Hinweis » Wenn du Homebrew nicht verwenden möchtest, schau dir den vollständigen CLI-Installationsleitfaden für andere Installationsoptionen an.
Sprachen hinzufügen
Mit unserem erstellten Projekt können wir den Tab Sprachen öffnen, um die unterstützten Sprachen unserer App hinzuzufügen. Natürlich lassen sich Sprachen in unserem Projekt jederzeit hinzufügen oder löschen.
Im Sprachen-Tab solltest du einen Button namens Füge die erste Sprache hinzu sehen. Lass uns auf diese Taste klicken. Daraufhin öffnet sich der Dialog Sprache hinzufügen.
Einfacher geht’s nicht
Wir geben unserer Sprache einfach einen Namen und wählen die Zielsprache aus, die wir anvisieren. In meinem Fall füge ich Englisch hinzu. Wir können dann die Sprache speichern und den Prozess für alle anderen Sprachen 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. Dazu müssen wir außerdem eine lokale .phraseapp.yml-Datei generieren.
Ein 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 User-Namen 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.
Im Tab Zugriffstoken klickst du auf die Schaltfläche Token generieren. Dies öffnet den Dialog Token generieren.
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
Erstellung unserer 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 initFühre diesen Befehl aus, und der Phrase-Papagei fotobombt dein Terminal. Wir werden nach unserem API-Zugangstoken gefragt und wir können das zuvor generierte Token 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 sie 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 Lokalisierungen klicken. Ich wähle hier Arabisch aus. Du kannst jede gewünschte Sprache hinzufügen.
Klick ➕ für 🌍
Ein Dialog öffnet sich, in dem wir die Dateien und die Referenzsprache für die Storyboard-Übersetzungen unserer neuen Sprache auswählen können. Wir können Basis als Referenzsprache ausgewählt lassen. Lass uns Lokalisierbare Strings für unsere Dateitypen auswählen. Dies wird dem Format entsprechen, das wir für unser Projekt in Phrase festgelegt haben.
Dateien in der Ausgangssprache hinzufügen
Standardmäßig verwendet XCode die Strings in unseren Main.storyboard und LaunchScreen.storyboard als seine Quellübersetzungen. In meinem Fall sind diese auf Englisch. Es ist gut, diese Strings in ihrer eigenen Localizable.strings-Datei zu sprichern, damit wir sie als Quellübersetzungen in Phrase verwenden können. Wähle unsere Main.storyboard-Datei aus und aktiviere das Kontrollkästchen Englisch 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 Ausgangssprachen-Dateien) nutzen, und welche heruntergeladen werden, wenn wir pull (unsere Zielsprachen-Dateien) nutzen. „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 Sprach-IDs zu unserer .phraseapp.yml-Datei hinzufügen. Wir können diese von der Phrase Webkonsole erhalten. Wenn wir zum Tab Sprachen in der Konsole navigieren, finden wir ein Zahnrad-Symbol neben jeder Sprache.
Hab keine Angst, klick einfach aufs Zahnrad
Ein Klick auf dieses Symbol öffnet den Dialog Sprache bearbeiten. Von dort aus können wir zum Tab API navigieren, um die ID der Sprache zu erhalten.
Da ist sie, die ID
Mit unseren Sprachen-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 pushWenn 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 Sprachen jetzt anzeigt, dass es ausstehende Übersetzungen gibt.
Wir haben einiges zu übersetzen
Hinweis » Du kannst deine Dateien auch über die Webkonsole zu Phrase hochladen, und es gibt einige Sonderfä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-Label hochgeladen. Jetzt sind sie bereit, damit du sie in der Phrase Webkonsole übersetzen kannst. Lass uns die Konsole öffnen und zu {Projektname} > Sprachen > ar navigieren, um unsere ausstehenden arabischen (Ziel-)Übersetzungen zu sehen.
Unsere Übersetzungs-Keys sind in der linken Seitenleiste der Seite aufgelistet, jeweils mit ihrer englischen (Ausgangssprachen-)Ü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-Keys entfernen
Zuerst wollen wir jedoch einige dieser Keys ausdünnen. Unsere App hat ein paar Beschriftungen, die dynamisch von unseren View-Controllern befüllt werden, deshalb sollten wir diese nicht direkt übersetzen. Füge diese Keys 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 Keys (früher: Blacklisted Keys).
Lass uns dieses wuchernde Gestrüpp zurückschneiden
Sobald wir auf der Seite Blockierte Keys -Seite sind, können wir einfach auf die Schaltfläche Blockierte Keys hinzufügen oben rechts auf dem Bildschirm klicken, um einen Dialog zu öffnen, in dem wir unseren problematischen Key eingeben.
Wir fügen einfach den Key hinzu, klicken auf Speichern und wiederhole das für jeden Key, den wir unseren Übersetzer*innen nicht zeigen möchten.
Hinweis » Lies mehr über das Blockieren, Löschen und Ausschließen von Keys erfährst du in unserem Leitfaden Keys (Strings).
Übersetzen: Der Übersetzungseditor
Jetzt kannst du jede der verbleibenden Übersetzungen auswählen, ihre arabische Übersetzung im Übersetzungseditor hinzufügen und auf die Schaltfläche Speichern klicken.
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 Übersetzenden 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 pullWenn du jetzt den pull-Befehl ausführst, solltest du eine Nachricht wie diese sehen:
Downloaded ar in Views/ar.lproj/Main.stringsWir 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 viel Zeit, besonders bei großen Projekten. Stell dir Teams von Entwickler*innen und Übersetzenden vor, die an einer App mit nur vier oder fünf unterstützten Sprachen arbeiten. Jede Sprache kann ihren eigenen Übersetzenden oder ein Übersetzerteam haben, und du musst den Fluss all dieser .strings-Dateien verwalten. Phrase macht unsere Lokalisierungsarbeit bereits dadurch deutlich reibungsloser.
Wenn wir unsere App auf Arabisch starten, können wir sehen, dass alle unsere Storyboard-Labels tatsächlich übersetzt wurden.
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.
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 Lokalisieren 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-Datei öffnen und Folgendes hinzufügen:
"copyright" = "Copyright © %@ %@. Alle Rechte vorbehalten;Dies ist eine formatierte Zeichenfolge, die dynamische Zeichenfolgen enthält, welcher 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 unseren Controller folgendermaßen 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)
}
}
Damit wir damit in Phrase arbeiten können, fügen wir unsere Localizable.strings-Datei zu unserer .phraseapp.yml hinzu.
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 Ausgangssprache (Quelle) und ihre arabische Entsprechung als Zielsprache hinzu.
Dann führen wir $ phraseapp push aus, um die neue Übersetzung in Phrase hochzuladen. Sobald das erledigt ist, können wir unsere Phrase Webkonsole öffnen und zu den arabischen Übersetzungen unseres Projekts navigieren. Wenn wir unseren Key gefunden haben, kannst du den Übersetzungseditor nutzen, um unsere formatierte Zeichenfolge zu übersetzen.
Beachte, wie Phrase unsere %@ Platzhalter erkennt. 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 Übersetzende, da sie sich die kniffligen Zeichenfolgen, aus denen unsere Platzhalter bestehen, nicht merken müssen.
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 im Grunde, dass unsere Ziele Kopien voneinander sein werden. Solange wir keine Keys in unseren .strings-Dateien duplizieren, sollte das aber kein Problem sein.
Hinweis » Du kannst das abgeschlossene, funktionierende XCode-Projekt bei Github finden.
Hinweis » Um noch mehr Zeit zu sparen, lies Lokalisierung von iOS-Storyboards automatisieren und lerne, wie du die Lokalisierung von Storyboards mit Phrase automatisierst.
C’est fini
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 dabei haben wir nur einen Bruchteil 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 Localization Platform ist. Sie ermöglicht es dir, dich mit einem vollwertigen Übersetzungsmanagementsystem zu verbinden, auch während deine Übersetzungsbedürfnisse wachsen. Registriere dich für eine kostenlose 14-tägige Testversion und lass dei Phrase Localization Platform die ganze Arbeit übernehmen – damit du dich auf den Code konzentrieren kannst, den du liebst.
