Hi. Last video we looked at using code completion and asked mode in GitHub Co-Pilot for Xcode to explore an existing project. We’re going to switch back to building yesterday’s weather. Now I’m going to investigate Agent Mode, which is able to help write code for us.
So I’ve got Xcode and I’ve opened Co-Pilot. Notice that co-pilot is expecting a project to be open. We’re going to open a project. We’re going to create a new project now up. I’m going to jump into coding at yesterday’s weather. It’s got Swift UI. It’s using Swift. It’s Swift testing with XCTest UI tests. We’ll visit that later on.
So if we run through that. I’m going to save it. And then co-pilot has loaded as expected. So what I’m going to do is ask it to create the weather view. That’s what we’re going to try and do.
I would like a new Swift UI view to display the weather. It should use SF symbol to show the state and the temperature and precipitation. And it should have an attractive background. Please could you help me make it?
Set that off. So first of all, let’s run the create file tool to create the weather view file. As you can see, and then it has it tells us that it’s displays it with an SF symbol. Temperature, precipitation, attractive background. You can preview with sample data such as rainy 20 to 90%. Let us know if you need further adjustment.
So let’s take a look at what it’s actually created over here. So this is weather view. If we make this slightly smaller, then we might be able to see the preview. There we go. Okay. So I mean, that’s a questionable attractive background, but it’s a thing.
So it has made a new weather view with Swift UI. It’s added a preview with some hardcoded aspects. So it’s got the it takes the weather state the temperature and the precipitation as its three variables. It’s using a Z stack to put the linear gradient background and then put the details on the top. It’s got a gradient with like a start point, end point. It’s got blue to white. Looks all right.
And then we’ve got the SF symbols image using the weather state parameter, which is a string. That’s the temperature. And this precipitation like this. And obviously this is code that I can just go ahead and edit. So if I wanted it to be yellow instead of white I can do that. And then the preview down here is automatically given us clouds rain fill.
So that gives you an example of how this can be created. But say actually I mean this is this is fine, but I’d rather be using a view model. So let’s see what happens if I ask it to use view model instead.
This is good. Please could you convert it to using a view model instead? Let’s see what that does.
So it’s now created. It’s using a weather view model for managing state. So if we now take a look at what the changes it’s made, it’s created a weather view model right at the top here. An observable object with three exactly the same three variables, the same three properties. Created the init, so it will fill it in. And then down here it’s changed it to use the view model instead. And then the preview obviously creates a view model rather than the weather.
So that’s not particularly difficult for us to do. It’s created pretty reasonable code. I might want to extract that into a different file. In fact, let’s try that.
This is good. Please could you extract the view model into a different file?
So then it’s gone and created weather view model with exactly the same things in it before. And then over in weather view it has removed the view, the definition of the view model. It works in exactly the same way.
So these are quite useful refactoring tools. But this is a relatively small and simple problem. I think in the next video, we’ll take a look at revisiting the spec and seeing how do we implement more complex things based on that using GitHub Co-Pilot for Xcode.