Export Cart Data Practice

[00:00:00]
>> For our project, what we're going to do is something like this. Let me go back to Coffee Masters. I don't have it for some reason. So, when we have an order, just to play with this API, we will have an export and import button. So, we can export the cart in a file, and import cart.

[00:00:26]
So I can send you my cart by email, by WhatsApp, by messages and then you can get that and you can import that in your Coffee Masters app just for fun, okay? She'll do something here. Well, the first step will be to actually add the icons here, okay?

[00:00:46]
So because again, this is not actually a plain HTML document. It's vanilla JS, it's on React. So, it's still like, I don't want to say weird, but pretty hard work to actually do that part. So, I have here the setup that instead of writing that HTML, it's probably better to copy and paste.

[00:01:09]
First, we need to check that the API is available. The simplest way to do that is to check if showOpenFilePicker is available in the window. Because on Safari, we do have the API but not the picker. So in Safari, that will be false, okay? Which is okay, because in Safari if we save the file it will be in a private file system is the same as index DV at the end, okay?

[00:01:34]
So yeah, we don't need to do that. So if it's available, I'm going to add, okay? Two links with two icons, okay? These icons are coming from material design, we're in the Order.js file. So, I'm going to copy this into Order.js file. But let me close the one that we don't use.

[00:02:02]
So I'm going to Order.js and within render, it doesn't look so nice, but anyway I'm going to add this. Okay? Two icons. So if I run this now, I should see two icons. But I'm not seeing two icons. Why? Why do you think I'm not saying to icons?

[00:02:32]
Anyone?
>> You're still offline
>> I might be offline but I'm not. But yeah, the problem is that it's cached. And so, you can realize now how difficult it is to debug apps with service workers. You never know which person is currently rendering. Also, here you can see that there is a new version of the service worker waiting to be activated.

[00:03:01]
So probably we changed the service worker, but it's still not the service worker that is activated. So it's still cache first, okay? Makes sense? So that's why it will take time to get used to that, okay? So now you can see that I have these two icons here, okay?

[00:03:19]
I can center the icons, but I have the import and export icons there. So every time you make a change now, if you have a service worker up and running, sometimes you need to do double reload. Sometimes you need to wait a couple of minutes after the service worker was activated, because you need to wait for the new one to appear.

[00:03:38]
So debugging with service workers, it's not simple. It takes time, okay? And you need to get used to that? So, now I need to add the code, okay? That's the most important part to these two icons. These two icons are calling importCart and exportCart, because import and export are keywords in JavaScript.

[00:03:57]
So, what I need is to add here somewhere importCart, and exportCart, okay? So don't use import and export because you might have some problems with keywords, okay? So, first, we can check if the API is available but actually if we are getting here, we have already did a check on the UI.

[00:04:24]
So, if the API is not available we shouldn't be seeing the icons anyway. But anyway, I want to show you here in the console, let me close this for a second, that in Window, we have these showOpenFilePicker, showSaveFilePicker, and showDirectoryPicker. Those are the three pickers, come from this API.

[00:04:48]
BS code, was using showDirectoryPicker. And with that permission, it could read all the files, the name of the file, so it appears in the list. And also it can read the files. And then the first time it tried to write over that folder, we needed to give another permission.

[00:05:06]
But we are going to use the file pickers in our case, okay? But they are pretty similar anyway. So, we're going to start with a properly export, so we can actually see if it's working the file, so we can try this. So, we're going to create a handle, because this is going to be a new file, okay?

[00:05:28]
So, we're going to use on the await The show save, showSaveFilePicker. We don't need the window actually, but anyway. And because it's a weight, we need to convert this to async. And probably we have to do that also on import, because the whole API Is promise-based, and we are not using them on catch.

[00:05:55]
We're using async await, okay? So show.SaveFile.Picker receives an objects with better data, okay? We need to pass the types of objects that we accept. Why it's plural so I can actually set more than one time. It's not common, okay? But you can let the system side that you accept, the user can save a txt file or a CSV file, comma separated value file, or so you can set a couple of options, okay?

[00:06:29]
For the user. Or you can say png or jpeg or gif or gif and then the browser will show in the dialog, okay? Several possible options for the extension, for example. Or things like that, but typically we have only one, okay? So we are going to pass a description, so we can call this is going to be a JSON CoffeeMasters Cart File, okay?

[00:07:00]
Then the accept will be, it's an object with the MIME type as the key, and an array of possible extensions like so. It's your list, okay? That's how it works. So that's the handle. So if the user accepts this, then you have the handle, okay? So what you need to do is create the file object.

[00:07:35]
That is getting the file from that handle. That's the file reference now. Over that file, you can read or you can write. But in this case we want to write, okay? So, because we want to write, we need to create this other object. So, we create a writeable one.

[00:07:58]
So this handle, it's for read-only, and this handle it's for writing. Okay? So, if you wanna read the file, you use this one, if you wanna write the file, you take the first one. So, now that I have this, I just need to write. So, you write and after that, you close the file.

[00:08:28]
Both are promise-based, so I should wait for the right operation to finish before trying to close it. By the way, I'm not setting the content yet, and what's the content I'm going to write? I can write array buffers, so if I have bites from somewhere I can directly write that, or in this case, it can be text.

[00:08:50]
So I can stringify my cart. Okay, make sense? Those are the steps. Do you have any questions at this point? Yep.
>> One, but I think it's probably just me misunderstanding some of the underlying stuff. You said you could write array buffers. You couldn't write like a binary large object.

[00:09:22]
Like if you just had.
>> Like a blob.
>> Yeah, a blob.
>> So this is more array buffer, but you can convert, from blob, you can convert your array buffer. So JavaScript today has these two-ways of handle binary data. And there are more because you can also use an int eight array or things like that.

[00:09:41]
So there are many ways to handle binary data, it depends on where the data is coming from, you will get different ways. But this is more array buffer oriented. But it's possible to move between these two options.
>> And I think that's a piece I was missing. All right, thanks.

[00:10:00]
>> Okay. So if we try this, We can now try to export, that is the download icon, and you can see the first thing that I've seen is the dialog. So this dialog is on Mac OS is not showing you a lot of metadata actually, okay? On Windows, you'll see more metadata, such as the name of the type that I'm saving, but that has to do with how the OS renders a picker.

[00:10:34]
So I can save this as Cart.JSON. That's all. I have the fun, okay? So, I can actually look into my desktop and I have the cart.JSON, 400 bytes, so it's there. So, there is no second permission dialog in this case because, it was originally a save dialog I don't get a second permission dialogue for writing.

[00:11:04]
That typically, you will get on other situations when you create a writeable. So, if you open a file for reading and then you try to write over that file, the user will get a second dialogue. Say, hey, you open a file for reading, but now this web is trying to write on that file, do you allow that or not?