Good day and welcome to how you can make an app for rookies in this video i will show you how to make an app even if you might have never programmed a single line of code before. Now by the end of those subsequent 10 lessons you can have built these apps and user interfaces and i’m going to additionally show you put them in your mobilephone as a way to show your associates and loved ones however more importantly i’ll teach you the predominant knowledge that you can have got to construct any variety of app so by means of taking these newbie classes you’re going to get a relatively pleasant and stable basis in iOS app development. From there you’ll be able to want to seize my free 7 Day App motion Plan the place you can create a customized app roadmap simply to build your app you additionally want to become a member of our active fb group where that you would be able to get aid and aid from myself and the staff and tons of other humans finding out iOS identical to you so that you are by no means stuck or by myself in your ride to create apps.Now the last time I taught this it used to be considered by way of over 1.2 million persons and lots of success experiences got here out of it, ton of humans created their own cellular apps as you’ll find a few of them on the wall in the back of me. Now i do know that’s all going to come back for you too but it surely all begins right right here proper now are you capable let’s do it welcome to CodeWithChris the position to be if you wish to learn tips on how to make an app. I am Chris and i’m so completely happy you are here first matters first how do you create an app from scratch good all of it begins with a software called Xcode where you design the user interface in your app and write your code that will get changed into an iPhone app which that you could put up to the App retailer the place hundreds of thousands of humans can download and use it earlier than that let’s back off a little though. Xcode is a application you could down load at no cost and the code i’m going to be educating you easy methods to write is called the Swift programming language don’t be intimidated should you’ve in no way coded earlier than due to the fact that I warranty you’ll be able to get the grasp of it subsequent Xcode can most effective be established on Mac computers but in the event you should not have entry to at least one you don’t need to spend countless numbers of bucks to purchase one rather determine out my video on Xcode for home windows utilising MacStadium first.Very well so with that out of the way let’s dive in and let me show you around Xcode so the very first thing you are going to need to do is to download Xcode if you have not already and all you must do is hit CMD + Spacebar for your keyboard to launch spotlight. Variety in App retailer to launch it and then in the search bar form in Xcode and that’s going to seek out it now I’ve already obtained it hooked up so if you happen to don’t you want to move ahead and do that i am gonna warn you although it is a sexy tremendous application so it does take slightly while to install and if you are not able to if it gives you an error message or some thing like that scroll down investigate on the compatibility when you click on it it tells you what variation of macOS it wants for this one it desires 10.Thirteen.6 but when ever they upgrade Xcode this number will get higher and higher so your you would have got to replace your version of macOS so as to set up Xcode also hold in intellect the scale right here although it says 6.1 Gigs it generally desires slightly extra space with the intention to do the installation so after you have it mounted go forward and open it you’re gonna be greeted with a dialog like this what we’ll do in this video is create a manufacturer new Xcode mission so click on create a new Xcode task in case you don’t see that dialog for some reason might be you could have launched Xcode before which you could normally go as much as file go to New and decide on venture and that is gonna get you to the identical place now there’s a bunch of distinct templates which you could begin with to aid you simply be just a little quicker in terms of what you wish to have to create what we’re going to want on this lesson is to be under this iOS tab when you consider that there are distinct platforms that you would be able to construct for utilizing Xcode and Swift which is the first-rate thing about finding out these two matters but we will do iOS at present and we’ll pick Single View App and that’s going to offer us our normal one-web page app or one display app next we’ll wish to configure some of the options for our new initiatives such as what the identify is what the distinct identity of it’s and for the product name that you can title it some thing i will pick hello world like that the crew drop-down you might now not have a staff right here and that is now not going to topic proper now however you will want to create a workforce when it will get to the point where you want to position the app in your exact device and i will exhibit you ways to try this later on within the series group title i’d either put your enterprise name or your personal name and then what’s original beneath organization identifier is comm dot after which your title or your organization name so mix with the product title that is going to be the bundle identifier you’re gonna see this time period used really a bit of it can be basically like the exact identification for the app that you’re developing while you submit your app whilst you upload it to the app retailer and that style of stuff you’re going to want that bundle identification k so next very main is to make sure your language is ready to Swift because that is what we’re studying right here that you would be able to go away these guys unchecked after which click on next and you can additionally depart supply manage unchecked as well we’re now not going to move via that proper now go forward and click on create and you’re gonna have your manufacturer new Xcode assignment now it form of looks intimidating since there’s all these checkboxes and dropdowns and you understand this interface to someone who hasn’t seen it before is lovely complicated but i am gonna walk by means of it with you proper now and that i also have a reference sheet for you with a diagram and the entire keyboard shortcuts for Xcode so be certain you grab that in the description below so we will start on the left hand facet of the interface and this is the Navigator discipline you’ll be able to detect across the highest that there are one of a kind tabs that you could click it would not be so clear within the starting however these are one-of-a-kind navigators which you could choose by using some distance essentially the most original one you’ll be utilizing is that this challenge navigator where you’ll find the entire files for your Xcode task now clicking on any of these documents will trade what’s within the core that’s referred to as the editor area so for instance right now now we have this first venture file clicked on and that is why we see all of the project residences in the editor field if we click on on ViewController.Swift you are going to look that this turns into the code editor so as to write swift code go ahead and click on fundamental.Storyboard and this is going to change into an editor the place you can customize the reveal on your app we’ll be doing this rapidly this is truly referred to as interface builder so that you would be able to variety of get what why that name is the best way it’s subsequent let’s go to belongings.Xcassets that is the place you are going to position all of the images to your assignment that you are going to use and then Launchscreen.Storyboard is an additional style of interface builder file where which you can customize the launch screen after which the data.Plist has some additional properties in your venture so at a excessive level these are the documents that by using default are integrated inside your Xcode challenge now relocating along to the proper facet of the screen we’ve received the utilities pane and what you see here relies on what you are clicking on inside the editor field so it’s like a further drill down so for illustration if we go into the foremost.Storyboard and i click on on this white field which is my view or my screen it is going to exhibit me further small print about that and in the Viewcontroller.Swift if I click on on let’s consider some piece of code then it is going to tell me something associated with that however preserve in mind that again there are some different tabs with this utilities pane as you will see up right here so if we’re going into the most important.Storyboard one can find that there are a couple extra tabs and that is in view that i can configure residences for this element so it appears like Xcode has experienced an internal error but customarily these are excellent which you can just close the venture and we launch it i’m now not going to try this correct now it can be first-class across the top of the interface you have got your Xcode toolbar now on the left aspect of the toolbar you’ve some buttons to run your undertaking and discontinue your mission and then to the proper of that that is virtually a drop-down where that you would be able to select the destination on which to run your mission now in case you plug on your mobilephone which you can really choose your phone from that drop-down but should you wouldn’t have a mobile plugged in do not worry on the grounds that Xcode has a bunch of simulators the place that you would be able to run your task on and it will exhibit it on the monitor we’re gonna do this in only a 2nd within the middle right here you could have your repute bar it can be gonna show you what is going on on with your undertaking what it’s doing right at times on the correct-hand side there are a couple of extra controls right here which we’re going to get to in second however in the rightmost part of that toolbar you’re gonna see these buttons which are rather useful to you right now it’s simply to cover and exhibit these different areas that we’re talking about for those who click this center one you’ll be able to discover that it brings up this little tray down right here that we relatively have not pointed out but and this pane down here is known as the debug console and when you are walking your challenge and let’s consider an error happens you’re gonna get some important points about that error on this debug console so with the aid of default it’s hidden if you want to exhibit all of it you need to do is click on this button to carry it up so these are the principal sections of the Xcode user interface it is now not that complex as soon as you realize correct what we’re gonna do now is go ahead and run our task on a simulator so in that drop-down that I confirmed you through default correct now it’s iPhone XR which you can opt for anyone you want to take a look at out and simply click on this tremendous play button correct here it is going to launch that the iOS similar now the first time you do that it might take a few minutes but then subsequent times is going to be lots faster after the simulator has launched so that you clearly do not particularly want a physical iPhone gadget if you should not have one you could nonetheless build and experiment your app now there is one fast factor I wish to mention and that is if your simulator is far too enormous for your display and also you are not able to see all of it you could without a doubt scale it down so that you can both go up to the menu of the simulator and prefer you understand physical measurement or point accurate or pixel accurate you should use these shortcuts CMD+1, CMD+2 or CMD+three to change the size of the simulator that you just see so only a useful tip for you in case the simulator is far too enormous on your monitor so when your app has launched you are going to see this white reveal and that is considering the fact that we have not really added anything to our app yet however earlier than we do that permit’s talk about how that Xcode mission became this app that i am seeing in the simulator this prime layer is the view it is the screen that the user sees now that you could configure this view from the foremost.Storyboard file to your Xcode project the 2nd layer beneath that’s referred to as the ViewController. Now this code file is in charge for managing the view for instance when the person faucets on the view it is going to let the view controller comprehend after which that you could write code inside of that view controller to manage that tap to both run some method within the history or possibly display some new knowledge on the monitor you get the notion now this view controller is represented through the ViewController.Swift file for your Xcode challenge and as we stated earlier than in the event you click on that file the editor subject turns into the code editor the place that you may write Swift code to manipulate the view now in case your app has multiple displays in most cases each display is simply going to have its possess view and view controller now let’s return into Xcode and we’re going to discontinue our challenge and we’re going to add some thing to the view so that there is some thing to look let’s hit on the discontinue icon proper right here and then click on most important storyboard so you are seeing the interface builder and now i’ll introduce you to this button right here called the library button so if we click on this it’ll bring up a list of objects or UI factors you can add to your view style within the label to seek for this man and all you need to do is click and drag it onto your view like this now you are going to see that label for your view proper here now that you can drag it round and you could function it however that’s not particularly going to do something because Xcode definitely has its own way of positioning and sizing design gadgets Xcode makes use of a method known as auto layout to role and measurement the elements on the monitor this procedure makes it less complicated for you to design a single interface that looks good on iPhone, iPad and all of the different reveal sizes of future iOS gadgets now clearly all you have got to do is specify a list of rules for each and every aspect that dictates how it should be put and how it should be sized relative to different elements on the display for illustration this aspect must be the same height as this different detail or probably this aspect will have to be headquartered on the reveal these rules are referred to as constraints and in lesson two you are going to learn a lot more about Auto design and Auto layout constraints however for now let’s jump back into Xcode and take a seem at how we will function and center our label on the reveal alright so again in interface builder i want you to decide on your label simply to ensure that it’s highlighted after which down here there are a couple of buttons the place that you can add Auto design constraints so click on on no longer add new constraints but this button called a line since we want to truly align this label within the core of the reveal so we’re gonna check horizontally and vertically in container and then click add to constraints and that you could immediately see these traces here that characterize the constraints you just brought as good because the label being founded on the monitor should you’ve made an error don’t fear examine it out right right here that is referred to as the file outline and it in actual fact suggests you the entire elements and all the constraints which might be for your view correct now so simply open up constraints you could spotlight your constraints that you have brought maybe you have got made an error or anything like you could either delete them proper now i will hit delete and get rid of them or if you highlight them within the utilities pane on the right hand aspect on this size inspector or they there may be specific inspectors which you could pick make certain that you’re watching at either the attributes inspector or the scale inspector after which which you could edit one of the crucial residences in your constraint i’m going to exhibit you simply the main them right now off of the file outline so they’re gone i’m gonna do it again so which 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 following factor we’re going to do is we will edit that word throughout the label so be certain your label is highlighted after which on the proper hand part once more make certain you are looking at the attributes inspector correct here underneath textual content you’re going to be in a position to simply kind in anything you want i’m gonna form in hi there world and voila so click on on the Run button for your Xcode task and it’s gonna launch the simulator as soon as again and also you will have to be seeing some thing that appears like this congratulations you built your first step to get a duplicate of the recap notes of what we went over at present as good as some apply workout routines just click correct over here or in finding it in the description under within the next lesson you are going to be constructing this in Xcode but first if you like this video please give it a thumbs up and subscribe to my channel by way of hitting that pink subscribe button under and if you don’t want to miss the next lesson simply hit that Bell icon to get notified of when it will get launched now I wish to turn it over to you with the capabilities that you are going to be taught are you going to construct an app or a sport let me know with the aid of leaving a fast comment below after which just click on on that thumbnail for lesson 2 and i’m going to see you there bye for now
