hello and welcome to how to make an appfor beginners in this video I’m going toshow you how to make an app even ifyou’ve never programmed a single line ofcode before. Now by the end of these next10 lessons you’ll have built these appsand user interfaces and I’ll also showyou how to put them on your phone sothat you can show your friends andfamily but more importantly I’m going toteach you the fundamental skills thatyou’ll need to build any sort of app soby taking these beginner lessons you’regoing to get a really nice and solidfoundation in iOS app development. Fromthere you’ll want to grab my free7 Day App Action Plan where you cancreate a customized app roadmap just tobuild your app you also want to join ouractive Facebook community where you canget help and support from myself and theteam and tons of other people learningiOS just like you so that you’re neverstuck or alone on your journey to createapps. Now the last time I taught this itwas viewed by over 1. 2 million peopleand tons of success stories came out ofit, ton of people created their ownmobile apps as you can see some of themon the wall behind me. Now I know that’sall going to come for you too but it allstarts right here right now are youready let’s do it welcome to CodeWithChristhe place to be if you want tolearn how to make an app. I’m Chris andI’m so glad you’re here first thingsfirsthow do you create an app from scratchwell it all starts with a program calledXcode where you design the userinterface for your app and write yourcode that gets turned into an iPhone appwhich you can publish to the App Storewhere millions of people can downloadand use it before that let’s backtrack abit though. Xcode is a program you candownload for free and the code I’ll beteaching you how to write is called theSwift programming language don’t beintimidated if you’ve never coded beforebecause I guarantee you’ll get the hangof itnext Xcode can only be installed on Maccomputers but if you don’t have accessto one you do not need to spendthousands of dollars to buy one insteadcheck out my video on Xcode for Windowsusing MacStadium first. Alright so withthat out of the way let’s dive in andlet me show you around Xcode so thefirst thing you’re going to want to dois to download Xcode if you haven’talready and all you have to do is hitCMD + Spacebar on your keyboard tolaunch Spotlight. Type in App Store to launch it and thenin the search bar type in Xcode andthat’s going to find it now I’ve alreadygot it installed so if you don’t youwant to go ahead and do that I’m gonnawarn you though it’s a pretty bigapplication so it does take a littlewhile to install and if you can’t if itgives you an error message or somethinglike thatscroll down check on the compatibilityif you click it it tells you whatversion of macOS it needs for this oneit needs 10. 13. 6but when ever they upgrade Xcode thisnumber gets higher and higher so youryou might have to update your version ofmacOS in order to install Xcode alsokeep in mind the size here even thoughit says 6. 1 Gigs it sometimes needs alittle extra space in order to do theinstallation so once you have itinstalled go ahead and open it you’regonna be greeted with a dialog like thiswhat we’re going to do in this video iscreate a brand new Xcode project soclick on create a new Xcode project ifyou don’t see that dialog for somereason maybe you’ve launched Xcodebefore you can always go up to file goto New and choose project and that’sgonna get you to the same place nowthere’s a bunch of different templatesthat you can start with to help you justbe a little quicker in terms of what youwant to create what we’re going to wantin this lesson is to be under this iOStab because there are differentplatforms you can build for using Xcodeand Swift which is the great thing aboutlearning these two things but we’regoing to do iOS today and we’re goingto choose Single View App and that’sgoing to give us our basic one-page appor one screen app next we’re going towant to configure some of the optionsfor our new projects such as what thename is what the unique ID of it is andfor the product name you can name itsomething I’m going to choose helloworld like that the team drop-down youmight not have a team here and that’snot going to matter right now but youwill want to create a team when it getsto the point where you want to put theapp on your actual device and I’ll showyou how to do thatlater on in theseries organization name I would eitherput your company name or your personalname and then what’s common underorganization identifier is comm dot andthen your name or your company name socombine with the product name that’sgoing to be the bundle identifier you’regonna see this term used quite a bitit’s basically like the unique ID forthe app that you’re creating when youpublish your app when you upload it tothe app store and that sort of stuffyou’re going to need that bundle ID okayso next very important is to make sureyour language is set to Swift becausethat’s what we’re learning here you canleave these guys unchecked and thenclick on next and you can also leavesource control unchecked as well we’renot going to go through that right nowgo ahead and click create and you’regonna have your brand new Xcode projectnow it kind of looks intimidatingbecause there’s all these checkboxes anddropdowns and you know this interface tosomeone who hasn’t seen it beforeis pretty confusing but I’m gonna walkthrough it with you right now and I alsohave a reference sheet for you with adiagram and all the keyboard shortcutsfor Xcode so make sure you grab that inthe description below so we’re going tostart on the left hand side of theinterface and this is the Navigator areayou’ll notice across the top that thereare different tabs that you can click itmight not be so clear in the beginningbut these are different navigators thatyou can choose by far the most commonone you’ll be using is this projectnavigator where you can see all of thefiles in your Xcode project now clickingon any of these files will change what’sin the middle that’s called the editorarea so for instance right now we havethis first project file clicked on andthat’s why we see all of the projectproperties in the editor area if weclick on ViewController. Swiftyou’re going to see that this turns intothe code editor so that you can writeswift code go ahead and click onMain. Storyboard and this is going tochange into an editor where you cancustomize the screen for your app we’regoing to be doing this shortly this isactually called interface builder so youcan kind of get what why that name isthe way it is next let’s go toAssets. xcassets this is where you’regoing to put all the images for yourproject that you’re going to use andthen Launchscreen. Storyboard isanother sort of interface builder filewhere you can customize the launchscreen and then the info. plist has somefurther properties for your project soat a high level those are the files thatby default are included inside yourXcode project now moving along to theright side of the screen we’ve got theutilities pane and what you see heredepends on what you’re clicking oninside of the editor area so it’s like afurther drill down so for instance if wego into the Main. Storyboard and Iclick on this white area which is myview or my screen it’s going to show mefurther details about that and in theViewcontroller. Swiftif I click on let’s say some piece ofcode then it’s going to tell mesomething related with that but keep inmind that again there are some differenttabs with this utilities pane as you cansee up here so if we’re going into theMain. Storyboard you can see thatthere are a couple more tabs and that’sbecause I can configure properties forthis element so it looks like Xcode hasexperienced an internal error butusually these are fine you can justclose the project and we launch it I’mnot going to do that right now it’s fineacross the top of the interface you haveyour Xcode toolbar now on the left sideof the toolbar you have some buttons torun your project and stop your projectand then to the right of that this isactually a drop-down where you canselect the destination on which to runyour project now if you plug in yourphone you can actually select your phonefrom that drop-down but if you don’thave a phone plugged in don’t worrybecause Xcode has a bunch of simulatorswhere you can run your project on andit’s going to show it on the screenwe’re gonna do that in just a second inthe middle here you have your status barit’s gonna show you what’s going on withyour project what it’s doing right nowand then on the right-hand side thereare a couple of more controls here whichwe’re going to get to insecond but in the rightmost part of thattoolbar you’re gonna see these buttonswhich are really helpful to you rightnow it’s just to hide and show thesedifferent areas that we’re talking aboutif you click this middle one you’llnotice that it brings up this littletray down here that we really haven’ttalked about yet and this pane down hereis called the debug console and whenyou’re running your project and let’ssay an error happens you’re gonna getsome details about that error in thisdebug console so by default it’s hiddenif you want to show it all you have todo is click this button to bring it upso these are the major sections of theXcode user interface it’s not thatcomplicated once you know right whatwe’re gonna do now is go ahead and runour project on a simulator so in thatdrop-down that I showed you by defaultright now it’s iPhone XR you canselect any one you want to try out andjust click this big play button righthere it’s going to launch that the iOSSimilar now the first time you do thisit might take a couple of minutes butthen subsequent times is going to be alot faster after the simulator haslaunched so you actually don’t reallyneed a physical iPhone device if youdon’t have one you can still build andtest your app now there’s one quickthing I want to mention and that is ifyour simulator is way too big for yourscreen and you can’t see all of it youcan actually scale it down so you caneither go up to the menu of thesimulator and choose you know physicalsize or point accurate or pixel accurateyou can use these shortcuts CMD+1,CMD+2 or CMD+3 to changethe size of the simulator that you seeso just a handy tip for you in case thesimulator is way too large for yourscreen so when your app has launchedyou’re going to see this white screenand that’s because we haven’t reallyadded anything to our app yet but beforewe do that let’s talk about how thatXcode project turned into this app thatI’m seeing in the simulator this toplayer is the viewit’s the screen that the user sees nowyou can configure this view from theMain. Storyboard file in your Xcodeprojectthe second layer under that is calledthe ViewController. Now this code fileis responsible for managing the view forinstance when the user taps on the viewit’s going to let the view controllerknow and then you can write code insidethat view controller to handle that tapto either run some process in thebackground or maybe display some newinformation on the screen you get theidea now this view controller isrepresented by the ViewController. Swiftfile in your Xcode project and aswe said before if you click on that filethe editor area turns into the codeeditor where you can write Swift code tomanage the view now if your app hasmultiple screens in most cases eachscreen is just going to have its ownview and view controller now let’s goback into Xcode and we’re going to stopour project and we’re going to addsomething to the view so that there’ssomething to see let’s hit on the stopicon right here and then click on mainstoryboard so you’re seeing theinterface builder and now I’m going tointroduce you to this button here calledthe library button so if we click thisit’s going to bring up a list of objectsor UI elements that you can add to yourview type in the label to search forthis guy and all you have to do is clickand drag it onto your view like this nowyou’re going to see that label on yourview right here now you can drag itaround and you can position it butthat’s not really going to do anythingbecause Xcode actually has its own wayof positioning and sizing layout itemsXcode uses a system called auto layoutto position and size the elements on thescreen this system makes it easier foryou to design a single interface thatlooks good on iPhone, iPad and all theother screen sizes of future iOS devicesnow basically all you have to do isspecify a list of rules for each elementthat dictates how it should bepositioned and how it should be sizedrelative to other elements on the screenfor example this element should be thesame height as this other element ormaybe this element should be centered onthe screen these rules are calledconstraints and in lesson two you’regoing to learn a lot more about Autolayout and Auto layout constraints butfor now let’s jump back into Xcode andtake a look at how we can position andcenter our label on the screen alrightso back in interface builder I want youto select your label just to make surethat it’s highlighted and then down herethere are a couple of buttons where youcan add Auto layout constraints so clickon not add new constraints but thisbutton called a line because we want tobasically align this label in the centerof the screen so we’re gonna checkhorizontally and vertically in containerand then click add to constraints andyou can instantly see these lines herethat represent the constraints you justadded as well as the label beingcentered on the screen if you’ve made anerror don’t worrycheck it out right here this is calledthe document outline and it basicallyshows you all of the elements and all ofthe constraints that are in your viewright now so just open up constraintsyou can highlight your constraints thatyou’ve added maybe you’ve made an erroror something like that you can eitherdelete them right now I can hit deleteand get rid of them or if you highlightthem in the utilities pane on the righthand side in this size inspector or theythere’s different inspectors that youcan select make sure that you’re lookingat either the attributes inspector orthe size inspector and then you can editsome of the properties for yourconstraint I’m going to show you justthe leading them right now off of thedocument outline so they’re gone I’mgonna do it again so you can hit yourlabel now and you can go into a line andselect horizontally and vertically incontainer and then add two constraintslike that the next thing we’re going todo is we’re going to edit that wordinside the label so make sure your labelis highlighted and then on the righthand side again make sure you’re lookingat the attributes inspector right hereunder text you’re going to be able tojust type in whatever you want I’m gonnatype in hello world and voila so clickon the Run button on your Xcode projectand it’s gonna launch the simulator onceagain and you should be seeing somethingthat looks like thiscongratulations you built your firststep to get a copy of the recap notes ofwhat we went over today as well as somepractice exercises just click right overhere or find it in the description belowin the next lesson you’re going to bebuilding this in Xcode but first if youlike this video please give it a thumbsup and subscribe to my channel byhitting that red subscribe button belowand if you don’t want to miss the nextlesson just hit that Bell icon to getnotified of when it gets released now Iwant to turn it over to you with theskills that you’re going to learn areyou going to build an app or a game letme know by leaving a quick comment belowand then just click on that thumbnailfor lesson 2 and I’ll see you there byefor now


Write A Comment