您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > 鸿蒙

鸿蒙元服务开发实例:桌面卡片上的电动自行车助手E-Bike

时间:2023-08-16 14:01:17  来源:51CTO  作者:
E-Bike是一款基于HarmonyOS开发的元服务,以万能卡片的形式给骑行提供便捷服务。首先需要完成HarmonyOS开发环境搭建。

一、元服务E-Bike简介

E-Bike是一款基于HarmonyOS开发的元服务,以万能卡片的形式给骑行提供便捷服务,主要功能包括:

  • 车辆状态信息获取:用户可在元服务内连接电动自行车(真机和自行车自备),查看车辆位置、剩余电量、续航里程以及累计骑行里程。
  • 包括响铃找车功能:按钮可触发车辆鸣响,便于快速确认车辆具体位置(真机和自行车自备)。
  • 用户可通过右上角按钮添加2x2或2x4卡片,在桌面可直接查看车辆状态信息。

鸿蒙元服务开发实例:桌面卡片上的电动自行车助手E-Bike-开源基础软件社区

二、环境搭建

首先需要完成HarmonyOS开发环境搭建。E-Bike是元服务,且为端云一体化开发模式,新建工程可可参照如图步骤进行(注意该模式下App为Stage模型)。

鸿蒙元服务开发实例:桌面卡片上的电动自行车助手E-Bike-开源基础软件社区
 

鸿蒙元服务开发实例:桌面卡片上的电动自行车助手E-Bike-开源基础软件社区

软件要求
  • DevEco Studio版本:DevEco Studio 3.1 Release及以上版本。
  • HarmonyOS SDK版本:API version 9及以上版本。
硬件要求
  • 设备类型:华为手机或运行在DevEco Studio上的华为手机设备模拟器。
  • HarmonyOS系统:3.1.0 Developer Release及以上版本。
  • 电动自行车(获取真实车辆数据,车辆为作者自制)
环境搭建

安装DevEco Studio,详情请参考下载和安装软件。

设置DevEco Studio开发环境,DevEco Studio开发环境需要依赖于网络环境,需要连接上网络才能确保工具的正常使用,可以根据如下两种情况来配置开发环境:

  • 如果可以直接访问Inte.NET,只需进行下载HarmonyOS SDK操作。
  • 如果网络不能直接访问Internet,需要通过代理服务器才可以访问,请参考配置开发环境。

开发者可以参考以下链接,完成设备调试的相关配置:使用真机进行调试使用模拟器进行调试

三、代码结构解读

本篇教程只对E-Bike实现的核心代码进行讲解,对于完整代码,会在源码下载或gitee中提供。主要的程序框架如下:

entrysrcmAInets
│ ├─common–通用常量和数据
│ ├─entryability – EntryAbility.ts 程序入口
│ ├─entryformability–EntryFormAbility.ts卡片入口
│ ├─pages—Index.ts 应用主页
│ ├─services
│ ├─widget
│ │ └─pages—2x2 ArkTS卡片
│ └─widget24
│ └─pages—2x4卡片
└─resources —资源文件目录

四、应用主页面UI和功能开发

1、主页面UI

新建工程后,在entrysrcmainetspagesIndex.ts文件中已有一个模板案例,我们需要删除其中的代码,然后构建自己的页面。具体实现方法是:

  • 删除build() { }中的代码。
  • 使用Column、Flex、Row容器和Button、Image、Text组件构建E-Bike布局。
  • 在UI中加入逻辑判断具体要显示的UI组件。如响铃找车的Image组件内容由用户的点击状态决定,点击响铃找车则Image切换为响铃状态,反之亦然。

具体代码实现框架如下:

@Entry @Component struct Index {
    build() { Column({space:10})
    {
        // 背景图
        Image($r("app.media.Ebike"))
            ···
        Flex()
        {
            // 响铃找车
            Column()
            {
                if(this.display_flag==1)
                {
                Image($r("app.media.ic_ring_on_filled"))
                .height("55%")
                .objectFit(ImageFit.Contain)
                .interpolation(ImageInterpolation.High)
                .onClick(() => { this.display_flag +=1; if(this.display_flag>2)
                    {
                    this.display_flag =1;
                    }
                })
            }
            if(this.display_flag==2)
            {
            Image($r("app.media.ic_ring_off_filled"))
            .height("55%")
            .objectFit(ImageFit.Contain)
            .interpolation(ImageInterpolation.High)
            .onClick(() => { this.display_flag+=1; if(this.display_flag>2)
                    {
                    this.display_flag =1;
                    }
                })
            }
            Text("响铃找车")
            ···
        }
        // 获取定位
        Column()
        {
        Image($r("app.media.ic_statusbar_gps"))
        ····
        })
        Text(this.bike_location)
        ····
        }
        ····
        }.width("95%").height("10%")
        // 电量 设置

