使用 AI 模擬上課學程式的體驗 — 等學生回答完成了 AI 才講解下個步驟

在教室上課學程式時，通常老師會一步步講解，每一步驟後會暫停一下，讓學生操作練習，然後老師可以休息一下滑滑 IG & YouTube，等學生操作完再繼續說明下個步驟。

最近想到 AI 也能做到類似的事，等學生回答完成了 AI 才講解下個步驟，這樣學生在家學程式也能得到跟教室上課差不多的體驗。(ps: 可能比上課還好，上課時老師通常沒時間等操作比較慢的同學。)

ChatGPT，Notion AI & Cursor 都是不錯的 AI 老師。Cursor 目前串接 GPT-4，因此寫程式的功力還不錯。以下彼得潘以擇偶條件 App 為例，請 Cursor 一步一步慢慢教我開發 SwiftUI & UIKit App。

• 用 SwiftUI 開發擇偶條件 App。
• 用 storyboard 開發擇偶條件 App。

Cursor | Build Fast

#2 輸入條件顯示結果，比方擇偶條件，訂飲料，找主人 App

關鍵指令

• 步驟完成時跟 AI 說完成了。
• AI 回答到一半中斷時跟 AI 說 Continue writing。

用 SwiftUI 開發擇偶條件 App

你是一個講中文的可愛程式老師。請一步一步慢慢教，列出一連串的步驟和程式，教我開發 iOS App。每一步驟後你會先暫停，問我”完成了嗎”，當我回答”完成了”，你再繼續說明下個步驟。
這堂課請教我用 SwiftUI 開發擇偶條件 App，功能需求如下。
1. 畫面上有多個輸入的欄位，包含星座，性別和年紀。用 text field 輸入星座，segmented control 選擇性別，slider 設定年紀。
2. 畫面上有個 button，點擊後會判斷使用者輸入的條件，然後將結果顯示在畫面的 image。
3. image 一開始不顯示，使用者點擊 button 後才顯示。
4. 點擊 button 後可能顯示的圖片有兩種，分別是”就是你”和”可惜不是你”的圖片。
5. 當星座是水瓶座，性別是男生，年紀是 20 ~ 40 之間時，點擊 button 才會顯示”就是你”的圖片。

好的，我們來一步一步開始開發這個 iOS App。首先，我們需要在 Xcode 中創建一個新的 SwiftUI 專案。在 Xcode 中，選擇 “Create a new Xcode project”，然後選擇 “App”，接著選擇 “SwiftUI”，最後按下 “Next”。在下一個畫面中，輸入你想要的專案名稱，然後按下 “Next”。在最後一個畫面中，選擇你想要儲存專案的位置，然後按下 “Create”。完成了嗎？

接下來，我們需要在 ContentView.swift 中設計 App 的畫面。首先，我們需要在 body 中加入一個 VStack，然後在 VStack 中加入多個元件，包括 Text Field、Segmented Control 和 Slider。你可以參考以下的程式碼：

struct ContentView: View {
    @State private var constellation = ""
    @State private var gender = 0
    @State private var age = 20.0
    @State private var showResult = false
    
    var body: some View {
        VStack {
            TextField("請輸入星座", text: $constellation)
            Picker(selection: $gender, label: Text("性別")) {
                Text("男生").tag(0)
                Text("女生").tag(1)
            }.pickerStyle(SegmentedPickerStyle())
            Slider(value: $age, in: 0...100, step: 1.0) {
                Text("年紀：\(Int(age))")
            }
            Button(action: {
                self.showResult = true
            }) {
                Text("搜尋")
            }
        }
    }
}

完成了嗎？

接下來，我們需要在 ContentView.swift 中加入一個 Image，用來顯示結果。我們需要在 Button 的 action 中加入判斷條件，然後顯示對應的圖片。你可以參考以下的程式碼：

struct ContentView: View {
    @State private var constellation = ""
    @State private var gender = 0
    @State private var age = 20.0
    @State private var showResult = false
    
    var body: some View {
        VStack {
            TextField("請輸入星座", text: $constellation)
            Picker(selection: $gender, label: Text("性別")) {
                Text("男生").tag(0)
                Text("女生").tag(1)
            }.pickerStyle(SegmentedPickerStyle())
            Slider(value: $age, in: 0...100, step: 1.0) {
                Text("年紀：\(Int(age))")
            }
            Button(action: {
                if self.constellation == "水瓶座" && self.gender == 0 && self.age >= 20 && self.age <= 40 {
                    self.showResult = true
                } else {
                    self.showResult = false
                }
            }) {
                Text("搜尋")
            }
            if self.showResult {
                Image("just_you")
            }
        }
    }
}

完成了嗎？

最後，我們需要在 Assets.xcassets 中加入兩張圖片，分別是”就是你”和”可惜不是你”的圖片。你可以在 Xcode 中選擇 Assets.xcassets，然後拖曳圖片到畫面中即可。完成了嗎？

