Custom API Calls - Step by Step | SwiftUI | 2020

hi everyone today we're going to look at how to make api calls that require changing parameters previously we've looked at how to make api calls that don't change but today we'll go one step further the biggest example of this is when you need to inject an api key into a url string or if you want the user to be able to search for a custom item let's get started first we're going to create a ios app and just call it anything i'm going to call it just a giffy let's call it a giffy api let's say keep everything the same swift ui no need to change language or review score data or include tests it's all going to be fine and create it and give it a second to set everything up hopefully it doesn't take too long once everything's set up let's clean up our working space here because we don't need most of this stuff to distract us and we don't need the content preview because we're not going to be using preview we're going to be using a simulator here so let's compile this first before we start changing things to make sure everything works okay and the app should launch and just say hello world there we go everything is good so when we're fetching an api the basic thing we need is we need some sort of a function to to go and actually go fetch that for us so let's start very fast by saying function and fetch api we don't need any parameters here so that's going to be blank and we're going to right away go ahead inside this function and say first thing we need to fetch an api is a url so let's say let url equal a url type with a string and we're going to put our string here which i'll show you how to do that if you go to the gifi developer site and you'll see this website and you'll have to register the registration process is very easy i've already done it once you you're in you will be asked to create a new app in order to get your own api key you can see my api key here already i will deactivate this as soon as i post the video so this will be inactive for anyone else so it doesn't matter that it's visible once you have an api key then you're ready to go into the api explorer and here you can start testing various ways to use the api you can see here your app and api combination is the one that you would have created and we want a giphy public api here we're not going to do anything with stickers for now just keeping it simple and we want a random gif for the first step of our app so if you if you just go visit this url you'll get this it's a very big data file it's json so we don't care about a lot of these things but it is a data file that we'll need to read and use in our own application so i'm just going to grab this url and put it inside our string here so we're going to let this be the url that our fetch api function is going to call okay with that what we need to create is well we need a url session and this is a pretty standard way of fetching an api you may have seen on other videos and here we plug in our url and we have to tell it with a bang that says we expect that we know that this is going to exist for sure this url is going to be there don't worry about it because it's hard coded in other situations uh you may notice that we if if you bang should be used very sparingly because sometimes your application will crash but in this case we know for certain that this works um and you can see our api key is actually in here that's that's where it goes in the request itself so here we're going to say the typical say data response or error is what we're going to get from the from the api and there's much better ways to set up functions like this i'm going to just keep it very simple very straightforward and i'm going to say if let data equal to data then uh we're going to do something all this says is if we get something in the data from the if we get some data from the url then we're going to use it and here we're going to say if let a some let's call it a giphy decoder for example uh give the decoder and we're going to say try jason decoder we're gonna we're creating a new json decoder and we're immediately calling a decode on it and this is where we'll need to tell it what pattern to look forward to but we're going to take from this data variable here so if this data variable exists we're going to take it and we're going to pull it apart based on a pattern that we care about and that's why we needed to see what this data pattern is here so we can build a pattern that resembles this that we can tell our function to use so outside of this struct and outside of it we're going to create a couple of other structs to represent this data structure the first one is going to be let's see it's going to be struck with but we're going to call it um let's say if we give you structure let's say and it has to be comply to the decodable protocol and inside we're going to say okay well there's data so we're going to say let data equal or it's going to be data data is going to be of a type and it's going to be this other object which is inside this object so it's going to be we have to call it something so i'm going to call it data structure and then i'm going to define data structure itself so struct data structure structure come on okay and you can see it recognized it up here this also has to comply to decodable i think and here is where we can pull any of these pieces of data that we want and all i care about is this url so i'm just going to say let url b of type string okay so that should be all we need really uh because now we can say hey json decoder when you get the data from this url look for this pattern look for a data object that in itself has another object which has a url which is a string and it will match this we don't care about any of these other things so we're not going to specify them here but if you find this pattern pull it out and put it into this variable here giphy decoder um or let's call it decoded giphy or something um slightly more descriptive uh and the way we tell it to use the pattern is say just um giphy structure dot self okay so now this json decoder is going to look for this if it finds it it's going to stick it in this variable and what we need to tell it then is okay assuming that that happens what do we want to do with that data that's in decoded giphy well we have to store it somewhere in our struct here and we're going to call it let's say a variable and we're going to call the variable [Music] give gif url let's say oops gif url that's going to be a string and we actually have to initialize it so i'm going to say string with parentheses meaning i'm actually giving it assigning it a value of an empty string because when we create this struct it can't be blank you can't just say type string you have to give it a value so it starts off being with a blank string and then we're going to when we come down here we're going to then put a value inside this variable and we're going to say self gif url equals to this decoded decoded giphy dot data dot url and the reason it's data.url is because data and url down here it's sort of each layer is how you drill down into the value and because url is a string and gif url is a string we can go ahead and assign this to this and we're getting an error because self is immutable and that's because here if we want this variable to actually change over the lifetime of the structure we need to say state swift assumes that this is actually not going to change ever and it just says oh okay empty string done forever but if you put state in front of it it it tells it well we might actually want to change this later because here we are assigning it a different value so now it works okay assuming all of this works we've gone quite a while without building our app and seeing if we got any errors or issues so let's go ahead and actually build this and and see what happens after we clean up our code a bit okay let's build it and see if we get a url string well we get hello world that's not great okay why because this still says hello world here that's pretty simple so instead we want to say hey the value of the string should be gif url okay that's your value now and we're actually missing quite a few things now we need to run fetch api right we're not running it anywhere we have it defined here as a function but we've never actually run it so what we want to do is maybe just for simplicity i'm going to get rid of padding and i'm going to say add a button here okay button and the label of the button is going to be fetch gif and the action of the button is going to be fetch api i'm going to keep this all in one line because it's easier to read typically this would be broken on different lines so forgive me for the not great syntax here but i think this is so simple that it's fairly okay so this just means like we have a button with this title and it does this action when you click it okay so it's we'll click it we'll run this function and hopefully we'll get the new value of gif url oh one other thing every time you have url session don't don't forget at the end of it to do resume because even though it's called resume it actually means run it it doesn't mean resume to something that was running it just means like just make sure you run it it's a bit confusing the first time you come across this but trust me that's how that works so let's just run it and see what happens and there's our button if we click it we get our little string here now we can't do anything with it so you know we can keep clicking and getting various different urls and that's great great but wouldn't it be better if we could click on it and there's a not a very straightforward way of doing this but there is a way that is good to know so we're going to say like on on click essentially on tap gesture on tab structure we're going to do we're going to say let's create a url and the url is going to be the same gif url that we have that we're displaying in the text that's an actual url but we need to just tell it it's like hey this is a url and with a string there we go and we're going to say the gif url is our string okay so we have our url now and we're going to use guard let and we're gonna let's call this uh giffy [Music] iffy url maybe my naming convention is all over the place on this but just stick with me and we're gonna say where this is url and then we're also going to say ui application shared can open url and this is our giffy url else we're going to return essentially this is a check saying like well if we can assign giphy url to this value which is up here and we can check that we can open this url which we set here then all is good but if if we cannot do these things just return and stop here because something's wrong but if it clears it goes on to the next line and here we can actually go ahead and say ui application shared open and go ahead and open our giphy url and that should open in our safari if all goes well okay we're gonna fetch our url when we're gonna click on it we get taken to giphy.com and it's going to display the url of this gif that we're using um hopefully the urls that you get are all funny and not confusing we now need to make sure that we can actually search for things and make sure that our api can be kept in a separate variable so you'll notice that here the api is the api key is actually part of the string now we can pull this out and say let api key equal this whoops there we go and here we can just go ahead and plug it in and say use this variable instead so in in many actual real apps what you would do is you would keep this in a separate file somewhere secure because it's a secret thing but just to demonstrate how it works and plugging it into an a string that you're then using as a url that's how you go about it and you'll see next we're going to use this for a search function and when we use it for a search function we're actually going to need to use a different api so i'll show you that right now if we if we go ahead and come back to the giphy developers site and we select instead of random we go to search it changes the parameters that you can have in here and it changes the string and you'll also notice down if we search for it you'll notice that it will change the data structure as well if we search for let's say cat and we do send request we'll get the difference is that we get an array of objects before we didn't have the square parenthesis here indicating that we only had one object here but now we have 25 because the setting here you'll notice is actually 25. how many results you get so let's just start by grabbing the string for the search api and we're going to stick it in here and you'll notice there are some differences for example this is random and other so that's why we're just going to paste it in here we're going to recreate what we just did with inputting our api key as a parameter and you'll notice it says cat here that's what we typed when we copied it we want to be able to change this so we need another variable to be able to change that and we'll say state var search string for example string again initialize with an empty string and here we're going to say okay instead of hard coding something we're going to say self dot search string so now every time we run this fetch api function we're actually going to be pulling the values for api key from here and we're going to be pulling the value for what we're searching for from up here so [Music] yeah so now we actually need to find a way to to give the the user a way to change this value up here and the way we're going to do that is with a text field text field and the way text field work are you need to give it a string that is sort of the placeholder text in the in the text field so i'm going to say search gifs and then you need to say uh you need to tell it okay well that's fine but what do i tie this to what variable am i tying this information to and it's text and dollar sign search string the dollar sign indicates that it's bound to this variable so every time we change the text within this text field it's going to update this variable up here which is good that's what we want so that we have the latest value of this string every time we need to do a fetch so i'll demonstrate how this works in just a second so i think um that should be fine now we should be able to get a field that we can search and get a gif related to our search term so here it's not formatted grade but you'll notice over here if i just type something like let's say sky i should be able to fetch and get something ah actually we missed something apologies so if if we stop the simulator for a second you'll notice the because the data structure was different because here we have an array of objects we need to modify our structure here before we were saying this data was only one other data structure there was just one other object here but now we have an array of them so we have to be careful to make sure that our mapping of the data is the same as what we're getting from the api otherwise it's not going to work and as soon as we change that you notice that xcode started complaining because now we're telling it oh you're getting multiple an array of objects and here it's saying well which url do you want me to grab then if if i have many different objects so we're just going to say grab the first one even though we're getting 25 let's just for example focus on the first one and the way you grab the first item of an array is if our data is an array you say data square parenthesis square bracket 0 means this is the first item of the array if you say one that'll be the first one you have to be very careful with these things sometimes because if you say like give me the tenth item of an array and there's only five that's a great way to crash your application so there's a lot of checks and things that we're not doing here we're just assuming it works like for example you know you can use this error and say like if you get an error like do something else don't go forward with all this code but as i said for an example this this works so let's run it and see what happens if we run it and do and we search let's say sky again and we fetch that we get a url and we click the url and we get a picture of a sky awesome cool let's see if that works with anything else so let's say if i type let's see dog for example what would that get us we get a dog there we go so so it works this is something we can play with more obviously we can improve the appearance just like one thing i i would do is just multi-line text alignment is a way for you to make sure it's centered at least uh it looks a little bit better not that we're going for a design award on this app but at least uh it's some a little bit nicer to to work with yeah let's let's see something else um coffee what do we get if we do coffee here there we go uh we got something that looked like a coffee mug perfect uh so yeah there's a lot more things we can do with this but for example you can actually display the image here but that will take a bit more code and i didn't want to be distracted this is a very simple way to just demonstrate how you can fetch an api that has different terms inside it a user inputted term and an api key which is somewhere outside of the actual string of the url that you're fetching and all of the rest of the fetching a url is pretty standard code hopefully nothing too surprising but if you have any questions drop them in the comments if you like the video please subscribe and and thumbs up and i'll keep making more videos thank you guys for watching and come back for more

Channel: Krass Iankov

Views: 2,368

Keywords: tutorial, code, xcode, swiftui, swift, ui, ios, programming, project, uikit, data, swiftui api, JSON data, JSON, API, web, web api, fetch, collect, connect, decode, codingkeys, coding keys, decodable, codable, learn, custom, custom calls, custom api

Id: -gNOVDNWmIg

Length: 22min 25sec (1345 seconds)

Published: Sun Nov 22 2020