Tools für die Lokalisierung von Vue-Apps

Vue.js – von der Internationalisierung zur Lokalisierungslösung
Keine Kommentare

Vue-Anwendungen lokalisieren: Es kommt auf den richtigen Zeitpunkt an! Je früher man auf die richtigen Tools setzt, desto besser. Damit macht man Entwicklern und Übersetzern das Leben leichter.

In diesem Artikel zeige ich auf, dass es sich bereits in einer frühen Entwicklungsphase lohnt, über die spätere Lokalisierung unserer Software nachzudenken. Dabei ist die Auswahl eines geeigneten Internationalisierungsframeworks nur ein erster Schritt, um die spätere Übersetzung einer Applikation grundlegend zu ermöglichen.

Was ist Internationalisierung (i18n)?

„Internationalisierung bedeutet in der Informatik beziehungsweise in der Softwareentwicklung, ein Programm so zu gestalten, dass es leicht (ohne den Quellcode ändern zu müssen) an andere Sprachen und Kulturen angepasst werden kann.“
– Quelle: https://de.wikipedia.org/wiki/Internationalisierung_(Softwareentwicklung)

Was ist Lokalisierung (l10n)?

„Lokalisierung steht in der Softwareentwicklung für die Anpassung von Inhalten (z. B. Websites), Prozessen, Produkten und insbesondere Computerprogrammen (Software) an die in einem bestimmten geographisch oder ethnisch umschriebenen Absatz- oder Nutzungsgebiet (Land, Region oder ethnische Gruppe) vorherrschenden lokalen sprachlichen und kulturellen Gegebenheiten.“
– Quelle: https://de.wikipedia.org/wiki/Lokalisierung_(Softwareentwicklung)

iJS React Cheat Sheet

Free: React Cheat Sheet

You want to improve your knowledge in React or just need some kind of memory aid? We have the right thing for you: the iJS React Cheat Sheet (written by Joel Lord). Now you will always know how to React!

Open-Source-Optionen für die Internationalisierung

Natürlich gibt es bereits mehrere Optionen, um eine Vue.js-Anwendung für die Internationalisierung fit zu Machen. Exemplarisch wollen wir auf zwei mögliche Lösungen verweisen:

vue-i18n von Kazuya Kawaguchiverfügbar auf GitHub

  • Kazuya Kawaguchi ist Core Contributor von Vue.js
  • Mit über 3.000 Sternen auf GitHub die wohl populärste Lösung für Vue.js
  • Eine einfache Lösung ohne große Starthürden
  • Für die meisten Fälle ausreichend (gewisse i18n Funktionen fehlen, z. B. der richtige Plural für Sprachen, die mehrere Pluralformen kennen oder selektive Übersetzungen abhängig vom Geschlecht)

vue-i18next von Claudio Romanoverfügbar auf GitHub

  • Basierend auf i18next i18n framework (learn once – translate everywhere)
  • Plug-ins für Spracherkennung, Laden und Cachen vom Sprachressourcen
  • Voller i18n-Funktionsumfang (Plural, Context, …)

Von der Internationalisierung zur Lokalisierung

Aufgrund der Popularität von vue-i18n werden wir den Weg von der Internationalisierung zur Lokalisierung am Beispiel des i18n-Moduls aufzeigen. Am Schluss des Artikels verweisen wir auch noch darauf was zu tun wäre, um dasselbe mit vue-i18next zu erreichen.

Ein erster Blick auf den „Getting started“-Teil der vue-i18n-Dokumentation offenbart, dass es sehr einfach ist, eine Applikation fit für die Übersetzung zu machen.

Quelle: https://kazupon.github.io/vue-i18n/guide/started.html#html

Nach dem die Entwickler nun also wissen, wie einfach es ist Ihre Anwendung mit vue-i18n zu erweitern, wird es Zeit dem Lokalisierungsteam den Schrecken vor der anstehenden Aufgabe zu nehmen.

Schritt 1: Einrichten eines Übersetzungs-Loops– Kontinuierliche Lokalisierung (Continuous Localization)

Im ersten Schritt geht es zum einen darum, Inhalte schnellstmöglich vom Code in eine Übersetzungssoftware zu bekommen, und zum anderen darum, Anpassungen sichtbar zu machen, die mit diesem Tool vorgenommen wurden. Unser Ziel lautet, die missing-Funktion von vue-i18n zu verwenden, um neue Texte zu schicken und Übersetzungen direkt aus der Übersetzungssoftware zu laden.

Auch interessant: JavaScript Frameworks im Vergleich: Vue vs. Angular vs. React

Dies ermöglicht es dem Lokalisierungsteam, sofort mit dem Übersetzen der Anwendung zu beginnen oder auch Texte in der Quellsprache formal zu korrigieren. Die Änderungen sind dann sowohl für Entwickler als auch für die Übersetzer in der Anwendung sichtbar.

