SwiftUI API / JSON Tutorial with Async Await Example

hey guys today i'm going to show you how to fetch data from an api with swift ui so there are a ton of apis available to the public that you can use freely and for this tutorial we'll be using a breaking bad api and i will post the link in the description you can see it here as well but basically we will be fetching quotes from breaking bad an incredible series that is available on netflix that i just recently watched for the second time so now let's go ahead and get started here i have a new xcode project so what we want to do to start out we're going to create a struct that's just quote and we're going to make it codable and here will be our variables var quote underscore id integer of type integer then we're going to go var quote as a string var author also a string so we're going to go var series string so if you only take one thing away from this tutorial it is that these variables have to exist in the api if you have id for example if i just went you know id is of type integer it doesn't work okay because i tried it and it failed so we got to go quote underscore id because if you look on the api under quote attributes this is why i failed actually you can see that it says id but when you look at the response it's quote underscore id so that will mess you up it has to match it has to match it has to match we actually can do without series here we can comment this out i'm just including it in case you want to include that in yours so in our content view we are going to make a at state private variable called quotes and it's going to be equal to an array of quotes with parentheses at the end all right so let's resume this preview and get rid of this ipod touch why is that there but basically what we're going to do is embed our text in a list and we're going to make the list go through quotes then we're going to go comma id backslash dot quote underscore id so that's how it will identify them and then we're going to go quote in all right and then we are going to have a v stack so embed this text in a v stack don't worry about the preview right now but we are going to make the v stack align to leading and then what we will do is text quote dot author we're going to make this font dot headline then we can go text quote dot quote font dot body i'm going to put mine in a navigation view so just go to embed outside of the list go navigation view and then on the list and brackets we're going to do dot navigation title quotes so you can see that all right so now we have to write the function to fetch our data so i'm going to go func fetch data no parameters and then i'm going to say async now async matches up with a weight to basically say hey if this is taking a while continue everything else it's saying that we don't want to wait on this so you'll see the await part in a second but basically there's three steps we've got to create the url we have to fetch data from that url and then we have to decode that data so for our url we're going to say guard let url is equal to url string and it is https colon slash slash www dot breaking bad api dot com slash api slash quotes then we're gonna say else print uh like an error message let's have some fun with this one we can say hey man all caps this url does not work because we want to get yelled at and then we're going to say return because we don't want to continue if it's not working okay so then we're going to fetch the data so we have to go do we're going to say let parentheses data comma underscore is equal to try await url session dot shared dot data from url then we're going to say if let decoded response this is where we are decoding the data so i'm going to add my comment here decode that data brother if let decoded response is equal to try question mark this is going to be an optional json decoder dot decode and then this is where you're passing what you're basically expecting so we are expecting an array of quotes we have to add dot self from our data this is an if let so this only works if this decoded response exists and we're going to say quotes is equal to decoded response now you will notice that we have an error here um air is thrown from here are not handled so when you have the do you have to have catch so catch we're going to say print let's do another funny one bad news dot dot dot this data isn't valid frowny face and essentially that's all the code that you need to fetch the data we are not fetching it as of now but if we come under our navigation title um the important part is that it's under the list n bracket we're going to say dot task then this is the other important part that matches up with async we're gonna say await fetch data and that's essentially it but i am going to make this look a little cooler i'm going to go to color set and i'm going to create a sky blue and i'm going to open this right sidebar you know me i can't let it just be boring i'm going to show color panel and i'm basically going to go like a here like a yeah like that you don't have to do this part and then i'm going to come up to quote.author and i'm going to go foregroundcolor uh is equal to color parentheses named sky blue look we're already getting quotes in our preview i was not expecting that and then under a quote dot quote we're going to say dot foreground color is dot secondary um yeah we should be good to go i think i put my simulator in dark mode and boom look at that huh i am not in danger skyler i am the danger look how cool the dark color scheme looks with that blue i'm obsessed with this then you got jesse pinkman saying funyuns are awesome and guys the thing is i went and found this api because i love breaking bad but if you just look up public apis you know you can do this with any api there's a chuck norris jokes one there's a dog facts there's dad jokes trust me picking the topic for this was a little difficult all right but um the important thing is [Music] you have to have the variables matching notice that we didn't use series so we could comment series out and if we build and run again it works still but like i said if you change this to just id and build and run first we have to change this to id down here too huh if you try it like this you'll get you'll see some messages in your logs that it doesn't work so just make sure these match quote underscore id quote underscore id and we are good to go and i mean that was what eight minutes like it doesn't take a while swift ui is awesome look at all these breaking bad quotes we didn't have before now we have them all right you're welcome listen if you guys like this video if you got any value from it whatsoever uh please consider subscribing that's it thank you

Channel: Logan Koshenka

Views: 23,125

Keywords: swiftui, swift ui, swiftui tutorial, swift ui tutorial, xcode, iOS development, iOS developer, swiftui json, swiftui json tutorial, swiftui api, swiftui api tutorial, swift async await, swiftui json parsing, swiftui json api, swiftui api json, swiftui codable, swiftui networking, swiftui async await, swiftui json parsing tutorial, swiftui codable tutorial, swiftui api calls, swiftui api call, swiftui json data, swiftui api call example

Id: Y-GxKhLRGyE

Length: 9min 52sec (592 seconds)

Published: Wed Apr 20 2022