Technical Specification Document

At this point in this experiment I’m feeling the dawn of that magical mental state we developers slip into – flow. The external world is now just a whispering distraction as my mind begins to focus itself on just the journey ahead. My sense of time simulataneousy expands and contracts as both the left and right hemispheres of my mind, the creative and the analytical, start listing to the same ambient soundscape playing on my headphones.

This feels different though. Now there is a second entity in this mindscape – an AI who speaks my language – SwiftUI.

The app is looking good but it’s not 95% perfect. Not yet “perfect enough” as we’d say at Boeing.

First, having the display of the time positioned right in the center of the view is rather distracting. It would make more sense to position this UX element below the three progress meters.

To display the current time below the nested circular progress views, you can modify the ZStack to be inside a VStack. Here’s the updated code:

… the code …

In this revised code, the Text view displaying the current time has been moved outside the ZStack and placed below it within the VStack. This will display the current time below the nested circular progress indicators.

Copy, paste, compile, run …

Perfect! Now onto polishing the progress meters.

They are functioning like I’d hoped for but my overarching vision for this app is Big~Bold~Beautiful! and while the three progress meters are rather beautiful they are a bit thin on being big and bold.

Plus, while I, as someone who has the code in front of them, understands that the red segment is for the seconds, the green is for the minutes and the blue is for the hours delivering the same information from more than one visual source, screen real-estate permitting of course, always delivers a better user experience.

Let’s push the envelope a bit and get ChatGPT 4 to fix two interface deficiencies at once.

To display the time with different colors for hours, minutes, and seconds, you can create separate Text views for each value and apply the desired colors. Additionally, you can set the lineWidth of the circular progress meters to 24. Here’s the updated code:

… the code …

In the updated code, separate Text views have been created for hours, minutes, and seconds, with their respective colors set using .foregroundColor(). The CircularProgressView struct now uses a lineWidth of 24 for the progress meters.

Copy, paste, compile, run …

Nice!

Big – check. Bold – check.

Beautiful – almost.

People love silky smooth animations. I love animations and I’m certain kittens love animations.

Time to see how far I can push this creative envelope of cooperation.

To add animations for the circular progress meters when they reach their maximum values, you can use the .animation() modifier with a conditional check. Here’s the updated code:

… the code …

In the CircularProgressView struct, the .animation() modifier is added with a conditional check. If the progress value is 0, a linear animation with a duration of 0.2 seconds is applied, creating the rewind effect when the meter reaches its maximum value. Otherwise, the default animation is used.

Copy, paste, compile, run …

Beautiful – check!

Code complete. Thankyou ChatGPT 4!

At the end of this post is the final version of the app ready to be copied and pasted into your instance of Xcode. Something that was created entirely, with a bit of guidance from me, by ChatGPT 4.

But wait! There’s more!

At this point in this experiment I was so impressed that I decided to hire my first AI employee – ChatGPT 4 and its descendants. Obviously a press release from Forefront Systems Inc. is in order but I’ll save that for my next blog post.

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, size: 0.5)
                ZStack {
                    CircularProgressView(progress: minutesProgress, color: .green, size: 0.75)
                    CircularProgressView(progress: secondsProgress, color: .red, size: 1)
                }
            }
            HStack(spacing: 0) {
                Text("\(hoursString):")
                    .foregroundColor(.blue)
                Text("\(minutesString):")
                    .foregroundColor(.green)
                Text(secondsString)
                    .foregroundColor(.red)
            }
            .font(.system(size: 24))
            .fontWeight(.bold)
            .padding(.top)
        }
        .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 hoursString: String {
        let components = Calendar.current.dateComponents([.hour], from: currentDate)
        return String(format: "%02d", components.hour ?? 0)
    }
    
    var minutesString: String {
        let components = Calendar.current.dateComponents([.minute], from: currentDate)
        return String(format: "%02d", components.minute ?? 0)
    }
    
    var secondsString: String {
        let components = Calendar.current.dateComponents([.second], from: currentDate)
        return String(format: "%02d", components.second ?? 0)
    }
}

