以下文章来源于广发证券科技金融 ,作者GFS

本期我们给大家带来的是广发证券前端开发工程师黄钦佳的分享,希望能给你的HarmonyOS开发之旅带来启发~

10月22日,华为开发者大会2021(Together)在东莞松山湖开幕。广发证券受邀作为技术论坛嘉宾参与大会,在HarmonyOS应用与服务开发的论坛上,信息技术部前端开发工程师黄钦佳分享了广发证券原子化服务的应用开发案例。

图1 黄钦佳HDC大会分享

一、广发证券接入鸿蒙生态

随着数字时代的发展,泛终端场景下的智能化信息服务将成为大众日益迫切的需求,在一些特定场景中如跑步、健身等,客户不便使用手机,无法即时享受投资服务。

针对此类场景,广发证券基于HarmonyOS原子化服务轻量化的特点,推出“行情服务”、“开hu服务”、“秒答服务”三个原子化服务,其中“行情服务”覆盖智能手机、智能手表,“开hu服务”和“秒答服务”仅限于手机端使用。

投资者只需在搭载HarmonyOS 的手机服务中心搜索“广发”,将原子化服务卡片添加至“我的服务”或手机桌面,点击相应卡片便可享受到各类投资服务,包括一键查看全球实时行情、免安装完成快速开hu、学习投资理财课程、连接投顾秒答等。

用户点击“同步自选”,选择设备,可将自选行情一键流转至手表中,实现广发行情服务的无缝流转,给用户流畅完整的沉浸式体验。

1. 丰富的服务卡片

服务卡片是将原子化服务/应用的重要信息以卡片的形式展示在桌面,用户可在不同终端通过快捷手势使用卡片,通过轻量交互行为实现服务直达。

对此,广发证券开发了4类服务卡片,涵盖证券开hu、广发秒答、股票行情和投资课程等多种规格,适用于手表、手机等不同场景,为客户提供多样化个性服务。

图2 服务卡片

2. 跨终端流转及自适应

HarmonyOS 采用服务流转的分布式操作方式,通过流转能力打破设备界限,实现多设备联动,使原子化服务可流转,实现如邮件跨设备编辑、多设备协同健身、多屏游戏等分布式业务。

通过嵌入流转功能,可以便捷地将服务流转到不同的 HarmonyOS 设备,包括但不限于手表等设备,也可灵活地切换和管理流转任务,实现多设备的协同联动,为客户提供全场景多终端的服务体验。

针对不同终端的特点,广发证券提供了不同的展示布局。如图3所示,手机屏大,可展示信息的全貌,手表小屏,则展示精炼行情信息。未来拓展智慧屏等大屏幕,则可利用横屏同时展示更多内容。

图3 跨终端UX自适应

同时,用户也可以通过手机终端授权进行登录,同步用户的自选股列表,实现多终端服务流转,随时随地查看股票行情。如图4所示,在手表端点击同步自选股的时候,手机端可以直接弹出授权提示框,点击确认后,即可将手机中自选股票同步流转至手表,整体流程便捷流畅。

图4 跨端协同

丰富的服务卡片和跨终端的互联互通,组成一个虚拟的超级终端,将人、设备、场景有机地关联在一起,让客户能在全场景生活中接触的多种智能终端实现极简连接、极简交互、硬件互助等体验,用最合适的设备提供最佳的金融服务体验。

二、HarmonyOS应用与服务开发技术分享

以下是从架构设计到具体代码交付过程中的一些思考及实践。

1. Java or JS ?

首先介绍一下技术选型。“HarmonyOS的Java UI提供了细粒度的UI编程接口,使应用开发更加灵活;JS UI提供了相对高层的UI描述,使应用开发更加简单。”

在前期调研的时候,广发证券发现HarmonyOS应用支持JS UI,并且提供了不少的组件和能力,看起来挺像小程序的开发过程;且支持CSS的使用,在前端开发的过程中,CSS布局是非常灵活和高效的,也直接支持npm的海量资源,所以广发证券决定优先用JS。

图5 Java和JS对比

2. 模块设计

关于模块设计的心路历程,如图6所示,广发证券最初的构想是将多终端类型共用一个entry,但随着开发过程的逐渐深入发现有些配置必须按照模块进行,比如说图标和横竖屏模式的设置。

图6 模块设计

于是他们将模块关系更改为:一个公共模块(common)+多个Entry(对应不同终端)+多个FA(如图7所示)。绝大部分的业务逻辑代码甚至图片资源,都集中在common中。

