Transcription

Let's say we want to add a frame to this text here. So you've got frame and then look at all these parameters, but you see they're grayed out. And if I were to hit return right now, I wouldn't get any of those parameters. But now let's go back to that. If you hold option, now if I hit return, I get all of those. Maybe we don't want all of those. So we'll go back. Now what I can do with these shortcuts, say I just want min width and max width. I can start typing min, max, and you can see min and max got highlighted. Hit return. And now I have just those two parameters. Today's video is sponsored by Squarespace. Let's talk about the cursor. And first up is multi-line cursor editing. Let's say I want to make these three functions all private. Well, if I do control shift click to add a cursor wherever I like. So now you can see I got the cursor before each of those functions and I can type private. Great. Now they're all private. Now let's say you want to highlight vertically. Maybe I want to change all these publish bars into just let's for some reason. So if you hold option, drag down, you can see I have them all highlighted vertically and I can just type let. And now I have quickly made all of those let's instead of publish bars. Let's undo that with command Z. We'll undo my privates with command Z too, because that's messing up all the code. By the way, I'm using the project from my course called DubDubGrub, all about SwiftUI, MapKit, CloudKit. You can check that out at SeanAllen.Teachable.com. Now you may have noticed there's no code in these functions. And you see these little three dots. Well, that is called code folding. You see this ribbon over here with the arrow? If you click on that, that will expand the function. This is a nice way to keep your files clean should you want to do that. If you don't see this code folding ribbon over here, go to Xcode, settings, text editing, and you can see code folding ribbon right here. Also, you can hide your line numbers or show your line numbers. So if you don't have line numbers or code folding ribbons, that's how you turn them on. Okay. I'm sure you all noticed this is valid with 3D's profile. Well, that's obviously misspelled. Man, I wish Xcode would tell me when I misspelled things. Ah, it can. So if you go to edit, format, spelling, grammar, check spelling while typing, do that. And then now you see this red line. It's kind of faint on my screen, but that'll let me know like, hey, I misspelled valid. So let's rename that. But I don't want to just rename it here. I want to rename everywhere is valid is used. So if I click in here, right click, refactor, rename. Now you'll see the nice animation. Here's the original spot. Here are all the places it's used. And now I can fix that spelling error, is valid profile. Hit rename in the upper right. And now it renamed it everywhere it's used. Another quick way to rename situationally. Let's scroll down a little bit here. You see, we're creating this profile, a DDG profile, and then we're editing all the properties on this profile. Well, what if I wanted to rename this profile something that I got to fix it here, here and here and here? Well, you can do something called edit all in scope. And to do that, you do command control E. You can see I can edit now. Let's say I wanted this to be user profile. And you see everything within the scope where user profile is used. It is now updated to user profile from profile. Okay, let's do some simulator stuff. So I'm going to run my project and we'll go to my list of locations. This is restaurants around WWDC when it was in person. But let's talk about slow animations. So if you go to debug, slow animations, check that. Now this is a good way to debug your animations, right? So let's click on Chipotle. See the animation slowly coming in and you can analyze it. Let's click on a dummy user here. So dummy, you can see the profile slowly fading in and sliding from the right. We'll close it slowly fading out. So it's a great way to really look at your animation and see how they're behaving. So you can fix them, tweak them, debug them. Okay, so we'll turn that off. Now let's talk about recording your simulator. So you can take screenshots with this little camera up here. But if you hold option, you get the record button. So now I'm recording a video. I can navigate around, check out different things. Cool, hit stop. And now you have a video. But if you right click on this little preview, you see you can save as animated GIF, save to desktops, show in Finder. But that saved animated GIF is nice for your GitHub readmes or maybe your GitHub issues tickets when you're explaining an issue that's going on. So recording your simulator to be able to have a video or an animated GIF comes in handy. Another way to debug a view while the app is running, if you hit this little icon down here to blow up the view, give it a couple seconds. Now here's your view. And if you grab and twist, it's like a 3D version of your view. So you can debug what's going on. Over here on the left, you can zoom in, zoom out. Over here on the right, you can kind of peel away layers from the top or peel away layers from the bottom. It's a good way to debug what's going on with your view. So you can see how the view is structured. You know, maybe sometimes one view is on top of another view and that's hiding it. And this is a good way to discover it. Admittedly, there's a lot of confusing extra squares on here. But I have found many a UI bug by using this 3D version of my view and seeing how things are laid out. All right, we'll stop running this. And this has all been simulator stuff. But let's talk a little bit about running things on your device. So you can actually run them wirelessly. So if you go to Window, Devices and Simulators, make sure you have your device plugged in. So you see I have Sean's iPhone 12 Pro. And you see this little checkbox here, Connect via Network. You click that box. And then now, whenever you are running your app on your actual device, your phone will still show up. You see my actual iPhone 12 Pro, even if it's not plugged in. As long as you're on the same Wi-Fi connection, you can run your app on your device wirelessly. Shifting from the simulator, let's talk SwiftUI previews. And one of my favorite new additions in Xcode 14 is the variants of your SwiftUI preview. Here is that profile modal that you saw when I slowed down the animations. Click this grid looking button down here. And you see color scheme variants. Great. Now I can see it light and dark mode. I'll make this a little bigger. Cool. Other variants. Orientation variants. Okay, cool. I can see it landscape left, landscape right. Looking good. Let's go to the other variants. Dynamic type. Here's the great one. Because look at all the different ways you'd have to run your app and test your app. We're not obviously supporting dynamic type on this specific screen. In this course, we do support dynamic type, but we only do one screen because it is pretty time intensive. This is not one of the screens we did. But you can see how your view will look in all the different variations of dynamic type and see where you need to put in the work. Okay. If you click the button next to that, you go back to your normal view. So let's talk about another SwiftUI nice thing in Xcode 14. And that is automatic indent when you type a curly brace. So let's say we want to put these two texts into an HStack within our VStack. So I have them highlighted. And if I just type my curly brace, you can see them automatically get indented. And then all I got to do is type HStack and bam, they're in an HStack. That automatic indention, that's a lifesaver in SwiftUI. Because before that, oftentimes, you know, you would have, I'm moving my HStack and my curly braces and my text. Oftentimes you would get like all out of line like that. And your curly braces would be all messed up. It would take a while to go back in. Well, quick little shortcut to fix that is if you highlight a chunk of code that, you know, is misaligned, hit control I. And as you can see, that will move them nicely back to how it should be structured. All the indents, all the curly braces in the correct spot. And speaking of curly braces, an easy way to understand the scope of it is to, well, one, when you click on the lines, I'm clicking on line 34, and then you notice on line 19 that it lit up. Watch line 19, it lit up yellow real quick to let me know what the scope is. Another way to do that is hold command and hover over it. So now look at line 34 and 19, right? You see them highlighting. This is a quick one, command plus or minus to make your font bigger or smaller. So obviously I have to have my font blown up for the video. So this is super helpful for me. But yeah, if you want to make your font bigger or smaller, you're trying to make it fit on a smaller laptop screen, super handy. This text is our first and last name of our profile. Well, if I command click on the text, you can see a bunch of options, right? Embed in A-Stack, embed in V-Stack, embed in a list. Well, I want to extract subview. Let's say I want to refactor this text out and call it, let's go down here. By the way, it always goes to the bottom and you see it called it extracted view. Let's say I want to name this name text view. And you can see it's gonna, I'm gonna need a profile. Can I find profile and scope? So we'll say var profile is of type DDG profile. It's quick little refactoring. But what's nice is it refactored out this view into a struct. And then now I already have it. It's called extracted subview. Remember this is now named text view with a profile that I pass in a profile. But now that was a very quick refactor. Now let's say I don't have time to refactor the rest of this, but I also don't want to forget about it. Hashtag warning. You see what the message say refactor this later. And then now what you'll see is this is now showing up as a warning and you can go to your warnings list over here on the left, refactor this later. So it's a nice way to leave little to do's for yourself. And then look at all your warnings to see, you know, what you need to go back and fix. So this is how I leave my to do's. Now, let's say you get interrupted and you have to go to lunch or you're to a meeting and you really do not want to forget what you were doing. So you can also make this a hashtag error and say, you know, this must be done. So now instead of a warning, it's an error. So now when you come back to your code, you can't even run your project, right? You'll get a build failed. So this is a giant red alert to let yourself know something. And again, I use this when I get interrupted, I'm gonna go to a meeting, having to go on a call. Maybe I just have to drop my code for an emergency. I always leave a quick little error to let myself know where I was and I cannot continue past this one point. So we'll go ahead and delete that error and then quick little shortcuts. So sometimes errors won't go away or maybe you lose your syntax highlighting. Well, the error just went away, but a nice little handy shortcut combo is if you do command shift K, you see clean succeeded. So that cleans your build folder and then do a command B, you'll see build succeeded. That will rebuild your project. So again, if Xcode is acting funny, errors won't go away. The old clean and build will clear up the issue more often than not. Speaking of builds, if you have a large project, build times really become an issue. So it's great to be able to see your build times right in Xcode. In order to do that, it's a quick little command in terminal. And I'll have this in the description that you can copy and paste. So paste that in there. You see defaults, right? Com.AppleXcode, show build operation duration. Yes, so hit return. Now it does that. So now in Xcode, when I do a command B, you'll see in the upper right, 0.051 seconds. Now, of course, this project is super simple and I'm on an M1 Mac, so that is expected. Of course, a larger project will take a little longer, but if you really wanna dive into the build process. So now I'm gonna clean and build again. And if we click this icon on the right, you can see my latest build was 1054. Click on that. Now you can see, well, it automatically showed up. Let me undo that. I think I was messing with that before. But if I right click, show in timeline, you can see here is my build being compiled. And if I hold option and zoom in all the way, so you can see that is how all the time of my build is being spent. So you can really dive in to see what's going on with your build. Now I do have the creator view build up here that you can see. This is probably more in depth, one of a larger project of what's going on. But you can see that build took like 10 seconds. And again, you can dive in like, look, oh man, compile asset catalogs. That is taking 4.28 seconds. Maybe I should dive into that and see what's going on. See if I can optimize that a little bit. So again, a nice way to analyze your build, maybe see what's taking so long. If you think it's taking longer than it should. Showing build timeline is new in Xcode 14. Okay, back to dub dub grub. Let's get out of this build timeline. Let's go to our assets. So again, new in Xcode 14, you can have single asset for your app icon. As you see here, we used to have to create different app sizes in a design tool, import them all. It was super tedious, super long. Now, if you open up the right panel over here in the attributes inspector, you can see iOS all sizes Xcode 13. That is old. If I do single size. Now, as long as you have a 1024 point image, Xcode will scale that down to the proper image sizes. So no more importing 20 to 30 different app icons. Let's talk about test flight feedback right in Xcode now. Again, this is also new in Xcode 14. So window, organizer, feedback. You see this feedback tab. Well, dub dub grub beta was never up on test flight. So let's go to creator view iOS, which was on test flight. As you can see, you can switch to multiple apps, multiple platforms. So creator view iOS, you can see the screenshots they took. If I click on one, you can see any notes. You can read anything. You can email the person if they left their email address. You know, email rich aesthetic. There you go. I can email them and say, hey, what's up? What happened with this? So anyway, test flight feedback built right into Xcode. Super convenient. Next up, are you tired of seeing this pop up every time you uploaded the app store or test flight? Well, there's a way to make that never show up again. So if you go into your project here, go into your P list. So it's info. Now it's up here in the top. And then you can add a property on your P list. We'll say app uses. And you see non-exempt encryption. Click on that. Hit no or yes, if it does, you know, whatever yours is. But now this will automatically answer that pop up. And it won't show up when you upload to test flight. I got a few more for you. But first, let's hear from today's sponsor, Squarespace. Squarespace is an all-in-one platform to help you get that iOS developer portfolio, blog, or personal website up and running very quickly. Now, I know we're all developers with the skills and the desire to build a web page ourself. But I would argue there's an opportunity cost to your time. If you're an iOS developer trying to build a great product, a great app, maybe spending a lot of time learning the ins and outs of web development, responsive design isn't the best way to spend your time. That's why I recommend Squarespace to build that personal website, the blog, your portfolio, or maybe a landing page for your app. They have all kinds of beautiful themes and templates to get you started, to handle all the analytics and the SEO for you. Again, it just saves you so much time so you can get back to doing what you wanna do, and that is building iOS apps. So when you're ready to get started, go to squarespace.com to start your free trial. And when you're ready to launch, go to squarespace.com slash Sean Allen to get 10% off your first purchase of a website or domain. To show you the last few tips, I'm gonna use my Cloud Kit Manager file. But I wanna navigate there quickly. So if you do Command Shift O to open quickly, you can type whatever file you're looking for. So I can go Cloud Kit Manager, boom, there it is. Before I go there, you can also search by method. So let's say I wanna find create user. So I'll type in create, and you can see all the methods, right? Create profile, create profile record, create voiceover summary, anywhere reason create. So you can search by method name or by file name. So we wanna go to the Cloud Kit Manager, hit return, there you go. I'm in the Cloud Kit Manager. I get asked about this theme all the time, the black background, the different colors. So to change your theme, go to Xcode, settings. You see the themes tab here. And here's a list of all the themes. You can see my themes changing. So cool, you can pick one that you like. Again, I pick midnight, but you can also customize every little thing. So for example, I customize my comments to be gray. By default, these are gonna be bright green like these, but look at my code here. I like my comments, comment. I just don't like them to be dominant. I like them to be visible, but I don't want them to be too loud. Back to the settings. So you can change the color of each individual thing, strings, numbers, all this stuff. You can change the font. You can change the font size. So you can super customize your theme to be whatever you want. Okay, let's talk about documenting your code a bit. So let's get rid of that comment. Let's scroll down and do a function with parameters. Cool, get checked in profiles. If I click in the function name, do command option slash, you can see it gives me some built-in documentation. So I wanna describe what this function does. It retrieves checked in profiles. I'm doing this super quick for the video. Of course, you would be more descriptive to help other programmers that are using your code know what's up. Hey, it takes in one parameter. If there was more parameters, it would list more. What does this parameter do? It's the location ID for the food place. And then this returns, you can look at your function. It returns an array of DDG profiles. So you'll say it returns a list of users checked into the food place. And here we go. Here's our spell check again. I saw that red line pop up. I know I misspelled that, great. Again, I typed something real quick. You would wanna be much more descriptive in your documentation. Speaking of documentation, say you're new to a code base and you're not super familiar with CloudKit. So you're like, what is a CK record? What is a CK record ID? What is a CK record dot reference? If you hold option and click on it, you can get Apple's documentation. Hit this little button to see it bigger. That's like a preview. Okay, CK record dot reference. Here's everything you need to know about a CK record dot reference and all that stuff, great. Option click into CK record dot ID. Open developer documentation. There you go. Here's all the documentation on CK record ID. It's not just a description of what it does. It shows you how to initialize it. If there's any like methods or properties on it, it will list them here. So again, when you're trying to learn a specific function or specific code, option clicking into it and reading Apple's documentation, super helpful. Let's show the mini-map. So up here on this icon here where you show your SwiftUI canvas, you can hit mini-map. Now this is a mini-map of your entire file. So if you have a really large file or maybe your font is super zoomed in like mine is, as you can see, as I'm hovering over this, it is showing me the function name. That's the function name, the function name, function name. So quick way to navigate around your big file should you want to, that is the mini-map. Okay, let's get rid of the mini-map because I need some space here. So mini-map gone. Let's talk about multiple editors because especially when you have a big monitor or multiple monitors or an ultra wide, this is a lifesaver. So if you hold option and click on a file, it's going to open it up in the assistant editor. Well, this one has a SwiftUI preview, so that looks a little cramped. Also looks a little cramped. I'm going to do command minus because again, my font has to be blown up for these videos. But right now we're not talking about code. So I'll make it as small as it normally is when I'm coding. Okay, so that's two editors. Great. Let's say I wanted a third. Hit this little button up here to the right. That pulls up a third. Great. Now, if you hold option while hovering over that, you'll notice the icon change. You can have a horizontal and vertical editor. So if I'm going to hold option, click it. Now I get a horizontal editor below that. So again, this is a great way if you have a lot of screen real estate to see multiple code files open at once. And let's say you want to open up a new file. If you hold option on that new file, you get to pick where it goes. So I'm hovering over each one of these quadrants. And then you see, if I put it in the middle, that will open up a brand new one. Let's say I want to put it in the middle. There you go. There's that file in the middle. Now let's say you're working on a laptop and you want to go to full screen mode to get all the real estate you can. So hit the green icon up there to go into full screen mode. Get rid of the left panel. Get rid of the right panel. You need all the screen real estate you can get. When you're in this full screen mode, this is great for laptops. Again, if you just hover over to the left, your navigator will pop out. If you hover over to the right, that right pane will pop out. So again, great way to save space and only have this stuff showing when you need it by hovering.