HarmonyOS开发案例：【闹钟】

介绍

使用后台代理提醒，实现一个简易闹钟。要求完成以下功能：

  1. 展示指针表盘或数字时间。
  2. 添加、修改和删除闹钟。
  3. 展示闹钟列表，并可打开和关闭单个闹钟。
  4. 闹钟到设定的时间后弹出提醒。
  5. 将闹钟的定时数据保存到轻量级数据库。

在这里插入图片描述

相关概念

  • [Canvas]：提供画布组件，用于自定义绘制图形。

  • [CanvasRenderingContext2D]：使用RenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等。

  • [后台代理提醒]：开发应用时，开发者可以调用后台提醒发布的接口创建定时提醒，包括倒计时、日历、闹钟三种提醒类型。使用后台代理提醒能力后，应用可以被冻结或退出，计时和弹出提醒的功能将被后台系统服务代理。本应用中主要使用到后台代理提醒的两个接口：

    • publishReminder 发布一个后台代理提醒，使用callback方式实现异步调用，该方法需要申请通知弹窗Notification.requestEnableNotification后才能调用。
    • cancelReminder 取消指定id的提醒，使用callback方式实现异步调用。
    • 鸿蒙开发指导文档：gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。

搜狗高速浏览器截图20240326151547.png

相关权限

本篇Codelab需要在module.json5中配置如下权限：

"requestPermissions": [{"name": "ohos.permission.PUBLISH_AGENT_REMINDER"}
]

环境搭建

软件要求

  • [DevEco Studio]版本：DevEco Studio 3.1 Release。
  • OpenHarmony SDK版本：API version 9。

硬件要求

  • 开发板类型：[润和RK3568开发板]。
  • OpenHarmony系统：3.2 Release。

环境搭建

完成本篇Codelab我们首先要完成开发环境的搭建，本示例以RK3568开发板为例，参照以下步骤进行：

  1. [获取OpenHarmony系统版本]：标准系统解决方案（二进制）。以3.2 Release版本为例：

  2. 搭建烧录环境。

    1. [完成DevEco Device Tool的安装]
    2. [完成RK3568开发板的烧录]

  3. 搭建开发环境。

    1. 开始前请参考[工具准备]，完成DevEco Studio的安装和开发环境配置。
    2. 开发环境配置完成后，请参考[使用工程向导]创建工程（模板选择“Empty Ability”）。
    3. 工程创建完成后，选择使用[真机进行调测]。

代码结构解读

本篇Codelab只对核心代码进行讲解，对于完整代码，我们会在gitee中提供。

`HarmonyOS与OpenHarmony鸿蒙文档籽料：mau123789是v直接拿`├──entry/src/main/ets                       // 代码区    
│  ├──common
│  │  ├──constants
│  │  │  ├──AlarmSettingType.ets            // 闹钟设置类型枚举
│  │  │  ├──CommonConstants.ets             // 公共常量类
│  │  │  ├──DetailConstant.ets              // 详情页常量类
│  │  │  └──MainConstant.ets                // 首页常量类
│  │  └──utils
│  │     ├──DataTypeUtils.ets               // 数据类型工具类
│  │     ├──DimensionUtil.ets               // 屏幕适配工具类
│  │     └──GlobalContext.ets               // 全局变量工具类
│  ├──entryability
│  │  └──EntryAbility.ets                   // 程序入口类
│  ├──model
│  │  ├──database
│  │  │  ├──PreferencesHandler.ets          // 轻量级数据库操作类
│  │  │  └──PreferencesListener.ets         // 轻量级数据库回调接口   
│  │  └──ReminderService.ets                // 系统后台提醒服务类   
│  │──pages
│  │  ├──DetailIndex.ets                    // 详情页入口文件
│  │  └──MainIndex.ets                      // 主页入口文件
│  │──view
│  │  ├──Detail     
│  │  │  ├──dialog
│  │  │  │  ├──CommonDialog.ets             // 公共Dialog组件
│  │  │  │  ├──DurationDialog.ets           // 闹铃时长选择Dialog组件
│  │  │  │  ├──IntervalDialog.ets           // 闹铃间隔选择Dialog组件
│  │  │  │  ├──RenameDialog.ets             // 闹铃名设置Dialog组件
│  │  │  │  └──RepeatDialog.ets             // 闹铃重复设置Dialog组件
│  │  │  ├──DatePickArea.ets                // 详情页时间选择组件
│  │  │  └──SettingItem.ets                 // 详情页设置组件
│  │  ├──Main    
│  │  │  ├──AlarmList.ets                   // 主页闹钟列表组件
│  │  │  ├──AlarmListItem.ets               // 主页闹钟列表子项组件
│  │  │  └──ClockArea.ets                   // 主页时钟组件
│  │  └──BackContainer.ets                  // 自定义头部组件
│  └──viewmodel
│     ├──AlarmItemBean.ets                  // 闹钟属性类
│     ├──AlarmSettingBean.ets               // 闹钟设置属性类
│     ├──DayDateBean.ets                    // 日期属性类
│     ├──DetailViewModel.ets                // 详情模块逻辑功能类   
│     ├──MainViewModel.ets                  // 主页逻辑功能类
│     └──ReminderItemBean.ets               // 后台提醒属性类
└──entry/src/main/resources                 // 资源文件目录

