Mobile Platform as a Service:Quick Start Guide

Ant Cube Card has been public preview by using the mPaaS 10.2.3 baseline version. However, only the mPaaS native AAR is supported. For more information, see Overview.

Prerequisites

• You have activated and integrated to mPaaS.

• Ant Cube Card AntCubeTool tool has been installed. For more information, see About AntCubeTool.

Procedure

1. Select a baseline.

   1. Choose mPaaS > Native AAR integration. In the integration panel, click Start Configuration under Integrate /Upgrade Baseline to add the 10.2.3 baseline.

   2. Add the Rubik's Cube Card and Rubik's Cube Card -Network Image Loading Library widgets.

2. Initialize the card.

   1. The initialization process varies based on the baseline version. Perform the corresponding operations based on your baseline version.

      1. In the baseline version 10.2.3 and later, you only need to add MP.init(this); to the application to initialize mPaaS. For more information about how to configure initialization parameters, see Extend initialization parameters.

      2. In baseline versions earlier than 10.2.3, you must add the following code to Application to initialize mPaaS.

         public class MainApplication extends Application {
         
             @Override
             public void onCreate() {
                 super.onCreate();
                 // Initialize mPaaS
                 MP.init(this);
             }
         }

   2. Add the following code to the AndroidManifest.xml under the App directory to ensure that the flash back of the C layer can be caught.

      !" -- Ant Cube Card Capture Level C Flash Back Required -->
      <receiver
          android:name="com.alipay.mobile.common.logging.process.LogReceiverInToolsProcess"
          android:enabled="true"
          android:exported="false"
          android:process=":tools">
          <intent-filter>
              <action android:name="${applicationId}.monitor.command" />
          </intent-filter>
      </receiver>
      <receiver
          android:name="com.alipay.mobile.logmonitor.ClientMonitorWakeupReceiver"
          android:enabled="true"
          android:exported="false"
          android:process=":push">
          <intent-filter>
              <action android:name="android.intent.action.BOOT_COMPLETED" />
              <action android:name="${applicationId}.push.action.CHECK" />
              <action android:name="${applicationId}.monitor.command" />
          </intent-filter>
      </receiver>

3. Build a card project.

   1. Initialize a project. Execute act init command in the terminal.

      • Select Application Type as Cube and select Template Card (VUE format).

      • Enter an application name. Enter a name for your project. We recommend that you use a combination of English, numbers, and underscores.

      • Select "Need to create additional project source code folder". An additional folder will be created with the application name. If you select Not Required, the system is initialized in the current directory.

   2. Construct the project. Run the cd command to open the created card project and run the act build to complete the build. The built product will be in the /dist/ folder of your project.

4. Publish the card.

   1. Go to card background.

   2. Click Create Card.

      We recommend that you use a combination of English, numbers, and underscores for the card ID. The card ID must be no less than 8 characters in length. The client relies on the card ID when rendering the card. The card name can be any value and can be up to 20 characters in length.

   3. Add card resources.

      • We recommend that you use a 4-digit version number.

      • Select the main.zip that you just compiled.

      • The client range refers to the client version that can be pulled to the card. If you want to overwrite all client versions, enter 0.0.0.0 in the minimum version field.

   4. Publish the card.

      1. Click Create Release.

      2. Select Official Release.

      After the card is published, the client can pull the card.

5. Render the card.

   // Create a card configuration.
   CubeCardConfig cardConfig = new CubeCardConfig();
   // The ID of the card created in the background.
   cardConfig.setTemplateId("hello_cube");
   // The card version.
   cardConfig.setVersion("1.0.0.0");
   // The width of the card. Select the width of the screen.
   cardConfig.setWidth(MFSystemInfo.getPortraitScreenWidth());
   // Card data (the data used to render the card, usually the content in mock.json)
   JSONObject obj = new JSONObject("xxxxx");
   cardConfig.setData(obj);
   // Create card information.
   CubeService.instance().getEngine().createCard(cardConfig, new CCardCallback() {
       @Override
       public void onLoaded(final CubeCard crystalCard, CCardType cardType, CubeCardConfig cubeCardConfig, CubeCardResultCode result
           if (resultCode == CubeCardResultCode.CubeCardResultSucc) {
               // need to run in the main thread
               runOnUiThread(new Runnable() {
                   @Override
                   public void run() {
                       // Create a card view.
                       CubeView view = CubeService.instance().getEngine().createView(FastActivity.this);
                       // Add it to the outer ViewGroup.
                       mWrapperLl.addView(view);
                       // Render the card.
                       crystalCard.renderView(view);
                   }
               });
           } else {
               MPLogger.info("cube", "fail " + cubeCardConfig.getTemplateId() + " style " + cardType + " error " + resultCode);
           }
       }
   });

   When destroying the page, you need to manually recycle the card.

   @Override
   protected void onDestroy() {
       super.onDestroy();
       if (mCard != null) {
           mCard.recycle();
       }
       int chidrenCount = mWrapperLl.getChildCount();
       for (int i = 0; i < chidrenCount; i++) {
           if (mWrapperLl.getChildAt(i) instanceof CubeView) {
               ((CubeView) mWrapperLl.getChildAt(i)).destroy();
           }
       }
       mWrapperLl.removeAllViews();
   }

6. Effect preview.