Quick start - Mobile Platform as a Service - Alibaba Cloud Documentation Center

This topic describes how to integrate and use Ant Cube Card.

Ant Cube Card has been started public test by using the mPaaS 10.2.3 baseline version. However, only the mPaaS native AAR integration method is supported. For more information, see Integration method introduction.

Prerequisites

You have activated and integrated to mPaaS.
Ant Cube Card AntCubeTool tool has been installed. For more information, see About AntCubeTool.

Procedure

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 Cube Card and Cube Card -Network Image Loading Library components.
  Important
  Cube Card - Network Image Loading Library is a sample library for you to quickly access cube cards and experience. We recommend that you replace it with your own imageLoader when you go online. After the replacement, you can achieve functions and optimizations such as package size reduction, unified image management, and image abnormality monitoring (self-monitoring). For details, please refer to Client Sends Notification to Card to set the network image download Handler.

Initialize the card.

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 Engine Initialization Parameter.
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);
    }
}
```

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>

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.
Release the card.
1. Go to the card management platform.
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. Release the card.
  1. Click Create Release.
  2. Select Official Release.
  After the card is released, the client can pull the card.

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

Effect preview.