How to make a IOS app

Hey what’s up? Everyone welcome to the wonderful world of iPhone development and in this video we’re gonna show you how to download, Xcode and install it and talk about a few other things. So, first things.

 

First, if you want to build I phone apps or Swift, apps, okay, you can come to your App Store here on the Mac. You can just type an app store and pull it up here and then you can search for Xcode. This is going to give you the absolute latest release of Xcode and that’s publicly released, and then you can download it here and install it straight from the App Store.

 

If you want to get a new hot beta version of Xcode, which they’re, always uploading, you can go to developer.apple.com click on, develop and then click on downloads. It’s, going to actually get it’s. Going to ask you to create an account first, a free account just so you know I’ve already signed in so that’s.

 

Why I didn’t ask me, but just so you know it’s. Going to ask you to sign up for a free Apple Developer, account completely free you, don’t have to pay the $ 99 developer fee until you’re ready to submit an app to the App Store, and so you can see Operating systems and applications, you can click applications here and then you can download the latest version of Xcode and it will install alongside the release version, which is really cool.

 

Just know that Xcode beta versions are sometimes less stable than the beta versions or non beta versions, and you of course, can’t submit apps through the beta versions. You have to wait till they come public.

 

So just so you know that’s, how you do it there and of course you can get some of the beta software as well too, for your phones or computer, so that’s, really it. To be honest, you just install that app and you are ready to go once the installation is complete and then you just load it up at this point you should have Xcode installed and we’re, going to build our very first iOS application, so Open up, Xcode and then click create a new Xcode project.

 

Now my Xcode is dark because I’m using the new kattiline, a dark theme, so yours might be white or lighter. If you haven’t switched to the dark theme. I’m gonna select single view application and we’ll call this sales tax and language is Swift, and this is really important for user interface.

 

You’re gonna choose storyboard at the time of recording swift. Ui is a brand new user interface feature, but it is not commonly adopted yet so we’re gonna, say: storyboard click Next and you can save this anywhere.

 

You want, I’ll save mine on the desktop wonderful. So if this is your first time ever, opening Xcode you’re gonna see a lot of new things. We’re, not covering everything we’re just having some fun building an app, so you can see what it’s like to build your very first app.

 

So by the end of this video, you should not have anything. Memorized, this is just hands-on fun exploration, seeing what things are like. So, on the left hand side you’re, going to see some files like viewcontroller.

swift, app, delegate, swift and main storyboard, and we’re gonna dive right here into the main storyboard. This is where you’ll design. Your screens for your application – and this is what’s called a view controller and what we want to do for our sales.

 

Tax application is simply have a text field for the price of the item, a text field for the sales tax and then a calculate button to do the math to add the sales tax to the price and then a label that’s.

 

Going to have the total price, then we’re gonna have to pay so on the right-hand side over here there’s a plus button. This is your object library. We’re gonna click that and let’s. Just drag our label right here onto the screen and make this larger like so, and I’m just going to Center it here on the screen and then on the right hand, side you’re gonna see the center button for Alignment we’re gonna Center it and then also on the right hand, side.

 

I’m gonna click. The up arrow here on the font, to make it a little bit larger. I’ll, say 30 and then for the text. I’m, just going to put some temporary text in here 30 dollars and 50 cents or use whatever currency your country is using there.

 

So there’s our label. Now what I want to do is get some text fields on there places where users can actually enter text. So I’m, going to click the object library button again go to text field and drag that here on the middle of the screen.

 

Like so, and I’ll Center this and then what I want to do is for a placeholder on the right side. Here I’m, going to say price for the item: price – okay and I don’t like how the screen here is white and also the text field.

 

So on this text field. What I’d, like to do, is make it a different color. So if I scroll down here on the text field, I can pick different colors for it. We’ll, just pick a light gray color here, perfect okay, so there’s, our price and I’m, going to command D to duplicate this, and I’m gonna drag it down and for instead Of price on this one, we’re, gonna, say sales tax like so now.

 

What I need is a but something to click the object. Library again and this time drag a button down here, make it a little bit larger. Now you could leave it as is with its shape, but I’m gonna make mine actually look like a real PUD.

 

So instead of the word button, I’m gonna say calculate and then for the background. I’m gonna scroll down here for the background. Let’s. Just pick a nice blue color yeah a nice little blue like so, and then, if we scroll up, we can change the text color to white.

 

So if you scroll down here there’s, a white color like so there we go Tecla does make it the same width as the text field, sir okay, so the idea is, the user puts the price in and there’s. The sales tax and they press calculate and then the total price updates.

 

Accordingly, a couple of notes: we’ve, not done any layout here on our screen, so this is gonna look good for us on the iPhone 11 pro max or whatever simulator. You have selected up here, but it may not look in the right position for other devices, but we’re, not worrying about that right.

 

Now. We just want to build our very first app. So how do we actually get our user interface elements talking to our code? Well, this is where things get really fun. You’ve noticed over here. In the left hand, side we have a viewcontroller.

 

swift well, we also have a view controller here in our storyboard. These are connected. Okay. So if I click viewcontroller.swift, this code right here represents the code behind the storyboard, make my screen a little smaller here.

 

So you can see it better, and so I’m gonna go back to my storyboard. We’re gonna have some fun if you hover over these lines over here. On the right hand, side, this is the editor options. I’m gonna click it and what I want to do is open up the assistant, okay and I’m gonna close the left-hand panel.

 

Just so I have some more space right now and what’s? Cool is, we can actually drag from our storyboard over here to our code, so we need a reference to the price. We need a reference to the sales tax text field.

 

We need a reference to the label and then our button needs to perform an action. So what I’m gonna do is click on the price and then control drag over from the storyboard over here to my code above viewdidload function, and I’m gonna call.

 

This price txt, representing a text field and press connect and notice how it added some code for me, don’t worry about what all these things mean: iboutlet, weak, VAR, etc. We’re, just building having some fun here, but what we’ve done is we’ve created a reference to what’s.

 

Actually, here in the storyboard we’ve created a variable. I’m gonna click, the sales tax and do the same exact thing: sales, tax, txt, and then we also need the label. So I’ll control. Drag from the label will call this total price lvl for label and then what we want is an actual action.

 

So I’m going to control, drag from the calculate button, and this is actually an action. So we’ll call this calc, you late total price and press Enter, so we’ve, just connected the things that are in our visual storyboard with code, which i think is really awesome.

 

So what I’m gonna. Do now is open up the Left panel by clicking that button there and going directly into my view, controller code. I don’t like to have both screens open when I’m coding, so I can have more space.

So I’m gonna get rid of these extra new lines here. So we & # 39. Ve got our references here and then we & # 39. Ve got our viewdidload function and our calculate total price viewdidload is called whenever our screen loads.

 

For the very first time – and so what I’m going to do here in calculate total price – is just the kind of math you would do if you were basically calculating sales tax at the store. So the first thing we want to do is we want to store these text fields or the data that’s in them inside of a variable, so the price and the sales tax.

 

So we’re gonna say: let which is a constant means. It can’t, be changed. We’re gonna say the price is going to be equal to price txt dot txt. The thing is when you are grabbing text from a text field, it’s, an actual text.

 

It’s, a string, it’s, not numbers. Okay, we can’t actually do math on these numbers. So what we need to do is we need to convert this into a decimal and in Swift, a decimal is really called a double or you use a double to represent decimals.

 

So what I’m going to do is type in the word. Double open parenthesis and then paste in price text dot text and what that’s going to do. Is it’s, going to convert it into a decimal? I’m gonna put an exclamation mark here on the text because it’s yelling at us because it’s, saying hey what? If nobody put any text in there, we could crash, but we’re going to unwrap that and we’re gonna make sure that we have text there.

 