        Flex({ direction: FlexDirection.Row,justifyContent: FlexAlign.SpaceBetween,})
        {
        // 电量
        Column() { Row()
        {
        Image($r("app.media.ic_power"))
        ···
        // 电量值
        Text(this.bike_power.toString() + '%')
        ···
        }
        Text("剩余电量")
        ···
        }
        ···
        // 设置
        Column() { Image($r("app.media.ic_public_settings_filled"))
        ···
        Text("车辆设置")
        ···
        }···
        }

        // 骑行数据
        Flex({ direction: FlexDirection.Column})
        {
        Row()
        {
        Text(" 累计骑行")
        ··· Blank()
        Text("预计续航 ")
        ···
        }
        }
        }
    }
}

2、主页功能开发

主页主要实现的功能包括:连接车辆、获取需要展示的数据(车辆电量、位置、里程数据等)、将数据持久化便于页面展示。
车辆与E-Bike通过Socket TCP协议方式连接。鉴于此部分依赖硬件,这里主要介绍E-Bike应用层如何开发 Socket通信。实现如下:
Index.ets:

// 1. 首先要引入模块,创建TCPSocket对象
import socket from '@ohos.net.socket'
// 创建一个TCPSocket连接,返回一个TCPSocket对象。
let tcp = socket.constructTCPSocketInstance();
tcpInit() {
    // 2. 绑定IP地址和端口。
    let bindAddress = { address: '192.168.xx.xx',
    port: 1234, // 绑定端口,如1234
    family: 1
    };
    tcp.bind(bindAddress, err => { if (err) {
    console.log('bind fail'); return;
    }
    console.log('bind success');
    }
    // 3.其次是订阅TCPSocket相关的订阅事件,如on message,有数据传入 
    tcp.on('connect', () => {
    this.tcp_status = '连接ok' 
        prompt.showToast({message:this.tcp_status})
    });
    tcp.on('message', value => {
    this.message_recv = this.resolveArrayBuffer(value.message) 
        prompt.showToast({message:this.message_recv})
    });
    tcp.on('close', () => { 
        prompt.showToast({message:"tcp close"})
    });
}
// 4.连接到指定的IP地址和端口。 tcpConnect() {
tcp.getState().then((data) => {
        if (data.isClose) { this.tcpInit()
        }
        // 连接
        tcp.connect(
        {address: { address: this.GetSetIP, port: this.localAddr.port, family: 1}, timeout: 2000}
        ).then(() => {
        	prompt.showToast({message:" tcp connect successful"})
        }).catch((error) => { prompt.showToast({message:"tcp connect failed"})
     })
  })
}
// 5.发送数据 
tcpSend() {
tcp.getState().then((data) => 
  { if (data.isConnected) {
    // 发送消息

    tcp.send(
    { data: this.message_send, }
    ).then(() => {
    prompt.showToast({message:"send message successful"})
    }).catch((error) => { prompt.showToast({message:"send failed"})
    })
    } else {
    prompt.showToast({message:"tcp not connect"})
  }
 })
}
// 6. TCP连接操作界面通过设置按钮控制,点击设置按钮即可弹出,可输入车辆IP地址,确认连接
if(this.show_setting==1)
{
    Flex({ direction: FlexDirection.Row})
    {
        Row()
        {
            Text('车辆IP')
            TextInput({ placeholder: '192.168.43.164'})
            .onChange((value: string) => { this.InputIP = value
            })
            Button('连接').onClick(()=>
            {
           		 this.GetSetIP=this.InputIP; 
                 this.tcpInit()
            })
        }
    }
}

// 7.点击组件,实现发送指令,并获取对应数据,这里以电量为例: 
Image($r("app.media.ic_power"))
        .height("80%")
        .objectFit(ImageFit.Contain)
        .onClick(() => {
        // this.bike_power = 99;
        this.message_send = MSG_CMD.GET_BIKE_POWER this.tcpSend()
        this.bike_power = this.message_recv;
    })
