Mobile Platform as a Service:Integrate real-device preview for iOS

Prerequisites

• mPaaS has been activated and integrated.

• The AntCubeTool of Ant Cube Card has been installed. For more details, please refer to: About AntCubeTool.

• The integration process has been completed by referring to the Quick start.

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. Use the command line to start the local debugging service. In the project path, run the command to start the service. The commands for macOS and Windows are as follows:

   • macOS: act prepare && act server

   • Windows: act prepare | act server

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

     

3. Start the client and scan the QR code to establish a connection. The terminal prompts that the device is connected.

   

4. Preview the card.

   Open a new terminal window. Use the cd command to switch to the project folder and run act build to compile the project. Then, call 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.