React Native 开发

执行以下步骤，以在 MobileFirst Platform Foundation 上快速开始使用 React Native 进行开发。

该快速启动教程的目的是解释简单的端到端流程。

在 Github 中提供了样本应用程序，将下载样本并向 MobileFirst Server 注册。提供的适配器（或新适配器）将部署到 MobileFirst Operations Console。应用程序逻辑更改为发出资源请求。

预期结果：成功 ping MobileFirst Server，并使用适配器成功检索数据。

步骤 1：启动 MobileFirst Server

确保您已创建 Mobile Foundation 实例，如果要使用 MobileFirst Developer Kit，请浏览至服务器的文件夹并运行以下命令：./run.sh（在 Mac 和 Linux 中）或 run.cmd（在 Windows 中）。

步骤 2：添加 React Native SDK

步骤 2.1：从 Github 下载 React Native 样本应用程序。

步骤 2.2：将 React Native SDK 添加到下载的 React Native 样本应用程序

针对 React Native 的 MobileFirst SDK 可用作 NPM 中的 React Native 模块。

1. 浏览至已下载的 React Native 项目的根目录，然后添加 MobileFirst 核心 React Native 插件，将目录更改为 React Native 项目的根目录：cd MFPStarterReactNative
2. 使用 NPM CLI 命令添加 MobileFirst 插件：npm install react-native-plugin-name
   例如：

           npm install react-native-ibm-mobilefirst --save
         

   上述命令会将 MobileFirst 核心 SDK 插件添加到 React Native 项目。

3. 将所有本机依赖关系链接到您的应用程序
   

           react-native link
         

步骤 2.3：特定于其他平台的步骤

Android

      <![CDATA[
      <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/  package="com.myapp">
        ...
        <application tools:replace="android:allowBackup"
        ...
      </application>
    ]]>
    

iOS

步骤 3：注册应用程序

1. 打开命令行窗口并浏览至项目的特定平台（iOS 或 Android）的根目录。

           cd ios
         

   或

           cd android
         

2. 运行以下命令以注册应用程序：

           mfpdev app register
         

   如果使用的是远程服务器，请使用命令 mfpdev server add 进行添加。 mfpdev app register CLI 命令将先连接到 MobileFirst Server 以注册应用程序。每个平台将在 MobileFirst Server 中注册为应用程序。

   • iOS

     如果您的平台是 iOS，那么将请求您提供应用程序的 BundleID。要点：BundleID 是区分大小写的。

     mfpdev app register CLI 命令将先连接到 MobileFirst Server 以注册应用程序，然后更新 Xcode 项目根目录的 mfpclient.plist 配置文件，其中包含标识 MobileFirst Server 的元数据。

     注：在 XCode 的项目导航器中，从 ios 文件夹拖放 mfpclient.plist。此步骤仅适用于 iOS 平台。

   • Android

     如果您的平台是 Android，那么将请求您提供应用程序的包名称。要点：包名称是区分大小写的。

     mfpdev app register CLI 命令将先连接到 MobileFirst Server 以注册应用程序，之后在 Android Studio 项目的 [project root]/app/src/main/assets/ 文件夹中生成 mfpclient.properties 文件，然后向其添加用于标识 MobileFirst Server 的元数据。

步骤 4：编辑应用程序逻辑

1. 在您所选的代码编辑器中打开 React Native 项目。
2. 将 WLAuthorizationManager 类导入 App.js 中

         import {WLAuthorizationManager, WLResourceRequest} from 'react-native-ibm-mobilefirst';
         

3. 选择位于项目根文件夹的 App.js 文件并粘贴以下代码片段，替换现有的 WLAuthorizationManager.obtainAccessToken() 函数：

   请参阅此处的 React Native 客户端 API 参考。

              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");
                  });
          

步骤 5：部署适配器

下载这一准备好的 .adapter 工件，并通过使用操作 → 部署适配器操作从 MobileFirst Operations Console 进行部署。

步骤 5.1：选择操作 → 下载样本选项。下载 Hello World Java 适配器样本

或者，单击适配器旁边的新建按钮。

如果未安装 Maven 和 MobileFirst CLI，请遵循屏幕上的设置开发环境指示信息。

步骤 5.2：从命令行窗口中，导航至适配器的 Maven 项目根文件夹并运行以下命令：

    mfpdev adapter build
  

步骤 5.3：在构建完成时，使用操作 → 部署适配器操作从 MobileFirst Operations Console 进行部署。适配器可在 [adapter]/target 文件夹中找到。

