记录一款 macOS App 的开发流程
李二花 / 2025-01-18
关键词：macOS, cursor, xcode, photoshop script
项目地址
背景
我在 alfred workflow 这篇文章中提到过，我对在不打断工作流程的情况下进行信息的记录很有需求，当时没有发现过有这类 APP， 于是就用 Alfred 的 workflow 功能实现了一个，总体上我还是挺满意的，基本能覆盖我的使用场景，满足我的工作需求。
使用了几年后，慢慢的一些短板也就暴露出来了，首先因为是基于 Alfred 的，所以我个人的定制化有限，受限于 Alfred 的规则，只能在一台机器上使用， 我有多台 mac，在每台机器工作，记录的信息就很分散化，再一个就是这个功能也想暴露给朋友家人使用，基于 Alfred 的方案就很受限了，也想自己开发一款 macOS 的 App 来自己定制，奈何当时觉得技术繁琐，一方面是因为需要使用 swift 和 swiftUI，再一个这个 App 因为要使用系统快捷键等功能， 而这方面的开发知识我几乎是 0，所以这个想法就一直搁置了。
直到最近 cursor 在帮我开发了谷歌插件和 SOHO 门禁之后，我对 cursor 的能力是很认可的，于是觉得自己开发一款「速记」App, 于是就有了「KittyMemo」。
下面就记录下我整个 App 的开发流程，包括代码编写，xcode 调试，icon 生成，App 导出等。
代码编写
编写思路与过程
代码编写我基本上都是用让 cursor 帮我完成的，核心点主要是提示词上，不要一上来就试图让 cursor 把代码写完，要把项目拆分成递进的需求。
首先我需要的是一个系统级别的快捷键，这个快捷键可以直接呼起某个界面。
第二步是，这个界面可以输入文字。
第三步是输入文字后，可以将数据保存到电脑的某个默认位置，这个位置的权限也需要。
第四步是，可以通过配置修改这个默认的位置，也就是有一个类 *nix 系统的下项目的配置文件的模块。
这四步中的每一步，都需要调试，看看是不是满足当前的需求，如果不满足，则继续修改，直到这个步骤满足我们的需求。
这四步完成后，就开始进行总体的调试和测试，在测试过程中，我发现光标问题和焦点对象问题不符合我的要求，我需要的是类似于 alfred 的功能， 我快捷键呼出的对话框，不需要用鼠标或者键盘重新定位，而是可以直接输入文字，然后回车后，就可以保存（或者其他的动作），然后对话框消失， 此时光标可以回到刚才的地方，不需要鼠标或者键盘的干预，可以继续之前的工作。于是我通过跟 cursor 的交流，并且提示他「多参考 github 上的开源项目， 同时参考对标的产品 alfred 和 raycast 等」，经过几轮的对话，cursor 帮我实现了整个功能。
当然，在跟 cursor 沟通的过程中，我也踩了很多的坑，比如状态栏的图标的问题，我沟通了大概有 30 多轮，但是 cursor 完全无法实现这个功能，最后我放弃了。 幸好，这个功能也不是必须的。
项目配置
macOS 的项目需要很多的配置文件，而这些配置文件对于我这个新手而言，还是挺费劲的，于是我梳理下我的一些了解与认识。
这些配置文件都是基于 xcode 的，可以从里面选择，也可以添加。 TODO
icon 生成
我是第一次想好好做一个 icon，刚开始的时候踩了一些坑，随着不断地搜索，总结出了一套目前对我来说，比较方便的流程。
探索过程
因为我的应用的名字是「小猫速记」，因此我就开始挑选小猫的图片，这个过程大概耗时半个小时，从 google 的搜图中， 挑选到了一个我觉得 OK 的小猫。
最开始我是直接打开了 photoshop，然后在里面开始扣小猫的图片，然后加背景，然后导出需要的 16p 一直到 1024p 的 icon 图片。
然后发现系统竟然不自动的倒圆角，我做出的图是一个方方正正的图，有点不好看，于是我开始搜索如何用 photoshop 倒圆角，学会了之后， 尝试一下，发现倒出来的圆角真的垃圾，最终我放弃了用 ps 倒角的方案，转而开始搜索 google 中的 macOS app icon 图，企图直接复制一个， 然后利用它的形状，往里面填充我的内容，最开始效果是 OK 的，但是导出 icon 之后，发现形状对了，但是大小大了一圈。
到上面的所有步骤，我知道，我走了弯路了，于是我开始搜索资料，最终搜索到了一篇少数派的文章, 然后从里面发现了 这个网站，根据提示和引导，我下载了一个 icon, 下载后的 icon 是 ics 格式的文件，我直接用 mac 自带的 PDF 阅读器打开， 然后左侧边栏就出现了从 16p 到 1024p 的各个 icon, 然后我直接右键第一个图片，就可以导出为 png 图片了。
把图片导入到 photoshop，发现，原来图片是又一圈空白的边框的，难怪我第一次制作的图大那么多。
之后就是把我第一步找到的小猫的图片抠出一个空白来，做出了对应的 icon。到这一步，我的 icon 就制作好了。
icon 导出
因为每一个 APP 都需要很多大小的 icon，刚开始我是手动输出的，发现太慢了，于是想到了 photoshop script 可以运行自动化脚本，于是跟 chatgpt 要了一个脚本执行了，快速把 icon 跑出来了。
脚本地址，建了一个 github 代码仓库，以后遇到其他的 ps 脚本也会记录到这里，方便以后得使用。
App 导出 – 我直接复制了 gpt 的结果
要将这个 app 安装到你的 Mac 上使用，有几种方法：
直接从 Xcode 导出应用（推荐，最简单）：
1. 在 Xcode 中选择 Product > Archive 2. 等待 Archive 完成 3. 在弹出的 Organizer 窗口中： - 选择刚创建的 Archive - 点击 "Distribute App" - 选择 "Copy App" - 选择保存位置 4. 将导出的 .app 文件拖到 Applications 文件夹通过 Xcode 构建发布版本：
1. 在 Xcode 工具栏中将 scheme 改为 "Release" 2. Product > Build 3. 在 Finder 中找到构建产物： - 按住 Option 键 - 点击 Finder 的 Go 菜单 - 选择 Library - 导航到 Developer/Xcode/DerivedData/Demaxi-xxx/Build/Products/Release - 找到 Demaxi.app 4. 将 Demaxi.app 拖到 Applications 文件夹创建签名版本（更安全，推荐）：
1. 在 Xcode 中选择项目 2. 选择 Signing & Capabilities 标签 3. 选择你的开发者账号 4. 设置 Team 5. 然后按方法 1 或 2 导出应用
首次运行时可能遇到的问题：
1. 提示”无法打开，因为来源不明”：
- 在 System Settings > Privacy & Security 中允许运行
- 或在终端执行：xattr -cr /Applications/Demaxi.app
- 权限问题：
- 首次运行时会请求辅助功能权限
- 需要在 System Settings > Privacy & Security > Accessibility 中允许
- 同样需要允许输入监控权限
建议的完整安装步骤：
准备工作：
// 在 Xcode 中设置版本号 // 在 Target > General 中设置 Version: 1.0.0 Build: 1构建发布版本：
1. 选择 "Any Mac" 作为运行目标 2. Product > Archive 3. 在 Organizer 中选择 "Distribute App" 4. 选择 "Copy App" 5. 保存到桌面安装应用：
1. 将 .app 文件拖到 Applications 文件夹 2. 右键点击应用 > Open 3. 点击 "Open" 确认运行设置权限：
1. 打开 System Settings 2. 进入 Privacy & Security 3. 找到并允许： - Accessibility - Input Monitoring 4. 重启应用验证安装：
1. 打开应用配置 webhook URL 和 token 2. 双击 Option 键测试快捷键 3. 输入内容测试功能
如果你想让应用开机自启动： 1. System Settings > General > Login Items 2. 点击 “+” 添加 Demaxi
这样你就能在自己的 Mac 上正常使用这个应用了。记得定期备份配置，以防需要重新安装。
Landing Page
Landing Page 我用了 vuepress, 用了 yarn2，我好一顿折腾，最后还是搞好了，当时脑子已经快不转了。
App 上线
App 的 release 是在 xcode 打包好之后，放到了 github 项目的 Release 上。