Build Your First iOS App

Devslopes by Mark Wahlbeck
A free video tutorial from Devslopes by Mark Wahlbeck
Learn programming & app development
4.3 instructor rating • 25 courses • 331,741 students

Learn more from the full course

iOS & Swift: Become An App Developer

Beginner's Guide to Learn iOS, Swift, ARKit, CoreML, App Design, Advanced Programming and Much More

90:06:06 of on-demand video • Updated August 2020

  • Submit iOS apps to the Apple App Store
  • Understand the basic concepts of programming
  • Apply for JR iOS developer jobs
  • Work fluently with Swift and iOS
  • Work as an iOS freelancer
  • Master Swift from basics to advanced
  • Learn mobile app design with Sketch
  • Build ARKit & CoreML apps
English [Auto] Hey everyone. Mark Price here at DEF slopes dot com. And in this exciting video you're going to build your very first iOS app. Now this app can be built with X cotinine X Cotendo data or the final released version of X code 10. We are going to be doing this in X code 10 beta and the app works completely fine in any of those versions of X code. And I'm going to click Create a new X code project and we're going to choose a single view app. This is a one view application and we're not going to go into great detail on everything we're doing because I want to show you how simple it is to create your very first iPhone app. We're going to call this hello color and click next. Now your data here will actually be different but that's OK. Just go ahead and follow the flow and whatever it says and you can store this wherever you want. I'm creating mine on the desktop and so what we're going to be building is an app where you can click a button and the color of the background will change. And so we're going to focus over here on the left hand side and you're going to see something called view controller does Swift. This is a code file that does with files or the code files where you're right all of your code and in here we have something called a view controller which is a piece of code written by Apple that helps you manage working with views. And we're not going to go too in-depth on it right now. But what I want to do is just show you that this file exists and also show you that the main storyboard filed on your left hand side over here is where you're going to create all of your views. It's a drag and drop interface. Really cool. And this is where we're going to build out our app. It's a very simple app. So on the new X code 10 you're going to see something up here called an object library or if you're working with X cotinine versions it's down on the bottom right hand side and you can also access this library by pressing command shift. Well that'll pop open a window to let you find things in the object library. And so I'm going to type in the word button and you're going to see a button right here. I'm going to click it and drag it onto the screen. You can put yours where ever you want. I'm going to drag mine right here in the middle like so and I don't like the Deep South but I want mind to have some color still play around with some of the settings so if you hover over here on the right hand side you're going to see an object here called the attributes inspector and this is where you can change certain attributes on views. And I'm going to scroll down to the bottom here and there's one that says background. And I'm going to pick a blue color you may not have that. There you can pick whatever color you want. But I'm going to pick this blue one that is sitting right here for me and then I'm going to scroll back up to the top and you see something here called Tex color. I'm going to change mine to white. You can pick whatever color you want for your text. OK. And so we have this cool looking button here. Now when we click the button we want to change the background but we can't do that with the user interface here. We have to do it in code. And so what we're actually going to do is connect our button to our code file. And how do we do that. Well there's a few ways but the easiest way is to go to these double circles here which is called the assistant editor and click it. It's going to show the code file that is associated with the view here for this view controller in the storyboard and you can scroll around with the trackpad or your Magic Mouse if you want to see more of the view here or if you need more room there's a little button here at the bottom left that you can click to hide and show this window. And so that's how you can get more space there. And what we're going to do is holding the control key command key with holding the control key. We're going to click and direct from the PA and over into the code file right after these curly braces that you see here Kate. But not after the ones here on line 19 the ones right in between. And we're going to let go make sure that the connection says action because we want an action to happen. We're saying we want to tap the button and we're going to call this change color. OK. And I click connect and it's inserted some code for us and actually connected that view automatically here to the code file which is really cool. Back at the top right hand side we don't need that assistant editor anymore. So we're going to go back to the standard editor like so what I'm going to do is click the view controller OK. And in this code file I'm going to click on the curly braces gonna add an extra newline here so it looks nice. And what we want to do is when that button is pressed we want to change the color on the background. And since I connected the view button here to this function K A function is basically a block of code that will run some type of commands. We'll talk more about functions later. And basically you'll see this little circle here that's filled and that means that your code is connected to your storyboard. Ok to the view and what we want to do is change the color. And so what we're going to do is we're going to choose purple and red And so how would we do this. And you don't have to understand everything just yet. We'll learn more as we go along here but I'm going to create something called a variable and I appear at the top. I'm going to call this is purple equals false. So by default it's not going to be purple. And then in the change color function what we want to do is change the color but we need to know if it's purple or not so we can change it to red or vice versa. So what we're going to do is create a statement here called an if statement it is purple. So if it's purple if it's true. OK what do we want to do what we want to change the color to red. So we're going to say view now view is the view that's on the View Controller and so X code automatically knows that this view exists. Ok it's already there for us to access. That's why you don't see it anywhere else because it's inside of the parent view controller which will also talk about in later lessons and so view that background color equals UI color dot red. So if it's purple We want to change the background color to red and then we want to change the variable is purple equals false. We want to set it to false. Every time that it's not purple and then we're going to say Elle's. So if it's purple do this else or otherwise OK. We need to go ahead and change it to purple. So we're going to save you thought background color equals you white color purple and then we're going to say is purple equals true. So what we've just done is we've connected a view a rather a button the action of a button to this view controller here and then we see if it's purple. If it's not purple we change it to red. Otherwise if it is purple or rather if it's not purple we change it to purple. OK. And so what we're going to do now is save this file pressing command s. It also saves automatically for you. And what we're going to do is click this run button over here. Now you can have a few different versions of simulators here to run your application and you can pick any one that you want. Yours might be different than mine. And the one I'm about to run and where you place your button may look different on these different screens but we're not going to worry about getting the button looking correct and all the screen right now so I'm just going to pick the iPhone 8 plus and click run. You're going to see a blue bar here that indicates that it's building and then it's going to say launching in your X code will actually launch automatically your X code simulator. OK. And so when you see your button you know that your app is running. Now again my buttons not centered anymore because the screen that I built on in the storyboard is not the same as the simulator but we're not worried about that right now. Maybe in a different spot as well. So if I click and it turns purple and red and purple and red and purple and red. So really cool I mean the colors are a little bit bright and not very appealing to the eye but you've just built your very first iOS application and you've learned how to connect views to code. And this is only a small taste of all the things that you're going to learn but it always starts here and it always starts with a storyboard and with a code file or often a view controller. So congratulations on building your very first app. There's so much more to learn. Let's go ahead and get started.