Um dies alles zu ermöglichen, entscheiden wir uns für die Softwarelösung von Locize, die eine kontinuierliche Lokalisierung ermöglicht.

Es sind zwei Änderungen an unserem Code nötig:

Wir laden ein zusätzliches Script, das von locize verfügbar gemacht wurde:

 
<!DOCTYPE html>
<html>
  <head>
    <script src=”https://unpkg.com/vue/dist/vue.js"></script>
    <script src=”https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script> 
    <script src=”https://unpkg.com/locizer/locizer.min.js"></script>
  </head>
// ...

Wir erweitern den Code, den vue-i18n instanziiert und nutzen die load-Funktion des locize-Scripts um ein Übersetzungsfile in der gefundenen Benutzersprache zu laden.

 
<script>
locizer
  .init({
    fallbackLng: 'en', // load this if detected lng is not support
    referenceLng: 'en', // the source language
    projectId: [PROJECTID], // your locize project id
    apiKey: [APIKEY] // your locize api key
  })
  .load('translations', (err, translations, detectedLng) => {
     // build message catalog format
     var messages = {};
     messages[detectedLng] = translations;

     // Create VueI18n instance with options
     const i18n = new VueI18n({
       locale: detectedLng, // set locale
       messages: messages, // set locale messages
     })

     // Create a Vue instance with `i18n` option
     new Vue({ i18n }).$mount('#app')
  })
</script>

Mit dieser kleinen Änderung sind wir bereits in der Lage, die Inhalte direkt vom CDN (Content Delivery Network) von locize zu laden. Um die Sprache der Anwendung zu ändern, genügt es, die Seite mit einem zusätzlichen Querystring Parameter `?lng=[yourLanguage]` zu öffnen (natürlich gibt es auch weitere Benutzerspracherkennungsoptionen.

Unsere Übersetzer können nun bestehende Inhalte einfach anpassen, neue Sprachen hinzufügen und übersetzen.

Was nun noch fehlt, ist, dass Entwickler die neuen Inhalte nicht manuell auf locize erfassen müssen. Dazu benutzen wir einfach die missing-Funktion in vue-i18n und leiten diese an locize weiter:

 
// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: detectedLng, // set locale
  messages: messages, // set locale messages

  missing: function(locale, path, vue) {
    // pipe to locize - that key will be created for you
    locizer.add('translations', path, path);
  }
})

Diese kleinen Anpassungen an unserem Code waren schon alles, um unsere Anwendung mit locize zu verbinden. Entwickler können nun neue Inhalte hinzufügen und diese werden automatisch an locize weitergeleitet. Übersetzer können Änderungen vornehmen und neue Sprachen erfassen, ohne dass sie neue Files von den Entwicklern benötigen oder diese wieder in den Build-Prozess integriert werden müssen.

Schritt 2: Die Übersetzungsqualität steigern

Inhalte zu übersetzen ist sehr anspruchsvoll – noch Anspruchsvoller wird es, wenn dem Übersetzer der Kontext der Inhalte fehlt. Wir können diese Situation stark verbessern indem wir es den Übersetzern ermöglichen Inhalte direkt in unserer Applikation zu übersetzen.

Um Inkontextbearbeitung zu integrieren benötigen wir ein weiteres Script von locize:

 
<script src="https://unpkg.com/locize-editor/locize-editor.js"></script>

Und ein bisschen JavaScript, um den Editor zu konfigurieren:

 
locizeEditor.init({
  lng: detectedLng,
  defaultNS: 'translations',
  referenceLng: 'en',
  projectId: [PROJECTID]
})

Wenn man die Webseite mit dem zusätzlichen Querystring Parameter `?locize=true` öffnet, erscheint der Editor direkt eingebettet. Indem man Inhalte in der Webseite anklickt, werden diese direkt zum bearbeiten angezeigt.

Fazit

Wie wir gesehen haben ist Internationalisierung keine Hexerei und wenn man sich frühzeitig Gedanken über die spätere (oder eben besser frühe) Lokalisierung / Übersetzung macht kann man den Prozess sehr effizient gestalten und dabei nicht nur Kosten sparen sondern auch die Qualität steigern.

Das komplette Beispiel findet man auf GitHub und dank der 14 tägigen gratis Testversion von Locize bleibt genügend Zeit ein Gespür für die Lösung zu bekommen.

Wie versprochen am Schluss noch die Hinweise wie das Ganze mit vue-i18next zu realisieren wäre. Das Ganze gestalten sich um einiges einfacher, da man lediglich das verwendete i18next backend-plugin mit dem für Locize austauschen muss und den entsprechenden Editor als i18next-Plug-in (i18next.use) hinzufügen muss.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -