头图

跟着坚果构建首个蓝河应用

作者:坚果

华为HDE,润开鸿生态技术专家,坚果派创始人,OpenHarmony布道师,开发者联盟优秀讲师,2023年开源之夏导师,2023年OpenHarmony应用创新赛导师,OpenHarmony金融应用创新赛导师,RISC-V+OpenHarmony应用创意赛导师,OpenHarmony三方库贡献者,开放原子开源基金会技术+生态贡献者,第一批开放原子开源讲师,曾受邀参加2022,2023HDC大会,OpenHarmony校源行开源大使,InfoQ签约作者,CSDN博客专家,电子发烧友MVP,51CTO博客专家博主,阿里云博客专家,专注于分享的技术包括HarmonyOS/OpenHarmony,ArkUI-X,元服务,服务卡片,华为自研语言,在2022年战码活动中,带领100余人完成pr的提交,配合孵化三个小队长。也在此活动中累计完成1.5W行代码提交,在2023年OpenHarmony创新赛中。累计辅导60+队伍,完成作品的提交,并有9个获奖。在2023年OpenHarmony金融应用创新赛中。累计辅导14+队伍,完成作品的提交。

今天我们来使用蓝河 Studio完成首个蓝河应用。

一、概述

大家都知道我是做鸿蒙应用开发的,其实我对别的操作系统也比较感兴趣。自从前段时间雷军官宣了小米澎湃 OS 后,如今又有第三家国产手机品牌迈上了自研操作系统的道路:那就是vivo 开发者大会上,蓝河操作系统 BlueOS 正式亮相。

值得一提的是,不同于 vivo 旗下基于安卓系统深度定制的 OriginOS,BlueOS 的系统框架由 Rust 语言编写,并已有一些配套的开发工具和相关文档。不仅如此,vivo 副总裁周围也明确表示:vivo 自研的蓝河操作系统不兼容安卓应用,未来同样不会兼容,目前也没有跨端搭载的计划。

我这里主要 给大家介绍的是蓝河应用开发采用类 web 开发范式,使用 UI 组件来搭建页面布局,使用样式来描述组件和页面的效果,使用 Javascript 来进行业务逻辑的开发。蓝河应用支持 MVVM(Model-View-ViewModel)的架构,通过数据绑定视图的方式,数据发生变化时,会自动触发 UI 的更新。

二、系统架构

系统架构

三、核心特征

3.1天生更智慧

蓝河操作系统,从系统、应用、到工具链全面突破,基于 AI 大模型能力实现 AI 服务引擎和多模输入子系统,带来了多模态输入输出,模拟人与人的交互方式。基于 AI 能力探索出应用开发新范式,打造了诸多智慧操作系统的新型应用。未来将开放 Copilot 工具,提供代码生成、图文生成等能力,带来应用开发的全新生产力工具

3.2天生更流畅

蓝河操作系统从全栈技术视角出发,对多个技术方向进行探索,例如编程语言、运行时 Runtime、系统调度、显示和内存。充分发挥软硬件资源的利用效率,高性能系统架构实现了一系列关键技术,虚拟显卡框架、超级协程机制、Runtime 等,提升了计算、存储、显示的资源效率。

3.3天生更安全

蓝河操作系统从性能和安全两个维度选择了 Rust 语言作为系统开发语言,Rust 语言的所有权模型、生命周期等一系列安全特性,保障了在编译阶段就可以发现内存使用不当导致的安全漏洞。蓝河操作系统是行业首个系统框架由 Rust 语言编写的操作系统,从源头保障了内存安全和并发安全。

四、蓝河应用系统能力开放概览

4.1十二大系统能力

系统能力描述
应用框架1. 功能组件:Page、Service、Widget; 2. 通知能力:Event、Notification、Toast; 3. 页面路由; 4. 后台管理、窗口管理,包管理;
UI 组件1. 基础组件、容器组件、表单组件、画布组件、导航组件; 2. 系统风格 UI 组件; 3. MVVM 编程模型; 4. 弹性布局,自适应布局; 5. 属性动画、SVG 矢量动画,帧动画;
AI 能力1. AI 算法能力:视觉算法、语音算法、自然语言处理; 2. AI 服务引擎:支持调用连接端的强算力设备上的端侧大模型和云端大模型; 功能组件包括 Chain、Agent、Memory、Tools,LLM API、PromptTemplete;
连接能力1. 开放组件 Kit:HealthKit、ShareKit、KeyKit、RelayKit; 2. BlueXlink: 发现、连接、传输、策略、协议适配;
运动健康能力1. 睡眠数据、运动数据 ; 2. 健康数据:心率、卡路里; 3. 运动识别:行走、跑步、骑行、游泳、跳绳... ; 4. 姿态识别:久坐、站立;
通信能力1. 蓝牙、NFC ; 2. 上传下载 ; 3. 数据请求 ; 4.WebSocket;
多媒体能力1. 原子音乐播放组件; 2. 图像/音频编解码; 3. 音频录制、播放; 4. 音频管理;
数据存储能力1. 存储空间管理; 2. K-V 存储; 3. 文件存储; 4. 数据共享;
电话能力1. 通话、短信; 2. 蜂窝数据; 3. 网络搜索; 4. SIM 卡管理;
基础硬件能力1. 位置服务; 2. 震动; 3. 屏幕管理; 4. 电源管理; 5. 传感器:佩戴状态、抬腕、计步、罗盘、加速度、陀螺仪、气压;
基础软件能力1. 系统设置; 2. 全球化; 2. 解压缩、序列化;
安全能力1. 权限机制; 2. 加解密算法库; 3. 应用沙箱;

4.2两套 API

为了兼顾高效开发和高性能,蓝河应用提供了两套 API,Javascript API 和 Native API

  1. Javascript API 提供了完整的开放能力, 支持开发者高效率地完成应用的开发。
  2. Native API 主要聚焦高性能场景,以及方便开发者对原有代码的复用。

4.3三种应用形态

蓝河应用支持应用、表盘、快捷卡片三种应用形态。

  1. 应用:它具有完整的功能,可以支持多页面,支持复杂的 UI 交互,支持应用间的跳转和数据交换。它可以在后台运行,在特定场景可以长期运行。
  2. 表盘:它具备装饰属性, 也代表了用户的个性化选择。支持普通和 AOD 两种显示模式,支持动态交互和 20 多种数据展示。支持三种开发方案:AI 生成、表盘设计工具制作、代码编程实现。
  3. 快捷卡片:是一种高效的信息展示方式,用户无需进入应用,在表盘界面只需左滑,即可查看信息和控制操作。

五、开发尝鲜

5.1准备开发环境

BlueOS Studio 是面向蓝河应用开发推出的一款全新的一站式集成开发环境。开发者可以使用 BlueOS Studio 开发、调试和打包蓝河应用。BlueOS Studio 提供了丰富的功能和工具,可以极大地提高开发效率和代码质量。

下载链接:点击链接进入工具下载页面,安装 BlueOS Studio。

然后拖动安装就可以。

image-20231229171147399

如果您想了解更多关于 BlueOS Studio 的功能和使用方法,请移步BlueOS Studio的详细教程。同时,

5.2检测开发环境

image-20231229125645335

只有所有的都打勾才可以。

我的这个问题解决参考:https://blog.csdn.net/a805492851b/article/details/115301918

首先打开终端,在终端中输入vi ~/.zshrc

会在用户目录下创建一个.zshrc文件

终端界面会进入Vim的普通模式,普通模式下无法编辑,需要按 i 键然后会进入编辑模式

这个时候可以直接在终端中编辑,输入需要设置的内容,输入完了按esc退出编辑模式回到普通模式

然后再分别按 :wq (英文冒号)

MAC bookPro出现zsh: command not found: xxx解决方法:
把 bash shell 中.bash_profile 全部环境变量加入zsh shell里就好

step1:

Term执行

open .zshrc

step2:

在弹出的编辑器最下面

加入

source ~/.bash_profile

或者

source .bash_profile

看哪个奏效,这一步就在zshrc执行时将 .bash_profile 全部环境变量加入zsh shell了

保存

step3:

terminal执行

source .zshrc              更新配置

如果到此你已经解决了问题,那恭喜你了,可题主我就没这么幸运,我在terminal执行source .zshrc时报找不到bash_profile,坑爹的有些mac就是没有bash_profile这个文件,需要手动新建,如果你也是这样请继续跟我操作

step:1

terminal执行

touch .bash_profile         创建.bash_profile 
这时候就有了bash_profile这个文件,当然是没有内容的空文件,这里又需要你写入path,我接下来是这么操作的

step:2

创建global安装任务的目录

mkdir ~/.npm-global

step:3

配置npm全局下载时,下载到新的地址目录

npm config set prefix '~/.npm-global'

至此你再npm i xxx -g就会存储到npm-global的地址下了

step:4

open .bash_profile

在弹出的编辑器中增加配置

export PATH=~/.npm-global/bin:${PATH}

保存

step:5

terminal执行

source .bash_profile    更新配置

5.3开发 UI

新建工程

image-20231229173433289

蓝河应用主要使用 UI 组件和样式进行界面的开发。UI 组件是蓝河应用 UI 开发的最小单元,蓝河应用提供了基础、表单,布局/容器、画布、导航、动画、系统风格等类型的一系列组件。 组件、样式、js 代码大部分都是写在.ux的文件中。

比如导航实现

  onDetailBtnClick() {
    // 跳转到应用内的某个页面,router 用法详见:文档 -> 接口 -> 页面路由
    router.push({
      uri: '/pages/DemoDetail'
    })
  }

在组件开发基础之上,蓝河应用还提供了丰富的样式支持,因此开发者可以开发出包含自己独特风格的蓝河应用。样式可以声明在style标签内也可以通过 style 属性以内联样式的形式声明在组件标签上。

image-20231229172111596

当然如果你想进一步了解组件、样式、js 代码是如何组织的,可以移步ux 文件进行更详细的了解。

如果您想了解更多关于样式的详细信息,请移步style 样式

蓝河应用支持的通用样式情况的详细信息,可以移步了解通用样式支持

5.4开发业务功能

蓝河应用提供了 JS API 和 Native API 两种接口,以支撑高效和高性能的开发场景。开发者可以根据需要选择不同的接口进行开发,以获得更好的开发体验和应用性能。

1.JS API 提供了完整的开放能力, 支持开发者高效率地完成应用的开发。开发者可以实现应用生命周期监听、系统弹窗、多设备互联等操作,如果您需要了解更多关于这些开放能力的信息,请移步JS 功能接口进行了解。

2.Native API 主要聚焦高性能场景,支持 Posix API 以及部分系统能力如连接能力、数据存储能力、通信能力等。

现阶段,.Native API 以定向合作的形式向合作方提供 Native 开发能力,合作方通过调用 Native API,作为系统能力的一部分提供给 JS 侧开发使用。

5.5开发调试

在开发的过程中,可以首先使用 BlueOS Studio 的模拟器查看开发的界面效果。

image-20231229172746329

此外,开发者经常会遇到到 UI 问题、网络问题、内存问题等,BlueOS Studio 也提供了对应的分析面板,例如:UI 调试网络调试内存调试日志,助力开发者更高效地定位问题。

开发完成后,开发人员需要对应用进行测试。BlueOS Studio 提供了自动化测试的功能,助力开发者提高测试效率。

5.6发布

开发测试完成后,就来到了最后的发布环节,开发者可以使用 BlueOS Studio 的打包功能,将开发的应用打成 rpk 包,如果是第一次打包,需要先生成证书

image-20231229173157258

打包完成后,前往发布平台发布后,蓝河操作系统的用户即可使用到对应的蓝河应用。

到此你的蓝河 Studio vivo应用开发之旅就正式的开始了,坚果也只能陪你到这了,如果需要坚果派的一直陪伴,可以关注“大前端之旅”这个公众号。

六、总结

本次开发体验到此结束。这里想吐惨的就是为啥用的是pnpm这个包管理工具,既然都要检测npm的环境,难道就是因为 pnpm是速度快、节省磁盘空间的软件包管理器吗?对于应用开发的体验来说,因为可参考的文档,官网都写的很详细。所以上手还是蛮快的。

七、参考链接

教程

UI组件

JS API

工具

FAQ

蓝河操作系统

vivo 重磅官宣自研“蓝河操作系统”:永不兼容安卓应用,由 Rust 编写框架,还引入 AI 大模型!

开发者社区


坚果
74 声望7 粉丝

坚果派联合创始人、华为HDE,OpenHarmony MVP