In this course, we're going to get ready to write some code. We're going to set your MacBook up and we are going to download a software called Xcode, in which we will write our swift codes. And we're going to show you how it feels to write an iPhone or iPad app. So, if you're ready to write your first iPhone app, then let's get started.
Intended Audience
This course is intended for anyone looking to learn iOS development in a practical way and who wants to start building their own apps on iOS.
Prerequisites
This is a beginner-level course designed for people with no experience or knowledge of iOS development and can be taken by anyone with a MacBook and an internet connection. This course is part of the Complete iOS 15 / iOS 14 Developer learning path and we recommend that you follow that path.
Hi. Within this lecture, we're going to see how we can actually test our software, our application that we are writing in a simulated environment. So, we have a simulator embedded in the Xcode. So, this is actually a virtual iPhone machine and we're going to see how to use it. But first of all, let me go to Main.storyboard and show you some of these features. First, I'm going to open the library as we have seen in the previous lecture. And I'm going to bring in a view. So, as you can see, we have a lot of various choices over here, first of which is label. So, if you just take this label and drag it and drop it in anywhere you want on the storyboard, you can zoom in and see the label, and you can zoom in and zoom out from the bottom as well. By the way, you can see the label over here. So, label is actually a text holder. You can choose the label from this side or you can just click on the label.
Just make sure you choose it so that you can display the properties of the label at the right-hand side. So, right now, we have a different view, and we can see the properties and we can change them. For example, rather than label, I'm going to write my name. So, Atil. So, if you want you can just write your own name over here and you can try in a way like this. So, for example, I can change the color like that. Just choose a color and play with it. So, you can choose the font; you can make it bigger. For example, like this. As you can see, it's pretty easy to follow this and just make changes. So, this is what storyboard looks like. For example, we have Alignment over here, we can align it centrally. Of course, we cannot see it because it's not very big. So, make it big; like dragging and dropping like that. Okay, stretch it out a little bit. You can just drop it in anyway you want and then you can see the left alignment, right alignment, center alignment. So, it's very easy.
It's like using Paint or PowerPoint. You can change the background if you want to blue, for example or anything you want. Let's keep it default right now. But this is how you do your user interface. It's pretty easy. We're going to test and see if that works in a simulated environment. So, it's important for you to have this label over here and once you do that, you can click on it and come over to this bar. We haven't talked about this bar yet, the bottom bar. So, we can zoom in and zoom out using these icons, and we can change the layout from here like we are viewing this as iPhone 11 right now. We can choose any size, like iPhone 11 or maybe something less bigger, like a smaller version or this way, like this is eight plus. So, you can change the simulated layout from here to see how your layout behaves in different sizes for example. So, I'm going to go with iPhone 11 right now but it really doesn't matter because we can simulate it in the simulators as well.
We're going to see how to do that in a couple of minutes actually. So, that's it for the selection, and you can change the orientation if you want like portrait, landscape and that's it. So, this is where you change the settings and also at the right-hand side, right bottom side, we have some kind of buttons. Over here, within these buttons, If you hover over with your mouse you can see the explanations like Add New Constraints or or Resolve Auto layout Issues. So, we're going to see what a constraint is and how to use it in section three, in the layout section. But right now, all you have to do is just click on this 'Resolve Auto Layout Issues' button and it just do this constraint thing automatically. You don't know what the constraint is yet, I know. And the constraint is actually a way to encapsulate our views, like making views stay in the place that we want. In order to do that, we're just going to say Add Missing Constraints and it will add some blue lines as you can see over here.
So, these lines are constraints and it makes it in a way that our label stays in the center as we want. We're going to see the details of this in the layout section as I said before. All you have to do is just click on the 'Auto Resolve Layout Issues' and say Add Missing Constraints. Now, I'm going to build this. In order to build that, just hit on this 'Play' button and in some versions, you can see the play button over here. But you will see the Play button obviously. And over there you can change the simulated environment. Right now, I believe we are in the iPod touch. I'm going to go for iPhone 11 or iPhone 8, not iPod touch obviously. But you can choose any simulator here you want to simulate the application that you have built so far. So, it's pretty cool. It will bring up a simulated iPhone for you which you can actually use. So, I'm going to choose the iPhone 11 and hit the 'Play' button.
So, this will build my application and open the simulator for me. By the way, if you don't see any kind of options over here to choose. Don't worry, I'm going to show you how to add simulators in a couple of minutes as well. So, if this is the first time that you're actually opening the simulator, it may take some time. But there you can see, it's pretty easy and it's pretty fast for me, it's not actually very fast because it's stalling a little bit to install my own application, but once it's done, I can see my application open in the simulator. So, let's wait until it's fully loaded, and here you go. Now, we see the label, we see the colors that we have chosen, we see the font that we have chosen, it looks exactly like this. So, this is working, here you go.
Maybe you see your own name over here which is cool. Now, you can just close this and use this as a regular phone. So, this has iOS 14 built-in inside right now. So, if you want to see how iOS 14 looks like; if you haven't downloaded on your phone yet, you can just do it from here as well, and you can go back to your app and play with it anytime you want. So, we're going to use this simulator a lot during the lectures obviously. So, you can close this by just hitting the 'Stop' button as well. So, this is Play button, this is Stop button and if you don't see any simulators or if you want to add an additional simulator, you can choose this option. Over here, you will see the devices and the simulators connected to your Xcode. So, in Devices you can actually connect your own iPhone if you have one with a USB cable and you use it as a simulator but it has some kind of restrictions. You can only, I believe, install 10 or seven projects within a week if you don't have any developer account.
So, it's not very recommended, it's better to go with the simulators. So, over here, you can see the simulators and if you hit on this 'Plus' button, you can just add any simulator you want. So, you see all the available options over here, like iPhone X. I believe we don't have iphone X, you can just add it and you can actually, add in any iOS version you want as well. So, if you want to test your application in iOS 13 environment, you can just download it and add the simulator in that list and play with it. So, it's a very good feature. So, that's how you test your applications in a simulated environment in a virtual iPhone device. Another thing, once we open that, this log pane opened up over here at the bottom. So, this is where we see the logs of what's going on.
Of course, you can just close this down and it will automatically open once you run your application, you can click on this button to close this down. And we haven't seen actually yet, but we can close the right pane and left pane down anytime we want as well. So, first of all, let me show you this 'Add Editor' on Right button. So, if you hover over these buttons over here, you can see the editor button over there. When you click one of these Editor buttons, it will just add another editor over here.
So, why do you want to have two panes in the middle? Maybe you're going to work with code at one side for example. Let me just click on this. So, at the right-hand side, we see the ViewController which is the main file that we're going to run our codes, write our codes, and on the left-hand side, just click on the Main.storyboard and as you can see, we see the design of our app. So, if you hit on this left button over here, and it will open and close down.
And maybe in some versions, you can see the toggle button on the right, like you have seen. It doesn't matter, it just behaves exactly the same. It's either located at the left-hand side or the right-hand side. So, you can close down the panes anytime you want. And you can just design your app on the left-hand side and write your codes on the right-hand side, if you want. If you don't want, you can just close this down. So, this is how you open and close the panes, how you open and close the editors, and how you work with the simulator. Now, we're pretty much used to working with Xcode. I believe it's our time to write our first application, which is of course, going to be a really easy application but it will teach us a lot. So, let's do that in the next lecture.
Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.