[MUSIC PLAYING]
BILL LUAN: Shanghai GDG is a very
interesting developer community.
SUSANNAH RAUB: I'm glad somebody
has asked this question.
RETO MEIER: This is where the magic happens.
JENNY MURPHY: This is primarily a question and
answer show, so if any of you out there
would like to ask questions.
ALI: Hi, everyone.
I'm Ali, working for the Google Drive team, and today
we're going to show you how to write a complete JavaScript
browser-based Google Drive app, hopefully
in under five minutes.
It's going to take a bit of copy and paste, but I'm going
to take you through each of the individual steps.
Now the first thing I want to show you is
our QuickStart page.
Now, we have a QuickStart page for how to get up and running
quickly in one of Java, Python, PHP.Net, Ruby,
JavaScript, and Go.
So today we're going to be going through
the JavaScript one.
So that's developers.googl e.com/drive/quickstart.
So the first step in writing any application is to go to
the Google API's console and create an API project.
So I'm just going to click on Create Project, and it's going
to do most of the magic for me.
So as you can see, it's created a project for me, and
I have to choose which Google services it's going to use.
So I scroll down here and I see Drive API, and I just
switch that on.
So you see this selector has gone to on, and now I can
start using the Drive API.
So what I have to do is create a client ID.
Create a client that is suitable for use as a
browser-based client.
So you see it's already created a simple API access
one for me.
But this big blue button, Create An OAuth 2.0 Client, we
click on that and I give it a name--
JS Quick Start.
And as you can see, it's a web application.
Now one thing I have to really make sure I do correctly here
is set up an origin.
Because I'm going to be testing this on localhost and
it will be on Port 8000.
So I just need to set that up so that it knows, when it's
running JavaScript code, that it's running in the correct
container, and that's just a check.
So I create that client ID.
And I'll leave that there because, as you see, we're
going to come back to this when we need the client ID
that's there.
As you can see, the JavaScript Origin HTTPS localhost 8000 is
what I've set up there.
So now on to the code.
Now, our QuickStart page has copy, pastable code that you
should be able to just copy, paste and run, so that's
exactly what I'm going to do.
Obviously it would take you more than five minutes to
write all this code.
But the idea is that once you've got it running, you
really then can modify it however you like.
So I'm going to take a copy of that, and I'm going to put it
in my directory in a file called index.html.
Start in Editor, paste my code in, and there it is.
It's all collapsed, but as you can see it's in JavaScript
embedded in some HTML.
Obviously, as you get more detailed in your application
you might want to take that out into
separate JavaScript files.
Now the one part I need to change is here where
it says client ID.
And that's the client ID that I just created
here in the API console.
So I'll copy that in, and there it is.
Now, those of you who have used OAuth before, you might
be wondering why do I not use a client secret?
Well, client secrets are not really secret if
they're in a web page.
Obviously anyone can examine the source, so for that reason
there's no point in having it.
So the web-based protocol only requires a client ID.
So once I've done that, I save it and I'm back to my shell.
Now here where I need to run a local web server just to get
it up and running, I use Python SimpleHTTPServer.
Now, you can run Python with the minus M flag, and that
just starts the server, in this case, on Port 8000.
So once I've got that there, then I can browse localhost
8000 and see what happens.
Now this is a very simple application.
All it does is upload a single file.
But first thing I get is a pop-up to request permission.
Make sure that pop-ups are allowed for your localhost,
because that would get blocked.
The reason is this QuickStart, the pop-up doesn't come in
response to a button or anything like that.
So by default, Chrome and other
browsers will block that.
But when you're writing your application, probably you'd
put this behind a button, click this to authorize.
So I authorize there, and when I refresh my page you see--
and we'll open the API console--
you'll see I've got a Choose File button.
So this is the entire user interface for this
application.
I select a file, as you can see nicely here.
I've got some images ready-- and that was
an image of a dog.
And the only feedback you get currently is in console.log.
And you can see that the entire metadata for the file
has been returned back here.
So you may not be able to see that, but for example, the
bits I set--
the title, the alternate link, various
information about that.
The title is actually the file name.
And it will have done some other cool things like MD5
checks on it for you.
It's correctly identified the MIME type.
So now if I look in my Google Drive, I can see that that
file has now magically appeared--
0.JPG.
And I look at that, and it's a beautiful picture of my
neighbor's dog.
And there you go.
That is in entirety us having written a Drive app.
Should we try another one?
Why not?
We'll go for the same file, the other images I've got are
a bit big, but that will upload.
Maybe we should have called it a day at writing a single one.
So where do we want to go from here?
Well, unfortunately the JavaScript integration is not
exactly perfect.
If you have a look through some of that code, some of it
is a bit nasty.
And the reason for that is we don't have full support for
all the types of media outplay that we do for the other
client libraries.
So for JavaScript's case, what we're actually doing is
manually creating a multi-part request.
And you can see the code there on the screen, and please have
a look at it.
It's fairly nasty--
you have to create the multi-part yourself, you have
to create the boundaries, you have to encode into Base64 the
various parts.
And when that's done, it will operate successfully.
So what I suggest you do here is just copy and paste that
code, put it out on a function.
And pretend that it's not happening like that until we
get the complete different types of upload.
For example, resumable upload working in
JavaScript in the library.
So that's JavaScript.
Hopefully, I've shown you that you can write a complete
application for Google Drive in the browser.
Now we have no service [? like ?] work.
It was completely a StaticHTML page, and I'm serving it using
just a plain web server.
Please go and check those out.
This video will be part of that guide.
And if you're interested in other languages, we have
videos for all the other languages there.
But I really recommend you try this JavaScript support.
It's so strong to be able to have this application that
doesn't rely on any backend framework, or
anything like that.
Anyone can run it, anyone can add new functionality, so
that's pretty cool.
OK, thank you very much.
I've been Ali.
Enjoy yourselves.
And good luck with your Google Drive integrations.
[MUSIC PLAYING]