‫So now let's use the data that we get to show in our app and also change features to health theme.
‫So here we will have healthy recipes.
‫And let's start with the easy one.
‫The title here is a name.
‫So instead of data, we will use healthy recipes.
‫And here for the title, we will pass item that name and we need to use item here.
‫Oh, Kim.
‫Also for the time.
‫So cook 10 minutes is null, but that's the property, so we should use that one.
‫We actually do not have.
‫I mean, we use it here hardcoded but did not bring here the image.
‫And I think one more thing.
‫So let's go to recipe card here.
‫So we have image and rating that we just hardcoded here and we need to change that.
‫So here we will use image.
‫And we will add image here and rating here.
‫So for the image, we will use the thumbnail URL, it will be item, thumbnail URL.
‫And for the rating, we will use user ratings score, which is zero.
‫Also, we have this we have here something about the otter, which I'm not actually sure that we will.
‫Get here.
‫Credits.
‫Yes.
‫So we will use this one and we will use the first one just by default.
‫And for that, we will first check if there is credits length.
‫Then we will pass.
‫I already forgot the properties.
‫Image and name.
‫Else we will pass.
‫No,
‫for the name, it will be credit.
‫Zero and this one name.
‫And for the image it will be image URL.
‫And for the image it will be credit zero imagery.
‫We can make this better looking.
‫Um, so now let's see what we have got here.
‫Start clicking.
‫And that's bread.
‫Uh, and here is the issue.
‫Credit is not defined.
‫Yes, definitely.
‫Credit, uh, is definitely not defined.
‫So we need to import it from item.
‫Start cooking and we need to have some loading here because it's waiting for it to be fast.
‫And for some reason, the name is not being recognized.
‫But why?
‫Let's see.
‫So we have the name here.
‫The Detroit name here.
‫Why am I the health service?
‫Okay.
‫Name?
‫Sorry.
‫And also, whenever we have, like, no time here, the timer shows, but it's empty.
‫So we need to figure that out and also handle this case when it's not we don't want to have crush.
‫So for the time, I will first check if there is time then return this.
‫If not, because we have like just for content space between here.
‫If I do now, it will be broken and this will come to the right, which I don't want.
‫So I will just render empty view here.
‫And the same I will do here.
‫So I will check if there is or to then render this one.
‫If not, then just a few empty.
‫Nowadays is again, which is better than having it empty.
‫And here we have an empty circle, which we can just fix, like the empty space by having background
‫color, which is not the ideal solution, but better than nothing.
‫So we will have colours light gray here for the background so that when whenever there is no image,
‫this will be shown like this you can have another color.
‫So just an option.
‫And we have one waiting here.
‫The rest are zeros, which is fine.
‫People don't like to write so great.
‫We are showing real data, which is amazing.