User Interface
Start course

In this course, we're going to build a currency converter app in order to teach you about JSON and APIs. We're going to get some data from the internet, process them, and then display them to the user.

Intended Audience

This course is designed for anyone who wants to:

  • Learn about iOS development and coding
  • Move into a career as an iOS developer
  • Master Swift skills


To get the most out of this course, you should have some basic knowledge of iOS.


Hi. Within this lecture, we're going to create our project from here, of course. And we're going to create our user interface. So, let me go with 'Single View App' as usual, okay? And let's uncheck this 'SwiftUI' I think. And I'm going to call this 'Currency Converter', okay? So, that's what we're going to do. So, let me hit on 'Next' and put my folder in my regular 'iOS Complete' folder. And, of course, we're going to start with creating our user interface. But, before we do that, we have to decide what currencies that we want to show to the user. We have to choose some currencies. We cannot show 170 of them. It will be a waste of time for us because we're just trying to build an exemplary app, we can just show five or six currencies to the users so that we can understand how to work with the API and JSON data. So, let me go to 'Main.storyboard' first and let me show you how this is going to work out. So, in here, we have all this data. And we have to understand what we are getting in here so that we can actually decide what to show, what to display to the user. And, I'm going to copy all of this data from here. I'm going to display it in a better way.

So, if you go to 'Google' and if you search for 'json beautifier' like this. And, in fact, you can just say, 'json beautifier online'. This will give us a lot of options to beautify our JSON format. So, you can go for the first one or the second one. I believe, I have used this one before. So, this is You can paste this value in here, you can copy this, and you can just paste it in here. And you can just click on this 'Beautify' button in order to beautify this JSON format. So, if you click on this, as you can see now, we have a very structured look. So, this gives me all this information. So, this is how JSON format is supposed to be shown.

So, let me see what we get in our data. So, it gives me, whether this is a success or not, since we are getting the data, as you can see, 'success: true'. So, you can use this value in order to understand if you're getting the data or not. Maybe if the success is false, then you can just show some alert message to the user saying that there was something wrong.

So, in here, we have the timestamp indicating when this is actually requested and the base currency is Euro and the date is the 6th of the August in 2019. And, in here, we're just seeing the relative value to these currencies to the Euro. For example, if you come over here, you will see the Euro and it's 1 because Euro over Euro is 1. But, if you come down, like a GBP, this is Great Britain Pound. As you can see 1 Euro equals to 0.92 Pounds.

And, in here, we have the USD, 1 Euro equals to 1.11. And we have some Turkish lira, like 1 Euro equals to six Turkish liras. And, we're going to choose some of these data. We're going to choose the currencies that we want to work with and we're going to display them to the user. I'm going to only work with the rate. I'm going to only display the currencies to the user but maybe you may want to get the date. You may want to get the other values and show them to the user as well later on. For right now, you can just follow along with me and try to understand what's going on in here.

So, I'm going to create a label over here. I'm just going to call this 'Currency Converter' so that we can have a title for our app. This is going to be our title. And let me make this a little bit bigger and put it over here. And I'm going to bring in some more of these labels. Because if you're going to be displaying all those values in the labels, right?

For example, if we're going to display the value of the USD. We're going to do that using a label. So, we have to choose what we're going to display in here. For example, if we go back to our data, we have the CAD. And, it stands for Canadian dollars, I believe. So anyway, I'm going to use it. So, let me just say, 'CAD' and make this a little bit bigger. Then, you can just copy and paste this by 'Command + C' and 'Command + V'. And bring down this here so that I can name this something else. Let me see. This is Swiss Franc, so CHF. I'm going to go for 'CHF'. And let me copy and paste one more time, if I can do it. Finally, let me bring it over here and this time let's go for 'GBP'. So, this is Pound, this is Sterling. So, that's cool. Let me copy and paste one more time. And, in here, I'm going to choose 'JPY'. So, this is Japanese Yen. And, of course, we're going to have to go with 'USD' anyway because this is one of the most commons. And, for final thing, I'm going to go for Turkish lira. So, this is 'TRY'. So, that's good, we're going to display the six of these currencies to the user. And, I believe, that's enough in order for us to understand what's going on in this app.

Finally, I'm going to bring in a button and this button will get me the rates. This button will download me the data. So, of course, we can do all of these things in under like viewDidLoad or another function as well. But, I'm going to do this with a button so that we can just call this whenever we want and let me reset to suggested constraints and here you go. I believe, we have our constraints. Now, I can bring those labels in. So, let me open my assistant editor and let me start with CAD. So, this is Canadian dollars. And I'm going to 'Ccontrol + drag' that here and I'm going to call the 'CAD' label.

Next thing here is 'CHF' label. This is 'Swiss Franc'. So, let me go over here and let's bring in the 'Pound'. So, this is 'GBP' label. This is Japanese Yen. So, 'JPY' label and the 'USD' label. See why I have chosen six rather than 100 for example. So, it's going to take a little time. So, this is going to be 'TRY' label. So, that's good. Last thing to do is to bring in the button as an action. So, let me tidy up here a little bit. And the final thing is to drag and drop this button as an action and I'm going to call this, 'getRatesClicked'. So, here you go. Our user interface is actually ready. So, I believe, we can stop here. Within the next lecture, we're going to start writing our first codes in order to create this request.


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