Integrate real-device preview for iOS

Prerequisites

• mPaaS has been activated and integrated.

• AntCubeTool is installed. For more information, see About AntCubeTool.

• The integration process in Quick start is complete.

Procedure

1. Add the real-device preview dependency. The following example uses a pod.

   1. Add the pod modules.

      mPaaS_pod "mPaaS_Cube" 
      mPaaS_pod "mPaaS_Cube_Dev"

      Important

      • You must use mPaaS_Cube and mPaaS_Cube_Dev together.

      • Before you publish the app, make sure to delete mPaaS_Cube_Dev.

   2. Update the pod.

      pod mpaas update 10.2.3

   3. Run pod install.

      pod install

      

   4. Add the dependency libraries required for the QR code scan preview.

      #import <APCubePlayground/APCubePlayground.h>
      #import <AudioToolbox/AudioToolbox.h> 
      #import <MPCubeAdapter/MPCubeAdapter.h>

   5. Set the preview page.

      Important

      • Before you use the preview feature, ensure that the engine is initialized.

      • A custom extension module is invalid unless it is registered.

      • If you use the default preview page, call the following code:

        [[MPCubePreViewManager sharedInstance] setDefaultDebugPreview:true topOffset:0];

      • If you define a custom preview page, register the listener and implement the CubeCardPreviewListener Protocol:

        [APCubePlayground registPreViewListener:id<CubeCardPreviewListener>];
        
        //  CubeCardPreviewListener
        - (void)onPreViewFinish:(BOOL)rst cubeCard:(CubeCard*)cubeCard {
            
        }

   6. Call the QR code scan preview method.

      - (void)scan {
          [APCubePlayground launch];
          [APCubePlayground scan];
      }

      Important

      The current app must have a NavigationController. Otherwise, the app will not respond after you call scan.

2. Start the local debugging service from the command line. In the project directory, run the following command:

   • macOS: act prepare && act server

   • Windows: act prepare | act server

     After the command runs, a QR code is generated in the terminal.

     

3. Start the client and scan the QR code to connect. The terminal confirms that the device is connected.

   

4. Preview the card.

   Open a new terminal window, navigate to the project folder with cd, and run act build to compile the project. Then run act preview to push the compiled content to the client.

   • If you use the default preview page, the client automatically redirects to display the preview card.

   • If you define a custom preview interface, the CubeCardPreviewListener Protocol callback is triggered. Your app can then retrieve the CubeCard instance and render it.