Интернационализировать и локализовать ваше ионное приложение

Используя Angular Translate, Angular Dynamic Locale и плагин Cordova Globalization

Выпуск приложения на одном языке может серьезно сократить его аудиторию. Учитывая это, интернационализация может обеспечить поддержку нескольких языков для вашего приложения.

Введение

Это руководство проведет вас через все, что вам нужно знать, чтобы интернационализировать и локализовать ваше ионное приложение с использованием трех действительно полезных технологий:

Angular Translate
Угловой динамический языковой стандарт
Плагин Cordova Globalization.

Скачать код

Примечание. Будьте в курсе последних событий и узнайте, как интернационализировать приложение Ionic 2.

Что такое интернационализация

Начнем с того, что очень часто возникает недопонимание между терминами «Интернационализация» и «Локализация». Очевидно, у них сильная ассоциация друг с другом.

По версии Angular:

Интернационализация (i18n) - это процесс разработки продуктов таким образом, чтобы их можно было легко локализовать для языков и культур. Локализация (l10n) - это процесс адаптации приложений и текста для обеспечения их удобства использования на определенном культурном или языковом рынке.

Другими словами, интернационализация - это предварительный этап локализации, поскольку он подготавливает ваше приложение с точки зрения проектирования и сборки для его локализации. По сути, это подразумевает абстракцию строк и всех битов приложения, чувствительных к языку / культуре.

Предпосылки

Ionic использует AngularJS для многих основных функций фреймворка. В результате в этом руководстве предполагается, что вы используете AngularJS для своего приложения.

Для построения нашего Ionic-приложения мы будем использовать Yeoman AngularJS generator. Генератор Yeoman популярен для создания гибридных мобильных приложений Ionic с использованием AngularJS и Cordova и позволяет быстро настроить проект с разумными настройками по умолчанию и передовыми методами.

Установить Yeoman

Убедитесь, что yeoman установлен в вашем окне разработки. Это однострочная команда с использованием npm:

$ npm install -g yo

Подробнее http://yeoman.io/

Шаг 1. Создайте новое базовое ионное приложение.

В этом разделе мы создадим базовое приложение Ionic. Это будет приложение, которое мы расширим, добавив поддержку i18n. Установив на вашем компьютере yeoman, npm и bower, вы готовы сгенерировать базовое приложение, которое будет использоваться в этом руководстве.

Сначала создайте папку для своего приложения, которая в нашем случае будет называться «i18n-ionic-tutorial».

$ mkdir i18n-ionic-tutorial && cd $ _

Запустите генератор yeoman, передав имя приложения:

$ yo ionic i18n-ionic-tutorial

Используйте свой любимый редактор и откройте содержимое папки «i18n-ionic-tutorial». В нашем случае мы используем Atom. Sublime - тоже очень хороший выбор. Однако любой редактор кода будет работать.

Шаг 2: Установка и настройка модулей

Мы будем использовать модуль AngularJS angular-translate, который упростит для нас всю обработку языкового перевода. Также для установки / изменения углового языкового стандарта, а именно форматирования даты, времени, валюты, будет использоваться библиотека Angular Dynamic Locale.

Но как приложение узнает, на каком языке настроено устройство? Для этого необходимо скачать и установить Cordova Globalization plugin. Мы будем использовать этот плагин, поскольку он предоставляет множество полезных инструментов интернационализации, таких как функция getPreferredLanguage, которая найдет предпочтительный язык в соответствии с настройками устройства.

угловой перевод

Сначала мы загрузим библиотеку angular-translate. Мы можем сделать это с помощью Bower. Мы добавим связанный пакет в список зависимостей в файле bower.json, который позволяет устанавливать и обновлять этот пакет и любые другие пакеты, указанные в этом файле, с помощью одной команды. Связанные строки в файле bower.json будут следующими:

Затем нам нужно объявить angular-translate как зависимость загрузки модуля в файле app.js:

Угловой динамический языковой стандарт

Точно так же нам нужно загрузить библиотеку Angular Dynamic Locale. Опять же, сделаем это с помощью Bower. Таким образом, в файле bower.json мы добавим связанный пакет в список пакетов. Соответствующая строка в файле bower.json будет следующей:

Как и ранее с Angular Translate, мы объявим Angular Dynamic Locale как зависимость загрузки модуля в app.js файл:

Плагин Cordova Globalization

Поскольку плагин Cordova Globalization является частью арсенала ngCordova, нам необходимо добавить эту зависимость в app.js файл:

Плагин Cordova Globalization необходимо добавить с помощью команды:

Плагин $ cordova добавить cordova-plugin-globalization

или, если вы используете npm, вам необходимо включить его в файл package.json. Мы предпочитаем второй способ, поэтому мы добавим следующую строку в файл package.json:

Для дальнейшего чтения ознакомьтесь с документацией Apache.

Теперь выполните следующую команду, и новый вставленный плагин будет установлен:

$ npm install

Кроме того, выполните следующую команду, и новые вставленные пакеты будут установлены:

$ bower install

Шаг 3. Создание файлов перевода

Чтобы создать файлы языкового перевода, мы собираемся использовать ключи перевода в шаблонах представления проекта, например, в app / templates / tab-dash.html:

