Hi, within this lecture, we're going to build the same project that we have been building, but this time we're going to build it with SwiftUI. And in order to do that, you need Xcode version 13 or newer. If you have Xcode 12, it won't work. So, you better upgrade your Xcode. So, I'm going to go with app and for a product name, I'm going to say async image, asynchronous image or something like that because this is a newer feature that we will be seeing in the SwiftUI. So, that's it, and don't forget to choose SwiftUI as an interface for your project. Great, now I'm going to put this on my desktop and just go along with it. So far, we have understood what to do with the dispatch q and everything, but also there is a newer technique called AsyncImage that needs actually minimal effort in order to download an image from a URL and just display to the user with a proper way of doing it, okay? So, if you have this, then we can go ahead and just create our list, create our image, and just create our button in order to test what's going on.

So, what I'm going to do, I'm going to share a link with you in the resources of this lecture and this link will give you this. So, what I'm going to do, I'm going to show you some model that I have created and it's very basic. It's like a list of Superheroes. It's just there for you to just display it on the list, like a table view. Of course, you can display anything that you want, but I don't think you should actually spend a lot of time doing this because we have been doing this pretty much every time in this course. So, we have done this multiple times.

So, I believe you can just copy and paste it. So, all you got to do is just open this link, copy what you see over here and paste it in a new file in your SwiftUI project. So, that's what we are going to do. And by the way, as you can see, the struct is identifiable, so it creates its own UUID so that we can use it directly with the list. So, I'm going to say new over here, new file, and just choose swift file. It doesn't have to be SwiftUI view because we're just going to have a struct.

So, I'm going to copy everything that I see over here as you can see. I'm going to paste it over here and that's it. So, this is our struct. It only has a name, by the way. it has the ID and name. we have the ID because this is identifiable, so that we can use it in the list directly. And also, we have a lot of Superheroes over there as an example. So, what I'm going to do, I'm going to close everything over here and resume this so that maybe we can just leverage the preview over here once we create our list. So, I'm going to delete the text and just put the list over here, and I'm going to say superHeroArray, and the superHeroArray comes from the struck that we have created. Here you go, it only causes the example Superhero models that we have created. And later on, you can just make sure that say, Superhero or something like that in so that it can actually loop through this list and you can display anything you want over here like superhero.name.

And that will be it, okay? That will be enough for us to test this application. And here you go, as you can see, it already appears over here, but I'm going  to change this to something newer rather than iPod. So, I believe iPhone 12 or 13 is going to be fine. Okay, make sure you have your setting as well. Later on, I'm going to add an imageView, tap on the top of this list, so what we can just see it how it looks like. So, I'm going to change the font and colors a little bit. If you want, you can change them too, but since this is only for testing purposes, I don't suggest you spend a lot of time over here. Maybe change the color just to practice SwiftUI a little bit. And then later on, I'm going to have a NavigationView because we're going to have a navigationBarButton item like we did in the storyboard as well. So, this will be residing in the NavigationView, and also, on the top of the list, I'm going to display a navigation Title, and all we got to do is just say something like Superhero Book or something like that, okay?

So, .navigationTitle, Text, Superhero Book like this. But I believe we should do it in the list, here you go. And also, we have to spell it correctly. Great, Superhero Book. Now, all we got to do is just add the imageView on the top of this list. And in order to do that, I'm going to use this VStack. Okay, I'm going to stack this vertically, and you can just make sure that on the top of the list, you display an image. So, we used image before and in the image, it actually asks for a UIImage. And we can just create the UIImage with data for example like we have done before, but it's not really what we want. We have seen that it causes problems and we have to deal with the background and main threat manually. So, rather than that, I'm going to use something called AsyncImage. But in order to do that, we need to make sure that we are targeting iOS 15, so make sure you change your target deployment target to iOS 15 because this is only valid after iOS 15. So, in order to do that, just come over here and write AsyncImage. So, that's what I have been talking about. And as you can see, it asks you for a URL.

So, make sure you find the URL content and placeholder. So, URL content and place holder. So, these are the parameters that we require. Just double click on it and give the necessary information over here. For example, for the URL, for the string, let me just find some image again. I believe I can just work with my own image. So, this is my website. Just find any image you want and just get the address of it, okay? And put it over here as a string. And I believe we have to just put an exclamation mark at the end of this thing as well.

So, for the content, if you click 'Enter' it will give you a closure, and it will give you the downloaded image as a variable. So, make sure you type image over here or anything you want, and then we can reach it. So, for example, I can come over here. So, let me just make this a little bit bigger so you can see it in a better way, here you go. Now, I can come over here and just use this image. For example, I can make this resizable, I can just give it a frame, I can change the ContentView or something like that.

So, I'm going to give it a frame like 300-300 and make it central. And for the placeholder, so I have been talking about this for the placeholder, we can have a ProgressBar, for example, or ProgressView. So, it will be like a view that spins while our image is loading. So, all you got to do is just write ProgressView under the placeholder tab, and that's it, that's it. It's very easy to do this in SwiftUI.

Now, actually we can try this, right? So, I'm going to come over here and say resume and try to play this like that in the preview. Of course, you can create this with the simulator as well, but as you can see it works, right? So, I believe we have to just come over here and find like a bigger image like we did before and try it with that as well. Like, I'm going to search for a large image again, and this was the biggest one that we have found. Now, what I'm going to do, I'm going to take this link and just put it over here like this.

So, right now, I'm going to play this one more time or I'm just going to play this with the simulator so that we can see it in a much more clear way. So, I'm going to see what happens once it's loaded. So, we have to see some ProgressView, right? So, here we go, you see the ProgressView over here and we can interact with the user interface. As you can see, it's now being downloaded and we are waiting for it since it's very big. I believe it's going to take some time, but eventually it will load. And as you can see, it didn't block the main thread or it didn't block the user interface.

Of course, if you want, you can just put a button to it, you can try to change the image as well, but I believe it's pretty clear, right? It's pretty clear that we have what we need. So, this AsyncImage is very good and you can use it after the iOS 15. And it's a very elegant way to download images from Internet and show it to the user with the proper settings of the concurrency.

So, we have seen how to deal with concurrency a little bit, but there are so much more to learn, especially after iOS 15 when it comes to the new techniques. And in order to do that, we're going to build the crazy crypto application with SwiftUI from scratch in order to understand the MVVM structure and also concurrency in more details in the next lecture.