ai on Software Development Notes

Create a circular slider in SwiftUI with ChatGPT

Eric Callanan — Sunday, 16 Apr 2023

It may have been too ambitious to ask ChatGPT to create an iOS app. So in this article, I ask ChatGPT to create a circular slider in SwiftUI. It can take a while and the more information provided to ChatGPT the better, but it is possible to get useable code from ChatGPT.

Related articles on ChatGPT and SwiftUI:

Can ChatGPT create an iOS app in SwiftUI - part 1

Can ChatGPT create an iOS app in SwiftUI - part 2

Create a circular slider in SwiftUI with ChatGPT

See related article on how to Create a circular slider in SwiftUI.

Ask ChatGPT to create a Circular Slider - Circular Slider 1

Let's give ChatGPT as much information as we can on what we want for a circular slider. The following prompt is given to ChatGPT to get it to generate the SwiftUI code.

First prompt to create a circular slider

PROMPT:  
Write the swiftui code to create a circular slider. The circle should have a grey
background and progress is shown with the color turning blue when complete. the
progress is measured in a clockwise direction with a starting value of zero at 12
o clock and progress clockwise to an end value of 100. A drag gesture should be
used to interact with the circular slider. The thumb indicator should be a yellow
circle on the circular slider. The current Slider value should be displayed in
large text in the centre of the circular slider

Response from chatGPT

First, you'll need to create a custom CircularSlider view that can handle the drawing and interaction. Here's a SwiftUI implementation of the circular slider you described:

 1import SwiftUI
 2
 3struct ContentView: View {
 4    @State private var sliderValue: Double = 0
 5
 6    var body: some View {
 7        VStack {
 8            CircularSlider(value: $sliderValue)
 9            Text("Current Value: \(sliderValue, specifier: "%.2f")")
10                .padding()
11        }
12    }
13}
14
15struct CircularSlider: View {
16    @Binding var value: Double
17    private let lineWidth: CGFloat = 20
18    private let thumbSize: CGFloat = 30
19
20    var body: some View {
21        ZStack {
22            Circle()
23                .stroke(Color.gray, lineWidth: lineWidth)
24            
25            Circle()
26                .trim(from: 0, to: CGFloat(value / 100))
27                .stroke(Color.blue, lineWidth: lineWidth)
28                .rotationEffect(.degrees(-90))
29
30            Circle()
31                .fill(Color.yellow)
32                .frame(width: thumbSize, height: thumbSize)
33                .padding(lineWidth / 2)
34                .rotationEffect(.degrees(-90 + value * 3.6))
35                .gesture(DragGesture(minimumDistance: 0)
36                            .onChanged(updateValue(from:)))
37
38            Text("\(value, specifier: "%.0f")")
39                .font(.largeTitle)
40                .fontWeight(.bold)
41        }
42    }
43
44    private func updateValue(from drag: DragGesture.Value) {
45        let vector = CGVector(dx: drag.location.x - lineWidth - thumbSize / 2, dy: drag.location.y - lineWidth - thumbSize / 2)
46        let angle = atan2(vector.dy, vector.dx) + .pi / 2
47        let fixedAngle = angle < 0 ? angle + 2 * .pi : angle
48        value = Double(fixedAngle / (2 * .pi) * 100)
49    }
50}
51
52struct ContentView_Previews: PreviewProvider {
53    static var previews: some View {
54        ContentView()
55    }
56}

This code defines a CircularSlider struct that takes a binding to a value variable. The slider is drawn using a combination of Circle and Text views, and a DragGesture is used to update the value based on user interaction. The thumb is a yellow circle on the circular slider, and the current slider value is displayed in large text in the center of the slider. The progress is measured in a clockwise direction, starting at 12 o'clock, with the color changing from gray to blue as the slider is completed.

This is not bad, but it doesn't work. There is a gray circle for the slider and the progress value is displayed in the center. There is an additional text field showing the current value below the circular indicator, which is not required. The progress does change and display in blue and the progress value does update in real time. The problem is the drag gesture works somewhere very close to the center of the circular slider and the yellow circle for the thumb is in the center and remains in the center.

First Circular Slider with thumb in the wrong place and the gesture not working - code generated by ChatGPT 4

First Circular Slider with thumb in the wrong place and the gesture not working - code generated by ChatGPT 4

First Circular Slider with thumb in the wrong place and the gesture not working - code generated by ChatGPT 4

Regenerate response - Circular Slider 2

Rather than try and get ChatGPT to fix the issues, let's just select Regenerate response to see what else we might get.

Prompt to ChatGPT

PROMPT:  
Write the swiftui code to create a circular slider. The circle should have a grey
background and progress is shown with the color turning blue when complete. the
progress is measured in a clockwise direction with a starting value of zero at 12
o clock and progress clockwise to an end value of 100. A drag gesture should be
used to interact with the circular slider. The thumb indicator should be a yellow
circle on the circular slider. The current Slider value should be displayed in
large text in the centre of the circular slider

Response from chatGPT

To create a circular slider in SwiftUI, you can create a custom view that represents the circular slider and use a drag gesture to update the slider's value. Here's the code for the CircularSlider view:

CircularSlider

 1import SwiftUI
 2
 3struct CircularSlider: View {
 4    @State private var sliderValue: Double = 0
 5    @State private var dragOffset = CGSize.zero
 6    private let circleWidth: CGFloat = 5
 7    
 8    private var circleProgress: Double {
 9        return sliderValue / 100
10    }
11    
12    private var rotationAngle: Double {
13        return 360 * circleProgress
14    }
15    
16    var body: some View {
17        ZStack {
18            Circle()
19                .stroke(Color.gray, lineWidth: circleWidth)
20            
21            Circle()
22                .trim(from: 0, to: CGFloat(circleProgress))
23                .stroke(Color.blue, lineWidth: circleWidth)
24                .rotation(Angle(degrees: -90))
25            
26            Circle()
27                .fill(Color.yellow)
28                .frame(width: circleWidth * 3, height: circleWidth * 3)
29                .offset(x: -radius, y: 0)
30                .rotationEffect(Angle(degrees: rotationAngle - 90))
31                .gesture(
32                    DragGesture(minimumDistance: 0)
33                        .onChanged(updateSliderValue(from:))
34                )
35            
36            Text("\(Int(sliderValue))")
37                .font(.largeTitle)
38                .fontWeight(.bold)
39        }
40    }
41    
42    private var radius: CGFloat {
43        return circleWidth * 20
44    }
45    
46    private func updateSliderValue(from drag: DragGesture.Value) {
47        let vector = CGVector(dx: drag.location.x - radius, dy: drag.location.y - radius)
48        let angle = atan2(vector.dy, vector.dx)
49        let fixedAngle = angle < 0 ? angle + 2 * CGFloat.pi : angle
50        sliderValue = Double(fixedAngle / (2 * CGFloat.pi)) * 100
51    }
52}

To use the CircularSlider view, include it in your main view:

ContentView

 1import SwiftUI
 2
 3struct ContentView: View {
 4    var body: some View {
 5        CircularSlider()
 6            .frame(width: 200, height: 200)
 7            .padding()
 8    }
 9}
10
11struct ContentView_Previews: PreviewProvider {
12    static var previews: some View {
13        ContentView()
14    }
15}

This code will create a circular slider with the specified colors and interaction. The slider will start at the 12 o'clock position and progress clockwise, with a yellow thumb indicator. The current slider value will be displayed in the center of the circular slider.

This is worse than the first attempt with a compile error in the CircularSlider struct. This is caused by the the use of rotation instead of rotationEffect on a circle.

Compile error in code for Circular Slider 2 - code generated by ChatGPT 4

Let's feedback the compile error to ChatGPT

PROMPT:  
There is a compile error in line ".rotation(Angle(degrees: -90))" - error =
"Value of type 'some View' has no member 'rotation'"

Response from chatGPT

Apologies for the confusion. I made a mistake in the code. The correct function name should be rotationEffect. Here's the corrected code snippet:

CircularSlider and ContentView

 1import SwiftUI
 2
 3struct CircularSlider: View {
 4    @State private var sliderValue: CGFloat = 0
 5    @State private var angle: Double = 0
 6    
 7    var body: some View {
 8        ZStack {
 9            Circle()
10                .stroke(Color.gray, lineWidth: 20)
11                .frame(width: 200, height: 200)
12            
13            Circle()
14                .trim(from: 0, to: sliderValue / 100)
15                .stroke(Color.blue, lineWidth: 20)
16                .frame(width: 200, height: 200)
17                .rotationEffect(.degrees(-90))
18            
19            Circle()
20                .fill(Color.yellow)
21                .frame(width: 30, height: 30)
22                .offset(y: -100)
23                .rotationEffect(Angle.degrees(Double(sliderValue / 100 * 360 - 90)))
24                .gesture(
25                    DragGesture(minimumDistance: 0)
26                        .onChanged { value in
27                            let vector = CGVector(dx: value.location.x - 100, dy: value.location.y - 100)
28                            let angle = atan2(vector.dy, vector.dx)
29                            let degree = Double(angle) * 180 / .pi
30                            let newValue = (degree + 90) * 100 / 360
31                            sliderValue = CGFloat(max(min(newValue, 100), 0))
32                        }
33                )
34            
35            Text("\(Int(sliderValue))")
36                .font(.system(size: 50, weight: .bold, design: .rounded))
37                .foregroundColor(.blue)
38        }
39    }
40}
41
42struct ContentView: View {
43    var body: some View {
44        CircularSlider()
45            .padding()
46    }
47}
48
49struct ContentView_Previews: PreviewProvider {
50    static var previews: some View {
51        ContentView()
52    }
53}

Now, the code should compile and work as expected.

Circular Slider 2 with wierd behavior on drag gesture - code generated by ChatGPT 4

Regenerate response - Circular Slider 3

We can't just use Regenerate response as this will just rerun the last prompt, which was to address the compile error. In order to regenerate a response on the original request, it is necessary to edit the request and then select Save & Submit. I just added a space at the end as I want to stick with the original request and see the different responses we get.

Prompt to ChatGPT

PROMPT:  
Write the swiftui code to create a circular slider. The circle should have a grey
background and progress is shown with the color turning blue when complete. the
progress is measured in a clockwise direction with a starting value of zero at 12
o clock and progress clockwise to an end value of 100. A drag gesture should be
used to interact with the circular slider. The thumb indicator should be a yellow
circle on the circular slider. The current Slider value should be displayed in
large text in the centre of the circular slider

Response from chatGPT

To create a circular slider in SwiftUI, you can create a custom view that combines the drag gesture and drawing the desired shapes. Here's a basic implementation for the slider you described:

CircularSlider and ContentView

 1import SwiftUI
 2
 3struct CircularSlider: View {
 4    @State private var sliderValue: CGFloat = 0
 5    private let maxValue: CGFloat = 100
 6    
 7    var body: some View {
 8        ZStack {
 9            Circle()
10                .stroke(Color.gray, lineWidth: 20)
11            
12            Circle()
13                .trim(from: 0, to: sliderValue / maxValue)
14                .stroke(Color.blue, lineWidth: 20)
15                .rotationEffect(.degrees(-90))
16            
17            Text("\(Int(sliderValue))")
18                .font(.largeTitle)
19                .fontWeight(.bold)
20            
21            Circle()
22                .fill(Color.yellow)
23                .frame(width: 24, height: 24)
24                .offset(y: -130)
25                .rotationEffect(.degrees(Double(sliderValue / maxValue * 360 - 90)))
26                .gesture(
27                    DragGesture(minimumDistance: 0)
28                        .onChanged { value in
29                            let vector = CGVector(dx: value.location.x - 130, dy: value.location.y - 130)
30                            let angle = atan2(vector.dy, vector.dx)
31                            let normalizedAngle = angle < 0 ? angle + 2 * .pi : angle
32                            sliderValue = max(0, min(maxValue, normalizedAngle * maxValue / (2 * .pi)))
33                        }
34                )
35        }
36        .frame(width: 260, height: 260)
37    }
38}
39
40struct ContentView: View {
41    var body: some View {
42        CircularSlider()
43    }
44}
45
46struct ContentView_Previews: PreviewProvider {
47    static var previews: some View {
48        ContentView()
49    }
50}

This code creates a circular slider with a gray background circle, a blue progress circle, a yellow thumb indicator, and the slider value displayed in the center. The slider interaction is achieved using a drag gesture, and the slider value updates as you move the thumb indicator around the circle.

Circular Slider 3 with wierd behavior on drag gesture - code generated by ChatGPT 4

Regenerate response - Circular Slider 4

Select Regenerate response to see another version.

Prompt to ChatGPT

