Welcome to the drop box, A p I editorial.

In this tutorial, we're going to see a few different methods that are available to us in the drop box, a p I that allow us to interact with files and folders and manipulate them.

My name is Cristian.

I'll be your instructor for this course, and I'm sure you're wondering what we're gonna do and what you need to know.

So let's jump right in here as far as what you want to know.

It's good to know HTML and Java script, but it's not necessary, really.

Ah, lot of these methods were looking at will be available for other languages such as Python, for example.

They just might be a little bit difference in Texas, but the overarching principles will remain the same.

So as long as you're wanting to learn about the drop box a P I.

Even if you don't use the JavaScript as decay, which we're going to use, I think you'll find this useful.

As for what you'll learn, we'll go over getting some files, getting the thumbnails for those files and moving those files around.

Now I want to mention again.

There are many more options available in the drop box a p I many different methods you can use to manipulate files and folders, but these are the ones we're going to go over, and hopefully that will give you a good basis for how the FBI generally works.

Additionally, we'll use summary methods that maybe you've never seen before, or maybe needs some clarification how they work well, use some s six features such as Aargh functions, and we'll learn how to use a sink a weight, which is a fairly new way of dealing with a spear guns data and is perfect for our use case.

As for what we're building specifically well, take a look here and you'll see that we have a file organizer 3000 As I've affectionately named it.

We have a path where we can search for files or folders, and we have them Listen out here with thumbnails at the end of this lesson, will be able to organize every file in any given folder using the path here, and once we hit organized, it'll move those files into different folders based on their datemodified.

So that's the apple gonna build.

Let's jump right in before we start coating out the app.

I'd like to go over the developer documentation real quick.

So if you want to click right here on the slide or just go to dropbox dot com such developers, you should see something like this.

It will show you a dashboard of swords.

And if you go over to my APS on the left hand side, you should see a blank page because most likely you don't have any APS yet.

And then you can click on create AP up at the top, right?

That'll get an AP started for you.

Now, before I go further, I should mention you don't need to do this to take this course just going to give you some brief information on how to set up a nap so that when you do set up a nap, you could be familiar with it and it will help You know how I set up this app.

So first is gonna ask you which a p I you want to use for this app?

We're using the regular Dropbox a p I.

If you wanted to support teams for Dropbox So multiple people collaborating with in Dropbox then you might slip Dropbox business a p I.

But most likely you're gonna go with the regular A p I.

Next.

We need to choose if we're going to use just one folder for our app inside the user's dropbox account, or if we need access to the user's entire Dropbox account for this app.

I went ahead and shows APP folder, although in reality, if we were actually building this app would probably want to choose full Dropbox because this app is essentially going to organize the user's files, and that would require access to their files.

Last thing we want to pick a name for AP.

If that's taken already, then it'll tell you that, and you could pick a new one monster.

Don't go ahead and click.

Create app.

Okay, great.

So now that should take you to a setting screen and will quickly go through these.

First, we have our status, which would currently be in development.

When you're ready, you can go ahead and apply for production so that it could be reviewed by the Dropbox team.

Currently, you are also only the user that can access this, and if you want to enable additional users.

You can click here now that still has a limit on it, since it's a development app.

And if you want to enable more users than you would want to apply for production here we have the permission type that we just chose and step to.

When we first set up our app, That's Apt Folder were only one of the access to one folder in the use of Dropbox account.

We don't want access to their entire Dropbox account, and then we have our APP.

Folder name.

Now this is by default, going to be the same name as our app itself.

But if you wanted to change the name of just that folder, you're apt name would remain the same.

Just the folder in the drop box user's account would change.

Then you can change it here.

Next, we have the APP, key and secret.

Now, in this tutorial, we're not going to use these, but in a really life app, you probably would app.

Keys and secrets are good for when you need to do authorization, which is actually the next section here.

We can choose where we want to redirect the user once they have been authorized Allow implicit grant.

I'm not going to really go into If you hover over the eye when you actually go to the page, you can see a little more detail.

You should probably leave it as is, if you're building a client side app, which you probably are and generate access token is where you can get your own token to work with.

This is something I've already done and that will use in our app.

Although I should note that the token I'm using will be expired by the time you're viewing this.

So you may want to go ahead and do this and plug that in discrim ba or your own code base wherever in order to actually play with some files.

But this was basically going to skip the authorization set up and just give you a quick way to authorize Dropbox to check out the folders and files.

Next, we have options for what are called choosers and savers, and they look like this basically just little buttons that drop box has already created for you so that if you need to do something simple, like get some files or maybe you just need to save if out of their account.

Then instead of building entire AP, you may just want to use the chooser or a saver.

And if you do decide to use one of those, this is where you would put your web address.

So the Dropbox knows that hostess okay, to use a chooser or saver.

Next, we have Web books.

Basically, it's the idea that once I do something here, I want to trigger an action there.

Once I do something, that drop box I wanna trigger in action with Gmail or something similar.

Actually, if you are done with this happening, we don't need any more.

You can go and leave here.

Just be warned.

This is an irreversible action, so be careful.

The next page we have is the branding page these options a rather obvious.

