How to Make an App for Beginners (2020): Even If You Are Never Programmed a Single Line Of Code..

 

Hello and welcome to how to make an app for beginners in this  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 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 Code With Chris 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 X code where you design the user interface for your app and write you 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. X code 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 X code 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 X code for Windows using Mac Stadium first. Alright so with that out of the way let's dive in and let me show you around X code so the first thing you're going to want to do is to download X code 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 X code 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 tells you what version of macOS it needs for this one it needs 10.13.6 but whenever they upgrade X code this number gets higher and higher so your. You might have to update your version of macOS in order to install X code 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 X code project so click on create a new X code project if you don't see that dialog for some reason maybe you've launched X code before you can always go up to file go to New and choose project and that's gonna 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 X code 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 option 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 X code 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 X code 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 X code 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 .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 .Story board 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 Launch screen .Story board 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 X code 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 .Story board 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 View controller .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 .Story board 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 X code 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 X code 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 X code 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 gonna 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 X code 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 X code project turned into this app that I'm seeing in the simulator this to layer is the view it's the screen that the user sees now you can configure this view from the Main. Story board file in your X code 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. Swift file in your X code 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 X code 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 X code actually has its own way of positioning and sizing layout items X code 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 X code 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 her 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 X code project and it's 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 you're going to be building this in X code 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