lijianfei.com

思危，思退，思变。
追求进步，不求完美。
做好小事，熬过难事，静成大事。
语以泄败，事以密成，沉得住气，静得下心。

首页 归档 标签 关于我 Github

用 Claude Code 复盘老项目 之 腾讯开心鼠 口语秀

2025-06-23 7 min read # Claude Code # AI IDE

之前在在腾讯时期做的一个了老项目，最近用 Claude Code 根据我之前写的代码，生成一个项目文档。

腾讯放弃启蒙教育业务，官宣开心鼠英语停止售卖_ABCmouse

项目负责人：ezli(lijianfei)

项目概述

SpeakShow 是一个基于 iOS 的口语学习应用模块，主要功能是为用户提供口语练习、录制、评分和视频合成的学习体验。该项目采用状态机管理模式，通过多个状态节点控制整个学习流程。

  • 目标用户：儿童/小朋友
  • 核心功能
    • 左侧播放教师示范视频，右侧实时显示孩子摄像头画面。
    • 系统依次播报英文单词，让孩子跟读并即时评分（对/错）。
    • 根据评分给出正向或负向反馈，鼓励多读几遍。
    • 游戏共三轮，完成后将所有录制片段与原示范视频合成一段完整的视频供分享。
  • 技术挑战
    • 多状态管理和流程分支的复杂性。
    • 视频录制、编辑与最终合成的实现。

项目结构

SpeakShow/
├── ABCSpeakShowJSMessageForwarder.h/m    # JS消息转发器
├── ABCSpeakShowPreviewVC.h/m             # 预览视图控制器
├── ABCSpeakShowRecordVideoVC.h/m         # 录制视频视图控制器
├── Model/                                # 数据模型层
│   ├── ABCOralShowNetModel.h/m          # 网络数据模型
│   ├── ABCSpeakShowUserModel.h/m        # 用户数据模型
│   ├── ABCSpeakShowVideoComposeManager.h/m # 视频合成管理器
│   └── AVAsset+WSChecker.h/m            # 视频资产检查工具
└── View/                                 # 视图层
    ├── ABCCompositeLoadingView.h/m      # 合成加载视图
    ├── ABCFadeInAnimate.h/m             # 淡入动画
    ├── ABCIsBackTipsView.h/m            # 返回提示视图
    ├── ABCNotReachableTipsView.h/m      # 网络不可达提示视图
    └── WSCameraMetalView.h/m            # 相机Metal渲染视图

核心组件

1. 视图控制器 (View Controllers)

ABCSpeakShowRecordVideoVC

  • 职责: 主要录制界面，管理整个口语学习流程
  • 关键功能:
    • 状态机管理
    • 相机录制
    • 音频录制
    • 贴纸动画效果
    • 口语评分

ABCSpeakShowPreviewVC

  • 职责: 视频预览和编辑界面
  • 关键功能:
    • 视频播放
    • 视频合成
    • 上传管理
    • 用户交互

2. 数据模型 (Data Models)

ABCOralShowNetModel

  • 职责: 网络数据模型，处理服务器返回的数据
  • 主要结构:
    • Payload: 包含游戏结果ID和引擎信息
    • EngineInfo: 包含活动信息和内容信息
    • ContentInfo: 包含卡片信息、视频信息、音频资源

ABCSpeakShowUserModel

  • 职责: 用户数据模型，管理用户学习数据
  • 主要结构:
    • ABCSpeakShowComposeGeneralModel: 通用合成模型
    • ABCSpeakShowComposeModel: 具体合成模型

ABCSpeakShowVideoComposeManager

  • 职责: 视频合成管理器，单例模式
  • 主要功能:
    • 后台视频合成
    • 视频上传
    • 缓存管理

3. 视图组件 (View Components)

WSCameraMetalView

  • 职责: 相机专用渲染视图
  • 特点: 使用Metal进行高性能渲染

ABCCompositeLoadingView

  • 职责: 视频合成加载提示视图
  • 功能: 显示合成进度和状态

状态机设计

状态定义

// 初始化状态
STATUS_INIT = @"STATUS_INIT"
// 欢迎状态
STATUS_WELCOME = @"STATUS_WELCOME"  
// 提问题状态
STATUS_ASK = @"STATUS_ASK"
// 教学状态
STATUS_TEACH = @"STATUS_TEACH"
// 引导状态
STATUS_GUIDE = @"STATUS_GUIDE"
// 跟读录制且打分状态
STATUS_FOLLOW_RECORD_SCORE = @"STATUS_FOLLOW_RECORD_SCORE"
// 正反馈状态
STATUS_FEEDBACK_GOOD = @"STATUS_FEEDBACK_GOOD"
// 负反馈状态
STATUS_FEEDBACK_BAD = @"STATUS_FEEDBACK_BAD"
// 结束语状态
STATUS_END = @"STATUS_END"
// 预览视频状态
STATUS_PREVIEW_OUTPUT_VIDEO = @"STATUS_PREVIEW_OUTPUT_VIDEO"
// 应用中断状态
STATUS_APP_RESIGN_ACTIVE = @"STATUS_APP_RESIGN_ACTIVE"
// 应用恢复状态
STATUS_APP_BECOME_ACTIVE = @"STATUS_APP_BECOME_ACTIVE"