闹钟主界面

闹钟界面包括当前时间、闹钟列表、添加闹钟子组件，具体包括以下模块：

  • 展示当前时间。
  • 展示闹钟列表。
  • 添加闹钟。
  • 后台代理提醒。

展示当前时间

当前时间使用了Canvas组件绘制，默认展示指针表盘，点击表盘区域切换为数字时钟。

在主页的ClockArea组件中初始化Canvas画布，并绑定指针表盘和数字时钟切换事件。

// ClockArea.ets
@Component
export default struct ClockArea {...build() {Canvas(this.renderContext).width(this.canvasSize).aspectRatio(CommonConstants.DEFAULT_LAYOUT_WEIGHT).onReady(() => {if (this.drawInterval === CommonConstants.DEFAULT_NUMBER_NEGATIVE) {this.startDrawTask();}}).onClick(() => {this.showClock = !this.showClock;})}// 启动绘画任务private startDrawTask() {let that = this;that.renderContext.translate(this.canvasSize / CommonConstants.DEFAULT_DOUBLE,this.canvasSize / CommonConstants.DEFAULT_DOUBLE);that.drawClockArea();this.drawInterval = setInterval(() => {that.drawClockArea();}, MainConstant.DEFAULT_ONE_SECOND_MS);}...      
}

绘画任务是使用CanvasRenderingContext2D对象在Canvas画布组件上绘制指针表盘和数字时钟。

