Mobile Platform as a Service:Quick Start Guide

Select Custom Baseline.

Ant Cube Card is currently available in the Custom Baseline cp_change_15200851 version. Select an add method based on your integration method.

• Use the mPaaSPlugin plugin.

  This method is applicable to mPaaS-based integration or existing projects that use mPaaS plug-ins.

  1. Choose Xcode menu item Editor > mPaaS > Edit Project > Upgrade Baseline to switch the project to cp_change_15200851 custom baseline.

     Note

     If the upgrade baseline is not available, make sure that the project configuration has been imported and open the Edit Project page by referring to precondition.

  2. After you upgrade the baseline, choose Edit Module > Modify Module, select Cube Card (the current version strongly depends on the mini program, and you need to select the Ariver mini program component at the same time), and then click Start Editing.

• Use cocoapods-mPaaS plugin.

  This method is applicable to the integration mode that uses CocoaPods based on existing projects.

  1. In the Podfile file, perform steps:

     1. Modify mPaaS_baseline to cp_change_15200851.

     2. Add the Cube Card component dependency by using the mPaaS_pod "mPaaS_Cube".

        

     3. The current version strongly depends on mini program, and you need to use mPaaS_pod "mPaaS_Ariver" to add mini program components.

        

  2. Execute the pod install to complete the integration.

Initialize the card.

1. Compile the Xcode project. If the header file cannot be found, turn on the option to set the Allow Non-modular Includes In Framework Modules to Yes, as shown in the following figure.

   

2. Introduce libraries required for the Cube Card.

   #import <CubeCrystal/CubeEngine.h>
   #import <AntCube/CubeService.h>

3. Use a singleton to initialize the card engine.

   - (void)initEngie{
       static dispatch_once_t onceToken;
       NSString *mockBundlePath = [NSString stringWithFormat:@"%@/%@/crystal", [[NSBundle mainBundle] resourcePath], @"MPCubeDemo.bundle"];
       dispatch_once(&onceToken, ^{
           CubeEngineConfig* config = [[CubeEngineConfig alloc] init];
           [config setBundlePath:mockBundlePath];
           [[CubeService sharedInstance] initWithConfig:config]; 
       });
   }

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.

   • Do not select "Apply to Alipay Client Card Business Scenario".

   • 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 backend of card.

2. Click Create Card.

   We recommend that you use a combination of English, numbers, and underscores for the card ID. The client will rely on the card ID when rendering the card. The card name can take any value.

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 object.
CubeCardConfig *cardConfig = [[CubeCardConfig alloc] init];
// Configure the card version (required) and copy it from the console.
[cardConfig setVersion:@"1.0.0.0"];
// Configure the card ID (required) and copy it from the console.
[cardConfig setTemplteId:@"20211118"];
// The preset card width.
[cardConfig setWidth:[UIScreen mainScreen].bounds.size.width];
// The preset card height.
[cardConfig setHeight:350];
// Set the card data (required) parameter to Business JSON-formatted data. 
[cardConfig setData:@{}];
// Load a card.
[[[CubeService sharedInstance] getEngine] createCard:cardConfig callback:self];

The card obtains the key :"iosImage", and the value corresponding to the key :"iosImage" is obtained, as shown in the following code:

 [self.cardConfig setData:@{@"iosImage":@"https://img.zcool.cn/community/013edb5c7b5b1ca801213f269fc887.jpg@1280w_1l_2o_100sh.jpg"}];

The proxy method after the card is created needs to follow the proxy CCardCallback and needs to implement the onLoaded:cardType:config:erroCode protocol method.

- (void)onLoaded:(CubeCard *)card cardType:(CCardType)cardType config:(CubeCardConfig *)config erroCode:(CubeCardResultCode)erroCode {
    // Failed to create the card.
    if (!card) {
        NSLog(@"load card fail %@ style %d error %d", [config templteId], cardType, erroCode);
        return;
    }
    // The creation is successful.
    self.card=card; // You need to hold the card before you can operate it.

    NSLog(@"load card success %@ style %d error %d", [config templteId], cardType, erroCode);
    dispatch_async(dispatch_get_main_queue(), ^{
        CubeView *view = [[[CubeService sharedInstance] getEngine] createView];
        CGSize size = [card getSize];
        [view setFrame:CGRectMake(0, 320, size.width, size.height) ];
        [self.view addSubview:view];
        [self.card renderView:view];

    });
}

Effect preview.