SwiftUI 2 - Build Netflix Clone - iOS 14 - Xcode 12 - UPDATED | Nikita Thomas | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

SwiftUI 2 - Build Netflix Clone - iOS 14 - Xcode 12 - UPDATED

teacher avatar Nikita Thomas, iOS Software Engineer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

41 Lessons (11h 1m)
    • 1. Course Intro

      3:00
    • 2. Creating an Xcode project for SwiftUI

      8:49
    • 3. Setting up HomeView

      38:35
    • 4. Large Movie Preview Part 1

      17:33
    • 5. Large Movie Preview Part 2

      14:13
    • 6. Large Movie Preview Part 3

      16:19
    • 7. Large Movie Preview Part 4

      11:51
    • 8. HomeView top row of buttons

      14:23
    • 9. Building MovieDetail View Part 1

      16:08
    • 10. Building MovieDetail View Part 2

      15:31
    • 11. Building MovieDetail View Part 3

      22:03
    • 12. Building MovieDetail View Part 4

      19:24
    • 13. Custom Tab Switcher

      9:20
    • 14. "More Like This" Grid

      13:10
    • 15. "Trailers & More" List

      21:49
    • 16. Episodes View Part 1

      16:17
    • 17. Episodes View Part 2

      9:07
    • 18. Episodes View Part 3

      18:37
    • 19. Integrating MovieDetail View with our Home View

      9:21
    • 20. Top Row Buttons (Part 1 - Setting State Variables)

      20:51
    • 21. Top Row Buttons (Part 2 - Responding To State Variables)

      15:51
    • 22. Top Row Buttons (Part 3 - Showing Overlay Menus)

      20:05
    • 23. Building A TabView

      10:58
    • 24. Custom Search Bar Part 1

      17:25
    • 25. Custom Search Bar Part 2

      17:10
    • 26. Search View Part 1

      18:10
    • 27. Search View Part 2 - Custom Bindings

      11:47
    • 28. Search View Part 3 - Popular

      14:48
    • 29. Search View Part 4 - Lazy Grid

      7:50
    • 30. Coming Soon Part 1

      19:45
    • 31. Coming Soon (Part 2 - Tracking Scroll View)

      18:55
    • 32. Downloads View

      7:38
    • 33. Fix #1: Stretched Images

      2:35
    • 34. Building "Preview Image Cell" View

      13:50
    • 35. Building "Preview Row"

      13:45
    • 36. Building the "Pager" - Scrollable Container of Views

      34:31
    • 37. Trailer Player View - Video Player Wrapper

      7:22
    • 38. Preview View - FullScreen video playing view

      24:37
    • 39. PreviewList - Scrollable list of videos

      18:01
    • 40. Advanced Drag Gesture 1 - Showing & Hiding a fullscreen overlay

      17:17
    • 41. Advanced Drag Gesture 2 - Combining Multiple Gestures

      32:42
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

159

Students

--

Projects

About This Class

8d7b1b1a.png

Building real apps is always the most efficient way to quickly learn new software engineering concepts. In this course you will learn how to use SwiftUI 2 for more than just playing with small prototypes.


You will be building a functional Netflix clone that has most of the features of the real app. The focus of this course is learning & perfecting SwiftUI concepts. We will be building all of the visual UI components from the Netflix app. We won’t handle networking and we’ll be loading our data locally to show up within the UI. The app is built with MVVM and you'll be able to easily integrate your own networking layer.

Some parts of the course require iOS 14 and Xcode 12.

Many lessons can be followed using Xcode 11 and the important concepts learned will still apply to iOS 13. But some views & functionality are only available in iOS 14 using Xcode 12. For example, the ‘Grid’ view is only availably in iOS 14+. For iOS 13, you would have to build your own implementation using a combination of VStacks & HStack.

What is SwiftUI 2? 
Apple has provided this new framework as a way to quickly build beautiful user interfaces for any Apple device using just one set of easy-to-use tools. With the new declarative syntax of SwiftUI, it takes less code to keep your code and design perfectly in sync.