If you don’t, you could crash your app and there’s. Other ways I’m handling that, but this is just a simple video okay, so we’ve got our price text text and then what I also want to do is say: let cells tax equals.

 

We’ll, say the same exact thing: double cells, tax text text and we’ll, unwrap that, like so wonderful and then so we’ve got the sales tax converted to a decimal, the price converted to a decimal. Now what we need to do is figure out what the sales tax is going to be.

 

So we’ll, say let total sales tax equals, and if we’re just doing the kind of math you would do at a store. We would simply take the price and multiply it by the sales tax. So if the price was $ 5, we would multiply by the sales tax.

 

If the sales tax was let’s say: 7 % would be point zero, seven! Okay! So we multiply price times the sales tax and the reason why we’re. Getting an error here is because these doubles could have. If someone put the letter Z in here, this would not convert to a double, and this would actually fail.

 

It would be Neal, so what we need to do is put another exclamation mark at the end of each of these price and sales tax and what we’re doing. Is we’re, saying hey? I promise that there’s, going to be something in here and I promise it’s going to be a number.

 

So if in your app, if you actually type in like the letter Z, your app will crash and again this is not the best way to handle it, but we’re, keeping things simple right now: okay, so we’ve converted these Two numbers, and now we’ve, just calculated the total sales tax.

 

We take the price and multiply it by the sales tax, and the last thing to do would simply be to get the actual total price by adding the sales tax to the price. So we’ll, say let total price it’s gonna equal price, plus total sales tax.

Okay. So we’ve, calculated the sales tax based on the original price, and then we’ve created the new total price by adding that sales tax amount onto the price, okay, and so the last thing we need to do then is set.

 

The label, so we’ll, say total price label dot text equals total price, but the problem with this is total price is a double and that we got to convert this back into a string. Well, that’s. Pretty simple.

 

I can highlight this and command X to cut it and then add two double quotes here and what I can do is put a slash and open and closing parentheses, and then I can paste in that variable. This is called string interpolation, or rather we’re, just converting the number into a string, and you you let it know that you want to pass in the variable by putting the slash in there and then the parentheses and then in front of it.

 

We’ll. Put that dollar sign. Okay. The last thing I want to do is here in viewdidload when they, when the app first loads. I want to make sure the price level doesn & # 39. T have that $ 30 that we set in the in the storyboard okay.

 

So what I’m going to do is say: total price label dot text equals an empty string, and then I think there’s. One thing we want to do with cleanup in our storyboard: let’s, say our keyboard type on these fields here, so they’re just a number, so we don’t have any mistakes.

 

So what I’m going to do is instead of showing this assistant here. I’m, going to click this X on the assistant and we’ll open up the right hand side and see how the price text field is selected. I’m, going to go to keyboard type and what we’re going to do is type put in the decimal pad here and same thing for the sales tax.

 

We’re, going to go to keyboard type and put in the decimal pad, and that’s. It let’s run our application. You can do that by doing command, + R or just clicking the big triangle up here. On the left hand side one referral, so our app is now running, and so let’s test it out.

 

Let’s say we have an item that’s $ 5 and let’s say the sales tax is 7 %, so we’ll, say point zero. Seven! If I run this on my calculator five times point zero, seven on my phone, I know that the sales tax is thirty five cents.

 

So if we added thirty five cents on to the five dollars, the total sales price should be five dollars and 35 cents. Let’s, see if it works and it worked so it’s, five dollars and thirty-five cents pretty cool.

 

We did a lot of things here that’s. It we’re done and you may not understand. Half of what we did that’s. Okay, we covered a lot, but I wanted to show you how fast you could make a meaningful real application.

 

This is a real application that you could use in just a few minutes of time, and so we created a storyboard and we went here and our viewcontroller. We wrote a few lines of code, I mean this file only has 33 lines of code and we could even simplify it even more if we wanted to so.

 

This is your beginner steps into iOS and Swift development. There’s, so much more to learn you don’t have to understand what we just did, but this is a great starting point, so I will see you next time.