用 Cursor + v0 打造人情管理應用詳情 - typescript,類型安全,功能模塊,MySQL,數據庫 waeng_luo 博客

不懂鴻蒙開發也沒關係，AI 工具能幫你把想法變成現實

在現代社交生活中，人情往來記錄與管理一直是許多人的痛點。傳統的手工記賬方式效率低下，且缺乏數據分析和參考依據。作為一名不會鴻蒙開發的程序員，我決定嘗試使用 Cursor 和 v0 這兩個 AI 工具，從零打造一款名為"往來記"的智能人情管理應用。

緣起：為什麼需要人情管理應用？

人際關係的價值在日常工作和生活中日益凸顯。無論是婚禮、生日、節日聚會，我們都會參與各種人情往來。但手工記錄這些信息非常不便：

容易遺忘：誰上次隨了多少禮金？什麼時候該回禮？
缺乏參考：不同地區、不同關係的禮金標準是多少？
難以分析：人際關係投入是否合理？哪些關係需要更多維護？

有鑑於此，我決定開發"往來記"——一款專注於人情往來管理的智能應用。

技術選型：為什麼選擇 Cursor 和 v0？

Cursor：AI 驅動的智能編程助手

Cursor 是一款 AI 驅動的智能編程工具，堪稱"會寫代碼的聊天助手"。它集成了先進的 AI 模型，能夠理解上下文、生成代碼、解釋複雜邏輯甚至協助調試。

主要優勢：

對新手友好，不懂代碼也能應用、提效
直接用自然語言描述需求，AI 幫你實現
基於 VSCode，界面熟悉易用

v0：由 AI 驅動的產品原型工具

v0 能夠根據文字描述快速生成可交互的 UI 原型，極大地加速了前端開發過程。

組合使用的好處

v0 快速生成界面原型
Cursor 實現業務邏輯
AI 輔助調試和優化

應用設計：往來記的核心功能

在 Cursor 的幫助下，我設計了以下核心功能模塊：

1. 人情記錄管理

添加禮金往來記錄
記錄參與的活動和場合
設置提醒和回禮日期

2. 關係可視化分析

人際往來熱力圖
親密度評分系統
關係趨勢分析

3. 智能禮金參考

地區習俗數據庫
社會參考分析
個性化推薦引擎

4. 禮儀知識庫

各類事件禮儀規範
地區習俗差異詳解
實用技巧分享

開發實戰：使用 Cursor 構建應用

第一步：項目規劃與架構設計

我首先使用 Cursor 的 AI 功能幫助梳理項目需求：

/user: 我要開發一個人情往來管理的鴻蒙應用，叫"往來記"，請幫我列出主要功能模塊和所需技術棧

Cursor 給出了詳細的建議，包括採用清晰的分層架構設計：

頁面層：11 個完整頁面，涵蓋所有功能
服務層：13 個專業服務，模塊化設計
數據層：統一數據管理，類型安全
工具層：通用工具類，代碼複用

第二步：數據庫設計

根據 AI 建議，設計了以下核心數據模型：

// 人情記錄實體
interface GiftRecord {
    id: number;
    personName: string;
    relationship: string;
    amount: number;
    eventType: string;
    eventDate: string;
    timestamp: number;
    note: string;
    shouldReturn: boolean;
    returnDate?: string;
}

Cursor 不僅幫我生成了數據模型，還提供了數據庫初始化腳本和 CRUD 操作示例。

第三步：核心功能實現

人情記錄添加功能

使用 Cursor 生成記錄添加組件的代碼：

// 添加人情記錄頁面
@Component
struct AddRecordPage {
  @State personName: string = ''
  @State amount: string = ''
  @State eventType: string = '婚禮'
  @State eventDate: string = '2023-11-26'
  
  build() {
    Column() {
      TextInput({ placeholder: '聯繫人姓名' })
        .onChange((value: string) => {
          this.personName = value
        })
      
      TextInput({ placeholder: '金額' })
        .onChange((value: string) => {
          this.amount = value
        })
      
      DatePicker({
        start: '1970-1-1',
        end: '2100-12-31'
      })
      
      Button('保存記錄')
        .onClick(() => {
          this.saveRecord()
        })
    }
  }
  
  private saveRecord() {
    // 保存邏輯
  }
}

數據統計分析

Cursor 幫我實現了數據可視化的核心算法：

