开发一个灵感速记APP

河希

于 2024-08-20 03:32:43 发布

阅读量16

点赞数

1 简介

生活中的零碎信息太容易忘记，｢灵感速记｣作为记录琐碎的小帮手，时刻记录用户关心的内容，分类整理，高效编辑，快捷分享。Less is More，借助HarmonyOS NEXT丰富的原生能力，一步操作完成各种所想，抓住每一刻灵感。视频简介：灵感速记https://ost.51cto.com/show/29442

目标用户：学生、记者、产品经理、艺术创作者

本篇将介绍如何使用HarmonyOS NEXT原生能力开发灵感速记APP。效果为：

化繁为简，便捷高效
- 聊天式一键添加备忘、关联日程、强提醒消息、私密消息等轻量笔记。
- 可分类、搜索、分享、删除等管理记录的每条内容。
统一生态，有趣好用:
- 可共享消息到生态互联设备（灵动看板）。
- 支持多端布局。

2 环境搭建

我们首先需要完成HarmonyOS开发环境搭建，可参照如下步骤进行。

软件要求

DevEco Studio版本：DevEco Studio NEXT Developer Preview2及以上。
HarmonyOS SDK版本：HarmonyOS NEXT Developer Preview2 SDK及以上。

开发一个灵感速记APP_sql_04

硬件要求

设备类型：华为手机。
HarmonyOS系统：HarmonyOS NEXT Developer Preview2及以上。

环境搭建

安装DevEco Studio，详情请参考下载和安装软件。
设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，详情请参考配置开发环境。
开发者可以参考以下链接，完成设备调试的相关配置：
- 使用真机进行调试

3 代码结构解读

本篇文档只对核心代码进行讲解，对于完整代码，开源后提供下载链接。

.
|-- common
|   |-- BreakPointSystem.ets //断点-多端布局
|   |-- CommonConstant.ets   //常量
|   |-- DateUtil.ets         //时间日期工具
|   |-- InspiDataModule.ets  //灵感数据模型
|   |-- Logger.ets           //日志工具
|   |-- calendar.ets         //日历日程工具
|   |-- database             //RDB数据库，实现持久化存储
|   |   |-- InspirationTable.ets
|   |   |-- RDB.ets
|   |   `-- inspirationData.ets
|   |-- messageManager       //后台提醒、日程消息
|   |   |-- BackgroundReminder.ets
|   |   `-- CalenderMeaasge.ets
|   |-- microphone           //语音输入
|   |   `-- Recorder.ets
|   `-- shareTool.ets        //分享工具
|-- entryability
|   `-- EntryAbility.ts   
|-- entryformability
|   `-- EntryFormAbility.ets
|-- pages
|   |-- Index.ets            //入口页面
|   `-- SettingPage.ets      //设置页面
|-- subview                    
|   |-- AddPanel.ets            //添加笔记组件
|   |-- InspiComponent.ets      //笔记列表组件
|   |-- InspirationItemView.ets //单条笔记组件
|   |-- InspirationTotalView.ets//笔记分类视图
`-- widget22
    `-- pages
        `-- Widget22Card.ets    //2*2桌面卡片

4 构建应用主界面

