Mobile Platform as a Service:Quick start

Select baseline.

Cube Card is supported in baseline 10.2.3. Select the appropriate component addition method based on your integration method.

• Use mPaaS Xcode Extension

  Applicable to: Integrate based on mPaaS framework or Integrate by using mPaaS plugin based on existing projects.

  1. Click the Xcode menu item Editor > mPaaS > Edit Project > Upgrade Baseline to switch the project to the 10.2.3 baseline.

     Note

     If the "Upgrade Baseline" option is not clickable, make sure the project configuration has been imported. Refer to the Prerequisites section to open the project editing page.

  2. After upgrading the baseline, click Edit Module > Modify Module, select the Cube Card, save, and then click Start Editing to complete the addition.

• Use cocoapods-mPaaS Plugin

  Applicable to: Integrate by using CocoaPods based on the existing project.

  1. Perform the following operations in the Podfile.

     1. Change mPaaS_baseline to 10.2.3.

     2. Use mPaaS_pod "mPaaS_Cube" to add the Cube Card component dependency.

  2. Run pod install to complete the integration.

Initialize the card.

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

   

2. Add system dependencies.

   

3. Import the libraries required for Cube Card.

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

4. 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. Run the act init command in the terminal.

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

   • Enter an application name. Use a combination of English letters, numbers, and underscores.

   • Select "Create an additional project source code folder" to create a subfolder named after the application. If you select "Do not", the project is initialized in the current directory.

2. Build the project. Run cd to navigate to the card project directory, then run act build. The build output is stored in the /dist/ folder.

   

Release the card.

1. Go to the Ant Cube Card platform.

   

2. Click Create Card.

   

   Use a combination of English letters, numbers, and underscores for the card ID. The client relies on the card ID to render the card. The card name can be any value.

3. Add card resources.

   • Use a 4-digit version number.

   • Select the main.zip that you just compiled.

   • The client range specifies which client versions can pull the card. To cover 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, clients can pull and display it.

Render the card.

1. Copy the card ID and card version number from the webpage.

   //Create card object.
   CubeCardConfig *cardConfig = [[CubeCardConfig alloc] init];
   //Configure the card version (required), copied from the console.
   [cardConfig setVersion:@"1.0.0.0"];
   //Configure card ID (required), copy from console.
   [cardConfig setTemplteId:@"20211118"];
   //Preset card width.
   [cardConfig setWidth:[UIScreen mainScreen].bounds.size.width];
   //Preset card height.
   [cardConfig setHeight:350];
   //Set the card data (required) parameter to business JSON data.
   [cardConfig setData:@{}];
   //Load the card.
   [[[CubeService sharedInstance] getEngine] createCard:cardConfig callback:self];
   

2. The card retrieves the value for the key "iosImage", as shown in the following code:

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

3. The delegate method for card creation must conform to the CCardCallback protocol and implement the onLoaded:cardType:config:erroCode method.

   @interface ViewController () <CCardCallback>
   @end

   - (void)onLoaded:(CubeCard *)card cardType:(CCardType)cardType config:(CubeCardConfig *)config erroCode:(CubeCardResultCode)erroCode {
       //Card creation failed
       if (!card) {
           NSLog(@"load card fail %@ style %d error %d", [config templteId], cardType, erroCode);
           return;
       }
       
       //Creation successful
       NSLog(@"load card success %@ style %d error %d", [config templteId], cardType, erroCode);
       
       dispatch_async(dispatch_get_main_queue(), ^{
           //Main thread UI operations: Rendering cards
   		CubeView *view = [[[CubeService sharedInstance] getEngine] createView];
           CGSize size = [card getSize];
           [view setFrame:CGRectMake(0, 20, size.width, size.height) ];
           [self.view addSubview:view];
           
           [card renderView:view];
       });
   }

4. Build & Run.

   • If compilation and execution are successful, the Xcode command line may report an RPC request exception. For details, please refer to RPC request exception.

Effect preview.