0 1 00:00:00,390 --> 00:00:06,540 Hey, guys. In this lesson, we're gonna be taking a look at one of the other big announcement at WWDC 1 2 00:00:06,570 --> 00:00:10,380 in 2019 which is Project Catalyst. 2 3 00:00:10,440 --> 00:00:16,560 Now, Project Catalyst used to have the codename of Marzipan which is where you might have heard of it 3 4 00:00:16,680 --> 00:00:19,020 on blog posts and on the internet. 4 5 00:00:19,410 --> 00:00:27,330 But the idea is that there are so many iOS developers making wonderful iOS apps that work on the iPhone 5 6 00:00:27,330 --> 00:00:32,150 and the iPad. But the Mac App Store is a little bit lonelier. 6 7 00:00:32,550 --> 00:00:41,850 So why not bring UIKit which is the big framework that lets us build iOS apps and bring it over to 7 8 00:00:41,880 --> 00:00:42,910 the Mac? 8 9 00:00:42,900 --> 00:00:51,510 So this way you should be able to simply check a tick box in Xcode and be able to create a macOS 9 10 00:00:51,510 --> 00:01:01,470 app from your iOS apps that you've already developed, and be able to run it as a Mac app. So that's what 10 11 00:01:01,470 --> 00:01:02,960 I want to show you in this lesson. 11 12 00:01:02,970 --> 00:01:05,830 So let's get started. 12 13 00:01:05,850 --> 00:01:11,640 Now, I'm going to take the Hacker News app that we developed in the last lesson and I'm going to turn it 13 14 00:01:11,820 --> 00:01:14,050 into a Mac app. 14 15 00:01:14,250 --> 00:01:20,370 And the first step is we have to go to the settings of the app. So clicking on the Hacker News' 15 16 00:01:20,370 --> 00:01:27,570 blue icon project in the file inspector, and then going to the targets in this left-hand side pane. 16 17 00:01:27,570 --> 00:01:34,740 And now we're going to click this magical checkbox, and as it notes here, you have to be on the latest version 17 18 00:01:34,800 --> 00:01:36,360 of macOS Catalina 18 19 00:01:36,360 --> 00:01:38,340 for this to actually work. 19 20 00:01:38,340 --> 00:01:43,890 So let's click on this and go ahead and click Enable. 20 21 00:01:43,890 --> 00:01:49,980 And now we have to go to our signing and capabilities because whenever we want to deploy an app to a 21 22 00:01:49,980 --> 00:02:00,670 physical device such as an iPhone and iPad, or in this case, our Mac, we have to provide a signing certificates. 22 23 00:02:00,890 --> 00:02:03,620 So go ahead and sign in with your Apple ID 23 24 00:02:07,120 --> 00:02:12,580 and you should now be able to select your team in the team dropdown list. 24 25 00:02:12,670 --> 00:02:20,770 So, now that I've signed my app and I've checked off my Mac capabilities and the Mac has been selected 25 26 00:02:20,890 --> 00:02:25,030 as the target up here, I can go ahead and click Run. 26 27 00:02:29,540 --> 00:02:30,830 And here it is. 27 28 00:02:30,830 --> 00:02:36,000 Here's what it would look like on the larger screen size of a Mac app. 28 29 00:02:36,020 --> 00:02:39,410 I've got all of my news pieces loaded up on the left here. 29 30 00:02:39,590 --> 00:02:46,530 And if I click on one of them, it brings it over to the DetailView on the right-hand side here. 30 31 00:02:46,820 --> 00:02:54,320 And once it loads up, you can see that I've got my web view showing the actual article. 31 32 00:02:54,350 --> 00:02:56,110 So pretty neat, huh? 32 33 00:02:56,120 --> 00:03:03,620 Now, if you're wondering if this is only possible for apps built with SwiftUI, fear not, it's not. 33 34 00:03:03,710 --> 00:03:10,400 Underlying mechanism actually relies on UIKit and it's through porting UIKit over to the Mac that 34 35 00:03:10,400 --> 00:03:15,710 allows us to run and build our iOS apps onto the Mac. 35 36 00:03:15,710 --> 00:03:22,460 So here, I've got the claim a project that we created a little while ago and I'm going to show you that 36 37 00:03:22,460 --> 00:03:24,450 we can do exactly the same thing. 37 38 00:03:24,470 --> 00:03:32,120 So, again, I'm gonna check off the Mac tick box. Click enable, click signing and capabilities to select 38 39 00:03:32,180 --> 00:03:34,190 my development team, 39 40 00:03:34,190 --> 00:03:36,050 and now I'm going to click on Run. 40 41 00:03:40,520 --> 00:03:46,880 and once it runs, as long as you've still got all of your constraints set up properly, it should try and 41 42 00:03:46,940 --> 00:03:53,870 fill the screen even though it is a different size and aspect ratio, so you can adjust your window as 42 43 00:03:53,870 --> 00:04:02,720 much as you like, and you can see that we've got our Clima app and our Clima apps menu, such as File, 43 44 00:04:02,780 --> 00:04:08,540 Edit, Format, although none of these things really do vary much in our app at the moment. But you can see 44 45 00:04:08,540 --> 00:04:16,580 that if I search for the weather in Paris and hit enter, it will automatically change and update our 45 46 00:04:16,580 --> 00:04:23,630 weather. Still using all of the underlying capabilities that we built with UIKit. And you can even see 46 47 00:04:23,630 --> 00:04:32,330 that it's put at the app icon into the dark using that same icon that we've provided for iOS as the 47 48 00:04:32,330 --> 00:04:40,590 macOS app icon. So this is a really cool piece of technology because it makes it so easy for us to build 48 49 00:04:40,620 --> 00:04:47,090 apps for iPhone, iPad, and the Mac, or just using a couple of checkboxes. 49 50 00:04:47,130 --> 00:04:54,350 So I hope you enjoyed working with SwiftUI and learning from these lessons. As new things come out, 50 51 00:04:54,360 --> 00:05:01,050 I'll update the code and notify you guys about any breaking changes. But that's all for me in this lesson, 51 52 00:05:01,050 --> 00:05:03,520 and thanks for coming along with me on this ride. 52 53 00:05:03,600 --> 00:05:05,130 I'll see you on the next lesson.