cover

背景

平时空闲时间，乱七八糟的想法比较多，有时候希望能够快速记录一下当时的想法，每次拿手机打字感觉挺麻烦的，就想有个录音软件，但是系统自带的录音软件不支持iCloud同步，就感觉挺鸡肋的。然后就去Apple Store搜了下，找到了一个合适的APP，不过这玩意居然卖38 RMB，难以理解。当初搞APP开发的时候，我估计3天就能撸一个现成的。巅峰时期，心流状态下，帮一个朋友做APP 估的一个月的工作量，国庆5天就做完了。

现在虽然7-8年没搞过APP开发了，加上iOS开发的技术栈都迭代几轮了。不过我觉得在AI加持下写个录音App应该So Easy。还有生成图片的大模型，UI设计我都不用去麻烦别人。

功能拆解

功能需求一句话总结：我就是要一个录音App，能方便的在我的iPhone和Apple Watch上录音，能够进行iCloud同步，能够分享给其他人。

UI/UX

最开始想法很简单，我跟AI说下我要做个什么APP有什么功能，AI帮我把所有的UI都生成好。网上搜了下，相关的产品还不少随便贴一个 15 AI tools every UI/UX designer must try 。

试了一圈下来，稍微靠谱的不是很多，试用下来完成度比较高的是 uizard，但是生成的交互图太丑，如下图：

image.png

经过不断地优化调试Prompt，我最终放弃了AI生成交互的这条路。主要感受：

  1. 图片生成速度太慢（算力），一张图片平均下来5~8s，这东西跟抽盲盒，不可能一次就满意，不满意来回换太耗时。也不支持细节调整。
  2. 做为用户我也很难通过一段Prompt非常清楚的描述出自己要什么，我只能通过录音、简约这些抽象的词来告知AI我大致的需求。理想态是，AI能一下生成10或者100套来给用户选。
  3. 总体感受，AI for UI目前最多只是能做个辅助（说辅助估计UI&UX设计师都觉得高看它了），要想把所有的UI&UX工作交给AI来做基本不可能。

图标

想着UI这边比较复杂的功能AI表现不行，那简单的logo、按钮图片应该没啥问题吧。国内支持生成图片的大模型还挺多的了。比如 豆包、文心一言 都支持。不过 豆包、文心一言 生成的图片都有水印，所以直接被我Pass了。

AI图片生成的网站挺多的，随便找了一些试用了下，跟上面生成UI一样，虽然能生成图片，但是跟自己想要的天差地别。也不支持生成的图片微调，总的来说要生成一个让自己的满意的图片挺难的。

再就是一个APP里面的所有的按钮图标，风格需要保持一致，但是这个也不支持生成套图。所以最后只是把APP Logo 这个工作外包给了AI，APP内的各种图片图标还是用了苹果官方自带的一套图标库 SF Symbols ，虽然很简陋，但是整体风格也会跟统一一些。

贴下AI生成的一些图片：
image.png

画UI

以前我做iOS开发的时候主要是用的Objective-C来开发，当初主要是MVC的模式，我一般都是在Controller里面写画UI的代码。demo如下：

@property (nonatomic,assign) int count;
@property (nonatomic,strong) UIButton *btn;


