Сквозная демонстрация для Ionic
improve this page | report issueОбзор
В этой демонстрации рассматриваются все этапы потока. Поток включает в себя следующие шаги:
- Пример приложения, поставляемый вместе с SDK клиента MobileFirst, регистрируется и загружается с помощью MobileFirst Operations Console.
- В MobileFirst Operations Console развертывается новый или предоставленный адаптер.
- В логику приложения вносятся изменения для запроса ресурса.
Конечный результат:
- Успешная проверка связи с 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.
- Нажмите кнопку Создать рядом с разделом Приложения
- Выберите платформу в списке: Android, iOS, Windows, браузер
- Введите com.ibm.mfpstarterionic в качестве идентификатора приложения
- Введите 1.0.0 в качестве версии
- Нажмите кнопку Зарегистрировать приложение
- Загрузите пример приложения Ionic с веб-сайта Github.
Шаг 3: Добавление SDK MobileFirst в приложение Ionic
Следуя инструкциям ниже, добавьте SDK MobileFirst в загруженный пример приложения Ionic.
-
Перейдите в корневую папку существующего проекта Ionic и добавьте MobileFirst базовый модуль Ionic Cordova.
-
Перейдите в корневой каталог проекта Ionic:
cd MFPStarterIonic
-
Добавьте модули MobileFirst с помощью следующей команды CLI Ionic:
ionic cordova plugin add название-модуля-cordova
Пример:ionic cordova plugin add cordova-plugin-mfp
Указанная выше команда добавляет базовый модуль SDK MobileFirst в проект Ionic.
-
Добавьте одну или несколько поддерживаемых платформ в проект Cordova с помощью следующей команды CLI Ionic:
ionic cordova platform add ios|android|windows|browser
. Пример:cordova platform add ios
-
Подготовьте ресурсы приложения с помощью
команды ionic cordova prepare
:ionic cordova prepare
Шаг 4. Изменение логики приложения
-
Откройте проект Ionic в предпочитаемом редакторе кода.
-
Выберите файл 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, выбрав в меню Действия → Развернуть адаптер.
Кроме того, можно нажать кнопку Создать рядом с разделом Адаптеры.
-
Выберите Действия → Загрузить пример. Загрузите пример адаптера Java Hello World.
Если Maven и MobileFirst CLI не установлены, выполните инструкции по настройке среды разработки.
-
В окне Командная строка перейдите в корневую папку проекта Maven адаптера и выполните следующую команду:
mfpdev adapter build
-
После завершения компоновки разверните адаптер с помощью MobileFirst Operations Console. Для этого выберите Действия → Развернуть адаптер. Адаптер расположен в папке [adapter]/target.
Шаг 6. Тестирование приложения
- В окне Командная строка перейдите в корневую папку проекта Cordova.
- Выполните команду:
ionic cordova platform add ios|android|windows|browser
для добавления платформы. - В проекте 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 и других вопросах:
- Просмотреть учебники, посвященные разработке приложений
- Просмотреть учебники, посвященные разработке адаптеров
- Просмотреть учебники, посвященные идентификации и защите
- Просмотреть учебники, посвященные уведомлениям
- Просмотреть все учебники