This article is from blog.alpaca.run

1. Introduction

In fact, Hong Kong 2.0 was released in September this year, but only for watches and TVS at that time, not mobile phones.

At that time, I also wrote about experiencing the development of the Hongmeng TV application in Nuggets, which can be seen by clicking on 👇 below:

Hongmeng 2.0 release, let me give you the whole live

Now that I can develop for mobile, I went to the HUAWEI HarmonyOS Developer website and downloaded the latest HUAWEI DevEco Studio

Create a project, you can see the option of mobile development 👇👇


Before, in order to upset the Serverless of Ali Cloud, I did a small project on the Internet of Things, and named it Alpaca IOT

It simply means hooking up my raspberry PI at home and my raspberry PI at work with DHT11 temperature sensors

Then upload the collected temperature and humidity data to ali Cloud Serverless application written by myself

After a front-end page, I wrote ali cloud serverless application to read the temperature and humidity data, display down.

Then deploy the page to the server, which is the link below 👇👇

Alpaca IOT

The website is shown below

So my current job is to transplant my front-end web business to Hongmeng APP

2. Create a project

Select your mobile development project, and the list of projects will appear.

Of course, the first thing I did was not write code, but to get a virtual machine running Hongmeng (the same process as Android Studio) so that my code would have a place to run

And bam, a virtual phone running Hongmeng OS is up and running.

In fact, this thing is not really running on my local Hongmeng VIRTUAL machine, but a remote desktop, so the code that will be written is probably running on a remote Huawei machine, and then back in the form of a remote desktop

So the experience is a little bad, because the remote transmission of the picture is very sticky, the operation of the card (not the system card, but the remote desktop network is not good, there is a delay)

Ok, now that the virtual machine is running, execute the project code directly, and a Hello World appears, indicating success.

Because I’m just a humble front-end 🐔, and Hongmeng and support JS development, so I use JS development, and then by the way also compare the development process and the difference between the front-end, and then click into the source OF the JS folder, to achieve this Hello world is actually by the three mountains (HML, CSS, JS)

Their initial code looks like this:

  • HML: A variant of HTML syntax, roughly the same as HTML, but with a few differences
<! - index.hml --><div class="container">
    <text class="title">
        {{ $t('strings.hello') }} {{title}}
    </text>
</div>
Copy the code


  • JavaScript: Standard ECMA, which means that js runs a little differently from the browser (for example, some apis may not work directly)
// index.js
export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = this.$t('strings.world'); }}Copy the code


/* index.css */
.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title {
    font-size: 100px;
}

Copy the code

Look at the pattern and small program similar, basically is H5 + JS + CSS, in general and front-end development of the difference is not big, but also go MVVM data driven view that mode, is the API and some details are not the same, basically can be said to be able to use Vue.

So at first I just copied and pasted without looking at the document to see if I could transplant it painlessly.

It turns out that no, as far as I can see, compared to the front-end web, there are some differences

  • hml
    1. The layout is just Flex and Grid (default Flex), so the default front-end HTML traditional document flow breaks down here (div tags don’t break lines, they break lines by setting flex properties)
    2. Text content should be used<text>The tag is wrapped, and the text is not displayed without it

  • js
    1. The js runtime does not support async/await.
    2. It seems that some apis cannot be used directly, for examplefetchLater, I looked at the development documentation and wanted to make network requests from@system.fetchFetch can only fetch data by callback

  • css
    1. It’s pretty much the same, but as FAR as I’m concerned maybe the CSS rules are a little bit stricter here, so if I want to set the background color and I want to do background I can’t, I have to do background-color

So I went over the development document, basically the same as the small program, the overall shelf remains the same, only a small number of differences, according to the document to modify to transplant the front-end business.

3. Start the migration

I’m going to show you what my front-end code looks like (you might think my HTML syntax is weird, because I’m basing this page on ef.js).

 <! DOCTYPEhtml>
<html>
    <header>
        <title>Alpaca IOT</title>
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, the minimum - scale = 1.0, user - scalable = 0" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <style>
            body { 
                background-color: black;
                color: white;
            }

            #app {
                height: 95vh;
                display: -webkit-flex; /* Safari */
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                align-content: center;
            }

            #app .auther {
                position: fixed;
                bottom: 40px;
                font-size: 16px;
                cursor: pointer;
            }

            #app .auther a {
                text-decoration:none;
                color: white
            }

            #app .auther a:hover {
                text-decoration:solid;
                color: #f90;
            }

            #app .time {
                position: fixed;
                bottom: 15px;
                font-size: 16px;
            }

            #app .content{
                width: 350px;
                text-align: center;
                padding: 5px;
                margin: 25px 20px;
                background: #f90;
                border-radius: 8px;
                color: black;
            }

            #app .title {
                font-size: 30px;
                margin-bottom: 10px;
            }

            #app .data-box {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-around;
            }

            #app .data-box .text{
                font-size: 24px;
            }

            #app .data-box .num{
                font-size: 30px;
            }

        </style>
    </header>
    <body>
        <div id="app"></div>
        <script src="https://alpaca.cdn.bcebos.com/js/ef.js"></script>
        <script>
            const { t } = ef;
            // Create an EF object
            const app = new t'>div.content >div.title. Home real-time temperature and humidity >div.data-box >div > sp.text. Temperature: > sp.num.{{home_temperature}} > sp.symbol.°C >div > sp.text. {{home_humidity}} > sp.symbol.% >div. Content >div. Title. Real-time temperature and humidity >div. Data-box >div >span. Text Num.{{comp_temperature}} > SP.symbol.°C >div > sp.text. Humidity:  >span.num .{{comp_humidity}} >span.symbol .% >div.auther >a #href = https://github.com/AlpacaBi #target="_blank" .@Alpaca Bi >div.time . Last updated: {{time}} '
            // Alicloud Serverless interface
            const url = "https://1055462284844024.cn-shenzhen.fc.aliyuncs.com/2016-08-15/proxy/alpaca-iot/alpaca-temp/getData"
            // Assign data from the interface to the data layer of the EF object
            const updateData = async() = > {let res = await fetch(url)
                let resData = await res.json()
                app.$data = {
                    home_temperature: resData.home.temperature,
                    home_humidity: resData.home.humidity,
                    comp_temperature: resData.comp.temperature,
                    comp_humidity: resData.comp.humidity,
                    time: (new Date()).toLocaleString()
                }
            }
            updateData()
            // Mount the EF object to the DOM tree
            app.$mount({target: document.getElementById('app')})
            // Update data every 15 seconds
            setInterval("updateData()".60000);
        </script>
    </body>