struct CircularProgressView: View {
    var progress: CGFloat
    var color: Color
    var size: CGFloat
    
    var body: some View {
        Circle()
            .trim(from: 0, to: progress)
            .stroke(color, lineWidth: 24)
            .rotationEffect(.degrees(-90))
            .padding()
            .frame(width: 200 * size, height: 200 * size)
            .animation(progress == 0 ? .linear(duration: 0.2) : .default)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

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.

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:

1. Create a new SwiftUI project in Xcode.
2. In the ContentView.swift file, 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.

3. 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.

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.

A fun feature of SwiftUI is the ability to create progress indicators beyond the old-school left-to-right thin rectangle. Yawn. Rectangles are so 20th-century. Users today expect something big, bold and beautiful and circular progress meters fill that UX element nicely.

I also like to practice my software skills in creating digital clocks. I guess it’s a habit born of being an hourly contractor mixed in with having a post-graduate advisor who loved to restore old clocks. Rather than talk about the next steps in my studies, he loved to show off his latest centuries-old clock that was now “purring like a kitten.”

Time to put ChatGPT 4 to the test.

My goal is to describe to ChatGPT 4, a simple application that displays the time of day down to the second, using three nested circular progress meters representing the hour, minute and second on an Apple device. As a bonus, I’d also like the time displayed in the regular hour:minutes:seconds format. ChatGPT will be my software developer and generate all the SwiftUI code the app requires. Then, in a conversational style, I will act as the product manager and describe to ChatGPT the enhancements I want it to make as we drive towards a shared vision of the application.

Note the phrase “shared vision.” Working with an AI is quite similar to how I’ve worked as a member of a team of developers. Each of us has a vision of what the app will look like and how it will perform, and through a series of conversations, we eventually arrive at a shared vision. Not my vision. Our vision. Groupthink is a critical mindset when working with an AI—one of cooperation rather than domination. As a developer working with others, I must put my ego on the back burner and prioritize the shared vision over my vision. It’s not easy, but it’s always worth it.

On August 31, 2017, while most of us were looking forward the arrival of the dog days of summer, the most fundamental advancement in Artificial Intelligence (AI) slipped onto the Internet and under the radar of nearly everyone. On that sleepy Thursday, Google published a white paper with the academic title Transformer: A Novel Neural Network Architecture for Language Understanding. A document that, in hindsight, might turn out to be the precursor of AGI – Artificial General Intelligence. The dawn of Homo Sapiens 2.0. A technology that, on November 20, 2022, would stun the world with release of ChatGPT 3.0.

ChatGPT 3.0 (the ‘T’ in the name meaning Transformer) turned out to be, pun intended, transformative regarding natural language processing (NLP). Suddenly, with a few lines of text, anyone could write a poem, complete a complex essay for high school and write reams of computer code in over a dozen languages, including my latest favourite – SwiftUI.

Four months later, ChatGPT 4.0 was released. An NLP that was an order of magnitude more powerful than its version 3.5 predecessor. A version that could pass the US bar exam and write a novels in a day. And, importantly to me, one that had the skill of an entry-level software developer to that of a seasoned veteran.

After 45 years of software development, I saw my career ending. Or was it? Did the development of the application program interface (API) design pattern end my career? No. It made it more accessible. Did the development of reactive programming languages such as SwiftUI crush my career as a UX designer? No. It made it infinitely more enjoyable. The evolution of the software development industry is no stranger to things getting more accessible and reliable. And while the arrival of ChatGPT and its code-writing skills stunned me, I knew this was just another moment of technical evolution.

It was time to see for me, and perhaps you, just how good ChatGPT 4.0 was for writing SwiftUI applications.

What follows will be a series of blog posts on my first crack at using ChatGPT 4.0 to create a simple but flashy SwiftUI application. The experience was, to be honest, stunning. In just an hour, I completed what even just a year ago would have taken me an entire week.