Сквозная демонстрация для Ionic

Обзор

В этой демонстрации рассматриваются все этапы потока. Поток включает в себя следующие шаги:

1. Пример приложения, поставляемый вместе с SDK клиента MobileFirst, регистрируется и загружается с помощью MobileFirst Operations Console.
2. В MobileFirst Operations Console развертывается новый или предоставленный адаптер.
3. В логику приложения вносятся изменения для запроса ресурса.

Конечный результат:

• Успешная проверка связи с MobileFirst Server.
• Успешное извлечение данных с помощью адаптера.

Предварительные требования:

• Xcode для iOS, Android Studio для Android или Visual Studio 2015 или поздней версии для Windows 10 UWP
• Ionic CLI
• Необязательно. MobileFirst CLI (загрузить).
• Необязательно. Автономный экземпляр MobileFirst Server (загрузить).

Шаг 1. Запуск MobileFirst Server

Убедитесь, что создан экземпляр Mobile Foundation, либо в случае применения MobileFirst Developer Kit перейдите в папку сервера и выполните следующую команду: ./run.sh (Mac и Linux) или run.cmd (Windows).

Шаг 2. Создание и регистрация приложения

В браузере откройте MobileFirst Operations Console с помощью следующего URL: http://your-server-host:server-port/mfpconsole. Если сервер работает в локальном режиме, введите следующий адрес: http://localhost:9080/mfpconsole. Идентификационные данные пользователя: admin/admin.

1. Нажмите кнопку Создать рядом с разделом Приложения
   • Выберите платформу в списке: Android, iOS, Windows, браузер
   • Введите com.ibm.mfpstarterionic в качестве идентификатора приложения
   • Введите 1.0.0 в качестве версии
   • Нажмите кнопку Зарегистрировать приложение

   

2. Загрузите пример приложения Ionic с веб-сайта Github.

Шаг 3: Добавление SDK MobileFirst в приложение Ionic

Следуя инструкциям ниже, добавьте SDK MobileFirst в загруженный пример приложения Ionic.

1. Перейдите в корневую папку существующего проекта Ionic и добавьте MobileFirst базовый модуль Ionic Cordova.

2. Перейдите в корневой каталог проекта Ionic: cd MFPStarterIonic

3. Добавьте модули MobileFirst с помощью следующей команды CLI Ionic: ionic cordova plugin add название-модуля-cordova Пример:

   ionic cordova plugin add cordova-plugin-mfp
   

   Указанная выше команда добавляет базовый модуль SDK MobileFirst в проект Ionic.

4. Добавьте одну или несколько поддерживаемых платформ в проект Cordova с помощью следующей команды CLI Ionic: ionic cordova platform add ios|android|windows|browser. Пример:

   cordova platform add ios
   

5. Подготовьте ресурсы приложения с помощью команды ionic cordova prepare:

   ionic cordova prepare
   

Шаг 4. Изменение логики приложения

1. Откройте проект Ionic в предпочитаемом редакторе кода.

2. Выберите файл src/js/index.js и вставьте следующий фрагмент кода, заменив существующую функцию WLAuthorizationManager.obtainAccessToken():

WLAuthorizationManager.obtainAccessToken("").then(
      (token) => {
        console.log('-->  pingMFP(): Success ', token);
        this.zone.run(() => {
          this.title = "Yay!";
          this.status = "Connected to MobileFirst Server";
        });
        var resourceRequest = new WLResourceRequest( "/adapters/javaAdapter/resource/greet/",
        WLResourceRequest.GET
        );

        resourceRequest.setQueryParameter("name", "world");
            resourceRequest.send().then(
                (response) => {
                    // Will display "Hello world" in an alert dialog.
                    alert("Success: " + response.responseText);
                },
                (error) => {
                    alert("Failure: " + JSON.stringify(error));
                }
            );
      }, (error) => {
        console.log('-->  pingMFP(): failure ', error.responseText);
        this.zone.run(() => {
         this.title = "Bummer...";
         this.status = "Failed to connect to MobileFirst Server";
        });
      }
    );

Шаг 5. Развертывание адаптера

Загрузите этот артефакт .adapter и разверните его в MobileFirst Operations Console, выбрав в меню Действия → Развернуть адаптер.

Кроме того, можно нажать кнопку Создать рядом с разделом Адаптеры.

1. Выберите Действия → Загрузить пример. Загрузите пример адаптера Java Hello World.

   Если Maven и MobileFirst CLI не установлены, выполните инструкции по настройке среды разработки.

2. В окне Командная строка перейдите в корневую папку проекта Maven адаптера и выполните следующую команду:

    mfpdev adapter build
   

3. После завершения компоновки разверните адаптер с помощью MobileFirst Operations Console. Для этого выберите Действия → Развернуть адаптер. Адаптер расположен в папке [adapter]/target.

   

Шаг 6. Тестирование приложения

1. В окне Командная строка перейдите в корневую папку проекта Cordova.
2. Выполните команду: ionic cordova platform add ios|android|windows|browser для добавления платформы.
3. В проекте Ionic выберите файл config.xml и укажите в элементе <mfp:server ... url=" "/> значения свойств protocol, host и port с учетом конфигурации MobileFirst Server.
   • Обычные значения в случае применения локального экземпляра MobileFirst Server: http, localhost и 9080.
   • Обычные значения в случае применения удаленного экземпляра MobileFirst Server (в IBM Cloud): https, адрес-сервера и 443.
   • В случае применения кластера Kubernetes в IBM Cloud Private и развертывания с типом NodePort значением порта, как правило, будет значение NodePort, предоставляемое службой в кластере Kubernetes.

   Кроме того, если установлен MobileFirst CLI, перейдите в корневую папку проекта и выполните команду mfpdev app register. В случае применения удаленного экземпляра MobileFirst Server выполните команду

    mfpdev server add
   

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

    mfpdev app register myIBMCloudServer
   

Если устройство подключено, приложение устанавливается и запускается на устройстве. В противном случае применяется симулятор или эмулятор.

Результаты

• При нажатии кнопки Проверить связь с MobileFirst Server выдается сообщение Установлено соединение с MobileFirst Server.
• Если приложению удалось подключиться к MobileFirst Server, ресурс запрашивается с помощью развернутого адаптера Java. Ответ адаптера отображается в предупреждении.

Дальнейшие действия

Узнайте больше об использовании адаптеров в приложениях, интеграции дополнительных служб, таких как Push-уведомления, с помощью среды защиты MobileFirst и других вопросах:

• Просмотреть учебники, посвященные разработке приложений
• Просмотреть учебники, посвященные разработке адаптеров
• Просмотреть учебники, посвященные идентификации и защите
• Просмотреть учебники, посвященные уведомлениям
• Просмотреть все учебники