PROMPT:  
Write the swiftui code to create a circular slider. The circle should have a grey
background and progress is shown with the color turning blue when complete. the
progress is measured in a clockwise direction with a starting value of zero at 12
o clock and progress clockwise to an end value of 100. A drag gesture should be
used to interact with the circular slider. The thumb indicator should be a yellow
circle on the circular slider. The current Slider value should be displayed in
large text in the centre of the circular slider

Response from chatGPT

To create a custom SwiftUI circular slider, you can define a custom view CircularSlider that takes care of drawing the background circle, progress circle, and the thumb indicator. To handle the gesture, you'll use the DragGesture SwiftUI gesture.

Here's the code for the custom circular slider:

CircularSlider and ContentView

 1import SwiftUI
 2
 3struct CircularSlider: View {
 4    @State private var sliderValue: Double = 0
 5    @State private var angle: Angle = .degrees(0)
 6    let circleWidth: CGFloat = 10
 7    let thumbRadius: CGFloat = 15
 8
 9    var body: some View {
10        GeometryReader { geometry in
11            let circleRadius = min(geometry.size.width, geometry.size.height) / 2 - thumbRadius
12            let circleCenter = CGPoint(x: geometry.size.width / 2, y: geometry.size.height / 2)
13
14            ZStack {
15                // Background circle
16                Circle()
17                    .stroke(Color.gray, lineWidth: circleWidth)
18
19                // Progress circle
20                Circle()
21                    .trim(from: 0, to: CGFloat(sliderValue / 100))
22                    .stroke(Color.blue, lineWidth: circleWidth)
23                    .rotation(Angle.degrees(-90))
24
25                // Thumb indicator
26                Circle()
27                    .fill(Color.yellow)
28                    .frame(width: thumbRadius * 2, height: thumbRadius * 2)
29                    .position(x: circleCenter.x + circleRadius * cos(CGFloat(angle.radians - Double.pi / 2)),
30                              y: circleCenter.y + circleRadius * sin(CGFloat(angle.radians - Double.pi / 2)))
31
32                // Current value text
33                Text("\(Int(sliderValue))")
34                    .font(.largeTitle)
35                    .fontWeight(.bold)
36                    .foregroundColor(Color.blue)
37            }
38            .gesture(
39                DragGesture(minimumDistance: 0)
40                    .onChanged { value in
41                        let angleInRadians = atan2(value.location.y - circleCenter.y, value.location.x - circleCenter.x)
42                        angle = Angle(radians: Double(angleInRadians) + Double.pi / 2)
43
44                        let percent = (angle.degrees + 90) / 360
45                        sliderValue = max(min(percent * 100, 100), 0)
46                    }
47            )
48        }
49        .aspectRatio(1, contentMode: .fit)
50    }
51}
52
53struct ContentView: View {
54    var body: some View {
55        CircularSlider()
56            .padding()
57    }
58}
59
60struct ContentView_Previews: PreviewProvider {
61    static var previews: some View {
62        ContentView()
63    }
64}

This is really close. The yellow circle for the thumb indicator tracks the gesture and moves back and forth with the gesture. The issue is the progress of the slider is off by an angle of 90 degrees. The thumb also jumps to any position on the circular slider on the initialization of a drag gesture. It is good to see the progress color on the circular slider updating in real time and the and to see the value in the center updating in synch. It is a bit disconcerting to see the progress is always ahead of the expected progress. In addition, the thumb circle is displayed inside the circular slider rather than on top.

Circular Slider 4 with thumb and progress off by 90 degrees - code generated by ChatGPT 4

Regenerate response - Circular Slider 5

Once again, select Regenerate response to see another version.

Prompt to ChatGPT

PROMPT:  
Write the swiftui code to create a circular slider. The circle should have a grey
background and progress is shown with the color turning blue when complete. the
progress is measured in a clockwise direction with a starting value of zero at 12
o clock and progress clockwise to an end value of 100. A drag gesture should be
used to interact with the circular slider. The thumb indicator should be a yellow
circle on the circular slider. The current Slider value should be displayed in
large text in the centre of the circular slider

Response from chatGPT

To create a custom SwiftUI circular slider, you can use a combination of shapes, gestures, and SwiftUI views. Here's a starting point for your circular slider:

CircularSlider and ContentView

 1import SwiftUI
 2
 3struct CircularSlider: View {
 4    @State private var sliderValue: Double = 0
 5    private let sliderRange = 0.0...100.0
 6
 7    var body: some View {
 8        ZStack {
 9            Circle()
10                .stroke(Color.gray, lineWidth: 20)
11            
12            Circle()
13                .trim(from: 0, to: CGFloat(sliderValue / 100))
14                .stroke(Color.blue, lineWidth: 20)
15                .rotationEffect(.degrees(-90))
16            
17            Circle()
18                .fill(Color.yellow)
19                .frame(width: 30, height: 30)
20                .offset(y: -150)
21                .rotationEffect(.degrees(-90 + sliderValue * 3.6))
22
23            Text("\(Int(sliderValue))")
24                .font(.largeTitle)
25                .fontWeight(.bold)
26        }
27        .frame(width: 300, height: 300)
28        .gesture(
29            DragGesture(minimumDistance: 0)
30                .onChanged { value in
31                    let vector = CGVector(dx: value.location.x - 150, dy: value.location.y - 150)
32                    let angle = atan2(vector.dy, vector.dx) + .pi / 2
33                    let value = angle >= 0 ? angle : angle + 2 * .pi
34                    sliderValue = max(sliderRange.lowerBound, min(sliderRange.upperBound, Double(value) * 100 / (2 * .pi)))
35                }
36        )
37    }
38}
39
40struct ContentView: View {
41    var body: some View {
42        CircularSlider()
43    }
44}
45
46struct ContentView_Previews: PreviewProvider {
47    static var previews: some View {
48        ContentView()
49    }
50}

This code defines a CircularSlider view that has a gray background circle and a blue progress circle, with a yellow draggable thumb indicator. The current value of the slider is displayed in large text in the center. The slider value ranges from 0 to 100, with 0 at the 12 o'clock position and progress going clockwise.

This is also really close, except in this version the progress is matching the touch position in the drag gesture and it is the thumb that is lagging behind by 90 degrees. Circular Slider 5 is arguably better than Circular Slider 4 in a number of ways. For the first time ehe thumb is placed centered over the top of the circular slider. It also feels better to use when the progress matches the touch position. However, the thumb position is off by 90 degrees.

Circular Slider 5 with drag matching progress - code generated by ChatGPT 4

Regenerate response - Circular Slider 6

Once again, select Regenerate response to see another version.

Prompt to ChatGPT

PROMPT:  
Write the swiftui code to create a circular slider. The circle should have a grey
background and progress is shown with the color turning blue when complete. the
progress is measured in a clockwise direction with a starting value of zero at 12
o clock and progress clockwise to an end value of 100. A drag gesture should be
used to interact with the circular slider. The thumb indicator should be a yellow
circle on the circular slider. The current Slider value should be displayed in
large text in the centre of the circular slider

Response from chatGPT

To create a circular slider in SwiftUI, you can use the following code snippet. This code demonstrates how to create a custom view that acts as a circular slider with the specified properties. Make sure to import SwiftUI to use this code:

CircularSlider and ContentView

 1import SwiftUI
 2
 3struct CircularSlider: View {
 4    @State private var currentValue: CGFloat = 0
 5    
 6    var body: some View {
 7        GeometryReader { geometry in
 8            let radius = min(geometry.size.width, geometry.size.height) / 2
 9            
10            ZStack {
11                Circle()
12                    .stroke(Color.gray, lineWidth: 10)
13                
14                Circle()
15                    .trim(from: 0, to: currentValue / 100)
16                    .stroke(Color.blue, lineWidth: 10)
17                    .rotationEffect(.degrees(-90))
18                
19                Circle()
20                    .fill(Color.yellow)
21                    .frame(width: 20, height: 20)
22                    .offset(x: 0, y: -radius + 10)
23                    .rotationEffect(.degrees(Double(currentValue / 100) * 360 - 90))
24                    .gesture(
25                        DragGesture(minimumDistance: 0)
26                            .onChanged { value in
27                                let vector = CGVector(dx: value.location.x - geometry.size.width / 2, dy: value.location.y - geometry.size.height / 2)
28                                let angle = atan2(vector.dy, vector.dx) + .pi / 2
29                                let fixedAngle = angle < 0 ? angle + 2 * .pi : angle
30                                currentValue = min(max(0, fixedAngle / (2 * .pi) * 100), 100)
31                            }
32                    )
33                
34                Text("\(Int(currentValue))")
35                    .font(.system(size: 50))
36                    .fontWeight(.bold)
37                    .foregroundColor(.black)
38            }
39        }
40        .aspectRatio(1, contentMode: .fit)
41    }
42}
43
44struct ContentView: View {
45    var body: some View {
46        CircularSlider()
47            .padding()
48    }
49}
50
51struct ContentView_Previews: PreviewProvider {
52    static var previews: some View {
53        ContentView()
54    }
55}

This code creates a custom CircularSlider view that displays a circular slider with a grey background, blue progress, and a yellow thumb indicator. The slider value is displayed in the center of the circular slider. The slider uses a drag gesture to interact with it, and you can adjust the progress value from 0 to 100 by dragging the thumb indicator.

This is worse than previous versions. This is reassuring in some ways, as I was wondering why ChatGPT was getting better simply by selecting Regenerate response. I would expect that without any feedback, there is no way for ChatGPT to improve.

Circular Slider 6 with drag not working - code generated by ChatGPT 4

Regenerate response - Circular Slider 7

Once again, select Regenerate response to see another version.

Prompt to ChatGPT

PROMPT:  
Write the swiftui code to create a circular slider. The circle should have a grey
background and progress is shown with the color turning blue when complete. the
progress is measured in a clockwise direction with a starting value of zero at 12
o clock and progress clockwise to an end value of 100. A drag gesture should be
used to interact with the circular slider. The thumb indicator should be a yellow
circle on the circular slider. The current Slider value should be displayed in
large text in the centre of the circular slider

Response from chatGPT

To create a circular slider in SwiftUI, you'll need to create a custom view that combines a few different elements. Here's an example implementation of the circular slider you described:

CircularSlider with extension on CGPoint

 1import SwiftUI
 2
 3struct CircularSlider: View {
 4    @State private var sliderValue: Double = 0
 5    @GestureState private var dragOffset: CGFloat = 0
 6    
 7    var body: some View {
 8        GeometryReader { geometry in
 9            let radius = min(geometry.size.width, geometry.size.height) / 2
10            let dragGesture = DragGesture()
11                .updating($dragOffset) { value, state, _ in
12                    state = angleBetweenPoints(radius: radius, center: geometry.frame(in: .local).midPoint, point: value.location)
13                }
14                .onEnded { value in
15                    sliderValue = Double(angleBetweenPoints(radius: radius, center: geometry.frame(in: .local).midPoint, point: value.location)) * 100 / 360
16                }
17            
18            ZStack {
19                // Grey background circle
20                Circle()
21                    .stroke(Color.gray, lineWidth: 20)
22                
23                // Blue progress circle
24                Circle()
25                    .trim(from: 0, to: CGFloat(sliderValue / 100))
26                    .stroke(Color.blue, lineWidth: 20)
27                    .rotationEffect(.degrees(-90))
28                
29                // Yellow thumb indicator
30                Circle()
31                    .fill(Color.yellow)
32                    .frame(width: 20, height: 20)
33                    .offset(x: 0, y: -radius + 10)
34                    .rotationEffect(.degrees(-90 + sliderValue * 360 / 100))
35                
36                // Slider value text
37                Text("\(Int(sliderValue))")
38                    .font(.system(size: 50, design: .rounded))
39            }
40            .gesture(dragGesture)
41        }
42    }
43    
44    private func angleBetweenPoints(radius: CGFloat, center: CGPoint, point: CGPoint) -> CGFloat {
45        let angle = atan2(point.y - center.y, point.x - center.x)
46        let degree = angle >= 0 ? Double(angle) : (2 * Double.pi + Double(angle))
47        return CGFloat(degree * 180 / Double.pi)
48    }
49}
50
51extension CGPoint {
52    var midPoint: CGPoint {
53        return CGPoint(x: x / 2, y: y / 2)
54    }
55}
56
57struct CircularSlider_Previews: PreviewProvider {
58    static var previews: some View {
59        CircularSlider()
60            .frame(width: 300, height: 300)
61    }
62}

This code defines a CircularSlider view that displays a circular slider with a grey background, blue progress circle, yellow thumb indicator, and a centered text showing the current slider value. The slider accepts a drag gesture to interact with it and update its value.

There is a compile error in this code with midPoint being called on CGRect and the property is added as an extension on CGPoint

PROMPT:  
Compile errors - "Value of type 'CGRect' has no member 'midPoint'"

Response from chatGPT

Apologies for the confusion. It seems I made a mistake in the extension for CGPoint. Please use the following code instead:

CircularSlider and ContentView

 1import SwiftUI
 2
 3struct CircularSlider: View {
 4    @State private var sliderValue: Double = 0
 5    @GestureState private var dragOffset: CGFloat = 0
 6    
 7    var body: some View {
 8        GeometryReader { geometry in
 9            let radius = min(geometry.size.width, geometry.size.height) / 2
10            let dragGesture = DragGesture()
11                .updating($dragOffset) { value, state, _ in
12                    state = angleBetweenPoints(radius: radius, center: geometry.frame(in: .local).center, point: value.location)
13                }
14                .onEnded { value in
15                    sliderValue = Double(angleBetweenPoints(radius: radius, center: geometry.frame(in: .local).center, point: value.location)) * 100 / 360
16                }
17            
18            ZStack {
19                // Grey background circle
20                Circle()
21                    .stroke(Color.gray, lineWidth: 20)
22                
23                // Blue progress circle
24                Circle()
25                    .trim(from: 0, to: CGFloat(sliderValue / 100))
26                    .stroke(Color.blue, lineWidth: 20)
27                    .rotationEffect(.degrees(-90))
28                
29                // Yellow thumb indicator
30                Circle()
31                    .fill(Color.yellow)
32                    .frame(width: 20, height: 20)
33                    .offset(x: 0, y: -radius + 10)
34                    .rotationEffect(.degrees(-90 + sliderValue * 360 / 100))
35                
36                // Slider value text
37                Text("\(Int(sliderValue))")
38                    .font(.system(size: 50, design: .rounded))
39            }
40            .gesture(dragGesture)
41        }
42    }
43    
44    private func angleBetweenPoints(radius: CGFloat, center: CGPoint, point: CGPoint) -> CGFloat {
45        let angle = atan2(point.y - center.y, point.x - center.x)
46        let degree = angle >= 0 ? Double(angle) : (2 * Double.pi + Double(angle))
47        return CGFloat(degree * 180 / Double.pi)
48    }
49}
50
51extension CGRect {
52    var center: CGPoint {
53        return CGPoint(x: midX, y: midY)
54    }
55}
56
57struct CircularSlider_Previews: PreviewProvider {
58    static var previews: some View {
59        CircularSlider()
60            .frame(width: 300, height: 300)
61    }
62}

In this corrected code, I changed the extension from CGPoint to CGRect and replaced the "midPoint" property with "center" property, which calculates the center point of the CGRect correctly.

This code compiles and runs. It looks and behaves worse than it is. The progress is off by 90 degrees from the touch point and the thumb is off by 180 degrees from the touch point. The progress and the thumb are not update until the drag gesture is complete, which gives the impression that it is not working at all. Circular Slider 7 is still worse than Circular Slider 5.

Circular Slider 7 with progress and thumb off and drag not animated - code generated by ChatGPT 4

Regenerate response - Circular Slider 8

Once again, because we had to prompt to correct the compile errror, we need to edit the original prompt and select Save & Submit to regenerate a response to see another version.

Prompt to ChatGPT

PROMPT:  
Write the swiftui code to create a circular slider. The circle should have a grey
background and progress is shown with the color turning blue when complete. the
progress is measured in a clockwise direction with a starting value of zero at 12
o clock and progress clockwise to an end value of 100. A drag gesture should be
used to interact with the circular slider. The thumb indicator should be a yellow
circle on the circular slider. The current Slider value should be displayed in
large text in the centre of the circular slider

Response from chatGPT

To create a custom circular slider in SwiftUI, you can create a reusable CircularSlider view. Here's the complete code for the slider:

CircularSlider and ContentView

 1import SwiftUI
 2
 3struct CircularSlider: View {
 4    @Binding var value: Double
 5    let startAngle: Double = -90
 6    let lineWidth: CGFloat = 10
 7    
 8    var body: some View {
 9        ZStack {
10            Circle()
11                .stroke(Color.gray, style: StrokeStyle(lineWidth: lineWidth))
12            
13            Circle()
14                .trim(from: 0, to: CGFloat(value / 100))
15                .stroke(Color.blue, style: StrokeStyle(lineWidth: lineWidth, lineCap: .round))
16                .rotationEffect(Angle(degrees: startAngle))
17            
18            Circle()
19                .fill(Color.yellow)
20                .frame(width: lineWidth * 2, height: lineWidth * 2)
21                .offset(y: -lineWidth * 5)
22                .rotationEffect(Angle(degrees: startAngle + value * 360 / 100))
23            
24            Text(String(format: "%.0f", value))
25                .font(.system(size: 60))
26                .fontWeight(.bold)
27                .foregroundColor(.black)
28        }
29        .frame(width: lineWidth * 10, height: lineWidth * 10)
30        .gesture(DragGesture(minimumDistance: 0)
31                    .onChanged { gesture in
32                        let angle = calculateAngle(from: gesture.location)
33                        value = Double(angle + 90) / 360 * 100
34                    })
35    }
36    
37    private func calculateAngle(from point: CGPoint) -> Double {
38        let center = CGPoint(x: lineWidth * 5, y: lineWidth * 5)
39        let angle = atan2(point.y - center.y, point.x - center.x) * 180 / .pi
40        return angle < 0 ? angle + 360 : angle
41    }
42}
43
44struct ContentView: View {
45    @State private var sliderValue: Double = 0
46    
47    var body: some View {
48        VStack {
49            CircularSlider(value: $sliderValue)
50        }
51    }
52}
53
54struct ContentView_Previews: PreviewProvider {
55    static var previews: some View {
56        ContentView()
57    }
58}

This code defines a CircularSlider view that takes a binding value as input. The circle has a gray background, and the progress is shown with the color turning blue when complete. The progress is measured in a clockwise direction, with a starting value of 0 at 12 o'clock and progress clockwise to an end value of 100. The thumb indicator is a yellow circle on the circular slider. The current slider value is displayed in large text in the center of the circular slider.

Once again, probably not better than Circular Slider 5, but better than Circular Slider 7. The progress follows the touch point and is animated. The thumb is off by 90 degrees and the progress values seem to go from 25 to 125 rather than 0 to 100. In addition, the size of the circular slider is too small and the progress value is truncated at the larger values.

Circular Slider 8 - drag matches progress, but thumb is off and values incorrect - code generated by ChatGPT 4

Regenerate response - Circular Slider 9

Once again, select Regenerate response to see another version.

Prompt to ChatGPT

PROMPT:  
Write the swiftui code to create a circular slider. The circle should have a grey
background and progress is shown with the color turning blue when complete. the
progress is measured in a clockwise direction with a starting value of zero at 12
o clock and progress clockwise to an end value of 100. A drag gesture should be
used to interact with the circular slider. The thumb indicator should be a yellow
circle on the circular slider. The current Slider value should be displayed in
large text in the centre of the circular slider

Response from chatGPT

To create a circular slider in SwiftUI, you can create a custom view that represents the circular slider with the specified requirements. Here's the code:

CircularSlider and ContentView

 1import SwiftUI
 2
 3struct CircularSlider: View {
 4    @State private var sliderValue: Double = 0
 5    private let maxValue: Double = 100
 6    
 7    var body: some View {
 8        ZStack {
 9            Circle()
10                .stroke(Color.gray, lineWidth: 10)
11                .frame(width: 200, height: 200)
12            
13            Circle()
14                .trim(from: 0, to: CGFloat(sliderValue / maxValue))
15                .stroke(Color.blue, lineWidth: 10)
16                .rotation(Angle(degrees: -90))
17                .frame(width: 200, height: 200)
18            
19            Circle()
20                .fill(Color.yellow)
21                .frame(width: 20, height: 20)
22                .offset(y: -100)
23                .rotationEffect(Angle(degrees: (360 * sliderValue / maxValue) - 90))
24                .gesture(
25                    DragGesture(minimumDistance: 0)
26                        .onChanged({ value in
27                            let angle = atan2(value.location.y - 100, value.location.x - 100) + .pi
28                            sliderValue = max(0, min(maxValue, Double(angle) / (2 * .pi) * maxValue))
29                        })
30                )
31            
32            Text("\(Int(sliderValue))")
33                .font(.largeTitle)
34                .fontWeight(.bold)
35                .foregroundColor(.black)
36        }
37    }
38}
39
40struct ContentView: View {
41    var body: some View {
42        CircularSlider()
43            .padding()
44    }
45}
46
47struct ContentView_Previews: PreviewProvider {
48    static var previews: some View {
49        ContentView()
50    }
51}

This code creates a custom CircularSlider view with the following elements:

A gray background circle.

A blue progress circle.

A yellow thumb indicator that moves along the circular slider as the user interacts with it.

A drag gesture that updates the slider value.

A text view in the center of the circular slider displaying the current slider value.

You can use this custom CircularSlider view in your app by including it in your SwiftUI view hierarchy.

Once again, this has the compile error for use of rotation instead of rotationEffect. Correcting this error gets Circular Slider 9 displaying, but the drag behavior is weird. Circular Slider 9 is not better than Circular Slider 5.

Circular Slider 9 - odd drag behavior with progress animated - code generated by ChatGPT 4

Regenerate response - Circular Slider 10

Once again, select Regenerate response to see another version.

Prompt to ChatGPT

PROMPT:  
Write the swiftui code to create a circular slider. The circle should have a grey
background and progress is shown with the color turning blue when complete. the
progress is measured in a clockwise direction with a starting value of zero at 12
o clock and progress clockwise to an end value of 100. A drag gesture should be
used to interact with the circular slider. The thumb indicator should be a yellow
circle on the circular slider. The current Slider value should be displayed in
large text in the centre of the circular slider

Response from chatGPT

To create a circular slider in SwiftUI, you will need to create a custom component that combines a few built-in SwiftUI views and modifiers. The code below demonstrates how to create a circular slider with the specified requirements:

CircularProgressView and ContentView

 1import SwiftUI
 2
 3struct CircularProgressView: View {
 4    @Binding var progress: Double
 5    let circleWidth: CGFloat = 30
 6    
 7    var body: some View {
 8        ZStack {
 9            Circle()
10                .stroke(lineWidth: circleWidth)
11                .fill(Color.gray)
12            
13            Circle()
14                .trim(from: 0.0, to: CGFloat(min(self.progress, 1.0)))
15                .stroke(lineWidth: circleWidth)
16                .fill(Color.blue)
17                .rotationEffect(Angle(degrees: -90))
18            
19            Text("\(Int(progress * 100))")
20                .font(.system(size: 50))
21                .fontWeight(.bold)
22            
23            Circle()
24                .fill(Color.yellow)
25                .frame(width: circleWidth, height: circleWidth)
26                .offset(y: -100)
27                .rotationEffect(Angle(degrees: 360 * progress - 90))
28        }
29        .gesture(DragGesture(minimumDistance: 0)
30                    .onChanged(updateProgress(from:to:)))
31    }
32    
33    private func updateProgress(from startPoint: DragGesture.Value, to endPoint: DragGesture.Value) {
34        let width = endPoint.location.x - startPoint.location.x
35        let height = endPoint.location.y - startPoint.location.y
36        let distanceFromCenter = sqrt(width * width + height * height)
37        
38        if distanceFromCenter > 25 && distanceFromCenter < 150 {
39            let angle = atan2(height, width)
40            let progress = 1.0 - Double(angle / (2 * CGFloat.pi))
41            self.progress = (progress + 0.25).truncatingRemainder(dividingBy: 1.0)
42        }
43    }
44}
45
46struct ContentView: View {
47    @State private var progress: Double = 0
48    
49    var body: some View {
50        CircularProgressView(progress: $progress)
51            .frame(width: 200, height: 200)
52            .padding()
53    }
54}
55
56struct ContentView_Previews: PreviewProvider {
57    static var previews: some View {
58        ContentView()
59    }
60}

This code defines a custom CircularProgressView that takes a binding to a progress value between 0 and 1. The slider is rendered using two circles, one for the background and one for the progress, along with a text view to display the current progress value. The thumb indicator is created using another circle view that rotates based on the progress value. A drag gesture is added to allow interaction with the slider.

This code has a compile error, so we fee that back to ChatGPT.

Prompt to ChatGPT

PROMPT:  
compile error on line ".onChanged(updateProgress(from:to:)))" - error = "Cannot
convert value of type '(DragGesture.Value, DragGesture.Value) -> ()' to expected
argument type '(DragGesture.Value) -> Void'"

Response from chatGPT

Apologies for the confusion. The error is due to a mistake in the syntax of the DragGesture onChanged closure. Here's the corrected version of the CircularProgressView:

code updates to CircularProgressView

 1    // ...
 2        .gesture(DragGesture(minimumDistance: 0)
 3            .onChanged { value in updateProgress(from: value.startLocation, to: value.location) })    
 4    // ...
 5    
 6    private func updateProgress(from startPoint: CGPoint, to endPoint: CGPoint) {
 7        let width = endPoint.x - startPoint.x
 8        let height = endPoint.y - startPoint.y
 9        let distanceFromCenter = sqrt(width * width + height * height)
10        
11        if distanceFromCenter > 25 && distanceFromCenter < 150 {
12            let angle = atan2(height, width)
13            let progress = 1.0 - Double(angle / (2 * CGFloat.pi))
14            self.progress = (progress + 0.25).truncatingRemainder(dividingBy: 1.0)
15        }
16    }
17
18    // ...

The change is in the .gesture modifier. Instead of using updateProgress(from:to:), we use a closure { value in updateProgress(from: value.startLocation, to: value.location) } to correctly handle the onChanged event. This should resolve the compile error.

This does resolve the compile error and Circular Slider 10 is displayed, however, the drag gesture results in odd behavior off the circular slider and does not appear to be any better than previous versions.

Circular Slider 10 - odd drag behavior with progress animated - code generated by ChatGPT 4

Work with Circular Slider 5

All of the code from ChatGPT is from one chat, so we look to go back to the answer that gave us the code for Circular Slider 5 to see if we can improve this rather than generating new samples. In the chat we can see that the prompt has been adjusted 4 times and each promot has given multiple responses. Navigate to the third prompt (3/4) and the fourth response to this prompt (4/6) to get to the code for Circular Slider 5.

Navigate to a previous prompt and response from ChatGPT 4

Prompt to ChatGPT

PROMPT:  
This is really close. The progress matches the drag gesture, but the thumb is off
by an angle of 90 degrees in an anticlockwise direction. So when the progress is
at 3 o clock the thumb is at 12 o clock. can the code be adjusted so the thumb
tracks with the progress and the drag gesture?

Response from chatGPT

I apologize for the mistake in my previous response. Here is the updated code with the thumb position corrected:

Update to CircularSlider

1// ...
2            Circle()
3                .fill(Color.yellow)
4                .frame(width: 30, height: 30)
5                .offset(y: -150)
6                .rotationEffect(.degrees(sliderValue * 3.6 - 90))
7// ...

The only change is in the rotation effect of the thumb indicator:

1.rotationEffect(.degrees(sliderValue * 3.6 - 90))

Now, the thumb should correctly track with the progress and the drag gesture.

This does not change anything as the change is from (-90 + sliderValue * 3.6) to (sliderValue * 3.6 - 90). The correct change would be to remove the -90 and the thumb would match the sliderValue.

Let's try a Regenerate response to see another response.

Prompt to ChatGPT

PROMPT:  
This is really close. The progress matches the drag gesture, but the thumb is off
by an angle of 90 degrees in an anticlockwise direction. So when the progress is
at 3 o clock the thumb is at 12 o clock. can the code be adjusted so the thumb
tracks with the progress and the drag gesture?

Response from chatGPT

I apologize for the confusion. To fix the issue with the thumb tracking, you can adjust the rotation effect of the thumb indicator circle. Here's the updated code with the correct thumb position:

Update to CircularSlider

1// ...
2            Circle()
3                .fill(Color.yellow)
4                .frame(width: 30, height: 30)
5                .offset(y: -150)
6                .rotationEffect(.degrees(sliderValue * 3.6 - 90))
7// ...

In this updated code, I modified the rotation effect of the thumb indicator circle from .rotationEffect(.degrees(-90 + sliderValue * 3.6)) to .rotationEffect(.degrees(sliderValue * 3.6 - 90)). Now the thumb should track correctly with the progress and the drag gesture.

This is fascinating, wrong, but fascinating. ChatGPT has given the exact same response and even highlighted the change. But the math logic in the change shows that there is no change.

Let's try and be more suggestive in the correction.

Prompt to ChatGPT

PROMPT:  
This change does not fix the issue. perhaps the "- 90" could be removed from the
rotationEffect on the thumb as we want the thumb to track with the progress and
the drag gesture?

Response from chatGPT

You're right, my apologies for the confusion. The rotation effect for the thumb indicator should match the rotation of the progress circle. Here's the corrected code with the appropriate rotation effect:

Update to CircularSlider

1// ...
2            Circle()
3                .fill(Color.yellow)
4                .frame(width: 30, height: 30)
5                .offset(y: -150)
6                .rotationEffect(.degrees(sliderValue * 3.6)) // Corrected rotation effect
7// ...

In this updated code, I modified the rotation effect of the thumb indicator circle from .rotationEffect(.degrees(sliderValue * 3.6 - 90)) to .rotationEffect(.degrees(sliderValue * 3.6)). Now the thumb should correctly track the progress and the drag gesture.

What an inspired answer from ChatGPT! This does fix the issue and the CircularSlider works as expected.

Circular Slider 5b - with drag gesture behavior as expected - code generated by ChatGPT 4

Make the size adjustable

The CircularSlider works, but it has its size fixed within CircularSlider5a to 300 by 300. This is very limiting for a UI control and I just can't leave it.

Let's ask ChatGPT for help.

Prompt to ChatGPT

PROMPT:  
This circular slider works great, but the size is fixed at 300 by 300. could the
CircularSlider be adjusted to work for any size so that it could be used in
different views?

Response from chatGPT

Sure, you can modify the CircularSlider view to accept a custom size parameter and adjust its internal components accordingly. Here's the updated code that allows you to set a custom size for the circular slider:

updates to CircularSlider and ContentView

 1import SwiftUI
 2
 3struct CircularSlider: View {
 4    @State private var sliderValue: Double = 0
 5    private let sliderRange = 0.0...100.0
 6    let size: CGFloat
 7
 8    var body: some View {
 9        ZStack {
10            Circle()
11                .stroke(Color.gray, lineWidth: size * 0.067)
12            
13            Circle()
14                .trim(from: 0, to: CGFloat(sliderValue / 100))
15                .stroke(Color.blue, lineWidth: size * 0.067)
16                .rotationEffect(.degrees(-90))
17            
18            Circle()
19                .fill(Color.yellow)
20                .frame(width: size * 0.1, height: size * 0.1)
21                .offset(y: -size * 0.5)
22                .rotationEffect(.degrees(sliderValue * 3.6))
23
24            Text("\(Int(sliderValue))")
25                .font(.system(size: size * 0.2))
26                .fontWeight(.bold)
27        }
28        .frame(width: size, height: size)
29        .gesture(
30            DragGesture(minimumDistance: 0)
31                .onChanged { value in
32                    let vector = CGVector(dx: value.location.x - size / 2, dy: value.location.y - size / 2)
33                    let angle = atan2(vector.dy, vector.dx) + .pi / 2
34                    let value = angle >= 0 ? angle : angle + 2 * .pi
35                    sliderValue = max(sliderRange.lowerBound, min(sliderRange.upperBound, Double(value) * 100 / (2 * .pi)))
36                }
37        )
38    }
39}
40
41struct ContentView: View {
42    var body: some View {
43        CircularSlider(size: 200) // Set the custom size here
44    }
45}
46
47struct ContentView_Previews: PreviewProvider {
48    static var previews: some View {
49        ContentView()
50    }
51}

In this version, the CircularSlider view has a new size parameter. I've adjusted the lineWidth, frame, offset, and font size of the internal components based on the custom size. You can now use the CircularSlider(size: CGFloat) initializer to create sliders of different sizes. For example, to create a slider with a size of 200, you can call CircularSlider(size: 200).

This is one approach, where the size is passed into the CircularSlider and this allows the use of the CircularSlider in different sizes to match a particular UI layout. A nice touch here is the adjustment of the font size of the progress value displayed in the center of the CircularSlider. This is set as a factor of the size passed into the CircularSlider.

Multiple Circular Sliders of different sizes - code generated by ChatGPT 4

Conclusion

I was looking for ChatGPT to generate SwiftUI code for a circular slider. I asked ChatGPT to regenerate its response 10 times and none of the samples of code just worked as expected. Some samples came very close, so I focussed on one sample (Circular Slider 5) and prompted ChatGPT to address the issue of the thumb not matching the progress. This failed twice until I prompted ChatGPT with the fix, which it agreed with and generated the code.

In a number of samples, the first iteration of code does not compile, but ChatGPT was able to resolve these issues when the details of the compile error are fed back to it. There are lessons to learn from the different samples, such as some of the samples of code generated put the drag gesture on the thumb circle, while the ones with better behavior have the drag gesture on the overall ZStack for the circular slider.

There are still some outstanding issues regarding overall size of the Circular Slider and how it will extend outside of the frame in which it is placed, but this could be addressed in a number of ways.

The final code has the same calculations as in my original article on Create a circular slider in SwiftUI, but arguably the code is neater. Although not commented and may be more difficult to read, debug and maintain.

Overall, ChatGPT cannot just generate code that can be used without question, but it can generate code that can be examined, reviewed and tweaked to work in SwiftUI development.

All this code was generated with ChatGPT version 4 - so it will be interesting to see where this goes in the next version of ChatGPT.

The source code for CircularSliderWithChatGpt4 is available on GitHub.

Can ChatGPT create an iOS app in SwiftUI - part 2

Eric Callanan — Sunday, 02 Apr 2023

The initial Task Manager app created with code from ChatGPT did not quite work correctly. In this article, I work with ChatGPT to resolve the issues and then add the ability to persist the tasks when the app is closed.

It is worth noting that this experiment was started with ChatGPT version 3.5, but by the time part-1 was published, a newer version was released. ChatGPT version 4.0 (GPT-4) was released on March 14th and is publicly available in a limited form to ChatGPT Plus subscribers. I suspect this may be the nature of working with ChatGPT with newer versions coming at an ever increasing rate. I have started playing around with GPT-4, but I'll leave that for another day.

Related articles on ChatGPT and SwiftUI:

Can ChatGPT create an iOS app in SwiftUI - part 1

Can ChatGPT create an iOS app in SwiftUI - part 2

Create a circular slider in SwiftUI with ChatGPT

Issues with editing tasks in the Task Manager App

In part 1 ChatGPT had created the bones of a Task Manager app, albeit with one small defect, in that the app did not save the edits to the tasks. The Edit button appeared to allow the user to edit any and all of the tasks, but when the done button was selected, the edits were not displayed and the tasks seemed to revert to their original content.

Digging into the code that was created shows a couple of errors:

The code in EditableTaskView creates a local copy of the dueDate and does not set the selected value back to the Task dueDate.

Changes made in EditableTaskView for Title and Status are saved to the TaskViewModel but these are not shown in the main list by TaskView.

There is a relatively easy fix for both of these issues using the relatively new element binding syntax introduced in 2021 with Xcode 13.

It is not clear how to get ChatGPT to create this code. Neither is it clear how I could progress with ChatGPT with further enhancements if I manually make these code changes. How should I inform ChatGPT that the code has been modified?

The following are a number of interactions with ChatGPT to try and get the app working. One great advantage with ChatGPT is that you can ask it to Regenerate a response over and over again.

First prompt to fix the problem

done button in ContentView does not display the edits to the tasks

Response from chatGPT

It's likely that the updateTask method in the TaskListViewModel is not properly updating the task with the edited values.

When the user taps the "Done" button in the EditTaskView, the updateTask method is called with the edited Task instance. This method should then find the corresponding task in the tasks array and update its properties with the new values...

The update code suggested by ChatGPT includes use of TaskListViewModel, but there is no TaskListViewModel in the code. The code seems to be referring to a variation of TaskViewModel, but would require further refactoring to get it to work.

Second prompt to fix the problem

EditableTaskView does not save task changes back to the ViewModel when done
button in ContentView is selected

Response from chatGPT

To make the EditableTaskView save task changes back to the ViewModel when the "Done" button in the ContentView is selected, you can add a completion handler to the EditableTaskView and call it when the user taps the "Done" button. Here's an updated version of the EditableTaskView:...

This solution of the code from ChatGPT also refers to taskListViewModel in the ContentView, which does not exist in the App code.

After some debugging into the code, I realise that my previous prompt is incorrect. The edits for title and status are saved to the ViewModel, but these changes are not displayed by the TaskView. I update the prompt to ChatGPT to the following.

Third prompt to fix the problem

EditableTaskView saves the task changes except for the date to the ViewModel when
done button in ContentView is selected. However the changes in the ViewModel are
not shown in the TaskView views

