Статьи

Разработка гибридных мобильных приложений с помощью IBM MobileFirst 7.1

Во вчерашнем посте в блоге ( Начало работы с Mobile Development и IBM MobileFirst 7.1 ) я рассказал о том, что такое  MobileFirst  и почему он может быть полезен для разработчиков мобильных приложений. В сегодняшнем посте я собираюсь обсудить, как гибридная мобильная разработка работает с MobileFirst. Это то, что я обсуждал ранее (для MobileFirst 7.0), и хотя этот процесс не был сложным, он определенно был в нескольких шагах от «типичного» рабочего процесса разработки Cordova. MobileFirst 7.1 действительно улучшает этот процесс и делает его несколько проще для разработчиков гибридных приложений. В этой статье я расскажу о процессе как для новых проектов, так и о том, как можно перенести существующий проект в MobileFirst. Я не буду обсуждать специфику для  Ionic до завтра, но большая часть того, что я скажу сегодня, будет применима и там. Хорошо, начнем!

PreReqs

Прежде чем я начну, я предполагаю, что вы уже загрузили и установили CLI, как я описал во  вчерашнем посте . Вам также понадобится запустить и запустить сервер, локально или в  Bluemix . Я также предполагаю, что у вас есть «нормальные» предварительные требования Cordova, такие как iOS или Android SDK.

Создание проекта

Чтобы создать новый гибридный проект, вы начинаете с запуска  mfp cordova create. Вам будет предложено ввести имя и идентификатор пакета и версию по умолчанию:

Shot1

Далее вам будет предложено выбрать платформы. Как и любой другой проект Cordova, вы можете изменить это позже.

Shot2

Далее CLI сообщает, что некоторые плагины установлены по умолчанию. Эти плагины необходимы для приложений Cordova, работающих с MobileFirst:

shot3

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

shot4

Наконец, CLI предлагает вам выбрать шаблон для вашего приложения. Вы можете передать другие шаблоны с помощью аргумента -t, и вы увидите это в действии завтра, когда я буду писать в блоге об Ionic:

shot5

В этот момент CLI начнет генерировать ваш проект, а также отправит копию на ваш сервер MobileFirst. Если все прошло хорошо, последнее, что вы увидите: «Проект MFP Cordova успешно создан». Давайте посмотрим на папку, созданную CLI.

shot6

По большей части это должно выглядеть очень похоже на обычный проект Cordova. Заметные различия включают в себя:

  • Application-descriptor.xml: позволяет настроить некоторые параметры приложения в MobileFirst. В общем, вам не нужно настраивать это, и когда вы делаете, не редактируйте его вручную, используйте  mfp config.
  • Mobilefirst: файлы в этой папке передаются на сервер MobileFirst. Вам не нужно будет связываться с этим.

И это все — остальное это ванильные вещи Кордовы.

Работа с проектом MobileFirst / Cordova

Итак, теперь, когда у вас есть проект, как вы его используете? Интерфейс MobileFirst CLI передает вызовы Cordova CLI, как это делает Ionic. Так, например, чтобы добавить платформу, вы могли бы сделать:  mfp cordova platform add android. В общем, команды очень похожи, но иногда есть небольшие различия. Так, например, эмулировать, вы должны передать флаг -p:  mfp cordova emulate -p ios. В этом случае -p означает платформу. Вы можете легко увидеть синтаксис, набрав  mfp help cordova:

shot7

Так что процесс кодирования / тестирования очень похож. Вы можете открыть папку www, отредактировать и просмотреть изменения, выполнив  mfp cordova emulate -p ios:

shot8

В то время, когда я пишу этот пост, у нас есть небольшая ошибка с CLI, которая влияет на этот процесс. При работе с сервером MobileFirst необходимо развернуть биты на сервере, чтобы он знал об этом. (Есть больше причин, чем это, но давайте пока будем проще). Эта команда:  mfp push. Эмулировать команда  должна  сделать толчок автоматически, но сейчас это не так. Опять же, это ошибка, известная, над которой уже ведется работа. (Я постараюсь не забыть отредактировать этот пост после выхода исправления). Сейчас я рекомендую выполнять обе команды одновременно. В OSX, это было бы:  mfp push && mfp cordova emulate -p ios. Конечно, вы можете автоматизировать все это с Грантом / Гулпом.

За пределами этого — вы сделали. Создайте свое приложение. Используйте классные функции MobileFirst, выполняйте итерации, развертывайте и добивайтесь успеха.

Миграция существующего приложения

Итак, что вы делаете, если у вас есть существующее приложение? Сначала начните с создания нового проекта MFP Cordova, как я обрисовал выше. Вы хотите, чтобы соответствовать идентификатор и имя приложения. Вы также можете указать CLI установить плагины, которые нужны вашему приложению, но если вы забудете, вы всегда можете добавить плагины позже. Затем вы можете просто скопировать папку www из существующего проекта в новую папку www MFP.

Итак, на данный момент вам нужно сделать одну небольшую настройку кода вашего приложения. Как вы знаете, приложения Cordova должны ждать события deviceready, прежде чем они сделают что-либо, связанное с самим устройством. Большинство людей рассматривают устройство в качестве основного приложения «начальной загрузки», т. Е. На самом деле они не садятся на корточки до тех пор, пока оно не сработает.

В приложении MFP Cordova у вас также есть другое событие — инициализация клиентской среды MobileFirst. По умолчанию ваш код может (вероятно, должен) вызывать функцию  wlCommonInit. Когда эта функция запущена, вы можете выполнить «MobileFirst вещи», очень похоже на то, как устройство уже означает готовность устройства. Вы можете просто включить эту функцию в свое приложение, чтобы начать делать такие вещи, как удаленное ведение журнала или другие утилиты. Вот пример:

function wlCommonInit(){
}

document.addEventListener("deviceready", init, false);
function init() {

}

Если вы используете проект MFP Cordova по умолчанию, вы увидите несколько дополнительных битов:

var Messages = {
    // Add here your messages for the default language.
    // Generate a similar file with a language suffix containing the translated messages.
    // key1 : message1,
};

var wlInitOptions = {
    // Options to initialize with the WL.Client object.
    // For initialization options please refer to IBM MobileFirst Platform Foundation Knowledge Center.
};

Они не являются обязательными и могут быть опущены, если они вам не нужны.

Вот и все. Черт, технически вам даже не нужен wlCommonInit, без него он не выдаст ошибку, но предполагается, что вы действительно хотите использовать MobileFirst. Любые вопросы?