Forem: Josh

Implementing a Countdown Element in a Quick App

Josh — Sun, 10 Apr 2022 22:14:36 +0000

What Is a Countdown Element

The countdown element is used to display the remaining time for a promotion activity and will send a notification when such time ends. This element supports:

Time setting by day, hour, minute, and second
Configuration of text, border, and delimiter styles
Time delay
Callback event for countdown ending

As shown in the following figure, the layout of the element consists of numbers and delimiters. Generally, the numbers indicate the remaining time by day, hour, minute, and second. The delimiters are used to separate numbers. Common delimiters can be words (day, hour, minute, and second) and colon (:).

<import name="countdown" src="../Countdown/countdown"></import>
<template>
  <div class="container">
    <text>General usage</text>
    <div class="example-body">
      <countdown class="countdown" day="{{this.day}}" hour="{{this.hour}}" minute="{{this.minute}}" second="{{this.second}}" splitor-color="#007AFF" border-width="{{3}}" border-style="dotted" border-color="#007AFF"></countdown>
    </div>
  </div>
</template>

Implementation Steps

Customizing Subelements

The countdown UI can be used universally, while the layout of its content may vary and therefore cannot be hardcoded. Otherwise, once any part of the content UI is changed, the subelements will also need to be modified, which violates the principle of open-source programming.

Therefore, multiple style attributes are supported in countdown.ux for you to customize the style of subelements.

Designing the Attributes and Supported Event of Subelements

Designing the Overall Layout

The text element is used to design the layout of the delimiters and numbers, as displayed in Figure 1 below.
Define the related attributes in props of the subelements and pass the values when the parent element references the subelements. Call this.$watch(‘day’, ‘changeFlag’) to listen to the changes of the values and then update and process the values in the subelements, as displayed in Figure 2 below.
Implement the countdown algorithm. You need to convert days, hours, and minutes to seconds, set the timer to decrease by 1 every second, and reconvert the seconds back into days, hours, minutes, and seconds accordingly, as shown in Figure 3 and 4 below.

Figure 1

Figure 2a

Figure 2b

Figure 3

Figure 4

Define the timeup callback event in the parent element, and implement and bind the event, as displayed in Figure 5.
Trigger the timeup event of the parent element in the subelements, as displayed in Figure 6.

Figure 5a

Figure 5b

Figure 6

Summary

In this tutorial, you have learned how to:

Design subelements, including their attributes and supported events.
Implement data communication between the parent element and subelements.
Convert days, hours, minutes, and seconds, and set a timer.
Configure the style of the element.

Reference

Quick app official document

Customizing a Drawer Element in a Quick App

Josh — Fri, 01 Apr 2022 20:47:30 +0000

About the Drawer Element

The drawer element is a special pop-up panel that can create the effect of opening and closing a drawer in an app. This element has the following features:

It can be displayed on either side of the screen.
Its width can be customized.
It has a mask layer that a user can tap to close the drawer.
It can be opened by swiping on the screen.

The drawer element consists of two parts: controls and content. In most cases, controls is a clickable element, such as button or icon that can be seen as real handles, whereas content refers to what is inside the drawer. You can expand or collapse content by tapping controls. Therefore, when the drawer element is used, the page layout can be designed as follows:

<div class=“page">
    <div class=“controls">
      <image></image>
     </div>
    <stack class=“drawer_container”>
        <div class=“page_content”>
           …
        </div>
         <drawer class="drawer">
            <div class=“content”>
             …
             </div>
          </drawer >
    </stack>
 </div>

Development Procedure

The drawer element is an extended capability that you cannot implement using the existing elements of quick apps. It requires custom elements.

Customizing the Subelements

Unlike the drawer’s appearance, which can be universally used, the layout of the drawer’s content may vary and therefore cannot be hardcoded. Otherwise, once any part of the content UI is changed, the subelements need to be modified, which violates the open-closed principle of programming.
Therefore, in the drawer.ux file, the slot element is used to bear the content defined in the parent element, and the drawer element is used to define the content’s layout. The code is as follows:

Customizing the Attributes and Supported Events of Subelements

Supported attributes

Supported event

Designing the Opening and Closing Animation of the Drawer

Set display to none to hide the drawer by default.
Control the opening and closing animation of the drawer by changing the X coordinate. When opened, the drawer moves to the visible area, and when closed, it moves off the screen. The animation effect is smooth regardless of whether the drawer is opened or closed.
Control the displayed position of the drawer through flex-direction of the div element. To display the drawer on the left or right, set the value to row or row-reverse accordingly.

Figure 1: Style for opening and closing the drawer on the left

Figure 2: Style for opening and closing the drawer on the right

Figure 3: Code for opening and closing the drawer on the left

Figure 4: Code for opening and closing the drawer on the right

Designing the Mask Layer

The mask layer is hidden by default, which means the value of display is none. The mask layer is displayed when the drawer is opened and hidden when the drawer is closed.

Implementing Data Communication Between the Parent Element and Subelements

The parent element transfers events of opening and closing the drawer to subelements through parentVm.$broadcast(). The subelements listen to events and parameters through $on().
The subelements listen to how mode changes through $watch() to modify the CSS style, displaying the drawer in the correct position.
The subelements notify the parent element through the drawerchange event and returned parameters.

Opening the Drawer by Swiping

By listening to the touchstart and touchend events, you can swipe on the edge of the screen to open the drawer.

Summary

In this article, you will learn how to:

Customize subelements, including their attributes and supported events.
Implement data communication between the parent element and subelements.
Design the opening and closing animation.
Design the mask layer.

You can check related documents to learn even more.

Sample code — drawer.ux

Generating and Uploading an iOS Symbol File Using Crash

Josh — Sat, 12 Mar 2022 21:53:05 +0000

With the Crash service, you can symbolicate a crash report based on the iOS symbol file to obtain a readable report, when classes, fields, and methods in code are overridden with unreadable code during compilation. This article describes how to generate and upload an iOS symbol file.

Automatically Uploading the iOS Symbol File

1) Download the script used for automatically uploading the iOS symbol file.

2) Build the script in Xcode.

a) Double-click the Xcode project and click New Run Script Phase under Build Phases for the target.

b) Open dsymUploader.sh in the script package, copy all content, and paste it to Run Script Phase.

c) Enter your project information in the run script.
Find the following parameters and their values in the configuration file: <your_app_id>: app ID; <your_client_id>: client ID of your project; <your_agcgw_url>: URL of AppGallery Connect; <your_collector_url>: URL of HUAWEI Analytics; <your_client_secret>: client secret of your project, which can be obtained under Project settings > General information in AppGallery Connect.
d) By default, the symbol file is not uploaded in debug mode or when compiled using a simulator. To modify this, set the values of the following parameters to 1:
UPLOAD_DEBUG_SYMBOLS=1
UPLOAD_SIMULATOR_SYMBOLS=1

3) The symbol file is then automatically uploaded to AppGallery Connect each time the Xcode project is compiled. The log information is as follows:

Manually Uploading the iOS Symbol File

1) First, locate the dSYM file. Go to Products in Xcode, right-click xxx.app, choose Show in Finder, and locate the generated xxx.app.dSYM file.

2) Right-click the xxx.app.dSYM file and choose Show Package Contents. In the Contents/Resources/DWARF/ directory, find the file with the same name as your app, and compress the file into a ZIP package. Then sign in to AppGallery Connect, click My projects, click your project card, and select your app. Go to Quality > Crash > Mapping file > iOS symbol files, and click Upload file.

3) You can click View upload records to view upload records or delete a specific file.

APM for iOS Apps

Josh — Thu, 10 Mar 2022 10:16:05 +0000

Introduction

Overview

App Performance Management (APM) provides minute-level app performance monitoring capabilities. You can view and analyze app performance data that APM collects, to gain a clear understanding of real-time online app performance, helping you quickly and accurately rectify app performance problems and enhance user experience.

