Time to see what the fuss about AI and software development is all about. Let’s get to it!
I connect to ChatGPT via my browser, start a new chat, select the GPT-4 model from the dropdown list at the top of the empty page and describe, in basic terms the application I would like ChatGPT 4 to generate the SwiftUI code for. This is a simple application so, in theory, a simple explanation should be sufficient.
Me
I would like to create an SwiftUI based application that displays the time of day as a nested group of circular progress indicators with different colors assigned to the hours, minutes and seconds indicator. The application should consist of a single view with the three nested circular progress indicators displayed. The progress indicators should be refreshed each second to display the hour, minute and second.
After a few seconds of processing my instructions ChatGPT 4 then provides a quick summary of the steps I need to follow to create the application followed by the SwiftUI code itself that includes a handy ‘Copy code’ button in the top right corner.
To create an SwiftUI-based application that displays the time of day using nested circular progress indicators, you can follow these steps:
- Create a new SwiftUI project in Xcode.
- In the
ContentView.swiftfile, replace the existing code with the following:
import SwiftUI
struct ContentView: View {
@State private var currentDate = Date()
let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()
var body: some View {
VStack {
ZStack {
CircularProgressView(progress: hoursProgress, color: .blue)
ZStack {
CircularProgressView(progress: minutesProgress, color: .green)
ZStack {
CircularProgressView(progress: secondsProgress, color: .red)
Text(currentTime)
.font(.system(size: 24))
.fontWeight(.bold)
}
}
}
}
.padding()
.onReceive(timer) { _ in
self.currentDate = Date()
}
}
var hoursProgress: CGFloat {
let components = Calendar.current.dateComponents([.hour], from: currentDate)
let hours = CGFloat(components.hour ?? 0) / 12.0
return hours
}
var minutesProgress: CGFloat {
let components = Calendar.current.dateComponents([.minute], from: currentDate)
let minutes = CGFloat(components.minute ?? 0) / 60.0
return minutes
}
var secondsProgress: CGFloat {
let components = Calendar.current.dateComponents([.second], from: currentDate)
let seconds = CGFloat(components.second ?? 0) / 60.0
return seconds
}
var currentTime: String {
let formatter = DateFormatter()
formatter.dateFormat = "HH:mm:ss"
return formatter.string(from: currentDate)
}
}
struct CircularProgressView: View {
var progress: CGFloat
var color: Color
var body: some View {
Circle()
.trim(from: 0, to: progress)
.stroke(color, lineWidth: 12)
.rotationEffect(.degrees(-90))
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
To make the effort even simple ChatGPT 4 then describes the finishing steps.
This code creates a ContentView with nested CircularProgressView for hours, minutes, and seconds, which are updated every second using a Timer.
- Run the project in the iOS simulator or on a physical device to see the application in action. You should see three nested circular progress indicators with different colors for hours, minutes, and seconds, along with the current time displayed in the center.
At this point I’m quite impressed and flash back to the hours spent creating this code from scratch. It looks good but the true test will be to see it run in the simulator and then, ultimately on my iPhone.
I create a new project and overwrite the boilerplate code created for ContentView with the code generated by ChatGPT 4. No errors are detected and I run the app on the Simulator.
Nice! Not perfect but a respectable beginning. I’d hoped that by specifying that I wanted a nested group of circular progress indicators that ChatGPT would understand what it was that I was expecting but, obviously, not. What I got was ChatGPT’s vision not mine. But I knew this would be an itterative and cooperative process. Time for me to clarify to ChatGPT my the finer details of my vision.
Me
Regenerate the response so that the minutes and hours circular progress indicators are 75% and 50% the diameter of the seconds respectively.
To modify the size of the minutes and hours circular progress indicators, you can adjust the .frame() modifier in the CircularProgressView and add a custom parameter for size. Here’s the updated code:
From here on I will skip showing the actual code that ChatGPT 4 generates until we get to the final version and only show the results of each iteration. I will though include the other bits of the conversation that I had with ChatGPT 4.
Not quite perfect but I’m not surprised it isn’t.
Next up – polishing.
Forefront Systems 