The course is part of this learning path
In this course, we explore what widgets are and how to work with them. You'll learn what a widget is and how you can leverage them in order to provide an optimum user experience in your apps.
Hi, within this lecture, we're going to write our superhero model so that we can build on that later on and we're going to bring in the icons that we have downloaded from the flaticon.com or from my GitHub account. So, our SwiftUI project is ready, we can see the Preview on the right hand side. It's very good. Let's first of all bring in the icons so that we can start working on them immediately. I'm going to take this batman, ironman, superman. So, it's in the extension of svg, which it really doesn't matter. It works as well, okay? So, I'm going to open my Assets folder and I'm going to select everything and bring in the Assets folder over here. So, that's okay. Now, I have the icons. Make sure you have the icons before we start. And make sure the names are simple as this. So, batman, ironman, superman, because we're going to need the names, okay? So, over here. What I want to do, I want to display the icon, I want to display the name of the superhero, like batman, superman and the real name of the superhero like Clark Kent, or Tony Stark, Bruce Wayne, okay? So that's it, that's all we're going to do. We're going to display the image, we're going to display the name and the real name. So, I'm going to right click over here and say New File and I'm going to go for this Swift File because we're going to create our model. So, I'm going to call our model Superhero and it will be as struct as you might have guessed. So, let me come over here and create our struct. So, I'm going to say struct and Superhero and let me open the curly braces. So, what I'm going to have is the image, the name, and the realName, okay? So, I'm going to say let image be a String and why I'm doing this as a string because I can just call image and give a name like batman, ironman, superman to create an image of these icons, right? So, I'm just saving this as a string. And I'm going to say name is again a String and in fact the realName is again a String, okay? So, the realName is String as well. Finally, I want to make this identifiable and codable. Why? Because I want to make this identifiable as we have seen in the SwiftUI section. I want to take this into a Tableview view. It's not going to be a Tableview obviously, it's going to be a for each loop and I don't want to have any kind of discomfort over there. So, I want to make those things identifiable and also I want to make these things codable which is decodable and encodable because I want to encode them and turn them into a data and save them into our app storage which is a new way to reach the user defaults. So, why would I want to save this to user defaults? Because I will change my widget according to the selection of the user. So, whatever superhero user taps on, I will save them to my user defaults and then I'm going to take that information from the user defaults and show it to the user in the widget kit, in the widget itself. So, in order to do that, I'm going to save all of those things into my user defaults. And in order to do that, I have to convert this data into a data. It's not a data right now, it's a custom class, it's a struct, okay? So, we're going to have to make sure that this is identifiable and codable. But once we do that, it will ask us to have an ID. Okay, so in order to be an identifiable struct, it has to have an ID. And beware that it's not encodable or decodable, its codable. So, I'm going to save var id. And I don't want to deal with IDs very much like UUID or manual ID. I just want to make sure that this ID is going to be equal to name, or realName or image name, because I don't care about the ID very much in this application. So, I'm going to open a curly brace and close it and I can just say image, or name, or realName in order to make sure that image will be the string of this ID as well. So, here we go. Now, my model is ready. So, I have an image which will be passed into this ID as well. And they are all strings which is good. So, let me create some kind of exemplary superheroes over here like superman. Let me just say the image is "superman." So, this has to be exactly what you have written over here. If you have written superman, then it's superman. And beware it's case sensitive. So, the name is "Superman" and the realName is "Clark Kent." So, let's do that for the other superheroes as well. So, batman is batman. Let me choose this image, name and image is "batman," name is "Batman," and the realName is of course "Bruce Wayne." So, here we go. And let's go to ironman, Superhero and the image is ironman. So, let me write ironman. So, name is "Iron Man" one more time, and the realName is "Tony Stark" in this case. Very good. So far I have managed to create my struct, I have created some superheroes as well. Now, my model is ready. Now, I need to come up with some views to show the details of the superheroes. It's very easy for us because we have learned how to do that in the SwiftUI section, right? I'm going to keep the application as simple as possible so that we can focus on the widget side of the things. Again, for the codable part, don't worry about it. It's not mandatory in order to have a widget kit or something like that, but it's also good to know about new kinds of technologies like AppSearch, and that's what we're going to do, but we're going to do those in the next lecture.
Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.