What You Will Create

In this codelab, you will build an app that integrates APM, manually trigger a network request to test the APM service, and learn how to view and analyze app performance problems with APM.
During app development and debugging, you may need to disable APM performance monitoring, which can be done (or re-enabled) by Remote Configuration. Moreover, the APM SDK provides a performance collection API allowing users to determine whether they can enable the APM performance monitoring function in the app.

What You Will Learn

In this codelab, you will learn how to:

Integrate APM into your app.
View and analyze app performance data on the APM page in AppGallery Connect.
Enable and disable APM performance monitoring.

What You Will Need

Development Environment Requirements

Mac with Xcode 10.1 or later installed
CocoaPods 1.4.0 or later installed
A HUAWEI ID, whose identity has been verified

Device Requirements

An iPhone or a simulator for testing

Integration Preparations

Before integrating APM, you must complete the following:

Create a project in AppGallery Connect.
Add an app to your project.
Create an Xcode project.
Integrate the SDK into your Xcode project.

Note: You need to register as a developer to complete the operations above.

Configuring the Development Environment

Enabling HUAWEI Analytics

The APM service uses HUAWEI Analytics to report performance management events. Therefore, you must enable HUAWEI Analytics before integrating the APM SDK.

Integrating the Service SDK

If you are using Xcode, you need to integrate the APM SDK into your Xcode project with CocoaPods.

1) Add the configuration file in AppGallery Connect to your Xcode project.

Sign in to AppGallery Connect and click My projects.
Click your project card and select an app to be integrated from the app drop-down list on the top.
Go to Project settings > General information and download agconnect-services.plist under App information.
Copy the agconnect-services.plist file to your app's root directory.

2) Create a Podfile.

Open the CLI and navigate to the location of the Xcode project. Then, create a Podfile. Skip this step if a Podfile already exists.

cd project-directory
pod init

3) Edit the Podfile.

Integrate the Analytics SDK, APM SDK, and Remote Configuration SDK. Edit the Podfile to add pod dependencies of the Analytics SDK, AppGallery Connect SDK, APM SDK, and Remote Configuration SDK.

target 'apmIOSDemo' do
   pod 'AGConnectCore'
    pod 'AGConnectRemoteConfig'
    pod 'HiAnalytics', '~> 5.0.4.23'
    pod 'AGConnectAPM'
end

Install the pod and open the .xcworkspace file to view the project.

pod install

Designing the UI

You can create a page in your Xcode project and design the UI according to the following figure. Only three buttons are needed: one for initiating a network request, one for disabling APM, and the last one for enabling APM.

Reporting Network Events

You can manually add a time-consuming cyclic log recording operation to trigger a network request, and check whether the launch duration and network performance indicators on the APM page are normal. App launch and screen events are automatically reported when the app is launched. The procedure is as follows:

1) Initialize the AppGallery Connect SDK, import the header file to the AppDelegate.m file of the project, and add the initialization code. Add a time-consuming cyclic log recording operation, and change the number of cycles while monitoring changes to the launch duration.

#import "AppDelegate.h"
#import <AGConnectCore/AGConnectCore.h>
@implementation AppDelegate
- (BOOL)Application:(UIApplication *)Application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override the code for customization after the app launch.
[AGCInstance startup];// Initialization.
long sum = 0;
for (int i = 0; i < 9999; i++) {
sum = sum + i;
NSLog(@"sum=%ld",sum);
}
return YES;
}
…
@end

2) Create a Send Network Request test button in ViewController in your app. You can tap the button to call sendNetworkRequest to trigger a network request event.

