前言
我是一个产品经理，完全没有编程基础，但用ChatGPT和Cursor（AI代码编辑器）花了2周时间开发了一个记账App，并且在应用市场上架了。今天分享完整的开发过程和代码示例，适合想用AI辅助编程的朋友参考。
一、开发前准备
1.1 工具清单
| 工具 | 用途 | 成本 | | Cursor | AI代码编辑器 | 免费版够用 | | ChatGPT/Claude | 代码生成和调试 | 免费/付费 | | Expo | React Native开发 | 免费 |
二、项目规划
2.1 功能设计
核心功能：记账（收入/支出）、分类管理、账单记录、月度统计
扩展功能：预算设置、数据导出、多账本、数据备份
三、开发过程
3.1 环境搭建
# 1. 安装Node.js# 官网下载LTS版本# 2. 安装Expo CLInpm install -g expo-cli# 3. 创建项目expo init MyWallet# 4. 进入项目目录cd MyWallet# 5. 安装依赖npm install @react-navigation/nativenpm install react-native-papernpm install @react-native-async-storage/async-storage# 6. 启动开发服务器npm start3.2 核心代码示例
import React, { useState, useEffect } from 'react';import { NavigationContainer } from '@react-navigation/native';import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';import { PaperProvider } from 'react-native-paper';const Tab = createBottomTabNavigator();export default function App() { return ( <PaperProvider> <NavigationContainer> <Tab.Navigator> <Tab.Screen name="记账" component={HomeScreen} /> <Tab.Screen name="统计" component={StatisticsScreen} /> </Tab.Navigator> </NavigationContainer> </PaperProvider> );}四、遇到的问题与解决
| 问题 | 解决方案 | | 样式不生效 | 检查StyleSheet写法 | | 数据丢失 | 添加console.log调试 | | 组件不显示 | 检查props传递 |
五、打包上架
# Android打包npx expo prebuildcd android && ./gradlew assembleRelease六、成本与收获
开发者账号：688元/年（App Store）
实际成果：完成了一个可用的记账App，理解了产品开发全流程
结语
用AI辅助编程，完全没有编程基础的人也可以开发App。关键是：选对工具、拆解问题、持续调试。
|