- (void)viewDidLoad
{
    [super viewDidLoad];
    _btn = [UIButton buttonWithType:UIButtonTypeCustom];
    _btn.frame = CGRectMake(100,100,100,100);
    [_btn setTitle:[NSString stringWithFormat:@"%d", _count] forState:UIControlStateNormal];
    [_btn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    [_btn addTarget:self action:@selector(btnClick) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:_btn];
}

- (void)btnClick
{
    self.count += 1;
    [_btn setTitle:[NSString stringWithFormat:@"%d", _count] forState:UIControlStateNormal];
}

还有一种用的StoreBoard，可以通过通过拖拽控件的方式来画UI效果如下：

image.png

不过这2019年苹果推出了一个新的画UI的技术：SwiftUI，与早期的UIKit（上面介绍的两种都是UIKite模式）不同，SwiftUI使用声明式语法，这使得构建复杂界面和动画更加直观和简洁。支持实时预览，修改代码所见即所得（实际上大部分时候UI刷新比较慢）。SwiftUI非常适合于实现MVVM（Model-View-ViewModel）设计模式。

struct ContentView: View {
    @State private var count = 0

    var body: some View {
        VStack {
            Text("Count: \(count)")
                .font(.largeTitle)
            Button(action: {
                count += 1
            }) {
                Text("Increase")
            }
            .padding()
        }
    }
}

这个例子展示了如何使用@State管理状态，并将其绑定到视图上。当按钮被点击时，计数器增加，视图也会相应地更新。相比上面的UIKit的方式会简单直接很多。变量count跟文本控件绑定了，修改count就等于修改了Text上显示的内容，的确是方便了很多。

虽然我没有学习过Swift也不知道SwiftUI任何基本用法，在AI的加持下我觉得还是用SwiftUI来画个界面问题不大。实际上AI给了我很大的惊喜，结合gpt4o的多模态的能力，我看到其他APP好的交互形式，我直接可以截图发送给UI，让他们帮我生成SwiftUI，大多时候它都能帮我正确的识别出截图中字体、颜色、控件等等，大大的提升了我在画界面时候的开发效率。 感觉AI在生成这种胶水代码方面真的是大有可为。

image.png

但是在一些复杂的交互场景，AI局限性还是体现出来了，比如我要实现一个根据录音时候说话声音大小来展示的声波图，调教了很久，AI始终不能给我一个Work的Demo出来。所以这个功能我还是放弃使用AI了，最后自己实现。

我需要实现的声波图

image.png

iCloud 云同步

iCloud支持三种类型数据同步：

  1. Key-Value Storage，是iCloud提供的一种简单存储机制，用于存储少量数据，如用户设置和偏好。每个键值对都会同步到用户的所有设备上。
  2. iCloud Documents，iCloud Documents是用于在用户的所有设备上存储和共享文档的服务。它允许应用程序存储用户生成的内容并在所有设备上保持同步。
  3. CloudKit，CloudKit是iCloud提供的高级云存储服务，用于存储结构化数据。它可以处理更复杂的数据模型和大规模数据同步需求，是一种更强大的解决方案。（看是很高大上，其实我感觉没啥用，我要云存储，我自己起个Server，存我自己DB不就行了，为毛要存你iCloud, 官方CloudKit文档晦涩难度，API使用麻烦的要命，强烈不推荐用这玩意）

要调试iCloud这功能，居然还要开个苹果开发者资格才行（668RMB），这一点苹果不厚道。

image.png

我跟AI说了下，我要做iCloud文件同步的能力，AI很快就给我一个可以用的代码：

func saveFileToICloud() {
    // 获取iCloud文档目录的URL
    guard let iCloudURL = FileManager.default.url(forUbiquityContainerIdentifier: nil)?.appendingPathComponent("Documents") else {
        print("iCloud is not available")
        return
    }

    // 创建文本文件内容
    let fileName = "example.txt"
    let fileContent = "Hello, iCloud!"

    // 构建文件路径
    let fileURL = iCloudURL.appendingPathComponent(fileName)
    
    // 将内容写入文件
    do {
        try fileContent.write(to: fileURL, atomically: true, encoding: .utf8)
        print("File saved to iCloud")
    } catch {
        print("Failed to save file: \(error.localizedDescription)")
    }
}

代码看出，如果只要用iCloud的文件同步能力，接口很简单，只用使用FileManager.default.url(forUbiquityContainerIdentifier: nil)去拿文件路径就行了，把文件写到这个路径下，iOS系统会去帮你做同步和状态管理，对于程序员来说，就跟读写本地文件一样。离线都可以正常读写，这点要夸下苹果，封装的好，RD心智负担小。

上面这个文件虽然保存在iCloud里面了，但是我还想在Mac和iOS上ICloud文件管理里面能够看到这个文件夹。这么小的一个功能点，我跟AI来来回回交流了10几轮，都没搞定。最好还是自己Google搜了下，然后根据搜到的一些关键字，再加上我具体的意图，AI总于给了我一个可用的答案：

在项目的info.plist里面添加上这些配置就好了。

<key>NSUbiquitousContainers</key>
<dict>
    <key>iCloud.fanlv.fun.Melody</key>
    <dict>
        <key>NSUbiquitousContainerIsDocumentScopePublic</key>
        <true/>
        <key>NSUbiquitousContainerName</key>
        <string>Melody</string>
        <key>NSUbiquitousContainerSupportedFolderLevels</key>
        <string>Any</string>
    </dict>
</dict>

这个了这个配置以后，在iCloud里面App存到iCloud的文件夹就能显示出来了。

WechatIMG195.jpg

ShortCut && Siri

iOS的快捷指令(ShortCut)，是一个很强大的功能，能够通知指令调度编排串联iOS上各种APP的各种能力，老互联人玩过IFTTT的应该都不陌生。

举几个例子，我可以实现一个截屏翻译的ShortCut，他可以给我一键截屏 -> OCR识别图片文字 -> 然后帮我翻译 -> 显示翻译的结果。

image.png

更高级一点玩法，可以跟智能家居联动，比如我指纹开门以后，自动打开我房间的灯/空调。

有了ShortCut，就可以通过Siri来唤醒和调用ShortCut对应的能力。这样的好处是，我能通过我iPhone或者AppleWatch的Siri来调用ShortCut。比如控制家里任何智能家居或者执行各种复杂的APP功能。

在这里我主要想实现一个简单功能：“通过Siri唤醒APP然后开始录音”，就这么简单一个功能，让我跟AI从周六晚上6点一直纠缠到了凌晨1点（话说写代码/搬砖 还是很容易进入心流模式的）。

我跟AI说我要在我的APP识别我是不是已经添加过这个快捷指令了，添加了就显示已经添加，没有添加就显示点击按钮添加到Siri：

image.png

AI这厮一直跟我说苹果因为隐私原因没有提供查询所有快捷指令的API，不行最后还是各种Google搜关键字，然后结合别人给的一些接口，再去问AI，期间因为各种细节问题调了半天，最后实现其实很简单，核心代码如下：

     // 添加 Shortcut 指令核心代码：
     let activity = NSUserActivity(activityType: "LaunchMelodyAppIntent")
    activity.title = NSLocalizedString("oneKeyRecord", comment: "")
    activity.userInfo = ["fan": "lv"]
    activity.isEligibleForSearch = true
    activity.isEligibleForPrediction = true
    let shortCut = INShortcut(userActivity: activity)


     // 判断是否添加过这个指令核心代码：
    INVoiceShortcutCenter.shared.getAllVoiceShortcuts { (shortcuts, error) in
        guard error == nil else {
            return
        }
        if let shortcuts = shortcuts {
            for voiceShortcut in shortcuts {
                if let userActivity = voiceShortcut.shortcut.userActivity,
                   let userInfo = userActivity.userInfo,
                   let fan = userInfo["fan"] as? String {
                    if fan == "lv" {
                        isAlreadyAddToSiri = true
                    }
                }
            }
        }
    }

参考了下这个方案 iOS-自定义Intent及ShortCut，能通过快捷指令唤醒APP并跳转到指定页面

DynamicIsland（灵动岛）

灵动岛功能实现相对较简单，AI基本说的跟苹果官网的 Displaying live data with Live Activities 这个差不多。

也没费太多力气，唯一一点需要注意的就是动态更新的话需要在宿主APP里面写代码定时更新灵动岛的数据，实现如下：

timer = Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { [weak self] timer in
    for activity in Activity<MelodyActivityAttributes>.activities where activity.id == self.activityID {
        Task {
            await activity.update(using: MelodyActivityAttributes.ContentState(timerLabel:self.recordSecond.toSimpleRecordTimeString()))
        }
    }
}

具体实现效果如下：

WechatIMG208.jpg

Apple Watch App

Apple Watch App功能基本是iOS App的阉割版，大部分代码都可以复用，唯一要说的就是，要想ShortCut能在Apple Watch上运行，也要新建一个。

image.png

image.png

不过也要吐槽一下iOS和Apple Watch共享代码的实现方法太ugly了，在把对应的源码文件所属的项目，勾选下WatchApp，在WatchApp工程里面就可以用了，完全没有模块的概念。

image.png

总结

  • UI&UX，目前想要AI来生成交互图，这个跟抽盲盒一样，可用性极低，还任重道远。
  • UI代码生成，gpt4o这一块能力有点惊艳到我，我想“借鉴“一些App设计，给他一个截图，很快就能给我生成相关的UI代码，可用性极高，基本贴过来，调整下细节就可以了。
  • 新功能调试，像Shortcut、灵动岛这种新功能，由于我之前没有开发过的，所以问的问题可能比较抽象（比如我要一个 xx 功能），这可能会让你在一个死胡同里面，跟AI花费大量时间来回拉扯，这个其实挺痛苦的。需要自己扩宽一下思路（Google了解基本的实现方式），再输入具体信息再来问，你又会发现柳暗花明又一村。

总的来说，AI已经全面改变我的学习、生活方式了。想想当初学习新的技术时候，有AI的话一定可以事半功倍。还有当时搞什么技术讨论群，大家在群里为了一些技术问题争论的面红耳赤，有时候甚至会上升到人生攻击。现在有了AI，可以大大的减少一些技术上毫无意义的争论。

随着算法和算力的不断优化和提升，相信AI以后还能有更大的突破。不拥抱变化，就要被变化淘汰。