Erstellen Sie Ihr Startup mit PHP: Lokalisierung mit I18n

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Final product image — What You'll Be Creating

Dies ist Teil vier der Erstellung Ihrer Startup mit PHP-Serie auf Tuts+. In dieser Serie führe ich Sie durch die Einführung eines Startups von der Idee zur Realität, indem ich meine Meeting Planner-App als ein Beispiel aus dem echten Leben benutze. Bei jedem Schritt veröffentlichen wir den Meeting-Planer-Code als Open-Source-Beispiele, von denen Sie lernen können. Wir werden auch start-up-geschäftliche Probleme behandeln, wie sie entstehen.

In diesem Tutorial wollte ich einen Schritt zurückgehen und der Internationalisierungsunterstützung I18n zu unserer Anwendung hinzufügen, bevor wir mehr und mehr Code erstellen. Laut Wikipedia ist I18n ein Numeronym:

18 steht für die Anzahl der Buchstaben zwischen dem ersten i und letzten n in der Internationalisierung, eine Verwendung, die bei DEC in den 1970er oder 80er Jahren geprägt wurde.

Mit I18n werden alle Textzeichenfolgen, die dem Benutzer aus der Anwendung angezeigt werden, durch Funktionsaufrufe ersetzt, die übersetzte Zeichenfolgen für jede Sprache, die der Benutzer auswählt, dynamisch laden können.

Der gesamte Code für Meeting Planner ist in das Yii2 Framework für PHP geschrieben, das integrierte Unterstützung für I18n bietet. Wenn du mehr über Yii2 erfahren möchtest, schau dir unsere Parallel-Serie Programmierung mit Yii2 bei Tuts + an.

Nur zur Erinnerung, ich nehme an den Kommentarthreads unten teil. Ich bin besonders interessiert, wenn Sie unterschiedliche Ansätze oder zusätzliche Ideen haben oder Themen für zukünftige Tutorials vorschlagen möchten.

Die Ziele der Internationalisierung

Beim Erstellen eines Startups ist es hilfreich, von Anfang an global zu denken - aber nicht immer. Alternativ kann es sinnvoll sein, sich nur auf den Aufbau für Ihren lokalen Markt zu konzentrieren. Muss Ihr minimal funktionsfähiges Produkt in anderen Sprachen für Benutzer aus verschiedenen Ländern funktionieren?

In unserem Fall bietet das Yii Framework eine integrierte Unterstützung für I18n, so dass es relativ einfach ist, Unterstützung für I18n von Anfang an aufzubauen - und zeitaufwändig, um es später hinzuzufügen.

Wie funktioniert I18n?

I18n arbeitet, indem er alle Verweise auf dem Benutzer angezeigten Text durch Funktionsaufrufe ersetzt, die bei Bedarf eine Übersetzung bereitstellen.

Im Folgenden sehen Sie beispielsweise, wie die Attributfeldnamen im Place-Modell vor I18n aussehen:

public function attributeLabels()
{
    return [
      'id' => 'ID',
       'name' => 'Name',
       'place_type' => 'Place Type',
       ...

Die Bereitstellung übersetzter Versionen des Codes würde sehr kompliziert werden. Nicht-technische Übersetzer müssten Code an Ort und Stelle umsetzen, was wahrscheinlich die Syntax sprengt.

Hier ist, wie der gleiche Code mit I18n aussieht:

public function attributeLabels()
    {
        return [
          'id' => Yii::t('frontend', 'ID'),
           'name' => Yii::t('frontend', 'Name'),
           'place_type' => Yii::t('frontend', 'Place Type'),

Yii:t() ist ein Funktionsaufruf, der prüft, welche Sprache gerade ausgewählt ist und die entsprechende übersetzte Zeichenfolge anzeigt. "frontend" bezieht sich auf einen Abschnitt unserer Anwendung. Übersetzungen können optional nach verschiedenen Kategorien organisiert werden. Aber wo erscheinen diese übersetzten Strings?

Die Standardsprache, in diesem Fall Englisch, wird in den Code geschrieben, wie oben gezeigt. Sprachressourcendateien sind Listen von Arrays von Strings, deren Schlüssel der Standardsprachentext ist, z. "Ortstyp" - und jede Datei enthält übersetzte Textwerte für die entsprechende Sprache.

Hier ist ein Beispiel für unsere fertiggestellte spanische Übersetzungsdatei, Sprachcode "es". Die Yii:t() - Funktion verwendet diese Datei, um die passende anzuzeigende Übersetzung zu finden:

<?php
/**
 * Message translations.
 *
 * This file is automatically generated by 'yii message' command.
 * It contains the localizable messages extracted from source code.
 * You may modify this file by translating the extracted messages.
 *
 * Each array element represents the translation (value) of a message (key).
 * If the value is empty, the message is considered as not translated.
 * Messages that no longer need translation will have their translations
 * enclosed between a pair of '@@' marks.
 *
 * Message string can be used with plural forms format. Check i18n section
 * of the guide for details.
 *
 * NOTE: this file must be saved in UTF-8 encoding.
 */
return [
    'Add Current Location' => 'Agregar ubicación actual',
    'Add a Google {modelClass}' => 'Añadir un Google {modelClass}',
    'Created By' => 'Creado por',
    'Full Address' => 'Dirección completa',
    'Google Place ID' => 'Google Place ID',
    'Name' => 'Nombre',
    'Notes' => 'Notas',
    'Place Type' => 'Place Tipo',
    'Places' => 'Lugares',

Obwohl dies zeitaufwändig erscheint, stellt Yii Skripte zur Verfügung, um die Erstellung und Organisation dieser Dateien zu automatisieren.

Indem wir den Text vom Code trennen, erleichtern wir es nichttechnischen mehrsprachigen Experten, unsere Anwendungen für uns zu übersetzen - ohne den Code zu brechen.

I18n bietet auch spezielle Funktionen für die Übersetzung von Zeit, Währung, Plural und andere. Ich werde in diesem Tutorial nicht ins Detail gehen.

I18n-Unterstützung konfigurieren

Leider ist die Yii2-Dokumentation für I18n noch nicht sehr deskriptiv - und es war schwierig, funktionierende Schritt-für-Schritt-Beispiele zu finden. Zum Glück für Sie, ich werde Sie durch das, was ich gelernt habe, führen, indem ich die Dokumente und das Internet durchforste. Ich fand das I18n-Beispiel des Code Ninjas und den Yii2 Definitive Guide auf I18n hilfreich, und Yi-Mitarbeiter Alexander Makarov bot mir ebenfalls Hilfe an.

Generieren der I18n-Konfigurationsdatei

Wir verwenden die erweiterte Vorlage Yii2 für Meeting Planner. Dies erzeugt zwei Yii-Anwendungen in unserer Codebasis, Frontend und Backend. Und es schafft einen gemeinsamen Bereich für Modelle, die von beiden Anwendungen gemeinsam genutzt werden. Die Yii-Konfigurationsdateien werden immer dann geladen, wenn Seitenanforderungen gestellt werden. Wir werden die I18n-Nachrichtenskripte von Yii verwenden, um eine Konfigurationsdatei für I18n im common/config-Pfad zu erstellen.

Von unserem Codebasisstamm aus führen wir das Yii-Skript message/config aus:

1	./yii message/config @common/config/i18n.php

Dies erzeugt die folgende Dateivorlage, die wir anpassen können:

<?php

return [
    // string, required, root directory of all source files
    'sourcePath' => __DIR__,
    // array, required, list of language codes that the extracted messages
    // should be translated to. For example, ['zh-CN', 'de'].
    'languages' => ['de'],
    // string, the name of the function for translating messages.
    // Defaults to 'Yii::t'. This is used as a mark to find the messages to be
    // translated. You may use a string for single function name or an array for
    // multiple function names.
    'translator' => 'Yii::t',
    // boolean, whether to sort messages by keys when merging new messages
    // with the existing ones. Defaults to false, which means the new (untranslated)
    // messages will be separated from the old (translated) ones.
    'sort' => false,
    // boolean, whether to remove messages that no longer appear in the source code.
    // Defaults to false, which means each of these messages will be enclosed with a pair of '@@' marks.
    'removeUnused' => false,
    // array, list of patterns that specify which files/directories should NOT be processed.
    // If empty or not set, all files/directories will be processed.
    // A path matches a pattern if it contains the pattern string at its end. For example,
    // '/a/b' will match all files and directories ending with '/a/b';
    // the '*.svn' will match all files and directories whose name ends with '.svn'.
    // and the '.svn' will match all files and directories named exactly '.svn'.
    // Note, the '/' characters in a pattern matches both '/' and '\'.
    // See helpers/FileHelper::findFiles() description for more details on pattern matching rules.
    'only' => ['*.php'],
    // array, list of patterns that specify which files (not directories) should be processed.
    // If empty or not set, all files will be processed.
    // Please refer to "except" for details about the patterns.
    // If a file/directory matches both a pattern in "only" and "except", it will NOT be processed.
    'except' => [
        '.svn',
        '.git',
        '.gitignore',
        '.gitkeep',
        '.hgignore',
        '.hgkeep',
        '/messages',
    ],

    // 'php' output format is for saving messages to php files.
    'format' => 'php',
    // Root directory containing message translations.
    'messagePath' => __DIR__ . DIRECTORY_SEPARATOR . 'messages',
    // boolean, whether the message file should be overwritten with the merged messages
    'overwrite' => true,


    /*
    // 'db' output format is for saving messages to database.
    'format' => 'db',
    // Connection component to use. Optional.
    'db' => 'db',
    // Custom source message table. Optional.
    // 'sourceMessageTable' => '{{%source_message}}',
    // Custom name for translation message table. Optional.
    // 'messageTable' => '{{%message}}',
    */

    /*
    // 'po' output format is for saving messages to gettext po files.
    'format' => 'po',
    // Root directory containing message translations.
    'messagePath' => __DIR__ . DIRECTORY_SEPARATOR . 'messages',
    // Name of the file that will be used for translations.
    'catalog' => 'messages',
    // boolean, whether the message file should be overwritten with the merged messages
    'overwrite' => true,
    */
];

Ich passe meine Datei an. Ich verschiebe den messagePath nach oben und passe sourcePath und messagePath an. Ich gebe auch die Sprachen an, die meine Bewerbung neben Englisch unterstützen soll - in diesem Fall Spanisch und Deutsch, es und de. Hier ist eine Liste aller I18n Sprachcodes.

return [
    // string, required, root directory of all source files
    'sourcePath' => __DIR__. DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR,
    // Root directory containing message translations.
    'messagePath' => __DIR__ . DIRECTORY_SEPARATOR .'..'. DIRECTORY_SEPARATOR . 'messages',
    // array, required, list of language codes that the extracted messages
    // should be translated to. For example, ['zh-CN', 'de'].
    'languages' => ['es','de'],

Im nächsten Schritt führen wir das Yi-Extrakt-Skript aus, das den gesamten Code in der sourcePath-Struktur scannt, um Standard-String-Dateien für alle in unserem Code verwendeten Labels zu generieren. Ich passe SourcePath an, um den gesamten Codebaum zu scannen. Ich passe messagePath an, um die resultierenden Dateien in common/messages zu generieren.

1	./yii message/extract @common/config/i18n.php

Sie sehen, dass Yii alle Ihre Code-Dateien scannt:

Extracting messages from /Users/Jeff/Sites/mp/frontend/models/Place.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/models/PlaceGPS.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/models/PlaceSearch.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/models/ResetPasswordForm.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/models/SignupForm.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/layouts/main.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/meeting/_form.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/meeting/_search.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/meeting/create.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/meeting/index.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/meeting/update.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/meeting/view.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/place/_form.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/place/_formGeolocate.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/place/_formPlaceGoogle.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/place/_search.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/place/create.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/place/create_geo.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/place/create_place_google.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/place/index.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/place/locate.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/place/update.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/place/view.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/site/about.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/site/contact.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/site/error.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/site/index.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/site/login.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/site/requestPasswordResetToken.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/site/resetPassword.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/views/site/signup.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/web/index-test.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/web/index.php...
Extracting messages from /Users/Jeff/Sites/mp/frontend/widgets/Alert.php...

Wenn dies abgeschlossen ist, sehen Sie in Ihrer Codebasis Folgendes:

Meeting Planner I18n Message Files and Paths

Aktivieren von I18n und Auswählen einer Sprache

In der allgemeinen Konfigurationsdatei, common/config/main.php, werden wir Sie über unsere neue Sprachunterstützung informieren. Ich werde Spanisch zu meiner Standardsprache machen:

<?php
return [
    'vendorPath' => dirname(dirname(__DIR__)) . '/vendor',
    'language' => 'es', // spanish
    'components' => [
        'cache' => [
            'class' => 'yii\caching\FileCache',
        ],
        'i18n' => [
            'translations' => [
                'frontend*' => [
                    'class' => 'yii\i18n\PhpMessageSource',
                    'basePath' => '@common/messages',
                ],
                'backend*' => [
                    'class' => 'yii\i18n\PhpMessageSource',
                    'basePath' => '@common/messages',
                ],
            ],
        ],        
    ],
];

Aber es gibt noch mehr zu tun. Wir müssen unseren Code I18n bewusst machen.

Verwenden von Yii's Gii-Code-Generator mit I18n

Im zweiten Teil dieser Serie, Erstellen Sie Ihr Startup mit PHP: Featureanforderungen und Datenbankdesign, verwendeten wir den genialen Code-Generator Gii von Yii, um unsere Modelle, Controller und Ansichten zu generieren. Aber wir haben I18n nicht aktiviert, also alle unsere Code-eingebetteten Textstrings. Lass uns das wiederholen.

Wir kehren zu Gii, wahrscheinlich http://localhost:8888/mp/gii, in Ihrem Browser zurück und führen die Modell- und Controller-Generatoren mit aktiviertem I18n erneut aus.

Hinweis: Wenn Sie mit Teil drei unserer Serie Schritt gehalten haben, müssen Sie möglicherweise die Unterschiede zu jeder Datei beachten und den Code manuell verschieben. Oder es kann am einfachsten sein, den Code durch das Github-Repository für dieses Tutorial zu ersetzen, das oben rechts verlinkt ist.

Hier sehen Sie ein Beispiel für die Generierung des Meeting-Modellcodes mit aktiviertem I18n. Beachten Sie, dass wir "Frontend" für unsere Nachrichtenkategorie angeben. Wir platzieren alle unsere Frontend-Texte in einer Frontend-Kategorie.

Meeting Planner I18n Gii Model Generator

Lassen Sie uns dasselbe für die CRUD-Generierung für Controller und Views machen:

Meeting Planner I18n Message CRUD Generator with Gii

Wenn Sie den generierten Code in Modellen, Controllern und Ansichten durchsuchen, werden die Textstrings durch die Funktion Yii:t('frontend',...) ersetzt:

<?php

use yii\helpers\Html;
use yii\grid\GridView;

/* @var $this yii\web\View */
/* @var $searchModel frontend\models\PlaceSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = Yii::t('frontend', 'Places');
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="place-index">

    <h1><?= Html::encode($this->title) ?></h1>
    <?php // echo $this->render('_search', ['model' => $searchModel]); ?>

    <p>
         <?= Html::a(Yii::t('frontend', 'Create {modelClass}', [
           'modelClass' => 'Place',
        ]), ['create'], ['class' => 'btn btn-success']) ?>
        
        <?= Html::a(Yii::t('frontend','Add Current Location'), ['create_geo'], ['class' => 'btn btn-success']) ?> 
        <?= Html::a(Yii::t('frontend','Add a Google {modelClass}',[
           'modelClass' => 'Place'
        ]), ['create_place_google'], ['class' => 'btn btn-success']) ?> 
    </p>

Übersetzen Sie Ihre Nachrichtendateien

Sehen Sie sich unsere spanische Nachrichtendatei /common/messages/es/frontend.php an. Es ist eine lange Liste von leeren Array-Werten:

return [
    'Add Current Location' => '',
    'Add a Google {modelClass}' => '',
    'Are you sure you want to delete this item?' => '',
    'Create' => '',
    'Create {modelClass}' => '',
    'Created At' => '',
    'Created By' => '',
    'Delete' => '',
    'Full Address' => '',
    'Google Place ID' => '',
    'ID' => '',
    'Meeting Type' => '',
    'Meetings' => '',
    'Message' => '',
    'Name' => '',
    'Notes' => '',
    'Owner ID' => '',
    'Place Type' => '',
    'Places' => '',
    'Reset' => '',
    'Search' => '',
    'Slug' => '',
    'Status' => '',
    'Update' => '',
    'Update {modelClass}: ' => '',
    'Updated At' => '',
    'Vicinity' => '',
    'Website' => '',
];

Zum Ausfüllen unserer Übersetzungen in Spanisch für dieses Tutorial verwende ich Google Übersetzer. Tricky, nicht wahr?

Meeting Planner I18n Using Google Translator to Fill Message Files

Dann werden wir einige Ausschnitte mit diesen Übersetzungen in die Nachrichtendatei einfügen.

return [
    'Add Current Location' => 'Agregar ubicación actual',
    'Add a Google {modelClass}' => 'Añadir un Google {modelClass}',
    'Created By' => 'Creado por',
    'Full Address' => 'Dirección completa',
    'Google Place ID' => 'Google Place ID',
    'Name' => 'Nombre',
    'Notes' => 'Notas',
    'Place Type' => 'Place Tipo',
    'Places' => 'Lugares',
    'Slug' => 'Slug',
    'Vicinity' => 'Alrededores',
    'Website' => 'Sitio Web',
    'Are you sure you want to delete this item?' => '¿Estás seguro que quieres borrar este elemento?',
    'Create' => 'Crear',
    'Create {modelClass}' => 'Crear Lugar',
    'Created At' => 'Creado El',
    'Delete' => 'Eliminar',
    'ID' => 'ID',
    'Meeting Type' => 'Tipo de Reunión',
    'Meetings' => 'Encuentros',
    'Message' => 'Mensaje',
    'Owner ID' => 'Propietario ID',
    'Reset' => 'Reset',
    'Search' => 'Buscar',
    'Status' => 'Estado',
    'Update' => 'Actualizar',
    'Update {modelClass}: ' => 'Actualizar Lugar',
    'Updated At' => 'Actualización A',
];

Wenn wir die Place-Indexseite besuchen, sehen Sie die spanische Version - nett, oder?

Meeting Planner I18n Spanish Places Index Page

Beachten Sie, dass die Navigationsleiste auf Englisch bleibt. Dies liegt daran, dass das Nachrichten / Extrahieren-Skript die Bootstrap-Navigationsfelddefinitionen nicht übernommen und in Yii:t() konvertiert hat. Wir werden das mit der Hand machen. Beachten Sie auch, dass der Home- und Paging-Text automatisch übersetzt wurde. Die Codebasis von Yii enthält Sprachübersetzungen für diese Standardzeichenfolgen.

Hier ist das Create A Place-Formular:

Meeting Planner I18n Spanish Create a Place Form

Wenn ich zurück zu Englisch wechseln möchte, ändere ich einfach die Konfigurationsdatei, /common/main.php, zurück auf Englisch:

<?php
return [
    'vendorPath' => dirname(dirname(__DIR__)) . '/vendor',
    'language' => 'en', // english
//    'language' => 'es', // spanish

Meeting Planner Create a Place in English

Sie werden auch feststellen, dass das Ersetzen von Zeichenfolgen in JavaScript eine eigene Komplexität aufweist. Ich habe es selbst nicht erforscht, aber die Ysi 1.x JsTrans Erweiterung kann eine nützliche Richtlinie zur Unterstützung dieses liefern.

Mit I18n weiter gehen

Letztendlich möchten wir vielleicht unsere Anwendung in eine Reihe von Sprachen übersetzen. Ich habe eine Yii-Feature-Anfrage gesendet, um das Skript Nachricht/Extrahieren zu erweitern und die Google Translate-API zu verwenden, um diesen Prozess zu automatisieren. Ich habe Tuts + auch gebeten, mir ein Tutorial darüber schreiben zu lassen, also bleibt dran. Natürlich bietet dies nur eine Basisübersetzung. Vielleicht möchten Sie professionelle Übersetzer einstellen, um die Dateien anschließend abzustimmen.

Bei einigen Anwendungen können Benutzer ihre Muttersprache auswählen, sodass die Benutzeroberfläche bei der Anmeldung automatisch für sie übersetzt wird. In Yii wird die $app->language wie folgt gesetzt:

1	\Yii::$app->language = 'es';

Andere Anwendungen, wie JScrambler.com unten, nutzen den URL-Pfad, um die Sprache zu wechseln. Der Benutzer klickt einfach auf das gewünschte Sprachenpräfix, z. "FR", und die App wird automatisch übersetzt:

Hinweis: Sehen Sie sich meine Tuts+ Instructor-Seite für ein kommendes Tutorial über JScrambler an - es ist ein ziemlich nützlicher Service. Es könnte bereits erschienen sein, wenn Sie das lesen.

Yiis URL Manager kann diese Art von Funktionalität auch bereitstellen. Ich werde diese Funktionen für Meeting Planner wahrscheinlich in einem zukünftigen Tutorial implementieren.

Was kommt als nächstes?

Ich hoffe, Sie haben mit diesem Tutorial etwas Neues gelernt. Ich hatte früher I18n mit Rails benutzt - aber das war das erste Mal, dass ich es mit PHP implementiert habe. Achten Sie auf kommende Tutorials in unserer Building Your Startup With PHP-Reihe - es gibt viele lustige Features.

Fühlen Sie bitte sich frei, fügen Sie Ihre Fragen und Kommentare unten hinzu; Ich nehme generell an den Diskussionen teil. Sie können mich auch auf Twitter @reifman erreichen oder mir direkt eine E-Mail schicken.