Response from chatGPT

If the changes to the Task instances in the TaskViewModel are not reflected in the TaskView views after editing a task, it's likely because the TaskView views are not observing the changes in the TaskViewModel. Here's how you can fix this issue:

Step 1: Add an id property to the TaskView struct.

TaskView.swift

 1struct TaskView: View {
 2    let task: Task
 3    let id: UUID
 4    
 5    var body: some View {
 6        VStack(alignment: .leading) {
 7            Text(task.title)
 8            if let dueDate = task.dueDate {
 9                Text("Due date: \(dueDate, formatter: ContentView.taskDateFormat)")
10                    .font(.caption)
11            }
12            Text("Status: \(task.status.rawValue)")
13        }
14        .foregroundColor(task.completed ? .gray : .primary)
15        .opacity(task.completed ? 0.5 : 1)
16        .id(id) // Add id
17    }
18}

Step 2: Modify the ForEach loop in the ContentView to pass the id of each task to the TaskView.

ContentView.swift

 1struct ContentView: View {
 2    @ObservedObject var viewModel = TaskViewModel()
 3    
 4    static let taskDateFormat: DateFormatter = {
 5        let formatter = DateFormatter()
 6        formatter.dateStyle = .medium
 7        return formatter
 8    }()
 9    
10    var body: some View {
11        NavigationView {
12            List {
13                ForEach(viewModel.tasks) { task in
14                    if viewModel.isEditing {
15                        EditableTaskView(task: $viewModel.tasks[viewModel.tasks.firstIndex(of: task)!])
16                    } else {
17                        TaskView(task: task, id: task.id) // Pass id to TaskView
18                    }
19                }
20                .onDelete { indexSet in
21                    self.viewModel.tasks.remove(atOffsets: indexSet)
22                }
23            }
24            .navigationTitle("Tasks")
25            .navigationBarItems(
26                trailing: HStack {
27                    if viewModel.isEditing {
28                        Button("Done") {
29                            self.viewModel.isEditing.toggle()
30                        }
31                    } else {
32                        Button(action: {
33                            self.viewModel.tasks.append(Task(title: "New Task", dueDate: Date(), status: .notStarted))
34                        }) {
35                            Image(systemName: "plus")
36                        }
37                        Button("Edit") {
38                            self.viewModel.isEditing.toggle()
39                        }
40                    }
41                }
42            )
43        }
44    }
45}

Step 3: Make sure that the TaskView is observing the Task instance using the @ObservedObject property wrapper.

TaskView.swift

 1struct TaskView: View {
 2    @ObservedObject var task: Task // Use @ObservedObject property wrapper instead of let
 3    let id: UUID
 4    
 5    var body: some View {
 6        VStack(alignment: .leading) {
 7            Text(task.title)
 8            if let dueDate = task.dueDate {
 9                Text("Due date: \(dueDate, formatter: ContentView.taskDateFormat)")
10                    .font(.caption)
11            }
12            Text("Status: \(task.status.rawValue)")
13        }
14        .foregroundColor(task.completed ? .gray : .primary)
15        .opacity(task.completed ? 0.5 : 1)
16        .id(id)
17    }
18}

With these changes, the TaskView instances will observe changes to their associated Task instances, so any updates made to the Task instances in the TaskViewModel will be reflected in the UI.

Overall, this is not a good idea. There are two versions of TaskView generated and Task was defined as a Struct and not an ObservableObject class. This would require more code changes to get the code to compile and even then, it may still not work. Let's try and regenerate the response to see what other solutions ChatGPT can provide.

This code does not compile.

Compile error with using Task as ObserverObject - code generated by ChatGPT

Same prompt to fix the problem - second response

EditableTaskView saves the task changes except for the date to the ViewModel when
done button in ContentView is selected. However the changes in the ViewModel are
not shown in the TaskView views

Response from chatGPT

If I understand your question correctly, you're saying that the changes made to a Task in the EditableTaskView are not reflected in the TaskView instances that display the same task, even though the changes are correctly saved to the TaskViewModel. If that's the case, here's how you can fix it:

Step 1: Modify the TaskView to use a Binding for the Task instance, instead of a constant value.

TaskView.swift

 1struct TaskView: View {
 2    @Binding var task: Task // change to a binding
 3    
 4    var body: some View {
 5        VStack(alignment: .leading) {
 6            Text(task.title)
 7            if let dueDate = task.dueDate {
 8                Text("Due date: \(dueDate, formatter: ContentView.taskDateFormat)")
 9                    .font(.caption)
10            }
11            Text("Status: \(task.status.rawValue)")
12        }
13        .foregroundColor(task.completed ? .gray : .primary)
14        .opacity(task.completed ? 0.5 : 1)
15    }
16}

Step 2: Update the ForEach loop in ContentView to use a Binding for each Task.

ContentView.swift

 1    . . .
 2
 3    List {
 4        ForEach($viewModel.tasks) { $task in // use a binding
 5            if viewModel.isEditing {
 6                EditableTaskView(task: $task)
 7            } else {
 8                TaskView(task: $task) // use a binding
 9            }
10        }
11        .onDelete { indexSet in
12            self.viewModel.tasks.remove(atOffsets: indexSet)
13        }
14    }
15
16    . . .

Step 3: In EditableTaskView, use the Binding passed in as the task parameter directly when modifying the Task instance.

EditableTaskView.swift

 1struct EditableTaskView: View {
 2    @Binding var task: Task
 3    
 4    var body: some View {
 5        VStack(alignment: .leading) {
 6            TextField("Title", text: $task.title)
 7            if let dueDate = task.dueDate {
 8                DatePicker("Due date", selection: Binding<Date>(
 9                    get: { dueDate },
10                    set: { newValue in self.task.dueDate = newValue } // use the binding directly
11                ), displayedComponents: .date)
12            }
13            Picker("Task Status", selection: $task.status) {
14                ForEach(TaskStatus.allCases, id: \.self) { status in
15                    Text(status.rawValue).tag(status)
16                }
17            }
18            .pickerStyle(SegmentedPickerStyle())
19        }
20        .foregroundColor(task.completed ? .gray : .primary)
21        .opacity(task.completed ? 0.5 : 1)
22    }
23}

With these changes, the TaskView instances will use Bindings to the Task instances in the TaskViewModel, so any changes made to a Task in the EditableTaskView will be reflected in the corresponding TaskView instances.

I have to admit - I was stunned. These are exactly the changes I had made manually to get the app to work.

Edits made to Tasks are shown in task view - code generated by ChatGPT

Persist the Tasks for the app - 1

The tasks can be edited and new tasks can be added, but the app restores to the default three tasks whenever it is restarted. The tasks need to be persisted to make the app useful.

Prompt to persist the task list

Persist the list of tasks when the iOS app is closed using userdefaults

Response from chatGPT

Sure! Here's an example of how you could modify the TaskViewModel to persist the list of tasks in UserDefaults when the app is closed, and to load the saved tasks when the app is launched again.

Step 1: Add a UserDefaults property to TaskViewModel to hold the shared UserDefaults instance.

TaskViewModel.swift

1class TaskViewModel: ObservableObject {
2    private let userDefaults = UserDefaults.standard
3    // ...
4}

Step 2: Modify the init method of TaskViewModel to load the saved tasks from UserDefaults, if available.

TaskViewModel.swift

 1class TaskViewModel: ObservableObject {
 2    // ...
 3    
 4    init() {
 5        if let savedTasksData = userDefaults.data(forKey: "tasks"),
 6           let savedTasks = try? JSONDecoder().decode([Task].self, from: savedTasksData) {
 7            self.tasks = savedTasks
 8        }
 9    }
10    
11    // ...
12}

In this modification, we use the data(forKey:) method of UserDefaults to retrieve the saved data for the "tasks" key, and then use JSONDecoder to decode the data as an array of Task instances. If the decoding succeeds, we set the tasks property to the decoded value.

Step 3: Modify the TaskViewModel method that saves the list of tasks to UserDefaults to be called whenever the list changes, as well as when the app is closed.

TaskViewModel.swift

 1class TaskViewModel: ObservableObject {
 2    // ...
 3    
 4    func saveTasks() {
 5        if let encodedTasks = try? JSONEncoder().encode(tasks) {
 6            userDefaults.set(encodedTasks, forKey: "tasks")
 7        }
 8    }
 9    
10    // ...
11}

In this modification, we encode the current list of tasks using JSONEncoder, and then save the encoded data to UserDefaults using the "tasks" key.

Step 4: Add a ScenePhase property to ContentView to detect when the app is closing, and call the TaskViewModel method that saves the list of tasks.

TasksAppWithChatGptApp.swift

 1@main
 2struct TaskManagerApp: App {
 3    @Environment(\.scenePhase) private var scenePhase
 4    
 5    var body: some Scene {
 6        WindowGroup {
 7            ContentView()
 8                .environmentObject(TaskViewModel())
 9        }
10        .onChange(of: scenePhase) { newScenePhase in
11            if newScenePhase == .inactive || newScenePhase == .background {
12                let taskViewModel = TaskViewModel()
13                taskViewModel.saveTasks()
14            }
15        }
16    }
17}

In this modification, we use the onChange(of:) modifier to detect changes in the ScenePhase environment value, and call the TaskViewModel method that saves the list of tasks when the app is closing (i.e. when scenePhase is set to .inactive or .background).

With these modifications, the list of tasks will be saved to UserDefaults whenever the app is closed, and loaded from UserDefaults when the app is launched again.

This code does not compile with errors on encoding and decoding tasks.

Errors with json encoding/decoding tasks - code generated by ChatGPT

Prompt to fix the encoding errors

Two errorsClass 'JSONDecoder' requires that 'Task' conform to 'Decodable'

Here, I mis-typed the prompt, but ChatGPT gave the correct response anyway.

Response from chatGPT

The error message indicates that the Task struct does not conform to the Decodable protocol, which is required in order to be able to decode it from JSON using JSONDecoder.

To fix this error, you need to make sure that Task conforms to Decodable. Here's an example of how you could modify the Task struct to conform to Decodable:

Task.swift

 1struct Task: Identifiable, Equatable, Codable {
 2    var id = UUID()
 3    var title: String
 4    var dueDate: Date?
 5    var status: TaskStatus
 6    var completed = false
 7    
 8    enum CodingKeys: String, CodingKey {
 9        case id, title, dueDate, status, completed
10    }
11    
12    init(id: UUID = UUID(), title: String, dueDate: Date?, status: TaskStatus, completed: Bool = false) {
13        self.id = id
14        self.title = title
15        self.dueDate = dueDate
16        self.status = status
17        self.completed = completed
18    }
19    
20    init(from decoder: Decoder) throws {
21        let container = try decoder.container(keyedBy: CodingKeys.self)
22        id = try container.decode(UUID.self, forKey: .id)
23        title = try container.decode(String.self, forKey: .title)
24        dueDate = try container.decodeIfPresent(Date.self, forKey: .dueDate)
25        status = try container.decode(TaskStatus.self, forKey: .status)
26        completed = try container.decode(Bool.self, forKey: .completed)
27    }
28    
29    func encode(to encoder: Encoder) throws {
30        var container = encoder.container(keyedBy: CodingKeys.self)
31        try container.encode(id, forKey: .id)
32        try container.encode(title, forKey: .title)
33        try container.encodeIfPresent(dueDate, forKey: .dueDate)
34        try container.encode(status, forKey: .status)
35        try container.encode(completed, forKey: .completed)
36    }
37}

In this modified version of the Task struct, we've added conformance to Codable, which is a protocol that combines Encodable and Decodable conformance. We've also implemented the init(from:) and encode(to:) methods required by Decodable and Encodable, respectively.

With these modifications, you should be able to decode Task instances from JSON using JSONDecoder.

This appears to fix the Codable issues with Tasks, but reveals an initialisation error with TaskViewModel.

TaskViewModel initialisation Errors - code generated by ChatGPT

Prompt to fix the initialisation error

error in TaskViewModel - Return from initializer without initializing all stored
properties

Response from chatGPT

This error message indicates that there is a code path in the init method of TaskViewModel that doesn't initialize all the stored properties of the class.

To fix this error, you need to make sure that all stored properties of TaskViewModel are initialized in the init method. Here's an example of how you could modify the init method to ensure that all stored properties are initialized:

