Using the API Data

[00:00:00]
>> So, we know that the data is coming. The data is being parsed into your own data model, but right now, when we look at the menu page, we're actually rendering just 15 elements that are dummy products. So we actually need to change this. So, we need to access our menu manager, remember the menu manager is the one that is holding all our the information about our products, and it's the one that is actually downloading the data from the network.

[00:00:31]
So, we injected this as an environment object. So what I need to do is create an environment object variable here in my menu page, so it's going to be a dependency. Call it menu manager of type menu manager. Remember, we don't need to create an instance of it because it's automatically being taken.

[00:00:54]
It's like dependency injection that you have on some kind of that, someone's going to inject that dependency for us. So now, the for each, it shouldn't be like this. It should for example, loop through all the categories that are where? In menu manager, menumanager.menu, that's the array of categories.

[00:01:19]
Let's look at that for a second, the menu manager has a menu, there is an array of categories, so I'm actually going to loop through that. So, the premise that, I'm having an error saying that hey, if you wanna loop through these items, those items needs to conform to identifiable, okay?

[00:01:43]
So that's another protocol. So in this case, that means that we need to add another protocol, it's called identifiable. Identifiable is forcing us to have a property with a name ID. But, this web service has no ID for the category. So something that we can do to solve the problem is we can create IDs on the fly, it's possible.

[00:02:10]
Or we can create a property, a compute property just returning the name as the ID. So I'm not duplicating the content, I'm just, when someone is asking for ID, I'm saying, yeah, okay? So we cannot have two categories of the same name, okay? If you're using this technique.

[00:02:34]
So now going back here, we shouldn't see the same error here, so that it's gone. That's the categories. So now, instead of item we can call this the category. So for example, we can render hear the name of that category. And after the category name, what do we need?

[00:02:57]
We need the products. And that's another loop, okay? So this is like a nested loop. So it's another for each that will loop through, in this case, the category.products. And that will give me a product. Does it make sense? And inside each product I need a navigation link that goes to a detail page when you run there a product item.

[00:03:28]
But instead of a dummy product, what do I need to add here? What do I need to use? The product, is this variable, okay? Like so. But it's also complaining that the product is not conforming to identifiable. So, we know how to solve the problem, but in this case it's even easier because we have already an ID.

[00:03:54]
So we just need to say that we are identifiable, and that's all. So, now, in my menu page, we shouldn't see any arrows, we can get a better UI, change your paddings, and so on. But from a code point of view, remember that when you have that problem, you need to click diagnostic to see what's the problem.

[00:04:19]
The problem is, if I zoom in a little bit, there is a crash report that the previous missing the environment object menu manager. Sure, this is because every time we have a preview of a view that has a dependency on an environment object, we also need to inject that environment object in the preview, okay?

[00:04:38]
Remember that. There are other solutions, architecture solutions for that. But yeah, this is the first day you're working with Swift. So, let's do the simple way, there's just here add an environment object and we're going to create a new instance of the menu manager. So now, in the preview, I'm not sure if you recognize something different now.

[00:05:05]
If I make this interactive, walla, we have hot coffee, black Americano, cappuccino, macchiato, we have different images. We didn't have that before. Then we have snacks, we have different section for a snack, for tea. So it seems like, hey, it's working, right? I know you were not trusting that this will work, but it's working, okay?

[00:05:31]
So, it's actually downloading all the data, it's rendering the dynamic async image, okay? It works as expected. Do you have any questions at this point? So I can make a comment at this point, it's not ready yet. We still need to connect some missing dots but closer.
>> [INAUDIBLE] expensive cuz they have also zeros just decimal points.

[00:05:55]
>> Well, we went on to solve that. So, the problem is the price, okay? The price is a double and as you can see here, it looks like a Bitcoin decimal. So, we need to solve that problem. Unfortunately, it's not so complicated. First, where is that problem? That problem is in product item.

[00:06:18]
In product item, we are rendering one item. And in fact we can see the problem here in the previous one, okay? So, how to solve the problem quickly? There are number four models and lots of things that we can do. But when we have this template string, we can add a second argument with some properties.

[00:06:40]
And one is called a specifier. And here we can do something like this %-.2f. Okay it's giving me an error, see. Okay so %.2f, it's taking the float, it's taking the value and saying .2 there's only two decimals as a float. So now even in the preview, we can see it looks better.

[00:07:07]
And now if we go to the menu page and wait for it, let's increase here the font size in the preview. We can see that we have just solved the problem of the float, okay? Makes sense. So, there are more ways to solve the problem, but this was I think, pretty good.

[00:07:32]
So the problem that we have now is that if I get into the product, let's zoom out a little bit. This is still dummy, okay? So, that's because the details page is not actually receiving a product, okay? So we need to solve that. We need a dependency, we need a variable, not a state variable because one detail page is not changing the product.

[00:07:57]
The product is coming from the outside, okay? Like an input property. So, it's just a normal variable, and they're going to call this variable product of type product. And I will make it mandatory, so not optional. But anyways, as we go through here, we need this to be public.

[00:08:16]
We don't need to stay public because that's the default. But most of the time, it's a good idea to make state variables as private, okay? So have that in mind. I don't wanna add too much information to your brains today, but that's kind of good practice. So, anyway, when you have the product and because we have the product now we can change image with a sync image.

[00:08:39]
So we can go and download these from the network, and that we're receiving the URL and we're going to take the image URL. For the product name, it's product.name. Then we have the price here, and we can do the same as before. We do product.price, Ctrl+space or Esc is going to help you to actually access all the options, all we can just copy and paste from the orders page or from the product item.

[00:09:15]
Then sub total, now we do have a price. So can we do something magic here, instead of 425, we can add an expression. That is going to be the quantity that if you remember, it's actually a property of the state variable multiplied by the price. And also we can use the same float to the specifier, okay?

[00:09:45]
So now it's complaining because Swift is kind of tricky at this point. JavaScript will never complain about this, but the price is double, and the quantity is an integer. So it's saying, hey, I cannot multiply these types, but we know it's simple, we can convert the quantity to double, I made that happen.

[00:10:04]
And to do that, we use just a double constructor, we pass the integer and that makes the trick. Okay, so, now if we resume the preview, we have a problem. The problem is that yeah, we are missing the argument because now we have to set the product, where in many places for example here.

[00:10:34]
Now, the details page needs a product object. Does it makes sense. So I need to provide one. So, [COUGH] I need to pass one that I can create here on the file or I can have another file with dummy products for us. But that this is a dummy product.

[00:10:53]
The same go well no emish, but also probably the previous not gonna work. Let's see, because we are still having an error in the whole project, not in this file. Remember that when you're receiving error in the preview, it's not always because of this file. It may be something that is wrong in the rest of the project.

[00:11:13]
And that's because the menu page, it's also asking for the product is an argument. So we need to pass the product now as an argument, because we said so, which says that the details page needs as a dependency a brother, okay makes sense. So, now I can build command B bills.

[00:11:37]
So now the details page preview should work, it says dummy so it's working and look at this. I will increase this and automatically my total works, okay? So it's working.