// 數據分析服務
private calculateTrendPrediction(records: GiftRecord[]): TrendData {
    const analysisData = this.analyzeHistoricalPattern(records);
    return this.generatePredictionModel(analysisData);
}

// 親密度計算
private calculateIntimacyScore(records: GiftRecord[]): number {
    const frequency = this.calculateInteractionFrequency(records);
    const recency = this.calculateInteractionRecency(records);
    const monetary = this.calculateMonetaryValue(records);
    
    return frequency * 0.4 + recency * 0.3 + monetary * 0.3;
}

第四步：界面優化與用户體驗

利用 v0 快速生成 UI 原型，然後使用 Cursor 進行代碼優化和功能實現。我堅持了"用户第一"的設計原則：

情感化設計：使用温馨親切的文案和精美直觀的圖標
交互優化：智能表單預填充和流暢的交互動效
自適應佈局：完美適配手機、平板等多種設備

開發技巧與經驗分享

1. 有效與 Cursor 溝通的技巧

明確需求描述：

❌ 不好："做一個好看的頁面"
✅ 好的："創建一個禮金記錄表單，包含姓名、金額、事件類型下拉選擇、日期選擇和備註文本框，使用温馨的配色方案"

分步驟實現複雜功能：

1. 先讓 Cursor 生成基礎數據結構
2. 然後實現單個功能組件
3. 最後整合和優化

2. 調試與問題解決

當遇到問題時，直接把錯誤信息丟給 Cursor 分析：

/user: 我的應用在保存記錄時報錯："TypeError: Cannot read property 'save' of undefined"
/assistant: 這個錯誤通常是因為數據存儲未正確初始化，建議檢查...

3. 代碼優化與重構

Cursor 能夠幫助優化代碼結構和性能：

/user: 請優化這個組件的渲染性能，目前長列表滾動時卡頓
/assistant: 建議使用 LazyForEach 優化長列表渲染，並實現數據分頁加載...

技術難點與突破

類型安全挑戰

在嚴格的類型系統下，遇到了不少挑戰，Cursor 幫助提供瞭解決方案：

// 嚴格的類型定義
interface GiftRecord {
    id: number;
    personName: string;
    amount: number;
    eventType: EventType;
    timestamp: number;
    // 明確的類型約束，避免any類型
}

// 安全的數據操作
private processRecords(records: GiftRecord[]): ProcessedData {
    // 避免使用any，確保類型安全
    return records.map(record => this.transformRecord(record));
}

性能優化實踐

關鍵優化點：

數據懶加載：大數據集分頁處理
內存管理：及時釋放不再使用的資源
計算優化：複雜算法異步執行
圖片處理：使用矢量圖標減少內存佔用

開發成果

經過使用 Cursor 和 v0 的開發，最終完成了「往來記」應用：

總代碼量：5,525 行
核心功能模塊：6 大服務模塊
數據可視化：8 種圖表類型
性能表現：冷啓動時間 < 2 秒

應用主要特點：

智能趨勢預測：基於歷史數據預測未來人情走向
健康度評分：量化評估人際關係狀態
待回禮提醒：自動識別未回禮記錄並提醒
一鍵快捷操作：大幅提升使用效率

總結與展望

通過使用 Cursor 和 v0 開發「往來記」的實踐，我深刻體會到 AI 工具如何極大地降低開發門檻。即使不熟悉鴻蒙開發，也能在 AI 的幫助下把想法變為現實。

Cursor 開發的優勢：

🚀 開發效率提升：從想法到原型的時間縮短了 70% 以上
🎯 代碼質量高：AI 生成的代碼符合最佳實踐
🔧 學習成本低：不需要精通所有 API，AI 會幫你處理
💡 創意實現快：可以快速驗證各種產品想法

未來規劃：

接入華為帳號，實現跨設備數據同步
利用分佈式能力，實現多人協作記賬
集成 AI 能力，智能推薦禮金金額
開發更多人際關係分析功能

AI 編程時代已經到來，無論你是產品經理、設計師還是編程新手，只要有好的想法，都能利用 Cursor 這樣的工具將其實現。「往來記」的開發過程就是最好的證明——科技的力量能夠讓人情往來管理變得更加簡單、科學、有趣。

相關資源

鴻蒙學習資源

waeng_luo 博客

waeng_luo 博客

博客 / 詳情