图7 common模块

在common中,他们通过Java 和 JS 常量共享、图片同步、npm本地依赖等这几项设计,实现了JS组件在开发体验中比较完整的闭环。对此,他们还编写了gradle脚本,实现JS组件图片从common到引用模块的自动同步,构建的也会自动运行npm install,保证JS组件在目标模块的更新。

3. 一次开发,多端部署

在前面效果展示时,手机、平板里的服务卡片都有相同的功能,其实它们是同一套代码(如图8所示),只是在不同终端部署时,根据设备类型和屏幕状态将CSS做出调整,如手表应用只使用了自选股部分的功能。

图8 一次开发,多端部署

4. 鸿蒙操作系统的能力在实践中的应用

接下来看看下开发过程中,广发证券是如何使用鸿蒙操作系统的一些能力的。

(1)组件

广发证券进行JS开发时,主要依靠SDK提供的UI组件。除了常用的div, text, image 组件,还有list、swiper、chart、tabs这些交互较为复杂的组件(如图9所示)。

图9 UI组件

在这些组件中,list组件,用来展示自选股列表;swiper 和 tabs 提供了常见的滑动切换效果,用起来很方便,其中swiper用在了自选tab和直播tab的切换,tabs则用于课程内容的切换。

与tabs关联的tab-bar容纳了他们的课程类别列表,tab-content用来展示每个类别下的视频列表;chart组件展示简单的行情分时曲线也是没问题的。

(2)JS 调用PA

其次,JS UI需要配套的JS API提供一些底层系统能力,如果当前SDK还不支持,就会选择PA的方式,自行实现并提供给JS。比如说以下几个场景:

  • 扫码功能用的是Java实现,扫码结果如何传递给JS UI?这就需要一个数据中转(代码如图10所示);
  • 获取设备名字和APP安装状态等能力需要通过Java代码实现来实现;

图10 JS调用PA

此外,前面提到的Java 和 JS 代码共享功能在图11也得到应用:左边是JS调用PA,通过ShareConst的使用,从编码上实现请求码(code)的统一,避免可能的人为错误导致与Java功能对应不一致。

图11  Java和JS代码共享

(3)跨端协同

最后分享一下鸿蒙操作系统值得一提的特性——跨端协同。跨端协同通过分布式软总线,把不同类型的设备连接起来,并通过简单的API进行灵活的相互调用。

需要先注意它的使用条件:相同华为账号,动态申请权限,指定设备ID,指定跨端Flags。

三、展望

鸿蒙操作系统的超级终端及轻量化原子服务理念,将给整个金融生态带来巨大的变革。

因此,广发证券将坚持开放融合的理念,围绕1+8+N全场景智慧生态拓展智能服务新触点,深入探索研究鸿蒙操作系统带来的全新技术与服务方式,进一步加快金融产品与鸿蒙操作系统间的融合;从产品、技术、场景联合发力打造万物智联服务新体验,构建更加开放融合的金融科技新生态,为每一位客户提供更便利、更具价值的财富管理服务。

