4小时极速鸿蒙应用开发：AI助手CodeBuddy实战智慧收据管家

1. 项目概述一次从想法到成品的“极速”鸿蒙开发体验最近在整理抽屉时翻出了一大堆购物小票、停车票和外卖单纸张发黄信息模糊想找一张半年前的电子发票报销凭证简直是大海捞针。这个痛点让我萌生了一个想法能不能做一个手机应用随手一拍就能把小票上的关键信息如商户名、金额、日期自动提取出来分类整理还能设置提醒刚好华为的鸿蒙生态正在蓬勃发展我一直想找个机会上手实践。但说实话作为一个主要做后端和算法的开发者我对移动端尤其是鸿蒙应用开发几乎是零基础。从学习ArkTS语言、熟悉DevEco Studio到理解UI框架想想就是个漫长的过程。就在这时我注意到了CodeBuddy。它被宣传为一款AI编程助手但不同于常规的代码补全工具它主打的是通过自然语言描述直接生成可运行的项目代码。这听起来像是我需要的“捷径”。我决定做一个实验不查阅任何鸿蒙官方入门文档不预先学习ArkTS仅依靠CodeBuddy看看能否在几个小时之内把我“智慧收据管家”的想法变成一个真正能在鸿蒙设备上安装运行的应用。于是我给自己设定了4小时的挑战。这篇内容就是这4小时里从一张皱巴巴的小票到一款名为“智慧收据管家”的鸿蒙应用诞生的完整、真实的记录。我会详细拆解每一步操作、每一个指令、遇到的每一个坑以及CodeBuddy带来的惊喜和局限。2. 开发环境与工具准备十分钟快速搭建工欲善其事必先利其器。虽然目标是“极速开发”但基础环境是绕不开的。我的设备是一台搭载了Windows 11的笔记本电脑。2.1 核心工具DevEco Studio与CodeBuddy插件鸿蒙应用的标准开发工具是华为提供的DevEco Studio。我直接从官网下载了最新版本。安装过程比较常规需要注意的是安装程序会提示同时安装Node.js和Ohpm鸿蒙的包管理器务必勾选这是后续项目构建和依赖管理的基石。安装完成后打开DevEco Studio第一件事就是配置CodeBuddy。在软件的插件市场Marketplace里直接搜索“CodeBuddy”就能找到。点击安装重启IDECodeBuddy的图标就会出现在侧边栏。这里有一个关键步骤你需要注册并获取一个API Key。CodeBuddy通常提供一定的免费额度用于体验足够完成我们这个体量的项目。将API Key配置到插件的设置中它才能连接后台的AI模型为你服务。注意网络连接稳定性至关重要。CodeBuddy的代码生成和问答服务需要稳定的网络环境如果遇到响应缓慢或超时检查网络是第一步。2.2 项目初始化选择正确的模板环境就绪后在DevEco Studio中新建项目。这里出现了第一个选择点应用类型。鸿蒙目前支持“应用”和“元服务”。我们的“智慧收据管家”是一个典型的独立App所以选择“Application”模板选择最基础的“Empty Ability”。这里我特意没有选择任何与列表、数据库相关的增强模板因为我想看看CodeBuddy能否从零开始理解并构建这些复杂功能。项目创建成功后一个标准的鸿蒙工程结构就展现在眼前。对于新手来说entry/src/main/ets目录是核心我们的页面代码、逻辑代码都将在这里编写。resources目录存放图片、字符串等资源。此时我还没有写一行代码但已经为接下来的“魔法”准备好了画布。3. 与CodeBuddy协作的核心思路如何有效“提问”使用CodeBuddy这类AI编程工具最大的挑战不是技术而是“沟通”。你不能模糊地说“帮我做个收据应用”这就像让一个新员工“把公司业绩搞上去”一样空洞。必须学会拆解任务进行精准的“需求描述”。我的核心思路是自顶向下功能驱动界面先行。3.1 需求拆解与功能清单首先我在脑海中也可以写在纸上将“智慧收据管家”拆解成具体、可执行的功能点主界面一个清晰的收据列表展示已添加的收据缩略信息商户、金额、日期。添加收据通过按钮触发能调用设备相机拍照或从相册选择图片。OCR识别对拍摄/选择的图片进行文字识别提取关键字段。信息编辑与保存识别后允许用户校对和修改信息然后将这条收据记录保存下来。数据持久化收据数据需要本地存储确保App关闭后不丢失。收据详情页点击列表项可以查看该收据的完整信息和大图。这六个功能点构成了我对CodeBuddy下达指令的“任务列表”。3.2 与CodeBuddy的对话策略我采用了“分步引导”的策略而不是一次性抛出所有需求。我会先让CodeBuddy生成一个具备基础框架的页面然后基于这个页面像“打补丁”一样一步步添加新功能。每次指令都尽可能明确坏指令“做一个列表页面。”好指令“在当前的Index.ets页面中创建一个基于List组件的垂直滚动列表。列表的每一项ListItem包含左右两栏左栏显示一个文本‘商户名称’字体稍大右栏显示一个文本‘金额’颜色为红色。请先使用静态的模拟数据比如显示3条模拟记录。”后一种指令明确了组件、布局、样式和数据类型CodeBuddy生成代码的准确率和可用性会高得多。在整个过程中我将扮演“架构师”和“代码审查员”的角色由CodeBuddy担任“高级执行工程师”。4. 核心功能实现实录与CodeBuddy的四个回合接下来就是紧张的4小时实战。我记录了每个核心环节与CodeBuddy的交互过程。4.1 第一回合构建收据列表主页约45分钟我首先在CodeBuddy的聊天框中输入了上面提到的“好指令”。CodeBuddy几乎在几秒内就生成了一段ArkTS代码。它正确地使用了Entry装饰器、Component结构体并构建了一个包含List和ListItem的UI。模拟数据被定义在一个数组里。我直接复制这段代码替换掉初始的Index.ets文件点击预览器Previewer一个简陋但功能完整的列表立刻出现了。第一个坑样式布局。生成的列表项布局是上下堆叠而我想要的是左右分栏。于是我对CodeBuddy提出修正“将每个ListItem的布局改为Row水平排列左边是商户名称Text右边是金额Text让金额靠右对齐。” CodeBuddy理解了并修改了代码使用Row容器和JustifyContent.SpaceBetween实现了左右分布。我学到了第一个经验对UI布局的描述要精确到容器和排版方式。第二个坑数据模型。模拟数据是硬编码的字符串。我需要一个正式的收据数据模型。我询问CodeBuddy“请为我定义一个Receipt类包含以下字段idstring merchantstring amountnumber datestring imageUristring。并修改列表使用这个Receipt类型的数组作为数据源。” CodeBuddy完美地创建了Receipt类并更新了列表的渲染逻辑。这时主页的骨架和数据结构就清晰了。4.2 第二回合实现拍照与图片选择约60分钟这是涉及系统权限和API调用的部分我本以为会很难。我向CodeBuddy描述“我需要一个悬浮在列表底部的‘’按钮点击后弹出底部动作栏ActionSheet提供‘拍照’和‘从相册选择’两个选项。”CodeBuddy生成了按钮和ActionSheet的UI代码。但对于拍照和选图功能它没有直接给出完整实现而是生成了注释和需要我填写的TODO比如“// TODO: 调用系统相机”和“// TODO: 调用系统图库”。这很合理因为具体的API调用需要更精确的上下文。于是我查阅了鸿蒙官方文档中关于ohos.multimedia.image和ohos.file.picker的简要说明然后向CodeBuddy提出更具体的请求“请使用ohos.multimedia.image的getCamera接口实现拍照并将拍摄的照片临时URI保存到变量currentImageUri中。”、“请使用ohos.file.picker的photoViewPicker实现从相册选择单张图片。”CodeBuddy基于这些具体的模块名生成了大致的调用代码框架包括权限申请ohos.permission.CAMERA和ohos.permission.READ_IMAGEVIDEO的代码。我将其复制到项目中并根据DevEco Studio的错误提示和官方文档示例微调了参数和回调处理。这个过程让我意识到CodeBuddy能极大减少查找API的时间但最终与系统交互的细节仍需开发者结合文档进行校准。4.3 第三回合集成OCR识别功能约90分钟含调研这是项目的技术核心。鸿蒙系统本身并未提供官方的OCR能力需要集成第三方SDK或服务。我通过CodeBuddy的联网搜索技能需要手动开启查询“鸿蒙 HarmonyOS OCR 开源”。搜索结果提到了PaddleOCR、Tesseract等开源选项也提到了华为ML Kit但可能需要商业授权。考虑到这是一个快速实验我决定采用一种轻量级方案将图片上传到一个免费的在线OCR API进行识别。我在网上找到了一个提供有限免费次数的OCR服务。然后我向CodeBuddy描述了这个需求“我现在有一个图片的URIcurrentImageUri。我需要编写一个函数将这个图片文件通过HTTP POST请求发送到某个API端点例如https://api.xxx.com/ocr请求体为form-data包含image字段。并解析返回的JSON结果提取文本信息。”CodeBuddy出色地生成了使用ohos.net.http模块发起网络请求的代码包括创建HttpRequest对象、设置Header、组装FormData。我只需要替换上真实的API地址和参数。对于返回的JSON我进一步要求“假设API返回的JSON结构里识别结果在一个‘text’字段中。请编写代码解析这个JSON并将整个文本块打印到控制台。”完成后我进行测试拍照 - 点击一个临时添加的“识别”按钮 - 控制台成功打印出了图片中的文字。虽然是一整段文本但关键信息都在里面了这一步的成功是项目从“玩具”迈向“工具”的关键。后续的优化可以是用正则表达式从这段文本中提取金额、日期等。4.4 第四回合数据编辑、保存与持久化约45分钟识别出文本后需要让用户确认和编辑。我让CodeBuddy生成一个新的页面ReceiptDetail.ets包含表单字段商户、金额、日期和一个大图预览区域以及保存按钮。数据持久化方面我选择了鸿蒙轻量级的首选项Preferences来存储收据列表。我向CodeBuddy提问“如何使用ohos.data.preferences将Receipt对象的数组保存到本地请提供保存和加载的完整函数示例。” CodeBuddy给出了清晰的示例代码包括初始化Preferences实例、使用put()和get()方法存取数据并提醒我注意异步操作。我将这些函数封装到一个单独的数据管理类ReceiptDataManager.ets中然后在主页的aboutToAppear生命周期里加载数据在添加收据后调用保存。至此一个完整的数据流闭环形成了拍照 - 识别 - 编辑 - 保存 - 列表展示。5. 问题排查与调试经验那些CodeBuddy没告诉我的事在4小时的开发中大部分时间其实花在了调试和解决意外问题上。CodeBuddy生成的代码并非开箱即用以下是我遇到的典型问题及解决思路。5.1 权限声明与动态申请CodeBuddy生成的权限申请代码有时只包含了运行时动态申请的部分却忽略了在module.json5配置文件中进行静态声明。这导致应用在请求权限时直接崩溃。教训是任何时候使用涉及权限的API必须双检——代码动态申请 配置文件静态声明。我手动在module.json5的requestPermissions字段中添加了相机和相册读取权限。5.2 图片URI的路径处理从相机或图库获取的图片URI格式可能是file://或internal://。当我想在另一个页面显示这张图片时直接传递这个URI字符串可能会失效。这里的关键是理解鸿蒙的资源管理机制。对于需要跨页面或持久化的图片更稳妥的做法是使用ohos.file.fs模块将图片复制到应用沙箱目录下然后使用沙箱内的URI。这个问题CodeBuddy没有自动处理需要开发者根据具体场景进行决策和实现。5.3 异步操作与状态更新ArkTS大量使用异步操作Promise。CodeBuddy生成的网络请求、文件读写代码都是异步的。如果直接在异步回调里更新被State装饰的页面数据而更新逻辑写得不正确可能会导致UI不刷新。我的心得是将与UI状态变更相关的逻辑封装在单独的函数中并在异步回调中调用确保其在主线程或通过合理的状态管理触发UI更新。对于更复杂的应用可以考虑引入像ohos.arkui.advanced中的状态管理库但这超出了本次快速实验的范围。5.4 OCR结果的后处理免费的在线OCR API返回的是整段文本如何提取“金额”、“日期”、“商户名”CodeBuddy无法理解你的业务逻辑。我编写了几个简单的正则表达式来匹配金额匹配如“¥12.50”、“120”、“合计68元”等模式。日期匹配“2024-05-20”、“2024/05/20”、“2024年5月20日”等模式。商户名这比较困难通常假设是文本开头的第一行或包含特定关键词如“超市”、“餐厅”。这是一个可以持续优化的点也是AI编码工具目前的局限——它擅长生成通用代码框架但深度的业务逻辑和算法仍需人工设计和实现。6. 项目总结与关于AI辅助开发的思考4小时时间到我的“智慧收据管家”已经具备了核心功能拍照/选图、OCR文字识别在线、信息编辑、本地保存和列表浏览。它当然还很粗糙UI不够美观OCR精度和本地化处理有待加强但作为一个从零开始、在完全陌生的框架下、由AI辅助完成的“可运行原型”这个结果远超我的预期。回顾整个过程CodeBuddy扮演了多重角色代码生成器对于样板代码UI组件、数据结构、API调用框架的生成速度极快免去了大量查阅基础语法和API定义的时间。智能搜索引擎其联网技能能快速找到相关技术方案如OCR选型虽然信息需要甄别但大大缩小了搜索范围。编程导师当你用自然语言描述一个功能时它生成的代码本身就是一份很好的学习范例你可以从中快速理解鸿蒙的开发模式和API用法。然而它并非万能上下文局限它无法知晓你项目的完整上下文生成的代码可能需要手动集成和调整。业务逻辑盲区对于深度业务逻辑如从OCR文本中精准提取特定字段它无能为力。调试能力缺失它不能帮你调试运行时错误所有的问题排查和系统集成工作仍需开发者自己完成。所以CodeBuddy的最佳定位是一个强大的“副驾驶”Copilot而非“自动驾驶”。它极大地提升了开发效率尤其适用于快速原型构建、探索新框架、生成重复性代码等场景。但它无法替代开发者对系统原理的理解、对架构的设计能力以及对问题的调试功底。这次“4小时挑战”的成功一半归功于CodeBuddy的代码生成能力另一半则依赖于我作为开发者已有的编程基础、问题分解能力和调试经验。对于想尝试鸿蒙开发但又畏惧学习曲线的开发者我的建议是完全可以利用CodeBuddy这样的工具作为切入点。从一个小想法开始像搭积木一样通过清晰的指令让它帮你生成代码块你在组装和调试的过程中会自然而然地学会ArkTS的语法、鸿蒙的组件和生命周期。这种“做中学”的方式比单纯阅读文档要生动和高效得多。最终你和AI工具共同完成的不仅仅是一个应用更是一段高效学习新技术的旅程。