</html>
Copy the code

After a few hicks, I only changed these 3 files, and there it is. The modified code is as follows (you can see the difference with the normal front-end).

  • index.hml
<! - index.hml --><div class="container">
    <div class="content">
        <div class="title">
            <text class="text">Real-time home temperature and humidity</text>
        </div>
        <div class="data-box">
            <div>
                <text class="text">Temperature:</text>
                <text class="num">{{home_temperature}}</text>
                <text class="symbol">° c.</text>
            </div>
            <div>
                <text class="text">Humidity:</text>
                <text class="num">{{home_humidity}}</text>
                <text class="symbol">%</text>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="title">
            <text class="text">Real-time temperature and humidity of the station</text>
        </div>
        <div class="data-box">
            <div>
                <text class="text">Temperature:</text>
                <text class="num">{{comp_temperature}}</text>
                <text class="symbol">° c.</text>
            </div>
            <div>
                <text class="text">Humidity:</text>
                <text class="num">{{comp_humidity}}</text>
                <text class="symbol">%</text>
            </div>
        </div>
    </div>
</div>
Copy the code


  • index.js
// index.js
import fetch from '@system.fetch';
export default {
    data: {
        home_temperature: 0.home_humidity: 0.comp_temperature: 0.comp_humidity: 0,},onInit() {
        let _this = this
        // AliCloud serverless interface
        const url = "https://1055462284844024.cn-shenzhen.fc.aliyuncs.com/2016-08-15/proxy/alpaca-iot/alpaca-temp/getData"
        // Every 60 seconds to read data to Ali Cloud Serverless and update to the front-end page
        setInterval(function() {
            fetch.fetch({
                url: url,
                success: function(response) {
                    const resData = JSON.parse(response.data)
                    _this.home_temperature = resData.home.temperature
                    _this.home_humidity = resData.home.humidity
                    _this.comp_temperature = resData.comp.temperature
                    _this.comp_humidity = resData.comp.humidity
                },
                fail: function(data, code) {
                    console.log('fail callback')}}); },60 * 1000)}}Copy the code


  • index.css
/* index.css */
.container {
    height: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    background-color: black;
}

.container .content{
    width: 600px;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px;
    margin: 25px 20px;
    background-color: #f90;
    border-radius: 8px;
    color: black;
}

.container .content .title {
    width: 580px;
    margin-bottom: 20px;
}

.container .content .title .text {
    width: 580px;
    text-align: center;
    font-size: 60px;
}

.container .content .data-box {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.container .content .data-box .text{
    font-size: 48px;
}

.container .content .data-box .num{
    font-size: 60px;
}


Copy the code

Then my Hongmeng IOT APP Alpaca IOT ran like this!!

Now that it’s done, the last step is to pack the APP. I won’t say how to pack it, just click a few menus, and finally pack the HAP suffix installation package.

So from now on, I can say that I am an engineer who developed Hongmeng APP!!

Ps. An incident encountered in the development process 👇👇

4. Something hasn’t been done yet

Notice that I have been conducting space operations on remote Huawei devices, even though the APP has been packaged, there is no place to install it.

So the core problem is to run on the real phone is meaningful!!

Fortunately, huawei recruited the Beta version of Huawei Hongmeng OS 2.0 mobile phone developer for the public test yesterday, which supports OTA upgrade of Mate 30 / P40 series.

And I also happen to have a P40PRO, which meets the equipment requirements, so I have also made an application!!

After the application is approved, my mobile phone can be upgraded to Hongmeng System via OTA. Then, I will run the APP I just packed to my mobile phone and update relevant content.

In addition, if someone’s equipment just meets the requirements and is interested in upgrading to Hongmeng OS, click here to apply

5. The last

See here you must hit me, the title hongmeng Internet of Things APP said so lofty, now it seems nothing more than to do a front-end, every 60 seconds back to take data, just a front-end dish 🐔 can do.

This time estimates many big guy to begin to sneer at me: this??

So think about it, even my front-end dish 🐔 can have a kind of APP can also use, and I also think it is not difficult, then those who have Android development experience is not casually can make a bunch of useful applications, so the meaning is here.

Finally, welcome to reprint my article, is to explain the source on the line (source from blog. Alpaca. Run on the line)