/ 8.连接使用完毕后,主动关闭。取消相关事件的订阅。 
setTimeout(() => {
	tcp.close((err) => { console.log('close socket.')
	});
	tcp.off('message');
	tcp.off('connect');
	tcp.off('close');
}, 30 * 1000);

五、卡片开发

1、卡片UI开发

开发卡片的目的是将自行车的数据展示在桌面上,让用户一目了然。用默认模板创建工程时,自动创建了一张卡片,在form_config.json文件改动配置为自动刷新,支持2x2.

//form_config.json
"colorMode": "auto", "isDefault": true, "updateEnabled": false, "scheduledUpdateTime": "10:30",
"updateDuration": 1,
"defaultDimension": "2*2", "supportDimensions": [
"2*2"
]

为展示电量信息,且布局不同,由此需要创建一张2x4的卡片。操作如下:在main目录下,点击鼠标右键 > New > Service Widget。

然后选择Hello World卡片模板,点击Next。

填写卡片名字(如Widget24Card)、开发语言(ArkTS和JS可选)、支持卡片规格(Support dimension 2x4)、关联表单(Ability name)点击Finish完成创建。修改配置为自动刷新,支持2x4。

创建完卡片后,在ets文件目录下显示卡片目录,然后开发者使用ArkTS开发卡片页面。效果如图所示:

鸿蒙元服务开发实例:桌面卡片上的电动自行车助手E-Bike-开源基础软件社区
为两张卡片开发UI,resource资源共用。使用Flex容器开发卡片,保证不同屏幕大小的显示效果。同时为组件绑定事件,用户可以主动获取数据,具体UI布局代码不再赘述,实现2x2和2x4效果如下

鸿蒙元服务开发实例:桌面卡片上的电动自行车助手E-Bike-开源基础软件社区
 

2、卡片数据刷新

通过message事件刷新卡片内容,在卡片页面中可以通过postCardAction接口触发message事件拉起FormExtensionAbility,然后由FormExtensionAbility刷新卡片内容。下面是这种刷新方式更新电量的简单示例。在卡片页面通过注册电量图标Image组件的onClick点击事件回调,并在回调中调用postCardAction接口触发事件至FormExtensionAbility。

// Widget24Card.ets:
let storage = new LocalStorage();
@Entry(storage) @Component
struct WidgetCard24 {
    ···
    @LocalStorageProp('bike_power') bike_power: number = 50;
    ··· 
    build() {
        Row({space:5}) {
            // 背景图 电量
            Column()
            {
                Row()
                {
                    Image($r("app.media.ic_power"))
                    ···
                    .onClick(() => { postCardAction(this, {
                    'action': 'message',
                    'params': { 'bike_power': 55
                    }
                    });
                    })
                    // 电量值
                Text(`${this.bike_power}`+'%')//this.bike_power.toString()+'%')
                ···
            }
            ···
        }
    }
}

// EntryFormAbility.ets:
import formBindingData from '@ohos.app.form.formBindingData';
import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility'; import formProvider from '@ohos.app.form.formProvider';
export default class EntryFormAbility extends FormExtensionAbility {

find_bike: string = "app.media.ic_ring_off" bike_power: number = 55.6
display_flag : number = 1 
    bike_location: string = "长安街1号" 
    bike_distance: number = 520
	bike_duration: number = 479 
    my_font_size : number = 12

formData = {
    'title': this.find_bike, 'bike_power': this.bike_power, 
    'bike_distance':this.bike_distance, 'bike_duration':this.bike_duration, 
    'bike_location':this.bike_location,
    'detail': 'Detail Update Success.', // 和卡片布局中对应
}

onFormEvent(formId, message) {
        console.info(`FormAbility onEvent, formId = ${formId}, message:
    ${JSON.stringify(message)}`);
    let formInfo = formBindingData.createFormBindingData(formData) 
    formProvider.updateForm(formId, formInfo).then((data) => {
            console.info('FormAbility updateForm success.' + JSON.stringify(data));
        }).catch((error) => {
        console.error('FormAbility updateForm failed: ' + JSON.stringify(error));
        })
    }
    ...
}

实现效果如下图:

鸿蒙元服务开发实例:桌面卡片上的电动自行车助手E-Bike-开源基础软件社区

 

参考链接:元服务官网

想了解更多关于开源的内容,请访问:

51CTO 开源基础软件社区

https://ost.51cto.com



Tags:鸿蒙   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
华为鸿蒙跨过“生死线”!超4000个原生应用、市占率突破16%
华为官方于近日宣布,截至今年三月底,已有超过4000个应用程序加入了鸿蒙生态。这一成就被视作一个重要里程碑。值得注意的是,鸿蒙生态的发展速度惊人,仅在短短两个月的时间里就增...【详细内容】
2024-04-08  Search: 鸿蒙  点击:(4)  评论:(0)  加入收藏
鸿蒙5.0更新名单,手机再也不能安装安卓应用了!你准备好了吗
如果说国产系统中,谁发展的最好,答案毫无疑问:华为鸿蒙系统!最近,华为也很是热闹,从上个月开始,就加大了鸿蒙原生应用的推广力度。在西北、川渝、安徽等关键省份连续举办了“鸿蒙原...【详细内容】
2024-04-03  Search: 鸿蒙  点击:(7)  评论:(0)  加入收藏
华为手机升级至鸿蒙系统:长按2秒激活两个实用功能
华为手机用户迎来鸿蒙系统的更新,一系列新功能和改进正等待着您的探索。在这个全新的操作系统中,有些隐藏的功能需要您通过简单的长按操作来激活。这些功能不仅增强了手机的实...【详细内容】
2024-03-11  Search: 鸿蒙  点击:(3)  评论:(0)  加入收藏
鸿蒙开发岗平均月薪超1.8万,成为计算机人才和程序员的求职新选择!
智联招聘发布的《2024年春招市场行情周报(第一期)》显示,2023年9-12月,鸿蒙相关职位数同比增速从33.8%攀升至216.1%,鸿蒙相关职位的投递人数同比增速从132.1%攀升至380.1%。春节...【详细内容】
2024-02-26  Search: 鸿蒙  点击:(25)  评论:(0)  加入收藏
开源鸿蒙适配芯片到底都做了哪些工作?
随着智能设备市场的不断扩大和技术的进步,鸿蒙操作系统成为了备受瞩目的开源项目。作为一个全场景智能生态的基础,鸿蒙不仅仅是一个操作系统,还涉及到硬件层面的适配。然而,开源...【详细内容】
2024-01-16  Search: 鸿蒙  点击:(56)  评论:(0)  加入收藏
鸿蒙系统,即将跨越16%生死线?
1月15日周一,华为终端官宣,1月18日华为将举办鸿蒙重要活动,届时将揭秘鸿蒙生态和HarmonyOSNEXT进阶新篇章。鸿蒙概念再度走高,亚华电子涨超16%,华立股份、高新发展涨停。当下,鸿蒙...【详细内容】
2024-01-16  Search: 鸿蒙  点击:(52)  评论:(0)  加入收藏
纯血鸿蒙来了!HarmonyOS NEXT将于一季度开放:华为彻底与安卓划清界限
快科技1月4日消息,根据华为规划,全新HarmonyOS NEXT开发者预览版,将在今年第一季度面向所有开发者开放。而在1月18日,华为将举办鸿蒙重要活动,届时将揭秘鸿蒙生态和HarmonyOS NEX...【详细内容】
2024-01-04  Search: 鸿蒙  点击:(53)  评论:(0)  加入收藏
鸿蒙概念股票一览表(完整版)附上市公司龙头名单
鸿蒙概念股票有哪些?今天给大家整理一份鸿蒙概念上市公司一览表(附龙头股名单),记得收藏保存! 代码 名称 最新价 300352 北信源 ...【详细内容】
2023-12-31  Search: 鸿蒙  点击:(94)  评论:(0)  加入收藏
华为鸿蒙OS 4.0.0.116新功能背后的故事
华为最新的鸿蒙OS 4.0.0.116更新带来了令人瞩目的突破,成功将麒麟9000S处理器的核心数从8升级到了12线程,让60系列产品获得更强的市场竞争优势。这一成就实在让人惊叹不已。然...【详细内容】
2023-12-19  Search: 鸿蒙  点击:(69)  评论:(0)  加入收藏
支付宝启动鸿蒙原生应用开发 鸿蒙生态布局进一步完善
12月7日,支付宝与华为终端宣布合作,基于HarmonyOS NEXT启动支付宝鸿蒙原生应用开发,成为又一家启动鸿蒙原生应用开发的头部平台伙伴,鸿蒙生态布局进一步完善。支付宝作为行业领...【详细内容】
2023-12-08  Search: 鸿蒙  点击:(88)  评论:(0)  加入收藏
▌简易百科推荐
OpenHarmony - 基于ArkUI框架实现日历应用
前言对于刚刚接触OpenHarmony应用开发的开发者,最快的入门方式就是开发一个简单的应用,下面记录了一个日历应用的开发过程,通过日历应用的开发,来熟悉基本图形的绘制,ArkUI的组件...【详细内容】
2024-01-16    51CTO  Tags:OpenHarmony   点击:(54)  评论:(0)  加入收藏
鸿蒙工程师,熬来了「造富时代」
  作者|张俊  来源|新浪科技  ID|techsina  “套壳安卓”的质疑言犹在耳,如今华为正在计划将鸿蒙OS与安卓完全脱离。  此前,鸿蒙OS为了迅速扩大用户规模,采取了兼容安卓...【详细内容】
2023-11-20    锌财经  Tags:鸿蒙   点击:(212)  评论:(0)  加入收藏
OpenHarmony:如何使用HDF驱动控制LED灯
一、程序简介该程序是基于OpenHarmony标准系统编写的基础外设类:RGB LED。目前已在凌蒙派-RK3568开发板跑通。详细资料请参考官网:https://gitee.com/Lockzhiner-Electronics/...【详细内容】
2023-09-08    51CTO  Tags:OpenHarmony   点击:(263)  评论:(0)  加入收藏
深入了解华为OpenHarmony开源系统的架构与功能
当下最火的科技圈新闻,莫过于华为即将发布的Mate 60系列手机,但是今天摸鱼君不讲这些,毕竟我也没抢到,我也不是专业测评。但是以我所长说说它搭载鸿蒙系统的一些内容。 鸿蒙系...【详细内容】
2023-09-07  摸鱼IT  微信公众号  Tags:OpenHarmony   点击:(207)  评论:(0)  加入收藏
鸿蒙操作系统开发 搭建环境
2019年8月9日,华为在东莞举行华为开发者大会,正式发布鸿蒙操作系统;2020年9月推出了鸿蒙2.0,全面使能全场景生态,具备跨设备、服务流转、极速直达、可视可说、隐私安全五大能力。...【详细内容】
2023-09-07  清华计算机学堂  微信公众号  Tags:鸿蒙   点击:(196)  评论:(0)  加入收藏
OpenHarmony中使用MQTT
MQTT**(**消息队列遥测传输)是ISO 标准(ISO/IEC PRF 20922)下基于发布/订阅范式的消息协议。它工作在TCP/IP协议族上,是为硬件性能低下的远程设备以及网络状况糟糕的情况下而...【详细内容】
2023-08-29    51CTO  Tags:OpenHarmony   点击:(432)  评论:(0)  加入收藏
OpenHarmony组件复用示例
OpenHarmony组件复用示例 摘要:在开发应用时,有些场景下的自定义组件具有相同的组件布局结构,仅有状态变量等承载数据的差异。这样的组件缓存起来,需要使用到该组件时直接复用,...【详细内容】
2023-08-28  zhushangyuan  51CTO  Tags:OpenHarmony   点击:(352)  评论:(0)  加入收藏
HarmonyOS开发第一步,熟知开发工具DevEco Studio
俗话说的好,工欲善其事,必先利其器,走进HarmonyOS第一步,开发工具必须先行,当然了,关于开发工具的使用,官网和其他的博客也有很多的讲解,但是并没有按照常用的功能进行概述,如果需要...【详细内容】
2023-08-22  程序员一鸣  今日头条  Tags:HarmonyOS   点击:(205)  评论:(0)  加入收藏
鸿蒙元服务开发实例:桌面卡片上的电动自行车助手E-Bike
E-Bike是一款基于HarmonyOS开发的元服务,以万能卡片的形式给骑行提供便捷服务。首先需要完成HarmonyOS开发环境搭建。一、元服务E-Bike简介E-Bike是一款基于HarmonyOS开发的...【详细内容】
2023-08-16    51CTO  Tags:鸿蒙   点击:(302)  评论:(0)  加入收藏
OpenHarmony运行docker详细步骤
本文将介绍如何在OpenHarmony内核上运行docker容器。 目录 1.环境和设备 2.准备支持Docker容器的OpenHarmony内核 3.编译烧录镜像 4.安装docker容器引擎组件 5.格式...【详细内容】
2023-07-28  离北况归  51CTO  Tags:OpenHarmony   点击:(396)  评论:(0)  加入收藏
站内最新
站内热门
站内头条