Ll also show you how to put them on your phone so that you can show your friends and family. But more importantly, I’m, going to teach you the fundamental skills that you ‘ Ll need to build any sort of app.
So, by taking these beginner lessons, you’re, going to get a really nice and solid foundation in iOS app. Development. From there you’ll want to grab my free 7 Day App Action Plan where you can create a customized app roadmap.
Just to build your app, you also want to join our active Facebook community, where you can get help and support from myself and the team and tons of other people learning iOS, just like you, so that you’re, never stuck or alone on your Journey to create apps.
Now the last time I taught this, it was viewed by over 1.2 million people and tons of success stories came out of it. Ton of people created their own mobile apps, as you can see some of them on the wall behind me.
. Now I know that’s, all going to come for you too, but it all starts right here right now, are you ready? Let’s? Do it welcome to CodeWithChris the place to be? If you want to learn how to make an app.
, I’m Chris, and I’m, so glad you’re here. First things: first, how do you create an app from scratch? Well, it all starts with a program called Xcode, where you design the user interface for your app and write your code that gets turned into an iPhone app, which you can publish to the App Store where millions of people can download and use it before that.
Let’s backtrack. A bit. Though. Xcode is a program you can download for free and the code. I’ll, be teaching you. How to write is called the Swift programming language. Don’t be intimidated. If you’ve, never coded before, because I guarantee you’ll get the hang of it.
Next Xcode can only be installed on Mac computers, but if you don’t have access to one, you do not need to spend thousands of dollars to buy one instead check out my video on Xcode for Windows using MacStadium first.
, Alright. So with that out of the way let’s dive in and let me show you around Xcode, so the first thing you’re going to want to do is to download Xcode. If you haven’t already, and all you have to do – is hit CMD + Spacebar on your keyboard to launch Spotlight.
Type in App Store to launch it and then in the search bar type in Xcode, and that’s. Going to find it now, I’ve already got it installed. So if you don’t, you want to go ahead and do that. I’m gonna warn you, though it’s, a pretty big application.
So it does take a little while to install and if you can’t, if it gives you an error message or something like that scroll down check on the compatibility, if you click it, it tells you what version of macOS it needs for this.
One it needs 10.13.6, but when ever they upgrade Xcode, this number gets higher and higher. So your you might have to update your version of macOS in order to install Xcode, also keep in mind the size here, even though it says 6.
1 Gigs. It sometimes needs a little extra space in order to do the installation, so once you have, it installed, go ahead and open it. You’re gonna be greeted with a dialog like this. What we’re going to do in this video is create a brand new Xcode project, so click on create a new Xcode project.
If you don’t see that dialog. For some reason, maybe you’ve launched Xcode before you can always go up to file, go to New and choose project and that’s. Gon na get you to the same place. Now there’s, a bunch of different templates that you can start with to help.
You just be a little quicker in terms of what you want to create. What we’re going to want in this lesson, is to be under this iOS tab, because there are different platforms you can build for using Xcode and Swift, which is the great thing about learning these two things.
But we’re going to do iOS today and we’re, going to choose Single View App and that’s, going to give us our basic one-page app or one screen app. Next, we’re, going to want to configure some of the options for our new projects, such as what the name is, what the unique ID of it is and for the product name.
You can name it something. I’m going to choose hello world like that. The team drop-down – you might not have a team here and that’s, not going to matter right now. But you will want to create a team when it gets to the point where you want to put the app on your actual device, and I ‘
Ll. Show you how to do that later on in the series organization name. I would either put your company name or your personal name and then what’s common under organization? Identifier is comm dot and then your name or your company name so combine with the product name that’s, going to be the bundle identifier you’re gonna see this term used quite a bit.
It’s. Basically, like the unique ID for the app that you’re, creating when you publish your app when you upload it to the app store and that sort of stuff you’re, going to need that bundle, ID okay. So next very important is to make sure your language is set to Swift, because that’s.
What we’re learning here, you can leave these guys unchecked and then click on next and you can also leave source control unchecked as well. We’re, not going to go through that right now go ahead and click create and you’re gonna have your brand new Xcode project.
Now it kind of looks intimidating because there’s. All these checkboxes and dropdowns – and you know this interface to someone who hasn’t seen it before – is pretty confusing. But I’m gonna walk through it with you right now, and I also have a reference sheet for you with a diagram and all the keyboard shortcuts for Xcode.
So make sure you grab that in the description below. So we’re, going to start on the left hand, side of the interface, and this is the Navigator area. You’ll notice across the top that there are different tabs, that you can click.
It might not be so clear. In the beginning, but these are different navigators that you can choose by far the most common one you’ll, be using. Is this project navigator, where you can see all of the files in your Xcode project now clicking on any of these files? Will change what’s in the middle, that’s called the editor area, so, for instance, right now we have this first project file clicked on and that’s.
Why we see all of the project properties in the editor area? If we click on ViewController.Swift, you’re, going to see that this turns into the code editor so that you can write swift code go ahead and click on Main.
Storyboard, and this is going to change into an editor where you can customize the screen. For your app, we’re, going to be doing this shortly. This is actually called interface builder, so you can kind of get what why that name is the way it is.
Next, let’s, go to Assets.xcassets. This is where you’re, going to put all the images for your project that you’re, going to use, and then Launchscreen.Storyboard is another sort of interface builder file where you can customize the launch screen and then the info.
plist has some Further properties for your project, so at a high level, those are the files that, by default, are included inside your Xcode project. Now, moving along to the right side of the screen, we’ve got the utilities pane and what you see here depends on what you’re clicking on inside of the editor area.
So it’s like a further drill down. So, for instance, if we go into the Main.Storyboard – and I click on this white area, which is my view or my screen – it’s, going to show me further details about that and in the Viewcontroller.
Swift. If I click on, let’s say some piece of code. Then it’s going to tell me something related with that, but keep in mind that again there are some different tabs with this utilities pane, as you can see up here.
So if we’re going into the Main.Storyboard, you can see that there are a couple more tabs and that’s, because I can configure properties for this element. So it looks like Xcode has experienced an internal error, but usually these are fine.
You can just close the project and we launch it. I’m, not going to do that right now. It’s, fine across the top of the interface. You have your Xcode toolbar now on the left side of the toolbar, you have some buttons to run your project and stop your project and then to the right of that.
This is actually a drop-down where you can select the destination on which to run your project. Now, if you plug in your phone, you can actually select your phone from that drop-down. But if you don’t have a phone plugged in don ‘
T worry because Xcode has a bunch of simulators where you can run your project on and it’s going to show it on the screen. We’re gonna. Do that in just a second in the middle. Here you have your status bar it’s.
Gon na show you what’s, going on with your project, what it’s, doing right now, and then on the right-hand side. There are a couple of more controls here which we’re going to get to in second, but in the rightmost part of that toolbar, you’re gonna see these buttons, which are really helpful to you right now.
It’s just to hide and show these different areas that we’re talking about. If you click this middle one, you’ll notice that it brings up this little tray down here that we really haven’t talked about yet, and this pane down here is called the debug console and when you’re Running your project and let’s, say an error happens.
You’re gonna get some details about that error in this debug console. So by default it’s hidden. If you want to show it, all you have to do, is click this button to bring it up. So these are the major sections of the Xcode user interface.
It’s, not that complicated. Once you know right what we’re gonna do now is go ahead and run our project on a simulator. So in that drop-down that I showed you by default right now it’s, iPhone XR! You can select any one.
You want to try out and just click this big play button right here. It’s, going to launch that the iOS Similar now the first time you do this. It might take a couple of minutes, but then subsequent times is going to be a lot faster after the simulator has launched.
So you actually don’t really need a physical iPhone device. If you don’t have one you can still build and test your app now there’s. One quick thing I want to mention, and that is if your simulator is way too big for your screen and you can’t see all of it.
You can actually scale it down, so you can either go up to the menu of the simulator and choose you know physical size or point accurate or pixel accurate. You can use these shortcuts, CMD+1, CMD+2 or CMD+3 to change the size of the simulator that you see so just a handy tip for you in case.
The simulator is way too large for your screen. So when your app has launched, you’re, going to see this white screen and that’s because we haven’t really added anything to our app yet. But before we do that, let’s! Talk about how that Xcode project turned into this app that I’m.
Seeing in the simulator this top layer is the view it’s. The screen that the user sees now you can configure this view from the Main.Storyboard file in your Xcode project. The second layer under that is called the ViewController.
. Now this code file is responsible for managing the view, for instance, when the user taps on the view it’s, going to let the view controller know, and then you can write code inside that view, controller to handle that tap to either run some Process in the background, or maybe display some new information on the screen, you get the idea.
Now. This view controller is represented by the ViewController.Swift file in your Xcode project and, as we said before, if you click on that file, the editor area turns into the code. Editor, where you can write Swift code to manage the view now, if your app has multiple screens in most cases, each screen is just going to have its own view and view controller.
Now let’s, go back into Xcode and we’re, going to stop our project and we’re, going to add something to the view so that there’s, something to see let’s. Hit on the stop icon right here and then click on main storyboard, so you’re.
Seeing the interface builder, and now I’m going to introduce you to this button here called the library button. So if we click this, it’s, going to bring up a list of objects or UI elements that you can add to your view.
Type in the label to search for this guy – and all you have to do – is click and drag it onto your view. Like this, now you’re, going to see that label on your view right here now you can drag it around and you can position it, but that’s, not really going to do anything because Xcode actually has its own way of Positioning and sizing layout items Xcode uses a system called auto layout to position and size.
The elements on the screen this system makes it easier for you to design a single interface that looks good on iPhone iPad and all the other screen sizes of future iOS devices. Now, basically, all you have to do is specify a list of rules for each element that dictates how it should be positioned and how it should be sized relative to other elements on the screen.
For example, this element should be the same height as this other element, or maybe this element should be centered on the screen. These rules are called constraints and in lesson two. You’re, going to learn a lot more about Auto layout and Auto layout constraints.
But for now let’s, jump back into Xcode and take a look at how we can position and center our label on the screen. Alright. So back in interface builder, I want you to select your label just to make sure that it’s highlighted and then down here.
There are a couple of buttons where you can add Auto layout constraints, so click on not add new constraints. But this button called a line because we want to basically align this label in the center of the screen.
So we’re gonna check horizontally and vertically in container, and then click add to constraints, and you can instantly see these lines here that represent the constraints you just added, as well as the label being centered on the screen.
If you’ve made an error. Don ‘ T worry check it out right here. This is called the document outline and it basically shows you all of the elements and all of the constraints that are in your view, right now, so just open up constraints.
You can highlight your constraints that you’ve added. Maybe you’ve made an error or something like that. You can either delete them right now. I can hit delete and get rid of them or, if you highlight them in the utilities, pane on the right hand, side in this size inspector or they there’s different inspectors, that you can select, make sure that you’re.
Looking at either the attributes, inspector or the size inspector, and then you can edit some of the properties for your constraint, I’m, going to show you just the leading them right now off of the document outline, so they’re gone.
I’m gonna. Do it again, so you can hit your label now and you can go into a line and select horizontally and vertically in container and then add two constraints like that. The next thing we’re going to do is we’re going to edit that word inside the label so make sure your label is highlighted and then, on the right hand, side again make sure you’re.
Looking at the attributes inspector right here under text, you’re, going to be able to just type in whatever you want. I’m gonna type in hello, world and voila, so click on the Run button on your Xcode project and it’s.
Gon na launch the simulator once again and you should be seeing something that looks like this. Congratulations. You built your first step to get a copy of the recap notes of what we went over today, as well as some practice exercises just click right over here or find it in the description below in the next lesson.
You’re, going to be building this in Xcode, but first, if you like this video, please give it a thumbs up and subscribe to my channel by hitting that red subscribe button below and if you don’t want to miss the Next lesson just hit that Bell icon to get notified of when it gets released.
Now I want to turn it over to you with the skills that you’re going to learn. Are you going to build an app or a game? Let me know by leaving a quick comment below and then just click on that thumbnail for lesson 2 and I’ll, see you there bye for now hello and welcome to how to make an app for beginners in this video.
I’m, going to show you how to make an app, even if you’ve, never programmed a single line of code before now. By the end of these next 10, lessons you’ll have built these apps and user interfaces, and I ‘
Ll also show you how to put them on your phone so that you can show your friends and family. But more importantly, I’m, going to teach you the fundamental skills that you ‘ Ll need to build any sort of app.
So, by taking these beginner lessons, you’re, going to get a really nice and solid foundation in iOS app development from there you’ll want to grab my free seven-day, app action plan where you can create a customized app roadmap.
Just to build your app, you also want to join our active Facebook community, where you can get help and support from myself and the team and tons of other people learning iOS, just like you, so that you’re, never stuck or alone on your Journey to create apps now the last time I taught this, it was viewed by over 1.
2 million people and tons of success stories came out of it. Ton of people created their own mobile apps, as you can see some of them on the wall behind me now. I know that’s, all going to come for you too, but it all starts right here right now.
Are you ready let’s? Do it welcome to code with Kris the place to be? If you want to learn how to make an app, I’m Chris, and I’m, so glad you’re here. First things: first, how do you create an app from scratch? Well, it all starts with a program called Xcode, where you design the user interface for your app and write your code that gets turned into an iPhone app, which you can publish to the App Store where millions of people can download and use it before that.
Let’s backtrack a bit though Xcode is a program you can download for free and the code. I’ll, be teaching you. How to write is called the Swift programming language. Don’t be intimidated. If you’ve, never coded before, because I guarantee you’ll get the hang of it.
Next Xcode can only be installed on Mac computers, but if you don’t have access to one, you do not need to spend thousands of dollars to buy one instead check out my video on Xcode for Windows using Mac Stadium, first, alright.
So with that out of the way let’s dive in and let me show you around Xcode, so the first thing you’re going to want to do is to download Xcode. If you haven’t already, and all you have to do – is hit command spacebar on your keyboard, to launch spotlight type in App Store to launch it and then in the search bar type in Xcode, and that’s going to find It now I’ve, already got it installed.
So if you don’t, you want to go ahead and do that. I’m gonna warn you, though it’s, a pretty big application, so it does take a little while to install and if you can’t, if it gives you an error message or something like that, scroll down Check on the compatibility, if you click it, it tells you what version of Mac OS it needs for this one.
It needs ten point, thirteen point six, but when ever they upgrade Xcode, this number gets higher and higher. So your you might have to update your version of Mac OS in order to install Xcode, also keep in mind the size here, even though it says 6.
1 gigs. It sometimes needs a little extra space in order to do the installation. So once you have, it installed, go ahead and open it. You’re gonna be greeted with a dialog like this. What we’re going to do in this video is create a brand new Xcode project, so click on create a new Xcode project.
If you don’t see that dialog. For some reason, maybe you’ve launched Xcode before you can always go up to file, go to Neal and choose project, and that’s. Gon na get you to the same place. Now there’s, a bunch of different templates that you can start with to help.
You just be a little quicker in terms of what you want to create. What we’re going to want in this lesson, is to be under this iOS tab, because there are different platforms you can build for using Xcode and Swift, which is the great thing about learning these two things.
But we’re going to do i OS today and we’re, going to choose single view app and that’s, going to give us our basic one-page app or one screen app. Next, we’re, going to want to configure some of the options for our new projects, such as what the name is, what the unique ID of it is and for the product name.
You can name it something. I’m going to choose hello world like that. The team drop-down – you might not have a team here and that’s, not going to matter right now. But you will want to create a team when it gets to the point where you want to put the app on your actual device, and I ‘
Ll. Show you how to do that later on in the series organization name. I would either put your company name or your personal name and then what’s common under organization? Identifier is comm dot and then your name or your company name so combine with the product name that’s, going to be the bundle identifier you’re gonna see this term used quite a bit.
It’s. Basically, like the unique ID for the app that you’re, creating when you publish your app when you upload it to the app store and that sort of stuff you’re, going to need that bundle, ID okay. So next very important is to make sure your language is set to Swift, because that’s.
What we’re learning here, you can leave these guys unchecked and then click on next and you can also leave source control unchecked as well. We’re, not going to go through that right now go ahead and click create and you’re gonna have your brand new Xcode project.
Now it kind of looks intimidating because there’s. All these checkboxes and dropdowns – and you know this interface to someone who hasn’t seen it before – is pretty confusing. But I’m gonna walk through it with you right now, and I also have a reference sheet for you with a diagram and all the keyboard shortcuts for Xcode.
So make sure you grab that in the description below. So we’re, going to start on the left hand, side of the interface, and this is the Navigator area. You’ll notice across the top that there are different tabs, that you can click.
It might not be so clear. In the beginning, but these are different navigators that you can choose by far the most common one you’ll, be using. Is this project navigator, where you can see all of the files in your Xcode project now clicking on any of these files? Will change what’s in the middle, that’s called the editor area, so, for instance, right now we have this first project file clicked on and that’s.
Why we see all of the project properties in the editor area? If we click on View controller? The Swift you’re, going to see that this turns into the code editor so that you can write swift code, go ahead and click on main dot.
Storyboard – and this is going to change into an editor where you can customize the screen for your app – we’re, going to be doing this shortly. This is actually called interface builder, so you can kind of get what why that name is the way it is.
Next, let’s, go to assets, XE assets. This is where you’re, going to put all the images for your project that you’re, going to use and then launch screen dot. Storyboard is another sort of interface builder file where you can customize the launch screen and then the plist has some further properties for your project.
So at a high level, those are the files that, by default, are included inside your Xcode project. Now, moving along to the right side of the screen, we’ve got the utilities pane and what you see here depends on what you’re clicking on inside of the editor area.
So it’s like a further drill down, so, for instance, if we go into the main dot storyboard – and I click on this white area, which is my view or my screen – it’s, going to show me further details about that And in the viewcontroller.
swift, if i click on, let’s, say some piece of code, then it’s going to tell me something related with that, but keep in mind that again there are some different tabs with this utilities. Pane, as you can see up here, so if we’re going into the main thought storyboard, you can see that there are a couple more tabs and that’s, because I can configure properties for this element.
So it looks like Xcode. Has experienced an internal error, but usually these are fine. You can just close the project and we launch it. I’m, not going to do that right now. It’s, fine across the top of the interface.
You have your Xcode toolbar. Now, on the left side of the toolbar, you have some buttons to run your project and stop your project and then to the right of that. This is actually a drop-down where you can select the destination on which to run your project.
Now, if you plug in your phone, you can actually select your phone from that drop-down. But if you don’t have a phone plugged in don ‘ T worry because Xcode has a bunch of simulators where you can run your project on and it’s going to show it on the screen.
We’re gonna. Do that in just a second in the middle. Here you have your status bar it’s. Gon na show you what’s, going on with your project, what it’s, doing right now, and then on the right-hand side.
There are a couple of more controls here which we’re going to get to in second, but in the rightmost part of that toolbar, you’re gonna see these buttons, which are really helpful to you right now. It’s just to hide and show these different areas that we’re talking about.
If you click this middle one, you’ll notice that it brings up this little tray down here that we really haven’t talked about yet, and this pane down here is called the debug console and when you’re Running your project and let’s, say an error happens.
You’re gonna get some details about that error in this debug console. So by default it’s hidden. If you want to show it, all you have to do, is click this button to bring it up. So these are the major sections of the Xcode user interface.
It’s, not that complicated. Once you know right what we’re gonna do now is go ahead and run our project on a simulator. So in that drop-down that I showed you by default right now it’s, iPhone 10 arm.
You can select any one. You want to try out and just click this big play button right here. It’s, going to launch that the Iowas similar now the first time you do this. It might take a couple of minutes, but then subsequent times is going to be a lot faster after the simulator has launched.
So you actually don’t really need a physical iPhone device. If you don’t have one you can still build and test your app now there’s. One quick thing I want to mention, and that is if your simulator is way too big for your screen and you can’t see all of it.
You can actually scale it down, so you can either go up to the menu of the simulator and choose you know physical size or point accurate or pixel accurate. You can use these shortcuts command one command two or command three to change the size of the simulator.
That you see so just a handy tip for you in case the simulator is way too large for your screen. So when your app has launched, you’re, going to see this white screen and that’s because we haven’t really added anything to our app yet.
But before we do that, let’s! Talk about how that Xcode project turned into this app that I’m. Seeing in the simulator this top layer is the view it’s. The screen that the user sees now you can configure this view from the main storyboard file in your Xcode project.
The second layer under that is called the view controller. Now this code file is responsible for managing the view, for instance, when the user taps on the view it’s, going to let the view controller know, and then you can write code inside that view, controller to handle that tap to either run some Process in the background, or maybe display some new information on the screen, you get the idea.
Now. This view, controller is represented by the view, controller dot, Swift file in your Xcode project and, as we said before, if you click on that file, the editor area turns into the code editor, where you can write Swift code to manage the view.
Now, if your app has multiple screens in most cases, each screen is just going to have its own view and view controller. Now let’s, go back into Xcode and we’re, going to stop our project and we’re, going to add something to the view so that there’s, something to see let’s.
Hit on the stop icon right here and then click on main storyboard, so you’re. Seeing the interface builder, and now I’m going to introduce you to this button here called the library button. So if we click this, it’s, going to bring up a list of objects or UI elements that you can add to your view.
Type in the label to search for this guy – and all you have to do – is click and drag it onto your view. Like this, now you’re, going to see that label on your view right here now you can drag it around and you can position it, but that’s, not really going to do anything because Xcode actually has its own way of Positioning and sizing layout items Xcode uses a system called auto layout to position and size.
The elements on the screen this system makes it easier for you to design a single interface that looks good on iPhone iPad and all the other screen sizes of future iOS devices. Now, basically, all you have to do is specify a list of rules for each element that dictates how it should be positioned and how it should be sized relative to other elements on the screen.
For example, this element should be the same height as this other element, or maybe this element should be centered on the screen. These rules are called constraints and in lesson two. You’re, going to learn a lot more about Auto layout and Auto layout constraints.
But for now let’s, jump back into Xcode and take a look at how we can position and center our label on the screen. Alright. So back in interface builder, I want you to select your label just to make sure that it’s highlighted and then down here.
There are a couple of buttons where you can add Auto layout constraints, so click on not add new constraints. But this button called a line because we want to basically align this label in the center of the screen.
So we’re gonna check horizontally and vertically in container, and then click add to constraints, and you can instantly see these lines here that represent the constraints you just added, as well as the label being centered on the screen.
If you’ve made an error. Don ‘ T worry check it out right here. This is called the document outline and it basically shows you all of the elements and all of the constraints that are in your view, right now, so just open up constraints.
You can highlight your constraints that you’ve added. Maybe you’ve made an error or something like that. You can either delete them right now. I can hit delete and get rid of them or, if you highlight them in the utilities, pane on the right hand, side in this size inspector or they there’s different inspectors, that you can select, make sure that you’re.
Looking at either the attributes, inspector or the size inspector, and then you can edit some of the properties for your constraint, I’m, going to show you just the leading them right now off of the document outline, so they’re gone.
I’m gonna. Do it again, so you can hit your label now and you can go into a line and select horizontally and vertically in container and then add two constraints like that. The next thing we’re going to do is we’re going to edit that word inside the label so make sure your label is highlighted and then, on the right hand, side again make sure you’re.
Looking at the attributes inspector right here under text, you’re, going to be able to just type in whatever you want. I’m gonna type in hello, world and voila, so click on the Run button on your Xcode project and it’s.
Gon na launch the simulator once again and you should be seeing something that looks like this. Congratulations. You built your first step to get a copy of the recap notes of what we went over today, as well as some practice exercises just click right over here or find it in the description below in the next lesson.
You’re, going to be building this in Xcode, but first, if you like this video, please give it a thumbs up and subscribe to my channel by hitting that red subscribe button below and if you don’t want to miss the Next lesson just hit that Bell icon to get notified of when it gets released.