Mobile Development - The Complete iOS Developer Course ✅

1. M1 1 Introduction: Hi there. My name is Grandpa Matus and I I'm a professional app developer and teacher, and I want you to be a professional app developers to in IOS 11 Now this course is aimed at new and slightly experienced developers. But just to be clear, you do not need experience to take this course. That's because I explained everything clearly as we go. We're going to cover pretty much every topic there is to cover for IOS. And I have only one goal, and that's to make you an advance developer capable off creating your own APS or applying for those six figure development jobs. I want to make you a well rounded machine. And to do that, here's a little snippet of what we're going to cover. First of all, we'll look a basic swift for which is the basic programming language that we need for IOS 11. It's similar to Swift three, but there are some slight changes we need to be aware off now. Asked him doing this, I'm also going to be teaching you solid programming principles so that you can move on from swift to see shop Java or any other object oriented language. and you'll feel right at home. After that, we'll move swiftly on to creating your very first up because, let's face it, that's why you're here. Following that, you'll learn how to correctly designed for user experience in sort of the I A West End play . You'll also learn how to create great user interfaces, and then we'll move on to creating many, many different APs so I could teach you things like animations. Internet Resource is rest AP eyes and so, so much more in between all of those. I'm going to give you a little bit off advice on how to be a freelancer and entrepreneur or how to get those haloed six figure development jobs now coming back to the apse. Every time you create a new app on this course with me, you'll learn a new concept, and I've constructed this course in such a way as to introduce new things bit by bit. I'll even challenge you with short and fun homework tasks designed to get you thinking like a professional. Now I promise I will never introduce complicated concepts before I show you the basics that you need. In that way, you'll stay motivated and happy like this lady on the beach. I guarantee that you will not want to put this course down. Now. Bear in mind that this course is always a work in progress. It's never really finished. I keep adding new stuff every couple of weeks, so there's always something new and exciting toe learn. So now that you know what this courses, who it's fork and what you'll learn, you are ready to start your engines and lift off on a brand new development adventure. 2. M1 2 How to Get The Most From This Course: he is just a quick couple of tips that will take less than a minute on how you can get the most from this course. After all, you've paid your money. Now you should get your value. So I'm gonna help you do that with two basic rules. When you take this course, the 1st 1 is to complete each section in one. Sitting all the way through. This allows you to get a good overview off the subject at hand. Please do not skip anything unless you already know it very well. The second and final role is simply to follow along. Whenever you see this screen, that's pretty simple enough. So when you see that, open up your ex code and follow along now, why do you need to follow along? Well, because pretty much everyone learns best by doing I'm no exception to that rule. I have to do it in order to learn it. Just watching. Just it means nothing actually goes into my head. So when you see that screen, open up eggs code and do it with me 3. M2 1 Introduction to Setup: right here we go in this module, we're going to set up our development environment now. This was recorded when X Code nine was still in Peter. So these instructions may change just a little bit. Let me know if they do, and I will correct the lectures as soon as possible. If I haven't already done so in this section, we're going to be installing our development environment, which is X code nine X Code nine includes Swift for as the default language and should include IOS 11 simulators by default. If it doesn't, I'll go over how to install those. We're also going to look at how to install IOS 11 beater on your device. Now I would advise that you do this on a device you don't use on a day to day basis. Otherwise you you might be in a bit of trouble when things don't work is planned. That's why this software is called beater. Now, if anything goes wrong asking me a question or even better, ask on the Apple developer forums or on stack overflow. Chances are much fire there. That someone hell's has actually have the same problem is you and you'll find solution simply by searching, and you'll get it in 30 seconds or less. 4. M2 2 How to Set Up Xcode 9 Swift 4 and the iOS 11 Simulators: in this lecture, we're going to look at how to set up X Code nine beater and swift for that comes with it. So to begin, to open up a browser and head on over to Google. Once you've got your browser open, simply search for Apple developer or Apple Death. If you're too lazy to type the whole thing like me, click on the website that comes up the very first result, and you want to go to the account link at the top right now, I should be already locked in. I am if you are not already logged in. If you're not already an apple developer, the screen that comes up, we'll ask you for a log in or a registration. Go ahead and register. This part of the developer program doesn't cost anything. That may change in the future, of course, but for now it's free, so you're okay to register. You can also use your I D from your Apple Mac, your Mac book or wherever you use, or your iPhone. For this part, all of the I DS are usable in the developer account, so once you're logged into this account section, we against the scroll down and go to downloads. And this is where Apple stores the magic. There we have X Kurt nine Visa. We have the latest Macro West, which we're not going to touch, and we have the IOS 11 beta now. This will allow us to install on your iPhone that we're going to do a bit later on from now . But for now, let's simply gets the X Code nine beater. Download it and it's quite a large file. I think it's around four ish gigabytes, so let's wait for that to finish. All right, that is now completed. Now, one thing to note is, when it downloads, it should automatically decompress itself from the ZIP file. The X I p file. I'm not sure how to pronounce that, and that takes a very long time to don't worry about that, because if we look at the stack overflow post, it tells us that this could take up to 30 minutes. Obviously, if you have a faster Mac, it will be much, much quicker. Now, if you have trouble with extracting it and it's been over an hour or so, then you may have an issue with these signatures because what your Mac is doing is it's checking the signature from the file to make sure it is actually where it says it comes from. So you don't install any malware on your map if you want to. You can disable the signature check, but I wouldn't advise it. I would advise just trying to unzip it the proper way. And when it is on six, you will have this X Code dash beater. All you have to do then is click and drag it into your applications folder. Go into your applications folder type ex coach, and then you can open that up. Now there are probably going to be a few steps that you have to go through like agreeing to certain licenses. You will have to enter your password so X code can install itself and set up everything that it needs. Once complete X code will probably shut itself down, and you have to open it up again. When you do, you should be presented with a lovely welcome screen and just make sure there is a beater in that image. If you're still on the beater, if you're not still on the beater, and you've downloaded X code via the APP store, then it shouldn't have a beater. Obviously, it should just be X code. Nine. There we have our identify it down here. Now bear in mind. If you are in a different version of X codes, you might be on nine point Obita and have a different identify. Then there might be some very, very slight differences. It's pretty unlikely, because X Code is pretty mature at this point. But if there are, then drop me a question and I will address it for you. No problems, right? The next task we have to do is set up our simulators now. It's been a while since I've done this, so let's see if I can remember. I believe it's under window devices and simulators, and it tells me I have an iPhone connected. If you have your iPhone connected or iPad, then it will tell you that that's connected. Were not interested in that. For the moment, we want to click the Simulators tab, and it tells us everything we need to know about the Sims that are installed. So if I scroll down this list and I look at the details. So here we have. I was 11. Our simulators are already installed. Now, if for some reason these aren't there, then go down to the bottom left corner and hit the plus icon. It will ask you for a name for simulator, and you can add any conceivable device that you know off. You can even have apple watching this, and then you can adds the OS version. Now, at the moment, this is the very first version of IOS 11. Later on, you'll have different ones to choose from. Let's say you want to test on IOS nine, for example, because it's a good idea to support one or two generations behind. You can simply click, download more simulator run times and there we have every simulated you can think off and you can see Apple also sticks to that idea of being too, actually, three versions behind. So we got Iowa's eight available to us all the way up to IOS 11 which we have installed so you can go ahead and download those if you must. But this is an IOS 11 course, so we don't need that. So if all of that's working, then we are good to go so you can close that and we'll move on to the next set up lecture 5. M2 3 How to Install iOS 11 Beta on your iPhone or iPad: now, throughout this course, we're gonna create APS that will primarily run on the simulator, but sometimes will create an app that needs a special things available on your device touches a cellular network and things like that, and certain things in IOS can't really be simulated. You need a real device, so if you have a spare advice, then you can install IOS 11 beater. Now bear in mind it's a beater, and that means things will break. That's why I say Use a spare device just to test it out. If you don't have a spare device, then it is totally up to you if you want to install it on your main device. But prepare to be frustrated when certain things don't work. Okay, now that I've said my piece, let's look at how we install IOS 11 on your device. Grab your device and you'll see it's very, very easy with your device open and unlocked. Open up safari and in a new tab, head over to pita dot apple beaters dot co ford slash i o. Yes, when you hit go, you might be presented with a screen. If that happens, just hit, refresh and you should get a profile installation. Make sure this is verified from Apple. So you don't install any malware and then simply click in, store into your past coat. And when that's done, get install and consent to everything that comes up. I'm not going to click that right now. Otherwise my recording will stop. And once you've restarted it, and with the magic of screen and editing, you can see I've restarted mining a few milli seconds. All you then have to do is head over to settings, go down to General and then inside of here. We want to find our software update, which should be near the top. It will check for the update and tell you there is an IOS 11 update available. All you have to do is click download in store, agree to everything and then wait a good 10 20 minutes for that process to complete. Once it's done, I'll come back and show you what that looks like. And here we have it. The brand new IOS 11 on my iPhone seven. There are a couple of changes. You can see the icons that kind of rounded, and if we swipe up that's completely changed, but I do kind of like it. This brightness and volume is really accessible now, whereas before it was a bit fiddly to actually access. If we swiped down, we see some neat animations actually like that. It blocks out the background, looks very nice. Scroll over its and news and whether very smooth. Quite it's a bit more smooth than IOS. 10 was when that first came out is beater so overall so far, I'm impressed. Are you impressed? Do you like the new look If you do, please comment. If you don't believe comment as well, I want to get a whole range of opinions on this. 6. M3 1 Basic Swift 4 Introduction: already. Here we go. We're gonna learn some basics Rift for And this is just a short overview off what you're about to learn now. Swift for is obviously Apple's shiny new language for creating absolutely devices and on Mac OS. And as you might guess, it's now in its fourth version. And before that, we actually had swift 3 to 1 going back in time. And the original, of course, was objective C. Now, if you worked Objective C, you'll know that Swift is a lot easier to use and understand and mostly easier to read. Now it's important to know that Swift for is mostly compatible with Swift three. So if you have an existing project in Swift three, you can create different frameworks in Swift for and you can mix and match the two, and you can sort of migrate each framework up to strip for from Swift 31 at a time to check that everything works. There are a few exceptions, and we're gonna note those as we learn throughout this course, but I'm not gonna concentrate on it too much because you're here to learn swift for and obviously not swift. Three. Now Apple has promised that this is stable now, and since with three, the changes are only minor. So if you're sort of familiar with Trip three, you should be good to go now, getting down to the meat and veg of the matter what we're actually going to learn in this section. Other basic swift for concepts, concepts such as variables. Where do we store data in our programs? We'll look at loops going round and round a raise where we start sets of data will look it functions, classes and how to organize them. We'll also look at objects which are created from classes, and if you don't know what that means, it doesn't matter, because I'm going to show you well, look at operators and inheritance and probably a few more as I continue to develop this section. Now, what's important for you guys to know is that when you know these things and a few others, then you're good to go with any object oriented language. You just have to learn how that different language likes to constructed items, and it's it's particular syntax and language to the good news is by learning script for your already becoming a multi tooled programmer. Right? So by the time we're done here, you are gonna have a great swift tool set, and that's going to give you the ability to start creating your very own APS. 7. M3 2 How to Use a Playground in Swift 4: Welcome back now. Obviously, we don't want to start learning to code from the context off within an app we're creating. It's kind of a horrible way to do it because you have to re compile the app every time you want to test your code. A much better way to do it and this is a fantastic X Code feature is to use playgrounds. Playgrounds allow you to mess around with the programming syntax and structure and discover what's happening immediately. Playgrounds are a little bit limited. You can't do everything in them, but they're perfect for what we need to do. So open up your ex code beater or ex code nine. If you're watching this when it's released and follow along with what I'm doing right with your ex code beater open, simply click Get started with a new playground. It's the first option in that menu. If this screen doesn't appear because maybe you click this button by accident, simply deal to file the new and playground or hit that e combination. And once it loads up, it asks you, Do you want to do IOS, TVO s or Mac Os? Well, obviously we want IOS But in reality, there's no a lot of difference between them when it comes to playgrounds. As long as we're keeping it simple so we can have a blank won a game, A math of single view. I think we'll just go for blank. And when you do that, it asks you where you want to save it. So I'll just say that on my desktop it may ask you if you want to enable developer mode, so go ahead and enable That's put your password in if it requests that. And there we have our playground up and running. Now, if you excuse me for a second, I'm just gonna improve this font size so you guys can see it better, right? With your ex code beater open, simply click Get started with a new playground. It's the first option in that menu. If this screen doesn't appear because maybe you click this button by accident, simply deal to file the new and playground or hit that e combination. And once it loads up, it asks you, Do you want to do IOS, TVO s or Mac Os? Well, obviously we want IOS, but in reality there's no a lot of difference between them when it comes to playgrounds, as long as we're keeping it simple so we can have a blank won a game, a math of single view. I think we'll just go for blank. And when you do that, it asks you where you want to save it. So I'll just say that on my desktop it may ask you if you want to enable developer mode, so go ahead and enable That's put your password in if it requests that. And there we have our playground up and running. Now, if you excuse me for a second, I'm just gonna improve this font size so you guys can see it better. And there we have it. Our playground is up and running. Now. I want to draw your attention to just a couple of things before we go on to the actual next lesson. The first thing is this at the top here is in green. That's because this is a comment. A comment normally starts with two forward slashes. There are other ways of making comments, but to force lashes is the standard way or the quickest way. A comment isn't processed by your program, so the program completely ignores them. And when you're program compiles itself, the comments don't get included below that, any line that doesn't have any commenting double slashes before it is a bit of code. So to understand what these two lines of doing, let's move on to the next lesson. 8. M3 3 Variables in Swift 4: So building block number one. These are variables. Variables are the little bits of data that make up your program. Your app, whatever you are coding for, they're the things that hold the little bits of data like strings and the strings Just say a word or letter or a character. They hold numbers and there are different kinds of numbers interred your floats, etcetera. Don't worry about what that means. Now I'm gonna take you through it nice and simply. But more importantly, I want you to understand that a variable can be anything. Anything can be stored inside of the variable. So I want you to think of a variable as a little box. And inside that box we've put something data related or something related to our program so that we know where it is and we know what it is. And we know what kind of thing it is later on, when we need to use it. So that's enough preamble. Let's open up an ex code playground and follow along with what I'm doing right here. We have our little playground. Now we're gonna talk about variables. So for now, we're going to ignore this first line. I will come back to that in due course. We are going to look at primarily this line. Var str equals Hello, playground. Now the first thing to note is on the left hand side. We have this word of our virus simply shorthand for variable. Now, normally, we have to say in a programming language what kind of variable we want to store. And in this case, the kind of variable restoring is called a string. A string is simply a collection of letters, numbers, characters. So you might be asking, How does X coat know that this is a strength? Well, it's clever enough to figure out because you've put a couple of quotes around your variable X code infers that you have a strength eso var is just kind of shortcut that a lot of programs use. Now, if you want to make it really obvious that this is a string, all you have to do is put a colon and then type string after Hvar s. Yeah, and that's tells ex coach, this is definitely a strength. So if we look at this now and I try to type something like my name without the quotes, X code will get an error and it will say expected initial value after equals. We'll get into what that means sooner or later, but this is an error. It's going to go wrong. I'm just gonna undo that by his in command, said. So we have our original string on screen, right? What's important to note is that once we've created this variable and we've assigned a type to it type is just the type of variable that it is, then we cannot easily change the type and nor do we ever really want to. That would be a very bad programming practice if you tried to do things like that. So this str is forever a string and that means that I can refer to an str down here just by typing it. And if I scroll down two X codes, auto complete, it tells me str is a type off string and if I just leave that there, you'll notice over in the right hand side. Let me just expand this That appears I cannot expand it quite enough, but we can see what we need to see. It tells us the str is hello playground. So this is what a playground does for us. It sort of lets us do the code on the left and gives us the result on the right. So it's good for learning now if we haven't str it's a variable and variable implies that this thing can vary So I can say str is equal to and I can give this a new string grant. So I've changed. What? Stored inside of str And if I just type scr below there, notice that it prints out the new variable. The old one is gone. There is no undue when it comes to programming. Bear that in mind. You cannot get your old variable that well unless you're programming God, of course. But I think even that's difficult, right? So in programming, we use a lot of numbers. How do we store a number? Well, one option crazily is weaken store in number as a string bucks. Be careful because any programming language doesn't know that that is actually a number. It just sees a string. It doesn't sort of make that extraction or that jump that we as humans make we say that is the number two and not the string to programming is not like that. So if we want to actually store a number, we need a variable to store it so I can save our. My num is equal to seven. An ex code will store that as the number seven and notice There are no quotes around that. If you put quotes, it will make a string. So now if I typed down here my numb it comes up there or to complete and says This is an integer. An integer is simply a whole number. 12345678 etcetera. And images do have a maximum value, which is something you need to be aware off but much later on. And an integer cannot store a decimal value. Because if we try that 7.4 and we specifically make this a type of integer whoops, let me just correct that 7.4. We have an era. So it's trying to do this decimal and put it into the interview. But that simply doesn't work. So how do we take care of decimals? Well, there are actually two ways off doing that. The first way is to use a float and you'll see there are several floats here. Float 32 64 32 64 referred to the type of computer or the process er that your operating system is running on. Don't worry about that for now, so our float is able to store seven point fork. But what if I want to have a really long number that ends in lots of eights? Let's see what happens. Uh, what's happened here? It's truncated it so afloat can only store and much shorter decimal. What happens if we want to store a longer one? Well, we use double to do that, and a double allows you to store the whole thing. So now we have everything here and we click this little I over on the right. It tells us the whole value. It still marks the complete picture, but it is a lot better than the simple float version, so it's much more accurate now. That's important because let's say you're making a banking out and you're transferring money or something you're converting from currencies. That decimal point I think it stops somewhere about there could be quite important for your calculations What if you had a trading out that with the extremely important for knowing your margins? So there's a three different types. String integer, double float that's four times the final one in this lesson is called a Boolean. Now billions are very, very useful. The virus, my boo off type 1,000,000,000 which is just short as boom is equal to. And this can take one of two values by the true Something is true. Let X code catch up. Something is pulse yes or no Answer. Now Boolean is come in very handy. When we're checking the state off our program or the state off any received data or stuff like that, it'll become obvious as we progress through these lessons. So there's of the basics riel basics, off variables. And just before we go, we can have our any variable, and this can be off type and the thing, and this is going to give me an error because we don't have anything as a type yet, but we can set that as whatever we need to. So remember. The basic rule is a variable is simply a container or a box toe. Hold a specific type off information, right? That's done. Let's move on and look at the next topic in Swift for 9. M3 4 Collections Arrays in Swift 4: moving on from variables. We have collections, and the first type of collection we have in Swift there are roughly three that you will generally use. The first lot of these are called a raise now on array stores. A whole collection of variables, as you might guess, and it stores these in an ordered list so I might have some strings that say, six eggs, milk, flour, baking powder and bananas and then thes oral indexed. So in Swift, we start out indexes at zero, going upwards until we've reached the end of our array. So an index of zero means that is the very first element inside off our array That's important to remember a raise are what we call zero index. That means the first element started Index zero and not one that will catch you out. If you are a beginner, quite a few times still gets me out very occasionally. Okay, let's open up an ex code playground and implement some of these arrays in our playground and see what they can do right with your playground open. Let's create an array off inter jizz. So as with variables, we start with the keyword var And then we give this array a name some INTs, and we are going to make this equal to. And here we have the universal language before an array in pretty much every programming language, and that is to square brackets. And then inside of those square brackets, we specify the type of array, which is integer. And then we need to add one more thing to this, and that is the what we call initialize er. So I'm going to add an open and close bracket. And what that does is it creates the array for us, which currently has nothing inside us. Inside, inside us has nothing inside of it. There's nothing in that array. There are no elements. So that's how we create a simple array. So how do we create an array of strings? Well, that's pretty simple. Some strings is equal to the same syntax, except we specify that this array is full of the type string. Now, what if we want to Adam for a value to these arrays? Well, these arrays come with what's called a method, and the method does all the heavy lifting for you to add the thing that you want to add. So, for example, if we come up here and we say some intense and if you notice on the right hand side, this will have nothing inside it that's expected. We can add something by using upend and notice what comes up. It says Void, upend, new element. Interject. So that new element, integer says. Give me the interview that you want to add to this. So if we had enter it, order completes. If you hit, enter again it auto completes interject. But we don't need that. We can remove that and we can add an integer Let's say the number eight and now we now have the number eight added to our array. Now there's another way we can actually add Inter just to this so we can say some in its and this is a programming shorthand we can say plus equals. And that means it should add what's about to come up on the right hand side to our integer array. So all we have to do is open a square brackets, drop in the number four and close that square bracket, and now some INTs has two members eight and four. So you could kick during this forever and ever. And this is pretty useful when you're going round and round a loop and your adding arrays according to whatever logic you have in your program. Of course, we can do exactly the same bore some strings we can say dot append and we can add our new elements. We can also have some strings and we can have plus equals open and close our square brackets, and we can put the abbreviation of my last name. So now on string Array contains two items, but notice what happens if I try to ads a number. The number seven. I would expect an error because the array can only carry one type off variable, so we obviously cannot do this now. Obviously, we don't add a raise one by one, so just remove this line. We can actually add multiple variables to our rate so I can add past year on wine because I just had some lunch. There we go. They had some pastor and why Great, So that's a nice, handy short cut. Obviously you can initialize your array when you first declare it So up here on Davar, some strings. What I'm gonna do isn't going to say this is an array of strings and I'm going to make it equal to I'm going to delete these two brackets and put two square brackets. So this is very similar to this Syntex. Except up here. We're initializing it. We're creating the some strings variable. So in here, I can say, What have we got? Pizza. I must be hungry. I'm writing all these things down barbecue. And now we haven't array created with pizza and barbecue and later on, those values get added to our array down here so I can check them out in this little explorer on the side. Great. So that's how you handle sorting them out. But something else you're gonna have to do many times is count how many things are inside of an array. And that's important when you go around loops because sometimes you'll get data and you won't know how many elements there are, so you have to count it. So let's have some strings. Don't and start to type count and you'll notice it gives you count, which returns an integer. That's what the left hand side of that little order complete means it's going to give you back a whole number because obviously you can't have half an element. Our accounts will show up on the right. Inside, there are six elements in this of Ray Perfect, right? So you know how many elements air in there? But let's say we have our ray here and we want to grab elements Number two, which, if you remember, is actually element number three because we start counting it. Zero. So how do we get that? Well, that's again simple enough. We can have some strings. We open a square brackets and we give it the index of the thing that we want, which is Element number two. And we close our square bracket and that returns back to us ground as we expect. Now here's a little tricky bits. If I go beyond 1234 If I try to access number five, look what happens. It doesn't exist. Poor does it Hang on this second, be truthful. Five. Oh, I think it does exist. Whips. Let's try, Go for number eight and we should have. There we go. We have an era, actually, I'm wondering, Oh, of course, we have six elements. Don't because we have 123 both 56 Okay, so Number eight doesn't exist, And so we get an era are horrible era, and this is one that's going to get you out quite a few times. But there are practical ways off avoiding that completely. So as you develop as a developer, if you'll pardon the pun, then that's era will kind of disappear. So whatever you do, don't try and access an array outside of what we call its bounds. Its bounds are the minimum and maximum off the array. Obviously, you can never access elements minus one because that just it's just doesn't make any sense and you can access Element eight. Okay, that was there was a very basic a raising their tons. More things you can do. But we'll learn that as we go 10. M3 5 Collections Sets in Swift 4: So far, we've looked at a raise in our little collections, and the next thing we're going to look at our sets. Now, if you recall in a raise, we store things in an ordered value. So we add something. It's an index zero at another thing. It's a index one, etcetera. Sets are different to a raise. Sets actually store distinct values, all of the same type within a collection by distinct I mean, you cannot have the same item twice. So if you had a set of vintages, you could not have the number two in two entries. Where's with a raise? You can have it as many times as you like. Sets also do not order your items. So you cannot say I want the item at place zero in my set because that simply doesn't work . It's not what they're designed for. So if I give you an example, if we have music types and you want to store them in a set. But we want to make sure we never repeated one of the music types twice we'd have something like this. Rock jazz, classical hip hop. If we try to add hip hop to this set again, It wouldn't show up. It wouldn't be added, and we'd be left just with a single value off hip hop. That way we can ensure that something never gets repeated. And then he's pretty useful. When we come down to more complex programming, it helps get rid of a lot of the filtering and the checking that we need to do and make sure programs run much more slickly. Okay, so let's create a couple sets by opening up the playground and following along right? Let's create a set of letters. Far less is is equal to what? Well, as you might guess, our type is offset. But we have a set. It doesn't know what it's gonna store. So the way we tell it is by opening up this triangular bracket and telling it, we're going to store some strings. And then, of course, we have to initialize it open and close your brackets, and now we have an empty set. Now, unlike an array, we don't upend anything because upend means we add it to the end. And because it's set has no order, there is no end. Instead, we're going to get letters. Don't and we are going to insert the lesser a now just before we go. One. This is a fantastic being that Swift has done and all the guys developing Swift have created. They've made it very language based as a programming language, which sounds a bit hid IAT IQ. But what I mean is, everything means what it does. So insert means. It's just putting it in there. There is no order attached to that. If you had a penned like you do with a raise, that means add it to the end. So the guys that swift a very hot on having the correct language for watching doing, and it helps avoid a lot of areas, right? Let's move on. Without sense. We can initialize sense just like we can with any other kind of variable. So let's have our faves or favorites and we can tell it this is a set off strings and then we can, of course, create that set, and we can have our pizza wine. And of course, our pastor, right so swift knows that this is a string or a set of strings because we have told it. But we could actually also remove this string, and Swift knows we've specified strings. It knows, he said, set so we can do that. Be warned, though. If you remove sets, Swift is going to turn this into an array and notice. Here we have a square bracket, whereas if we keep that set in, we will have curly braces. That's an important thing to remember now. Sets can, of course, use a lot of methods. So if I get my faves and I just put a dot, it tells me what I can get out of it. I can have the capacity of it. Don't worry about that. For now, I can count. I can find a member with contains so quite similar to a raise, really, just with that key difference off no repeats and no order. So just to demonstrate the no order if I get my faves and I ads pizza too, it twice. Well, what do you think's gonna happen here if I inspect it? I only have three elements, and that's because pizza simply gets removed if it's repeated, you gotta be careful with that, whereas if it's an array and we explore that we have four elements in total. And I'm just scrolling up and down with the mouse wheel because you can do that. Okay, so let's not do that and just get I was set. So obviously someone has eaten my second pizza, which is probably good for my diet. When we have a set, right, let's move on to the next one. 11. M3 6 Collections Dictionaries in Swift 4: the final collection will look at is called a dictionary. Now dictionaries are very useful, but they can also be quite confusing for beginners and experienced developers like it's quite easy to kind of get lost in them. When you're trying to sort out a data structure before we get into the things that could trap you. Let's look at what a dictionary actually is. A dictionary is just like a dictionary you'd pick up at a bookstore. It stores associations between keys and values, and obviously that's just kind of like a standard dictionary. So if we look in an example off airports, our dictionary would look like this. We would have an array of keys. Why wise ed for Toronto, dubbed Foot Dublin, Alex RAV four London Heathrow and inside of those keys, we would have values associated with them. I shouldn't say inside of them. I should say associative clear, not actually in sight. But those values we would pull out by asking out dictionary. I have this key called Dub. What does that mean? What's the value of it? And are dictionary would produce the value Associate ID at that key. Now, keys are of one type and values are off another type. In this case, keys would be strings. Values would be strength. Sometimes your keys could be in judges, and your values could be strings or the other way around. But generally speaking, they tend to be strings and strings or insiders and strings or even images and a raise for values, etcetera, etcetera. So you can make any data structure you like, and you can see what I mean. It can get a bit confusing. So before it gets confusing, let's create our own dictionaries and see how to do these the very simple way. So open up your playgrounds and let's create a dictionary. Let's begin by creating a comment so double forward slash now dictionaries are defined in the following way. We have the dictionary decoration itself, and then we have the key and the value that goes with it. So that's how we define the type called Dictionary. So let's try that. Let's have var names off images and let's make this a dictionary. Open your triangular brace and let's make the keys of this as inter GIs and let's make the values as strength and then we can actually initialize this too, its first set off values or just leave it empty. So the way we do that is by opening a square brace, have an integer and then a semi colon string and our usual open and close brackets. So now we have created an empty dictionary. Now you'll notice, first of all, and this annoys me that here we have a comma to represent the two elements. But over here we have that semi colon. That's a bit inconsistent, if you ask me. And I wish Apple or the guys that makes rift would actually change that. But hey ho, that's what it is. Technically, you don't need this because Exco will pick up. It's a dictionary. If we undo that, we will have our dicks Redback as we made it. Now how do we add values to this? Well, let's get our names of Vince And what we wanna do is we want to grab one of the keys. So this key is an integer. It could be a number seven. It could be five. It could be 87. Whatever it is, it doesn't matter. Let's make this too. So we're grabbing this key at two, which doesn't actually exist yet, but we're about to make it exist by typing equals and then typing the words to which is a string. So now our dictionary has one value. If we look up the index or the key off to, we will come out with a string off to. So let's add another one name's events. And let's put something at nine is equal to nine. So now we have two elements in our Dixon, and we're going to go like this forever and ever. That's where you want to get the mounts. We want to say names, events and then give me the elements at index or key number two. And if you look over the right hand side once it's caught up, it says the number or the rather this string two. So that's a dictionary Now. Maybe it's quite difficult to see how that's useful now, but as we continue with programming, you'll see it will become more and more useful when you want toe order. Quite complex sets off data now, one final thing before we go, and that is how do we make different types in our dictionary, and particularly how do we specify a raise? Well, that's simple enough just going to delete this. And I'm going to say that this is going to be an array off strings. So every time I have a key integer next to that interview, I will have a whole bunch of strings that I can pull out. That's difficult to just think about from words. So let's create that in actual programming names, events. Let's get to is equal to now. It's expecting a string array, so we can't just have to because it will complain. You can see that red mark up there doesn't like it one bit. And actually down here, it tells us what is wrong with our code. My playgrounds cannot assign value of type string to type string array, so it doesnt like us mixing the two we need to put this in and array. An array of one element is fine. You can always have that. We can add different translations like this, huh? And that's Bulgarian for two earlier on horrendous Roman spelling of it. But I you get the points to Davar, we can add some French. Yeah, and now we have three elements. So If I try to access names off since for the index off to, we will get on the rights to divide there and it tells us what we have. What if we want to access one of those strings? Well, we can access array number one maybe, Or maybe not. So it tells us String has no substrate members. Names of into 21 Now it. If you look here, we have a string and question mark. It's telling us, but I I don't think you might not have something here because it doesn't really know in advance what we have or it does. But he doesn't want to tell us. So what you have to do. He's put a question mark here, and this is sort of a swift concept, this question mark something I'll cover by itself because it's quite a large topic off optionals. That's what it's called, and I'll cover this later on. But it says if you can access Element number two, then trying access number 12 prevents us from getting some horrendous era when we access something that's not within the bounds, just like a raise. If you remember right, so that's the long and short on dictionaries. Let's move on 12. M3 7 Logic in Swift 4 If Else and Switch Case: Let's look at a very important concept in swift and programming in general. If else or switch case, these two things do more or less the same functionality. So in programming you might have a variable and you might want to check what its value is. So you will say if it equals this, then do something else. If it equals something else, then do something else. And the story is much the same with switch case. So it's not too difficult to grab the concepts of this. So open up playgrounds and follow along right. Let's start with something nice and simple. Let's have a bar called mine, Um, which is just gonna be a simple inter job with the value off 33. Now, how do we test if the value is 33? Because let's say we want to send someone some kind off birthday card, depending on our program. And if their age is only 32 we don't want to send it yet, but as soon as they turn to 33 we might want to send it. So what we need then is an if statement will say, if open bracket my numb is and here's the tricky bit. Equals equals. There are two equal signs. 33 this is called a comparison operator, So it's just comparing the two sides. It's not setting one as the other. Then once you've done that, if this is true, we open a curly brace and Swift automatically closes the curly brace. So if my number is 33 then it's going to execute whatever is inside off these curly braces . If it's not 33 it won't execute it. So let's print my no, and we should see that over on the right hand side, it has printed it. Now print is simply a command, as as it sort of implies, to print something out. And that's why it's come out as a string that's got quotes around it. And it's got this back slash end, which means create a new line. Don't worry about that. For now. The important thing is we've printed out this value off 33 Whoops. Okay, so it is 33 But what if I put 32 in my initialization? Well, this doesn't actually get executed, so it doesn't show up on the right hand side. That said it as whips as 33. Okay, let's say we want to test for various different numbers. Let's say else if open your brackets, my numb is and you don't just have to have equals two. You can have greater than 33. Then we can print something like, Oh, man, So what our program does this is the logic flow of it. It checks if it's 33. If it is, it prints it and then it doesn't bother checking anything else. That's why we have this word else. It's only going to do this if that is not true, so it doesn't do old man. So if I put 34 in here, we should get the else statement printed out, but not the 1st 1 printed. So it's skipped over this because it's not true. But this one is. So it'll do that. Okay, now what if we don't have 33 or 34? Well, we can cover all the other scenarios by simply having else we don't have to have. If so, if our program goes and checks this one and it doesn't work checks this one and it's not true, then it will go to this Final One, and it will execute it. You don't have to have this final else, just so you know. But if you want something to execute, regardless of the value, then we're going to print it. So let's print, young man. Okay, so if I have the value of 30 here, we should get young man printed out. Excellent. So you can see what I've done here. I've covered all the eventualities for what? My number could be inside the equal to 33. Or it's greater than 33 and what's left after you've been through those two. Well, it can only be less than 33 which is else So the other way I could have done this. I could have said else if mine, um, is less than 33 that would give me exactly the same result that would cover everything. Now, of course, this is starts to look a little convoluted. What if we want to search for 30? 31 32 33 34. You can see how this would get kind of unwieldy and unreadable. So the alternative to if else is called switch case. I'm gonna make a little room here and this works like this. We switch my numb and then we opened curly braces and Swift will close them for us. Then we say to it, If you have a case where my number is 33 then I want you to print my no like so And then we can have another case where mine, um, is between zero dr dot and is less than 33. And for that week and Prince Yeah, And finally, we can have a case for when we're older than 33. But rather than doing that and just simply inverting that sign, we're going tohave the equivalent of an else statement, which, in switch case is actually called default. So this is the thing it will do if it finds no other things to do. Frieze eight. So let X code catch up with us. Obviously, program faster than X code, and it tells us we have young man in both cases. So if I put 99 hopefully we have an old man and old, so those to the F else and the switch case are very important concepts in programming. We're going to use them a lot, and we will. You'll just get used to the to be honest, because we're gonna use them so much. It'll just become second nature to you right onto the next one. 13. M3 8 Round and Round Loops in Swift 4: So far, we've looked at collections of things like a race. What if you want to go through an array and you want to pull out each variable one by one and perform some kind of programming action on it? Well, the way to do that is to run it through a loop. And there are several kinds of loops, each with different syntax that differ very slightly from each other. Or in fact, some of them are actually the same as far as we will be using them. So let's discover what these loops look like by opening up the playground and following along. Let's say we want to create a loop that goes around 10 times for that. We would actually use that word I just said, which is four. We would say four variable I and this I could be named anything. It doesn't have to be. I here and we want to go from a count of zero to 10. So what this is gonna do? It's gonna go around this loop 10 times, and each time it goes round, it is going to add one to I. So let's print Hi, let's see what comes out there? Well, it says 10 times if we inspect it, it says nine. And that is the current value off I. And if you recall our arrays, we always start counting everything from zero generally speaking in program. So I zero it goes round eyes, one eyes to until we get I is less than 10 nor equal to but less. And what's less than 10 in entered your world? That's number nine. So that's how very first. Basically, Now I just want to show you something because I'm gonna help you avoid wasting a lot of time here. If you go searching for loops on the Web and you see something like var, I is equal to not semi colon eyes less than 10 I plus plus functionally, this is the same, however in Swift for this has now being removed. This syntax So era see style statement has been removed in swift three. I didn't know it was going in. Three could have sworn they said it was gonna be for anyway, that will not work in Swift four. So when you find your posts with a bit of code, you need to use use that in place off that and you'll save hours hours off. Frustration, right? Let's look at how we use loops in a raise. So let's create a virus numbers, which we will actually specify as an integer array, and this will be equal to whatever numbers you feel like putting into it. So we've got five elements in that array in order to look through that, all we have to do is say for so far in. And that end could be called anything, of course, in numbers. And then we want to print out in. So what's this doing while it's grabbing this array and automatically, it knows you want to look through it. So it grabs the 1st 1 the first time round it lips through, perhaps 2nd 1/3 1 fourth, one and 5th 1 And it just saves you from having to type the longhand way off the four fireeye in 0 to 10. Okay, so that's a simple way of getting all the elements and doing something. And you can imagine you would do a different kind of processing here, and this would make it very simple and very compact to program in in order to look through an array and the major advantage here, right? This is important. The major advantage. You don't need to know how long this array, it's how many elements. It as remember back to an earlier lesson. We tried to access an element in the array that actually wasn't there, and we caught an era. If you do that in your APs, they will crash, and it will be a bad user experience. You'll get a one star review, and they're not great, I know from experience. So the beauty of a for loop is you don't need to know in advance the size of the array before loop will stop at the end without falling off the cliff. Right? The next kind of Luke we have is the wild blue. So this is a bit more tricky. Let's create a viral count variable, which will be an inside job, and that will be equal to zero. Okay, now, while that count is less than 10 we are going to keep executing this Look, we'll call it Prince. No. Yes. Now, if you've program before you know what mistake I just made here? Look how it keeps counting up and up and up. It's just going round and round that loop because count is always zero. And I've said, as long as it's less than 10 keep doing this. This is called being Stuck in an infinite Loop. And again, it will cause IOS to kill your program for you or at the very best. Your program will be non responsive and sluggish. So the way to get out of this is to add one toe I each time we go around. So after a printed that let's have I plus equals one and let's see what happens. We have a slight Harris. What I'm gonna do is just the cut this because I think it's actually crashed like I promised it would. And then I'm just gonna paste it again. Once X Code is caught up with itself, it keeps trying to print out. Not yet at the bottom is you can see Oh, wow, this is going crazy. What? It's a good demonstration, Isn't it? Off? What can actually go wrong with these things? Tell you what, I'll, uh, I'll just a switch off the video now and let this run and I'll let you know in a minute how long it took. So that took much longer and I had to force quit X Code because it wasn't responding. So you've seen the danger. I'm gonna pace this back in, and now they were adding I each time. Oh, whoops. No, I That's silly, isn't it? It's count plus equals one. I'm still stuck in the four loop, if you like, and that should go rounds 10 times once it has finished thinking about it. If I just dragged my little window at the bottom up, we should see, not yet printed out roughly or exactly 10 times. And there we have it, right? So that's all good now. Another warning. You might see some other shorthand for adding, and this is plus plus. And this is wrong because it is being removed from Swift. So again, that's another thing that could actually get you out. There's put that back to plus equals one. Make sure it's there so I don't get a crash again. Okay, so that's the while. Now there's a slight variation on while called Repeat While, and they don't sound too different and functionally they're not. But when you come to programming, you'll understand the nuances between them. So that's just trying that Let's have a repeat. So we're gonna tell it to repeat something. Old Prince not yet counts plus equals one. So it's gonna repeat something. But it tells us I expect a while after the repeat statement, because we haven't given it a condition to stop running yet. So we're gonna repeat that while the count is less than 10 and you can see this look around 10 times and then stop. And there we have it. Now, it's not obvious how different this is to the previous one. In fact, it seems like more code for no good reason. But later on will discover there are some fairly good reasons for doing this. Okay, that's the end off, Luke. 14. M3 9 Functions in Swift 4: So far, we haven't really organized our code in the playground very efficiently. There doesn't really matter because we've only had very small snippets. But when we come to program real stuff, we can't have just one big block. So what we're gonna learn about is how functions allow us to organize the code better and more efficiently so we can read it. Other people can read it, and it just helps organize your brain in a brain Matthew kind of way. So you understand what's going on after a few months when you haven't looked at your code rather than having a big spaghetti mess, you'll have neat little functions. So open up playgrounds and let's look at how to do that, right? So a central tenet of a function it's so that we can organize our code, but also they exist so that we don't have to a bright code twice. Here's a little tip. If you ever find yourself writing code twice when you're programming, stop what you're doing and reorganize it. You should never write code twice, so let's look at how function helps us avoid that problem. We define a function by typing the word funk. And, of course, Swift is telling us. I expect an identify it in the function declaration that in English simply means I watch to give this a name. So let's call this function check counts opening close brackets, and that signifies that this is a function. You might also call this a method. Different languages slightly. Call them different things. So see shop. You'd call it a method open our curly brace and closing. Now all of the code we're gonna put inside of here belongs to this function, and the code won't execute unless we call this function and we'll see how to do that in a bit. But for now, let's write some code. Let's save our count. We should be used to this by now. Int Easy call to zero and let's create our repeat loop. This is good practice for us. We want to print not yet, and we're going to add one to our account. And don't forget, this comes with a while. The count is less than something right, so we have our function, say what's happened. Well, nothing's happened because this code will not execute by itself unless we call this function and calling a function is pretty easy. All we have to do is type check out open and close brackets, and it will fire that function once. Notice how it's fired out are not yet 10 times. Now. It's a bit difficult to see, so what we'll do is we'll reduce this to three so it will fire that three times. That's easy to count. Okay, And then underneath there we might put at Prince done and put a lot of guts so we can see that clearly. So we should have some. Not yet. Senate done rights. That function has fired once. That's brilliant. We could actually fire that again. Somewhere else can't counts. Now watch what happens. It's fired twice, so you can see by having our codes stored away. In this function, we can access it easily vice simply calling the name off the function. But that's not even the best thing about functions yet. Let's remove this one. It's dropped out of. It functions inside of these two brackets. Here we can pass over a piece of data, and that data could actually be anything that we want to pass over. So let's tell our function we're going to give it a message, and this message is of type string. So it's got this string. Now if we look down here, will be called check count. It says we're missing an argument for parameter message in court. An argument is simply what that is called. These are called arguments. I don't know why if someone could tell me, police do, and it's telling us we haven't actually sent anything over. And that's what I'll check. Count is expecting. So what do we do? Well, let's send it over. Message Not. Yes. Now we've passed over this. Not yet. Message. So it goes here, it gets passed over here. Now we can use it instead of printing. Not yet. We can simply prince the message, and that gives us the same result. So a passing data over to the function. And of course, we can run that with whatever message we feel like, and it will print that out. So I hope you can start to see the advantages off functions. Now we don't actually have to just send one argument. We can send as many as we like, Although I'd advise against sending tons and tons because that means your program is not well structured. But for now, let's send to let's send over and interject, which we will, of course, call counts. And let's say nine and we should get an era. It tells us we don't actually have that because we haven't implemented it up here. So let's do that. Counts as an interject. Now, we will use this count to test how many times to do the loop. So, first of all, we have a conflict to this count. Cannot be the same name as this count. That is actually a problem. So what we'll do is we will change the name of this one, Teoh. End counts and we'll change it here. End counts. So you gotta be careful with those clashes Sunday. So now, end count. We can put down here instead of three. We just drop in and counts, and this will go around the number of times we specify in encounter. Think of that going around nine times. If I said go around twice, I think you can guess what's gonna happen, right? So what else are we going to talk about here? We're actually going to talk about the names. These names should be descriptive, but also as short as you can make them. So we don't want check counts off. Ah, hot dogs in stand because that's it's just ridiculous. So you would just have checked count. You might have checked count hot dogs or count hot dogs, and that's probably a better one. We can have count hot dogs or whatever it is, so you should make it short. But as descriptive as you can within that right now, there's one other thing that we should cover in functions. Well, there are tons, but, well, any undercover one basic a function can give you something back, which is referred to as a return value. So let's say we wanted to send over a message once we were finished here. We need to tell our function that it's going to send back, and this is dash Strangler brackets. We tell it what we're sending back. We're going to send back a string now. Hopefully, we should get an error because it says were missing return in a function expected to return strength. And that's saying you've told me you're going to return this, but you haven't actually given me anything to return. So what we're gonna do instead of doing prints done, we're going to return hours string. That could be whatever we need. We can say complete it now. Completed. Won't prince down here And now a little inspector thing but completed will print here, as we can see here. So we've returned a string one cell function has finished. This is an important concept because when you go off, say to your server you grab some data in your function. Eventually you're going to return that to your main program, and this is more or less how you're going to do it. It's not the only way. There are many other ways, but this is the basic way of doing now. Because we're returning a variable, we can actually assign it as a bar of our result equals completed and then result itself is a string which is completed. So that's how we can get variables back, right? That's the very basics. Are functions sorted 15. M3 10 Optionals in Swift 4: optionals. This is a fairly new thing to most programs, but it's a great feature of sweet for now occasionally, and this is the reason we need optionals. Occasionally we need to have a variable that we don't write to immediately, so it doesn't have a value. We might actually write to it later on, though, and in most programming languages, this actually causes two main problems. One if nothing is stored, then we get what's called a no reference, and that simply means there's nothing stored inside it now. If you tried to access that, it's going to give us a crash at runtime in most other languages, swifts a bit different. That means your whole Apple crash that's it, dead over, and obviously that's not good. So that's the first problem. But the second problem is related to the 1st 1 in that we need to actually add more code to check. The variable is there, and you can imagine with a lot of variables, this code could actually add up and cause other problems off its own. Now Swift does away with these problems quite elegantly, but it's a big confusing at first because of how they've constructed it. So open up a playground and let's have a look at how to use optionals, right? Let's create a variable called my strength. Let's give it a type of strength. Let's see what X Code says about this ex coach. Seems to be okay so far. Great. Now let's prince my string. There we go. We have an error variable. My string is used before being initialized. I mean, there's no value in it and that's gonna cause us on her. Brenda's era so swift won't let you do this, and it's it's clever enough that before we release our program, it says, Hey, dude, you might actually have an area here, so please fix it, Okay? Other programming languages aren't so hot on this yet, but they are changing. I believe F Sharp is actually changing towards this sort of paradigm. Now, if I put a question mark after this string, what I'm saying is there might actually be a string inside off my string, and if this works, let me just try and hover. That doesn't work. If I just typed my string here, notice how the type changes to string question mark. That's important to know, because that means it's an optional. Now. What's the difference between that and that? Well, the 1st 1 The type is a string. The 2nd 1 The type is and optional, so that's important to realize the difference there. The 1st 1 is a string. The 2nd 1 it's optional. So in the 2nd 1 we're saying, Here's a box. It's an optional box and it might contain a strength. But it's up to you to check if that string is in the box. So let's go ahead and do that. Let's say if let's my string value is equal to my string. So what we've said here is, if let's if we can create a very well called my string value from something inside of that books, then and only then are we going to do something with my string value so we could prince my string value and hopefully that's not going to print. And there you go, right? So I hope that's clear. And by the way, let is just another way off creating a variable Samos Far there is a difference, but we'll get to that in due course, So if we can get a very well from this box, Then we can use it. So he said, it's optional. If we can get it, then we can use it. And that's the very basics off optionals now. Normally, I will teach these this soon in the course, but I think it's safe or it's safer if I give you a tiny introduction now. So later on, you're not kicking and drowning in the water of all this code. And then suddenly I've introduced something called Optionals. You like our What's happening? That's why I've done it now. So one final thing to do, let's make this equal to find it, and we should be able to print that up so you can see it works. So we've checked. If that variable actually exists because it's optional. Okay, perfect. Let's move on 16. M3 11 Classes and Objects in Swift 4: Here we go. This is one of the big topics. It's actually one of the main pillars off object oriented programming called classes and objects. Now, I'm gonna break this down very simply for you. A class is simply a blueprints. What is the blueprint Do? It allows you to create multiple instances of itself so you'd have a blueprint. You'd use that blueprint to create some objects and you could create as many objects as you like. So if I had a blueprint for a Gatti, I could create as many as I liked, even though I could only drive one. But maybe I'll give you one. Maybe if you're a good programmer. So all of these more Galaxies are the objects created from the blueprint. They're the objects created from the class. So just think a class, the blueprint and Borghetti is an object, right? Let's see what that actually looks like in terms off code. Open up your playground and it's debunk one of the most commonly struggled with subjects. Their reason? Programming. Let's create a class by simply typing class. It's that easy. This class needs an identify or a name. Let's call it a fast car and open and close your curly braces. Notice a class does not have brackets because a class cannot be executed like a function can. Now. A class contains a bunch of variables or properties and a bunch of functions whatever we need it to contain. So let's say we have this fast car and we give it a top speed off 155 MPH. That's an interject, right? Let's say we wanted to yet the middle speed off this car. Well, how would you do that? Well, we create a function and we would say, gets middle speed and this function would take no arguments. But it will return perhaps an integer or perhaps even a flipped. Let's see what happens if you return an interview and just to make it easy, let's make this 156 So what are you going to return? Let's return 156 divided by two. So that should return. Now there's something I should point out here. When you divide in Tages, there are no decimal numbers remaining. Just remember that. So if you divided 155 you won't have a 1550.5. That's why I changed its hip 156 And rather than having 156 year, I should actually say top speed divided by two. That's my bad, right? So that's a class. It contains a top speed property, and it contains a couple of functions, perhaps one here to get our middle speed. Right now, it doesn't do anything by its self. That's important to know. So that's the blueprint. Let's create an object bar. Gassy is equal to last car, and then we open and close brackets, and that will initialize it. So what that does is it gets all this code, creates the object of fast car and assigns it to boot. Gassy right? So if we wanted to get out the middle speed, we could say Boo gatti dot get middle speed. So whenever we create an object, it obviously inherits all of these things that come inside of the class or the blueprint, right? So that's not all. We can create another car we can save. Our Ferrari is equal to a fast car and with created a Ferrari and we can get the Ferraris middle speed if we so wished. And of course, it's the same, because we have to find it right so we can create millions and millions of objects if we want all based off of a single class. And can you see how that's gonna be really useful when we start to create out more complex programs? Having a class that defines a thing or a sort of subjects that are apt tackles allows us to organize our code in a very neat and precise way. Okay, so a Bugatti is actually faster than a Ferrari, but at the moment they both have the same speed, and we've got to correct that. The way we're going to do that is when we create the object in first car, we're gonna pass over a variable for the top speed because they all have different top speeds. It's ridiculous to have the same one for all of therm. This isn't the communism of cars, if you like. So the way we do that is by coming up to our class, and there's this very special function called in its and look at Swift. It says This is the initial Isar Declaration. Now this is a function that fire's whenever we make a new fast cup so inside of here we can pass over a variable. We can say I'm going to pass over top speed, which is going to be an integer right south passed over top speed. How do I get this top speed into here? And more importantly, these are the same names. How come it's not getting confused? Well, it's not getting confused because it knows that this variable only belongs to this little bit off code is only within this scope. If I came down to my function here and I access top speed, that top speed corresponds to this one. And if I hover over it or click it, you'll notice how the top top speed right at the top gets highlighted by Ex Code. But the one in in it doesn't so that's important to know. So let's make this top speed equal to this top speed. The way we do that is by saying self self refers to the current instance off the class or the object with just created self dot speed is equal to top speed. And trust me, X coat knows what we are referring. Now this top speed we don't need to define it anymore. We can just say it's simply an integer and we should be sorted now. When we define our fast car, we actually need to pass over the talk speed, which is maybe to 10 and that works. And let's pass over the Ferrari. Maybe that's 155 Okay, maybe it's a bit faster, but let's leave it as is. So there we have it. Middle speed for the book, gassy is now 105 which is half of to 10 and the middle speed for the Ferrari is 77 now. Remember when I said that interview era was lurking? There it is 77 times two is 154. Where did the one go? That's because when you divide 155 bite, too, it gives you 77.5. But because an integer can't handle the point, it just drops. It doesn't care, doesn't give you a warning. So you have to watch out for that, right? So just a little quick review, because this is quite complicated. You create a class as a blueprint, you create an object from that blueprint. Then that object can access all of the properties, all of the functions inside off the class, you can ask also pass over some variables into in it, which fires every time you make a new version of that class and then you can assign those variables into the properties of your class. So don't worry. If you don't understand that right now, you don't have to because we're going to use classes all the time. Everything in programming is done with classes. 17. M3 12 Inheritance in Swift 4: inheritance, and I don't mean that a distant uncle has died and left you a £1,000,000 although I wish that was the case. Sometimes, anyway, In Harrison's, Imagine trying to write some classes for many different types of cars. Coup pace trucks, etcetera. Can you imagine how much repeated code you'd have? Well, this is where inheritance is going to save your fingers and save your time. So open up a playground and let's see what inheritance is all about, right? Let's create a really simple class called Come and let's say, Let's the number of wheels equals to four. Now let's say we want to create a family car so I could copy that and call this family come and let's have less number of wheels of four. But maybe we want to have let's number off doors equal to five because it's a hatchback. I'm really good at spelling right now. Can you see a problem here? We've repeated this number of wheels twice, and obviously that is not good. So we want a code in such a way as to not not to repeat our code. So let's change this class perhaps too vehicle. Let number of wheels equal four. That's pretty reasonable. Most vehicles do have four wheels Now. If I have a family car, I can remove this number of wheels and I can't say I want the family car. Teoh Inherit all of this stuff that comes from the class of vehicle. And how do we do that? Well, simple. Sandy Cola come No cops. It should be vehicle vehicle. I must be getting tired. I need coffee, right? So that means family. Carl absorbs all of the stuff in this class into itself. So let's see that in action. Let's say far my car is equal to a new family car. Fair enough. We have a new family cup, but here's the beauty weaken. Have family car DOS hopes we can have my car darts number off doors and we'll get five. We can also have my com DOS number off wheels, and here's the big reveal. It picks up the number of wheels from here so you can see how he saved a bit of code. We only saved one line here. It almost seems not worth it. Trust me, it's worth it later on, when you're programming, this will save you more than anything, always inherit where it makes sense and mostly, actually where you can. Okay, that's all there really is to inheritance. You're just inheriting all the stuff from another class. There's no point in going into it further because, again we're going to inherit every single day that we code maps. It'll just become a part off the landscape. 18. M3 13 Summary of Basic Swift 4: So we have come to the end of this module. You violent some really good basic concepts in Swift for and most other programming languages, for that matter. You've covered a lot here. But don't worry if it hasn't actually all gone in. Nothing goes in the first time. I know from bitter experience myself. It will with time and practice. Here's a little summary of what you just accomplished. You learned all about parables. Insurgents, strings billions. He learns about loops going round and round. Well, repeat four etcetera. You learned about functions and how to organize your code. Also about classes and objects, blueprints and things. We also looked at a raise, sets and dictionaries, ways of story, multiple bits of data inside a single variable we looked at if else which case to see what things were, how they were behaving and to do specific sets of programming things to them if they were the value that we expected. We also looked at optionals, which is a great start. It puts you on a good standing for when you come to more advanced programming. And finally we looked it inheritance. One of the things will come across pretty much every day. So once again well done. You deserve a little break from learning. Now, here are some fireworks to see you off. 19. M4 1 Introduction to Your First iOS 11 App: All right, guys, here we go. You are about to create your very first IOS app in Swift. For now, what are we gonna create? Well, we're gonna create something seemingly very, very simple. But it's a gateway to show you all of the things that you need to know when it comes to structure an app and what all the various bits and pieces of files and storyboards and graphical designers do. So what are we making? Well, I used to do astronomy a long time ago, and in order to look at the stars at night, your eyes needed to adjust to the dark. And that was a problem, because sometimes you need to look at a map or a star chart. So the way we got around that was to cover a torch with some red sort of almost translucent paper in order to make the color off the light red. And when red light shines into your eyes, it allows you to keep that dark adaptation. So what we're gonna do is we're going to create one of these astronomy torches using just the screen of our device so against will allow our screen to be the color red. And then we're also gonna do some funky stuff around that involving interaction with tapping the screen. So along the way, you're gonna learn a whole bunch of stuff, and it's all really quite important stuff, and it's stuff you'll be doing over and over again when you create APS Festival will get storyboards, and this is where we kind of design most of graphical look of our. We will, of course, be looking at the graphical elements that we drag into our storyboards and how they work. We'll look at how to connect code to graphics that we've shoved into our storyboard. We'll look at how to respond to button clicks, how to constrain all of the things in our screen. Because, as you can imagine, an iPad is different size to an iPhone. So IOS, or rather, ex coat, needs a way to know how to place the various items inside your rap so that they don't look out of place on different screen sizes, and it's quite elegant. But we've done that. Then I'm sorry. I'm gonna give you a little bit of homework. It's not too difficult, but it gets you thinking and thinking is the root of all solutions in APP creation. But there's some good news. I'll give you a solution to go along with that homework after, of course, you promise me that you'll try the homework pressed right, let's begin. 20. M4 2 Astronomy Screen Torch Storyboards: Hello again. The very first thing when he's know about in IOS development is a concept called storyboards and storyboards hold the graphical parts off our app. They allows to design things in, more or less and drag and drop way, which makes our lives much easier as developers. So open up X code and let's see what storyboards are all about. So open up your ex code beater or your ex coat. Nine. If you're watching this once, it's out of beater and you're presented with this screen. And in this screen we want to take second option, which is to create a new X Code project. Alternatively, you can click file new and you can go down to projects. They do the same thing now there's lots and lots of options. First of all, I want to draw your attention to the top. We have IOS watcher West TV OS, Mac OS and cross back for We're going to TV. Oh is much later on, we might even do some Watcher West, but for now we're only going to do Iowa's, and we are going to select one of these options a single view again, an organ vented reality at document based app. There are tons of them to go around. Each of these has their own uses and their reasons why you would choose them or not. For now, let's choose a single view, huh? As the simplest version. Let's give the surname Astro torch. You can call it anything that you like. Now, if you're are a registered developer, you can add your developer account here. If you so wish, and then down below, it will automatically populates your organization name and your organization. Identify now the reason that it does that is so that later on it can produce this bundle. Identify just below that allows at the APP store toe. Identify your act uniquely then below that which you swift or objective C would definitely want swift. And if we're going to use the in built database in IOS, which is called core data, we would select this option. But we're not, so we can un select it. So let's just fill in our organization identify, and that will allow us to click next. You could put anything in there because we're not going to publish this, then we're going to create that solution so save it some way. I'll put this into my desktop, and once it's finished doing its thing, you are presented with what looks like a very complicated screen. There's a lot of stuff going on here, so let's help you out a bit there. I'm just gonna full screen this and the first thing I want to draw your attention to is this tree over On the left hand side, we have this little blue icon and it says, Astro torch. And if I scroll down, I could get the folder of Astra Torch. I have some tests, your processes and products. We're gonna worry about any of these tests. And what not For now, I want to see that this folder contains a bunch of code files and a bunch of story for board files, and we're gonna go and look at a storyboard in a second. But for now, if you click this very top icon, the blue one, that sort of contains all the properties of your project. So if your project needs some external dependencies, or you need to specify what kind of target you want to deploy to which version of IOS that means then you can do that here. So we're gonna leave all of that stuff alone for now, we're gonna leave it as it stands. The first thing we're gonna do is look it. What X code finks. A single view at consists of. Now, where do we do this? Well, all of the graphical interfaces asked. Generally speaking, they're stored inside off storyboards. And for look over on the left side and Outryve, you We have two of them, a main storyboard and a launch screen storyboard launch screen is the screen that shows when your APP launches. We're not going to touch that yet. We'll come to that much later on. For now, we're gonna look at the main story board, which is shown when your app is loaded up on the device. And if you click it, it shows you this black box called a view controller because it controls the view. Now, this little arrow on the left hand side inside the view controller screen tells us that this is the first view that will be shown when this story board loads. Okay, now, coming back to the files in this Astro Torch folder. All of these files contain the code that's going to run our so I'm just gonna lightly touch on this. So you have an idea. The APP delegate dot's thrift is how your app communicates with the IOS system. That's what you need to know about that. This view controller dot swift is the code that corresponds to the view controller in our main story board. And if we click the view controller in the main story board and over on the right hand side , we select this middle icon. There's a little drop down box underclass that tells us a view controller. So what X Code is doing is it is connecting this view controller with this view controller code. Okay, so that's a whole that is doing So let's bring up our main story board again. And let's just change one simple thing for our app. Lets change the background color off this view, so select. If you just click some way inside the box and then using these icons on the top right, If you hover over them, it tells you what they do. Let's show the attributes, inspector. Now the attributes allow you to change various properties of this view. And one of the most basic, of course, is background, so we can click other, and then we can click over to read if we want to. So now the background off this view is red, right? So that's simple. If you click anywhere away from the view that right hand pain disappears, so the right campaign contains a way off changing the properties and views of what if you've got up. So now you want to run this. Let's run this on our simulator. All we have to do is come up to the top here if you're in full screen and show the Astro torch and click the device menu and you can select any device. So let's run this on an iPhone five s. Now when you click this play button, it tells you it's going to build and then run the current scheme. So build it. It's going to load it into the simulator, and there we have our APP running in an iPhone five s and you can tell it's an iPhone because if you click the home button back we go. And there we have our act, our astro touch, so we can click that back in we go, we can double click it and back out It goes now. There's one final thing to know about this. If we go back to ex code, if we come down to the bottom here and we click on this little tiny icon called Show the Debug Area, the bottom left when you click that this is going to give us messages from our app, which we don't have any at the moment. But that's going to be very, very useful. Okay, now that you know, that's we can end this lecture. But just before we go, come up to the top and to stop your app running in the simulator, Click Stop, and that will stop it from running in the simulator and being connected to extract. It will still be available on the simulator so you can still load it up if you want to. But it's no longer connected to X code, right? Let's move on to the next lecture and put some code behind this view. Controller 21. M4 3 Astronomy Screen Torch View Controller Code: so far, you have created your very first app and you've run it on a simulator. However, you might be wondering, we haven't actually written any code yet, so let's do that. And here's just a little recap. So far you've created a little red colored screen torch. Now we're gonna add some code to do some fancy stuff in the background off this screen torch. So open up your ex curled project and follow up. Let's start with something nice and simple in terms of coat. Let's open up are Project Select the main storyboard. Select the only view controller we have in there and select the view. Now remember, if you select one of the top right icons to show the attributes, Inspector, we can change the background. Let's change this background back to its default. So it is what Now we're going to change this background using a coding approach. And if you recall I said, this view controller is actually related to a code file, and we know that because if we go over to the right hand side and we select the identity inspector, which is more or less the middle, I can't for the 3rd 1 in the class tells us this is a view control. And if you remember from your basic swift, a class is a way off organizing some code or a blueprint to make an object. So we want to find this view controller. And luckily for us over on the left in the tree view, we do have the view controller dot swift and only click it were presented with a bit of coat. We have an import of the top, and a class Nowlan import does is make available to us all the various bits of code methods and functions and classes that we need in order to program this part of our app. So don't worry about that for now. So the first thing I watch to see is that this class is called view controller and Aziz off type of you, you I view controller and the U I view controller is how we control the view in our user interface. See, I told you they made swift very literal. So every screen that we load in our app if it's a view controller, inherits from this class so that IOS knows what things to do at the right times. There's another thing down here. We have an override function. If you did load now, don't worry about override. For now. I want you to pay attention to this view. Did load this function will execute when the view did load or when it's finished loading. There's another function here. Did receive memory warning. We don't have to worry about that for now, but you will later on, so we can simply remove it if we wish. We don't have to have that right now to make this nice and simple. So, in our view, did load. We know that the view is loaded. It's on screen. It's in the memory of our app. So this view controller in the storyboard is loaded. Once it's done that we know then that we can access the background off the view in order to change its color. And how do we do that? Well, self and self simply refers to the instance off this class or the object we've made from this class, and then we can access the view and noticed this has a type of you. I view user interface view now that we have the view. We can put dots, we can access a background color, and then we can set that background color by using the U eye color class and inside of there. If we put a dock down, Look at all the colors that pop up for us, so we want tohave red. Now you can't create any color that you can imagine in this class. You can use RGB values, hex values, whatever you can think off. So now that we've done that, let's save it by hitting command s or heading up to file and save. Once you've done that, make sure your simulator is checked on the correct iPhone and hit play. Now, once that loads up on our screen, we should see our Astro torch gets sent over. And once the view loads, it turns to red. There's a slight delay because it's the first time I've run this on this computer, so it gets a little bit baggy. But things could be Wes Android emulators are really Laghi. I wouldn't recommend starting with this, Okay, so let's just recap that in our storyboard we have a view that view is embedded inside of a view controller because we need something to control it. We've told ex coach that our file view controller or a class called view controller is going to be responsible for that. So when are uploads? It loads up this view controller. It goes and grabs this view controller dot Swift and makes an object from it. And then once our view has finished loading, it sets the background color for us. So there you have it. Your very first piece of code. And it was pretty easy, wasn't it? Okay, let's move on. 22. M4 4 Astronomy Screen Torch Buttons and Outlets: in this section, we're gonna learn how to use a button and how tow wire up the code that sits behind that button. So in terms of our little torture, we have a red screen. What if we want to change that screen to a blue color so he could use it at night time when we weren't so bothered about our night vision being interrupted? Well, let's see how we do that with a button. Open up your project and let's go without Project open. Select the main story board and then over on the bottom, right. Drag this little window up just a little bit and then click the circle with a square inside it, which will show the object library. This is a library off all of the elements you could drop into your view down at the bottom of this. You have a filter, so if you start typing button there, we have it. And if you click the button, it tells you exactly what it does. Implements a button that intercept touch events and sends an action message to a target object When it's tapped. Bloody bloody block. We'll see what that means in real language in a minute. Now, if I click and drag this button, I can drop it somewhere in my interface, so I'm gonna put it somewhere near the top left corner. Now, as with our view, if we de select it, the right hand pain disappears. If we selected again, we can now change the properties of the button by selecting the attributes Inspector, and we have a very familiar interface. We can change the font if we want to. We can change the text color so we can change this to bread if we wished. But let's leave it as blue. We can change the shadow, the background, etcetera, etcetera. But more importantly, we can change what this button is called. So let's just call this change color and hit Enter. Once you've done it and you'll notice over in your display, the button kind of gets truncated so you can't see it properly. All you have to do is click one of these squares on drag it, and so now we have our button that says Change color. That's fine by itself. But if we ran this, the button wouldn't actually do anything. So let's make it do something. And the logical place to put the code for that doing is inside the view controller file, just like everything else. But we're missing something. How do we actually connect the two? I mean, X code knows how they connected, but we can't quite make that link yet. So click your story. Boat and X coat actually provides awaits for us to create this link right now. So I'm just gonna drop out of full screen here so we can have this top bar available to us . And I'm gonna make a little room here so we can see what we're doing now. The way you make in the room is you can switch off the left pain or the right pain by clicking these buttons in the very top, right? So if I click the left one that left bits goes away and I can even drop the size of this view controller a bit. I like to make the right one go away. If I so wished Okay, now that they're all gone, we can click these two little rings in the top, right? And it says show the assistant editor Well, if you click that it shows you the view controllers side by side with the associates of code class. And that's useful because now we can do some dragon drop when it comes to our butter. So we want to drag and drop a clip event from our button, and the way we do that is by holding down control, not command but the control key. Click the button and you'll see a little arrow come away from it and drop it somewhere inside of the class. But outside of the function. And then I asked you what you want to do, while the very first thing that it wants to do is create what's called an outlet and outlet is simply a variable. If you like that refers to the button. That's no good, because we want to click the button so we want an action and in action will hold a bit of code that we can execute. When we click that button. We have to give this action a name. Let's call it button, Please type. Don't worry about that for now and then in events. Look at all these different events we can access with IOS because remember, we're using a touch screen. It's not just a click, it could be a click, and drag could be click and hold. It could be anything like that, but the standard click event in IOS is called Touch Up Inside, which sounds a bit wrong if you ask me. But hey ho, hey there, named it Not may touch up inside. And when you hit Connect, our little action is implemented, so it's created a room here. You'll notice there's a little brown brown that's great ground. Come on, a little gray symbol, and when you hover over it, it shows you the button. So that's how we know that these two things are connected. Now, whenever you click the button, this bit of code will be executed. And what bit of code? Well, let's take this red color line Command X to cut it and drop it into this function. Let's line these things up so they look good. There we go. It's always good to have good lined up code. So now when we click the button, we should get the color red. So say that come up to the top left, stop your old simulator and hit play too low that again into the iPhone five s. So there's quite a lot of signing that goes on and compiling and building. And whatever we have here, there, we have it. Just give it a second to load. Right? So you remember we removed that background color from are you? I view. And we made it default. Now, that should have made it white, if I recall correctly. But it didn't in this case. And this is something I found quite often in development. The color is not quite what it should be says just something for the future to look out for . But in the meantime, we have our blue button, and when we click it, we get our lovely red screen torch. So you have learned in the past two lectures in less than 20 minutes all the basics that you ever need, how to set up a view, the code that controls it and how to provide interaction to connect the two. Isn't that great? 23. M4 5 Astronomy Screen Torch Storyboard Element Positioning: so far, we've got a nice functioning app, but we're missing one key thing, and that's what happens when we change the size of our device. At the moment, we've just dropped a button in and we just put it at the top. But what if we put that button at the bottom right? And then we put it on a smaller screen device while the button would actually disappear off of the screen. So to see that happening and learn how to account for that and fix the problem, it's open up our project and see how it's done right? The first thing we have to do is tidy up around here. Let's switch off our assistant editor by hitting the lined icon in the top right and then switch back on our side bars because we might actually need to use those. So now we have our standard editor view, right? So element positioning at the moment, we're looking at this view in terms of an iPhone seven s. And how do I know that when iPhone seven rather is seven s isn't out yet, because at the bottom off that you it tells us viewers iPhone seven If I click that it pops up different devices so I could select different devices. Give seven plus a seven. Whatever it is, it doesn't matter. The important thing to know is that it's seven as a tallest screen than of five. So if I drop this change color down here and just just put it right in the bottom corner there or perhaps up a little bit, we'll put it there. What happens if we run that on our iPhone five s, which has a shorter and narrower screen? Well, we get an era. That's nothing to do with the displacement. Honest. Ah, let's try that again. Plus, Okay, so that's not working. You're probably gonna hit in error as well. So what we do when that era comes up is we hit our home button on our simulator, we click and hold our Astro torch, and we hit the X to delete it. Now, let's see if we can load that up. There we go. That's loading. Okay, so we're loading our app and we have no button. It has disappeared off screen because the iPhone five s has a smaller screen than the seven . So obviously, let's stop that running. This is a problem. Now. If we want our you, I toe work consistently across all devices. We need a way off actually positioning this button. So how do we do it? Well, just below this screen, we have four tiny icons and bed in stack a line, add new constraints and resolve auto layout issues. Now what you can do is you can click resolve auto layout and more or less that will do things automatically. But you're a developer. We don't do things automatically. We do things deliberately so that they are exactly as we planned, so don't really want to use auto layouts. What we want to do is cut the second button in which says, add new constraints when you click. That's if you have your buttons selective. It allows you to position the button from the edges off the screen on the current device that it's running on. So that's important on the current device. So if I want to position this 10 screen points from the top and 10 from the left, you'll notice when I fill those values out, the button at the bottom says add to constraints. So I'll do that at the two constraints, and our elements will jump up to the top. If we click and drag the elements, orange bars appear and these orange bars are telling me that it's out of place at the moment and is telling me by how much. But there's a little orange outline where the button should be. So now if I run this on my iPhone five s, I think you can guess what's going to happen. This is going to put it in the correct place, so it's always in the top left corner, and that means that every single device will display the button in the top left corner. Even if What shall we do here? Let's go to window note hardware. There it is. We want to rotate our device left. It's still displays it in the top left corner, which is excellent. We can rotate it back to right and it puts it back. So I O. S does all of this handy stuff automatically for us? Of course. Are Button still works, no matter the orientation off our screen, right? So let's stop that running now. Obviously, we don't just have to constraints if we click the constraints icon, we can select it from the bottom the side, and you'll notice this space is it to the nearest neighbor. And that means that there's something next to it. It will constrain it, perhaps toe that item so we can constrain various elements to other elements if we want to . We can also give them a fixed width of fixed height. We can change their aspect ratio. Now. The one final thing is the next icon along the little bars that say a line. When you click that we can actually align this horizontally in the container, so that's going to center it if we put zero in there and it's going to center it if we put zero in the vertically one. But in order to do that, we have to remove these constraints that already exist. So let's delete it and select the orange icon into elite. Select the button, select the line horizontally and basically add the two constraints and it pops it to the middle directly in the middle of our screen. So if I move it, we get the same warning you might have to click on and off twice there because I think this is the bug in the early X code, but anyway, it shows you that it centered. And obviously, if we run that, that button will be centered. So that's very useful. If you had a log in screen or something down here, you'd want to put it in the center off every device. So you know it's displayed very prominently, so that is how we constrain items according to the size off the screen that your APP is running on. 24. M4 6 Astronomy Screen Torch Assignment: So it's the moment you've all not bean waiting for your homework or your assignment. Now, this is a little bit tough, but I'm gonna give you some handy clues to get you through it. So far, our torture changes color once it just changes to read, and you know how to do that. Now, by changing the background color off the view, however, I want this to change toe blue as well. Whenever we click the button again and then ready to click the bus. And again, I want to change back to read. So is gonna go red, blue, red, blue, red, blue. So your job is to change the code in the view control of class in order to achieve that. And here's some hints. Firstly, you need a boolean variable to keep track off the screen color. Then you need to use and if else comparison, to check what the current color off the screen is. Finally, you'll have to flip the Boolean value every time the button is pressed. Now this is a little bit tough, and if you're having trouble conceptualizing it, go back to my basic stripped four section and have a look at the variable section collects , blame billions and have a look at the, if else comparison statements To understand what's happening, then I'll just give you one clue. I'll do that right now in X code. I'll show you how to set up the Boolean variable that you need right here. We are in the view controller now our boolean variable. I'm going to store at what we call the class level. That means it's one level into the class. So it's here. It's not incite any of these functions, but it's outside of them and we're going to call this VAR. Screen is rinks, and we're going to set this equal to something which is false, because when our uploads this screen is not red, it's simply dunk. Okay, so that's your clue. You can follow the rest of the clues that FL statements and flipping That screen is red variable as your homework assignment, and I'll see you in the next lecture when I'll give you my solution 25. M4 7 Astronomy Screen Torch Solution: Welcome back. I hope you didn't struggle too much with that assignment. If you recall, we want to change our screen color from blue to red, blue to red, blue to red. And we needed some coding logic in order to do that. So let's have a look at my solution for that problem. Now, if you recall, I left you with one clue of our screen. Red is screenings, red is equal to false. And this is a Boolean. So can only be true or false now and never we click our button. What we want to do is check what color this screen is. So if the screen is red, then this value is going to be true. Se that looks like this. If scream is red, if that is true, then perform the following code. And if it's read, we want to turn it to blue. Self docked view dots. Background color is equal to you. I color guards blue. Then if our screen is not red, we can say else and we can copy this line or cut it into here Now, just a quick note. I did put this semi colon at the end. We don't actually need that. That's just one of my habits. From when I'm typing C sharp or other programming languages, you don't have to have a line ending in Swift. So that's my dad. Sorry about that, right, so this takes care of it. If the screen is red, will turn it to blue else. If it's not, Red will turn it to rent bunts. That Boolean off screen is red stays false the whole time, which is no good, because if it stays false, we will only ever use this part of our if else so at the end, we want to change screens rent. Now we could do it in here. We could say Screen is red, he's equal to false. And then here screen is Red is equal to truth, and that's a perfectly valid way of doing it. But there's kind of a short cut we can use for billions so we can remove that and down below the if else statement so completely outside of it, we can say screen is red is equal to and then put exclamation mark screen his rent, and what this does is it was a bit scared for a second there when I saw the arrows like, uh, if they change something, but no, they haven't it says make screens red, equal to the opposite value of screen is red, so if it's false, physical exclamation mark means it will make it true. So true will be written into here, and vice versa. Right? Said actual uec. Let's hit, play and run it in the simulator and hopefully we will have a lovely switching screen color . Here we go. I'm just going to rotate this whips. I've pressed the wrong combination. If you hit command L, it actually locks your screen. What once do was hit. Command and arrow. There we get. So now if I hit change color, we'll get reds. Blink red blue. But you'll notice, of course, when it's blue, Button disappears because our button is also blue. So that's no good, is it? I think perhaps we should have a white colored button, so let's just do that. I wasn't planning on doing this, but I hate things being unfinished. Let's go to our storyboard, Select our button, and over in the rights we could choose a white color. That means we can't see it now in our storyboard, but it will be visible inside off our app. There we go. So that looks pretty good. Change color. Shane's color kind of looks like a police car. Okay. You could actually use this app to spoof your friends, couldn't you? If they're driving in your in the back seat, just flash this. So they think the police are flacking him down. I think that would be quite funny. I might do that. Someone I know. Anyway, back to the subject at hand that completes your very first IOS app. That was simple, wasn't it? Really, really simple. So in the next lecture, I'm going to summarize everything we've done so you can have a little recap. And once I finished that summary, I advise you to take a little break before you move on to the next section just to let everything simmer down nicely. 26. M4 8 Summary of Your First iOS App: Congratulations. You finished. You've created your very first app, a screen torch and you've learned all of the fundamentals. Let's just have a nice little recap. So you understand what went on? First of all, we created a new project and we looked all the files that come within a project. We paid special attention to the storyboard and the view controller dot swift files. And we learned how the storyboard views and view control is actually link to view controller dot swift files or any other class in those files that we want to specify. Then, in order to create our fully functioning police screen torch that's flicks from blue to red . We added some code to our view, controlling We have the Boolean screens ready called false. And then we dragged in a button click events from our storyboard using the assistant editor and then inside of that button click which fires every time you click the button. We checked if the screen was red and if it was, we turned it to blue and vice versa. We turned it to read and then we flipped. The screen is red boolean So in all of that, I hope you can see how we've connected a graphical part of our programming and the actual language e part or the actual typing part of our programming. That's a very important distinction for you to know as a program that we always want to separate the different concerns inside of R AP Graphics over here code over there Now the final thing that we looked at was constraint. So actually that was the second thing. But the final thing in my summary that we looked at when we have an element in our storyboard, we want to constrain it because constraining it allows it to position itself relative to the size of screen off the particular device. It's running on because lots of devices have different sites, screens, maybe the different pixel densities. So Apple has designed this constraint system, so you have a consistent experience across all devices. Now, later on is you become a more advanced developer. You'll make two versions off your you. I won for iPhone one for iPad because the screen estate is real estate is different, so you can do that. But for now, this is a nice, handy and fast way of getting started. right so well done for completing this once again. And once again, I say, take a break once this is done and whilst you're taking a break here some lovely fireworks to see you out. 27. M5 1 Introduction: Welcome to the next module in this course where we're going to create a temperature converter. So we're gonna build on some of the concepts we've already learned in the previous sections . In order to do that, we're gonna base it, of course, around the neck, which is a temperature converter. What we're gonna do is we're gonna convert from degrees Celsius 2 F. Say, if you put Celsius into this box, you hit this convert button, you will get an output in Fahrenheit. So this all looks pretty simple. Let's go. 28. M5 2 Making the Main Screen of Temperature Converter: the first part, of course we have to do is create the graphical interface off our temperature. Now I find it easier to create the graphics before I write any off my code. There are a few exceptions to that, but for the most part I think that's a good idea, because I'm a very visual person. I like to see what I'm making before I write any code behind it. So this is what we're going to do in this section, which is going to create this very, very basic screen with an entry box, a button and then a text box for our results. We printed out to With that said, This is all pretty straightforward. So open up X code and let's start a brand new project at the main title screen. Let's create a new X Code project by going file New Project. Now, as before, we want IOS and a single view. Let's give this a name. Tempt converter. Let's leave the organization name as well. If you like your identifier as your website. If you have one as swift, we want the language. We don't want core data, and we're not bothered about the test, so we'll just leave them and hit next. Then, of course, less Create this somewhere in our file system. Right? So we're all sorted. We have our brand new project. The first thing I'll do is close some of these folders with side so we don't get confused. And again, I'll draw your attention over to the left hand side where we have our project folder and all the relevant files. Now, this section we're just going to create the graphical user interface, so that is located in our main dot storyboard file. Now, the first thing we have to do is give this a nice, snazzy background. So you know how student from last time click your view controller, click the view inside the view controller And then just to make sure you have actually selected the view on the right hand side, click this identity inspector and this class should have a light gray that says you I view and that tells you've got the main view. The other way to know that you've selected this view is to go to this sort of middle pain on the left and underneath our view controller, we have you available, and that's the same way as selecting it. But this also gives us a nice blue overlay on the screen itself. So we know what we've selected with that selected. Let's click the attributes and let's change our background. Let's click other and let's find that nice orange color that we had before. Now I just want to point out something. It looks like I have an orange color here, doesn't it? Yeah, in my little pickup. But over here, in my view, it looks kind of brown, and this is some strange bug have just discovered. But if I run this inside off my simulator, the color off it is actually the orange that we expect. So I don't really know what that's all about. And normally, if something like that happens, I'd look a the properties over here and look at the Alfa. Perhaps the tent would have something to do with it. Perhaps a pig? No, but there's nothing there. So don't worry. If you don't get quite the right color, it will come out right on this simulator. Right? So we've picked out our love little color. Now what's left to do, We've got to put in our graphical elements and a graphical elements consist off a text entry box. So over important right, we need some kind of element. That's to do with text so we can click, filter and type text. Now, if we just select these, it'll tell us what they do. Displays around of rectangle that contains creditable text. And when the user taps on a keyboard appears, That's perfect. That's exactly what we want. That's click and drag one of those over to our view, and their backgrounds changed color to the correct color. Now strange anyway, now that we have this, we can sort of loosely place it somewhere on our screen. We can select these handles at the side. We can drag it out of bed. If we worked and kind of center it now, I'm not going to position it using these controls at the bottom yet, because I want to drag on my other elements se Let's get those on before we decide on positioning. Let's get a button, and then this button, I think, should be colored white. And remember, if you can't get this up up at the top, click the attributes buttered attributes inspector. Then we need to change the button text to convert to Fahrenheit. And it gets a bit squash so we can click it once and just drag that out and correct my spellings converts to Fahrenheit. I'm gonna kind of sent to that some way. And I'm also going to increase that front size. So over in our little properties section, we can click the tea and we can increase the font size there, or we can increase it just right over on the right hand side. Here we get a fairly large button. You always have to remember that this is gonna be quite a small screen relative to someone's hand, so your button needs to be relatively large. Now, your button tap area is everything inside off that rectangle? It's not just the text area. Okay, so we've got that. Then we need a box to display our result. Now, this first box, we can enter text, but our result we don't actually want to enter any text. We just want to display some so we don't want the user to be able to edit it. Let's see what options we have for text over the bottom right object display. We could have a text view. What else have we got? If we just delete text, we can actually scroll through everything. So we have a whole bunch of stuff relates to view controllers. Ah, we have this thing called a label, which is a read only text view. That sounds perfect. So let's drag that over to the middle. Let's change its color. So should move this down. And our color is right at the top. Let's use white, and we can increase that font size as well and then drag it out. You'll notice it doesn't line up because it aligns by default over on the left hand side. So in order to change that, we can change alignment. Now, little attributes, Inspector, this button will do it for us. Okay, Now, I think we're gonna have my convert button moved down to the center. That's pretty good. Can I have this label here somewhere? And this entry box about here that sounds looks good, Doesn't sound good, doesn't make any noise. So all of this is centered around the button. So it makes logical sense to click the button and to position this both horizontally and vertically in the center of the container. Now we can position everything else based on that buttons position so we can press control and hold it down. Click convert and hold it up to the text field. And when you release the mouse button and then you can release control, too, you'll notice we have all of these options. Horizontal, vertical, spacing, top. We can align the tops of them. We consent to them vertically. There's a whole bunch of things we can do. We just want to vertical spacing. So if we click that it will automatically put a come straight in for us, that's the one of selected there. Now. If I click that constraint, you'll notice over in the right. We can actually change the value of it. So I can quite that up a bit to maybe 25 and you see it shifts up. Now let's control click from the convert button to the label, and let's have some vertical spacing there, too. That looks pretty good Now this convert button, I think, needs to be larger. So let's crank up that front size and notice how everything moves out of the way to accommodate those constraints that we placed on it before. Let's click our label. Let's change it to answer in Celsius, and then let's change the size of it a little bit. Let's make sure it is completely sent it. Okay, that looks just about right. Now. Let's select our answer and Celsius label. That's selected constraint on Let's give it a fixed width because we don't really want this width to change. Okay, let's also give it a fixed height. Okay, now your motives just below it. This wits is colored red, and I need to de select it and just select the label for you to see that there's this red color. That means that this isn't fixed, and that means it can move around, which isn't good. So what we need to do is align this to the center as well, so it's aligned horizontally. So let's select our horizontally and container and add that constraint and the red goes away. Now it knows where it has to be on screen. Let's do the same for our text entry at the top. Let's selected. Let's give it both the width and a height, and you'll notice that Red Bar appears because it doesn't know where it is, horizontally speaking. So let's also place that whoops center horizontally and the red goes away right? So that's all sorted. If we click each item, everything should be blue, and we should have no errors. Sometimes a little warning. Try and got pops up, but we'll see that later on. When I make a mistake somewhere in this course, all right, I think we're in a good place to test it. So let's select one of our simulators. Perhaps I will have an S E this time. Let's hit play and drop that into the simulator just to test out our little display. We can also test out the rotation as we did before, and just while so waiting for it to load. It's a good idea if you test all of your graphical layouts on as many devices as you can't both simulators riel with rotation without rotation, etcetera because there's a lots of little mistakes that can pop up that you can fix right now that you can ensure they don't pop up when it when a user has yet they're in their Excuse me when the user has your app in their hands because when that happens, if they get a bad experience, you will get a one star review, which obviously sucks, and you will get them even if you're the best developer in the world. But we want to try and avoid those as much as possible, right? So there's our simulator of temperature convertir ease up and give it a second to load. And doesn't that look quite nice? I actually really like that now. If we hit the button, nothing happens. That's expected. The text of the bottom. We can't click it, but we can actually click this box. And when that happens, our keyboard pops up. Now we want a number out of this, so we want to restrict our user to numbers. Let's do that back an X code. Stop it running. Click the text entry box, then over in the right. If we scroll down, we have this section called text input Traits. What kind of text are we putting in? So let's have a content type. Let's click it and look at all these things we can have. This is the fantastic thing about I West. We can say It's a name given name, so it'll capitalize stuff for us. Loads and loads and loads of different things. And if we keep scrolling down, let's see if we have something like a number, it appears not, which is a shame. So let's keep going down this list. And so we get to keyboard type. That looks good. Uh huh. We can have numbers in punctuation. We can have a number pat that sounds like what we need. So with that selected, let's run this app again. And now we should get up. What should be familiar to you? Whenever you've clicked some kind of inputs on your IOS device, you will get a number pad instead of a keyboard. So let's click it. And there we go. We've got our number pat, so we can enter some text if we want. If I hold down one of these buttons, nothing happens. Which is good, because we only want numbers. Of course, we've limited our user because we're not letting them put in a decimal point. But that's fine. I think for this act, because I don't think anyone ever wants it that accurate. I could be wrong. Of course, anyway, we have now designed the main screen off our app. It's time to move on and write some code. 29. M5 3 Connecting Main Screen to Code: We now have the main screen of RM sorted out for converting from Celsius to Fahrenheit, but the button doesn't actually do anything yet, So what we have to do is festival. Grab the input from that bucks. We have to grab the bus and click action, and we have to output something in the label at the bottom. So let's look at how we connect all of those things to our coat. This will seem a bit familiar because it's what we did in the last app creation session, where we connected a button toe our code. But this time we're connecting a few more elements. It's pretty simple, so let's get on and see how it's done. Now if you recall when we have a storyboard, it is connected automatically to whatever is specified here in its class. So in this case it is the view controller, and if we click that view control of Dot's thrift over on the left, then we're presented with that class view, did load and did receive memory warning. Other standard functions are that are in there by default. So let's go back to our storyboard and let's connect the two festival let's click these icons at the top right to make a little room. If you have a bigger screen than I do, then you might not have to do that. Let's open the assistant editor, which is these two circles, and that brings the two files side by sight. The first thing we have to connect is this input box. So hold down control, click the box and drag it over to your file. When you release the mouse button, it gives you some options. You can select this as an outlet and outlet is simply a reference to that box in that screen on the left. So let's call this something interesting. Let's say Entry Tim Text Field. Now this is your first glimpse at how to name things. First, we name it as to what it is, but the next thing we do is we actually upend the type of thing that it is. So when we're using this later on in code, we know what type of thing it is without having to mess around and look around our file too much. So there's on type you white text field. You don't have to type you. Why because text field is good enough for us. Now we're gonna connect it. Now we have a variable for that item. Okay, Perfect. Let's now connect the very bottom label. Click and drag somewhere inside of our file as an outlet. And let's call this answer label. So I applied the same rule a pendant with the item or the type of thing that it is. Let's connect that. Perfect. Now, what I'm gonna do is I'm gonna grab these two lines. I'm going to cut them, and I'm gonna put them at the top off the file. Now, that should be okay. We shouldn't get any errors. But just to make sure, I'm going to go up to my menu and I'm gonna look for something called Build, which is under the product menu, and that just simply tries to create your app and make sure there are no errors. And in fact, succeeds were okay moving. We should be okay. He says, crossing his fingers. There we go. We're fine now. The reason I moved these up to the top is it's kind of programming standard practice. You put all your properties and your variables at the top of your class. So you know where to look in future because you might have a file that has 1000 lines of code, and you don't want to have to look all the way through for these variables that you're looking for. You just want to look straight to the top. It says Kind of a convention. Do it that way and you'll be fine. The final thing we have to do is out button, so let's click. Convert to Farron Heights Control. Click it's and drag it across down here. Now this doesn't have to be at the top because it's an action. It's a button click. So let's have convert Boston clicks and the type is any. You can change that to you white button. I won't explain why that is right now, but later on I will. The event is touch up inside, which is a plane Click and click connect. So now we have our function for the buttons, so everything is wired up, so to speak. Let's hit product build one more time, and this will tell us that everything works, and if that's true, we can actually send this over to our simulator hit play. And if that shows up nicely, then we are okay to proceed. Excellent. So a little entry box still works? Everything is all good, right? We're ready to move on to writing what we call the logic off our act. So this is the code that will take our number. It'll converts to Fahrenheit and then display it. 30. M5 4 Writing the Main Code: Now we're going to write the main swift code for our temperature comfort to act i e. The code sits behind here and does all the magic for us. So open up your project and follow a lot, right? Here's our project. Let's reorganize it. Let's switch off this assistant editor that we had left over and let's re initialized hour side bars and move this back into the center. Here we go. Everything is fine now were coded. So let's open up our view controller dot swift. And remember, we have an entry, temp text field and answer label, and a convert button clicked. So what's the first thing we have to do? Well, we actually have to check that. We can get some text from that entry field because it could be empty. So the first thing we do is we say, if let's result is equal to our entry, tempt text field dot text and then open and close curly braces. Now, why have I done this? Why have I put if let why didn't I just have this? Well, let's click this era and see, or this warning result was defined but never used. Yadi idea Okay, fair enough. That doesn't actually test what we need to know. I've used this because this text might not actually exist. And I don't mean the text that someone's typed in. I mean the actual property. In programming terms, it's a bit difficult to understand at the moment, but it's always a good idea to check that things exist. And then if they do, we can actually continue. So we've got this text. It exists. We've got a string out of it because if I go back to this text and I type that again, it tells me this is a strength. But look, it's optional. There's a question mark Next, a string. Remember optionals from when a couple of modules back. So there might be texting there? They might not. So let's see if we get through this. If statement, then we want to check if they actually put some texting and not just blank white specks. So we want to check if the result is equal to quote, quote, and that means blank because there's nothing between them. So if there is no result, we want to stop processing because it's not a good idea to continue so we will type return . And what return does? Is it completely exit out of this? It doesn't carry on processing any of the lines below it. It completely just exits out of this single function. Okay, bunts. If we do have some, then that return won't get processed so we can say else and we can do something with it now . The first thing we have to do is convert that number, because at the moment it's a string and not a number. And even though the keypad pops up and that's the number, our actual code doesn't know, that that's the number is still thinks of it as a string. So let's correct that. Let's say, if let's no is equal to and what we're gonna say is a double open brackets results. Now what have I done here? Well, I've taken the result, and I've said, if you can create a double from it, that's why it's in between these two brackets. Then put that into this variable called number open and close our curly braces. Now, I did say before you want to avoid converting as much as possible, but in this case it's something that you actually have to do. Okay, So once we've got backs, we've got our number. Now we need to convert that number 2 F. So let output equal to the number times. And as to risk is times that's above your eight on most keyboards hit Shift eight. And the way you convert to Fahrenheit is by saying nine divided. That's afford slash five plus 32 is how you convert to Fahrenheit from Celsius. Perfect. So we have our own. So where do we put it? Well, we want to put this into our answer label, so answer label don't text is equal to And we could just say output. But let's see what X Code says about that. We have an error, because is that the correct era? It'll change. There we go cannot assign value of type, double to type string. That means this output is a double, and we're trying to put it into a string which doesn't work. So we have to cast it to a string again. Okay, so once we run that we should have our results. Let's save it and let's hit play. Here we go. Come on first, Let's check if we hit the button. If it's empty, nothing happens. Let's click the box and let's put what temperature is it where I am, about 30 degrees Celsius. Let's hit. Convert to F. We have 86 F. Ah, but we have a problem. The keyboard is in our way. We're not going to cover how to move keyboard out the way just yet. That comes in a much later module, but for now we can go to our storyboard, and what we can do is we can shift everything up. So let's click out. Convert to Fahrenheit button, click this horizontal bar because, ironically, the horizontal is actually spacing it in the Y axis vertically. And if you double click it, you can change its constant. So let's and perhaps 75 to it. Or let's actually subtract 75 and that moves everything up and you can see the beauty of constraints. It moves everything with it. So now if I run this, that should be moved up and our keyboard won't actually get in the way. So now we can click it 30 degrees convinced 86. Perfect. Let's have 50 degrees convert 1 to 2. So you have a beautifully working temperature converted. Now, in the next section, I'm going to give you just a little tiny assignment, and it's nothing you haven't done before and it doesn't take very much time, so I'd like you to attempt that next. 31. M5 5 Homework: it's time for a little bit of homework. What I want to do is to take our app as it stands. And I'd like you to add a little label right up at the top off the screen right there. And this label is going to be kind of muted. It's not a main feature of our, but it tells us how many conversions we've performed in that session. Now, this may seem a little bit ridiculous, but it has a very good purpose when it comes to making absent your sending data back and forth, putting stuff in the database and what not adding things and counting the number of times you've performed certain operations is actually quite good for debugging. You're out and nailing down the areas that are hogging all off the process of power. So this homework actually has a very good reason. Now I'm not a meaning. So here are some hints to help you on your way. First of all, you are going to need an integer variable to track the number off clicks, and this is gonna be a class level variable. Then you're going to have to add one to the integer every time you click the button. And finally your update the display to show the actual number off clicks. So that's it. Good luck and godspeed. 32. M5 6 Solution: Let's go over the solution to the homework that I set you. If you recall, I want you to add a little one. Conversions, two conversions, three conversions counter at the top, left corner off your app. That was kind of muted. So let's have a look at my solution. But just before we do. If you have a slightly different solution that is absolutely fine in programming, there's no really there's no wrong answer as long as it gets the job done in the least lines off coat. So if you have a solution that's better than mine and feel free to post it so all the other students can see Open up your project and let's have a look at what the solution looks like . Okay, with our storyboard open, the first thing we're gonna do is drag in a label, and we're gonna position that somewhere near the top left corner now, because we've positioned in the top left, every device has a top left corner, so we don't have to worry so much about positioning. So what we can do in that case is simply 12 and 12th at the top and the left, and that's going to constrain it to the sides off our screen. You can see there are two very small labels there. If I zoom in, you can see that even better. So you've got these two little blue constraints. Okay, so that's perfect. That's click our label. Let's extend it out a little bit. Let's give it a fixed length wits. Add the constraint. Now, just one point to note. If I edits that with it says 156 the smallest wits IOS device, at least one that you hold in your hand is 320. So 156 will always fit. We don't have to worry about that. Let's select the label again. And what we can do is set some properties on it. So, first of all, we want this color to be kind of a light gray so it doesn't sort of intrude. The other way of doing this is you could make it sort of dark gray, and you can scroll down to Alfa. That's the opacity off it. How easy or hard it is to see through. And by reducing the Alfa, you also reduce its visibility. So if we just click off of it. It's now very muted. Perfect. Now let's open our assistant editor. So to make some room and let's click and drag that label into our little row of I B outlets . And let's call this what we call this busing accounts label or perhaps a better name for it is Button clicked. That's much more descriptive now. It might seem I'm being a bit pedantic about that naming, but you can imagine if you've got 10 buttons on screen that naming can actually quite important for understanding what's going on. So we just want this to be an outlet. Let's simply connect that. Okay, let's turn off the assistant editor and put out bars back in place. And always remember, You don't have to do that if you have a wider screen than I do. But I need a smaller screen so you guys can see what's happening much easier right now. It's been ugly to have this label there, so I can double click it, and I can edit it directly. But I can just delete. That doesn't mean the labels is gone. It's still there. There's just no text inside of it. Now we can do the same without answering Celsius whilst we're here, why not? So we can just simply remove that. So now it looks a little bit neater, a little bit more happily, if you like. Let's edit the view controller and put our functionality into this label. So first of all, I said you needed an interview. So that's simple Off of our count. Interject equals. Not so that should be. Okay, Let's wait for those errors to disappear. There we go. Okay, Now we want this count to go up every time our button gets clicked. So we want to look inside. Our convert button clicked, and we only want to increment it. If our convert button actually is clicked and it works, we don't want to add one. If we have nothing in our text field, for example, so we know how to add, we can say account plus equals one. Perfect. Then what we have to do is change our label. But I've got a different solution for you, which will get into in a minute. It's quite neat. Your luck. It. Okay, so we've added out count. Now we need to change our label. So what's our label called Button click Label Button Clicks label. We want to change the text of it. And don't forget we have to convert our accounts number into a string or we can't assign it to that text. Okay, so we got everything there was sorted. I'm gonna save that. And perhaps we will actually add on a bit of strength. Plus and all that. Plus does when you're talking about strings, is it con Katyn? Eight strings and actress means put them together. So if you have my name, ground and laptop and you smash them together, they could become one string together. And that's what the plus icon does when its strings when it's numbers plus is actually addition. So we want to add quote space conversions now, mind skips the next line. So I just moved this across so you can see it. Okay, so we're gonna say first and I'm gonna run this, and we should get that pretty little label appearing at the top. There we have it. So let's drop something into this little conversion Box 22 converts. We get our temperature and way at the top. We get one conversions now, obviously, conversions and one doesn't really match, but we'll skip that for now. I'm sure you could fix that if you want, and every time we click it, we get an increased conversions. If you ask me, though, those conversions are a little bit too high. So what we'll do is we'll give actual storyboard and will select the label, which is difficult to do when it's invisible. So you can use this selection tool on the left and we can go for button Click Label, and then we can change this distance. Perhaps 20 is more sensible, so don't drop that label of it for us. And now what else do we want to do here? I actually don't think we need to do anything else. Everything works as we sort of expect it. But there is one other thing we have to talk about. Sort of the elephant in the room is this function here? This is quite a large function. There's a lot of stuff going on. Now look over here. We've got our button clicks, and once we've done that, we've grabbed a number where you've got an answer label were out putting that are also during the count. What if we had a different bus and somewhere else during the same thing? Well, we'd have to copy this code, which is not a good solution. So what we're gonna do is create a separate function toe, hold some of this code. So let's go down in our class and type funk. And let's call this something sensible, like update count. It's just a plain function. It takes no arguments. And what we're gonna do is we're gonna grab all of this stuff for our updating of the count label. We're gonna cut it and paste it straight into here. Perfect. Now, we are also going to have another function. Four calculates and display Answer. Or actually, we're gonna have calculates answer. And this is going to take in a double as a number, or rather gonna have number double. Okay, so what we have to do days grab this. Got it dropping. And I've just made a little error there. Let's get cold on it. So let output equals number, and we've converted it to Celsius. There we go. That's working now. Okay, Now what we want to do is return the answer. So we're gonna put this in and this should be familiar From when I taught you about functions in the basic swift four section of this course, we are going to return a double. So underneath here we will return the output. Perfect. Now up here inside of our convert button clicks. Well, say, let's answer equal to count Answer. And we're going to pass over that number. So this numb corresponds to this, and this number is simply the name is the variable that we have in this function. Okay, now we can set the answer labeled Doc text to be a string made from the answer we've just pulled out from our function called Cal Cancer. Now you may be looking at this and going Wow, that's a lot of complexity. And before, it was much simpler. That is something that's unfortunately, you have to live with at this early stage in your programming career, because in programming, if you can make something a function and it makes sense to do so, then you should do that, even if you only have one or two lines in that function. So, for example, here I wouldn't even have to say let output what I could say is the following. I could just return that directly. So I only got one line and you're like, Well, why don't you just use the one line inside your convert button clicked instead off making an extra two lines. The answer is your functions. They can be this simple. Sometimes they're not. And also if I have a different button, but I want to calculate Fahrenheit from it, I have the code available for me right here and the whilst. That might not seem important now. Later, Ron, if you come to edit your actors, you realize there's a burger in error. You only have to change this code in one plates. You don't have to go to all your convert buttons and change it there. So that's a very important thing to note. Okay, the last thing we have to do is just hit play, and let's check that this whole thing works. I'm pretty sure that it will. You can't see me crossing my fingers. Come on. There we go. Right. Let's test it out. 55. Oh, where is our conversion label? Well, I'll tell you what I've forgotten to do. It's something everyone forgets to do. And that is I actually forgot to call updates. Count inside of my convert button clicked. So let's fix that. Let's have updates. Count. Now let's build and loaded up and we should be good to go. Hopefully I'm wondering if I should cross my fingers this time because they didn't work out so good last time. Come on, you can do it. Here we go. It is the moment of truth coming up. 55 convince. There we go. It works. And our label has been dropped quite nicely downwards. Perfect. Right? So you now have working out and you've seen how we split things into functions. Even if it's only one or two lines and doesn't make sense right now, it will make sense later on, the more complicated your APS get 33. M5 7 Summary of Temperature Converter App: Well done, guys. You have finished this module. You've made your very own temperature convert app. And it wasn't that hard. I'm guessing you made a brilliant little tempted converter just like the one you see on this screen. You learned how to take text input and even restrict that toe only numbers with the Kiev. Had you learned how to create a button and why they're up to your main code so you could convert the temperature. And finally, you learned how to convert that strength into a double, which meant you could then do maths on it. And you could out put that double back into a string on display it on screen. And then finally, your homework was to load up a label that told you how many conversions you had made. And along the way, we learned a little bit more about how to organize our programs in terms of creating functions and when we should or shouldn't do that. You also learned how to check that the text part off these inputs actually existed. So we don't get some kind of horrible crash when we run these APS later on. So once again, good job. Well done. And as usual, here are the fireworks 34. M6 1 Introduction to Your App Idea: Let's have a little break from programming. Let's do something fun. After all, you are here to create your own naps or somebody else's APS. But every app begins with an idea. So what's your APP idea? I'm sure you've got tons of them now before we dive into designing your very first app idea . I just want to point out what should be obvious, but sometimes isn't even to professional developers. If you want to design the next Facebook app or a similar app to it, you have about a year or two at least off development ahead of you, because those are very complicated. They might seem simple on their surface, but there is a lot going on behind the scenes to make them the experience that they are. The same goes for Instagram and Twitter. Twitter is probably the simplest off. All of those is just transferring characters. But make no mistake, Twitter still has a development team, not just one person. So what I'm trying to say is you need to scale back a little bit of your initial ambition. Now, I don't want you to get less excited, but I do want you to start small. So what's your APP idea? What do you think people need or want? Well, we can just grab a piece of paper or an iPad in the sky. Lis, I do quite like the new iPad Pro might just get one of those and you can start designing. But before we do that, there's a couple of things that we need to define first, to give you the best chance of making your app a success. 35. M6 2 What do People Need or REALLY Want?: you can see by the title of this lecture. What do people need or really want? You can see that I've put some caps up there, and there's a good reason. It's because those two capitalized words and perhaps the word want, should be your guides. When you're making an act. Now, it's great if you want to make a nap because you want to do some train spotting. But if people don't need that or really want it, then you're not going to have a success on your hands because people don't have a reason to download your act. So let's dive a bit deeper into what need actually means. First of all need means that something is almost impossible to live without. Think about the iPhone that you've got probably very near you right now that you keep checking constantly. That didn't start out as a need, admittedly, but it soon became one. Now we all need a smartphone, and before that we all need it a mobile phone and before that, well, we didn't need anything mobile cause we couldn't have it. So when it comes to your you need to think, what do people need? What on a good way. To have an idea of that is to look at your own life and see what you need, what you need to use every single day. Now that's the reason that IOS has sort of included a torch into its little quick display screen. Because we all need a torch occasionally, that's a classic example. Then they don't have to need it right now, just like the example of smartphones. They either know they need it or they just don't know yet. But you do, because you're the developer and you've spotted that need amongst a select few people. Now it's a bit risky to do because it might turn out that no one actually needs your app so it could be a flop. So it's best to er on the side of caution and think, What do people actually need? What do they say they need? And look at their actions? Do they look for APS that they need finally simple, simple, simple, simple and focused ideas win the need war? Let's take an example off you have a torch, great, very popular. But if you said what, I'm gonna add more things to it, I'm gonna make it the Swiss Army knife, so it's gonna have a torch. It will have a calibrated ruler on this screen. It'll have a spirit level. It will do everything. Whilst that may appeal to a certain subset off D. I wires someone looking for a torch isn't gonna pick up your app. So sometimes it's better to have a separate app for a torch as separate app for ruler. Because at that point in time where someone needs that specific item, that is what they search for on the APP store, they don't search for a toolbox. Okay, that's needs taking Carol's. Now what's the next section? Well, if someone really wants something in an app, how does that work? Well, the very first point is that the way to make people want something is to make it a novel concept, so no one's ever seen the slickness off your kind of that before. But bear in mind slickness takes a long time to develop. It's not a one or two week project type thing. What you want to think off is that this is a novel. It's never been seen before so that people will rave about your app. You'll get a small set of hard core fans that really love it. But there's a little caveat here. You may have a novel concept. People may really want it, but it's gonna have a short lifetime, just like fashion. If your app is amazing, people will soon get bored of it, no matter how amazing it is until the next hot thing comes along and they'll go get that one and delete your one you. So with short lifetimes you need to do one thing, and that is evolved quickly. So you've made your novel act. You've got a short lifetime. You need to really listen to what your users want, and then you evolve into the thing that they actually want slash need. So this is where you can transfer once into needs so they feel like they can't live without Iraq because it fits into what they need so perfectly. Now, I would say to summarize this lecture, you want to go for needs, needs, needs needs, that's your number one priority. If you can't get that, or if you just really, really want to make a different kind of act, then go for really once it has to be novel. Bear in mind. It has a short lifetime, and you'd better revolve very quickly. Okay, That's all the intellectualizing that we need to do about this concept off conceptualizing your now it's time to move on and actually start designing it with some rough sketches. 36. M6 3 Your Idea on Paper: the very first step I like to take when I'm designing some kind of that is to put my idea on paper or on the screen of, say, my iPad with a stylist. This helps get my creative juices flowing, and it doesn't limit me to typing stuff out or drawing on something like Photo Shop, which is kind of laborious, so I'd advise you to try the same. It may not be right for you, but you may love it. So grab a piece of paper and a pencil and pen, or even your colored pens if you like. And let's get to designing a nice, simple needy. Sometimes you're walking around town and you want to check out what's on because your little bit boat. So one option you've got is to put up a website of your local adverts looking one of the local papers, etcetera, etcetera. But sometimes they missed the things that are really hot, the things that are really happening or they don't advertise them as well as perhaps they should. So I think it would be great if we had some kind of app that was transmitting your location to some kind off server and then later on. Your location could be used completely anonymously, of course, and your location would be over laid onto a map of your local area along with everybody else's location. And what would that achieve? Well, it would tell you the hot spots off where most people were save most people in your town. We're using this out. You could actually see where everybody waas now. Obviously, we will share any private data in this out. But if there's a big pink spots here, then that's obviously a hot spot that we should probably check out so we can go there ourselves. So it's nice, easy way to see where people are actually going, how they're voting with their feet if you like. So that's a nice, basic simple idea on the app Now what you have to do is developer when you're designing these things, is you have to really, really specify what goes where and how it works. So in order to do that, I was going to raise all of this. So we've got the basic idea. We don't have to worry about the server sending stuff quite yet that will come later in this course anyway, What we have is I will use that opens our app left excusing my ipads gonna beat Spassky that our user opens the app. And what are they presented with? Well, we actually want us to be quite simple, So I would suggest they are presented with a local map, and you can easily use Apple maps for this. You don't have to build your own. He just simply embedded, and that is available in other parts of my course. And then being I us, a little pop up will appear that says, Allow GPS or something like that and work users simply clicks yes or no. Obviously they have to click. Yes, and that's all there is to it. So there'll be no other settings that your user can do. Really, really simple. Now, why do I make it this simple? Well, the answer itself is actually quite simple. It's because as a developer, we have no idea what's going to catch on. And when you start making complicated things like, Hey, let's share on Facebook. Let's share on Twitter, which actually isn't too difficult. But let's share on Instagram or whatever it is. Let's allow our friends to contact each other with different permission levels. That gets really complicated really fast. And instead of spending a week or two on your side project, you're going to spend months, maybe even years in some cases and all together this is called feature bloat, and it's not something that we want to introduce in our lives at this point. So what I want you to be doing is with your piece of paper or your fancy new 10.5 inch iPad pro. I want you to draw a very simple app for yourself, and I will. I don't want you to worry about the implementation specifics of it. All that I want to see is a simple, basic screen off information, perhaps at the most two screens off information. I mean, I've got a personal mantra that I live by that if I can't fit my complete app in two screens or the core concept of my app in two screens, absolute maximum, then I don't have a viable app. That's an important thing to note. If you can't fit your concept into one small box, no one will know what your concept is about and two. That means no one will give you any money for it, either through using it and advertising or paying for any extras that your APP may offer. So your little bit of homework here and obviously there's no solution. But this is your homework to do is to create your own very simple app on a piece of paper. You're not necessarily going to make this, but you might do later on once you've learned a bit more programming. But I just want to get you into this mind set off, creating something people need or want and then making it really simple and ultra ultra focused so everyone can understand it when they come across it. So go ahead and do that now and good luck. 37. M7 1 Introduction to Calculator: it's time to start getting a little more complicated and a little more hands on with a slightly more complicated version off a nap. And there's no better candidate for complication than a calculator app. And this is what you're going to be making this lovely calculator we have on screen now in the next lecture or provide you with all of the images that make up this APS interface. You don't have to worry about that. This app has three sort of unique things. First of all, we have a number display pad. It's NorAm entry box. It simply displays the number we've clicked. It's got a number pad, of course, and it's got a whole bunch off operations that you can perform now On the face of it, this might seem fairly simple, but actually in the background it requires a bit of thought. It's not difficult, but it does require a bit of sitting down and actually thinking about what's going on. So this is a fantastic module for showing you how you can break down complex app ideas into really simple execution in terms of coat. So with that said, let's go 38. M7 2 Making the Calculator Screen Images, Image Sets and Buttons: has always The approach I like to take when I'm making my APS is I like to do the graphical user interface first, if I can. And if it makes sense, so that's what we're going to do. We're gonna make the main screen of our calculator, and I'm gonna provide some resource is for you all of these images so you can embed those into Europe. So let's see how we embed images and create a Jew. I from it, open up X coat and follow along. The very first thing you should do is download the assets that are included with this lecture. They come in a zip file and on Mac, if you simply double click that zip file, you'll get a folder. And if you open that, we have all of the numbers and the other symbols that we need for our calculator app. So we're ready to go once you've got that Open up X Code nine and let's get going with a brand new EP. Create a new X code project. You guys should be used to this by now. We want a single view app and we will just call this calculates me or something funky. Whatever you feel like. We leave the options as they are hit next and simply save it wherever you want to. I'll save it here on my desktop. Right, So we have our basic app. Now, I just want to introduce you to a few more intermediate ideas off IOS development. And the first thing I want to show you before we carry on is that in this section here, if you click the main project name, we have this info box that pops up. The first tab is called General, and this contains the name and the bundle identify of Europe. The bundle identify is how the APP store knows which apple's yours and how other APS No, to open your app store. If you allow that to happen, If we scroll down, we can get to this signing section. Now, if you have a paid up developer account or, in fact, just a free account, you can add your signing here. You need a pay developer account, actually really saps. But you can make do with a free one whilst you're not planning on releasing below that we have deployments info and in here we can choose our target because you might be targeting things on IOS 11 that don't exist in 10 9 or eight. So you might want to say at least IOS 11 needs to be on the device, and then the APP store will take care off the rest. It won't let older IOS versions download your own below that we have devices. We can choose iPhone, iPad or both of them, and then the rest. I'm just gonna leave for now, so it's just a a nice little knowledge freshen up for you so you can understand what's going on whenever this screen those right, Let's get back to making our calculator screen now. What's the first thing we have to do? Well, the G u Y. So we head over to our main story board. And as we might expect, this is completely blank at the moment. What do we want to do? Well, we want to drop in some image based buttons, so buttons that have an image as a background therefore we need images Now. Unfortunately, it's not as simple as I'll just drop in the images of Got we actually have to go and create what are called image sets and image sets are an asset, and assets are contained in the asset stopped XY Assets file slash folder. If you click that, you'll notice we haven't out like on. And if you click that we have a whole bunch of device sizes and what not that come up. So this is where you'll have your APP icon in the future because it's an image. Don't worry about that. For now, what we want to do is head to the bottom off this left hand pane ish and hit plus, to add a group or image sent. We want to add a new image set, and then if we double click it, we can actually change that set to anything that we like. So I'm gonna call this one for the number one. You could also, of course, call it number one if you wanted to. As long as you stick to a decent naming convention, it'll be fine. So how do we get our image in? Well, let's just hit two X and actually just before we do that we have one x two x three x, and these correspond to the display densities off our devices. If you want to know more, just look it up on Google Image Assets IOS one x two x three x They correspond to older devices that had a lower resolution screen and newer devices like the iPhone seven. Plus. What we can do just for simplicity sake is click the two X empty box. Now it's in here that we're going to drop our image. So if we head over to find her and get our number one image, we can click and drag, it's and it goes straight in. So that's sorted. We have imported to the image now in terms of scaling. IOS is going to take care of that for us when it comes to running the app, so we don't have to worry about that for now. There are some considerations later on in your career that you will need to be aware off when it comes to scaling. But for now, we're good with one in the two X. Let's go back to our main story board. We want to drop in a buttered to correspond to that one, so let's go down to our object exploring the bottom right and side but one. Then drop it in. Now this button needs to be a square button, so let's fix its dimensions. It's click our new constraints at the bottom. Give it a with and the heights, and I think we will have 64 now. Just a side note. Apple do say buttons have to be 44 in size 44 by 44 at least, but we're gonna make House 64. Make them nice and big. Gonna add those two constraints. And of course, it shows red. But that is fine. We can just drag things around on one of the corners, and we can make it roughly the size it needs to be. Now this button needs to use that one image that we've got. And if you come over to the Properties Explorer on the right, we can either choose image or background image. Now which one is correct? Well, as always, it depends. There's tried them both. Let's select the image and get the drop down. Our number one appears automatically, which is great. And if we just resize this again because it's going a little bit crazy, notice what happens. It's kind of overlapping the button in a very strange way. So what I'm gonna do is remove that and I'm gonna choose background image instead. And now the background corresponds to the actual size off the button. Whatever we've set it at, the next thing we have to do is remove that button text because we don't need text. And hey, presto, it is almost done. Now, you may be tempted to position this insight of your screen right now, but it's not actually a good idea because we're gonna have a whole bunch more elements toe ad. So what we're gonna do is we're gonna add all those extra elements along with all of these extra images in our assets file. So what I want to do between this lecture and the next lecture when we continue this layout is I want you to add an image set for every single image that we have. So number two here, I'm going to drop in the number two, and I'll just show you that one more time for completeness. Three will be the number three, and you're gonna do it for every single one off these images that is left. So go ahead, do that. Just add the images, don't have any buttons yet, and I'll see you in the next lecture 39. M7 3 Making the Calculator Screen Stacks and Constraints: Hello and welcome back In the last lecture, I asked you to continue setting up all of those images I provided for you as image sets in IOS. So let's have a look at your project and see how you got along, right? So you should have all of the images, roughly speaking, that you see here your names for them might actually be a bit different. And that is perfectly fine. In fact, that's better. So you can begin to understand and think for yourself. What did you call your own image and how do you refer to it? Right. Let's go to our main story board. So far, we have just the one number which should be roughly 64 by 64. If you grab the corner of one of these images, by the way or buttons and you hold down shift when you move it in and out, it does it to scale. So it does both the width and the height, regardless of where the mouse cursor is going. I don't have Is it 64? Okay, now it is simple enough. We can copy that, and we can paste it. And that is a perfectly legitimate thing to do, and we can pace it again. So to copy, just hit command, see? And then command V to paste. So what am I doing right now? Well, I'm just laying these things out very roughly speaking so that when it comes to it, we can start positioning them according to where each one is. So now, once you gotta row full, we can actually copy that, and we can paste the whole road, and we can drop that down here, but there is actually a better way of doing this. So instead of pasting that second row, I'm gonna hit commands it. I'm going to select this first row, which I think I've actually pasted in twice. Let's do commands that again. There we get just one. And if you're not sure how many times you've pasted it in, go over to your view here and it will tell you you have four buttons. Select. Um, all we're gonna use this brand new concept called stack layouts. Now stack layouts, make a box if you like, and that box allows you to place elements in it and spread the elements out inside of that box more or less equally or in any conflict configuration that you can think off. So without elements selected way down at the bottom, if I hope it down here, it says embed in stack. And if I click that button, all of these items get transported into a stack view. If we look in our list of items, our buttons up now inside of this stack view this stack view if we look at its properties, has a horizontal layout, so everything's gonna be spread horizontally inside it. Of course, you can also get verticals, but we're not going to do that right now. Then if we select that stack view again, we have some other options. The alignment. We can fill the whole stack view, which I think is what we want to do. We can have everything. The top, the sense of the bottom. We can have it any which way we like distribution. We can fill items equally proportionately equal spacing, etcetera. Let's leave it, Phil. Feel free toe. Actually experiment with these later on. If you so wish No, let's get our stack view. And what are we going to do? Well, I think will position this stack view according to the edges off our screen. So let's hit control and it's kind of finicky to get it. Yet you might get a button. So what we'll do is we will hit control and click this stack view, and we'll head over to our main view and release the mouse. Now we want the trailing space to container, and then we're gonna do the same on the other side, which should be leading space to container. But he has something that happens quite often. You've clicked it in the wrong direction, and Extra has tried to be too clever. It's gone. Oh, he's going left to right. Therefore, he must want this side. It doesn't realize we actually want this side. That's an issue. Let's try click and drag from the actual object and release. Let's try leading space. I think that might actually work on the way to see that it's worked is to go to constraints under stack view, stacked you leading and trailing so that seems to have worked but always be cared for. Vehicle these constraints, because you can spend trust me hours fixing these kinds of problems rights that's all sorted Let's double click some of these constraints to take them right out to the edge. 20 that way. 20 that way, and we've got something very strange happening. Our last image is stretched, so let's click out stacked you and let's distribute these Phil equally perfect. So that feels it nicely. All of these images themselves our constrains toe have 64 on each site. But why? They read Well, they're red because the stack view is trying to expand the image and fill out the screen as much as it can, so it's having a few issues with doing that. What we can do is actually removed these 64 so select the constraint to remove it. Both horizontal and vertical takes a little while to do. But it's a good lesson as a programmer that if things were going wrong, always take away items from your display. Right, so now we have it sorted out. So if we select our stack view, there it is. Now we can give our stack view a height, so let's constrain our stack view to you guessed it 64 and now we have our buttons sorted, so we're still getting some red because we haven't positioned this. Absolutely speaking, It doesn't have a vertical positioning, but what we should do at this point is actually test this on, Let's say, an iPad and then I'll just seem out for you. Not too much, though. And as you can see on the iPad, it has stretched our buttons, which isn't a great look. So how do we get around that? Well, this is your first bit of critical thinking as a programmer that told you this section be sort of an intermediate section that is their several ways to do it. We can constrain the bottoms themselves somehow, but I don't think that's a very elegant solution. We can constrain the stack view, so let's try that control. Click on the stack view, and then Dragon dropped to itself and release. We can set an aspect ratio, which is the ratio of height to width. So let's hit that. I believe that has set itself. Yes, if we go to the constraints, we have heights, and we have that aspect. If you double click the aspect, you can either change it in the main view or over in the rights you can change the properties over here. So what we want to have is perhaps a 4 to 1, because there are four buttons, like so excellent. So now we've got that sorted on the iPad. We have a different problem. And this is the beauty of constraining stuff. You'll have problems every single day. So let's hit our stack view. Once again, Let's check our alignment, perhaps weaken center items that doesn't work. Distribution. Perhaps equal spacing would work. No, it won't, Phil. Proportionately no feel equally? No. So the problem really is these constraints on the left and right hand sides. So what I'm gonna do, so I'm gonna select them and I'm going to remove them. So now we just have a free floating stack you that we can move around wherever we like. What we can do is revert to the old classic off. Let's send to this horizontally in the container, then to double check will click our IOS device a different one. The seven down here. Perhaps we'll click even smaller ones. Let's go. Smallest iPhone four s. Okay, that looks pretty good. Everything is constrained except for vertical. But of course, we know the vertical is coming along very soon. So that's the end of this tiny section on stack views and constraints. Now constraints are a very, very large topic in I I ice. And of course, we're gonna cover them as we go so we can understand how they work. But you've gotta watch out for when constraints interfere with other constraints. So always add constraints sparingly. Don't just keep adding and adding, that's why I added all these constraints to individual buttons, cause I want to show you what happens when you work in that way. Just add constraints all the time. You eventually come up against a brick wall, made rappels, and it says this isn't gonna work so well done on that and in the next lecture will complete this display. 40. M7 4 Making the Calculator Screen Copy Copy Copy!: welcome to the last part of making our calculator screen. So so far we have something that looks like this, and we learned a lot about stacks and constraining those stacks and not putting too many constraints on the elements inside of the stack, but rather constraining the stack itself and then allowing the stack to take care of the elements that are inside it. So let's finish off the display of our calculator in this lecture. Now, as you might guess, it's a simple as copying our stack view and then simply pacing it. And you can do copy paste from within this list view at the side so I can paste another one and another one, and I can drag and drop them wherever I want to, but not the images. We don't do that, Let's pit Command said, and undo that and it's bring this down. Okay, that's almost perfect. Now what are we going to do? We have four stacks, and I know they're all the same number of the moment. We're going to change that in a bit, but for now, let's get the layout sorted. Let's select all of these stacks and actually before we do that un, select them. Let's select. Let's say, was going to rearrange these because I don't like them being out of order. I think it's an O. C. D thing. So that one should be the lowest one. That one should be below here. I like them to have it an order. 1234 So when I come to edit, I'm not gonna be confused by anything. Okay, so we got these four stacks. Now, let's position one of them roughly center. So I think this 3rd 1 we can position vertically in the center. Okay, so that knows where it Sure big. And if we double click that positioning, we can actually drop it by, let's say, minus 40 or actually plus 40. So it'll go a bit further down, and then we have, of course, to find Stacked. You just gonna shut that down a bit? And I'm gonna do the same with step view here, and you'll notice that Iowa X crowed helps you out by snapping things together for you because it knows you want something roughly in line right now. If we come back to these alignments of the stack views First of all, if we click them and we open them and we open constraints, we have our heights. Now our aspect, that's perfect. So what we're gonna do is constrained all these stacks together in the vertical sense. Now, we have few options here we can control, click and drag to the next stack and place in vertical spacing. If we wanted to, we could also select all four stacks, and we could stack them all in a vertical stack. So X goes clever enough to know that these would go in a vertical stack. However, rather than overly complicate things because I don't think we really have to do that. I am gonna hit control. I'm gonna drag down and just click vertical spacing, vertical spacing and vertical spacing. So now they should all be aligned vertically, that 1st 1 perfectly in line. Let's test this out by opening up an iPad, and that allows us to see the horrendous errors that we have. So what errors of these? Well, this first stack view is aligned horizontally center, but the rest are not. So we could select these three and align them horizontally center, or we could actually align the leading edges. I e. The edge on the left hand side or, indeed, the right hand side. So I want to do select this first stack for you, and I don't know why that has moved down. That's very annoying. Let me just rearrange these. Let's get that top one right up to the top so you can just click and drag these, and it will shift them for you. Now let's hit control and click from this first. Stack you to the 2nd 1 and that's a line of the leading edges and look how they snap together. I don't know why the one underneath it has also snapped. Let's see what that's doing. I think it's implied. Well, we can check that in a minute, and it's select the top one again. Control, click to the bottom stack view that's not online yet and align the leading edge right now. Let's give this the ultimate test. Put it on the different device. Zoom up a bit. Let's rotate the device. There's little orientation tap down there that works. That's perfect. Okay, then if we select individuals stack views, we should have all blue now. Occasionally you will get some of these constraints that are duplicated in your project when you copy and paste. I don't know why that is, but it just is. I think it's a bug that's been around for ages and ex code, so you can remove them one by one. If there are too many duplicates, if they're showing red, that's just by the fight. Chances are that won't happen to you. Okay, so we've got our four stack to use in order. My O. C. D. Is very happy. All we have to do now his go ahead and select each individual button and, of course, changed the number. And you can change the background image simply by typing what it is. Or you can hit the scroll blocks and search for it that way. So I could just type four. There it is. Five. This is pretty easy. Oh, wait. I've done something wrong here. These side buttons are actually going to be add. Subtract, etcetera. Let's just get those in. Now it's tracked. What else have we got? Multiply, Yell! If you see me, pass it, divide and that's okay. Now we could do the numbers. Clearly. I need help counting for five. Maybe I don't doing pretty good, say, for six, seven eight. I think you can see where this is going. Nine. And then, of course, we have the number zero. So these last two buttons aren't actually doing anything. We need to change these two equals, but is a little got your waiting and I set that up special specifically to get you the equals button has a different aspect ratio to the other ones, and we are using these stack layouts. So how do we take care off that issue? Well, let's delete one of these buttons and see what happens. Everything spreads out. Let's select this one button. Let's change it to equals. Then let's give this equals button Quite a large size that see if that works off roughly 1 to 8, which is twice the size of a regular button. And look at all these red arrows that appear are stacked. Layouts do not like that. So how do we solve this? Well, let's click our stack for you festival and then let's quit this distribution to fill proportionately because if we set the width of a button, then it's gonna use that with that aspect ratio as a proportion off what it should be in the step that we have there, and it's gonna compare that to the smaller buttons and organize things accordingly. And you'll notice we don't actually have to put a height on that, either, which is pretty handy. So there we go. Sometimes you can actually put a constraint on one of the buttons, but be very careful when you're doing so of eyes, you're going to tear your hair out in frustration when things just don't line up. I know I have right. The final thing we're going to do is simply look for a label drag and drop that which is going to complete the display of our calculator. Now we'll use some more constraints for this. That's control. Click and drag down to the first stack you, and let's make thes the same width, which is simple enough by going to equal wits. Perfect. Then let's have this stack view to the label vertical spacing set, but everything is still read in terms off the label. That is simply because we've given it a width if given a distance in vertical, but it doesn't know where it lies horizontally, so we can always go to control, click and drag to the stack view, and we can align center, horizontal or the leading edge, and everything should turn blue. Now that's just pretty up that label. It's a calculator, so these labels usually go to the right hand side and over in our properties. We can select that option. Then we can select our color. We can leave. It is black. I think that looks quite snazzy. And what do we want to do? We want to find a background color for this label. Sick. Let's scroll down and go to background. And what I think we'll do is we'll change slightly, will make it dark and will change the color itself to a yellow for the text to make it fit in with all off the other colors. Right now, let's change that front. That's crank up that size and you'll notice it expands because you haven't given it a fixed height to expand as much as it needs to just go ahead and expand until it looks visually right. Okay, in double click the label and just put the number zero in it as a calculator might start with now, The e guide amongst You have probably noticed we're missing a button, and that is this clear button, and I apologize. If you've added that already. That's fine. If you've added it perfectly fine by me, that's that's OK. You can have it in there. The clear button is actually gonna be your homework in a few lectures time once we've done a little bit off coding. So speaking of coding, let's get on with that. 41. M7 5 Connecting Graphics to Code The Easy Way!: it's time to connect our main screen to our main code base. Now, if you were cool in previous episodes of this course or previous causes, I've shown you that you can connect buttons one by one fire outlets. But look at what we've got here. We have a lot of buttons and we don't really want to create an action outlet for every single one. So I'm gonna show you a couple of tricks so we can take all of these buttons or rather not that label at the top. But just the buttons and we can connect them to one or two simple actions in our coat. So open up your project and let's see how to do this shortcut. Now, if you recall beforehand, we would open an assistant editor and we would control, click and drag over to our main code and drop in an outlet or an action. If we wanted a button click response. We're gonna do something slightly different. So switch off that assistant editor if you've got it running and go over to your view controller dot swift. No, inside of here, we're going to write our own interface builder action and that's exactly the same. Control clicking and dragging over 12 coat. What gets created is an at I B action, which of course, is a function, and we're going to call. This number clicked. This number clicked is going to pass over what is called a sender. This is just the thing that identifies what is initiating this action, and we know that this is going to be a U Y. Button type because we only have buttons on our screen and it's only buttons will connect to this. Don't worry about this. Underscore. For now, it's something I'm going to explain later on in the course now, so we have an action when a number is clicked. That's great. Let's also have an I B action for when an operator is clicked, I e plus minus divide and times because that's gonna perform a slightly different function . It's having under school. The sender again is going to be a u I. Button. Now we could have both of these functions rolled up into one and then separate them out a bit later in a way that I'm going to show you in a minute. But for this particular project, I think it makes more sense if they're actually separated, so we don't get to in too much of a mess when you're organizing things. Finally, we might have an equals clicks, and we want it perform our final action, which might be act. Subtract whatever it is. So I'd be function equals clicked under school. The sender, which again is a you I button perfect. So we got all of that sorted out. Now, how do we connect our graphics to this now that we've specified it? Because remember, at the moment X Code or Swift are compiled, program has no way of knowing that it should connect these. So let's go back to our main story board. Make sure you save this file first. Then open up your story board and we can connect our buttons by control clicking and dragging. But to where? Well, we control click and drag all the way to the top at the View control, and that's going to connect us to the code. So if I release that, it will tell us we have some action Segways. Things will get into later on, but also we have these sent events equals click number clicks, operator clit. And these are all events that we have already created, which is fantastic. So this is going to be a number clicks now. Let's do the same for every single button. Now the clicks make sure you get the correct one. It's a little bit tedious, but I think it calculates a rap. Is the the app that you'd have Teoh do this the most on there being so many buttons? It's not a common occurrence. Lips. I've clicked the wrong one. There I clicked. Operator clipped right, so I made a mistake. How do I get rid of that? What if I select that eight busing? I come over to my properties on this very last icon in the top right connections. Inspector. If I click it, it tells me that I have touch up inside, bound to operate a clipped. Clearly, that's not correct. So there's a tiny little X on the left, and if we click that, it goes away. Likewise, if I click the seven, it tells me number clicked is the event that gets fired. So let's try that number rate again. Control, click and drag number clipped. Same with nine number clicked and, of course, zero number. Click. Now, before we carry on and wire up our operators and equals buttons, there's a problem. You might be looking at this going well, if I click 12 or three, how does my view controller number, click section, know which button I've clicked? Well, we can solve that. I get back to our storyboard, select the button and then select the properties, and we can give this a new miracle tag. So if we scroll down in this property section, and at the moment it's the attributes inspector shown, this tag down here is something we can change. So luckily, it's new Miracle. We can make it the same as our buttons. So in this case, I'll make this one for number two. I'll make it number two, and you can see where I'm going with this three four. Just make sure these are all correct. In fact, you can type them in if that is easier for you to do. Number six. And then, of course, we have number seven eight. It's like learning to count and zero we can leave as zero. So now we have some tags with that Let's go back to our code. And how do we find out what these tags are? Well, remember, when this gets fired, the button gets passed over as a sender so we can grab the tag from that sender. And when we've got the tag, we can use a switch case statement to see which tag we have. So let's have switch and what are we going to switch? It's the sender dot tag, which is an interject. And then we just put in the cases for pretty much everything that we've got Case zero. And we can optionally have Prince zero if we so wish. And we can go all the way through the cases all the way till we get to default, which will just return out off. Now. Remember, defaulters were executes of none of the cases execute. But in this case, we know that all of the cases will actually execute. So what we're gonna do, we've got a not to bring not let's try a case one. And in that case we will print one. And now that I've done that, I'm actually just gonna run this on our simulator. Let's have this on the SC. Just a double check that we get. This prints it out now. I haven't shown you where we print things out yet, but you will see in a minute when this loads up, okay? Back an ex Croat right at the bottom of our main code screen. There's a little icon that says Show the debug area. If you click that out, we can now get the output, hopefully from our. So if I click one, it prints out to nothing because we haven't set it up, but zero should print Syria. So what I've done there is I am debugging the app. Whenever I prayed, I'm printing to this little outfit area and nowhere else. So it's useful tool for us developers to see what's going on in the background. We don't have to set up some elaborate scheme on the APP itself, you know, like putting a label at the bottom of it or whatever. As it stands, we can just do it this way. So we have our case. We have our prints. We know that all of that works. Now that I've done nights and I apologize for this, we're actually going to scrap the switch case because every time we send this tag, it is the number that we actually want to show and use to calculate, which is pretty handy and also handy. That means we don't have to have a switch case for 10 different tags. So let's remove that switch case. Or rather, let's cut it and let's paste it into operator Collect Now, why have I done that? Because our operator, we will need translate from what the tag is to what the actual operator is. So it's good for our storyboard again. And let's tag up some of these items. Let's have times as the tag number 10. So where are we? I hope we are on the attributes. Yell. If you see it can't sit out. There is number 10. Whoops. 10 and we'll have minus as number 11. Of course, 12 and 13. Now let's go back to our code. And if the tag is now 10 let's print times. If it's 11 minus 111 just 11 it's copy that case case off 12 and finally 13. So let me just line these up properly. It waas times minus divide plus divide and Yes. Okay, it's perfect. I'm gonna run this now to make sure that I've got those correct. And this is something you need to do. Is a developer get into the habit of doing and that is Check, check and check again. Always check assuming or simulator works, of course. So let's go back to our simulator. Let's press home and let's delete that out. So if you click and hold it, hit the X, we can remove it and then we can run that map again. It should launch for us now. Sometimes the output area doesn't show by default. So you just click this little up like on and off we go. That's hit times. Give it a second to respond. I swear this used to be a lot faster with X code, but as of late But then again, I am running a beater. So what do I expect? Times minus divide Plus and we have absolutely nothing. Why? Because I've seen an idiot. I haven't actually connected it, have I? Let's go to our storyboard happens to the best of us. Let's control click our times to the View controller and go to operate. It clicked and the same with the rest of them. Wow. Such a newbie mistake to make operator clicked. And whilst we're here, remains Will do equals two equals clicked. Now I'm going to run this and hopefully that is gonna work and no embarrass myself any further. Come on, ground. You're a professional, right? It's pulling power output and times minus divide plus excellent. So everything's lined up. All our numbers are correct. All of our operators are correct. So that's it for wiring everything up. We're all sorted, and we're ready to move on to some more off the more arduous, complicated code. Actually, I lie. It's not gonna be that complicated, so don't worry. I'll see you in the next lecture. 42. M7 6 Storing Things With Enums: Now I'm gonna show you a little more swift, a bit of intermediate swift in the form of something called Denham's. Now how it you know is gonna fit into our calculator project. Well, so far we've got our operators, and every time we click these at the moment, we're simply printing out what that operator should be, which is fair enough. But the question is, how do we store that operator Times minus divider Plus, Well, that's a good question, because your first gut reaction and mine when I started programming was simply to store it as an operator. String say, operator equals something, and that's a fair enough approach that is a good reaction. But there is something else we can actually use called an Denham, which effectively limits our choices. But that has benefits later, Ron, when we're programming more complex stuff because the Denham's limit off choices means it's harder for us to make an error or, more importantly, harder for one of your team members to make an error on your precious code. And vice versa. Of course, because if you make an error in someone's coat, they are gonna hate you for ever because it takes a long time to debunk these things. So let's open up our project and learn how to use thes e NMS. Let's create a brand new swift file in our project to store our Inam because this view controller can start to get a little bit close it click our project folder not the top level one, but the one just below that the orange yellow one. Right? Click it new file, and we have a whole ton of options. We don't anything complicated. We just want IOS at the top and swift file hits next. Then it asks you for a name for this file. So you should always name this something descriptive and something it doesn't clash with any of the files that you have at the moment reading files that you're likely to add to your project. So in this case, I think we can call this operator in. Um, I think that's good enough. So we notes for operators and we know it's an in um, Now, how do we define Anin? Um, well, as you might guess, you know, does it for us. Then let's call this an operator. This is just the name, not the type. Then let's have our colon. And what kind of things is this in? I'm gonna store Well, it's gonna store Street Simple is that now, in een, um, takes a special key word called a case Just like switch case. Let's add one case and an ad. Here is just the name is equal to and then in quotes. Let's have a plus. Now, if you're not big confused at the moment, why we're doing this? If it seems a bit redundant, don't worry. In a few minutes it will all become clear for at least I'll do my best to make it clear. Let's have one for subtract a case for times or multiply and times and programming is an asterisk character that's on your number. Keys. Let's have a case for divide, divide and conquer. That's a forward slash. And then I usually like to have a case for nothing or a case for error. Something like that, which in this case we could actually call this nothing or we could leave it empty. We're not actually going to use this, but it's good practice to do these things so you can debug better later on. Now I promised I would define why we're doing this and why it's better to do it this way. We're doing it this way because the temptation is if we're in our view controller, we could say something like Var operator, and we need a capital O for that because the lower case is reserved is equal to, let's say times. And there's nothing wrong with that except that's eyes. Give me an era. Don't worry about that, except that this is kind of all over the place. I might do this here. I might do another one down here. And can you see how it gets kind of fragmented by having an Denham? We have one single place where we know to change our variable. So when we say later on something like operator DOT ad, we know it refers only to this string. That's a very important thing to do because it puts all of our data in one spot so we can change just one spot in the future if we have to. Right, So let's go back to our view controller and let's set our operator. So first of all, we obviously need an operator. So let's go way up to the top and create a class level, variable, far currents operator. And this is off type of course operator. And that Denham gets pulled through is equal to. So when we load out, our first operator is nothing operated, not nothing. Perfect. Then that's goes to our operated, clicked and start to set that operator. So when our case is 10 we want the current operator to be set to operator dot ad. Or rather, it's not add, is it? It's multiply four times. Okay, we'll get there eventually, so that's perfect. We can copy that. Why is that current operator not sharing? That's because I need another Are there great? So we can coffee that and we can do this thing for minus Don't subtract and the same for divide. And finally for ad since how we use an in, um, and we just specify it like we would with any other variable, except it's limited to the options that you actually specify here. That's the important thing about in terms their limited. And you definitely want to do that right? So what else do we need here? Well, we actually need another Inam because when we're running a calculator, you might hit and I'll just write some comments here, you might say one plus six times nine. So we actually need a way of knowing if we've just entered a number or we've just entered an operator because then we know if we have to perform the calculation. So let's do an enema for this. Let's create another new file, a swift file. And let's call this one calculation State E. No. Now, this is a bit of overkill for what we're doing here, but I just want you to practice this in, um concept because it's very, very useful. Let's have an Denham couch state, which is going to store strength. And we're gonna have a case first of all, where we are entering a number and this is gonna be a string cold entering them. And then we're gonna have a case where we're going tohave new numb started works. That's a bit of my old programming languages slipping in there is equal to and you guessed it noon, Um, started. So we just got to states there. Let's go back to our view controller and then let's set that up. So, so far, Count State, which is of type count State, is equal to Cal State Don't. And what's the first thing you do when you open up your calculator? You are entering a number Perfect. Now I think we will leave this lecture there because you've learned enough, and we'll continue with entering our Denham's and writing Mawr of the code of our calculator in the next lecture. 43. M7 7 Writing the Main Logic of Our Calculator App: it's time to write the basic code and logic that sits behind the pretty kind of pretty little G y off our calculator app. So let's open up your project and get coding right. The very first thing that we have to do is store the first number that we enter. So let's create a class level variable called Far First Value, and we'll set this as a strength. Now, why is string you say? Well, we should actually store. It is a number bunts when it comes in as a string whenever we click those buttons, and it's handy to keep it as a string because we also need to display it in our main label at the top of our calculator buttons. So that's why we store it is a strength. So speaking of updating the display, let's create a function in order to do that. So some way down here just create a simple function that updates the display, and this takes the number which is in the form off a street. Okay, so we've done that Now, Now, we're not gonna fill that in just yet, because we're gonna concentrate on the higher level logic here So let's go to our number clips function. Remember, this is called whenever we click a number. I mean, here, we're going to update the display. So gonna call that function that we just created. And what are we gonna send to it? Well, we're gonna send over a string which is made out off the sender docked tag. Because if you recall in our storyboard, we click our image. We actually gave this a tag, which is this over on the right hand side in properties. So we're pulling out that tag, and we're making it into a simple strength. Great. Now we can actually go back to our update display, and we can write the received number that we have over to our label. But if you recall if you press the numbers on a calculator, it adds the numbers. It puts them on the display until you press an operator and then it shows a little operator symbol which we're not going to show. It doesn't matter for now and then after operator, once you press another number, it starts showing the new number that you're typing. Therefore, we need to check if we're actually starting a new number. So we have to say, if our calculation state and that's with the lower case C. If you recall, we set that up in previous lectures and it's this line right at the top. So if the calculation state is equal to capital C calculation state dots new numb started. So we're saying if we're starting a new number, then we're going to perform a certain action. And of course, to go with that, we have the other case else. If the calculator state is equal to the count states with a Capital C darts entering them, then we're going to do something else. So just to make this really, really clear, this section is for if we're starting a new number and this section is for if we are continuing, if we're continuing a number that we've already started to enter, right, So in the first if statement, when we have new numb started first we have to grab the text from our display label. So if let's numb is equal to and what was our display label called? I don't think we've actually added that yet, So let's go over to our storyboard. Let's click this display label right at the tone and then over the right. We can click this little connections inspector, and it will tell us if there's a referencing outlet which should be in this second row. That means that no piece of code is referencing this label, which means we have to do it. So let's open up the assistant editor at the top. You should be used to this by now. Control, click and drag from our label and let's drop it in somewhere near the top of our view Controller clumps and let's call this display label. We'll leave its type as you are labelled, and this is just an outlet. It's just a reference, so we know what we're talking about when we access it in our view controller. So let's head over to the view controller again. Now we can access that display label darks text. We can open and close our curly braces, So I'm just saying, make sure you can actually get something from this text and then if you can, we're going to use that family. So if that number is not equal to and this is to quote, so if it's not length Then we guard going to a sign the first value. You remember what created this string up here? First value first value is equal to the number. And this is just so we have somewhere that we're storing the very first number that we press. Okay, so we've done that now outside, off the If let numb Let's change some other things. Well, the first thing we're going to change is the calculation state because we've no longer started in your number. We've just done that. So we have to change it to entering number. So let's have helped. States is equal to count States with a capital C don't entering. No. Okay, so we've done that. All that's left to do but finished all the logic is actually display that number. So that's simple enough. We just call our display label, got a text as equal to even number. And this is the number that gets passed in in update display, which in turn is actually passed Environ number clip. So we'll fairly simple, But there's just a little bit of slightly complicated logic here. We need to know if we started to you number or if we're continuing to enter a number. Now, by all means, this is not the only way to do this. There are other ways of doing this. So once you finish this module, feel free to go off and experiment with different ways of doing this. It's a really great way to learn to program when you've got no pressure, experimentation and just having fun with the language and seeing what you can create. See if you can do all of this in about half of many lines. I think that I could, but the question is, could you rights? Now let's handle this else. If so, we've entered one number and we are adding numbers to it. No adding in the math sense, but smush ing for you to use a real technical term, the numbers together, like in this following sense, right? So all we're gonna do here is going to our display label. We're gonna set its text equal to And what are we gonna do? Well, we're gonna get the text that already exists in that display label, and then we are going to simply smush on the number that we passed over as a strength. Now this is going to give us an era, which is fine. I expected that. And if we click this little red error value of optional type string, not unwraps Did you mean to use exclamation or question right so you can fix it? There's a little auto fix icon if we really want to, but I don't want to at the moment, because I want to explain. Here we've bean through a little bit of optionals and optionals say that perhaps some variable is stored inside a property. Maybe that's the key word there may be. Now, if we're absolutely sure that text is stored under display label, then we can say that we are absolutely sure by hitting shift and making an exclamation mark . So we're saying, Unwrap that I am dead certain there is a string contained in that display label doc text, And how do I know it's a string? Well, the property text is itself a string, and you'll notice the question Mark telling you this is optional. So that's your, uh, I think, What's that? Your third or fourth running with optionals? So don't worry if you don't get them now, they're fairly complicated to grasp, but just know that you can do this. Bunts only use exclamation or unwrapping an optional. If you are absolutely dead certain, vary something there, otherwise use this. So you're gonna test if there is a number in this display label, doc, text and by number actually mean a string. Sorry, It's a bit confusing naming there, but coming back to the options point I'm testing here and here. I'm not testing. I'm saying just go for it. In the second version, if there is no string and I unwrap it, this is called Force unwrapping. We're gonna get a crunch. But I'm experienced enough to know that we do actually have text there, and it's OK in this case. Okay, lets test this out. Let's run it in our simulator. And hopefully this display label is going toe work, just as I expected to. So we haven't done any other logic it There's no operator logic. Just the display off the number that we're entering. Let's try it. Seven, five, 23 etcetera. Okay, so that works pretty well. There's a bit of an annoying thing with two zeros at the start, but we're not gonna worry about that for Now we're just happy that we're actually forwarding the correct numbers. And, of course, they're always gonna be errors. I mean, these three dots, the ellipsis, as it's called, isn't ideal. But we have the very basics off our app. So we can now move on and do the operator and then entry off the next number. So let's do that in the next lecture. 44. M7 8 Writing the Main Logic of Our Calculator App Part 2: okay, We're almost there. We have the basic logic off entering numbers inside of our calculator app, and now we're gonna concentrate on the rest of it, doing the operators and the equals button so we can actually perform the calculation. So open up your project and let's go. We've already set up our update display. We found some way to store our first value and with checked if we've got an entering number at the moment or a new number started. So the next thing we're gonna do is head over to our operator, clicked and finish this little section. Now, if you're a call, we have this switch case statement so we could have somewhere to store our current operator inside of a variable surprisingly called current operator. Now, what else do we have to do? Well, we have to tell our calculator That's off with Clinton. Operator, we're actually going to start a new number, so we have to change right at the top. Our calculator state as new numb started. Two invented one number of hitting operated. The next number is inbound, right? So what do we do after that? Well, we actually want to set our display label text. So let's do an if. Let num is equal to display label dot text. Remember, we're checking this optional that it actually exists. Let's open and close our curly braces And then, of course, we can do something with it. First, we're gonna check if the number is not equal to a blank that's important. Open and closure, curly braces. Then we're going to reset our first value to whatever our label has stored. Now the first value is going to grab this label text, and that is going to be the entire number. So if I just open up the simulator, there it is. It's gonna grab this entire number there, and it is going to store it in two first value. So we've got somewhere where the number is actually stored. So once we press the operator optionally, we can then clear the display to let the user know that something has been pressed or something is happening. So we can set this to blank right? So that's the operator done. That's pretty much all we have to do. And if you're very new to programming, it helps to think in a very modular way to think. What should this function be in charge of? What should it take care off and then really whittle that down towards little as possible? And by doing that, you can effectively create the logic of your app much easier than if this was also accessing various other bits in your program and trying to make everything happen in one function. So sometimes it helps just to make everything nice and simple. So that's that's my advice to you for the day from a professional developer. Make it simple. The kiss philosophy. I'm not sure that a lot of you know what that means, but some of you will, and she'll be laughing right now. So let's move on enough rambling from me. The next thing we have to do is check. Our equals clicked. And so what's gonna happen when we click equals Well, we're going to do something like calculate a some and this doesn't exist yet. Still be an error, but let's make it exist. Function calculates some, and this doesn't require any arguments to be passed over for any variables because we have everything available in our plus. We have the number we have the operator. Now, if someone presses equals without entering a number, well, that's useless. So let's say if the first value dot is empty, so that means there is absolutely nothing stored in it. Then we're going to return out of this. So it's not gonna do any calculations. It will not pass this section months. If that is not true, if we do have a first value, then it will continue executing down here and you'll notice we don't actually have to put in else. What we can do is simply write code because I know this code. Whatever I type here will not to be executed because this return will exit us out of the function before we can get to this line. So that's just a handy program, a short cut for you. So we're gonna make what's called a result. And this is gonna be a blank string because you haven't calculates to yet, right? So let's scroll down and performed the actual calculation. So if the current operator is equal to operator dots times, then what are we going to do? What? We're gonna multiply it so we will make our result equal to the result off the multiplication. Now I'm going to go into a well, That should be a double equals here. I beg your pardon. Now I'm going to go into a little bit of short hand if you like, and this is very useful for you. So without the shorthand, this would take 1 to 2 or three lines more like but with shorthand, we can do it all in one line. We can say the result is equal to and obviously this needs to be a string. So let's have two quotes now inside of a string we can place calculations, variables and all kinds of things by simply hitting back slash. So weaken to back slash. We can tell it that I want you to make a double number from the first value, but this will give us an optional. So what we can do is we can force unwrap it. So what I'm gonna do here is just remove this second bracket and I'm going to force unwrap it. So I'm making a double from the first value and I'm saying you definitely there. And I'm only doing that because I know that we've restrict their user to just entering numbers on our label. So that's all we can actually get out of it, and there's no way they can circumvent that. Okay, So once we've done that, we're going to multiply because this is times that's the asterisk. And then we are going to double the display label doc text. And of course, this also needs a force unwrap because it might not exist. But we know that it actually does exist. So now why is it giving me on era? Well, I've got these two brackets just right on the outside here where my cursor is hovering. So one up here and one down here. Now, what's the issue? Well, X code is telling me that this result itself could actually be an optional. And if I click the red icon string, not on rats. Did you mean etcetera, etcetera? Well, we could just quick fix, and it's going to put an exclamation right at the end. So he unwrapped this conversion. We've unwrapped that conversion and then we've unwrapped this final multiplication result. So if you're not an experienced programmer, this is actually a little bit dangerous to do just force unwrapping everywhere. But as you get more experience, you'll understand where you can and where you can't do this. Now I apologize for taking a long time on this section, but it's an important concept for you to understand, right? So let's quickly whip through everything else. That's easy enough because we can just simply copy this. We can type else on. We can paste it and we can just go through all of our different operators and then change the appropriate symbol for the calculation itself. So let's just do that two more times. Was it minus or subtract? Perhaps it was. Subtract. There we go. Let us subtract it and finally edition. Okay, so that's all pretty simple for us because it's a pretty simple calculation. So what's left to do well inside of us? Calculate some. We should show the result. Let's have a display label. Dot text is equal to the result. Perfect. Then what do we want to do? Well, don't forget, we have a calculation state, and once you've pressed equals you finished a Some the state should now be a new number started, so it knows to start again. Rights. That's been quite a long hole. So Let's hit play. Let's see that all of that works. It tells me we have a failure. Touch start failure to launch. So let's just click the home button. Let's remove the offending app. Click the home button again, and then let's rerun it in the simulator rights. Bingo, Let's say to times three equals six. Perfect nine. Hang on. Having a moment they're divided by three is equal to three point. Oh, I think my simulator is doing something weird because it's removing that black background. So I think that's just a buck. There is no coding reason whatsoever why that should be happening. So there we have. We have everything working. Let's have four times. Yeah, it's just a coding bug. I think five equals 20 or not. A coding Bug button X Code book. Remember, we're still unbeaten at these things. Well happens, so don't stress out about them, right? So that's our very simple calculator sorted. But of course, there are bits and pieces that are a bit annoying and certain things that a calculator wouldn't have if you actually publish this. So in the next section I'm going to set you a few tasks for you to spruce this up and adds that mysterious clear button that we never added in the first place. So see you in the next one. 45. M7 9 Calculator Homework: right. Here we go. This is the homework. The first homework that I'm gonna give you where I'm not gonna give you any clues. We have a calculator. It does all the calculations we need. But what if we make him a state when it would be nice to have a clear button and I've provided one in that graphics pack for you. So I want to take that provided clear button, and I want to put it somewhere on our screen so that when the user presses it, everything resets back to the beginning state off the calculator. And as a little bonus, I would also like you to remove that leading zero in the label. You know, the one that always pops up whenever the calculator starts. So two tasks clear button on the functionality behind it and remove that leading zero when the calculator starts up. I've got a solution for it. But I want you to show me what your solution is before you have a look at my one. Good luck. 46. M7 10 Calculator Solution: There were a few things that bug me and probably you about the calculator we created. First of all, there was that horrible leading zero in the label, and secondly, there was no clear button if we made a mistake. So let's add that clear button and remove that horrible little zero by opening up our project and seeing what my solution is with our main story board open, let's click this label, and in fact, we can double click it. We can simply hit backspace and remove that item hit, enter, and then the label will be blank. And I think I've just found the root cause of that bug I was referring to. When there's no number in there, it actually makes the label disappear, and I'm not sure what that's all about. His do commands it again to undo that, and if we click the label that's inspected well, the first thing you'll notice. It has no fixed height. And that's actually the problem, I think, because when you remove the letter, it's got nothing to contain, so it just collapses to what it should do. So with that label still selected, let's add a fixed height 45.5. Well, just at that now. Now, if we double click it back space and hit enter our label still stays there. So turns out I was wrong. I apologize. Apple. It's not a park in your software. It's a bug in my software. Okay, so that sorts out zero. Now let's get serious. Let's sort out that clear button. First of all, let's go to our assets. Start X cassettes Check. We have are clear, Boston added. If you don't have it, added it, plus a bottom new image set and just drag and drop it into the two X. So it's there. Let's get back to our storyboards and let's drop in a button somewhere. Now we've got this nice, symmetrical great, but I think we could actually drop this right at the bottom. So let's find out objects and the button inside of fair. Let's drag and drop of a button in. Then, with that button selected up at the top, let's show the attributes that scroll down to our background image. Where was it? There it is. And let's have clear for that now. This button isn't going to be part of any of these stack views that we created, so it's gonna have it right at the bottom of our calculator or maybe at the top, even haven't decided yet. So we're not going to bother with messing around with Stack views. Instead, we're going to give it a fixed width and height. And let's try 44 by 44. He had to constraints great. And of course, we can resize this. And what have you just roughly speaking until we move it into position. Now, where should we put it? We could put it at the bottom, but I think the more usual places at the top somewhere. So let's select this top label and let's select this constraint that positions it between the two sets off numbers. If we double click it, we can make this a bit larger to make a bit of space to put our clear button into. So let's give this. Perhaps 70 has it clearance, and that's too much because you can see it's moved off of the screen. Let's try perhaps 60 55 it's back on this screen. Great. So leave it at that, Then let's get R C button. Let's remove this button label because we don't need that tent. Er, let's click and drag. It's between these two items, and you'll notice X Code will line things up for you almost automatically all the time. I'm gonna pop it in there now. What's next? Well, we need to position it so control. Click and drag to the label. Let's align the leading edges so it knows where it is there, and it's quick and drag to the display label. And let's have some vertical spacing. Sex and all those red marks should go away. Okay, so I'm just going to say that, and we have our clear button, so it kind of stands out. But that's what it clear buttons should do. I think now we need to connect this to our view controller. So we have a few options. We can connect it to a button press and operator pressed or something like that, or you just give it its own little function. Let's do the latter, so let's open up the assistant editor. Let's control click and drag once we scroll down a bit. I think we'll put this summer near the bottom because it's not that important for our calculator control. Click and drag and down it goes at the bottom. Let's change this to inaction. Let's call this clear, but clicked. Okay, and click Connect. Now switch off the assistant editor. Go back to the view controller and let's fill out that function. We just dropped him. So what do we have to do? Well, festival. We need to clear our display label. It's that simple enough, Doc text is equal to Blank. Then we need to tell our program that's we are starting a new number two. The calculation state needs to be updated to a new number started, and that should be it. And again, I'm just going to repeat what I said a few lectures ago. And that is, if you get this logic right and you figure it out in a modular manner in your head, then these functions become really simple toe, actually create. See, I just put two lines in here, and I've already cleared everything. Perfect. Okay, so the next thing we have to do, of course, is hit play and double check. That's all my grandstanding. He's actually for something. Good. Come on. Okay, we get okay. So let's have two times. 33 I guess, equals 66. Fair enough. But what if we say nine divided by? Let's cancel that. Go on. Now, let's say to times to 22 equals 44. So our clear button actually works. And also as a bonus, we don't have that horrible zero that existed before in our label. So nice and simple homework. I hope you got the solution in his few lines as that If you didn't, don't worry, because you will get there eventually. The important thing is you keep trying. All right, I'll see you in the next one. 47. M7 11 Summary of Calculator: well done for completing this module on creating a nice, simple calculator. This is just a summary of what you've achieved so far. First of all, good job. This was a pretty tough one, and there was some quite complex logic. Now, in reality, most APS won't have logic that as confusing as this is, because calculator in and of itself is quite confusing, logic wise. So don't worry. If you didn't get all of it right, we turned this jumbled mess of symbols into a slightly less jumbled mess off symbols with some logic behind it. We also learned quite a few things that are important for us programmers along the way. Primarily, we learned about stack layouts when we were designing our calculator and how to use those effectively. I also showed you a couple of things that actors gouaches, mistakes that you can make, and you'll wonder what the hell is going on until you realize you've added a constraint wrongly, somewhere. Then we looked at multiple button actions. I e. Assigning the same action to different buttons and just using their tags to identify them tags like I just said, And then we looked at a whole bunch of logic. But more importantly, we broke that logic down into simple variables that we kept track off, like the calculator state and the first number we learned about Denham's. So we re restricted ourselves to story certain values for our variables, which is an important exercise to make sure that your programs in the future don't get too fragmented. It's important because it keeps all of those variables in one spot, and that's the only spot where you actually have to change them. And finally, we looked at some good design principles or rather good lay out principles not really designed because as fantastic as the calculator is, it wasn't that greatest design. I'll be honest. I'm sure you could come up with better, but it served the purpose so good. Lay out principles where we put our clear button how we line things up on the screen, right? So that's the end. You deserve a break. Go have a glass of wine and I'll leave you with a little fight work 48. M8 1 Back to the Future Introduction: Are you ready for an epic module? You're gonna learn so much in this section. I've put so much in it to make you a really good programmer. So what are we building? Well, as you can see by the title, we're gonna build a back to the future time travel at. So here's a little reminder off the film that's inspired this app and it serves probably toe wet your appetite because I don't know about you, but I absolutely love this movie. He's sending Marty 30 years back in time. Yeah, he's trapped in the past. It's gotta be a dream about to meet your father. And he's making an impression on his mother. Well, there you have it. That's our inspiration, actually, kind of go want to go watch the movie now? So in this section, we're going to learn, or we're gonna make very basic looking back to the future at, but it's gonna be some important elements in here. We're gonna learn all about tabbed APS how he display information in lots of different taps . What's it gonna learn? Some more advanced versions off positioning our elements inside of our view controllers and insight off the storyboard using the tools we have available, and that is going to be invaluable when you start creating your own APS, then we're gonna right a bit of code, like always to get random years or get the current year, get the current date and time that something you'll do quite often in your programming career and how to pick out letters from strings. Then we're gonna set up timers and timers, repeat a block of code every x amount of time. So in our case, every second and we're gonna use that to show a ticking clock. So it's gonna be pretty sweet. Then finally, we're gonna take this time travel screen when we hit that start time travel button. We're actually going to show an animation for these four year numbers, and I'm not going to show you that in advance. You're gonna have to complete the module to see what that looks like. But by doing that, I'm going to give you the tools to animate pretty much any property off any view that you're going to create in your acts. And that's going to be absolutely invaluable, right? Let's go 49. M8 2 Back to the Future Tabbed Apps Explained: Let's understand a little more about tabbed APS in IOS. Now, chances are that you are going to be making a tabbed out eventually because it's just a very useful design paradigm, so that you can display a lot of information at once without overwhelming the user. They're very native feeling now that IOS has been around for 11 12 generations, whatever it is, and we've had a lot of acts that used tabs. So it's very useful for you to design your APS in the same manner. And of course, we have a whole bunch of examples. I mean, these are pretty old images, but you can see the classic Instagram tabbed APS, and we have very suffer items like Facebook and their taps. So this is what we mean by tabs in Iowa's Now. Generally speaking, these tabs run along the bottom off your app. They tend not to run along the top when it comes to Android. They do run along the top because the bottom has the on screen home button, back button and tasks switcher. Where is an IOS? The everything of the bottom well is nothing apart from the home button itself, so that's a distinction between the two operating systems that you should make. And if you read Apple's IOS design guidelines, they do say, Have your tabs at the bottom because my fingers can also reach that much easier and people expect it. So let's make our own version off a two tapped up by opening up X Code and creating a new project, Click create a new X Code project. You should be used to this by now. But before you click next on this screen under IOS, we're not going to create a single view Apple going create a tab app, which is this option down here on the second row. It might look slightly different. Your ex could make put it somewhere else. But that is the version that we want hit next. And of course, we have to give this the name. So I'm gonna call this back to the future B t t f hit next. And of course, save it wherever you need to save it, right. So we have our basic app. We're presented with that initial screen, so we understand everything that's happening here. We've got a general tab capabilities. Resource is and you don't have to know what these are right now. We'll get to them as and when we need to. So everything's the same. If we come over to our list of files underneath the B TTF older and I'll just close these to make it clearer, we have the APP delegate. We've seen that before. We have the first view controller and the second view controller, and these are the same apart from their names. So that's something different. Before, we just had view controller. Okay, now what else do we have? We have a main story good, and everything else looks the same, but in our storyboard, if we open it and zoom out, we have some new stuff. Here we have a tab, our controller and then first view and second view. Now, when we have a tab at, we need something that takes care of displaying the relevant tab. Whichever tab we happen to have clicked on and is currently showing on the screen. And that's the job off the tab, our controller. So the controller is never something that you actually see on screen. It's just controlling which view we have, and it's keeping track off the items that are happening in those views. So by default, IOS knows, or rather, ex code knows that we have to tap. So that's the default project. We have the first tab. And of course, we have the second tap. And if you go over to first view, you'll notice that that name first is the same as the name down here and likewise with second view. So you know what they're pointing to now? If I zoom out and we look at these items, these little links with these lines, they tell us what the relationship is between the tab, our controller and which view it's going to. Now, if he ever wants to create another tab, what you could do is drag your own line. So what I'm gonna do and you don't have to do this, but follow along if you want to, I'm gonna collect this first or actually, the second view on I'm gonna click the line that's going from the control into view just hit backspace. So it's gone. Now. The tab controller realizes there's only one tab attached to it, and this second view is just floating. It's not called from anywhere it won't be shown or won't be even loaded. So how do we fix that? Well, that's control. Click our tab, our controller, and release it on second view. And then, if we look at this list, we have manual Segways show show detail, present mode. Lee pop over. None of those sound like Tab. We have a relationship. Segway View Controllers. What happens if we click that? There we have it. So our second tap becomes the new Tamp. So let's just practice that for a minute, because this is important to know you're gonna be making a lot of these APS. Let's drag in another view controller. So over an hour object, Inspector, we should have you control it available. And if you can't see it, just type view and it should come up in the short list. Click and drag it's and drop it in. So we have a view controller Now, this has nothing in it, and it's never gonna be shown unless we control click and drag from the tab, our controller and we click relationship Segway to view controllers. And that is now Tab number three. So I'm just gonna try and drag this so you can see the arrow. There we go now. These arrows don't actually correspond to the icon on screen. They just call, respond to the fact that's going into the controller. But this has being added as the third aisam so I can scroll down here and there. We have item now. We don't need 1/3 1 for now, So let's remove that relationship and that's delete the view controller. So select it. You might have to select this middle space and then press delete because sometimes this it bucky it doesn't delete. So if it doesn't delete, zoom in selected again, Zoom in a bit more, select again and it won't go away. So what do we do here? Well, this is just another ex code buck. So what I'm gonna do is click and drag over it and then press delete. And now it's gone. Just a few little idiosyncrasies, if you like, when it comes to X code and designing these layouts so you should end up with your view like you can see here, in my view. So we have few controllers and we have the tab, our controller, and it's relatively easy to add more tabs to it now, a word of note you generally want to have at most four or five, depending on the device. Your targeting tabs at the bottom. Don't try and ram in 20 tabs, because if you find yourself with 20 taps, you haven't designed your app properly. You need to go back to the drawing board and hide away some of the items. So four or five tabs? Absolute maximum Okay, just one or two things more to cover it. In this little section. When we click out Tab, our controller, you'll notice over in our inspector sect section on the top, right? If you click the identity inspector icon and you look at the class, it's great out as you. I tap our controller, whereas if you click the first view, we have First View controller, which corresponds to the first view controller over in our list off items. And, of course, it's much the same with our second view controller. So that corresponds to the class that X code automatically created for us. So coming back to the tab bar controller, it's great out because there is no tab are control of file in our project that we can see there is a file that's going to get included with our compiled projects. So the tab, our controller knows how to behave. But if you wanted to, you could actually create your own. You, I tab are control of file and you could assign its year underneath the class, and that would pick it up automatically once you've created it. Now, we're not going to do that. We're going to use the standard tab, our controller class. That's comes as a basic part of I OS X Code and Swift, so we don't have to touch that. But that's just so you know, because later on we're gonna do stuff like that. Now if you have a project and you only have a view and you want to drop in a tap our controller well, as you might have guessed over in the object Inspector, we can search for Tab And there we have a tap, our controller so we can scroll down somewhere empty click and drag and tap our controller . If I released, the mouse will lay itself onto our desktop or into our design. A storyboard and dropped to control is by default. So I'm not gonna do that. Just gonna keep it in there so you can always do that. And you can control, click and adds the current view Control is that you have right just one final thing because I'm not sure I've told you this before, But in the story board, when we click this little arrow, decide here What does that mean? That means it's the storyboard entry point and in our list, over on the left. That's what it tells us. That means whenever we load this storyboard, the tab, our control, it gets loaded first by default. And there always has to be something that gets loaded first by default. Right? So we've created the basics off our back to the future app, and I've explained quite in detail about storyboards, tower bar controllers and associate ID You. I view controllers, So let's move on and start designing in the next section. 50. M8 3 Back to the Future Layout Tab Bars and Icons!: Now we're gonna move on with modifying our view controllers in the main storyboard and actually laying out the basics of our back to the future app. Now, because we are moving on and you've learned a lot so far, I want you to put your own personal spin on this app so you don't necessarily have to follow my color scheme. I want you to choose your own color schemes to shuffle things around, change shapes of them, do whatever you like, as long as it's vaguely similar to mine. And then once you've done that, drop us a screenshot and let's see what it looks like if you're really proud of your work. So let's open up X Code and start creating your very own back to the future app. The very first thing that we want to do is change the names of these terms We don't want first, and we don't want second cause that doesn't make sense for us. So where do you do that? Well, you don't do it in the tab bar controller, because festival there is no way to do it. And secondly, anything you do in the view control a tab at the bottom gets propagated backwards to the tab bar controlled by default. So that's the sensible place to do it. If you select it and then you select the attributes Inspector at the top, right, you can simply change the title of it. Now, what should we call this? Well, the very first tab is simply going to display the time now. But the second tab is going to allow us to time travel so we can change that attribute and noticed this gets propagated back to the tab VIP tab, our controller rights. Now, if you want to, you can change these images for any images that you please and a great place that I like to go for images that are completely free royalty free. You don't have to attribute anyone is pics of a dot com. It's also where I get all the fireworks from. If you were wondering, right so first we need some images related to time. So time now and then. Time travel now scrolling through these images, there are only a few that sort of stand out as reasonable images that we can actually use for our taps. Why do I say that Because the name is with a dark background isn't great. We're gonna have to edit that. We want an image with a light background, perhaps like this clock. And what else are we going to use? Well, let's try this clock with the tree here. Okay? So we want to, like, background, and I'm gonna show you why? Because when you save all of these, that's cool this time travel and let's call this one time now. Okay, so we've got those two images. If we go back to our projects and we go to our assets dot xsi assets, then we can add some images New image set. And you've done this before. You should have time now and time travel. Okay, So if we get out time now and we drop in time now in today, So let me just bring this over to my desktop. Oh, it's the spinning balloon wheel of death. Okay, so we have our time now, I can click and drag this into their and we have our time travel. We can also click in tracking, right? So I got out two items. Let's go back to our storyboard, and it's tried to assign these so time. Now, if we select that view controller and we go over to the image, let's hit time now and oh, we have a big problem and what I'm going to say right now he's welcome to IOS. What happens if I have time travel? Well, that's also a problem because these images are too large. And as far as I know, there was actually no way to size thumb down. So this is your first little gotcha. How do you get around this? Well, if you open up Google and I'd prefer to give you the tools on how to research these things rather than just give you the answers all the time because it will make you a better developer. If we set for Tab Bar Icon sighs. Hopefully, well, we have a stack overflow post. We have the developer part of Apple s. Let's try these two items. So here is our developer item. If you happen, please tasks almost can't be represented by a system icon or sister Michael's don't match your style. You can create your own. We know that a custom icons, sometimes called the template, discards color information so coming back here. That's why it's gone This weird blue because it's just removed the color information completely gone and uses the mask to produce the appearance you see on screen in any off these bars rights. That's an important note. All these items that could be any color, but I West puts a mask over them and makes them whatever color that it deems is good or that you programming right. So it's got a few design guidelines here. Create simple designs. Use a solid color icon with transparency. So coming back to this how ah time now, if you recall, had the transparency around the edges, whereas the time traveled that J. Peg was white. And that's why the time now icon here has this round shape because the outsides of clear and conversely, time travel is square because the outsides are not clear. Okay, so that's Apple's versions of everything, and they tell you what you should do and then down at the bottom. They have custom icons, sizes, so recommended navigation bar in tuba, icon size, Taba icon size. So that's what we want. Now it tells us we need 75% 5 pixels for the three x resolution and 50 by 50 for the two X . I wouldn't worry about one X. You're not going to be designing that any time soon. So we actually two types 70 fives and fifties, and those, of course, are going to go into our assets start XY assets. So these images actually require a little bit off photo shop manipulation. Now, that's not part of this course, and I don't want to make you guys sit through that. But if that's your thing, by all means, you can go do that. Alternatively, you can just Google. I was Icahn's tapped bar, and there should be a few websites that provide these. We have icon beast lights, Icahn's eight. I've used them before. They're the ones that I know. In fact, let's use icons. Eight. They're pretty good, right? So we can just search for time and over on this side. They don't have IOS 11 yet, but they do have Iowa's 10 so we'll keep that as it is. And there we have a nice time icon that we can have in 50 pixels or 100 pixels, whatever you need. So let's go for 100 pixels. We can download that and it tells us Don't forget to include a link on each page. Views are icons. Well, this is me giving them credit. Now, this is my telling you where I'm getting the icons from, so I'm gonna close that. And besides, you're gonna go retrieve your own icons from these places anyway, So we have our time and we need one more for time travel. I think time field is quite nice. So let's download that. Excellent. So that's icons eight dot com. If you want to go get any icons and don't forget to attribute, tell people where you got it from. If you use their icons, a link in your app or on your website is fine. Now coming back to size, we need 70 fives and we need fifties and sings You're on a Mac. This is very easy to do. We can use in built tools To achieve that. All you have to do is double click the image so it opens in preview. If it doesn't open in preview, just right, click it, click open with and select preview from there or from other. If it's not showing right So we have our preview. We have some tools and we can adjust the size. So when that dialogue pops up, we can go up to pixels and we can make this a plain old 75 by 75. Make sure scale proportionally is clicked on. If your images square and you want it to remain that way and simply click okay, think of the tools. Rather, let's go to file and let's say that or you can export it as a PNG so you can call it something else. I'm gonna pop this into my downloads and this is the field one. So we'll make this time travel and we will give it the resolution 75 pixels. So we know which one it is in the future. Then we'll go to tools, will adjust the size again. We'll go down to 50 and then we will export that. And if you just click this truck blocks down, we can actually get everything we need from it. So I can click the old name and we can change that to 50 pixels. Okay, so they should appear in our latest files. And if I select this icon in my finder. It will tell me some more details about the files. You have to let it catch up with itself. Or if, actually, if I select this one, that's a better one. It'll give us the details of the files because we have to make sure they're 75 pixels and 50 pixels, respectively. That's not working too good, right? We'll just go to the downloads folder. Okay, so we got our 50. That's click that little like on, so we get out. Details turn travel 50. That's 50. And that is That's 100 whip, so we gotta change that. Let's go back. Adjust outsize 75 by 75. Export to the 75 will overwrite it, and now we should be all sorted so we can close that image, and that is now 75. So it's a good idea to now test these two images. Let's go back to ex code, go to time travel and let's drop in the 75. But where do we drop it? 75 is three X There we go and the 50 in the two X. Now let's test that out. Let's go to the storyboard. Oh, brilliant so that works excellently. We have our time icon, but we actually want that one to be in time travel. So let's change its image to time travel. Let's go back to the first tab and go to time Now, which is still a horrible one. Goto assets go to time now and let's do the same process in preview four time now. So what do we want here? We want to get our latest files. They added it Is this one right here? Okay, so tools it just size. You should be getting the hang of this now, okay? And it's quite neat because And a preview has a lot of power that people just don't realize how much power it's actually got. So time now, 75. The things you can do in it. I almost don't photo shop anywhere. Almost. Let's have 50 by 50 file exports time now. 50. Okay, so you can close preview about time now 50 which goes into there and time now 75 which goes into three X. Now, if we go to our storyboard, we have two very different looking Icahn's time now and time travel and notice how it has dropped the color information. They were only black and white, but it's over laid its own blue color now to change that, it's a little more complicated and a bit more involved, and that's a lecture for a completely different day. We're not going to do that right now, but that's how we set up our tabs and get those custom images in there, right in the next section, we're gonna carry on with creating the views off our time traveling app. 51. M8 4 Back to the Future Layout Storyboards: Here we go. We're gonna now create the main view off the very first tab of our app. And that's the one that currently says first view and loaded by first view controller on it without handy little tab are icon at the bottom that says time now. So open up your project and let's get creating. Right. So the purpose off our first view time now is simply to show us the current time and the current year that Rin, Because hate time travel is difficult. We can get last. It would be handy to have a little clock going. So first of all, let's remove whatever ex coaches put in there simply select it and hit backspace to delete it. So he starts with a blank slate, and if you just click and drag inside there, nothing should get selected. If something does get selected, then remove that item. Right. So what are we gonna show? Well, I'd like to show the year, perhaps in a box up here and then below that I want to show the current time and date of the year really is the main feature of our app. We're trying traveling through the years. It's what I use is want to see. So it's your first introduction to thinking about user interface. You should make the thing that you want your customer or user to interact with the main focus off the screens. They don't have to think about where they're gonna tap. They know that they know what to look at as well. Now, later on in this module, we're gonna do a few animations, some nice, snazzy animations, and we're gonna have kind of a flipping animation for our year display Now, in order to do that, we're going to need four different labels, one for each digit off the year. So if you have 2000 and six, then you'll have 2006 in different labels. So let's just drop in a label from our little Objects list. Here it's expanded manually. Obits. There's no constraints on it yet. That's double click it's and just put it to in. Then let's expand that font size for the number two. So I'm going over to the attributes inspector, and I'm just increasing this. Maybe to 130. Let's see what that does. That's not too bad. I think it could be just a touch smaller 1 20 to make sure we fit everything. Let's just click done. Let's change this display to the smallest possible one. Which is, of course, the iPhone four. And it's unlikely. At this day and age you will actually be targeting iPhone four devices you're going to just target exclusively, probably from iPhone five upwards. But iPhone five does have the same width as the iPhone four in terms of pixels and the physical screen size, I think right? So I'm just shifting us up a bit until it looks good some way, right? So I got up to now. I think with that, too. I would like to fix it's wit and its height. We don't really want that to change. Let's have width and height on our constraints. Let's add those two. Great. So now you can actually copy this. Just select it and hit command C Command V. And it's moved the next one right up next to it. There we have it. Now, these four digits. So we want to define the center line off our digits as being the center line off our view controller down the center here, So at the moment, thes might be a bit too big. But we can always go right to the edges, and I'm going to constrain this second number to the center, so I'm gonna control, click and drag on it. I just dropped somewhere in the view, and then let's look through our options, weaken. Center it horizontally. I think that's a good idea. So we'll do that. That's gonna drop it into the center. But now, if you do a bit of maths, we can look at its with. So what we have we given it when it's 68 half of that is 34. So if we go back to our center constraint and we double click that and we hit minus 34 that's going to shift it right over to one side. And that means that the right hand edge off this number two sits directly on the center line, so that's perfect. That fits nicely. Now. Let's just shift this one right up to this to so that the left hand side and the right tense side are on the same line. So let's hit control, click and drag. Let's have horizontal spacing. Let's select that horizontal spacing. Double click it and just put zero. And that's gonna but them up right next to each other. Okay, perfect. Now let's paste in another number. Command V. It should still be in memory. We can shift this up here, control. Click and drag to this middle to horizontal spacing whips. See what I mean? When you click it, it moves down. Sometimes I need double click it. Put zero in. We have our next number and let's paste another number. Control. Click and drag the usual deal. Horizontal. And if you can't see that horizontal constraint like here, we can't see it too easily. Just move your number away of it and it should make itself known somewhere famous last words. Of course it's not doing that. Now that I've talked to you about it, I think it may be this thin blue line going vertically up with the curse. Aries. Actually, it's moving a bit further away, right? So we got a problem here. We can't see this horizontal constraint, and if you can't see it or you can't click it, then you can select your item. And over in this little list of items you can click the arrow and your constraints will be shown. So we have a width and a height, So I think that it's not actually showing constraint. So if if that doesn't work, which clearly it doesn't you can come down to the list of constraints in the view and should go that way instead. So we have this too. We have between those two between those two. Uh huh. And it's this one now in you select that constraint over on the right hand side. Under the attributes, Inspector, you can see what the constant is, and for some reason, it's minus one. Well, we want that to be zero. That's all gonna slot in there, but you'll notice we've still got red lines. And that's because these items I don't actually know where they sit vertically speaking. So what I'm gonna do is I'm gonna select this second to, because that's our main constraint to if you like, control clicking, dragged to the view, and I'm going to set this as center vertically in the container. But then I'm just gonna offset that upwards a bit. So perhaps by hundreds or even minus the hundreds has dropped that a bit minus 80. Perfect. So that's constrained. The rest of these twos are not actually constrained yet, but we can fix that pretty easily. Control, Click and drag over to this to let's align the tops, saying with this to align the top and finally, the last one. So now this last one is showing orange. That's fine. If we want to have our display update itself, I e move from where it currently is to the Orange location. Sometimes Exco doesn't do that automatically, So if you look down at the bottom corner off this display is a little icon that says update frames. And if I click that it will move everything in place. If I simply click the view controller update frames isn't available. But if I just shipped something out of the way, clip my view. Controller update frames is available and we can click it, and it will move everything to where it should be. So now is a good time to click your device chooser. Maybe change the orientation, Move something out of the way, Update your frames and make sure it all lines up nicely so you can run through the whole litany of devices iPads, iPhones, etcetera. So we have our year display. There's gonna change these numbers too. Whatever it is, whatever the current date might be. So this one is a bit misaligned. Now, the reason I changed the date is to show you that. And if we select all of these items, the attributes inspector will show us all the attributes of every single item. And what we actually want to do is sent to this. So the alignment section, we can click that and change it. So which letter Which number is centered inside of its own label, which looks a lot better right now. We need a label to go below that That's simply going to show the date control, click and drag. And what I'm gonna do is I'm gonna control what we want to do. Well, we want to make this a fixed width. I think so. Let's have it as it is. It's current wit. And let's position it below our zero label with some vertical spacing. Great. Now let's crank up the font size. Okay? I think that will do. Now. Remember how I said that this is the main feature of our this year display. So the way we can bring that out is we can click our main label and we can mute it's color so we can have. It's a light gray color. If we wanted, we can even I tell a size it. So if we click our front icon, we can give this. We don't have to. I tele size that we can make it very thin now in the think Leave it at that. That looks pretty nice. We can center it if we so wish. So if you look down at the bottom corner off this display is a little icon that says Update frames. And if I click that it will move everything in place. If I simply click the view controller Update frames isn't available. But if I just shipped something out of the way, clip my view. Controller update frames is available and we can click it, and it will move everything to where it should be. So now is a good time to click your device chooser, Maybe change the orientation. Move something out of the way. Update your frames and make sure it all lines up nicely so you can run through the whole litany of devices. IPads, iPhones, etcetera. So we have our year display. There's gonna change these numbers too. Whatever it is, whatever the current date might be. So this one is a bit misaligned. Now, the reason I've changed the date is to show you that. And if we select all of these items, the attributes inspector will show us all the attributes of every single item. And what we actually want to do is sent to this. So the alignment section, we can click that and change it. So which letter Which number is centered inside of its own label, which looks a lot better right now. We need a label to go below that That's simply going to show the date control, click and drag. And what I'm gonna do is I'm gonna control what we want to do. Well, we want to make this a fixed width. I think so. Let's have it as it is. It's current wit. And let's position it below our zero label with some vertical spacing. Great. Now let's crank up the font size. Okay? I think that will do. Now remember how I said that this is the main feature of our this year display. So the way we can bring that out is we can click our main label and we can mute it's color so we can have, let's say, a light gray color. If we wanted, we can even I tell a size it. So if we click our front icon, we can give this. We don't have to. I tele size that we can make it very thin now in the think Leave it at that. That looks pretty nice. We can center it if we so wish, and the last thing we're gonna do is actually a Linus horizontally in the container. So it sits where it is. Them again. What do we do? We change the orientation. Make sure that is all good to go. So for this device, you might want to move it down, touch or not completely up to you. We haven't done it yet, but you can restrict a device toe only showing portrait or landscape in your app or both, or a combination of any. We don't need that right now. It's always best to just leave it as it is and make sure it works. So later on, if you want to change your mind about portrait and landscape, you know it's gonna work as a layout, right? So it's gonna double click this label and say, Today's date I use is no actually going to see that our software will update that label before they see today's day. Okay, I think that looks pretty nice, but it's missing something, and that's color. So let's click just the view. Make sure we have it selected and let's give this background and other color, so I don't quite know what we should do here. I think if we chose something like that books we don't tense. That's the wrong color. Let's leave. That's default. We actually want background, and if you click the background color so I'll do that again, you'll notice the pink color appears in the list of recently used colors, so we can click that. Okay, now let's select a llevar items. In fact, I'm not sure it's going to show very well so today's date. We might want to change that to a white color and leave 2018 as a dark color just to give this a little splash off life, right? So that's almost perfect. We can always come back and change these things. Tweak them later. The final task that we have to do is connect this to our storyboards. So open up your assistant editor or rather, connected to our view controller. I'll make my usual room so we can see what's going on. And here we have our first view Controller control. Click and drag over from our labels, and let's give them a sensible name. So year, first lesser label or year first number label. That should be same with the 2nd 1 year second number label. I think you guys can see where this is going. Year, third number, label and finally, the fourth number. Year fourth. Remember Labour Love used a few shortenings of words. This that's perfectly fine. You can do that as long as you know what's happening in your own app. And finally, our today's date label two days today Date label will do nicely. Okay, everything is connected. We're ready to move on to programming in the next section. 52. M8 5 Back to the Future Code Showing the Year: we are ready to begin coding the first part of our back to the future where we're going to show the year and the current date to our user. So let's move from this, which currently does nothing over to a fully functioning app in our ex code project. It's now time to show the current year via code. So let's open up our first view controller dot Swift. Now we have an option in here, and that is to do all of our coding in here. But things like getting the current year. I don't really belong in a view controller, because if you think about it, you might have to use thes somewhere else. So what I suggest to you is that you create a new script file by right clicking the project folder, hitting new file and just create a simple, swift file which there were going to call Utilities and I usually create one of these in my projects toe hold all the bits and pieces that I don't really know where I want to put them . Yet eso is just like a garbage bin, if you like, or a storage system garbage bin isn't the correct word for that. So let's create a class called Utilities Opening. Close our curly braces. Now we want to get the current year, so this is going to be a function cold. Gets current. Yeah, and this is going to return a string because it's going to be turned into a label. You could return a number. It's completely up to you, right? Let's dates equal to How do we get the date in Swift? Well, that's really simple. You create a new date object, then it's not a simple is just say give me the current date as a string. Weirdly, you have to create a new calendar object, which comes from calendar dot current, and this grabs the users current calendar. So it's localizing this information if you like. Then we're in a position to actually create our dates into a strength. And for what it's worth, this is just way, way too complicated compared to something like DOT net or C sharp at its current is not a function that is a change in swift. Before it was actually a function. But now it's not okay, so now we're ready to create this string year and How did you do that? What? First we grab our calendar, the one we've just created with a lower case C and we make a component from it and what component we want. Well, we want dot year now. Here's a little swift action for you whenever we are typing something in one of these functions, so I'll just start this function again. I'll type the what's. Let's remove that. I'll type the bracket again. It says Calendar component as the first argument. It's something that it wants, and then it needs the dates that that it you're creating this from. If we double click, that's it. Lays these items out for us is calendar doctor component, and if we hit enter, it makes that muted color come into the foreground. So is telling us you have to provide me with a calendar component, don't and then one of these day year on our minute month, etcetera, etcetera. So obviously we just want year now. If you noticed before, we could actually just skip out this, we could have dot year, and that's because Swift knows the type off or the class that were trying to grab things from and it automatically assumes that comes before the dot So it's just a shorthand way of writing this. Then, of course, we need the dates. And this is the date that we've already created, not with the captain of the lower case D. So it corresponds to this one. Okay, so now this needs to be a string. So let's surround everything with brackets and that's converted to that strength. Finally, we're going to return that back to whatever calls dysfunction. So a bit complicated, just getting a simple date out of IOS. But hey ho, that's what it is. Now that we have our current year, we can't just display it because if you recall in our storyboard, we actually have four separate labels, so we need to pull out the character at the appropriate location. So back in our utilities, we need some kind off function to get a letter at a certain index. So get the 1st 2nd 3rd or fourth letter as an index. And to do that, we're gonna pass in a strength which now case is just gonna be that year that we've grabbed and we're going to also pass in a location which is an integer. And so just to make that clear, if we have something like 2018 we're gonna pass that in as this string, we're gonna pass a location. So we're gonna say if its location zero give me this one this to this. And three this because remember it. Zero indexed. Okay, we are going to return a strength from that function, then while how do we get the index out of it? Well, there's a special function that we can use for strings so we can say let's index equal to the string that we've passed in. Str don't index and it gives us a few options for don't index so we can have the i string index offset by etcetera, etcetera. So I'm not gonna worry about which option it is right now. Just gonna open a bracket. We're gonna say string, don't start, Index. It's gonna grab the stock index from our string I e. Position number zero right at the beginning. Here. That's the start. And then we're going toe offset that by a little bit, which is offset by. And we're gonna feed it. This location that we passed in up here. This is all a bit confusing. And if you want to know more while I'm not going to labour the point here, I'm just gonna let you discover this by yourself. But basically, this is how you get letters at a certain index. Again, Swift makes this just overly complicated. Other languages make it much easier for us, but it is what it is, right, rights. So we're then going to return a string, of course. But from what? Well, we're gonna get that original string, and we're going to get the index out of it. So all of this complication here is guessing an index that Swift understands how to use. So we can't just say, get character number two or three or four. We actually have to define an index first using this method. Then we have to get the particular sub string out of that index so again, way, way overly complicated. And I don't know why they do that, But, hey, I'm gonna say that obviously there are no dotnet develop is in their team. That's controversial. All right, let's go back to our first view controller, and that's load up some labels now. We want to be sure our label is displayed, so that's gonna be guaranteed after the view did. Load is cold so we can say Let's year equal to utilities. Ducks gets current year so we now have The year is a string. Then we have to set our label texts. So first we want to do this one, and we can just type shorthand first numb, and it will pick that up for us. You don't have to type year. First of all, you can type the unique part off that variable name, and Swift will go find it for you. So the first label is equal to and new utilities Darks and gets letter at index. We passed over the year at Location zero. Perfect. So let's just copy this and then let's go for our second year second number label Pay Sticks Index of one third number, label paced. It's index off to fourth number label. You get the idea index off three. Right, so this should get everything that we need. Except I seem to have an issue here up because I've bean silly. It's not the label. It's actually the dot text doc text doc text, etcetera. So that gets rid off all of our errors. And, of course, we run this in the simulator will get the year displayed, and we're going to do that in just a second. But festival is something that's bugging to here, and that is look at how many times we've created a new utilities class five times in total . At the moments, it's not a lot of extra work, but you have to bear in mind that's our mobile devices. As good as they are, they're still limited on process of power and drink things like this. Recreating it five times is going to get really tedious, and it's gonna consume unnecessary cycles off the process so we can actually fix that up in our class level variable section. We can just call one utilities, so let's have utilities. You tails is equal to utilities. I think I spent that All right, utilities expected declaration of what of Oh, dear groans. I keep going back to other languages. You'll have to forgive me. It's of type utilities. Silly me. Okay, say we've got Are you tails now down here? We don't have to recreate it. We can remove this and simply say you tills. I can copy that, and I can just drop it wherever we have utilities. So now we've only created utilities once, and we're just simply re using that to get all the bits and pieces that we need. So that's perfect, right? We're ready to run this. Let's drop this into our iPhone S e by hitting play in the top left corner and there we have it. It's showing our current year. Now, if I hit the home button on actually hit it twice and I swiped off that at and then we loaded again just before I click it. Notice that we don't see the template letters that we have there because they get almost immediately replaced. We see 27 immediately on def. You record in our storyboard, we had set it to 2018. So that's good. It shows that by using code in, viewed it load that you don't actually see anything yet, but the view is there now, just before we go, we have this view, did load. But it's something else that happens in the life cycle off these view controllers so we can override some other functions that happen in the background, one of which is called View, did appear. So this means that code will get executed after the view has appeared. So if you did it in there, there's a chance you would see the 2018 before it flipped over to 2017. Obviously, there's more chance of that. The more CPU intensive your process is for that. So the longer it takes, but also notice all of these different things that appear here, and all of these functions are running by default. As part off our you. I've you control a class that our first view controller inherits from. So there are lots of little lifecycle steps that you can tap into as developer, and in fact, you need to tap into as a developer in order to insert your own code. So this example we've just done here reviewed it load is to be sure that all of these labels actually exist. If you did this under view will load. You probably get a crash. Okay, so that's how we sort out the year and displaying it and also showing you a little bit off you. I view controller and all the hidden classes that we can tap into, or rather the functions, right, Let's get on and show a ticking clock in the next lecture, a slightly more difficult lecture, but I think you'll get the idea pretty quickly if you've made it this far. 53. M8 6 Back to the Future Code A Ticking Clock: Now we're going to do something a little more exciting. We're gonna make our version off a ticking clock so we can show the current dating in the months that Davy whatever it is, plus the time ticking every second. So so far, we have this in Iraq, just a static year display. But we're going to change this label to that ticking clock now. This isn't animation per se. It's something else. It's an event that fires at specific intervals, but it's a good way to lead into animation that we're going to do later on. And it's a nice, cheap and easy way to do it, actually. So let's open up our project and create our ticking clock. So we're gonna put our ticking clock into this today's date label. Now with the clock, we have to get the time out off a cyst out of the system that we're running on. So the best place to do that is not in the view controller code, but it is actually in that utilities swift file that we created previously. So let's create another function inside of this file. Let's call this funk gets current time, and this is going to return a string because we're gonna output this to a label and a string is the most convenient way to do that. Obviously, Now we're going against the date from this. So first we have to create a new date object. And this is just like we did previously in this get current year section. It's making space here and needing things up a bit, So we're gonna get our dates Now, Here's little, uh, thing that bugs me. I've got this line of code and this one in two different places. Now you might argue it's actually okay to do that because we've got dates, and that's unlikely to change. But if it does, we still have to change things in two places. So let's create a different function to provide that date. Instead, get dates, which is going to return a date, objects, and then all we're gonna do is return dates, a new version of it. So this may seem like overkill, but in future, if Apple changes this date naming, we only have to change it in one place. So now we can go up here and we can say where we can actually remove all of this and we can return string Jara, Jara Jara from And we can just call, get date straight in there. Perfect. Okay. And then in here, we can call let date equals gets days. Okay, so that's nothing to do with this lecture. Really? But it's just something it was bugging me. That should be this line of code. We don't want to repeat it, right? So, coming back to our getting current time now we're gonna display This is a label and Scott's before mattered. So human Kenly read it. So we're going to create a four matter, and this comes from a special class called date for matter. And it tells you at the top a four matter that converts between dates and their textual representations. That's sounds like something that we would need. So we'll create that now we can specify in our for matter the duct date style. So what kind of style do we want? And if I take that again and we read what it says date style, the date style of the receiver, that's fine. We're gonna have docked no style set dot number. Sometimes it's no style. I think That's what's being changed between Swift three and the current version. And then we're going Teoh four matter dot time style is equal to dark medium, right? So what I've done is we're not gonna display the date. I've changed my mind on that. Never mind. We're just gonna display the time so we'll leave it at that and we'll see what back comes out with. We can always change things around later on. Now we're going to create a strength. So let time strength equal to are full matter, and we're gonna get a string from the current date. Now, I could pass in this state or I can call that directly as gets date. So it's gonna pull up from this function. So we've reduced our code a little bit. That's pretty handy By adding some more lines. Ironically, in the end, we've got fewer lines of code to type. It's a great now we just have to return that time strength and say that now, in our first few controller, let's look for something here. Let's create a function to show time and then, inside of our feuded load right at the end, we will call it Showtime. Okay, so we got our time. Now what else do we need? Well, I said, we're going to animate this by putting it on some kind off timer, but I think it's better if we start by just simply showing that label se we can say for our time. Strength is equal to. And remember, we've got this you tails that we created up here so we can just use that right off the bat . You tills, tops, gets the current time. Then we can show that on our label. So it's actually called today's date label. Today's date label dot texts. That's a bit of ah, miss naming of that. So I might change that later on is equal to eight time strength, right? So we'll just run that and make sure we get the output that we actually want from it. We have our usual era, failed to require some kind of luck. That's because it's running. So let's simply remove it and then re clay. Okay, it's running, and they we have our time and date. Now we could actually put the date in here, so let's experiment with that. Let's go back to our utilities and let's change our date style, too. Docked, let's have short and then just hit play. Let's see what that comes up with. Of course, all of these short mediums and whatever documented on the apple develop the site so you can go there and look to see what they do if you like, or you can just do it like this. That looks pretty good to me. I kind of like that, right? So we can stop that. And we can go back to our first view controller. Right. So we're going to create some kind off timer inside of here and just to show you where you should start, If you're a developer and you want to create something and you're not quite sure what to use, just search Apple developer and then the few key words that you can think off. And if you did that, you'd come up to this page on Apple's site using timers. And there's all kinds of information creating and scheduling, and this is for objective C. So this isn't applicable to us at the moment. But Apple gives you ways and methods of doing these things and tells you the gouaches the things to watch out for it said, for how to stop it, how to remove a time of from memory loads and loads of things. Now, as a developer, you hardly ever look at this. I'm going to be very honest with you. It's It's just dry and boring. You'll look at this when you start having problems that I can promise you. You look us straight to here and figure it out. But Apple doesn't make this very dry, which is good for me because it means I've got a job teaching you guys sex. This is just a way that you can find out how to do things and what IOS is capable off or any other operating system for that matter. Then, once you found that out, just simply Google how to run a timer in Swift. So obviously, we don't need to Google that because I'm here to show you. But that's just toe let you know you can do as a newbie developer to short cut your development time, right? So in our class we're going to create a far timer equal to a new timer, and this is a time of that fires after time interval has elapsed, sending a specified message to a target object. And we'll see what that means in a second. Right? So in our view, did load. We're going to remove this show time because we're only gonna show the time. When our time it ticks, we're going to create a new function, and we're gonna cool this time. Take okay. Or actually, we're going to call this set up timer. I think that's a better option. Yes. And they were gonna call that, in our view, Did load set up timer. Now let's get to the set up. Time of function itself. Well, we're going to say timer is equal to time a darks, and we can give this a scheduled timer. And inside of those scheduled time is there are several options for creating it. What we going to choose here while there are three with time interval on all of them And does it repeat? And what is the block that we're going to execute when it does? Repeat right. So let's just click Enter on that very 1st 1 with time interval. And if you press enter again without moving the mouse or clicking it will go straight to that time interval. Very. But it starts so we can remove that. And we want this to take over every second. Do we want to repeat this? Well, that is a true and then this block, we can double click that and it feels out everything for us. If we double click the timer, we can just click timer in and now we can type the code that we actually want to fire. So all we want to do at this point is show the time. So I'm gonna say that on Let's see what happens. Well, first of all, we get this era called the Method Showtime. Enclosure there blah, blah, blah requires explicit self. That's because this little cold function inside of here doesn't know what this belongs to, even though to us it's obvious. But the programming we have to specifically say, self dot Showtime. I'm gonna say that, and we're going to run that, and I think we're going to get one or two errors we might not, and I'll explain why we might or might not After we've had a look at this running today, states and there we have our lovely ticking timer. 68 I think my computer is too slow. So if your computers to slow like my I have to use a low resolution Mac to record this, which means it's an old one. What you can do it simply change the intervals so it actually fires every half second. So you're you're doubling your processing time, but it's not a lot of processing that's actually happening. And that way you can be ensured that it's gonna change pretty much every second, right? So we've got our time of working and we had no errors. But I did refer to the fact that we might get some areas now. I'm not gonna cover it here because we can cover these things later on. But if you get an era, it's probably gonna be somewhere in this little section with timer. Now the error that you'll get will be actually related to what's called threading. So if I just open up Google and let's just type threading into Google as the wrong thing, we want CPU threading and we get we just put up some images from Google. Now this is an image for your typical PC you've got a few threats on each process, Er, and it's the same in your mobile device. You've got a process, er, but you've got different threads that you can process things on, and generally you can't jump from one thread to a different threat. So in IOS, everything that happens on this screen happens in the main thread that display thread, if you like. That's not the real name of it, but I just want to keep things simple here and over here. Your timer, you're scheduled timer might actually start in a different thread. Then, when your time of calls in this little block section, it fires off that half second, it's going to try and run this on the timers thread, and that's OK if the time is thread is on the main user interface thread or the You know the display threat if you like, so that's fine. But if you try to run this and especially this line in that block of code on a different threat, you would get a crash. Now I'm not sure because I haven't looked up. If this always calls back to the main, use the interface threat, that's something I have to research. You can research if you like, but I'm just saying that's something that could actually catch you out. So we're gonna play this again and check that out half second Interval works. It should do. But my computer is still quite slow. Nine. Here we go. At that. Skipped one there. Really slow computer. I am running a lot of programs on this in order to record this course. Okay, so that works very nicely. We can stop that running. So that's a nice, simple, cheap way of getting some animation going. And you also learned a little bit about threats and being very wary off where your program it is actually executing on the threads. Right? So we can move on to the next tab in the next lecture, and we can create some time travel and some actual riel animation a few lectures after that . So I look forward to seeing you in that one 54. M8 7 Back to the Future Time Travel Storyboards: we're now going to move on to creating the second tab off our back to the future time travel app, which takes care of the actual time travel for us. And, of course, the very first step is to lay out all of the design inside off this second tab. Now it's gonna be pretty similar to the first tab, which is gonna make our lives a little bit easier. So let's open up our project and get going. The very first step is to go into our main story board and select our second view for editing. You can zoom in using the controls of the bottom of your screen. Let's remove everything that's inside of that view. Let's do a multi select click and drag and make sure nothing else is in there. The other way you can do that is by clicking this view in the list over on the left hand side, and that will tell you with anything else is in there, right. So now that it's empty, what we actually want to do is we want to show a year that we are time travelling to We don't necessarily want to show a date because it's nice and simple app. So what we're gonna do, they simply copy over our four date labels from the first taps we can hit command, see, select the second view controller and just press command fee. And you get a whole bunch of red because nothing is actually aligned just yet. So we can just kind of shuffle this around a bit, Perhaps Put it in the center. Now let's select the second item and let's constrain this. So we're gonna put this horizontally in the center of the container. And then, as before, we're going to shift that by roughly. I think it was 32 points or it was minus 32 points rights. That's roughly in the center. We can check that by going up to our original double clicking that constraint 34. It actually Waas. So I'm a stickler for getting everything nice and even minus 34. Okay, now it is smack bang in the centre. We still have a bunch of red, so let's select the second label and that's because we need to align this vertically in the container. And now everything should be blue, which means we are ready to go. And of course, we can test the orientation off this so it works in landscape, too, as well as portrait. Brilliant. Now let's give this view of background, so simply select the view. Let's go to the attributes and let's choose and other and perhaps choose a color that looks like it would go well with that pinky type color. You don't have to do this. You can have everything inside color, but it's totally up to you. I think that green looks quite nice, that nice fluorescent green, right? So we can leave that as is. And here's just a little design lesson. I know this is very basic sort of colors that we're looking at here. But when you're uses using your and there are some familiar elements, there's these four labels in the first Controller and the four labels in the second controller. And when they switch between them, it's the the main part of that view controller, which takes their attention to that bit. So it's familiar for a start, and that's good user interface design. The whole design should feel familiar now. I'm not a designer, but I do know a few bits and pieces. And if you've got the money, I'd advise that you actually get an APP designer from somewhere like up work dot com or people per hour. Any of these freelance sites and they'll be able to show you things they've done before, and I can guarantee it look a lot better than what I've got here that's just appointed for you Now. Our first tab is simply the date. As we know, the second tab is time travel that implies motion that implies we're going somewhere and doing something. So I think all of the's labels for the year were traveling to should be made into a slightly different front. So let's see if we can go to the front and click custom. What I'm looking for is perhaps something italics at Sister Metallic. It was in front of me the whole time, and with Kotalik, you imply a sense of motion. So I'm just checking what size that needs to be. He needs to be size off 1 20 So, like I was saying, italics implies motion. We're going somewhere, and so you can see that from this. Now we have a slight issue. It's kind of cutting outside off the label. So let's select all these labels again and see if we can fix that. If we scroll down in our little properties section, let's see what we've got here. This clips to bounds means something will not extend past its bounds. And at first I thought that had been switched on for our labels. But clearly it's not as something will discuss when we come across images again. So it's not that the only thing we can do here really is lower the size off the front. So let's drop that down until everything fix in its box. Okay, so 105 that fits fine. Now and up to you, you can adjust the 1st 1 to 105 or not. I think I will, just to keep things consistent. Yeah. Okay, so we've sorted that out. Now, what else do we need? What we need a button toe, actually begin our time travel, and when we click the button, the time travel clock will take over and do what it needs to do. So before we do that, let's actually just put dashes into this clock because we don't need it's do anything right now and because we're gonna have a button, I'm actually going to shift this second label up. Just a touch. So let's select this center for the vertical. Let's have this at minus 40. Great. Now we can go to our object inspector and go to Button Drop. One of those in that button is, of course, going to be centered horizontally. We can double click it and change its title time travel, and perhaps we'll call this start time travel. Okay, there's change that color because it doesn't look great at the moment. Text color. We have some options. We could actually choose black. We could have whites, I think. Why? It looks quite nice in here. Nice contrast in color. Let's change our phones as usual. What is 100 look like? Go way over the top 45. Note. Let's try 35. Okay, so that is our button. All that we have to do is now. Position that button with a control click relative to the second number, and you can adjust that to your heart's content. So I moved that a little bit closer. Perfect. So a bus is nice and big. We know what we're going to press. So let's say that. And the next step is to outlet all of these items now because this view controller outlets to second view controller none off. These labels are gonna have an outlet even though we actually copied them across. But just to make sure that select these labels and select this little out its inspector at the end and every single one should have no connections. And, of course, the button has no connections, right, So that's okay. I'll make my little bit of space open the assistant editor and let's do the usual jive of control clicking our labels across. So I'm just gonna shortcut this and call it first label, second label, third label and finally fourth label. So those labels are static will leave them as they are now. We need to control click our button action. Let's have this under viewed it load. Let's change from outlet toe action because we want some co two fire time travel button clicked. Perfect how he can close that Assistant editor. We have all the bits and pieces we need, and we could start to edit the second view control is so open that and inside our time travel button clicks we actually need some code to execute. So we're gonna cover that. It's a beautiful code in the next lecture. 55. M8 8 Back to the Future time Travel Code: Now we're going to cover the code that we need to run in order to display our time travel year. Getting a random years. There's a bit of maths involved in this, and this is gonna happen so that we can display this label in the second tab off our APP. Numbers. One or two things we're gonna learn here, especially random numbers needs, are very useful. So let's start right. What we have to do is some way in our second view controller. Well, not just somewhere. We actually want to do this in time. Travel button clicked method or function. We need to pull out a random year and display that year in each off our four year labels. That means we need to get a random year first, So this is kind of something that's not related to the display. So putting it in the second view controller is a bad place to put it. We should put this probably in our utilities dot swift, so wherever you like someone utilities, let's create a new function, get ransom year, and this is simply going to be a strength that is returned. Now, how do we get random numbers in Swift. Well, that's a tricky one. You have to do it quite a lot of searching for it. But I'm here to help you out, and what you need is arc for random and not just random. You need arc for random uniform and it asks us for an upper bound. So this is going to give us an integer between zero and whatever bound that we give it. So speaking of time travel, we can't really travel that far in the future because we don't know what it's gonna look like. And it's kind of unrealistic, even though time travel itself is unrealistic, of course, but you know what I mean? It's easier to imagine the year 3000 than the S 6000 so we might want to restrict this time travel just a little bit. Let's restrict this to perhaps 4500. Now we need to return this as a strength, and to do that, we use the return key word. So it fires back this string for us, and that's as simple as it gets. We now have our strength, so let's go back to our second view controller and we can pull out that year from our utilities. Now, in this view, controller, we don't have an instance off utilities yet. Remember, we do actually have that in the first view controller we created here, but isn't This isn't automatically accessible by the second view controller. So in the 2nd 1 we can create an instance of it. Let's have let you tails equal to utilities. So now it's available for every function in this class to use. Let's have let year equal to you. Tails dot get random year, and that will return exactly what we need. Now all we have to do is assigned the text labels off well, our labels. So first label Doc text is equal to what? Well, if you recall in our first view controller, we did this. We used our utilities and get letter at index. So going back to our utilities get literate. Index was this function that was a bit complicated, but it gets the letter at a certain index in our strength. Let's go back to our second view controller and let's do that. You tills don't gets letter at index. Let's give it the year and if you type your arguments into these functions. And then you press tab. It takes you to the next item. So we'll take you from str to location automatically and you can just start typing and it will be in position for years. That's a nice, handy little coding shortcut. So let's do second labelled up text. Let's practice that handy little shortcut you tails got yet letter at index. So press enter, then press tab and the string should be likely highlighted. Let's give it the year whips done that wrong, haven't I? Okay, You know what? I'm gonna hit, commands it and get this right. Gets letter at index. So if pressed enter, I've touched nothing else. Then simply type this string this tab pressed half again. The first half highlights that year and select sit and then give it the interview. Right now. Time for a speed run. Let's see if I get this right third label and you can join me in the speed room. You tills dots, gets letter at index at the year and interject location to. And can you see how fast that is? Once you really get going with this stuff, you can talk and you can tight, like a speed demon at the same time, he says, pausing. It's not that easy, actually. Right, So we have our time travel button clicks. We have our year. Now let's run this on our iPhone simulator and hopefully we should have everything that we're after. You know what I'm gonna do? I'm just gonna delete this whilst I'm here to make sure we don't get an era again when it tries to load it Ticked up, Tick took. Come on, There we go. We've got today's date were ticking away. Let's go to our time travel. So click the tab at the bottom, wait for it toe peel onto the screen That's my needs to do and click Start time travel and we have moved to a year Now I've just clicked that again and we've had an era so you might know Get that? But I did get that What has actually happened here now? I was waiting for this to happen because if we click this error is little box next to it that makes no sense to anyone unless you're a computer, right? So if you get an era, let's bring up this bottom box here and we get some information and Exco to tell us what these errors are about telling us. It's something to do with the string. Str and the string is that contains for 17 telling us about something in location. And if I double click that nothing happens and nothing happens, so that's useless. We've got itself. We've got an index. So what does that all mean? Well, let's go over to this right hand box and look at the fatal error. Can't form a character from an empty string se That gives me a very big clue. It's trying to return a string at a certain index, but if you look at this little explorer at the bottom, I was string, you know, Let's, uh, get that down. Our string contains three letters, and we've last for a location three, which actually corresponds to four because we have zero indexing, So X Code or Swift or IOS rather has an issue with that because there is no index at place . None before the string is only three characters long, so we just had our very first crash. So let's fix that. Let's press stop and it stops running in the SIM. Now what went wrong? Well, let's go back to our folder view. And if your folder view has disappeared, click the uppermost left icon and it will come back. Let's go to our utilities, where we already and in get random year. What we would actually like to do is restrict ourselves to only four digit years and the way we can ensure that is actually, by adding 1000. So think about it. If we get zero will actually get 1000. If we get 200 will get 1000 200 or 1200 if you like, so we'll always have a four digit on at the uppermost end will get 5500. So you could actually increase this to 899 and you get 9999 Plus, if you increase this to 9000 you might get some very strange behavior. It would still work because your string would be five digits long if you got 10,000 so our get letter index would still work, but you wouldn't get the fifth letter. So something very weird there so would actually work. For now, let's have no 3500. Now let's say that command s and let's run it again without that era, I hope. Okay, there we have our clock. Let's go over to time travel, click start for 3 to 6 and keep traveling through time to see that it continuously west. Right? So it does work. Everything is now it's and smooth and slipped. Right. So you've also experienced your very first crash in an F, and they do happen quite unexpectedly. And as you can see, they happen for reasons that are pretty difficult Toe ascertain. Unless you know your program inside out. So just in the warning. As a developer, you will spend a lot of time debugging your APS. Probably 50% of the time, at least debunking end up getting it ready for release, right with covered the code. Now in the next lecture Exciting bit. We're gonna look at proper animations on IOS. You don't want to miss this one 56. M8 9 Back to the Future Time travel Animations: animations are the life blood off your IOS amps, but they are not the feature off your APs. Let me say that again. Animations are not the main feature off your APS. You should repeat that a few times, because when you overdo animations, it completely detracts from what your app should be, which is about this subject you created an app about in the first place. Overdone animations are the fastest way to one. Annoy your users and to take away the focus off your app. And all of that means fewer uses poorer reviews, etcetera, etcetera. It doesn't seem like it makes sense if you overdo animations, but that is actually what happens when you over animate right. So an animation, if you look at Apple's guidelines, should serve a purpose. And that purpose is to director user or to display sometimes a special event to encase your event in sort of a special case, if you like. It's very poor technology, so I'm sorry, but it's too to really give a special feeling to a sets in event in your act. For example, when we click start time travel and these numbers come up, it's those numbers where we can start to use animations. Teoh build up what is happening on screen to give your user a sense of anticipation. And when you do that, your users get drawn into Europe and they become hooked. To put it bluntly, they've really, really liked seeing that, but only a few percent off the time, and only for special occasions. And I'll just give you an example. Before we carry on and create these animations. You've probably played those much older video games where it was. The graphics weren't great. You did what you did. It was all good. But when you reach the end of a level or you had a success in the game at the end of that level, there was an animation, and that's what you live for as a gamer for me. I grew up playing the final fantasy Siris on What I Live for was the full motion video sequences that happened at the end off certain parts of playing through the game. But I really look forward to seeing them now. If you played all of those full motion videos from Final Fantasy eight or seven, for example, which is your favorite mine was eight. I know that's gonna be controversial for some of you out there, but when you play all of those FNV scenes in the sequence, it's not great. You get bored, and it only holds nostalgic value for May. But when you play through the game, you've worked up an appetite to see something different. So that's what I'm trying to get across here is that we've used hard again animations. We have a ticking clock, but that's it. An animation for functionality. In this case, we're going to reward the user for clicking that button, which will make them click it more often. So that's just the animations and what you should be aiming for as a developer when it comes to that subject. So let's look at how to perform the simplest of animations in our project. In your second view Controller, which takes care of the time travel part of Iraq. Let's go down to our time travel button clicked function. Now it's in here that we're changing these labels, and that's what we actually want to animate. So let's start with a very simple animation just under where we've defined the year. Let's access an animation class, and these animations are actually contained in the U I view. So this entire view, if we go to the storyboard here, is actually made of a class called you I view. And you know that by clicking this class inspector and you can see in the top right here, it's a U Y view, so we know if you want to do stuff with it. A good first place to look is in the U I. A few class, and it tells you an object that represents a rectangular area on the screen and manages the content in that area. I think Apple will regret that description when they bring out a circular iPhone or something strange like that. So you can't just be rectangular. You can get lots of different shapes. You guys, you don't and just type what you think it might be. And lo and behold, we have an animate. Now we want to give this animation a duration. So how long does it take? That's the very first option with duration time interval. Then it asks us for an animation bit of code we're gonna complete, so we're going to write that you can alternatively have an animation, and then you can set a bit of code that runs on completion with this version. And if you scroll through the mall, you have lots of different options. You can have a delay for it. You can put some options with the animation. There are tons that you can do for now, which is gonna choose the first option with a generation. So how long is this animation? Let's have half a second. Let's hit Tab And what animations? Well, all we have to do here is open and close. Our curly braces remove that grave is in the middle by hitting back space and press enter. So these animations are actually going to be what we're going to do without labels. So what we're gonna do is we're gonna slide these items on to scream, right? Sounds simple enough. So let's try that. Let's have first label now to slide something. We need to know where it is in space so our animation function can keep up with it and know what's happening and do all of the extrapolation and all the complicated maths for us. So we're gonna pass it the center, which is a CD point. This gives it the center of the actual level. We're only drink horizontal, so we want to define dot X and that corresponds to horizontal. Why is vertical? And what we're gonna do to that is we're going to add something to it plus equals, What are we gonna add? Well, we're going to add the Vue. Don't bounds does wits. So that adds the whole width off the view to our first label. Now it's got some errors about reference to property it. That's because it wants self. So just click fix. And it will say, I need to put self in order to know where this is. And that's a common mistake that people make and it will be the same in self dot view. Okay, so we're all sorted there. I'm gonna save that, and we're just gonna run that and see what actually happens there. There's quite a lot to talk about and take a part in this lecture, and I'll get to that in due course because you're probably got a few questions as to what you've seen there. For example, why do we have to text after the animation. Well, I'll tell you something secret in a bit. So let's go to our time travel. It's click Start and there's our one three once see one. Okay, so that works very nicely now. What's going on here? Because this label gets set and this one and this one etcetera, and in this block of code, it runs through, so it executes this, then it executes this, but it doesn't wait to execute this. It just moves straight on and executes Vits. So this block here is running what we call a synchronously. It's not running line by line and waiting for each line to finish. That's important to know. Very, very important to know, because asynchronous programming techniques are everywhere these days and they help us create Really responsive. Perhaps so that's the first introduction to a sink programming. And if you're a previous .net developed, you'll know exactly what that's about, right? Let's do the same for our other four labels. So just copy and paste. That's half a second label, 1/3 1 of course, and the final one. Okay, so now we can run that, and whenever you click, play on the simulator automatically does save your project. Now it's gonna animate all those at the same time. Let's go talk time travel. There it is. So the whole thing slides on screen seemingly at the same time. Brilliance. That's quite good. But I would actually like to make this a bit better. So let's press stop and how are we going to make this better? Well, this function first was getting a bit complicated. So let's take this animation stuff out and create a separate function called Animates Aisam . Let's open brackets. We have to pass in some items festival a duration in time, which is a double. And what I would like to do is bring one label on, then the next, then the next, then the next, then the next. And in order to do that, we need a delay between our animations. So we're gonna pass in a delay for that which will be a double. And then we have to actually pass in the item that we want to animate. So we can say this is just the object and this is a type you I view, and you might be saying, but grounds isn't you. I view this is a label, Uh, but labels inherits all the way back from you. I view everything on screen comes from a U I view, so everything on screen can use the properties offer you I view. If you're still confused about inheritance, go back to the swift section that I've done and that will tell you what inheritance is all about. Right then, we also have to pass in a location from, and this is a special type. It's called CD Float. Then we have to pass the location to called CD Float or type of CG float. And this tells us the basic type for floating point scale of values and core graphics and related frameworks. Don't worry about that for now. Just know. Generally speaking, you pass in a CD float for a location. It's just two points X and y. Where is the thing? Right? So that's our function created. Now let's create our actual animation. So just like we did before you have, you don't animate. Now we want very specific ones. We want this one, I think, with duration delay, options and completion handler. So that is exactly what we want Now with duration, we're going to pass in, obviously, the duration in our function. The delay whips, delay. We're going to pass in some options now. We can actually create these options, or we can use some of the built in one. So just have you. I view animation options there press dot and let's have curved. He's in and out or actually, curve ease out. So it'll slow down as it gets to its final point, and then our animations we can hit, enter, and we can actually animate our items on What are we going to animate? Well, we're going to animate the objects dot center Dr X Plus equals just like we did before. Self dot view docks. Bounds does with that's simple enough and on completion, weaken do something else if we so wish. And if you just double click this and put in a Boolean so true it has completed, then you can have some optional codes to complete at end off animation. So it's totally up to you. You can actually, at that great Ah, and I don't think we actually need from and to in this is just cluttering up our view. I think that's one previous tutorial that I did, where I added in some extra options. We don't worry about that for now because we have our from and to with the object we pass in and the view that we are actually sitting in right. So now we can scroll back up and we can remove this entire section here and we can replace it with animates ison. We can give it the duration off half a second. It tamped. We can start the first letter immediately, and let's pass over the first letter, the first label that will do what it needs to do. Then we can just simply copy this and pasted underneath three times so we can change to the second label for this one. The third label and the fourth label. Right now we want them to duration. You want the animation duration to be the same 0.5 for each one is fine. We want to delay each one by just a little bit, so let's delay this one by 10.2 seconds. This one by 10.4, this one by 10.6. So can you see what's happening here? We're firing off this animation. It's coming into here. It's say I'm going to animate this item. This object first label and I'm also going to apply DeLay. I'm gonna wait a little bit, but the beauty of this is that it's asynchronous. So this executes immediately. It doesn't wait for this bit toe happen. Same with the 2nd 3rd and of course, the fourth. And because of that, it doesn't matter that these get assigned at the end to our human eyes. We can't notice the speed, the difference between them. And in fact, all of this probably happens in the tick off one process of cycle, which isn't technically true. So don't crucify me in the questions on that, but you know what I mean. It happened so fast, we just don't know it, right. Let's run that. And hopefully this is gonna give us a little delay. Just a just a noticeable one on each item. So have today's date. Let's go time travelling and start. And there it is so unfurls from that side ship chip chip chip. And I think that actually looks pretty neat. I really do like that animation, right? So that's how you create very simple animations. And it's also an introduction to a synchronous methods executing inside off your code. Well done for sticking it out in this lecture. It was actually a pretty tough one and is a lot of stuff to take away and learn from this. So if you want to have a break before we go on to the next one and I said, you're a bit of much easier, I promise homework, then feel free to do so. It's much better than these things sink in very slowly so you can understand them. Like they say, asynchronous programming varies or God. From now on, when it comes to programming, you're gonna use that so many times. And if you understand it now, your development Korea is just gonna take off. It will be so good, right? Go have a break and I'll see you in the next one. 57. M8 10 Back to the Future Homework: Here we go. A little bit of homework for you and you probably saying, Oh, what now? What do I have to do? Well, sorry, but I'm fussy. When I make caps, they have to be just right. They have to be free from errors and little distractions because distractions really spoil the flavor of your app. So in our time travel act, our little clock tick shows today's date as a label before it takes over once. So what I want you to do is fix that as soon as our act loads. I want it to be showing the time immediately so we don't have that little distraction. The second task and final task for your homework is something I wouldn't necessarily do in this app. But I want you to do it. To practice your animation capabilities. I want you to make the background screen of Tab one. So this time now change color every time that clock ticks. And it could be to any colors that you like absolutely up to you now, in order to animate that, you're going to change the background view cover. But I would also like the color to fade out and fade back in, fade out, fade back in. So it's smooth and not jerky. In order to do that, you will have to use something called the Alfa property off your background view. So this is your chance. And I hope you're writing this down. This is a lot of just said there. This is your chance to really go and explore the things that you can animate using stuff like you. I've you animate says a couple of one or two bits and pieces that are fairly new. But you should understand by now where to go look for these things or to use the code auto complete in X code to see what's going on. Right. So I'll leave you to that and I'll see you in about half an hour once you've attempted it, when I will give you what my solution is, Good luck 58. M8 11 Back to the Future Solution: last time I gave you a few tasks, I would like you to attempt in our back to the future. Yeah, and we're just recap. I bet you groaned when I said my homework. And you know what? Now? Well, I'm fussy, so I would like you to remove this clock tick delay at startup. I don't want to see that label text. It's up to you how you did it, of course. And then also, I wanted you to make the background screen of Tab one change color, but also fade in and out with a nice animation using the Alfa property. So let's have a look at how I would go about solving this problem and compare and contrast to yours. Let's first tackle the easiest part of this homework that today's date. What you could do is just double click this and you could hit space or something. So it doesn't exist. That's totally up to you. I'm not gonna do it that way. That's the lazy man's way. What we're gonna do is open up our first view controller and we're gonna look at what have we got here? We have our set up timer self dot Showtime. Here we have Showtime and this changes our label to show the time. Of course. So all we have to do is go up to view did load. So we know our view is there, and somewhere in here it doesn't really matter where we can simply call show time. That completely solves the problem. So now if we hit play, you can guess what the result will actually be. Should it ever load? It's like running the latest IOS on a really old I footedness. And there we have our time display, no delay whatsoever. Apart from skipping two seconds in my case. Okay, so that solves that one. Really simple now the animation problem rights. What are we gonna do? Well, first of all, let's set up some kind off function. It's always a good starting step. Let's have animates background. I think that will do nicely. Now we go back to our familiar you live, you don't enemies and of course, we give this a time interval. We could give this a second week. It actually give it a bit less. Let's say 0.3 seconds and delay off zero. We can give it some options. So this can be if you just have hit enter. It oughta feels that for you. Let's have dots because we could have ease in and out if we wish. Whatever you want. Experiment with everything. Nothing is wrong here. Hit tab on those two brackets to avoid, hit, enter and now you can enter your code in kids. So what code we're going to enter? Well, let's have self dot view darts. And remember, I said, we can set Alfa Weaken. Set this of the background or we could do it off the view. So if I just show you that background color dots with Alfa Component but that's a bit more complicated. This just have you dot Alfa. What are we going to do? We're gonna set that to 0.5. Alfa goes from zero where you can't see it toe one where it is opaque. So 10.5 is halfway. And actually let's make this duration one second so it goes over the hole, tick one second on on completion. Just double click that DoubleClick Brule and you can put true. So it's it has completed successfully on completion. We have to reset our Alfa because this doesn't change itself back. So Self docked view got Alfa is equal to the original, which is 1.0, right, so that is pretty simple. Now where do we run? Animates background. What? We want to run this when our clock ticks. So let's go down to we could run this in show time. Buts. It's kind of a bad place to put it because we call Showtime Now in view, did load, and we don't want to run it there. We actually want to run this every time our clock ticks, so it's probably best to run it in set up timer. And now we have a conflict. This runs every half second, which means this you wife, you animation is going to run. Essentially, it's gonna run twice over itself for every two ticks off the timer. So we'd better change this timer to 1.0, I think, to make sure those two animations and the timer actually over lap, send a perfectly are in sync with each other Now. Self taught showtime, we turn just below that hits itself dot animates backgrounds, so that's going to start changing the Alfa. So when I hit play. It'll set up the timer and animates background every time. And I apologize for my poor performance on this simulator. I actually think it's not my computer. I think it's just this beater version off. Ah, IOS 11 this running this. So there we go. We're running up and down. You can make this more subtle. If you like to change the old Alphas, you can drop the Alfa to whatever you please really, So let's just drop it. 2.8. Make it subtle, right? So in the last section I sexual of task, which was also to change the color If you so wished now, a color is more utility. It's nothing to do with of you unless you apply the color. So I think we should put this in utilities and let's have a function called gets random color. And what is this going to return? Well, that's a good question. How do we know what to return If we're a new developer? Well, let's go to our first view controller and let's, for example, just anywhere. Let's try self doctored view dot, background color and look, it says you eye color. That's how we know what we want to return. So you could go to utilities again and we can return au i co. And you may say, Why isn't it showing up? Because utilities, it says use of undeclared type doesn't know what it is. Stupid, Swift. That's because we need to import the user interface kits class. And once we've done that, it will know what you I cover is all about. There we get now, we have to get a random color. So let's try. Let's color core Coors Light. I could do with a beer right now. It's pretty warm. Where I am is equal to you. I color don't now. What if we got well, we've got fixed colors. That's okay. Get ready. Get something. We can get some of these in its record in. It is called when we first call of color. We have lots of things, right? So what we're gonna do, instead of getting the default colors, we're gonna delete this point, and we're gonna create our own colors. If you open the brackets, it gives you the options that we just saw has all the minutes. So we have lots of options. Hue, saturation brightness Alfa. And if you are ah, graphical design guy, you'll know what all of this stuff means. It just ways of defining colors and alphas and what not so we could try some of this. We define Red, Green, blue and Alfa. I think that sounds pretty reasonable now. I always forget how much it wants. Does this red lie between zero and one? Or does it lie between zero and two? 55? I say 255 because that is one of the standard ways of defining how much red, green or blue there is. Well, let's find out. Let's experiment. Let's try 0.5 0.5, Remove fats and let's have our blue at one point serious. This will be more blue and, of course, Alfa. We want this to be completely just Alfa, and now we can return this color so we haven't made it random yet, but we're just doing an experiment here. Let's go to our first view controller. Let's go to animate backgrounds and let's sense the background color. Self dot view dot background color is equal to our you tills don't get random color. I know it's not random that's fine. So it should display blew the first time it ticks. I'm gonna run this. And if it does, we know we're onto a winner. And all we have to do then is get some random numbers going. Take trillions. So it is between zero and one, and you can see that very subtle animation there, apart from the peeling at the top, that's not part of it. So let's stop that. Go back to our utilities. We know this should lie between zero and one, right? So now, before this, we need to get around a number between zero and one to give us a random color, said its creation of a function gets brand between zero one. It's quite a long thing that but hey ho, it is what it is Now what? What do we want to return? Well, if we look at this, you white color and again, if we just start typing you white color, open a bracket. It will tell us that it needs a C G float, which is just essentially a float, but something's come with that. Go away. So we're going to return from here a CD float, so it's like a float, but it has some core graphics implications which are related to all of the animations and stuff happening on our screen. Now let's get our Ark four random. It's such a random name. I just don't understand it Anyway. Let's give this an upper bound. Now we're going to divide this whatever number we get by the relevant number, so we can get a float between zero and one. And the problem with artful random is it returns an integer, a whole number, and we obviously can't use that. So let's think about was carefully. Let's return a number between zero and 100. Then let's divide the answer by 100 so you'll get zero toe won in the end. Okay, now that in and of itself will probably give us a double. So if I just get rid of those brackets, if I try to return this, let's see what Swift says once it's processed, what I've done here cannot convert expression of type you in 32 to return type CD float. Replace artful, random bloody glove with CD float off that perfect. So what Swift is doing is it's converting this answer to a CD float. Hopefully, that's gonna have the effect that we need. Now all we have to do is come up to get random color and use that function. Get ran between zero and one, and all we have to do is copy that to together sections. So let's replace these points, whatever's and play, then save that and that's run its and hopefully now we're gonna get random numbers. Now this random stuff is It's no is random, As the name implies. Heart bad joke. It's something you're gonna use pretty often in your programming career. Random numbers. Ha. So we have an era. We just have a black screen, and that is no good for us. So we've got a bit off debugging to do here. Why do we get a black screen? Well, let's go toe around between zero and one. Let's create a let rand number equals to this. Let's print that to our console so we can see as developers what's going on, and then that's return it just like we had before. So now when we hit play, we can actually see what number is being generated. So we understand what range is being produced, and we can see where we've actually gone wrong. Or rather, I have gone wrong. Let's be honest about this. This is my problem. We just have a whole bunch off zeros. That's no good. Let's stop that right. So we've got this art for random and what I think we need to do is we might actually have to cast this result to a double, so open and close the brackets, we can always try. There's no harm in trying sometimes, but there isn't programming but head and let's have 100.0 to make sure it is a double. Now let's hit play. There we go. So you see, it was actually a problem. My never mind the peeling of my screen there it was actually a problem off. And if we stop that we can see it was a problem of converting this to a double because before we were dividing an integer by an inter jet and it was giving us strange results. Remember, we did that quite a while back in these this course of these courses, however, you're seeing this and we discovered that dividing images can actually give us very unexpected results. So that's the number one place you need to look if your maths is going wrong. Rights that is our back to the future act complete. It's not the best looking at in the world, but it is functional, so well done for completing this. And there's just one more lecture to go to, and that is the summary off everything you've learned. 59. M8 12 Summary of Back to the Future App: right, guys. Water module Well done for completing it. That was a pretty tough one. And it's a pretty long one, So you deserve a nice break in the sunshine. Now, if you've got some sunshine where you are, you've learned so much this time around. So let's just have a very small recap you learned about tab bars, Tab our controllers how to put icons into those tab buzz and generally how that system works in storyboards. You also learned how to construct layouts with relative positioning to other items on the screen. And you also learned a few best practices. I hesitate to say best because perhaps my ways aren't the best, but they definitely worked well for me and have served me well over the years. So you've learned some practices, some grant practices s so you can actually achieve that. What else? We learned You've learned how to create utilities class, get random strings, get letters from the strings. You learned about your first errors in getting those letters. In terms of getting him from a certain location, you learn how to set up timers that run actually a synchronously, so they run after some code after the I. Sorry. I'm tongue tying my words here. Shut up, ground. Sort it out. Okay. Timers are asynchronous, so they will run in the background and they won't block your main. You I coat. There we go. That's what I meant to say. I've been teaching for too long. Stay. I really think I need a break. What else have you learned? Well, finally, you learned how to animate elements on screen. You learnt the very basics of you. I've you dot animate. That's gonna come in very, very handy when you create APS as long as you don't overdo it. Of course. Right. All that's left is to give you your reward off fireworks. 60. M9 1 Greek Gods Introduction: welcome to a new module. We're gonna learn a bit more off the basic IOS ecosystem through making an app called Greek gods. And what we're gonna learn is first of all, table views, thes of the infinite scrolling lists that you see so often on mobile devices. Now, everything I teach you in this section is actually applicable to android Windows phone and a lot of desktop operating systems these days, so it will stand you in good stead for the future. Then I'm going to teach you all about cells, which of the rose in these lists and how the lists actually recycle them to save memory and processing power. We'll look at how to insert data to those cells. That's the date you want to show to your user. We'll look at how to navigate from a cell to a new screen, otherwise known as a view controller and how to pass data between the two. It's a very important topic. Finally, will look a image views and dynamically loading data. And here's a little demo off the very simple app that you're about to make 61. M9 2 What is a Scrolling List? Explained with Lego!: before we go anywhere. I just have to say that this topic is a very important one for any kind off app development where there's android, IOS, Windows phone, whatever it is now in Iowa's, this topic is called a table view, and a table view is simply a scrolling list off items you can section those into different sections change the rope sizes and whatever. But at its core fundamental part, it's basically just a list of stuff that you can scroll through what seems like until infinity. If you just had a massive dates that you keep scrolling forever. And if you have an eye IOS device on android device, then you'll know you've seen these everywhere. If you open up your settings up, you scroll up and down to get whenever settings you need, and that is a table view or a list view. This view is what android users table views were IOS users, but they're basically the same thing, despite the completely different frameworks, right? So a while ago actually mocked up a Lego picture, I don't know what I was thinking, but since I mucked up that Lego picture of had a lot of hits on YouTube, saying it's a fantastic way of explaining it. So I'm gonna recycle that picture here and show you what's going on in a table view. And I'm doing this before we start programming so that you don't get confused if at any point you get confused with what I'm writing, then come back to this lecture and watched again and everything will start to gel into place. Right Cue scene one and the only seen. Actually, this is a list view or table view over on the left hand side. This is your mobile device mocked up in Lego. I think it looks better than any iPhone that's ever been made in the screen of our device. We have a list of items. It's these blue bricks where the's round bricks on top of them. Now, when we scroll our list, we need some way off inserting new items in that list, and those new items are called cells. The thing that takes care of that is called an adapter. An adapter orchestrates everything so it's grabbing new cells or use cells or whatever for us, inserting them into our list so we can scroll almost endlessly now, where does it adapt against data from? Well, you have a list of data that you feed to it, and this can be anything. As with most things in programming, it could be any type off thing. What does the adapt to do with that list of data when it has two Options Festival? It can create a new cell and insert the data into that cell so it might give you some images, some text and something that happens when you click that cell. Now, if our data had to make a new cell every time we scrolled up or down and then insert that cell into the list view, it would use a lot of processing power because it's not cheap to do. And of course, mobile devices are quite limited and processing power, so that's not a good strategy. So what the adapted does, instead is as you scroll the list, it takes the cells that have gone off of the screen, and it re cycles them, so it's already got a cell. All it has to do is put in the data that that cell now requires, or that it's changed, too. So that's the fundamentals of a less view or a table view, as it's called in IOS. Now, just a point, something out that you're going to come across foreshore because every development goes through this right. The recycled cells concept can cause quite a few issues with your programming logic. But that doesn't happen if you know what's happening. I e. If you know there's a recycled cell that is being inserted into our list, so that's how it works. We go from the beginning. We have our mobile device. We have our table view. We have an adapter that's feeding cells into that table view. It's populating those cells before it feeds them with data from a list that we provide. It's either creating new cells if there aren't any available or its recycling cells that have scrolled off of the screen. So the adapter and all of this is pretty much the conductor. It's the orchestrator of everything that's happening right. We're now ready to move on with actually creating some of our own table views 62. M9 3 Creating Greek Gods Storyboards and Table Views: we're ready to begin creating the graphical part of our. If you recall, that's what I like to do. Usually first in most of my app says create the graphical user interface. So let's open up X code and get going now. You should be familiar with this by now. Let's file new project, and naturally, we're going to create a single view app. This time we did tabbed APS last time or a few times ago. Let's hit next and let's just call this Greek God's Okay, so just talking about this screen for a second, because I've sort of glanced over it previously. You can name your product whatever you like with any spaces and caps that you prefer down here in your bundle, identify air. You can't have spaces, so X code will insert a dash on your behalf. That's absolutely fine. Okay, you can put your organization name in, so I'm just going to put this as something fake that you can micro and then you put your identify and I are Dance of fire is normally your website name, but backwards And this com dot GK microdot Greek gods is what the APP store is going to use as your APS unique identify. So this is a common format that you will want to use across your raps. Okay, click next. Unless, of course, just save this wherever we want to. Okay, that's everything. They're sort it right now. I'm just looking at this first screen because I like to give you a little bits and pieces of information here and there. Let's see what I can give you here, just one little bit. This section where it says app, icons and launch images. You can specify an APP icon here, and that's at Icon is stored in your assets. Start XY assets under, of course, app Icon. There's nothing there at the moment is just a blank, but that's just one extra little tidbit for you to know your APP icons are stored there and sit there. Okay, so let's get back to the main point of hand. Let's look at our storyboards and table views, so let's go to our main story board. And before we start dragging and dropping stuff in, there are actually two ways of inserting our table views inside off X coat. Generally speaking, that is, and if you come over to your object inspector on the bottom right, and you just type table. You'll notice we have a table view controller and a table view. Don't worry about table view cell cells or what contained inside of the table views themselves. So it's just these two that were interested in. Now the table view controller takes a scrolling list or a table view, embeds it in a controller and then kind of makes this love child between a view controller and a table view, and then presents that as a single class for you to use when you're making around. Now the advanced of that is it's easier to do one and two. It forces you to concentrate. You'll uses attention on just the single list off items, some maps you'll see. They will insert something up here, maybe a few buttons here, and then they'll drop in a table view some way down at the bottom. Now that's not very good design. There are times when you can do that, but you're dividing your uses attention. So that's why Apple have given us a table view controller. I think it's partly to make sure that we focus our uses attention on that single element. There are two ways of doing it both ways. Used the same functions, the same ideas, the same methodology to implement the table view itself. So we don't have to worry about any differences between them. In terms of that, Wigan's use a simple table view controller. So we're going to click and drag that. We're gonna drop it in somewhere in our screen ifit's amounts we can now see. We can click and drag these. We can now see that there are two of you controllers. We have our view control over here and this table view controller. These are not related. They don't know about each other unless we specify that in code. Now our APP is gonna open straight to this table view controller. So let's remove this controller on the left because we don't need it. Simply select it hit backspace again. You might have to zoom in to actually remove it. It's very annoying this. I wish I could just remove stuff just like that. You may have to go all the way to 100% to remove it. Here we go. So now we just have the single controller here. Why is this a problem? Well, because our APP doesn't know where to begin showing stuff. So we have to select this view controller using the orange yellow, the iconic that's up and then over in the property section, we're going, Teoh, actually click the attributes section and we're gonna click. This little icon here called is Initial View Controller and you'll notice a little arrow pops up on the side here. And that's telling us this is the 1st 1 that will be loaded. So we've replaced the previous one, and we've said this is the new one. Now, if you keep this selected and you go up to this class, inspector over the top, right for identity Inspector rather, we have this little class box that says we need something of type you I table view controller to assign to this view that we just dropped in. Now we don't have any of that. What we do have is this view controller dot swift, which is now absolutely useless to us because we've removed the control of it, goes with it so we can right click that and we can delete it. And you can remove the reference so it stays in your project or you can move the file to the trash that gets rid of it completely. Deletes all references, right? So now what we need to do is create the file that corresponds to his tables here. So it's right. Click. Our little Project folder goes a new file. Now this is new. Before, when we created a new file, we click the script file, but now we want a cocoa touch class, and that's just simply apples wave naming the things that we're going to interact with on our screen. And if you double click it, it allows you to create a file a class, and then it'll it also subclass is it? So it inherits from something we specify here and because we know that our table is a you I table view controller. And we know that because when we hovered over it, it told us that's what it expected out of its class. When we create this view controller, we need to subclass this type. Okay, so that's that might still be a little confusing for you, and it was confusing for me when I started programming donkey's years ago, so don't worry about it too much for now. But just know you have to match the types up to the things that you're creating in storyboards, right? So what are we gonna call this? Well, we could just leave us as table view controller. Let's see. But that's not a good idea, because if we introduce another table view controller will start to get confused. So let's just put this as God's table view controller hit next and simply created in your project. Now coming back to what I was saying, this class inherits from you I table view controller and you'll notice it has viewed it load like any other view control over its memory warnings. But it also has a whole bunch of other stuff that's to do without table. So we're gonna come back to that in due course, but for now, good for main story port and make sure we select our only table view controller over the rights. Set it as God's table view controller, so X code limits us to what we can set. It doesn't let us use other things like AP delegate all more every lease. So now this storyboard is linked to this file that we just created. Now we only have one thing left to do. That's test this in our iPhone SC or iPad Simulator. Let's hit play. And the first test that we're running here is to make sure this builds. There were no mistakes, no reference errors and things like that. The second test we're running is to make sure it doesn't crash when it starts running on our simulated right. Here we go. It is loading up and we'll know it's really loaded when we can see a few lines on our screen. There we have it and you can click and drag those and all those lines are is de notations off the individual cells in our list. Now, at the moment there are no cells. We haven't populates them with anything. We've told it. There are there is no data to show, but we're just making sure that our list view actually works, which it does great so we can stop that running. And just before I go, there's gonna reaffirm what we've done here. We've created a table view controller in our storyboard. We deleted the previous stuff that was there. We set this as the entry point, which we can tell by having these little arrow and that was done over. And the inspector, I always forget where this is is initial view controller. And then, of course, we created a class for this table view controller and we assigned it in this custom close. So everything is linked up and we're ready to go. 63. M9 4 Greek Gods Reuse Identifiers, Highlighting Cell Sections and Data: we've set up our very basic table view in our app. Now what we need to look at next is this concept of what's called a re use identify, and that is simply a way of identifying one of the cells that has scrolled off of our screen. So if we come back to our Lego image, a reuse identify allows our app to discover which cells are no longer on the screen by a unique identify and then feed them to the adapter, which then re cycles them with some new data. We're also going to look at highlighting of these cells, so you know, when you click one of the items in a list in Iowa's, it highlights and then unhygienic itself. We're gonna look at how to do that because that's not done by default. I don't know why, but I think it should be. And finally, we're going to look at how to plumb in a list off data, or rather not a list of data at the moment, which is gonna plum in some very simple data into our adapter, which will then feed it into our list view will do a list a little later on. For now, I just want you to get the very basic idea off what's happening with all of this list view stuff because it's very, very important to grasp early. So let's open up the project and get started. We're gonna start off on our storyboard without tables year now, you'll notice we have this slightly dimmed gray color that says table view, and that in and of itself doesn't do anything. But if you click it ever in the top right, it tells you this is a class of table view. We're not going to touch that. And it's pretty rare that you will actually touch the table view properties itself. You will generally be working with the cells, and if you look up at the top here, this little white space, if you click it, it shows you both on the left and at the top, writes that this is a table view cell inside of that cell. You also have a content of you, and obviously this is where your content goes, right? So let's click our table view cell, make sure it's selected, so we have the correct class selected here, and then let's go over to this little attributes, inspector, and the second option down yours maybe in a different place is labeled Identify a re use Identify. Now this is just a string. So our system knows what sells can be pulled up and recycled into our system. Because if you think about it, you might have to table views, and the sales might be called might have different properties to them. So you want to be sure you're pulling up the correct cell to reuse. So let's give this a table view. Sell. So it's a nice, simple identify. Now, when you come to more complex APS, you might call this Greek gods table view cell. And in fact, I think that's a better thing to do. I don't teach you guys bad habits. Greek gods table view so they would get. Right now, we have our identify sorted. Now our table view is almost ready to go, or we have to do. Let's go over to our gods table view controller, and we need to start a NCAA menting some stuff. So let's scroll down and you'll notice X code puts in this mark for us table view data source So this is where our data source or the the thing that's organizer orchestrates. Everything begins. It's a festival. We have a number of sections now. I don't if you've seen this before, but in a lot of scrolling list you can have a section of stuff so you could have section of AIDS. BC's or in your settings up. You've got a section of, you know, your wife. I stuffed your radio stuff. You've got a section for general, etcetera, etcetera. We're just gonna take a very simple case where we're going to return One simple section for now. We'll get to modify this later, but for now, just one section, then the next one we come across is number of rows in section. So this tells us how many cells or rose there are. And we can just put in any number we like. For now. Let's put in 10. We're gonna get 10. Actually, that's put in 100. Why, no. And then if we scroll down, we have this function cell for row at, and this is currently commented out by this Ford slash asterisks or removed that remove the one below it. Otherwise you'll have an era and let's configure the cell. So this is the function that feeds in the cell either a new one or a reusable recycled one . So festival we try to create a cell, and we do that by asking our table view two de que a reusable cell I e. One of the cells that's gone off the screen and we have to give it an identify. Now, if you remember, this is great Guards, table view sound. Now you got to get that right and exactly the same as what we specified in our storyboard. Otherwise, you're at will crash but will soon find that out when we okay, now we have ourselves now in IOS there are some default cells that we can actually use, and the very basic off them just has a bit of text attached to it. So it has a text label by defaults. You don't have to go creating your own custom cell When you first start out. You can simply call this cell with just Deke. You'd, and we can set the text label of it Now notice. Text label has a question mark. That means it's optional. That means it might not exist because, of course, you might have a custom cell. But we know it exists because that's what we've said it as. Or that's what expert gives us by default so we can put an exclamation to unwrap it. Then we can simply set the text equal to what? If you like Grant, let's say that. And then let's run that on our simulator. That should be everything we need for now. And there we have it. We have our list of me of grounds, but if you click it, you'll notice that everything stays grave and you want to sort that out. So let's sort that out now. But for now, congratulations. You got your first list. Let's go back to ex code. Stop it Running now. How do we undo that? Well, let's keep scrolling down that little selection thing. How do we get rid of it? We've got some stuff about editing. We're not gonna do that in this section. We've got stuff about moving, rearranging. We have some stuff about navigation so we don't have the function we need. In order to get that function, we can type override, obviously a function, and we can start typing the name of the function. Now the function that gets cold whenever we select something is as you would expect it to be named. So let's just try select Rose and look at all the options we have. We have did select road. We have two of those, actually, and I don't know why they look the same to me here. I think it's just having a moments. Never mind. We have will select rope we have Ah, what do we have? Everything shifting down here. Some strange thing Will de Select wrote. So we've got a couple of things we can choose We're going to choose the very simple one did select row at right So this is gonna be called once you've clicked with Rove and all we're going to do in here is we're going to de select the roads so that gray bar goes away. So what we do is we say table view dot and you guessed it. We're going to de select the rope at the index path. Now an index path is simply the location off the cell, and it includes information like the section it's in and the road that it's in off that section so we can pass in the index process that gets given to this function so it knows where to look, and we can animate it off course. So now if we run that whenever we click, the cells that grave are will appear and then quickly disappear with a nice animation and one you should be very familiar with on IOS today we have it. So that's how we de select the Rose. That's fine. Now we've only putting some dummy data. What we're gonna do is actually create the basic data class to insert into our acts. Obviously, I'm not gonna have the same thing every time. So we need a list of Greek gods. Let's create a new file to do that. It's a right click our project new file and let's go for a script file next. And let's call this Greek god. So this is the basic class that is going to define all of the properties that a Greek god has stuff like their name, their height to their superpower, and maybe an internal idea of some sort. So that's simple enough to create create a class called Greek God and we're going to give this guy in name or this girl which is gonna be a string. We're going to give them a heights, which is gonna be a double. So a number with a decimal point, we're going to give them a superpower, which is just a string. And finally, we're not actually going to use this, But this is something I want you to get used to. A concept called Internal I D. So this internal I d might actually correspond to an I. D. Number that you have in your database, whether that's on the Internet or in Europe itself. And it's something the user will never see, but it allows it. It gives you a unique identify so you can get some data for your guards, and you can match up various bits off your Greek God data. So we're not gonna use it. But I'm putting it in here to install good habits into you, right? We have a complaint. Greek God has no initialize is and it gives us a whole bunch of fixes. We don't any of those. It's saying you've created this stuff you haven't made them optional, which means they should exist. So how you gonna solve that, dude? Well, the way we solve it is we in it? This class, remember, in it gets called when we create an object from a class, and in this, we're gonna pass over a name and that's an underscore before there. So I can distinguish between the two items we're going to pass in heights, which, of course, is the double we're going to pass in the super power, which is a string and finally internal I D, which is an interject. Okay, Brilliant. Now we can just set these equal to the items we've passed in and you'll notice Swift gives us some errors here. It's telling us, returned from initial Isar without initializing all stored properties. That's saying you can't have these unless you make them optional or you actually septum somewhere, either in the initial Isar or by default in the class. So let's have name is equal to underscore name nets have heights is equal to underscore height, and you can see where I'm going with this superpower is equal to underscore superpower an internal I d be careful because there is an internal keyword in Swift you don't want to use that to internal fighting, right? That era should now go away, and our class is actually good to go. So we have our Greek God, but we have no actual data to create a Greek god with, So we're gonna create another class to do that. It's right. Click our project yet again. You file swift file Greek gods data. Now you might be saying, Why have you divided thes two items? Well, that's just good programing practice to keep things separate. It's better to have more files than fewer files as long as it's thing or I don't know what the exact word is a bit sometime. It's really hot here. Each file needs to actually hold the specific functionality that its name suggests. Yeah, I think that's quite a good description. So if you have great God class inside of great God data, they don't really match. They have a relationship, but they don't really match the file name. That's why we separate things out so later it will make your life much easier. Let's create our class off Greek god data, and all this class is gonna do is return a list off Greek gods. Now, how is it going to do that? Well, we need a function as a way so function. Yes. Oh, gods is going to return something. What's it going to return? Is gonna return an array. So these two square brackets, but an array of what? When it's gonna return an array off Greek gods. That's the class we just created. Okay, open and close our braces. Now let's create the array that we're going to add. God's too Save our gods, which is of type Greek gods is equal to and array of Greek gods. And we open and close brackets to initialize. It's now we have an array of God's which has nothing inside it down below that we can return these goats and these gods are being returned as an array. Every Greek gods, right. But at the moments, we, of course, have no gods inserted in there. So let's make some, let's say, let Zeus equal to. And this is how we create a new object. Greek gods. And as soon as you open the bracket, it feels in the initial Isar for you, that's pretty handy. If you just press enter it writes everything out for you. It's now you can give this garden aid. You can call him Zeus. If you wish. You can give him our fights. It's probably pretty large, Let's say two meters. And if you hit, Tab will go to Superpower. What was this superpower Lightning, I believe and will give him an eternal I D. Which is what we're not gonna use. But at some point in the future, that is something you will use. Now we can add Zeus to our ray of gods. God's dot Append Zeus. Okay, that was pretty simple enough, wasn't it? So let's create a few more gods, and what I'm gonna do is copy. This is news, and I'm gonna paste in three times. We got four guards in total. Then let's have Poseidon. The sea God. It's fill out his stats in the hapstall Iwas. It's a was enormous and Poseidon used to carry a fork. I forget the actual name of it, but I'm gonna call this country it. But we can get lightning bolts shoved up My You know what? For saying that about it anyway, So God, Poseidon, now against it append decided If I can spell. Right? Who's next? Let's have De Mita and bonus points if you can tell me without looking it up. What? The meter wasn't got off. I believe it was something like agriculture. Some put apples and pears and and then let's add De Mita. And finally, let's have Nike. But you didn't know that was a Greek god that they were Oh rather, he was or she Waas think the meter was female anyhow, 1.6 meters where I know what was that stupid power sports? Obviously. Oh, and we have to change these internal ideas two and three because they are unique. And finally, let's upend Nike to our right, right? Everything is in that looks good. We're ready to return this now, just before we carry on. This class is typically a place where you would go and retrieve some data from the Internet or from coordinator in IOS, which is something we'll cover later on, or your own sq light database implementations or even a text file. But the important thing to know is this name tells you everything you need to know about what this file does. For now, we're just returning this stuff because I'm teaching you about lists and table views rather than Internet things which will come in other modules. Let's now retrieve this data inside our table view controller. And the obvious place to do that is, first of all, to create our very own gods array. So let Greek God's equals C and we want to. Instead, she ate our Greek god data class we just created. And then we're going to call Guettel God's little return exactly what we need. And this is gonna fire before any of the table view has actually loaded and is ready to display data. So that's important to know the order of thes things happening. You could also do this in viewed it load if you so wished. Now let's scroll down. Number of sections is the same. We have one basic list. Number of rose isn't 100 because we only have four gods. But we can't just right for because you might have five gods or 20 or not know how many we have. So what we're gonna do is get our great God's Array. What did I call it? Oh, call it G cards. You know, I'm just gonna leave that cause. It's funny, right? And we want to get the number of geek gods that we have, and that's easily done with count. So now it will create or prepared to create the number of rows that we need for how geek gods, Right? What else do we need? Well, we want to put in data into our cell. So first of all, we need to pull out the particular God that we're looking at. So let God equal to let's get out, get guts. And then because it's an array, we open clothes are square brackets, and we have to pull out the particular index that we want with one we've selected for our road. And this is contained in index path. Ducked Row tells us which robbery rights will have out God after that. Then what? Well, they just removed this. We can set our text label equal to and were removed My name there. God's dot name Perfect. And of course we can say that. Now let's run that on our iPhone s e. Hopefully we should actually have four geek gods inside of our app. There we have it. Zeus beside De Mita and Nike. All right, that's stop that running. Perfect. Now we can also use something called a detail texting label in ourselves. Sell, doc. Detailed text label. We can unwrap it text, and we can set this trip. Bit of text. We could put the gods height in or anything like that, but let's put intact for more to encourage our user to tap it. Now let's hit play. And I bet you the price of this course that we're going to get a crash ready for it. Here it comes. Eventually there, we get crash and it takes us to the line. Unexpectedly found nail will unwrapping an optional value. Well, why is that? While our detailed text label doesn't actually exist and what I did is I force unwrapped it with this exclamation and can you see the problems with Force unwrapping now? So what I should have done is really checked that it existed and then tried to assign it once I was sure it actually was there. No matter, we're going to fix that, not by checking for it. We're gonna actually give it the detailed text label. Let's go to our storyboard. Let's click our cell, So make sure it's not the content view, but rather the cell that's selected those at the top. Right? Under our attributes, Inspector, we can select our style. So custom is one you create yourself. We can also have one basic right left detail and subtitle Let's try subtitle hit play So now we should have this A detailed text label available to us. Hopefully there. We have tapped for more attack for more tough, more taxing more right, so pretty simple. And you've also seen the danger of unwrapping optionals. Okay, so when you also select the subtitle you noticed that in the storyboard it changes its outlook for you. So that does mean, of course, you can select anything. You can see what a right detail looks like. Left detail, etcetera. I like subtitles Pretty nice. Basic one rights. That was a very long lecture. And I just taken through a couple things that you've learned in this section. We created some Greek gods, just a class. We created another class to pass back some Greek god data in form of an array. We took that data in to our table view controller right after the top you could also do this in view. Did load safe? You're getting it from the Internet or something. And then we set our number of sections. We returned a number of rows equal to the geek gods, Roelandts or count. And then we set the actual cell data. Oh, and we also de selected the row. Otherwise it looked visibly rights that was a long one. And this is a complicated subject. So if you don't recall everything we've done, that's fine. That's fine. You're gonna do this a lot, and eventually it becomes absolutely second nature to you. 64. M9 5 Table View and View Controller Navigation: It's the lecture you've all been waiting for. The one on navigation, after all, pretty much every app you've used when you click one thing or another navigates to a new screen that perhaps showed you some more data or a different part off the app. So we're gonna look at the very basic fundamentals off navigation in this section, and the way we're gonna do it is we're gonna look at one of the very common ways off implementing navigation one of the common places we would implement it, and that is in a table view. When we click a cell, we normally want something to happen. And usually that thing is showing a new display with some new data related to the cell. We just clit. So that's how we're going to do it. And we're going to fire off a new view controller and do what's called pushing a view controller on top of the stack. Don't worry about what that means for now, when we click a cell, so grab your project and let's get going. Here we have our app in our main story board within alsa millions screen. So the question is, how do we move from a cell and clicking it into opening a new view controller. Well, what we actually need is something in the background that controls the navigation. So if you think about it, you can have a whole ton of you. Control is sharing on your screen, but you need to have something in the background controlling where they are when they're shown when they get destroyed, etcetera. Now Ex Code and the Iowa's framework give us something to do this. So obviously we don't have to write that ourselves because that would be a right pain to run. Right now, what we're gonna look for is called a navigation controller, and the name is exactly what it sounds like. It controls navigation and over in our object explorer at the bottom right. We have the navigation control in near the top, and it tells us that it manages a stack of you controllers. Now all this stack refers to is just simply control is put one on top of another. That's why, like a card stack if you're laying cards one on top of another. Now, the navigation controller doesn't necessarily contain any view information. It just orchestrates the whole thing, right? So what you could do is grab one of these and you could drag it in and you'll notice if I'm hovering here. It gives us the knave controller, and then also it gives us a table view. Bizarrely, now we don't want to do that at the moment because normally when you're creating an app, you'll have a screen. You'll say, Oh, I need a navigation controller for this and you don't have to recreate and join stuff. So what you can do is you can click your view controller, make sure it's selected. You can either do it with that yellow icon or over at the left hand side and then up at the top. In our Ex code menu. We can go to editor and we can click embed in navigation controller, and it also has in bed in Tab our controller. If you remember when we made tabs beforehand, it does the same thing. But let's click Navigation controller and look what happens what? It makes a bit of a mess first, but if I move that to the side, it shows us that we now have a navigation controller and a table view our original table view, but you'll also notice that the navigation controller is now the entry point to the application. That's important to know, because the navigation controller has to sit behind the stack of stuff off whatever's happening in terms off navigation, right? So I think it's a good point at this point to run this in our simulator and see what's actually changed in our app, if anything and nothing will have changed, apart from a few visual cues as to the navigation controller we now have embedded. So we have the same Lester's before all the clicking still works. But at the top we have this gray area, whereas before we didn't have that. That's how navigation bar and contains the navigate backwards button. And usually it contains a title across the top just under the clock display. So that's all that's changed. So you don't have to do anything special with your other view controllers when you embed a navigation controller into it. Now, what we can do is we can change the colors of stuff. So in our view controller, you'll notice. Besides the table view, we also have navigation item, so we can give this a title if we so wish. If we go look over on the right and we get our attributes, Inspector, we can drop in a title Greek gods and that shows at the top. We can also put in a title for the back button when that appears. We're not doing that right now. If we click various other items, let's see what else we can get. Well, what I'd actually like to get is a color. So if we click around this tab are, it doesn't appear that we can get a color out of it. So let's click the navigation controller itself, and you'll notice this brings up the navigation bar selected on this. You can change the colors so the navigation controller isn't responsible for views apart from its own navigation bar, because usually you want your nab are to be consistent across your app. So when you change it in here and you add other items to it, the Knave bar will always be the same color or should be right. So we got on Alba. Let's change some colors in our attributes, Inspector. Let's look at our bar tent. Let's have a nice green. There we go. Or perhaps we can have an other Maybe a lighter green so we can have that green. And they just dropped capacity a little. Cleanse that. And I think it's given me a Grady int rather than a color. Yeah, so you can choose a Grady in from this? I didn't actually know that before. Anyway, we're not ingredients right now. We're in navigation mode. So we have our now bond. You'll notice it changes on both of these. But remember, this side controls that color and decoration. Right? So if we ran this, we just have a green. But I'm not gonna run it because we can carry on. Now we want to open up a new view controller when we click a cell. So we need of you Control the festival. Let's click and drag one in from our objects. Inspector, over here. That's completely blank for now. Now, how do you connect cells to these? Well, you can do this programmatically, but you can also do it right here in storyboards. And you're going to use some familiar motions which is holding down the control button and clicking from your cell over to your view controller, and when you release, it gives you some options. Show, show detail, present mode, early bloody block When you show, that lays it on top and it gives you a back button to navigate backwards. If you selected something like mode early, it would place the view controller on top but not give you your knave bar. That's important to know. If you did it mode early, you would have to have some way off backing out of it yourself. So we're just gonna have show. And when you do that, you'll notice gets this little back button that says Go back to greet cots. Perfect. So that's that's it. That is how you navigate. If we hit, play and run this on our SIM, then we should navigate from each and every cell. Obviously, we're just going to show a blank screen when we do it. But coming up soon, we will fill that blank screen with some data. But for now, you've just completed your very first navigation inside off your table, View said Well done. Now just to contrast, I'm gonna come back here. I'm gonna stop it running, and this little connection down here that links the two items are going to select it. And if you look over in our attributes, Inspector, we can give this and identify. Or if we wish, we might use that later on. In this course, we can give this a kind. So remember, this is the menu that popped up for us show present mode early, etcetera, present as a pop over. So let's try pop over. Let's see what that does. Let's hit play. So as a new developer, I encourage you to try things out and see what they do. As it happens, this has given us an error. Couldn't compile the connection. So obviously a pop over requires a bit more, so we're just gonna ignore that. For now, we're gonna change this kind to present mode early. Don't worry about pop overs. You won't need them that early on in your career. But let's try this motile one. The first thing you'll notice is it doesn't appear with the navigation bar up here. That's a big clue. When I tap a god, I get a full screen version off my view controller, and no matter what I do, I can't get back out of that now. Obviously, if you submit that kind of thing toe apple for review, they'll reject it and say, Dude, navigation, right. So let's change it back to show and push, and then let's save that. So that's Push and motile show now, Just before I go, I will say that showing something mode early on top is a great way for you to limit your user. So what they can do with your act. For example, if you want to give him a free trial and they do something in the free trial, you can present a motile pop over that forces them to select something before they carry on . Now it's a bit infant with Apple's rules. That's if you create a nap, Let's say, and people run a trial of Europe and then you show a motile pop over because their trial time limit has expired. Apple might action take a rap away from the APP store because it does. They don't allow that kind of thing very easily, but where motels are very useful is if you gave someone a pop up and said, Would you like to sign up to our newsletter purchase the rest of this app or continue. So it's It's very useful for controlling the flow of your app. If you like Rose with push, someone always has the option to back out. 65. M9 6 Passing Data Between Table Views and View Controllers: the most common question in some of my most popular YouTube videos are all about passing data in various programming languages because it's something you need to do very often now . There's no hard and fast rule with passing data. Sometimes you'll do things one way or another way, because that's what fits your application. I'm going to show you the very basics of passing data, especially as it pertains to view controllers, table views and new view controllers were showing. So at the moment we have this, we have our table view and we load up the view controller from that when we click one of cells. But how do we get the God data from this cell into this view? Control? We could imagine that we could have a list of God's somewhere and we could pull our list of God's out off You know, our God list of data swift file, according to which sell we've just clicked. That's a really roundabout way to go. And as a beginner, um, it's and I'm referring to you here. If you are a beginner, it's a bit of a tricky one, because beginners kind of have this tendency not to past data correctly, they try and create these structures in their minds. So what I'm going to show you is sort of the default way of passing data. It's the way you should always attempt to do it. And if you can't do it that way, you can do it a different way, right? So with that said, Let's open up the project and get moving, Right? So here we are with our graphical part of our app. Now we want to pass data through this little connection. Not really through the connection, but you know what I mean from one side to the other. First of all, we need to assign a view controller class to this little detail view controller. At the moment, if you click the little inspector, it's only a standard view control. It doesn't actually have its class. Obviously, we need some way to store the God object that were passing over. So we need a custom view controller. Let's create one right. Take our projects. New file, cocoa touch class. Because of you, Controller is part of the coca touch class, and we have our table view controller from before, but we don't want that. We want a simple view controller. Now, let's call this something obvious, like God. Detail, view, controller hit next and created inside of your project. Brilliant. So this should look pretty familiar to you. Apart from a bit of navigation down here, we're gonna leave that alone for now. Don't worry about that. But these first bits should be very familiar to you now. Like I said, we need a god object. So let's create a class level variable of our God, which is a type off Greek gods. This is gonna be optional, because when our class loads Greek, God doesn't exist yet. So let's say that let's go back to our main story board, select our detailed view controller, And then let's set God detailed view controller as its class. And once that set correctly, you should notice that change over on the left hand side just to make sure. Great, so we can save that. And now it's a good idea at this point to actually test this on the simulator, testing often is a very good idea. With any software development. Never assume that you've gotten something right, because it will really come back to bite you later on. Right. So let's click something and we're fine. Everything loads as we expect. Okay, let's stop that running. Now. How do we pass the data over to our God detailed view controller and populate this variable ? But it's actually quite simple. Let's go to our table view controller because this is where we're sending our navigation from and some way in here we are actually going to grab the gods that if you recall, we haven't array of them up here. Geek, geek gods. I got it wrong, actually. Going to change that now That's let's not have any silly mistakes here. Greek gods. We've had our fun and up here. Great gods. You don't have to change. You can leave it as it is because I'm sure you don't make the mistake that I made. Right? So we want to get the gods out of this array. Now, if we scroll down, we should look at these number of rows. That doesn't sound like it self a row at We're looking for the function that fires when we select. Something did select row at that could be it. But before you go looking at that is actually one more thing which might be down here if we keep going down. It's our mark navigation. And if I uncommon this, you'll see this override. Prepare for Segway. Now What's a Segway? Well, it's not a two wheeled device. A Segway is the name given to this item in your story board. If you look up here, it says storyboard Segway at the top, Right? So that's a Segway. And this is preparing us for a Segway. So when one gets fired, this function will get cold. Okay, so I'm going to get rid of these comments here. You can read those if you wish. Now what we want to do is we want to pull out the correct God for the correct cell that we've selected. So we have to check that we can get the correct index path for our table view. The way we do that is by typing. If let and we create a variable index, path is equal to the table view darks index path for road. So we're pulling out the actress this one index path for selected road, so this should be failed there should be populated with the number of the road and the section that we're selecting. So if we select that, we should get the correct one. So if we can get that, then we can do something with that index. Right? So what are we going to do with it? Well, we're gonna set the God inside off our detailed view controller. So first of all, we need to get a hold off that few controller so we can say if let's V. C is equal to Segway. This grabs the Segway that we're using, and what it does is we can ask it for the destination. And if you notice if I take that again, it gives us a you I view controller type off destination. And then what we're gonna do is we're gonna try and do what's called casting. So we're gonna turn that you I view controller into using this word as we're gonna turn it into a god's detail view controller open and closed braces. So all I have done here is I'm getting the destination view controller. I'm seeing if I can change it into a God detail view controller. If I can. Then I know that I have this view controller and I can set my God, if I didn't check for this. And I just said simply for some rap as later on you might change your app to open up a different kind of view controller, and at this point, you would get a crash. So let's have a question mark, And if we can get it, then we can say V c dot God is equal to And we can grab our array of Greek gods and we can pick out the God at index path dot road. So now we've set the God in our new view controller. Now you'll notice we don't have to fire off the God detailed view Control. The system is doing it for us. This prepares Segway function, allows us to set stuff before it shows the view controller. So it loads it up. Says what you want to do, you do something, and then it continues loading the rest of it. So it's pretty handy. Now he has a warning for you guys. Don't do any long running Internet fetching off data here. Or don't do any long running even database stretching of data here because it will slow down your app and it could cause some very weird bugs. And indeed, crashes. Get your Internet data in a different place when you have a stable view on screen, not when you're transitioning. That's a very dangerous thing to do. Okay, so we've got it. Let's go to our God detailed view controller and in our view, did load. Let's make sure our God is set. So let's print our God docked name and save that you notice. I've said only try and print this if we can get a God out of the optional Okay, uh, what's this era default value for sun wrapped, The value implicitly coalesced from string to any Well, let's see what happens. Let's hit play and see if that actually messes up our string. So now when we click one of cells, we should get if it's showing us the debug output here, there we go. De Mita and Zeus brilliant. You will, of course, notice it says optional, because I'm also printing out the optional and that has something to do with era. But we're not gonna go into that because there's enough to learn in this section already, as it is right. So our transfer of God is working. And just to recap that for you, because this is very important thing is first now storyboard. We set our Greek gold detail view controller. We creates the God for it. Then in our table view controller, we used this override. Prepare for Segway took first get the index path, then get the destination view controller. Then set the God based on that destination view controller. And that is how we pass data between a table view controller and a new view controller. 66. M9 7 Creating the God Detail Screen Image Views: We now have our table view and our navigation set up, but we currently have an empty, detailed view controller. So let's set this up. And what we're gonna learn in this section on top of setting this up is obviously going to recap basic labels and things. But we are also going to look at image views and how to load images inside of our wraps so that they fill out screen at the correct aspect ratio. It's actually not that difficult to do, so let's get on with learning it. The very first thing you have to do is download the images that are attached to this lecture. So we have our Greek gods dim eater, somebody, somebody, somebody and somebody. And I've gotten all of these with a royalty free license so you can feel free to use them wherever you like. Just simply search on Google for reuse images on Google images. If you want to find your own versions off these butts for your convenience, they're attached to this lecture, right? So the first thing we're gonna do, of course, is play around in our storyboard, and we want to drop in what's called an image view. Let's get around to object inspector or object filter. Click the Image View, which displays a single image or animation described by an array off images. Let's not worry about animations for now. Let's just have our single image so we can drop this in and it behaves like any other object. You got to constrain it. So let's do that now. We could click and drag with control Press down release, and we could set some spacing. Or what we can do is we can select the image view and down in our little constraints at the bottom. We can select the 3rd 1 in or the 2nd 1 in, depending on which way you're looking at it. And we can set these values as zero because we want this image to be full screen. So let's add four constraints. Great, so it's constrained it to the top and bottom. But what's going on at the sides? It seems to have some kind of margin. So if you select the image view and you select the constraint, which is this vertical bar, it's not horizontal. It's no horizontal, I should say. If the constant is zero. If the distance is zero because obviously it can't show that. So when it zero the bar is vertical. Now, just above that. And we're looking at the attributes Inspector, you'll notice there is this relative to margin. And if you d select that we now have this little horizontal bar and if you double click it , you can set back to zero. And now it feels screens that just a little warning. IOS likes to give you margins on each side by default, and we're going to do the same with the left side. So it's zero. And in this case, the relative to margin isn't the first option. It's actually the 2nd 1 relative to margin and we can double click it zero and we are in. So that ensures that in future, when IOS changes, your act will still look the same. So I was increases or decreases its margins. You won't be affected. Some people on by some people I mean myself. What I did when I started out was I saw this. I got really annoyed by it and what I did. Waas I'm just gonna undo a bit of this. I would select to this item and I would go minus 20 because 20 is the size of the margin. But you can imagine if Apple change that would be royally screwed when a new version of Iris came out with a margin of, say, 10 or 30. So that's a bad way to do it. Let's get rid of that. Stop it. Let's simply click off the margin and change the constraint to zero so it will define on future devices. As a programmer, you need to think about the future and the future devices because they roll around faster than you expect. And if you do things right the first time, it'll save you a lot of pain further down the road. Right, So we've got our image. Now be nice to have a God name at the top. So let's drop in a label somewhere near the top. I'm gonna align this over to the right, and I'm going to really crank up that size so we can just keep going. I'm gonna line that label to the right. So it's this little icon under alignment. I'm just gonna shifted over so it kind of sits in the corner. Let's zoom in I'm gonna control, click and drag to the view, put some horizontal spacing and, of course, some vertical spacing, so that would position it if we click our little refresh icon at the bottom. Little update. Everything for us. And, of course, it has messed it up. Must be a bad programmer, so I think it's this bottom constraint. Let's delete that control. Click and drag horizontal spacing, right? So it's during the horizontal spacing over from the left side, which it shouldn't actually be doing. So we can delete that constraint again. And let's delete this top constraint to, and what we're gonna do instead is come down here and see what we can do with these. Let's have 10 and 10 on each side now that's constrained it correctly. I think that was happening because we aligned our image view to the nearest item, and sometimes when you control click and drag, you can select the wrong thing without knowing it very easily, as something I think Exco needs to tidy up on right. So you want this label to be very large, so it's having about gay big. Let's give it a wits so it stays that big, and that's going to be if we double click it are with God name. No one's going to see that because it would have changed before. This loads all right after it loads. But before it appears, then it's dropping another label below it. That's gonna be the stats for our God. Remember, we have a height and a superpower, so let's align this to the right. Let's align it to the God name of vertical spacing and let's align the trailing edge. And, of course, let's give it a with and we'll just call this details. This is for us. No one will see this. That's gonna look fairly slick, I think when this loads up now, of course, we have to outlet everything. So, Assistant Editor, it's just make some space and it will open up our God detailed view controller, which it hasn't. It's opened up this one, and that's probably because we haven't selected this one. When we click this, it should change the assistant editor to the correct view controller. Now let's control, click and drag our God's name label just a zone outlet. Sometimes you'll get this that pops up, and I think it's, um it's mismatch because Exco just trying to put it in a weird place. So if that happens, just try and put it somewhere else. A little bit lower. Perhaps you can always move them around later on if you want to, so don't worry about that. It's just some weird thing that X coat does. Let's get our details label and finally, our image view God image view as an outlet right now. Just a word of note here. Notice X Code puts an exclamation. So it's four sonnets telling us there is definitely you. I label these are optional because when we link it, it's obvious that the image view does exist over in our storyboard. If it didn't, we would actually get an error the first time we load it, and it's quite an easy one to debug. So there's just Exco doing its own thing with these force on wrappings. Okay, so we've done that. Let's put my side by was back on. Let's go over to our God detailed view controller and inside off our class. Let's create a function to load data now. You can actually call this load initial data if you wish. Sometimes I do that. So I know what the first thing is that I have to load and I'm gonna call that in view. Did load load initial data So it's in here Will set the name and the details and the image view. It's a festival. Our name label don't text is equal to the god. If it exists dot name. Then we're going to set our details label text as equal to now. We need a string and we're going to show the height. Now I say we need a string because the height is actually set as a double. So if we did god dot heights and then we added on meters to it. We have an era you can't apply buying your operator to double and string. So we have to change this to a string. The way we do that is with string like that now there'll be an error that pops up in. It has been renamed to innit? Describing And you might be saying is the newbie What? What does that mean? I'm trying stream. What's in it got to do with it? Well, it's firing off the in it inside off the string that you're trying to create. That's what it means and what it needs when I click. Fix is a label. Four. The argument that you're trying to pass. That's all it's complaining about. It says you haven't given me a label, so I don't know what to do with this. That's fun. Okay, so let's have meters and then adopt on a space because we're gonna add some more to this plus our way. God dot superpower. So you can see how superpower Now this will give us an error to. And if you click the red, it tells you the string optionals No unwrapped. You can replace it with an exclamation to unwrap it. And we know that's a fairly safe as we stand right now so we don't have to go if let God superpower etcetera, etcetera. We know we're okay. As it stands, rights were loading our initial data. Let's click play and see what this looks like in the simulator. Right? Let's click an item. We have Poseidon. Oh, and we have this weird optional to point something something something that's very weird. Let's go to Zeus. Optional two meters lightning. Well, let's get rid of this optional word because what we're doing here, these were saying, Give me a string that describes this So that's exactly what it's doing it saying, Well, this is an optional there you get. So how do we fix that? Well, it's surprisingly simple to do. We can actually remove this describing, and we can force unwrapped the God. And that should do the trick. That should remove the descriptive nous off it. The optional. Now it's not obvious if you've just started out programming that that's solution. But, hey, that's what it is that we have. Zeus. We have Poseidon 2.4. We don't have 2.399999 like we did before. And that's just a precision era again, something you gotta watch out for. When you're programming things. We have Nike. Okay, perfect. So we've loaded our initial bater. Now, how do we get our images? Well, let's go to our main story board. It's select our image, you and you'll notice there's a drop down box on the top right that lets us choose images at the moment. We have no images in our project, but you've done this before she should be familiar with it. Let's go to our assets. Start XY assets and it's hit, plus creating new image set. Let's call this Zeus. Let's just create a whole bunch of them, perhaps four, because that's how many we've got. Poseidon, the meter and, of course, Reebok. Note. 90. Okay, now take those images that you unzipped before and drop them into the two X Let's go for dim eater Aside, in and Zeus. Okay, now, if you go back to your main storyboard, you can select your image view and in your image, drop down box. We now have all the images available, so let's just select a meter and you'll notice whatever you select. It's kind of the wrong aspect ratio. It's kind of squashed. So I love this image is a pretty sweet image, right? How do we fix that? Well, with your image, you selective just below where you set the image is a content mode. Lots of different options we can aspect fit. That means we retain the aspect ratio, but we make it fit to the two sides closest to the image. Having explained that very well, it's rubbish, but it fits it whilst keeping its aspect ratio to your image. You If you want to fill up your image, you you can select aspect, Phil. And now your image is completely filled in the image view. Of course, our labels have disappeared. So if you want, you can create these as a white label, which I'm going to do here, there. We guess that looks pretty sweet now, whatever image you choose will aspect, Phil, very mind aspect fit gives you that image aspect. Phil gives you this one. I really like full screen stuff because it's a very modern way off designing things. We've got Nike and two meter Okay, so we've got everything we need for our Greek god images. Now, let's go back to our detailed view controller and in load initial data. We're gonna set our image view programmatically so, God, image view. Dr. Image. He is equal to you. I image and give us a few options. We want to pull out our image named so we can pull out a named image as a strength, which is just the name of the image in our Assets folder. So what is our image name? Well, that's simple enough. It's actually God don't name and then we're going to unwrap that. So let's save it. It's hit play, and the more astute among you will have noticed. There is an error looking here. But I'm gonna run this anyway so you can see the era in action. It's only a small one, but it matters. Let's go to Zeus. I don't have the image. Poseidon. Nothing. That's because our God name starts with a capital Zeus. In our image is everything starts with a lower case. And as far as Swift is concerned, those are not the same. So we can change our images to dim eater to a capital and etcetera, you get where this is going rights. Now we can hit, stop and then play again. And we shouldn't have the same issues we should have. Our image is loaded, so let's select Zeus. There we have it. Poseidon cutlery. Nice superpower bread, de mita apples and pears. Nike. Now, just a word about design on this. I would actually move across this Zeus a bit closer to the right hand side because the very modern thing to do to really fill up your space and leave blank space in other places. But I'm no designer, and if you're making a sweet out, then it's worth it. Toe hire a designer for more AP okay, so that's how we set up the image views for our app and how we assign images using strings . 67. M9 8 Greek Gods Homework and Solution in One!: right. The homework and solution is all in one in this module because it is so easy. What I want you to do is simply add another God. So it displays in our table view. And so it shows all the gods stats and images inside of the God detail view controller. It's really easy. So I want you to pause the video here whilst you open up X code. And once you've paused it, once you've attempted it, then come back and I'll show you my solution. The very first steps, the solution is to add another image set in our assets star XY assets. And let's call this the god of your choice. So I'm gonna have Hermes, the God of Transport or flying or something, and I'm going to open up my finder on. I included this image with your pack Gonna drop that in now. I'm gonna go to my Greek God data, and I'm simply gonna add him as one of the gods that I pass over. So I'm gonna copy this bottom road, he center. And let's change this to Hermes 1.9 superpower post or, if you're American, the mail change our internal i D, which I know we haven't used. But it's just good practice to do this. Change his name to Hermes, Independent to you, Sami's right. And amazingly, that's it. That's all you have to do, because when you play this, you've now added one bit of data to your app. But because the table view is dynamic, it knows toe add the count off the Greek gods you have. And it also knows in the detail view controller which image to select. Now we have Hermes. When we select him there, we get 1.9 meters and mail. So that's the beauty of programming. When you get it right, all you have to do is add a one little bit of data and an image, and it all simply works as long as you're systematic about what you do. So if you got that solution as quick is that then well done, 68. M9 9 Greek Gods Summary: congratulations. You have finished the Greek gods app, and you have learned probably the most important thing in IOS, which is table views. You're going to use them all the time and everywhere. Solutions have a little recap. You learned about table views, which are essentially scrolling lists, or some people call them Infinite scrolling List because you can just keep going. You learned that they actually use recycled cells. And ive bold did that because that's very important for fixing errors later on. When you realize your cells are not displaying what they should, it's because they're recycled, and they might actually be showing the data from before they were recycled. So whenever you have a cell, always make sure to set all of your data every time you show that cell. Then we looked at data insertion to sales, which was pretty simple. We looked at very basic sales, no custom cells. Yet we looked at how to navigate from one cell when you click it to a view controller and also how to get rid of that gray animation on the cells. Then we looked at passing data between the two in the recommended way and finally We looked at image views and how to dynamically load image data into them, using the images from our Assets folder. So that's pretty much it. But all of these points are really, really important. I mean, if you got the time, do this lesson again in a couple of days time because it will stand you in good stead in the means on Let's have some fireworks to celebrate. 69. M10 1 WHere Was I? Introduction: let's start creating some slightly more complex apse where we really start to dive in tow what our mobile devices can do for us. So in this module, we're going to create a map app, which on its surface, it seems really simple. It's simply an app that shows you your current location on top of Apple maps and shows you where you were previously using a little pin annotation. Now that might seem simple. When I describe it like that, just show a map and put an annotation on it. But there are quite a few steps we have to go through and be aware off as a new developer. So we understand exactly what goes into something like this. So the things you're gonna learn in this module quite important. First, you'll look at stuff like permissions because perhaps you've opened up an app on IOS before , and it's asked for permission to say, access your microphone, the camera, whatever it is. In order to track your location, you need to give permission to the APP as a user's, so we'll look at how to do that. And that process is the same pretty much for any commissions that you need. Then, of course, we'll look at getting our current location getting it from the IOS system itself. Location is not something that we deal with as a developer. We simply get the result from the system. Then we'll look at getting the coordinates, latitude and longitude, Excuse May latitude and longitude. So we know where to put the pin for our user. We'll look at how we store things. So this is a very important thing, how we store data inside off your what it called user defaults. Now the lots of ways of storing data. You can store data in plain text. You can story in databases, but one of the more common ways is user defaults, for when you have a very small amount of data, it doesn't need to be categorized in any way. User defaults are great, and as the name implies, these of the default settings that perhaps you would include with your act. And finally we'll look at how to add a pin to our maps. So this is called an annotation, so all of that combined together is going to give us an app. In the end, that looks something like this. Our current location is displayed as well as a pin annotation off where we previously were . And of course, we'll be able to zoom in and out of the map. So if you're excited about this and you should be because mapping is obviously quite a popular category, let's open up X code beater and get cracking. 70. M10 2 Showing a Map with Apple Maps And Frameworks: Clearly the very first task we have is to create our app and show a very basic math in it. Now, this map is something we are going to pull out from Apple maps sing as it comes installed on every IOS device, and we're pretty much guaranteed that it's going to exist on that device. Now, in order to show a map, we're gonna have to use something called a frameworks. We're going to have to import the Apple Maps framework into our project and used that framework to pull out the map and display it on screen. So rather than talk about it, let's open up X coat and try it that way. Let's start by creating a brand new project. And for our purposes, this is going to be a single view, not a tapped out or any other kind of at just a single view one. And what are we going to call this? Let's call this where Waas I and we have our usual identifies which produced this unique name hit next and, of course, save your projects somewhere. Okay, so our project is now ready. Let's go over to our main story board and we should see some familiar sights there primarily. If this works, there we go primarily. We should see our main view controller. Now we need a map. So let's go to our object Explorer. Let's drop in map. And here we have a map kit view. So if we click it, let's read what it says. An M K Matthew Object provides an embed herbal map interface similar similar to the one provided by the maps application. So you can use this class as is to display map information and to manipulate map contents so basically can do a lot of stuff with this. Let's click and drag that into our view. And then, of course, let's position it without constraints. I'm going to give it zero constraints on all sides. And now, if you recall previously when we made constraints, we have to take off that relative to margin option to make it fill the whole screen. You could do that at this point by removing this constraint to margins option. So now when you have the constraints, it's going to put it over the entire screen. Now I'm not sure why this is suddenly turned red at the sides here. So if you click out map and we click this little red icon, it tells us we need constraints for the Y position, which is very strange to me because it should be filling the whole screen a case. Let's go back to that list. So just for your purposes, click this little red icon and it tells you exactly what's wrong with your map view for Y position or hut. So something's gone a little bit funny. Here we have our horizontal positioning, but not the top and bottom. It's one of Jews. Remove the top and bottom constraints, and I'm going to control Click to the View and I'm going to give this vertical spacing and I'm going to make this zero and do the same at the bottom. And I suspect that's going to fix our problem. So vertical spacing to the bottom and there we go. We have no more red. So now, uh, when I put zero in there, that gives me an error that is very, very strange. Need constraints for why position now, this is an error I haven't come across before. This is very bizarre. Let's put one into it. for hundreds, and we have lots of errors. So let's try that again. Control, click, Vertical spacing and it's blue. Now, I don't know why it's during this era, and I really hope yours isn't drink this because it's quite frustrating. So let's have this set to zero and we come out red. You know what? I'm gonna disappear for a second. I'm gonna fix this and come back and tell you just what's happening. Okay, I'm back. So what I discovered was that if I control, click and drag to the bottom and put vertical spacing at the bottom and then position this 20 and then do the top. So the opposite way we did it before vertical spacing to the top. Everything seems to be okay. We've got no errors. And these are exactly the same constraints. So I mean, I haven't looks this in depth because I don't want to waste your guys time for hope for my time, For that matter is probably a little thing I'm missing. Or I found one of the elusive bugs in X code, which actually aren't that elusive. There are a few. Okay, maybe I'll report this to Apple anyway, we now have our map view. So what happens if we riding this on our simulator? Well, there's only one way to find out. So here we go. Using the magic of time compression. We are now running our app, and nothing is happening in our I mean, our curse of changes. And if you hold down the old key, you can actually zoom in and out of it. That there are math is loading now. Okay, so we've loaded up our map now, Previously in previous versions of X code, this would actually crash if you did this without adding the framework. So remember, in the instruction I talked about framework Well, let's go back to our ex coach and let's click this uppermost solution level folder, right? And then inside of this section, we have thes tabs. The top general capabilities, resource info, build settings, build phases right now, under build phases. We're going to look at these various folders that we have available. So if we look at link binary with libraries, this section the 3rd 1 down, so I'll just close these to make it clear this is the place where we link the various frameworks that we haven't included by default in our project because you can imagine if we included everything. Our APS would be huge. So X code allows you to include things as and when you need them. Now, in previous versions of X coat you needed toe. Add the framework for the map kit here, and it doesn't seem to be crashing right now. But just to be sure, let's click the plus icon and then let's search for map math kits Framework. Let's add that and it should appear eventually and it hasn't something looking in the other things. Okay, so it hasn't appeared Bear in mind. This is still a early version of X Code, and it should appear here if I actually restart expert, which I'll do now. Rights. There we dio it is in, so you may not have that problem and I hope you don't. But now we have the framework for map kit, and what I've just realised is we're probably actually gonna need this later. Ron, when we come to coding and we're referencing the map kit, I think what's happening in this newest version of I West is the storyboard automatically inserts the map for us, so we don't actually get a crash. Okay, but we are actually gonna have to use that map kit. Finally, let's just run it the one time in our iPhone s e just to be sure that everything works. So when you're adding frameworks and kits and things, it's always a good idea to run it, to make sure it works, because it's much easier to track down a buck when you change one thing, Then if you've changed at five or 10 things, because then you have to reverse roll back and try everything one by one, which is really, really painful. All right, so there we have our map working and you can tell which country I'm currently in its Bulgaria. Okay, so let's stop that running. And they will move on to the next lecture where we look at getting permissions to actually get our location 71. M10 3 Info: Now our app is a map as humans Gavit we need to run this up on devices that can display a location. So we're gonna set some items in a file called the Info P List, and I'll show you where that is in a minute. And that file is included with every app that you create. And basically, it's just an XML file that allows you to set various items like user settings, if you like, or use the default I shouldn't use. Use the defaults. That's a different thing, but just settings. And inside of that file it we're going to set up something called the required device capabilities to make sure the device that we're going to install on has GPS. If it doesn't have GPS, then your act will not be downloadable at on the APP store. So the APP store can read this Info p list and decide if it should display that result to a user or not. Then we're going to stay in that Info P list. We're gonna look at how we asked for permission to get a user's location to track them, because Apple is very hot on privacy. Unlike Android I find Android a little bit. They walk the line between gray area and okay, it's I'm not happy with the way Android treats permissions. IOS. I'm very happy with the way does it because you have to ask your user specifically, I need to do this for this. Okay, so let's look at editing our Info p list file inside of our projects inside of our Project folder. All of these files we've seen before at Delegate View Control of Maine storyboard assets yada on the last one, or somewhere in that mix is info dot p list, and when you click it, it shows you a list off items, so you've got an information property list. That's what P list stands for Information property list and this construct or strings. So it's storing variables like you might know them. Julian's arrays, etcetera, and inside each of these settings, we can specify certain things that are device needs to have if he uses going to install our app. So if we go down to required device capabilities, that sounds like it might contain the GPS setting, and we have an item not called arm fee. Seven. What does that mean? Well, that's just referring to the process of type that are device users. So obviously we want to keep that in there, and you should never delete any of these without knowing exactly what you're doing. Okay, said we want to add another property to this. So what we're gonna do is if you hover over these items there little pluses and minuses that come up so we can click the plus on the array. And now we have item not now from memory. I don't think it matters the order of these things because the APP store processes them all anyway. So item not. What we need is GPS and hit enter. And that's creates another item. What else do we need? Well, we actually need location, dash services and hit enter. So now we have our items for GPS and location dash services, and you can find these items in the apple developer documentation. If you're not sure what to write because it's just a string, there's no auto complete here. They just assume that you'll go look on the Internet and find out what these positions are . So now what does this mean? What it means with these two items we cannot install on devices that don't allow a location . Now, if I recall from memory, every IOS device does location through WiFi, but some of them don't actually have GPS, so this one is going to stop them from installing it. We could actually remove GPS, and then you could install it on WiFi only devices. Probably. You'll feel free to test that if you want to. But as it stands, we're just drink GPS rights. We've got that running. And as usual, we hit play. We make sure that it works and it runs on our sim. And the reason I'm running on the same now as well is to show you that you can actually have a location in your simulator. So I mean, currently it knows what country I'm in. So obviously there was some kind of broad level ah, location going on here, but the simulator also allows you to set your location. Now, where was it? I believe it was hardware perhaps? No debug, no window? No. There is somewhere where you can actually set your location. We're gonna have to find it again. I think I've just got programmers blind this anywhere. So basically your device, your simulator does have location on it. That's fine, but it's not ready to use location just yet. You still have to ask for permission. So let's stop that running. And of course, we also permission in the info he list, as I've said previously. Now, luckily, let's just close this array. Luckily, in the information property list, we can hit plus, and we get a nice drop down off all the items available to us, which is very handy. So the first thing we need is privacy. If you scroll down, there's a whole lot of privacy and we want location when in use. There's a few location items there, but we just want to use the location when the user is using the APP. You can also ask for location when the user is not using the app or a broad level location . When two user when the APP is in the background all a bunch of different properties. But that's where you set it now. What is this asking for? I mean, X code there we get. It's asking us for a description and this if we double click the value section is going toe . Tell the user why we need the location, and that's a good thing to do. So I'm going to say your location helps. The APP pinpoints where you've Dean. We do not send the data anywhere else or something like that. It's always good to reassure your users. Or perhaps we do not collect. The data is good to reassure your users that you're not using their location for nefarious means because nobody likes being trapped. Attract. Okay, so now we have that That's fine. And in the next section will look at how we actually ask for permission. So by itself, this doesn't actually do anything. There's no code behind it. We need to manually ask for permission. 72. M10 4 Asking for Permission and Showing a Location: Now we can move on and ask for permission from our users. So a little pop up will appear to say, I would like your location for the following reason on once we've got that permission, we can then show the use of a current location on the map. So if you recall, we've set our Info P list privacy location when in use description. And we need that in order to complete the next steps of make sure that you have that otherwise open up X code and let's see how it's done. The first thing we have to do is open up our storyboard and link our maps. You fire the assistant editor. It's the top, right, remember, And we have to link that map view over to our view controller with control, click and drag and just drop it in the top somewhere. And let's call. There's something obvious like map view just as an outlet. Okay, we can close the editor and go back to our view controller file. So there we have a map view. Okay, so it's it now, the first thing on we have an error here week may only the apply to Yeah, yeah, Yada. Oh, first of all this use of undeclared type M k. Matt View. What does that mean? Well, it doesn't know what you're talking about when you say NK map view. And if you recall, we actually brought in this map kit framework and we brought it in for this very reason so that at the top we can import it in order to use it. And it should auto complete to map kit. Just give it a second. And now everything works. Now, I just want to run over something there. If I comment this out or rather with that comment this out. Sometimes in programming you'll get some cryptic errors like I mean, this use of undeclared type. Well, we know how to fix that. But weak may only be applied to blah blah, and you have to be careful which one of these you address first, because addressing one usually makes the rest of them go away. So you should always address the simplest and most obvious one, and in this case, it's we need to import the map kit, and when you do that, the other errors tend to disappear. So with errors is not just fire and forget its think about the era and address the most obvious thing. Okay, said, what do we have to do here? Well, we want to show a location, so we need to get some of that data from the location classes and in particular, we're going to inherit from a location manager Delicate. Explain what that means in a minute, but first of all, we're going to inherit it. Two are viewed controller so we can put comma and we can inherit from C l location and we want manager delegates. So now if you're not familiar with this, you can actually inherit two classes inside of your class or two or more as many as you like, really? As long as name, spaces and things don't clash. Right? So we've got that we're ready to show location. Now we need the location manager itself. So let Location Manager equal to cl location manager, and this is just going off to the IOS system and saying I need to create a manager because I'm gonna be doing some mapping stuff right then in the code, in our view, did load. We're going to do some more of the heavy lifting here. First of all, the location manager is an sort of an IOS level framework that's happening in the background, and what it does is when it updates itself. It says It sends a message to your rap and says, I want to give you an update for whatever's happening. Now your APP needs somewhere where it processes that update and that somewhere is currently in this view controller. So how we set that is we say the delicates is equal to self. So we're going to delegate that work that reception off the message to this current view controller or this current class. Okay, so you don't understand that that's fine. But just search on Google browser Google for delegates and read around a bit. It takes a while to understand, but you'll get there right now. We have our location manager. We need to actually ask for use. So let's have location Manager don't request when in use authorizations, you'll notice you can ask for always authorized for just the single location, etcetera. So we've set this permission. Remember, we haven't said the other permissions. If you want to use the other versions off requesting authorization. You need to set their relevant descriptions in the P list or nothing will happen. And they'll be no clues and ex coat. It's quite annoying. Bug. Right. Once we've got that, we're going to tell our location manager to start updating the location. Okay, so at the moment we're just getting the location. You'll notice we've haven't actually used this map view, which is pretty useless because we need to do something there. So what we're gonna do is we're going to fire off this authorization requests from the user , and when they grant it, then we're gonna fire off a different function, which is hold did change authorization status or did change authorization. In this case, if you look up here, it tells us this comes from the location manager. And if you look just above it, it says tells the delegates that the authorization status for the application changed. So remember what I said when you set things as a delegate, you're telling the IOS system this is where you need to come back with that data or its were telling the map kit. Where to come back with that data. So when this changes, it will come over to our code and say, Oh, this whole classes The delegate and I need to find did change authorization and then inside of here, it will execute whatever code you need. So it's very clean way of doing things. I mean, you know, very old way of programming would be to run this and then have some kind of code and brackets that you would then follow down. But the way it's currently set up with modern programming languages, it's very clean. Okay, so this will fire when we change. Now I'm going to introduce you to a new concept here called God. Now I'm guarding against some sort off eventuality that happens, and this eventuality I'm going to call status if the guard status, if the status is equal to dot authorized when in use, then we're okay. So what I'm saying is like this is like it's a guard at the gates. Basically, it's saying if the status is authorized when in use, then everything's fine. If it's not, then it's going to run this else loop for this else part of our coat, not a loop. So we're just checking that it is actually authorized. Now, Here you would usually make a message box to use a to turn on location, and I'll explain what that means later on. We're not gonna do that because we're just developing here. So let's print a message to ourselves and say location. Whoops. Not enabled. And then we're going to return. You have to return, settle, exit out of this function, and it won't go anywhere else. But if the God lets that authorized when in use through, then let's print ourselves a message. Cold location enabled. And now we can start out putting onto our map view map view dot shows. User location is true. So go ahead and show the current location. Now, let's run this. So this is this is quite a complicated set up for just showing a simple map, right? Here we go. Snow, we get out, pop up. Where was I to actually location while using the act? And then it gives us the description that we gave it so we can click allow on this on, and we currently don't have anything showed. Right. So what we're gonna do is we're gonna close that at let's go to our task switcher. If you double click the home button, you can swipe it off like you may be used to. Let's open our up again. Now let's see if we can get our map up when our maps working. But there is no location now. If you go to a window or rather debug location, you can actually set where your locations should be. So the moment it's set to some weird custom location. If you hold down your old key, you get too little finger things as though you're using two fingers on the screen and then click your mouse and you can drag in to actually zoom out on the map on your simulator. Okay, so we're just gonna scroll around the world and see if we can find out exactly where we are . I suspect we will be plunked somewhere in the States and at Apple's headquarters, which you can, in fact, set a location as apple. If you wanted, which I believe that's where it already is, so you can actually zoom in, hold down the old key, click and drag, and you should be able to zoom in or you can double click. It's the same as double tapping on a certain place on your touchscreen device. So there we have mountain view in San Francisco. Okay, so that's where Apple's Cupertino and that is our location. Working now, just before I go, Actually, you can set your very own locations by a debug location, go to custom location and you can set any number you like in latitude and longitude 45 by 45 But you're going to notice, and it takes a while to that dot to disappear. When it does, we can zoom out and we can go and find us. So this could actually be the basis of quite a good game. I think, you know, guess where you are. Or 1st 1 to find me type thing. Now, where's 45 by 45? I should be taking bets from you guys. You can tell me where these things up. Oh, this is gonna take a wild doing it on the screen like this. So I'm not going to bother looking for it. I'll leave you guys to play with that. Okay, so we're sorted now we can show our location on this screen 73. M10 5 Getting Location Coordinates: now that we've got a map running and our location shown on it, What we need to do is pull out the coordinates of latitude and longitude so that we can perhaps save that location or manipulated in another way. Now, also, in this little section, we're going to drop in a knave bar, and we're going to just spruce things up just a little bit to make it look like a proper app. So let's get going now. The first thing that we're actually going to do is, as usual, the graphical stuff. You should know that if you know me by now, it's gonna drop this size down a bit so we can see it now. Biographical stuff. I mean, we need a button on our screen toe, actually save where we've seen because the app is called. Where was I? So where do you think is a good place to put it? Well, if you are an android, you'd have what's called a floating action button. Ah, Fab, which would sit sort of over here with a highlighted rectangle, is I think you can move it around as well, but it does sit at the side on IOS. There's no such thing, so we have to make a button now. Of course, we could just pull out any old button and drop it somewhere. But that wouldn't make for very good you I design. What we need to do is stick to the way that Apple and IOS dictate that we should do things so the users don't feel overwhelmed by different. You are so to speak. So what we're gonna do is we're just simply going to drop in a navigation bar. And this tells you this provides a mechanism for displaying of bar just below the status bar. Now, if you recall before, if we have a navigation controller, if I just drag and hold it over here, it opens up a route to you control and enough control. And we've been through this before. We don't want to go that heavy with the stuff that we're doing. We just want a button so we could skip that and we can just grab a knave bar and we can manually put one in to the top off our screen so that we have it. So let's just position this. Let's give it a constraint off zero on all sides. Make sure margins is switched off because he wanted to fill up the screen. And there we have. It's now the map view is currently sitting underneath it. That's fine, because the map view is by definition dynamic, so it can sit underneath it because we can move it around without finger. So nice little handy shortcut there. Okay, now we always run these things when we add new features that we don't know about his developers. Simply, of course, to make sure that those features are working, I want to make sure we can see how naff bar. And of course, I don't map view. Today we have our naff bar at the top. Now it's a bit squashed up at the top, but I don't like that very much. So let's stop that running and let's click the nab our itself and we can change its constraints by heading over to this little ruler icon at the top, right? We could scroll down and see what the constraint sauce we want top space to super view. We can click edit, and we can give that a little gap of, say, 10. And if we run that That should solve our issue. Now, I should say normally you would actually have a navigation controller in your app. You won't just have 1/2 bar, because look what happens at the top Here we get this horrible little line so well, singers, I'm supposed to be teaching you guys good practice. Well, actually do that. So we're gonna remove this horrible now far there it is. And we're gonna hit backspace on it. So it's gone. We'll leave our map view as it stands, and instead we will select our view controller, Go to editor in bed in now. Controller. It's now we have enough controller and we have that bar up there. And of course, we can select this view controller. Can we change the knave ison? No, we can't. We should be able to. Let's select the view controller. Ah, there's our title so we can do it in the attributes, Not the attributes is it attributes. Sorry, guys, it's late and I've had a coffee attributes, Inspector. So let's just say my locations and this isn't showing why IOS Why, that's because we need to actually select this never item and then under the attributes. We have the title available. You have to forgive me for that one. Sometimes you lose it as a developer. Rights. We got my location right coming back to the original thing we wanted to do. We want to create a button to get our location coordinates and save them. Of course, the first step is a button, but this is not going to be a simple button. This is a special type called a bar button item, and this goes onto the bar at the top off hours screen. So don't put buttons up there. Put bar button items. So next click and drag and you'll notice it makes space on either side. Now, normally, we would put the main focus on the right side because the left side contains the back button. If we're navigating, okay, now, this item, if we click it, we can give it a style. We can give it a system item. So these the icons that IOS will provide for us, we can click add, and it gives us that nice IOS style off the plus icon. Okay, so that is actually a button just a specialized subclass of but and I believe so. It fits nicely into this top drawer. Now we need to outlet it. So let's open up our assistant editor. Let me squeeze it out of this tiny picture dro click and let's move this down a bit. It's changed it to action. And let's call this safe button clicked. Great. So that all works nicely. Let's go back to our view controller and see what's going on here. Right. So the first thing we're gonna do is we need to get the coordinates of where we are in order to save the position. So let's let the coordinates equal to And you might have guessed this. We need Teoh reference the location manager, and then we get the location out off the location manager, But this is optional. So we're gonna put a question next to it, and they were going to get the coordinates if a location exists. Right? So now we've got that. Now we need to check that we bear have both our latitude and longitude off our location. So we say if let the latitude is equal to the co ordinates, we just pulled out, which is optional dot latitude. Then we can do something with it. And what are we gonna do? Well, that's just prints back to our console, the latitude as plus string latitude. Remember, we're changing to strength that knows how to print. Now we have to do the same thing for longer shoots. Let's copy this. It's paste it and let's call this long and change the various items. Now just a side note. As a develop it, you need to be wary of copy pasting because sometimes you can actually miss bits of code. And if you miss them, it prints out the wrong variable or something like that. And it takes ages, absolutely ages to debug. What is a really simple mistake? So if you do copy paste, go through every single word because it will save you time in the end, right? So we've got our lassitude are longer toot. Let's just run it. And hopefully it's going to print out to our consul. When we click hours save button. Just shift this over. You have location enabled. And if I hit plus there we have last student longitude and remember, we set back inside of our debug location custom location. So if we change this to 10 by 10 and we clipped. Plus, we have 10 by 10 and naturally it works for every other location. Although sometimes I've discovered there he's a slate bug. They have clicked apple there, but my location is still 10 which is very strange, very, very strange. I seem to remember that bug was from last year. Let's try a different location, how that's working. So a little location in a little bug in Apple's location. That's never mind rights. We stopped that running, and that's how we pull out the last student longitude and also how we add a U I bar button item, which is what this little plus is called. 74. M10 6 Saving Location Coordinates with UserDefaults: Now that we have our uses location in that student longitude, we need some way off saving it so we can use it a bit later on. So first of all, in this section, we're going to create a simple data model class. This class will hold the visited points that we've bean too, and also gonna look at how we save that data those strings of last year and longitude into user defaults, which is more or less the simplest way of story data in IOS. And it's a great option if your app is very simple. So let's see what that looks like. The very first step is to create our data model class. So let's go to our project New file. Let's create a certain file next, and it's cool. This something quite obvious. I mean, we could call this a visited points. I suppose that's true. Or we could actually call this. I'm just trying to think of a better name here. Perhaps you can think of a better name because we might want to use this class for other items that aren't just visited points but points to visit in the future. So perhaps we will call this class something like location point to make it more generic so we can use it for other points. Okay, so let's create the class itself. Location point opening. Close our braces. And the first thing we have is a variable called latitude, which we're gonna stole as a string in this kits. Now, I believe it comes out with some kind of number, and when we pressed it out previously. But we want to store this a string so that when we use our years of defaults weaken simply store a string. We can change that later if we discover that uses defaults, allows us to store other items So far longer Toot is a type string. And then, of course, we have to initialize this within it. And first, we're gonna pass in a latitude and then, of course, a longitude. And there we have it. And then we're gonna say self dots. Latitude is equal to that. And self docked longitude is equal to Long's That will initialize our data point. Okay. And as I've said, it doesn't necessarily have to be a string. I think you can actually store numbers and user defaults. I just don't use them all that often because my APs aren't very simple anymore. But we'll leave this as a string for now. Right now, we've got our basic class. We need to create the class that gets the data into and out off our user defaults. So let's create, as always, a new file. And let's call this user defaults data store. You could just call it data store if you wish. That's also an option. Okay, so let's call this class. Use the defaults data store. Now what do we need in here? Well, festival. We need a function that gets the user defaults from the Iowa system for our app. So it's just a little bit of space on our devices disk that we can write files to which are essentially text files. But we don't have to worry about any of that because I was abstracts that all away for us. Let's create a function to yes, the defaults, and this is going to return an instance off user defaults. Okay, then, to actually get it on, return it. We're going to return, use the defaults don't standards. So all these stars is, goes and gets the user defaults object for us so we can use it. Right? So now we've got that sorted out. We need something else, which is a function to store, perhaps the location point. And, of course, we're going to pass in some items for this primarily, we're going to pass in a location point, which is, of course, of type location point that we've just created. Okay, so I got out. We're gonna get out defaults. So let's say let's defaults equal to get devotes. Now again, you may wonder why I've taken all these lines just to return one line of code when I could have just used that line of code down here, but is just simply good programing Practice two separate things out like that into a small functions, as you can manage because later on, trust me, it pays dividends. Right. So we have our defaults. How do we stole? Well, defaults work by storing a value of something for a key, so their key value pairs. And when you want to get them, the values back out, you give it the key, and it spits out the value of course keys. A unique that have to be unique so we can set a value. And you look at the options we have here. The value can be any and for key, which is always string. Okay, so our value is going to be location points with the lower case l dot latitude. Then we can have a full key, and we can put this in as latitude. However, that's not a great way of storing this string, because later on, you may have to get these user defaults and you're gonna write this string again. And that means you've got it in two places. And that means you have a potential for a nasty bug to arise if you must spell one of those . So let's create what's called a structure. I don't worry too much about what a structure is. Just think of it loosely as a class. It's not correct. But think of it loosely, is that we're gonna call this structure storage keys and the pet whoops. We don't that storage keys Okay, open and close our curly braces. Now, the purpose of this is to have a single place where we have a consistent storage key for these key names. Okay, So I think I've covered something like this with you before. Actually so static let stored lattes equal to That's a cheered and we'll do the same. Now, explain what static means in a second. Stored long is equal to Argh itude. Okay, so this is just a basic variable declaration, right? And in order to use storage keys, if you had a class, you'd have to first create an object from the class and then you'd be able to access these keys. Well, when we say static, these properties now belong to the structure or the class loosely defined rather than the object that you create from that class. Okay, so don't worry about it too much for now. If you if you want to go and research it, just look up static on the Internet and programming or something. And perhaps there are better explanations than I can give right now. Don't worry about it. For now, it simply means we don't have to initialize anything the properties air there for us to use . Right? So, coming back to our key, we can remove that, and we can set this as storage keys, doctor Stored latitude case are now everywhere we can use stored latte. And if we want to change the key because perhaps we need to use this word for something some other value we store. All we have to do is change it here and everything will work. Okay, let's now store the longitude using pretty much the same ideology. Set value, location points, stocks longer. Choose for key. Storage keys don't longitude. Okay, so we've set our values inside of our users defaults. There's one further step toe, actually save them to cement the change. And that is to do defaults dot synchronized. And when that happens, everything will be stored. The final step we're gonna run through is go back to our view, controller. And remember, we had a save button clicked. Well, if we save the button if we click save button brother, we want a store, our location. So let's create a location. So we have our coordinates. That's fine on what we're gonna do here. I mean, I've got some notes here about what I was gonna show you, but I've changed my mind because I think there's a better way to do it if we've got this. And if we've got this, we can nest them. And some people don't like nesting too much. I don't mind it. As long as it's only two or three levels deep. Much more than that, you're going to get confused. But in this case, we can ness these. So if we get a latitude and then if we get a longitude, then we can print everything we need. Now, when you're messing around with logic like this, as always, it's a good idea to test this on the simulator and make sure that your logic is actually correct. So we should see our stuff still printed out when we click save. So when I hit Plus, there we have it. It still works. Okay, so we'll stop that running right? So if we managed to get into this part of if left, we have our latitude and longitude. What do we do with it? Well, let's create a location point. Let's location points equal to a location point and this requires the following items. String latte string long. So we're gonna cut this. I'm gonna paste it here and the same with string long. And we can remove these prints. We don't necessarily need them right now. Right? So we got our location point. Now we want to actually save that. So let's create and you use the defaults, data store, open close brackets, darts and what we want when we want store, location, point, and all we're gonna feed it is the LP we just created. Okay, save that now, before we run this, let's go back to our user defaults data store and in store location points off to synchronize. Let's just give ourselves a little prince So we know what's happening. Something like stored location points. And if we like, we can drop in the latitude. Not sure which comes first. Last you longer to. I think it's latitude plus and then that's create a little separated for them. Class the location point dot Longitude that's safe. And then let's run. And so now we've got a handy little message. Back to us is developers, so we can see what's happening with our that should appear down here. It's just move this over so you can move things about in X code quite easily. It's nice and handy like that. Let's hit plus and we've stored our location point right there. Okay, so you can start that running, and we know that it works or we know. Rather we don't know it works. We know that we can get through this block of code without any issues so that we can print it out. We don't necessarily know that something has bean stored yet. So that's what we're gonna do next time we're going to go and look at the stuff that stored in our user defaults and extract it from there. 75. M10 7 Showing Last Location with a Pin Annotation: all right, We've come to the main part of our app, which is to show our last safe location using a pin an attention. What do I mean by this? Well, we will have a map shown on our screen. Are usable, have their location perhaps shown on the screen. But we are going to add a little pin annotation to show where the users saved their previous location. So they know where that is. Were also, of course, going to look at getting the defaults out of our user storage. So that's an important part of this process to So let's get going now, If you recall, we have our use defaults, data store file, and this allows us to access the use of debt defaults and then place information in there. All retrieve information out. So let's right the function that gets our last location. So somewhere inside of this class doesn't really match aware function. Get last contact today location, and this is going to return. Of course, a location point, because that's what we created previously for it. Now he is a little thing. What if we try to get a location on its the first time you run the app, and nobody's actually pressed the save key yet. We're going to get nothing from our user defaults. So this needs to be optional. I e. It might return something, but it might return nothing. Okay, now, let's first of all gets the defaults, the N issues the defaults, which is just get defaults. And that was that function we created up here. Of course. Okay, Now what do we need? Well, we need to pull out both the latitude and the longitude se if let's let's make sure we get a lassitude out of it is equal to defaults. Don't Now, when you type darts, just have a scroll through this for a minute. You can actually get doubles out of this if you wish. You could get floats. And of course, you can get strings. So sorry, that's going away. Don't string so we can get strings. We can get floats, so use the default. Does allow us to store these numbers. We're just going to keep it as a string at the moment. But of course, if you wanted to, you could change this whole implementation where you change this location. Point last shoot into a double. Of course, you have to change the class. So actually, leave it as it is for now, right? So we want to pull out a string for a particular key Now. What key? Well, that comes from our structure up at the top here said. Storage keys don't stored latitude. Okay, so forget that world. Good. Then let's also check if we could get longer chewed in the same way. So defaults docked string for key storage keys. That's long. So if we can get that, we are all good to go, and we can now return a new location point from this function. So let's return a location point with our lassitude and, of course, are longer chewed. Okay, now it's telling us we still have a narrow missing return in a function respect to return location point optional. That's because if this section fails, then what we're going to do is return No. So it's gonna put nothing inside the optionals when we check it. They won't actually be a location point. Now, we don't have to worry about remembering that this is an optional ex code, is pretty good and swift in that it will remind us when we actually go ahead and use this in our view. Controller. So it's open up off you can Children see how it does that? Okay, now in view Did load. We could fire it there. But you have to remember, viewed it Load actually only appears once it only gets fired once when the view loads, if of you takes, gets taken off screen and then reappears View did load doesn't actually get called again because it's already in there. It's already being loaded. Okay, So perhaps view we could override something else. And this something else is called view Did appear Now every time you go away from a current view and come back view did appear, gets cold. So every time it reappears, he gets quote So we could actually write it in here if we wanted to. But I think a better option is actually, first of all, just to create our own function, which is annotate met for something annotate last. It's called last location. Some first thing we're gonna do is try and get our previous coordinates. So if let our let's say saved coordinates is equal to I will use the default data store. And what are we going to get out of that we're gonna? Instead, she ate it first. And then we're going to get dif not get defaults. We're gonna get the last location. So if it's possible to get that, then we're going to do what we need to do now just coming back to what I said about putting optionals into your own code. If I remove this and I remove this, let's see what X code says to us. It says that it's never used. That's fine. Now, what if I said safe Coordinate dot and latitude Well, noticed that X code automatically puts in this question mark for us. So it only gives us this string if safe coordinate exists, so bear that in mind. Okay, so that's how it manipulates your own code according to what you've already put in. So I just undone everything there, and I'm sticking with my if let checking functionality. Okay. Now, if we're gonna put an annotation onto our map, we first need an annotation. And this is simple enough. We can say let annotation is equal to. And what is this cold? Well, this comes from a class called M K point annotation. So map kits point annotation. Then we need to give this annotation some directions like its latitude and longitude. So annotation don't co ordinates. I thought latitude is equal to and we want to get our saved co ordinate dots latitude. Now, this is going to give it an eric or a warning, if you like, because we're trying to assign a string to double. So in hindsight, it would have been better if we'd had doubles all the way through and saving it that way because we never actually to show the strength. And as a programmer, you're gonna come across this fairly often. You'll think things should be one way. And when you actually get making the app in question, you'll have to change things back the other way. So for now, I'm not actually going to change that. Perhaps we'll set that for some homework. We're just going to cast this as a double and an exclamation mark. Now that explanation means I'm unwrapping the optional. So I'm telling this can definitely be changed to a double If it can't our apple crash at this very point just something to be aware off. Okay, now I'm gonna copy this, and I'm going to the same four longitudes. Okay, Now annotations. When you tap them, you can actually give them a title. And it will show you something so we can set annotation. Doc title is equal to Waas here, and you can also give them a subtitle, Remember? Okay. And then finally, once we've set up our annotation, all we have to do is added to the map view that simply is enough as saying add annotation and giving it that one we've just made. So let's say that. And then let's hit play and drop it into how I phoned Simulator. I've made a slight mistake there. I'm going to stop that running because I've created a function. Haven't actually called it anyway as a bit silly of me. So what I'm gonna do for now is I'm actually gonna put this in view, will appear and I'm going to put annotate last location. So view did load loads, then view will appear, will load after that. So the order when it comes to view control, this is pretty important. If you want to know more, go look up life cycles of you controllers and apple produces a nice little diagram that tells you what you need to know. Okay. So allow, if you're resetting the app, that is, and then let's zoom out to get an idea of where we actually are. Okay, so we currently have that's location, right? Let's save a location. It plus, and it's a 37. 33. Now, I don't think that's where the flashing blue thing is. And this is a bug have come across before in this. I think 37 is roughly somewhere over here in the Middle East. But anyway, that doesn't matter. What we're gonna do is we're gonna hit the home button on our simulator. When we go back to our app, our view reappears. Andi, Hopefully we have a pin annotation somewhere. No, we don't. Okay, so what I'm gonna do is I'm gonna double click the home button and I'm gonna go back to the home screen, and we're gonna re fire up our app. I don't know why it's not appearing. View will appear does actually fire. But we're going to check that, actually, because I don't take my word for it. We should always check as developers. So there we go. Now we have our 37 37 co ordinates. It's pulled them out and it's put a little annotation, and if we click the annotation or tap it, it expands and tells us we was here. And in the meantime, it's still got our current location over in San Francisco. Okay, And of course, if we go to debug location, we get to custom. Let's go with 30 because we know roughly where that's gonna be by 30. There's our location. Let's hit. Plus allocation is out saved in the background. I'm just gonna double click swipe up to exit the app. I'm going to get you where was I? And let's see if we have what we need. There we go. So you have our current location on a different location. And of course, we can debug and miss our little blue dot away. Let's put over it 32 and there we have it some way in Cairo. That was a good yes, But of course you've seen that if we hit the plus icon, our annotation doesn't actually move, which does actually suck and defeats the whole point of the app. So in the next lecture, I am going to set your bit of homework with that particular thing to do as a task moving that icon when we click plus. 76. M10 8 Where Was I Homework 1 and Solution: it's time for a little homework. This one's fairly easy. In terms of coding. You don't really need to add any extra code, but it's more a what we call re factoring of code the Nationals, the fancy way of saying we're shuffling the code around to make it clearer and to make it do what we actually want it to do. So currently we have a map. We have a little add icon. When we click the add icon, we save our location, and this gets added as a pin annotation. When the view reappears, however, it's not great to use a design. Is it because you don't have to go out the app and then back in to just see where your location was updated to? It does suck a bit now. If you put something like this into the APP store, Apple would reject it straightaway and say, Come on, guys, try harder. So I want you every time. That plus the icon gets clicks to move that map annotation to where it should be Now, this isn't exactly as straightforward as it sounds, and you're probably gonna find that out when you start doing this. It might actually be straightforward. I'm not actually sure myself. We're just gonna find out. So good luck. And don't come back to this lecture. Pause it right here, right now until you've had a go it it. All right. I hope you've had a go at this and I hope you succeeded. So this is just superfluous for you. I am going to try and solve this movement off the annotate last location. So there's a couple of options here. First of all, there's a really simple option, and that's to have that still in view. Will appear, but also in my save button clicks. So after I've saved my button, I can have my annotate last location. Now let's see what that does because programming is all about experimentation Now, I haven't actually prepared this homework solution. I'm just sort of free styling it at the moment. I think I know what's gonna happen, but let's see. I haven't made too many maps absent myself. And if I did, they were a long time ago. So let's go ahead and zoom out. Come on. This really doesn't like me today. I think we have to do manual scrolling up I've got nothing now. So if you guys wondering why my computer is so slow, it's because I have to record this on an older Mac to get the correct screen resolution for online teaching. Otherwise, it records on My Mac book Pro at the Retina Resolution, which is ridiculous, and I ran out of space so quickly and the processing takes ages. So anyway, here is our location. Now let's go to debug. Let's change. We don't need to change it, because when we hit, plus this blue dot will be replaced by the red one. The red annotations Let's hit, plus on what happened there? Nothing, even though it's stored our location down there. Now that is very strange. So I think again, this just a simulator bug. It's just something we have to live with. Let's put 31 by 32. Let's store that. And now it goes to 31. Who knows what this simulator is doing anyway? So I got 31 31. But look what's happened. We now have two annotations, right? So that's not exactly great for us. We would prefer to have one annotation because our app is all about saving your last location. So let's stop it running. Let's think about this. We have this annotate last location. Now what we could do is we could have only one annotation here so I could cut this and I could put it right up at the top into my class. Variables. So now we know there is only one annotation. Those errors will go away in a second when it realizes we still have it. Okay. And then we're adding an annotation. Well, let's see if we can get away with that and hope that doesn't add too. I have a feeling that it actually will. Okay, so let's roll on down to Egypt way past Athens, past Benghazi. Look, I think we need to go the other way, really test your, uh, geographical knowledge here. Now let's change our location just very slightly to a 30 by 32 hit plus and our annotation moves. So that's pretty handy, isn't it? It's hit plus again and nothing happens. That's good. 30 by 29. Let's hit plus again and we have shifted across. Okay, so that more or less works clearly you can see this is no in near production ready? There are some things that we need to find out and understand. M. Kay, Matthew. A little better before we can actually release an app like this. But you've got the basic idea. Now in the hex lecture, I'm gonna set you one hell of a piece of homework. I'm going to set you homework. That doesn't really apply the things I've taught you so far. The next piece of homework is going to require that you go onto Google and you search for a solution and then implement it yourself. Now, of course, it's up to you if you want to do the next piece of homework because it is very difficult to do. But if you can do it, you are well on your way to becoming a top developer. 77. M10 9 Where Was I HARD Homework and Solution: right, Here we go. This is the difficult homework, and it's the It's quite a milestone for you in terms of learning app, development in any language, for that matter, because what I'm gonna ask you to do is not something I've shown you how to do before. Now, to make that clearer, let's look at our opposite stands. We have the first screen over on the left that gets shown when our at fires up. And, of course, we have our locations that has shown elsewhere on the map. Now it's not great user experiences it because you have to scroll around the map to find out where these pins and locations are. So it would be nice if the map auto zoomed to the users current area. And that's your homework. I want you to auto zoom to the users current area. As big or as small as that is, it doesn't really matter when the APP opens, so you are gonna have to go out to Google, and you're gonna have to search for stuff like swift and auto zoom map view that kind of things. See what you can find, most importantly, understand what you confined and then use that to actually implement what I'm asking for. So this is quite tough, because it's sort of like helping you learn to ride a bike and then letting go of the handlebars. It's like sink or swim, but it is definitely doable. And kudos to you if you attempt this so I'll see you in a few seconds. Pause the video. Now have a go at it yourself and good luck, right? I wonder how you fared with your little task there. Well, let's see how to do this. Now. I haven't prepared this lecture, and as we learn more on this course, I'm edging more towards doing things off the cuff. So you have a much better idea of what it's like being a day to day developer. I'm really not a fan off to structured learning after an initial period because it doesn't give you the correct impression of how to do things. So let's look at how I would attack attack this problem. Well, festival. I'd go to Google, right? And what would I search for? Well, let's search for M K Matthew Auto Zoom location. Swift and I'm willing to bet the first thing that comes up is stack overflow. Yep, let's go to the 2nd 1 that looks promising with swift three. So this guy's trying to do it we're trying to do. He's got some code on. You can see people have had issues here with creating these lines of code in view. Did load. Right. So there's a lot of code sort of to go through here, and you just scroll this smoothly for you. Okay? So you can actually read through all of this and have a see, Have a look to see what you actually understand. So he created this code in viewed it load. He created some coordinates. He made a region off 200 by 200 out of those coordinates, and then he set the map view. Now what's he actually doing that? Because he hasn't actually given this a coordinate unless that actually provides the current coordinate. I'm not sure it does, but I have to look it up. Well, let's do that. Let's copy it open in new tab and paste it and you'll come up with the apple docks. That's always the first result. Latitude and longitude associated with a location so that doesn't actually tell us anything that useful. Let's go through this guy's coat. We've got delegate. We we know that we're not talking about, like, your c check for location services where we've kind of done that, but a much shorter version than this. Request our authorization. Yes. Zoom to user location. Let's see. Well, we can only try it, right. So let's copy that on. Let's part this into a function Z, um Teoh User location pasted in. Okay. And luckily is map views called the same was hours. We don't actually to change in code then in our view, did load Let's fire that function off and let's try that out. Okay. Oh, it's not running because we need to come out of this and try that again. I'm hoping this will work. Education enabled my location, right, so it hasn't actually found the current location, and I think that is probably because we have no location here, which is just a random location, which is quite useless. Actually, we need our current location sick. Where do we find that? Well, it's probably that location manager, Dr. Location. So let's see. So let's change this to lock equals location Manager don't location. But then with course, we need that special type that we had before that had two d on it. And if you recall it, waas see our location coordinates Cindy. Now, I don't actually know where to find that, so it's not there. So let's create one CEO location. Coordinate to D. This asks for our lassitude and longitude se. Let's get our location Manager Dobbs, Location dumps. And what if we got Have you got a latitude note? But we might have a coordinate? Yes. Now, what I was gonna do here was actually pull out the latitude from this coordinate. But if you look carefully, the type is cl location. Coordinate to D, and that is exactly the type that we need up here for a location. So there's no need to reinvent the wheel. And sometimes when you're programming, you gotta watch out for these auto completes. Just wait for them to appear and then look at the types so you don't make the same mistake that I was about to make off reinventing the wheel. So all we need here now is the location manager, Dr Location Don't co ordinate and we have exactly the type we need to fill into here location. But of course, this is an optional. Hence the question mark. So we need to check for this if let And then if you select a couple of lines, you can normally tab them in. Ex coach, just a line everything up. So you're if should be tabbed in all the code in your if statements should be tabbed in, so it's easier for people to read. Okay, so that should just about do it. If we can get a location, then we're going to zoom into the map according to this code that we've found. So in a few loads, it's gonna do that, and it's going to do it nowhere else. I don't think we need to call it anywhere else. Just for now, Se, let's run this on the iPhone and double check that everything works, right? So it's loaded up. I've actually just cut it out there so you can see it working, so I couldn't quite catch it with my screen recorder. So I'm gonna open up the app and watch as soon as it opens. It finds the location and it zooms to it Now we are zoomed in quite a lot, I believe. But if you hold down cult click and drag in like we were zooming in on a real device, we should eventually see where we are. So I believe. Whoops. I believe we're actually in the middle of nowhere here. There we go. So I was zooming out nicely. So there we go. That manages to zoom in on where we are if cooking dragged map with course could move around just like before. But that's how we move it on to where we need it to be. So let me just kill that. And of course, this view region. These two numbers 202 100 are the keys to this. So we need to know what 200 means. Does it mean meters kilometers or what? We don't know. So the obvious thing to do is to copy this head on over to Google and drop it into the search. And of course, the first result is normally an apple developer. Result distance. So it creates according region from Corden and distance values. There we goc so attitudinal meters and longitudinal meters, so meters is what we're looking at when it says 200. So of course we can go 20 kilometers. We can say that. Check that out. Let's see what's going on and I find this a better way off. Actually, learning how to code is to look at someone else's code, figure out what's happening and then interspersed that with looking up Apple's docks and various other documentation sources rather than just reading the plane off docks, because that can get really boring really quick. So this refuses to zoom in, although I'm pretty sure it is doing 20,000. Let's try 200 kilometers here and incidently when you click play to run this on a SIM. It should auto save your project so it will give you the latest versions off the files. There we go. So that's 200 kilometers. It We couldn't see anything because we were in the actual absolutely middle off. Nowhere, right? There we go. What's this? Sixth of October? That's a strange thing to heaven. A map. I might look that up. I'm easily distracted anyway. But anyway, that is how you zoom in on the uses. Current location 78. M10 10 Where Was I? Summary: Congratulations. You have finished this module. We created a great little math where we could save our location and show our current location when we walked away from that location. Now, just a recap of all the stuff you've learnt. First we looked at how to get permission to first of all, install on devices with GPS and also asked the user if we can use their location whilst the APA's open. I also showed you a couple of other privacy things that you consent if you need a user's location when the APP isn't actually open. And then, of course, we looked at how to get the location and show that on an apple map view embedded into our app And to get that we also looked at how to embed frameworks. Then we got the coordinates from the location and we learned out of store those in the user defaults, which is key value pairs for storing various items like strings and doubles. Then we created a couple classes to store the location on also a class to get the data out off our user defaults. So you didn't know it, but I was teaching you sort of in the background, if you like, or, subconsciously, how to create the correct structure for classes in your projects. Then we looked at how to add pin annotations to our maps. Using those saved coordinates. We looked at how to auto update the annotation when we clicked, plus or save. And then finally, we learned how to zoom in automatically on our users current location. A nice little you I trick. So if you have made it this far, very well done, and here's a little reward in the form of fireworks. 79. M11 1 Introduction to Will I burn: welcome to the next stage in your development journey. Now, in this section, we're gonna be creating what seems like a very simple act called Will I burn and I'll explain what that is in a minute. But along the way of creating this app, there's quite a lot of more complicated concepts that we're going to cover. And if you are a new programmer, it's gonna be a little complicated, a little more than perhaps some of you can handle if you program before and you've done stuff like Jason and AP eyes, and you should feel right at home. But don't let my words discourage you. If you're a beginner, simply follow along and you'll learn everything you need to know, right? So what is the app? Well, if you ever been to a lovely beach on a nice hot day, you'll know if you have light skin, you are going to burn at some point. But we humans always seem to overestimate the amount of time we can actually spend in the sun without burning, which is why most of us come back looking like lobsters. So we're going to create an app that pulls down the local you. The index data runs a calculation according to the skin type that we put in the APP and then tells us how long we have until we burn in the sun. Not only that, it's also going to give us a reminder to get out of the sun, and this is what it's going to look like. So I've just gone with a monochromatic theme on this, and I've really liked this theme. It's one of my more favorite APS that I've done. And as you can see, it's very simple. At the top, you change of skin type, and then in the middle you have your minutes until you burn running. And at the bottom you've got a little notification saying Getting data is also a big set reminder button to tell you when to get out of the sun so an alarm will go off right? So that's the APP. Like I said, it looks very simple, doesn't it? Bucks. We're gonna learn a lot of stuff along the way. We're gonna learn things like rest representational state transfer, which I mean, I've pulled up the Wikipedia definition because it's ridiculous. How can they begin? Understand this. Well, we're gonna understand what rest is because rest is a big part of programming these days. And I'm gonna do it simply for you. I'm also going to explain what this diagram means in the next lecture. All about Rest will services, Jason, etcetera. Now, if you're interested in programming, you've probably heard off Jason and XML. Someone explain all that, then we're also going to look at the formats that Jason Data takes, and we're gonna try out a couple of Web tools so we can understand it. We're also gonna look at weather AP eyes. That means we're going to go find a service that gives us whether data that we can use in our app we'll also look at the documentation that comes with these AP eyes because that's an important thing to learn how to do is a developer, and that is to scan the docks. So you know that it's going to provide the data that your APP needs because there's no point in making half your app plumbing this in and then discovering it doesn't actually have some of the data that you really need, right? And of course, we will look at Jason Data after that said, is lots of properties and things to see right, open up X code and let's go. 80. M11 2 What Are Restful Services?: now the very first thing we need to be aware off our rest ful services. And as I showed you in the introduction, we have this horrendous Wikipedia definition. Yada, yada, yada. I'm not even going to read it. It's just way over the top. This brings me to a point that you need to be aware off if you're learning to program. Is that engineers? Softer developers want to feel clever, and that hurts you the beginner, because they use a lot of jargon and they make things overly complicated, Which is fine if you are a program, accepts how we communicate with each other. But I want you guys to know the real truth. Wrestle services simply have two items a client, and that could be your app. It could be a Web terminal. It could be anything and a server. The server provides data to the client. Generally speaking, first of all to do that, the client has toe ask The server so requests something from that server. Then the server gives a response to the client. Now this could be one response. It could be multiple responses, but when you create the client, you'll know how the service speaks What language it speaks. You'll know how to deal with that. Okay, now, when the server response it can respond with any data format. And two of the common ones are Jason and XML that are in use these days more Jason than XML nowadays. And that's being changing for the past decade or so, I believe, right? So all of this, in and of itself, the claims request and the server response are not rest ful. Rest ful is something to do with the way that you program this pattern in your code. Okay, so rest ful is simply a method of getting remote data. But not only that rest ful means that your app can wrist whilst data is fetched and I've met you have mixed up the words here a bit because that's not what rest actually means, but to make it simple for you guys, it simply means that when you're making that request, rather than waiting for the server to respond before you execute an expert of code, your code kind of makes a little reminder for itself. So when the response comes back, your code can pick up where it left off. And that's great because in the meantime that it's doing that. Your app can remain responsive and do other things. So that's what rest Feliz. It gives your app a chance to do everything else it needs and only respond to the data when it comes back. Because you can imagine these data going back and forth. Take a while to come back in some cases and even 100 millisecond delay in your acts, response is noticeable by user. It makes it seem slow. So that's the beauty off rest ful. So in our diagram, when the client sends off its request and it's waiting for that response, the client can keep doing other things. In the meantime, it doesn't necessarily have to have that response in order to continue. Of course, it's nice if you have a response. In most cases, you do need that response, but it keeps everything in your app nice and active, and there's no waiting around for weather events. Toe happen, right? So that's all. Restaurant services up now, normally bundled with a rest ful service is an A P I and application programming interface and all an a p. I is is the little bit off our code that sits there or not our code, but rather the server code. So an a P I an application programming interface interface is the important word there is. Interface is what allows us to give it a request and get a response from the server. So on a P, I is simply concentrating on this little bit of the server request response paradigm. It's the way that you interact with the server and its data. Now AP I sounds complicated, but that's all it it's. It's a way of just taking requests and giving out responses at its very core level. Some examples of AP eyes are this one you can go to swap edotco for a slash AP I forward slash and you can drop in a few items like people one planets, three starships nine and this website will spit out random people, planets or starships for you in a Jason format. We haven't covered what a chase on format is yet, but we will. So that is an example of an A p I. You go to a specific address, you provide some data to the address. So in this case. We have a P i slash people slash one and the A p. I knows to get people out of it to return people rather and how many people? Well, we specified one, sometimes with an A p I. You'll provide what's called an authentication token. So it's like a secret string or not a secret string, but rather a string that identifies your act as locked in or whatever it is. And then the A. P I will respond to requests. If you don't have the token, it won't respond to your requests. So what other examples are there? Well, there's the ones that were going to be using these local weather AP eyes and we can provide an address. Fire off that address to the World Weather Online, and it will come back with all of the weather data that we request. Now, of course, sometimes these are actually paid for services, depending on how much of it you use because you are using someone server effectively for it . Now. Most of these AP eyes, of course, come with documentation. If they don't, I would advise you to stay away from them because you'll spend a lot of trying, trying to figure out what happens and in this case, the world weather online. They've got a couple of the dresses at the top there that will allow you to access their A P I. And then we got some request parameters, and we'll look at how to include request parameters into our requests. 81. M11 3 What is JSON?: If you already know what Jason is, then feel free to skip this lecture. If you don't know, Jason stands for JavaScript object notation, and it's ah, way of formatting data that was essentially stolen from the JavaScript world because it's very readable and nice to look at. And it was implemented pretty much everywhere these days. So what is Jason? Well, if you recall our little diagram off, our clients save a request response. And the a p I Jason is simply a format that the data takes in. The response are, for the most part, you will normally have Jason returned. XML is more or less a dying breed. Okay, so what is Jason actually looked like? Well, here you go. I've just pulled some random Jason day, sir, from random user Dr M. E and their A p I. Now the first thing you have to notice is that we have these two curly braces that begin and end our Jason. Then inside of those curly braces, we have water called the objects. And the first object we have is called results. Now, results is the key for the object is not the object itself. It's simply the name of the object. And inside of that object, you'll have other keys and values. So results is a key, the object or the array. Inside it is a value or a bunch of values. And then, inside of those, we can continue nesting inwards until we have gentle mail. We have name etcetera, etcetera. We could go all the way. We can include stuff like Web addresses. If we so wish, we can also include numbers. So numbers is the postcode section in the middle of the screen. There, that's a 69974 You'll notice there are no quotes around the actual value, so Jason is simply a standard for data delivery. Now there are actually tools out there that allow you to validate your Jason. And whilst in this section you're not actually going to be creating your own Jason. It is handy to know that the Jason coming back from your Web requests is actually valid because if it's not valid in the various tools that we're going to use, inside of our programs will not actually be ableto work correctly. And obviously it's important that they work correctly. So let's look at one of those tools. Now, first of all, I've opened up random user doctor me, and that's what we got our Jason data before. And if you open that up and scroll down, you'll notice it has a little results section or it gives an example off the results. Now we can just simply copy that if we wish, because that is Jason, and then we go to one of my favorite sites, which is Jason leant dot com. And if you paste your Jason into here and then click, validate Jason and scroll down, it will tell you if it's valid or not. Now, in Jason, if I remove something, so let's say I remove I don't know. Let's remove these quotes from the key. We get an era, and it tells us where the era is. So in Jason the key is always a string. So they tried changes to a number. Just validate our own assertion that doesn't work either. More errors. Okay, Now the values themselves could be strings, and they can be numbers. For the most part, I believe we have some versions of 1.1 solutions. Do an experiment here. Let's put this key back, whatever it was called. And let's try, approach a decimal number. See, that does work so we can have doubles. We can have vintages, etcetera. Now it's up to you to discover what your software actually pauses. This number at because you're software might say this is a float double. You might even be horrendous and say It's an interview, but I don't think I think does that. Anyway, that's how we discover if our Jason is correct, so you can imagine in a nap you would make her call to your Web 80 I you get the dates of back, and you as the developer would probably print it out into your console, you copy it and then you paste it into Jason lint just to make sure that the data is actually correct. 82. M11 4 OH GOD, PLEASE NOT ANOTHER WEATHER APP!: now, just before we get cracking with our weather app, I want to bring a special point that's dear to my heart. And this is called Oh God, not another weather. And if you search on Google for weather wraps, you know the market is flooded. Went you have results that are 15 best 10 best, the 13 best weather maps. You know, there are a ton off weather maps. Now this tells me that weather APS are extremely popular. One and two. There are a lot of competitors in the market. And what do you have to do as a developer when there are tons of competitors? Well, you have to differentiate yourself. Why would I choose your weather app overall? Off those other weather APS when it comes up in the APP store, well, there's a couple of things we can think about when we want to differentiate ourselves. First of all, just speaking about weather, why do people want your weather information? So at the moment, the weather app just show the weather, but people don't want the weather people. I want to ask the following questions. Do I need an umbrella today? I used to live in Magister. So that was a mute point. You need an umbrella every day there. Do I need some block? You know, am I gonna burn from this hot sunshine? Can I have a barbecue? That won't suck. And if you look at all of these, yes, they are related to weather, but in and off themselves, the reasons aren't to do necessarily with showing the weather. What we're doing is we're tapping in to something that people actually want to know about. And that's my inspiration behind Will I burn? People want to know if they're gonna burn when they're on holiday or wherever it is. So in order to invoke people's desire to download your app, you have to invoke their emotions. This is a very important passed off app development, And I know as an app developer where I'm very logical, you're probably very logical because app development sort of attracts logical people. But we do have to cross into this ethereal world off emotions. So when I show you a picture of someone with bad sunburn, it invokes in the emotion into you. And if I said I have this app that prevents that you would probably go download that immediately. You wouldn't care necessarily that it was about whether you care about preventing the sunburn. Hence the name will I burn? It doesn't say. What's the weather that could make me burn? Just will I burn. So in the end, you can also say to your user, Look, if you use this app, you will have a lovely town and no sunburn. What so ever, right? I just wanted to put that out there. So you understood what was going on behind. The rationale off this week are now ready to come back to the logical world and begin choosing our weather. A p I. 83. M11 5 Choosing the Weather API: let's choose an A P. I provide our weather data, but before we can do that, we just need to think a little bit about what we need from it. So I always think about your data needs before you decide on a specific item that you're gonna use to provide that data. So our we need a UV index cause UV index is the key piece of data that allows us to estimate how long someone's burn time is. How powerful is the UV? Directly correlates to how quickly you will burn and then optionally we would like some basic weather. So if later on, we actually want to show the user what they weather report is, we can do that, but it's not totally necessary. We would be happy with a simple UV index, which which would actually also decrease the data load for us, right? So you also have to think about the future of Europe, which is what we just did there when we said optional basic weather. We're not using basic quiver, but in the future we might. And so you have to think about the future of your app, and it's almost impossible to do because you're wraps will go places that you never realize that they can or should go, so it's almost impossible. But it's a handy exercise to do anyway. Also, think about how much this is going to cost, So an A P I might give you a free limit. You'll say you can connect 10 the 100,000 people in any single month, and it's free. After that, you get charged, and the temptation is to think, Oh, well, I can worry about that later. No worry about that now because those costs can really add up. And it might make more sense to actually pay for a much lower cost one up front now, rather than take the free option but more expensive, laters. Always tally up your costs on the pricing lists, right? We're ready to choose an A P I, and there are actually whether a P I lists. That's how popular, whether Apsara. So if you go to this link, then you'll find a Top 10 article that somebody else has written, and here we have it. Our top 10 weather AP eyes written in 2014 so a bit dated now and feel free to go search for other ones. But this gives a nice overview off what's actually available and can click through and look at the various pricings and things that they have, right? I've already chosen my weather, a p I, and it's the one I showed you later up early has showed you later called World Weather on line. That's developer dot world weather online. This tells us what it's all about. Premium weather, a pack for developers, 170,000 users. That's pretty good. You can try it free for 60 days. You can look at the pricing. So here we have our premium a p I, and we have some monthly pricing to go with that. If we change our A P I requests per day, it will tell us what the new pricing will be. $115 monthly or a 10% yearly discount. But it does have a 60 day trial, so if we go back, you can try it free for 60 days. Simply sign up with the usual email passwords, give them all your data and you should be able to go. So go ahead, sign up to it now, so we're ready to use the A P I when we come to our app. This AP, I actually requires an authentication key, so it's tied to a specific used. You can't just use it for free, right? I'll see you in the next one when we'll actually start creating a rap and asking for some permissions. 84. M11 6 Creating the App and Asking for Permissions: we're ready to begin creating our weather app or are will I burn out for others? So the first step, of course, is to create the app itself and ask for location permissions so we can get some UV data on our users current location. Now, this should be pretty familiar to you, considering that previously we've looked at apple maps and GPS location, so we can just run over this pretty quickly and it'll be a great refresher for any of this stuff we've done previously. So open up, X code and let's get going, right here we are. So if you recall our last act, we created words. Where was I? So what we're gonna do now is create a new Exco project and it's gonna be pretty similar to the set up of where was I? A single view app will do. And what are we gonna call this? Well, let's call it the name of Iraq. Will I turn and echoed will do the rest for us. Let's hit next and save it wherever we want to save it. So on my desktop, right first thing to do, ask for location, permissions, and if you recall This is in the info dot p list file. All we have to go do is go to the idealist information property list hit plus, and then start typing privacy dash location. And we should have a list of location. Always, always usage description. We don't actually want that. Try and expand this so we can see the whole description. So let's try that again. Privacy dash location. And if you hit the down arrow, it'll show you the full list. So always usage location, usage, location within use. Well, that's the one most appropriate for our app so we can have that. Okay, then let's give this a description to show the user as to why were using their location. Well, let's say we need your location to provide accurate a que it accurate you ve data. Okay, Perfect. Now let's go over to our view controller and start setting up things in here. Now we need the location. So the very first import that we need to do that he's our map kit knows. You recall in our previous map, perhaps we actually went to our Project solution folder and we set up our build phases and link toe binary where we dragged in the map kit framework. For now, I'm going to leave their outside, just cancelled that and go back to the view controller and we're gonna try and run it without dragging that in to see what happens. So it's a general rule for when you're making APS. Because devices have limited processing power, you want to keep the load down, so to speak of all the frameworks that you're probably initializing when you fire up the app so we'll leave this without it. For now, if it doesn't work, we Noto added later. Okay, now we need to get our view controller to inherit from CL location manager delegate. So this just allows it to receive all the events that are to do with our users. Location. Right? Let's create a class variable to store our location manager. So let's location, Manager equal CL location manager and a new instance of it perfect. Then inside of our view, did load what we need to do. Well, we need to sit this delegate as the delegate for the location manager because at the moment they don't know about each other. It's that simple enough location manager Doc Delegates is equal to self. Okay, Once we've got that, then we can request our authorization. So location manager darts request when in use authorization. Make sure you select the correct one here, cause if you don't, you won't get a pop up. And the reason you won't get a pop up if you choose the wrong version is because in r p list, we only have a description. Four location when in use. If you don't get a pop up, that's probably the likely place you need to trouble Shoot first. Make sure you have the correct version here for location. Okay, that's gotten me a few times, right? So now what do we need to do? Well, now, when we request our in use, the APP will go off, Ask the user. And if it comes back and says yes or no. Either way, it's going to fire off a function in this delegate. And because they now know about each other, it knows to look in this class for this delegate and this delicate is called did change authorization status. There it is at the top, so you can get there by just typing a bit of that key word, which is actually further on in the description of the function or the actual a wording of the function. You can also get there by typing location manager, and then we get a whole bunch of everything that we need. And if you're making a more complex smacking or location at, then you might want to type that and have a look through what each of these things do and will make your life a lot easier. Rather than reinventing the wheel yourself, so did change. Authorization is the one that we need. Okay, now, of course. Let's just test it. Say, Prince. Location off. That will do for now. So let's again run this on a simulator and just double check that everything works at this early stage. Whilst it's all loading, I'll just say that US humans have this weird, weird peculiarity inherent to our species, and I'll give you an example of it when we're programming. We tend to think that the thing we've just changed, whoops is what actually caused something to crash or not work is this weird thing. So that's why I say test early and test often so you can pick out these bugs earlier because if you don't do that and you run your act after doing, you know five or 10 things, then your mind automatically goes to the last thing you did and blames. That straight away is an inherent failing of pain, a human that we do that. But when it does that, it causes you to look for the answer in the wrong place, and you will spend so much wasted time trying to find out where it doesn't work just then. So that's why test early and often, even if you think you know everything about your app and you know how to set up this location Manager doesn't matter. Test early and often, right? So this is working access found location, click allow, and it's done right now. How do we know that our authorization for location has been allowed or denied? Well, we could check that in our code using this variable called status. Another way you can actually check it is by going to a device with simulator and you probably noticed, have an iPhone go to settings and then where is it? In this version? Let's go Privacy location services they we get. So where was I? Will I burn while using the app? And then your explanation is also there, so users can actually revoke it here and notice Over here. This will actually change because that delegate function is being fired. And also because our app is still running in the background. Now, let's do a little test. You That's double click. Oh, no, that's not gonna work. I just got a brilliant idea where you could close the app and then test if this would change. And of course, it won't change because there won't be a connection to X Code anymore. Oh, dear. Silly. Anyway, let's stop that running. That's how you can do it. Now let's look at how you do it this way. Location off. Let's have plus status and then just hit dot We have a role value and a hash value. Well, what does that mean? I mean, we would probably expect some kind of string here, but there is no such thing. So let's try a different approach if the status is equal to dots authorized when in use. So we had thing that doesn't actually show status dot anything, and that's because this is just simply returning at what I believe to be an interview value . If we look at the clue here, if we just put point, it says, we can haven't inserted to as a role value. So it's just using that Inter jurors a code to find if it's equivalent to the C L authorization status. So if we're going to give this it's full name, it would be this don't authorized winning use, so you'll notice that's the same type. Is this right? Then, of course, we can print allocation as authorized, and we can also do something like else. If our status is equal to and we can use the shorthand here denied, then we have an issue because if our user revokes this location are authorization status, nothing tells them that in the app that's left to us as a developer to plumb in So festival , we're gonna print ourselves Location denied. Then after that, we need to tell the users somehow, and to do that, we're gonna give them what's called and elect. Let's a let's equal to now. On alert is simply a subclass off the view controller because it's showing us a view. It's a specialized view. It's like a message box. You might have seen these before many times. So this is called a U I alert controller, and you can initialize it with a title, a message and a style. So, of course, the title is going to be error. And if you hit tab, we can go to message. And let's call this allow apt to access your location via settings. You can put more description in there if you wish, but I'll leave it at that for now. And then we need a style. And what type of style will just put dots and we can have an action sheet. But we only have one thing to do here, which is press. OK, so we just want a simple A Let Okay now we need to give this select the actual busting. It doesn't come with a button by default, so alert dot add action is the way we do it, and it requires a u. I. Alert action. So you have to do here is press enter on the auto, fill it a lot of feel that for you. Open your brackets again, press enter again and it gives you the template that you need. So this button needs a style. A title. Rather OK. It needs a style, which is dot and there are several styles canceled. Default, destructive. Well, you could go through these and see what they do for yourself. We'll just have default then what else do we need when we need a handler? And this is the thing that happens when this button is Prince. For now, we're not doing anything, so it's new now the allowed is ready to go. So with yourself dot And we need to present this. So as you guess we have to go to present. And this gives us a view Controller two presents, which is just simply and elect because, remember, alert comes from your Eilert controller, which comes from view controller. So that's where I present allows us to use that. So do you want to animate it? Hell, yeah. On completion Hit tab and we'll have nothing happened on completion. We don't need anything right, so I'll just say that and let's run it and see exactly what happens. Oh, we have an era. Allow upto accent, location, vice settings click. Okay, so let's go to our settings. Let's have while using the app and we have location authorized. And if we switch back to the APP, everything should be all good. But if I now go to my settings, I wish I could. And I think never. And then we go back to we, like, burn. Our message has actually popped up Now. I wouldn't rely on that message to pop out if the APP is closed in the background. Obviously you won't do anything. But when the APP does fire up, this will give our user on alert that they've been silly and they've revoked authorization status. Or they canceled it when we first asked for it. So that sorts out that little bug that was waiting to bite us. Now it's time to get the actual location. So let's make a class variable to hold our co ordinates are latitude and longitude. Now we could set this as something if we wished, or we can simply give it location coordinates. Two D, and we can make this optional rights now. What I had done before waas I made this equal to sort of a default latitude and longitude. So I just put some degrees in there and I wasn't particularly bothered. But I realised later on that when you do that, if you have some kind of error getting use location, your app actually already has coordinates, which is dangerous because you might say to your user, You can spend an hour in the sun but the coordinates from your default set and they can only spend 10 minutes in the sun, and then they get burnt and somehow they'd sue you if your app is really popular, of course. So I mean, making APS is a multi faceted, multi talented thing these days. It's no longer I made a farm. Apple made a 1,000,000 quid. It's You have to think about some of these ramifications of what you're actually doing in your app. So I mean, for a nap like this, I would actually get a standard disclaimer for wraps, and I would make people agree to that disclaimer. Apple does actually have its own disclaimer. When people download APS, it's you could rely on that. Okay, now that we've got our location coordinates, let's create another little function to get the location and let's say if let's the location is equal to open up our location. Manager, try to get the location which is optional, and then try to get the coordinates from that. Actually, we don't need to get the coordinates. At this point. We can leave it like this. We can get the coordinates at this point is equal to luck dots co ordinate right. So that's sorted. So oh, optional chain, Let's see, has no effect. Oh, yeah, of course. You don't need to have that at the end. Because if this doesn't exist, then the if Let won't happen. Okay, so now we can get the location and shove it into our coordinates. Variable. Right. We're ready to go with the very basic plumbing of our app. Next, we're actually gonna look at the design of our So in this particular case, I haven't done the design first because, well, I would design first normally, but I wanted to reinforce what you've done previously with maps, and I thought the best way to do it was actually to do a bit of code first. So next we're gonna look at designing our app around a really nice custom fund 85. M11 7 Designing Your App Around a Custom Font: Now there is a design rule that I learned a long time ago, and that is to design whatever you're making. It doesn't matter if it's a nap. It's a boat car. Whatever. Design it around. A focal point. A single feature, The key word there is single. And in our case, that single item is a custom front. So open up a Web browser and let's go hunting for something that really bring out the flavor off our app, right? The very first thing we do is go to some kind of search engine like duck duck, Go. I like them cause they don't track me a murder of a privacy thing. Anyway, let's a look up something like open source Funt. It's not technically correct wording, but we have the 40 best Google fronts. We got front forge, etcetera. Now you are welcome to use whatever funds you like in this apple Oster creating. I I recommend that you choose a different front to the one that I've chosen just so you can get an idea of how to design things and how to make your own APS look good. So I've actually got a front. I've already chosen. I really like this front. Cooper Hewitt. I believe it's quite an old one. There a few versions of it going around you can have book. I do kind of like book. This is the font of chose, and now it's important to check the license for your front. Because if you make any app sales and the licenses come after you and realize that you've made up cells using their front illegally, so to speak, they conceal you and they can see you for more probably than your app is worth if they can prove they lost that much, so always check a license. This one, I believe, is completely royalty free. So even though it's on this commercial website, I have to check this out before this is royalty free, right? So let's download this O. T. F front. My belief Oh CF is an open source front format, right? Once you got that, we then need to include this into our project somewhere. So festival Let's head on over to our downloads goes to our Cooper Hewitt and there we have all of the fonts in that folder. But how do we include it in X code. Well, it's not immediately obvious, but what you actually do is you can click and drag the folder and you can just drop it into your project somewhere in your project folder. Make sure it's the yellow folder and not the blue one. And then it gives you a public dialogue and you definitely want to check copy items if needed. Hit finish and everything will be put put in there. You can expand the folder and we have all of the funds. We also have our license file, which tells us this is an open front license, which is great. Can says you can use them as long as they're not sold by themselves. You can use them in anything that you do sell as long as the front is not the main purpose off the sale. Okay. And if you click the funds themselves, it gives you a preview off what everything looks like now by itself. This won't work if we try to specify this front because X code doesn't know all ex code noses. I have a bunch of files, so we need to link them to our project. Now, I'm gonna use this book front. So I'm gonna copy this command, see and get that edit dialogue. You just simply click it once and wait a second and it will pop up for you can right click and go to rename which, of course, isn't there. Never mind. Just think it once that will do the trick. Okay, now, how do we include this? While it's simple enough, we go to our info dot p list and we works. Not that one that's closed these up, this one. And we tell our expert project exactly which funds we have included. And this is done fire. Let's search for fonts provided by application so we can click that otherwise funds are provided by the Iowa system itself. Right? So what is this while it's actually an array, So if you click this type option, you can select array. And then if you expand the fronts, you have item not, and you can click in there and cased in the name off your front with its file extension. That should be O T f. Now, just to make sure these funds get copied over, click the solution. Go over to build phases, I believe might build settings this tribe build second note, build faces, definitely build faces. There it is at the bottom. We want copy Bundle Resource is and notice how it's copied over your font folder. And what it does is it simply dumps all of these in the same directory. Which is why we don't have to specify a directory in the info dot p list. So that's something to be wary off. Be careful of the naming of custom files that you bring in. You don't want a file name clash anywhere because as far as I remember, it may have changed recently. But I doubt it. The compiler actually puts all of your resource is like all of these fronts, etcetera into a resource is a folder in your happen as we get further into learning Iowa's will look at that file structure off our caps. Right now. Let's simply open our main story board. Let's drop in a single label and try to assign that front and then test it. So let's go for label, you know, objects, inspector, click and drag. Let's center it just whilst we're here, so it will definitely appear have the constraints and they got to the label attributes, Inspector, they go to front, hit the text. Icahn, go to front custom and let's see if we've actually got a Cooper Hewitt there. There it is, Cooper Hewitt, and you'll notice it gives us all the options. Now, if I chose one of these options that I didn't including my info p list, we'd get a Kratch off sorts. So I'm gonna choose book because I know that works. Crack up the front and then run this on our simulator just to double check everything. So now this label Shourd's that we have our location era, this label should be the Cooper Hewitt book type. To me, it kind of looks the same. Is this'll able? Oh, of course it looks the same. Dahmer's you are telling it to use the Cooper Hewitt fonts, so of course it looks the same. But everything works now just to show you if I specified a different version of Cooper Hewitt like book right, Alec and then I ran this in. Yet hopefully, well, not hopefully you never hope for a crash, but I think it will crash or default to a different kind of label, right? So it hasn't crashed used to in the old days. But now we have this simple label at defaults to the system front. That's just something to be aware off if your fonts aren't showing correctly. So we want to have back to our book front. Now it's annoying because it will actually show you the italics in the designer, but it doesn't actually appear where we wanted to appear. Which, of course, is in the but anyway, that's how you've searched for and implement custom fonts into your app. 86. M11 8 Alowing the User to Pick a Skin Type: in order to calculate the time to burn for someone sitting in a certain UV index of sunshine, you need to know something about this skin type. So the whiter they are, the quicker they burn and the doctor they are, the longer they can actually stay out in the sun. Now there's a couple of categories going from white all the way to black, and we can allow a user to choose one of these skin types from within our app. So we're gonna set up the whole interface, the graphical part and the actual coding and programming part, which includes setting the skin type in the user defaults so that use that doesn't have to reset that skin type every time they open the app. So let's get going. Right. So here we are in the graphical bit of our app. We've opened our main story board, and we're going to start messing around with the look of everything now. Sometimes, once you developed for long enough, you don't necessarily have to stick to the paradigms that that's certain development ecosystem imposes on you like IOS starts, and we've already started doing something like that by having a custom font for our label. I mean, why use the system one? And I think we're gonna go one step further in this little process. We're actually going to style this after the windows phone style of things. So they rely a lot on fronts alignment and black on white type colors. So what we're gonna do is select our main few there, and we're gonna set that background to completely black. Okay, then let's select the labour we've already dragged in. Let's change its color to completely white. If we want, we can crank it size up a bit. Now, this label isn't going to just say label. It's gonna give us the minutes until we burn. So let's have 10 in there. That should be center aligned. Now it's getting a little bit squashed in the middle. So what we can do is see what size gives us a better or less squashing. If you like something about that size, so weaken, select it and we can then impose that horizontal height, horizontal hide, vertical height on it. So it'll always be that high. Okay, that looks fairly good for now. Right? So the whole point of this section is to allow the user to pick a skin type. Well, first of all, to let on user No, there is a button whereby they can pick your skin type. We have to give them one. So let's first creates another label Now. We could drag in a separate label here to do this. Or we could select our existing label hit command C Command V and click and drag it, perhaps someone near the top corner. Let's drop its size down and let's change the font of it. Perhaps we can include some other funds, so I might actually want thin. Now Thin isn't gonna work in this case, if you recall, because we haven't actually specified this front in our Info P list. We do have it in our list of funds should be here it dash thin. But if we go over to our in from P list, we need to add it into this array. So let's plus and let's go. Cooper Hewitt dash thin dot Ozier. Now it's available. So you go back to our storyboard, and when we run this, we won't get anything terrible happening. And then let's just drop that size of it, and it's double click it and change it to skin color. Or perhaps skin type is a better description. Okay, we can just open it out, close it up a bit. You'll notice it's still got this height because we copied that, too, so we can double click that and we can change it to something like 44 and you'll probably see why that is. In a minute. We can give it a nice wits and let's just check what constraints. It's how it has already. So select the item over in the top, right? That's select our little ruler icon there. If you scroll down, it tells us we only have width and height, which is good. That means we can pin it to the top edge off our device. So what I actually want to do with this is I'm actually gonna shrink it just to touch, Let's say to about 90. I want that text to kind of filler where it is there. And then I want that text to align itself to the left because what we're trying to do is a design principle of aligning everything on one margin over on the right on the left, Rather, and we'll do the same thing on the right if we have to. So I got our skin type. That's fine. Let's control. Click and drag it upwards so you can get some vertical spacing sent control, click and drag side and get leading space and set. So now it's fixed at the top corner, and we know no matter what size device were on, we will always have at least this much top corner whether and landscape or portrait. Okay, so what skin type is there now? We need a bus in to actually change the skin type so you can click and track that in. Let's first change the color off this button toe whites to match everything. Let's change its text to change. Spend that out a little. We can give this again a fixed width and height. Now apple say that your buttons should be at least 44 screen points high, and the reason they do that is because it's the best way to align it with the size of our human fingers. It removes that inaccuracy that small buttons have, but rather annoyingly, they actually break this rule in some of their own apse, which is very strange. Anyway, they say, If your button is not 44 hires a chance, you could be refused an APP review. It's never happened to me. But then I don't break the rules all that often. I do bend them. I definitely bend the rules, right? So now this. But it doesn't exactly fit in, and that's probably something to do with out front. So let's select our custom front. Let's go to our Cooper Hewitt. We can have this set of Finn. We could have it sent to book if we wish, so we can change it up. But the top now we just need to position this. Let's control click and drag to skin type. Give us a horizontal spacing, control, click and drag to Well, we could actually do skin type again, and we could send to them vertically so they sit along the same axis, and that lines them up very nicely for our uses. Hey, guys, we got on I spotted. Now we have to do is outlet these items because we're gonna be right into this label and clicking this button. So let's open up our assistant editor. It should look pretty familiar by now to you guys. It's scrolled across. Just touch. Let's make sure it's the correct view. Control. Always make sure of that. And then let's drop in a control. Click and drag from our label to skin type LeBeau. And, of course, sometimes you get that era. It's been annoying, so just drop it to a different location. Still in the same region. It should work. Here we go, and you can separate it out yourself to make sure everything is nice and clear for you. Right. Then we're gonna do our button control. Click and drag. Change it to inaction. Let's call this skin type clicked and connect best. Perfect. Now let's close that out. Bring back outside bars if you need Teoh. Okay, let's go to our view controller Now view controller. We're going to do some stuff with skin type. Bottom clicked. We can't do anything yet because we have no options to display our user. So let's create some options for skin types. Now these skin types of pretty fixed. When it comes to calculating UV, there's types 1 to 6 on. Everyone kind of knows which type they are. So it's nothing overly complicated. Let's go to our project. Let's create a new file, and this is gonna be a structure that's gonna hold our skin type. So it's gonna be a plane swift file. And what we gonna call this? Well, let's call this. Perhaps skin types go ahead on. Created. Now, we're going to create our structure called skin type At what? Sometimes it auto completes for us, which obviously we don't want structure skin type. And what are we gonna have here? What? First we're gonna have let type one and you'll noticing variable names. You can actually use a number now. Some programs don't like this. Some don't mind it. And if you're like me, you're not really bothered as long as you know you're gonna be future compatible, which I think these days you're pretty much guaranteed. So type one now, this is gonna hold the description off the skin. So this is something we're actually gonna show to the user, and we're also going to use it as a sort of internal variable. So we know what type of skin we have. So what we're gonna show to the users type one, which is equal to pale slash lights. So if you burn really easily, that's you. That ship that over and then, of course, talked to Type two dash right slash. Okay, let's Type three is equal to Type three, which is medium type four, which is our lovely Mediterranean all his brown. Let type five equal to five stitches Doc Brown. And finally, let's Type six is equal to types. Six. Very dark slash black. You'll never believe it. I once did this for a tutorial for someone, and they said I was racist because I'd said the word black. They didn't call me a racist cause I said White, they called her face Is goes that black? I was like, Oh, come on, get over it, cheese Anyway, some people. So I'm gonna say that Now let's go back to our view controller as go up to the top and let's create a variable to actually hold that skin type so far skin type. And this, of course, is going to be off type skin type that we just created is equal to, and you skin type dots on. We're just gonna put a default into year, so We can just put tight three if we wish. Oh, and whoops. That should actually be a string. Obviously, we've set these strings right now inside of our skin tight. Boston changed. Let's see what we're gonna do here. Well, first of all, we actually need something to tell our user to pick a certain something. What are they gonna think? Well, one of those skin types we've already created So what, we're gonna learn House to you is creating alert. We've done that before. If you recall over here in our location manager, we're gonna create a different one. It's called an action sheet where it gives us a whole bunch of options that we can specify . So it starts pretty much the same. Let, and that's is equal to a year. I alert controller on that. I know. I'm typing that when Swift will fix it all for me, we can set our title message, etcetera. So what's the title? Well, this is gonna be skin type. Get, perhaps put a mess. Question mark on it. Our message is going to be Please choose one. Something like that. And our preferred style is dark. Obviously, it's not in the Ehlert. It's an action sheet because we want a user to taken action from the sheet of things we display. Right now, we can start adding the actions that equate to our skin types. Alert docked ad action, and we want a new U I alert action, so simply hit. Enter, and it will fill it in for you. Open your bracket and you'll get the auto complete hit. Enter. If the auto complete isn't showing for you, then by all means you can also type it out. But it should be showing right. So what's the 1st 1? Well, the 1st 1 is going to be our type one. Like pale it more or less easily burns as soon as you just think about the sunshine so we could start typing type one here, etcetera, etcetera. But of course there is a much simpler way because we don't want to be repeating ourselves all the time or we have to do is go to skin type darts, type one, and that's going to show us that string. Okay, And then our let action style is docked and we just want default. Nothing special. Now, handler, if you tab over to it and you press enter. It allows you to create a handler. What is it Handler do? Well, it's the bit of code that executes after this action gets clicked. And when it executes, it passes over the action itself. So we would call that action. So this is simply passing an argument, then our code itself we can remove. That is what executes and what we want to do is set self dot skin type, equal t skin type with a capital s. That should be, uh, type one. So we've set the relevant skin type. Now, if I was being really clever here, I could actually remove this. I think I'm not sure just flying off the cuff here. We could get our action dogs and we get get our title because if you recall, our title is what's not that we want this one. Yep. Our title is actually the skin type type one. Now, this is optional, so it's complaining. But in this case, we know it exists that we can hit exclamation mark. So now what does this mean? While it means that this little bit of code can now be used as a template, all the other actions that we want to add. So I'm just thinking, in terms of saving programming space here, what you might be tempted to do is copy this pasted underneath and go Well, let's do now type choose skin tight, and then we have our type two skin type sorted and you would have to do this and over four times. Can you imagine how much code that's going to take up? Well, I think that's actually a much, much better way off doing this. So what we're gonna do is going to remove this. We're gonna use a good old for lick four far skin type in our skin type array and something so it isn't quite complete yet. Just gonna tap this in. I put my curly braces so we actually need all of the skin types inside off this array. So let's go back to our skin types, not swift. And we need to put everything in here into an array. So let's create an array off strings. So let's have string all skin types. Whoops of I've switched back to a different language here. You're gonna have to excuse me. It's a function. All skint types, skin types, which is going to return and array off strings open and close braces. Let me just make sure that compiles correctly. I have done something stupid. It's goes around it. It's because I'd been messing around with no Js and angular this morning, and it's totally thrown my brain for six here, right? So now we can return a new function, which contains all these six skin types. So return a new array off type one. Type two. It's Sentra. Okay, so that should return everything that we've got. Okay, so let's say, Fats, let's go back to our view controller. Now we can use our for Luke, So let's have all skin types. It's gonna live through the whole entire lot, and it's gonna grab the skin type, and we should actually make this into a let Now. I haven't researched this in depth, but the difference Abner, we'll discuss that difference later have made a silly mistake again. There, that's enough angular for me stopping ground. Okay, so now we have our skin type. Now we can add in Action Year, which is skin type on DWI can set that handler leave it as it is. This is gonna live through every single skin type and add on a little action for each and every one. And that saves us a lot of code and a lot of repeated code. More importantly, it is a great example off a loop, saving us quite a lot of time now, once What do we do once we've done it? Well, we're going to self dot present, and we're gonna choose this first option. We're gonna present that a lot. We're going to animate it. And on completion, what we want to do. Well, absolutely nothing, thank you. So let's save it. And now it's time to run and test that lets hit play on our SIM rates. Here we are now, our buttons gotten a little bit squashed here, so we need to change that. Well, let's click it nonetheless and up pops our action sheet so we can click items as we go and it will select that item. Great. So our little selection box works and for relatively little code for what we actually have in our app. Now we're gonna sort out the formatting of the labels and the graphics later as we go. But for now, we're gonna carry on plumbing because that's where we are right now. Now we need to change that label that pops up to our skin time. Now, here's a new concept for you on this concept is what you would have done previously is select your label. What if we've called it as you would change your text to be equal to whatever it is that you want to change. But there's actually a really snazzy way off Doing this on the really snazzy way are what we call observers on variables. Now, an observer on a variable means if we have something like this and something changes in it , it will fire off a piece of code for us automatically. And all variables come with these observer properties. And a whole bunch of other prophecies were just gonna look at the single one that we have right now. So how do we set them? Well, after type three hit a space open, close our braces. So it has its own little code area, if you like. Now, type did sent opening. Close our braces. Right. So this is gonna fire off after this variable has bean set. Hence the keyword did set. Now there are lots of other way interruptions you could do in the life cycle of a variable . Just simply look them up if you want to know. For now, we are simply going to Prince, uh, old skin plus And we can grab the old value of the variable cause it's still in memory. Somewhere old value, plus new and new. While we don't need a new value, Rather, we just need the variable itself skin type. Right? So this is gonna fire whenever the variable changes and do something that we want with old or new values. So if we hit play on this bad boy and we run this in our sim, we should get the nice little print out over here in out de barking area. So let's change type one There we have it changed. Type two. There we have it. So now we sure that everything is changing according to what it needs to do. And this is a very nice, small bit of code. Great. So now we know it works. We can stop our sim. Drop this box. We can remove this. We don't need to print anymore. We can set our skin type label. Don't text equal to skin type, plus skin type. Keep typing skin. I'm not skinned. I'm doing all right. Thank you very much. Okay, So we can have that in their if we still want it in their or we can change. It's totally up to us, right? So now if we hit play every time that variable changes, it's also going to change our skin type label. So type one, it changes it at the top. We can't see it with our formatting is pretty bad, but whatever it is, it is actually changing. Okay, so that's a pretty snazzy thing you could do with variables with that did set. Now there's a very nasty thing lacking here, and that is by putting this hear any other developer that looks at your code, this is easy to miss. It's quite easy to miss. Whenever they're changing stuff, they'll say, Why does the label keep changing? And for the simple app, it's pretty easy to figure out what a more complex one. It's not so easy. So what I'm gonna do is hit Command X on this, I'm gonna type the name of a function we haven't created yet. Change skin type label. Actually, we're gonna call this update two skin type label, and we'll just drop that somewhere down the bottom function update skin type label. And we dropped How single line of code in there. So now this is easy for a develop its debug. They would look at this and say, This is where exchanged. It's a name that makes sense. I would hit command C command F to find, and I would paste that in, and I could see wherever it was cold, and then he could easily debunk your code. And when I say another developer, I actually mean you in the future when you wonder, What the hell did I do and why is it doing what it did? So that's a much better way to actually factor that code. Okay, I think that's enough for this little lecture. It has been going on for quite a long time. 20 something minutes now. So I'm gonna have a little break. Now. You go have a little break, and we'll come back to this in part two. So we're gonna carry on from right here where we're leaving off, So I'll see you in the next one 87. M11 9 Alowing the User to Pick a Skin Type Part 2 Storage: in this second part of picking a skin type we're going to carry on from where we left off in Part one, which was setting a few buttons and labels to choose a skin type. And in this section, we're going to add that by storing our users default skin type inside off the user defaults . So let's open up our projects and get going. Now the first thing we have to fix is this sort of layout of our label as well as this equals. That should be a dash, so we're going to try it out first the layout of these labels. So let's go back to our project, go to our main story board and let's start shifting things around inside of here. So let's zoom in a touch and see what we could actually do. Now we could put this change button underneath. I think that might actually look quite nice. So let's do that. Let's put it slightly underneath, and the way we're going to do that is by just removing some of these constraints that it has. So we want to remove the constraint that pins it to skin type. So sometimes, if you can't see it. You can move your label around a bit, and at some point you'll find out I was actually that one. I didn't need to move anything big in. Select your a constraint and delete it. So we've also got this constraint at the leading edge year, which I can't seem to select. Perhaps it belongs to skin type. Yes, it does, so I can remove that. Okay, So now change only has a width and a height. We can leave that width and height more or less unchanged. And we can just shift this up and down. And then what I'm gonna do is I'm gonna align this underneath the skin type label itself somewhere over here. So before we do that, let's select the button and let's see if we can actually align it over on the left. And, yes, we can. If you look from the right hand side, our alignment section allows us to pin it to that side. And then we can give this a heights of 44. That's fine. And it's given a wit off. Whatever it is, it's just increased that attack because it looked squashed before. And then we can control, click and drag to our skin type, and we can align the leading edges. So if we click that, that should be zero. That's a double click that brings up that boats, and then we can just shifted up just a touch so it looks good. Control, click and drag puts a vertical spacing, and now everything should be aligned. Although when you do that, sometimes it makes a change. It actually applies these constraints that haven't been applied yet. So if things move around when you constrain something in X code or in this editor, it's because these constraints are suddenly now activated. So it's our 44 constraint that's actually doing it. I'm gonna have flout Apple's rules and put 37 into their There's a Z amounts of it. See what that looks like? I think that looks okay for now. I'm going to increase the width off this skin type label, so let's select that with and let's make this 300 which is going to cover us for smaller devices, will never need anything more than that. And if we do, we'll just decrease our front size rights. We fixed that little issue Let's go to our skin types, not swift and change that stupid equals Teoh Dash pail slash light. OK, now let's get to our view controller. We've sorted all of that out. Now, when our abscess loads, we don't actually want our used to have to select their skin type every time. We wanted to automatically save and load it whenever the at first loads. So to do that, we can use our local storage defaults, our use of defaults storage. Now, the obvious place to do this is to create our new file. Let's create my favorite name, which is utilities all the useful stuff. It doesn't really have an alternative home utilities now, on the one hands, you could put this in utilities. You could also put it in your own sort of local storage file. Whatever you want to call it. Okay, so let's do utilities. Just a side note for future trips for future efficiency, I find having a utility section is actually very, very useful on. More often than not, I will actually copy this. Utilities file its entirety into other projects that I'm starting to create because I always need the things that are contained in utilities. I just need to modify them slightly occasionally. But utilities is very, very useful. My even publish my own library for these. That's a good idea. Okay, so the first thing we do is we need a function to get our user defaults. So let's just call this gets storage. This'll swill. Of course. Return a type off user defaults. Now, I'm not sure if we set that to be included. Bats way. We'll see what happens. I think we should be. All right, let's return. How? Where Years of defaults docked standard. Okay, now we need a function to set the skin type in our use of defaults, and we're going to pass in a value which is just gonna be a simple string, and we'll get out, Do you folks, which is get storage so they're ready to go. Then we need a default stopped, and we're going to set a value for a key. So what's the value? Well, it's the valley we pass in. What's the key? Or we could set this as simply skin or sin skin type. But if you recall, we've done this a slightly different way before we set a structure somewhere. In this case, we've only got one item. So what we can do is we can cut this out and what I can do normally is put a mark, use a default storage. So this is just a comment that I've created here. It's no actually compiled and let's have a bar. Skin tight key is equal to skin type Now. I can use this key everywhere so I can drop it into down here skin type key. Okay, so we don't have to create a whole structure for it like we did without previous APS. And once we've set it, all we have to do is say defaults dot synchronize, and it will do the work for us. Now we need a function to get the skin type out. Let's just drop that. Let's make some space. You guys can see function gets skin type, and this is going to pass back a string. Naturally open. Close our braces. Let's gets our storage step one. Then we're going to try and get something out of storage. We're not sure if it's there, so we're going to say if let the result is equal to de folks does strings. We're gonna try and get a string right out of the gates. Four Key or what's the key? What if we start typing key? It's skin type key. Whoops. So if we can get that, then we can return the result. Nice and simple. But what if we can't get it well down here? We need a default case, which is to return something. So let's return our regular skin type dots, and we can return one of the types from it. Take three whatever now, coming back to the fact that this is an app that tells people how long will be until they get burnt. It's probably best to go really pessimistic on your estimates if they don't give you a skin type and put type warning. So there, as white as possible. They'll get burnt in short as possible, and your app will give them the required warning for that, says unlikely. That looks and go. I've got an hour and they're a white guy and they put a setting in for a black guy, and obviously they can't stay. How in the sun for that long. Okay, so that's all sorted. We should be able to get our storage out of there. Let's get back to our view, controller. Let's start assigning some off this stuff. The first place we're gonna look at is the actual variable itself. So now we're not actually going to assign like three to it. Instead, we're gonna drop into our utilities, and we're going to go and get the skin type, which will return our strength. Now, hopefully, it's gonna do that. And whatever it returns, it will. Then fire did set, and it will update the label automatically. So we don't actually have to write any code inside. Viewed it load, which is beautiful programming. If you ask me, let me just pat myself on the back. Well done. Totally planned it that way low. Okay, let's run this in our iPhone S e simulator or any simulator that you have. So that should replace it. And with one fell swoop, we should have taken care off our skin selection on Guess what we haven't. And that's because this label at the top hasn't actually changed the first time. So we've just learned that actually, this did sense doesn't fire. The first time our variable gets changed That's interesting to me. Let's check. It works all other times. Let's change it to White Fair. Yes, so everywhere else works very dark or black label doesn't quite fit. That's fine, so we can stop that running. Okay, so this deed to step doesn't actually work. Well, there is two options here. There are two options here. We can look through the docks and see what other items we can look at. You know what? It's a fire enough, or we can simply go to viewed it load because we know that view did load or load after all of the class variables have loaded so skin type will be available and in view did load. We can simply put update skin type label, So that's totally your choice on how you want to architect this. It's quite annoying that we can't use that beautiful solution, which doesn't actually works. It's not that beautiful, but hey, how it is what it is, right? So let's hit play and let's see what that's gonna do for us. So now we should have something saved in memory. Pay lights. If we change that to medium, actually changed it to Oliver Brown And then I double click this home button, removed the app, go back to the home screen, open the app again. We have a very slight problem on what is the problem? Well, we haven't actually saved it in our skin tight. It's giving us default type one. So let's go up to our did sent an inside of here after we've set this label, what we're gonna do is call our utilities to say that value, which was set skin type if you record and of course we're passing are variable. Let's save that. That's just silly me. I forgot to actually call it. I do find whoops. I do find it actually helps to have a piece of paper that I'm scribbling on when I'm thinking about the logic of my app and what I'm actually creating, programmatically speaking. Then I don't forget stuff like I just forgot, but it's a bit much to be talking to you guys, keeping you entertained and doing all of that at the same time. So let's change it. Let's store dark brown. Let's go to our perhaps switcher. Remove it, go back to our home. Let's check out the up and it pops up with Dark brown. So it is actually saving it in our user defaults. We now have all off the data we need. And we have a way off setting our users skin type. And we've also reduced our code significantly by primarily two things I want you to remember after these two lectures. And this was did set so we can change stuff in here After we change something in a variable and also judicious use off four loops. Use a for loop, so you don't have to do stuff like add on alert times six with all the associate ID code in it. Right. So he sort of that out. Next time, we're gonna move on to some slightly more complicated stuff which is getting information from the Internet. But we're gonna kind of cheat on. We're gonna cheat in a way that all programs cheat. And to find out how you'll have to join me in the next lecture 88. M11 10 Using Cocoapods to Install a Module for RESTful Services: here we go with another very, very important concept that you need to grasp as a developer. That concept is called Don't Reinvent the Wheel. Undoubtedly, somebody out there has figured out how to get a P eyes and rest ful services on the Internet and deliver better data back to their app. And what that person's done, if they're really nice, is they've created kind of a little module that helps us do this. And what they've done is they've published that module and said, Hey, anyone can use this. If they want, they can modify it. There is no license attached to it now in Iowa's that concept exists. And when we want to find something, a wheel that's already been invented to do a complex task for us. We go in search for what are called cocoa pods. Now, our complex task is this. We is the client, the APP. We make a request to a server. We get a response in Jason XML or any other kind off data. This reds rest ful method off doing things now to write all of this ourselves. Can you imagine how much work that would be? Well, perhaps not because people have tried to write this themselves. But there's so much that could go from and so much code to go through to create all this, that it's much easier just to see if somebody else has already invented the cocoa pod wheel . And if there is a library to do this as it happens, there are tons of libraries for this, and I'm going to show you one of the more popular ones. So let's install a cocoa pod to our project rights of here. I am in Google and let's do a little search for cocoa pods, and the first sight cocoa pods dot ward is the one we want to look at now. This website contains a repository for all the cocoa pods or most of the popular ones and even the unpopular ones that are out there. Otherwise, without cocoa pods, we'd be looking at repositories like get hub and those kind of things. But chances are, what you need is contained here. So let's try and search for something like rest and we have nothing. Let's search for Alamo Fire, which is the part we want now. I had this trouble before I started this lecture was wondering what was happening. I think their website might actually be down. So we're gonna copy Alamo Fire and we're just going to search for it on Google as cocoa Alamo Fire, which should take us to the correct place. But my whole point of showing you that website was that you can actually search for pods when the websites working. So let's go over to these first link. There we have our Alamo fire. Now Alamo fires one of the more popular rest ful cocoa pods, and it's audio version 4.5, which is way, way into it. Currently it's on Swift version three, but I think we have to worry about that too much. If you click this link up at the top, we can actually go to their get up website and we can browse the code for ourselves. And this tells us it's an 82 p networking library lessons written in Swift and basically allows us to do all of the rest for things that we need to do and tons and tons more of things that it can do. This Alamo organization actually do an image library, which is extremely useful this and one other than I use and a network indicator, which is also pretty useful. But you can actually do in Iowa s itself. Anyway, we don't know about any of that which needs to know that these places exist. So cocoa pods dot or when it's working will give you all the parts that you need to know about. And we're going to use this particular one Alamo fire, right? So we are now going to install cocoa pods into our application. So let's switch over to our main screen Rx code. Now, when we're pulling in a coca part of a part for short, we don't actually do it through the X Cody into face right here. We do it through what's called a part file. It's just a plain text file for all intents and purposes, but we first have to set up our project to receive those part files. And because of the way that works, we need to completely quit X code, right? So completely quick X code. We can leave our simulator running. That's fine. I've got all of our old APs here. Now what we need to do next is go to our APP folder. Will I burn in this case? At the moment, we have an ex code project, and it contains all those folders and files that we used to sing. Now, inside of here is where we create that pod file I just told you about. Just close this simulated to make it clearer for you. How do we create a part file? Well, we actually have to open the terminal. So if you're on Mac, you should know what that's all about. I'll open up a new terminal window here and now we need to actually go to our project folder. So it's an easy way to do. You have to go seedy space and then click and drag your folder in and hit Enter and it will automatically go to the folder if you want to see what's in there just to make sure type ls enter and it shows you all of the files and folders that we can see here. Excellent. Right. So now that we're in here, we need to do something called hard in it and it doesn't exist. So how do we actually install cocoa parts? Well, first of all, we need sudo Jim in stool cocoa pods. Press enter and type your your system password, and that should go and install cocoa parts. If you run into issues with that which you might just do, just open a new tab boss, that's running. You can also try Sudo gem. Install cocoa pods and you can go for a beater version with dash dash pre dash end, which is an installation flag, and you can specify user local Slash Been to install it into, but only do that if your cocoa pods don't work after running this sudo gem, install cocoa pods, so that's a simple backup option. If this option doesn't work now, this will take a little while to run. So just give it as long as it needs and once complete. We can check that with part dash dash version, and it tells us we have some items missing so we can actually install that now. Agree our command line tools and it will go ahead and download the extra bits it needs. Right once we're done, simply hit done and we should be good to go. So let's go back to part dash, dash version and everything should be fine. We're on 1.2 point one now. If you run into problems with cocoa pods, get the version and look for the error description alert code that comes up and also in concert with the version number. It will help you a lot when you're trying to troubleshoot any issues. Right now we're ready because we're in a folder to initialize our pod file simply part in it and you'll notice All that does is create what's called a part file. Now we can actually open this in any text editor, but it is better to open it inside off X code. And that's because text editors can actually introduce a posture, freeze and Coghlan's and quotes that don't comply with what the pod file needs. Status. A little warning for you there. Open dash a X code and hard file. And we can't find X code step because I'm currently on X code beater. Yes, I am. So we'll change that with me. X code dash pita. Okay, so that should open it. What we need now this file contains some defaults for us. It's created a couple of little targets for tests, and you eye tests. Which of these folders we see here? Okay, then back in our part file. First of all, we have a global platform we can define. Or we can remove this and we can define. This is I was 11 depending on what platform you are actually running on or what platform you're targeting. So once you've done that can hit command us to save it. Right? What else do we need? Well, use frameworks is something we definitely need, and you'll notice above it. It says comment the next line. If you're not using Swift and don't want to use dynamic Frank Maxwell, we want to use Swift. So we're gonna leave their own, commented to comment something out. Simply place the hash character before it, and that makes cooker pots ignore it. Right. So now, underneath for our pods for well, I burn. This is just a little Marcus. We know where we are. We can start writing some stuff we can say. I would like the pod called Alamo Fire. I believe it's all lower case up to the first letter. Common. And what we're gonna do is we're gonna take this pod from get Hubble from the git repository and you say equals That's triangular brace. So we're just going to specify where it is and then inside off our quotes, we're going to specify we want face to come from. Get hub dot com forward slash Alamo fire four slash Alamo Fire docks get So all I'm doing is specifying where that get file is, which is over here in get up. So it goes and finds it here. Now there are the ways of doing this. I prefer doing it this way because get hub contains usually the most up to date stuff. And if you don't have anything on cocoa pods, get hub is the place to go and find it. So, for example, if you have a very new framework out or a new version of it, it's probably not on cocoa parts yet. It's better to go straight to get hub and look for the branch which appears here. So if we scroll down in branches, we have a swift four branch. Now that's the branch we actually need to use for this particular project because we're are using Swift for So if you click it, it'll simply reload this page with the swift for specific implementations, and you'll notice that nothing's actually changed on these dates of the side. So no one started changing it yet. And that's because Swift for isn't vastly different to swift threes. There's not a lot to change, but it does tell you at the top here, this branch is one committee head 22 behind. Master. It's fine. Okay, so the way we can specify a brunch is by typing brunch the same item. And then we give it the name off that brunch Swift. Okay, now there's one other thing to do, and that is somewhere at the top of our file as to specify a source. And our source is going to be again. Https. Bloody blond gets hub darts. Come forward slash cocoa pods. Ford's nash specs dot Get and close your single quote. So it knows where the source is actually coming from, right? So safe that and I'm just gonna leave this little bit open. We're gonna switch to my terminal and at least try and install that part in store and hit. Enter Now, hopefully, that's going to go find that sweet for branch of Alamo Fire and clone it directly into I happened by clone. I mean, if we look at our folders, we now have a PODS folder which will eventually should contain the pods that we need. Believe they go in the parts fold. I can't remember my head right now, but it should do. And after an absolute age, everything will be sourced out in that age is only this first time because it's importing stuff from get hub. But after that's all done, you should have the following sort of output that tells you Alamo Fire was actually installed correctly. If there any errors here, then your best option absolutely is to go to stack overflow on just post on there, or simply look for other issues that people have had. Post your error codes and what not right some once that has been created, your motives over in your projects folder In your parts, we have Alamo fire. That's fine. We have our part part file block, so let's close our pod file for now because everything works and we also have X code project, which we had before and XY workspace. From now on, you're always going to open your project using XY workspace and never X Code project. That's because XY workspace integrates the pods and Ex Code project doesn't more or less so . If you double click your XY workspace that's gonna load up all the parts and all the bits and pieces that our project is made off. You'll notice we've got two solutions here. Will I burn and parts? And of course, as usual, we have the same files in, Well, I burn. Now let's look it. Will I burn solution and see what's included inside off our build phases. We have some link binaries and you'll notice that this installs were includes the pods that we have specified. So in our case, that's just the one that gets automatically included. So that works. That's fine. Now let's go to our view controller and do one final thing. Check that are Part is actually installed and it's working. We are simply going to try and import Alamo fire, and hopefully you get an order complete. But sometimes it takes a while for Swift did catch on or ex code. So let's put that in there. We don't have it yet, so let's go to our product Let's clean everything, then go to products and build or you can hit command be. And then hopefully this is going to actually recognize we have a pod called Alamo Fire. So that is running. We haven't had anything so far. It's safe to say sometimes in Exco you can actually ignore those errors You simply clean and build. And there you go. We are build has succeeded us are famous. Last words cannot load underlying module for Alamo fire. So now we have a bit of investigation to do, and hopefully this hasn't happened to you. If it hasn't, you can feel free to skip the rest of this lecture and move onto the next one. But I'm just gonna debug exactly what this issue is. And the very first step that we're going to do in this issue is look at our pardon file. So let's write what? Actually, let's close X code first. That's a good idea. It's right click output file open with, and you can use visual studio code. If you have that installed, it's another code editor or ex code completely up to you on. We have to check that everything is correct here so number one target yard area and it looks like we have our part. Our get is okay. I'll strip for is okay. And we know this is actually OK because it told us it was actually installed, so everything should actually be fine inside off the pod file. Also, make sure that your dues and your ends match up, like if else statements or curly braces opening and closing. So those all seem to match up. Okay, so we don't have to look in there anymore. Let's go back to our ex curd project and let's see what the issues are. Okay, let's go to product and build again because it works now. So it turns out all we actually had to do was closed down X code and restarted and picked up Alamo fire for us. But I was gonna say the next thing we could check was goto Arpad solution. Check the pots under there and check Alamo Fire actually existed. And the various other things you can explore don't change anything in this pods directory. At least, not if you are a starting out developer. Okay, so there we go. That is basically how you install your part files. Now I've done it the quite complicated way inside of Arpad file because I wanted you to be able to get the source from Get Hub, which is the more up to date source. Generally speaking, than the coca plants can be, and you can get more stuff on get hub for Alamo Fire. That's no probably necessary, but that's how you do it for a get and a brunch. And I just want to show you over on the cocoa pods guides that you can just have something like this where you specify the name of a part which we know already, and then you can specify any version greater than or equal to 3.0 or whatever version you are after. See, you can actually search over on cocoa parts if the search was working, which probably still isn't for the version that you might be after for your app. So this is the sort of official way to do it, and the way that I've shown you is a more developed, very way to do it to ensure that you have the actual code from get Hub pulled in. Now if he ever wants to update that. Quit that you can quit X code and you can run party in stall and nothing gets done. I believe this doesn't actually update. It's been a while since I've done it. So what you can actually do, if you want to update it to the latest, is you can open your pod file and you can actually just remove this or alternatively rather than remove it to your clipboard. You can go ahead and comment it all out like, so you can save it. You can run part in stall, and it will remove Alamo fire for us. Then you can undo all of those comments. You can save it potting store, and it will install the latest version of Alamo Fire. But be aware that when you do this in pods, if you use something that was changed significantly in the party in your project, you're gonna have to do a little bit of code reworking inside of your own project in order to make it work again. That's very, very likely, and it's quite a source of frustration. So I would say only update parts if it's really necessary, right? So that's how we use parts. Next will move on to looking at how we actually use those cocoa parts to retrieve some data from our A P I. 89. M11 11 How to Retrieve Data from an API in an iOS App: And now that we've installed a coca pot in the form of Alamo Fire, we're ready to begin retrieving data from our world weather Online AP If you're a call, all in a p I. Is Is this interface here, too noted by the great box where we send a request and we get a response with some data. So let's open up our projects and see how that's done. Now the very first step is to actually go look at world weather online, and you should have already registered for it because when you register for it should get a 60 day trial. Now if, well, whether online isn't available when you're taking this course, that's fine. You can use any other service. What is important is that they have do it documentation. So world whether online has talks tab up at the top, and what we could do is we can head over to an introduction, and normally AP eyes will give you how to access the A P I festival. So register verify, sign in large applied to block. Okay, we know that's already Let's go to our local weather A B I. Some other options. We've got our historical. We don't actually need that marine Depends what kind of app you're making. We don't need that. So we just want local weather here. It tells you the rest ap. I allows you to access current weather conditions on the next 15 days off forecasts. So it returns a whole bunch of things, including UV, which we checked out beforehand. And you can specify your location by any of thes. And here we are. Latitude and longitude is ideally what we need, because that's how we get our location coordinates from our app. It this is quite important, http methods So when you request something over the Internet, it's normally via http, you'll send if all intents and purposes, it's like a key word. You say I want to get something and then the a p I will return something. So this is something that we are going to specify sort of implicitly in our request, but just know there's other types, like get post and various other kinds. Right? So now we have our base girl and this base your l is going to allow our a p I or allow us to ask the world weather online, A P I for something. Now, there are two ways of doing it. First of all, Http, which is an unsecure connection or insecure and https, which is secure. What's the difference? While Http is not encrypted. So anybody who is sort of on your WiFi network unencrypted WiFi network or can intercept your network signals can see what that contains, which includes your log in key. That's not great. And as a side note, IOS has forced developers more or less to head down the GTP s route. So I O s prefers you do lots of secure communication. We can still do, Http, with some modifications. But for our purposes, we're going to use the secure it right. And if your a p i for anything doesn't have a secure it, I would stay away from it. Definitely stay away because they are not security aware. And your locking details can be captured right now. The request parameters are the items that that you are l requires added to the end of it. So parameter que is for location, and this is required obviously. Otherwise, you can't get a weather report. There were some other ones which are optional. Number of days. Four cost and there's a whole bunch of optional items, so that's all fine. So Q parameter can have city name, country, state at Centra. So let's see their latitude and longitude in decimal degrees. And the way this works is we add this little string to the end of our girl. So we're gonna do that shortly. Isn't any to go into detail right now And then it also tells you in the docks about the response that we get, So the response could be an XML, Jason, Jason P or comma separated values. Normally, I believe this comeback as Jason. So let's see if we can change that. I don't think we can. I think it just comes back. Is Jason so this is not great documentations not telling me. So we might have to do some debugging as developers to see what the format is. I happen to know it's gonna be Jason, so that's fine is a whole bunch of other things. But basically this is what the documentation tells you. Everything you need to know, right? But we just need to know this very first parameter for keep scrolling up off that base euro . So let's switch over to our project. Let's create some kind of new file, which is a simple script file, and this is going to contain our whether a P I. You can call this anything you like Kate. So in the weather, a p I we're going to hold a Let's call it a structure. We could make it class. It's totally up to us. But let's do a structure for now se structure. Whether a b i, everyone close braces. So what's the first thing we need in this? A P I Well, first we need a private. Let now why have I typed private here? What's because I'm about to specify a base u r l That's gonna be something in Croce, and I want this to be private because I don't want any anything else to come into this structure and change what this base your l is on by keeping it private. Only the structure itself can access it or see it. That's difference. If you remove that, any other class could actually see this in Europe. So we're going to remove that now. That's in programming called encapsulation were hiding these implementations away. We're encapsulating them in files and folders and things so most of your program doesn't know about most of the rest of it. It only knows what it could put in and what it can get out. That's an important concept for programming in general, right? So what's how Based u R L? Well, it's this bad boy here. Let's copy this. That's pasted in. OK, so that's our very base. You're out now. We actually need a key. And what is this G? Well, let key is equal to something in quotes, and the key will get appended to the end off this girl. So we haven't done that yet. We just want to get the key. And the way we specify any parameter at the end of a you Earl is normally with the and character. Then the name off variable that the A B I's expecting and equals. And then, after equals, anything following equals is the variable itself. So AP eyes of a lot like programming like we're doing in Swift. They expect variables, they expect certain items. So if you go back to your world weather online, did you go to your account. What we need is a key. And here it is. Here is my key. Now, be careful not to use my key because you probably overrun the requests on my account. And besides, it will expire after 60 days. So I'm gonna drop that key into their now, just coming back to what I said before when you use insecure and a sending of these ap eyes with just http, anyone can perform what's called a man in the middle attack, and they can intercept this girl and they can grab your key off of you so they can then use your A p. And if you paid for that, that's no great. Is it with http s You set up a secure tunnel between your APP and World weather online dot com. Now, whenever you request something, you send your key over. It's only world. Whether online that can decrypt that key and understand what it is, nobody else in the middle can actually do that. Short of having a few 100,000 years spare and all of the world's computing power, it's just totally not worth it for a weather Abia. Okay, so coming back to the U R L What else do we need? Well, we need to have thes required parameters. So a number of days forecast, because if you recall in the docks, said you need to have this So this is equal to again a string, and this is gonna be added onto the end of key. So to add things we hit and and the key for that is numb underscore off days, I believe. Now, if this doesn't work, then you can always go and check the dots for the A p I. Because they might change these keywords very occasionally. Doesn't happen that off. We just want today. Then we're gonna have private Let's format equal to let's have and format. So here we're going to specify our format for the results. And we want Jason just to be sure we get the correct thing, right? So when we add all of the's together, we get just our regular you are l. But there's no location yet, so we need another private. And this is gonna be a variable, not let so let's we can't change after the fact variables we can. There's a reason for that because this is Accordance String, which is going to sit empty for now. And when we initialized this structure, so in it, we're actually gonna pass over a latitude as a string and, of course, a longitude as a string a stree owner. Then we're gonna sent the coordinates string as equal to And this because we are a pending it to everything is actually gonna be festival different. So up here, I've got in and got in and got an end, and that implies it's added to something now with our base. You are l I wasn't clear about this. Yes, I'm sorry, we don't want to have. And here we put a question mark to mark when the queries are actually starting. So the browser or the receiver of this AP, I can understand this address, and it also understands this question Mark doesn't have very much to do with the address where it's actually going. So we'll go look for this file at these Web address. Then it will also pass over these parameters. So we're gonna put our coordinates string first, which means we start with a question. As it's the first co ordinate que is equal to Now we need to pass in the latitude and longitude. Now, how do you passing variables inside off a string? Well, you can do it this way. Plus latte. That's perfectly fine. But there's another way. That's, uh, I I think it's better because I like it. It's more clear to me if you put a backslash in, then it takes everything off the back slash as literal, so open. Close our brackets and drop in latitude. And that's how we pass in a variable into a string. Then after that, we're gonna have a color, and we're gonna do the same again for our long itude. So that will give us the correct string. Right? So at this point, once you've initialized this, we have that coordinates string. Then all we have to do is actually form the full u. R l that we need. And to do that, we're going to create a function called get So perhaps whether you are l. And this is going to return a simple string. There's some other options we can return, but we'll do a string for now. And we are going to return the base. You are out. We are against you. Add onto it the coordinates string. On top of that, we need to give it the key. And there's no particular order for the most part that we need to follow here. We just need to have all of these because what happens with AP eyes is it takes in all of the the variables that you've given over it separates them out, and then it begins processing. So it doesn't look for a T fast what it will look for key first, but only after it's processed. Every single variable that there is. And then we're gonna add a format to it, which is this section here case you are l coordinates, key number of days forecast and the foment. So we have it all sorted. So let's save that. Let's go to our view controller dot Swift and inside off here, we're actually gonna go get our weather data. So this is when Alamo fire starts to come into play because we're starting to mess with you , Or else so perhaps somewhere near the bottom, that's creative function called yet whether data. Okay, now the fist thing is that we need a You are l to get data from this is pretty obvious. This is gonna be our weather. A p I in new version of it don't and get full whether you are out now the of course, there's an issue here because are where the a p I requires a location. Just start with So just go back here, open the brackets and we should be able to. Sometimes Exco doesn't also feel for you if you're editing so it's really annoying. You have to start again, whether a p i and then it will also feel and you could press enter. So we have to give it a latitude, which is a string. And this is gonna be the coordinates. Remember, we've already pulled this out dot nat itude. That's gonna be a string. And at the moment we've got a little slight red error. Let's see what that is, and we have our innit describing. So that's a problem is remember, we've run into that before. If we describe a string, we actually get optional output. So the way around that is to explicitly unwrapped this as long as we know coordinates actually exist now. I hope they do. I'm pretty sure they do. So let's do the next one. And it's totally up to you. Of course, how you go about doing this so you can actually have a peer, some kind off if let statement. Or you can have a guard statement to make sure co ordinates exists. In fact, let's do that. So if let's cords is equal to the coordinates and we're open braces and close braces now, everything in here whips belongs to the If let so we can change the CDs here. We don't have to unwrap it anymore. And we should be good to go. We now have a u r l Now we can use Alamo Fire, Alamo Fire, Alamo fire and very strange. Sometimes this doesn't appear pretty sure we've included it at the top here. Yes. Import Alamo Fire jobs. And we want request now. Which request do we actually want? Well, there's this. You are l Is this convertible. Very strange. I'm actually expecting something along the lines of dot yet and then we pass in how you are . L So that's sure. Webs get that space away. We should be all right. Extra argument. So we've got a slight issue here because the old version of Alamo Vier as far as I remember it, you had to specify dot Get. But perhaps you don't actually have to do that now, some kind of backspace that we're just gonna have the plain old u R l. And what we're gonna do is we're gonna just remove that check what the auto field tells us you are. L requests. So let's type that again. Because there's that annoying thing. What doesn't do everything you are. L convertible. Now, I don't know what that actually means, So when we don't know and things seem to have changed the best place to go, it is the actual Get her page off the cocoa part. Did he look amongst this? It will tell you some way down here how you do it. So here you go. You can just specify a request and also tell you about handling the response. So that's pretty handy. That's exactly what we need. We just need that string apparently docked. Request dropping out, u R l And then what happens is it goes often gets this a synchronously, and then it allows you to do something with the response so you can chain. And if you're a JavaScript developer, this look familiar? You can chain on this response, Jason. So what we can actually do is we can just copy this from the docks page, and we can change that right on to sheer. So hear me on the U R l if let Jason etcetera, etcetera. Right, So this requires said we got an issue here. Where is on the docks page and you're gonna run into this is the developer all the time. It says you're fine, just popping a string in, But here it's telling us you can't have a string. You need to have a u R L request convertible. So let's see what a girl request convertible actually looks like. It's open up brackets and I can't see anything in there. So another option is to just come to a new line and go You are l request convertible. Open our brackets. Let's see what it suggests. Well, there's actually nothing. So the final option is to copy this. Go over to our library, hits command if Haston request convertible, and let's just search for this page for all of the items. So here we have some data on it. Breath by default. Okay, so this is a protocol way. Haven't covered those yet in programming, but we will. You don't have to worry about it, but let's look at what it actually involves, right? I'm just looking at this. Okay, so they've gone a little more complicated than I actually want to show you here, right? So let's go back to our project. Oh, I've just seen it. I'm blinded by programming all day long. What we've done is we've in Stan Sheets, the weather, ap I So this let this u R l is actually a type weather FBI. We also need to add our get whether you are out on the end, and then we're going to pass in our girl here and now. Hopefully, there should be no issues. Okay, Perfect. Then we are going Teoh, sort out our Jason. So first we're gonna print a request, a response, the data and the results. And if we can get Jason out off that result, then we're also gonna print that out, right? So get weather data is something that we need to call somewhere in our app. So after location manager after this authorization status fires. And when we actually have a location, perhaps we can put it in there. Let's look around and see where else we could put it. Not the skin type person, if you put it in view, Did load. We might actually have an issue there because location might not be ready yet, right? So I think offend decent place to put it would be somewhere in here. Let's type location manager and see what else we can hook into. So we want something like it's like, update or something. Did update locations if that fires. So that might be our option. Charles, the delegate that a new location data is available. Let's try that. And then let's gets our weather data inside of there. Okay? And then, just above that, what I'm gonna do is print new location. Quiet. Okay, I think we're good to go. So let's hit play. Let's cross our fingers and hope this works out for us, right? So at the moment, our settings don't allow our location. So what we're gonna do is we're going to change that and also a long way we're gonna sort of debug our out. Make sure that this works out for us. So let's go. For there was a privacy, probably location. Well, I burn while using the app, and now we have to see it up here now. Little bother. Let's go back to our app. We like burn, and we are not actually receiving this location. Manager did update locations. That's strange. So let's stop it running. Let's hit play again and see if it actually runs itself this time. Location authorized and we still don't have a location. So we're going to stop that. Clearly, this is not updating, so there might be something else we have to do. But you're not here to look at that. So we're just gonna do a quick fix. Remove. I'll get weather data and we're gonna scroll up to didn't change authorization. Drop down one level and hit command F A. Command V Rather and peace don't get weather data into their. So now that should actually go and fire off our get weather data location authorized. And what's happening right now? Nothing as far as we can tell. So when you can't see anything happening, it's a good idea to start debugging the first way you debug is by sending yourself a couple of Prince. You are l. And then we're going to add on you, Earl. We just created and then we'll rerun the app and we should check. That's that you Earl gets sent or at least gets created for us. Location authorized. And we have no u r l rights. So that's very strange, because not getting here, that means this doesn't actually exist yet. So we've run into a very strange bug for ourselves. So let's get our co ordinates. Let's find where there are references to them right up at the top. Let's find the next one. Get location. Right? So get location. Let's find that is one there. And guess what? We haven't actually called get location anywhere, so that is our issue. And if there is no location, this won't fire. Okay? So after our authorization status is fired, perhaps here we can get our location. I'm going to remove get weather data, and perhaps I will put it inside off. Gets off this after it's actually got the location. Now, of course, we do have options. We could use the location manager if we wished to get our coordinates, but instead will do it this round. So get weather days and I apologize for all the copying and pasting. But as as we develop our skills more between you and I, I want you to see what the actual life of developer is not just the glassy Hey, you just do this and everything is absolutely fine, right? That's right. We have a whole bunch of output. We can look at here so we can shift all these across. I don't like the look of that failure, so we have our u R l this time the u R l is actually getting through. And if we just inspect that, we have a location set on it, which is handy. We have our key. We have our formats. Everything is fine. Failed to register for boring SSL. Right? Something there. We have an optional that's being printed out. So where's that optional coming from? Well, it's probably all of these that were actually printing out response. You are Al Head is so this tells you what's actually being sent over the Internet. So that's coming from all of these items that were by default in our items that we don't actually want to print out the request. We don't want to print out the response, or we might want to to tell us if we're correct. We might want to print out the response. Don't result so we can stop that running and run it again. And we have another error. So we're going to stop that. And we're gonna actually check. First of all, how you are else. We're gonna copy this Euro. We've printed out command. See, we are going to go over to a new browser on which is gonna go to that. Right? So we have everything we need here. And if we select all of this, copy it and we go to Jason lynch dot com. You can see I've been there many times. Paste it in. We can validate the Jason and it tells us Jason is valid and we have our data. So as a developer, you now know your URL is absolutely correct bunts. We have a failure, and that failure is probably printed out from here. Say, just to make sure, let's call this response result plus worse Plus, So we know so clearly we're not getting the results that we want. So how do we go about fixing this? Well, the first step of got a little error here from response result. And we can easily overcome that by just simply printing on another line without converting anything. Okay, So coming back to our main issue, let's hit play and make sure it's the response that is the wrong thing. And I'm hoping it is, cause then we know where to look. And this is gonna be about 20. Of course, it works now, so there is no era. All right, so if we look it this we've actually just printed out all the Jason. It is so annoying, that is. But just so you know, this is gonna be a lot of your life. City fell apart. Things don't work. And then suddenly they just start working. So there we have our response result as a success. This was a red herring, boring SSL log era, whatever. But here we have our Jason, which we printed out here because we've got it. Oh, boy, I was a tough one, right? So there's a lesson for you. If things aren't working, you contest several items, or you can simply restart everything. So I'll just remove all of this prints stuff to make it clear for you. Here we go. Right. I think both you and I deserve a break after this epic lecture and epic failure off getting things to simply work. So I'm gonna go grab a coffee. I'll see you in the next one. 90. M11 12 How to Parse JSON Data with Swift: right. So we're now going to look at how we get that resulting Jason from our Alamo fire Web requests did how we posit so we can actually use it inside off our app. And this is typically termed How to Pass Jason. And it's gonna be more or less the same for every language, just with a few subtle differences. Our Jason that we've got has a very specific format in this isn't the chase on that we've received, but it's an example of it. It has lots of keys and values and occasionally might have an array andan object. And I'll go through what all of the's mean inju course. So it's open up our project and look at how to extract our weather information. Now the very first thing we need to pull out of our data is UV index, and that's pretty much all we need to pull out. So let's create a class variable somewhere at the top of our main view controller. And let's call this far UV index equal to whatever it is. Let's just call it nine for now, or perhaps 10 to take the worst case scenario. It doesn't matter what we say here because we are gonna change this ourselves. So now we're gonna pass this Jason that gets transformer, gets sent back to go up. The first thing we need to do before we passed anything is go and look at the Jase on itself. So if you recall, this is the Jason that we received, and I've put into Jason length so we can read it much easier. And if we look around, we can see stuff like this UV index at 10. Where I am currently or where that Marco was actually. So looking at Jason, the way it starts off is by an object. Curly brace. This object has a key normally called data, but sometimes that's no, actually there. And then that data has an object associated with it. Right. So this simply is telling us you sent Here's your data back. You sent us a request, and here's the request in its entirety. That request is actually stored in an array. Hence the square brackets. You might have more than one request occasionally, and it tells you want your latitude and longitude where at the time you sent it, that's fine. We then have another object that gets sent over the current conditions. This the basic wever that we have at that location, and if we scroll down, we've got everything that we need. Then we also have weather tells us when, uh, sunrise and Sunset side, which is pretty handy and also our UV index. That's probably our current UV index, and I think that's the only place that we actually see it. But to be sure, we can copy UV Index and we can search for it with command F and paste enter. And I think we only have one spot where it's located, so that is the current UV index at that location. So that's what we need to pull out. So that's contained inside of the object called weather, which is contained inside of the object called data. It's now that we have those basic clues. We can go back to our and we can start to pull this out. So let's create a function to D that some way get weather data under here function, get UV index, and this is going to require the Jason response, say Jason String on. The reason we're doing it is to make sure we actually passed something over to it. Because when you're dealing with rest ful AP eyes, variables, let's say you had a Jason class variable in the view controller. It might not actually be populated before you call this and you would get an error, so you might have to introduce optionals, which creates more complexity. The way we're doing it is we're simply gonna pass it over. And where are we gonna pass it? Over? Well, if our Jason is valid inside our get weather data function, so let's gets our where the date not weather data gets UV Index and simply pass over our Jason. Okay, so now we're ready to go with programming this function. So we've got our Jason. We know it exists with printed it out. Let's do our if flat data is equal to And what are we gonna get? Well, we're gonna grab these, Jason. We've passed over on the way we access Jason. Data is with square brackets, and then we specify the key on the very first key we want is data. Because if you recall that is the first and only key in that tree structure, then we're going to get that. And we're going to say, Try and make this as a dictionary because if you think about it, all a dictionary is is a bunch of keys on objects associated with those keys. So let's tell it, it'll the keys or strings, which is true for Jason on all of the objects can be anything. And the way we specify that is by saying any object. So that means they're objects. Could be absolutely anything. So all we've done in that single line is say, if you can change that data tree section into a dictionary, then we are good to go. Let's open and close curly braces and let's keep going. So at these points, first thing you have to do is see what the problem is here. Cannot subscript a value of type string with an index off type string, right, that doesn't make any sense. Swift. So what I'm gonna do is product clean and I'm gonna build it again. Command the or product build. Okay, so we have an issue, right? I know what the issue is that silly. This result dot value, I think, is off one time. So let's see. Value which is on any type. So what I'm gonna do down here, I'm passing in any which isn't great. So I'm actually gonna pass in any then we, of course, have to change. How, uh, item here, Let's just double check this call to cries Express itself. What will fix that one? Okay, that's fine. Now, why has it just required itself? That's an interesting question. Something you should know about. It's because when we make this request, it's asynchronous goes, gets the data, it comes back. It could be on perhaps a different thread in our processing. But I don't think that's true for Alamo fire something you could check out. But it comes back, and when it comes back, it's not self aware off where it is in the world. So we have to say cells to make it a wear off exactly where it is. So any say self was saying, Hey, the class that Alamo fire was in is where you're going to find this get UV index, and we have a slightly different issue down here in our get UV index method, where it's telling us this Jason Data doesn't actually exist effectively. We can't pull out Jason sub scripts from and any object because our program doesn't understand what it is. So we're just simply going to remove there and see if we can try and cast. This is that's what this is called when we say as something we're casting into something as a simple dictionary. Right? So we're gonna test that that costing works by same data, and we're gonna try and pull out that key off data. We're gonna save that and we're going to run it on how sim and hopefully now will get first this printed out. Then we'll get it reprinted immediately after that in Get UV Index. So working with Internet data and other people's data structures, it's kind of finicky because you've really got to decode what they do se whether icon, it's keep scrolling. Sunny, sunny. Yes, we know it's sunny. Okay, so what I'm looking for is just simply the Jason tag. Actually, we can do command f in here. What was the item we have? Was it request? Yes. So we had one request and look, it says there to where my cursor is, So that's request one and request Sue. Let's look for where it said, Jason, there's our success, Jason. Great. So let's grab climate averages. And I'm gonna pace that in to look for the second lot that's printed out. Here it is. It's the second lot that's Prince Doubt is an optional. It's obviously gonna be fairly careful because we're dealing with optionals again. But we should have the UV index that we require if we keep scrolling down. Always simply, search ful UV index And there were two of them. Great. So it's printed out. It's actually getting this data structure for us, which is what we expect it to get. So let's keep debugging this just to make sure we know where we are. I'm gonna remove this line simply by commenting it out. So now we only get this printed out, and now we're actually gonna print out another key. So in theory, we can change these keys together. They want data, and we want the other key off weather. So let's say that and well, I said in theory, on what it's saying here is that you specified this is in any object. So when it goes off to get this data with the data key. It comes back within any object. And Swift doesn't know how to index on any object, cause it could literally be anything. That's what it means. So I can't necessarily do anything there. So we have to go different routes, gonna cut that. And we're gonna say here far Or perhaps let's data puts advance. Let's weather equal to that data and then weather. Now that gives an error because this is still on any object this DT So we need to tell our program to check it if let whether is equal to this as as what? Well, again, this is gonna be a dictionary with a string and on any object, because it could literally be dictionary of anything. So now we got our weather in serie. So let's just like that whips. We actually want to put that This is my fault. We wanna remove all of that, cut it and we actually want if let's up here as and then let's cut this line. Drop it into here. Okay, so now we're checking if we can actually get data out is a dictionary string. Then we're going to try and get the weather around. So There's a lot of checking that we're actually doing here. But that's a good thing when it comes to programming, especially stuff from the Internet, because you never really know what you're gonna get back. I mean, they say what they're going to give you, but you never really, really know and you always have to check. And so I got out data, and if we scroll down, we've got our weather. But notice here. And Jason, we have this square bracket that tells me this is an array, so I could have multiple items inside of this array. Multiple off these objects. I think. As it stands, we probably only have one object if we keep scrolling. Yes, but it's worth. It's worth noting that this does actually sit in an array. That means you have to pull out the first part of our ray. So Index number zero let's go back to our item, and we want to pull out the weather at zero, and let's see if this gives us an era. I suspect it might, but if we're lucky, it might not. There we go. Any object has no subsequent members, so it's the same Mary ran into where we were pulling out, whether, as in any object, and Swift has no idea what we're actually talking about. So what we can do is leave this as it is and we can modify this because we know that when we pull out our don't let me just double check this confusing myself here. And I don't confuse you guys current condition whether there it is weather, whether it could be pulled out as an array. So what we're gonna do here is get rid of this and we are gonna pull this out as on a ray all of dictionary objects, which, of course, can be any object type. So now there's going to recap this for you guys. First we an artist attorneys off so we can see these in one line of isis. A bit tough to see. First, we are getting our data as a dictionary of strings and objects. Then we're going to try first were getting out. Jason has a dictionary. Then we're getting our data T, which is this data key here. Then we're trying to get the weather as an array off dictionaries and strings, and that's because how this returns data. It's not just on object. There is this sneaky little array there. So now we've got an array. So now we can try and pull out the first member off that array, which contains our current weather. So if let and let's call this weather, perhaps our project is equal to our weather at Position North. And then if we can convert this to you, guessed it a dictionary on this getting painful, something's gonna copy this. Any object. Then we can go and do something with that. So it should be no errors here. Yeah, that's fine. Conditional costs. Um, okay, there's a little item there. So what it's saying is you've already cast this as a dictionary strings. There's no point in doing it again. So what we can do? He's actually say, If let's let's go straight to the kill UV index off zero as UV index. So let's just check that weather UV index of this. It's directly underneath weather in that object. So I've said, grab the 1st 1 then go look for UV index. If you can cost this notice addiction and remind. But as a string, I believe let's see whether you've index. Yes, this is a string because it has quote surrounded. Although technically, it's a number that we're going to be using. Then we can set our UV index yourself dot UV index finally is equal to this juvie index inside this little section. Now you have The index is currently set us an interview. So we're gonna cost this as an integer. We know this should actually work, but it's up to you if you actually want to put in if let into here totally up to you. So is gonna ask us to unwrap it. Let's fix it. It forced. Unwraps it. Okay, Now let's give ourselves a message. Print UV index is equal to U V. Necks as strength, right? So let's just remove any other prints that we've got. I think with okay for those get you index. Now, it's just make sure these brackets lineup they don't. I think we have to put one more in somewhere right about here, right? So this is one of the dangers off programming in this sort of defensive way. You get these quite large tree structures sometimes. And of course, there are ways of doing this in a simple manner. But I want you is the learning student to understand what's involved in passing Jason because that's something will do quite often. And by doing it this really long way and not using a plug in or a cocoa part for now you have a much better grasp of it. So when things go wrong, you won't spend nearly as long trying to figure out what actually went wrong. You can go manual and everyone on your team. I respect you for being the guy that knows how to get things done right. So now when we play this, you know, Sim, we should get our UV Index printed back to us. Like I say, it's a bit painful just to get a single number. But that's what is says are UV Index. It has Bean printed, right, so that's sorted. Job done 91. M11 13 Homework Let Me Know! (And Solution): right. We've got a little bit of homework for you guys to do. And I'm ramping up the difficulty of homeworks as we go by giving you fewer and fewer clues and basically forcing you to go out and look up stuff that you might need. And that's gonna make you a better developer in the end, right? So for our homework, currently, our APP has a few problems, but one major problem. Whilst it's getting data from the Internet, how does the use and know that that's what it's doing? A user isn't gonna wait around for more than one or two seconds, three seconds at most for your app to actually do something. And if they do wait around that long without knowing why they're going to give you a very bad review, trust me. I've had them. So we are going to solve these problems that pop up of waiting a long time. What if the weather AP I fails? How do we fix it? And the way we're going to solve it is we're going to give the years or a clue as to what the up is currently doing. So is the up going out to fetch data. Is it processing something? Whatever it is, it doesn't matter. What I want you to do in this specific homework is find a way off telling the user that the out is going out to find items. I e. The weather 80 i data. But don't say it in technical language, just saying just saying, trying to get whether something like that and also perhaps give the user a pictorial feedback off this process happening. So here's a clue. Look for something called an activity indicator or au i activity indicator. I believe that's what it's called. Just go on Google and search for it along with the keyword off IOS, and you might find what you need. So pause the video here. Good luck. Try your own solution. And when you've exhausted all the possible solutions that you have in, come back to this video, start playing it again and I will run through the solution with you, right? I hope you had a good go at that homework. Did you manage it? Did you do it? If you have a working solution, that's great. But let's now look at what my particular solution would be for this problem, right? The first thing I would do is go over to my storyboard and see what I could actually use in my little objects set over on the right hand side to show something. So let's just search for activity. And there we have something that looks very promising. It's a little spinning indicator that animates that something's happening so we can click and drag that into our view. Now let's perhaps drop this somewhere near the bottom corner, and I'm just gonna zoom in a little and I'm gonna control, click and drag and drop this into our container of position in the bottom so it's kind of out the way. But if it starts spinning, it's something that a user is likely to notice. Now these don't animate by default. What you have to do is come over to the property section and let's scroll down and let's look for something very specific, which is here under behavior we wanted to animate when the APP first loads, but also when it's finished getting the data, we're gonna stop the animation and weaken automatically hide it when we actually stop it so we can click that option on as well, and that just saves us from doing a lot of coding later on. It would also be great if we could drop in a label just to tell our user exactly what is going on. So drop that in and actually I'm going to remove that. I'm just gonna copy this label that's at the top of our screen, paste it somewhere and then just click and drag it down to the bottom. Well, we don't want to do that, that's for sure. Let's just get the label this time. There we go, speaking, clicking Track that droplet bottom weekend. Turn its fund down a little because this is not very important. We can align it over to the right hand side, and then also, what are we gonna do? Well, we can change its height in a second, I think. But for now, let's position it so let's control click in, drag it to the view, get a leading space control click and drag it to the activity indicator horizontal spacing so it knows where it is their control. Click and drag to the bottom for vertical spacing. Then we can drop this height a little because it's a bit ridiculous is that stands 22 and perhaps just a touch more 20. I'm trying to align it to the activity indicators somewhat, so it looks very well designed. Even though we've done this on the flies, let's have six. If you zoom in, you can see it looks pretty aligned. We can really, but these up against each other if we want to. Declined. Yes, I think that doesn't look too bad. And then we can double click the label and say loading daughter talk. So that looks pretty good so far. Okay, I think I would actually close this gap up a little. She perhaps let's try five. Get really close. Okay, so we are loading away. Now. We just need to outlet this. So let's open up our assistant editor. Close the site Tabs Control. Click and drag to the top of our view controller. And let's call this something like loading label. Get that stupid era. Let's try it somewhere there. Learning label. Here we go and the same with the activity indicator. So activity indicator and let's connect. That's These are just simple, simple outlets, so it can close everything up and go over to our view controller in order to actually do something with those items. So let's create a function to do that. Perhaps somewhere at the bottom, because it seems to be Where are you? I stuff is stacking up function update you. I okay, right? So let's just create little room in here so you can see what's going on. And then inside our update, you I Well, actually what we want to do is pass over some kind of variable. Just a Boolean true or false to see if we have some kind of data success like so And then if we don't have the data success, then what happens? Well, we're gonna tell the user that we've failed, so we're going to check our status label. Whatever I've called it loading label, it was called DOT text is equal to failed to get data retrying. I think that should do it, conveys the message we need to convey. And then, of course, if we failed to get the data, we should then try again, which is get whether data So don't go one in this little lip and then we can return out of that. Now, if the data is a success, it's gonna skip this bid and go completely to this section. And what we're gonna do is go to our activity indicator and we are going to stop animating it, which remember, also hides it according to how we've set it. And then we are going to set our loading label. Don't text as equal to got you ve data. Okay, so that's pretty simple. Now we need to call update you. I somewhere. So let's go up to probably inside get UV Index. Something like that. I would have thought case we've printed out here, we don't need to, or we can leave that print in for ourselves because then inside of here, we can self dot update you I and saying it is successful, right? And then after that, we can return out of this. Okay, so we've got the UV index. We are all good. So now if we get managed to get through all of these, if let's which we should do and we get the UV index, we should be good to go below that. Let's just put a little comment for ourselves who say they only reached this. If we don't get UV index from incident A B I this is just a note for ourselves. Later when you come back to this and what we can do is say, self dart update you I and say we failed. False. So what that's going to do is come down to the you I it's gonna be false. It's gonna run this and say, Failed to get data retrying. It's gonna try and get the weather data. It's moved dance. I'm just making this a bit shorter, so it does actually fit on screen. Yeah, let's just call it trying to get data and it will come and get weather data and return on. Then, of course, if it manages to get into this bid, it will do it again. But of course, here you gotta be a little bit careful because you can get stuck in somewhat, often infinite loop if it never gets here. Because the data format has changed with uses, doesn't have Internet, it will always go round and round, always trying to get it so on hands. That's pretty useful. No one has to click anything to retry on the other. You have the danger of having an infinite loop. But it's not a very dangerous, infinite loop. Just means that will keep trying with no success. And you'll know if the A P I changes because you'll start getting bad reviews. It's just the way things are people just the way they are, right? So that should be fine. It's gonna update you. I So in theory, that should work. Let's hit play. Let's go over to our Sim So it's loading. We should see a brief message of the bottom add brand. Well, maybe you saw it. Maybe you didn't, but it now says, got UV data, so that is running perfectly fine and what you could actually do. At this point, you could turn your WiFi off, and you can rerun this just to see what happens. So if you hit play whilst it's running, it will overwrite the current app. We'll start the current app deleted and then right install the new version. Okay, so this is still getting our UV index Now there's a little question we have to ask you. Why is that the case? Well, it's double check this. Let's hold it down. Let's remove it completely and then stop. Stop, stop, stop Play. Maybe that seems I had an ex code crash. No, no, we're OK. So it's launching it again. It should ask us for the location allow. And look down here. We've got loading, and it's just loading and loading and loading on. What it's gonna do is just keep going round and round that loop on going into this update. You. Why? Because we have a false and in the update, your I Well, it should actually be loading trying to get data. But you know what's actually happening here is it hasn't actually gotten to this bit off, Jason, That's important to note. Where it has gotten is it's trying to get the weather data. It's trying to get this Alamo fire. It goes off, gets a result, and then it can't actually get Jason. So it never gets to get UV Index, which means, in turn, it never gets to this sanction that's important to know. So we're gonna do is we're gonna copy this line. So let's copy that command. See? And we're going to go to get weather data, uh, inside of here. If we can't get the Jason. Then we will have also and else for failure to connect. We can drop that in so we can then save it. Let's stop it running and that's run it again. So I got that call to that function in two places, both places at which we can get failure. So it's always a good idea to go over your logic, because when you start adding in AP eyes, the logic is gonna change in your notice because we've done that. Now we get the correct logic trying to get later appears. We get our activity indicator. I might separate those out a little because they look a bit nasty. But here we've got continual response. Results of failure on what happens if I turn my wife I on. Well, let's see my wife. I is still connecting. There we go. We've got our UV data, so it keeps trying until it actually gets to where it needs to go. Brilliance that works nicely. It's quite a nice user experience, so we can go to our main story board. And let's just correct that spacing over here. It's always nice to correct these things as you go so It looks all right at first, but it wasn't so. Let's have a 20 spacing there. Okay, that should be fine. We can correct that as we go. No need to test it right now. Right? So that was my version off fixing the homework problem. Now, if you manage to get that solution than very well done, I'm not saying my solution is the best. It's just one solution and fuels works. Then a Why reinvent the wheel? Just keep it as is right. So there's just one final thing before we go, actually, that I want to point to this update. Your eye gets called from inside Alamo Fire. Now, sometimes you have to check that this will call back to the thread that started it, or whatever thread it calls back to on the process. Er, if it calls back to a thread that has nothing to do with our user interface, we're going to get a crash. When we go down, Teoh update you. Why? Because it's trying to access things on the U Wise Red and it's on a different thread. It can't actually do that. So if you want to be really on the safe side with this. What you would do here is called your dispatch que catch cute. You would get the main threat, which is the you. I thread off the processing and you would call a sink on it. So you're telling it I would like you to execute something on this thread and then inside of here, we can copy this data. So that's the introduction to placing things on the correct thread. And of course, if I run that, it should run. And of course not because it needs self, because we're messing around with threads here. We need to explicitly say where these items are. So if we just quick fix X crowed will put in self for everything and we should be good to go, then we can run it. Okay, so that is now running. And that just ensures that are called back to changing the you. I actually runs on the main U I thread, and that is a very, very good practice, one that you need to get into as a developer. Never mind that my Internet's down has been in and out all day, so it's still trying to get data, but anyway, coming back to this. You I thread. This is a very important concept putting the correct programming functions on to the correct threads. You have to make sure if you get a weird craft when you update you, why, it's probably this dispatch queued up main dot a sink. Okay, that was the homework in the solution. I hope you did well in that one. I'll see you in the next lecture. 92. M11 14 Calculating Burn Time: right, guys, we have done a lot in this one. We've gone out to the Internet. We've got our bits and pieces are UV index or we have to do now is linked that UV index with our users skin type and calculate their burn time. And this is pretty easy once you know where to look on the Internet. So open up a browser and let's find out how to calculate it. So I've got this very handy site called him i a dot com and it tells you all about how to avoid sunburn. Looks like quite an old website, really ton back in the day with Web one point. Oh, but it still works, and it tells us how to avoid sunburn. But more importantly, it tells us about our skin types and the maximum time you can spend in the sun per skin type per amount off UV index. So 12 up to about 11. I think you the index, gets to on this planet to give you some examples. A person with skin type of three deviant UV index of two will burn after just 20 minutes off unprotected exposure to the sun and its calculation is performed on 200 minutes per u v I So if we look up here, we've got a skin type of three. So we divide 200 by the UV index and 200 divided by a UV index of 10 is 20 minutes. Okay. And they're also allows you to calculate sun protection factor. So for this app, that could actually be an option for you to pop this into a user knows what SPF to actually applied to themselves. There will be a nice little addition, but we're not going to do that. Which is gonna calculate how long until we burn without our SPF. So here we have pretty much all our values. Now again, it's a good idea to go out and check all these values on other websites and just make sure they're correct. Did you don't people burning? Thanks to your actions, you really don't. So let's make a structure, you know, rap with a new file, a swift file, and let's call this structure something like burn times. I guess that will do so. Structure man time and let's give ourselves a little note. Oh, in minutes. So when we come back to look at this later. We know what it is. So let's call. Let's burn. Type one is going to be of type Double because it's a number. We're going to do a calculation with it and the burn type one years 67. So 67 and then we'll carry on down this route. One type one type two double That was 100. If I remember correctly, let Bt three taboo. You quote too two hundreds and then it goes up by hundreds. That's pretty easy to remember. Let burn type for double 300 that burn type five as a double doing Bo, that is double as 400. Let Ben type six as a double. Me, too. Five 100 right? So let's just double check those. Yes, we are all correct. So now it's pretty easy to calculate this. And actually, in hindsight, I think what we're gonna do is actually make this a class. That's a better idea. We can contain all of our calculations inside off this class. So inside the class we can have a function to calculate. Ben time open. Close our brackets and braces. Now inside of here. We actually need our skin type to be passed over, because that's an important part of this. So this is gonna pass over our skin time. Okay? Now, once we've got our skin type, we can then select one of thes corresponding burn times. So the best way to do this is probably a switch case statement for skin type. So the case where it is a skin type off type one, then we can do something like set the number of minutes that or rather we can can't do the calculation according to this. So what we're actually going to do here is let me just think about this for a second because I've changed this very slightly from the notes of Made. Because I've seen this is actually a better way to do it than what I had before. Let me just think here a candy. I think I've got it. We're going to create a private function so no one else can see it. Just the inside of here, and we're going to do calculate burn time. And what I'm gonna do is I'm gonna put an underscore in front of that just for me, so I know that this is an internal version of it? Yes, I think so. And then we're gonna pass over a skin type. Ben Index is probably not the best name for it, but it's basically going to be a double. And this is simply going to be a value that's passed over from up here. So in this case, where we pass over a type one, we're going Teoh underscore, Calculate burn time, and we're gonna pass over Bt one. Yes, that's great. Okay. And what that's going to do is actually it's gonna calculate the burn time. So we're going to return from here a double and then inside of here. When we get that double back, we are also going to return that. Which means we have to return it up here. A little chain going on there. Just take a minute to look at that. If you, uh, are a little confused, right? Let me just fix this era. Skin type, type one office stepped, being stupid there. It's actually string a skin type. Okay, Good. I'll switch era. But that's fine. We're gonna fix that as we go along. Say we're gonna pass a bt one and it will fall through. Teoh this, We'll get our actual burn time. Okay, so we don't have to worry about this function just yet. Let's finish our switch case. So I'm gonna copy this. I'm gonna paste it and we're gonna have a type two on a BT here if you're a coal. In previous lectures, we actually did this with a four loop. So we looked through all off the array off items. And we did these switch case type things. And we're not doing that this time, partly because lazy and it's almost time to go home. But if you really want to do that, you can, of course, do that for yourself as homework and is good practice. Sophie. So all of us programmers suffer from the laziness book. It's the root awful bad programming. Bt five. What do I have a problem with whips? Ivor closed off my switch case. So let's remove these braces. That's the dreadful thing about blind copy pasting. Things like that can happen Rights when you need that. Because that is equivalent to our switch up here. 84. This is gonna be Bt six with type six. So 12356123456 Great. And then, of course, underneath this final case, we need a default in case this falls through and the D folks is going to be return. And let's say the user has five minutes till they burn. Okay, that's gonna That should return a double. I'm not sure it's gonna give me an interview and be stupid. No, it seems to be right. Right? Let's do this function to actually calculate the band time set. This gets passed over our burn index, which is an actual number, so that's pretty handy. So what we're gonna do here is simply return skin type, burn index. And what do we have to do while we have to divide it by the UV index, which we don't actually have yet. So what we should do is passing the UV index up here. So comma UV index as a double. Okay. And then because we've done that, we have two options. We can then pass UV index into here under these arguments, or weaken g o a simpler way and say far UV index is equal to 10. Let's make sure this he's set is a double. So we're going high just to be pessimistic. But once we get it passed in here, we can set our class level variable. So self dot UV index is equal to the of the index. We pass it, there we go. That's passing it in. And then in here, we can use that UV index to find it by. I'll just put self We don't have to put self here just to make it clear for us. Self doctor UV Index. Andi, before we return it, I think is actually a good idea to just first say, let burn time equal to. And then we're just gonna print that before we return it burn time, plus make a string from burn time, and then we can return at burn time. I'm so there should be no errors that pop up from there. Okay, so you got everything that we need there. Let's go back to our view controller. And in our view controller, we actually want to creative function somewhere. Function calculates Ben time. Okay. And this is gonna call, So let's say let burn time equal to a New Bern time. Don't calculate burn time and they were gonna pass in our skin type, which we should already have, you know, class. And of course, the UV Index. Which again we should have. But we have a problem here. This is an integer, but in Tages are not a problem to simply cast into a double. If you have an interject, you can always knock on wood, cast it into a double, and probably vice versa. Actually, so we have our burn time. That's fine. We can ignore that warning. And once we've got that burn time, we can do something with our You are so mean. Your eyes gonna be label probably which labelled do we want? Well, I'll tell you which they will we want, and I don't think we've linked it yet. Let's go to our main story board, Click this main label, select our outlets, and there's nothing referencing it. So we need to open up our assistant editor and we're gonna control, click and drag the usual jazz over to here, and we're gonna put burn time label as an outfit. We can close that up, go back for a few controller and then inside of calculate burn time. We can set the label in here, but I don't think that's a great idea, because we actually want to set it somewhere where we're taking care of our you I issues. So what I'm gonna do here is simply return the burn time and then change our function. Sure, it returns, it doubled. And then we are going to go to update, do I? Because in here, we know if our data is a success, we can fall through to here, and we can then calculate our items. So let's burn time equal to calculate burn time and then self jobs. And we want our burn time label. Don't text to be equal to a string from the Band Time. Simple is that and we need to reference this has a self doc calculate burn time. Yes, everything sorted. So if we manage to get to update you, I then and only then will we actually look at calculating the burn time and then updating it into our label. Okay, let's run this on our simulator, and hopefully everything should work out neatly right. Here we go. We have on our UV data. That was mighty quick, So I got a type one of pale lights, 6.7 minutes. I'm gonna bone where I am currently set up. Which is, if you recall, you can set your location with custom location in these. Right? So that's all right. Pretty swish. What I would do immediately is I would actually change some stuff. I go to Maine storyboard, and I really crank up this font size to something like, you know, 150. And I'd increase the size of the label itself to maybe even more than that 200. Yeah. There we go. And there's one other thing I would change that the moment that's got 10. But perhaps I would add something like a plus minutes onto that. So now it will actually display minutes next to it. It's probably too bigger front size to do that effectively on our small device. But hey. Huh? You could always creates another label and put it underneath or next to it. So yeah, way, way, way too big. Way too big. And what happens if I rotate it? That's not bad. I actually kind of like that. That tells you what's going on immediately, doesn't it? But of course, if we rotate it back. It looks a bit rubbish. Can't see everything. But I mean, you guys get the idea. You can take it from here and you can mess around with this. You can see if you can make that fit. You can put your own design stamp on it if you like. I mean, that's what I would do is a developer. But I don't waste your time by over doing that. I want you to go out there and actually start Expo Pera menting with this stuff, seeing what doesn't work and actually fixing it yourself. Because that's what you are is a developer. You are just a great big software mechanic. If you hike, you're going to spend a long time always fixing problems. And if you want a couple more problems to fix, well, yet you go. Here's a problem. If I change my skin type to something, it doesn't update my UV. So there's a user interface issue for you to solve. And likewise, if I go out, yeah, and I come back in, it still doesn't change it. Obviously, if I sweat clothes, my app go back into it, it does actually update it. So if I just wrote Take that you can hit command arrows to rotate it. Well, 80 minutes doesn't actually fit in there, but that's fine. You could actually change to an integer to lock off the decimal point because no one's gonna be outside for, you know, 80.0 minutes. Let's be out for 80 minutes. Probably 100 20 and burnt end of it. But, hey, so there's some you why usability issues that I would actually like you guys to solve. I'm not gonna give you a solution for it, because I think you guys can actually handle that from this point. All it takes is a little bit of thinking about the logic that we've set up in our view controller. And, of course, in our burn times class that we've created in this particular session. So go ahead, try that. And good luck with it. I'll see you in the next lecture 93. M11 15 Creating User Notifications Locally: right, so we're almost at the end. This is the final work lecture, if you like, after you've attempted to beautify the app and what we're gonna do here is we're going to send a local notification what's called a user notification to our user to tell them that they are going to burn in x number of minutes. So I us provides a nice, handy framework for us to do this called Jews and notifications, as you might imagine. And it doesn't require server. It's all completely on the device. And you can schedule a notification toe appear after you say, click a button inside of our app that says something like Remind me the user will get a little notification, our buzz sound and one of those little icons that appears on the lock screen. So let's see exactly how we execute that, All right. As you can see, I have made a few changes to my version off the APP. What I've got now is something a little more snazzy. So if I run this, you're going to see that I've actually moved. The activity indicated to over the display of numbers, and once it gets the UV index. It goes away and shows you minutes till you burn. I just think it's a slight upgrade to what I had before, right? So yours obviously won't look like that. It'll look like your own unique style. This is what will look like whilst it's getting items. It's got this activity indicator, which is sitting exactly on top of that number, and that activity indicator, by the way, actually has a dark background. So it completely blocks the number. And then I put this label on top, and this label is actually stacked on top of loading label activity indicator everything. So the lower down it is, the more visible it is, and the more it's, uh, what's the word? I've forgotten the word on where it blocks out that things behind it. Basically. So it sits on top off the stack off items that we have on screen at that point. Okay, right, Let's do what we're here to do now. We're gonna set a little button so we can fire off a notification to write user after the X number of minutes. So let's search for usual button. It's click and drag or alternatively, actually, we can copy this change bottom command, See in command fee, click and drag and it's all the way down here. It's disappeared because it's now hiding behind this activity indicator. So what we have to do is selected in our list of items. Drag it down into this down. Here's some way and it will appear on top. Okay, so there we have it. Let's align this festival. Let's align it to the center. So let's go horizontally and container. Let's click and drag it so that label puts a vertical spacing in so it knows where it sits now and then. Can we align that? Yes, we can To the horizontal everything sits nicely in the middle. It again. Now let's just double click it and change what it says tap to be reminded. There we go. Now we've got that. We can give this a slightly wider view. Let's call this 200. Okay, Excellent. So that's how button sorted. Let's click it and make sure it's got no outlets at the top. Right? Notice. If you copy about, you actually copies the outlets that go with it. We don't want that. We want a click X so it's removed. Then open up our assistant editor Control. Click and drag from the bus and somewhere into the view controller say, perhaps some way down. Yeah, actually, I'm gonna control, Click and drag this to the bottom and create a new little section inside our view controller. So control, click and drag. There it is. Change this to inaction. Reminds Boston clicks simple. How we can close our assistant editor. Go back to our view controller and then inside of here we consent. Our notification of the first thing we have to do is import how we use the notifications class. So we do that right at the top imports user notifications and there it is. Okay, and then down here, we start creating our actual notifications. Now the idea of notifications is based around what's called the user Notifications center, so we have to grab that from our IOS system. Let's center equal to you and user notification center, and we are going to grab the current instance off that noticed this is a Singleton's. There's only one available. That's what Singleton means is it's a single one, and then what are we going to do with this center. Well, let's see what we can do. Center. And first of all, we actually to ask our user for authorization, So request authorization. Now, we could do this at the start when we first load up our app. But that's a bit rubbish, because somebody might actually climax. They can't see why they should do it now. Strangely, you don't need a description for this. Inside your info p list. This just lets you request authorization by default. Uh, he says that they might be something in the in for a peerless that I'm missing that has a default authorization associated with it. But whatever, we don't have to jump through the hoops we needed for location. Okay, so you hit answer. It fills out everything you need. And first of all, it asks you for some options, which is this special type of authorization options. So what do we want? What options is actually an array, and in this array, we can specify what type of alerts we want. So the 1st 1 is a dot alert. So you want a little ping toe happen? We can also specify a badge. This is the little badge that appears on the main screen of your device. Little red number. Next Europe. And if we want to, we can tell it to definitely play a sound. I'm not sure it's actually gonna play that sound. If it is set on silence, I doubt it. I think it will only vibrate, but anyway, that's fine. And we have a completion handler. So once we've got that, it gives us two variables. One is a Boolean. One is an era, and if you hit enter, we can name these and they're normally names granted as a bull and then an era. If one exists right then, once we've got that, we can start doing some stuff with that call back so we can a enable or disable features based on our authorization. So, first of all, let's sit some content for what we're actually going to show our user. So this is use identification, mutable notification, contact content. Rather, that's the type that we're creating. Then it's pretty simple. We can set a content Doc title. Come on, go back eventually title anyway. Now the idea of notifications is based around what's called the User Notifications center, so we have to grab that from our IOS system. Let's center equal to you and user notification center, and we are going to grab the current instance off that noticed this is a Singleton's. There's only one available. That's what Singleton means is it's a single one. And then what are we going to do with this center? Well, let's see what we can do. Center. And first of all, we actually to ask our user for authorization, So request authorization. Now, we could do this at the start when we first load up our out. But that's a bit rubbish, because somebody might actually climax. They can't see why they should do it now. Strangely, you don't need a description for this. Inside your info p list. This just lets you request authorization by default. Uh, he says that there might be something in the in for a peerless that I'm missing. It has a default authorization associated with it, But whatever, we don't have to jump through the hoops we needed for location. Okay, so if you hit answer, it fills out everything you need. And first of all, it asks you for some options, which is this special type of authorization options. So what do we want? What options is actually an array, and in this array, we can specify what type of a let's we want. So the 1st 1 is a dot alert. So you want a little ping toe happen? We can also specify a badge. This is the little badge that appears on the main screen of your device. Little red number, next Europe. And if we want to, we can tell it to definitely play a sound. I'm not sure it's actually gonna play that sound if it is set on silence. I doubt it. I think it will only vibrate, but anyway, that's fine. And we have a completion handler. So once we've got that, it gives us two variables. One is a Boolean. One is an era, and if you hit enter, we can name these and they're normally names granted as a bull and then an era. If one exists right, then, once we've got that, we can start doing some stuff with that call back so we can a enable or disable features based on our authorization. So first of all, let's sit some content for what we're actually going to show our user. So this is use identification, mutable notification, contact content. Rather, that's the type that we're creating. Then it's pretty simple. We can set a content dot title. Come on, go back Eventually. Title. Ah, scenes like air there. We have to make this equals. And then we will have access to our title, which is a simple string. This is shown to the user when the pop up shows, and that's cool this times. Oh, excellent. Then we can give this content a body, so it's kind of like an email darts Body is equal to another piece of string. A piece of string. I'm losing it today. You are beginning to burn. Bear, please gets into the shade or use strong sun block and cover it up. Okay, that's sources. Right now we can set the sound that goes with it. So content dot sound is equal to and we can just simply take a U. N. Notification. What am I looking for? I'm looking for sound. There is. We can use the default version off that. Okay, so we've set up a notification, and what we should probably do up here is check that it was actually granted. So if not granted, then we're simply going to return and not do that now. Obviously, you wouldn't produce an app like this. You would actually put a message box to admonish your user. A message box moved to admonish your user, and you put it somewhere in there and then return and say, Come on, you have to click Grant if you want notifications. But anyway, that's by the by, right? So once we're down here, what we're gonna do is we're gonna create the trigger. So let's trigger. And this is gonna be time based. So you and use notification time into votes. Notification trigger. That's a hell of a word. And then what we're gonna do is initialized this with our time into vote and whether or not it repeats. It's the time interval is set in seconds. We're just gonna test it right now at five seconds just to make sure it works in our up and doesn't repeat. No, it doesn't, because we don't This going off every five seconds. Okay, so we've got Outrigger. Great. Now what are we gonna do? Well, we have to create the actual request itself, So let request is equal to a U. N. Notification request, and this takes on identifying. And the reason it takes an identifier is so later on, if you want to cancel these notifications, we can, because there's identify weaken tag onto. And normally you would store that. Identify a string somewhere in your class. So you have access to it later. For now, we're just gonna call this five seconds notification. Oh, but that's a bad name. That's bad ground burn notification is a much better name because it always gonna be five seconds, is it? It's burned. Notification is what it is. Then it wants the content, and we've already created that, and it wants to trigger, which again we have created. Okay, Now we have to send this off to the system. We've got a post it. So we go to the center and we add a request. What is the request? Well, it's the request we just created. And on completion, we're gonna do absolutely nothing. Just sit back and wait. Right? So what I'm gonna do actually gonna up this time interval to 10 seconds gives us time to test some stuff out, and that's gonna fire when we clicked. Remind button. So it's all the Arrieta gonna hit play. Let's go over to our Sim. Ah, seems like error there. We have to make this equals. And then we will have access to our title, which is a simple string. This is shown to the user when the pop up shows, and that's cool these times. Excellent. Then we can give this content a body. So it's kind of like an email tops body is equal to another piece of string. A piece of string. I'm losing it today. You are beginning to burn bear, and please gets into the shade boat used strong sun block and cover it up. Okay, that's sources. Right now we can set the sound that goes with it. So content dot sound is equal to and we can just simply take a U. N. Notification. What am I looking for? I'm looking for sound. There is. We can use the default version off that. Okay, so we've set up a notification and what we should probably do up here is check that it was actually granted, so if not granted, then we're simply going to return and not do that now. Obviously, you wouldn't produce an app like this. You would actually put a message box to admonish your user. A message box moved to admonish your user, and you put it somewhere in there and then return and say, Come on, you have to click Grant if you want notifications. But anyway, that's by the by, right? So once we're down here, what we're gonna do is we're gonna create the trigger. So let's trigger. And this is gonna be time based. So you and use notification time interval notification trigger. That's a hell of a word. And then what we're gonna do is initialized this with our time into vote and whether or not it repeats the time interval is set in seconds. We're just gonna test it right now at five seconds just to make sure it works in our up. It doesn't repeat. No, it doesn't, because we don't. This going off every five seconds. Okay, so we've got Outrigger. Great. Now what are we gonna do? Well, we have to create the actual request itself. So let request is equal to a U. N. Notification request, and this takes on identifying and the reason it takes an identifier is so later on, if you want to cancel these notifications, we can, because there's identify weaken tag onto. And normally you would store that. Identify a string somewhere in your class. So you have access to it later. For now, we're just gonna call this five seconds notification. Oh, but that's a bad name. That's bad ground burn notification is a much better name because it always gonna be five seconds, is it? It's burned. Notification is what it is. Then it wants the content, and we've already created that. And it wants to trigger, which again we have created. Okay, now we have to send this off to the system. We've got a post it. So we go to the center and we add a request. What is the request? Well, it's the request we just created. And on completion, we're gonna do absolutely nothing. Just sit back and wait. Right? So what I'm gonna do actually gonna up this time interval to 10 seconds gives us time to test some stuff out. And that's gonna fire when we click Remind button. So it's all the y it up. I'm gonna hit play. Let's go over to our SIM and let's click tap to be reminded. It asks us what you want. Notifications. If you click, don't allow, it's gonna go to that return route we created, So it's gonna click allow. I'm going to go out of the app somewhere and wait for it. Here we go, There we go. Well, I burn. And if you click, the notification takes you straight back to the APP, and the notification will appear here. If your device is off, so it's try it tap to be reminded. Switch the device off and that's wait for those precious few seconds. There we go. And of course, we can click this item and it would take us back in. Or if you've got touch, I d enabled. It will ask you to put your fingerprint in. So that's how we sort it out. Now you gotta be careful here because if I click tap to re reminded and tapped to be reminded, well, let's just wait and see what happens. I'll click that twice about a second apart. Number one and nothing. So I don't know this for sure, because I would never code in such a way that would let people press things twice if they shouldn't be pressing things twice. But what I suspect is if you give this same, identify it to your request. IOS will replace or just not bother putting the 2nd 1 in because it says this is the same thing according to you anyway, could be different content, but it's the same notification. Identify it. And so I o s is going to cancel one of those, right? So the last thing we have to do is we know this works without time, Interval. What we need to do is we need the actual time that we're going to burn. So if you recall in update you, I we called let burn time is this What we're gonna do is get burned time. So let's remove. Let here and we're gonna say burn time seconds. We're gonna copy that. We're gonna put it as a class variable up at the top here. So again, I say far burn time, seconds as an integer, and we're gonna make this equal to a default of 60 seconds. That's absolutely fine. Then when we come down to where were we burn time, seconds. So We'll have to have to put self into here, of course, and we'll need to paste this into here. We now have the burn time seconds available to us because it's being set here on, and what we need to do is actually, that's not second visit. That's minutes now that I've come to think about it. So let's think about this. Let's call this minutes. I think that's a safer thing to do After roll. It was a difference of units, inches and centimeters that blew up that shuttle space shuttle in the eighties. I think that's the importance of getting your units right. Ladies and gentlemen, make sure it's right. Burn time in minutes so they will change this to a default of five minutes. Why, no. Okay, then we've got our minutes somewhere so we can calculate seconds from that. And where do you want to calculate it? Well, over here in our trigger. So time interval is going to be burned. Time minutes, times 60. Now, this might give us a slight error because it's going to return a double. But we didn't inter Jessa fix it and X codes fixes to put a time interval over it. No, I don't know what that actually means. So I think what we should do, It's actually say integer Macon interred. You're out of it. So what's the issue now? Oh, I don't know. Well, what does u n into U N time Interval Notification trigger want from us? What do you want from me? Damn it, Let's see its copy. It's to a blank line. It wants a time interval. So I guess that first option time interval is a number of seconds. It's a double strange thing to do anyway, So it's gonna do burn time, minutes time 60 which will give us a double, and we'll get a notification out of that. What's the era now itself? Of course. That's my own stupid fault. So that's that complete line. Let trigger equals etcetera. So it's gonna get us assignment time interval off, burn time in minutes times 60 seconds per minutes, and then we should be sorted. So we got a slight error up here. We need to have self on that. That's fine, Right? So now if we run our app and I'm not gonna make you sit through 60 minutes or however long it takes me to burn to understand that we've set a notification for this, but you you can feel free to test this out. Say you could talk to be reminded. And in six minutes this iPhone simulated, he's going to pop up and remind me that I need to get out of this son. So that is how we do local user notifications without in service or any of that rubbish and how we actually schedule them in the future to pop up in our act. Now it's worth noting they'll actually appear, even if you perhaps not running, because the notification center is an IOS thing and it doesn't belong to Europe. You've already sent the post to it. You sent the request so you your app doesn't need to do anything. Your app will reload when someone clicks the button and show them whatever interface you want to show. Okay, so that's it all sorted, and that is the last piece of code you have to do for Will I burn 94. M11 16 Summary of Will I Burn: That's it. Ladies and gentlemen, we are done with Will I burn. And I broke down a couple of things for you here primarily. We took away these horrendous definitions off rest ful architectural, which you would never actually read through. I never actually read this paragraph from Wikipedia. I just put it there to scare you and me and I broke it down. And I said, All it is is a client who wants to contact a server. It sends a request. The service sends a response. The response has been of data, and that data has a format. It could be anything that format. It just so happens that Jason is used in most formats these days And where are looking at how to pass that inside of this module. Then we looked at how to find a weather a B I. So we searched a couple of the Internet. We want one with UV index in it. We learned about the parameters that we need to connect to it. And then we also looked at the various Jason and the data formats that come out of it. Now. It's all very complicated looking, but in reality it's pretty simple because or we need to do is install a module using cocoa pods that's made by somebody who already had this problem off getting AP eyes from the incident. We don't have to reinvent the wheel if we don't want to. We learned how to install Alamo Final, which was a part that allows us to do all kinds of http stuff, and we used. It's only very basic function. It has way more functions. It's very basic function, which was to get that data from an A p I. And it did this using asynchronous call, so it didn't block our app for being used whilst it was happening. We also learned about you. I threads, and if we come back from an a sink call, we have to make sure that any changes we may come to you, I thread are actually called on the US Red. If it's called on a different thread on the process, er then we're going to have a very big issue. Then, finally, we looked at the local notifications. How can we set them up and schedule them ahead off time so they tell our user when they should get out of the sun and stop burning. So that was the end result of our app. And I don't think that app looks too bad. If you ask me if I was looking for a weather app or a UV burning app on the APP store, that would really catch my eye. Because a lot of developers very try hards. They'll be very full of colors full of fancy things and that those fancy things and colors don't stand out on the APP store listings. It's actually stuff like this monochromatic or with a consistent color theme that make you want sick. Click it so that's something to bear in mind, right? Well done for completing this module has been pretty epic. You've learned a lot and you're turning into quite an advanced developer. Now, once you start understanding this stuff, so as usual here, some fireworks to end it off 95. M12 1 Introduction to Cha Chat A Whatsapp Clone: one of the most important things were going to do when you're creating an APP is actually something that your users never actually see. And that's creating the back end of the APP with server or whatever it is providing the data to your application. So one of the most popular ways of doing this is by using a Google service called Fire Base . And it was a company I believe they bought a few years ago, and they've improved it somewhat, and it's a great option these days. So we're going to start to understand how to use something like fire base by creating a very simple WHATS APP clone. Basically, it's an interconnected chat so you can chat with other users. We're gonna do lots of fancy things with it, but we're not gonna make it too complicated. Just so you get the idea of fire base. No, Obviously whats app is a very popular app. You're probably never gonna exceed its ah customer base, which is, I believe, over a 1,000,000,000 people at this point. But what I'm giving you is the seed to create something similar off your owns. It doesn't have to be what's up it could be, you know, a fishing chat, apple picker hobby. And you could use Fire Base to create a chat app really quickly and easily. Now, stuff like what sound is actually powered by what we call a cloud database. And that's just a fancy new terminology for something that's actually quite old. So we have our wrap, we have the Internet, and we have a database sat somewhere on the Internet. Now when people say cloud technology, all they mean is some database somewhere out there that's storing your data and delivering it to your now, of course, we could use our own server for these purposes is perfectly reasonable. You could program it and pretty much any language you like. PHP would be the classic version of that, but we can actually develop an isil short cut, and we can use Google Fire Base so it's a whole back end as a service, and you can search for back end as a service for your apple, your desktop application or whatever it is by simply typing in the acronym B. A s into Google, and you can see whatever back end as the services are out there and the reason these are popular is because stuff like fire base has basically created the back end in the database for you, and it's created the network reliability that your APP needs. Whereas if you roll your own database, you could have some issues with reliability. Okay, so in this section we're actually going to look at cocoa pods again, installing some STK so we can use firebase in our app. Of course, we'll look at how to use fire Base will also create a user registration system that perfectly integrates with fire base and also sends users stuff like forgotten password emails or change password or confirmation emails. It does all of that automatically. We don't have to think about it. We'll also look at how we receive live updates from fire base of what we can do in the APP is subscribe to when something changes in fire base and we'll get a notification when that thing has changed and we can show it to our users so we don't have to do what's called polling. We don't have to go and ask the server. There's something you it simply tells us when something new turns out and of course there's a whole lot more between all of that. So if you're ready, let's go 96. M12 2 How to Setup Firebase on the Web: The first thing we're gonna look at is how to actually set up fire base for use. It's pretty straightforward. We just need a browser and a Google account to do it. But first of all, I'm just gonna introduce you to something called Pass. Now passed was the same idea rece firebase. And it was a few years ago that it decided to actually wind down. Now, if you are already familiar with fire base and your APP is sort of scaling up quite well, you might want to actually look at pars because I believe they've open source their code that you can run your own version off a pars server. That's just something for you to note. But in the meantime, we're actually gonna look at fire base now. The reason the other reason I bring out past next to fire base is that they're actually quite similar systems. They do the same sort of functions. I'm just making you aware of what's out there and the fact that part is open source and therefore virtually free. Whereas fire bases pay as you go. Okay, let's open up a browser and get fire base set up the very first step is to go to firebase dot google. Don't come now. If you have a Google account already set up, you can simply use the sign and link at the top right or when you click sign in. You can also register a new account if you witch. So let's try that. Let's go ahead to sign in and create or signing with a Google account. I'll sign in with my account and see you in a few seconds, right. Once you've done that, all you have to do is go to console at the top and there is going to take you to the main interface. What's starting into face for fire base. Now all you have to do is you might guess is click at a project. It asks you for a name so we can call this the actual app name that we have. You can select a country or region, and that may have some billing implications for you as well as analytics data. So you might want to research which country or region you want to put this in. Okay, after you've done that just hit create project and this will set up the complete firebase back end for you now, the back end of fire base is actually in no SQL database. So there's it's a database without any structure as well as a whole host of other items and you can see them all on the left hand side. Analytics, You got authentication so you can off. You uses database storage, hosting just tons and tons of items. If you scroll up and down, it also integrates with add mob Quite well, OK, so clearly if we look at the main interface, we have IOS, we have android and we have web app and we are making an IOS app. So all we have to do is add to our Iowa sap. So if we click this, let's see what happens. It asks us for our bundle, I d. So we haven't actually created that yet and we'll come back to creating that and then you have some other items you can put in there. And if you look up at the top, we have register. We have download conflict files. This will give you a conflict file. It will also tell you how to add the firebase sdk to your app and then add initialization code to make sure everything works. So it's pretty handy in the way it helps you step things up. So we're not gonna do that. For now. It's gonna cancel it. For now. We're going to click authentication now. This allows you to set up a sign in or registration method for our users. And if you look up at the top, we have users and signing method Click Sign in method and you'll notice that everything is actually disabled. And this is by default for security reasons. Obviously, you don't want anyone to be able to get into Europe while still developing it, but later on you will. So we're going to enable email password. If we click this little pencil icon on the right hand side, we can click, Enable and Save and will tell us it's enabled. Now we can also allow the uses to register by phone, Google, Facebook and any other accounts that we have. You can also have anonymous, but be careful with that. It's best to leave it on email password. Okay, There's also a ton of other information down here, but most pertinent is one account per email address and you can change that. Ive you wish you can have creation of multiple accounts with the same address. But don't do that. I would advise to have one account per email so users can't do it. Make tons of accounts and spam your server because you will pay for it. Three Fire base and finally, down here, we have managed sign up quota. This prevents denial of service attacks A or not alive service. More like it prevents multiple registrations of accounts from the same i p address. So it only allows 15 per hour totally up to you. If you want to change that completely up to you, I find that the default is fine until you have any issues, right? So your email password set up, we are ready to actually begin creating a rap and adding fire base to it. 97. M12 3 Setting up the App and Installing Firebase with Cocoapods: okay, We're just gonna set up our very simple app. And we are not going to change anything in the APP yet because the focus of this section is to actually install firebase using coca parts and make sure everything's working Fire basis configured it can connect to the Internet before we actually start changing stuff in our app. It's a method I advise you to use pretty often is that if you have a complex thing toe, add your app, try to do it at the start so you remove all of the potential errors that other items can actually have. So you can troubleshoot, for example, firebase if something goes wrong. So let's open up X code and see what we should do. Rights. Let's create a brand new X Code project. Simply click the link. For now, we're just going to have a single view. APP hits. Next. Let's call this something obvious, like chat. Leave your organization and your identifies as they are, as you want them to be hit next. And what would do is just say that on your desktop or somewhere convenient so our main app will be created now that it's done we actually want to copy over our bundle. Identify it. Let's go back to fire base. Let's go to our overview of the app and click Add firebase to your IOS. Now, notice it wants your bundle. Identify air in here. So which is gonna pace that in? So if you change that in the future, you will have to change. It. Here is Well, we're gonna leave our nickname on our APP store. I d. Actually, we could change our nickname to the actual name off. The just This is for your own identification. We don't have an app store, I d yet. So it doesn't matter. Hit, register at. And what it will do is give you an info, peerless. And if you remember, the list stands for property list is just a file contains some text data we can read. So click download Google Service info dot p list and that will go ahead and download and noticed that it tells you to install that inside your application. Right. So let's head over to our application. Go to the chat right click it's. And if we look, we can add files Teoh here, and we can go to our downloads and we can select our Google service in front, and it tells us we've got some weird error. Who knows what that meant? Let's strike in, Shall we? Downloads vehicle. Seven cm Folk doesn't like it rights. You know what we'll do? We will actually creating you. Find a window, will go to downloads, will get up the list and we will drop it in. And when you do that, it will pop up with a little dialogue box, and you just need to click copy items if needed. Hit finish And there we have it. And if you click the P list, it shows you exactly what is inside it. There's our bundle like D. Here's all the Project I DS, and it's just a whole bunch of data allowing us to actually connect to our firebase account , right? So let's go back to the Web app. We've got it there. We can click, continue, and it tells us all the stuff I've told you before is the instructions to install Coco Bonds and create a part file. It's got this link at the top to cocoa parts. You can click that if you wish, and It just takes you to the main cocoa pods website so they can close that. And Dan, now all we need to do is create Arpad file. So let's go back to our project. Let's open up a terminal. Let's type CD, space, desktop. Or rather, we can actually just have c d We can open up a find a window, and what we can do is go to our desktop, get your chat, and we can click and drag it into the terminal and it auto fills it for us. Hit, enter and we're in. And to make sure we're in the right folder, we can click ls to list everything on as long as it matches everything here which it does. We are OK, so we're going to initialize Arpad file. But before we do that, let's close. X code command cute and part in it. Uh huh. I appear not to have part. I've just updated Mac os X. So I was gonna go fix that. See you in a second. Right now that I've done that, we can run our part in it and we can watch all of the files created, which amounts to a whole file. So let's right. Click this. Let's open it with Let's go to other and let's look for X code. It was a good idea to open these with X code rather than a plain text editor. Okay, so, hards for chitchat. What do we need in here? Well, festival. We need the part cold. And what is it called? Well, if you back 12 browser, it's called this firebase core. We can actually just copy that and just drop it in here, OK? But that's not all we need on a new line. We need a different part, which is firebase slash database, and then we can save that. Let's make sure our use frameworks is on. Yes, we are sorted. OK, so just double check what it says. Here we are in it. We can actually install stuff so we can go back. We can save this and we can quit it. Then we can run our part in store command and that will go ahead and fetch our fire base items. Forints. So let's just double check. Oh, I can see this is gonna be a while, so I'll see you in a couple of seconds. all right. Once that's done, everything should be installed in That probably does take quite a while, depending on your system. So let's open up our XY workspace file. Now, remember, don't open X code project, but the workspace file From now on, if you open up that occurred project you can actually mess up a few things to do with cocoa pods. So obviously you don't want to go through that right now. We have our chance. We have our pods. Let's open up our main project. Let's let everything index so up at the top bar here, we can see it's doing what it needs to do. And our next step is to initialize our firebase coca pot. So if we go back to our browser and we hit continue, we get up to our ad initialization code and it gives you swift or objective C. So this tells us we need to connect firebase when app starts up and the innit code. Sh We should put in the app delegate class. So all we have to do is import firebase and then put this line in them. So let's actually look at that app delegate dot Swift So this is the file with a bit of code, if you like. That gets loaded when our app first gets loaded up, so you'll notice that inside of this class called APP delegate, we have a few functions, like the application did. Finish launching with options, and the application will resign active. And if you read these comments here, they tell you what these things all mean. Application did enter backgrounds. These are kind of hooks onto which or into which you can place your own code in order to, for example, save some data. If your app is going into the background and then bring the data back. If Europe is coming back into the foreground, so will enter. Foreground is an example, or it did become active. But it's also the place where we can initialize stuff before the GE wife, if you like off our app is actually loaded. And, of course, the first thing we actually want to initialize here is to import firebase and you'll notice we have all the items we need in there. Let's import fire base. Let's go back to here and that's exactly what we need. And then inside that did finish launching with options. We need firebase app dot configure. So here it is before return. True. We're going to put it in there, So let's have firebase app. Don't configure, You know, just there are actually two configures that you can have. Let me just take that against it Pops up for us where you can actually put your fire base options in, or you can give the configuration name and add the options to, but when you just have plain configure, it knows to go and look for this Google Service info dot p list so we don't have to add any other options. So obviously there are ways are the ways you could do it. So if that works, we're going to save it. We're going to go to product and build, and we're just gonna double check. That'll builds on our fire base. Cocoa part is actually working, and we've got a bill failed. Who knows why the first thing to check is to actually clean it. And once we've cleaned it, then we can build it again. And what I'm gonna do is actually run this on the simulator. The iPhone s e. So hit play and let's load it up Now it's building at this point or compiling if you like, and hopefully that is gonna compile successfully. If it doesn't, well, we can fix it because we are developers after all, are we not build? Succeeded. There you go. So if you ever run into problems, just always clean and then rebuild your app. So when this actually loads on the simulator, we're gonna find out if this firebase app is actually configured correctly and will know that because we won't have any errors showing. And there we have it. We have our nice blank happened. If we go over to our console and just move this around a touch we can actually fully expanded. But I like to have it half up there. We've got a whole bunch of messages that tells us failed, registered for something that's nothing to do with fire base. But if you look up here, we have some messages to do with Firebase analytics enabled on a whole bunch of other fire base items. So let's keep going. It's quite hard to act to separate these out. I wish they would put a line break in them, but they don't Never mind anyway, as long as you've got a few firebase successful messages, then fire base is actually ready to be used inside of your app. And as long as you don't have any major errors around that, you are good to go so we can stop that running on our simulator and our five base is ready to use. 98. M12 4 Firebase Registration and Login Component Design for Logging In: Now we're gonna look at actually firing up our fire base code. So what we're gonna do is design the log in screen and we're gonna code the background all in one lecture. Now, this is a pretty long lesson, but you should be used to this by now. I like to slowly introduce you to longer and longer lessons to give you a feel of what being a coder is like because you code the best code when you're actually in flow and not jumping from five minutes or five minutes, sections an hour or two and you can produce some really good stuff, right? Not have said that. Let's go on to how we handle stuff like registration and log in. Well, the first way we can handle it is like this. We can load our app. We can tell our user to register, and then they can use the M. But there's a problem with this design in that if your user just downloads the app, check it out. They don't necessarily want to give you the details. They don't want to register it because they know invested yet, so that could actually be quite a bad design case depending entirely on watch your app is about You may need to register them, as you may need to register them in a chatting up, obviously. So the other alternative is to load the APP, allows the user to use it and then ask them to register when they try to perform a certain function. Right. So we're gonna do one of these two ways in in these lectures. And it's not important which way we do it now because we're just trying to understand how this log in and registration works. But this is for you to think about a little later. Ron, when you're making your own APS, how do you handle this register use or use register sort of scenario. Okay, so let's open up X code and start designing our log in screen, Right? Let's open up our main story board and we're gonna drop in a log in few Controller into here so we can just get rid of these sidebars or just one of them, and we can drop in another view control. And remember, we can select these using the object filter, and if you get the wrong items, it's probably because these icons at the top are incorrect. So select the object item and you will have you controller available to you. Right? So click and drag that in anywhere is fine, Right? We have a view controller for log in. So let's give this view controller and I d have it selected and over in the attributes. Inspector, we can give this a title if we wish. And also in the class. Inspector, we can give this a storyboard. I ds obviously we need this. Let's call this perhaps log in view controlling hit enter and it will be applied. So this is the string we're going to use in order to find which view controller to open up if we want to open it up programmatically right, Let's give this view a background so just click the view itself. So on the left, you can actually selected in the view controller Let's change its attributes on Let's change the background color By clicking the background icon to a custom colors, you can select these three sliders go to rgb even also do hex color. I'm gonna do hex color and I'm gonna give this a 96 d B 37. This is just a color of selected. Previously, if you had entered, it'll plight, so it gives us a nice green color. And this is actually come out looking a bit different on the APP itself, because when you have it selected, it kind of makes it darker. And if you d selected, that should be the color. It now comes out right now we're going to show this view controller on our app, so we need a way to navigate to it. And that means somewhere in our main view controller, we actually need a knave controller. So let's select this main view control and we know it's the 1st 1 because we have this arrow that tells us that, and what we do is go to editor and bedding a navigation controller. Now we can just ship this across, and now we have enough controller. So if we go from this controller over to this one, we have a navigation controller in the background that's doing the lifting for us in terms off navigation. Right now we can come back to our itself. We can scroll across and go back to our registration view controller So obviously the first thing we need is some kind of input text box. So just type text and text field is creditable, so we'll drag one of those in. We will give this perhaps a width and feel free to create your own version of this app. You don't necessarily have to exactly copy what I'm doing. So makes 140. Make the height 44. And at those constraints, and then I think I will sent to this horizontally in the container connection. Make this a little wider, I think give you use of something nice and big to tap on. It's a 200 and the wits make us 54. Hasn't changed the width yet, but it will. And then we are going to align miss vertically in the container. Okay. I think it's actually a bit too high, that is. So let's drop it back down to 40. Okay, I'm just gonna shift this up a bit. Let's see if I can remember if it's minus 100. Yes, it is. Okay, so we got our text field, and this is gonna hold the email address, but we need our user to know that so we can simply select the text field. Go over to the attributes, inspector. Let's scroll down and see if we can put some kind of placeholder. There we have it. Placeholder text. So let's have email address popped into their. Okay, Now we need another box for passwords. So let's hit command seen on that box Command V and paste it perfect. We can change our placeholder to password, and we consent to these to each other. So hold control, click and drag and let's center. Let's see, we could do leading edge that's fine and weaken. Center it one to another with vertical spacing, and that should be all centered. So the centering of these elements is actually around this email address box. If we move the email address box down, then you can clearly see that everything else is going to drop down as well. Email address and password was gonna slate that email. Remove those three dots. I don't think it looks that great. Okay, so we've got that sorted now with this text entry box for the email address, let's scroll down in our properties and let's go to content time. It's look at see if we have email address, and by doing that, that should give us a keyboard that corresponds to an email address so it gives the at key or puts the AKI within easy reach of the user. Then without Pa Sweat Box. We don't actually want people to see what's going on, so our content type might be a password. Now that should actually put asterisks over the password so people can easily see it when it's typed in your email address password. You'll also notice, with both of these, capitalisation is turned off, which you might expect for an email or password. Okay, now with the password. Oh, there's one more thing. Actually, you have to select secure text entry so that will put the asterisks over it, or the dots or whatever version IOS is using writes. We got out two boxes. Now we need a button, obviously, to log in, so let's go find one, but in click and drag it over. Let's change that button style of it because we need it to match our rep. I'm going to select a white color for it, and I'm gonna turn up that front. You can put a custom front, if you wish. Just gonna increase this size double click it's and let's call this log in. Then let's give that button a width and height. Now the height should technically be 44 as a minimum, because that's what I o us or Apple would prefer things to be. So I do make it 44. It's a good idea. Control. Click and drag put some vertical spacing and we can also send to that horizontally. So everything slots in nicely. We got our lock in button. We can copy that. We can paste it. We can double click it, we can hit register. And we can also copy that, paste it or just paste again. And this is for forgot password. Sorry for this. Very that was quite funny. Forgot Password and enter and the forgot password one. I'm gonna make it a little bit smaller in the front department. And perhaps lower case might be okay. So we have our three buttons forgot password. What we can do is align them to each other. So let's have thes aligned vertically. Let's drop it into middle and then let's have forgot password. Somewhere down here in case. Yeah, we want to make it distinct and separate so we can control click and vertical spacing and his usual horizontally. So it's really up to you how you space these things out. Let's change that with to 1 50 fitting No, I forgot my sword. 1 90 forgot password. Perfect. Okay, so that's pretty much our log in screen sorted. Now we can actually put a label on the top, So let's do that to give our half a bit of feel on by feel I need give it a sort of logo. You can drop in an image view here if you wish. That's totally up to you. Gonna Linus centrally gonna change the color toe white and I'm going to select a custom fund. Let's see what we've got here. What's this G's of pro? No Damascus And we want Well, ideally, I think I want something that's I tellings old style book italics. It's not too bad we can increase that size. Of course. See what 60 looks like. Yeah, that looks quite nice. Sure checked. Of course it's up to you. Whatever you want to use case that we can send to that as usual horizontally, and I'll send to that vertical spacing, too. So we have our show, Chet. Perhaps we should give us a width to make sure it doesn't actually get cut off at any point . So to 50 I think we'll do it. Okay, that's a nice, neat looking, simple log in screen. It's obvious what it does now. We need a view controller class for this long in screen, so let's click. Add new file, Go to cocoa Touch class and search for you. I view controller, and it should get filled out for you and what we're gonna cold lace. We can call this actually orthe view controller for short for authentication because logging or registration, it does both of those. We don't want to write both of those cause it's a lot to write, so let's create that as off view controller. Now, let's go back to our main story board. That's select our view controller. And let's apply that in the class there. We have off view controller, and what I'm gonna do, actually is I'm gonna change this log in view Controller to Ortho view controller, not border off view controller. There we go. So just a slight modification there to make everything line up correctly, right? So we've got that. Let's start out letting let's open up our assistant editor, top right icon and that stop dragging stuff over. It's a festival we have our email address box on this is known as a U I text field, so we should call this email text field So we know what kind of thing it is saying without pastorate. Pass read, text field. And then we want our logging and register buttons. So let's drop these down somewhere here. Whoops. That's a stink. Commands that control click and drag. Let's have in action log in clicks. Let's have the same for register as a action register, clinked and finally forgot password collect Forgot past collectible to as an action and connect right so we have all the connections we need for all of our text items. So whatever happens on screen, we can actually do something with our log in register slash forgot password. So let's close. Assistant editor on DWI should be good to go. The way we test that is by going to product failed. And if everything links up nicely, we are more than 50% off the way there. Accident. Now, I did say I was gonna do some code in this particular lecture, but I think we'll leave it at design and will actually move on to the code in the next lecture. 99. M12 5 Firebase Registration and Login Component Code for Logging In: Now that we've created our fire base registration and logging screen, we can actually get to attacking the code for logging in. Now, this is gonna be your a useful code if you use firebase in the future, because obviously you're gonna have a template that you can just more or less copy and paste into any off your new APS wherever you need it. So let's go ahead and see how locking in it's done. Now, as we haven't actually build a registration system yet, that's coming up. What we actually need to do is head over to our five days console, click authentication for our APP church chat, and we need to add a user in here. So just click. Add user at any old email like test at test come and any old password. I'll just use the classic password Andi Click Add User. Now it's worth noting you contact. Change the password in this interface without clicking Reset password, and it will send a reset email password to that particular email address. So if you want to do that, make sure you actually own this address. But anyway, we how we now have a temporary user or a permanent user set up for our. So if we go back to ex Croat and let me just put these sidebars back on, let's head over to our orthe view controller dot Swift and it's inside of here, Obviously that we're gonna try and lock in now. The very first thing we need when we lock in is actually to have the correct imports for our fire base and one of those imports look like, Well, these imports are actually fire base slash off. And if you recall, if we just open up finder and we open up Arpad file And of course, to do that, we need to close X code, just to be sure. So open up, Arpad file with X code itself. If you recall in our pot file we hadn't actually included toothy orthe card. We have core and database. So what we need to do is have a pod single quote, firebase fresh off. But all of these things are available as documentation in the firebase documentation. It will tell you what to do. So now we can say that we can quit X code. We can open up a terminal. We can see t eat into our project as we have before it enter and take part in Stoke. And that should go off and get our fire base or for us. So there we go. It's installing our firebase off. Okay? So we can cleanse terminal and we can open up our workspace again. So it's very easy using cocoa parts to actually install things as we need them, right in our Ortho view Controller Don't Swift. Let's have a class level variable somewhere near the top and we're gonna call this far locking in. And this is gonna be a boolean. So we're gonna say true to start with. Okay, say that. And this is going to keep track of whether we're logging in or not. We'll see exactly how it keeps track of that in a bit. Okay, Now we need a firebase log in function somewhere. So let's come down to the bottom. We can actually remove. This did receive. We can actually move the navigation bits just to make everything a bit Tidier. Why don't you just type our own function? This function is going to be lock in or we could sleeve it as log in actually open close brackets open and close our curly braces. Right. So the first thing we're gonna do when we log in is we're gonna make sure there is actually an email address that's being entered, and we're gonna make sure there's a password that's been entered That's greater than X number of characters. So we can have if and we can have it. Snow label its text field email, text field don't text. And this is optional. So question mark don't and we want the number off. Characters don't count. This returns the number of characters. And if this is, let's say less than five, then open plays are braces. We can do something about it. Like war now, user. Okay, What have we got a problem here with? Oh, I think counts. Yes. We need to put it like that. Okay, because we're unwrapping it, but we know that this actually exists on the text in it actually should exist. Well, we'll find out if it crashes on. Okay, so we've got all of that now, if this is less than five, we want tell the user that that what they're doing is wrong. So what? We can actually do is change the background color off the email text field. So dot background color is equal to you. Eye color don't or we can actually set a u I color that we can choose one of these items, perhaps a red green blue. That's the one without CG floods. And we can also give it an Alfa. So what we want to do is make this kind off a red color so we'll have a high number for Red Weaken tapped green. We can have a lower number. Such a 0.1. I'm not sure that's gonna look like 0.1, and we can make this almost see through 0.2. So it's gonna be pinky red. You can adjust this to taste if you like. Then if this is the case, we're actually going to return. So it's gonna exit out of this whole function. If this isn't correct, if it's too short case we've checked that now, if they change it in the future, we actually have to change that color back. So what I'm gonna put here is an else, and I'm just gonna copy this background color and I'm gonna reset it back to its you eye color don't white, and that should put it back to where it actually needs to be Right. So we fall through here now we need to check the password fields. So if the password text field don't tanks and again we're going to count the characters for this one. And if this is less than five, we are going to do something about it. So again, let's unwrap that. And what are we gonna do? What we'll do something similar to everything else. So we can actually perhaps we have ducked count dot Yadi yada. I've put my bracket in the wrong place. Excuse me? David gave. It's less than five, right? So what are we going to do? Well, we're going to just copy this email text line where we change it to read on. We're going to change it to the past word text field. So it'll change that to read. Instead, let's remove that exclamation and then we'll haven't else for that case is, Well, password, text, field, background color. Is that so? That should sort out everything we need to do in that sense, right? Assuming we can get through there, we can actually invoke the sign in function. So let's grab the let email is equal to the email text field dot text, and that's an optional, but we can actually on wrap it. Let's have our let password equal to password text fields dot text unwrapped. Now we can begin the fire base authorization. So what? We need to import festival well up the talk. It's import on just type fire base, and it should be obvious we need firebase off for this. Now let's scroll back down and let's start looking in fourth dot Orth and Auth comes from that fire base off. So this is the class, and this is going to be the instance of it and then dot and just type sign, and it gives you a whole bunch of options to sign in, sign out, etcetera. So because they're related to the credentials for authorization now, if you've what if you want to do Google or Thor Facebook off, there are slightly different steps that you'll have to go to the documentation to understand that. But in our case, we just want sign in with email because that's what we have. So first of all our email is this email that we've created. The pastorate is the past red we've grabbed from the text field, and on completion we can obviously do something with that. So on completion, it returns back on optional user an optional era and then executes some code, so weaken. Call this user simple user, and the era is just a nera. Now in the code, we can check these items to see if our Sinan Waas successful. So if it wasn't, then we are going to have an error returned. So if let error is equal to era and all that's doing is checking. If something exists in this optional era and Teoh make it less confusing, we can actually call it E R R. What can we do? Well, for now, we'll just print it out what's printed out to ourselves, something along the lines off era. And then we can give ourselves an error dot localized description. Andi will make it more obvious for us Aris signing in. So there's an error. We as developers know it, and obviously, if you're here, you don't want to try anything else that you're just going to return. Okay? excellent. Otherwise, if it works, we can simply print signed whips. No at signed signed in. And we can add our user. Now, this is optional. So question dot and we can have a display name and email display name. I'm not sure what that will come out as it might actually come out as the email. If you haven't actually set it, we'll just put email. So this will show us we've actually returned to the correct item. So email and let's just correct this. So it needs to unwrap the whole thing. Now, there's potential for an area here, so I would be careful with this, but for now, here we go. But for now, we'll just leave that as it is. And if we crash well, I'm pretty sure we all know it's something to do with this. OK, so that's our log in screen, right? But we haven't actually got a way to show it yet. So inside of our main view controllers, this is the one that gets loaded up off you controlling dot's thrift. When we first start up, we can actually import fire base on. We can also import firebase off. You'll notice it's got a strike through on it. And that's because it's probably being imported as part off this fire base. You can import bit by bit or all of them. But what we're gonna do is just import firebase off, keep our app nice and lean in this part. Now, you know, uh, view did load. We can check if a user is already signed in, cause obviously we don't want to show the log in screen if they're not signed in. So let's have a function to check current use of something like that open and close our braces Now inside of here. We're going to say if our orthe dot orthe don't and we can ask for the current user If this is equal to Neil, let's see if that works because five base has changed a bit. Then we can do something about it. And what are we going to do? Well, we're gonna present our user with that lock in view. Controller, Let view controller equal to now. How do we get the view controller from our main story board? If you recall it is this one and it has this I d. Well, it's actually pretty easy for Go back to have you control it Let me see equal to self dots And we can actually pull up the storyboard we're currently sitting on And once we've got that, we can try to inst And she ate a view controller with an identify And if you're call that is exactly what we have So this is a string and this waas orthe have you controller and it's always a good idea to double check that because that's ah place which your app could actually crash if you get it wrong. Okay, so we got our lovely view controller. All we now need to do is self dot navigation controller, and that navigation controller is the one that we embedded in our So this section here. So we are currently working in this view controllers class and when we say self dot now controller were actually pulling up this now controller and we're putting out this view controller on top of it as a stack. So this is keeping track off everything that we're doing. If you control itself dot now controller and that's quite that's a question mark because it is optional. Don't and we're going to present a few controller. So it's going to be this option here because you have to give it one save you control it to present. That's fee C Animated. Yes, please. And on completion, we don't actually want to do anything. So we can just have Neil set for that. So you can say that and then we can have check current user fired up, in our view, did load So we can say that. And that's going to overlay our log in view controller. Right? Excellent. Let's trying that out on our iPhone S e right. This is a great way of actually programming this. It's responsive. It checks if we're logged in. And Oh, I've made a silly mistake that I know what it is. It is. The few controller is optional. So what we can do here is say, if let the view controller is this, then we can load up that now. Controller. Sir, let me just confirm that for you to remove these off to the sites, you can see the single lines, right? So what I've done here say if we can get a view controller out of this, then try to load it right. So put those sides back and let's load it into our iPhone. Yes, I like. I was saying, This is a great design tool for you to check something and then fire something up without making the user press any buttons, like log in or already logged in or something. So there we have our brilliant navigation controller showing our screen, and you'll notice there is no back or anything at in here. Which is great because you don't the user to exit out of here unless they lock in or register. Now notice. If I click lock in. Nothing happens. If I go to email address and click our click log in. Nothing happens, and more annoyingly, when I click the background. This keyboard doesn't go away, even if I click return. But the password functions great current log in. Still return. Nothing happening, right? So let's come back to here and let's stop that running. Let's fix that little keyboard issue where we can't press outside of it and dismiss the keyboard. First of all, now, the way that this works is first of all, we have to create what's called a tap gesture. Recognize er, so our app can recognize when we tap somewhere on the screen. That isn't one of those views. So up in the top, off our actually we want to do this obviously in or few controller. So up at the top, we are going to say let tip and this tap is going to be off type you. I tap gesture. Recognize er is equal to a new U I tap. Just you recognize her and this is going to you have a target and, of course, an action. So what's the target? Well, itself self is the current view controller that we're in and the action itself. What you doing? That self selector Now the action is the method or the thing that we're actually going to fire off. So the way we can specify this is by typing hash selector on expert might correct me slightly on this because I believe this has changed opening close our braces and then we specify this current view controller. So Ortho view controller darts dismiss keyboard, and we haven't created dismiss keyboard yet, But we will, as a function okay, said I knew there'd be a slight Erin, this is click it at. No dismiss keyboard. It's coming. Don't worry. Okay? Now what I'm gonna do, actually is let me think about this. I'm gonna cut this and I'm gonna paste this into view. Did load as the first thing that we do because there's one more bit of code we have to add to it. And that is to add this gesture to our current view, save you and you could type self doubt, view or just view on this view is the background view that we can see in our main storyboard. So this item So once you got that, we can save you docks, add gesture, recognize er, and we can feed it that just to recognize a chap that we just created. Now let's create this dismiss keyboard function, funk, dismiss he board, and then it's really simple to do. We save you dot and editing and we're gonna force it. Trigg. So we're saying end all of the editing, which is going to drop the keyboard for us. I'm going to say that I'm gonna run it in the sim. And now when we tap outside off the same, we should be all sorted and the keyboard should actually disappear for us eventually. My build has failed. I knew I knew it quickly. Little icon. Argument off selector refers to instance Method dismiss keyboard that is not exposed to objective C. I'm gonna click fix, but I'm not sure that's gonna do what we need. Okay, So what I'm doing here is I'm actually using objective C terminology to fire this up, so don't worry about that. For now, it's something you'll pretty rarely have to do apart from when you have a more complex app . But as we get more mature with Swift, you won't have to worry about that. Right. So I'm gonna click my email address, type something tap somewhere outside of it, and the keyboard goes away. Same if password step outside, it goes away. Does it work if we click a button? No, it doesn't. So in that case, the button catches the tap. But not to the view. Click the view or the label or anything else. And the keyboard. It goes away. Okay, so we've sorted out that little problem there. Now we have to do is actually log in when we click log in clicks. So all we gotta do is type looking simple enough. Now let's hit play and we're gonna use our test log in email address, address, rather settle loaded up. Let's go with test at tests dot com. Let's type in our password and click log in and nothing happens. Nothing gets dismissed. That's fine. We're still testing, but you'll notice over in here. We get that print back that says were signed in as test and that comes from this line. Now if we stop that running and we run it again and then we go back to our SIM. In theory, our app should keep that log in token from Fire Base, and it will say that we are already actually signed in, and it's not therefore going to pop up that screen. So there you go. It's not actually doing anything to lock us in. That's fine. Our logic in our code in view. Controller dot swift on check Current user is actually working, so it comes to this line. We do have a current user, so it keeps us logged out or logged in rather and doesn't actually show us there or few controller, which is perfect. It's just what we want now. I'm not sure about firebase, but I believe there is a time out or f useful life off the log in tokens off. I don't know what it is, but let's that let's just call it seven days for argument's sake. After seven days, your app might log your user out and they'll have to log in again. Or the tokens could be infinite time, and I'm not actually sure if you can change that, but that's something for you to be aware off, right? So whenever Gap closes, the user doesn't get kicked out in terms of registration or log in or just lock it right now whilst we're testing, what we would actually like to do is have a test function that logs us out each time. So function, look out. And the purpose of having this is that whilst we're building, log in and registration, we don't want to have to revoke the log in token, over in our firebase dashboard, we just want it automatically to happen in the app so we can keep testing it. Once we got past this part, then we can remove the lockout function, so I would normally call this look out test to sort of remind me to remove this later on. Okay, So first of all, we are going to sign out off our so mistress like, different way of doing this. Let f or fire based off, equal to off. So I want you to see you can actually have this as its own separate objects, if that's the way you want a code totally up to you. Now, what we're gonna try and do is sign out. But when you sign out, there could be an error because you may not know it might not be signed in. So we're gonna catch this arrow, gonna use what's called a do catch statements. We're gonna do something, and then we're going to catch any errors that come out, and these are gonna be called whatever you want to call them. So let sign out era, and this is a type off Ennis era. Okay, so all it's doing is it's trying what's gonna be in here? And if there's an era, it's gonna come down to here and give us an era, and we're just grabbing the era and were saying this is going to be a type off Ennis era. Okay, It's just standard sort of syntax for this bit. So inside. Do we have to tell our system that they might be an error? So we're going to say, We want you to try something, Trump me, Get our fire base off now I believe Firebase off. Is that optional? No, it's not. Don't sign out and look at that. There's a throws, keyword there and throws goes hand in hand with trying and what it does. It tries to do this. And if it throws an era, then this section catches that era so you can see what they've done with the language naming their You throw something, you catch it right? So when that throws an error, this bit is going to catch that particular error. So it would be handy if we could print that out to ourselves. A rat signing out. And then let's give ourselves that sign out era. Right? So that should print out a dark. Do we have a string of localized description? There we go. That would give us that now. Obviously, we want to log out before we check the user, so log out test. Save that and let's run it. Let's go over to our app. And now it should lock us out so it brings up the registration screen each time. Just whilst we're working on it. Here we go. So we're logged out. Rights were locked out. Let's stop that running. Let's hit play. Let's go back to our app. So it currently locked out. Let's see if ever in our consul we have any errors related to this era signing out so you can actually filter this console, go down to the filter box right at the bottom and tight era. And no, we don't have any errors. Okay, that's fine. Say stop now. There's no errors, but we weren't loved in, so you might have been expecting this catch to fire on that era. But it didn't actually do that because, well, who knows? It's just the way Google of coaches it. I know previously they would have been an error, but Google have still coded this defensively to throw an error. And you might wonder, Why is that? Well, it's because this is going out to the Internet, right or actually what this is doing? I believe is just deleting a token on the device. So I don't really know why you need to check for an error here. I mean, if you know better than please do right in the lecture, ask a question and tell me what's going on. But I expect five days to change that at some point anyway. Anyway, that's by the bright. We now have a nicely working log in System still needs some polishing, but we'll get there in the end. 100. M12 6 Firebase Registration and Login Component Code for Registering a New User: all right. So far, we've got a log in component on one of our screens, which looks a little something like this. Now you may have noticed we actually have a registered butter, and this is for a user who doesn't have an account to register within our APS. They'll provide an email address and a password, and what we're going to look at is the registration float for this app and how we actually register a user using an email address and password via firebase. So rather than actually reinvent the wheel and have a separate registration screen, we're going to reuse the email address and password. But instead, when they, instead of clicking log in use, is going to actually click register. And when they do that, we're going to give him a pop up that says, Please confirm your password because it's always a good idea. When you're registering someone make sure they've got the correct password, and once they confirm that password, the password is correct, they will be registered. So let's go have a look at how this is done. Now here we are in our orthe view controller, and when I use oppresses the registered click button we actually want to check. They've entered an email and a password of a character account greater than five. There other checks you can do, but that's just the basic one we've got. Now, we've already done this in our log in click. So if he gets the log in function, we have everything we need here. Right? So what we have to do, rather than recreate all this code, is simply cut this code Command X. Let's create a function down here called something like check input and then paste our code in. Okay, Now, we are actually just returning out of this. And if we call this function, check input inside of our log in shakin put. That should work. Yes, it's gonna go through this function. It's gonna go in here, and it's just going to return. And then it's going to keep going through here, which is no good. So we actually need a way to check the output of this function. So what we should do inside the function itself is return a boolean of some sort off some sort There. Any two swords grant sort it out. So check input. If this is this. Then we're actually going to return for flats. False. Excuse me. I've got a new keyboard here. Texas bit of getting used. Okay, so that will return. False. And then also this section here. We can also return false really contact today. Return. False. So if either password or email is incorrect, we're gonna return false. And then coming up here, we can check it by saying, if check input is false. So you put an exclamation before it. Then we can return or give the user a message, depending on how we coat this. Great. So in check input. We're going in here. If that's wrong, it's false, and it returns else. It'll change the color toe white. So if it does that, that's OK. If it doesn't go through the password text field check, it'll go into the password text field, check here and change it Toe white. That's fine. So assuming the whole code falls through everything, then we can go ahead and return. True. So there we go. Our era has gone right. So you notice what I've done there rather than return true in here, which would create a different kind of spaghetti code nightmare. I've just used logic and thought about If it falls where everything, everything must be correct. That's a handy programming technique to note that, just let your code full three. And if it does fall through, you can assume either it's correct or incorrect, depending on how you've coded the thing. So it's a handy technique to make a note off. You are making notes, of course. Aren't you? Right? So we've got that little check input and we can copy this. Check input here and we can put it into a new function called Register and Paste it at the top here. So now we have our check inputs sorted. Let's see if we can actually put this all on one line. That might be very useful. So let's bring that back up there. I think that should be doable. I've seen stuff like this before. Yes, that just makes our code a little bit nita, and it's pretty obvious what these functions do, right? So we have our register function ready todo Now we need a bit of code to show the user a pop up so they can actually confirm their password to remember that can only enter it once at the moment. So in order to do that, we're going to use on a let which, if you recall, is a type of you controller and the way we instead, she ate one Is bragger in you? I alert controller, and we just want a very simple title message and a style for this. So the title can be anything you like register and the message can be pleased. Confirm password and the style can be on elect. So you almost This is displayed mode early for the app. That means it is shown on top of your current view controller as its own view controller. Right now, the beauty of alerts is we don't actually have to just stick with buttons and messages we can add certain you Why elements to them? So alert start and he just type ad. You'll see what you can do at action at text field at key command. Okay, We want a text field, obviously, and this will allow us to input some letters or text or whatever it is. So if we just hit enter on that, it'll fill in everything we need to the coding structure, and we just give this text field a name and the reason we have it passed in here so we can access it inside of this code block. Okay. Our weekend. Give this text field a place holder. Text is equal to pass wet. Now, you'll notice that this may be a question you have. Placeholder is an optional, right? So it might or might not contain the strength. But because we are a signing a string to it, we don't have to have any checking of the optional or not because we are actually putting something inside it. Okay, so once we've got that we need then a button, which is an ad action, and it requires a new U. I. Alert action such as hit enter, open your brackets, hit, enter, and it will tell you everything you need. You need a title, obviously, and this is going to allow the user to cancel this particular item. The style is going to be default, but feel free to experiment with the styles. And on completion, we're going to have nothing. Or when you hit the button, nothing's gonna happen. So this is obviously as the name implies a cancel button. It's that using can exit out of it. Then we need another relapse action, which, as you guessed, is going to be the action that confirms and actually registers the password and the user. So the title is going to be OK. The style is dot whips. Not a string, obviously, but darts default and the handler itself. Well, do we actually need a handler for this? Yes, we do. Let's hit, enter and type. Action was something like that. Let's get rid of these code Hint. Now we need the password confirmation that comes from this text field. So how do we actually get that? Well, we say let let's say pass, which confirmed is equal to the alert that we're currently in dot Now, we can't just access that text field. You'll notice you actually get on option to have text fields, which is an array off text field. And that means we actually have to iterated through all the text fields. Now we know there's only one which is here. This is gonna be at index zero. Remember? Everything is that index zero now, text fields, if I just type it again, is an optional because they might not be in. So I'm gonna force on Rapid because I know it's definitely there. And we're going to take the 1st 1 in that array. Which is it? Index zero. I'll be aware if you had an added text fields. Exactly. Here is where you would get a crash. When your app is running on, the user presses this butter. Okay, so, yeah, the idea, whatever you say and just going to double check because I know in the old version of this code that you actually had to cast this, but I don't think we do now. And by cost, I mean, you have to say, as a u I text field, but I don't think we actually have to do that now. We'll soon find out. Okay. The next step is to compare this crossword to the one that the user entered previously, right? So if poss would what do we have here? Password, notes, password, comfort. I put a capital w there. That's why I'm confusing myself past words. I don't know why it's not showing it, but anyway, if password comfort now you might think you would have equals equals but there's actually a better way to do it in text. In a swift Rather is too crap I would text dot is equal. So is equal. This isn't showing, but whatever is equal to what will the old pastor It's so self. Don't password text field don't text. And that's an optional too. So we're gonna unwrap that. So if these things are equal, then we can do something that we just move this off. The site is you can see and let's double check. Here we go. Everything has gone. So if this confirmed password is equal to the past, what we already have, then we're good to go. That's just put a common in here registration starts or something like that. So you know what's happening now? We can grab the email and the password itself. And how can we do that? We cannot just copy this line from locking these two lines. And of course, we could actually have had this right at the start of the register function after check input totally up to you where you want to put these. We have our items. Now all we have to do is get our off get our instance auf authorization. And then, as you might guess, start typing. Oh, not register. That would be a wrong guest wanted. Annoyingly, it's not register, but rather it's create user with email password and then a call back. So what's the email? Well, it's the email we just pulled up top there, which currently has an era. That's because it requires self same here on, just just to confirm for you guys. It requires self, because at the moment this ad action is happening in its own handler. So we have to explicitly refer to this class by using self, So it's a bit of a complicated process. But hey, and then all possible. I had eased the string password, and on completion, we can actually do something so we can tell our user if there was an error. So if we double click this callback, it's the same code you probably recognize from Logan, so you'll have a user object passed over, and you will have an error object passed over and both are optional, right? And because they're optional, we're going to check them. If let era who air is equal to era, then what are we gonna do? Well, we could show the user and a let year. But for now, we're just going to return. I'm gonna let you guys do the allowed in the homework section. Otherwise, if there is no era and we have a user we can print out to ourselves, that develop is something like new user and we can have user, but we should probably check it if let's IG Let told you had a new keyboard. If mats user is equal to user, then we can prints out the user email, for example, like we did with lock in, if you recall. Okay, so we've got all of that running, would get a cold back, and we need to unwrap this email. Okay. Now, what else do we have to do here? I'm just thinking of this. We've got out. Call back our off. We're gonna fall through. We're going to check the user. The era. I think what we're gonna do here if we get this if we actually get it, user, then what we can do in here is we can now dismiss this view controller that as in the log in view controller. So what I mean by that? Well, I mean, in our at this is loaded up. We've just registered a user. So what's the logical step in the North? Few controller. Well, that's to actually dismiss it because we don't need it anymore. So weaken self dots dismiss, and we can animate this. And on completion, we don't need to do anything. So what this is going to do is take that few controller, the or few controller off the top of the stack and throw it away and take us back to the original view. Controller rights. That's how alert done. It's quite a lot going on in the action there, right? And we have one more thing we have to do, and that's actually show the A let so self dot present and remember, in alleges a few controller, so a latte animated and on completion No, who Okay, on. We've got a slight warning here, so let's print something to ourselves. Let's have rich failed plus era dot localized description. Okay, so we have a ton of stuff going on here, which is fine. Let's hit play and let's see if we can register a new user. I'm hoping so remember, our automatically logs out. So let's have any mail address. Harry hotmail dot com And I just used password and then I'll hit register and we have nothing. And I think that's because stop that running. I have actually forgotten toe actually call register in register clicked. It's always the simple stuff in life. This is like my weakness as a coda. I make the whole functions do everything beautifully, and I just forget to call them. It's crazy the things that you can get wrong. All right, So let's try this one more time. Harry acts female doctor calm. And if you hit tab on your physical key, but it will take you to password. Password register, please confirm password. Password. Now, you can actually change that text field property to be hidden one so we can actually do that whilst it's still running. The next time you run it, it will be okay. If we look at our add text field, we can have a text field. Don't and I just have to remember was it was type, wasn't it? Oh, are. It was something like privacy. I think I'm gonna have to search this out If we go to our storyboard, we confined it. Sorry for going off on a tangent, but it's good to fix these things. Go to password, go to its properties. Content type is password and secure. That was what I was looking for. Dr is secure text entry because true and make it password type text content type is equal to dumps. Was it password? Let's go back to our storyboard. Yeah, Password. So content most. Not that one for sure. It's not that one. I'm pretty sure it's the 1st 1 is equal to dart. Come on, Swift. A week. I think I'm gonna have to find this somewhere. So you know what? I'm just gonna leave that password out for now, so we'll just leave it, all right. And we'll come back to our app and we'll continue where we were gonna hit. Okay. And this should register a user and get rid of that screen. So it's gone through here. It's successfully registered. We have a new user, so it's dismissed the screen, and it tells us in our council, we have a new user now. Obviously, we can stop that running, and we can actually go in check Rat in our Google Firebase console, right? So go up to our browser, Govert, our consul and click authentication. We can see in our list of users we have harry at hotmail dot com. We who has a unique user I d. Now I believe this unique user I d is actually unique across all of Firebase. Don't quote me on that. You'd have to check it out, but I believe it is, or certainly long enough to be unique. So that's how we create our users and register them in our app Now. Obviously, our APP is falling a bit short of the user experience at the moment because the user has no way of knowing what's going wrong with the registration or log in. So in the next lecture, I'm gonna set you a little bit of homework, which is based around alerts and a bit of logic, just telling the user what's happening and when it's happening. So I'll see you in the next one 101. M12 7 Firebase Registration and Login Homework and Solution: already. It's time for your first piece of homework in this module, and there's a couple of things wrong with our app, primarily in the log in and registration screen. And I want to section three tasks to fix these items. Now the first item managed to fix is to create a generic alert, perhaps utilities class, like we have before, where you can feed a title, a message and a button title, maybe to an alert, just to let the user know that they failed a noggin. Or there's an incorrect registration. They've re entered their password incorrectly. Something like that, just a generic way that the user can know that something has gone wrong is that your first task. Your second task is to allow the user to reset their passwords. So if you recall, we have a forgot password button in our rap, and when the user taps that you want to send them off an email and firebase does that automatically. So it's pretty simple, but you will need to perhaps look up the firebase documentation or simply search on Google to see how to do it. It's not too difficult. And then finally, once you've done that. Just give the user a pop up, telling them to check their email for the reset Big on that links back to point number one or task number one. You'll just use that generic pop up again in your utilities class. So pause the video here and good luck. Have a really good go it it before you come back. Welcome back. I hope you have a really good girl at solving those problems. I said to you, Here's a little reminder. Before I show you my solution, I asked you to create a pop up for failed log in registrations. Whatever. It was just a generic pop up. Also, to allow the user to reset their passwords, you'd have to look at a bit of firebase documentation to do that and then finally, use that pop up you created to tell the user to check their email once they'd sent to the reset password link. So open up your ex code and let's see how I would solve this problem. The very first thing I would do is create a new File Corp utilities or something similar to that. It's just the way I program. It's not a standard way of programming. There is no standard weight, really? So you could create any named file that you wanted to, But it just so happens that this is how I've always done it. Helps and ignore that auto, complete their open and close our braces. Right now we need a function in here, which is going to show on alert. Now, this is going to take a title, which is a string that's gonna be the title of the Elect. It's going to have a message. Also, it's string. And then it's gonna have one more thing that it needs. How do you show in a Let while you present it and you present in the Lent on top off a view controller. So you actually have to pass the view controller over itself. You I view controller. And to do that, you're going to have to import you. I kit. So it knows what you I view controller is all about. And then we're ready to go with our function. Right? So that's probably a bit that caught you out when you were trying to do this. Just that little section. Right now we can just create a simple alert which is equal to and you your I let controller and you know how this goes. By now we have a title. So we're gonna give it the title that we pass in. We're going to give it the message that we pass in and we have to give this a style, Don't elects. And then we're going to give us an action, which is a simple button alerts dot ad action hit. Enter and you can create your new action with a title of style and handler. So the title is simply gonna be okay. The style is dot defaults and the handler is nil. Now, just a little work. Something of note here. Instead of default, you can actually other items cancel and destructive. So destructive will give you a red background. If I recall correctly or something similar, that implies that you're going to delete some data. In this case, we're not just in the let the default is fine. Cancel. It gives a cancel flavor to it so nothing will be changed. Default is fine for us. Just so you know, because user, that's quite often in IOS programming right now. We need to show the elect. So we get that view controller we passed in and we present the alert itself. So let animated. And on completion, there's nothing because this is just a message to tell the user. So you can save that utilities file and we can go back to our orthe view controller because the alert is now ready to show. Now let's look at the places where we would actually insert that alert. So we got all the bits and pieces we have log in register and in both logging and register . We check the input, and if the input is wrong, I e. Here, then we can do something about it. So in this case, if the email text field is wrong, we can actually create a new utilities. Don't show that and we can say e mail incorrectly formatted something like that. Or actually, we'll cut that Command X and we'll just say era and we'll put that as a message instead and we'll pass it. A bit of you control us. That's just self, because this whole or few controller inherits from you our view controller. So self is what it is, right? So we can copy that over and we can put it into our password text, field, breath, password, two shorts and it will returns. That takes care of that entry when we check the actual input. So now let's funk. Let's concentrate on this log in function. So we've checked our input. It's all good. We've tried to sign in. If there's an era, then we should probably paced in our show, let here and say era. And then the message. Well, that could be anything you like, But you have to remember, Vince, the localized description will actually tell us what the error is, so you can show that in the message to the user now, it depends if you actually want to show this, because sometimes these descriptions that come back from fire base and other cloud database providers quite technical, and you don't want to the every day average Joe to see that, because it implies a level of un refinement if you like. It's not even a word, I know, but it implies you haven't made an effort to refine your app. Fire bases okay with their descriptions, they're a bit more readable so we can leave this As it stands now we can copy this, and if we wanted to once the users signed in, we could give him a notification. But it's sort of implicit that once they signed in that view, controller drops down and they will be able to use the app. So I don't think it's actually a need to do that at this point. So we'll just leave that as it stands, right? So now let's go to our register section, where we made a customer let without text fields to confirm the password. And what we did was when we hit the button. Okay, we checked. If the past word text was equal to that, then we started the registration. Or what if it's not actually equal? Well, we should have an else statement where we tell the use of that. So this is a handy trick in X code. If you go to a brace or bracket and you move back and forth over it, you'll notice that's over in the top here, where I've selected this line, it highlights its counterpart, so where it opens and closes. So just by going back and forth, you can tell where you are. So we know this is the correct place to place and else, and then we can tell the user that they are actually wrong so we can paste it era. And what are we gonna do? Well, our description, our message isn't this. Obviously it is gonna be something like, let's think error passwords don't match, okay? And then that should just kick out of it and give them a chance to click register again. But we can check that in a bit. Right? So the next era that will come across is if registration failed. So we can just simply paste that in and we can leave it as a localised description, because again, this is an era. Now, if user registers, we get a new user and then we dismiss the view controller. Now again, we could put a on alert in here, but we have to be very, very careful when we're doing that. If we put on alert here, it would show the inert, but an alert is a synchronous. So the alert shows on the code in the background keeps running. That means it's gonna go to this next line and it's going to dismiss the view controller that the alert is actually showing on. Now that is Ah, whole bag of worms. Whole can of worms waiting to be opened. Generally, you want to stay away from that. So what you would do if you really want to show an alert here and I don't think it's necessary is create your own custom alert. And when the user presses the okay, action button, then and only then will you dismiss the actual view controller. So I'm not going to do that here because it's enough for the user to know if the screen disappears that they are actually registered, right? So we can say that we can play and we can check that all of these alerts and what not actually work correctly. Okay, so I'm just gonna put in a too short and email address and click lock in email, incorrectly formatted. Great. So make it long. I know it's not an email address yet. I'll click lock in past way too short, Logan. And this the email addresses badly formatted, comes back from fire base. This is the air adopt localized description. So that's great. So what we'll do here is we'll put in at and will say, hotmail dot com and we'll lock in. There is no use, a record corresponding this identify the user may have been deleted. And this you can see what I mean when I say these services sometimes have. It's sort of bad descriptions. They're great for us, is developers. They tell us exactly what's going on. But to a user you like, Well, what does this mean? Have I been deleted? No, it just means that use the name and email is incorrect. That's all it means. So it's it bit frustrating. But hey, let's try Harry at hotmail dot com and that's capitalized it. So that's the thing we should fix as well. We can log in with that. The password is invalid or the user does not have a password. And this also brings up another point that we have two different errors here, both for an email address. And if I was a hacker, I would be looking at this and saying right so the first email address doesn't exist. But this 2nd 1 does actually exist because the era is different. The pasta it's the same, but the air is different right? And that's is a clue that you don't want to leave behind for hackers, right? You just want to give a generic air estate log in Aaron, please check details. That's all you want to do. So it's up to you how you do that. We're not gonna do that right now. It's a bit beyond the scope of this, but anyway, let's change this to Harry. Are we need to switch off auto Correct on this, that's for sure. Or Harry's at hotmail dot com. We can register that. Put the wrong password in passwords. Don't match. Excellent, right? So let's try register Harry with the standard pastorate of pastorate register pacified. Okay, and we are registered as Harry's at hotmail dot com. So it looks like our logic and the flow off printing out errors and showing the user alerts is actually working. Now we're going to move on to the next date of the homework, which was to allow the user to reset their passwords. If you recall in the fire based console, we can click next to a user and we can reset password, which will send a reset. You can actually also change your email templates. So if you click change email template, it will tell you what you conduce this just Google's default and you can just hit a little pen icon and you can have all of these items changed. Okay, But we want to do that programmatically because obviously manual is gonna be a pain. You've got a 1,000,000 users and 100 of them forget that, possibly every day. So in our orthe few controller under forgot past collect, we can actually do that. So let's say let's create a function down here somewhere. Function that's cool. This reset password and then let's call that function so I don't forget it. This time in the forgot past clicked a button click. Okay, so reset password. Now, what's the first thing that we actually have to do? Well, we don't want to check the input because they forgot their password, and obviously we can't check the password. So all we're actually going to do here is say if and we're gonna check that something is empty. So let's say if ah, forget what was called the email text field. Don't text dot is empty. This is a Boolean. So if it's empty And what are we going to do? We're going to tell the user. First of all, say it's sort it out so we know how to do that. Now we have a nice utilities utilities dot show a lot, and we have a title era. We have a message. Please enter your email address and we have the view controller, which is self. And then after that, we're just going to return out of this function to allow them to fix that. Okay, but if everything is old good, we can grab the email, which is equal to self dogs. Email, text field don't tricks. Whoops. Okay, and you can put in if let there. But we've just checked if it's empty, so it's not really necessary right now. Here comes the firebase stuff because we only need an email address to reset a password. Let's have off stopped off Dobbs, and you can just start typing things You might think it is, such as Reset. We have verified password reset code. Send password reset. That sounds like it. Let's try that. It asks for an email, so we've got that already, and on completion, we have what's called a send password reset callback type. So just hit. Enter, and it will auto filled the structure for you. This gives back an error. And this, I believe, is not optional by actually, I think it is. So if I hit Command said yes, it is optional. I'm seeing things today. So again, like everything else with fire base, we can check for that error. So if let era is equal to error, Then again we can show the user the error so utilities don't show alliance era. What's the string? Well, we can give them the localized description and pass over this view controller. Okay. And of course, if we have an era, we don't want to continue, So we're going to return, right? So if we don't have an era, then we can actually show the user a message. And this was the third part of the homework to let them know the reset has been sent. So utilities don't show that I guess something like success. Please check your email inbox for a cost. Would past sword ray set link and the view control, of course, is self. So that should take care off all of the logic for resetting the password. But as always, let's double check that. Let's head over to our simulator. Let's first click. Forgot. Please enter an email. Fine. And let's put a wrong email in it first and at whatever It doesn't matter. It's click forgot. Here we go. User may have been deleted, so we get the same error that we had before when we were trying to log in with the wrong users. So again, this is a nice clue for a hacker. If they wanted to pack your stuff, let's see what happens if we put what was his name Harry. And let's forgot his password. Success. Please check with your mailing box for a password. Reset link. Now, when you go to Harry's Hotmail, you should be able to see a password reset link. Now it be funny if this was Prince Harry's Hotmail because he was the first fund on there and he keeps getting these firebase password reset links even funnier. If he was taking this course because he wants a career change anyway, let's stop that running. So our logic more or less works for this items. Now. At the moment, it seems pretty much all right. But as you continue to use the app, you're gonna find little bits where you want to change the logic a bit. That's perfectly fine. At this stage of me teaching you, you should be thinking thoughts like that. Like I'd actually liked it like this and not like the way Grant does it. Because we're all different. You have your preferences and they aren't necessarily the same is mine. So if you want him shuffle things around, please feel free. Anyway, that's the homework and solution sorted. 102. M12 8 Setting up a Table View to Show Firebase Message Data: So we have a log in, We have a registration. Now all we need to do is send and receive some textual data. Some messages, if you like. So we're gonna set up just a plain old table view, you know, once you receive and show that data to our users. So open up your project and that's create one. Now, Previously we have actually created a you a table view controller, which laid out all of the template code for us. This time we're going to do things slightly differently. We're gonna go over to our storyboard, and we're gonna go to our main view controller. So we're no longer interested in registration and lock in, and it's inside of here that we are going to drop in a table view, so simply come over to our filter at the bottom, right in type table. And previously we had one of these, but now we're actually gonna have just a plain old table view. And the reason we're doing this is so we can add other elements into our if need be someone to click and drag this into here, and then I'm just gonna position this to the sides. I'm going to remove these margins and I'm going to give it zeroes all around And you just hit Tab. If you press these items and then it should have ad for constraints at the bottom. When you do that, it will fill out our main view. Okay, so we have our standard table views. I'm gonna say that, and I'm going to switch to another file and come back to it. So it expands Sometimes is a graphical glitch that the table view doesn't actually show. Now you'll notice that this table view in stark contrast to the table view controller doesn't actually come with a cell. So I'll just show you what I mean by that. If I drop in a table view controller up here, which we can delete, it does come with a cell. The table for you tape of you sell. Where's the other one? Just has a table view. Let's remove this. Just select it Hit backspace. That's come back to our original table view. So we need to drop in a cell and you'll notice in our object Explorer we have a cell available table for yourself. So we're going to click and drag that in, and it should drop it into the top. And now it looks similar to when you drag in a table view controller itself. We have a tape of you sell, and we have the content of you. It's self. So click on the cell and remember, we have to set a reuse identify in the top. Right? So what shall we call this, Perhaps message table view. So okay. And remember, it's this string identify we use to recycle and create new cells for our app as we're scrolling. Okay, so I was gonna copy that for now, and we're gonna use it in a little while. Once we've created the bits and pieces we need right now, we need to actually outlet this. We need to reference the table, view itself to our view controller class. So open up the assistant editor and then simply control. Click and drag the table view, not the cell. Make sure it's the table view selected. You can control, click and drag from the table. View itself on this list on the left hand side to be sure. And we can drop that somewhere in our class and we can simply leave this as an outlet, and we can call this perhaps messages table view. Or we could just call it table view. Now. I haven't specifically named it because in IOS or Android for that Master Windows phone, it's good practice to have only one table view in a screen. If you have more than one, things can get confusing, especially when it comes to layouts and scrolling and side scrolling as well. Some things could be a nightmare. So it's good practice to have one table view press screen, So hence you could just call it table view. You don't actually have to say messages tape of you, Right? So we've done that. We've set our i D. We've got ourselves. We've outlet it. Great. We can come back to editing and go to our view controller dot Swift Now, in theory, we should change this to messages view controller, but we can leave. It is the main screen Justus view controller for now, right? We have our table view in there. Now there's a couple of things a tape of you needs First, it needs a data source. So our class has to inherit from you I Table view data source. You I table of you. Data source. There it is. It also needs a delegate. So it knows what to do when you tap things or slide things on the table or indeed, scroll the table. So this comes from you, I table view delegate. Now Swift is gonna give us a couple of errors and say you don't have all of the required methods that you need. So if you see something like this does not conform to protocol, that means Vance Swift has said you need to have certain functions available to capture the data source will set the data source and or Teoh fire off the delegates, and we haven't yet implemented them. But we will, right? For now, we need to create a variable toe hold all of our messages that come back from fire base so far, messages and this is gonna be off a certain type now. Previously, we have actually created a you a table view controller which laid out all of the template code for us. This time we're going to do things slightly differently. We're gonna go over to our storyboard, and we're gonna go to our main view controller. So we're no longer interested in registration and lock in, and it's inside of here that we are going to drop in a table view, so simply come over to our filter at the bottom, right in type table. And previously we had one of these, but now we're actually gonna have just a plain old table view. And the reason we're doing this is so we can add other elements into our app if need be, someone click and drag this into here, and then I'm just gonna position this to the sides. I'm going to remove these margins, and I'm going to give it zeroes all around. And you just hit Tab after you press these items, and then it should have ad for constraints at the bottom. When you do that, it will fill out our main view. Okay, so we have our standard table view, something safer, and it's going to switch to another file and come back to it. So it expands sometimes is a graphical glitch that the table view doesn't actually show. Now you'll notice that this table view in stark contrast to the table view controller doesn't actually come with a cell, so I'll just show you what I mean by that. If I drop in a table view controller up here, which we can delete, it does come with a cell. It's a table for you. Tape of yourself. Where is the other one? Just has a table for you. Let's remove this. Just select it. Hit backspace. That's come back to our original table view. So we need to drop in a cell and you'll notice in our object Explorer, we have a cell available table for yourself. So we're gonna click and drag that in, and it should drop it into the top. And now it looks similar to when you drag in a table of you control it itself. We have a tape of you sell and we have the content of you. It's self. So click on the cell and remember, we have to set a reuse, identify it in the top. Right? So what shall we call this, Perhaps message table view. So okay. And remember, it's this string identify we use to recycle and create new cells for our app as we're scrolling. Okay, so I was gonna copy that for now, and we're gonna use it in a little while once we've created the bits and pieces we need. Right now, we need to actually outlet this. We need to reference the table, view itself to our view controller class. So open up the assistant editor and then simply control. Click and drag the table view, not the cell. Make sure it's the table view selected You can control, click and drag from the table. View itself on this list on the left hand side, to be sure, and we can drop that somewhere in our class, and we can simply leave this as an outlet, and we can call this perhaps messages table view. Or we could just call it table view Now. I haven't specifically named it because in IOS or Android, for that matter, a Windows phone. It's good practice to have only one table view in a screen. If you have more than one, things can get confusing, especially when it comes to layouts and scrolling and side scrolling as well. Some things could be a nightmare, so it's good practice to have one table view per screen, so hence you could just call it table view. You don't actually have to say messages. Tape of you. Right? So we've done that. We've set our I d. We've got ourselves. We've outwitted it. Great. We can come back to editing and go to our view controller dot Swift. Now, in theory, we should change this to messages view controller, but we can leave. It is the main screen Justus view controller for now. Right? We have our table view in there. Now, there's a couple of things a tape of you needs First, it needs a data source, so our class has to inherit from you. I table view data source. You I table of you. Data source. There it is. It also needs a delegate. So it knows what to do when you tap things or slide things on the table. Or indeed, scroll the table. So this comes from you I table view delegate. Now Swift is gonna give us a couple of errors and say you don't have all of the required methods that you need. So if you see something like this does not conform to protocol, that means that's Swift. Has said you need to have certain functions available to capture the data source will set the data source and or Teoh fire off the delegates. And we haven't yet implemented them. But we will, right? For now, we need to create a variable toehold all of our messages that come back from fire base so far, messages. And this is gonna be off a certain type, which will come from firebase itself. So up at the top, we actually Teoh import just playing old fire base. Now our messages will be off type data. Snap, shot. Now these will probably be and a race of snapshots. It depends on how we're going to actually program this. So what I'm gonna do is simply create an array off snapshots which is empty for now, like so. So we have an empty array off these fire based data snapshots, and we're gonna add to these or overwrite them. Indeed, when we have some new data that actually comes in right, So now we have to implement these two items. The first thing we're gonna implement is the table view itself. So we got our lockout test and what we can do, actually, right now, it's just remove this lockout test. We don't need it. Our registration works perfectly fine. You can also delete this bit if you so wish I am not gonna delete it. I'm just gonna move it to the bottom. So it's out of our way right now. Inside of here. Let's get back to our table view. The first thing a tape of you need snow is the number of rows in the section. So number off well, actually needs to know number of sections, first of all, so that's returned one section. Then it needs to know number off rose in the section. And if you just start typing these swift or ex code, rather will order complete everything that you need. So how many rows do we need? Where we're going to return? The messages don't count. So just counting the number in that it Ray, and that will give us the correct number off rose. Okay, the next thing we need to do is get the cell for our table view. You haven't actually set that yet, So this is self for row at, right? So this will allow us to get a cell. So let's sell, which is off type you. I table you sell. I'm just using the plain old cell that comes installed automatically, and we're gonna grab this from the tape of you don't de que reusable cell with and identify . And you also notice you can also de que a cell from a specific index path. If you want to do that, that's a very special case. It's pretty unlikely you'll want to do that with an identifying and I've totally forgotten it and over it in my clipboard. So let's select our cell again and there's are identified. Get back and drop it in there, Okay, just make some space. You guys can see what's going on here now. D curies of reusable cell. I believe this is on optional. Gonna fix that because we know that this is actually correct. What? We should know that now we have to pull out the message. So let message, and this is going to come from our array off messages, so messages index path tops red. Okay, simple enough. And the message should have type off. That's data snapshot. It's not showing when I hover, but so what? Okay, now each snapshot that is eventually going to come back from Firebase is actually a dictionary. If you remember, it's Jason we've done. We've dealt with Jason before. It's the same in fire base. You get some, you get more or less dictionaries. You get some keys and you get some values in our case that he's gonna be a string and the value will be a strength. So let's grab the actual message. Content is equal to the message itself, which is the date? A snapshot. We're going to get the value off it and you'll notice this comes back as any. Which means it could be off any type, and we have to convert them so as exclamation. So we're saying there's definitely a value and we're definitely conversing it, and it will definitely work as a dictionary string coma strength. Now I know that converting to addiction of string and string is going toe work. Bucks. You firebase came back and it couldn't actually convert to a string, which is pretty unlikely, to be honest. Then we would get a crash here because we're trying to force unwrap something that doesn't actually exist as the object. We say it is a type off, right? So if your APS do crash. This is a great place to start checking stuff to perhaps start introducing if, let's and that kind of thing. But as long as you are tightly specified on your database layout shouldn't get a crash. That shouldn't being the magic word. Right now, we're gonna grab the actual text from our fire base. So let's text. And this is the text of the message. Reaction in a show is equal to the message content. And what are we gonna pass in here? Well, normally we're actually going to pass in a string. That is the key off the value we want from our Jason data. And then we're going to cost this as a strength. Right? So we have to force unwrap that as street. Okay. And again, you can do some if let check in here or some guards, statements, guard else, that kind of thing. Right now the question is in message content. Do I just want to say whatever my constants are on this site, for example, this might be a constant off message or something. Well, I've pointed to this before. This is dangerous, because if you change this in one place, it won't change in other places. So what we should do before we carry on here is create a constance file, and this Constance file will hold all of those structures for us. So again, this is a standard way that I do some of this stuff when I'm starting out constants file, and then I will create a structure called Constants. And inside of that structure, you can create other structures. And what am I going to call this? That's cool. This message fields Educ about five. Based on that, if you want to do that, okay. And what sort of things are we gonna have in here? Well, we'll actually have a static, Let's and we'll have something called a date Time and this key will be date time. Onda static let and we'll have a text and this key will be text. So this is the message text. This is the date or time that we associate with when that was actually sent because we were going to write these. So just to be clear, these are gonna be the keys off the Jason data that's coming back from our fire base on. We're just putting them in a structure so that we have them in a fixed place and we know where to change them. If our data structure changes in the future rights, we've got that now, actually, let me just say that so x code confined it. And now we can use it in this section as the key. So we can say Constance, don't message fields don't text. So now it knows what to go and substitute in there to look for the key. Now I know that these are the same thing, but this is just to get you used to good practice. You can imagine if you had a developer that called it something like this, that would be a right pain to write everywhere. So that's why we do this kind of thing. So undo and safe and go back. Okay, so we've got our text. We can now grab ourselves. We can get the text label, we can drop in the text that we have is equal to text. And finally we can return that cell okay. And that swift cherish go away and all the warnings should more or less go away. Four scars from string to string only unwraps optionals. We're going to see if that's an issue. Actually, I need to read this properly. Forced cast from optional string to normal string only unwraps the optional. Did I mean to use exclamation man? These air misters are hard to read. Sometimes they are tough that I mean to use Exclamation. Ah, what it's saying is this has the same effect as this. I believe so. Who knows Why did it the other way? There we go. We're unwrapping it. It should be fine because this will come out in the end as a string. Okay, so we can say that was sorted. Now the last thing we have to do is in view, Did load after we check out current user is we're going to set the table view. Don't delegate is equal to self, not Delph itself. And that's because we have actually told it. It's this and then we're gonna have the table view I don't Data source is equal to and you guessed it so right, so we've done quite a lot there. Let's just run that in our simulator. Just double check that everything is working. Oh, I don't have my SIM running in the background. Okay, Well, it's built. It's built itself. So we should be all right. We should be locked in any way on the same. We should be good to go. Right? So just whilst that's loading in the background, we're just gonna move on to the second bit of this section. It's very short. And that is coming back to our storyboard. We're actually gonna create a text field in here, right at the bottom of the table view that allows us to enter a message. So just before we do that, let's just do what was his name. Harry and hotmail dot com pass red log in were signed in on what happened. We have an error. Oh, dear. Oh dear. So clearly it's not firing off. So actually have to go fix that before we move on. Let's go back to our or few controller and what we want to do. Where are we? Lock in era? Oh, we forgot to add our exit code inside of here just under where we print silly me So we can do that now. Let's just search for command F dismissed. There. No, that's that Copy that go down to our lock in and drop it in there and that should fix that problem. Okay, I'm just gonna play that again and double check that it'll works. Well, we wish we should actually be signed in now anyway. Yes, were signed in. So that should work. We'll just ignore that for now. So that's what I mean about debugging half of your life spent doing it. So we have our table. It's scrolling. There's nothing in it. Fine. So we can stop that running. We know our table code more or less works in our main few controller section. Right? So coming back to our main story board, let's move up this table view. Just a touch. Let's remove this constraint at the bottom. Just selected hit backspace. And then let's drop in a text field and we can have this text field actually stretch across the whole of the bottom screen because it's whips on the wrong thing. Their command said, commands it. I put it in a stack for you by accident so we can have this text view stretch from zero here, 20 here that should go across the whole bottom of the screen and then What are we gonna dio ? Or we can give it a position relative to the bottom so we can go back to that and have a zero down here. And then we can align the table view to thes actual text you so we don't actually want them whips. Hold down. Control, click and drag. Have some vertical spacing. Perhaps about 10. So you don't want them actually touching and weaken. Come and jazz this up a bit later on. But we have our text field. Right? Let's open up. The assistant editor. Let's go from our text. Field control click and drags an outlet, whips controlled, leak and drank. And what should we call this message? Text field as an outlet out. We've got that silly error control. Click and drag, perhaps down here. Right, Sorted. Okay. So come back to our view. Controller. We have our text field sorted, and this is simply to enter text. Now, text fields have this special property, and it's called a delegate. And you've seen a delegate before for table view. So when you do something on the table view, it knows to come and look in this current instance of class which is basically all of this code and it goes and finds the things that it needs to do. Text Field can actually have the same idea so we can have message text field, Don't delegate equal to So now that means when something happens in the text field like we press return, then we can sort something out with it. So at the moment, we actually to add this to our list of items in the view controller inheritance. So what we need to add It's you I text field delicates, and then inside of here we can have what's called the text field should return. That's the one we want, but you'll notice there are tons of others you can use here should return. So when I hit return on my keyboard, it's going to do something which is very handy because you'd enter your text, you press return and it's going to send the message for us now. Obviously, we don't have any plumbing for firebase sending inside of our app yet, so all we're going to do here is print message, right? Sing ended. Its just for us is developers don't mind. Might that spelling once again. So we print that out, and then we need to tell our keyboard to go away. So self dot view dot end editing and we can force that to be true. And then this text field should return. Needs to return a true just for now. Okay, so era should actually go away. Right? So we're ready to go now. We have a table, We have a text field. We have something that happens when we click the return button. So let's hit play and let's check that Now I know what's gonna happen here and then if you know, but you're about to find out right now at we've got our text field at the bottom. It's not great layout. We can't really see what's happening. Our keyboard hasn't actually popped up. I don't know why this is an era sometimes that we get with these things. So it's going to stop that running and then try it again. And the keyboard should actually pop up again. It's a little annoying working on the SIM. Sometimes the keyboard just doesn't show, so I've got nothing here. All right, I'm just gonna go fix this issue. I may need to use a real device just to check it. I'll see you in a few seconds. I found out what it waas If you go to hardware cause you're probably having this issue, you go to keyboard. This is under the simulator menu. Connect hardware, keyboard. When you have that on, sometimes it doesn't show the keyboard, even though it did before for us. So go to keyboard. Turn that off, which is shift command cake. And now when you click in the box, you have a keyboard with which to write, so you can write some stuff. Whatever it is, you can return, and our return code works perfectly now. Obviously, it's not perfect because we're blocking our actual view. So that's something going to move on to in the next lesson. How to stop that from happening. But just as a quick little revision, just explain what we've done here. Just one last time. First we set up a table view. We dropped in one into our view controller. We dropped a cell into that. We then inherited from the table view data source, the table, few delegates. We set them up in the view controller, and we set up the table view items here since these three functions number of sections, number of rows in section and self a row at and then at the moment we are in theory getting stuff out off our array of fire based data. But there's nothing there, so there's not nothing actually shown in our table. That's fine. So it's gonna mark these mark table view stopped. So when you look at this source code, you can actually see what's going on here. Table view, end Right. Great. Now we had this item. Text field should return, and that comes from you. I text field delegate. And when we set our message text field delegate, which was the message box, the bottom as self. When we then hit the return button on your keyboard, face will fire automatically. And the beauty of this is we now don't actually need to have a separate button to send a message. We can just press return on. The message will send automatically. I'm sure you've done the same hunt Facebook or you press enter. It sends a message that you didn't actually want to send or you hadn't finished editing yet . Well, we're gonna have the same functionality here. So it's up to you if you want to double check it before you send it or not. You can always give user a pop up if you so wish. But anyway, that's the basic idea off what we've done in this section. We're all set up to receive data and to send data. We've set up our user interface. Now all we have to do is code it. But before we code it in the next section, I'm going to show you how to fix a very common problem, which is moving a view up or down when a keyboard is shown so that our text field doesn't actually disappear. 103. M12 9 Moving a View up or Down when a Keyboard is Shown: right. It's time to do a little bit of tidying up before we actually plow into the fire base code . What we're gonna do is move our view, our main view up or down, depending on whether or not our keyboard is showing. So if you're a call as it stands at the moment, the keyboard pops up for our main screen, send messages and we can't actually see the textbooks anymore, which is no good kids. We can actually see what we're writing. So we're gonna look at how to solve that. And we're going to solve it in a much more clever way than the ways you might come across on the Internet. We're going to solve it using constraints on a custom constraints classle swift file that we're actually going to create. So open up X code and follow along. Right. So here I am in our main story board, and if you're calling my main view, we have a table view and we have this little text field. Now this text field, this message text field has some constraints. And if we go over to the right hand side and we click the ruler icon, we can scroll down, and we can see all four of these constraints Now. What we would like to do, ideally, is change the bottom layout guide to one that is more fluid. So one that moves up and down depending on whether or not a keyboard is actually showing. And the way we're going to do that is by giving it a custom class that we're gonna program . That's a bit more of an advanced way of programming, but you'll get the hang of it pretty soon. If we double click that constraint, we can then select the class inspector and we can change the class that it belongs to. So at the moment, it's a standard layout and straight, but we're about to create our own custom constraint to fit this. So let's do that now. Let's right click our project new file Next, and let's call this a keyboard layout constraint. Okay, now, because this is a layout thing, it's to do with our user interface. We first have to import u I kit. So we have access to all of those classes, methods and elements, etcetera. Now this is going to be a public class, and we're gonna call it exactly the name of the file keyboard. What if I call it layout constraint and this is going to inherit from Ennis layout constraint? And you know that because in your story board, when you click that constraint in the class at the top, right, it shows you Ennis layout constraint, So that's why this needs to inherit from it. Okay, so we got our basic class. Now we need a couple off variables and the 1st 1 we're gonna keep track off. It's the offset off the view or the keyboard. So this is going to be a far offset, and this is going to be off type C G. Flint. Now it's not just a float, it's a CD float because it's something to do with core. Graphics and core graphics have something to do with the display that we're showing, So it's something you gotta watch out for. Occasional. You can convert between float and CG float, but this is the standard type we want. So we're gonna start with zero. We have no offset. Then we need to keep track of also our keyboards height so far, keyboard visible height and again, this is a C G float, and this is gonna be zero to start with, cause our keyboard isn't actually showing at the stat. Well, what's next? Well, we're actually going to override something inside of this class, and this is called awake from Nick now. Actually, if I just come back here and I type that so you could see the description prepares the receiver for service after is being loaded from an interface builder archive or ned file. Basically, all this means is everything's loaded, We're ready to go. We can access the variables, right? So the first thing you have to do when you do this is you have to say, super dart awake from new. So this is going to execute the standard awake from neighbor functions first. And then after that, we can put our custom code caves. The first part of our custom code is offset. It's equal to a constant. Now there is a way off making our code respond in or rather, let me rephrase that what we have to do is we have to register for when the keyboard appears and disappears. And the way we do this is by calling a notification center and we grab the default instance . So it's the one we currently have access to, and we're going to add an observer to this. And this observer is going to fire whenever this notification is called. So if that sounds a bit confusing, don't worry about it. We're going to go through it bit by bit. The Observer is this current class and then our selector. I think you've seen this before. I've shown you this before. Is the actual method that's going to show when our notification is called. So actually, it's better if I type all this out and then explain what's going on. So we're gonna type selector and what do we need after this? Well, this selector, we have to specify in brackets and what we want. We want keyboard layout constraint. So that's this current class, and then we're gonna call keyboard will show there will be an error here because we haven't actually created this yet. Okay, now this needs a name which I believe is a string for Just hover here. It should tell us. No, it weren't. But I believe it's a string, and we can give this a default name N s notification. Don't name darts and we want you. I keyboard will show. So this just gives it a standard tag if you like, so we know how to reference it. And then the object is nail. So let's not worry about that for now. Right? So all have done here is I've said I have subscribed to the notification center inside of this class wherever this class is actually applied or the object would create from this class. And I've said whenever something happens to do with you, I keyboard will show. Then I would like you to fire off this method. So in a way, I'm listening for something toe happen. And when it does, I know what to do. Right? So we need to copy this Onda. We need to paste it. Why? Because we also have a different notification, which is when our keyboard disappears. So keyboard on this is known as will hide. So let's changeable This shows toe hide keyboard will hide. Okay, so we've got our methods fire up and we've subscribed thes notifications. Now, before we actually right, the keyboard will hide and will show code what we actually need to do is remember to do something extremely important, very important. And that is to remove these notifications. If the object created from this class gets de initialized ie destroyed for all intents and purposes, and the way we do that is we fire up the D in it and you'll notice the description of the top says performs a cleanup before an object is de allocated. So this gives us a chance to remove all of the garbage that we don't want hanging around and hogging our memory and perhaps firing events on view. Control is that aren't there anymore. So we have to get rid off all the notification center, stop the phones, and we're going to remove the observer, which is self. So we're getting rid off all of these notifications if we destroy this object. Okay, Now we can actually write these functions. Let's do that around about here. Now, this has left over from the objective c days on. I'm not too sure about this, that I don't have a full explanation. Haven't looked it up, but I know you have to declare this is an object of seat function and because hey, let's face as good as I am. I don't know everything. So let's have a keyboard will show. And what we actually want to do here is we want to grab the notification that comes with it . So what we're gonna do is type under school notification, which is of type notification in an open and close our curly braces. Before we forget it, I'll explain what underscore means in a second, but we actually have to now go in match. This keyboard will show to include this notification. So in keyboard will show open and close your brackets and then inside off there, we're actually gonna pass over Underscore Cola. And now it is a good place to explain why we've put an underscore. Generally in Swift would put an underscore, And I believe this was from Swift three. This started happening perhaps swift to you. Can't remember exactly, But we put an underscore when we don't actually want to name the argument that we're passing over. So we're putting an underscore, and then in this section on, I believe I'm right on this, But don't quote me on it. We're saying whatever you've received that unnamed is now going to be named notification, and it will be of type notification. And we know that's gonna be the case because the notification center passes over and notification. So it's It's a big convoluted, and I apologize on Apple's behalf, not my behalf its way, we have to do things that they do it like this. I think it would be better if we were forced to put that into here instead of the under school. But basically the underscore means that the argument passed over. It doesn't yet have a name. And so inside here we now have a chance to give it a name by putting the underscoring again . I'm not too sure about that, but I believe that's exactly exactly you can't be. Not sure and say exactly. But I believe that's what it is. If you find out, then feel free to tell me, and I'll let everybody else know and, of course, give you some credit, right? So we've done that now, Now what we have to do is get the information from the notification. Now this is optional. So if let user info is equal to notice nor ification notification and this is the past over one Salo. It case in Dr User Info, and this gives you back all the values and objects related to this notification. So if we get that, then we're go to continue. And then what do we want to get? Well, we want to actually get the size off the keyboard whilst or just before it's gonna show. Now, when you get these notifications, the keyboard is actually not showing yet. But it's telling you through the notification, I'm about to show to the user and inside of that notification you could get a whole bunch of values and you can look at the docks for this. But I'm going to save you from that pain. One of those values tells you where the keyboard will finish, so at the moment it's animating. It's going from not showing to completely showing and inside of there it's telling you where it starts and where it ends. So we're gonna try and get the end spot. So again, this is optional. If let and this is known cloak really as a frame value. So the keyboard has a frame going around it, if you like, and we're just trying to get the values off where that is and what size it is. Okay, so if let frank value is equal to and we get our user info, that's all the data that came with it and then worked. We have to do or we have to get a key value pair out of this. And this one very long name is you. I keyboards frame and user in for Key. It's a long name, isn't it? Right? So he's saying, Where is the keyboard is going to end up? Give me the value for that particular key. And again, this is optional as and we have to cast this as what's called an Ennis value, and this is a generic values. It could actually be anything right. So we now have our where our keyboard is going to end up. Now we can actually grab the frame of the keyboard, which comes from our frame value dot cg wrecked value So it returns the core graphics Remember, core graphics has to do with you. I kid and all of you I stuff we're seeing, and it returns the rectangle structure off this family. So basically it's just a position and a size that we're getting out of this, right? I'm sorry. It's a really long winded, but in the future, when you make outs or you have to do is copy this file and you're sorted for your keyboard , moving up and down. It's a great way to save a lot of time rights. We've got afraid, but we don't just need the width or the size. We actually need the heights because we're moving stuff up and down. So we are going to set our keyboards visible height and I'm not sure Yes, we're gonna set this now because we have the frame where it's gonna end. So keyboard visible height is equal to the frame. We just got dot Size would get size of it. Don't right. And of course, conversely, if you want to know it, you could actually get the width to amongst a whole bunch of other variables if you were programming something else. Right now, the next thing we're gonna do here is self dot update constant. And we haven't created this yet, so we'll do it now, and we'll also learn exactly what it's for. So function update constant and what we're gonna do is remember we have a constant CD float is equal to the offset, plus the keyboard visible height. So we're just keeping track of all the heights that we're calculating. Because, remember, we have to move things up and down according to the size keyboard. Now here's some bad news for you is the keyboard is the different size on most IOS devices , depending on the size of the screen, the rotation resolution, all of that jazz. So you have to be careful, and you have to do it programmatically like this. You can't just say move the keyboard by 200 screen points because that could be an error on your various devices, right? So I'm not gonna explain too much what's going on in this file because it's quite complicated, and I don't want to overwhelm you. Just based. I've told you the basics of what we're doing, which is moving stuff around according to the keyboard height. That's all you really need to know in order to get going, right? So what's next? After we've updated that constant? So now we're gonna have a switch case statement. You should know what these are right now. And the thing that we're going to switch. The thing that we're comparing against is the user info, and we're gonna grab the value out of this user info that corresponds to you I keyboard, animation, duration, user info key. And the reason we're grabbing this is because the keyboard is going to animate over a certain time period. And we need to know what that is so as and this is going to be an Ennis number, okay? And then we also need to get user info, Do you, I keyboard, animation, curve, user info key. And again, it's going to be as an N S number. And we're gonna compare these two items in our switch case. All right, so if if you're not sure what's going on, it's fine. I really don't want to go into debt from this because I really don't think you need it. I think it's good enough to actually ka Penis and just get some swift practice whilst were at it, because it is quite complicated. So the first case is where we let dot some duration darts, curve or got some. Rather, that should be dot some and it's curve. Okay, just check my brackets there. That's a working great. So in this case, we got a duration on the curve. We're going to create an options. Variable is equal to your eye view animation options, which has a raw value off curve, doctor, You into values so you can see what I mean when I say this stuff is complicated, even I don't understand exactly everything that's going on here. I get the basic gist of it. But I don't think you need to understand this. You with you Dunks animate and we want animate with duration delay, options, animations, duration, delay, options. I think it's this one. Yes. Delay options. Yes. Great. So with duration is a time interval off duration, darks, double value. And the delay itself is going to be zero. The options of the one we just created on animations just hit. Enter on this and it will give you a little co block to complete. So the animations is your I application window. Is it window? That's your application. Don't that shared that we want. So if we just look what that says shed returns, the singleton instance you can think of this is like the big bad container that holds your current app. So shared darks, key window jobs, layout if needed. So what I'm gonna do is explain bits and pieces here because there's a lot going on. Lay out if needed, Will take all of the views inside of your view Controller, your your view inside the view controller, if you like. And it says, Do I need to lay all these out because something has changed? And what we're saying is, yes, you actually need to do that. So that's what layout, if needed, Means Okay. And once you've done that, we can return. And on completion stubble, click this. We have a bulls that we can call this finished, and we can leave those brackets in. I think I believe we don't actually need any code once it's finished. Okay, Okay. So basically, in this case here, what we're saying is I want you to animate things and shift things around if needed, because something has appeared on the screen. And the something in this case happens to be that something that is attached to this layout constraint, case it don't worry about it. For now, we're just going to carry on and pretend we know exactly what's going on with all of this code on the default is just simply to break. Stop executing the switch, right? So that's a lot of code for just a keyboard will show, but this code is gonna form the basis off pretty much every app you create that requires some textual input. You will need to move the view up and down, and this is gonna do it for you Very simply. Okay, Now, what do we need here? Well, we need to copy This will show command, see, And we need to cut paste it and change it to keyboard will hide cause recall. If we press return, the keyboard disappears, and we need to shift everything around again. So let's pace this under here and let's change this name to keyboard will hide. And again this passes over notification. And what do we want in here? Well, we know the keyboard is hiding. So first of all, we need to set our keyboards visible height to zero because we know it's going away. They don't do any checking. We know that's gonna happen. And then we need to update the constant. So we know we can keep track of the height of the keyboard is that And then if we can get our user info out of here, we don't actually need to have this frame part. We don't just track it because we know it's disappearing so we can use the whole screen so we can just delete that. We can also remove the update constant here. And then we can switch the animations that this is the same. We're keeping track of these animations and the curves to do with the animations. And again, this is complicated stuff. So we're gonna sort of glance every bit. Just copy it, trust me sometimes better just to copy. So we have some duration. Some curve. Yes, that's correct. We have our options. That's correct. I think I'm just double checking for my own sanity. We're going to animate delay options applications, and we're saying something's disappeared. So I would like you to lay this out if needed. And when it's completed, where fine, we're good to go, right? So I think that's more or less done, save any errors we haven't seen yet. Right now, we come to the actual glue that's gonna attach this to our few because it's a constraint. We can go to our main story board. We can go to our text field. We can go to our bottom space because this is the one that interests us. We want to move this up and down. We can double click it. We can go to the class inspector and we can now set this layout constraint and hit Enter once it selected save your items. Right. So before we look at this running on the sim, just explain this, roughly speaking a broad overview because I think that's more helpful for you. We've set a constraint and the constraint we've set. We've programmed ourselves and we programmed it so it listens for when keyboard is gonna show or it's gonna hide. And we know that because that's the name off the notification that we've subscribed to. Then our class will go in fire off the wheels show and will hide items. It'll grab the data it needs from the notification that tells us everything that's happening. And from that we can grab the keyboards height, and then we can double check what's happening with switch case, and we can shift things around with an animation that actually matches the animation off the keyboard. Because, you know, when you click the keyboard, it slides up or across or whatever IOS is doing, and what we'd like to do is move our view in an animated manner to match the keyboard so we could just move the whole view this year, I view, but that would suck. It would look really bad and just go like, really jerky bang. It's there and then the keyboard would slide up. We don't want to do that. Hence the complexity in here when we're actually getting the animation duration on the curve of the inner animation now by curve of animation. Imagine a graph of a sine wave or co sign or whatever it goes up really slow to start with and then shoots up, comes back down and slows down at the end. And in animation terms. That's what we're talking about when we say it curve, because an animation doesn't just start going a constant speed and stop that that looks very dated nowadays. It's a curve, so if you watch my cursor, it goes up very slowly on an up faster down faster and then down very slowly and stops. And it makes everything much. Okay, Have a quick break, my throat hats. It's a lot of talking. I'm gonna hit play and let's see if I have done my work correctly from moving this keyboard up and down. Here we go. So we're already locked in. Let's click this item in the bottom and there we have our keyboard moving around so we can type stuff. We can press return and it's gone. Now what I want you to pay close attention to is when I click this text field, everything animates the same speed. And I want you to notice that the animation starts slow, speeds up and then slows down at the end. Just watch it carefully. She'll notice it kind of slows as it pulls into the station. If you like trains, slows down, speeds up, slows down. Okay, so that is, I would say simple, but it wasn't really that simple, was it? That is a great way of moving things up and down now. I discovered this method somewhere on Stack overflow on. I don't know where it was, but it was an open source license. So we're free to use this code on before this. I actually used to do this in the view controller itself, which is one way of doing it. You confined references to that way of hiding and showing keyboard and moving the view programmatically that way. But I think this is a fantastic way. Just change your constraints to move stuff up and down and then see what's going on with your animations and make your view movement. Match your animations. So I know this has been a long lecture. Well done for sticking it out. It was a tough one. All right, I'll see you in the next one. 104. M12 10 Sending and Receiving Data to and From a Firebase Database: Now we're going to be getting to the actual meat and bones off this app, which is sending and receiving data using fire base to and from. And we're also gonna look at how to attach a listener what's called a listener to our fire based data. So when something changes up in the cloud, our APP will get notified and it will get given the new object or the old object that's changed so we don't actually have to go and pull the server for the data. It automatically delivers it to us. This is a lot like BlackBerries usedto work. They would push your email to you, and it's the same thing that's happening here. Fire Base is pushing the messages to your app, so let's have a look at how it's done now. The first thing we actually to consider is this heart file, because firebase actually changes pretty frequently, and there's a lot of changes between versions. I think that's settling down now now that it's getting a bit more mature. But in the inside of our app, when we normally imports the firebase functions that fire base items, what we're actually going to import is the fire based database. But before we do any coding, I just want to give you a way off making sure that the firebase dates base is available. Technically, if we open up our pod file on don't use text editor to do it used explode. We have another part file. We have five base dates base already available, and you have to make sure that you have that line available. Because, for example, if I comment that line out, I save it. I quit X code. I go to our terminal and we CD into our project like this. Don't worry. You don't have to do this yourself. What if I got to remove that? There we go. And let's have a part in stall. So that's going to remove our database, right? So our plans are installed. Now, if we go to our workspace and this I'm doing this because this is a common problem people come across and message me about is that they then go to their view control. And they say Right now I need to import my firebase database and you're going to get a nice little red era, probably from X code saying this firebase database doesn't exist. So if I had command be and try to build this build failed and there's no such module, and that is normally because inside of here we haven't included this part. But luckily we have. So if you run across that type of era, change your profile to match what you need so we can quit X toad. We can party install again, and this time it will go and collect five based database for us. Okay, so the reason that firebase actually breaks things down, So lots of different modules because you don't necessarily need every module that fire base can supply. You need off dates base, and you need the basic firebase functions as we can see in here, right? So now we can move on to actually sending and receiving data. Once you know you have this correct pot, go over to your main view controller and write that line in import firebase database. You may have to rebuild your app, and when you do that, error should get away because dates base is actually available. Now, the first thing we have to do is actually subscribe to our database on fire base. Now, if you recall, Fire base is already set up through our app delegate when we set up firebase app doctor configure and that went to go and look for Google surface info dot p list and it does all the magic for us so we can go straight to view control and we can just start using it. So let's have a function in here function and let's call this set up firebase. We might change the name of that function to be a bit more descriptive later on, but that will do for now. Okay, Now, what does firebase require? Well, the first thing it actually requires is a reference to the database. So this is going to be a class level variable. So somewhere near the top, let's have our ref, and this is going to be a type off database reference. It's just a reference Teoh to the dates base that we haven't. I'm just simply gonna make this Ah, or what I'm doing here. When I put the exclamation mark, it is. I'm saying this is optional, but it's definitely there. So we just leaving it at that, and of course I could have done the same thing up here if I wanted to. Okay, so we got our reference. Then we need one further thing, which is a handle to the database that we're trying to access on the part of the database or trying to access. And this is so that later on, when we want to remove that listener, we have a reference to the handle. So this is gonna be for our riff handle. And this is going to be of type, as you guessed database handle. If you're wondering how I know all of this, I don't. It's only because I've looked at the documentation on Fire Base and it will tell you how to do all of this. And it will have examples on get hub as well for you to follow. Right. So we've got the two items. We have dates based reference, and we have the handle for later on. So the first thing we're gonna do is create that reference Ref is equal to database, and it is quite annoying because the old version of fire base would pre penned these with f i r f i R database. So you knew what they were I think by putting database in, it makes it very confusing for a lot of people. It could be any old database anyway, and that's what it is. We have to live database dot and there are First option is database. So we're getting the current reference to it. And this is coming from the APP delegate. Technically, it's all set up here when we configure our app. So we have our database, and then we're going to grab the reference to it. Okay, so we have our reference sorted out. Then we're going to set up our reference handle. And what we're doing in the reference handle is we are going to set up a place in the database that we're listening to you actively so we can receive those messages I told you about in the introduction. Okay, so this is going to be a ref, don't on. It's going to be child and child simply means we're going one level into the database that we're about to name, so I want to reference the place called messages. Now, if you're not quite sure what this means right now, because it's a big abstract and I apologize for that you'll understand what it all means when we actually start using the app and we can go look at our fire based database and you can see these messages on the folders that are created because five X gives United Explorer to use. Right Say we've access these messages and what we're gonna do is we're going to observe these messages. Okay, so we want the first option and there are several options. You can see that observe and ask us for an event time. So you hit enter, then we can put dot and it will show you the event types we have now, Child added means exactly as it sounds. We've added a piece of data under this heading off messages. We've added an object under it. We can have child changed. We can have child moved away or removed, said There's lots of options you can subscribe to now I believe for memory the child changed. We'll also give you child added, but I'm not sure so totally up to do up to you how you could figure wraps. You choose these options as you need them. But normally, Child added, is what you want because people don't edit their messages after they've sent them. So we just want to know when a new one has been added So child at it. And then we can perform something with this data snapshot when we actually receive than you item so we can double click this and we will get a data snapshot returned to us, and then we can do something with that snapshot. So what this is doing is saying when you get some data, send it to me. And then this bit is saying, once you've received the data, do something with it. So inside this code block were guaranteed to have that data snapshot that we actually asked for. Okay, so what are we going to do? Well, remember, we set up these messages, which is a data snapshot, so we can simply add this to our messages. Messages don't upend a new element, which is the date a snapshot. And this is going to require self. It's always satisfying when I add the things that I know. X code is gonna flags an error. But I managed to do it before X code gets to flag. It feels satisfying in some way like a beat. A computer. I know it's childish. Okay, Now comes the tricky bit because we've already set up our table view. Right? And this isn't going to auto execute again. We actually have to explicitly call it. And there are a couple of ways of doing this. Now, the first way you might think is just reload the whole lot. But if you think about it, that's kind of memory intensive. We probably don't want to do that. You only have one new message. We should just insert the message. And as it turns out, or you have to do is have yourself a table view. And there is a function to do that insert Rose at. Okay, so at where do we want to insert this rope? Well, we want to insert the row at an index path, like so and we're going to Instead, she ate an index path, and this is going to be road. We're gonna tell it which row were inserting. So we want to insert itself dot messages don't count minus one. So we're gonna count the number of messages. We're gonna subtract one from it, and that is where we're going to insert our brand new Roath. Now there's another argument it needs. It needs to know which section because we can actually split everything up into sections in our table view, we only have one section. It's the first section, which is at index zero. Okay, and then with So it's just hover over that and see what it means. Do we want a view animation? Well, let's just have dot Let's see what it suggests after alignment. There are tons of animations that you can add to this, and it tells you what it does. But we're just going to set this as automatic, so it chooses an appropriate animation style for you. That's always the safest thing to do when you're doing this kind of stuff to get a consistent feel across your app. Excellent. So we've done all of that stuff. Now we just have to call, set up fire base, inside of our view, did load method, and then I'm just gonna run this now just a double check. Where, what? We aren't gonna have any data in this bear in mind right now, but we're not expecting any data to appear because there is no messages in our firebase database quite yet. Okay, so what's that's loading? We'll just go over to our fire base and you will click on the database icon, and this will show us our database and show us that we have nothing currently in there. We can click Plus, and we can add something if we want to, but we're not going to do that. It's not a great way to do your programming. You should do it from in your applications. Also, notice default. Security rules require users to be authenticated. Okay, so that means no one can write this database unless they're authenticated. And we know that we can change that. Actually, by going to the rules at the top here, the rules tell us that read and write in order to read and write, the authentication must not be equal to no, I eat. The user must be authenticated. You can just completely remove or not equal to know. But it's not a great idea to do that, especially for writing items to your database. Okay, I think my iPhone seems to have crashed as quick that and let's run it again. All right? Everything works. We expect we've gone out a little keyboard that isn't popping up again. And if that's a problem for you, hit command shift K, command shift and okay, and then hit it again. And now it should pop up. It's a little IOS bug. When we hit return, we got our usual things. But more importantly, our list still works, and we don't have any issues around setting up the actual fire base itself. Right? So the next thing we're gonna do is actually give our database some data. So let's create a function in this main view controller called send message. Okay, What is send message need? Well, it actually the data we're gonna send and this is going to be a dictionary. So data and this is going to be composed off. All right. Everything works. We expect we've gone out a little keyboard that isn't popping up again. And if that's a problem for you, hit command shift K command shift, and okay, and then hit it again. And now it should pop up. It's a little IOS bug. When we hit return, we got our usual things. But more importantly, our list still works, and we don't have any issues around setting up the actual fire base itself. Right. So the next thing we're gonna do is actually give our database some data. So let's create a function in this main view controller called send message. And now all we have to do is simply grab a reference and say we're gonna send something to a child called messages. This is gonna grab our child for us or give us a reference to it, at least, and then we're going to add our data to it. So the way we're going to do that is by having a child by orto I d. Now what this does is it heads on over to our fire base, and it adds a tree level underneath off messages. So it's gonna add messages, and then on another tree, it's gonna add our data and you'll see what that looks like in a minute. Then we're going to set a value on it, and this value can be anything. And that's a bit tricky. If you're new to program and you're like, Well, it could be anything. So what should I actually make it? Well, we're gonna make this and array off strength. So let's go to our send message up here. We're gonna pass in some data, which is off type string and string. Let me just correct that capitalization then. And then all we have to do is set that as the data we are sending, so it's an array off key values for now. Now, it's not obvious why I'm doing that. You might be asking. Why don't you just send a string? Well, I'm actually setting you up for the homework that you're going to do a bit later on. This Quite difficult. So I thought I'd help you out now by setting the correct data structure so you can actually get through the homework. Okay, so that is the only line we need to actually set the date, and we'll see what that looks like when it fires. Now, over here, when we press return on our text field, you remember keyboard pops up with press returning pops down. We're actually going to send that message. So let's create data from the message, which is equal to now. We are sending an array of keys and values over to fire base. So we have to have the same format down here. When we're creating our data packet, so open close our square brackets and we need a key. Now remember, we made a constants file and this contains all the keys that we actually need. So we go back to a few controller, we can use that as a keys. You have a consistent key everywhere we go in our and can you see how, Having like a constants structure, he's very, very useful. So message fields don't text, and then that's the key. What's the value? Well, it's actually value from this text Field se text field Don't text and exclamation mark. Right? So we are unwrapping the texture because we're pretty sure that will be text. Even if there is no text is going to send an empty packet Now you can put a little check in here to say if the length of the text field is exa, why, then you should do that. I think we should actually do that. We should check that length of text. So if the text field after text darks and what was it? Characters? Duct count is less than Let's just put something less than two or even one, actually, yes. If it zero, then we have a problem. Then we're just going to return what we need. We just come out of this again so it won't actually get through to the next section. And we have a bull. So we should return. Perhaps false, because we have to return a Boolean. So we're just checking how long these text fields are, right? If it's long when we can get if it's longer than zero, we can get out data, and then we can send our message, send message, and we can drop the data in simple enough. And then it will run through everything. That message writing ended and sent to fire base. That's just a message for ourselves, right? So in those that little function and in this little section we've created our data packet, which is simply an array off key and value pairs. You could also have inter jizz and things here, but we won't go into that. We're just doing very basic fire base. So let's play this on out of life and let's watch the magic as it happens. Right? So I'm gonna go over to our keyboard. Who's gonna type that. And before I press return, there's nothing in our fire base over here. And normally this updates in real time. If it doesn't update in real time, just refresh the page and it will stop doing so. So I'm about to hit return Bang there. We have messages and this number is unique. I think it's guaranteed unique as a child by auto ideas. Remember, in our code, we have this. That's what that's doing. It's creating this child, identify, and that's unique across all of fire base. I believe you have to double check, but I think that's what it is. So if you have to fire base APS, they can communicate using these unique identifies. If that's the way you want to do, things sounds complicated to me. I would do it. But anyway, if you expand out, we now have text and that that's exactly the text that were sent. And more importantly, we have that showing at the top of our list, and we haven't actually modified out less, so it gets rid of this horrible grace selector, but that's what it is. Let's type second message. Let's press, enter and enter lets you do it. So we now have second message. Now, of course, you can change the order. These get inserted in at the moment. It's inserting it at the bottom. You might want to insert it at the top. Totally up to you. Totally up to you. I again I'm just showing you the basics of fire base here. And of course, if we go back to our explorer, we have a new object with second message. Now, what if I go to messages here and I click? Plus, And what are we gonna do here? I'm going to give this a random string as an identify. I'm gonna have forward slash text. I'm gonna give this a value third message. I'm gonna add it. So I've added another object here. And if we go to our app, it appears, and that is because our app is listening here. It's observing the changes. And when we make change, it's grabbing that snapshot and it is dropping it into our messages and inserting it into our table view according to our code. So there's a lot going on there, and fire base actually makes it quite easy for us to do this kind of operation. Pry it, er, stuff like fire base and passed, which I mentioned a few lectures ago. This was very difficult to do, so there was a lot of code involved around it and it was prone. Teoh. Look, you needed a lot of time to coat this correctly, but as it stands, we have a great little system for doing this. So they go, the listeners come in, it's loaded up all three off our messages just fantastic. Right now, there's one final thing that we have to do here, and that's because we've set up this child. We actually need to get rid of it when we d initialize. So if this view controller is going away, which is unlikely because it's our main view controller, we should actually get rid off that child off messages Listener ducks remove. You can remove all observers, or you can remove the observer with the handle. So obviously this is the easy one. You could just do that, but we've created a handle up here, so we're just going to remove that item ref handle, so it's going to remove it. So when it goes away, it removes it and we don't have because you don't remove it. You might have something that's trying to access this reference, and then it tries to do something on an object that doesn't exist anymore because we're destroying the view controller. And that's when you'll get some weird crash or at least weird behavior. Okay, so that's the complete item done. We have sorted in the next section. We're gonna move on to adding a bit more data to our firebase objects because we can add way more stuff down here as much as we need to. 105. M12 11 Firebase Cha Chat Homework and Solution: Okay. It's time for you guys to do something yourselves. I'm gonna set you a little bit of homework. Now, I've already set up the data structure for you. So your tasks a fairly simple, but they will need a bit of thought going into them. The first thing I want to do is add the date and time to the message packet that you send to Firebase in the send message function. Now, these could be separate. You can have a separate Dayton time, or you can lump them together totally up to you and record. I've already set up that a ray data structure for you, so you don't really have to think about it that much. Then once you've done that, you actually have to display the date of time like any messaging app. Would you want to know when the message was sent? So what you're gonna do is use the detail text label property in the standard cell in your table view. And to do that, you will need to change the cell type in storyboards or you'll get a crash when you try to write to its text property. So good luck, Bone. Shawn's as they say in France and pause the video now have good go it it. And I'll see you in a few seconds or 1/2 on hour. By the time you've done this to see what my solution to this problem is right here, we g o Here are my solutions to the tasks I set you, which were to add the date and time to the message packet and also display their date and time. So open up X code and compare your solution to mine. Now, the trickiest bit, of course, I think is actually getting the date out of Swift. And you probably had to go on Google and search for this. So what we're gonna do is just go to our utilities dot swift and add a little date getter in here. So let's have a function. Forget date. And this is just going to return a nice, simple string. You don't need anything more than that. Really? Okay. Now, how do you get date out off your IOS system? Well, you have to create a new date. So let today's date, which is a time off date equal to a new date. Objects and I think I've done this before with you. Then we need a date for matter. So let's date for matter. Fairmount. Formentera equal. Teoh A new date for matter and you'll notice here I've specified what type it is. But here I haven't. It doesn't really matter because Swift infers the type from what we're creating here right now, the four matter we can actually specify what we want. So you can make this anything you like. Date for matter. Darts. Date format is a string so we can have equal to. And there are codes that go with the various elements off the date. So to Capitol limbs is the month to lower Case D's is the day four lower case wise is the year and you could put a regular space in there to capital. H Is is the hour. And to lower case EMS is the minute. So obviously that's different to this. This is case sensitive, and you have format this anywhere you like, and you can also look up Apple's documentation for formatting. The date now we have to do is return that date. So return the date for matter. Don't, and we're gonna create a string from the date today's date. So that's going to get the date for us. Okay, so we're gonna save that file, They will go back to our view controller where we want to get the date. Andi, In our send message we can do, we can add the dates on to what we've got there. So you do have an option. You can add the date into text field should return into this data packet, but it's not really part of text Field should return. If you think about it logically, it's more something that you send with every message. So what we should do is actually include it in send a message and this is simple enough. We can just add something to our data. And we didn't give it the key, which is coming from our constance dot message fields Dark date time, which is a string. And then we go get the time, which comes from our utilities don't against dates. We can actually name that get date time just to be a little bit more correct with our naming on what we have here, our because data is a let constant. Okay, so we have a very slight issue here. When we say let what we're saying is you you know you're not gonna change this constant. And what we're trying to do is add something to it so we can get around this. We can say, let's or rough. I've just put the same problem in their VAR packet is equal to date her. That's fine. And then instead of data, we could just have packets here, and then we can also send the packet here. That was a little gotcha waiting to get you when you did this. Okay, so that should send off for date and time. We're gonna test that in a second. But first of all, what we should actually do is go over to our fire base and remove the old data because you don't want to be changing data formats. It's gonna introduce lots of errors. So when you're developing, so is a good idea Toe, wipe the database start again. When you change something that's simple enough to do, you just have to go up two messages. Hit the little X and deleted. Everything is gone. You can also do this programmatically delete everything in your database. But be careful about that, obviously, right? So now we can run it in our SIM. It's just closed that now to to slip. Okay, we get installing. We should have no messages. And now we could test out sending a whatever message. Return that over to our database. We now have date time at it and just okay, and it's also worth pointing out that date times actually have a unique or or a standard format that you can apply to your own date times. We're not doing that here because it's just for a very simple app. But if date times are important to the data structure of Europe, it's worth looking up stuff like Get what? It's cold now. There is a standard for sharing a date in this format. There's also another standard called you Next Time and UNIX Time. It simply measures the number off seconds since general, the 1st 1970 So that's the current UNIX time for the date that we have today. Just things for you to be aware off. Okay, so that all works. We get out date. We can stop that running, but we can't show our date yet. So what we should do is change our This was the second part of the homework the table view before We do have to go to our storyboard and we actually need to change the cell type to be. If we go into its properties and go to its style, we can get a subtitle type. So we have a title. Subtitle Subtitle is where we're going to show that date Coming back to our view Controller We can now go into our self for row at we can say sell dot detailed text label doc text is equal to and what is the equal to? Well, recall we pulled out our message content here, so we're gonna grab our message content. And what's the key? Well, the key again is installed in its very useful constants file. Don't message Fields. Don't date time, Okay? And we're pretty sure it's there. But as usual here were unwrapping an optional It's totally up to you if you want to check this. And actually, when it comes to stuff from the Internet, it's a very good idea. Tohave it, Adam, if let to make sure we get this message content and in fact, it's such a good idea. We're going to do that right now. So if let daytime is equal to just remove this our message content, etcetera, then and only then well, we sent a cell detailed text label text equal to the date time. And I'm actually going to do this for this section two. So if let the text is equal to this, we can remove the unwrapped opening clothes braces on reaching dropped that in today. And what we're doing here is we're just its disaster prevention. We're making sure that if something gets messed up on our database, our user isn't gonna feel that in the app, so that's pretty important now. Of course, you can also do it up here to double check. But I think you get the idea so you can feel free to do that yourself. It's now I'm going to say that, and now we can pull out our detailed text label, which is the date let's hit play, go over to on it life phone, and we should have the date showing, so we'll get the data and there we have our first message. We can send the next bit of data return, and there we have it showing again. So you can see that by having a decent data structure and having an understanding, actually off how table views and cells and things work later on. You can add loads and loads of different things to this data structure, and you'll be able just to change your table view. You change your send message, and the system takes care of everything else. So as a developer, it's and we give you a good piece of advice here that comparable where island, this probably through tough experience is it's better to understand the systems first, even though it's boring to do so, because when you do that, it frees you up in terms of having to create a data structure. As long as you have a basic structure, you can always add to it later and improve things because you understand how table views work. You understand how adding items to your data packets works. All you have to do is add a couple of lines or even remove a couple of lines, and everything still just works. So you know, for example, if I remove this little packet where we added the time and I saved it. Now, in our table view, we don't have a date time, so this in theory won't work. But we've checked for it so we can stop this running. We can press play. We could go back here to our Sim and when it first loads up, get out two messages. It's all fine or good, but when we send another message, we're not adding the date time this time, whatever it is hit return and we have nothing. We have this default subtitle. Of course you can change that. But my grand a point behind all this is you have changed your data structure, remove something, but your APP still works. And I would wager no, totally sure that if you force unwrapped this, then you would have a very big issue. So I'm just going to show you what that looks like. Let date time, because this our force unwrapped it. Even though it's not there. Let's run it on the sim. Let's see what kind off messes we can wrap ourselves into here. Going to get the data? Uh, we have fatal error, unexpectedly found nil while unwrapping an optional value. So there we go. We got a nice red crash. We can click the line bad instruction, and that's corresponds to a crash. How apt is not responsive. And in reality, if you weren't connected to Exco, the app would just disappear. And I'm sure you've had that experience before because I didn't double check this. Stop that running and let's fix everything. So now you understand? You know the realities behind checking things before you do them. When you're getting stuff from the Internet, always, always check it. Okay, enough of me praising on about that. No one likes to be lectured too much, right? Let's actually tidy things up a bit. There's something that's annoying me with this app, and that is when you send a message. Oh, Bangs still got the old version. But when we send a message, the text that we had in the little texts aisam text item, text field, I press return, it doesn't go away. So when you went to send a new message, it's still a fair, and that's a problem, obviously, so we can stop that running, and we can repair that. But first, let's repair the damage. I've done here. Get that packet back. Save it. Let's go back to our firebase. Delete the messages. Okay, so we want to clear that text Text fields should return is going to do that for us. So after we've ended the editing after we've sent our message, we are simply going to say text field don't text is equal to a blank string, so we've removed it. Okay, Now, this is a strange case, and it's something that comes up as you develop. That's a developer. Part in the pun is these things you think you just put here. But this is something I would cut. And I would create a totally separate function for clear text field like this. I'm in. I would drop that in, But even more than that, I would actually pass over this text field. So I would say text field of type whips, off type you I text field. Okay. And then I would actually cut this. I won't have it in here. I would have this in utilities. Now you can create a different utilities file for you, I items, but we're not gonna do that. We're gonna keep it simple. Simple file and we're gonna put it in here because this sort of functionality is something you're gonna do fairly often. So why have it in more than one place? Get back to a few controller and we can call our utilities. Don't clear text field and we can pass over the text field. Save we can hit play. And that should do what it needs to do for us. And as I say, these things just come from experience and understanding what's going on. So send off our message. Return on the text field is has cleared its disappeared. We've got everything sorted. Brilliant. Okay, so that was the first thing that was annoying me, but we fixed it. The next thing it's annoying me is it looks a bit bland. So let's go to our storyboard and let's go to our table view and especially our header off our app or the top bar, which comes from the knave controller. We have our little top bar. Now we can click out naff controller and you'll notice there's a navigation bar that we can change. That looks quite good. I think what we can do here is we can look at its properties over at the top right, and we could change some items. So let's see what Barton does. Let's go to that green that we knew. There we go. We've changed our bartender now bizarrely background. If we click background and we select a random color doesn't actually do anything, So I don't really know the reason for that. But it's not background for these bars. It is actually called bar tint again. I just applied this green color that we had in this main screen. Okay, now we need a title. It looks a bit lame. So I remember we had this little title and we have this Adoni old style book front. Well, let's go to our few controller. Double click the book. I would say double click the bar, but it's not working. Click the navigation item. Go over to title. Let's call this church chat and hit Enter and now we have it Now, quite annoyingly, we can't change the color of the Texan here, and that's because we have to go back to our now controller and we have to change the text color in here or the front, so title color will be white advance should change it here. Let's double check that by running it in the iPhone S E. It's a bit annoying. Sometimes storyboard doesn't change the things that it should be changing or the properties aren't actually office sits white in our out, but it's not in storyboard. So perhaps if you reload the storyboard just by clicking off any clicking again. Still nothing Saturday sorted out Apple. Anyway, let's also change our front, and it's usual. I've forgotten what the fund was over here. But Dhoni's old style book or something says Get, are never Controller Funt custom. Yes, Um, now he runs you a slight problem. We can't use the front that we want to use inside off that little section, so that the ways around this are actually two. Have a picture that we can put up here and image, and we use the image here in chitchat if we wanted. But it's not really what I was aiming this lesson at, so I mean, I'm just making you aware of some items that you need to be aware off. So we can actually do is just change it to a system italics, which, of course, doesn't show in here Not surprised. Thanks. We shouldn't have it hopefully sharing the top of our app. And we don't so welcome to the wonderful world of things not working in X code Sistema are . That's because I've sent a stupid font size off zero. So let's go back to out Custom now works. Welcome to X code bugs everyone and we can now have. But Dhoni, 72 was old style, wasn't it? I telling and done doesn't show in here, but we can hit play. I honestly sometimes I don't know about X code. It's just what? Why don't you update stuff anyway? Now we have Aren't you Chet up at the top? And we can actually increase that size by a few points. And again, a little X code bug here. Stop that running like on. Actually select the button now. Nice one, Apple save you. Control Main store report. There's the button. It's put up to 24 run that. We're almost almost there. Right. Nice. So that matches our little log in Now this text field at the bottom isn't obvious. So let's fix that. Let's go over to our made view controller select the text field, make sure it's selected. We can increase the front there If we want, we can actually also change our background color. So where is it? Here it is. We can use a previous color green to match our app. We can change the text color Teoh White that's gonna match everything that we're doing in our app And then most messaging app actually align things to the right so we can select a right aligned section. Now, when we play, we're starting to get a bit more into the usability and the user interface of this it's just gives it a much better feel overall. So now I can select my little message box. I can type and everything is white colored. I can return, and off it goes. Now, of course, you can set all off these items here If you so wish to different colors, different fonts totally up to you. I think it looks all right. The final thing we're gonna do is get rid of this great Bob. So we've done this before. I go to a few controller on, Let's go to our table view section and let's look for Did select row at okay, and then we're gonna get our table view. Don't Andi. I always forget what this is called. I think it's de select row at That's it at the index path and animated troop. Anyway, let's also change our front and it's usual. I've forgotten what the fund was over here. But Dhoni's old style book or something says Get, are never controller Funt custom. Yes. Um, now he runs you a slight problem. We can't use the front that we want to use inside off that little section so that the ways around this are actually two. Have a picture that we can put up here and image, and we use the image here in chitchat if we wanted. But it's not really what I was aiming this lesson at. So I mean, I'm just making you aware of some items that you need to be aware off. So we can actually do is just change it to a system italics, which, of course, doesn't show in here not surprised. Thanks. We shouldn't have it hopefully sharing the top of our app. And we don't so welcome to the wonderful world of things not working in X Code Sistema are . That's because I've sent a stupid font size off zero. So let's go back to out Custom now works. Welcome to X code bugs everyone and we can now have. But Dhoni, 72 was old style, wasn't it? I telling and done doesn't show in here, but we can hit play. I honestly sometimes I don't know about X code. It's just what? Why don't you update stuff anyway? Now we have, Aren't you Chet up at the top? And we can actually increase that size by a few points. And again, a little X code bug here. Stop that running like on. Actually, select the button now. Nice one, Apple save you. Control Main store report. There's the button. It's put up to 24 run that. We're almost almost there. Right. Nice. So that matches our little log in. Now this text field at the bottom isn't obvious. So let's fix that. Let's go over to our made view controller. Select the text field, make sure it's selected. We can increase the front there. If we want. We can actually also change our background color. So where is it? Here it is we can use a previous color green to match our app. We can change the text color Teoh White that's gonna match everything that we're doing in our app And then most messaging app actually align things to the right so we can select a right aligned section. Now, when we play, we're starting to get a bit more into the usability and the user interface of this it's just gives it a much better feel overall. So now I can select my little message box. I can type and everything is white colored. I can return, and off it goes. Now, of course, you can set all off these items here If you so wish to different colors, different fonts totally up to you. I think it looks all right. The final thing we're gonna do is get rid of this great Bob. So we've done this before. I go to a few controller on, Let's go to our table view section and let's look for Did select row at Okay. And then we're gonna get our table view. Don't, Andi. I always forget what this is called. I think it's de select row at That's it at the index path and animated troop. Now let's play this and we should have everything that we need. So now when we select it d selects the road for us and there's some other things you could do. You can remove these gray lines if you wish you could change the lines of the great colors . I'm not gonna cover that now, but you can just look that up. How to remove the sort of I don't know what you would call them. The splitters. That's a bad word that the lines in table view you'll find what you need to find on the Internet for that one se that is our at a little bit spruced up, and you now have a pretty thorough understanding off how firebase does what it does. 106. M12 12 Cha Chat Summary: All right, guys, you're really getting advanced now in IOS development, we've created a whole re simple whats app cloned Should Chappy I mean, we haven't created chats between different people, but you've got the basic idea. You've got the nuts and bolts that if you wanted to make a real whats app clone, you could do that. It would take a few months. I'm not gonna lie to you and then a few months after that, to get it actually working properly. But you have again the nuts and bolts. So we've covered a lot in this section. We create a nice chat app and you can see I've modified it slightly to make things a bit larger and more bold, totally up to you how you design yours. It's your app, after all, writes the things that we've learned table views. We've looked at table views and houseman bed them in a view controller rather than using a table view controller, which is the stuff we've done previously. So we're just like a nice refresh for you. We looked at how to create our firebase app online. How to user log in and register any new users that want to register in Europe. We also looked at how your dates breaks. Wouldn't let you read or write unless the user was actually locked in. We looked at how to reset their passwords, fire email. So firebase does this all automatically for you. We looked at how to send and receive data back and forth to databases how to listen for new data updates, which is a great fire base thing to do. We also looked a little pitfall that was You have to de register your listener when your view disappears. That's a very important thing to know. And then finally we smart and things up. We added that little selector we made great select a girl way. We just changed the fronts here and there. We looked at some of the idiosyncrasies of X code. No, actually showing us our changes sometimes. But it happens. So there's a warning for you. Run it on the same run it on a real device and see if it actually works there before wondering if you've done something wrong in X code. Always always test for everything, right. So congratulations. You've completed it. You deserve to buy yourself lunch. I think I'm gonna leave you with your usual dose off fireworks 107. M13 1 Introduction to Transcriber App: All right, guys, sit back. This one is going to be epic. We're going to look at transcription, which is something that wasn't that was introduced not too long ago in IOS. And it basically allows us to speak into our microphone and get back a transcribed document or a transcribed bunch of wet. Now, this is very expensive to do. Computational e. So apple actually restrict us a little bit on what we can and can't do, especially in terms of length. But it's a very, very useful thing. And if you have an iPhone and you have a keyboard that pops up, there's a little microphone that you can actually press and that will do the transcription for you. So you can preview what this is gonna look like. But now that this is open to us, develop is we're actually going to make a transcription app, so going to allow you to speak into the app and it's going to transcribe your words for you . And don't mind the screenshots here. We haven't actually quite finished this, and we're going to finish it later on in this module. Of course. That's why we have these things like optionals and what not? But the basics off the APP are here. We're gonna have a tabbed app. We're going to have navigation controllers in combination with tabs, which is an important thing to know about and something we haven't covered yet. And of course, we'll look at transcriptions and along the way we're going to discover a little bit about the IOS file systems. What goes where? Why, when and how, and all the rest of its you can understand where your files are written to write. So along the way, we're gonna learn about tab gaps. We're going to learn about permissions again. These aren't new to you. I hope we're gonna learn about recording from the microphone and the permissions for that, as well as saving those recordings somewhere that will be news you as well as the transcriptions via Serie. That's also knew. We're gonna look at how we play back audio in a very basic manner, and that is really a gateway to making music caps. So once you've got the basic ideas of audio, you can then elevate that on and on in your app creation career. If you want to make music caps I actually started by making music caps for clients. So this is something I know quite a bit about. And then we're also going to look at something to do with court data. Now, most APs require data storage of some sort. And if your data storage is very simple, then we tried to use simple things like the N s use a d folds or just writing a text file whatever it is. But as your data gets more complex, you need to use something more tailored to what you need. And that's what core data is all about. It's the very advanced data system built in to IOS that if you're gonna become a developer , is a must to at least learned the basics. Officer, we're going to learn the basics off. Also, look at simple things like saving text files on the file system where our app is actually allowed to save them. So all that remains to say is Let's go 108. M13 2 Setting up Tabs Navigation Permissions and Core Data: All right, let's set up our app in this particular section. We're going to set up a tab happened. We've done this before. We're gonna look at navigation, which we've done before. We're also going to look at permissions and court data. Now, most about you know something about Perhaps you don't even think about court data yet, but there's really nothing new here. I mean, tabbed apse with covered navigation. We've covered, and I'm just going to sort of lump these together. It's really simple to navigate within Tab, perhaps once you know how to actually do it. Permissions we've covered. So we're gonna be using the microphone to record someone speech. Obviously, Apple want us to ask their permission for that. We're also gonna do a bit of checking to see if we already have permissions. So we can tell the user to grant us permissions from their settings if they've already declined that permission, and then we'll look at setting up a core data. And all that is is simply a check box. When we create our app, it just means that it's included at the start by default so that we can use it later on don't skip this check box or you're gonna have a hell of a time trying to get core data toe work right. So open up X code and let's start a fresh project. Righto. Let's get started with a new X Code project, and we, of course, want to have a tab Zap hit next. And let's call this something like transcriber, but and it's a big but there's something missing from this screen that's not obvious because it's missing. And that's our option to use court date. And for some reason you don't get that when you set up a tab app, which means you have to then go through the painful process off, including core data code later on. So what we're gonna do instead is go back. We're gonna go to a single view app hit next, and you'll notice Use Court data is available here, so collect that on. Let's go to our product name and have it as before, so I really don't know why apple do this, but it is what it is, and there's probably a technical reason for it. It's easier to create a single view app with core data and then transfer that to a tab. Apple, you know, make a tapped out from that single view rather than the other way round, which is to start their tabbed up and try to include core data. You'll just be swimming upstream if you do it that second way. So let's have next on this unless just save it wherever you are going to save it. Okay, so we basically included core data now and perhaps we be able to see it. If we go to build phases on and what we have here No, we won't be able to see what's included with it. That's fine. We can leave that as it is, but we do have core data enabled. It's a bit annoying that it doesn't tell you anywhere that it's enabled. Apart from over on the left hand side, this file is what's going to hold our core data and allow us to browse it. Right. So that's enough about core data. What we're going to do now is set up our app. So goes your main storyboard. We're gonna create our tab app from this. So I'm just gonna create space of yes, we can see what's going on. Okay, so at the moment we have a view controller which we don't actually want. What we need is a tamp bar controller doing click and drag One of those in and this normally comes with two tabs doing just drop it anywhere such as their I just shift this along a bit so we can see it properly. You can move. These were, if you like. There we go. So we can now see everything correctly, right? So we can actually get rid of this initial view controller just selected hit backspace, which, as usual, doesn't work as we expect it to. Let's just shift across here now. Hit, backspace. There we go. So now we have no entry point to the apple. We have to fix that. So let's click out Tear bar controller and select is initial view. Control it so that this arrow appears on it. Okay, so we have our few controllers, but again, we don't actually want these because we're gonna have tables inside off our app. And these tables, these table views, they're gonna hold the previous transcription so he can collect them. We can edit them. We can export them. Do all kinds of stuff with them. So which is gonna delete these view controllers that are dropped in by default? And then we're gonna go look for our table view controllers and we're gonna have two of these one, and to well done, Grant, you can count. And then we're gonna control, click and drag over into the tab to the table view controller, and we're gonna give this of relationship. Now, what relationship do we want? Well, this is a view controller relationship, and you'll notice when you do that, the tabs the bottom appear so we'll do the same control. Click and drag to the 2nd 1 View, control and relationship. And that's going to be the second tab. Okay, so let's select this first view controller and you'll notice the tab. Are item over the top, right? We can change the badge, change various items about it. So let's see what we can do here. Let's just put a test batch in, okay? And that puts a red badge on there. So that's not the thing that we want. We just want to change the name of this. So let's have this set as something like transcriptions. can't make this too long. Otherwise, it doesn't actually fit in this little section here. That doesn't matter for now. We can always beautify it later. Let's go to the 2nd 1 Let's call this favorites. So we're gonna have a list of old transcriptions and then we'll have a list of our favorite transcriptions. So it's an easy access list, right? So we have on table views and each one. We have a table view cell in each one. Okay, so what do we want to do now? Well, let's give our tape of your cells and identify. So we've done this before. Re use. Identify. Let's call this transcription table you sell, and we'll use that later on. When we're trying to create cells, we'll go to the next one. Our favorites. Make sure the cell is selected. That's coolest favor. It's table view. So okay, so we've set up our identify it. Great. Now what if we want to use navigation at this point right now? If let's say I click something in the table cell up here, I would have no way off pushing a new view. Control it because the tab our controller only takes care off the tabs inside. It doesn't take care off navigation. So what you need in a tab? Our case is selective. You controller, for example, this one go to where are we? Editor, embed in knave controller. And now we have a naff controller that sits next to it. So the tab our controller only knows to display this arm off our storyboard. Then the naff controller knows that it must display this table view. So these controllers with thick grayish backgrounds don't actually show anything. That's an important point to know when it comes to development, controllers don't show anything. View controllers show things so we can do the same with this next one. Let's select it for editor in bed in half, Controller. Okay, now I know there are two now controllers here You might be saying that seems like overkill , but it's not I. Strangely, I have seen people tempted to try and use one naff controller for everything, which it just doesn't work. Just don't do that. Please. Whatever you do also, by doing it this way, the correct way is you can have a different history in each tab that gets kept in memory. you can stack more view controllers. Let's say you select a transcription. It goes to an edit screen. You can press share. It goes to a share screen, and then you have this hierarchy stored only in the first tab. And that doesn't effect the second tab case. That's very important for navigation in APS to get these set ups right in the first place, right? Let's spruce this up a bit. Let's select this little tab are on the first now controller, and we can give this a system item. If we like something like history and you'll see what the icon looks like there, we can leave the image as it is, but what else can we do? Well, it would be nice to have some colors in its app, so let's back up a little. Let's select this top now bar. Let's change the tent. Do you and other color? Let's use the color that I defined for this project, which is this one on? The unfortunate thing about designing like this is you need to copy that color over to the other. Now, control, and if you want to change it, you gotta change in two places, which kind of sucks, but that's the way it is. So I've changed the bartender on that. Then if we want to, we can actually change the Barton's on the tab controller. Or we can change the image tint. Let's see what white looks like. Okay, And then what? We want our Barton to be also this colors we can just click this old color. It's stored for us and there we have it, Right, So off as usual. Good point here is to open up our sim and see what this all looks like. So it doesn't look too bad so far, I think. And the more advanced you get is a developer them, or you'll be able to spruce things up much quicker because you understand the systems that lie behind them. Okay, so it's loading. While I know the first thing I have to change is the title color up at the top. Okay, so we got history and got favorites, which has kind of disappeared into oblivion. But that's all right. We can fix that. And at the top, there is actually no whoops. Stop re sizing it at the top. There's no title, so we can change that. Of course we can first change the icon. Let's select favorites, which is a little star. And then up at the top of these on the table view controllers. We can change the title off the item to transcriptions and here can have favorites. And then don't forget, change the knave bar in order to change the font color. So if we want white, we need to change it there. And don't forget that stupid ex code bug that doesn't show it in here. We have to run it on a device simulated to actually see the color change, right so they would go got transcriptions, and we've got favorites. I know it's a bit redundant that it's shown in two places at the bottom and at the top, but that's what it is for now. We can always find ways around that. Okay, so we got already a nice, good basic look for our app. We also need a way to add a transcription. So what we can do is put a bar button up in here under transcriptions. So if we just go to our filter at the bottom right and we type button and I think with use this before we want a bar but an item we can click and drag that and you'll notice it automatically fills that out for us. Usually, the IOS designed paradigm is to actually add the item a plus or a creation button on the right hand, top side. Okay. And we can give this a title if we want to, or we could just give it a system item off and we can change its tint to white. And this does show in X code, which is nice for a change. We can add a title if we want to, but that does get rid off the icon. So if you remove the title when you change it back to that, okay, so now we'll have a little plus icon. And, of course, we'll get back to programming that much later. Wrong, Right? So what's missing? Is it a quiz for, you know, Pop quiz? What's missing? Well, these view controllers have no class. I think that was some sort of joke, but it was a bad one. Anyway, They have no class, no custom table view, control a class, so we have to go and create them. So let's do that. Let's have a new file and we want cocoa touch because it's a type of Did you control a class that we're doing? And we want a U I. Tape of you control the type and you can just scroll and select these if you want, or you can start taping and ex code will also feel for you case. The first only want is transcriptions, whips, table view, controller Next, and just save it in your project. And then we need another one, which is our favorites table view controller. It next and creates. It's right, so we have our to table view controllers. Let's go back to our storyboard and let's assign them So First of all transcriptions, make sure you've set the table view controller and you'll know that because the class the top right tells you what kind of class it is, and you'll be able to select your transcriptions in the same thing for favorites. And here you can see I haven't actually selected. I think I will have right or have selected something else there because I don't have anything on the top, right? So I think it's also selected the relationship. So what you could do is just selected in the list, and then your class will appear at the top, right? You go to favorites, press enter and save, so the table views are now set up. Now, normally, at this point, I actually like to what I like to I like to test the table view controllers. So what I want to do is populate these with some dummy data. If you like. Let's go to our transcriptions table view control of file first. And let's put some dummy data in here so we can just create a simple array called dummy items or something like that. We can delete this later, which is a string array, and this is equal to and we're just gonna put a few strings in here. So just g are Hey, doesn't matter if its capital or anything and team Okay, so you got out dummy items. And remember, when you create this table view controller from a template, it does all the data source for you or the functions you need. All you have to do is change the number of sections 21 The number of rows in this section. This is just counting the data that we have. So let's go, dummy items I don't counts. And then finally, we need to get the actual cell. So we need to uncommon this little section. We need to give it the re use. Identify. So I believe this was transcriptions. Table. Be careful how you spell it so and then we're just gonna go sell dots and text label. Don't text is equal to our dummy and items and index path dumps wrecked and bang just like that. We should have our cells sorted. And we have some other stuff down here to edit our tables. And what not to move them to, to move ourselves. Navigation stuffs. We can ignore that for now. What we do need is a did select row at, and this will allow us to de select the road. Remember? Gray bar that comes up Well, we're going to get rid of that. Nip it in the butt right now. Shrink Cape Select played us on our sin. And our first tab whoops has failed miserably. What does it need? Oh, it needs and override. Okay, let's play. Oh, dear. Now If you click this little red icon the top rights in your little bar, you can see what it expects. Expected a separator. Oh, that's because I've made a mistake in the array. Save it. Running's So it's silly little mistakes that get you. I think I appear to have an error I can see in the background here. It's telling me that I have some sort of era. Don't know what that's all about. So if we scroll up in our output, we have lots of horrendous messages. There we go, unable to deke your cell with identify a transcriptions table view. So and that's what I mean about getting it right the first time. Go to our storyboard. Let's go to our transcriptions, urged the cell on and I transcript Shin is what I should have. Let's go to our transcriptions, table view controller and correct that That's the crash I was talking about. That can happen when you get that wrong and I have another era. What is the era here? Transcription table view. It's still roam. Well, let's see. What have I done? Let's get out cell after the s right. So like I keep saying I should follow my own advice. Copy, dance. Let's go over to our file and paste it to make sure it's the same. Now let's play it on our SIM and hopefully I've done it right this time. There we go. We have ourselves and we have our de select right, so that's sorted. We can do the same in favorites, and I think we should just to make sure that we've got everything right. What we can do is just copy over the dummy items. First of all, command See, go over to our favorites view controller dropout dummies in their Let's go back to our transcriptions. We can simply actually copy over all of this table view stuff because it should be more or less the same. Apart from you guessed it the identify for the table view cells. Let's go see what that is in the main story board favorites. I think I'll change that to favorite table view cell, Come over to our file and paste it in. Okay, now let's hit play, and we should now have a favorites table view, rocking and rolling. So his grant and favorites and they scroll a bit. We don't have enough data to stroll off the screen yet, but we can leave it as is. And also we can check that little plus icon in the top corner that elex we are more or less good. Teoh. Okay, so let's stop that running. Let's go back to our storyboard and this is the last thing we're going to do in this section is actually setting up our permissions screen. Now, just before we do that, the reason we're setting up a screen four permissions is that when our app first actually loads, we can, as usual, ask our user for permission. So whatever tab they're in, they can ask for permission. Now, you we know from experience This is simply an alert controller that pops up that allows the user to click OK or cancel or whatever it is or decline that cause an issue because this app completely depends on permissions. Without it, the APP cannot run. So when it comes to APS like that, I personally like to have a separate screen that is shown to the user. If there is no permission for the thing that we need, that specifically outlines what they need to do, and also additionally, it gets them to press a button, which brings up the pop up to grant permissions so they know what they've done. They've read it, they know what's going on. It's an important thing to note because and I don't mean to be rude about users, but you get a lot of stupid users and they will give you one star because they don't understand permissions or, more likely, you haven't actually explained what's going on to them. So this is my default way of asking for important permissions. I grab a view controller. Awesome, right? I'll drop it in. This isn't attached to the tabs or the navigation controllers. This is gonna be completely stand alone. And it's gonna show over whatever we have and will not allow it. Used to go forever until they actually grant permissions. Okay, so we have our few controller now this view controller for Click our Class Inspector, it doesn't have a class yet. We'll create one, obviously, but it does have a storyboard. I d. And this is how we're going to reference it. I think I've done this before with you. So permissions view control of easy So that's how we're going to actually reference this view controller. Right? So let's give it a little bit of ah, sprucing up, shall we? Let's select the main view of it. Let's change that fuse background and we should have a color history somewhere. There we go. We can have that same pinky red color and what we need where we need some text to explain what's going on to our user. This is gonna be a text view. This allows multiple lines off textures you can see now inside off the attributes section. We can put drop some text to our user. Say this APP needs access to your microphone in order to transcribe your spinach effectively click allow to grunt access. Okay. And then we can just smooth this out, put it in the middle. We can change the color of the front. So we're doing a white front, and now we need to get rid of that background. So let's scroll down. Change out background. Oops, that's disappeared. Background to clear. So clear makes it see through. We can go back up. You can increase the front Ah, section the wrong thing here. We'll just do with a pop up box and done okay, so we now have little access. Screen message. Let's drop in a button, just a regular old button double click and call it allow. Change its color to a white and turn up the font size. Drop it somewhere in the center like, say, Okay, so we can just position stuff. Now let's get this text field. Let's drop it or is entirely vertically in the center. We can offset this item by double clicking it minus. I have no 1 30 step. Do it. That was pretty close, wasn't it? That was very close. Let's give it a width and a height and or actually drop that down a bit. I'm going to position my button in the center. I'm going to give that button a fixed width, something nice and wide. Oh, and a fixed heights, nice and large that using compress it and then let's just whoops. Let's control click and dragged to the label and give us a vertical spacing, okay, and then you can shuffle these things around according to your taste, so we want this button to be very, very prominent so it can increase the size to do that. Okay, I think that doesn't look too bad. There's lots of shuffling. Do you can actually justify the text in here to make it look a little better? I think that looks a little bit neater. Let's just change. This s here. Transcribe your speech. Okay, that looks pretty good. Now, the final thing we do is create a view control, and that goes with this. So add a new file cocoa touch class, and we want a plain old few controller, and we will call this permissions view controller next and create. Go back to the story board and let's assign it in the class. Inspector, save your project. And we are moralist done with the whole you I off our you can see. That's only taking us about half an hour to go from beginning to almost the end of setting up our You are obviously there tweaks down the road. But I mean, look at it. It's pretty impressive. As it stands, we've made a nice, coherent color scheme just on the off chance just by using the inbuilt elements, and we've added all the screens that were likely to need. Now what's not obvious, and what I haven't included in this section is the fact that I prepared for this. I actually wrote stuff on paper, and if you're part of the new generation papers, this really old technology where you can just write, um, it's like an apple pencil, but it's just called pencil. It's amazing. Sorry I'm being sarcastic. It's It's my nation. But if you have a nap idea, write it down on paper, clam these things out, and then you can come over to your storyboards and bam you can put out. You can get the whole thing out on a storyboard and then program from that point, and that makes at your whole life a lot easier. Once you can view the entirety off your app and what it's going to look like in the future 109. M13 3 Checking Existing Permissions and Requesting Permissions for Microphone and Speech: Now that we've got our moral s set up in terms of graphics, it's time to do a little bit of coding. So now we're gonna check and request permission from microphone and speech recognition if that is something that we have to do, depending on the result off the check. So, in a way, we're kind of hijacking the process that apple a implements for doing this kind of thing for asking for permissions. We need to do that because our app completely depends on these permissions. So we have to stop the user in their tracks so that they can make the app work correctly. So let's open up X code and see what I'm talking about. Right? So here we are with our basic ab sort of laid out in our storyboard and recall. We have this view controller that tells us if three user hasn't actually granted access yet or it shows when the user first loads the out so that they can click allow and grant access . Okay, so what we're gonna do is start programming this. But first, we need a way to actually check if we should show that screen around and the way to do that is to check the existing permissions, and the obvious place to do that is in this very first few controller transcriptions that shows as the first tab in our app. So when that loads will check permissions, if they're not right, we're going to fire up this extra view controller to allow the user to allow everything or give him a different kind of message. Okay, so let's go over to our transcriptions. A few controller, I believe that's what I call it. Yep, table view controller. Now, first of all, inside of here, we have to import a couple off things. The first thing we need to import is what's called the A V Foundation and that stands for Audio Video Foundation. And we need that in order to check for recording permissions and that kind of thing. Then we're also going to import speech and speech is related to Sirikit and allowing us to grab permissions for transcription and that kind of thing rights. Now on its creative function, that's going to check the existing permissions so anywhere in your view controller outside of this table view source, of course, cause we want to keep our section separate. Let's have a funk for check permissions open and close our braces. Okay, Now, the first thing we're gonna see is if we have authorized recording recording permissions. So let's wreck authorized is equal to and this comes from the a V audio session. Shared instance. Don't record permission. Okay, So if we've got that and it is equal to the duct granted category there it is, Then we can do something with it. So what I've just done here is a little swift trick we have. And if I just move this stuff out the way on the side, you can see it all in one line. We have this single line, but we have an equals and equals equals. What I'm saying is, let record off. This will be a boolean that ends up with, I believe, which is hover over it. It might tell us. No, it doesn't. Whatever we're saying, if this is equal to this, then we're gonna set this so this could end up as true or false. Is our recording authorized? Here's a little swift, short hand there. Rather than taking two lines in order to do it or saying, if statement or something like that, then we're going to check if our transcription is authorized and this comes out off the S F speech. Recognize a class don't, and this is simply the authorization status and we'll do the same trick. If it's equal to dot authorized. I wish they would think that's the one. Yes, I wish they would give these words of same or use the same syntax rather in these different items. But it is what it is. They will probably change that eventually. So everything matches up and make sense for us. So now we have two variables to see if we're authorized for recording and to see if we are authorized for transcription. Okay, now we'll do. Another little advance programming trick is we're going to actually combined record off and transcribe off, because if you think about it, both of these have to be true for us. Toe operate the up correctly so we can make a single Boolean called Met off is equal to recode off and then we type and and transcribe off. It's this combines the billions and if one of these is false, then off will be false Orth will be true only if both off these are true. Okay, it's a little handy trick for you were really condensing our code down these days. Now we can check if not both. So if we're not authorized, then we're going to do something. Show off few controller and we'll fill the code in in a little bit. Else we can do something else else. Well, what else do we actually need to do? If we're authorized, we can continue to use the app There's nothing to check for so we don't actually need and else we can leave that out. Okay, so now we can fill in this code inside off the if statement, And the first thing we're gonna do is we're gonna show that authorization view controller that comes from our main story board. So this one here, so we have to grab it, and this could end up being optional. So if let v z is equal to self dot storyboard jobs and we've done this before inst enshi eight view controller with an identify and this is gonna be a string. Let's check in our storyboard again. Exactly what That string waas permissions v C So I've learned from my mistakes. Guys, I'm going to get it right. Permissions VC. So if we can get that few controller, then let's do something with it, such as showing it. How do we show it? Well, we need a navigation controller that takes care of the stack that shown to our users that we're gonna put the view controller run se navigation controller and you'll notice this is optional and it might not exist because you might not have won. And that's why we embedded one inside of our taps. Now you'll notice right at the top. It says up here, the nearest ancestor in the view controller hierarchy. That is the now that is a navigation controller. So this is going to navigate up the tree to the beginning in our storyboard and find the first view controller that's actually closest to, Or rather it's gonna find the first knave controller that's actually closest to this view controller. So that's something to bear in mind for more complex APs. So it's optional, and we are going to present our view controller. We are going to animated and on completion. While we don't actually have to do anything. Okay, so let's fire check permissions inside off. You did load and save it right? Let's run this in our simulator. And because we haven't actually asked for any permissions yet, this should simply display that screen on top of what we currently have. And there we have it, so obviously allowed to do anything, but you'll notice. What's important here is that we're completely blocked inside of this screen. We remove this text around fine, whatever. Actually, can we change this text? Oh, it turns out we can, so we'll change that back. But I want you to notice that the use I can't use the app unless they allow permissions. Let's stop that running. Let's just fix that little annoying scrolling editing thing. So let's click the text box of the text field in our storyboard Onda just its properties. We can switch off creditable and we can switch off selectable, and that should take care of allowing the user to edit the message. It doesn't do us any harm because so what if they edited? It doesn't matter. Okay, so now we have to get the actual permissions. And if you're a call, we need to open up our info dot p list in order to get these. So we need to add a key to it. We hover at the top click plus and we start to search for privacy. And this is going to be to do with microphone usage description. We have to give it a value. And this is what shown to the user and what should we call this? Let's see, transcribe. So we don't really need this to be very detailed because we already have detail on that screen we've created. That's the privacy for the microphone. We need to actually add another key on this key is in s speech recognition, usage description and hit enter. And what I just showed you there was the alternative way to put these properties in. They have a long name and they have a descriptive name. So it's changed the descriptive name for us. Then you can put them in either way. It doesn't really matter. Okay? What should we have for this trends? Scribe er needs to Let's see. Needs this permission. I've read. Can't spell anything today Needs this permission to transcribe your audio. It's totally up to you If you want to say we do not collect your audio in any way or we do not at sea, use your audio in any other way because people are quite wary these days of privacy. Okay, so we've got our to you permissions sorted. Now we just need to ask for permission. And that comes from our allow button when we click it this one. So let's go over to its story board, which is the permissions view controller and what we need to go back, actually, and we need to outlet that button. So open up the assistant control, click and drag allow button clicked so that we can action it and connect it. Great. So we can come back to editing our permissions view controller code an inside of here were actually going to request permissions. So let's create a function first of all to request our record permissions and after that will also create a function to request transcribe permissions. Okay, Now what we're gonna do is, first of all, we're gonna get the recording permissions, which is fine. And then if we get those, then we'll move on to ask for transcription, so we won't ask for them both at the same time. So we'll have a little cascade going on inside of our allow button clicks. We're gonna have request record commissions Festival. Okay, so how do we get them? Well, we need our A V audio session. So at the top, we have to import a V foundation, and we also have to import speech. That's for the transcription permissions. Right? Let's ask for audio permission. So a V audio session dot shared instance dot request record permission. Okay. So we can press enter, and it will fill everything for us. Now, this boolean returns whether we actually have permission or not, and we can call this allowed, and then we contest allowed in our code. So if we are allowed, then we can request transcribed permissions. If we're not allowed, we can perhaps send some kind of error message to ourselves, the developers, or two user themselves. And this one, of course, needs to have self. Okay. Now we come down to requesting out transcription permissions, which comes from SF speech. Recognize er dot requests. Authorization. So again, it's I don't like how they change the wording between these things, but anyway, just hit, Enter on the order, complete. And then inside of here, it's going to return you on authorization status. And in the code, we can check it. So a if the off status is true and we can't just have it as this because it's not a Boolean , so we have to compare it to its type, which is dot authorized settle completing the second. Come on or I'll just do it. Thanks. X code opening. Close out braces. So let's just double check that X code knows what we're doing here. Got no areas. That's good, right? So if it's authorized, we are good to go. And that means we can dismiss this view controller. So self dot dismiss animated and on completion, do nothing and totally up to you if you want to write error message here to yourself. Okay, so that's fine. You've got our thing called in. Allow button clicked. Great. Now I'm gonna play this on our sim, and we should see everything working very, very nicely so we can click, allow transfer. I would like to access speech recognition. Okay. And it turns out we already have microphone use, I think, but let's double check that. Let's go to the settings in our phone. Let's go to privacy microphone and it turns out we don't actually have the microphone. So what's actually happening with microphone? I mean, we have speech recognition. That's fine. Let's go back here. Stop this running and actually let's see what's going on because obviously it's come through and it's allowed it. Otherwise we wouldn't get the request for this happening, which we clearly saw happening. So there's something very strange going on here now, what could it be? Well, the first step, when you're doing these things, is you can check your code. We know we've got an info appeal. Yes, that's the most important bit on. We know the code has fallen through to ask for transcriptions. So what I'm gonna do is plug in my iPad, and what I'm gonna do is I'm gonna run it on the iPad, and I'm gonna make sure it asked me for microphone because the simulated can have issues around hardware devices. So if you want to do this, just plug in your device to your Mac, click trust computer or whatever shows and then hit play on it and you're gonna get a build . Failed because signing for transcriber requires a development team. Okay, so what you need to do is just sign up for an apple developer account. Not the paid one. Just the free one. Just go look for on Google. You'll find it immediately. Sign up for it. Go to X code preferences. Uh, preferences, yes. Go to accounts. Click the plus icon and sign in with your apple i d. And once you've done that, simply clean your product and then try to run it on your device again. Andi different requires a development team. Okay, so once you've signed in, go over to your Project folder structure. Click the very top project and click your team and it will do everything you need to. So what I did, there's click transcribe a solution at the top General tab. And then you can select the team which is under here, and it does everything that you needed to do from that point. So now I can hit play. Hopefully, I don't have to clean it, and it's going toe automatically get the certificates and permissions that it needs to run on the iPad. It's the builders succeeded and what, rather than stopping, just show you what's on the iPad. I'm just gonna talk you through what I'm seeing on the iPad. So it's loading slowly but surely I think it's an iPad mini, too. So it's It's a little slow little on the slow side there. So I've got the screen. That's the app there permissions screen. I'm clicking, allow. And it asked me if I want to access the microphone and I've clicked, okay? And then the speech recognition I've clicked, okay? And the permissions screen has disappeared so we can stop that running. And we know it does actually were right. So from now on, we can use the simulator for most of this, most of this. We might need to use the iPad again at some point, but we know that it works. So again, there's a lesson for you test on a real device. It helps a lot. Okay, Now there's something that lurking and waiting to get us. So if we go to our simulator again and we go to I know we don't have microphone, so don't worry about it or do me. Maybe in hardware, we could enable one. No, I'm just hoping for hope there. Anyway. Let's go to speech recognition and let's de authorized transcriber. Okay, then let's close that. Let's double click the home button and swipe off transcriber and then let's run it again. Okay, so we revoked permission and say Came out. It's false. Let's click allow and we get nothing shown. But we know this works. So what's going on? Well, in order for APS not to annoy their users, Apple has made it. So You only get one chance to grant permissions with a pop up. After that, you actually have to change the permissions in settings yourself as the user, and there's nothing your app can do about it. It's very annoying, but that's how it is, right? So let's fix it. Let's go to our permissions view controller and you'll notice that in here we've got our view did load. And so what are we gonna do? I'm just trying to think Well, the first thing we can do actually is check if we fall through to here. Perhaps this error message will show, so let's drop in else into here like so, And let's print something back to ourselves and let's say error here. So it's gonna run this and we're just doing this so we can see where the errors bubble through to now. I got the usual trouble. It's gonna run this and we have our usual issues. When we click allow. We don't get the pop up like we expect and we have error here. So when we click, allow it actually brings us to this point. So that's fine. What we can actually do here is we can change the label texts on our main labor. So is that outlet it it isn't. Let's go to our main story board and let's change this label text so you can give the user a pop up here. Will you just change this text? It's totally up to you. Let's outlet this control click and drag, and we can just call this. It's not label. It's a text view. We can just call this text of you. Simple is that then let's also helped lit the button itself. Not the click, but the button and you'll see why would during that in a minute. Let's come back to our view controller. We have our button and text you now sort it out. And so if we have an era, we should probably create a function to show era state on What are we gonna do here or festival? We're obviously gonna call it self dot show air estate. And the first thing we're gonna do is grab our text field, which should be a detective. You rather text view, doc text and we can set some text for it is equal to. And we can change the text to reflect the fact that the user has denied our APP commissions . You have previously denied this app access to speech recognition. Ah, microphone, please open settings manually and change these and then perhaps tell them No, we'll leave it at that upset. This is an a pro requirement. So totally blame apple for this because it is their fault. They won't let you have another pop up. Okay. And then what else should we do? Well, we should get our button and we should disable the button itself. So disabled, or rather, whoops button dot is enabled is equal to false. And how does your use and know that that is the case or we should have a little animation. You are. You don't animates with duration. Just a really simple one. Let's say over half a second. Go over to animations and hit. Enter and that's dropping some code. Self dot button Don't Alfa is equal to North Point three's. That's gonna dim the button down. Okay, sort it So we can say that and we can run that Raiford And now we'll get perhaps a much better flow. So the user understands what's going on and what the users themselves has done, not us. So we need our permission. Click allow and we have an era. And I knew we're gonna get an error at some point. I just thought we'd come sooner than this. So what's happening? Well, we figural the way down this era. Let's look at what we can get in terms of clues in queued from speech recognition threat five Thread. One is it is a slow, subtle clue here that you need to be aware off. We got two threads complaining Threat five and thread one, and you don't have to know what it means in each one. But you do have to know we got threat three and four to you do have to know that we are actually mixing threads. And I believe I've told you about this before in that when we request stuff and we get a call back, which is what this is, it's not necessarily on the main user interface thread. It could be on a different threat. And that is going to cause you issues when you try to show on air estate and you change stuff on the main thread. So here is where you have the era. You're trying to change this text view from a different threat and you cannot do that se. And we've covered this before. What we have to do is drop this onto the main thread, which happens to be the dispatch que docked main. Don't a sink on all a sink means here is it'll do when it's damn well ready. And then we can take all of this code, cut it and paste it. Here we have the area. You see those purple arats about to disappear? Set text must be called from main threat only. So it's nice that they warn you about that now. Okay, said that should fix that. And whilst we here? Let's look at this self not dismiss. I think that runs on the main threat. So we should have a dispatch. Que don't main a sink running here, and we should cut this code and paste it in here just to be sure and save it. So now we can run it. And we can actually go back to what I was talking about before I was rudely interrupted by a threat crash. Now, when you click allow, you have previously denied us our access to speech recognition or microphone. Please open settings manually and change these. This is an apple requirement and you notice allow has dimmed down. So what we should do is make this text field just a bit bigger in our main story board. So we can fit everything we have that perhaps 1 70 We'll do it. It's hit play and it's double check everything. So we're starting to get a decent flow for our and flow is very important. In the app world. I forget what the stats are. But if someone has to do too many clicks, they'll actually delete your app because of that. So if you're gonna make them click stuff, make sure they know why. So allow you've denied so we can go back. We can go to our settings. We can follow our own instructions for speech recognition on going to go back to our transcriber, and it loads up without any issues so great everything works. That's how we get the permissions that we need. And also, I think, more importantly, it's how we bubble through the various permission requests that we need. By no means is this the only way to do this? There's tons of other ways to do it. But you get the idea. And they were also we've looked at being careful when we're not on the main thread. When we're updating stuff, right, so that completes that lesson. 110. M13 4 Setting up Recording from the Microphone Document Directories and View Controllers: Now that we've got our permissions, we're ready to record. So what we're gonna look at in this section is first of all, the file structure, the very basic file structure in IOS and where we're actually going to store our recordings and following that, we're actually going to set up and get ready to record some audios. We're gonna have some files that we can store our audio transcriptions in and then will actually move on to setting up the microphone for recording. So open up X code will discover where we put files and let's get started. The first step. We're gonna take these to create my favorite file, which is a utilities file in our project, which is a basics with file, of course, and is named utilities. Go ahead and create that and then creates the class off utilities and let's get started. So the first thing we actually need in our Iowa system is to get the documents directory. Now this documents directory is the directory that belongs to this particular app. And in IOS, every app is sandbox. And that means APS can't talk to each other's document directories, at least not easily, and at least not with a whole bunch of permissions. So obviously, that's good for security. Let's had create a function called Get Docks directory, and this is going to return something you might not expect it to return, which is a u R l. And you're probably thinking of the u R l as something you see on the Web. But you're l actually stands for universal resource location or something like that on what it means is it can actually point to a remote server or, as the description says here, to a path to a local file. So in IOS a u r l can actually point to a file on the system, right? So let paths equal now, why have I put parts? Because what I'm about to type could return more than one path. And what are we about to type? Well, we're actually gonna go and find where are documents directory is. And this comes from our file manager. The default version off the file manager dumps you are Els four directory hit Enter. It'll order feel for you and asks you for a search path directory and this is dark document directory and it asks for a file manager at such path Domain Mosque, which is the current users domain mask. And this is the user's home directory. The place from still uses personal items. Now, that's sort of implies that at some point IOS or maybe already IOS has the functionality to have multiple users for a device. Okay, so this is going to this could return more than one. You are out. I don't know the exact technical reasons for it, but I know it does. And you know that if you hover over or just type you RL's again, it tells you returns an array of you RL's Okay, so for now, we're just gonna grab the very 1st 1 that it returns because we can write to it. So let dunks directory equal to those parts we just captured and get the one at index zero . So this you RL's is always going to return at least one directory. It's not optional, so we know it's going to give us something, and then we're going to return the docks directory and we'll save that file. So now we've got the documents directory. That's very handy. It's inside of that documents directory that we're actually going to store our audio file. So we need to get the U r l for our audio file. Let's create that in here, which is a function gets audio file. You are l And this is going to return. You guessed it a u R l Now this is going to be actually optional because this could actually fail. So just make some room ship this up for you. I will see why could fail in a minute. Because this is going to face. This could fail. We're going to have a do catch statement like, so we're gonna fill out our code inside off. Do so This is the bit that could fail. Let's audio u r l equal to try, and we're gonna try and get the docks directory. And that is this that we just created. So we know that works. But what we're gonna do to that because they're returning a u r l weakened. Use all of you RL's methods and functions. What we're gonna do is trying to upend a path component, and that basically means just append a file name to this. So we've got the directory. We're gonna put the border of filing onto it. And the audio file name is going to be something like file dot and M for a That's the file extension and the audio container that we're going to use. Okay. And if that works, we are going to return an audio u R l Otherwise, if this fails, then we're going to return Neil. And that means we can check this optional later on. Now, if we could return the same file name as a file that already exists in this directory, we're gonna overwrite it. And obviously that's not a great idea for our app. If you can only use one file. So we need a changing file name here. So I'm gonna delete this file, and what we're gonna do is we're gonna get dates and time. Plus, so we're gonna create a function to get the current date and time, and that's going to return a more or less unique strength because you record things. You move on in time. If it's one second later, you now have a new a different file names. So this is just a standard way I like to program stuff put date and time is file names. It works really, really well. So let's get a date and time function set up, which is going to return a nice simple string. And then, as usual, you should know how this works. By now we get a new date object. We create a date for matter. Like so we give the four matter a date format, which is simply a string. And as I've referred to previously, this string takes certain items such as year, months, day, our minutes, seconds. So we know that from second to second this is going to be a unique item unless you use the changes time zone. But that's a whole different case. But even then, the chances of them creating the same file at the same date and having traveled across time zones is extremely, extremely low when I say it's low, but you never know till the bug reports start coming in, right? So let's create the time String is equal to four matter dot string from the dates we've created. Whoops. And then let's return that time string. Okay, so we've done all that. That's all good, but you're in advance developer now, so I want to show you a couple tricks that I do just to reduce my code load if you like. So let's let date pretty standard to create a new date so we can remove that and we can actually fill in the date. New object here. There's no need to do it somewhere else. We have our let four matter equals that I think we do need to lines for that. There's nothing we can actually do, and then we can return the time string. But we can remove that, and we can simply return this result saying I've reduced from five lines 23 and it's still very readable. Okay, so now we have our get date and time and we can return that audio. U R l So let's click this item. No calls to throwing functions occur within. Try expression. Fun. Right. So I think this has actually changed. So if we take this again, it doesn't tell us that this throws anything that's you. That's interesting to know. Okay, so the old version of this used to throw an era, but now it actually doesn't, which means we actually don't need any of this. Do catch. So that's something that's changed lately. In Swift. We can remove. Try as well. Okay, so you learn something new every day, right? So now we've set up everything we need. We can get the file. You are l've I the docks directory and get date time. And we're moralist guaranteed to have a unique file name right now. The next thing we're gonna do is set up a screen for the actual recording it. This is a screen to show the user allow them to click a button to actually set up the microphone. So the first step, of course, is goto our storyboard. And let's create a view controller for that functionality. Zoom out of touch. Let's click and drag interview controller. Perhaps somewhere up here. Thank you. Just shift this one down and put this woman talk a case. Got a few controller. Now, this view controller is going to show when the user clicks this plus icon so we can do that outside of code and simply in storyboards by control, clicking the plus and dragging its the view controller. And then we can show this we can present it mode early. It's totally up to us, so if you show it, IOS will give you the back button by default. If you present mode Lee, you need to create your own back button. So I think we'll show it and you'll notice up at the top. We now have the back button. Okay, so this is gonna be our recording scream. So we need a record view control of file to go with this. So let's add a new file. Coca Touch class record view controller hit next and just created. Now go back to our storyboard and we can assign this file to the view controller in the class inspector, and we are more or less ready to go. So it's a good point right here, toe. Actually test this on our sim because we've done a little bit of messing around with utilities and are few controllers. And as I always say, it's good to test things early on and often because it's the best way to find bugs before they become deeply embedded in your app and it becomes a really pain to debug those. You can take it from someone who knows I've done it often enough. Come on, you can do it. I don't if you guys have noticed, but I've got a A new laptop for recording. And it's much, much faster than the old version, right? So dark transcriptions. Let's click the plus and we have our trend. Crip Shin's I really got to change that, but that plus works and we've got no errors. Let's stop that. Let's change that trend. Crip Shin's to transcriptions. Okay, so everything works. Now let's set up our record view controller, where we're going to set up the actual recording part off our So let's import festival, the audio video foundations, the basics of everything we need. And because we're transcribing, we're also gonna import this speech class. Now we need to actually set up this view controller to conform to what's called the A V audio recorder delicates. Now what that means is this. The delegates actually takes care of all the notifications and the firing off of functions that are related to the microphone and external audio things that might actually happen. For example, if your APP received a telephone call last year recording, you need to be able to handle that in some way. So let's set this up as the A V audio recorder delegates. Okay, now, with this, there's actually nothing you have to include by default, so it's pretty handy you've set up you were ready to get. But of course, we'll want to record some or want to set up some things. The festival was gonna make some room. We're going to remove these items that we have default here. You can always add them if we need them. But I like you guys to see a nice, clean screen right now. Like I said, if a call comes in, we need to actually handle that. So let's create our function called audio recorder Did finish recording. So what apologies isn't actually to do with phone calls. This is to do with the recorder has finished recording like the users press stopped or we've reached the time limit. There's no space on the system, so my apologies for saying the wrong thing there. But what this actually does is this fires when use the presses, stop recording. Or, like I say, you run out of space or something, and it fires automatically because this is the delegate, so we don't actually have to call. Stop recording. It does it all for us. Now inside of here. We're going to check if we have finished successfully. This is a flag. So if the flag is false, then we're going to do something because we failed to record else. We're going to do something because recording success. Okay, so we've got those basic framework set up. Let's just put a comment here. Recording failed. What are we gonna do while we're gonna go off and process everything that we have? So we should have some functions for that, like a recording ended function. And this is going to take a success flag off a boo and will do something. Okay, So what we're gonna do is we're gonna pass saver this flag here, So we're gonna say, recording ended, give it the flag. And actually, we don't need this if else do we? Because if you think about it, this bull is correct. So I'm going to remove the if else for now, depict redundant. And I'm simply going to do that now you might say, Why have you split this into two? Well, it's just simply good programing practice in case you start adding things later on. Always earn side of too many functions rather than too few. Okay, so we've more or less taken care of. The framework of recording ended. Now we need a function to record the audience. Okay. Now, when we record audio, we actually need to items on the first of these. We're gonna have visas. Class level variables is an instance off the A V audio recorder itself. And this is the thing that's actually gonna take care of taking your speech in and recording it to a file entrance or encoding it to a file. So far, audio record. He's of type A V audio. And look how many 80 audio things are tons of them. And we want, in particular 80 audio recorder so you can read the description, tells you everything you need to know. And then we need a u r l for that file. So far. Recorded file. You are l is a u R l Whoops. There we go. Now the audio recorder and the earl. We can actually make these optional if we want to, so we can make this optional to double check. It exists, and we can do the same here as well. Right then. All we have to do is actually set some bits and pieces up. So for this recorded file, you are l inside of record audio. We should first set up that you are all from utilities. Sorry. I'm thinking very slowly today. I think I need a coffee. So a recorded file you are l is equal to utilities. Don't get audiophile, Earl. Now, you might be tempted actually to get this and put it in view. Did load. But that would be a mistake. There's a little bug waiting to get you. If you load this screen up, you record some audio, and then you say Now, I don't like that Re record your recorded file. You are l is gonna be the same when you re recorded record something else. And so if you fire up the URL in view did load, it's gonna be the same. And you're gonna overwrite the same file which isn't good over writing is is not a great way of programming. You always want to check these things. So what we're doing here when we record the audio is we're creating a new file now it's just the way I program. You can actually put this in view, did load and then restrict your user to only recording a single file on this screen Or perhaps give him a warning, saying, if they re record, they're gonna overwrite the file. Just something to be aware off, right? No. We can print this out if we like. Let's have our recorded file. You are l. And we know it exists stops and you have to ask for an absolute string for this, actually, print stout. Okay, so for now, let's just find this off in the record audio view did load. Let's run it on our simulator and let's see what it comes up with. So we should get that girl printed out to us. So when we could Plus, there we have it. So down here, that is where your simulator is contained. You'll notice you've got This is on, Mac, by the way, obviously you got your devices. You have your device. I d inside of that device. You have a data container data application, the idea of your application that applications documents and then the file name itself. So you can see at a handy stroke the whole set up off the file system on Iowa's when it comes to your naps storage. Okay, so was set up. We've got are very basic template to record audio. Now, in the next section, we're actually going to look at setting up the microphone and their audio recording session , and there are a few pitfalls here and there when we do that, but we'll see what they are and will finally be able to record some audio. 111. M13 5 Recording Audio from the Microphone: ready. Now that we've set up our document directories, we've done a little bit of preparation for getting the file name they were actually going to record into You're now gonna look at actually recording from the microphone. Now, there are a couple of steps in this, and as you'd imagine, it's it's quite complex because your mobile device only has one microphone that has to be shared between all devices. So what we're gonna do in this section is actually see how Apple constructs things not just for the microphone, but for a lot of things. That pattern is very similar. How we ask for permissions to use those things such as the microphone, and then we how we go about receiving the permission and executing what we need to do. So open up, X coat and let's have a look. Now we're gonna be working in this lecture primarily in this screen that appears when we click the plus icon at the top, and this screen is going to allow us to record our audio. Don't worry about the blue colors at the top. We were gonna pretty this up a little later, Ron in this module for Now we just concentrate on the recording SE. Our recording is primarily redone inside of this record view controller, and we've populated this view controller with a couple of functions. We have one to record the audio which gets our file. You are l. And it also prints it out back to us. So we has developed, has no where it is. Our viewed it low doesn't have actually anything happening in there yet. So we're not actually in Stan Shih ating any recording we have this a V audio recorder delegate and that allows us to tap into a few methods that get called such as audio recorder did finish recording. And we've set up a little function to take care off the end of recording. And that's probably gonna be the place where we transcribe stuff. So at the moment, it's all of it bitty and all over the place, it seems. And don't worry about it. For now, we've got the basic bare necessities to quote a famous movie, right? So we're going to do all of our functionality inside off record audio for recording audio, as you might guess so, First of all, we actually need to create a on audio session. So let session equal to, and this comes out off a V audio session. And if you look at the description, it says this communicates to the system how you intend to use audio in your app? Because, like I said, there's anyone microphone and IOS needs to know how you want to use that microphone. So what we're going to get from here is we're going to get the shared instance, and this is the instance of audio that shared between all of the arms. And once we've got that, we're going to try to set a category off audio playback or recording. So that's simple enough. We just say, Session don't sit. Cats agree. And we give this a category. And we want this particular sex second version, which we give a category to the system. And we're also going to give it some options that we would actually like. Let's hit, Enter now what's the category? Well, this category is a string, and this describes a V audio. See if I can remember this correctly. Session cats agree, and there we have all of our options. We've got record ambience, playback multi route, etcetera. And these are all things you can play with. But we just want play and record, because we're gonna record something and playback. So we're asking for that permission if you like some really a permission. But we can think of it like that to make things easier and then with the A V audio category options, audio session, category options. Sorry is a lot of words there ducks, and we're going to give this some options and we're gonna default to the speaker. We can automatically put this out to airplay. Bluetooth, etcetera were gonna default to the speaker. It's pretty standard stuff if you're gonna make it up in the future that puts audio out to Bluetooth or airplay or whatever it is. It's always a good idea. Generally speaking, to make sure everything works with this default setting Default to speaker. Once you know that on your iPhone, iPad, then you can start doing more advanced stuff. So it's just a little tip for you right now. We have a red era, and I knew this was gonna happen because this call can throw. And that means this can throw an error because you might not actually get it. So we have to try it and then because we're trying it, we have to put this into a do and catch block. We're going to do something, and then we are going to catch any errors that happen. So catch, let's era and that's the whole block set up for us. So that perished. Go away Now on down here. Of course, we can have print failed to record, and we can add on the error dot localized description to give us some more details, right? So we're setting out session now. That's not all we have to do with the session. We actually have to try to set it active. And again, this could throw an error. So try session got set active and you'll notice it says throws in that slaughter complete there. So let's set this active as true, obviously, and the reason that this could fail is because if we're setting this and someone's on the phone call at the same time, it's probably not going to kick them off the phone call in order to do this. After all, the iPhone is our phone, so the phone is gonna take priority over everything else. That's just the way it is right now. We need some settings because we've set our audio session. We're ready to record, but our device doesn't know how to record or what Kodak's or formats to record into. So rather than relying on the default stuff that comes to the system, I'm gonna show you how to create a settings array on this settings array is going to change is going to contain a whole bunch of keys and values that's will specify what we are recording, too. So this is something you need to think carefully about for any APS you make in the future that record stuff because you have to be sure that your files are perhaps cross platform compatible. You don't want to have to re encode them. Teoh. Share them to YouTube or something like that, whatever your system, your at requirements up. So the first thing we're going to start with is the A V format de T. I. D. Key, and this is the format identify, and this is an integer which comes from que Audie hopes should be a K audio, and you'll notice we have all of our formats. You may recognize some of these 83 etcetera, etcetera. If you want to stick to something you know is gonna work, then impact for is something you want to aim for. So if we keep script, look how many there are. There are tons. I was is a great system for the amount of four months you can have. So there are so many. Let's nail this down to format impact. We can have four, and we just want standard A a C, which is at the top yet. So a A. C stands for apple audio Codec, I believe. Okay, so that's the format. Then we have to give it an A V sample rate key, and this is 44 100. You can increase the sample rate. You can decrease it. If you don't know what these are, then by all means Google it. It's pretty easy to understand, but basically it's the sort of big rate we can tell it to. The number of channels a V number off channels key. So we would like stereo now because we're recording from our devices microphone. I don't think we can actually get stereo But if we had an external might connected, chances are pretty good that you can get stereo on that. So it's always best to default to To your files will be slightly larger or probably double the size, actually, but it's just good practice to include two channels Right now, we're going to have the A V n coda audio quality tea. So we're just setting the quality here. A V audio quality don't, and we can have high, low medium etcetera. So I'm gonna have high on this dot's role value, and we require the interview for it because this is actually an array off images, and it's those interviews that gets passed over as settings. I don't know why they vintage is not strings, but it's probably a good reason for it. Right. So what's next? Well, weaken finally ready to try and create our audio recording. So audio wreck. And remember, we create this earlier up here in our class or Dereck is equal to and again, this is something else that can fail. We're gonna try a V order recorder, and we're gonna make a new one of these with some settings. So is this one the URL and the U. R L itself is the recorded file a royal unwrapped because I'm the setting route that can actually fail. I apologize that throughout your array, it's actually array off and get a barrel here. My bed. What can we do is we can put this into and if let or something like that to be sure that this doesn't fail, you looked in our utilities. Okay, so we've set. This is optional, but we don't actually need to because we should get a girl from it. There's nothing forcing us to set an optional here. I believe I could be wrong, but let's see. So I've said that there's no errors here in utilities. Let's go back to our record view controller Andi, let's change this record filed. You are l up here to an exclamation. Gonna tell it explicitly. This does exist, and that means this era will go away. And the reason I've done that is because I'm pretty sure it's going to exist if we get to this point in the coat. But I'm 100% sure because of the way I've actually coded it. Right now we're going to get our audio recorder, and that's still optional. Remember, we're going to set its delegate equal to yourself the instance of this clubs and that now means we can use thes overridden functions here or not overridden, but the life's lifecycle hooks. Sorry, WordPress coding that the hooks that we can go into to find out when things have happened. Okay, delicate equals self. So once we've settle that up and then you have no errors. Now we can finally record and we can say that, right? So it's ready to record what we have to do. Well, we can actually set off recording in view. Did load so record audio. So it's gonna start trying to record as soon as we opened up that screen. We're gonna change that a little later on, but for testing purposes, that's fine. Right now we need to set up our recording ended. So if you recall, this gets called when that delegates function gets fired, what are we going to do against you? Say audio record does stop. Simple is that I always takes care off the file writing and the closing up off the file for us, but it is worth noting don't try to access that file. You are l while still recording because obviously you'll get some kind of weird era like you would in any file system. Okay, Now, if we have a success, then we can transcribe, which might horrendous spelling else we can print out Recording failed Teoh end. Okay, so that's all we really need for there. We might need a some kind of do catch statement here at some point when we come to transcription, but for now, we're okay. So let's run this in our simulator. Andi, let's double check that we can use the microphone on our device. I, er simulator to actually record. So gonna hit the plus icon here and now we should actually be recording now. We don't actually have a way to stop any of this, so if we go back, it will probably stop it. But it's a very bad way to do it. All we were doing there was checking. We have no errors and that the record audio function actually works because a lot of code in there. Right, So let's create a quick storyboard button inside this record view controller toe, actually, stop that recording so we contest it a bit further. So here's our record view controller. Let's drop him but in. And I'm simply going to send to this. I always click the wrong high. Calm down here. It doesn't matter how many years you do this. You always cut the wrong icon. So this button is going to be named Stop recording for now. We can change that text color. So the one where you might expect to match up with our happened, we can just crank it up in size. Okay, say that. Then let's outlet that button. So remember control, click and drag. Stop recording clicked as an action and connect. Okay, Wonderful. We can close our assistant editor. We can head over to our record of you controller and we can ghost that function and we can now end our recording. So will we have to do is have our audio recorder Don't stop. Okay? And that now meanwhile, actually, after Snowden era here, we don't need to call audio record dot Stop here. Technically, in fact, I think what we should do that will leave it. Is this so this is going to stop it. And then when this stops this function is gonna fire without us doing anything. And then recording ended will fire. Which gives us a chance to transcribe if we have a success. Okay? And I'm just gonna print something here recording Successful. So we know everything is okay. Okay. Lets it play. Go over to our simulator and hopefully hopefully we should begin to get, so I'm gonna click. Plus, it should be grabbing everything it needs. It should be recording me right now. I'm gonna hit. Stop and you'll notice down here. We have recording successful right now. We can actually check. That was successful. So if we scroll up in our app to where we print it out this file location what we can do is just go to the documents folder. Copy all of this up to there we can command. See? Copy that. We can open our finder. We can click go when my wheel stops spinning. Go to folder paste. In that address, click Go. And there we have it. Ladies and gentlemen, there's our device. So here are files in the documents for this app. And if you click each fire, it tells you how large it is as long as it's got a size, it's being recorded. And as long as I preview it, so just hit space when you're on it. Wow, you can't hear that. But I sure can. It's using my laptops microphone, which is awful like a laptop. Microphones are including Mac. They're all terrible, terrible. But the good news does work, and it works in the simulator. Now, worth noting that you should test this on a real device, Of course, because you can get different areas in the difference devices. But anyway, that works. And whilst we here, let's look at this file structure. So we have documents. We have this item, this folder with lots of numbers and letters, and that's our APS container. If we go back, one more we go to application, we go to data. Right. Then we go to the actual containers. Are data device OK in developer course simulator devices. That's where you find all of your simulators, right? And then, inside of devices, we can look for our simulator, which begins with 6 to 8. So six to be I can't see it. Was it 60 b? I should be looking No. 6 to 8. It is. Anyway, you get the idea. I can't be bothered to look for everything right now. He's gonna go back devices. Oh, there it is. 6 to 8. And then in your simulated device, you have data container, and then you have the containers for the data. I don't know why they put that twice, but whatever. Then you have your applications. Now it's ref, noting these don't actually contain the app themselves. It's just a place where the APP can write what it needs to write. So documents fold. And that's when we pulled out in the previous lecture. So you know where it's store stuff and we now know that it is successfully recording. Okay, We're just missing a little something here, and that is the ability to tell our user that recording is actually happening right now. Now, if you run this on a real device, if I recall correctly, there should be a little slide down from the top of the screen that says the microphone is being used so your user will know. But it won't harm us to have something inside of the that tells our users that recording is actually happening right now. So in the next section, I'm going to challenge you to create that display 112. M13 6 Transcriber Homework and Solution 1: it's time for you guys to do a little something, So I'm going to set you a very quick piece of homework. At the moment when we click our buttons, stop recording. Our APP stops recording, but I use it doesn't actually know. And our user doesn't know that we are recording apart from the icons and services that I A West provides for that. But we want to be sure the user know. So I'm gonna set you two tasks. One is to make sure the user knows we are currently recording. Perhaps an activity indicator will do that in your storyboards. And two, I want the user to know that recording has stopped when they actually hit the stop button. Totally up to you how you do this. But all I can say is good luck. Pause the video here and I'll be back in a few seconds to give you my answer. Well, how did you guys get on? Did you manage to do it? I remember I sent you to task. One was to tell the user we're currently recording to let them know visually and two was to let them know that we had stopped recording when we click the button. So let's look at how I would approach this problem. Right? So my main starting point is the activity indicator. So here I am in the storyboard. I'm going to search from activity indicated view. And what I'm gonna do is just drop it somewhere near this recording section, and then we can increase the size of it. Yes, I got the 1st 1 Got it right the first time. That time, perhaps 65 by 65. And we can position this relative to stop recording center horizontally, and we can do some vertical spacing on it. Okay, so that's not a recording icon. Now, when we load at this screen, we start recording or thematically. So what we're gonna do is with the activity indicators selected, we're going to select animating on it. And of course, you can change its color. I think it looked quite neat in our APS own color scale modes. Perhaps we can have a feel. I'm not sure that's actually gonna fill it, but it we can try anyway, right? Let's outlet this indicator control, click and drag and just call it activity indicator. And as usual, got that silly bug. What's control click? There we go. Activity indicator. That's what Now let's go back to our Where are we? Record view controller. And on recording ended. We're going to get rid off that activity indicator so you can actually do this in one line of code, you can turn activity indicator. Don't stop animated. Now go back to your story board and you have to ensure that your activity indicator has hides when stopped selected. So now it will disappear once it has finished. So that's how we do that little part. That'll be our activity that we're recording. Then what we're gonna do is change our button text to say, recorded or something like that, because at the moment, are busting is simply stop recording. So do we have a reference to it in here? No, we don't. But we do have a reference to it here. And so what we can do is we can say if let button just call it that is equal to the sender as au I button. Then we could do something. Now it's worth pointing something out here that if I go over to my main storyboard and Let's say we have a button we control click and drag to drop in our clicks function. We can click action. Now. What you can do is you can send over the type of it so you can send an actual button. So I'll just call this test click and you'll notice that over here the sender is now automatically a type of U Y button. And that means that in our other function, we don't actually have to change the sender, which is currently any into a button we don't have to cast it is what it's called totally up to you how you program these things, right? So I'm gonna get rid of that one we just created. So we click our bussing in this story board will go over to leasable Segways and things over here, and we will remove test click. Okay. And then once you've done that, you can actually remove test click from here. If you don't remove it from the storyboard, then it will try to fire a bit of code that doesn't exist and you'll get a crash. Okay, so I'm gonna switch that off. Go back to our view controller now the reason, as far as I can see, this is where was stopped recording. Click. The reason that it sends over a generic object off center is so that you can actually tie these action functions to any kind of item inside off your application, and then you contest to see what the sender is, and you can do certain actions depending on the sender. That means you only have one function for a particular thing that you want to happen, and you can tie it to lots of different objects. Whereas if you sent a center button and then you try to tie this function of I the action Teoh some other elements, it wouldn't necessarily work because we would send over the wrong type A. So far as I know, that's why it's set up like this. So I would advise you to just code in this matter. It's the one you see most often. Okay, so we got our butts, and now we can actually change our button dot title label. Doc Text is equal to perhaps finished recording, and then what we can do is we can just a not disabled set it as disabled. So you use A can press the button and we can also change the Alfa of the button to dim it a bit. Perhaps 2.4 many 0.3. Okay, so let's play that on our SIM. And now we should have a decent display off what's actually happening. So we, the user, are actually informed about that's it. Plus, we're recording, were recording when we hit Stop, the recording goes away and our button dims itself, but it hasn't actually changed the title. That's very strange. So let's stop that. It's changed everything else. That is very strange. Let's go toe Boston John. Have I put the wrong thing in here? Returns. The title gets the current hour we have to have. This is a method offset title. That's my fault. So the title is whatever we're going to set two and four control state Now the control state is simply what state the button is currently in. Andi, I believe we just have normal. You can have default normal, and you can have highlighted, selected or disabled, but we're not gonna worry about that for now, that's recalled. It's cut this over which we can remove all of this? Yes. So unlike a label, which is what's on the button, you don't set the label, doc text, But you have a special set title for it that says Finished house. We just have finished. Now we can run that. Let's it plus stop recording. Finished. Okay. So that pretty much takes care off that you condone bright in their transcribing, if you want. I wanted to. You could change it slightly after to have transcribing totally up to you how you want to do this. But that is the very basic idea off the homer. 113. M13 7 How to Playback Local Audio Files on iOS: Now that we've got our file recorded and stored away in our documents file system, it would be a good idea to actually play it back to our users. So they know that's their audio has been recorded and they can play it because at the moment they have no way of doing apart from the text off our stop button. So let's have a look at how to do that, right? Let's start getting a bit more clever about this. So in most devices on mobile, you have limited space. You can't be adding buttons all over the place, and that means it's a good idea to actually reuse your your eye elements. For the moment, we have a stop recording button on this switches to finished, but that makes it a dead button, which makes it utterly pointless. What's the point of showing something you can't use on the screen and something you also cannot use unless you go back out of the screen and come back in? So what we're gonna do is repurpose this stop recording button so that it changes to a play back recorded audio button. Now you might be wondering how we're gonna do that? Well, let's go over to our record. A few controller and inside of our person. We haven't stopped recording collect. That's fine Now. It would be nice to check if we are currently recording something. So let's see. And this is a good way to program. It's just experiment. Let's go to our audio recorder dumps and we can do is just scroll through everything in here. Oh, we have a Boolean that tells us if it is recording, so that means we contest if it's recording. So if audio is recording, then we can stop the recording and we can change our button over. If it's not recording, then we do actually have some weird issue going on because it should be recording and it tells us it's not unwrapped, and that's because it's optional. So we have to say, if let recording is equal to yada, yada, yada, okay, and then inside of here, this is just a slight repurpose ing. If recording is true, then we can stop else. We can do something new. Okay, so now we have a way of saying if we're recording or not, and that means once we've stopped it we can change the buttons. So let's grab this crowed down here where we get our button. Let's create another function change record button to play button. And this Bring that back a bit. That's a very specific title. But it does what we needed to change that to caps that like to be consistent with my camel casing on this is going to pass in a button off you high button, which means we don't need if let year. So we're gonna cuts this if let we're gonna put it into this section after the audio recorder. And that section is where we're going to call that change records button to play button, and we're gonna pass in this, but okay, sorry. It's childish over to it. Okay? And we can just change the name of that. They're so all of this code still works. Okay, so we've got a button dot set title finished is enabled while we want to keep this brush and enabled so we can delete that and we don't want to dim the button so we can delete that . What we can do here is click play file, or perhaps better than that is play recording or even best than that, sir. I keep changing. My mind is just play play. All right, so now this button, Once we finished recording, it's gonna come in here. Check if we're recording. If we are recording, it's going to stop it. It's going to send that button over to this function. It's gonna change the title. Do it. Then the next time we press the button, it's gonna come back into here. It's going to see that we are not recording, so it's going to go into this else block. So with complex logic like this, it's always a good idea to comment quite well. So not recording time to play audio on then, like rise up here for recording. Stop recording. Okay, so now we know at a glance what our program is actually doing. We just have to change this to that. Okay, so now we can actually play our audio, So let's just have a play audio and let's create that somewhere. Play audio Now, in order to play audio, we need an audio player, and this is where a lot of people go wrong. They will see the boilerplate code they see on the Internet and go right. I know how to do it, and what they'll do is they'll create far some player here and then below this they'll initialize the player, etcetera, etcetera. They will play and we'll see how to do it in a second. But is an error here, and that is, this variable goes out of scope, so it goes out of this funk. Once this functions finished, this variable gets trashed, deleted, which means your player is no longer available, which means you never actually hear anything. Play. So your audio players need to sit somewhere where they don't go out of scope for what you need them for. And that generally means we put them up in the class here so far Audio player. And this is of Type A V audio player. So this provides playback of audio data from a file or memory. There are other kinds off a V players. Just so you are aware of that, let's make this optional. Okay, so in our play audio, we can now set that audio player. Now the first thing to do is to double check that the audio player isn't running, so let's stop it, just in case it shouldn't be, but it's just a nice little check to do. Then we'll create another audio player, which is equal to and this is a throw a ble initialization off the 80 order place or show you what that means. A V audio plan. An instance of a body. A player provides playback of audio data. Well, I said it was throw ble. It used to be at least it appears not to be now. So this requires Are there you go. It will throw something. That's what I was looking for. Contents off a file, Earl. And guess what? We already have that in our recorded file girl. So this is going to be a try, right? Because it's a try. We need to have a do catch around it. So do catch Let's era and the era. And then just whilst we hear that print out, failed to play plus era darks localized a description, right? So we've got our audio player. Hopefully it's ready to start, and once we've done that or weaken do audio player, don't play and notice. Excrete puts in that little question mark to check the optional for us if we want to. We can give ourselves a message to say we're playing, but we don't need to, because we should be able to hear it. Okay, So I'm just gonna run that festival, okay? And what I'm gonna do is turn up the volume on the laptop. We have a build failure. What's the issue? I think that's a lot of issues. That means we have an extra brace somewhere when we say that we should be fine. So I'll run that on the simulator. Normally, when you get a ton of issues, it's because there's a bracket or a brace out of place. He is the other one. Okay, for normal close brackets. Now we can hit play. So when you get tons of errors dough panic, just look for this in tax and the closing statements, the semi Coghlan's. Whatever it is, just look for all of those, right? So I'm gonna hit play. This is now recording, and I'm gonna hit stop, and it's ready to play unplugged my earphones so you can hear this terrible sound quality from my microphone on the laptop and hit play. Okay, stop. Right. So did you have that that quality was. But on the plus side, the play button works and the logic to switch from a record to a play button also works. Okay, so we can play our audio. We're all good. But what if our at is running? We've recorded something like now and then we're playing something. Let's say it's quite a long recording. A minute long, then we go back out of France. Crip Shin's What happens? Well, the audio player is could still be alive if it doesn't get consumed by memory. So you turn this down. What we need to do is ensure the player stops when we exit. So what we're gonna do is we're gonna hook into the life cycle, perhaps down at the bottom, off the view controller called view will disappear, and it's inside of here that we're gonna call audio player, don't stop. And we can actually also do the audio recorder dot stuff. So we're just ensuring that we can actually exit cleanly from here, right? So let's just run that and we're gonna test those two cases, so we're gonna record something we're gonna exit once I sort my life out play we're gonna record something, we're gonna exit, and we're gonna check that we don't get a crash on the audio plane. It does actually stop. So I'm gonna hit. Plus, we're recording. I'm just gonna exit and you'll notice it does actually write the recording for us, which is very, very useful because that means if the user is stupid and trust me, you'll get stupid users. They will still have the recording available if they press the wrong button or if their captors playing on their iPhone right now. What happens if we're doing? Plus, we're recording were recording yada yada. We stopped, we hit, play go transcriptions and you didn't hear that, but it stopped the playback for us. So it's all these little quality things that really make the difference between your APS and all of the rest of the trash that managed to get through APP review. So it's these little things that you've got that will actually take a lot of your time up, right? So that's basically how you play back audio on IOS 114. M13 8 How to Implement Audio Transcription on iOS: we have our sign files. We have our playback sorted. Now we have to do is send off our audio to Siri in order to transcribe it. So let's see how it's done. The first thing we need is somewhere to implement or to show our text from the transcription. So, as usual, let's go to our storyboard and find a place to put this text view into. Now we can shuffle things around in here a little bit, and I think that might actually be a good idea. So what I'm gonna do is I'm going to move this button to stop recording somewhere near the top off this screen. So I'm gonna actually remove this vertical constraint. I'm going to remove the constraint vertically between the activity on the button. And I'm also going to remove this horizontal constraint for the activity and then was gonna have this up here somewhere. I'm gonna offset it a little bit to the left hand side. I believe we could do minus about 60 on this, and then I'm gonna have this activity sat next to it, perhaps about their control. Click. Let's sense of them vertically. And let's give them some horizontal spacing. And finally, let's center this stop recording to the main view. So vertical spacing. So it's it's up to you how you want to do this. Actually, I don't think that looks too great right now, But it's something I leave to you to sort out what looks good and what doesn't. After all, this is your something like that. Right now we have space to drop in a text view, and we've used these before. So put that in there. Let's give this a few constraints. First of all, to the sides. Let's give it a padding of about 20 and then at the top. Let's also give it a patting of about 20. And then we can also give this a position so horizontally and we can control, click and drag to the stop recording, busted and give a vertical spacing. Now it's complaining still, because it doesn't have a fixed height. So let's give up bit of heights, perhaps, but it's up to 200 and now everything's blue. No more complaints from Iowa's right, so select the text view. Let's change some properties over in the top, right? First of all, we don't need all this boiler plate text. We can just delete it. We just write transcription. We'll show here once processing completes, and we don't want them. Actually, I was gonna click off Creditable, but we actually want to leave this edit herbal because the user might want to edit this. So I think it's a good idea to leave it as it is. Okay, I think that's pretty much all we need apart from out letting. So let's click our assistant editor Control, click and drag over to there, and we will give this just a plain old text view. Okay? We can switch off the editor and we can go back to our record. Few controller now, then somewhere in here is getting a bit crowded. I admit function transcribe. What do you? Okay. And we're gonna worry about moving these functions around a bit later on in this module so we can make our app a bit neater and a bit more modular, but for learning purposes. But just write this transcription bit in here, okay? The first thing we need is a speech. Recognize? Er so let recognize er equal to an S F speech. Recognize it if you're cool. We've already important speech up here and we're going to initialize this and then we need to make a request with our file in order to start the whole transcription process. So let's request is equal to an S F speech. You are out recognition request, and this requires just a u r l. And before he got that, that's are recorded file. You are l okay. And now we can actually start recognition. So we grab our recognize that and is this recognize optional? Let's try that again. Yes, it is. So if we have one, we should do the recognize. Er is going to start a recognition task with a request. We just creates that request and then we're going to get a call back, so we know that it's completed. Now, which one of these is it? We can give it a delegate. Let's try this 2nd 1 completion handler. So the request is simple enough. We have that and the result handler simply hit enter and then give this hour results followed by the era. Okay, Now we want to check that. Obviously we did get a result and that there is no error. So let's have God let results equal to the result else will do something, and once you've done something, will returns. What I'm saying is make sure there is a result. Otherwise we have to take care of the area here. And if there isn't a result, it's pretty likely there's an era. And as usual, we print out. So let's just give that a bit of a description at the stop transcription era, and we will do you like So right now, assuming it comes back and we're okay, we're good to go. Then we need to actually write it somewhere. Now. Transcriptions comeback in parts, right? So we need to go. If the results on and it's have a question on there, don't and you'll notice we have is final, right? So we wanna wait. Really? Until we have the final transcription, we can get the transcription results as we go. So that will just rose. We need some other things here. Okay, that's asking us to unwrap it. That's just change that if let's is equal to result, Doctor is final. Okay, So, like I was saying, it comes back in dribs and drabs, so every time you get a result. Back then, it's a partial transcription, and that could be the whole text, but just not very well transcribed. It could be parts of it, I believe. And what we want to do is actually just hang on until we get the final proper result. Okay, so let's give ourselves a message print grant, prepare results and then we're ready to actually display Tell User. But for now, let's get rid of this silly error. Oh, it's just throwing a wobbly. Is that fixed it? No, it's no unwraps. That's because, of course, era is optional. So for now, we'll just ignore that transcription error. If we get it, we can always add the localized description. Okay, so we got our proper results, right? So let's get the text from it. Let thanks equal to the results dot and this is going to be the best transcription. So we want the best transcription out of this, and we want to have this out as a formatted string. Obviously. Okay, once we've got that, we're actually going to write it into a text file stored on our device, But we're gonna do it in this lesson. We're just simply showing it to our user So we can say self dot text view. That's the one we just created in our storyboard doc text is equal to the text we just pulled out. Okay. Right. Sorted now to transcribe the audio, it doesn't really cost the user anything apart from up loading of file. And in this day and age, this is a small file. I don't think we need to wait. Teoh actually wait for the user to press a button to transcribe something. We're just gonna do it automatically. So what we're gonna do is on probably recording ended. If we're successful, we're going to transcribe it, say give ourselves a message and will begin the process. So let's say that and let's run it on our simulator. Okay? Now the question is, will transcription work on a simulator? Well, let's see. I'm gonna record some rubbish. Festival la la la. I'm recording rubbish. We stop and oh, we have a transcription era. Ah, that's because my network is down, which is totally true. So just give me a sec and I'll go fix that right now. Okay? I fixed that. Now let's go back to transcriptions hit, Plus, let's record something new and stop. And now we transcribing plus, next week or something. That's because of the terrible audio quality that comes through a laptop microphone. It just will not pick up the correct transcription, but you'll notice Here, we've got got proper result. So if we stop that running, that's because in our transcription block, where are we here? We've got this firing quite a few times, So it has a few attempts at actually doing this now. I'd encourage you to actually mess around with this and to see what the transcription and the transit describe audio functions all do for you, and you adjust them according to what you need for your own purposes. Okay, now, Final thing before I go, we probably need to set up some kind of error handling related to having no Internet like you just saw. There was no way to know in the app that there was no Internet. So I'm not going to do that now because I think you should have a very good idea of how to do that by now. So I'll tell you leave that to do on your own right. That's enough for transcription will move on to the next section 115. M13 9 How to Save Text Files on iOS: Now that we have a transcription already created from our recording, we've got a bit of text and it would be great if we could actually save that transcription somewhere useful, such as on our Documents folder or in our Documents folder. Rather. So let's look at how we do that. It's pretty simple. Now, just a quick recap in our record view controller. We go off to our utilities and we get a recording filed. Earl, let's go look at that utilities class and we can see we get R value R l which is a combination off a file name based on the date and time and the getting the documents directory. Okay, so now we have to get a file. You are l in order to save a text file. So as you'd imagine, the process is very similar. In fact, it's pretty much the same. So this is actually an architecture problem. So this is something that you should have if you're making it up like this that you would have planned before making the app so that you know what you're doing when you come to actually creating it here Now, of course, I planned this beforehand, so I know what I'm gonna do. But I just thought I'd make you aware of that. Now, it's totally up to you if you want to give your audiophile Earl and your text file Earl a different dating time. Because remember, every time this gets cold, its unique based on the current second off the current time. So I mean, generally speaking, all this is gonna be the same. Minutes will probably be the same, but seconds will be different from second to second, obviously. Now, to make the organization of our happen our files much easier to deal with, it would be handy if our text file that we saved to have the same format and the same base name as the recorded file. And we can do that because the two files have different extensions recorded his M for a on the text file is gonna be t X t. So they'd be exactly the same and later on, when we need to extract them and show them to the user or whatever we're going to do, we know that we can just use the same file name and change the ending in order to grab it if that's the way we want to go. Right. So in order to do that, we have to grab this date time just once, because if we grab twice, it will be different. So in our utilities class, what I'm going to do is grab a var date. Time string, which is gonna be the string. Obviously, we haven't set this. What we're gonna do is call it inside of this function. So what we're gonna do is we're gonna test and see if it already exists. So if let daytime string is equal to daytime's string, then we can simply return that date Time Street. Right? So if we return it, we're obviously not going to do any of this, so we're sorted. But if it doesn't exist yet, then our function is gonna fall through. Our code will fall through Teoh here and actually create the date time strength. Okay. And that means that in our file audiophile u r l When we call, get dating time. We don't have to actually refer to this because this function does everything for us. So that lady's income is the correct way to program for these things now we're gonna have a new function to get our text file. You are else. We're gonna copy this audio file. You are l pasted in and have get text file. You are out. And let's change the name. We don't have to, but it helps for us to understand when looking at this later. And this is gonna be exactly the same. Except the ending is gonna be txt. And we're going to return the text. You are l. Now, if he wants to be clever, you could actually combine these into one function if you wanted to. That's, uh, returned on a generic path and added this to it, using a different function totally up to you. But I think as it stands, we are okay, We're not it too much risk of repeating outsells too much. Okay, so that was pretty easy. We now get out text file. You are l But we should go back to our record view controller. And we should correct for the fact that our utilities is slightly different now. So what? I mean by slightly different Well, if we hit command, different search for utilities in here. There is one instance of it, which is fine. But like I said, every time you create any utilities object from the class, you're going to get a different date time. So what we need to do is just cut this utilities and we should make a class level variable . So far, you tails is equal to a new utilities. And then we're gonna use this because it gives us the consistent date in time across the entire class. Let's go back down here and fill in our you tills. Brilliant. Now what else do we need? Well, we actually need a text file. You are l So back up to the top. Let's have far a text file. You are out, like so on. DWhite. Are we going to do this? Well, what I think I'm actually gonna do is this u r l I am going to cut it. I'm gonna paste it into view. Did load, which is up here. And why am I doing that? Well, technically, we need to do the girls to actually run this view controller. So the best place to initialize them is in our main initialize er, which, for all intents and purposes is viewed it load, so text file your out. And that way we can be sure that they are ready to use later on. It's now we can have. I'll get text file. You are out. Excellent. Right. So what is left? Do Well, we've got our text file. You are l we just need to write our text. So that's gonna happen after we've transcribes our audio. Now what do we get it too? Well, I think it's better here to have a separate function to write text file. And this is gonna take the text, which is obviously just a plain old string. And then what we need to do here, Well, this is actually a thing that could fail. So when you're right into the file system, obviously it can fail. I believe some skin it first, right, The basic code text dorms right to, and we want this option that allows us to have encoding in your notice. It says throws and that throws means that we have to enclose this in a do and try. And of course I can't. And you can print out the catch era if you want. I haven't done that. So it's fine so right. So I've put trying the wrong place with me. So where we right into Well, self dark text file. You are l Are we writing this Atomic Lee? True. Still don't know what that means And what encoding our using what we're going to use a standard string dot encoding dot I believe sense the universal text format. Eight. I think that means there are eight bites her character encoded. Okay, so that's sorted. We can now write our files. So let's run this on our simulator. Whoops. Before I run it on the same. Of course we have to call it. Thank right. Text file and give it the text. Now, I'm gonna run it on the simulator after I write self optional type, huh? So this text, he's actually optional if we get the result. But we know we've got the result because we've fallen through here. So in this case, it's OK to force unwrapped this. It's Let's hit play. Okay, let's hit. Plus, we're recording terrible, terrible recording through my microphone on the laptop and then stop recording. Okay? We're going to tear tear, but we're boarding in town till Sunday night. All right? if you say so. Right? So that should have now, Bean Rison. So what we're gonna do is we're gonna go to this location, so uses bloody, bloody black documents. Let's copy that. Let's go to our finder. Go folder. And here we have all of the previous items we've actually recorded something going to remove those. We don't need them anymore. But down here we have our file, which has exactly the same name as the text from. And if we open the text file, we are boarding in town till Sunday night. Seems to be what it's written. Then we go to our simulator, and that's what we have written it. Now there is a slight floor in this in that this got proper result is actually called many , many times. So our system technically is doing more work than it needs to its writing that file multiple multiple times. Now it's up to you if you want to implement something that's going to fix that and only right to that file once totally up to you. But that is the basics off how we write text files 116. M13 10 Initialising and Saving Core Data in iOS: now that we have transcriptions recorded and the text files associate it with those transcriptions. What we now need is a record whereby we can save the reference to all of these files. And to do that, we're going to look at using core data, which basically a database that sits on your disk on your IOS device, your SSD hard a hard drive obviously like you can see in the picture. Now, of course, there are options for doing this. You can use user defaults preferences, but I wouldn't advise that primarily because it's not designed for a growing data set. Where is core data is more like a traditional database in that it is designed for a enormous data set. And, of course, it comes with tons of tools that allow you to query it really fast and all the various things you expect from a database. If you've used sq light before, then, you'll know exactly what I'm talking about. And again, you can use sq light by all means in IOS. But I prefer to stick with the actual system tools that we're giving, such as core data, because we know their work more consistently and stuff like sq light. Okay, so let's look at how we set up our core data. Now, if you recall when we first created our new and project on abstinence, I'm not gonna create one here, but it's going to show you their wants this option to use core data. If you had selected a single view out, it wasn't actually available in stuff like a tab app. And that's why we went down the route of changing a single view into a tapped out because it was easier to do and have our core data included. Now, if you didn't include this, then what you're gonna have to do is either create a new project and include it this time. Copy all your files across check everything works. Or you can compare the two projects and add the core data code from your new one, which is on approach. I wouldn't actually advise that you do. OK, but you should have select it because I told you to select it. Okay, so now it's time to initialize our core data. So let's create a new class. It's going to do all of the core data heavy lifting for us and we're going to call this a cool data help because there will be more or less the interface. You can call it interface to if you like. This is going to help us access that court date. And now the first thing we import, of course you might guess, is call data. Okay. And then let's call this class core data help. And now we can do some stuff in it. So the first thing we're gonna do is when we initialize this class. First of all, we need to create a container for our core data. So let container equal to and assistant on Ennis persistent container, and this requires a name for it. So we will call this transcription then. This container needs some stores, and we're not setting any up right now. We're just letting the boilerplate code do it for us. So what we're gonna have is a container docked load assistant stores on. All that's doing is initializing the whole thing. And actually, we want a difference. Bit of code. This Let's try that again. Oh, that That has changed. So we have a new thing here, ladies and gentlemen. Okay, So you got this completion handler simply hit enter and it tells you you get back a store description, you might get back on error and then you can do something in your code block. So obviously we want to check if our era is there. Because if it is, that's not good for us. And we're gonna print era in court data in it, and then we can add, as usual, the error description. OK, but if that's okay, we can print ourselves out a message and say core data in it. Fine. Okay, so now we've got that core data helper. What we're gonna do is we're gonna go to our view controller, which is our transcriptions view Come table view controller an inside of here in viewed it load. We're actually going to initialize it. So we're actually not in view. Did load. We can initialize it way up here. We can say of our court Data Helper is equal to a new core data helper. And then I'm simply going to run that on our simulator just to ensure that everything builds and it runs OK, and we have no errors. So core data is it's fairly complex. So It's a good idea, actually, to check this framework early and often and understand exactly what it's doing came. So what we want, we want Teoh check in our outputs. Do we have our output for our core data? It's such for core, right? So we have an era failed to load model named Transcription. And that's perfectly fine because we haven't actually created the transcription model yet. Okay, so that's telling us that in our core data helper, this container that you asked for isn't actually available, so it gives us an error, and that's good. That proves that our error checking is actually working. Ah, but of course we need to fix the air. And I've just seen I made a really stupid era. What we actually need to do is call this transcriber and why? Because the core data that we're referring to the container is over a year. And it's this name transcriber dot exit data model D that we need to be aware off. So transcriber is there now if I run that on my SIM, we should no longer get that error. So there we go. Our core data initialization is fine. So that's my bad. I just did the wrong, slightly wrong thing there. And this is why it's actually good. Teoh Aaron, check all the time because you actually get to the bottom of it before it becomes a deeply buried issues. A core data works, right? So where do we add our models? Well, if we look over on the left hand side, we can see a transcriber door exceed data model. And inside of here, you can think of this as a kind of database with tables. Now, that's probably not exactly true. And it's up to you if you want to go find out how true or not that is and dig into the documentation of it deeper. But for all intents and purposes, it serves our purpose. Now what we're gonna do is add what's called an entity which you can think off is kind of like a table. If you're familiar with SQL, let's click add and see down at the bottom. On up here, you'll notice it's called Entity, and we can rename this just by clicking once to transcription. Now this entity, this table, if you like, need some attributes so we can add them Mr Column up here in the first attributes we can give, this is a text file. You Earl String and you guessed it on audio file. You Earl strength and make sure you spell them better than I did on both of these are going to be strings. Now I like to actually name them off with the type that they've got because it's a handy reference when you're actually typing these into code somewhere. That's all we really need to do right here. So how do we save these values into this so called table? Well, let's go to our core data helper. Luckily, core data makes it very, very easy for us. So the first thing we actually need to do is get the context. Let's make a function to do that and this is going to return. And N s managed object context, which is an object, represented a single object space or scratch pad. It's used to fetch, create and saved managed objects. So this is going to be sort of the central platform for editing, adding removing stuff inside of our core data database. Now the first thing we have to do is get our app. Delegate Remember, the APP delegate is the part of our app that communicates with the system and allows the system to communicate with our app and guzzle various functions around it, including core data. So first of all, if let AP delicate is equal to our you I application or rather just application, I believe these days and we don't have it showing. And that's probably because we need to import. Maybe you I kids, There we go. You I application darks and we're going to get the shared the singleton instance dumps delegate, and this returns you. I application delicate. But what we actually need is to try and convert this to our own app, delegate. And why is that? Well, the APP delegate is where we actually can access at this context that we need in our core data. So if we can get that APD elegant and we should be able to, then we are going to return. What are we going to return? The app delegate Abdel Don't Assistance Container docked view context and you can read all the descriptions on this. It tells you what all of these things are about. Okay, now, because this could actually fail. It won't. In reality, what we're gonna do here is make this optional. And if we can't get that at delegate, then we are simply going to return meal so we can check for out later on so we can actually get this context out. Now we're ready once we have that context reference to create a function called store transcription. And this is obviously going to take a couple of items are audiophiles string and our text file. You are L string. Now it's worth noting at this junction you might want to create a class just called transcription or audio transcription, something like that. And then you can pass over one object from that class to store. At the moment, we only have two items, which is the audio file. You are l I'll just put it like this, which is a string and the text. You are out, which is also a string. So I'm sure you know by now how to create classes and objects that I'm not going to do that at this point just to save a little bit of time. So let's let or if we can get our context. If let context is equal to self doc, get context then we can go ahead and do something with that context. Let's give ourselves a message. Print saving transcription to court data. Okay, So what do we need? Well, first of all, we need to grab the entity. And if you remember, the entity is what we have created up here. So let's an city equal to N s entity description Don't entity. And it asks for an entity name, which is a string on what is this entity name? Well, this is trends Crip Shin and asks for a managed object context which we've already grabbed out as CTX. So that's what we grabbed up here. So we have our context. We have the entity, the reference This isn't the actual entity yet. It's just a reference to the table if you like. So now we have to create the actual entity, the transcription itself. So let transcription equal to N s managed object context or managed object. Rather this one. So this is a generic class imprints all the behaviors required off a core data model object . So that tells you this is how you create the object you're about to save. And then what initialization is Do we have for this what we want this one. So festival, We need the entity itself, and that is the one we create stuff here. So that entity, now that's optional. That might actually fail. So it's up to you if you want to check it in practice. I've never had it fail as long as you're coded correctly and your inside core data. So I'm just gonna force unwrap that for now that are going to insert that into that context we've created. Right? So we have our transcription, the basic basic object. Now we can actually transcript dot Set the value four, our keys and strings. So we're going to set the value here as the audio you are l. And then what's the key? What? This key is going to be equal to what's in here? This attributes. Now it's up to you if you want to make a structure to store these somewhere and make sure you have consistency across Europe. But for now, again for speed. You know how to do that? I'm just going to do it right here, like face. I'm gonna copy. That's and we'll do the same for the text filed. U R l And then I'm just gonna double check these spellings in our data model. Text file. Earl String. Yes, Audio file. You are String. I'm learning from my mistakes here, guys. Right, Scott transcription. We've said our values. Now we have to save it. And when you save, you simply call context or C T. X. Robbins. My folks don't save and you'll notice this throws an error because this could fail. So we have to try it. And because we're trying it, we should wrap this in a do and a catch. Let era equals this. So if we manage to get past this try we should print out a message. Saved two core data successfully. Is that one s or two s? I think there are two s is in that. Otherwise we can print out our usual era A receiving corps, data less, and we can have era dot Localized description, the usual stuff. Okay, Now we need to call this store transcription whenever we need to. And where should we do it? Well, I think we should do it in our record view. controller, obviously. And we should first of all, before we try to save anything we should actually recall or should actually check some variables so far recorded equal to false and far transcribes, equal to false. So as we go through the process of recording and transcribing, weaken, turn these two true. And if they're both true, then of course, we can go ahead and save it in core data. We obviously don't to save things that haven't actually worked yet. So instead, off creating an extra button to save it or actually repurpose ing the button, we already have a reference to somewhere in here that clipped button that we have when we play the transcription and gets transcribed. What we can do is let's think about this skirt, our storyboard. So you got something pictorial to look at. What we can do up here is we can try and be clever about this. So we click, stop recording. It shows playback shows the transcription, and what we can do is we can actually change this item, perhaps save if we want to. But by all means, Once we clicked back out of this, we're going to save our transcription. So that's an interesting proposition. So let's see what we've got here. What we can do to save this to a save is clicked this knave bar on this back button, we can change the title of it. Call this safe when you hit Enter Notice how it changes here. Now it's gonna change for everything that gets pinned off of this, just so you know. So that way we don't have to add an extra button coming back to our record. Few controller class. Now we can look for view, will disappear or unload. And we do actually have that way down at the bottom where we stop everything running. So in here, we can say if and what was it recorded. It's true and transcribed is true. Then we can actually save data save to call danger. And then let's create function to do that. So we need to pull up our core data help. For instance, dumped store transcription. We pass it our audio file. You are out. Now what did I call this? Go back up and see ID Teoh Audio recorded file and text file. Earl. So there we go. Simply store all of that now the U RL's themselves are You are else and we're telling this to store strings. So before we change anything, we can go look at our data model and we can click the types and see what we can do in here . Now there is no girl is a universal resource. Forget what I stands for indicator or something, but I'm not sure that's gonna be compatible. So what we need to do is convert these you RL's two strings. So let's have dot and we can set our absolute string for it. Now that should work. I know the old way of doing this was to actually remove this absolute string. And you could do it this way too, I believe, as a string. Actually, we'll do that just to see what happens. That's what coatings all about seeing what happens. Okay, So if everything's working said that and we have our era describing what we don't want describing some kind of hunting that here we go, we have our absolute string stored, and that should give us a defense decent reference to the file. Okay, so now let's check it inside of the sim and again as usual. If this isn't working for you in the same Tran real device before you change anything, so core data in it. Fine. Let's hit Plus use my awful, awful microphone going off to get the transcription has got the transcription Now I'm gonna hit save at the top on And oh, what did I forget? I forgot to set my flags so it didn't save anything because we have recorded and transcribed his false So let's go down to stop recording clicked and what we want Let's see did finish If our flag is true Recording ended So if success let's put recorded equals trip and then we're gonna transcribe it And inside of here we're going to put transcribed equals True Now I'm gonna run that I press command are to run Oh, rather self doctrine Scribe Dick was true Command are And now we should see our output where it tries to save it to core data se plus use my awful, awful laptop microphone and stop recording you. That's it. Okay, well, it's transcribe something now I'm gonna hit safe and look down. Here we have our initialization is fine saving transcription and save successfully So in our core data helper, we've managed to go through this entire block and we've gone to here, which means safe has actually worked. So we should have something available in our core database, but we can't actually see that anywhere. Now you can install extensions to X code in order to visualize that data. There are tons of them. There's like top 10 articles, even for which extensions people used to visualize the core data. I don't tend to do it because once you know the methodology here, you actually test it later on, when you're pulling out the cord data to show in a list of you, so I tend not to need it. You may want to go and look those up and install them to see what stored in your core data if that's how you want to proceed. But for now, that completes how to write to core data 117. M13 11 Retrieving Data from Core Data and Showing it in a TableView: right now that we have all of our data stored away and core data, it's time to learn how to retrieve it. And it's very, very easy to do and then also show a table view based on the data that we have gotten back . So open up X code and let's do it. The first step of our process is to head over to our core data help class and inside of here that's creative function to get all of our transcriptions. And this is going to return an array, which is optional both Ennis managed objects. Now, if you were creating this app and you created a class to describe your data model, then you would probably want to return on array off that particular data model. But as we haven't done that this time because we just want to do core data, then we have to return NS managed objects. Okay, first thing we need is what's called a fetch request, sir. Let fetch request and we have to specify the type off this fetch request, which is an Ennis Finch request. And with that, we give this a type called transcription and this is going over to our transcriber exit data model, and it is grabbing the transcription out of it. Okay? And this is equal to transcription. Don't fetch request. So it's going off and getting that now you don't have to actually specify this, of course, after specified it. So you can see so you can end up with a bit of code like that. Right now, what we need to do is get our context so we can access our core data and then fetch the actual results. Now, this is actually favorable, so we need a do try statement. But just before that, we have an area here which is ambiguous. Use off fetch requests. I'm not sure what that means, but if we just undo what we just did, perhaps that era will go away. Yeah, I think that era is actually staying away. Good. Okay, So there was a reason I'd actually specified the type because of some silly, ambiguous era. Anyway, coming back to getting our results. We need to have these in a do catch statement, because the thing we're going to try can, of course, fail might have no result who might be unable to access the database. So let's such results equal to and we're going to try Get out context now, context is actually optional. So perhaps we better say up here if let c t x equals self. Don't get context. Then we can actually do what we need to do in here. So we can try C t X don't fetch. And this goes and fetches something using our fetched requests and you'll notice it returns and any array and also throws. So what's our request? What? We've already created that fetch request. Okay. Now we can send ourselves a message. As developers, we have a slight error here. What have I done? Whoops. Let's just do catch here. Ah, we have a slight error because and I have a feeling I know why here air is thrown from here or not handled. What is going on here, people? Oh, that's because that my brackets aren't in place. My braces rather so I cannot do that. And just before we do that with you, put those braces into place. See what I mean about the braces? Right? Coming back in here, we can get our search results and we can print Got for data results just for us to check. Plus, and then we can get our search results and we can simply return the count. We can say number off them or something like that. Okay, then what we're gonna do, and we probably have to turn that to a string. Or actually, you know, what we can do is we can do it the clever way we can do something like numb. We can have back slash whips, back slash, and I don't if you remember this, but I have done this with you before. You can open and close your brackets, and then you can put your i to me today. And that should string of I it. Okay, so we got our search results. Now we're going to loop through each Well, we can actually loop through each search results, and we can print out what we've got. I don't think we actually need to do that. All we need to do at this point is then return such results on a thes. Let's see what type. This is such results. It is transcription, so you can actually convert this as an Ennis managed object. So you have a generic object. It's totally up to you. How you want to do this again? If you had a class where you would define your data model, then you wouldn't actually do this. You would just return the transcription class itself for transcription type. Rather. Okay, so we've got our errors down here. Let's sort that out. Que catch. Let otherwise, if this doesn't work and we don't fall through and we don't get this, then we have to come down here and we have to return now. So we actually have nothing, right? So once we've retrieved these, then we can go and get that store data and update our table view controller on our original screen. So that is this file transcriptions, table view, controller and rebel had dummy items. But we can totally change this. Now we can have far transcriptions. Is an array off ennis managed objects. But we don't have that because we have to import core data here. Okay. And just for ease, we can create a new array off NS managed objects like set. So it's an empty array at the moment. Now, in feuded load, we can go and get our transcriptions. So under check. Permissions, maybe. And then let's create function. So what does this do? Well, this goes and gets those results from our core data. Help us. So if let's results is equal to a new core data helper which we've already created actually up here. So if let core data help her dot get transcriptions and remember, it's optional. Which is why we have if let then we can assign the current transcriptions to that result or yet way around. Rather. Okay, now we just have to update all the other bits and pieces we need. We'll explain what we know, Eric. Good on by other bits and pieces. I mean, this table view data source. So festival, we need to change the count. We need to change this on what we need to change this to. Well, we need to change this perhaps, too, getting the value out of the transcription. So what I'm gonna do is just cut this. I'm just gonna put the audio file you are l or rather I was gonna put fire transcription. Okay, then we can set the actual text of it. So how do we get the text out of it? Well, this is We get our transcription don't value. And we can get this from a key on Which key is this? Well, if you remember, this is audio file. You are out string, and I know we haven't given this a name or anything, but that's fine. We are just checking what we get yet Now, this value, I believe, is optional. Yes, we have a question mark. So if let's you are l string is equal to this. Then we can insert our cell text label. Doc text is equal to you are l string. Now, this is an any this could be anything, but we are pretty sure because it's how we set it that we can convert this to a stream. Okay, so treating a force downcast, strings up will never produced. Now, there we go. We'll do that was never mutated. So let's have let transcription equals that. Okay, so that is our basic table view sorted. So we get out for inscriptions. We get that transcriptions equal to bloody blond. So if we come down to our table view, we have everything we need Now. This in theory should happen before the table view gets loaded with data. So let's find out if that actually happens. Let's hit play. I closed my my simulators. We have to wait for it to load. Right? And there we have it. So we have our basic transcription in here, which, at the moment absolutely doesn't do anything. But we know that we're getting that according to route. Now, what happens if I hit? Plus, we start recording another transcription and we stop on. That should go out. My network is down again. Excuse me whilst I fix that. Okay? Or done. Let's hit. Plus, let's record something and transcribe. Okay. Plus called something n transcribe was pretty close. That's pretty close. Okay, let's go back and save it. And we have an error because we don't actually get to see it inside off here. Of course, if we swipe away our apple, we reload it from ex crows. Then it's gonna load up exactly what we need. We should have to results. Okay, So how do we get around that? Well, that's pretty pretty simple. All we have to do is call, get transcriptions. So I'm gonna cut this in. Not feuded load, But view will appear So every time the view appears, it's gonna go get that data again. That's all right. If your data set isn't absolutely enormous, which core data and just plain text, you should be absolutely fine. I mean, it will be about a few thousands of entries before you noticed any kind of slow down on today's devices. So for Hit Plus, we're recording something else. We stopped recording. It starts to transcribe. We're recordings House, of course, and we go back. We don't have it. And that's because you actually have to call one more thing because the view controller or the table view robber doesn't actually pick up. There's a change you'll notice down here in the deep bugger we've picked up that there are three results, but it's not just displayed in our table view. So what you have to do is we have get transcriptions here, so that's all sorted. That's all done. Once you get those transcriptions, you might want to call table view whips just plain old table view. Don't reloads data. Okay, so now we can run that, and it will reload the data every time it gets those transcriptions again. Now, depending on your data set. If it's like data, it's fine to reload it. If it's heavy data, I just do this whilst I'm talking. If it's heavy data, then you might want to insert a cell rather than get all of your data again, because that's a very expensive process to do. Sorry, I'm distracted by the transcription here. It's a very expensive process to do is tell me I'm wrong. You're so wrong anyway, showing a whole bunch of cells again and again that have to say images in them is an expensive process. You don't want to do that. Okay, so let's go back to safe. And now we have four. And of course, we can repeat this as many times as we like. And as long as the transcription has saved I'm sorry, guys. Its blame Siri, not me. Oh, boy. Okay. And we got We got five results now and nothing happens. Obviously, if we click it, what a thing to save to coordinate it. Anyway, that's how he saved coordinator. Put the data into our table view and how we update the table view once we are done with refreshing it 118. M13 12 EPIC Homework with NO ANSWERS!: Okay, guys, I've got some challenges for you up ahead. These are pretty epic challenges on I'm not going to give you the answer for these because I want you to go and figure them out yourselves. So they are going to be difficult. Please don't give me a one star rating because they are. I'm doing it to improve your analytical skill and your ability to search out answers. Because it's a crucial skill as a developer, even more so than being a programming God, it's searching for stuff. Right? So your first part of the homework is to give the transcription of name, because at the moment we just show a file. You are l in our tape of units. Bit lame. So you want to give the user and ability to enter a name, perhaps in a text view on the recording screen, and then to say that when they hit the save button now a couple of clues all you have to do is give the name into core data. So you know how to do that? You got a template for adding variables to it of strength, and then maybe if the user doesn't fill out the name in the recording screen. You can give the user some kind off alert to let them know that they haven't done it yet. Okay, so Paul was the video here. Go ahead and have a good go at that. As I say, I'm not going to give you any answers for this because you really have to think this stuff through yourself, right? If you're back, then you've completed the first homework. The next homework that I want you to do right now, after this is I want you to implement slide to delete for unwanted transcriptions. Now, this is a bit tricky because you got files, you've got core data and you've got a table view. So primarily you want to implement slights, delete. And you can find that on the web. It's very easy to find, and what you need to do is you need to delete the data from first of all, the core database. Secondly, you need to remove the recorded file on and the text file from your documents system, and you should know how to get a reference to those by now because you have the data and core data and Thirdly, you need to update the table view or simply reload the data, right? So go try that. Now. Pause the video right here, and I'll see you for the next homework. I hope you manage well on that second homework. He is the 3rd 1 We have a favorite screen that hasn't yet Bean implemented, so I want you to do that. I want to give away the user away off favorite ing one off their items. How you do it is totally, totally up to you. And again, you'll want to use core data for this out of Boolean, for example that says his favorite yes or no. So pause here. Go and have a go at that. Hello again. It's time for homework number four. I think this is the final one. You need to allow the user to review and edit transcriptions. So when they press something on the table view, it's going to take them to an edit screen, which shows that the transfer their transcription and allows them to change the text of that transcription if they want to, and then save that again and again. This is all stuff that I've shown you you just need to bring together opening a new view controller from the table view, populating it with the transcription and allowing the use to edit it and then saving that Change it so pretty difficult, but not difficult. If you take it step by step and think logically and again no answers. So pause right here and have a really good go it it. 119. M13 13 Summary of Transcriber App: really well done, guys. You've reached the end of this module. I hope you didn't struggle too much with the homework, but it was very difficult. Homework. I'll admit that here's a little summary off everything you've done. You've created a nice, simple transcriber app and some of the stuff you've learned along the way you've learned how to create Tab APS. Starting from a single view app, you've learned stuff about permissions for the microphone recording and saving of files. You've learned where the document directories are, and you've learned where to store those items, as well as getting transcriptions from Serie turning our voice into text. You've also learned how to do very basic audio playback and some of the permissions issues around that, because your device can only take in one microphone input at a time, so you need to request permission from the system. We've also looked at the very, very basics off core data. Now you could write volumes of books on core data. It's very complex and very, very useful. But that's not what this course serves. This course serves to get you going with actually putting APS on the APP store and of course, we looked at how to save the text files. And I'm sorry I gave your whole ton of homework to go along with all of this. Right? So all that's left to say is wonderful job. Well done. And as usual, here are some fireworks.