Press "Enter" to skip to content

How to Make an App for Beginners 2020 – Lesson 1

How to Make an App for Beginners 2020 – Lesson 1 hello and welcome to how to make an app for beginners in this article Im going to show you how to make an app even if youve never programmed a single line of code before. Now by the end of these next 10 lessons youll have built these apps and user interfaces and Ill also show you how to put them on your phone so that you can show your friends and family but more importantly Im going to teach you the fundamental skills that youll need to build any sort of app so by taking these beginner lessons youre going to get a really nice and solid foundation in iOS app development. From there youll 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 youre 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 thats all going to come for you too but it all starts right here right now are you ready lets do it welcome to CodeWithChris the place to be if you want to learn how to make an app.

Im Chris and Im so glad youre 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 lets backtrack a bit though. Xcode is a program you can download for free and the code Ill be teaching you how to write is called the Swift programming language dont be intimidated if youve never coded before because I guarantee youll get the hang of it next Xcode can only be installed on Mac computers but if you dont have access to one you do not need to spend thousands of dollars to buy one instead check out my article on Xcode for Windows using MacStadium first. Alright so with that out of the way lets dive in and let me show you around Xcode so the first thing youre going to want to do is to download Xcode if you havent 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 thats going to find it now Ive already got it installed so if you dont you want to go ahead and do that Im gonna warn you though its a pretty big application so it does take a little while to install and if you cant 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 youre gonna be greeted with a dialog like this what were going to do in this article is create a brand new Xcode project so click on create a new Xcode project if you dont see that dialog for some reason maybe youve launched Xcode before you can always go up to file go to New and choose project and thats gonna get you to the same place now theres 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 were 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 were going to do iOS today and were going to choose Single View App and thats going to give us our basic one-page app or one screen app next were 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 Im going to choose hello world like that the team drop-down you might not have a team here and thats 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 Ill 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 whats common under organization identifier is comm dot and then your name or your company name so combine with the product name thats going to be the bundle identifier youre gonna see this term used quite a bit its basically like the unique ID for the app that youre creating when you publish your app when you upload it to the app store and that sort of stuff youre going to need that bundle ID okay so next very important is to make sure your language is set to Swift because thats what were learning here you can leave these guys unchecked and then click on next and you can also leave source control unchecked as well were not going to go through that right now go ahead and click create and youre gonna have your brand new Xcode project now it kind of looks intimidating because theres all these checkboxes and dropdowns and you know this interface to someone who hasnt seen it before is pretty confusing but Im 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 were going to start on the left hand side of the interface and this is the Navigator area youll 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 youll 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 whats in the middle thats called the editor area so for instance right now we have this first project file clicked on and thats why we see all of the project properties in the editor area if we click on ViewController.Swift youre 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 were 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 lets go to Assets.xcassets this is where youre going to put all the images for your project that youre 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 weve got the utilities pane and what you see here depends on what youre clicking on inside of the editor area so its 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 its going to show me further details about that and in the Viewcontroller.Swift if I click on lets say some piece of code then its 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 were going into the Main.Storyboard you can see that there are a couple more tabs and thats 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 Im not going to do that right now its 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 dont have a phone plugged in dont worry because Xcode has a bunch of simulators where you can run your project on and its going to show it on the screen were gonna do that in just a second in the middle here you have your status bar its gonna show you whats going on with your project what its doing right now and then on the right-hand side there are a couple of more controls here which were going to get to in second but in the rightmost part of that toolbar youre gonna see these buttons which are really helpful to you right now its just to hide and show these different areas that were talking about if you click this middle one youll notice that it brings up this little tray down here that we really havent talked about yet and this pane down here is called the debug console and when youre running your project and lets say an error happens youre gonna get some details about that error in this debug console so by default its 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 its not that complicated once you know right what were 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 its iPhone XR you can select any one you want to try out and just click this big play button right here its 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 dont really need a physical iPhone device if you dont have one you can still build and test your app now theres one quick thing I want to mention and that is if your simulator is way too big for your screen and you cant 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 CMD1, CMD2 or CMD3 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 youre going to see this white screen and thats because we havent really added anything to our app yet but before we do that lets talk about how that Xcode project turned into this app that Im seeing in the simulator this top layer is the view its 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 its 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 lets go back into Xcode and were going to stop our project and were going to add something to the view so that theres something to see lets hit on the stop icon right here and then click on main storyboard so youre seeing the interface builder and now Im going to introduce you to this button here called the library button so if we click this its 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 youre going to see that label on your view right here now you can drag it around and you can position it but thats 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 youre going to learn a lot more about Auto layout and Auto layout constraints but for now lets 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 its 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 were 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 youve made an error dont 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 youve added maybe youve 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 theres different inspectors that you can select make sure that youre looking at either the attributes inspector or the size inspector and then you can edit some of the properties for your constraint Im going to show you just the leading them right now off of the document outline so theyre gone Im 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 were going to do is were 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 youre looking at the attributes inspector right here under text youre going to be able to just type in whatever you want Im gonna type in hello world and voila so click on the Run button on your Xcode project and its gonna 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 youre going to be building this in Xcode but first if you like this article please give it a thumbs up and subscribe to my channel by hitting that red subscribe button below and if you dont 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 youre 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 Ill see you there bye for now How to Make an App for Beginners 2020 – Lesson 1 hello and welcome to how to make an app for beginners in this article Im going to show you how to make an app even if youve never programmed a single line of code before. Now by the end of these next 10 lessons youll have built these apps and user interfaces and Ill also show you how to put them on your phone so that you can show your friends and family but more importantly Im going to teach you the fundamental skills that youll need to build any sort of app so by taking these beginner lessons youre going to get a really nice and solid foundation in iOS app development. From there youll 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 youre 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 thats all going to come for you too but it all starts right here right now are you ready lets do it welcome to CodeWithChris the place to be if you want to learn how to make an app. Im Chris and Im so glad youre 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 lets backtrack a bit though. Xcode is a program you can download for free and the code Ill be teaching you how to write is called the Swift programming language dont be intimidated if youve never coded before because I guarantee youll get the hang of it next Xcode can only be installed on Mac computers but if you dont have access to one you do not need to spend thousands of dollars to buy one instead check out my article on Xcode for Windows using MacStadium first.

