iOS App Development for Complete And Utter Beginners ✅ | Grant Klimaytys | Skillshare

iOS App Development for Complete And Utter Beginners ✅

Grant Klimaytys, Software Engineer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
24 Lessons (2h 19m)
    • 1. Introduction

      2:53
    • 2. Video produced by

      0:10
    • 3. Setting up Xcode and iOS Simulators

      2:16
    • 4. Introduction to Programming

      3:32
    • 5. Using a Playground in Xcode

      5:25
    • 6. The Basics of Programming - Variables

      7:45
    • 7. The Basics of Programming - Methods

      7:26
    • 8. Summary of First Code and Exercise

      1:25
    • 9. Creating and Running Your First App

      4:23
    • 10. What on Earth Does all This Code Mean?

      5:43
    • 11. How do you Connect iOS Graphics to Code? (Making Good Stuff Happen)

      5:02
    • 12. Pretty Please Would you Help me Out?

      0:49
    • 13. Making the Main Screen of our Temperature Converter

      11:18
    • 14. Connecting the Main Screen of Temperature Converter to Code

      4:03
    • 15. Writing the Main Code of our Temperature Converter App

      12:52
    • 16. Assignments for Temperature Converter

      4:46
    • 17. Introduction to Calculator App

      0:42
    • 18. Making our Calculator Screen - Layouts

      8:22
    • 19. Making of our Calculator Screen - Buttons

      11:47
    • 20. Connecting Calculator Screen to Code

      4:15
    • 21. Writing the Main Code of our Calculator

      7:31
    • 22. Adding More Numbers to the Display

      12:43
    • 23. Final Code for Performing the Sum

      11:12
    • 24. Final Message and Thanks

      2:21

About This Class

Have you ever thought, "I can't program" ?

I once thought that but I tried anyway. Turns out it was pretty easy and after a few months I became self employed as an App Developer, ramping up my earnings to the tune of $120,000 per year. 

Would that amount of money change your life?

Well this iOS course is where it starts, but only if you click the ENROLL button. Give it a try, you have nothing to lose and everything to gain!

54932fca

Transcripts

1. Introduction: welcome to IOS development for complete and utter beginners. Now, when I started learning to code, I was a complete and utter beginner. That was at least a decade ago, probably about 15 years ago. I can't even remember. But when I first came up to code, it was scary. But now, 15 years later, I can see how easy it can be and how elegant it can be as long as someone teaches you right . So this course is one that I've made for you, the beginner and that is complete and utter beginner. You know nothing about programming toe. Actually make an app. For an IOS device, you'll need a Mac. You'll need X code, which is free from the APP store, and you can run your finished products on the simulators or on your own device if you have one. But you don't need to buy anything further. We're going to start. We're going to start with what's called a playground, and that's where I'm going to show you. What code is what variables are. What functions are what methods are there all big, scary words. But really, all they mean is they are building blocks to make app, software, websites, that kind of thing and I show you how easy it is by comparing it'll to Lego. When you build things with Lego, you start with blocks and there's nothing. It's easier to understand than Lego, right? So that's how I'm going to show you how to perform all of these functions. Once we've done a bit of that, we're going to stop doing it because to be honest, it gets kind of boring after a while. What we're going to do then is plunge straight in, make our first app, and all we're going to do is change some text on a screen. It may sound really easy, but that is going to give you the fundamentals for 90% off all the APS you will ever make. Then we're going to make another app, and this one is going to allow you to convert temperature from Celsius 2 F. When you type in a value and hit a submit button. Then finally, we're going to make a really cool app. We're going to make a fully featured calculator with a really funky retro scheme so that calculator can perform all of those functions you see there in blue. So if you're looking forward to this course, then police click next, please rate the course highly and let's get going. 2. Video produced by: 3. Setting up Xcode and iOS Simulators: So let's install X Code. X Code is Apple's way off giving you the development environment to create APS for iPhone, iPad, Mac and Apple Watch. And if you jump onto Google and such for X code, simply hit the first link and then hit download at the top of that page and then you want stable release, which at this point to 7.1 point one you can view it in the Mac App store and it will open up the APP store for you. I already have it installed, of course, but this tab should say in store to go ahead, install that and then come back to this video. Okay, here I have X code opened, and the first thing we want to do is set up our simulated because if you want to run your projects, you will need to run them on a simulator. If you don't have a developer account to run them on a real device, you will need to have an apple developer account, and you'll need to pay the £70 or so per year toe have that. I'll go into that a little later on, so we know what we're doing. But for now, let's set up those simulators that's click window devices, and in here it gives us a list of devices that are currently installed on your device. Yours probably won't have any. So if you click, plus at the bottom corner click add simulator that allows you to choose a device type and an IOS version. If there are no IOS versions in there, you can press download more simulators, and it will give you a list off simulators you can download. So if you click the button on the right, it will download them, and then they will be available here. And once you've created your device, you just had create and it will appear in the list here, and that's all there is to getting an IR simulator on your Mac. 4. Introduction to Programming: So what is programming? If you're watching this course, it's because you have never programmed before in your life, but you're wondering exactly what it is. You may have a picture in your head. It's something like this, a whole bunch of weird language and lots of brackets, equal signs, semi colons and quotes. You may have an image of your typical programmer, a geek with glasses who works with zeros and ones all day. But that's not programming. What programming is is a tool. It's a building block that allows you to make something, and in our case this would be an app. And the exciting part off those programming tools is that the products we eventually make can be used by lots of people all over the world. And that, to me, is quite exciting. Just the thought they could be a 1,000,000 people at any one time. Using something that I made, we can look at programming much, much more. Simply think of programming as Lego blocks. If we want to make something with the Lego blocks, we have to assemble them in a certain way and at a certain time, and programming is exactly the same when we write code eventually will arrange our code in such a way that will have a final product that performs a specific function. So throughout this course, I want to think about programming as Lego building blocks there, the very first parts that you need to make anything that you can imagine. Now Lego blocks are just the beginning off programming. Lego blocks are our code, remember? And this is an example Lego Block. If I give a command in my code that says show message box, what our computer has to do is first compile it. And that's a fancy word to say that it's translating the code that we've written into a bunch off ones and zeros. Those ones and zeros are needed by the various operating systems to understand what they should do from our code. So that translation will tell the apple the android on the windows devices to show a message box to the user inside our app. As a programmer, most of your time is going to be spent in the your code section off this image. That is what you do. The very first thing we need to do is actually write some code, I'm going to take you into some very, very simple code that allows you to understand the conventions and the ways that we write things. As programmers. We need conventions, because when we share our code with other programmers, they need to understand what we've written, even if we're not there to tell them. 5. Using a Playground in Xcode: Let's go ahead and create some really simple code to start with. Open up X code. You should have it installed by now, and when you open it up, you are presented with the window that says, Get started with a playground, create a new project or check out an existing project. We're going to do a playground, so if we click that it will go ahead and open up a playground, it will ask us for a platform. We want I us. That's our mobile devices and we can call this anything we like, so I'll just leave it as my playground hit next. It'll ask you where you want to store it. I'll store it on the desktop, and I'm going to enable my developer mode put my password in, and that is all done for me now. Now the first thing you'll notice is we have three lines that have been automatically put there for us. The first line is what they call a comment, and comments are things that the computer is going to completely ignore comments off for us as humans. So when you write a comment, I am saying I can Let's change this for example, playground for beginner programmer and the computer will ignore that. But it's for us to see that that is what it is. A comment always starts with a double forward slash. It can start with other things, such as a Ford Slash star, and then end with a star forward slash. So anything I write in here will be seen as a comment. Okay, I'll just leave this here playground comment to like so So everything here is ignored by our compiler. The next statement we see is import. You Iike it whenever you see import or using something along those lines. It's generally at the beginning of a code file, and it's telling the compiler, I need you to go and fetch. You Iike it. It doesn't really matter what you Iike. It is at this point, but what this statement is saying is, I need to get the you Iike it, because it's got Lego pieces that I need in order to create this program that I'm going to write. So whenever you see an import or using, just think of it as importing a Lego kit so we have extra pieces to play with below the import. We have another line and this says var str in your code. I wanted to change this to string one like that. When we talk far, we're telling our code this is variable and a variable is something that can change and because it can change, we need to have a name so we can call it and we can reference it because if something doesn't have a name, how do you know where it is? How do you explain to other people how to go and find that thing? That's why we name it and I have named this one string one. After that we haven't equals and this is called an assignment. Whenever we write equals in programming, we're going to make the left hand side equal to the right hand side. And on the right hand side, we have the thing that we want the left hand side to be equal to. In this case, it's a small sentence which is known in the programming world as a string. And that's why I've called this string one to make it obvious to us. And the way we define a string is by putting these quotes either side of it. So one here and one at the beginning. If I didn't have those quotes, I'd get this horrible red exclamation mark. And when I clicked it, it would say use of unresolved Identify a Hello. That simply means I don't understand what you're trying to do here. If you're trying to make string one equal to hello, I don't know what hello is. So you have to explicitly say this is going to be a string by surrounding it with these quotes and then the red exclamation goes away. The final thing to look at is over on the right side because this is a playground. X code allows us to see what the output off this is. And over on the right hand side, we have hello playground. So it's simply echoing what we've done. And that may seem like a bit of overkill at the moment. But later on, that echoing is going to come in really, really handy 6. The Basics of Programming - Variables: right. So where were we? We just created a playground next code and we were looking at strings and we discovered that we can define our first string here. So string one is equal to Hello Comma Playground. What if we want a number? Let's try far number one or just number is equal to. And then if I put this in, quotes say to, there's going to be a problem. And that problem is, whenever we put something in quotes, it assumes that it's a string. So it's like language. If we want to define a number really quickly, what we have to do is remove the quotes and just put the number and you'll notice that it turns blue. This means that X Code now understands that we want a number, so it's given this a variable type off an integer and an integer is just a way off storing a number inside a computer. An integer is a whole number. So 1234 you cannot store 4.5 in an inter jet. So let's try number. Next is equal to Let's try and make it 4.5, and what you'll notice is that it's actually stored it. But this isn't stores an integer. This is actually stalled as what's called a double, and that allows us to have lots off decimal points or numbers after the decimal point. We can have quite a lot now. It's important to understand all of these variable types exist for a reason, and that reason is to give X Code a chance toe. Actually compare the variables before we use them inside any program. You could imagine if we had a calculator and we tried to multiply and interject with a stream that wouldn't work. It's like multiplying apples and bananas. The two aren't compatible. We can multiply an integer and a double. That's fine, and the result of that will be a double. But of course, we can't mix the variable types and that word, or those two words variable types or important ones you should remember a variable type is a double, an integer, a string, a character or anything like that that allows us to hold one piece off information. Now what happens if we want to change a variable? Well, let's say we want to change this number to 10 somewhere down here I'll just put a comment in and say This has changed number and I'm going to type number and you'll notice a feature of X Code pops up. And this is called auto complete. It kind of guesses what you want to type next and gives you some suggestions. And the very first suggestion is the integer called number. The next one is the double called number Next, and so that auto suggest also tells us what type of variable we have. So we want the 1st 1 and you compress enter on. That number equals 10. Now the number has been changed to the number 10. So every time you declare a variable, it holds a little space inside the memory off your device. And whenever you change the value off that variable, it goes over to that space and says, I want to remove that, too. And now put a 10 in there, please. So type Ingvar is all well and good, but it's kind of bad practice to let X code guess what kind of arable we need. Sometimes we can actually specify it, so specify far type and the way we do that. Inside of Swift to which is the language we are using is we type far as we did before, and then let's call this variable. And then we put a colon and a space, and then we type the type of variable that we want, so I might start typing string. And there it is. It suggests it for me. Now. I have a var variable called variable, but I have nothing assigned to it. So if I typed print and variable, nothing would get printed, in fact, would get an error. And when we click this box, it says variable is used before being initialized. And that's a big problem in most programming languages. You cannot use a variable if you haven't stored something in it, at least zero or a blank string or something like that. And that is going to be the main cause of all of your crashes in all of your programs is a variable that hasn't bean initialized. So what we can do is initialize it. Let's come up here and type variable is equal to grant, and now it's going to print are variable down here, over on the right side. When you type print it actually prints it out to the console, which is what we have on the right side. And it's added this back slash n to indicate a new line has to be drawn here. So don't worry about that. For now, that's just a special programming thing. So we have no errors because we now have a value inside of our string. Now the final section we're going to look at is a special case. What if we had a string or an integer? Let's make this an interview so into J. And we want to make this non changeable so no one can come along and mess around with its value. Well, we have to declare it in a different way. We don't say far we say let and let's put this call this unchangeable. I didn't and will make it equal to 11 and that's all fine. Now let's say someone comes along and says, I want to make unchangeable into equal to 12. Let's see what happens here. We have an error, and when we click, this little error, it says, cannot assign value. Unchangeable int is a let constant, and let simply means that no one can come and change this afterwards. It's constant. It stays fixed for the life of our program. You will use let's very occasionally, but not anywhere near as much as VARS. But it's good to be aware of them, right that covers strings into GIs, doubles and lots of variable types inside off Swift to there are many, many more, and we can in fact create our own types, but we'll get onto that in much later lessons. 7. The Basics of Programming - Methods: Now we can see from our last lesson. This code is getting kind of messy. There's a lot of stuff all over the place, and you can imagine if a program had 10,000 lines of code, there's no way we could keep track of it. So let's remove all of this code and let's do something about organizing it. So the first thing we're gonna do is create to inter jizz. So let's say far into one is equal to 10 and far into two is equal to 20. Nice and simple. Now let's say we wanted toe. Add those. I would say var into three is equal to into one plus and to, and that's how we had. It's much the same as you would inside a calculator, and you can see the result over on the right hand side is actually 30 which is what we might expect. Now let's say we do some stuff here, bloody bloody blood, and then we come back to our program and we say, Okay, I want to add those two again. Well, then we would have to go far into four is equal to one plus in two, and what you'll notice is we have more or less the same line of code here. Now that is something we never want to see in programming one, because it's just bad programming practice and to as programmers, we want to write as little code as possible, and that makes it easy to come back to and easy toe. Understand, that's where we come on to. Something called methods. Methods are a little enclosed block of code that do generally one or two functions, so we're going to create a method that allows us toe add two numbers. So let's remove these last few lines we've just created and let's leave out to introduce in place. What we're going to type is a funk, and this just means function. It's a method, a little block of code, and I will call this ad numbers and you'll notice the first letter is capitalized and the first letter off. The second word is capitalized, even though there's no space between them, and this is a convention in programming, and then we have to open a bracket on inside. Here is the place where we pass over the numbers that we want to add and first we have to give those numbers and name. So I'm going to call this number one, and I'm going to specifically say This is an integer and we do that by putting a colon after number one a space and then typing into. And then I hit comma because I want to add another number to this list and I will call this number two. And again, I have to specifically say, This is an integer. I'm going to close my brackets and I have to do one final thing to greater function, and that's open a curly bracket. And as soon as I press enter, X Code will automatically close it for me and we have no errors. Now, over on the right hand side, you'll notice there is no output, and that's because our function hasn't been cold yet. Functions just kind of sit there and wait for someone to use them. So inside of our function, I'm going to type print, and I'm going to say Number one plus numb to like that. And again you'll notice there is no output on the right hand side. That's again because no one has called add numbers so What we're going to now do now is call this function or method. So down here I'm going to type. Add numbers and you'll notice it doesn't auto feel for you. It looked through your code and says, I think you want this and when you hit enter it automatically puts it there for you and it says Okay, if you want to use add numbers, you have to pass me something. So I'm going to pass it the one that we created right at the beginning. And over here I'm going to pass it the end to like that and then put my brackets in. And now there's a very, very slight error. And if we click that era, let's see what it says. Missing argument label numb to in court So if we just double click insert sometimes it expects us to explicitly say, this is numb to Okay, now that I've called this on the right hand side up here, you'll notice that is actually put the answer for us in the right hand side. So why do we use functions? Well, if I wanted to add some more numbers, I can call that function again. Add numbers, and then I can give it a number. Let's say 34 and I can give it a number here off 34 again and close my brackets. Now it's calling all the code inside here and on the right hand side. It says this has been called two times so far. So every time I want to add a new pair of numbers, I don't have to write this code inside of here. At the moment, it may seem like that's not really worth it. Why not just right? Whatever my two numbers are, plus each other Well, as you get more advanced in programming, you're going tohave. Ah, whole bunch of code inside off these functions. And can you imagine rewriting this code every time you wanted just toe, add some numbers or do a certain function? It would be quite painful. Not only that, if you wanted to change your code, you'd have to go and find that code in every single place, which would be annoying and you'd probably miss it, and then you'd have lots of errors inside your programs. So that is the basic reason why we use functions or methods. Functions and methods mean exactly the same thing in programming 8. Summary of First Code and Exercise: in this section, you've learned how to declare inter jizz doubles strings or any type of variable that you want. Really? You've learned how to make constant variables using the let keyword. You've also learned how to make functions or methods that allow you to reuse the same piece of code whenever you need to. And before we forget, the advantage of functions is that you can change your code in one place, which means that it's going to change everywhere that you call that function. Don't ever forget that. That is the power off functions, right? So I want you to do a little assignment for me on that assignment is going to be subtracting two numbers so very similar to what we've done with addition. But I want you to start from scratch. So I want you to delete everything right now. This is the best way to learn is by doing it and then I want you to create a subtraction function on inside that function. You're going to have to inter jizz that you're going to assign two variables and you can and you're going to create a small function to subtract those and print the answer. So go ahead and do that 9. Creating and Running Your First App: we're finally ready to create our very first app before we do. I'm just going to say there's a lot more to learn in programming. And in the last few lectures we learned about variables, variable types, functions and methods. But there's so much more. And the way I like to teach is toe. Add these things as we go through building our app because that's a much more fun way to do it. And you get to see the actual effect off what you're doing rather than just churning through code after code. Okay, now that I've said that over next code, open it up and if you're not presented with this screen, you can always hit file new to perform the same functions. We're going to go file new. We are going to create a project. Now you'll come up with a whole bunch of options. We can have various applications over on the left hand side, and these simply ask you, do you want to create it for I us for the Watch for TV for OS X or any other. What we want to do is create something for the iPhone or iPad, so we're going to create an IOS application over On the right hand side, we have different options for what kind of application or where we want to start. What we're going to do is do a very simple one. So we're going to hit a single view application. That means there's just one screen to start with. We can always add more later. That allows us to see what's going on according to what we decide we want to program hit next. It will ask you for a product name. We're going to call this. Hello. Well, it wants some other things, and I'm not going to go into this because this is way beyond what we need at the moment. What is important is to change the language from Objective C too swift and for our devices . We want universal because we're going to run it on everything. Ignore these things down here. If you like, you can switch them off. In fact, you should probably do that in here, where it asks for an organisation. Identify You can put the name of your company, and it's going Teoh underneath that create a bundle identify, and this is just a string because you know what a string is now that tells the app store how toe identify your app. Click next asks you where you want to save it. So I'm going toe unclip create git repository and I'm just going to save it on my desktop. It doesn't really matter where you put it. And once you've saved it, you're presented with a whole bunch of text and code. We're going to ignore all of that for now, which is going to run what we have inside our simulator. In the top left hand corner, we have our APP. Hello world, and next to it we have iPhone success. Plus, if I click that down, I have a bunch of simulators I can choose from. I'm going to choose an iPhone five, and I'm going to click play on what that's doing, its building, the app for us, and it's compiling it into all of those ones and zeros. That's the iPhone needs to understand what you need, So I'm just going to zoom this down a bit because it's now opened out simulator, and once it has loaded, it's going toe. Put our app inside the simulator and we are presented with a blank screen and that is good . Believe it or not, because our APP runs, there are no crashes, nothing's gone wrong and we have a blank slate that we can use to start creating our app. 10. What on Earth Does all This Code Mean?: last time we created a really simple up and we ran it in our simulator. Come over to X code and hit Stop on your simulator, and that stops it running on simulated device and it switches back to a normal device. But you'll notice it's still here under hello world, and you can delete things like you would on any apple device. So come back to Ex Code. I'm just going to full screen this so we can see things better now. We are presented with a lot of information, and it's a bit overwhelming as a beginner. For now, I want you to ignore this first page. This first page comes up when you click the very top of your project. If you click anything else, that first page will go away. When it comes time to release your app, you'll need to use this first page quite a lot. If you have a bunch of errors, you'll also need to change some things in here. But we don't need to touch that now. The first thing we're going to explore is this hello world folder that's created below our project name. Inside. Here we have a bunch of files, and this is what we're interested in. The very first file we want to look at is view controller dot swift. This controls the view that we can see on our screen. At the moment. That's blank, so it doesn't really do much. But always remember, this is like the conductor on the train. It's orchestrating things that are moving around inside our screen. So where is the screen? You might ask? Well, that is stored inside our main dot storyboard, and if you click it, it'll load it up. And if you scroll around over in this right hand section, it's a bit hard to see because it's actually white colored. So let's make it a little easier to see down here where my cursor is. There's a little icon that says Hi, document outline. Just click that and then we should be able to see this thing called a view controller. So this is like the graphical area. We were actually going to create how our app looks. The first thing we're going to do is we are going to create a little bit of text that's going to show us a string if you look on the right hand side. Down here, we have a bunch of things that we can add to our app. What we want to do is go over to the third item, which says Show the object library. And when I click that I have a bunch of objects that I can drag into my screen, it's what we want to do is scroll down until we find something called a label. This just shows us a little bit of text, click and hold and drag it into your view controller on Before you let go off the mouse, you'll notice that it gives you these blue lines and that helps you align things. So if I drop it right in the middle here, that should put it right in the middle of my device. When I run it and when I let go, it plunks it there. If I double click it, I can edit the text and say Hello, world like that. Now I'm gonna hit play at the top corner, and I'm going to run this on my simulator and hopefully if we've done our job right, we have hello world on our simulator. But there's immediately a problem that we have to fix. The text isn't actually scented, so let's come back here hit, stop and let's drag that text to the top left corner ish. There are ways inside X code to position that text really perfectly exactly where we want it, but we're not going to cover that now. We just want to put it in a position where we can see it. And if we hit play when this runs on our iPhone, it's now positioned in the top left corner. Okay, so that's the graphical sort of part off our app. But having a label with some text is fine if the text never changes. But the whole point of a label or a bit of text is that it might change. Imagine you were reading a book or some headlines or some news on inside your app. You'd want to change that text in the background. So every time you click something like new story or new book, the text would come from a different source, the new story of the new book, and be displayed on your screen. So the next thing we're going to do is look at how to change this label text and in particular, we're going to look at how to connect the graphical elements to the code elements off our app. 11. How do you Connect iOS Graphics to Code? (Making Good Stuff Happen): In the last lesson, we created a simple app with a simple label called Hello World. Now we want to change the text of that label, but we don't want to do it manually. Every time we re create the app, we'd like to do it in the background inside of our code. Now it's not really obvious to us at the moment, but this graphical section is actually connected in the background to this view. Controller dot swift over on the left. And if I click that this code is where that storyboard view controller is connected to and much later on, we'll look at how to do that ourselves. But just know that when you create something like a storyboard, it automatically does all of these bits for you. So let's connect this label to that view controller and the way we do that in X Code. Over in the top right corner there are a pair of rings icon, which is called the assistant editor, and if I click that it opens up my view controller inside a little window on the right next to my current window. Then what we do is we hold down the control button, not command control, and we click on Hello World and then we drag over to here and you'll notice before I let go . It says Insert outlet or outlet connection. And when I let go, it asks me, What kind of connection is this On this is an outlet, and outlet simply means it's a reference to this graphical thing in our code. Then it asks us for a name, so we will call this label. It also us for a type, if you remember in the previous lessons when we discussed strings and inter ges, a type simply told our code what kind of thing it was we're looking at. And in this case, this label has a special type name off you. I label and one once we've set bat hit connect. And then if I open up view controller dot swift by clicking on the left hand side and up at the top, I closed the assistant editor at the top right by clicking the lines. Then we get the whole thing full screen and you'll notice in here. We've got this first of all grey dot and then at I B outlet week far label off type you I label. Don't worry about the extra bits on there for now. We'll get into that much later. But is simply saying, Hey, I've got a connection from the label on the screen into the code. Okay, then down here we have these things which are override functions. All that override means when we're coding is that the function already exists somewhere else, and we're going to kind of hijack it and use it for our purposes. And override says, I'm allowing you to hide jacket and then we have the actual function and this function is called view Did load. That simply means that the view on our screen has actually shown up down here. Under the comment, we can now change things about our label. So as soon as the view loads were going to type, label don't text, and that takes the text inside the label, and we're going to make it equal to changed exclamation and then close your quote. Now, when we run that hit play in the top left corner, it opens up and bank we have changed. So you have now connected the elements inside your storyboard and your view controller over in code, and you now have the power to change those elements wherever and whenever you like. That, if you like, is the fundamental building block off making IR saps, so it's actually worth it to go over this lesson a few times, try and drag in different things and change their properties. Inside this view controller, the more you understand this particular section, the easier it will be to make APS. 12. Pretty Please Would you Help me Out?: If you're enjoying the course, I have one little tiny favor toe. Ask for you and that's pretty. Please rate my course five stars. It helps everybody know that this course exists. Additionally, when you give me really good ratings, it makes me feel invincible, like Superman, and it makes me create more content for you. Sometimes I create free courses. Sometimes I add to the courses. So the course that you're on if I get a lot of reviews, I'll keep adding content to it, adding new APS teaching you brand new things and turning you into a top apple developer. So please, please rate five stars. Thank you. 13. Making the Main Screen of our Temperature Converter: open up X code and let's create a brand new project for our temperature converter. Click. Create a new X code projects or up in the menu file New project. Go to single view application. Click next, give it a name and let's call this tempt converter. We want to make sure our language is set to Swift Click Next, and put it somewhere on your Mac on the desktop is fine. It'll create a folder for you. I'm just going to full screen this for us so we can see everything more clearly. So in the last lectures I discussed sort of the layout of things where the graphical elements are, where the code elements are. Our very first task in this app is to make the graphical elements of it in maine dot storyboard. So when you click it, it opens in the top right corner. We can click these buttons that remove parts of the screen, and it just helps us to see things a little bit easier. So if I scroll around in the central panel of my screen, I have this thing called a view controller, and it's into here that I'm going to start dragging things and the things I'm going to drag all come from this objects library down at the bottom, off your screen. That's the bottom, right? If you can't see it, click the third icon along. If you can't see this whole side, go right to the top, right and click the icon that says Heidel, show utilities. So inside these objects, the first thing we want to have is a label, and if I drop the label into my controller, there we go and this label is going to tell our user what to do. So let's say please and toe temperature in Celsius. Okay, now what we want to do with this label is actually position it inside of our screen. There's a simple way to do this, and that's using constraints now. Constraints are sometimes confusing to people when they first start at making, because there lots of links off the positions of things relative to the positions of other things on our screen. But I'm going to simplify it for you. The first thing we have to do to see what this looks like in a device is over in the top, right? The double circles click them and it will open up another pain, and this is typically got code in it. But we're going to ignore that for now. Hit automatic scroll down to preview and go to Maine. Storyboard preview. Now we can see what it looks like in an iPhone for inch. And if I click the icon, I can even rotate the iPhone in the bottom corner. There's a little plus icon, and I can add more devices so I can add a 3.5 inch and I can add a 4.7 inch. That would be the iPhone 45 and six. If I double click in some blank space, it shows me all of them in a big, assumed out kind of you. So what we want to do is actually a Linus label to the center off all of those. I'm going to shift this across the bits that we can see things better. And with our label selected in the left hand pain, we want to add some constraints. And if we come down to the bottom will notice there are four small buttons, the three on the right of the ones we want so we can have some alignment and we can click horizontally in container. And what this will do is position the label horizontally in the screen that it finds itself on. So I'll click. Add one constraint and it positions it in the center. And if you look over on the right side, you'll notice it is now positioned in the centre off all the devices. But it's a bit too near the top, so to fix that, we can add another constraint, and we can add a top constraints. So this one right at the top is the distance from the top of the screen to the label. I'm going to change this to roughly, let's see about 80 and if you click the red icon under it, it goes dark and at the bottom. We can now add one constraint, and when we do that, it is added, and on the right we can see our label has dropped down a little. So clicking on the label over on the right side, we have a bunch of properties we can set. If you can't see these again at the top, right, you can total that panel on and off. We can set the properties of the label there, making sure that we have the attributes inspector selected. Sometimes we will have other things selected at the top here, so I just want to drop this front size down. Oh, we've had a crash. And when you use X code, you can expect that toe happen a few times. Andi, I'm just going to load it up again, and hopefully everything is still there. Okay, I just need to add the top constraint again because that didn't work out. And I'll add it in, and then I'm going to drop my front size. Okay? So when you program, you better get used to things crashing and learning how to fix them. And that includes the software that you use toe actually make your APS. So you're never free of crashes as a programmer, but they're actually quite fun to try and figure out just exactly what's going wrong. Okay, so in our view, controller, we now have a label that tells our user please enter a temperature in Celsius. So how do they enter the temperature? Well, they need a box, and this box needs to accept text in the bottom right corner in our object library. Let's scroll down and see what we've got. We've got a text field which displays creditable text and sends an action message when return is tapped. Let's see what else we've got. We have some text views which you can also edit, but that's for multiple lines. We probably don't want that because we're just entering one value. So let's scroll on up and go back to our text field and drop that in tow. A few controller. Now, of course, we have to position this. Let's position it horizontally in the middle. Like everything else, it's click our constraints horizontally in container at that. Now I'll show you a little trick. If you hold down control, that's not command. That's control, and you click from that item to the item above it, and you let go click vertical spacing and what you can do is set the spacing between those items. So I'm going to set this as 45 and we can't quite see it in our little preview section on the right. So if I just click the label again, what I can do is scroll down inside the property section, and I can set the background to something like a light gray color, and it will show us in the properties inspector what it looks like at the moment. It's a little too narrow, so if we click it over here, we can actually add a width to it. Let's add 97 the height off 30. When I add that your notice in the right pane, it gives the correct sort of lay out for us. I'm just going to remove that background. Or in fact, what I'll do is I will click the actual color, and I will put something very, very light colored in it, perhaps not yellow. We can change the A pass ity, drop it down, and this just gives our user a clue where this item is on the screen because of its the same color as the background. We can't see it right, So if we looking out properties on the side, you'll notice that the top We have this text called Place holder text, and inside here we can have sort of light gray colored text that gives another hint to our user, and I'm going to say type dot, dot dot and that tells our user this is the box where you have to enter your temperature in Celsius. Okay, we need one final thing on this screen, and that's the button that actually performs the conversion over an hour. Object items. Let's scroll up and down. And here we have a button. Let's drag it into our view, and at the moment it's not constrained, so it's just gonna move around randomly. Let's put it horizontally in the container. Add one constraint and let's control click. Well, let's control click it up to the type box and put some spacing in there. And if we click that blue bar, we can set the spacing to something like 20. And if we look over in our preview, that looks alright to me. If we double click the button, it allows us to change the title. Let's call this submit and let's save our project. Now we have all of the elements of our screen. We're ready to convert our temperature in the code 14. Connecting the Main Screen of Temperature Converter to Code: the last lesson. We made the main screen off our app, and if we go to the top, left hand corner will notice. There's a play button and some items on in the menus, and these allow us to choose the simulators that we installed right the beginning of this course. So if I hit iPhone five and I press play, we can actually check first that our APP builds and secondly, that it actually runs as we expected to on our device. So at the minute it's on an iPhone five, and it's exactly as we expect. If I click in the tight box, I should get a keyboard that pops up. You should get one, too, because it's a text entry box. I Austin knows that you want to put some text in there, so it automatically gives you the keyboard. Then, if I click the submit button, nothing happens because we haven't wired it up yet to actually do anything. Let's come back to Ex Code. Stop that running using the top left button and let's actually start tow. Wire this all up. You should have the assistant editor open, which is the top right button and we're going to change it from preview, cause we're done with that over toe automatic and view controller dot swift And then on the right hand side at the top. I'm simply going to remove this sidebar just so we have a little room to see what's going on here. Now, this view controller dot swift is connected to this view controller graphical element that we just created. And what we want to do is get a reference all of these items here, the button, the text, the label, etcetera. So what I'm going to do is I'm going to select nothing. At first, I'm gonna click control. I'm going to drag from type whilst clicking my left mouse button, and I'm going to drag it over to just under class and just on top off override funk. That is important. And when I release, it asks me. What I want to do when I want to do is create an outlet, and this is simply a connection to this box, and I will call this temp entry and it asks what kind of thing this is. And this is a you a text field click connect. And there it is, we now have a connection. We're going to do something similar for the submit button. So if I control and click the submit button, I can drag it over. This one were actually going to put a little bit lower right at the bottom. And when I let go, I'm going to click the top item and click action Action simply means I want you to make a function for when someone clicks this button so we'll call this submit Click, and we want the type to be a U I button. This event is called Touch Up Inside. That's just Apple special way of saying it's a classic button. Click and click connect now inside here. If you remember from previous lessons, we've now created a function, and all of the code in here happens whenever the button is clicked. You should be used to this now how to connect things in our main scenes into the back end code. In the next lesson, let's get on with producing some code to actually do our conversion 15. Writing the Main Code of our Temperature Converter App: in this lecture, we're going to make the conversion code to go from Celsius to Fahrenheit, so we have to make some kind off calculation. The first thing we're gonna do is look at this submit click function. And of course, we have to check that our user has actually entered something in the box. So the way we do that is by using an if statement. And if statement simply checks for something and it performs an action, if that thing is true or if that thing is false, it's up to us to decide which version it's going to perform. So we do that by typing if and then open brackets. Then we have to get the text from the box. So we say temp entry because we already dragged that in. And then we have to say, Don't text is equal, equal to, and when we type equals equals. It compares the left to the right side, and it says either it is equal or it isn't equal, and what we want to compare it to is open quotations don't type anything else and close quotations. That means it's empty. Close our brackets and open our curly brackets press enter, and it should feel the next curly bracket in for you. So if that text is empty, then we're actually going to do something. We're going to inform the user that they need to put some texting, and we do this by creating an alert controller. So let's say let alert controller equal to au I alert controller. And when you open your brackets, it'll ask you for some options you'd like for this controller. And all this does is present a standard message box that you might be used to on I us. You've probably seen it a lot. So if we want the bottom option, which allows us to set a title and a message and a style have you hit enter, it feels everything for you. It asks you for a title, which is a string, so we want this to be an error. It asks you for a message. I will say please and tow a temperature and asked for a preferred style. So that text you see there, if you double click it, it'll turn to purple. And then if you hit a dot at the end, it'll ask you, it'll allow you to choose a style we just want and alert. We close our bracket and we head over to the next line. Okay, then what we have to do is give it a button type alert controller. That's the thing we just made dot add action. And it arcs us for some kind off action, which is a you. I alert action. And if you open your bracket again, it gives you some more options. So if we press enter on the second action, it asks us for a title. And this is simply going to be the button title. So we say, OK, clothes are quotes, It asks us for a style. And again we put a dot and we will make this a default style. And it asks us for a handler, which we can completely ignore. So our handler, let me just do that is going to be set to nil. Nail just means nothing. Please don't do anything when I click this button. The final line of code is to show this and there's a bit of explanation here. The first word we're gonna type is self and you'll notice it pops up with the box that says View controller self all itself means is the current class that we're looking at. So this block of clothes code that starts with the word class self refers to itself. And because we're referring to itself, it means we can access special features that it has built in. So every type self dot it gives us a list of all of the special features. And one of them is to present a view controller which is at the bottom there because what we just made a little action alert box is a view controller. It's another view that we can put on top of the one that we currently have. So when I press enter on that, it asks us for the view controller and we just made one, which is the alert controller. It asks us if we want to animate it and that would be nice. It will say true. Yes, please animate it. Then it asks us once this is completed, what would you like me to do? Well, I would actually like to do nothing, which is nil inside off swift to its new. So if the text is empty, we should now get a box that says, Please enter a temperature. I've just made a slight spelling error there. Okay, let's run that in our simulator and everything should build fine. It pops up, I'm going to hit Submit, and it gives me an error. And that's how we bring up pop up boxes inside of our house. APS. Let's stop that. Now Let's get on with the main code off our app. So I'm just going to create a little room here. I'm going to turn off the assistant editor by clicking in the top right, and I'm going to come back over to the main project view once my wheel stops spinning and I just click the top right button there hit view controller dot swift And now we have a lot more room to met to play with so down and I'll submit Click. Assuming we have no text, we give the error to our user, and after that error we have to type a special key word called Return. And that return means we're going to exit out of all of this without doing anything else. It's going to stop executing any code. Okay, so assuming everything is okay and there is some text this. If statement won't actually run and below it, we can run the temperature conversion function. The first thing we have to do is get the number out off the temperature entry so we'll type . Let temp equal to temp entry don't text. And there's a slight problem here because text, if I took that again talk text. It's a string type, but temperature is a number type. So what we have to do is convert this toe a number, and we have to convert this to a double open brackets and close brackets. And the reason we convert to a double, if you recall, is because they double can handle decimal points. Where is an integer? Can't It gives us another error here if we click that. That's because the optional type string is not unwrapped, and that means we might not actually have anything in the box. So Swift has some really elegant error checking for us that we're not going to worry about right now. Just follow what it hints at most of the time. It's now we have our temperature. We need to apply the function to convert it to Fahrenheit. so let new or rather, let temp f to stand for Fahrenheit equal to the temperature in Celsius. We just got and we're going to multiply. That's the star character for us. And the conversion is if I open brackets nine divided by five close brackets and then inside that brackets were going to say, Plus, I believe it's 32. A slight error there. I mean, take that bracket off the end. The actual conversion should be that the temperature times that plus 32 always remember bod mass brackets of division, multiplication, addition and subtraction. And we have a narrow popping up. And no doubt it's about the optional types. So you fix it by inserting an exclamation mark. So now we have the temperature in Fahrenheit. We need a way to tell our user what that temperature is. And a nice, simple, obvious way is to copy all of this code for a new alert controller and paste it below here on, and we can change the title of it to complete. And then the string is temperature in Fahrenheit is equal to, And then just after the quotation mark, we're going to say, plus and then We're going to put the temperature in Farah night here. So first we have to convert it to a string open brackets temp if and close our brackets. And whenever we do, plus on a string, it simply adds the string to the end of the previous string. So it's not like maths. It just puts two strings together. Okay, and then we have an O. K button and a present view controller, as we did before, so that should sort that out. Now, underneath year, we need one more thing, and this is good user interface, and that is we need to clear the value that's currently in the box. Go. We've already done the work for it, so that's simple enough. We say Temp entry dot text is equal to quotation quotation. It turns it blank. Let's hit play and see what happens. So let's try 20 degrees Celsius. Submit it temperature and Fahrenheit is 68. Let's try a nice hot day of 35. We have a temperature and Fahrenheit off 95. Okay, that's the core code of our app complete. There's one more lesson, and that is where I'm going to assign you a little homework and the homework is going to be based around what I'm about to do. What happens if I type something stupid like Yes and I hit? Submit. We have lots of error messages, lots of scary looking code and, it tells us, is an error around this line. Let temp f equal this. That's because if we look down here on the right, it says unexpectedly, found Neal while unwrapping a value. That's because we try to mix up strings and doubles, and you cannot do that. So in the next lecture, I'm going to give you a couple of clues on how to fix that and set you off. 16. Assignments for Temperature Converter: So this is your final task. If you recall, we typed a stupid word into our box, which was yes, which obviously you cannot convert into a number. And we got a horrible error down here. So, inside of our submit click function, I want you to create an extra check to see if the actual item we've entered is a number. You could come down here. You can create another if statement that does something, but that something is up to you. It's the same kind of thing. And so in this, if statement, if they've put some letters in, you want to do some code to quit and then you want to type, of course, return to quit out. So it doesn't actually try to do this down here. There's one final task after you've done that, and what you're going to notice is something I said we should never do. Look at all this code that we have repeated here and here just for a message box. It's starting to look a little bit crowded. What I want you to do as your second task is to create a new function that makes a message box for us, and the function is going to accept some variables. And those variables are what you're going to put inside the's alert controller titles and messages. So I'm just going to start you off because that's quite a difficult task at this point. And if I just remove this if statements we don't have any errors down here, I'm going to type funk show message. I'm going to open my bracket. I'm going to say Title Poland, which is going to be a string, and I'm going to say message, which is also, of course, a string open my curly braces and close my curly braces. Okay, so in here, we're actually going to copy all of this code. Drop it in here and then under let alert controller, we're going to pass it some stuff. So the title we're going to pass it the title and this one. You'll notice it draws a little green line underneath and a little green line under here so it's connected. These two and then message. I'm going to remove that and just type message. And again, the little Green line tells you what it's connected to. That means we don't need it. either here or here. Instead, we can now type one line, which is show message, and we can pass over the title and the string, and that's where I'm going to leave you. I want you to figure that out. Figure out how to finish that off. Don't forget the first task where you're going to check if you have a letter instead of a number and you're not going to allow the user to actually do that. So here's my finished version. As usual. If there's no text, please enter number. If I enter a number, it'll give it to me in Fahrenheit. If I enter a word or just some text and I hit submit, it says, silly temperatures can only be a number, and it lets me know. So I have the option to remove all of that. I can also put 1.4, and that should work. 1.4 Celsius is 34 F. Okay, so once you've completed your task, you should be fairly safe from crashes that are caused by your user entering the wrong kind of things. 17. Introduction to Calculator App: welcome to this final part off the tutorial when we're going to make a fully functioning calculator app that allows us to perform lots off functions. So 98 times 35 is 3430. This may seem complicated at first, but your notice that when we program, especially in this app, we're going to break everything down into really simple concepts. So programming is all about writing as little code as possible, and you'll see this app is actually quite easy to make, so let's get started. 18. Making our Calculator Screen - Layouts: Let's create a new X Code project, so you should be used to this. By now. I'm going to create a single view application. I'm going to call this calculator awesome and leave everything else as it is Swift Universal. That's fine. And I'm gonna hit next Andi, Place it on my desktop. An ex code is going to duel the rest for me. So we have an app that looks a lot like the last one we created. We have a view controller on the main story board. Open up the main dot storyboard and then inside here. I'm just going to scroll down and I'm going to double click on the white space, and that's going to zoom out for us so we can see the whole view controller at the top right corner. You'll notice there are some options here to hide or show the Navigator, and if you click that, it makes the Navigator go away and over on the right. We can hide the utilities to give us a lot of room to play with. Now, when I drag, let's say a label into here and, of course I need to show my utilities again to do that scroll down at the bottom drag. A labeling on X Code is just frozen a bit. Its way to second. Let's try that again. Strike the labeling. Who doesn't like that? There we go. That's better. You might have to zoom in to your view controller to actually be able to drop that in the next thing we're gonna do I'm going to hide that to the side isn't going to hit the assistant editor these two circles in the top, right? And that gives me to pains. And if you remember, this was how we connected our labels to our code before. So I'm going to close this. Give us a lot more room. What we can do in the assistant editor on the right is when we hit this automatic up here and we come down to preview, we can go to maine dot storyboard preview, and when we click it, it shows us what the screen is going to look like on the various devices. So this is on an iPhone four inch, which equates to an iPhone five at the bottom. Here, I can click this icon. I can rotate it so we know what it looks like when it's rotated. There's a little plus button in the bottom, and when you click it, you can choose other devices, toe add. So I'm going to choose the iPhone six, which is a 4.7 inch, and it adds it next to it. So if I double click in the white space, it zooms out and you can see the label has moved, which is a little bit frustrating. And if I ads, let's say an iPad. The label kind of moves around all over the place. So what we're going to do in our main view controller. So this pain on the left is we're going to put some constraints onto this label. And constraints are a very clever way off, positioning things relative to the edges off the screen off your device. Constraints are completely controlled by these four icons or three icons down at the bottom , off the left hand pain. So when you click one, it comes up with a little pop up. So let me just make sure my label is selected, and then when I click these, I have a little pop up that allows me to add new ones so right at the top. Here, let's say I want to position this label 76 pixels and those aren't real pixels. They kind of decimal points. But for now, pixels is a fine way to think about them. I went to position this label 76 points from the top, and to turn it on, click the red icon underneath it, then come to the bottom and click. Add one constraint. There's only one because we've only changed one thing. And when you do that, you'll notice this blue line appears, and that blue line tells us there's a constraint from the top of the screen to the top off our label over on the right hand side. In our assistant editor, you can see the label has moved from the middle ish right over to the left, and that's a bit weird. But that's what X Code is trying to help you with its tryingto auto. Lay out your things, and if you only have one constraint, it's going to start assuming things that it has to do for you. So the more constraints we add, the less control that we give to X code on the more control we give to ourselves. So obviously, we need to add a bit more to this label to make it actually stay in exactly the same place off our screen. So let's position this horizontally in the middle and down in our little two bars under one of the icons. We have some more constraints, and luckily for us, we have horizontally in container. So far, I check that on and I click. Add one constraint. You'll now see the preview on the right shows us that this label is now horizontal inside of its container. Now this label is going to be the display of our calculator, so let's make sure we know that's what it is. Click in the top right corner to turn the assistant editor off by clicking the lines on Let's bring back the side panel by clicking the top right button that says hydro show utilities. So in here we have a whole bunch of options that we can, of course, set. And these options are dependent on the thing that is currently selected inside off the view . So if you come to the top right corner, you'll notice there are six sections. There's a help section. There's an identity inspector in section. There are some attributes size, etcetera. We want the attributes section because we want to do a little formatting on our label, and let's give it a nice funky color. So in the color section, if we click the actual color, it comes up with a little chooser, and we can change the color of it slightly and we can close it. Another label is a dark gray. We can also change the text in here as well. So this is actually going to be display off talc or calculator. This is going to be the display for our entered numbers in our calculator. The first problem will notice is that we can no longer see all of the text, so we have toe wide in this. Let's select our calculator and down in the bottom. We have some more constraints that we want to add, so we have some options here. We can set a width. We can set a height, but what I'm going to do is add this constraint that takes it 10 from each side off my screen and I'll click. Add to constraints and there we have it. And if I switch my assistant editor back on, we can see the label is now expanded toe almost the width off the screen. Now there's one final thing to do here, and that's to send to the text of this label over in the right hand side. Under alignment, you can click the center button and it pops it right in the center for us. So that is going to be the display of our calculator. In the next lesson, we're actually going to start adding some buttons for the user to press in order to do calculations. 19. Making of our Calculator Screen - Buttons: Every good calculator needs buttons, and our one is no exception. We're going to add the numbers 1 to 9 and zero, and we're going to add a plus minus divide and multiply buttons to our calculator screen. So inside our main view controller. And if you don't have this open sorry, not main view controller. It's our main dot storyboard. If you don't have it open, simply click it. And I'm just using these buttons in the top right to move things out the way. So it's easy for us to see in the bottom. We need bottom, right? We need to find something that allows us to have a button, and surprisingly, this is called a button. So I'm gonna drag one over to my screen just in a random place, then in the right hand side inside my inspector. And this is the attributes, Inspector. I am going to change the name of it to one simply the number one, and I'm going to increase the font size of it to make it nice and big. And maybe we can have a background color for this. So if I scroll down, I'll see there's a background section And if I click it it, let's me choose a color. And I think I'll have a nice yellow color toe offset the blue. Okay, now we have a funky button. We can use these handles on it to resize it or down in the constraint section on pinning. We can actually specify a width and a height. So let's have this having a whip off 50 and a height off 50 apple Say all of your buttons should be at least 44 by 44 so fingers will be big enough to actually tap them. Hit. Add to constraints, and that should do it. The next thing we need to do is position this relative to the display of our calculator. So what we do is we're going to hit control, hold it down, click on one, and then we can drag up to display, and it will give us a bunch of options when we let go. So what we want to have here, I think, is the vertical spacing. And when we click this blue line, that appears we now have an option over on the right to change this, we can change it to whatever we like. So let's have this set at 60. Then we also need a way to align this one in the horizontal axis. So we come to our very first problem. Ideally, we'd like our whole number pad to sit under the display and look great there. So everything's lined up horizontally, but one is just going to be slightly left off. Horizontal center. If you imagine a keypad, it goes 123456789 in three rows. So let's change this one. Actually the number five because that is the center off most keypads the number five. Then what we can do is place this five horizontally in the container to constrain it again . So, down on the bottom, horizontally in container, click it and click. Add one constraint. Now let's see what it looks like. If you click this triangle in the bottom and you update the frames, it moves everything to where you've specified. And now we have a nice five there. I'd actually like to move that down a little bit. So if I click the actual item itself and over on the left hand side, you'll notice we have some constraints here. So I have this display. And if you click through them or you actually read them, we can find this constraint here, which is the top of five is equal to display of calculator bottom plus 60. And we can change that over on the right so I can make that 100 drop it down a bit. Maybe 100 and 20 just to give us some space. Okay, that's how five button done. Now we need to add all the rest. And instead of recreating each button, what we can do is actually copy this one. Hold command, See? Click Somewhere in the view Controller and hit command fee. And there we have it. Now, this is also called five. And if we look at the constraints currently has the height and the width. So this button currently is just floating wherever we've put it. So what I'm going to do is build my key pad out from the center. I'm going to call this number two, and then I'm going to link this number two by holding control, clicking on it, clicking on five and putting some vertical spacing in. And then I'm going to change that vertical spacing. So over here, when I select it, I can come to the right. Andi, I can make this, Let's say 15. And then, of course, I can center this horizontally in my container. And then when I update everything there, we have it. So I'm just going to run through during all of this very quickly. And I want you to take your time in laying this keypad out. Think very carefully about constraints, because if you put one too many or one too few things often go wrong in this section, I'll join you in a second or so when all of my keys have bean laid out. And there she is. Now, my calculator should look more or less the same as yours. And when you click this triangle in the bottom and you actually say update which mine has already been updated, your elements should stay in the same place. When you click your assistant editor, it's going to pop up with the screen of your different devices and again on there. They should look like they're in the same place. If they're not, you need to go back into your editor and have a play with the constraints. If you've been struggling with this recall that we started with the number five, then what I did is I created the number two. I sent it it horizontally, and I put it 15 points above number five. I did the same thing with number eight, except I put it 15 points below number five. And then I kind of worked my way round each button that I wanted to place. And that's how we know they're all going to stay in the same place now. The next part of the exercise is to add in some plus minus times and divide buttons. So I'm going to copy my zero button. I'm going to paste it somewhere, and I'm going to call this obviously plus, and then I'll show you what I did before I roughly aligned it. I pasted another button and I'm gonna call you minus. So the minus one, I'm gonna control, click and drag over 20 put some horizontal spacing in, and then I'm going to click that horizontal spacing and set it to I think I'll make this about 24 and then I'm going to control click and drag to seven, set some vertical spacing and again click the little boom line that appears and I will set this to 24. Then I'm going to position my plus button relative to the minus button with some horizontal spacing, and I will set this at 15 like that, and then I need one final bit for my plus button. Hold control. Click and drop it to seven vertical spacing. I need 24 for that to match the minus button down in the bottom corner, I'm going toe update my frames, and there we have them kind of offset so that we know as the user they're they're far enough away from the buttons that we don't accidentally press them when we're entering a number, then we're going to do the same for times and divide over here. So I'm just going to do this quickly and go quiet when I do it so you can just watch and there we have it. Our keypad is now separate from the actual operator functions, but actually, I'm just going to change. This. Have made a slight mistake. Let's make that 15 and then to check everything fits we can hit our assistant editor, and it will show us what that looks like in all the screens. It only just fits in on the iPhone four inch, so we should be good to go. But of course, we can always adjust the constraints so it does actually fit in more. That sums up the display of our calculator and the creation of it. So by now you should be quite familiar with setting constraints, adding new elements to the screen and constraining them relative to each other as well. So you can kind of group them together. There are a lot more to constraints. So if you want to have a read, just jump onto Google and there are lots of YouTube videos you can reference here and there . But once you've got these basics, your set 20. Connecting Calculator Screen to Code: Brady. Let's crack on and connect all of these buttons of all calculator into our code. The first thing we have to do, of course, is open up our assistant editor, and I'm just going to make a little room here. And when we click those double rings, we have our main story board preview. If we click the preview icon Goto automatic and view Controller X Code knows which code file you should be linking to from your view. So it does it automatically. And hence that automatic button. Now in here, we have to start dragging various elements in. So first, we want the display over the calculator. If you hold control down and drag it over, we have the display and we will call this display label. You'll notice the first letter is lower case. The second letter of this, the first letter of the second word is upper case, and this is a convention we follow in programming. So just do all of yours that way, and we're going to connect that. Then, of course, I'm going to make a little room. We have to connect all of our buttons, so it's a little tedious, but It has to be done now because this is a button we need to do something slightly different here in this connection section at the top, we have some options, outlet action and outlet collection. The outlet is simply a link to the button. What we need is the action, and the action is simply a function that gets fired every time someone clicks the button. So if I click action and I call this button one click and under type, we want you, I button and the event is called Touch Up Inside. There are lots of different events we can use on I us for button clicks. I won't go into them. It's beyond the scope of this tutorial, but touch up inside is the classic button Click and then hit Connect, and then you'll notice it's actually made a function for us. So this whole section gets fired every time number one is pressed. We need to do the same for all the rest off the buttons, and we have to give them an appropriate name. So I'm just going to run through those quickly and come back to you in a second. And there we go I've added the mole, and that was quite tedious. As you go one through your development career, you'll find short cuts and ways to do these. And in fact, there are ways to add multiple buttons really quickly. But that's a much more advanced feature, and you won't need it that often unless you're making something like a calculator app. So I have all of these actions that get fired off whenever a button is clicked down here. So now we're done. We're almost done. No, in fact, we are done without display. The only thing left to do, I think, is double click the display of calculator and just put zero in it because that tells our user that nothing is currently happening to it. Okay, we can actually exit out now from the assistant editor, and we can go over to our view controller dot swift. That's the file that we just dumped all of the's codes into. We need to figure out a way toe, actually get the numbers from the buttons and apply them plus the minus the multiply the divide, etcetera, and then show that on our label, and that's exactly what we're going to cover in the next lesson, 21. Writing the Main Code of our Calculator: now it gets tricky before we just go plunging into code. We need to sit back and actually think about how people use a calculator. Typically, they don't want to know four times four or four times nine or nine times two they want to know 92 times 64 or 930 divided by five. So we've come to our first problem. How do we allow a user toe actually enter one number after another? Well, what we have to do is have another variable inside of our view controller dot swift that keeps track off whether or not the last button pressed was a number. Now, if the last button pressed was a number, and then you click another number that tells me that you want to keep entering a long number in the calculator. If you'd clicked a number and then clicked, multiply or add, I would set that variable to false telling me that the last number the last Button clicked wasn't a number, and that says, Okay, now you have to start performing an action. It's a bit of a tough thing to explain, so it's bet it's best if we actually performance. The fresh thing we're going to do has come down enough. You control adults swift and create a function number. Button clicked. And then inside here, we're going to pass it the number so we'll just say number. And this is going to be a type off int because all of the numbers on our calculator are whole numbers. So inter jizz is fine. Open our curly braces When we hit Enter, another one is put there for us. So this function is going to get called every time we clicker number button and that means inside of these items here we have to call it So number button clicked and we're going to pass it the number one and you can see where this is going. It's just repetitive. Pass it the number two and in fact, you can copy and paste and change the number on the fly. Three. Be careful. You don't make an error here because you'll have to go through the code again if you do, and a five under six seven and we keep going and we have the last one, which is a zero. So every time we click one of the buttons. We're coming down to this method, and what I'm going to do is put a comment up here just to say what it is because there's already a lot of code building up here. So we've got to make sure we don't get lost if we come to change it in the future. So I'll just type function fires after number Button clicked like So Okay, so whenever we use our calculator and we hit a button, we would like to see that number appear on our display. And in our case, that's the label that we defined up here as the outlet, the display label. So what I'm going to do is, say, display label don't text is equal to the number. Now let's see if this gives us an era and there we have it. And if we click the error, it says you can't use an integer as a string. So what you can do to fix that and lots of languages do this. They allow you to cast from one variable type to another, so if you have an integer, you can change it to a string in the following way. Back at the beginning, type string and then put your number inside brackets so that converts this number into a string. Let's hit, play and run it on our simulator, and every time I click a button, you'll notice it changes to the display, and this is a good time to check. The right button is correct. Is connected to the right number. Okay, there's one thing missing from this, and actually, it's an equals button. I can't believe I've left that out. So let's come back to Ex Code. Open up our main story board and what I'm going to do is quickly add one. I'm going to copy that zero button, and I'm going to call it equals, and I'm going to change its width. So over here it's width is currently set at 50. It needs to be wider than that. Let's try 100. Let's try 1 40 and then it needs some constraints, of course. So going to put some vertical spacing and click it. Let's have this 20 and I'm going to put its center inside the screen. Okay, let's just check what that looks like. Okay, that's fine. So of course I need to drag. That equals button in to my assistant editor Over here. Old control. Click and drank. And we will call this an action that passes au I button and equals Button clicked. I can't believe I forgot that, but you'll find us a lot in programming. You'll forget really simple things and have to go back on yourself. So let's go back over to our view controller and there we have it. Okay, So where were we before? We were over in our simulator and our buttons allowed us to enter number. The next part of this AP is to actually allow us to enter a longer number than one digit. 22. Adding More Numbers to the Display: in this lecture, we are going to look at adding extra numbers to this display, and the way we do that is over in X code. I'm just going to hit. Stop in view controller dot swift. Inside our number button clicked. We need a check to see if the last button that was clicked was a number, and if it waas allow us toe, actually click another number. So let's create a variable. It's going to keep track of that. This variable is going to be what's called a boolean, and a Boolean variable type simply keeps hold of true or false yes or No. 100 We will call this far last press number and will explicitly say This is a boo will make its very first value. As true so equals true. When I rap first fires up, it makes this true, and that's because we haven't pressed anything yet. So, technically, we want to press some numbers before we actually do the procedure off multiplication or addition. So up in our function, off number button clicked. Let's make a little room around what's here and when the number button has been clicked, you need to perform some clever ideas here, so we have to check if the last press number is some kind of condition, like true or false. The way we do that is by using an if statement if and then in brackets, you have to give it a condition that it can check on the way we do. That is by saying last press number, and if we leave this as it is and we just closed the bracket, then what it's going to do is check. If the last press number is true, we could technically also say equals equals. True, it's the same thing, but we're not going to do that. We're going to use this short cut off last press number if I wanted to check. If last press number was false, I would put an exclamation mark in front of it. So we want to check if last press number is true and after every if statement, we need our curly braces that allow us to execute something if the statement is true. So if the last number pressed is true, what we want to do is actually add to the display label Doc text. So let's hit display label. Dark text is equal to the display label dot text, plus the string conversion off our number like that. This is going to give me an era, and it says Value of optional type string not unwrapped. Did you mean to use exclamation or question? Simply click, fix it and insert the exclamation. Optional types are a bit more of an advanced topic in the swift language, and they're a bit tricky to get your head around. But for now, let's just fix it with X codes. Suggestion. What I'm going to do down here is just remove this line so it doesn't fire. And so in here, if the last press number, it's true and display label doc text is equal to the current text, and then you're going toe. Add the number onto the end of that text. So plus, when you use it with strings, simply puts the strings together. It's got nothing to do with numbers and then down below, because we've actually clicked a number we want to set last press number equal to True. To indicate the last thing we clicked was a number. Let's hit, play and run that see what happens now when I click a number, you'll notice it adds to the current number, but we have a problem. We started with his zero, but we didn't get rid off zero, which is a bit annoying. So let's come back to Ex Code and fix that over in our main dot storyboard. We can change that display to actually show nothing text wise. And so when you do that, it's always a good idea. May be to have a background that we can actually see that allows us to know there's a label there. So I'm just going to hit my background and change it ever so slightly something nice and light. And now if I hit play, I should be able to see it. But I don't have zero there anymore, and I can enter my numbers as and when I have to. Okay, And of course, I can still enter as many numbers as I like and scroll off the screen. That's fine. We'll let our users do that. Maybe I'll said that his homework to fix that right? So back in our view Control. Adopt Swift. We have a way to add numbers to our screen and a way to keep track off the last number that was actually clicked. Now what we have to also do is have a function that keeps track of whether we've clicked plus minus multiplying to fight. So let's call that function Teoh. Keep track off multiplier or something like that. Let's type funk Ah, and we will call this operator clicked. And then, of course, we have to pass it something to let us know which operator has Bean clicked will use a simple, simple string for that that we will call this operator. We can call it that. That's one thing to note if it puts things in a different color. You have to be very careful cause you might be overriding the names off other things that are around. So I'll just call this hope and this is going to be a type of string. Oops, I've created a square bracket by accident. We want to curly brace. There we go. So now we have a function for our operator. Of course, we need to call it when we click our operator buttons so way at the top Inside button plus click. I'm going to call operator clicked, and I'm going to call this a plus, and I'm going to copy that and paste it in all the other functions. This one, of course, will be minus and multiply and, of course, divide. Now we need a variable to keep track off this operator that we've lost clicked. So down here under last press number, let's have var operator or O P er. Let's have that. And let's make this the type of string and leave it at that. Then inside the operator clicked function. We want to say the upper is equal to the Opie, the one we just passed in, so kind of passes it down over here than inside this function. We also want to set the last press of the number as false because we've just clicked an operator button, not a number button. So if you think about a calculator, you click a few buttons, you click times and then the next number button you press. You expect that to start a new number on your screen, and that's why we set the last press number equal to false. One final thing before this lecture ends is in this function off number button clicked. We have to have a function that checks if the last press number is false. So the way we do that in Swift and in most languages is we add to this if statement just under the curly brace type else, open your braces and close them. So this is your introduction to if else statements and you will use these so much in programming. The if statement checks for a condition. His last press number. Truth. If it's not true, it ignores everything here and immediately drops down toe else and runs everything inside here. So because we have a new display off numbers, we're going to say display label dot text is equal to you. The string of our number. So where is before we actually added on to the current text. This time we're replacing all the text without string number. So let's see if that works. I'm just gonna hit play. Oh, we have a little failure. Now when you get a failure in X code right at the top, hit the exclamation mark and when you scroll down, it says class view controller has no initialize is, and that is a strange era we shouldn't have that. Let's just scroll down and see if I can spot what's gone wrong. It's probably something to do with this line. Far Opera String. I bet you if we set it to just a blank, the era will go away and over on the left. Our era has disappeared. So you have to be careful of things like that when you're programming, let's hit play And here we have it. Now I'm gonna hit my numbers like I did before. I'll press plus then on way to press another number and our display has been cleared. And every time I hit an operator function, the display clears, which is really, really good. It would be nice if we had a function to see what operator was currently active, but we're not gonna worry about that in this tutorial. Okay, so in this lesson, you've learned how to keep track of things within your code. Using Boolean, keep track of strings, past functions, toe other functions, and this is the core of programming. You'll be doing this a lot 23. Final Code for Performing the Sum: we're almost there. We have our calculator. We can hit a bunch of numbers, a multiplier and a bunch of numbers. But I've noticed an error. When I press equals, I get a zero. That shouldn't happen. So come over to X code and open up your main dot storyboard inside of you controller click equals and in the top right corner there's a little arrow that's called The Connections Inspector, and inside here it tells you exactly what that button is connected to in code elsewhere. And if I scroll down, it actually has two events connected to it. One is a butter not click, and one is an equals button click. Clearly, we don't want the butter not click. And that's happened because I copied butter. Not without thinking so. Always, always programs slowly. That's the lesson there. So delete that one the but not click by hitting the X. And now when I hit play, I shouldn't get that zero whenever I hit equals. Yeah, so it's fixed. That's just a side note for you. Come back to view controller dot swift and let's continue with our calculator. The first thing we need is a way to keep track off the numbers that have been entered. So the very first number that we enter in a calculator is followed by an operator plus minus etcetera. So the ideal time to store that number is when the operator is actually clicked. And we already have a function for that. If you recall. So what we need is a variable to store the current number inside the label. So far, number one or oh, any. It's actually quite bad practice to use the actual numbers rather than letters inside your variable names. And I will call this string a type of string, and we will set this as blank. And we need a far number to which is this string, and we'll set this as blank. So blank is just when I'm typing two quotes in a row. Okay, in operator clicked. What we have to do is store the last number as number one. So we're going to say number one is equal to display label dot text and they might be an error that pops up here. There it is. And is that era about optionals? So again, you have to uncertain exclamation mark at the end It's just a new way of thinking in programming that says, If there isn't actually any text, I want you to be very careful with this value, so I don't get a horrible crash. There's a lot more to it than that, but that's the basics of it. So every time we click, one of the operator buttons were going to store a number inside number one. And of course we have to do the same with number two. We only need to access number two whenever we press equals. So up here in equals, Button clicked. We're going to set it. We will say Number two is equal to the display label dot text. And don't forget your exclamation. Now, if you're new to programming, I've referenced number two up here yet. It's declared down here, and that's fine because programming doesn't work linearly like that, so you can actually do that. You can put things wherever you like wherever seems to make order to you as the program, so it's a bit of an art like that. Now we need a final if else check. So we're going to say if our operator is equals equals two and What have we got here? We've got Plus, then we're going to do something and we're going to say else if the operator is equal, equal to minus, we're going to do something else and we're going to continue copying this code and just modifying it slightly for each case. So we'll want to multiply case and we will want a divide case some skank tow line these up . So it's easy to read for us. We have lots of cases. So in each case were actually going toe put something out. The display text. We're gonna do a little some to give us the answer, then right at the end. Off this, we actually want to clear everything because we've already done out some. So we say Number one is equal to blank. Number two is equal to blank, and the operator is equal to blanks. That resets everything but still leaves the display on the screen as it is. And of course, we need to have the last press number as false because again, we're starting again inside our very first. If statement, let's say let answer equal to then we need the numbers that we have so We need an integer made out of number one because if you recall, it's stored as a string and we, of course, when we add strings, they just get, like, chocked on one onto another. But we need to change it toe a proper number, like an interview that allows us to do proper addition someone even exclamation at the end of that plus integer number two exclamation. Then we need to say display label don't text is equal to, and we need to convert the answer into a strength like so So that's just test that version out. Build a succeeded. And if I say 12 plus seven equals 19 it works for us. So let's stop that running. Let's do the same for minus. We shouldn't have a problem there, so I copied and pasted from Plus, and all I have to change is minus. Now multiply and divide might be a little more tricky. Let me hit, multiply and see what happens. Multiplying programming is actually star, so let's hit play. Come over here and say five times five equals 25. Not bad. Let's say 999 times. Another really big number equals Oh, we have an era, and we have lots of scary things going on here in X code, telling us what the error is. But in this case, the era is that the integer can only hold a certain size off number. So if we try anything fancy with that number and make it really big, the Inter jet will crash and you have to really watch out for this. And this is the reason we use other kinds of numbers, like floats, doubles and larger inter jizz. In fact, we can have inter jizz that are 64 bits long, which are massive numbers really, really big in front. Let's change these two int 60 fours. Let's see what happens if we run that and try a very big calculation again. So let's try that times that equals and the answer works so that previous error is actually called an overflow. We've run out of memory inside that interject, so just be careful of that in the future. Now, let's go ahead and divide way to copy that in 64 property into here and change this for a forward slash, which is divide or run that in the simulator now Let's try something simple. 10 Divided by two is five that works. What about 12? Divided by five? You might expect 2.4 when I hit equals, I only get to now if you recall an integer, whether it's 64 bit or not can only store ah whole number. So when it does this calculation, what it does is it drops the point, for it drops the remainder if you don't want it. To do that, you need to use a different kind off number. So as our final task, let's try that. I'm going to try and change this to a double. Not sure this is actually going toe work, but we can always try how I have two doubles. I have no errors. That's good. Now I'll hit play. Let's try 12 Divided by five equals 2.4, and that's because they double install decimals. Where is an integer cannot. So there we have it. Our app is more or less complete. I can keep drinks 78 minus seven 71 it will do one some at a time for us 24. Final Message and Thanks: Wow, you've made it to the end of this course. You know how to make APS. You've learned how to program from scratch. I bet you never thought you'd see this day a few months ago. All that remains is for me to tell you what to do next. And the next step for you is to make an app that you can publish on the APP stores. I have a course on learn app development that takes you from beginner to completely published on the APP store. No, not many courses do this because becoming published on the APP store it's very is a very complicated process. There are a lot of steps to go through a lot of understanding around stiff IQ. It's provisioning profiles, really complicated things that Apple have imposed on developers. And it's a bit annoying, to be honest Androids a lot easier. But once you're published on an apple device, people take you much more seriously as a developer and I'll just give you one review that a guy called Zoran left for me for that course, he said. I really enjoyed this course. Like in his android course, the instructor concentrates on important things, covering the main topics and not going into unnecessary details. Really great. Overview off how app development works for I us. Also great info about Apple's rather complicated process off. How to put the app into Apple Store or iTunes. Very nice, clear and calm voice. I could listen for hours. Thanks ground. Thank you, Zoran. Zoran is a senior Java developer. So if anyone knows how to program, he does. And he left this review. So if that is not a recommendation to take my course, I really don't know what is all that remains for me to say to you. The student is thank you so much for following along and forgetting to the last stage off this process. I look forward to teaching you some more in the future.