CrabNote螃蟹笔记

使用Windsurf开发一款iOS App(日更)

使用Windsurf开发一款iOS App(日更)

使用Windsurf开发一款iOS App(日更) 使用Windsurf开发一款iOS App(日更) Modified February 14, 2025 需求描述,我通过和Claude交流完成: 最后会获得一段需求描述文字: 使用Windsurf开始开发 把上面的原型图+需求描述文字,在打开了Xcode创建的文件夹的Windsurf里输入: 我切换了思路,从最简单的播放器+字幕呈现入手 v0.1.0 (2025 01 23) • 初始版本发布 • 实现基础音频播放功能 • 添加播放控制界面 • 集成测试音频文件 v0.2.0 (2025 01 23) • 优化字幕解析引擎 • 增强SRT格式支持,包括特殊时间格式处理 • 改进字幕同步显示机制 • 优化字幕查找算法,提升性能 • 添加详细的调试日志系统 v0.3.0 (2025 01 23) • 全新设计的用户界面 • 添加播客封面显示 • 优化播放控制区域布局 • 添加15秒快进快退功能 • 美化字幕显示效果 • 支持深色模式适配 后面就会进入到相对漫长的开发进程去了,不再像前面相对简单的产品了。。。 (持续更新) 推荐一个非常棒的iOS开发的专栏 来自我的好朋友,心光App的创始人 王禹效的专栏: 《100 小时后请叫我苹果开发者》,付费专栏,299元,绝对超值 点击上面的蓝色链接访问,或者扫码: 前面的操作就是按照专栏里的内容一步步来的,里面除了实操细节,还有很多背后的经验之谈,看完秒懂,很强! 《100 小时后请叫我苹果开发者》 需求描述,我通过和Claude交流完成: 最后会获得一段需求描述文字: 使用Windsurf开始开发 把上面的原型图+需求描述文字,在打开了Xcode创建的文件夹的Windsurf里输入: 我切换了思路,从最简单的播放器+字幕呈现入手 v0.1.0 (2025 01 23) • 初始版本发布 • 实现基础音频播放功能 • 添加播放控制界面 • 集成测试音频文件 v0.2.0 (2025 01 23) • 优化字幕解析引擎 • 增强SRT格式支持,包括特殊时间格式处理 • 改进字幕同步显示机制 • 优化字幕查找算法,提升性能 • 添加详细的调试日志系统 v0.3.0 (2025 01 23) • 全新设计的用户界面 • 添加播客封面显示 • 优化播放控制区域布局 • 添加15秒快进快退功能 • 美化字幕显示效果 • 支持深色模式适配 v0.1.0 (2025 01 23) • 初始版本发布 • 实现基础音频播放功能 • 添加播放控制界面 • 集成测试音频文件 v0.1.0 (2025 01 23) • 初始版本发布 • 实现基础音频播放功能 • 添加播放控制界面 • 集成测试音频文件 v0.2.0 (2025 01 23) • 优化字幕解析引擎 • 增强SRT格式支持,包括特殊时间格式处理 • 改进字幕同步显示机制 • 优化字幕查找算法,提升性能 • 添加详细的调试日志系统 v0.2.0 (2025 01 23) • 优化字幕解析引擎 • 增强SRT格式支持,包括特殊时间格式处理 • 改进字幕同步显示机制 • 优化字幕查找算法,提升性能 • 添加详细的调试日志系统 v0.3.0 (2025 01 23) • 全新设计的用户界面 • 添加播客封面显示 • 优化播放控制区域布局 • 添加15秒快进快退功能 • 美化字幕显示效果 • 支持深色模式适配 v0.3.0 (2025 01 23) • 全新设计的用户界面 • 添加播客封面显示 • 优化播放控制区域布局 • 添加15秒快进快退功能 • 美化字幕显示效果 • 支持深色模式适配 后面就会进入到相对漫长的开发进程去了,不再像前面相对简单的产品了。。。 (持续更新) 推荐一个非常棒的iOS开发的专栏 来自我的好朋友,心光App的创始人 王禹效的专栏: 《100 小时后请叫我苹果开发者》,付费专栏,299元,绝对超值 《100 小时后请叫我苹果开发者》 点击上面的蓝色链接访问,或者扫码: 前面的操作就是按照专栏里的内容一步步来的,里面除了实操细节,还有很多背后的经验之谈,看完秒懂,很强! 1月20日:好啦,我承认,今天只是刚开始搜集如何开发iOS App的信息,不过将功补过,我重写了整个柴犬表情包生成器实战部分 柴犬表情包生成器实战部分 1月21日:正式开工! 简单看了下,大致分为几个步骤: 1. 规划好你的App产品 2. 注册苹果开发者账号 3. 注册相关大模型的开放平台账号、充值等 4. 下载Xcode(这是苹果开发者工具) 5. 使用Xcode创建项目文件夹 6. 使用Windsurf打开上面的项目文件夹 7. Windsurf开发 Xcode调试预览 8. 完成开发 上架审核准备工作 9. 其他:在国内上架有AI功能的产品,肯定要备案的,开始问人 当前进度和规划: Unable to load the board. Please refresh and try again.Copy ErrorRefresh Nothing on the board yet 我打算逐一击破,目前2、8在询问有经验的朋友,争取在开发过程中,抽时间把这些卡点全部完成提前的准备。 规划好你的App产品 我会把这个App产品拆成几步 首先这个产品和前面说的降噪AI相关度比较大 核心功能是,基于AI资讯的实时语音互动的AI播客,所以我会先拆解一下功能实现 1. 抓取重要的AI信息源(已实现) 2. 筛选 摘要(已实现) 3. 在数据库内增加优质内容的全文信息(已实现)第一阶段 4. 将所有优质内容的全文信息,丢给MiniMax Text 01,生成播客文字稿(已实现)第一阶段 5. 使用MiniMax TTS进行语音播报(已实现)第一阶段 6. 使用4+5,输出音频播客(已实现)第一阶段 7. 在iOS内实现4+5(已实现)第二阶段 8. 在iOS内增加资讯信息(标题、摘要、链接等展示)(待实现)第二阶段 9. 在iOS内实现语音播放时的字幕滚动效果(待实现)第三阶段 10. 在iOS内增加实时语音交互能力(待实现)第三阶段 1月22日,先把第一阶段实现! 第一阶段,已经全部实现 3. 在数据库内增加优质内容的全文信息(待实现)第一阶段 首先是对原来Coze工作流里新增了全文字段,现在在我们的飞书多维表格内(相当于数据库)增加了一列Content字段,是对新闻内容的抓取: 这一块实现的逻辑比较简单,对于加入飞书多维表格的工作流内,增加一个字段就ok了。 4. 将所有优质内容的全文信息,丢给MiniMax Text 01,生成播客文字稿(已实现)第一阶段 5. 使用MiniMax TTS进行语音播报(已实现)第一阶段 6. 使用4+5,输出音频播客(已实现)第一阶段 接着对这三个功能,我直接用Windsurf开发,开发了一个本地网页,打通MiniMax两个模型: AI播客脚本生成(使用MiniMax text 01长文本) AI播客声音生成(使用MiniMax speech 01 hd) 这里的工作有两步: 第一步,在“请输入你的问题”里,复制粘贴飞书多维表格内的三条新闻全文内容 第二步,点击提交,网页会把系统提示词+全文内容,一并传给text 01长文本,并返回处理好的内容,放在AI回复下面的文本框 第三步,我手动修改AI回复的内容,完成后,点击下载MP3,获得克隆了我音色的MP3 这样,就完成了整个音频内容的生成,为此我申请了新的小宇宙播客,大家可以关注: 1月22日总结: 当前完成了大模型API的打通,但全流程的自动化还没做到,明天还需要思考如何突破这个难点。 把这块自动化流程做完后,数据保存到飞书多维表格内,然后在App内去读取,就可以做到呈现了。 申请长文本大模型API 这次我要做的App,和长文本+语音交互有很强的关联性,恰逢MiniMax最新推出了Text 01模型,在长文本方面看评测能力是要强于Gemini的,所以我找了他们要了API赞助。 这里需要注意的是,请根据你的产品特点去寻求合适的大模型。不同家的大模型会有不同的侧重点。 MiniMax开放平台申请地址:https://platform.minimaxi.com/registration 首次申请的话,先点击注册,根据要求完成注册即可。 我看了下价格,Text 01的价格和Deepseek一致,如果是abab6.5s,更是地板价了。。。现在好卷! 首次注册送15元,按照这个价格,大约足够使用100万Token的消耗。 老规矩,申请一个API Key: 然后把秘钥复制后找个地方存起来: 那这里,我们已经把需要使用的大模型API Key申请完毕了。 初次打开Xcode 在Mac上开发iOS App,必备的官方开发软件就是:Xcode 可以在苹果开发者官网获得具体的下载地址:https://developer.apple.com/cn/xcode/ 下载完成后安装好,首次打开: 点击“Install”安装。 安装完成后进入到主界面: 我们理解一下这个界面,或许你会发现和初次打开Windsurf有点像,像在哪里呢? 两者都是以项目为基础的软件,每个开发的产品都算是一个项目,也需要有一个文件夹来保存相关的文件。 这里因为我们是第一次进来,可以选择“Create New Project”,随后进入下面的界面: 这里选默认的App选项即可,点“Next”: 👆🏻开始进行当前项目的设置了 Product Name:项目名称 Team:你的Apple ID账号 Organization Identifier:创作者识别码,需要唯一,倒置你的个人网站,比如me.superhuang 其他的默认 进入到主界面后,需要首先下载iOS模拟器: 可以看到大约有8.72G 安装完成后,就可以选择用什么模拟器了: 高贵的iPhone 16 Pro Max出来了: 此时完成了Xcode的安装了! 接下来,使用Windsurf打开刚才你项目选择的文件夹,我们就可以开始使用Windsurf开发你的iOS App了! 此时,因为我们在开发iOS App了,记得在Workspaces AI Rules里填入下面的规则: 设计产品原型图+描述需求 这里可以用蓝湖Mastergo来做: 因为我是参考了其他产品,所以可以通过上传参考图+需求描述来生成原型图,生成的效果如下: