Creating Pages & Data Model

[00:00:00]
>> And what about the others? Well, I need to just do something like if it's menu, a MenuPage, but I don't have a MenuPage yet. But for now, I can just render a text saying Menu, like so. And something similar to the other two that were OrderPage and InfoPage.

[00:00:21]
So we have order, we have info, like that. So actually, we are rendering one or the other. Do we have any other way to navigate between screens? Actually, in Jetpack, composed by itself, no. There is another framework known as Jetpack Compose Navigation. That will be similar to React router or the routing system in Angular that will let us define routes and then move between routes.

[00:00:49]
But I wanna keep this simple. So I'm just switching between different compose. So here in the Menu, you see a text menu. If I'm going to Offers, it is rendering offers, order an info, so the navigation actually works. So just to wrap up what's going on, we have a NavBar.

[00:01:13]
The NavBar has a selectedRoute that is one state of the app, mutableState of this app. So and here the mutableState of this app is I'm changing the value. Every time you change the value of a state, the whole system rechecks, re-executes. In this case, the composer was to see if there is a new composition that needs to be made.

[00:01:41]
And in this case because it's changing the composition, is going to render efficiently that change. Okay, this make sense? Do you have any question? Nope. So now the next step is to create the other pages, okay? So I'm going to create offers page but just because I'm here, maybe I can create a new folder that actually is a package for my patients.

[00:02:11]
I mean we don't need to do that, but just for organization. So I'm going to put OffersPage there. So I just right click new package, just to reorganize the elements. So now I need to create three new files empty for now. So I'm going to create a new Kotlin file.

[00:02:34]
So we have MenuPage and we're going to create for now a preview composable within a MenuPage, empty. Another one for order, and another one for info. So new column file, OrderPage, prev tab. So I have an OrderPage and finally the same for info. In the meantime, do you have any question?

[00:03:12]
>> For the it,
>> Yeah.
>> What I remember, if you're only passing in one value, one parameter on an argument,
>> Yeah.
>> It is that particular argument.
>> Yeah, for example, here on onChange, I'm receiving it, but I can also say selectedRoute or route. And then instead of it, you got your route

[00:03:36]
>> And it just just references that particular argument. But is there, [COUGH] such a thing called iterable if the object itself was a some sort of.
>> I mean you have a iterables here but you have nothing to do with it.
>> Yeah, nothing to do with that.

[00:03:57]
>> No, nothing to do with iterables. Just the first two letters, that's all. So, now instead of this text, I'm going to render MenuPage, OrderPage, OrdersPage, and Information. By the way, the OrderPage, I didn't get, or it's OrderPage, not orders. So let's go back to the app, its OrderPage, import OrderPage and InfoPage.

[00:04:40]
Okay, just the same as before. So now we can start playing with the rest of the pages. We have our little navigation ready, make sense? Cool, well, next is to start working with data, because we are going to list the menu, our menu. So for that I'm going to create a data model.

[00:05:03]
The data model here is just a file with our data structures. There are many architectural design patterns in Android and in Jetpack Compose NBBM, NBC, and many others. I'm trying to keep it as simple as possible. So we're just going to create a new Kotlin file, and let's call this DataModels, or DataModel.

[00:05:28]
And here we are just going to create some classes, simple classes to hold the data that we're going to render, okay? But by the way it's matching a web service that is already there that we are going to consume. Does that make sense? So for that, I'm going to create a class for the product.

[00:05:48]
Each product that we offer in the menu, that we have an ID that's an integer. This is the primary constructor. Remember, it has a name, String, a price, a Double, an image, is like the image name, like so. And something that I'm going to create, it's a compute property, some kind of a computed property that you haven't seen before.

[00:06:14]
So it's the image URL. So actually, we are going to create another property, in this case it can be mutable, imageURL. But we're going to take the image, and we are going to add the prefix of the current server where the image is. So this is like the relative URL.

[00:06:33]
I'm going to put here the absolute URL. And to do that, we do this, we say for the mutable variable because it must be mutable to be compute, imageURL, this is the getter, okay? And it's going to be equals to https and by the way, you have the code if you wanna copy and paste from the companion website.

[00:06:58]
It's github.io/coffeemasters/api/images, and the name of the image. Does it make sense? So then I can use imageURL, access imageURL as if it's a normal variable. So that's the product. Products are going to be stored in categories. So I have a category that has just a name and an array of products.

[00:07:33]
How do you say that? It's a MutableList of type Product with angle brackets, nothing else. And then we have an ItemInCart. It's items that will go in the cart that is just a product and a quantity Okay, no curly braces, nothing that's our data model, as simple as that.

[00:08:04]
>> So all those classes can be in the same file and they don't have to match the file?
>> Yeah, that's correct we can have as many structures classes and objects in the same file, and it's okay. Maybe you're thinking, well, but I prefer. But if you think about that, if your class is just one line, do you need one file for one line?

[00:08:23]
That doesn't make any sense.
>> [INAUDIBLE] you are right anyway.
>> It doesn't make any sense I think this thing that having several classes in the same file makes more sense. So it depends on the case, if you wanna separate things in several files or not.