尝试用AI辅助我写一个类抖音的APP（一）

LogicAi
525 阅读4分钟

背景，我想用SwiftUI做一个类似抖音滑动的APP，但内容是时MC皮肤。究竟AI能在这上面起多大的作用？开始我的实践之旅。

问：

背景，我想用SwiftUI快速开发一个类似tik tok的滑动翻页查看Minecraft皮肤的APP，功能点包括： 1.向上滑动翻页，每页一个皮肤 2.翻页的内容从https://xxx/json/skin0.json下载下来 具体的内容请你访问这个链接 https://xxx/json/skin0.json 3.展示皮肤的页面是加载一个带动画的dae模型，这个模型的纹理图片为skin0.json中的img字段，再在这个字段前面拼接上https://xxx/得到全路径。 （1）因为向上滑动为翻页，所以这个3d模型交互禁用上下滑动，但可以左右滑动查看模型的水平360度旋转 （2）在展示皮肤页面下方加上admob的横幅广告 就这些，开始你的编码吧， 要求拿过来就能用，不能省略中间任何步骤，用SwiftUI实现。

ChatGPT4回答：

在这个情况下，我不能直接编写整个应用的代码，因为它可能需要非常多的代码，超过了这个平台的长度限制。另外，我也不能提供一个可以直接运行的代码，因为这需要一个完整的项目设置，包括必要的依赖关系、项目结构和其他配置。

然后，我可以提供一个SwiftUI的基本代码结构，它将帮助你开始构建你的APP。

首先，我们需要在你的项目中导入以下库：

import SwiftUI
import SceneKit
import GoogleMobileAds
然后，创建一个 ContentView，它会显示你的Minecraft皮肤和广告条。在这个视图中，我们会使用一个 ScrollView 来实现向上滑动翻页的效果。

struct ContentView: View {
    @StateObject var skinViewModel = SkinViewModel()
    var body: some View {
        VStack {
            ScrollView {
                ForEach(skinViewModel.skins, id: \.self) { skin in
                    SkinView(skin: skin)
                }
            }
            AdView()
        }
        .onAppear {
            skinViewModel.fetchSkins()
        }
    }
}
SkinViewModel 是一个 ObservableObject，它负责从你的服务器获取数据并解析成 Skin 对象。你可以使用 URLSession 来实现这个。

class SkinViewModel: ObservableObject {
    @Published var skins = [Skin]()
    func fetchSkins() {
        // 这里用 URLSession 获取和解析数据
    }
}
上述代码中的 SkinView 是一个视图，它显示一个3D模型和皮肤的纹理。你可以使用 SceneView 来加载你的 .dae 文件，并为其设置纹理。

struct SkinView: View {
    var skin: Skin
    var body: some View {
        SceneView(scene: SCNScene(named: "yourModel.dae"), options: [.autoenablesDefaultLighting])
            .gesture(DragGesture(minimumDistance: 0, coordinateSpace: .local)
                        .onChanged({ value in
                            // 这里处理左右滑动
                        }))
    }
}
最后，AdView 是一个视图，它显示Google AdMob的广告条。你可以使用 UIViewRepresentable 来创建一个视图，它可以显示你的广告。

struct AdView: UIViewRepresentable {
    func makeUIView(context: Context) -> GADBannerView {
        let banner = GADBannerView(adSize: kGADAdSizeBanner)
        banner.adUnitID = "your-ad-unit-id"
        banner.rootViewController = UIApplication.shared.windows.first?.rootViewController
        banner.load(GADRequest())
        return banner
    }
    func updateUIView(_ uiView: GADBannerView, context: Context) {}
}
这个代码只是一个起点，你需要根据你的需求进行调整和添加更多的细节。例如，你可能需要自定义你的3D模型的交互，添加错误处理，优化广告的显示，等等。

上面这个代码，给出了一个非常粗略的思路，大概40%的样子吧，离完成一个项目还差的很远很远。看来让ChatGPT来完成一个完整的项目，目前的阶段还是有很大差距的。 抖音向上滑动翻页这个，它给的代码只能达到滚动，没有翻页的效果

ScrollView {
    ForEach(skinViewModel.skins, id: \.self) { skin in
        SkinView(skin: skin)
    }
}

再试试Claude，看看它的表现

好的,我来尝试用SwiftUI实现一个类似TikTok的滑动翻页查看Minecraft皮肤APP的代码:

swift

Copy code

import SwiftUI
import SceneKit

struct SkinView: View {
    @State private var skins = [Skin]()
    
    var body: some View {
        ZStack(alignment: .bottom) {
            if let skin = skins.first {
                Skin3DView(skin: skin)
                    .rotationGesture(for: .horizontal) 
                    .disabled(for: .vertical)
            }
            
            HStack { 
                Spacer()
                BannerAdView()
                Spacer()
            }
        }
        .onAppear {
            loadSkins() 
        }
    }
    
    func loadSkins() {
        guard let url = URL(string: "https://xxx/json/skin0.json") else {
            return
        }
        
        URLSession.shared.dataTask(with: url) { data, _, _ in
            let skins = try! JSONDecoder().decode([Skin].self, from: data!)
            DispatchQueue.main.async {
                self.skins = skins
            }
        }.resume()
    }
}

struct Skin3DView: View {
    var skin: Skin
    
    var body: some View {
        SceneView(scene: scene(for: skin), options: [])
            .ignoresSafeArea()
    }
    
    func scene(for skin: Skin) -> SCNScene {
        let scene = SCNScene()
        
        let node = SCNNode()
        node.position = SCNVector3Zero
        
        let url = URL(string: "https://xxx/\(skin.img)")!
        let material = SCNMaterial()
        material.diffuse.contents = url
        
        let geometry = SCNSphere(radius: 1)
        geometry.materials = [material]
        
        node.geometry = geometry
        scene.rootNode.addChildNode(node)
        
        return scene
    }
}

struct BannerAdView: UIViewRepresentable {
    func makeUIView(context: Context) -> GADBannerView {
        let view = GADBannerView()
        // TODO: Add ad unit ID
        return view 
    }

    func updateUIView(_ uiView: GADBannerView, context: Context) {
        uiView.load(GADRequest())
    }
}

struct Skin: Decodable {
    let img: String
}
这个代码实现了你描述的需求:

使用SwiftUI的ZStack、SceneView等组件构建界面
从指定URL加载Skin模型数据
SceneView加载皮肤3D模型,禁用垂直手势,允许水平旋转
添加了底部Banner广告View
使用onAppear异步加载皮肤数据
请检查代码,我尽量覆盖了你提到的功能点,使用了SwiftUI来开发。如果有需要调整或者补充的地方,请告诉我。

Claude的回答完整度高一些，能到55%吧。不过它也漏了滑动翻页的逻辑了。

总结

截止目前2023年8月，让AI完整实现一个完整的APP项目还是有很大差距的，老板们想的让AI替代员工，替代程序员，还要再等些时日，我们继续往下探索，看下AI给我们能到什么样程度的帮助。

avatar
文章
阅读
粉丝