TaskViewModel.swift

 1class TaskViewModel: ObservableObject {
 2    private let userDefaults: UserDefaults
 3    @Published var tasks: [Task]
 4    @Published var isEditing = false
 5    
 6    init() {
 7        self.userDefaults = UserDefaults.standard
 8        self.tasks = []
 9        
10        if let savedTasksData = userDefaults.data(forKey: "tasks"),
11           let savedTasks = try? JSONDecoder().decode([Task].self, from: savedTasksData) {
12            self.tasks = savedTasks
13        }
14    }
15    
16    func saveTasks() {
17        if let encodedTasks = try? JSONEncoder().encode(tasks) {
18            userDefaults.set(encodedTasks, forKey: "tasks")
19        }
20    }
21    
22    // ...
23}

In this modified version of TaskViewModel, we've added explicit initialization for both the userDefaults and tasks properties in the init method. We also removed the @State property wrapper from isEditing, since it's not used in a View.

With these modifications, the init method should initialize all stored properties of TaskViewModel, and the "Return from initializer without initializing all stored properties" error should be resolved.

Compiling the app now reveals 4 errors. Two of these errors are in TaskView_Previews, which ChatGPT does not know about - so I could comment out the preview or just fix them. The errors in Task should have really been addressed when making Task codable. The property for Status is an enum and this should also have been marked as codable.

So I pass this error back to ChatGPT.

Error because TaskStatus enum is not codable - code generated by ChatGPT

Prompt to fix TaskStatus codable error

error in Task - Instance method 'decode(_:forKey:)' requires that 'TaskStatus'
conform to 'Decodable'

Response from chatGPT

The error message indicates that the TaskStatus enum does not conform to the Decodable protocol, which is required in order to be able to decode it from JSON using JSONDecoder.

To fix this error, you need to make sure that TaskStatus conforms to Decodable. Here's an example of how you could modify the TaskStatus enum to conform to Decodable:

Task.swift

1enum TaskStatus: String, Codable {
2    case notStarted = "Not Started"
3    case inProgress = "In Progress"
4    case complete = "Complete"
5}

In this modified version of TaskStatus, we've added conformance to Codable, which is a protocol that combines Encodable and Decodable conformance.

With this modification, you should be able to decode Task instances from JSON using JSONDecoder.

This code is technically wrong as it removes CaseIterable, which is used to iterate through the Status options. So I just add Codable.

1enum TaskStatus: String, CaseIterable, Codable {
2    case notStarted = "Not started"
3    case inProgress = "In progress"
4    case complete = "Complete"
5}

The code now compiles and runs. Tasks can be added and edited.

However, all the tasks disappear when the user switches App and the tasks are not persisted.

All Tasks disappear when switching apps - code generated by ChatGPT

Persist the Tasks for the app - 2

A review of the code shows that there is a new instance of TaskViewModel is created in TaskManagerApp in the onChange(of: scenePhase). A new instance TaskViewModel loads the Tasks fron UserDefaults or uses an empty list. So the list id always empty.

Prompt to address the issue in TaskManagerApp

problem in TaskManagerApp - a new TaskViewModel is created in .onChange(of:
scenePhase)

Response from chatGPT

You are correct. In the onChange(of:scenePhase:) modifier in the TaskManagerApp struct, a new instance of TaskViewModel is created instead of using the existing instance.

To fix this problem, you can modify TaskManagerApp to pass the existing instance of TaskViewModel to the ContentView and use that instance throughout the app. Here's an example of how you can modify TaskManagerApp to achieve this:

View

 1@main
 2struct TaskManagerApp: App {
 3    @Environment(\.scenePhase) private var scenePhase
 4    
 5    let taskViewModel = TaskViewModel()
 6    
 7    var body: some Scene {
 8        WindowGroup {
 9            ContentView()
10                .environmentObject(taskViewModel)
11        }
12        .onChange(of: scenePhase) { newScenePhase in
13            if newScenePhase == .inactive || newScenePhase == .background {
14                taskViewModel.saveTasks()
15            }
16        }
17    }
18}

In this modified version of TaskManagerApp, we create a single instance of TaskViewModel and pass it to ContentView using the environmentObject(_:) method. This ensures that the same instance of TaskViewModel is used throughout the app, including in the onChange(of:scenePhase:) modifier.

With this modification, you should be able to use the existing instance of TaskViewModel to save and load tasks from UserDefaults, without creating a new instance of TaskViewModel each time the app enters the background.

This does not fix the problem as it looks like ContentView is still creating a new instance of TaskViewModel rather than using the environmentObject one. So this is what we feedback to ChatGPT.

All Tasks disappear when switching apps - code generated by ChatGPT

Prompt to fix ContentView to use environmentObject

it looks like ContentView is still creating a new instance of TaskViewModel
rather than using the environmentObject one

Response from chatGPT

You're right. In the ContentView struct, a new instance of TaskViewModel is created using the TaskViewModel() initializer, which creates a new instance of UserDefaults. This will prevent ContentView from accessing the same data as the rest of the app, which is stored in the shared instance of TaskViewModel.

To fix this, you should modify the ContentView struct to use the @EnvironmentObject property wrapper to access the existing instance of TaskViewModel that was passed down from TaskManagerApp. Here's an example of how you can modify the ContentView struct:

ContentView.swift

1struct ContentView: View {
2    @EnvironmentObject var viewModel: TaskViewModel
3    
4    // ...
5}

In this modified version of ContentView, we've added the @EnvironmentObject property wrapper to viewModel, which tells SwiftUI to look up the existing instance of TaskViewModel that was passed down from TaskManagerApp. This ensures that ContentView uses the same instance of TaskViewModel as the rest of the app, rather than creating a new instance with its own UserDefaults.

With this modification, ContentView should be able to access the same data as the rest of the app, and any changes made to the task list should be reflected across all views.

It works. This took a bit of time and a bit of back and forth with ChatGPT that when it finally worked, I had almost forgotten how ugly it is.

Adding and editing tasks in Task Manager App - code generated by ChatGPT

Adding, Editing and persisting tasks work in Task Manager App - code generated by ChatGPT

There is also some rudimentary support for dark mode as well as swipe to delete.

Task Manager App supports light and dark modes - code generated by ChatGPT

Conclusion

As humans, we tend to personify many things and it is very easy to fall into this with ChatGPT. After all, I am asking questions and it is responding and it seems to be building on what has already been discussed in the chat. Although, there are responses that seem to imply it may have forgotten. I think it is better to think of ChatGPT as a type of autocomplete, although a very sophisticated version of autocomplete.

This took a bit more work than I thought, but ChatGPT arguably created the iOS app to manage tasks. I also had to debug and identify the root cause of issues and essentially solve them first and then use this knowledge to try and coax ChatGPT to give me the right solution. There are a number of things I would do differently next time. The first of which is to not use Tasks and instead perhaps call it a TODO list manager. I don’t think I would ever create a Struct or Class named Task because of the use of Tasks in Swift.

ChatGPT is great for a whole load of things, but it might be too early to get rid of all you software engineers just yet 😀. There are increasing quality levels that the code for any application needs to meet and I think ChatGPT is currently struggling with level 1 and 2. It is likely that tools like ChatGPT will get to levels 3 & 4, but I'm not sure on levels 5 & 6 - hang on to your designers 😀. It is also conceivable that in the future some Machine Learning functionality is baked into IDEs like Xcode freeing up the humans to focus on levels 5 and 6 of the applications.

Increasing Quality Levels

Code that is readable and maintainable.

Code that compiles without warnings or errors.

App that provides the required functionality.

Code that is performant.

App that looks good while providing the required functionality.

App that excites and delights the customer.

I think everyone should start using tools like ChatGPT, but don’t rely on it to get everything right or to produce the most performant code and certainly not the best-looking User Interface. Use ChatGPT to generate multiple solutions to a problem then read and study the sample code and learn from it to write your code to solve the problem. Paul Hudson has published a great video on Man VS Machine in Can ChatGPT write better SwiftUI code than you? that is well worth viewing.

To revisit the question - "Can ChatGPT create an iOS app in SwiftUI?".

My answer today is “Not Yet” and it would be interesting to revisit this again in a year.

Here is a list of all the commands in part-1 and part-2

Part 1

Create task management app in SwiftUI using MVVM design for iPhone

add a due date to the task and a task status field

Add unit tests

change task status to be one of "not started" "in progress" or "complete”

modify Task to conform to Equatable

make a task editable

Cannot convert value of type 'Binding<Date?>' to expected argument type 'Binding'

Update unit tests

Add unit tests for Task

test testTaskEquality fails because task1 is not equal to task3

test testTaskEquality still fails because the tasks have different id

Part 2

done button in ContentView does not display the edits to the tasks

EditableTaskView does not save task changes back to the ViewModel when done button in ContentView is selected

EditableTaskView saves the task changes except for the date to the ViewModel when done button in ContentView is selected. However the changes in the ViewModel are not shown in the TaskView views

Regenerate Response

Persist the list of tasks when the iOS app is closed using userdefaults

Two errorsClass 'JSONDecoder' requires that 'Task' conform to 'Decodable’

error in TaskViewModel - Return from initializer without initializing all stored properties

error in Task - Instance method 'decode(_:forKey:)' requires that 'TaskStatus' conform to 'Decodable'

problem in TaskManagerApp - a new TaskViewModel is created in .onChange(of: scenePhase)

it looks like ContentView is still creating a new instance of TaskViewModel rather than using the environmentObject one

The source code for TasksAppWithChatGpt is available on GitHub.

Can ChatGPT create an iOS app in SwiftUI - part 1

Eric Callanan — Sunday, 19 Mar 2023

Artificial Intelligence is trending at the moment with applications like DALL-E and Canva able to create images in certain styles and ChatGPT able to generate text. This article explores if ChatGPT can do more than childrens homework and see can ChatGPT create an iOS task app in SwiftUI. So I asked it to create a task manager app.

The ChatGPT site can get busy and you may frequently get a message that "ChatGPT is at capacity right now".

Related articles on ChatGPT and SwiftUI:

Can ChatGPT create an iOS app in SwiftUI - part 1

Can ChatGPT create an iOS app in SwiftUI - part 2

Create a circular slider in SwiftUI with ChatGPT

Tips on using chatGPT to generate code

Use version control and commit the code when it compiles

Compile the code after every change from chatGPT

Use 'Regenerate response' if not happy with the code generated

Feedback compile errors to chatGPT for a possible solution

Be prepared to roll back to a previous version and edit the request to chatGPT from there and try again

Ask chatGPT to create an app

It is necessary to create an account with ChatGPT and log in to start a conversation. I simply ask chatGPT to create an app in SwiftUI.

First prompt to create the app

Create task management app in SwiftUI using MVVM design for iPhone

Response from chatGPT

Sure, I can guide you on how to create a task management app in SwiftUI using the MVVM design pattern for iPhone. Here are the steps to follow:
Step 1: Create a new SwiftUI project in Xcode.
Step 2: Create a new file for the model, Task.swift.

Model

1struct Task: Identifiable {
2    var id = UUID()
3    var title: String
4    var completed: Bool = false
5}

Step 3: Create a new file for the ViewModel, TaskViewModel.swift.

ViewModel

1class TaskViewModel: ObservableObject {
2    @Published var tasks = [
3        Task(title: "Task 1"),
4        Task(title: "Task 2"),
5        Task(title: "Task 3")
6    ]
7}

Step 4: Create a new file for the View, ContentView.swift.

View

 1struct ContentView: View {
 2    @ObservedObject var viewModel = TaskViewModel()
 3    
 4    var body: some View {
 5        NavigationView {
 6            List(viewModel.tasks) { task in
 7                Text(task.title)
 8            }
 9            .navigationTitle("Tasks")
10        }
11    }
12}

Step 5: Run the app on an iPhone simulator to see the list of tasks.

Step 6: Add a button to mark a task as completed in the ContentView.

View

 1struct ContentView: View {
 2    @ObservedObject var viewModel = TaskViewModel()
 3    
 4    var body: some View {
 5        NavigationView {
 6            List(viewModel.tasks) { task in
 7                Button(action: {
 8                    if let index = self.viewModel.tasks.firstIndex(where: { $0.id == task.id }) {
 9                        self.viewModel.tasks[index].completed.toggle()
10                    }
11                }) {
12                    HStack {
13                        Image(systemName: task.completed ? "checkmark.circle.fill" : "circle")
14                        Text(task.title)
15                    }
16                }
17            }
18            .navigationTitle("Tasks")
19        }
20    }
21}

Step 7: Run the app again to see the checkmarks appearing when tasks are completed.

Step 8: Add a new task button to the ContentView.