灵感速记应用程序遵循多端、极简页面、功能一触即达的设计理念。以手机端为例，如下图所示，首页布局了95%的功能，自下而上依次是添加和共享笔记、笔记查看、管理笔记的三大功能区。
开发一个灵感速记APP_sql_05
在主页面中使用断点来分配布局，例如在手机端首页只展示消息列表视图，在折叠屏或平板上屏幕右侧新增了分类视图。整体的布局框架如下：

 build() {
    Stack() {
      Row() {
        Column() {
          // menu
	  Row（）{  ... }
          // inspiration内容
          // 配合List组件，循环渲染，可滚动内容
            List({ space: 6, scroller: this.listScroller }) {
              ForEach(this.Inspirations : this.searchInspirations,
                (item: InspirationData, index: number) => {
                  ListItem() {
                    InspirationItemView({
                      InspiItem: item,
                     ...
                 }) 
            }
      
          if (!this.isSearchPageShow && !this.isInsert && !this.isEditMode) {
            // 添加新内容+按钮
            Image($r('app.media.add_filled'))
            // 共享到灵动看板桌面 弹窗
            Image($r('app.media.panel_icon'))
              .onClick(() => {
                this.isShowDeskPanel = true
              })
        }
        .width(this.MycurrentBreakpoint != 'sm' ? '50%' : '100%') 
	  // 断点来实现多端布局
        if (this.MycurrentBreakpoint != 'sm') {
          Column() {
            // 内容按颜色整理的详情页
            InspirationTotalView({
              Inspirations: this.Inspirations
            })
          }
          .width('50%')
          .height('100%')
        }
      }.width('100%').height('100%')
    }
  }

5 笔记数据管理

数据定义

应用开发与数据结构息息相关，在进行其他功能开发前，规划如下灵感速记的数据，主要包含笔记文本内容、记录时间、类别、完成情况等。

export default class InspirationData {
  id: number = -1;
  inspirationName: string = '';
  updateTime: string = '';
  progressValue: number = 0;
  inspirationType:number = InspirationType.CREATE_IDEA;
  inspirationColor:string = CommonConstants.CREATE_COLOR;
  inspirationDone: boolean = false;
  inspirationAlarm: boolean  = false; 
  inspirationPic: string = '';
  inspirationPicIndex: number = 0;
  inspirationIcon: string ='app.media.create_idea_filled';
  constructor() {
    ...
  }
}

数据持久化

用户记录的笔记希望能持久化保存，便于用户随时查找翻阅笔记。
HarmonyOS NEXT中的ArkData （方舟数据管理）为开发者提供数据存储、数据管理和数据同步能力。其中，数据存储提供通用数据持久化能力，根据数据特点，分为用户首选项、键值型数据库和关系型数据库。灵感速记的数据较为复杂，选择关系型数据库（RDB）进行存储。

首先获取一个RdbStore，其中包括建库、建表、升降级等操作。

import { relationalStore } from '@kit.ArkData';
export default class Rdb {
  private rdbStore: relationalStore.RdbStore | null = null;
  private tableName: string;
  private sqlCreateTable: string;
  private columns: Array<string>;

  constructor(tableName: string, sqlCreateTable: string, columns: Array<string>) {
    this.tableName = tableName;
    this.sqlCreateTable = sqlCreateTable;
    this.columns = columns;
  }

  getRdbStore(callback: Function = () => {
  }) {
    let context: Context = getContext(this) as Context;
    relationalStore.getRdbStore( AppStorage.get('context'), CommonConstants.STORE_CONFIG, (err, rdb) => {
     ...
      this.rdbStore = rdb;
      this.rdbStore.executeSql(this.sqlCreateTable);
    });
  }

  insertData(data: relationalStore.ValuesBucket, callback: Function = () => {
  }) {
  
    let resFlag: boolean = false;
    const valueBucket: relationalStore.ValuesBucket = data;
    if (this.rdbStore) {
      this.rdbStore.insert(this.tableName, valueBucket, (err, ret) => {
        ...
      });
    }
  }

  deleteData(predicates: relationalStore.RdbPredicates, callback: Function = () => {
  }) {
    let resFlag: boolean = false;
    if (this.rdbStore) {
      this.rdbStore.delete(predicates, (err, ret) => {
...
      });
    }
  }

  updateData(predicates: relationalStore.RdbPredicates, data: relationalStore.ValuesBucket, callback: Function = () => {
  }) {
   
    let resFlag: boolean = false;
    const valueBucket: relationalStore.ValuesBucket = data;
    if (this.rdbStore) {
      this.rdbStore.update(valueBucket, predicates, (err, ret) => {
       ...
      });
    }
  }

  query(predicates: relationalStore.RdbPredicates, callback: Function = () => {
  }) {
    
    if (this.rdbStore) {
      this.rdbStore.query(predicates, this.columns, (err, resultSet) => {
       ..
      });
    }
  }
}

其次创建灵感速记笔记的RDB数据表,赋予数据的增删改查能力。

import { relationalStore } from '@kit.ArkData';
import Rdb from './RDB';

export  class InspirationTable {
  private accountTable = new Rdb(CommonConstants.INSPIRATION_TABLE.tableName, CommonConstants.INSPIRATION_TABLE.sqlCreate,
    CommonConstants.INSPIRATION_TABLE.columns);

  constructor(callback: Function = () => {
  }) {
    this.accountTable.getRdbStore(callback);
  }

  getRdbStore(callback: Function = () => {
  }) {
    this.accountTable.getRdbStore(callback);
  }

  insertData(inspiration: InspirationData, callback: Function) {
...
    this.accountTable.insertData(valueBucket, callback);
  }

  deleteData(inspiration: InspirationData, callback: Function) {
...
    this.accountTable.deleteData(predicates, callback);
  }

  updateData(inspiration: InspirationData, callback: Function) {
...
    this.accountTable.updateData(predicates, valueBucket, callback); 
  }
InspirationTable()
export default  new InspirationTable() ; 
function generateBucket(inspiration: InspirationData): relationalStore.ValuesBucket {
  let obj: relationalStore.ValuesBucket = {};
  obj.inspirationName = inspiration.inspirationName;
  obj.updateTime = inspiration.updateTime;
...
  return obj;
}

6 笔记功能开发

展示的每条笔记都是一个List元素，默认是一条高度固定的消息条。在用户单击后Item后，通过条件渲染，启用如下编辑选项：选择类别、可编辑内容、复制与华为分享、插入图片。

选择类别
每种笔记类别都有专属的图标和颜色，根据用户的选择实时渲染整条List Item,如下所示为用户选择默认紫色灵感类别时，临时渲染的内容做相应的渲染，当用户选择√后，再做持久化保存。

        // idea type button
        if (this.isExpanded) {
          Row({ space: 10 }) {
            Button({ type: ButtonType.Circle, stateEffect: true }) {
              Image($r(CommonConstants.CREATE_IMG))
                .fancyImage(20)
            }.fancyButton(CommonConstants.CREATE_COLOR)
            .onClick(() => {
              this.InspiItem.inspirationColor = CommonConstants.CREATE_COLOR
              this.InspiItem.inspirationType = InspirationType.CREATE_IDEA
              this.InspiItem.inspirationIcon = CommonConstants.CREATE_IMG
            })
		...
          }.justifyContent(FlexAlign.Center).width(this.edite_width)
          .position({ x: 0, y: -15 })
        }

如果用户选择了强提醒类别，会触发通知时间设置，到点自动发送通知和震动响铃。
开发一个灵感速记APP_ide_06

                    if (this.InspiItem.inspirationType === InspirationType.ATTENTION_IDEA) {
                      DatePickerDialog.show({
                        start: this.startDate,
                        end: new Date("2100-12-31"),
                        selected: this.selectedDate,
                        showTime: true,
                        useMilitaryTime: true,
                        disappearTextStyle: {
                          color: CommonConstants.ATTENTION_COLOR,
                          font: { size: '14fp', weight: FontWeight.Bold }
                        },
                        textStyle: {
                          color: CommonConstants.ATTENTION_COLOR,
                          font: { size: '18fp', weight: FontWeight.Normal }
                        },
                        selectedTextStyle: { color: '#ff182431', font: { size: '22fp', weight: FontWeight.Regular } },
                        onDateAccept: (value: Date) => {
                          // 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期
                          this.selectedDate = value
                          BackgroundReminder.publishReminder(this.InspiItem, value);
                          if (this.updateItem !== undefined) {
                            console.info('inspitest-点击修改内容')
                            this.updateItem(this.isInsert, this.InspiItem)
                            this.isInsert = false
                          }
                          // this.isExpanded = false;
                          this.animationClick(false);
                        }
                    }

如果用户选择了日程类别，会触发日程时间选择，自动关联到系统日历。
开发一个灵感速记APP_ide_07

else if (this.InspiItem.inspirationType === InspirationType.TODO_IDEA) {
                      CalendarPickerDialog.show({
                        selected: this.selectedDate,
                        onAccept: (value) => {
                          CalenderMessage.publishCalenderEvent(this.InspiItem, value);
                          if (this.updateItem !== undefined) {
                            console.info('inspitest-点击修改内容')
                            this.updateItem(this.isInsert, this.InspiItem)
                            this.isInsert = false
                          }
                          // this.isExpanded = false;
                          this.animationClick(false);
                          console.info("calendar onAccept:" + JSON.stringify(value))
                        }
                      })
                    }

可编辑内容
笔记内容包括最近编辑时间（Text）、可编辑笔记文本（InpuText）、选择的图片（Image）。这部分功能使用基础组件即可实现。
复制、华为分享
- 使用pasteboard接口实现复制。

 // copy
              Column() {
                  Image($r('app.media.ic_public_copy')).fancyImage(25)
                }
                .width('20%')
                .onClick(() => {
                  if (this.TempInspiName === '') {
                    promptAction.showToast({
                      message: '内容为空',
                      duration: 1500
                    })
                    return;
                  }
                  let text: string = this.TempInspiName;
                  let pasteData: pasteboard.PasteData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, text);
                  let systemPasteBoard: pasteboard.SystemPasteboard = pasteboard.getSystemPasteboard();
                  systemPasteBoard.setData(pasteData).catch((err: BusinessError) => {
                    console.error(`Failed to set pastedata. Code: ${err.code}, message: ${err.message}`);
                  });
                  let subText = this.TempInspiName.substring(0, 4);
                  if (subText.length < this.TempInspiName.length) { //只提示部分内容
                    subText = subText + '...'
                  }
                })

使用systemShare接口即可实现华为分享。

                // share
                Column() {
                  Image($r('app.media.ic_public_share')).fancyImage(25)
                }.width('20%')
                .onClick(() => {
                  let ShareDta: systemShare.SharedData = new systemShare.SharedData({
                    utd: utd.UniformDataType.PLAIN_TEXT,
                    content: this.TempInspiName
                  });
                  // 构建ShareController
                  let ShareController: systemShare.ShareController = new systemShare.ShareController(ShareDta);
                  // 获取UIAbility上下文对象
                  let ShareContext: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
                  // 注册分享面板关闭监听
                  ShareController.on('dismiss', () => {
                    console.log('Share panel closed');
                    // 分享结束，可处理其他业务。
                  });
                  // 进行分享面板显示
                  ShareController.show(ShareContext, {
                    previewMode: systemShare.SharePreviewMode.DETAIL,
                    selectionMode: systemShare.SelectionMode.SINGLE
                  });
                })

插入图片
通过picker.PhotoViewPicker访问用户相机和相册,保护用户隐私，使用也快捷方便。

 //add camera or photoPicker
                Column() {
                  Image($r('app.media.ic_public_camera'))
                    .fancyImage(25)
                }
                .width('16%')
                .onClick(() => {
                  if (this.TempInspiPicIndex < 5) {
                    const photoSelectOptions = new picker.PhotoSelectOptions();
                    photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
                    photoSelectOptions.maxSelectNumber = 5 - this.TempInspiPicIndex;
                    const photoViewPicker = new picker.PhotoViewPicker();
                    //调用select()接口拉起图库界面进行文件选择,文件选择成功后，返回PhotoSelectResult结果集
                    photoViewPicker.select(photoSelectOptions)
                      .then(async (photoSelectResult: picker.PhotoSelectResult) => {
                        //用一个全局变量存储返回的uri
                        this.selectedImage = photoSelectResult.photoUris
                        for (let i = 0; i < photoSelectResult.photoUris.length; i += 1) {
                          this.TempInspiPic += photoSelectResult.photoUris[i] + '|';
                          this.TempInspiPicIndex += 1;
                        }                       
                        console.info('photoViewPicker.select to file succeed and uris are:' + this.TempInspiPic);            
                      })
                      .catch((err: BusinessError) => {
                        console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
                      })
                  } else {
                    promptAction.showToast({
                      message: '图片超出限制',
                      duration: 1500
                    })
                  }
                })

通过开发上述编辑选项功能，实现的内容编辑效果如下图所示：
开发一个灵感速记APP_数据_09

7 动效开发

APP的开发离不开动画，HarmonyOS NEXT ArkUI中提供多种动画接口（属性动画、转场动画等），灵感速记中使用了转场动画、弹簧效果等动效，给用户舒适的视觉体验。
通过基础的组件转场接口transition与TransitionEffect的组合使用，定义出一镜到底的操作效果。如笔记内容在展开或收起时，加入下动画修饰：

          .transition(TransitionEffect.asymmetric(
            TransitionEffect.opacity(0)
              .animation({ curve: curves.cubicBezierCurve(0.33, 0, 0.67, 1), duration: 200, delay: 150 }),
            TransitionEffect.opacity(0)
              .animation({ curve: curves.cubicBezierCurve(0.33, 0, 0.67, 1), duration: 200 }),
          ))

笔记展开、收起动画效果立竿见影：
开发一个灵感速记APP_数据_10

8 共享消息与灵动看板

灵感速记的共享消息功能，是将APP记录的内容分享到生态硬件（灵动看板），在灵动开板上点击完成，APP也有相应的记录。共享消息功能将笔记“用起来”，挖掘更多应用场景。共享消息功能主要使用了IoT技术实现，技术思路如下图：
开发一个灵感速记APP_sql_11
在APP内置了本地html网页，用于实现配置mqtt参数以及收发数据，该过程涉及应用侧与前端页面的交互，HarmonyOS NEXT的 ArkWeb（方舟Web）提供了能力运行前端JavaScript函数、数据双向传输等能力。
这里讲解如何实现html与ArkTS之间数据交互。
首先,在启动app时,要在Index.ets的aboutToAppear()中创建一个和H5页面通信的消息通道,实现如下:

  TryWebPort(): void {
    try {
      // 1、创建两个消息端口。
      this.ports = this.webviewController.createWebMessagePorts();
      // 2、在应用侧的消息端口(如端口1)上注册回调事件。
      this.ports[1].onMessageEvent((result: web_webview.WebMessage) => {
        let msg = 'Got msg from HTML:';
 ...

      })
      // 3、将另一个消息端口(如端口0)发送到HTML侧，由HTML侧保存并使用。
      this.webviewController.postMessage('__init_port__', [this.ports[0]], '*');
    } catch (error) {
      promptAction.showToast({duration:2000,message:'发送失败'})
      let e: business_error.BusinessError = error as business_error.BusinessError;
      console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
    }
  }

其次,需要在本地src/main/resources/rawfile/index.html 中创建一个用于接收的监听端口,具体实现如下:

// 页面
var h5Port;
var output = document.querySelector('.output');
window.addEventListener('message', function (event) {
    if (event.data === '__init_port__') {
        if (event.ports[0] !== null) {
            h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口
            h5Port.onmessage = function (event) {
              // 2. 接收ets侧发送过来的消息.
              var msg = 'Got message from ets:';
              var result = event.data;
              if (typeof(result) === 'string') {
                console.info(`received string message from html5, string is: ${result}`);
                msg = result;
              } else if (typeof(result) === 'object') {
                if (result instanceof ArrayBuffer) {
                  console.info(`received arraybuffer from html5, length is: ${result.byteLength}`);
                  msg = msg + 'lenght is ' + result.byteLength;
                } else {
                  console.info('not support');
                }
              } else {
                console.info('not support');
              }
              // this.PositionName  = msg.toString();
      
            }
        }
    }
})

本地的H5可以通过与ets建立的消息通道,直接发送数据到用户页面,这个通道也可以用来接收H5发送回来的数据.

// 使用h5Port往ets侧发送消息.
function PostMsgToEts(data) {
    console.info('H5 to Ets data:'+data);
    if (h5Port) {
      h5Port.postMessage(data);
    } else {
      console.error('h5Port is null, Please initialize first');
    }
}
// 调用接口发送数据到ets用户页面,便于存储和展示
this.PostMsgToEts(jsonObjTaskNumber.toString()+jsonObjTaskChecked.toString());

开发一个灵感速记APP_sql_12

本文作者： Hello_Kun

想了解更多关于鸿蒙的内容，请访问：

51CTO鸿蒙开发者社区

https://ost.51cto.com/#bkwz

原创作者: harmonyos 转载于: https://blog.51cto.com/harmonyos/11784702

河希

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