#import "ViewController.h"
#import "AGConnectAPM/AGConnectAPM.H"
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UIButton* sendNetworkRequestBtn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
sendNetworkRequestBtn.frame = CGRectMake(80, 100, 200, 40);
[sendNetworkRequestBtn setTitle:@"Send Network Request" forState:UIControlStateNormal];
[sendNetworkRequestBtn addTarget:self action:@selector(sendNetworkRequest) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:sendNetworkRequestBtn];
}
- (void)sendNetworkRequest {
NSURL *url = [NSURL URLWithString:@"https://developer.huawei.com/consumer/cn/"];
NSURLSession *session = [NSURLSession sharedSession];
NSURLSessionDataTask *task = [session dataTaskWithURL:url completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) {
NSString* str = [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
NSLog(@"result: %@", str);
}];
[task resume];
}
…
@end

Enabling/Disabling Performance Data Collection

1) Create an APM Collection Off test button in ViewController in your app. You can tap the button to call the enableCollection method to disable APM.

#import "ViewController.h"
#import "AGConnectAPM/AGConnectAPM.H"
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UIButton* disableBtn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
disableBtn.frame = CGRectMake(80, 150, 200, 40);
[disableBtn setTitle:@"APM Collection Off" forState:UIControlStateNormal];
[disableBtn addTarget:self action:@selector(disableCollection) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:disableBtn];
}
- (void)disableCollection {
[[AGCAPM sharedInstance] enableCollection:NO];// Disable APM.
}
…
@end

2) Create an APM Collection On test button in ViewController in your app. You can tap the button to call the enableCollection method to enable APM.

- (void)enableCollection {
[[AGCAPM sharedInstance] enableCollection:YES];// Enable APM.
}

Viewing and Analyzing App Performance Data

1) Sign in to AppGallery Connect and click My projects.

2) Click your project card and select your app from the app drop-down list at the top.

3) Go to Quality > APM. Click Overview. The overview presents indicators including the launch duration (by version), slow frame rate (top 5 view controllers), frozen frame rate (top 5 view controllers), network request duration (top 5 countries/regions), and network request success rate (trend over time).

4) Go to App analysis > App launch duration.

5) Click View details to bring up the app launch duration details page.

6) (Optional) Select Modify threshold, set the threshold, and then click Ok.

7) Go to App analysis > Native page rendering to view details about the page freezing information (corresponding to ViewController), and then make optimizations accordingly.

Disabling APM

1) Method 1: You can disable APM for a released app on the cloud. On the App performance management page, click the Configuration tab and find Overall switch. Then, disable the switch.

2) Method 2: You can disable the performance data reporting function for some versions. On the App performance management page, click the Configuration tab and find Version blocklist settings. Click Add to add the disabled version number to the list.

3) Method 3: If your app allows users to enable or disable performance monitoring, use the method provided by the APM SDK. Call getInstance for initialization and call enableCollection to enable or disable performance monitoring. Performance monitoring in apps will be disabled where applicable. If users disable performance monitoring in apps, APM will not collect performance data even if the performance monitoring function is enabled through Remote Configuration in AppGallery Connect.

Congratulations

Well done. You have successfully created an app with APM integrated, and learned how to view and analyze app performance data. You can also disable or enable APM as needed.

References

API reference
Sample code

Creating a Remote Configuration Experiment Using A/B Testing

Josh — Fri, 04 Mar 2022 09:56:40 +0000

A/B Testing allows you to run notifications experiments or Remote Configuration experiments, create A/B tests that engage with different audiences to compare your variants, and measure the aspects of your business that matter most to you, so that you can make informed decisions at all time.

Let’s take a look at how this process works in practice.

1. Integrating the Remote Configuration SDK and Setting the Default Parameter Value

a) Configure the Maven repository address in the project-level build.gradle file.

buildscript {
    repositories {
        maven { url 'https://developer.huawei.com/repo/'}
    }
    dependencies {
        classpath 'com.huawei.agconnect:agcp:1.5.2.300'
    }
}
allprojects {
    repositories {
        maven { url 'https://developer.huawei.com/repo/'}
    }
}

b) Add the AppGallery Connect plugin and the JSON configuration file.
Add the AppGallery Connect plugin to the app-level build.gradle file.

apply plugin: 'com.huawei.agconnect'