Обратите внимание, что после ключа перевода следует фильтр translate, который переводит содержимое соответствующего ключа перевода.

Затем вам необходимо создать файл JSON перевода с фактически переведенным текстом, который соответствует соответствующим ключам перевода. В этом руководстве мы назвали папку, содержащую файлы перевода, i18n, а файл перевода JSON - en-US.json:

Соглашение об именах файлов

Имя файлов со строками перевода должно быть в формате xx-YY.json, где xx-YY означает «Код языка и подкод» или «Тег».

Коды-подкоды перевода, которые вы использовали для именования файлов перевода, будут использоваться для спецификации языка, который требуется angular-translate для «разговора» на языке.

И тут возникает вопрос: Какие коды перевода я могу использовать?. Лучшие практики создания кодов-субкодов проиллюстрированы в Руководстве W3C по интернализации.

Обратите внимание, что в рекомендациях W3C по интернализации коды называются тегами. В соответствии со стандартом, рекомендованным W3C, языковые коды одинаковы для всех языков программирования и предлагают общую интерпретацию всеми профессионалами, поскольку большинство приложений с поддержкой локали соответствуют этому стандарту. Некоторые примеры кода, следующие за этим стандартом: «en-US» и «ru-RU». Однако вы можете использовать любые языковые коды, которые захотите.

Шаг 4: Создание файлов локали

Angular поддерживает множество различных локалей, которые можно загрузить из соответствующего репозитория.

Позже мы сообщим динамической локали Angular, где расположены все файлы локали.

В этом руководстве мы назвали папку, в которой они содержатся в локали в приложении / папке, следующим образом:

Шаг 5. Подготовьте приложение и загрузите исходный язык / локаль

Конфигурация

Установите доступные языки

Пришло время объявить все языки, доступные для Angular Translate. Здесь мы будем использовать языковые коды, упомянутые ранее. Мы сделаем это, добавив следующую строку кода в файл app.js:

Кроме того, чтобы указать местоположение в файловой системе, откуда приложение будет загружать файлы языковых стандартов для Angular Dynamic Locale, нам необходимо настроить их с помощью tmhDynamicLocaleProvider.

Вся настройка файлов перевода и локали происходит в следующих строках:

На этом этапе наше приложение готово и переведено на английский язык. Но мы сделаем еще один шаг и в следующем разделе мы сделаем так, чтобы наше приложение могло учитывать языковые настройки устройства, чтобы решить, на какой язык будет переведен текст.

Шаг 6. Определите и установите язык / локаль при запуске

Во-первых, нам нужно вызвать метод setLanguage () в функции ready (), который изменит язык приложения, пока приложение все еще работает, в соответствии с настройками устройства пользователя:

Здесь мы видим метод setLanguage (). Он использует предпочтительный язык устройства, а затем находит подходящий язык, который будет использоваться для перевода:

getSuitableLanguage () вернет язык среди доступных языков, которые мы объявили ранее:

Наконец, метод applyLanguage () установит язык с помощью Angular Dynamic Locale:

Шаг 7. Добавление языка

После того, как вы выполнили всю работу по разработке и созданию ядра своего приложения, вы можете добавить столько языков, сколько захотите. Например, мы добавим французский в три этапа:

а. Мы создадим файл fr-fr.json с переведенным текстом по пути app / i18n:

б. Мы загрузим файл angular-locale_fr-fr.js из репозитория Angular и поместим его по пути app / locales:

c. Объявите его на доступных языках в app.js:

Запустите приложение

Мы можем запустить приложение в браузере с помощью команды:

$ grunt serve

или на симуляторе смартфона. Например, для iOS нам сначала нужно добавить платформу:

$ grunt platform: add: ios

а затем запустите приложение на симуляторе:

$ grunt emulate: ios - livereload

Вывод

В этом руководстве мы узнали, как создать и спроектировать приложение Ionic, чтобы сделать его интернационализированным за 7 шагов. После всей этой подготовки не нужно беспокоиться, если вам нужно перевести приложение даже на сотню языков. Теперь вы на пути к интернационализации ваших ионных приложений!

Этот учебник показался интересным?

Вы можете найти полную демонстрацию Ионной интернационализации приложений, которая учитывает языковой стандарт, установленный пользователем, и соответствующим образом корректирует контент приложения или, если он не установлен, корректирует контент приложения в соответствии с языком по умолчанию.

Готовое к производству Приложение Ionic i18n, которое демонстрирует и расширяет все, что описано в этом руководстве, доступно в CodeCanyon.

Исходный код примера, использованного в этом руководстве, доступен на GitHub.

Подпишитесь на нас в Twitter или Google+ или даже проверьте наш Профиль CodeCanyon. Вы также можете посетить наш сайт www.appseed.io.

Интересно в Ionic?

Ознакомьтесь с нашими Стартовые комплекты Ionic и Ionic 2 и Шаблоны приложений.

использованная литература

Ionic, AngularJS, Yeoman, Yeoman AngularJS generator, Исходный код этого урока, See-ming Lee для обложки.

Удачного кодирования,
Команда AppSeed

/ Ставрос Кунис, skounis.github.io

Интернационализировать и локализовать ваше ионное приложение