SwiftUI works seamlessly with new Xcode design tools and significantly speeds up development by showing your code changes in real time! 

After the latest features for iOS 14 announced at WWDC 2020, SwiftUI 2 is even more robust! New views, new functionality, less bugs, and faster performance.

No excuses to skip out on SwiftUI 2 now.
Start learning today! 


This course is in no way affiliated with Netflix, Inc. No source code of the real Netflix application is ever shown. This code is my interpretation of how I would build the app using SwiftUI 2.

Who this course is for:

  • Experienced developers ready to jump into SwiftUI 2
  • Beginner developers learning how to build real applications with SwiftUI 2
  • Developers looking to practice their design skills
  • Developers who learn best by building real project

Meet Your Teacher

Teacher Profile Image

Nikita Thomas

iOS Software Engineer

Teacher

Hi! I'm Nikita and I'm an iOS Engineer currently working in a large (15k+ employees) tech startup in San Francisco, California.

I have been fascinated with Swift every since Apple announced their new language in 2014. I have been learning through tons of online resources and have been using it every day at work ever since.

I love brining unique experiences to users through beautiful iOS applications.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Course Intro: Hello and welcome to the build Netflix clone with Swift UI course. In this course, you will learn how to build a working clone of the Netflix application using the latest Swift Y2. And all of the really cool stuff that was announced for it at WWDC 2020. So for some of the new stuff that's announced that we will be going in depth into. We have the SF symbols too. There's a lot of new V stack and stack behaviors. Grids are very important for how Netflix uses them. And then the main benefit of this course is you'll be learning how to use everything within Swift UI to vote a real application. I think taking this course is very important to anybody looking to really accelerate their learning of Swift UI. This actually applies to a lot of new software engineering concepts, which is you learn best by building real projects. There is only so much you can learn by following small tutorials that isolate a certain feature and show you small perfect examples when it comes to Swift UI, there's two important skills. One is actually building the views. So that's how to build the views style, then position them on the screen and how to use frames, things like that. And the second thing is how to organize your data and pass it around the app. And this is the critical information that you gain by building a real project. So for this course, we'll be taking a look at the real Netflix application that you can find in the App Store. And we're going to start building it out screen by screen using Swift UI. You're going to learn how to build all of these small views that make up the app. Some of them are very simple. We'll start with those. And some of them are very complex with animations and custom transitions and will eventually cover everything there. You'll also learn how to combine these small views to actually build out these complex screens. So this is what's really great about course like this is you will start seeing all of your work coming together and piece-by-piece, we will start having a UI that looks really, really close to the real Netflix app. And then you'll also learn how to correctly organize your data and pass it around efficiently. With Swift UI, you'll become a master at using state, passing on bindings using observable objects, environment objects. All of this will come easy to you once we are done with the course and download the app, you will walk away with a strong understanding of the fundamentals of software. You will understand how to break down complex screens into a container of simple views. Along the way, you'll also learn tips and tricks specific to Swift UI that will speed up your development time and help you avoid common pitfalls when you're working on your next projects. And since this is a real app, you'll also walk away with lots of helpful extensions and reasonable views that you can carry over to your other swift UI projects. So I highly recommend you have two monitors for this course so that you can watch the lesson on one code along in real-time on a second monitor. You'll have a second monitor. You can just play the lessons on your iPad or a laptop or a second computer, but you will definitely learn so much more by actually getting your fingers on the keyboard and building out the app yourself. So that's it for the intro. I'm ready to get started with the first lesson. 2. Creating an Xcode project for SwiftUI: So in this video, we're going to cover creating the project. And this video was actually recorded after the entire course was complete. And all of the beta versions of Xcode 12 are done. And now that we have the official release version, what happens is when you create a new project on something like Xcode 12.1, your files are going to look a little bit different than how they look in the course. So I'm making this video to explain the process of creating a new project and explain the differences in what you're going to see on your latest version of Xcode 20 compared to what you're going to see in the videos. So as you can see in the videos, you're going to see a shared and an iOS folder. There's also going to be a macOS and products, but these are going to be mostly empty. And just for a couple of files, the shared is just going to contain our app, the content view, and our assets. And then all of the files that we're actually building are in this iOS folder. And you can see we have no AppDelegate war scene delegate. Instead we have the file that's named after our project. So build a Netflix app and we have this at main struct. That's basically just loading our content view. So let's cover the process of creating a new project. We're going to go up to File New Project. And we're going to see this screen. Now right away. It's going to be a little bit different than what's in the course. So in the course we actually made a multi-platform app. That's no longer the case. So now in multi-platform, there's just a game and Swift packages for frameworks. You're going to select iOS, and here you will select App. So this was different in the Xcode 12 beta before the official release. So that's why there's that shared and iOS folder. You're just going to create iOS app. Click Next, you're going to name it whatever you want. So I'll just say build Netflix two, that's gonna be our product name. This is just your developer account. So you should probably just have one personal team. Maybe if you work for a company, you'll have multiple options here. So your organization identifier is used to build your bundle identifier. And the common way to do this is com dot your team. And you can see how it builds the bundle identifier to basically become com dot. And then key to Thomas, dots are product name. So whenever you change up here will change the ending, and whatever you change here will change the beginning. And then after that we have some important settings. So for interface, we obviously want Swift UI. There's two options here, the UI kit storyboards and swift UI. So if you select Storyboard, you're gonna get a UI kit storyboard, which is the older way of designing iOS applications. This course is specifically covering Swift UI. So you want a 100 percent wanna make sure you have Swift UI selected here. You technically can select either one and build the other way. So you can select Swift UI and still use storyboards. And you can select storyboards and still make swift UI views. This basically just starts out your interface using one or the other. So select Swift UI now lifecycle, this is another important change to keep in mind. So there are two options here. Once again, basically the swift UI newer way or the UIKit older way. The swift UI app version gives us this at main struct. And so this is the Swift UI lifecycle. You don't have an AppDelegate, you don't have a scene delegate. You have one at main struct, and that's going to have a window group loading into your content view. And your content view is just whatever Swift UI view that you want. So here we have something like this. Now the UIKit app delegate option is going to give you a scene delegate and an AppDelegate File. So if you have a scene delegate and an app delegate file, that means you probably should just recreate the project for this course because I don't cover how to launch a swift UI view from a scene delegates. So this is something that you can look up. You definitely can just use a appDelegate, but you will have to look up on your own how to implement and how to load in a window group with a swift UI view from a UI kit seen delegates. So all of the functionality of the app delegate and the scene delegate can still be done using this swift UI app lifecycle. We don't cover it specifically in this course, but all of the functionality has just been moved over and there's just a different way to do it. And so you can look up how to do it. But to follow along with this course, these two options are what you want to see. You want to have Swift UI for the interface and swift UI app for the lifecycle for language. If you have these two options selected, there's only one swift because you can't use Objective-C or Swift UI. And then we don't use core data and we don't cover testing. But you definitely can check this. This will basically just create the targets for unit testing and UI testing. You can use this and mess around with the test or you can deselect it. This option won't really affect what you see in the course, so there shouldn't be confusion. What do you turn this on or off? But these are the settings that will get you as close as you can to the course that Let's click Next, and let's just save this into our folder here. So let's just take a look at the differences. You can see that in the project the way you'll see it in the course. We have our build Netflix project, and within that we have these four folders shared, iOS, MacOS, and products. Comparing that to the new project, this is what you will be seeing. You will see the project build Netflix two, and then you'll have two folders, one named after your project and one for products. So we can ignore products. This is not needed, but basically you just have one folder with all of your files in there. As opposed to the course, you'll see a MacOS folder and iOS folder and a shared folder. So to help clear up a little bit of confusion, all these folders within the project don't really matter per se. It's just a way of organizing your files. So even if you take a file and move it into Mac OS, it doesn't magically make that file only work for Mac OS. What really matters is this target membership on the side. So you can see this file is actually belonging to the target iOS and Mac OS. But it doesn't matter if it's in shared or iOS or MacOS folder. Target membership actually makes a difference. Now in your case when you create a new file here, you'll see that you should only have one target membership. So there should be no confusion there. And basically, you won't have an iOS or a shared folder, but you don't need one. You can have all of your files in the same structure just within this folder here. So you can, if you want to follow along a 100 percent with the course, you could just create a new folder called shared, a new folder called iOS and replicate this exact structure. So when you're following along with the course and it's time to create a new file. Just click on the Build Netflix folder instead of shared or iOS, make your new file there. So let's make our home view here. And you can see it's just within this large folder. And when we want to make a new folder, we can just do something like this. And so this is what it will look like. You'll have your folders here for home and model and search view all of your folders with all your views, not an iOS or shared. It's just going to be within this file here. And so this is what your structure is going to look like. All of your folders are just going to be within your project folder, not within iOS or shared. And once again, you should also be able to click on the file that is automatically generated. It's going to be the name of your project followed by app dot swift. This will have an AT main, same thing we have in the course window group of the content view. And then you'll have your content view created. And this you will follow perfectly with the course. We put our tab view into the content view. So just two takeaways from this video. One, if you're seeing app delegates and seen delegates, make sure you follow the settings on creating the Xcode project. And you create a project with the Swift UI app lifecycle that will make sure that you have this at main instead of an AppDelegate or seen delegate. And the second thing is when you create a project, you're just going to have one folder named after your project. And that's where all your folders and files are gonna go. You're not going to see iOS and shared. And when you're falling along with the course and you see me put a file into iOS or into shared. You know, you can just put it into your main folder and it's not going to make a difference. The content of the courses is still going to be worked perfectly. 3. Setting up HomeView: Hello and welcome to the first lesson. So as you can see, we have just created a brand new project in Xcode 12-bit item we selected to make an app. And this is the screen that we start with. This is the new Xcode 12 setup for Swift UI applications. So no longer are we setting a screen to the window in the app delegate or anything like that? We have this new window group and we set our first screen here. As you can see, we're loading up our content view. And this is going to be our content view with a preview here with the default helloworld. And then taking a look at Netflix, we can see that the first screen we'll start with is going to be our home screen. So we have a lot going on here and we're going to break it down into the smaller elements, just like you're supposed to Swift dry. So you can see we have the bar at the top with buttons to select TV shows, movies in my list. We have this large preview of whatever show Netflix's currently trying to promote at the top, we have some of these scrollable previews that are round. And then we go into sort of a very similar list, basically their categories. And then you can scroll through the movies of those categories. So we have my lives, criminal investigation, a bunch of stuff. We also have some other elements that are unique, like continue watching, which basically shows where you currently are in the show and has a big play button. And then we also get some of these auto playing video cells that auto play the trailer, I believe. And then they also have their own little buttons for playing and adding to my list. So what we're going to start with is building out the model for these scrollable movies here. So we want to just have a list of a bunch of movies on a home screen that are all square and allow you to scroll like this. And then the second thing we'll add is this larger preview and then we'll kinda just go from there. So what we'll do is we'll create a new file and make it a swift UI file, and we'll just call it our home view. So we want to have this and this is something new. Basically, we now have a wire and we have shared, but we also have iOS and Mac OS. So this is because Apple is pushing for developers to build for both iOS and Mac OS. And now with a new Xcode project, you don't create a iOS or Mac OS project, you just create an app. And this allows you to have shared code, iOS specific code, Mac OS specific code. So for this course, everything is going to go into the iOS folders because we are not dealing with macOS or shared in any way everything specific to iOS. So just to keep it clean in case in the future, you want to add Mac OS support. You will already have your project organized where this course is an iOS section and you can have your own code in the macOS. So select iOS creates and we have our home view will enable the preview. And what we can do is we can type. Welcome to Netflix, just so we can have something different here. And you can copy our home view. And if we go into the build Netflix app. And by the way, this file is going to be called whatever your project is with app after it. So my project is called Build Netflix, and this is gonna be called build Netflix app. And capitalization does matter, but this is all set up for you, but just know that yours might be different depending on what you've named the project, but you're just gonna go to the project name app dot swift. And so in our winter group instead of the content, you will actually just load our home view. So now this is going to be our entire application. So if we fire up the simulator, this is all we would see is this welcome to Netflix. And the first thing we're actually going to do is we are going to add a Swift package. So what we're gonna do is go to File. We're going to go to Swift packages, add a package, dependency package we're going to add is called king fisher. So I will have the URL posted under the lesson where basically you can read about what king fisher is and you can see all the information about it and the versions and how to use it and all the documentation. But essentially it allows you to very easily use networking images. So instead of having to build your own implementation of downloading images, showing, showing low wing loading indicators, caching those images from the URL. So you don't have to make network requests every time. All of that is built into king fisher. It's very lightweight, very easy to use. It supports with Package Manager so you don't have to deal with CocoaPods or anything like that integrating into your, into your Xcode project. So very easy, very nice, very clean. You can obviously use any other one that you would like if you have your own preference or something that you know how to use. But for this course I'm going to be showing king fisher. And also if you don't want to use king fisher and your application than any of our king fisher views can just be replaced with a traditional image view that you can be pulling from your own assets. So this is just so we can have a little bit more realistic towards Netflix. Netflix is not saving any of the movie thumbnails into your device. So we will just load them as if we're also doing some real networking. So for the version up to next major is fine. So for me it's just going to be less than 6. So this course should be good as long as you're also less than 6. If you are watching this a little bit later, you may have to do exact. And if you do exact, just do 5.14.1. And then you'll be able to have the exact same version as me to make sure there's no conflicts. But I'll just do up to next major. Click next. It will add our Package Manager. It will download it, I'll check it out from that GitHub. So the GitHub link is the one that I'll have below. And now this is important. King fishers kind of in the middle of a transition. So they're doing this dynamic library, standard library, static library thing. Basically, all you have to do is don't worry about any of the static or dynamic. If you just pick the regular one, which there's two versions, there's king fisher and king fisher Swift UI. And then there's just dynamic and state versions of those. But if you pick either one of these, you will actually use the correct one automatically. So don't worry about choosing between dynamic or static. So we're actually not going be using king fisher it with UI Kit. We're only going to be using Swift UI. This is a 100 percent Swift UI app. So we can uncheck king fisher and just have king fisher Swift you out here. Select Finish, and boom, you'll see something like this. You'll have a little bit of build and loading on Xcode. I'll just take some time depending on your spend on your computer specs. And then you'll see on the left we'll have our Swift package dependencies and we'll have king fisher here. So this will have all of the files 14 fissure. So for our home view, we are going to be showing our lists of movies. So we're going to create a small view where we can pass in a movie. And it's just going to render out a nice thumbnail image of that movie. So we have to do two things. First, we have to define what our movie is. So we're going to have a new swift file. We will call it movie, we'll have it in iOS. And this is going to be our struct, which is going to be a movie. So our movie is going to have a lot of stuff, but we're going to start with the very basics. So we'll have an ID just so it's identifiable, are going to need that for our lists and for Swift UI, this is a good idea for all of your model objects just to have an ID. One thing you can do if you don't want to assign an ID, you can just completely automate this by setting it equal to UUID dot UUID string. So what this does is anytime you initialize a movie struct, you won't even have to set an ID. It will automatically be set to a random UUID string, but you'll always be able to access ID. So we won't do that though for this project. But what we will need is a name. This is going to be a string, and then we'll also have our thumbnail URL. So this is going to be a euro of our image that we're going to use for the thumbnail. So that's really all we need to show our first screen of movies. We're going to add a lot of subsidies struck. For now. This is a very basics, so we'll start from here. So we're going to create a new swift UI view. And we'll just call this our standard home movie. So this is just going to be our standard movies, as you can see on this list, all of these squares, each one is going to be one standard home movie. So when we make a standard home movie, what we need is we're going to pass in a movie into this view. And you'll see why in a minute. But once we do that, our preview is going to complain that we're not passing in a movie and we're going to run into this a lot. Many are reviews are going to want a movie and then they're going to show information based on the details of that movie. And so for our previews, we're going to have to pass in an example movie. So I'm sure what that looks like if we create a movie here you can see we need an ID, a name, and a thumbnail. And anytime we make a view, we're going to need this. And another thing is anytime we modify this movie struct and say we add something new here, we're now going to have to go back to all of our previews and add that new parameter. One thing that we're gonna do is we are going to create a global version of our movies that we can use anywhere and they will automatically update. We just have to change them in one place. So what we're gonna do is we're going to create a new swift file, call it global helpers. And this is not going to be a class or struct, it's just going to be a bunch of static information. They're going to be global variables we can access from anywhere. Some of these are going to be for testing only that you would remove if you're going to be launching into the App Store. And some of these are going to be extension. So sometimes we'll want to have a small extension that will just drop into here because we don't want to have one new folder, one new file for every small to line extension that we add here. But what we'll do is we'll just say let's example movie one. And we will initialize a movie. And for our ID we'll just do that trick that I said UUID dot string. This will give us a randomly generated ID. For the name, will do dark, and for the thumbnail URL would do something a little bit interesting. I have a URL that randomly generates a image every time you access that URL. So for here we want to create a URL with the string initializer. And our string is going to be this URL right here. So it's picked some dot photos forward slash, and this is the actual size of the image. So we'll do 200 by 300. That's fine. Put an exclamation point here because we know this URL is going to work and this is just, for example, movie. So we can force unwrap this. And it basically this is just going to load up a random image. So what that means is your image might be different from my image. But this is enough to have an example movie, which means we go to our standard, I'll movie and this one's a movie. We can actually just say example, movie one. And sometimes it won't auto-completes. But if you go to the file and you do Command S, that will save it. So then, now it should be loading in autocomplete for the rest of the folders. So what this means is remember, now we're passing in this example movie one. If we ever change a parameter, we can just go to global helpers and we can add the primer onetime here. And we could have a 100 different previews and all of them will be using that new information. Now, let's take a look at using king fisher and let's display our image here. So to use king fisher, we first have to import it. And wherever there's king fisher, There's king fisher, Swift UI. We definitely want the swift UI module. And it's actually very, very simple to use. We use this image view and it has a couple options. We are going to choose just a simple URL. It's an optional URL, so you actually don't even have to force unwrap here, but we already know that URL we want to show it's going to be the movie thumbnail URL. So now if you do Command Option P, refresh your preview here. It could take a second to load because it's the first time we're using king fisher and your preview will actually be blank. What you wanna do is play the preview and that will actually fire off the network across by KF image. And you'll see we have an image. Remember that your image might be different from my image. It's randomly generated. And one more thing to keep in mind, king fisher is going to be automatically caching this image. How the caching works is when we've pasted this URL, king fisher assumes that this URL is going to be pointing to the same image always. So what that means is the second time we access this URL. King fisher has already saved that image in a cache, meaning it will not even make a network request, it will just get it from the cache. And so this is really good for working in the preview because it means you won't have to run the preview making that request every time, anytime you use this URL now, you will just load this image from the cash. The other thing to keep in mind is that means that URL will always point to this image now. So the URL is going to be always changing. If you go into a browser and you paste it in, you press Enter, you refresh, you'll get a different image. But since we're caching it, you always get the same one. But yours will most likely be different from mine. So this looks pretty good, but this is looking pretty good because the image is 200 by 300. Our image was a lot larger, like the Netflix preview thumbnails are probably a lot bigger and then they get resized. So we want to add a resizable, and then we want to say scale to fill. So now our image is massive. And what we're going to be doing is we're actually going to be relying on the parent to set the frame. So the standard home movie actually doesn't know how big it's going to be, which is why it's just assuming it's this massive thing. But what we can do is in our preview, this is how we're going to be using the view. We're going to be creating our standard home movie. We're going to be passing in a movie. And then with the parents, which in this case is this preview is the parents is going to be setting our frame. So when we set a frame, we're going to have a width and let's say we want to 100 and then we'll have a height, and we'll say 300. So it's the exact size that the movie actually is from the URL. But basically the parent is going to be in charge of setting the sides, meaning that we'll be able to use this view really in a lot of places in the app. And then we can customize the frame here. So you can also just set the frame here if you'd want to. And now would mean it would be a little bit easier because you would never have to set the frame. You can always just set the standard for movie here. But then now it also mean that if you do set a frame and say a width of 600 and a height of 600. Well, you'll actually see is the image doesn't change. So our standard home movie view will be this big, but our image will only ever get to here. So it'll be less code because you will never have to set the frame, but it'll also be a less flexible view. And we really like flexible views, so we'll do it this way. And that's all we have for our standard home movie for now. So we'll go back to our home view. And now we're going to want to show our movies. So taking a look at Netflix, it looks like the background is a basic black. So we'll start with a z stack, color dot black. And now we have a completely black background. We will add edges ignoring safe area. All. So what this is doing is this is setting this area up here and this area at the bottom to include that view. So the black is not just caught off at this frame here. And now we have some more setup to do. What we're gonna do is we're actually going to create a view model. And the view mode is going to manage more of the logical things we have to do. That's not directly related to actually setting up the views. We don't want our body to get massive with a lot of functions within the struct, doing a bunch of stuff. It would be a lot easier to create a new file, call it a swift file. We'll call it home VM for home ViewModel. Make sure it's an iOS click Create. This is going to be a class on VM. Now remember whenever we make view models, we want them to be observable objects. Make that right off the bat. So what we're going to be having is we are going to publish our movies. Now we're going to be displaying until the home view. And we will call these movies. And these movies are actually going to be a dictionary of strings and then an array of movies. We'll initialize it empty. And the reason we're doing this is because if we take a look at Netflix, we can see that this isn't just a list of movies. This is a list of movies organized By the categories. So we want to know which movies are in my list. We want to know which ones have the criminal investigation TV shows. We want to know which ones are linked to trending now. So the string is going to be our category. And I'll just mark that here so we're not confused later on. So what we'll do is we'll access the initializer here. And we'll run a function called setup movies. So there's going to be a function called set of movies. So this set of movies function will organize all the movies we have into the correct categories. So for now we'll start with one category. So we'll say movies at, Let's say trending. Now, what we can start with, and we will just put our example, movie one in there. So essentially all we have in these movies is just a key trending now and she's going to be an array with just one movie in their example, movie one. So there's going to be one more thing we'll have to do. And we'll actually take a look at the home view before we do it. So in the home view, what we wanna do is want to loop over each of our categories. So we want to have a foreach loop and we want to access all of our categories. And then for each category, here we want to basically have our category. So we want to have category in and within here, we can have a piece of text and just have the category for now. But how do we access this category? So you can actually do that in our ViewModel. So on our view model, we can just have a public variable, call it all categories. And it'll just be an array of strings. Each category has to shrink for now. So we'll open up our codebases. There'll be a computed property. So we'll say return movies, dot keys are going to access all the keys. And we want them to be strings. If we just access the keys, we get not a string, we get this. So we get a dictionary dot keys type. And what we can do is we can actually just map this into a string. So now this is basically just going into our movies dictionary accessing all the keys and mapping them, meaning we're looping over each key. And when we get to that key, that gets assigned into this dollar sign 0. So in here, think of a for-loop is going in here. So for what we're saying here is for each key in the movies dictionary, make sure you take that key, which is a temporary variable here called Tosh 900, and just initialize a string with it. And so basically our output. Of a map is going to be an array because we're looping over our elements here and applying something to each element. What we're applying is we're basically transforming it into a string. So our output is going to be perfect. What we need, it's going to be an array of strings. Now something new and Swift is you actually don't need to put this return. We can actually just say movies dot keys, dot map. Just one less word that we can use. It doesn't matter, but an older version of the Swift, you had to have return newer versions, you don't have to. So now when we go back, what we can actually do here is access our view models, categories, but we don't have the ViewModel yet. So we'll do var VM home ViewModel and we can just initialize it as a home view model. So you don't even need this if you don't want it. You can just say our ViewModel is our home view model. And now we can access v m dot all categories. One thing we do need is we have to identify each category. So we need this ID backslash dot itself. What this is saying is the for-each loop needs to know how it can differentiate between each and every category. So what's the difference between one category and another? And we're telling it that each category is going to be unique and you can just use the hash of each value. So basically, when we have two categories, it will just hash them and then the values will be different. And essentially it will ID each one based on the hash. So now we'll actually be getting our category in the loop. We should be able to refresh our preview. And what we'll see is a square, nothing on it. And our text reason we don't see it is the default text is black and our background is black. So what we can do is on our entire Z stack, if we set a foreground color of white, remember when you apply a modifier to a container, all of the children views get that modifier. Now the child views can also override that modifier. So our texts can have its own foreground color. We can say blue, and now it's blue. But without having any modifier, it will take the default of its parents. So meaning any piece of texts we have in here or anything, well, actually are always have a foreground color of white and less if we specify otherwise. So taking a look at Netflix, we now have the title. So it says trending now. But we want to push it more to the left. So what we'll do is we'll put this into an H stack and on the right of it put a spacer. So now it's all the way to the left. Now what we wanna do is under this, we actually want to have our movies. So we'll take this a1 times h stack, put that into the stack. And under this, we're going to have our movies. So for our movies, it's actually going to be a scroll view. As you can see, we can scroll left to right. So we'll have our scrollview open that up. We're just going to have our horizontal show indicator false. You can see there's no indicator that we're scrolling, which is that bar you get sometimes when you scroll up or down or left to right, we don't want that for Netflix. And if our content, what we want is for now we can just have text placeholder, that's fine. One thing we could do with a scroll view to make it a little bit cleaner is you can actually get rid of content. So if you take this parenthesis, remove it, remove the word content. You can actually close off the parentheses after shows indicators, and it works. Just one more thing you can move from the code. I feel like that will probably be removed as Xcode 12 gets some updates. By default, it probably won't add that content. So this is just a way to make it cleaner right now. Now if we play this, you'll see that the bottom parts actually scrollable and the top part is not because this is a V stack. So only the what's inside the ScrollView will scroll. And this is exactly the functionality that we want. So now let's get to showing the movies in our scroll view, we want an H stack because we want a lot of elements left to right. And in here we want a for-each loop and we want some data and some content. For our content, what we want to get is we want to get the actual movie. Because once we get the movie, then we can have our standard whole movie and pass in that movie. And so remember, this will be a list of the square images, will have to set a frame on this one. Otherwise, I'm going to be massive images. But we have to first figure out where we're getting our movies. So we actually can't just access ViewModel movies because this is a dictionary. We take a look at our home view model. This is a dictionary. This would return a value of string and then an array of movies. But what we can do is we can actually have a, another function here that helps us. We can make it a public function. Basically says get movie for category and we can just say forcats. And what this is going to do is this is basically going to take in a category and it's going to return an array of moving objects. We can just return movies at the categor