Mobile Platform as a Service:Quick start

Select baseline.

Cube Card is now supported in the primary baseline 10.2.3. Please select the appropriate component addition method based on your integration method.

• Use mPaaS Xcode Extension

  This method is applicable to integration methods: 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, please ensure that 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

  This method is suitable for integration method: 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. Simply run 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. 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. 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.

   • Please select "Create an additional project source code folder". This will create an additional folder named after the application. If you select "Do not", the project will be initialized directly 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 construction. The constructed product will be in the /dist/ folder of your project.

   

Release the card.

1. Go to the Ant Cube Card platform.

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.

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 key "iosImage", and will then obtain the value corresponding to 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 after card creation needs to conform to the CCardCallback delegate protocol and implement the onLoaded:cardType:config:erroCode protocol 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.