I’ve been enjoying round with ChatGPT for just a few days now, that I used to be capable of create an account. In fact I needed to have it generate some limericks, some poems and responses to emails. However essentially the most burning query on my thoughts is that this: will AI take my job?
I discovered that ChatGPT has a variety of syntax and conceptual information about Swift and SwiftUI. So I wished to place it to the check to see how good it will be in fulfilling my requests. I used to be taking up the function of the mentor and ChatGPT was principally a pupil that took my authentic request and refined it over a number of iterations till I ended up with an exquisite easy resolution.
For a present challenge I wanted a view that shows a circle however I didn’t need to draw it however as a substitute use a CAShapeLayer and a property that might replace the colour of the form. So I had in my thoughts already an concept how I’d do it, now the query was, how would I switch this psychological image from my thoughts to the AI’s “thoughts”.
Me: Create a UIKit view that makes use of CAShapeLayer to show a stuffed circle
ChatGPT: Right here is an instance of create a UIKit view with a stuffed circle displayed utilizing a CAShapeLayer in Swift:
import UIKit
class CircleView: UIView {
override func draw(_ rect: CGRect) {
let circleLayer = CAShapeLayer()
let circlePath = UIBezierPath(arcCenter: CGPoint(x: rect.measurement.width / 2, y: rect.measurement.top / 2), radius: rect.measurement.width / 2, startAngle: 0.0, endAngle: CGFloat.pi * 2, clockwise: true)
circleLayer.path = circlePath.cgPath
circleLayer.fillColor = UIColor.crimson.cgColor
layer.addSublayer(circleLayer)
}
}
I instantly seen a number of issues right here.
At this level the consequence was in high quality lower than most responses I’d see on Stack Overflow. The sport was on!
Me: That is nonsense as a result of it will add a brand new sublayer each time that the draw perform is being referred to as!
ChatGPT: I apologize for that mistake. Right here is an up to date instance that solely provides the CAShapeLayer as soon as:
import UIKit
class CircleView: UIView {
override init(body: CGRect) {
tremendous.init(body: body)
setupCircle()
}
required init?(coder aDecoder: NSCoder) {
tremendous.init(coder: aDecoder)
setupCircle()
}
personal func setupCircle() {
let circleLayer = CAShapeLayer()
let circlePath = UIBezierPath(arcCenter: CGPoint(x: bounds.measurement.width / 2, y: bounds.measurement.top / 2), radius: bounds.measurement.width / 2, startAngle: 0.0, endAngle: CGFloat.pi * 2, clockwise: true)
circleLayer.path = circlePath.cgPath
circleLayer.fillColor = UIColor.crimson.cgColor
layer.addSublayer(circleLayer)
}
}
It moved the creation of the form layer right into a setup perform which was referred to as from each inits. The one with body is used from code, the one with decoder is used when loading the view from a XIB or storyboard. This was an surprising side-benefit.
I seen although that this wouldn’t replace the trail when the bounds of the view would change.
Me: It additionally must replace the circle path when the bounds of the view change.
ChatGPT: Right here’s an up to date model of the code that updates the circle path when the bounds of the view change:
import UIKit
class CircleView: UIView {
personal let circleLayer = CAShapeLayer()
override init(body: CGRect) {
tremendous.init(body: body)
setupCircle()
}
required init?(coder aDecoder: NSCoder) {
tremendous.init(coder: aDecoder)
setupCircle()
}
override func layoutSubviews() {
tremendous.layoutSubviews()
updateCirclePath()
}
personal func setupCircle() {
layer.addSublayer(circleLayer)
updateCirclePath()
}
personal func updateCirclePath() {
let circlePath = UIBezierPath(arcCenter: CGPoint(x: bounds.measurement.width / 2, y: bounds.measurement.top / 2), radius: bounds.measurement.width / 2, startAngle: 0.0, endAngle: CGFloat.pi * 2, clockwise: true)
circleLayer.path = circlePath.cgPath
circleLayer.fillColor = UIColor.crimson.cgColor
}
}
Attention-grabbing! It additionally is aware of that layoutSubviews is a good place to do one thing when structure adjustments. Subsequent to the setup perform it additionally added an perform that updates the form.
These profitable refinements emboldened me. How about making the fill shade be configurable from outdoors the view by way of a property? Additionally, whereas is technically appropriate to attract a circle by way of an arc bezier path, that solely offers me a top level view.
Me: Exchange the arc bezier path with one for an oval that additionally will get stuffed with the UIColor set within the fillColor property.
ChatGPT: Right here’s an up to date model of the code that attracts an oval form as a substitute of a circle and fills it with the colour set within the fillColor
property:
import UIKit
class OvalView: UIView {
personal let ovalLayer = CAShapeLayer()
override init(body: CGRect) {
tremendous.init(body: body)
setupOval()
}
required init?(coder aDecoder: NSCoder) {
tremendous.init(coder: aDecoder)
setupOval()
}
override func layoutSubviews() {
tremendous.layoutSubviews()
updateOvalPath()
}
personal func setupOval() {
layer.addSublayer(ovalLayer)
updateOvalPath()
}
personal func updateOvalPath() {
let ovalPath = UIBezierPath(ovalIn: bounds)
ovalLayer.path = ovalPath.cgPath
ovalLayer.fillColor = UIColor.crimson.cgColor
}
}
Hm, it says that it did it, specifically including a fillColor
property, however that’s nowhere to be discovered. So I attempted to say it in a greater method.
Me: Don’t laborious code the fillColor, however make it a property of the view that updates the overLayer when set.
ChatGPT: Right here’s an up to date model of the code the place the fill shade just isn’t hardcoded and could be set as a property of the view:
import UIKit
class OvalView: UIView {
personal let ovalLayer = CAShapeLayer()
var fillColor: UIColor = UIColor.crimson {
didSet {
updateOvalPath()
}
}
override init(body: CGRect) {
tremendous.init(body: body)
setupOval()
}
required init?(coder aDecoder: NSCoder) {
tremendous.init(coder: aDecoder)
setupOval()
}
override func layoutSubviews() {
tremendous.layoutSubviews()
updateOvalPath()
}
personal func setupOval() {
layer.addSublayer(ovalLayer)
updateOvalPath()
}
personal func updateOvalPath() {
let ovalPath = UIBezierPath(ovalIn: bounds)
ovalLayer.path = ovalPath.cgPath
ovalLayer.fillColor = fillColor.cgColor
}
}
I had mistyped “overLayer”, however ChatGPT nonetheless understood my request and executed it flawlessly. This was already fairly good, however an knowledgeable programmer wouldn’t be happy with this and maintain sprucing the consequence till it shines.
Me: Separate the replace of the fill shade from updating the form path. The trail ought to solely be up to date when the bounds change and the colour solely when the property adjustments.
ChatGPT: Right here’s an up to date model of the code the place the fill shade and the form path are separated, and the form path is simply up to date when the bounds change:
import UIKit
class OvalView: UIView {
personal let ovalLayer = CAShapeLayer()
var fillColor: UIColor = UIColor.crimson {
didSet {
ovalLayer.fillColor = fillColor.cgColor
}
}
override init(body: CGRect) {
tremendous.init(body: body)
setupOval()
}
required init?(coder aDecoder: NSCoder) {
tremendous.init(coder: aDecoder)
setupOval()
}
override func layoutSubviews() {
tremendous.layoutSubviews()
updateOvalPath()
}
personal func setupOval() {
layer.addSublayer(ovalLayer)
updateOvalPath()
}
personal func updateOvalPath() {
let ovalPath = UIBezierPath(ovalIn: bounds)
ovalLayer.path = ovalPath.cgPath
}
}
Ha! I noticed one other mistake! This manner the fill shade wouldn’t stay the default and solely be up to date if the property is modified.
Me: That is lacking the preliminary setting of the fill shade.
ChatGPT: Right here’s an up to date model of the code that units the preliminary worth of the fillColor
property:
import UIKit
class OvalView: UIView {
personal let ovalLayer = CAShapeLayer()
var fillColor: UIColor = UIColor.crimson {
didSet {
ovalLayer.fillColor = fillColor.cgColor
}
}
override init(body: CGRect) {
tremendous.init(body: body)
setupOval()
}
required init?(coder aDecoder: NSCoder) {
tremendous.init(coder: aDecoder)
setupOval()
}
override func layoutSubviews() {
tremendous.layoutSubviews()
updateOvalPath()
}
personal func setupOval() {
layer.addSublayer(ovalLayer)
updateOvalPath()
ovalLayer.fillColor = fillColor.cgColor
}
personal func updateOvalPath() {
let ovalPath = UIBezierPath(ovalIn: bounds)
ovalLayer.path = ovalPath.cgPath
}
}
That’s appropriate. Now we’re have been at a degree the place I used to be now not so sure as a result of I don’t create CAShapeLayers on daily basis. We have to set the form layers body by some means, don’t we?
Me: I imagine that this code is lacking an replace for the body of the sublayer.
ChatGPT: Right here’s an up to date model of the code that units the body of the ovalLayer
sublayer:
import UIKit
class OvalView: UIView {
personal let ovalLayer = CAShapeLayer()
var fillColor: UIColor = UIColor.crimson {
didSet {
ovalLayer.fillColor = fillColor.cgColor
}
}
override init(body: CGRect) {
tremendous.init(body: body)
setupOval()
}
required init?(coder aDecoder: NSCoder) {
tremendous.init(coder: aDecoder)
setupOval()
}
override func layoutSubviews() {
tremendous.layoutSubviews()
updateOvalPath()
}
personal func setupOval() {
layer.addSublayer(ovalLayer)
updateOvalPath()
ovalLayer.fillColor = fillColor.cgColor
}
personal func updateOvalPath() {
ovalLayer.body = bounds
let ovalPath = UIBezierPath(ovalIn: bounds)
ovalLayer.path = ovalPath.cgPath
}
}
Yeah that appears higher, if we set the body each time layoutSubviews known as then that ought to work. At this level I had a thought that I wished to Senior-Programmer’splain to the poor and overwhelmed AI…
Me: layoutSubviews might be the flawed place to replace the layer body and oval path as a result of that belongs to the view structure circulate, however there’s a separate structure circulate for layers. put it there.
ChatGPT, unflinchingly: Right here’s an up to date model of the code the place the body of the ovalLayer
and the oval path are up to date within the layoutSublayers
perform as a substitute of layoutSubviews
:
import UIKit
class OvalView: UIView {
personal let ovalLayer = CAShapeLayer()
var fillColor: UIColor = UIColor.crimson {
didSet {
ovalLayer.fillColor = fillColor.cgColor
}
}
override init(body: CGRect) {
tremendous.init(body: body)
setupOval()
}
required init?(coder aDecoder: NSCoder) {
tremendous.init(coder: aDecoder)
setupOval()
}
override func layoutSublayers(of layer: CALayer) {
tremendous.layoutSublayers(of: layer)
updateOvalPath()
}
personal func setupOval() {
layer.addSublayer(ovalLayer)
ovalLayer.fillColor = fillColor.cgColor
}
personal func updateOvalPath() {
ovalLayer.body = bounds
let ovalPath = UIBezierPath(ovalIn: bounds)
ovalLayer.path = ovalPath.cgPath
}
}
Impressed, once more! It is aware of about layoutSublayers.
Then I believed some extra. I used to be apprehensive in regards to the circle not being correctly up to date in UIView animations. When you set a layer body in layoutSubviews then the contents jumps to the brand new location and measurement with out animation, as a result of UIView properties are implicitly animated, however layer properties usually are not.
And why do we’d like the fundamental CALayer in any respect, after we could make the form layer be the view’s principal layer? Ha! Now I knew stump the AI!
Me: It will even be higher to make the form layer the primary layer of the view as a substitute of organising a separate sublayer for it.
ChatGPT: Right here’s an up to date model of the code the place the CAShapeLayer
is ready as the primary layer of the OvalView
as a substitute of a separate sublayer:
import UIKit
class OvalView: UIView {
var fillColor: UIColor = UIColor.crimson {
didSet {
layer.fillColor = fillColor.cgColor
}
}
override init(body: CGRect) {
tremendous.init(body: body)
setupOval()
}
required init?(coder aDecoder: NSCoder) {
tremendous.init(coder: aDecoder)
setupOval()
}
override func layoutSublayers(of layer: CALayer) {
tremendous.layoutSublayers(of: layer)
updateOvalPath()
}
personal func setupOval() {
layer.fillColor = fillColor.cgColor
layer.masksToBounds = true
}
personal func updateOvalPath() {
layer.body = bounds
layer.cornerRadius = bounds.width / 2
}
}
Gotcha! Gone is the form layer solely to get replaced by setting the layer’s cornerRadius
to half of the width of the view. And an expertly inserted masksToBounds
makes this work.
Good strive, however let me let you know what’s flawed with this:
Me: That doesn’t work when the view just isn’t sq.. I would like you to create the layer for the view by way of returning CAShapeLayer because the layerClass
of the view.
ChatGPT blushing: Inner server error
Was it one thing I stated? No, in all probability not. ChatGPT’s servers get overloaded regularly. After I pressed the “Regenerate Response” button I received a correct response:
ChatGPT: Right here’s an up to date model of the code the place CAShapeLayer
is returned because the layer class for the OvalView
:
import UIKit
class OvalView: UIView {
var fillColor: UIColor = UIColor.crimson {
didSet {
layer.fillColor = fillColor.cgColor
}
}
override class var layerClass: AnyClass {
return CAShapeLayer.self
}
override func layoutSubviews() {
tremendous.layoutSubviews()
updateOvalPath()
}
personal func updateOvalPath() {
let ovalPath = UIBezierPath(ovalIn: bounds)
(layer as! CAShapeLayer).path = ovalPath.cgPath
layer.fillColor = fillColor.cgColor
}
}
Good! We’re again in enterprise. I pasted this code into Xcode solely to discover a syntax error I had missed from solely glancing at it.
Me: That may produce a syntax error as a result of the layer within the fillColor setter just isn’t identified to be a CAShapeLayer to the compiler. It is advisable forged it to 1.
ChatGPT: Right here’s an up to date model of the code that casts the layer
property to a CAShapeLayer
within the fill shade setter:
import UIKit
class OvalView: UIView {
var fillColor: UIColor = UIColor.crimson {
didSet {
(layer as! CAShapeLayer).fillColor = fillColor.cgColor
}
}
override class var layerClass: AnyClass {
return CAShapeLayer.self
}
override func layoutSubviews() {
tremendous.layoutSubviews()
updateOvalPath()
}
personal func updateOvalPath() {
let ovalPath = UIBezierPath(ovalIn: bounds)
(layer as! CAShapeLayer).path = ovalPath.cgPath
(layer as! CAShapeLayer).fillColor = fillColor.cgColor
}
}
Technically appropriate now, however nonetheless in want of polish.
Me: Refactor these `(layer as! CAShapeLayer)` right into a property
ChatGPT: Right here’s an up to date model of the code that makes use of a computed property to keep away from casting layer
to CAShapeLayer
a number of occasions:
import UIKit
class OvalView: UIView {
var fillColor: UIColor = UIColor.crimson {
didSet {
shapeLayer.fillColor = fillColor.cgColor
}
}
personal var shapeLayer: CAShapeLayer {
return layer as! CAShapeLayer
}
override class var layerClass: AnyClass {
return CAShapeLayer.self
}
override func layoutSubviews() {
tremendous.layoutSubviews()
updateOvalPath()
}
personal func updateOvalPath() {
let ovalPath = UIBezierPath(ovalIn: bounds)
shapeLayer.path = ovalPath.cgPath
shapeLayer.fillColor = fillColor.cgColor
}
}
Ah, now good… we’ve got a brand new shapeLayer
property that pressure casts the layer property right into a CAShapeLayer
. I put the code into my challenge, it compiled with out problem and displayed the crimson circles I lusted for as requested.
Me: Thanks, that’s the perfect reply for my preliminary query.
ChatGPT: You’re welcome! I’m glad I might assist. If in case you have any extra questions, be happy to ask!
Analysis
Much like tales the place ChatGPT sat college exams with dangerous however passing grades it additionally performs across the junior stage for software program builders. It is ready to produce the right consequence if an skilled developer has the endurance and abilities to guided it over a number of iterations.
It does require a variety of hand-holding. Inputting your necessities by way of chat requires that you know the way to precise all these ideas in a method that the AI can parse. I do have a variety of expertise coaching Junior Engineers and a decade of programming UIKit taught me put issues that they are often understood.
I’d have spent a fraction of the time if I had simply coded this view like I envisioned it from the beginning. However the level of this change is to not show that I’m higher at programming than ChatGPT. It’s to show that Chat GPT is extra succesful than discovering pattern code on the Web. It’s not even net search on sterioids. It’s clearly far more than that as a result of it may well perceive ideas and synthesize a consequence from that together with making refinements that an knowledgeable person is guiding it to do.
This can be a first knowledge level. There was none earlier than it as a result of public entry to ChatGPT was solely activated just a few days in the past. So it’s wonderful that one thing is feasible immediately that wasn’t doable earlier than.
The Future
Within the least I would love ChatGPT constructed into Xcode: as a method to write new code. And I don’t imply dictating code, however talking in ideas like proven above. How about having this in Xcode? “Hello Xcode, I want a brand new view that does this and that”. If that have been extra streamlined and sooner that might instantly be helpful. Particularly as a result of it additionally improves your individual studying curve. Having to speak ideas makes you your self perceive them higher. What you train, you be taught!
I can see a future the place ChatGPT turns into increasingly productive to the eventual diploma of a Junior Developer. With this I imply any person who can conceptional execute the itty gritty which you, as a Senior Developer, give it course in a common imaginative and prescient you keep. Just like the captain of a ship who sees the ice bergs and is aware of the place the ship needs to be going, and ChatGPT is the whole crew.
Then the step after that – within the far future – is to mix ChatGPT with one thing that may perceive sketches and mockups and useful descriptions of apps. That is the place the Senior Developer brains are and can nonetheless be wanted for a very long time. To translate the consumer’s needs and designs into software program ideas.
We haven’t touched on the query what’s going to occur if at some point all Juniors could be changed by AI. If there aren’t any new Juniors then there shall be no person to mature into Seniors sooner or later. Possibly our coaching should change to give attention to mastering conceptionalizing and excessive stage idea synthesis and leaving the mundane creation of code to AI as a substitute.
Additionally printed on Medium.
Associated
Classes: Instruments