Coffee Masters Project Setup

[00:00:00]
>> If you go to our projects website that's furman.github.io/browser storage, we're going to start working with our project. So here in the second chapter, you have a link to another repo that you can clone. That's our progressive web app. It's a progressive web app known as Coffee Masters, okay?

[00:00:27]
So we like coffee so it's a PWA. Let's say that we have a coffee shop. It's like the menu app where we can order from there, okay? It's kind of a test app. It's vanilla js, so no react, no bu, no neck js, no nothing, just plain vanilla js.

[00:00:45]
So and we are going to use the four APIs that we have seen here, okay? So it's github.com/fergman, my last name, /coffee-masters-pwa, okay? So if you just go and clone this project and open that in VS Code or your IDE, okay? We're going to see it in action first and then we will start adding persistent storage to this app.

[00:01:14]
That will be our first lab for today. So if I'm going back to BS code, This is the code. You have an HTML, we don't need to take too much time analyzing this. But we have an scripts section. There is an app js initial like entry point. And this app js it's importing using ACMA script modules.

[00:01:45]
So this is using really modern JavaScript. I'm importing the other modules. I have a routing system. I have a router here that is using just plain browser APIs to work with the history, with push tape, something like react router or view router or angular router, but done from a scratch.

[00:02:03]
But it actually is pretty simple, okay? It's because the important part here will be to talk about the storage not about how to make a PWA. So to run this app and because this app is a single page application, we should run it, okay, with a server that supports single patient's application.

[00:02:25]
So every route goes to the same index html, that's kind of the idea. So in distractions in the website, you have here a quick server command that you can run, mpx serve -s. The -s will actually make it single page application compatible. So if I open a terminal here and run mpx serve -s, will open a small server on localhost 3000, for example.

[00:03:02]
And I can bring, for example, an iOS simulator here so we can see how this app looks like. That's Coffee Masters, okay? So I have the menu here as some kind of my home. So if I want the black tea, I can get in. I can see the details, and I can add this to my cart, okay?

[00:03:26]
And I can go back to the menu and now add a croissant, okay? And then, I have the menu, the cart. On the cart, I can delete something from the cart, and I can place an order. That just gives you a random order number telling you that your order will be ready.

[00:03:46]
You close, it empties the cart, that's all. And by the way, this is a PWA, so I can install it in my homescreen on iPhone. I have no one icon and now I have a full screen app on iPhone. But this apps is not using any storage so if we don't have connection, if the connection is slow, okay, nothing's gonna work.

[00:04:12]
I'm not using any kind of storage. So our goal will be during the rest of the workshop to actually use web storage IndexDB, crashes storage and the file system API to provide some kind of to improve the user experience to provide offline support and so on.