词元星图TokenAtlas
返回案例库

精选案例 · 工程接入与部署 / 知识库与文档

用 AI 辅助写代码的经历：从零构建跳绳计数 App

作者： hanwang

作者分享使用阿里通义千问的CLI编程助手Qwen Code，从零构建一个基于手机加速度传感器的跳绳计数App的全过程。AI自动检测开发环境、选择Capacitor.js+HTML5 DeviceMotion方案、设计信号处理流水线（低通滤波、峰值检测、自适应阈值、防抖）、生成暗色UI与APK打包配置。全部仅用约15分钟，JS代码零语法错误。…

案例速读

案例详细记录了AI辅助构建真实App的完整流程，包括环境检测、方案选型、信号处理算法设计、UI生成与打包配置，提供了可复现的具体技巧（如需求描述、分步验证），结构清晰，心得实用，适合作为AI编程入门参考。 建议从 「用 AI 辅助写代码的经历：从零构建跳绳计数 App」、「背景」、「AI 工具」、「使用方式」 进入正文，先确认真实任务和模型辅助过程。

  • 重点看 让AI先检查开发环境再选择技术方案，避免假设工具链、描述需求时加入‘技术精准鲁棒性高’可引导AI选择更严谨算法、分步验证模块语法，及时发现问题。结合 工程接入与部署 / 知识库与文档 / AI编程辅助 / 跳绳计数App 和「移动端开发初学者、AI辅助编程实践者、希望快速构建原型的技术爱好者」，它更适合作为任务检索后的精读材料。
  • 正文目录和原始材料仍然是判断依据；导读只帮助你更快定位阅读重点。
首读入口
背景
读者
移动端开发初学者、AI辅助编程实践者、希望快速构建原型的技术爱好者
复用
让AI先检查开发环境再选择技术方案，避免假设工具链
结构
10 个目录入口

原文内容

用 AI 辅助写代码的经历：从零构建跳绳计数 App

背景

最近想做一个跳绳计数 App，能够利用手机加速度传感器自动检测跳绳动作并计数，最终打包成 APK 安装到手机上使用。之前没有移动端开发经验，对传感器信号处理也不熟悉，决定尝试用 AI 辅助完成整个项目。

AI 工具

  • Qwen Code（阿里通义千问的 CLI 编程助手）

使用方式

1. 需求描述 → 技术方案选型

直接向 Qwen Code 描述需求：「帮我在桌面生成一个文件夹，里面需要构建一个跳绳计数软件的项目并可以生成 APK 安装到手机，需要技术精准鲁棒性高，给出工程实现。」

AI 首先检查了我的开发环境（发现没有 Flutter，但有 Node.js 和 Java），然后自动选择了 Capacitor.js + HTML5 DeviceMotion API 的技术方案——用 Web 技术写核心逻辑，Capacitor 打包成 APK。这个选型很务实，没有强行要求我安装不存在的工具链。

2. 核心算法实现

跳绳检测是整个项目最关键的部分。AI 设计了完整的信号处理流水线：

原始加速度 → 合加速度幅值 → 去除重力 → 低通滤波 → 峰值检测 → 自适应阈值 → 防抖去重 → 计数输出

具体来说：

  • 低通滤波（EMA, α=0.25）：平滑高频噪声
  • 滑动窗口峰值检测（8 样本窗口 + 上升/下降沿状态机）：精准识别跳跃峰值
  • 自适应阈值：根据最近 20 次峰值动态调整，适应不同用户的跳跃强度
  • 防抖机制（最小间隔 280ms）：防止单次跳跃被重复计数

这些信号处理的知识点我本身不熟悉，AI 在代码注释中解释了物理原理（站立时加速度 ≈ 9.8 m/s²，起跳 > 9.8，腾空 < 9.8，落地冲击 > 9.8），让我在实现功能的同时也学到了背后的原理。

3. UI 界面与交互

AI 一次性生成了完整的暗色主题 UI，包括：

  • 环形进度条（SVG + CSS 动画）
  • 实时统计面板（速率、卡路里、计时）
  • 5 档灵敏度滑块
  • 历史记录列表
  • 传感器权限请求弹窗

所有 HTML/CSS/JS 代码结构清晰，模块分离（jumpDetector.js / storage.js / app.js），便于后续维护。

4. APK 打包配置

AI 自动配置了 Capacitor，生成了 Android 原生项目，并编写了 build-apk.bat 一键构建脚本。虽然我的环境缺少 Android SDK 无法当场构建，但 AI 在 README 中给出了完整的环境配置指南。

成果与收获

  • ✅ 从零到完整项目，约 15 分钟
  • ✅ 核心算法经过语法验证，所有 JS 文件零语法错误
  • ✅ 项目结构规范，包含完整的 README 使用说明书
  • ✅ 学到了加速度传感器信号处理的基本方法
  • ✅ 了解了 Capacitor 跨平台打包流程

心得与建议

  1. 描述需求要具体：告诉 AI「技术精准鲁棒性高」这样的要求，它会选择更严谨的算法（如自适应阈值而非固定阈值）
  2. 让 AI 先检查环境：避免 AI 假设你有某个工具而走弯路
  3. 关注 AI 的注释：好的 AI 工具会在代码中解释原理，这是学习的好机会
  4. 分步验证：每完成一个模块就让 AI 做语法检查，及时发现问题
  5. AI 不能替代领域知识：虽然 AI 实现了算法，但理解其原理才能在实际使用中正确调节参数（如灵敏度档位）

2026 年 5 月 18 日
返回顶部