Sign in to AppGallery Connect, click My projects, click your project card, and go to Project settings > General information. Download the JSON configuration file and add it to the app directory of your project.

C) Add the SDK dependency to the app-level build.gradle file.

dependencies {
implementation 'com.huawei.agconnect:agconnect-remoteconfig:1.5.2.300'
implementation 'com.huawei.hms:hianalytics:5.3.1.300'
}

d) Set the default parameter value.
You can create a button for obtaining the updated parameter value from Remote Configuration.

Configure the default parameter value in the button, and apply the fetch method to obtain the updated parameter value from Remote Configuration. Set the following code:

@Override
protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 HiAnalyticsTools.enableLog();
 HiAnalyticsInstance instance = HiAnalytics.getInstance(this);
 getAAID();
 findViewById(R.id.button).setOnClickListener(view -> {
  getRemoteCongfig();
 });

}
public void getRemoteCongfig() {
 // Obtain the Remote Configuration instance.
 config = AGConnectConfig.getInstance();
 Map<String, Object> defaultValue = new HashMap<>();
 // Add a key-value pair.
 defaultValue.put("welcome_string", "this is a default welcome_slogan");
 config.applyDefault(defaultValue);

 config.fetch(10).addOnSuccessListener(configValues -> {
  config.apply(configValues);
  String newSlogan = config.getValueAsString("welcome_string");
  Log.i(TAG, "RemoteConfig Success: " + newSlogan);
 }).addOnFailureListener(e1 ->
   Log.e(TAG, "getRemoteConfig failed: " + e1.getMessage())
 );
}

2. Integrating Analytics Kit

To generate reports for A/B tests, HUAWEI Analytics will need to be enabled, since it automatically captures A/B Testing events.

a) Add the SDK dependency to the app-level build.gradle file.

dependencies {
implementation 'com.huawei.hms:hianalytics:5.3.1.300'
}

b) Initialize HUAWEI Analytics in onCreate.

HiAnalyticsTools.enableLog();
HiAnalyticsInstance instance = HiAnalytics.getInstance(this);

3. Setting the Parameter Value in Remote Configuration

Sign in to AppGallery Connect, click My projects, click the project card, and select your app. Go to Grow > Remote Configuration, and click New parameter.

Note: Make sure that the parameter name is the same as that of the default parameter.

Save the parameter settings and click Release.

4. Creating a Remote Configuration Experiment

In AppGallery Connect, click My projects, click the project card, and select your app. Go to Grow > A/B Testing. On the A/B Testing page, select Remote configuration from the New experiment drop-down list.

Configure a higher user percentage for Target users, and skip Activation event.

Set Conditions to Language, and select the languages as needed.

Configure Parameter for Treatment & control groups as follows.

Set Indicators to track, for example, to Click-through rate. Click Save to save all configurations.

5. Starting Your Experiment and Fetching the Parameter Value from Remote Configuration

a) Click Start under the Operation column of the record to run the experiment in AppGallery Connect.

b) Run your app, and click the button to fetch the parameter value from Remote Configuration.
The log is as follows:

Pay attention to the following:

You can click Test under the Operation column of the experiment record. The anonymous application identifier (AAID) of the test device can be obtained as follows:

public void getAAID() {
 Task<AAIDResult> idResult = HmsInstanceId.getInstance(this).getAAID();
 idResult.addOnSuccessListener(new OnSuccessListener<AAIDResult>() {
  @Override
  public void onSuccess(AAIDResult aaidResult) {
   // Obtained the AAID successfully.
   String aaid = aaidResult.getId();
   Log.d(TAG, "getAAID successfully, aaid is " + aaid );
  }
 }).addOnFailureListener(new OnFailureListener() {
  @Override
  public void onFailure(Exception myException) {
   // Failed to obtain the AAID.
   Log.d(TAG, "getAAID failed, catch exceptio : " + myException);
  }
 });
}

6. Viewing the Experiment Report

Click View report under the Operation column of a record to view the details for the experiment.

References