Alright so with that out of the way lets dive in and let me show you around Xcode so the first thing youre going to want to do is to download Xcode if you havent 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 thats going to find it now Ive already got it installed so if you dont you want to go ahead and do that Im gonna warn you though its a pretty big application so it does take a little while to install and if you cant 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 youre gonna be greeted with a dialog like this what were going to do in this article is create a brand new Xcode project so click on create a new Xcode project if you dont see that dialog for some reason maybe youve launched Xcode before you can always go up to file go to New and choose project and thats gonna get you to the same place now theres 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 were 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 were going to do iOS today and were going to choose Single View App and thats going to give us our basic one-page app or one screen app next were 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 Im going to choose hello world like that the team drop-down you might not have a team here and thats 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 Ill 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 whats common under organization identifier is comm dot and then your name or your company name so combine with the product name thats going to be the bundle identifier youre gonna see this term used quite a bit its basically like the unique ID for the app that youre creating when you publish your app when you upload it to the app store and that sort of stuff youre going to need that bundle ID okay so next very important is to make sure your language is set to Swift because thats what were learning here you can leave these guys unchecked and then click on next and you can also leave source control unchecked as well were not going to go through that right now go ahead and click create and youre gonna have your brand new Xcode project now it kind of looks intimidating because theres all these checkboxes and dropdowns and you know this interface to someone who hasnt seen it before is pretty confusing but Im 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 were going to start on the left hand side of the interface and this is the Navigator area youll 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 youll 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 whats in the middle thats called the editor area so for instance right now we have this first project file clicked on and thats why we see all of the project properties in the editor area if we click on ViewController.Swift youre 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 were 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 lets go to Assets.xcassets this is where youre going to put all the images for your project that youre 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 weve got the utilities pane and what you see here depends on what youre clicking on inside of the editor area so its 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 its going to show me further details about that and in the Viewcontroller.Swift if I click on lets say some piece of code then its 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 were going into the Main.Storyboard you can see that there are a couple more tabs and thats 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 Im not going to do that right now its 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 dont have a phone plugged in dont worry because Xcode has a bunch of simulators where you can run your project on and its going to show it on the screen were gonna do that in just a second in the middle here you have your status bar its gonna show you whats going on with your project what its doing right now and then on the right-hand side there are a couple of more controls here which were going to get to in second but in the rightmost part of that toolbar youre gonna see these buttons which are really helpful to you right now its just to hide and show these different areas that were talking about if you click this middle one youll notice that it brings up this little tray down here that we really havent talked about yet and this pane down here is called the debug console and when youre running your project and lets say an error happens youre gonna get some details about that error in this debug console so by default its 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 its not that complicated once you know right what were 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 its iPhone XR you can select any one you want to try out and just click this big play button right here its 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 dont really need a physical iPhone device if you dont have one you can still build and test your app now theres one quick thing I want to mention and that is if your simulator is way too big for your screen and you cant 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 CMD1, CMD2 or CMD3 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 youre going to see this white screen and thats because we havent really added anything to our app yet but before we do that lets talk about how that Xcode project turned into this app that Im seeing in the simulator this top layer is the view its 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 its 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 lets go back into Xcode and were going to stop our project and were going to add something to the view so that theres something to see lets hit on the stop icon right here and then click on main storyboard so youre seeing the interface builder and now Im going to introduce you to this button here called the library button so if we click this its 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 youre going to see that label on your view right here now you can drag it around and you can position it but thats 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 youre going to learn a lot more about Auto layout and Auto layout constraints but for now lets 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 its 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 were 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 youve made an error dont 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 youve added maybe youve 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 theres different inspectors that you can select make sure that youre looking at either the attributes inspector or the size inspector and then you can edit some of the properties for your constraint Im going to show you just the leading them right now off of the document outline so theyre gone Im 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 were going to do is were 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 youre looking at the attributes inspector right here under text youre going to be able to just type in whatever you want Im gonna type in hello world and voila so click on the Run button on your Xcode project and its gonna 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 youre going to be building this in Xcode but first if you like this article please give it a thumbs up and subscribe to my channel by hitting that red subscribe button below and if you dont 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 youre 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 Ill see you there bye for now

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *