After HDC in 2022, “Hongmeng World” has attracted wide attention. As a pioneer of Hongmeng practitioners, in order to help the increasingly prosperous HarmonyOS application novice developers quickly experience and get started with HarmonyOS application and meta-service development, I wrote this hand-in-hand development teaching guide .
This article mainly includes three aspects. The first part is Software Development Classification and Meta-Service, the second part is Meta-Service Application Scenario, and the third part is Getting Started Quickly Universal card development experience.
You can also watch the universal card-related video courses I launched in the HUAWEI Developer Alliance Academy simultaneously. Click this link to compare and refer to this document to make it easier to digest the content.
1. Software development classification and meta-service
(1) Brief analysis of software classification development
The software is generally divided into two categories: system software and application software. See the following table for the relationship and development of users, equipment, operating system system software, traffic entry, application form and application software—-
From the analysis in the table, it can be seen that from the Internet era to the development dominated by the mobile Internet, the main manifestations of application software have also been upgraded from WEB websites and H5 websites to independent clients and super-app-based light application forms such as applets.
In every technology-driven innovation era, both system software and application software are undergoing changes and iterative upgrades. So in the era of the Internet of Things and intelligence, the number and types of connected devices are increasing. What are the characteristics and manifestations of applications?
We believe that meta-services and universal cards represent one of the new directions for the development of HarmonyOS applications.
(2) Universal Card Concept and Advantages
The meta-service is developed based on the HarmonyOS API, adhering to the HarmonyOS system’s three major application and service development concepts of one-time development and multi-terminal deployment, splittable and combined free flow, and unified ecological native intelligence. It supports running on 1 + 8 + N devices for users to It is easy to use on the right scene and the right device, and you can get the consistent service experience of the super terminal.
The universal card is to display the key and important information of the meta-service in the form of a card, realize direct service and multi-device adaptation, and provide intuitive content for users. Universal cards include micro, small, medium and large cards, as shown in the picture below—-
Image source: Jiaolong Tengfei
For users, meta-service is an active attempt for the new era, in the form of lightweight, installation-free, and cross-device such as cards, voice, icons, etc., through rich, accurate, and intelligent The distribution method reaches the appropriate scene, which has greatly changed the way users obtain services, from the traditional “people looking for applications” to “services looking for people”, effectively meeting the service needs of users in different scenarios.
For developers, the HarmonyOS system provides a wealth of components, interfaces, and traffic portals; meta-services only need to be developed and put on the shelf once, and can be deployed on various HarmonyOS terminals and distributed through multiple channels. The development cost is greatly reduced. At the same time, based on the resident desktop card entry and richer scene recommendations, it can bring more natural traffic to developers, thereby reducing post-operation costs.
2. Meta-service application scenarios
(1) Device control service
Meta-services can be directly combined with a variety of devices to provide users with experiences such as extremely fast distribution network, card interaction, direct service, and brand-new device interaction for cross-device transfer. The specific implementation process is as follows —-
Image source: HarmonyOS official website
At the 2022HDC conference, Huawei demonstrated meta-service application cases for scenic spot tours, hotel check-in, and retail shopping scenarios; it realized convenient, comfortable, and closed-loop user services, and comprehensively improved the information, digital, and intelligent service levels of businesses. There are still more innovations and better user experience in the scenarios of smart home, smart travel, sports and health, smart office, audio-visual entertainment, education and care, etc., waiting for manufacturers and developers to explore and practice meta-services.
(2) Connecting to traditional application methods and innovative development of native light applications
It is an active attempt to connect meta-services to traditional applications. It plays the role of basic quantity and basic experience, and can effectively promote the development of the early ecology and meet the basic needs of users.
The development, innovation and operation of the pure native light application form of the universal card based on meta-services is a way that we believe has great development prospects and can enjoy various dividends. Mainstream websites, H5, APP, etc. will all have their new forms of expression in the universal card. In addition, there will be many new and innovative meta-services that are not based on traditional applications, and will be born and developed.
We can observe from the HarmonyOS mobile phone service center and the universal card displayed on the negative screen that domestic traditional application upgrades and brand-new meta-service innovations are actively trying, and everyone is actively exploring and seizing the smart new world based on the HarmonyOS Internet of Everything. The meta-service and the “ship ticket” of the new application form of universal card.
3. Quickly get started with a universal card development experience
After reading the above content, do you want to experience the development of universal cards as soon as possible? For developers, we have prepared quick-start pure application-type universal card case exercises, the details are as follows–
(1) Prerequisites
- Developers should have entry-level and above foundations of JS and front-end development languages;
- Registered and verified HUAWEI account;
- HUAWEI DevEco Studio has been installed on the development device.
This case uses HUAWEI DevEco Studio 3.0.0.800, API4-API7 can be experienced, due to IDE version and API upgrades and compatibility issues, you may encounter some differences in details when practicing, but the overall process is consistent.
(2) Create a project
1. Create an engineering project
Open DevEco Studio and select your Ability template. Here we choose the Empty Ability template, and click Next to proceed to the next step. As shown in Figure 1.
figure 1
2. Configuration project
Configure the project project, as shown in Figure 2 and Figure 3, and click Finish to create.
figure 2
image 3
(3) Create a card
1. Find the js file under src->main in the entry, right-click and select the Service Widget option in new, as shown in Figure 4.
Figure 4
2. Select the immersive Data card template, as shown in Figure 5, and click Next to proceed to the next step.
Figure 5
3. Configure the card template information, as shown in Figure 6, and then click Finish to create.
Figure 6
(4) Modify the code
1. View the card just created under js, as shown in Figure 7.
Figure 7
Open the index.hml file under this file and modify the code.
<!-- Wrap the node div component with a stack component -->
<stack style="background-color: #f5d354;width: 100%;height: 100%;" onclick="routerEvent">
<!-- Picture on the right (add this code) -->
<div class="right-img">
<image class="images" src="/common/ic_default_image.png" alt="img"></image>
</div>
<!-- Title information -->
<div class="container">
<div class="title_wrapper">
<text class="title_big">
{<!-- -->{ $t('strings. title_big') }}
</text>
<text class="title_small">
{<!-- -->{ $t('strings. title_small') }}
</text>
</div>
<!-- Text information (modify the text information, followed by number marks 1, 2, 3) -->
<div class="list_wrapper">
<div class="item_first">
<image class="item_image" src='/common/ic_default.png'></image>
<text class="item_text" onclick="routerEvent">{<!-- -->{ $t('strings.text') }}</text>
</div>
<div class="item">
<image class="item_image" src='/common/ic_default.png'></image>
<text class="item_text" onclick="routerEvent">{<!-- -->{ $t('strings.text1') }}</text>
</div>
<div class="item">
<image class="item_image" src='/common/ic_default.png'></image>
<text class="item_text" onclick="routerEvent">{<!-- -->{ $t('strings.text2') }}</text>
</div>
<div class="item">
<image class="item_image" src='/common/ic_default.png'></image>
<text class="item_text" onclick="routerEvent">{<!-- -->{ $t('strings.text3') }}</text>
</div>
<div class="item_last">
<image class="item_image" src='/common/ic_default.png'></image>
<text class="item_text" onclick="routerEvent">{<!-- -->{ $t('strings.text4') }}</text>
</div>
</div>
</div>
</stack>
Open the index.css file under this file and modify the code (find the corresponding modified part).
.container {
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
/* comment code */
/* background-color: dodgerblue;*/
/* background-image: url('/common/[email protected]');*/
/* background-repeat: no-repeat;*/
/* background-size: cover;*/
}
/*Add .right-img style*/
.right-img{
width: 40px;
height: 40px;
position: absolute;
right: 10px;
top: 10px;
border-radius: 12px;
}
/*Change font-size: 19px; in .title_big to 16px*/
.title_big {
font-size: 16px;
font-weight: bold;
color: white;
}
/*adapt to wearable*/
[url=home.php?mod=space &uid=205723]@MEDIA[/url] (device-type: wearable) {
.right-img{
display: none;
}
}
Open the i18n file under this file, open the .json file, and modify the code.
zh_CN.json:
{
"strings": {
"title_big": "Title",
"title_small": "Here is the subtitle",
"text": "Text",
"text1": "Text1",
"text2": "Text 2",
"text3": "Text 3",
"text4": "Text 4"
}
}
en_US.json:
{
"strings": {
"title_big": "Title",
"title_small": "Text",
"text": "Text",
"text1": "Text1",
"text2": "Text2",
"text3": "Text3",
"text4": "Text4"
}
}
2. Open the default file under js and open the pages file.
Modify the code:
index.hml
<div class="container">
<text class="title">Hi, welcome to</text>
<text class="title">{<!-- -->{title1}}</text>
<text class="title">{<!-- -->{title2}}</text>
</div>
index.css
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.title {
font-size: 30px;
color: #000000;
opacity: 0.9;
margin: 4px 0px;
}
@media screen and (device-type: tablet) and (orientation: landscape) {
.title {
font-size: 100px;
}
}
@media screen and (device-type: wearable) {
.title {
font-size: 28px;
color: #FFFFFF;
}
}
@media screen and (device-type: tv) {
.container {
background-image: url("/common/images/Wallpaper.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.title {
font-size: 100px;
color: #FFFFFF;
}
}
@media screen and (device-type: phone) and (orientation: landscape) {
.title {
font-size: 60px;
}
}
index.js
export default {
data: {
title1: "Meta Service",
title2: "New application era and new world!"
},
onInit() {}
}
(5) Operation effect
1. Open the simulator, as shown in Figure 9
Figure 9
2. Log in, as shown in Figure 10
Figure 10
It will automatically log out of the Huawei Developer Alliance account, enter the account password to log in, and log in successfully, then return to DevEco Studio.
3. Select the P40 device in the emulator to open it. Click the small triangle to run the project, as shown in Figure 11; after successful operation, an initialization page will appear, as shown in Figure 12; click the home button in the emulator to return to the desktop, and then slide diagonally upward from the lower left or right corner of the phone screen to enter the service center, as shown in Figure 13.
Figure 11
Figure 12
Figure 13
4. After entering the service center, you can see the created card (this is the card widget that the project created and initialized itself), as shown in Figure 14; tap the card to add it to the desktop, as shown in Figure 15; the card is successfully added to the desktop, as shown in Figure 16 .
Figure 14
Figure 15
Figure 16
5. Long press the desktop card, a pop-up window will appear, click More universal cards, select the newly created card we created before, and add it to the desktop, as shown in Figure 17, Figure 18, and Figure 19.
Figure 17
Figure 18
Figure 19
Click on the newly added card to the desktop to return to the “Hello, welcome to the new era and world of meta-service applications!” page. If you want to display the effects of other emulators here, just repeat the above steps to open the emulator. This case supports the display of the effects of Phone, Tablet, and Wearable cards.