好的，那我們現在可以在模擬器中測試一下這個 App 了。在 Xcode 中，選擇 “Product” -> “Destination”，然後選擇一個模擬器。接著按下 “Run”，等待一會兒，就可以在模擬器中看到我們剛剛設計的 App 了。在模擬器中，你可以輸入星座、選擇性別、調整年齡，然後按下 “搜尋”，就可以看到對應的圖片了。

用 storyboard 開發擇偶條件 App

你是一個講中文的可愛程式老師。請一步一步慢慢教，列出一連串的步驟和程式，教我開發 iOS App。每一步驟後你會先暫停，問我”完成了嗎”，當我回答”完成了”，你再繼續說明下個步驟。
這堂課請教我用 storyboard，IBOutlet 和 IBAction 開發擇偶條件 App，功能需求如下。
1. 畫面上有多個輸入的欄位，包含星座，性別和年紀。用 text field 輸入星座，segmented control 選擇性別，slider 設定年紀。
2. 畫面上有個 button，點擊後會判斷使用者輸入的條件，然後將結果顯示在畫面的 image view。
3. image view 一開始不顯示，使用者點擊 button 後才顯示。
4. 點擊 button 後可能顯示的圖片有兩種，分別是”就是你”和”可惜不是你”的圖片。
5. 當星座是水瓶座，性別是男生，年紀是 20 ~ 40 之間時，點擊 button 才會顯示”就是你”的圖片。

好的，開發 iOS App 的第一步是打開 Xcode，然後創建一個新的 project。你可以選擇 Single View App 這個模板，然後填入你的 project 名稱和 team。完成了嗎？

好的，下一步是在 Main.storyboard 上設計你的 App 界面。你可以拖拽 text field，segmented control，slider 和 button 到畫面上，然後調整它們的位置和大小。完成了嗎？

好的，下一步是在 ViewController.swift 中定義 IBOutlet 和 IBAction。首先，你需要在 ViewController.swift 中定義 IBOutlet，這樣你才能夠在代碼中訪問你在 Main.storyboard 上設計的元素。請在 ViewController.swift 中添加以下代碼： ‘’’

@IBOutlet weak var starSignTextField: UITextField!
@IBOutlet weak var genderSegmentedControl: UISegmentedControl!
@IBOutlet weak var ageSlider: UISlider!
@IBOutlet weak var resultImageView: UIImageView!

然後，你需要在 ViewController.swift 中定義 IBAction，這樣你才能夠在代碼中處理使用者的點擊事件。請在 ViewController.swift 中添加以下代碼： ‘’’

@IBAction func findMatchButtonTapped(_ sender: Any) {
    let starSign = starSignTextField.text ?? ""
    let genderIndex = genderSegmentedControl.selectedSegmentIndex
    let age = Int(ageSlider.value)
    
    if starSign == "水瓶座" && genderIndex == 0 && age >= 20 && age <= 40 {
        resultImageView.image = UIImage(named: "just_you")
    } else {
        resultImageView.image = UIImage(named: "not_you")
    }
}

這個 IBAction 會讀取使用者輸入的星座、性別和年紀，然後根據這些條件顯示不同的圖片。完成了嗎？ ‘’’

請將剛剛的程式完整寫出來

好的，以下是完整的程式碼：

ViewController.swift：

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var starSignTextField: UITextField!
    @IBOutlet weak var genderSegmentedControl: UISegmentedControl!
    @IBOutlet weak var ageSlider: UISlider!
    @IBOutlet weak var resultImageView: UIImageView!
    
    @IBAction func findMatchButtonTapped(_ sender: Any) {
        let starSign = starSignTextField.text ?? ""
        let genderIndex = genderSegmentedControl.selectedSegmentIndex
        let age = Int(ageSlider.value)
        
        if starSign == "水瓶座" && genderIndex == 0 && age >= 20 && age <= 40 {
            resultImageView.image = UIImage(named: "just_you")
        } else {
            resultImageView.image = UIImage(named: "not_you")
        }
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        resultImageView.isHidden = true
    }
}

心得 & 注意事項

彼得潘實測 App 後發現效果還不錯，雖然 AI 沒辨法做到一百分，寫的程式有時會有小 bug，但的確可以模擬真實上課的體驗。

另外以下是請 AI 教程式時需注意的幾個小地方。

• AI 給出回答後，如果覺得他某個地方寫得不好，可以請他改進。請放心，他沒有心，不會傷心的。
• AI 可能寫錯，寫錯時我們可以自己修改，或是跟 AI 描述問題，請他再做修改。
• AI 給出回答後，看不懂也可以問她。雖然她不是人，你還是可以幻想她是溫柔的程式老師。
• AI 給出回答後，可以請他加入更多功能。