Сквозная демонстрация для 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) => {
            console.error(error);
            alert("Сбой: запрос ресурса");
          }
        );
      }, (error) => {
        console.error(error);
        alert("Не удалось подключиться к 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 и других вопросах:

Inclusive terminology note: The Mobile First Platform team is making changes to support the IBM® initiative to replace racially biased and other discriminatory language in our code and content with more inclusive language. While IBM values the use of inclusive language, terms that are outside of IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the documentation to reflect those changes.
Last modified on October 30, 2019