HDC2021技术分论坛:广发证券携手HarmonyOS打造智慧金融服务的更多相关文章

  1. HDC2021技术分论坛:如何高效完成HarmonyOS分布式应用测试?

    作者:liuxun,HarmonyOS测试架构师 HarmonyOS是新一代的智能终端操作系统,给开发者提供了设备发现.设备连接.跨设备调用等丰富的分布式API.随着越来越多的开发者投入到Harmon ...

  2. HDC2021技术分论坛:“积木拼装”,HarmonyOS弹性部署大揭秘!

    作者:peitaiyi,华为终端OS产品交付专家 HarmonyOS是一款面向万物互联时代的.全新的分布式操作系统.在传统的单设备系统能力基础上,HarmonyOS提出了基于同一套系统能力.适配多种终 ...

  3. HDC2021技术分论坛:组件通信、硬件池化,这些创新技术你get了吗?

    作者:ligang 华为分布式硬件技术专家,sunbinxin 华为应用框架技术专家 HarmonyOS是一款全新的分布式操作系统,为开发者提供了元能力框架.事件通知.分布式硬件等分布式技术,使能开发 ...

  4. HDC2021技术分论坛:异构组网如何解决共享资源冲突?

    作者:lijie,HarmonyOS软总线领域专家 相信大家对HarmonyOS的"超级终端"比较熟悉了.那么,您知道超级终端场景下的多种设备在不同环境下是如何组成一个网络的吗?这 ...

  5. HDC2021技术分论坛:进程崩溃/应用卡死,故障频频怎么办?

    ​作者:jiwenqiang,DFX技术专家 提到开发一个产品,我们通常首先想到的是要实现什么样的功能,但是除了功能之外,非功能属性也会很大程度上影响一个产品的体验效果,比如不定时出现的应用卡死.崩溃 ...

  6. 360携手HarmonyOS打造独特的“天气大师”

    做创新,首先要找到有增长趋势的流量红利,对我们来说,HarmonyOS就是绝佳的合作伙伴. --申悦 360手机助手创研产品部负责人 一.我们是谁? 我们来自360,是一支致力于孵化新业务的内部创新小 ...

  7. HDC技术分论坛:HarmonyOS新一代UI框架的全面解读

    作者:yuzhiqiang,UI编程框架首席技术专家 在Harmony 3.0.0开发者预览版中,包含了新一代的声明式UI框架ArkUI 3.0.多语言跨平台编译器ArkCompiler 3.0.跨端 ...

  8. 【技术开放日】msup携手HPE揭秘全球测试中心背后的12条技术实践

    保证软件产品质量是软件测试永恒的目标. 以控制为出发点的传统IT时代正在快速的向以激活生产力为目的的移动互联时代转变.这不仅是技术的升级,更是思想意识的巨大变革,也对软件技术的发展带来的更高的要求和更 ...

  9. 【软工】[技术博客] 用Monaco Editor打造接近vscode体验的浏览器IDE

    [技术博客] 用Monaco Editor打造接近vscode体验的浏览器IDE 官方文档与重要参考资料 官方demo 官方API调用样例 Playground 官方API Doc,但其搜索框不支持模 ...

  10. 提升AI智能化水平,打造智慧新体验

    内容来源:华为开发者大会2021 HMS Core 6 AI技术论坛,主题演讲<提升AI智能化水平,打造智慧新体验>. 演讲嘉宾:沈波,华为消费者AI与智慧全场景ML Kit产品总监 今天 ...

随机推荐

  1. Java 接口的使用

    1 package com.bytezreo.interfacetest; 2 3 /** 4 * 5 * @Description 接口的使用 6 * @author Bytezero·zhengl ...

  2. C++ //统计元素个数 //统计内置数据类型 //统计自定义数据类型

    1 //统计元素个数 2 3 #include<iostream> 4 #include<string> 5 #include<vector> 6 #include ...

  3. Java与sql中的字符串表示

    在 Java 中,双引号 "" 用于表示字符串字面量,而单引号 '' 用于表示字符字面量.这意味着在 Java 中,您可以使用双引号来包围包含任意数量字符的字符串,包括零个字符(空 ...

  4. GDB调试入门笔记

    目录 What? Why How 安装GDB 安装命令 查看是否安装成功 调试简单的程序 预备一个程序 调试 使用 break info list next print step 一些小技巧 在gdb ...

  5. Advanced .Net Debugging 3:基本调试任务(对象检查:内存、值类型、引用类型、数组和异常的转储)

    一.介绍 这是我的<Advanced .Net Debugging>这个系列的第四篇文章.今天这篇文章的标题虽然叫做"基本调试任务",但是这章的内容还是挺多的.由于内容 ...

  6. element_ui实现表格内套表单,点击可以编辑

    <template> <div class="app-container"> <el-table :data="list" str ...

  7. C语言之兔子生产问题

    /#include <stdio.h> main() { long fib1 = 1, fib2 = 1, fib;//定义长整型变量,fib1表示当前前一个月的兔子数,fib2表示当前前 ...

  8. 基于泰凌微的TLSR8355芯片的2.4G无线私有协议PCBA设计调试总结

    一 前记 经常做物联网的类的产品,TLSR8355凭借着它的射频距离远,功能强大等优点成为很多客户的首选.TLSR8355系列专用于2.4GHz射频系统芯片解决方案,如零售/物流.专用网络.Beaco ...

  9. 基于 XAF Blazor 的规则引擎编辑器 - 实战篇

    示例项目:https://gitee.com/easyxaf/recharge-rules-engine-sample 前言 继上一篇文章对规则引擎编辑器进行了初步介绍之后,本文将通过实际应用案例深入 ...

  10. c初探:数据类型、数组、内存布局、指针

    c初探:数据类型.数组.内存布局.指针 目录 c初探:数据类型.数组.内存布局.指针 1.基本数据类型 2.格式化 include <stdio.h> 输出控制符 3.数组与内存布局 动态 ...