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.
Learning Objectives
- Learn what a widget is
- Create an app that includes widgets
Intended Audience
This course is intended for anyone who wants to learn how to develop apps on iOS.
Prerequisites
To get the most out of this course, some basic knowledge of iOS development would be beneficial. We recommend that you take this course as part of the Developing Mobile Apps for iOS learning path.
Hi. Within this lecture, we're going to see what widgets are and how to work with them. So, in iOS 14, Apple has introduced the WidgetKit. So, what is a widget and how we can leverage them in order to provide a very good user experience. So, maybe you have upgraded your phone or your tablet, your iPad to iOS 14, and maybe you have realized that we have a new user experience, new user interface regarding to widgets. So, we had widgets before, as you can see these are all widgets in my Mac OS, okay? And we had these things before. But now we have a different look, right? And in the Mac OS, the look is not very different than it used to be, but in iOS and iPad OS it's actually very different. Because right now in the home screen we can see the big widgets like this. So, they provide some information about the related application, and when we tap on them, it actually takes us to the application itself. So, it's very useful tool but they are not different applications. There are not many applications that we can create or we can just use as a widget. They are part of our application. They're an extension to our current applications, okay? So, this is the main point that has been made in the WWDC 2020 if you attended or watched the live video sessions. There are not many apps but they are very good user experience tools so that we can provide information like real live information to the user so that when they tap on them, we can take the user back to our application and we can change the information that is shown in the widget through the WidgetKit that has been provided to us in iOS 14. So, again in iOS 13, iOS 12, like in the earlier versions, we already had the widgets, but now we have a complete different documentation, complete different sets of tools. And over here we have the development guides and stuff and you can see the details yourself if you want. Of course, I'm going to take you through all the WidgetKit attributes and methods that we can use or we have to use in order to provide a good user experience, but, of course, there will be some additional information maybe that you need to find out on your own once you're comfortable using WidgetKit. So, I really suggest going to developer.apple.com and taking a look at the documentation as well. So, WidgetKit will be actually responsible for taking care all of this stuff. It will be very easy once we implement what we need to implement and we're going to use Swift UI in order to do that. And as you can see it's a new widget API for Swift UI. So, we're going to build an application in Swift UI and then we're going to add the WidgetKit in Swift UI as well. So, I'm going to keep the application very simple. Okay, we're going to create a widget hero or widget hero application in which we will show the icons of some superheroes like Batman, Ironman, Superman, and then the name of the superheroes. So, where did I get these icons? I went to the flaticon.com. So, this is a website that provides free icons as well as premium icons, but, of course, I have picked the free ones. So, I've searched for superhero in the flaticon.com and it came up with like thousands of results. So, here we go, we can see the Superman, we can see the Ironman, we can see the Batman. You can just download the other ones like Captain America or Spiderman over here. So, I believe we have the Wonder Woman as well. And you can just follow along with me with the Batman, Superman, and Ironman. Of course, if you cannot find these icons, if you cannot open the flaticon.com, for some reason, you can just go to my GitHub account. I will share the link at the end of the section and download only these icons to begin with. But you will need these icons in order to complete the application. So, I'm going to create a new XCode project, okay? It will be a simple application, so I'm going to just come over here and choose the application from iOS. Whether we are going to use Swift UI or Storyboard, it doesn't matter, we have to choose the app. And then we're going to say hero widget, okay? And at some point in this application, we're going to see the app storage which is a property record that has been implemented in the Swift UI 2 with iOS 14. We're going to learn about that as well and while doing that, we're going to need a developer account unfortunately. So, if you don't have one, you don't need to implement that feature specifically, but after you have the developer account, when you need to upload something to the app store, maybe then you can come back and learn about it as well. So, it really doesn't matter if you have a developer account or not. So, there will be some point in the application development process that you will need it and I will explain what to do and where to implement it when the time comes. But right now make sure you choose the Swift UI. And for the Lifecycle Swift UI app, make sure you choose the Swift as a language as well. So, after we are done, I'm going to create this on my desktop, and here we go. So, my project is ready right now, I'm going to make this a little bit bigger so we can see it in a better way. And in fact, this is the only thing that we should do over here, I'm going to choose the iPhone 11 as my main simulator, and I'm going to hit 'Resume'. So, once we are ready, we can create our application and then we can come back and add the widget extension as well. So, if you come to this point, that's enough for this lecture, we're going to stop here and continue within the next one.
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.