Create an Anime Guide App Using Web API in SwiftUI | Aaditya Singh | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Create an Anime Guide App Using Web API in SwiftUI

teacher avatar Aaditya Singh, IOS Dev, Digital Artist

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

9 Lessons (51m)
    • 1. Introduction

      1:27
    • 2. Planning out our app

      3:45
    • 3. Creating the basic Xcode Project

      1:26
    • 4. How to use Structures to decode data

      3:16
    • 5. Creating the Function to Decode Data from the web

      7:44
    • 6. Building the UI of our app to show values

      8:52
    • 7. Adding the Functionality to load images inside our app

      4:47
    • 8. Creating Picker Views to allow users to interact with the app

      13:16
    • 9. Finishing our project

      6:12
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

5

Students

1

Project

About This Class

Hi, this class teaches one of the most fundamental things in ios development: using web APIs so I would teach you about decoding data, how to present them inside your application also how to load images from the web, afterward we would create some user interactive views inside our app which would let the users change the view by. just selecting a few options! you will learn a lot from this!

Meet Your Teacher

Teacher Profile Image

Aaditya Singh

IOS Dev, Digital Artist

Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: I welcome you all to this pose that I would teach you how you can create a Swift do UI application using web APIs. So it's an unofficial my animal list API, which we would source from this website called chicken. And they're from where we would clear it out application which would have several rows and would allow the user to select the page number as well as a subtype for which he or she wants to see the list of the anime as well. So throughout this course, you will learn several things. First of all, using two-way bindings, you will learn how to decode data and how to decode the image data also and store it inside of you have GUI application. And how you can change the URL string from the user inputs so that the user can change the way what data is being shown to him or her. So all of this would be dot inside this course. And the only prerequisite is having a Mac with Xcode install and some basic knowledge of Swift Language. And asked of all I would teach you inside this course. My name is Dan and I'm your instructor for this course. And I've been like doing iOS development for quite a while now for see you in this class. And I hope you learned a lot of new things here. 2. Planning out our app: So yes, we are going to build an application that uses API, web API to be precise. So toward the load out animalistic from the data API URL that we will provide it. For this purpose, we are using this API from this website. I found this website from a GitHub repository or tried to link it in the file which I will provide as a zip to download. So this is nothing but just an unofficial my animal list API. So you don't require any authentication, although it would work with those kind of APIs as well in future classes, like how to do authentication and then use API key and stuff. But for this purpose we're just going to use this API. So it has several sections, but for our convenience, have used this top one. So like it. You can see the description is here. So it returns a filter of top list of type. So for that purpose we are using enemy. We would like, I will tell you in detail also like how we can change separate terms as well later in the video. So yeah, so for like just generalizing things, we will be using the type enemy and inside which we can, you can see that I've just called a Resource and it list out desktop. So these are the top movies that it has shown to us. So in the next video, I will show you how we can duplicate this kind of behavior inside our app. So like by creating a structure. As you can see that this is an array which has elements of this datatype, like this is a whole one character, one element of the array. So one element like this, this cannot be created liked our generic type string or integer. It's obviously can be created by using structures. So hence, we will create a structure which would like show, represent this kind of a datatype, right? And obviously that would all be inside an array which would be named up outer loop more in detail in the next class. So yes, the application will be quite simple like in the user can just open it as you may have seen in the introduction as well. So this is the basic planning stage for that. So the user will just open it and it would have few options at the top. Like it would be able to choose the page number or the full data category, as I told you also, here you can see that it has like six categories and those combining manga and anime, including these 28 in total actually. So yeah, it says that it has 50 pages for each of the results, but I think that would be too much. So we can limited to 67 pages. I guess. It would be our 12th for testing are a baskets. Yeah. So yeah, soda application would all be done inside one view only. I could have stretched it into another view using class with observable object and stuff. But I think this would be worth it. And it will learn lots of new things here. You will learn how to deal with our web APIs, JSON decoding and stuff, the function that we need to write and how to create a structure. So everything I would teach you in this classroom. 3. Creating the basic Xcode Project: Okay, so let's start by creating the basic Xcode project first. So you just have to click on Export and then it would load up it's page where it would ask you like, Yes. So you just have to click on Create a New Project. And afterwards it would ask me like you want a single view app or and for which platform you wanted to. Obviously it's iOS and single-view app. Let's just give it a name. So for now I'm giving it a name, your animal list, but it's totally up to you what name you want it to give. So for the lifecycles 50 UI app, and obviously if you have signed up, then you can select a team. Otherwise, it's okay. You're just a local location where you want to save it and just click on Create. Once you have done this much, they would just show up with basic project and you would land up in that content to u dot swift flag. There we go. So first thing is that we should select accumulator thought our device. So let me just select iPhone 11 and then you can just click on resume. So it will just resume the simulator in the canvas area. And once it's loaded, we would continue making my obligation. 4. How to use Structures to decode data : So once your this area just preview section is loaded, let's just go back to our a baby. You'll see that this is how the JSON data is here represented. So you can see that there's a type dog which is of a type adding. And inside of this added there are these datatypes. These datatypes are really big and they contain a lot of values. So we don't really need to like load all of them. And you can see that start date is actually MD in some of them. Which gives us a hint that it's actually an optional type. Look. It's not really necessary. They do those, find it out in your first code and which type is optional or not. So you could just check it while you're making your structures. And FAR and data does not fetch, it, shows and edit and obviously something is optional. So I will show it to you as well, like what happens when you just don't declare stuff, I'll optional. So to recreate that same instance that our JSON has, we would have to create the properties with the exact same name and give you the same value as well. Like you know what the rank and the ID mote out of the type integers. So just have to create them as integers only. Don't. You cannot declare them as doing. That would cause errors and your data won't load. Now we will go about naming more values and heck, Title, then type, start date, as I mentioned earlier as well. So these are some of the types that we are using is not completely necessary that you use all of the datatypes present inside the JSON data. It's only that which ones you like, and we'll just pick them out. Use the exact name and the exam datatype. And that's about it. So you see we have done this much and I think this is all if we are left with something that is okay, yes, the image URL. And these are tricky function to load images as well. We'll talk about this more in much more detail in a later class. So for now that we have a Mendes much, now we will create a final ATI, which would have a value which will be named top, which would have these elements, right? So just now we created as Adi and you know, you can name them anything like an unnamed, a result, the structure. But actually in our JSON data there is nothing called a result because the structure name does not matter, but a property inside of it matters. So now we are conforming it to the type quotable. That's obvious because when you want to use in JSON decoding, if you have seen my earlier videos as well, the one with the food ordering app, then they do it in this way. Now you see that we have created this variable which is of the type of result which is offered type add a which contains the type result. We will continue with this in the next videos. 5. Creating the Function to Decode Data from the web: Since we have created the structure which represents the JSON data. So now let's create the function which would actually decoded, right? So we will make the function inside the structure content will actually so as to use the values, we get two inside that body property, as well as it would create a problem. We have to create an instance of this very own datatype of ours as well, so that we can use it value. You would understand it in more detail than we would be building the UI for this app. So for now you can just create an instance and declared it as a state private variable. And now we will start with creating our function. So this function's task is to use API, the URL which we would provide, and load that data, decode it, and show it inside our app. Let's just name this load data. And there's a simple function syntax for now. We will be creating some constants here as well. First one would be you added. And now we are using guard just in case it throws an error, effort is wrong or something. And we will deal it with two, like what we need to do here. So the URL is pretty straightforward. You just need to have the URL inside of it. So you can just copy it here. And yeah, there you go. You can just paste in, in-between. Yeah, inverted commas. Now it's okay. Now we would add under blocks for it as well, an else block because you see that this is incomplete for now on its own. So we need to create an else block as well, which would have a print statement which states that if this is wrong, this URLS record the wrong thing. It should give out some errors. So that's what we are actually doing here, that return statements just returns us back to the function. So if this is giving us a warning for known that you were dead we just created is not being used. So it's not does not make sense, but we will be dealing with it later on. So let's just create a new constant which will be named request. And it is Adi type URL request, which takes in the same value that URL that we created. Just know, I guess you are a request is then sort of structure only. Since it has its own initializer. It could be a class as well. And now we are. You see this thing is like quite complex. But this specific function that we are just writing, like now, just do three values you need to change and you can use it again and again for all of the recording purposes. So that's what makes it so useful. So it's better to like try to learn syntax for that. At least try to remember the main key points. And I, myself have written it several times and that is I know how to distinguish it. Not really required to mock up things in programming. Much for this very specific thing, literally works for like dozens of different APIs. So I would suggest you to try to write it down in some place and keep it with you in an old SAP or something. So now what we are doing is that we just created this URL session dot shared dot data task. And now inside of which we are writing some more code, which will then, which will then further leg fascinate our JSON decoding. And we just created leg this decoded response constant, which then uses the JSON decoder and decode status points structure that has spawned structured is that which contains that DHAP. Lou died. That arm, which is actually often type and area of results. If we just understood, result was our very first structure that we created, which has like five to six properties. And I'm just writing down some comment so as to make me remember when we, when I come back to this code, like why, why I actually wrote this in the first place. So that is like comments are important, and I've told you this several times as well. Now we are using this dispatch q dot async method. See when we actually use JSON decoder for decoding purposes. This runs in the background of the app. So what happens is that iOS requires all the main functionality to run on the main thread. But since it is a decoding purpose, it's for decoding purpose, it actually runs for the background trend thread. So this function that we are just writing, this actually brings the whole thing back to the main trend. So that's how we can use it afterwards. Now we just declare like self dot dot is actually that decoded response.data. And in your case, suppose you're creating some other application and you named the Adi some, something different, then you would write that name here in place of Doc that I have. And I only wrote up is because of the only reason that JSON data that we just saw on the web that it had contained at top value. So I had to do this. Otherwise, I would have given it some other name. But in order to load it, we need to do that. Now. We are almost done with it. But in case something goes wrong that none of these things are related to, then it should also print an error, right? How would we know that our app is not functioning well? And so for that reason we are just like creating another print function which would have written lack such field UnknownError. So you can just easily find where to look for changes. And I think in most other cases, it's the structures that we have made wrong. That is why we get that unknown edit. General, just quickly writing it down. And we're almost done with this total function, function Lolita, durable. Now we need to do like the one last step, which is like really, really important. We need to write resume. If you don't do this, then this whole thing is worthless. This whole function. So you just need to keep in mind that we need to write region. So now we will move on to the next step in the next videos, where we'll teach you how to use further clear the UA and stuff. 6. Building the UI of our app to show values : So now that we have written the function which would, which would actually decode the data. Let's go about creating the UI of the obligation since their details being decoded. And we have created an instance of the DOP value that we created inside our structure for logistically this 10. And we will have to create a list view for this. Because it makes a list mimics and all the stuff like really easy to use for inside of which we would actually give it some values. So first of all, we are giving in w top, because obviously top is the only thing which contains every day the whole data inside of it. And we're using the my enemy List underscore ID, which we have given as an integer value inside of this desserts Adi, which you may have noticed as well. So this was the only reason to use this. Either way we could have used a rank as the ideas. Well, since when we create this kind of list, we need to do some, give some idea to Swift so that it can uniquely identify all the elements. So for that purpose, you could have used a rank as well, but we are separately using my animal list ID inside of it. So now you just write item when in the place of item you can literally write anything. It's just a constant to represent a value. So now I'm just quickly creating a V stack and giving it some alignment. And now inside of these tech, I think I would add couple of TextViews. So next you will be found title would be for the rank, it would also be for the start date. And if anything else is left, I guess that I vetted enemies of the type movie or a TV show or a special. So yeah, that's what we're going to do here. We can see items as you represents a constant which helps us access to DHAP. Structures of value. Add is value. So that's what we are actually doing here. So now we just need to incorporate, incorporate those values which we just had created. So let's just give, give them some modifiers as well so as to make them look decent. So for that we are you, I am using like title to font-size for the text data. And I will just be this four times leg since I need for loose. So the second relu would be actually rank. And rank is a type of integer. So for that purpose, we are going to use string interpolation. And for those of you who have like, don't remember like Wadhwa string interpolation. Because as you recall this right now, you use inverted commas and then a backslash and then brackets. And inside we're doing right. We just created into a string. And that's what we have done harassment. We are using a rank. Let us give it some body size as well. For example, it should not be as big as title obviously that will not make sense. Neck should, under different value, should have different properties. Let us give it some foreground color as well. Numbers look really well in light green color. So I just gave them a green color is totally up to you if you want to. Give them what colors, It's totally up to you. So now we are just going about Dynamo type, and obviously I will change the font for it and a foreground color as well. And the last TV, last thing we have left is started. Remember how I declared started as actually an optional string? So you would come to know, come across a really interesting thing. When you just write started, it would throw us an error. Actually. It would see that you are using an optional here. You cannot just not give it any backup value. So for that purpose, we are using this ternary operator and Ghiberti giving it a value none actually. So it will just represent blank if there's no started. And now I'm just giving it a foreground as well. So I think fall down secondary works with. So, yeah, that's about it. And we have successfully created our GUI for now, like the basic UI, it is includes those texts lines. Remember that we have still not used our image URL and just making sure that my list is intact. And now we would obviously run our function at the end of the list. You have to appear less more attached. This modifier, which says on a beer. And once you are done with that, the app is partially complete. So it would run the function as soon as the list appears. And that's about it. And now I will show you what it actually looks like when we run the application. So yeah, I just made a simple mistake right down here. And now I would show you the result that so far what we have did ago. So it actually looks decent, kind of I would say, like our function is working at least for now. So dot JSON decoding and stuff weren't then rotate. And that's a really big thing. Lecture sometimes you can mess up the really bad in these areas. So for now, I'm just tweaking some things. And like am hoping to create an image, right? So I'm just embedding everything inside an edge stack. And let us try to add this property. It's simply stakes string inside and we have a string image, you wouldn't. So it should work out. It should load the images right beside the text data it's showing. And it would be quite easy actually. So let us try it out. What happens when we try to do it is, as we loaded our text, we are using the image for the same purpose as well. So now if I just run the app again and it would ask me to replace this m, yes, obviously replace that. And now we will see that what is outcome of when we actually tried to run this thing. And you just have to work like during the second small. Now you see that it has not loaded images. And one interesting thing is that when it does go to this debugger radio, it would show the shorter name of the images. And we show that it has not been found in the asset catalog. That means that images using this property cannot be loaded through an API. So we have to use some custom image modified for that purpose. So deal with that in the next video. Another really interesting thing I wanted to show you what happens when I don't put an optional here. Like suppose I did not see that started as an optional while seeing my JSON. So I'll just remove this stuff for now and see what happens when I don't use it as an option. Some values are really not. Some having the start dating. But let's see what happens. So when I will just run the application, it will take like 23, 20 seconds again AT, so it's showing a blank screen follow, I guess not loading. Now you'll see that it has given me an edit which is UnknownError, which is what we actually wrote at the very last of our function. And I said that to you and data management. If our structure has some problem, then obviously this fetch Edward would j's. And that's what exactly has happened. So let me just quickly correct this thing now. And now we will run this. It would actually work. It should actually work, involves working since then also obviously improve. Ok. So that's what I wanted to show you. So whenever you are like trying to load some API and if it gives us blanks cleaned and obviously it's a fault infrastructure in most of the cases. So make sure of the fact that which values are optional so that you don't mess up at this point. Let's just quickly fix that image issue as well inside of them. 7. Adding the Functionality to load images inside our app: So now we have encountered a problem that's really common to most programmers. So let's just Google it out for us. So what we would actually Google, we will Google like how to load images through an API in Swift UI. And you can see that it actually came because, yes, a drag doing it earlier as well. So now let us open the link. And fortunately someone had asked discussion and exon StackOverflow. So half of our qualities result accuracy. No, see that is it has been like 24 upward at 24 times uploaded as well. He states that it's for iOS 15. He had just given us one line answer. But for our platform is not yet iOS 15. So let us scroll down for the other option he has. And instead of using his option, which is also truly good, I use this second one actually. And this guy has given us this tank, which is a sink image which conforms to the viewable type actually. And you just have to, he states that we just have to put this long as cold inside another file. So yes, statue art, we're going to actually do know. So let me just select everything. And then we will go about pasting it inside another file, which you could just try to understand all of this, to be honest, yes. But when your work is being done, like you can just get a shortcut around things you should always try for like Smart Lock and not hard work, is you actually getting the exact answer for something, then it's pointless to like, try to do it on your own. And I don't think at all level you will be able to actually find even I was not able to find the tin. So that's why I just searched and fortunately I found an answer. So that's how get around things element. And you can just post your own cushion says, Well, if you don't see any caution assembler kind. So now that we have done this, we have you seen this much code. We can just use this code inside of you builder, builder viewable. So this is traditional code actually, like his calling that thing he created. And for the last part I learned really like this property modified that he has attached. So I will just get rid of it. And I had my one of my horns. So I was thinking of adding three mod, modifiers to this. One would be obviously aspect ratio, which would be of the type fill in this case not fit. You could either try with fill of it, but sometimes fill also works quite fine. So I'm using cell. Now. I will just give it a flame bit of a 100 and a height of 100 as well. So look quite efficient. And lastly, to finish things off, we are giving it Eclipse shape. And for that, I'm using a rounded rectangle. You could use caps, you circle rectangles. S1 is totally up to you. So it comes with some predefined values like radius 25 and style continues and I think it's quite okay. Now we will try to run the app and see how does it actually look now and if the image tag is actually working or not. So fortunately, our app works, no. And yes, Instead of that string thing, we had to add item dot image, dot URL, which I was not able to tell you at that time. But you see there's one problem with application is just showing a static API JSON data legit loaded. That's exactly upcoming, which is industry that we have given it to use. But suppose after you wouldn't want to see different stuff like movie or TV or something else, then how can he do that? It says showing the upcoming section of my animal list. So our next big task would be to fix this issue. So we would actually enable user to have some UI components to interact with him, say the application. And as soon as he interacts with them, it changes the value inside the string. So the webpage, the string is actually showing changes and it's not showing just upcoming. It's showing animated TV specials, dark rated and everything. So we'll work on that in the next few videos. 8. Creating Picker Views to allow users to interact with the app: So now that we have done this much, they're actually able to load JSON data directly into our application, but it is quite static, is just showing a single webpage. And in order to change it, we need to add some properties first, show in order to create some UI components that a user would use in order to change that URL so that it shows different webpages as selected by the user. So she drank do make the user change the page number as well as the subtype. So just saw only subtypes that represented inside that EPA site and just copying them exactly as their names were there written. So there were total of eight of them actually. So I'm just going about writing all their names inside an adder for now and see how I have not used them as static type. Or you could either just create them as static wall area as well. But I am not use them is because Swift was throwing an error while I was using this editor to loop inside a bigger. So for simplicity purpose I'm not using that. You would understand in much more detail. So for now you can see that it has a manga as when manga is not a subtype, It's actually a type. But inside this manga type, it has its own sub-type. So what we could do is that we can incorporate that man getting inside our application as well. But it could be kind of a challenges with So believed dead. If you were to give it some time, you can just make this happen. And as a third option, you can have manga inside obligation. Here. I'm just strangled. Like why and how would I approach this thing? Obviously, I would just cleared another Eddie and I would add all the time, which I saw inside of Manga. But then I quickly dropped the idea because I think it's not going in the right direction. What I mean by that is that what we're writing here, thinking that it would show up in San member is actually a subtype only. So it should all be inside subtype ADEA only. But I prefer to show that because you semantically does, haven't do when you options will just clutter them all together and it will not look good to the user. So the user experience matters. For that book was I'm not creating an under bigger as well. And I've left it for you to do. So. Just get more understanding of how the topic of works in order to understand how do we use it more when you're just completely watch this video? So now I'm creating a narrative for page number as well. You see I could have gone blue lake cleared page because you like ranging from one to 100. But that doesn't make sense. A user won't just go on about changing videos again and again. So for simplicity and usability purpose, I just use seven or six pages. So yes, user can go up to like six quizzes. But that's about it. For now that we have done this much, we just need to create state properties no and yes, adding doulas properties to the subtype, which were common in both manga and anime. Which was by virtue was by, by popularity and my favorite. And also make sure it does spellings I write. In my case I've added and the wrong spelling for favorite. So I just clicked on that. And now that we have done with this much, we just need to create the state property now actually. So yes, we can just go about creating the state property now. For example, like you write state and then you write a delete state, and then you write private war, and you just name it, you create an integer. And the reason why I'm creating an integer is because it will store the selected value inside the beaker view that we would have in our app, right? So actually the topic of you works as an it would have selection is right, and each election is marked by a numerical value, that position. So this state variable that we have created could actually use two-way binding to change it, to ReLu, to show inside of Adi. So we will use, we will use that changed value inside to change our world string. It will make much more sense once I write more gold. So I'm just creating a separate step for this purpose actually. Since we're going to learn, just write it inside the list. I feel, I felt like it will not. It will just become really consisted yellow. So it does make things more simpler to look in a more readable way. And since this is only requiring one single holder code is being written enough, single file only. This except for the fact that we just created a whole new file for the image loading purpose. Otherwise it's all inside when fine. So that's what we're doing here. So now I'm just quickly like creating the first texts that would show up at the very top of the app. And it just gave it the name your animalistic. We're up to you what name you want. So you can just get creative here and different kinds of modifiers to your text. So it looks good. So now that we have done this much, we can just create the pico now. So does index optical goes like this and just write picker, then you write the pedometer. So in our case we are right, I'm writing your selection. You can just write anything here. It doesn't really matter because we are using segmented because 10 and it won't show up debiting retained side of it. And now we are using two-way binding by writing dollar sign beforehand subtypes, election value, that state property that we just created. And this is our deletion because when the user would actually be interacting with this bigger and it changes the pKa value from something else. This subtype selection would actually store that new medical positional value inside of it. And it would just send it back push you have to UI. So it updates the new way. That's why we're doing this. And now let's just create a simple loop. As I've told you earlier as well. You could have just used a dot count for the final value of t loop, final value of dealings. But since it's not static area to it controls for just for simplicity purpose, I left it like this and has created a normal loop ranging in between the numbers. And now as I told, you, just have to always create a constant inside loop, which would go through each and every value. And that's what we're doing here. So this loop goes who were form 0 to six inside this EDI, which is named subtype. So it would list out all the values inside subtype, which we had just written here. So it's not actually 0 to six, it's actually 0 to eight. And now we are actually giving it a modified as well, which is because dial segmented because then that's what it makes it like segmented time. Otherwise, it would have shown up as a wheat stone. And I think that don't really looks well. Now that we have done this, we can just copy paste this thing again, since we only need to change like 23 properties mode, like inside the array and also the two-way binding is with the wrong state property. Here we would use beach and inside or the Adi, we would use page numbers. And that's about it. Now the second beaker would actually loop over the numbers that we had written inside this area, 01123456, which are the numbers which we would use inside our URL string as well, which would update the UI. So I hope you are able to lead glass the whole thing negawatts going on. And now that we haven't done this much, we just need to create two new state properties. I will tell you why I'm using lose their properties as well. I guess they don't really need to receive properties. But for simplicity purpose I am using and obviously they need to be inside. This only lets us fold this function for now will make things more clear. And we don't really have a lot of stuff going on, but doesn't show ones like really covering a lot of area. So it can become an elite avert confusion. So now I'm just creating that state property again. So the state properties would actually hold string venues. To name it. A really simple like SGR can just name it as CR2. And I will tell you also like why did I not name it only STR? Because STR 1 is something else. Str 1 is the initial part of our URL which contains some maintain which is not changing with any homepage, any web bijection. So now we just quickly created two new string types. And we will use the string tags inside of our function. So let's just quickly define them since we have given them an empty value, and now we are changing them since they're very evil as well. So now we will change them and we would use string interpolation for this purpose. And inside of string interpolation, we would actually write the ad E-value. So in our case, it would actually be bh number with that that page as its index. Since I told you that it has two-way binding. So whenever you change the position of this election inside picker, this page would stall that positional value. And now we are using this as the same thing as the index. So if it were at 0, it would show one. If I do it at two, it would show the value two corresponding in Delhi. For that is why what we have done here. And similarly for our touching the subtype, since you can see that page comes in the middle, I've given it a value STR to know we would use subtype. Subtype comes in the last, so I will give it a value CR3. Quite simple, right? We don't really need to put a lot of green into it to understand like what I have done. Using again, string interpolation. We would actually use the subtype Betty, and inside of which we would use a subtype selection, which is a state property that we just created. So I hope now you understand why I created the state properties and why I use them inside, because so does add to get their value inside of this function. So now that we have done this much, you can just freely modify our URL string as well, since we are going to change it as the user changes you a component. So now we just need to create our third lever. And it won't we actually available, it would actually be a constant because it won't change. And it would, I will name it as DR1 actually. And it will be till enemy. Since I decided that I will not change that type by the user input in January application. And that's a task I have given you to do. It's quite simple now you just have to create a string which contains a initial static part. And now you know that we can just simply write additional operators and between string. So that's what exactly we are going to do now. Then later on part is being stored inside string 1, string 2, and swing 3. So we'll just simply this. You can just simply add an addition sign in between them. And now it works perfectly fine. So I think in my knowledge, it should work perfectly fine. And I will show you the result and it will tell you if it works or not. 9. Finishing our project: So you see now that our application is actually loading the stuff and textures are also appearing. But the input that we just created, everything, it's not working. It's not changing the pages. It's still static. And it's not, yeah, changing even 1-bit. So what should we done with this? Firstly, we need to change a few things that text I don't really like. So just have to change that also. And the same question I asked on StackOverflow, what should I do? Because I did not get it at all. Like, how should I proceed with it since I've done everything I could? But it's still not working. So I just got a simple answer, founder. And the tool will do add this modifier at the end of bowtie because first of all, we need to write tag here with that constant name that we have used so far now, I personally don't really know why we did that. I think is not usual. But still I just kept it on as was inside-out answer. And now here comes some mean tin, which would actually make everything work. So this property, which state on change, so onchange or wart on change of this selection two-way binding value, this J property subtype selection would have to change something. And what would it be? So we're using the subtype selection we'll do inside our function rate. That's inside SDR to your artist yeah, tree actually. So just write that function name here, and that's about it. And you don't really need that parentis, you just need one colliculus. So that's the same thing we are going to attach to the second picker view as well. And this would actually solve our problems. Make sure to add curly braces and exact position. Otherwise it would throw an error showing that the structure is missing on this and are very end and Balloon. Do that. It will just break local completely. So don't do that. So now that we have done this much, it should actually really work. Here, just got confused and a court, I should add a navigation view to the whole thing. But I should actually not do that. Because if I do that, it will just push everything down word and my screen loaded API won't appear. And I've dragged it actually. So the best thing to do is to embed the list itself inside the navigation. And while I'm doing that, I taught that since I'm using the Japanese anime team or whatever, like this app is all about enemy. So let's just give it a navigation bar title legend. So for that purpose only, I just added a navigation view. And also thinking in mind that when someday some other day I come back to this project and I see that it has been done only till here. I could just add a detail view to each of the list as well. That's not really our task. Task actually. You just need to do the exact same thing, but not for a list. Now, you just need to learn one thing and then you can use navigation link to project that every column of the list to its detail view. So again, I'm leaving it up to you to try it out because it's not really that complicated. And I've done it inside my food or drink reduced as well. Food ordering that we do. Where I have shown you how we show that thing. So now I'm just trying to search up a word in Japanese so as to give it some Japanese touch. So I just searched up enjoy. Because I taught like, yeah, someone gets the whole thing, the whole list to see yet. So they should just enjoy and casually looked through everything. So I just wrote it. Decide anything off your own, George, actually, it's totally up to you. This is where it appears. We know that navigation bar title never appears at the end of the navigation will. Instead it appears at the inside of the navigation. And now you see our app is completely working. And now when you change this true topic of you, it changes its values. And yes, you can learn all the different strings. It works perfectly fine. And our title is also appearing inside of here, which states enjoy. You could just use alignment and place it in the middle. You see when you scroll down, it just shows it in a different way. And notably gets off the screen. I think this is quite a really functional application just for understanding how we pay works. And I guess you are much more confident in using APIs, no, x-naught, really something tough. So far, all the videos that I personally saw on eBay, they were really confusing. They just had 45 different views. So that is why I wanted to create this video to make it clear for you. That's not really something very complicated. And you can just do it simply. Remember to make those structures are really exactly the same as a JSON data. Remember to make sure that if you have any optional value or not, that's the main goal of more thing failing. And obviously I've given you the function, and this function actually works everywhere. Now you know how to load images as well. Now you know how to change the URL string by userInput Desmond. So I've learned quite a lot of things and actually could be used in a professional application as well. So thank you for taking this class. I hope you have learned a lot of things. Please leave a review. It would be really a big fan.