Lastly, we have the analytic stab.

This naturally shows nothing because we haven't done anything yet, But after a while you should see some stuff here real quick.

Before we go on to coding our app, I want to mention the job script sdk, documentation.

You can click on this thing to go there.

It looks something like this basically It's a list of all the different methods that are available in this app.

We're only going to use a few different methods, so it's really not going to give you a good idea.

Everything Dropbox can do.

So go to the documentation, check out all the different methods you can use, even if you're not going to use the JavaScript s decaying you're at.

Maybe you're coding and python or something else.

This will be helpful because all these methods are the same, are very similar to what you might use in another language.

Once again, you can head over to dropbox dot com slash developers when you're ready to set up account.

Until then, let's go ahead and start this tutorial.

Let's begin by importing the Dropbox sdk.

One thing you make sure of is to surround Dropbox with curly braces because this is a named import or export, and once we do that, we can go ahead and use it to create a class or rather in Stan.

She ate a class and assign it to a very book.

We'll call that B B X for Dropbox, and they were just going to say new and then drop box with parentheses and we're gonna pass in an object to this function, which is creating a class for us that once again we're assigning to D B X.

Now that objects gonna take two properties, one is gonna be an access token, and the other is going to be a fetch library.

Now, there are different fresh libraries you can use, in which case you'd put whatever fetch library here.

But if you just want to use the native window, fetch library, then you could just put a patch that uses the six feature of simply assuming that the property and the variable are the same lips there.

For the excess token, you're going to go ahead and use your own, because by the time you view this, the excess token I'm going to put right here is not going to be valid any longer.

So go ahead and go to dropbox dot com slash developers.

I'll go ahead and pace that link up here and set up your account to get your own token and wants to do that.

You can replace the token here in whatever lesson you want to play around with.

If you don't really want to play a round of the code.

Of course, you don't have to do this.

Everything will still work.

It's not absolutely necessary.

But part of the beauty of scramble and having lessons on here is that you could play around with the code and you're not gonna be able to do that unless you change out this access tokens.

So I do encourage doing that.

But either way, we've imported our drop access decay, and we're now ready to use this D B X variable.

So far, all we've done is in Stan.

She ate our class in order to see what methods are available on that class.

You can go to the documentation here.

We're just going to go ahead and use as our first method something called Files List folder, which will essentially take a folder and list out of files inside that folder.

So this takes a lot of different options on the object that we pass in.

But we're just going to use for now.

The path now could specify the route path.

We actually pass an empty string, not a slash, and I should note the route path here is going to be the root of our APP folder, not the user's dropbox account.

And this is because when I set up my developer app, I chose that option.

You can set it to the user's dropbox account, but I set mine to the AP folder, so the roots will actually be the root of the app.

Older, not the drop box of camp.

Okay, now, what's that gonna do for us?

That's going to return a promise and all I want to do for now.

Let's go ahead and see what we're getting back.

What sits safe.

Okay, You weren't we got back.

It looks like an object with entries, property and that value of that entries.

Property is an array of different objects, and each object seems to represent either a folder or a file.

So you'll see here.

This 1st 1 we have is a folder named Other Stuff.

We have another folder here named 2018.

Another folder here in new 2019.

Looks like we've got a bunch of files in there and you can see that we have a lot of data on each of these files.

So in the next lesson will go ahead and render these to the browsers that we're looking at it in a pretty way.

That's nice to see instead of in the council.

But before we move on, I need to know real quick before you go off and use this new files list folder method you've learned.

You need to know this might not be all the files in the account or whatever the path is that we're trying to get them from.

There might be more files, and there is a way, and we're gonna learn later on how to use this to get more files called Files List folder continue.

There's a different method that drop box provides to us, so I just need to make that note really quickly.

Learn how to get more files later on.

For now, we're just learning how to get that first response, however many files Dropbox is willing to give us, and in the next dozen, once again, we'll learn how to render those files to the browser.

As it is now.

Our application on Lee logs the result that we're getting back from Dropbox.

That's fun and all, but let's see if we can render things to the browser I know this tutorial is more about drop box, but I thought I might be useful to see how we're making things happen in the dom.

First of all, we need to declare an element to interact with.

Here I am declaring a variable called finalist LM for Element and using document a Crease Lecter to select an element with the class of Js file list.

I like to put day.

It's the beginning of my class names just to know that I'm dealing with JavaScript so I don't accidentally mess with them when I'm just dealing with a female or CSS, we're gonna go ahead and do a little re factoring here to set up a rap.

What I've just done is declare a state variable that will hold our state.

Right now it's just one files property, which is an imperial.

I've moved our call to the files list folder and point into an NIT function which we can call it the end.

After declaring our other functions, I've declared an update files function which will take some files and update the state accordingly so that we keep all our old files that were in state as well as updated with the new ones and inside that were also calling our render files function, which will fill in now inside render files will first need to get our element so that we can place some H e mail in there.

Now there are two things I want to do with the files here.

First, I want a sort Ben Ben.

I want a map over them and for every one of them creating l I element so that we can see the list.

Let's sort alphabetically and let's go ahead and put the folders on top.

Okay, real quick.