Coding Part


XCode Overview & Getting Started
Macbook Setup
PREVIEW13m 42s

The course is part of this learning path

Start course
1h 9m

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.


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 finalize our application with writing the actual code. So, we have connected our views, so we don't need two screens anymore. I'm going to close one of the editors over here. I'm going to open back these panes, left hand pane and right hand pane. I'm going to go back to ViewController.swift, which is the file that we're going to write our code into. So, we have connected the image view even though we're not going to do anything with the label we have connected it as well. You can get rid of this if you want but not just delete it, but you're going to have to break the connections first as we have seen the previous lecture, but no need to worry about that. What we need to worry about is this function. So, you have to make sure you go into this function. This curly braces are great deal actually. So, it defines the scope of the code that we're writing.

So if we want to write something inside of a class, then we should write within this curly braces. That's why we have dragged and dropped the image. You might label and change button inside this class curly braces. If we want to write something inside of viewDidLoad, then we're going to have to write it inside of the curly braces of the viewDidLoad. Since we want to write it under change button click, there we're going to use the curly braces between the changeButtonClicked beginning and the end. So, that's why I have hit enter and just open some space under the changeButtonClicked, so that I can write my code. So, whatever I write over here will happen when somebody taps on the change button. Okay, so what I'm going to do? I'm going to refer the image view and as you can see once I type that, I can see the imageView that we have connected.

I can either hit tab or just double-click on it in order to auto complete it or of course, if you want you can just write it on your own. Now, what I'm going to do? I'm going to change a property of this image view. So, in order to do that, I'm going to just hit dot. So, when I hit dot, it shows me the functions and the properties attributes of this image view that we can actually change. So, this is exactly the same thing like coming over here and going to the attributes inspector, not the Identity one. Yes, this one. So, once we click on the imageView, we can change some of the features from here. Right? So, rather than changing here, we're going to do this in the coding section. And in the coding section, of course we can reach much more just hit dot and you can see what you can do with this imageView and of course, we can change the imageView's image as well.

So, if you write 'in', you can see the image over here. It's asking for UI Image. So, we're going to see what it means later on. But all we have to do is just say equals. Okay, 'imageView. image='. So, it's exactly like coming over here and choosing metallica2 rather than doing that here, I'm just going to do this over there and I'm going to say UI Image, okay, and open a parenthesis. So, this is the way to go. UI image. Okay, and inside of this UI Image, I'm going to have to write the name of the file that I want to reach actually. In order to do that, you can just write whatever you have put over here. So, mine is metallica2, make sure you use double quotation marks like this. So two double quotation marks and inside of these double quotation marks, you're going to have to write exactly what you see in the SATs folder. So, I see metallica2 and here you go. But as you can see, it gives me some error and this is the beauty of the X code idea as well.

If we make an error, it actually reminds us and it gives us some tips to fix this area as well. If you click over here for example, now you can just say fix, it will fix the problem. And if you didn't see this, don't worry, I'm going to show you how to properly do this, but it actually instructs us to solve the problems, it lets us, it guides us. Okay. So, let me show you how to do this properly. I'm going to delete this UI Image and write it from scratch. Okay. And that's how actually it's supposed to happen in the first place. So, if you write UI Image and if you open a parenthesis, you have to see the options over here. For example, I'm going to choose, you can choose any of the options over here, but right now I'm going to choose the 'named'' because I just want to give a name to the file and it will find it in the assets folder. After all, we want to just get an image from the stats folder and in order to do that, you're going to have to choose the named.

So, I'm going to say metallica2. So right now, if you're thinking how I'm supposed to know all of this stuff, like how should I know to choose named? How should I know to create a UI Image over here? You will understand later on. Okay. We're not doing this to learn about programming. So, let me close this down and run it on my simulator. So, as you can see everything seems to be fine. But if I click on the change button, here you go, now it's changed. As you can see, it works in a way that we want. It works perfect and this is exactly what we want. If I click one more time by the way, nothing will happen because our code instructs to change the metallica2 picture and this is already metallica2 picture. So, nothing will happen. So if you're thinking, how should I write my code in order to change this back to metallica1? If we click one more time, we're going to see it later on because again, we haven't even learned anything about programming right now. We just did this to be exercise.

We just needed to get familiarized with the X code, but eventually, you managed to create your first applications, so congratulations on that. So, you have created your first application. Of course, it doesn't do very much. But in order to do something, you have to learn the basics of the swift. So, we're going to do that within the next section.

About the Author
Learning Paths

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.

Covered Topics