How To Make An App With XCode

How To Make An App With XCode

Hello and welcome to how to make an app with XCode in this post I'm going to tell 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 explain 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. Now that's all going to come for you too but it all starts right here right now are your ready let's do it. I'm so glad you're here first thing is how to 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 thing 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 later I will write a post on Xcode for Windows using MacStadium first. Alright so with that out of the way let's dive in and let me tell 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. 


As I've already got it installed so if you don't want to go ahead and do that I'm gonna warn you though sometimes it does take a little while to install and if you can't if it gives you an error message or something then scroll down check on the compatibility if you click it. It will 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 you might have to update your version ofmacOS in order to install Xcode also keep in mind the size here even thoughit 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.


what were going to do in this post 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 goto 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 youwant to create what were going to wantin this lesson is to be under this iOS tab because there are different platforms you can build for using Xcodeal and Swift which is the great thing about learning these two things but we're going to do iOS today and were going to choose Single View App.


And that's 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 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 tell you how to do that later on in the series organization name I would either put 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 itsy basically like the unique ID forthe app that youre 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 were learning here you can leave these guys unchecked and then click on next and you can also leave source control unchecked as well weren't 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 check boxes and drop downs 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 were 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 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 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 cancustomize the screen for your app were going to be doing this shortly this isactually called interface builder so you can kind of get what why that name isthe way it is next let's go to Assets this is where you're 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 launchscreen and then the info.plist has some further properties for your project soat 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 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 If you on this white area which is myview or my screen its going to show me further details about that and in theView controller.Swift if you click on let's say some piece of code then its going to tell you 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 that's because you 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 you can launch it.

Then the top of the interface you have your Xcode toolbar now on the left sideof 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 and gonna show in the middle 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 were going to get to in second but in the right most 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 were 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 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 it's not that complicated once you know right what were gonna do now is go ahead and run your project on a simulator so in that drop-down that will show 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 there 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 alot 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 theres 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 white screen and that's because you haven't really added anything to your app yet but before we do that let's talk about how that Xcode project turned into this app that you'll see in the simulator this to player 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 thebackground 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 I 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 ownview and view controller now let's goback into Xcode and were going to stop our project and were 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 story board so youre seeing the interface builder.

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 all you have to do is click and drag it onto your view 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 the element should be the same height as the other element or maybe the element should be centered onthe 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 just try Xcode and take a look at how we can position and center your 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 you've 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 ofthe constraints that are in your view right now so just open up constraints you can highlight your constraints that you've added maybe youve made an erroror something like that you can either delete them right now You 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 the different inspectors that you can select make sure that youre looking at either the attributes inspector orthe size inspector and then you can edit some of the properties for you're constraint.

Now and you can go into a line and select horizontally and vertically in container and then add two constraints, 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 righthand side again make sure you're looking at the attributes inspector right under text you're going to be able to just type in whatever you want for example hello world and voila so click on the Run button on your Xcode project and it's gonna launch the simulator once again and you should be seeing  your project. Congratulations you built your first step to XCode if you don't want to miss the next lesson keep in touch with my blog.

I'll see you again there bye for now.