项目流程图

graph TD
    A[开始] --> B[STATUS_INIT]
    B --> C[STATUS_WELCOME]
    C --> D[STATUS_ASK]
    D --> E[STATUS_TEACH]
    E --> F[STATUS_GUIDE]
    F --> G[STATUS_FOLLOW_RECORD_SCORE]
    G --> H{评分结果}
    H -->|良好| I[STATUS_FEEDBACK_GOOD]
    H -->|较差| J[STATUS_FEEDBACK_BAD]
    I --> K[STATUS_END]
    J --> F
    K --> L[STATUS_PREVIEW_OUTPUT_VIDEO]
    L --> M[结束]
    
    N[应用中断] --> O[STATUS_APP_RESIGN_ACTIVE]
    O --> P[STATUS_APP_BECOME_ACTIVE]
    P --> Q{恢复前状态}
    Q -->|各状态| R[继续学习流程]

泳道图 - 角色职责分工

graph LR
    subgraph 用户
        A[用户操作] --> B[点击开始学习]
        B --> C[跟读录制]
        C --> D[查看反馈]
        D --> E[预览成果]
    end
    
    subgraph 视图控制器
        F[ABCSpeakShowRecordVideoVC] --> G[管理状态机]
        G --> H[处理用户交互]
        H --> I[控制相机录制]
        I --> J[显示动画效果]
    end
    
    subgraph 数据模型
        K[ABCSpeakShowUserModel] --> L[存储用户数据]
        L --> M[管理合成参数]
        M --> N[处理评分结果]
    end
    
    subgraph 视频管理
        O[VideoComposeManager] --> P[合成视频]
        P --> Q[上传服务器]
        Q --> R[缓存管理]
    end
    
    A --> F
    F --> K
    K --> O
    J --> D
    N --> E

关键状态转换

1. 正常学习流程

INIT → WELCOME → ASK → TEACH → GUIDE → FOLLOW_RECORD_SCORE → FEEDBACK_GOOD/FEEDBACK_BAD → END → PREVIEW_OUTPUT_VIDEO

2. 负反馈重试流程

FOLLOW_RECORD_SCORE → FEEDBACK_BAD → GUIDE (重新开始当前卡片)

3. 应用中断处理

任意状态 → APP_RESIGN_ACTIVE → APP_BECOME_ACTIVE → 恢复到原状态

数据流转图

graph TD
    A[服务器数据] --> B[ABCOralShowNetModel]
    B --> C[ABCSpeakShowUserModel]
    C --> D[ABCSpeakShowRecordVideoVC]
    D --> E[录制视频/音频]
    E --> F[口语评分]
    F --> G[ABCSpeakShowComposeModel]
    G --> H[VideoComposeManager]
    H --> I[视频合成]
    I --> J[上传服务器]
    J --> K[缓存结果]

技术特点

1. 状态机管理

  • 使用TransitionKit框架管理复杂状态
  • 支持状态转换时的回调处理
  • 处理应用中断和恢复

2. 视频处理

  • 使用TAVKit进行视频录制和合成
  • 支持Metal渲染，提高性能
  • 后台合成，不阻塞主线程

3. 音频处理

  • 集成口语评分功能
  • 支持多种音效播放
  • 音频会话管理

4. 网络处理

  • 网络状态监控
  • 离线提示和重试机制
  • 数据上传和下载管理

核心算法

1. 口语评分算法

  • 实时音频录制
  • 语音识别和评分
  • 根据分数给出正负反馈

2. 视频合成算法

  • 多段视频拼接
  • 音频合成
  • 特效添加
  • 格式转换

3. 缓存管理算法

  • 视频缓存策略
  • 内存管理优化
  • 磁盘空间管理

项目优势

  1. 架构清晰: MVC架构，职责分明
  2. 状态管理: 使用状态机，逻辑清晰
  3. 性能优化: Metal渲染，后台合成
  4. 用户体验: 丰富的动画效果和交互
  5. 稳定性: 完善的错误处理和中断恢复

可改进点

  1. 代码重构: 部分方法过长，可以进一步拆分
  2. 测试覆盖: 增加单元测试和UI测试
  3. 文档完善: 添加更多注释和文档
  4. 性能监控: 添加性能监控和优化
  5. 模块化: 进一步解耦，提高可维护性

总结

SpeakShow项目是一个功能完整的口语学习应用模块，通过状态机管理复杂的学习流程，结合视频录制、音频处理、口语评分等技术，为用户提供沉浸式的学习体验。项目架构清晰，技术选型合理，具有良好的扩展性和维护性。

整体下来，我认为 Claude Code 还是把整个项目说清楚了，因为这个项目的复杂点在于有限状态机的设计，我特意让 Cladue Code 生成了 流程图和泳道图，方便理解。

补充视频

只补充了一个结尾，之前完整的视频弄丢了。

Powered by Gridea RSS