// ClockArea.ets
// 开始绘制时钟区域
private drawClockArea(): void{this.renderContext.clearRect(-this.canvasSize,-this.canvasSize / CommonConstants.DEFAULT_DOUBLE,this.canvasSize * CommonConstants.DEFAULT_DOUBLE,this.canvasSize);let date = new Date();let hours = date.getHours();let minutes = date.getMinutes();let seconds = date.getSeconds();if (this.showClock) {// 绘制表盘时钟} else {// 绘制数字时钟}
}

展示闹钟列表

闹钟列表组件，展示已添加的闹钟信息，可对闹钟进行启停操作，点击闹钟可跳转到闹钟操作界面（修改和删除闹钟）。主页启动后获取轻量级数据库中的闹钟定时数据，并监控数据库数据变化。

// MainViewModel.ets
public queryAlarmsTasker(callback: (alarms: Array<AlarmItem>) => void) {let that = this;that.queryDatabaseAlarms(callback);let preference = GlobalContext.getContext().getObject('preference') as PreferencesHandler;preference.addPreferencesListener({onDataChanged() {that.queryDatabaseAlarms(callback);}} as PreferencesListener)
}

在AlarmList.ets中添加闹钟列表子组件，并绑定启停、跳转事件。

// AlarmList.ets
@Component
export default struct AlarmList {@Link alarmItems: Array<AlarmItem>;build() {List({ space: DimensionUtil.getVp($r('app.float.alarm_list_space')) }) {ForEach(this.alarmItems, (item: AlarmItem) => {ListItem() {AlarmListItem({ alarmItem: item })}.onClick(() => {router.pushUrl({ url: "pages/DetailIndex", params: { alarmItem: item } });})}, (item: AlarmItem) => JSON.stringify(item))}.padding({left: DimensionUtil.getVp($r('app.float.alarm_list_content_distance')),right: DimensionUtil.getVp($r('app.float.alarm_list_content_distance'))}).listDirection(Axis.Vertical).layoutWeight(CommonConstants.DEFAULT_LAYOUT_WEIGHT).margin({ top: DimensionUtil.getVp($r('app.float.alarm_list_content_distance')) })}
}

添加闹钟

添加闹钟，点击界面底部闹钟添加按钮，跳转到闹钟操作界面（新增闹钟）。

在MainIndex.ets中为添加按钮绑定跳转事件。

// MainIndex.ets
@Entry
@Component
struct MainIndex {...build() {Column() {...Button() {Image($r('app.media.ic_add')).objectFit(ImageFit.Fill)}....onClick(() => {router.pushUrl({ url: "pages/DetailIndex" });})}...}
}

后台代理提醒

后台代理提醒，根据闹钟列表中的数据来设置（启停）闹钟实例。

// MainViewModel.ets
// 开启/关闭闹钟
public openAlarm(id: number, isOpen: boolean) {for (let i = 0; i < this.alarms.length; i++) {if (this.alarms[i].id === id) {this.alarms[i].isOpen = isOpen;if (isOpen) {this.reminderService.addReminder(this.alarms[i]);} else {this.reminderService.deleteReminder(this.alarms[i].id);}let preference = GlobalContext.getContext().getObject('preference') as PreferencesHandler;preference.set(CommonConstants.ALARM_KEY, JSON.stringify(this.alarms));break;}}
}

闹钟详情界面

闹钟操作界面分为新增和修改界面，其中在修改界面可删除闹钟。具体包括以下模块：

  • 退出或保存详情。
  • 设置闹钟时间。
  • 设置闹钟详情。
  • 提供后台代理提醒能力

在这里插入图片描述

退出或保存详情

点击左上角“x”图标关闭操作界面，关闭闹钟操作界面子组件，点击右上角“√”图标，保存当前设置并关闭操作界面。

在DetailIndex.ets入口页面中引入头部组件BackContainer，自定义了返回按钮和返回逻辑操作，添加确定（“√”）子组件，并绑定点击事件。

// DetailIndex.ets
build()
{Column() {...Button() {Image($r('app.media.ic_confirm')).objectFit(ImageFit.Fill)}.backgroundColor($r('app.color.trans_parent')).width(DimensionUtil.getVp($r('app.float.title_button_size'))).height(DimensionUtil.getVp($r('app.float.title_button_size'))).onClick(() => {this.viewModel.setAlarmRemind(this.alarmItem);router.back();})...}
}// BackContainer.ets
build() {Row() {...Text(this.header).fontSize(DimensionUtil.getFp($r('app.float.detail_title_font_size'))).lineHeight(DimensionUtil.getVp($r('app.float.title_line_height'))).margin({ left: DimensionUtil.getVp($r('app.float.title_margin')) }).fontColor($r('app.color.grey_divider')).fontWeight(FontWeight.Bold)Blank()if (this.closer) {this.closer();}}.padding({left: DimensionUtil.getVp($r('app.float.title_horizon_margin')),right: DimensionUtil.getVp($r('app.float.title_horizon_margin'))}).height(DimensionUtil.getVp($r('app.float.page_title_height'))).width(CommonConstants.FULL_LENGTH)
}

设置闹钟时间

设置闹钟提醒时间，在闹钟操作界面可通过滑动选择器设置闹钟的提醒时间（包括：时段、小时、分钟）。详情页DetailIndex.ets中添加闹钟时间选择器子组件DatePickArea.ets。

// DatePickArea.ets
@Component
export default struct DatePickArea {build() {Stack({ alignContent: Alignment.Center }) {Row() {ForEach(DetailConstant.DAY_DATA, (item: DayDataBean) => {TextPicker({ range: item.data, selected: item.delSelect }).layoutWeight(CommonConstants.DEFAULT_LAYOUT_WEIGHT).backgroundColor($r('app.color.grey_light')).onChange((value: string, index: number) => {item.delSelect = index;})}, (item: DayDataBean) => JSON.stringify(item))}}.height(DimensionUtil.getVp($r('app.float.date_picker_height'))).padding({left: DimensionUtil.getVp($r('app.float.date_picker_padding_horizon')),right: DimensionUtil.getVp($r('app.float.date_picker_padding_horizon'))})}
}

设置闹钟详情

点击详情页DetailIndex.ets设置条目组件SettingItem.ets，支持设置闹钟重复时间、闹钟名称、重复次数和闹铃时长。

// SettingItem.ets
build() {Column() {ForEach(this.settingInfo, (item: AlarmSettingBean, index: number | undefined) => {Divider()...Row() {Text(item.title)...Text(item.content)...Image($r('app.media.ic_right'))...}....onClick(() => {this.showSettingDialog(item.sType);})}, (item: AlarmSettingBean, index: number | undefined) => JSON.stringify(item) + index)}...
}

提供后台代理提醒能力

导入系统提醒服务类ReminderService.ets，它由系统后台代理提醒能力封装，支持新增、修改、删除系统闹钟功能，在设置、删除闹钟后同步更新到轻量级数据库中并刷新主页页面。

// DetailViewModel.ets
public async setAlarmRemind(alarmItem: AlarmItem) {alarmItem.hour = this.getAlarmTime(CommonConstants.DEFAULT_SINGLE);alarmItem.minute = this.getAlarmTime(CommonConstants.DEFAULT_DATA_PICKER_HOUR_SELECTION);let index = await this.findAlarmWithId(alarmItem.id);if (index !== CommonConstants.DEFAULT_NUMBER_NEGATIVE) { // 已存在，删除原有提醒this.reminderService.deleteReminder(alarmItem.id);} else { // 不存在，以数据长度为notificationId新增闹钟数据index = this.alarms.length;alarmItem.notificationId = index;this.alarms.push(alarmItem);}this.reminderService.addReminder(alarmItem, (newId: number) => {alarmItem.id = newId;alarmItem.isOpen = true;this.alarms[index] = alarmItem;let preference = GlobalContext.getContext().getObject('preference') as PreferencesHandler;preference.set(CommonConstants.ALARM_KEY, JSON.stringify(this.alarms));})
}public async removeAlarmRemind(id: number) {this.reminderService.deleteReminder(id);let index = await this.findAlarmWithId(id);if (index !== CommonConstants.DEFAULT_NUMBER_NEGATIVE) {this.alarms.splice(index, CommonConstants.DEFAULT_SINGLE);}let preference = GlobalContext.getContext().getObject('preference') as PreferencesHandler;preference.set(CommonConstants.ALARM_KEY, JSON.stringify(this.alarms));
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/3175.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数学建模完整版

数学建模完整版

模型与适用题型 微分方程传染病预测模型 神经网络 层次分析法 粒子群算法 matlab 优劣解距离法
阅读更多...
如何为Postgres数据库设置安全的访问控制和权限管理

如何为Postgres数据库设置安全的访问控制和权限管理

文章目录 解决方案1. 使用角色和权限管理2. 配置认证方法3. 使用网络访问控制4. 定期审查和更新权限 示例代码1. 创建角色并分配权限2. 配置密码认证3. 配置网络访问控制 总结 PostgreSQL是一个功能强大的开源关系型数据库系统&#xff0c;提供了丰富的权限和访问控制机制&…
阅读更多...
LLM大语言模型（十二）：关于ChatGLM3-6B不兼容Langchain 的Function Call

LLM大语言模型（十二）：关于ChatGLM3-6B不兼容Langchain 的Function Call

背景 基于本地的ChatGLM3-6B直接开发LangChain Function Call应用&#xff0c;发现其输出的action和action_input非常不稳定。 表现为生成的JSON格式回答非常容易出现不规范的情况&#xff0c;导致LangChain的Agent执行报错&#xff0c;或者进入死循环。 ChatGLM3-6B不兼容La…
阅读更多...
基于北京迅为iTOP-RK3588大语言模型部署测试

基于北京迅为iTOP-RK3588大语言模型部署测试

人工智能&#xff08;AI&#xff09;领域中的大模型&#xff08;Large Model&#xff09;逐渐成为研究的热点。大模型&#xff0c;顾名思义&#xff0c;是指拥有海量参数和高度复杂结构的深度学习模型。它的出现&#xff0c;不仅推动了AI技术的突破&#xff0c;更为各行各业带来…
阅读更多...
【C++】——类和对象（构造函数，析构函数，拷贝构造函数，赋值运算符重载）

【C++】——类和对象（构造函数，析构函数，拷贝构造函数，赋值运算符重载）

创作不易&#xff0c;多多支持&#xff01; 前言 相信你对这几个知识点有点混淆&#xff0c;相信看完以后&#xff0c;你会对此有一个清晰的认识。 一 类的6个默认成员函数 如果我们写一个类&#xff0c;但是类里面什么都没有&#xff0c;我们称之为空类。 其实这个类也不…
阅读更多...
DC-DC电源芯片规格书上的各种参数详解

DC-DC电源芯片规格书上的各种参数详解

1.输出电压精确度 输出电压的精确度，也被称为设定点精度，它描述了输出电压的允许误差。该参数通常是在常温，满载和额定输入电压的条件下测得的，它是这样定义的： 输出电压之所以产生误差，是因为元器件本身存在误差，特别是输出端的分压电阻，它将输出电压降低后比PWM比较…
阅读更多...
Mac装虚拟机好不好 Mac装虚拟机和装Windows系统一样吗 PD虚拟机

Mac装虚拟机好不好 Mac装虚拟机和装Windows系统一样吗 PD虚拟机

随着跨系统操作的不断发展&#xff0c;虚拟机技术在生产力领域扮演着越来越重要的角色。Mac作为一款主流的操作系统&#xff0c;也有着运行虚拟机的能力。接下来给大家介绍Mac装虚拟机好不好&#xff0c;Mac装虚拟机和装Windows系统一样吗的具体内容。 一、Mac装虚拟机好不好 …
阅读更多...
UNIX环境高级编程-＞高级IO(概念篇)

UNIX环境高级编程-＞高级IO(概念篇)

UINX环境 常见的操作系统比如Linux 和 MacOS都是基于UNIX的。它们都继承了UNIX的许多特性和设计理念。因此&#xff0c;它们的高级I/O技术确实是建立在UNIX基础之上的。Linux和macOS都提供了丰富的高级I/O功能和API&#xff0c;利用了UNIX系统调用和原则。这些功能包括非阻塞I…
阅读更多...
【Linux】自定义协议——实现网络序列化和反序列化

【Linux】自定义协议——实现网络序列化和反序列化

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;折纸花满衣 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;承接上文内容【Linux】应用层协议序列化和反序列化 目录 &#x1f449;&#x1f3fb;代码实现如下Calculate.hp…
阅读更多...
C语言-联合体基本概念

C语言-联合体基本概念

联合体的外在形式跟结构体非常类似&#xff0c;但它们有一个本质的区别&#xff1a;结构体中的各个成员是各自独立的&#xff0c;而联合体中的各个成员却共用同一块内存&#xff0c;因此联合体也称为共用体。 联合体内部成员的这种特殊的“堆叠”效果&#xff0c;使得联合体有如…
阅读更多...
Ollama完成本地模型的运行

Ollama完成本地模型的运行

Ollama完成本地模型的运行 llama 3 8b很多pc都可以run起来，可以用这个练练手 简介 Ollama 是一个开源的大型语言模型（LLM）服务工具，它允许用户在本地运行和使用各种大型语言模型。Ollama 提供了一个命令行界面，支持多种流行的模型，如 Llama 3、Qwen 1.5、Mixtral、Gemma…
阅读更多...
MapMagic 2 Biomes and Functions

MapMagic 2 Biomes and Functions

MapMagic 2（免费）世界生成器官方模块。支持基于遮罩混合几个图形，从而可以在无限地形上混合不同的生物群落。也随附函数节点，从而可以在子图中执行复杂的生成过程。将它们视作含有输入和输出连接器的生物群落。请注意，必须使用 MapMagic 2 的现有安装才能使用该模块。 下…
阅读更多...
(一)JVM实战——jvm的组成部分详解

(一)JVM实战——jvm的组成部分详解

前言 本节内容是关于java虚拟机JVM组成部分的介绍&#xff0c;通过其组成架构图了解JVM的主要组成部分。 正文 ClassFile&#xff1a;字节码文件 - javac&#xff1a;javac前端编译器将源代码编译成符合jvm规范的.class文件&#xff0c;即字节码文件 - class文件的结构组成&a…
阅读更多...
数据变更捕获 (CDC)：PostgreSQL 与 ClickHouse - 第一部分

数据变更捕获 (CDC)：PostgreSQL 与 ClickHouse - 第一部分

本文字数&#xff1a;13442&#xff1b;估计阅读时间&#xff1a;34 分钟 审校&#xff1a;庄晓东&#xff08;魏庄&#xff09; 本文在公众号【ClickHouseInc】首发 简介 在之前的文章中&#xff0c;我们已经讨论了OLTP数据库&#xff08;例如Postgres&#xff09;和OLAP数据…
阅读更多...
【go零基础】go-zero从零基础学习到实战教程 - 1项目表设计

【go零基础】go-zero从零基础学习到实战教程 - 1项目表设计

既然是0基础&#xff0c;现在来写下设计思路&#xff0c;因为go-zero是个微服务架构&#xff0c;所以&#xff0c;哪怕是0基础&#xff0c;也从两个服务模块开始写起。 我们的目标是&#xff1a;最小可用微服务架构最佳实践&#xff01; 好了&#xff0c;饼画完了。 第0部分写到…
阅读更多...
504网关超时可能是哪些原因导致

504网关超时可能是哪些原因导致

当前随时互联网的发展普及&#xff0c;我们经常会使用到网站服务&#xff0c;许多网站为了提高打开速度&#xff0c;都会接入使用CDN。当我们在浏览网页或使用网络服务时&#xff0c;有时候可能有遇到网站打不开的情况&#xff0c;出现各式各样的错误代码&#xff0c;其中504网…
阅读更多...
【注解和反射】通过反射动态创建对象、调用普通方法、操作属性

【注解和反射】通过反射动态创建对象、调用普通方法、操作属性

继上一篇博客【注解和反射】获取类运行时结构-CSDN博客 目录 八、通过反射动态创建对象 测试&#xff1a;通过反射动态创建对象 思考&#xff1a;难道没有无参的构造器就不能创建对象了吗?只要在操作的时候明确的调用类中的构造器并将参数传递进去之后&#xff0c;才可以实…
阅读更多...
三维图形程序员必学-CGAL几何算法

三维图形程序员必学-CGAL几何算法

GCAL几何算法库，涵盖了很多数学几何算法，矩阵运算、平面拟合、曲线拟合、曲面重建、网格优化、网格剖分、面线相交、布尔运算等等各种图形学几何相关的算法。 文章最后放了一个CGAL求点集拟合平面，投影求线的例子代码。 CGAL是一个开源代码库，官网连接GitHub - CGAL/cgal…
阅读更多...
网络安全之弱口令与命令爆破（上篇）（技术进阶）

网络安全之弱口令与命令爆破（上篇）（技术进阶）

目录 一&#xff0c;什么是弱口令&#xff1f; 二&#xff0c;为什么会产生弱口令呢&#xff1f; 三&#xff0c;字典的生成 四&#xff0c;使用Burpsuite工具弱口令爆破 总结 一&#xff0c;什么是弱口令&#xff1f; 弱口令就是容易被人们所能猜到的密码呗&#xff0c;…
阅读更多...
Linux动态追踪——eBPF

Linux动态追踪——eBPF

目录 摘要 1 什么是 eBPF 2 eBPF 支持的功能 3 BCC 4 编写脚本 5 总结 6 附 摘要 ftrace 和 perf 与 ebpf 同为 linux 内核提供的动态追踪工具&#xff0c;其中 ftrace 侧重于事件跟踪和内核行为的实时分析&#xff0c;perf 更侧重于性能分析和事件统计&#xff0c;与…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023