View

 1struct ContentView: View {
 2    @ObservedObject var viewModel = TaskViewModel()
 3    
 4    var body: some View {
 5        NavigationView {
 6            List(viewModel.tasks) { task in
 7                Button(action: {
 8                    if let index = self.viewModel.tasks.firstIndex(where: { $0.id == task.id }) {
 9                        self.viewModel.tasks[index].completed.toggle()
10                    }
11                }) {
12                    HStack {
13                        Image(systemName: task.completed ? "checkmark.circle.fill" : "circle")
14                        Text(task.title)
15                    }
16                }
17            }
18            .navigationTitle("Tasks")
19            .navigationBarItems(trailing: Button(action: {
20                self.viewModel.tasks.append(Task(title: "New Task"))
21            }) {
22                Image(systemName: "plus")
23            })
24        }
25    }
26}

Step 9: Run the app again to see the new task button appearing in the navigation bar.

That's it! You have successfully created a task management app in SwiftUI using the MVVM design pattern for iPhone.

Initial task app from SwiftUI code generated by ChatGPT

Initial task app from SwiftUI code generated by ChatGPT

Add more details to a Task

Well, so far so good, but the Task model just has a title. Let's see if we can add more details to the Tasks.

Next prompt to chatGPT

add a due date to the task and a task status field

Response from chatGPT

Sure, here are the steps to add a due date and a task status field to the task management app:

Step 1: Update the Task model in Task.swift to include the due date and the task status fields.

Task.swift

1struct Task: Identifiable {
2    var id = UUID()
3    var title: String
4    var completed: Bool = false
5    var dueDate: Date? // new field for due date
6    var status: String? // new field for task status
7}

Step 2: Update the TaskViewModel class in TaskViewModel.swift to include the due date and the task status fields.

TaskViewModel.swift

1class TaskViewModel: ObservableObject {
2    @Published var tasks = [
3        Task(title: "Task 1", dueDate: Date(), status: "In progress"),
4        Task(title: "Task 2", dueDate: Date().addingTimeInterval(86400), status: "Not started"),
5        Task(title: "Task 3", dueDate: nil, status: "Complete")
6    ]
7}

Step 3: Update the ContentView to display the due date and the task status in the list.

ContentView.swift

 1struct ContentView: View {
 2    @ObservedObject var viewModel = TaskViewModel()
 3    
 4    static let taskDateFormat: DateFormatter = {
 5        let formatter = DateFormatter()
 6        formatter.dateStyle = .medium
 7        return formatter
 8    }()
 9    
10    var body: some View {
11        NavigationView {
12            List(viewModel.tasks) { task in
13                VStack(alignment: .leading) {
14                    Text(task.title)
15                    if let dueDate = task.dueDate {
16                        Text("Due date: \(dueDate, formatter: Self.taskDateFormat)")
17                            .font(.caption)
18                    }
19                    if let status = task.status {
20                        Text("Status: \(status)")
21                            .font(.caption)
22                    }
23                }
24                .foregroundColor(task.completed ? .gray : .primary)
25                .opacity(task.completed ? 0.5 : 1)
26                .onTapGesture {
27                    if let index = self.viewModel.tasks.firstIndex(where: { $0.id == task.id }) {
28                        self.viewModel.tasks[index].completed.toggle()
29                    }
30                }
31            }
32            .navigationTitle("Tasks")
33            .navigationBarItems(trailing: Button(action: {
34                self.viewModel.tasks.append(Task(title: "New Task", dueDate: Date(), status: "Not started"))
35            }) {
36                Image(systemName: "plus")
37            })
38        }
39    }
40}

Step 4: Run the app on an iPhone simulator to see the due date and the task status appearing in the list.

Step 5: Update the new task button to include the due date and the task status fields.

Step 6: Run the app again to see the new task button creating tasks with the due date and the task status fields.

That's it! You have successfully added a due date and a task status field to the task management app.

Updated tasks to include a due date and a status - code generated by ChatGPT

Updated tasks to include a due date and a status - code generated by ChatGPT

Add unit tests

Now that I have the beginings of an app, I decide to go mad and ask chatGPT to add unit tests.

Next prompt to chatGPT

Add unit tests

Response from chatGPT

Sure, adding unit tests to the task management app is a great way to ensure that the code is working as expected and to catch any issues before they reach production. Here are the steps to add unit tests to the app:

Step 1: Create a new file called TaskViewModelTests.swift in the same directory as TaskViewModel.swift.

Step 2: In TaskViewModelTests.swift, import XCTest and the app's code.

TaskViewModelTests.swift

1import XCTest
2@testable import TaskManager

Step 3: Define a class for the unit tests and a variable for the TaskViewModel.

TaskViewModelTests.swift

1class TaskViewModelTests: XCTestCase {
2    var viewModel: TaskViewModel!
3}

Step 4: Override the setUp() method to create a new instance of TaskViewModel.

TaskViewModelTests.swift

1override func setUp() {
2    viewModel = TaskViewModel()
3}

Step 5: Write a unit test for the add task functionality.

TaskViewModelTests.swift

1func testAddTask() {
2    let initialCount = viewModel.tasks.count
3    viewModel.tasks.append(Task(title: "New Task", dueDate: Date(), status: "Not started"))
4    let finalCount = viewModel.tasks.count
5    XCTAssertEqual(finalCount, initialCount + 1)
6}

Step 6: Write a unit test for the toggle completed functionality.

TaskViewModelTests.swift

1func testToggleCompleted() {
2    let task = Task(title: "Task", dueDate: Date(), status: "In progress")
3    viewModel.tasks.append(task)
4    viewModel.tasks[0].completed.toggle()
5    XCTAssertTrue(viewModel.tasks[0].completed)
6}

Step 7: Write a unit test for the due date and the task status fields.

TaskViewModelTests.swift

1func testDueDateAndStatus() {
2    let task = Task(title: "Task", dueDate: Date(), status: "In progress")
3    viewModel.tasks.append(task)
4    XCTAssertNotNil(viewModel.tasks[0].dueDate)
5    XCTAssertEqual(viewModel.tasks[0].status, "In progress")
6}

Step 8: Override the tearDown() method to set the TaskViewModel to nil.

TaskViewModelTests.swift

1override func tearDown() {
2    viewModel = nil
3}

Step 9: Run the unit tests and ensure that they all pass.

That's it! You have successfully added unit tests to the task management app. You can continue to add more unit tests as needed to ensure that the code is working as expected.

Added unit tests to Task Manager app - code generated by ChatGPT

Added unit tests to Task Manager app - code generated by ChatGPT

Change Task Status to be ENUM

The Status property in Task was created as an optional string, it would be better if this was an enum.

Next prompt to chatGPT

change task status to be one of "not started" "in progress" or "complete"

Response from chatGPT

Sure, here are the steps to change the task status to be one of "not started", "in progress", or "complete" in the task management app:

Step 1: Update the Task model in Task.swift to use an enumeration for the task status.

Task.swift

 1enum TaskStatus: String, CaseIterable {
 2    case notStarted = "Not started"
 3    case inProgress = "In progress"
 4    case complete = "Complete"
 5}
 6
 7struct Task: Identifiable {
 8    var id = UUID()
 9    var title: String
10    var completed: Bool = false
11    var dueDate: Date?
12    var status: TaskStatus = .notStarted // update status field to use enumeration
13}

Step 2: Update the TaskViewModel class in TaskViewModel.swift to use the TaskStatus enumeration and to initialize the task status field to .notStarted.

TaskViewModel.swift

1class TaskViewModel: ObservableObject {
2    @Published var tasks = [
3        Task(title: "Task 1", dueDate: Date(), status: .inProgress),
4        Task(title: "Task 2", dueDate: Date().addingTimeInterval(86400), status: .notStarted),
5        Task(title: "Task 3", dueDate: nil, status: .complete)
6    ]
7}

Step 3: Update the ContentView to use the TaskStatus enumeration and to update the task status based on user selection.

ContentView.swift

 1struct ContentView: View {
 2    @ObservedObject var viewModel = TaskViewModel()
 3    
 4    static let taskDateFormat: DateFormatter = {
 5        let formatter = DateFormatter()
 6        formatter.dateStyle = .medium
 7        return formatter
 8    }()
 9    
10    var body: some View {
11        NavigationView {
12            List(viewModel.tasks) { task in
13                VStack(alignment: .leading) {
14                    Text(task.title)
15                    if let dueDate = task.dueDate {
16                        Text("Due date: \(dueDate, formatter: Self.taskDateFormat)")
17                            .font(.caption)
18                    }
19                    Text("Status:")
20                    Picker("Task Status", selection: $viewModel.tasks[viewModel.tasks.firstIndex(of: task)!].status) {
21                        ForEach(TaskStatus.allCases, id: \.self) { status in
22                            Text(status.rawValue).tag(status)
23                        }
24                    }
25                    .pickerStyle(SegmentedPickerStyle())
26                }
27                .foregroundColor(task.completed ? .gray : .primary)
28                .opacity(task.completed ? 0.5 : 1)
29                .onTapGesture {
30                    if let index = self.viewModel.tasks.firstIndex(where: { $0.id == task.id }) {
31                        self.viewModel.tasks[index].completed.toggle()
32                    }
33                }
34            }
35            .navigationTitle("Tasks")
36            .navigationBarItems(trailing: Button(action: {
37                self.viewModel.tasks.append(Task(title: "New Task", dueDate: Date(), status: .notStarted))
38            }) {
39                Image(systemName: "plus")
40            })
41        }
42    }
43}

Step 4: Run the app on an iPhone simulator to see the updated task status options in the list and the ability to update the task status.

Step 5: Update the unit tests to ensure that the new task status enumeration is being used correctly.

That's it! You have successfully changed the task status to be one of "not started", "in progress", or "complete" in the task management app.

Next prompt to chatGPT

modify Task to conform to Equatable

Response from chatGPT

Sure, here's how you can modify the Task struct in Task.swift to conform to the Equatable protocol:

Task.swift

 1struct Task: Identifiable, Equatable {
 2    var id = UUID()
 3    var title: String
 4    var completed: Bool = false
 5    var dueDate: Date?
 6    var status: TaskStatus = .notStarted
 7    
 8    static func == (lhs: Task, rhs: Task) -> Bool {
 9        return lhs.id == rhs.id
10    }
11}

In this modified implementation, we added Equatable protocol conformance to the Task struct by adding the protocol name after Identifiable, separated by a comma. Then we implemented the == operator function, which compares two Task instances for equality based on their id properties.

Added due date and status to tasks - code generated by ChatGPT

Added due date and status to tasks - code generated by ChatGPT

Allow Tasks to be changed

The app can now display a list of tasks with a title, due Date and a status and new tasks can be added to the list. The next step is to make the Tasks editable.

Next prompt to chatGPT

make a task editable

Response from chatGPT

Sure, here's how you can make a task editable in the task management app:

Step 1: Add an isEditing property to the TaskViewModel class in TaskViewModel.swift.

TaskViewModel.swift

1class TaskViewModel: ObservableObject {
2    @Published var tasks = [
3        Task(title: "Task 1", dueDate: Date(), status: .inProgress),
4        Task(title: "Task 2", dueDate: Date().addingTimeInterval(86400), status: .notStarted),
5        Task(title: "Task 3", dueDate: nil, status: .complete)
6    ]
7    @Published var isEditing = false // add isEditing property
8}

Step 2: Add an Edit button to the ContentView that toggles the isEditing property.

ContentView.swift

 1struct ContentView: View {
 2    @ObservedObject var viewModel = TaskViewModel()
 3    
 4    static let taskDateFormat: DateFormatter = {
 5        let formatter = DateFormatter()
 6        formatter.dateStyle = .medium
 7        return formatter
 8    }()
 9    
10    var body: some View {
11        NavigationView {
12            List {
13                ForEach(viewModel.tasks) { task in
14                    if viewModel.isEditing {
15                        EditableTaskView(task: $viewModel.tasks[viewModel.tasks.firstIndex(of: task)!])
16                    } else {
17                        TaskView(task: task)
18                    }
19                }
20                .onDelete { indexSet in
21                    self.viewModel.tasks.remove(atOffsets: indexSet)
22                }
23            }
24            .navigationTitle("Tasks")
25            .navigationBarItems(
26                trailing: HStack {
27                    if viewModel.isEditing {
28                        Button("Done") {
29                            self.viewModel.isEditing.toggle()
30                        }
31                    } else {
32                        Button(action: {
33                            self.viewModel.tasks.append(Task(title: "New Task", dueDate: Date(), status: .notStarted))
34                        }) {
35                            Image(systemName: "plus")
36                        }
37                        Button("Edit") {
38                            self.viewModel.isEditing.toggle()
39                        }
40                    }
41                }
42            )
43        }
44    }
45}