步骤 6：测试应用程序

使用以下命令运行应用程序：

     react-native run-ios|run-android
    

如果已连接某设备，将在该设备上安装并启动此应用程序。否则，将使用模拟器或仿真器。

有关快速启动步骤的详细指示信息，请参阅此处。

结果

• 单击 Ping MobileFirst Server 按钮将显示已连接到 MobileFirst Server。
• 如果应用程序能够连接到 MobileFirst Server，那么将使用部署的 Java 适配器进行资源请求调用。然后，适配器响应将显示在警报中。

React Native SDK for IBM MobileFirst JSONStore

安装

针对 React Native 应用程序的 IBM MobileFirst JSONStore SDK 依赖于 IBM MobileFirst Foundation SDK。将 IBM MobileFirst Foundation SDK 添加到您的应用程序。

浏览至 React Native 应用程序的文件夹，然后运行以下命令来安装针对 React Native 应用程序的 JSONStore SDK。

      npm install react-native-ibm-mobilefirst-jsonstore --save
      

受支持的平台为 Android 和 iOS。

入门

先决条件

• 确保您已考虑 React Native 应用程序的所有先决条件。如果您是 React Native 的新用户，请参阅 React Native 入门页面。
• IBM Cloud 上的 Mobile Foundation 实例或 IBM Mobile Foundation 服务器的本地安装。

创建 React Native 项目

1. 第一步是创建 React Native 项目。让我们将应用程序称为 JSONStoreApp。使用 React Native CLI 创建新项目。

         react-native init JSONStoreApp
         cd JSONStoreApp
         

2. 安装 MobileFirst 核心 SDK 并完成入门指示信息。
3. 将 IBM MobileFirst JSONStore SDK 添加到您的应用程序。

         npm install react-native-ibm-mobilefirst-jsonstore —-save
         

4. 链接您的项目，以便将所有本机依赖关系添加到您的 React Native 项目。

         react-native link
         

配置您的 Android 应用程序

• 将以下行添加到 /android/app/build.gradle 的 android 部分：

      packagingOptions{
      	exclude 'META-INF/ASL2.0'
      }
      

创建 JSONStore 集合

使用 JSONStore API 的第一步是创建 JSONStore 集合。

1. 将 JSONStore 类导入您的应用程序。打开 App.js 并在其他导入语句中添加以下行：

       import {WLJSONStore, JSONStoreCollection} from 'react-native-ibm-mobilefirst-jsonstore';
       

2. 创建并打开集合。您可以同时打开多个集合。针对诸如使用密码保护您的集合、设置同步策略等高级选项，传递 JSONStoreInitOptions 参数：

       var dogs = new JSONStoreCollection('dogs');
       WLJSONStore.openCollections(['dogs']);  // Provide the name of the collection as a string.
   
       

将数据添加到集合

将 JSON 数据添加到您的集合。

    	var hachi = { "name" : "Hachiko" , "breed" : "Akita" , "country" : "Japan"};
        dogs.addData(hachi).then( ()=> {
          // Data was added to the collection successfully.

        }).catch ( (err) => {
          // Error adding data. See the err object for more information on the error

        })
    

从集合查询数据

使用任何 JSONStoreCollection.find* API 查询集合。使用 JSONStoreQueryPart 和 JSONStoreQuery API 对 JSON 数据进行高级过滤和查询。

    	dogs.findAllDocuments().then( (result) => {
           // result will have all the documents in the collection

           // E.g. [ {"json": {"name":"Hachiko","breed":"Akita","country":"Japan"},"_id":2}]

         }).catch((error) => {
            console.error ("Error finding docs " +  JSON.stringify(error));
         });
    

关闭、清除和销毁您的集合。

关闭您的集合将关闭您的 JSONStore 集合，要进一步访问，需要使用 openCollections API 重新将其打开。

    WLJSONStore.closeAll()
    

清除集合将从集合中移除所有文档，但不会将其销毁。

    	dogs.clearCollection().then (()=>{
    		// All documents cleared successfully

         }).catch( (err) => {
           // An error occurred while clearing the collection.

         })
    

销毁集合将永久删除所有数据、所有存取器和安全工件。集合一旦销毁，将无法复原。将销毁应用程序的所有集合。

    	WLJSONStore.destroy()
    

补充阅读

参考

• 开发者中心
• 入门
• API 参考