iOS Tutorial (2020) How To Make Your First 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've got our references here and then we'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'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

Channel: Devslopes

Views: 163,765

Rating: 4.9310136 out of 5

Keywords: app development, learn to code, iOS tutorial, ios development, how to make an iphone app, how to create an app, xcode tutorial, ios tutorial, how to make an ios app, swift tutorial, ios development with swift, ios tutorial for beginners, ios app development, xcode swift tutorial, ios programming tutorial for beginners, how to create apps, xcode 10, code with chris, create an app, swift app development, build your first app, angela yu, create an iphone app, ios app

Id: bZNAFkkUeKs

Length: 15min 4sec (904 seconds)

Published: Fri Jan 03 2020