TaskView.swift

 1struct TaskView: View {
 2    let task: Task
 3    
 4    var body: some View {
 5        VStack(alignment: .leading) {
 6            Text(task.title)
 7            if let dueDate = task.dueDate {
 8                Text("Due date: \(dueDate, formatter: ContentView.taskDateFormat)")
 9                    .font(.caption)
10            }
11            Text("Status: \(task.status.rawValue)")
12        }
13        .foregroundColor(task.completed ? .gray : .primary)
14        .opacity(task.completed ? 0.5 : 1)
15    }
16}

EditableTaskView.swift

 1struct EditableTaskView: View {
 2    @Binding var task: Task
 3    
 4    var body: some View {
 5        VStack(alignment: .leading) {
 6            TextField("Title", text: $task.title)
 7            if let dueDate = task.dueDate {
 8                DatePicker("Due date", selection: $task.dueDate, displayedComponents: .date)
 9            }
10            Picker("Task Status", selection: $task.status) {
11                ForEach(TaskStatus.allCases, id: \.self) { status in
12                    Text(status.rawValue).tag(status)
13                }
14            }
15            .pickerStyle(SegmentedPickerStyle())
16        }
17        .foregroundColor(task.completed ? .gray : .primary)
18        .opacity(task.completed ? 0.5 : 1)
19    }
20}

Step 3: Create two new views, TaskView and EditableTaskView, that will display the task information in read-only and editable mode, respectively. In EditableTaskView, use a Binding to allow the task to be edited and modified in place.

Step 4: Update the ContentView to display the EditableTaskView when the isEditing property is true

Error in the EditableTaskView on initial code to make a task editable - code generated by ChatGPT

Error in the EditableTaskView on initial code to make a task editable - code generated by ChatGPT

Fix Data Binding Error in EditableTaskView

The code generated to make the Task editable does not compile. There are a number of options with charGPT, the easiest of which is to just regenerate the code from the previous request. Alternatively, we can prompt chatGPT with the error message to see if it can provide a solution.

Next prompt to chatGPT

Cannot convert value of type 'Binding<Date?>' to expected argument type
'Binding<Date>'

Response from chatGPT

The error message "Cannot convert value of type 'Binding<Date?>' to expected argument type 'Binding'" occurs because a Binding<Date?> cannot be directly assigned to a Binding.

Here's how you can fix the error in the EditableTaskView:

Step 1: Declare a new Date property in EditableTaskView that will be used to store the current value of the due date.

EditableTaskView.swift

1struct EditableTaskView: View {
2    @Binding var task: Task
3    @State private var dueDate: Date? // Add new property
4    
5    var body: some View {
6        // ...
7    }
8}

Step 2: In the initializer of EditableTaskView, assign the value of the task's due date to the dueDate property.

EditableTaskView.swift

 1struct EditableTaskView: View {
 2    @Binding var task: Task
 3    @State private var dueDate: Date?
 4    
 5    init(task: Binding<Task>) {
 6        _task = task
 7        _dueDate = State(initialValue: task.wrappedValue.dueDate) // Assign initial value to dueDate
 8    }
 9    
10    var body: some View {
11        // ...
12    }
13}

Step 3: Use the dueDate property to create a Binding in the DatePicker.

EditableTaskView.swift

 1struct EditableTaskView: View {
 2    @Binding var task: Task
 3    @State private var dueDate: Date?
 4    
 5    init(task: Binding<Task>) {
 6        _task = task
 7        _dueDate = State(initialValue: task.wrappedValue.dueDate)
 8    }
 9    
10    var body: some View {
11        VStack(alignment: .leading) {
12            TextField("Title", text: $task.title)
13            if let dueDate = dueDate {
14                DatePicker("Due date", selection: Binding<Date>(
15                    get: { dueDate },
16                    set: { newValue in self.dueDate = newValue }
17                ), displayedComponents: .date)
18            }
19            Picker("Task Status", selection: $task.status) {
20                ForEach(TaskStatus.allCases, id: \.self) { status in
21                    Text(status.rawValue).tag(status)
22                }
23            }
24            .pickerStyle(SegmentedPickerStyle())
25        }
26        .foregroundColor(task.completed ? .gray : .primary)
27        .opacity(task.completed ? 0.5 : 1)
28    }
29}

With these changes, the dueDate property is used as an intermediary between the Binding<Date?> and the Binding, allowing you to modify the due date value in place.

SwiftUI App with an Editable list of Tasks - code generated by ChatGPT

SwiftUI App with an Editable list of Tasks - code generated by ChatGPT

Task App broke

Now that there have been a number of changes to tasks, I asked chatGPT to update the unit tests.

Update unit tests

I will not detail the back and forth here as there were unit tests added that did not match the app. The resoltion of these compile errors led to modifying the structs and classes such as the addition of a TaskListViewModel and then some confucion on what was in a TaskViewModel and TaskListViewModel. I eventually got the app to compile again, but the ContentView had changed too much and the app had lost some functionality. In addition clicking on a Task seemed to navigate to a subview withthe same list of tasks and son on recursively. I did not spend too much time debugging and instead chose to roll back the code to when it was last working.

Task App broke after resolving errors on unit tests on ViewModel - code generated by ChatGPT

Task App broke after resolving errors on unit tests on ViewModel - code generated by ChatGPT

Add unit tests to Task

It is possible to "Regenerate response" for every response in ChatGPT with an option to toggle between the different responses. It is also possible to go back to a previous request and edit it and then save and submit. This removes the previous response and any subsequent request and responses.

After getting so lost with resolving compile errors with the updated unit tests and the introduction of new ViewModels and ultimately loosing functionality in the app I went back to the request to update the unit tests. This time, I specified to just add unit tests for Task. I also rolled back the code from git. Even adding these unit tests took a couple of attempts.

Next prompt to chatGPT

Add unit tests for Task

Response from chatGPT

Sure! Here's an example of how you could write some unit tests for the Task struct.

TaskTests.swift

 1import XCTest
 2@testable import TaskManager
 3
 4class TaskTests: XCTestCase {
 5    
 6    // Test task creation
 7    func testTaskCreation() {
 8        let title = "Test Task"
 9        let dueDate = Date()
10        let status: TaskStatus = .notStarted
11        
12        let task = Task(title: title, dueDate: dueDate, status: status)
13        
14        XCTAssertEqual(task.title, title)
15        XCTAssertEqual(task.dueDate, dueDate)
16        XCTAssertEqual(task.status, status)
17        XCTAssertFalse(task.completed)
18    }
19    
20    // Test task completion
21    func testTaskCompletion() {
22        var task = Task(title: "Test Task", dueDate: nil, status: .notStarted)
23        
24        XCTAssertFalse(task.completed)
25        
26        task.completed = true
27        
28        XCTAssertTrue(task.completed)
29    }
30    
31    // Test task status updates
32    func testTaskStatusUpdates() {
33        var task = Task(title: "Test Task", dueDate: nil, status: .notStarted)
34        
35        XCTAssertEqual(task.status, .notStarted)
36        
37        task.status = .inProgress
38        
39        XCTAssertEqual(task.status, .inProgress)
40        
41        task.status = .complete
42        
43        XCTAssertEqual(task.status, .complete)
44    }
45    
46    // Test task equality
47    func testTaskEquality() {
48        let task1 = Task(title: "Task 1", dueDate: nil, status: .notStarted)
49        let task2 = Task(title: "Task 2", dueDate: nil, status: .notStarted)
50        let task3 = Task(title: "Task 1", dueDate: nil, status: .notStarted)
51        
52        XCTAssertNotEqual(task1, task2)
53        XCTAssertEqual(task1, task3)
54    }
55}

In this example, we have four test methods that cover some basic functionality of the Task struct:

testTaskCreation: tests that a task is created with the expected properties and that completed is initially set to false.

testTaskCompletion: tests that completed can be set to true and that the value is stored correctly.

testTaskStatusUpdates: tests that the status property can be updated to each of the three possible values (notStarted, inProgress, and complete) and that the value is stored correctly.

testTaskEquality: tests the implementation of Equatable by creating three tasks with different titles but the same values for dueDate, status, and completed. The test asserts that the two tasks with the same title are considered equal, while the one with a different title is not.

Of course, you could write additional tests to cover other scenarios or edge cases, but this should give you a good starting point.

ChatGPT allows you to Regenerate response with a mechanism to toggle between the responses

ChatGPT allows you to Regenerate response with a mechanism to toggle between the responses

Fix Failing unit test

One of the unit tests fails. Let's feed that back to ChatGPT to see what it recommends.

Next prompt to chatGPT

test testTaskEquality fails because task1 is not equal to task3

Response from chatGPT

I apologize for the mistake in my previous response. You are correct that the testTaskEquality test case should fail because the Task instances with different titles should not be considered equal. Here's the corrected test case:

TaskTests.swift

1func testTaskEquality() {
2    let task1 = Task(title: "Task 1", dueDate: nil, status: .notStarted)
3    let task2 = Task(title: "Task 2", dueDate: nil, status: .notStarted)
4    let task3 = Task(title: "Task 1", dueDate: nil, status: .notStarted)
5    
6    XCTAssertNotEqual(task1, task2)
7    XCTAssertNotEqual(task1, task2)
8    XCTAssertEqual(task1, task3)
9}

In this corrected test case, we expect task1 and task3 to be equal because they have the same values for dueDate, status, and completed, even though their title properties are different. The assertion XCTAssertNotEqual(task1, task2) ensures that tasks with different titles are not considered equal, while the assertion XCTAssertEqual(task1, task3) ensures that tasks with the same values for the other properties are considered equal, regardless of their titles.

Unit Test is still failing.

Next prompt to chatGPT

test testTaskEquality still fails because the tasks have different id

Response from chatGPT

I apologize again for the mistake in my previous response. You are correct that the Task instances in the test cases have different id properties, which will cause the equality check to fail even if all other properties are equal.

To fix the testTaskEquality test case, you can create the Task instances with explicit id values that are the same for the two tasks with the same title:

TaskTests.swift

 1func testTaskEquality() {
 2    let id1 = UUID()
 3    let id2 = UUID()
 4    
 5    let task1 = Task(id: id1, title: "Task 1", dueDate: nil, status: .notStarted)
 6    let task2 = Task(id: id2, title: "Task 2", dueDate: nil, status: .notStarted)
 7    let task3 = Task(id: id1, title: "Task 1", dueDate: nil, status: .notStarted)
 8    
 9    XCTAssertNotEqual(task1, task2)
10    XCTAssertNotEqual(task2, task3)
11    XCTAssertEqual(task1, task3)
12}

In this version of the test case, we create two UUIDs (id1 and id2) and use id1 for both task1 and task3, so they will have the same id value. We also modify the assertions to use XCTAssertNotEqual for both task1 and task2 and XCTAssertEqual for task1 and task3, to ensure that tasks are only considered equal if they have the same id and all other properties are equal.

Unit tests on Task struct passing - code generated by ChatGPT

Unit tests on Task struct passing - code generated by ChatGPT

Editing tasks does not work

The App is now stable and it displays a list of tasks. Functionality like swipe to delete works as well as adding new tasks. However, editing the tasks appears to work until the done button is selected. Selecting edit again does show the previous edits, but these are not persisted back to the model.

I'll continue this in the next article.

Edits to the Tasks are not shown in the task list - code generated by ChatGPT

Edits to the Tasks are not shown in the task list - code generated by ChatGPT

Conclusion

I was pleasantly surprised by how much code chatGPT can generate. ChatGPT or other artificial intelligence tools are not likely to replace developers in the near future. However, I think a lot of work can be done by combining the artificial intelligence in a tool like chatGPT with the human ability to problem solve and design.

I think everyone should have a go at generating something with chatGPT. Perhaps this is the next version of auto complete, but it seems so much more as it is generating text or code and can be used to help solve technical problems

It is likely that we will get to the stage where there are those who use and work with Artificial Intelligence and those who don't and the advantage will be with those who embrace its use and learn to work with it. Of course, there are still a number of open questions with regard to copyright infringements and the law has not yet caught up all the technology we use. Is using code from chatGPT any different than searching for code on the Internet or GitHub and using that to help develop an application?

Working with chatGPT is very exciting and frightening at the same time. It has certainly given me pause to writing technical articles on solving issues that chatGPT could just spit out the answer for you whenever you need it. Although, the answers at the moment are not always right.

To answer the question "Can ChatGPT create an iOS app in SwiftUI?"

Yes and No

Yes chatGPT can generate code to create an App.
No because the user experience of using the App will not be good and the code may not work.

I would say currently that using chatGPT to help you write an app takes more time that writing the code yourself. As other people have stated chatGPT will give an answer with confidence, even when that answer is incorrect.

I am curious to continue working with chatGPT to further develop this TaskManager app. First to see how chatGPT suggests resolving the editing issue and then to persist the task data when the app is closed.

Source code for TasksAppWithChatGpt is available on GitHub.