鸿蒙| AI智能辅助编程工具

839 阅读8分钟

鸿蒙| AI智能辅助编程工具

ps:前几天翻文档偶然发现鸿蒙出了AI辅助编程工具,本来抱着从此之后再也不用动脑子解放双手,也担心这个工具出来之后是不是门槛越来越低,结果使用几天后一言难尽。。。

1.使用约束

2024.08.08更新最新一版工具,使用前提就是使用DevEco Studio 5.0.3.403及以上版本,如果想试试这个工具最好提前更新一下编译器版本。

2.安装插件

2.1.报名

由于DevEco CodeGenie还是尝鲜版本,所以如果想要下载之前必须报名申请(DevEco CodeGenie 开发者预览版 Beta招募)。

image-20240815115433306

估计申请完需要等个两天,耐心等待吧。。。

3bd3dc9046a9e457685782070c5a61b8.gif

2.2.安装

报名申请审核通过后,可通过邮件链接或访问下载中心获取。

image-20240815120212268.png

下载完成之后安装包存放路径不能包含中文字符,安装包无需解压,安装过程可如下图。

在DevEco Studio菜单栏,点击File > Settings(macOS为DevEco Studio > Preferences> Plugins,点击 Install Plugin from Disk…,在弹出的文件选择窗口中,选择插件安装包的存放位置,点击Accept确认使用插件。

image-20240815120440882

image-20240815120827584

  1. 点击

    Restart IDE

    ,重新启动DevEco Studio。

    img

  2. 在菜单栏点击

    Help > CodeGenie,或在DevEco Studio右侧边栏点击CodeGenie

    进入DevEco CodeGenie,插件安装成功。

    image-20240815121022228

3.使用

当你终于申请到并安装好这个插件,满心期待准备用它干出一番大事业之时,现实给了你邦邦两拳。

1c8db2b112ca7a85610e46c4c87244ce.gif

3.1.登录

首先每次使用这个插件必须得登录华为账号,并且不能保存记录。(可能以后出正式版就会更新好吧,真的觉得有点麻烦)

image-20240815121704298

3.2.功能

重点说一下这个插件的三大功能,智能知识问答、ArkTS代码补全/生成和万能卡片生成。

3.2.1 智能知识问答

基于生成式搜索能力,通过查询生成、内容优选服务精准理解用户意图,问答交互式地获取HarmonyOS NEXT领域知识。

示例

在对话框中选择知识问答,输入需要查询的问题。例如:ColorMode的值为多少代表未设置颜色模式?

问答效果示例:

PixPin_2024-08-15_14-54-04

1.是市面上唯一可以解答有关于鸿蒙的问题的AI工具

2.基本上官方文档有的api和其他知识点都有,并且可以整合起来,更加有利于开发者去学习鸿蒙。

3.不过经常会出现回答问题驴唇不对马嘴,尤其涉及到逻辑方面

3.2.2代码补全和代码生成

通过AI大模型理解开发者代码的上下文信息或自然语言描述信息,智能生成符合上下文的代码片段。

  1. 当前暂不支持自动补全功能,可采用快捷键 alt+\ 手动触发。

  2. 模型反馈需满足规则:光标上文10行内有有效代码行数超过5行(排除单独{}、()、[]括号行、空行、纯注释行场景)使模型能理解代码上下文。

  3. 代码补全快捷键操作指引:

    • Alt + \(macOS为option + \):触发代码补全,显示灰度代码

    • Tab:应用灰度的生成代码
    • Esc:取消灰度的生成代码
    • Ctrl + 1(macOS为command + 1):token级应用灰度代码
    • Ctrl + 2(macOS为command + 2):token级回退灰度代码

      可以在File > Settings (macOS为DevEco Studio > Preferences> Tools > CodeGenie 中修改代码补全相关配置。

使用方法

支持在编辑区域依据代码上文推断续写内容,在已有的代码行后快捷键 alt+\触发补全,Tab键应用到代码中,Esc键取消补全代码。

效果示例:

image-20240815145009443

在对话框中选择代码生成,依据自然语言生成鸿蒙原生应用代码,支持一键复制和一键插入编辑区域光标所在位置。

代码补全暂时不能完全理解开发者的想法,而且对于初学者反而会适得其反,

如果发现只能一次补充三行代码,会出现报错。(如果出现这种情况可以不断alt+\直到不出现错误)

3.2.3 万能卡片

基于AI大模型理解开发者的卡片需求信息,通过对话式的交互智能生成HamonyOS万能卡片工程。

使用约束

\1. 建议从以下维度描述卡片需求:

| 序号 | 建议描述维度 | 说明 | 举例 | | -------- | ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | 1 | 卡片用途 | 卡片的用途/业务场景,比如直播类、美食推荐类、热映电影等 | 例如“直播类卡片”、“美食推荐类卡片” | | 2 | 卡片功能 | 卡片包含的组件,如图标、标题、按钮等;组件的状态信息,如图标主题、标题内容、按钮显示的文字等 | 例如“新品上市主标题”、“商品搜索按钮”、“热门电影子板块入口”等 | | 3 | 卡片尺寸 | HamonyOS官网提供的四种卡片尺寸:12(微卡片)、22(小卡片)、24(中卡片)、44(大卡片);卡片尺寸非必选项,AI会根据前两个维度描述的信息,智能选择效果最佳的尺寸 | 例如“2*2尺寸的卡片”、“中卡片”等 |

\2. 当前不支持在生成卡片预览图后继续描述需求进行增量修改。

万能卡片生成

  1. 在对话框中选择万能卡片,输入需要生成的万能卡片需求并发送,可以根据模型的提示进行多轮交互,完善需求。

  2. 需求描述完成后,智能生成卡片(1~3张)及预览效果图。

生成效果示例:

0000000000011111111.20240807193653.36995586423229047879545395111638500012310000002800E1149158BF36586D949B8514D8606CF5C89789955A836C315CB31001C63DF74E-172370410447316.gif

保存生成的卡片

  1. 点击img快捷键可查看生成卡片的UI代码、配置信息和下载静态资源文件。
  2. 保存卡片工程有两种方式:

方式一:使用代码/配置查看窗口的“复制”、“插入”或“创建文件”等快捷键手动保存卡片代码和配置信息。

方式二:点击“保存工程”快捷键自动保存卡片工程,卡片代码、配置、静态资源文件等会自动保存到工程对应目录中。

流程示例:

image-20240815154555104

工程保存完成后,工程中会新增如下卡片相关文件:

img

用户自定义配置逻辑代码

逻辑代码包含实现卡片数据交互和卡片事件两类。

  • 卡片数据交互:触发卡片页面刷新。应用工程生成的卡片数据交互可通过数据库或网络请求两种方式来触发卡片页面刷新;对于元服务工程生成的卡片,数据交互为通过网络请求方式触发卡片页面刷新。
  • 卡片事件:使用router事件跳转到指定的UIAbility、使用call事件拉起UIAbility到后台、使用message事件刷新卡片内容。

目录结构

在module > src > main > ets 路径下, formcommon目录用于存放生成卡片的逻辑代码。

img

  • formsetting:存放用户可配置的文件。

    • formsetting > formdbsetting:自定义配置以数据库方式进行卡片刷新的相关参数。

      • formdbsetting > formdbinfo:存放包含卡片信息的Info.ets文件,可在Info.ets文件中,添加卡片刷新所需要的具体的数据,后续会读取该文件并将数据存入数据库中。

      • UserSettings.ets:可以自定义卡片刷新时从数据库获取数据的规则、数据解析规则、message内容刷新规则。

    • formsetting > formhttpsetting:自定义配置以网络请求方式进行卡片刷新的相关参数。

      • formhttpsetting > formhttpinfo:存放包含卡片信息的Info.ets文件,可在Info.ets文件中添加获取卡片刷新数据的URL。

      • UserSettings.ets:可以自定义卡片刷新时从URL获取数据的规则、数据解析规则、message内容刷新规则。

        说明

        如需使用网络请求方式刷新卡片页面,需在EntryFormAbility.ets文件中将FormDbUpdate的接口注释掉,并将启用FormHttpUpdate接口。

    • formsetting > FormAction.ets:配置卡片事件。

  • utils:存放工具类的目录,用户不可修改,如果修改再次生成逻辑代码时utils目录会被刷新。

自定义配置卡片事件

0000000000011111111.20240807193654.2047673593088079853868910633740550001231000000280003086168A4825CAE313F0E77D946D32FC1B98D3BABE19F18814915BB4E4B57FB.png

  1. 可以在FormAction.ets文件中配置触发卡片router事件时具体的页面分发规则。

  2. 在EntryAbility.ets文件的onWindowStageCreate方法中会插入页面分发接口的调用,示例如下:

img

此接口默认插入到方法开头,可根据当前工程onWindowStageCreate逻辑来将此接口移动至合适的位置,保证页面能正常跳转。

*本文部分参考来自华为鸿蒙应用开发文档*

现在市面上并没有关于鸿蒙的AI工具,虽然现在这个插件还有许多问题,但是现在仅仅只是测试版未来还有许多可以加强的方面,目前对于帮助开发者开发设计可能还有所欠缺,但对于初学者想要学习鸿蒙可以提供一些帮助。