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

improve this page | report issue

Обзор

В этой демонстрации рассматриваются все этапы потока.

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

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

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

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

  • Xcode для iOS, Android Studio для Android
  • React Native 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
    • Введите com.ibm.mfpstarter.reactnative в качестве идентификатора приложения
    • Введите 1.0.0 в качестве версии
    • Нажмите кнопку Зарегистрировать приложение

    Зарегистрировать приложение

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

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

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

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

  WLAuthorizationManager.obtainAccessToken("").then(
      (token) => {
        console.log('-->  pingMFP(): Success ', token);
        var resourceRequest = new WLResourceRequest("/adapters/javaAdapter/resource/greet/",
          WLResourceRequest.GET
        );
        resourceRequest.setQueryParameters({ 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);
        alert("Failed to connect to MobileFirst Server");
      });

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

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

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

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

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

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

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

    Развертывание адаптера

пример приложения

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

  1. Убедитесь, что установлен MobileFirst CLI, затем перейдите в корневую папку платформы (iOS или Android) и выполните команду mfpdev app register. В случае применения удаленного экземпляра MobileFirst Server выполните команду для добавления сервера,
    mfpdev server add
    

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

    mfpdev app register myIBMCloudServer
    
  2. Запустите приложение с помощью следующей команды:
    react-native run-ios|run-android
    

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


Результаты

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

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

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

Last modified on October 11, 2018