这是一个使用鸿蒙技术开发的本地原生记账应用,非常适合大家用来练手。相关源码已上传至 Github,点击此处查看项目。欢迎大家交流、指正,也欢迎提交 PR。

一、引言

随着HarmonyOS生态的快速发展,越来越多的开发者开始关注鸿蒙应用开发。而AI编程工具的加入,更是让鸿蒙开发的门槛大幅降低。本文将详细介绍如何使用华为提供的AI辅助编程工具(如CodeGenie、DevEco Code等),通过自然语言描述需求,让 AI 自动生成符合 ArkTS 规范的代码,并结合 IDE 的编译、预览和调试能力完成开发闭环。

二、使用AI开发鸿蒙应用的核心步骤

使用AI开发鸿蒙应用的整体流程可以分为以下几个主要步骤:

  1. 准备开发环境:安装DevEco Studio并启用AI插件
  2. 创建工程:选择合适的模板创建项目
  3. 通过AI描述需求生成代码:用自然语言让AI生成ArkTS代码
  4. 编译构建与UI预览:实时预览界面效果
  5. 在模拟器或真机上运行验证:测试功能是否正常
  6. AI辅助修复错误与优化:利用AI分析日志并修复问题
  7. 完成开发并打包上架:发布应用到应用市场

2.1 准备开发环境

首先,需要安装DevEco Studio(建议6.0.2 Release及以上版本),并在其中启用CodeGenie AI辅助编程插件。CodeGenie提供智能知识问答、ArkTS代码生成与补全、万能卡片生成、UI界面生成等能力。

安装步骤:

  1. 通过华为开发者官网下载中心获取插件包
  2. 在DevEco Studio中依次点击 File > Settings > Plugins > Install Plugin from Disk 导入
  3. 重启IDE
  4. 使用华为开发者账号登录授权

2.2 创建工程

在DevEco Studio中点击 Create Project,选择 Application 开发,选择"Empty Ability"模板,配置 Compatible SDK(如选择5.0.0(12)或更高版本),点击 Finish 完成工程创建。

2.3 通过AI描述需求生成代码

在DevEco Studio右侧边栏打开CodeGenie面板(或使用快捷键 Alt/Option+U),在对话框中用自然语言描述你想要实现的功能,AI会自动生成符合ArkTS语法规范的代码。

从DevEco Studio 6.0.2 Release开始,代码修改使用 HarmonyOS Act 智能体,生成的内容可直接应用到代码文件中,并支持自动编译验证。

2.4 编译构建与UI预览

利用DevEco Studio提供的多端双向实时预览功能,在UI编码时快速预览界面在多种设备上的显示效果。如有编译错误,可将错误信息反馈给AI进行修复。

2.5 在模拟器或真机上运行验证

使用DevEco Studio内置的模拟器或连接真机设备运行应用,验证功能是否正常。DevEco CLI也提供了 devecocli run 等命令行能力,支持AI Agent自动调度运行。

2.6 AI辅助修复错误与优化

遇到运行时崩溃或逻辑问题,可将日志或错误信息提供给AI,AI会分析并给出修复建议。DevEco Code的运行时日志修复Skill甚至能自动分析崩溃日志并修复代码。

三、实战示例:使用AI开发一个待办事项应用

下面通过一个完整的示例,展示如何通过CodeGenie以自然语言描述需求后,AI生成的完整可运行代码。

3.1 需求描述

CodeGenie 中输入以下自然语言描述:

“创建一个待办事项页面,支持添加任务、标记完成、删除任务,使用Column和List布局,顶部有输入框和添加按钮”

3.2 AI生成的完整代码

AI生成的代码如下:

// TodoListPage.ets

// 使用 @Observed 装饰类,使其属性变化可被 @ObjectLink 监听
@Observed
class TodoItem {
  id: number
  title: string
  isCompleted: boolean

  constructor(id: number, title: string, isCompleted: boolean) {
    this.id = id
    this.title = title
    this.isCompleted = isCompleted
  }
}

// 全局唯一ID生成器
let nextTodoId: number = 1

// 单个待办事项子组件
// 使用 @ObjectLink 监听 @Observed 类实例的属性变化
@Component
struct TodoItemView {
  @ObjectLink item: TodoItem
  onToggle: (id: number) => void = (id: number) => {}
  onDelete: (id: number) => void = (id: number) => {}

  build() {
    Row({ space: 10 }) {
      // 完成状态复选框
      Checkbox()
        .select(this.item.isCompleted)
        .onChange((isChecked: boolean) => {
          this.onToggle(this.item.id)
        })

      // 任务标题
      // 已完成:浅灰色文字(#BBBBBB) + 浅灰色中划线
      // 未完成:深色文字(#333333) + 无划线
      Text(this.item.title)
        .fontSize(16)
        .layoutWeight(1)
        .decoration({
          type: this.item.isCompleted ? TextDecorationType.LineThrough : TextDecorationType.None,
          color: this.item.isCompleted ? '#BBBBBB' : '#333333'
        })
        .fontColor(this.item.isCompleted ? '#BBBBBB' : '#333333')

      // 删除按钮
      Button('删除')
        .fontSize(14)
        .height(32)
        .backgroundColor('#FF5555')
        .onClick(() => {
          this.onDelete(this.item.id)
        })
    }
    .width('100%')
    .padding(10)
    .borderRadius(8)
    .backgroundColor('#F5F5F5')
  }
}

@Entry
@Component
struct TodoListPage {
  // 待办事项列表状态
  @State todoList: TodoItem[] = []
  // 输入框文本状态
  @State inputText: string = ''

  // 添加待办事项(新增项插入到列表最上方)
  addTodo(): void {
    const trimmedText: string = this.inputText.trim()
    if (trimmedText.length === 0) {
      return
    }
    const newTodo: TodoItem = new TodoItem(nextTodoId, trimmedText, false)
    // 使用 unshift 将新事项插入到列表头部
    this.todoList.unshift(newTodo)
    nextTodoId += 1
    this.inputText = ''
  }

  // 切换完成状态,并将已完成项排到列表末尾
  toggleTodo(id: number): void {
    // 第一步:找到对应项并切换完成状态
    for (let i: number = 0; i < this.todoList.length; i++) {
      if (this.todoList[i].id === id) {
        this.todoList[i].isCompleted = !this.todoList[i].isCompleted
        break
      }
    }
    // 第二步:对列表重新排序,未完成项在前,已完成项在后
    // 各组内部保持原有相对顺序(稳定排序)
    const uncompleted: TodoItem[] = this.todoList.filter((item: TodoItem) => !item.isCompleted)
    const completed: TodoItem[] = this.todoList.filter((item: TodoItem) => item.isCompleted)
    this.todoList = uncompleted.concat(completed)
  }

  // 删除待办事项
  deleteTodo(id: number): void {
    this.todoList = this.todoList.filter((item: TodoItem) => item.id !== id)
  }

  build() {
    Column({ space: 12 }) {
      // 标题
      Text('待办事项')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 8 })

      // 输入区域:输入框 + 添加按钮
      Row({ space: 8 }) {
        TextInput({
          text: this.inputText,
          placeholder: '请输入任务内容'
        })
          .width('70%')
          .height(40)
          .onChange((value: string) => {
            this.inputText = value
          })

        Button('添加')
          .width('25%')
          .height(40)
          .onClick(() => {
            this.addTodo()
          })
      }
      .width('90%')

      // 待办列表
      if (this.todoList.length === 0) {
        // 空状态提示
        Column() {
          Text('暂无待办事项')
            .fontSize(16)
            .fontColor('#999999')
        }
        .width('100%')
        .height(200)
        .justifyContent(FlexAlign.Center)
      } else {
        // 列表展示
        List({ space: 10 }) {
          ForEach(this.todoList, (item: TodoItem) => {
            ListItem() {
              TodoItemView({
                item: item,
                onToggle: (id: number): void => { this.toggleTodo(id) },
                onDelete: (id: number): void => { this.deleteTodo(id) }
              })
            }
          }, (item: TodoItem) => item.id.toString())
        }
        .width('90%')
        .layoutWeight(1)
        .alignListItem(ListItemAlign.Center)
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}

运行效果:

请添加图片描述

3.3 代码说明

上述代码可直接放入DevEco Studio工程的 entry/src/main/ets/pages/ 目录下使用,需在路由配置中注册该页面(如果是入口页面则替换默认的 Index 页面即可)。

代码中严格遵循了 ArkTS 语法规范:

  • 所有变量、参数、返回值均显式声明类型
  • 待办事项数据使用 interface TodoItem 建模后再使用,未使用 any 或未类型化的对象字面量
  • ForEach 的元素参数和key生成逻辑均保持类型清晰

四、更多AI开发工具

除了CodeGenie,华为还提供了其他强大的AI开发工具:

4.1 DevEco Code

DevEco Code是终端AI Agent工具,内置了三种工作模式:

  • Plan模式:进行需求分析和架构设计
  • Build模式:自动完成代码实现
  • Go模式:无需人工介入,自动完成需求分析、架构设计、任务分解、代码实现及UI验证

4.2 DevEco CLI

DevEco CLI将鸿蒙全流程开发能力通过命令行开放给AI Agent,支持:

  • 工程创建:devecocli create
  • 语法检查:devecocli check
  • 编译构建:devecocli build
  • 运行调测:devecocli run

4.3 自定义智能体

从DevEco Studio 6.0.1 Beta1开始,开发者可以添加自定义模型和Agent;从6.0.2 Release开始支持智能体切换模型和配置三方模型,进一步扩展AI辅助开发的能力边界。

五、总结

使用AI编程开发鸿蒙应用,可以大幅提升开发效率,降低学习门槛。通过本文介绍的工具链和实战示例,相信你已经掌握了基本流程。建议从简单的功能开始尝试,逐步熟悉AI辅助开发的节奏,最终实现全流程的AI驱动开发。

在实际开发中,可以灵活组合使用 CodeGenieDevEco CodeDevEco CLI,根据项目需求选择最适合的 AI 辅助方式。随着HarmonyOS生态的不断完善和AI技术的持续进步,AI编程将成为鸿蒙应用开发的重要助力。

Logo

汇聚全球AI编程工具,助力开发者即刻编程。

更多推荐