Creating Menu Database Practice

[00:00:00]
>> With indexedDB, we can also create indexes, okay? So what's the idea of an index? No one asked so far, but I already mentioned that on data stores, we don't have schemas. So you can't say that objects in this object store will have a name, a last name, email, and phone number.

[00:00:18]
You cannot say that as a schema, but you can create indexes. When you create an index, it will have a name and a property name. And when you create an index, you're kind of forcing each object in that object store to have that property. But have in mind that every time you create an index, you're also making your object store bigger and larger as with any database.

[00:00:44]
And also, it will make such operations faster, but every time you store new data, that operation will be slower, okay? The same as with indexes or indices on every database. And you gonna specify if that index is unique or not, so you can create like secondary keys, okay, so that's what you have, okay, yes, assumption.

[00:01:13]
And you create an index where after you create the objectStore most of the time, it makes sense? And then, you have transactions also from indexes like get all from that index or get from index to get only one. So this is like aware in SQL query. So I wanna get users or customers with name Anna, how to do that?

[00:01:41]
Well, you need to create an index on the name and then you use get from index, the index name, Anna, and that will give you all the objects with Anna as the name. Make sense? So it's tricky when you're coming from SQL databases to make complex queries with indexed.db.

[00:02:00]
That's why a lot of people still like web SQL because you can do inner joins, where our group by, yeah, we can get really complex queries with just one string, okay? And the complexity happens in native code that we don't care. Well, in the indexed.db, you cannot do that, so complex scenarios.

[00:02:23]
So that's why you can still on top of indexed.db run a SQL-based library, okay? Make sense? Cool. So now, to see another example on indexed.db that we're going to make is to make our menu available offline. So right now, there is a menu, the menu is coming from this json, menu.json.

[00:02:50]
That's the menu that is currently being rendered in the home page of our PWA. But if we don't have connection, we won't get the json and we won't see anything. So what if instead of downloading the data and rendering the data, we download the data, we fill our database, and then we render the database.

[00:03:15]
To make another example on indexed.db that is not so simple as the one we saw before, okay? Make sense? So for those of of you follow along the project, we are here now. Let's back here in databases, creating a database for the menu. Okay, so in this case, we will start working with menu.js.

[00:03:44]
Okay, so I'm going to open menu.js. This is the object that works with this. And the first part is also to open a database, okay? So I'm going to create an OpenDB async function. In case we need to open a database from many places, I don't think we need that, but anyway, it's a good idea, okay?

[00:04:08]
It's going to be similar to what we did before. So we need to access IDB, the IDB library. And from the IDB library, we're going to open a database with a name, cm menu, okay, menu storage, it's up to you, okay? It's a good idea to prefix this, remember that, right, not mandatory.

[00:04:36]
So coffee master menu for example, version 1, and then an object with an upgrade function that receives the DVD. That's kind of what you always write. And here, what you do is to create the object store. And here, if you look at the JSON, I'm going to make, let's say, version 1 of this example and later for homework, you have the additional exercise, so make version 2.

[00:05:07]
On version 1, you will see that this JSON is not actually a table it has a complex structure. So it's an array of categories, like hot coffee and tea and food, snacks, and also each category has products. But because it is an object-based database and not a table-based database, we are not forced to create two tables like categories and products, we don't need the two, we can store an array directly into the object store.

[00:05:45]
So we're going to make a database version 1 of categories, and we are going to specify the key path. We are going to use the name as the key path, so that will be the key, the name of the category, that is a property, the property name, okay, that property.

[00:06:07]
Make sense? So that's the schema that we have here. We can also create an index on products if we want to force products to be there, but yeah, I don't think we need that.