IntroductionWelcome| 00:00 |
(MUSIC).
Hello.
| | 00:05 |
I'm Joe LeBlanc.
Welcome to Up and Running with Cloud
| | 00:08 |
Storage APIs.
In this course, we'll look at using
| | 00:11 |
software development kits to access cloud
storage.
| | 00:15 |
Defining and accessing buckets in Amazon
S3.
| | 00:18 |
Next, we'll get thumb nails of photos
stored in drop box.
| | 00:21 |
Then finally, we'll look at alternative
providers of could storage services.
| | 00:26 |
So let's get up and running with cloud
storage APIs.
| | 00:30 |
| | Collapse this transcript |
| What you need to know| 00:00 |
To get the most out of this course, there
are a few things you'll want to be
| | 00:03 |
familiar with.
First, there's Node.
| | 00:06 |
We'll be using Node to create a web server
and to access different Cloud Storage APIs.
| | 00:10 |
You'll need to have Node installed on your
system to use the exercise files.
| | 00:13 |
So be sure to watch Node js First Look.
Next, Node is a JavaScript runtime environment.
| | 00:20 |
So having a good handle on JavaScript will
be helpful.
| | 00:24 |
Have a look at JavaScript Essential
Training.
| | 00:26 |
While Cloud Storage APIs can be accessed
through a variety of languages and
| | 00:30 |
platforms, we'll be using Node and
JavaScript.
| | 00:33 |
The more comfortable you are with them,
the easier it will be to access Cloud
| | 00:37 |
Storage in this course.
| | 00:38 |
| | Collapse this transcript |
| Using the exercise files| 00:00 |
This course includes exercise files you
can use to follow along.
| | 00:03 |
They are designed so you can jump into the
code used for a specific video.
| | 00:08 |
The exercise files are organized by
chapter.
| | 00:11 |
Each chapter has folders for each video.
These are the videos for Chapter two.
| | 00:16 |
Each video has a Final folder and a Start
folder.
| | 00:19 |
Chapters two and four also have a server
folder, to use this server folder, copy it
| | 00:25 |
to your desktop.
Then for each video, copy the app folder
| | 00:30 |
into the server folder.
Finally, the first time you use the server
| | 00:35 |
folder, be sure to install the application
dependencies.
| | 00:39 |
You can do this on the command line.
The is done using the npm install command.
| | 00:44 |
You only need to do this once per server
folder, but you cannot use the same server
| | 00:48 |
folder for different chapters.
With the exercise file structure in mind,
| | 00:52 |
you can now watch any video in this course
and follow along.
| | 00:55 |
| | Collapse this transcript |
| Using the challenges| 00:00 |
This course includes videos called
challenges.
| | 00:02 |
Challenges are quick exercises that give
you a hands-on opportunity to practice and
| | 00:08 |
master what you're learning.
I'll start each challenge by describing
| | 00:11 |
your core objectives for the exercise.
If the challenge involves using any sample
| | 00:15 |
files, I'll tell you where to find them.
I'll also give you a rough estimate of how
| | 00:20 |
much time it took me to complete the
challenge.
| | 00:22 |
When you've completed a challenge make
sure to watch the matching solution video.
| | 00:26 |
In each solution, I'll show you how I
solved the challenge and give you some of
| | 00:30 |
my thinking along the way.
These challenges are an excellent way of
| | 00:34 |
reinforcing the concepts you're learning.
After working through these challenges,
| | 00:37 |
you'll be well on your way to mastering
Cloud Storage APIs.
| | 00:42 |
| | Collapse this transcript |
|
|
1. Cloud Storage OverviewWhy use cloud storage?| 00:00 |
As you develop a web application, you may
be wondering why would I want to consider
| | 00:04 |
Cloud Storage API's, instead of using a
traditional file system?
| | 00:07 |
Let's have a look at some of the
advantages provided by Cloud Storage.
| | 00:11 |
One advantage is that you don't have to
buy more hardware when you want to store
| | 00:15 |
more files.
Could Storage services will typically
| | 00:18 |
charge you depending on how much storage
you're using, and then that way you can
| | 00:22 |
add as much as you need.
Another advantage is that some Cloud
| | 00:25 |
Storage services will keep a local and
remote folders in sync.
| | 00:29 |
This way if you have end users that want
to keep a folder in sync and you want to
| | 00:32 |
do something with that folder
programatically, you can.
| | 00:35 |
Another advantage is that you can keep
your web application focused on the logic,
| | 00:39 |
while using the Cloud Storage API to
handle the file storage.
| | 00:43 |
This way, you don't have to worry about
file system permissions or anything like that.
| | 00:48 |
Another advantage is that you can get
direct URLs to your assets.
| | 00:51 |
You don't necessarily have to go through
the Cloud Storage API to get your files back.
| | 00:57 |
This way you can take a load off your web
application server and send users directly
| | 01:01 |
to the assets.
Also, some services have integration with
| | 01:05 |
content delivery networks.
So that makes it easier to deliver static
| | 01:09 |
files quickly.
It also makes it easier to deliver those
| | 01:12 |
files to a very wide audience.
Cloud Storage APIs make it possible for
| | 01:16 |
you to store files without worrying about
running out of space.
| | 01:19 |
They allow you to focus on the logic of
your application, rather than working with
| | 01:23 |
file system limitations.
They're also often integrated with content
| | 01:27 |
delivery networks, which can help scale
downloads.
| | 01:30 |
| | Collapse this transcript |
| Classifying storage services| 00:00 |
The term cloud storage gets used to
describe many different services that do
| | 00:04 |
significantly different things.
Let's have a look at the different types
| | 00:08 |
of cloud storage services available.
First, there's the container based services.
| | 00:13 |
These are also referred to as buckets
often.
| | 00:17 |
You define the container on the service,
and that container usually has a unique URI.
| | 00:21 |
All the RESTful API calls are going to be
made using that URI.
| | 00:26 |
You'll also typically get access keys to
make the API calls.
| | 00:30 |
Amazon S three example of a bucket-based
service.
| | 00:34 |
Another type of cloud storage service is
an app-based service.
| | 00:37 |
You typically define an application on the
service.
| | 00:40 |
Users of that service then decide whether
or not they want to use your application.
| | 00:45 |
Authentication is typically done with
OAuth.
| | 00:48 |
Your application gets unique keys to
access the service, and then you use OAuth
| | 00:52 |
tokens to access specific folders.
Dropbox is an example of an app-based service.
| | 00:58 |
One more type of cloud storage service is
folder synchronization.
| | 01:02 |
End users install an application on their
operating system that performs a synchronization.
| | 01:07 |
This application is going to make the
cloud storage folders appear as though
| | 01:11 |
they're normal folders on their operating
system.
| | 01:13 |
Many of these services offer software
development kits for accessing their APIs
| | 01:17 |
at the operating system level.
Dropbox, in addition to being an
| | 01:21 |
application-based service, is also a
folder synchronization service.
| | 01:26 |
All of the same photos that are on Dropbox
are also in my Dropbox folder on my
| | 01:31 |
operating system.
Another example of a folder
| | 01:34 |
synchronization service is Apple iCloud.
To access the Apple iCloud API, you need
| | 01:40 |
to use a software development kit for iOS.
In this course, we'll be focusing on
| | 01:44 |
Amazon S3 and Dropbox.
Both of these services have software
| | 01:48 |
development kits available for web
applications, making them easy to work
| | 01:52 |
with in Node.
| | 01:53 |
| | Collapse this transcript |
| Configuring Node applications| 00:00 |
In this course, I'll be using Node servers
to demonstrate the software development
| | 00:04 |
kits available for Amazon S3 and Dropbox.
If you're following along with the
| | 00:09 |
exercise files, you'll want to make sure
everything is configured properly before
| | 00:13 |
starting the server.
Let's go to the exercise files.
| | 00:17 |
I'm going to go to the exercise files for
chapter two.
| | 00:20 |
Inside this folder is a server folder.
First, copy the server folder to the
| | 00:25 |
desktop, or copy it to some other place
that's convenient for you.
| | 00:28 |
Next, you'll want to copy in the app
folder.
| | 00:32 |
I'm going to go to video 6.
There's a start folder and a final folder.
| | 00:36 |
I'm going to start with the start code.
Copy that app folder into the server folder.
| | 00:42 |
Now, before I start the server I need to
install the dependencies.
| | 00:46 |
You only need to do this once per chapter,
but you can't use the server folder for
| | 00:50 |
one chapter for the other.
Pull up terminal and then change directory
| | 00:55 |
to that server folder.
Now, I'm going to type NPM install.
| | 00:59 |
NPM is going to install all the
dependencies.
| | 01:03 |
If you get warnings during the
installation process, ignore them.
| | 01:06 |
Now type node and then index.js and then
hit Return.
| | 01:11 |
The server is now running and listening on
port 3000.
| | 01:14 |
Both of these servers require application
keys which are available from the services.
| | 01:19 |
Watch the videos for specific directions
on where to use these keys.
| | 01:23 |
Once dependencies are installed with NPM
Install, you can switch out the app folder
| | 01:27 |
for any other folder in the chapter and
follow along.
| | 01:30 |
| | Collapse this transcript |
|
|
2. Accessing Amazon S3 Buckets via RESTGranting access| 00:00 |
Amazon S3 stores and secures files in
buckets.
| | 00:03 |
To gain acces to Amazon S3, a user must be
created and given permission to use the bucket.
| | 00:10 |
I'm currently on the Amazon Web Services
S3 console.
| | 00:14 |
No buckets have been created yet.
So, let's create one now.
| | 00:17 |
FIrst, enter a bucket name.
The bucket name must be unique across all
| | 00:23 |
of Amazon S3.
Next, select a region.
| | 00:27 |
The region should be the closest region to
where you're application will be hosted.
| | 00:31 |
Now, click Create.
This bucket has now been created and ready
| | 00:36 |
to go.
We can use the credentials from our
| | 00:39 |
existing Amazon log in to access this
bucket.
| | 00:42 |
But a better practice is to create a user
that can specifically access Amazon s3.
| | 00:47 |
To do this, click on your name in the
upper right hand corner and then choose
| | 00:52 |
Security Credentials.
You may get a message stating that you're
| | 00:56 |
accessing this page with root account
credentials.
| | 00:59 |
This is fine, just click Continue.
Next, click Users on the left hand side.
| | 01:05 |
There are no users yet, so let's create
one.
| | 01:09 |
You can create up to five users at a time.
We're just going to create one.
| | 01:14 |
Be sure that the generate and access key
for each user check box is selected.
| | 01:19 |
The name of the user I'm going to create
is going to be called photos.
| | 01:22 |
And then finally click Create.
Once you've clicked Create, it'll pop up a
| | 01:28 |
message saying you can download the
security credentials.
| | 01:31 |
This is the one and only time you will
have to download these credentials.
| | 01:35 |
If you don't download the credentials now,
you'll have to generate new credentials later.
| | 01:39 |
Click Download Credentials.
The credentials are saved as a csv file.
| | 01:47 |
Be sure to put these credentials in a safe
place.
| | 01:49 |
Now, close the window.
Now, that we've rested a new user, we need
| | 01:56 |
to give this user privileges to access
amazon s3.
| | 01:59 |
Click on the user name.
And then click on the Permissions tab.
| | 02:02 |
From here, click the Attach User Policy
button.
| | 02:06 |
In this window there's a list of security
policy templates.
| | 02:11 |
The one we want to use is for AmazonS3.
So, scroll down until you find it.
| | 02:17 |
The security policy I'm going to use is
Amazon S3 Full Access.
| | 02:21 |
It's possible to fine-tune this security
policy so that only certain buckets can be accessed.
| | 02:26 |
But at the moment, I want this user to
have access to all of the buckets on this account.
| | 02:31 |
Now click Apply Policy.
The photos user can now access all of the
| | 02:36 |
buckets on our Amazon S3 account.
Once you've defined the bucket, the best
| | 02:41 |
practice is to create a new user
specifically for interacting with S3.
| | 02:45 |
After creating the user, be sure to
download the access keys and put them in a
| | 02:49 |
same place.
| | 02:51 |
| | Collapse this transcript |
| Listing buckets| 00:00 |
Amazon web services provides a Node
software envelopment kit for all of their APIs.
| | 00:04 |
Using this kit we can connect to S3 and
work with buckets.
| | 00:09 |
Let's connect to some of these buckets
now.
| | 00:10 |
I'm going to pull up the exercise files,
and in chapter two, I'm going to copy the
| | 00:17 |
server to the desktop.
Now, I'm going to go to video two, and the
| | 00:22 |
start folder and then copy the app folder
into the server folder.
| | 00:31 |
Now let's edit the server.
Let's add the keys we downloaded in the
| | 00:35 |
previous video.
I saved the keys to the desktop.
| | 00:38 |
You can open these keys in Excel, or you
can open them in a text editor.
| | 00:42 |
First, I'm going to copy the access key.
And then next, I'm going to copy the
| | 00:49 |
secret access key.
Now, I'm going to take a look at the server.
| | 00:54 |
Open up appindex.js.
The first five lines are requiring Node
| | 00:59 |
modules that we'll be using for this
application.
| | 01:02 |
On line seven, we're declaring an new
express application.
| | 01:06 |
Then on line nine, we're getting the path
to auth.json file that we've just added
| | 01:10 |
the keys to.
Line eleven is configuring Amazon web
| | 01:14 |
services software development kit with the
authorization keys we've just added.
| | 01:18 |
Once Amazon's web services is configured,
we could than start an Amazon S3 object.
| | 01:24 |
Now, that the Amazon S3 object is ready,
let's list our buckets.
| | 01:29 |
I'm going to add a route.
I'm typing app.get, and then the first
| | 01:34 |
argument I'm passing is slash buckets.
The second argument I'm passing is the
| | 01:39 |
call back function.
This callback function takes two arguments.
| | 01:45 |
One for the request, and one for the
response.
| | 01:49 |
Whenever someone loads the buckets route,
we want to make a call to Amazon S3, so
| | 01:54 |
let's do that now.
I'm going to call the list buckets method
| | 01:59 |
of the S3 object.
This method takes a callback function.
| | 02:05 |
The callback function takes two arguments.
Any error that occurred, and then the data
| | 02:10 |
from the API.
For now, lets deliver the data back to the
| | 02:15 |
browser as json.
Save the file and let's get this server started.
| | 02:20 |
I'm going to the terminal and changing
directory to desktop/server.
| | 02:25 |
And now I'm going to type npm install.
If you see any warnings during the
| | 02:30 |
installation process, ignore them.
Now, type node index.js.
| | 02:35 |
After hitting Return, go to the web
browser, and load up localhost:3000/buckets.
| | 02:43 |
This json response lists all of the
buckets as well as information about the owner.
| | 02:47 |
Once the SDK for Amazon web services is
downloaded and installed, requests to S3
| | 02:53 |
can be made using keys.
S3 delivers the responses in json format.
| | 02:57 |
| | Collapse this transcript |
| Uploading files| 00:00 |
Files can be uploaded to S3 buckets by
sending properly formatted requests.
| | 00:05 |
Let's set up one of these requests now.
Go to the exercise files and then go to
| | 00:09 |
Chapter 02 and video 3 and then the start
folder.
| | 00:13 |
Copy the App folder to the server.
Now let's edit the server.
| | 00:22 |
First, let's go to views, they're two
files here layout.jade and upload.jade.
| | 00:28 |
Layout.jade is controlling the overall
layout of our HTML mark up.
| | 00:33 |
Jade is a shorthand way of writing HTML.
For instance, on line 4 here, we're
| | 00:38 |
declaring a title tag.
And then we're setting Amazon S3 as the
| | 00:42 |
value of that tag.
We're also including the Bootstrap CSS
| | 00:46 |
framework from the Public folder.
Finally, on line 7, we're declaring a
| | 00:52 |
block named content.
In upload.jade, on line 1, we're extending
| | 00:58 |
the layout.
This means we want jade to use layout.jade
| | 01:02 |
for the rest of this file.
Then on line three, we're defining the
| | 01:05 |
content we want to use for the layout.
Line five has a conditional.
| | 01:09 |
If the done variable is set to true, we
display a paragraph tag saying the upload
| | 01:14 |
is complete.
The rest of the file is defining a form
| | 01:17 |
that we'll use to upload files.
Now let's go to index.js where we're using
| | 01:22 |
these layouts.
On lines 9 and 10 we're telling express
| | 01:26 |
that we want to use the jade engine and
that our views are located in the Views folder.
| | 01:31 |
On line 11 we're also telling express to
parse all of the variables that are sent
| | 01:37 |
in http requests to this server.
Then on line 12 we're declaring a Static folder.
| | 01:42 |
In this case we're declaring the Public
folder to by our Static folder.
| | 01:45 |
We're using this folder to serve static
assets directly to the browser.
| | 01:51 |
Lines 14 through 23 is the code from the
previous video.
| | 01:55 |
Finally, on lines 25 through 27 we're
defining and upload route.
| | 01:59 |
This route is simply rendering the
upload.jade file.
| | 02:04 |
Currently this is only rendering the form.
We also need to process the form when a
| | 02:08 |
post request is made to it, so let's do
that now.
| | 02:11 |
Go down to line 28 and then on line 29 add
app.post.
| | 02:16 |
Let's pass upload as the route.
The second argument to app.post is a
| | 02:23 |
callback function.
This callback function takes two
| | 02:26 |
arguments, one for the request and one for
the response.
| | 02:29 |
Now let's add code to process the uploads.
First, let's assemble the request.
| | 02:35 |
The request is going to be an object
literal that we pass to a put object
| | 02:38 |
method of the S3 object.
Let's declare this object literal now.
| | 02:44 |
I'm going to call it S3request.
The first property I'm going to define is
| | 02:49 |
Body, and that's Body with a capital B.
I'm now going to read the file that was
| | 02:54 |
uploaded to express.
I'm using the fs module to do this.
| | 02:59 |
The Read file sync method takes a path to
a file and then reads the entire contents out.
| | 03:04 |
The path to the uploaded file is in the
request object.
| | 03:08 |
The next property I'm going to define is
the bucket I want to upload to.
| | 03:12 |
To do this lets set the bucket property,
again a capital D.
| | 03:19 |
Finally we need to set one more object
property.
| | 03:21 |
This one is named Key.
For the value of Key we're going to use
| | 03:26 |
the name of the uploaded file.
To get this file (INAUDIBLE) to run, we'll
| | 03:30 |
need to supply the Key.
Now that we've assembled the request,
| | 03:34 |
let's send it.
I'm going to use the Put Object method.
| | 03:38 |
The first argument I'm going to pass is
the request.
| | 03:43 |
And then the second argument is a callback
function.
| | 03:45 |
This callback function takes two
arguments.
| | 03:49 |
The first is any error that may have
occurred and the second is the data.
| | 03:53 |
In this case we're going to assume that
the upload is successful, our response
| | 03:58 |
will be the form.
However we also want to indicate that the
| | 04:01 |
upload was successful, so to do that we're
going to pass a second argument, which is
| | 04:06 |
going to be an object.
This object will have one property called
| | 04:09 |
done and we're going to set it to true.
When done is set to true, the upload.jade
| | 04:16 |
file will display this paragraph tag.
Now let's load up the server and start
| | 04:21 |
uploading files.
I'm going to terminal and changing
| | 04:24 |
directory to desktop/server.
And now I'm typing node index.js.
| | 04:30 |
Now that the server is listening on port
3000, let's go to local host at port 3000/upload.
| | 04:37 |
The upload form appears and now we can
upload some photos.
| | 04:41 |
I'm going back to the exercise files.
In chapter 2, and in video 3, there's a
| | 04:47 |
Start folder.
This start folder has a photos folder.
| | 04:50 |
There are three photos here, let's upload
them.
| | 04:56 |
These photos have now been uploaded to
Amazon S3.
| | 04:59 |
Let's take a look at these photos in the
console.
| | 05:01 |
I am going to my bucket and the three
photos appear.
| | 05:05 |
Uploading a file to a bucket involves
assembling the file contents, bucket name
| | 05:10 |
and key into a request.
The file data is imbedded directly into
| | 05:14 |
the request.
| | 05:15 |
| | Collapse this transcript |
| Displaying bucket contents| 00:00 |
As a bucket fills with files, you'll want
to get a list of everything that's there.
| | 00:04 |
Let's add a route where the bucket
contents can be listed.
| | 00:08 |
Go to the exercise files and then open up
chapter 2.
| | 00:11 |
Go to video four and the start folder, and
then copy app into the server folder.
| | 00:19 |
Now, let's edit the server.
First, go to app views, then load list.jade.
| | 00:25 |
On line one, we're telling JADE to include
the layout.
| | 00:29 |
On line seven of the layout, there's a
block named content.
| | 00:33 |
We're defining what's going into content
here on line three.
| | 00:37 |
We have a div with a class of container, a
header and then an unordered list.
| | 00:43 |
The on line seven, we begin a loop.
We're expecting contents to be in an
| | 00:47 |
array, and then we're reiterating over
each element in that array.
| | 00:50 |
Each element becomes the variable file,
and then on line eight we're outputting
| | 00:55 |
the key property of each file.
Now, let's go to index.js.
| | 01:01 |
Let's add a route that will list all of
the contents of the bucket.
| | 01:04 |
I've made some space on line 19, and now
I'm going to add app.get.
| | 01:11 |
The first argument I'm going to pass is
/list.
| | 01:15 |
This will be the route that we'll use for
listing the bucket contents.
| | 01:18 |
The second argument I'm going to pass is a
callback function.
| | 01:21 |
This callback function accepts the request
and the response as two separate objects.
| | 01:28 |
Now, I'm going to call a method of the s3
object.
| | 01:31 |
This will allow us to list the contents of
a bucket.
| | 01:35 |
I'm going to call the list object's
method.
| | 01:38 |
The first argument I'm going to pass is an
object literal.
| | 01:42 |
This object will have one property called
Bucket.
| | 01:45 |
Bucket is with a capital B.
The value of this property will be the
| | 01:49 |
name of the bucket that I want to list.
The second argument of the call to list
| | 01:53 |
arguments is going to be a callback
function.
| | 01:56 |
This callback function will have two
arguments: one for any errors that occur
| | 02:01 |
sand the other for the data.
On this route, we're going to render the
| | 02:05 |
data using the list view.
Now, before we start the server, let's
| | 02:10 |
create another route, this route will
display the data in JSON format.
| | 02:15 |
Copy everything from line 19 to 23 and
then add it again on line 25.
| | 02:21 |
Change the route name here, I'm going to
change it to this list.Json.
| | 02:25 |
And then instead of rendering the view,
call rest.j son and then just pass data.
| | 02:32 |
Now, save the file and let's start the
server.
| | 02:34 |
I'm going to terminal and I'm changing
directory to desktop/server.
| | 02:38 |
Now, I'm going to type node index.js.
After typing Return, the server has started.
| | 02:44 |
Let's go to local host at port 3000 and
then slash list.
| | 02:49 |
All of the files that were previously
uploaded are now listed on this HTML page.
| | 02:54 |
Let's take a look at this its in JSON
format.
| | 02:58 |
The JSON response has a contents property.
This property is set to an array.
| | 03:03 |
Each element of the array is a separate
object.
| | 03:06 |
Each object represents one file.
From here, we can get the key of the
| | 03:10 |
object and then use that to retrieve the
file.
| | 03:13 |
The list objects method return an object
containing an array of items in a bucket.
| | 03:18 |
Once this object is retrieved, a list of
files can be rendered.
| | 03:21 |
| | Collapse this transcript |
| Retrieving files| 00:00 |
After storing files in a bucket, you'll
eventually want to download them again.
| | 00:04 |
Lets add a route where we can get specific
files out of a bucket.
| | 00:08 |
I'm going to the exercise files and
loading up chapter two, video five, start,
| | 00:13 |
and app.
I'm going to copy this fold into server.
| | 00:17 |
Now, let's have a look at this app, Go to
views and list.jade.
| | 00:24 |
The list view is now linking to individual
files.
| | 00:27 |
On line 9, we have an anchor tag.
This anchor tag is pointing to a file route.
| | 00:32 |
We don't currently have this route in our
application, but we'll add it in a moment.
| | 00:36 |
It's also specifying a name parameter.
We're going to use this name parameter, to
| | 00:40 |
get the file from s3.
And then finally, we're reading the key
| | 00:45 |
property of the file object.
We're also using the key property as the
| | 00:49 |
text for the anchor.
Now, let's go to index.js and add this
| | 00:53 |
file route.
I'm going to line 18 and making a little
| | 00:59 |
bit of room.
First, I'm typing app.get then I'm passing
| | 01:04 |
/file as the first argument.
The second argument is going to be a
| | 01:07 |
callback function.
This callback function is called with the
| | 01:11 |
request and the response.
Now, I'm going to construct a request that
| | 01:15 |
I'm going to send to s3.
To do that I'm going to type var options.
| | 01:20 |
This will be an object literal.
The first property I'm going to set is bucket.
| | 01:24 |
This is with a capital B.
Now I'm going to add the name of my bucket.
| | 01:29 |
The other property I'm going to set is the
Key, spelled with a capital K.
| | 01:33 |
I'm going to set the Key as the file name
in the request.
| | 01:37 |
The Perim method from the request will
allow me to get the perimeter.
| | 01:41 |
Note that when you request a file from
Amazon S3, you need the bucket and the key.
| | 01:46 |
Now let's send this request to S3.
I'm going to call the get object method.
| | 01:51 |
For the first argument, I'm going to pass
options, and then for the second argument
| | 01:56 |
I'm going to define a call back function.
This call back function will be supplied
| | 02:01 |
with the error and the data from the
response.
| | 02:03 |
Assuming that the request is successful,
we can just pass the data onto the browser.
| | 02:09 |
To do this, type rest.end.
And then pass in the data that you want to
| | 02:13 |
send to the browser.
The data object contains not only the
| | 02:16 |
file, but metadata that goes with the
file.
| | 02:18 |
We just want the file itself.
So type in data.Body, with a capital B.
| | 02:25 |
Now that all this is in place, save the
file and lets go to Terminal to start the server.
| | 02:29 |
I'm going to change directory to
desktop/server.
| | 02:33 |
And now I'm going to type node index.js.
After hitting return the server is ready.
| | 02:39 |
Let's go to the list route.
Go to local host at port 3000/list.
| | 02:45 |
All three of my photos are still listed
and now when I click on one of the links
| | 02:50 |
it shows the photo.
When I clicked on that link, the request
| | 02:53 |
went to my application.
My application, then saw the name
| | 02:56 |
parameter and then sent that to S3.
S3 then responded with the image as well
| | 03:02 |
as the meta data.
We got the image out of the response and
| | 03:05 |
then sent it to the browser.
When getting files from the S3, remember
| | 03:09 |
to specify both the bucket and the key.
S3 will send back the file along with all
| | 03:13 |
the relevant meta data.
| | 03:15 |
| | Collapse this transcript |
| Configuring public access| 00:00 |
By default, S3 security configuration
keeps everything uploaded to a bucket private.
| | 00:06 |
However, sometimes it's helpful to allow
files to be downloaded directly from S3
| | 00:10 |
without authentication.
Let's set up S3 to do this for the files
| | 00:14 |
we've already uploaded.
I'm on the AWS console right now, and I'm
| | 00:18 |
going to go into my bucket.
These are the three files that I uploaded previously.
| | 00:22 |
Now, it's possible to make files public as
soon as they're uploaded.
| | 00:26 |
However, we didn't do that in our
application.
| | 00:28 |
So, now, let's select these three files
and make them public.
| | 00:33 |
Context click on the files and then click
Make Public.
| | 00:38 |
The console will then prompt you to
confirm that you want to make the items public.
| | 00:42 |
So, click OK.
The pane on the right will then let you
| | 00:44 |
know when the items are public.
Now, let's modify our application to use
| | 00:48 |
the public URLs rather than downloading
through the API.
| | 00:53 |
Go to the exercise files and load up
chapter 02, video 06, start, and then copy
| | 00:59 |
the App folder into the Server folder.
Now, let's edit the app.
| | 01:05 |
Go to the Views folder and go to
list.jade.
| | 01:08 |
Currently, we're linking to the file route
in our application.
| | 01:12 |
Instead of that, we can now link directly
to Amazon S3.
| | 01:16 |
Direct links to files on S3 follow a
specific pattern.
| | 01:19 |
The pattern is bucket
name.s3.amazonaws.com, then slash, then
| | 01:26 |
the name of the file.
Let's use this structure now.
| | 01:29 |
I'm typing in the name of my bucket.
Now, I'm typing in dot and then s3, and
| | 01:36 |
then another dot, an amazonaws, then
another dot com and then slash.
| | 01:43 |
I'm leaving file.Key as is.
This will give us direct links to the file.
| | 01:50 |
Now, save this layout and let's go to the
command line.
| | 01:52 |
I'm changing directory into
Desktop/server/.
| | 01:58 |
And now I'm typing node index.js.
The server is now listening on port 3000,
| | 02:03 |
so, let's go to localhost at port
3000/list.
| | 02:07 |
The three files are now listed again.
When I click on one of the files, it
| | 02:11 |
downloads the file.
Files uploaded to s3 buckets can be made
| | 02:17 |
bucket so that they can be downloaded
directly.
| | 02:19 |
This is the most efficient way of
delivering files from s3 if access control
| | 02:23 |
is not a concern.
| | 02:24 |
| | Collapse this transcript |
| Challenge: Downloading immediately| 00:00 |
In this challenge, you'll download a file
immediately after uploading it to S3.
| | 00:05 |
Your objectives for this challenge include
modifying the existing upload function, so
| | 00:10 |
that it does this.
You'll also want to wait until the upload
| | 00:13 |
is finished before attempting to download
the file.
| | 00:16 |
And then finally, do it all in one local
host request.
| | 00:20 |
Don't redirect the user back to another
route.
| | 00:23 |
Use the application in the exercise files
along with the server.
| | 00:27 |
The exercise files for this challenge are
located in Chapter two, Video seven, Challenge.
| | 00:32 |
There's an app folder with the application
and a photos folder with a file you can
| | 00:36 |
use for testing.
This challenge should take about seven
| | 00:39 |
minutes to complete.
When you're done, be sure to check out my
| | 00:43 |
solution video, where I'll show how I
uploaded and downloaded a file in one step.
| | 00:47 |
| | Collapse this transcript |
| Solution: Downloading immediately| 00:00 |
So here's my solution to the challenge.
I'm not going to upload a photo, and when
| | 00:05 |
I click Submit it uploads the photo to S3
and then download it immediately.
| | 00:10 |
Let's got to the S3 console.
When I refresh the bucket, the image that
| | 00:16 |
I just uploaded appears, so let's take a
look at how I did this.
| | 00:19 |
Go to app and index.js.
And now scroll down to the bottom.
| | 00:25 |
Lines 47 through 51 are the same as
before.
| | 00:27 |
We're reading the uploaded file from disk,
and then we're specifying the bucket, and
| | 00:32 |
then we're specifying the key name that we
want to use.
| | 00:34 |
On line 53, we're then sending the
request.
| | 00:38 |
After getting a response from the server,
instead of showing the upload form, we
| | 00:42 |
then perform the download.
On lines 54 through 57, we construct a
| | 00:47 |
download object.
This object specifies the bucket as well
| | 00:51 |
as the key.
Notice that on both line 50 and line 56.
| | 00:55 |
We're using req.files.uploadedFile.name.
This is the file name that was specified
| | 01:01 |
during the upload.
Finally, on line 59, we're calling get object.
| | 01:06 |
The first argument we're passing is the
download object we just constructed.
| | 01:10 |
Then we're passing in a callback function.
Finally, when the callback function is called.
| | 01:14 |
We call rest.end.
We're passing in the body property of the
| | 01:18 |
data object.
This is the actual file that got uploaded.
| | 01:22 |
You can make as many calls to the S3 API
as you like for any request to your application.
| | 01:27 |
Just make sure that you eventually send
something back to the browser.
| | 01:31 |
| | Collapse this transcript |
|
|
3. Other Container-Based ServicesAzure storage services| 00:00 |
Windows Azure Storage is a service for
storing data as objects in tables or in cues.
| | 00:06 |
Azure Storage uses the concept of storage
accounts, a single storage account can
| | 00:11 |
handle binary large object storage, table
storage and cue storage.
| | 00:16 |
Binary large object storage is similar to
bucket storage in Amazon S3.
| | 00:22 |
Azure has the concept of the table storage
service.
| | 00:25 |
This allows you to add data in a tabular
format, much in a way that you would use a database.
| | 00:30 |
Azure also has the concept of queue
storage.
| | 00:33 |
Queues are designed to hold messages that
are stored in sequential order.
| | 00:38 |
Authentication with a storage account is
done through access keys.
| | 00:42 |
There are software development kits
available for .net, Node.js, PHP, Java,
| | 00:46 |
Python, and Ruby.
There are also kits available for Windows
| | 00:51 |
Phone 8, iOS and Android.
Windows Azure storage services is a good
| | 00:56 |
choice if you're developing an application
using .net or Windows Phone.
| | 01:00 |
It also offers tables and queues from the
same service as the file storage.
| | 01:04 |
| | Collapse this transcript |
| Rackspace cloud files| 00:00 |
Rackspace Cloud Files is a cloud storage
service with direct integration into the
| | 00:04 |
Akamai Content Delivery Network.
It's similar to Amazon in that you can
| | 00:08 |
store files over a restful API and files
are stored in containers.
| | 00:13 |
Authentication is done via accounts.
Each account receives its own API key.
| | 00:18 |
There are software development kits
available for Java, PHP, Phython, Ruby and .net.
| | 00:24 |
Rackspace Cloud is best suited for read
heavy storage uses.
| | 00:28 |
Containers can be managed via a rackspace
cloud's restful api
| | 00:33 |
| | Collapse this transcript |
| Google Cloud Storage| 00:00 |
Google Cloud Storage is part of the Google
Cloud platform.
| | 00:03 |
This platform is similar to what is
offered by Amazon Web Services.
| | 00:08 |
It uses the structure of buckets and
objects that Amazon has.
| | 00:12 |
The API is available via a restful
interface returning either XML or JSON.
| | 00:18 |
However, it's different from Amazon, in
that you can't create folders within
| | 00:22 |
containers, nor can you create containers
within containers.
| | 00:26 |
The hierarchy is completely flat.
Also, your access to Cloud Storage is
| | 00:30 |
controlled through a project shared with
other Google Cloud platform services
| | 00:34 |
you're using.
There are three primary ways to
| | 00:37 |
authenticate with Google Cloud storage.
You can either use use OAuth 2.
| | 00:41 |
You can use a Google account, or you can
use private keys.
| | 00:45 |
Google Cloud storage has client libraries
for Python, Java, and JavaScript.
| | 00:51 |
There's also a command line tool called
gsutil.
| | 00:54 |
Google Cloud storage works best if your
project will be integrating with other
| | 00:57 |
Google Cloud platform services.
The bucket system is similar to Amazon
| | 01:01 |
S3s' and there are a variety of ways to
authenticate.
| | 01:04 |
| | Collapse this transcript |
|
|
4. Creating Dropbox AppsCreating an application| 00:00 |
Before interacting with the Dropbox API,
you must create an app through the Dropbox
| | 00:05 |
app console.
Let's open up the console and create an app.
| | 00:09 |
First, if you're not already logged into
dropbox.com, do so now.
| | 00:12 |
After signing in, Dropbox will show your
folder.
| | 00:20 |
From here we need to get to the app
console.
| | 00:21 |
To do that, click on the More link at the
bottom of the page then select Developers.
| | 00:27 |
Finally, select the Apps console from the
left.
| | 00:31 |
If you have any existing applications,
they'll be displayed here.
| | 00:34 |
Currently I haven't created any
applications, so I don't have anything in
| | 00:38 |
this list.
I'm now going to click Create An App.
| | 00:40 |
Dropbox offers three ways of creating an
app.
| | 00:44 |
The first way is the Dropbox Chooser.
The Dropbox chooser is a simple
| | 00:49 |
application that can be dropped into an
existing web application.
| | 00:52 |
It offers limited interactions with the
Dropbox API.
| | 00:56 |
The second option is the Sync API.
The Sync API allows you to work with
| | 01:00 |
Dropbox as though it were a path on your
local file system.
| | 01:03 |
Finally their Core applications.
Core applications interact with Dropbox
| | 01:09 |
via HTTP.
This is the type of application that we
| | 01:12 |
want to create.
Next, you'll need to enter an app name.
| | 01:17 |
The app name must be unique across the
entire dropbox.com namespace.
| | 01:23 |
Finally you'll need to chose a permission
type.
| | 01:26 |
Your choices are App folder and Full
Dropbox.
| | 01:29 |
The App folder will create a specific
folder for this application in the user's Dropbox.
| | 01:34 |
Choosing Full Dropbox will give access to
all the folders in the users account.
| | 01:39 |
I'm going to go with App Folder.
Finally, click Create App.
| | 01:43 |
After the application is created, the App
key and App secret will be displayed.
| | 01:50 |
Be sure to copy these values down, because
we'll need to use them in the next video.
| | 01:54 |
With these keys, you can start building an
application using the Dropbox core API
| | 02:00 |
| | Collapse this transcript |
| Configurng OAuth requests| 00:00 |
Authentication for drop box core API
requests, is handled through off.
| | 00:05 |
This involves obtaining a request token,
having the end user visit dropbox.com to
| | 00:10 |
authorize your application, then
generating an access token.
| | 00:14 |
Lets have a look at this step by step.
Attempting to do http requests with ohauf
| | 00:19 |
by hand is very difficult.
To help us out with this, I'm going to use
| | 00:23 |
the no dash d box module for no j s.
This module will allow us to make http
| | 00:28 |
requests with ohauf through methods.
Now lets set up the server.
| | 00:32 |
Go to the exercise files, and go to
chapter 4.
| | 00:35 |
Video 2.
Go to the Start folder, and then copy the
| | 00:38 |
App folder.
And then paste it into the Server folder.
| | 00:44 |
Now, let's do some configuration.
Open off.json.
| | 00:48 |
You'll notice there are place holders here
for App key, and App secret.
| | 00:52 |
We can get these from the drop box
application we created earlier.
| | 00:55 |
I'm going to back to dropbox.com and then
open up the Developer portal.
| | 00:59 |
Go to the Apps console.
Once you're at the Apps console, find the
| | 01:04 |
application created earlier and then click
Options.
| | 01:07 |
Now, copy the app key into off.jason.
Then do the same for app secret.
| | 01:14 |
Now, let's install the dependencies for
this application.
| | 01:20 |
Open terminal and change directory to
desktop/server.
| | 01:25 |
Then type npm install.
If you see any warnings during the
| | 01:29 |
insulation process, ignore them.
Now, lets start the server.
| | 01:34 |
Type in node index.js.
Before we load this site in the browser,
| | 01:40 |
let's have a look at what the application
is doing.
| | 01:44 |
I'm opening up app index.J S.
On lines one through four, we're requiring
| | 01:49 |
no J S modules.
On line six and seven, we're pulling in
| | 01:53 |
the configuration from off.json, and then
we're storing this configuration in config.
| | 01:59 |
On line 8 we are taking the configuration
and passing it in to dbox.app.
| | 02:04 |
On lines 9 and 10 we're setting token and
client to false.
| | 02:08 |
We'll be getting a token from the dropbox
API in a moment.
| | 02:11 |
Once we have that token, we'll want to
create a client.
| | 02:15 |
On lines 14 through 15, we're defining
some middle wear for express.
| | 02:20 |
On line 15, we're checking to see where or
not a client or token has been set.
| | 02:25 |
If either one of these has been set, we
proceed with the rest of the application.
| | 02:29 |
If neither a client nor a token has been
set, we proceed with getting a token.
| | 02:34 |
On line 18 we're calling the request token
method that's provided by dbox.
| | 02:39 |
This method receives a function as a
callback.
| | 02:42 |
The request token method accepts a
callback function as an argument.
| | 02:46 |
The callback function as two arguments,
one for the status and one for the request token.
| | 02:50 |
This request token is coming back from the
dropbox API.
| | 02:54 |
Once we have the request token, We store
it in the token variable on line 19.
| | 02:59 |
This way it will be available for multiple
requests.
| | 03:02 |
On line 20, we're using the authorized URL
property of the request token.
| | 03:07 |
On line 21 we're upending a callback URL.
When the authorization process is complete
| | 03:13 |
the user will be redirected back to this
callback URL.
| | 03:17 |
Finally, we're redirecting the user to the
oAuthURL.
| | 03:22 |
This will take the user to dropbox .com to
authorize our application.
| | 03:26 |
Once the user has authorized the
application, they'll be redirected to the
| | 03:30 |
access route.
At the access route, we can then generate
| | 03:34 |
an access token on line 28.
This is another method that's being
| | 03:38 |
provided by dbox.
We take the request token that we've
| | 03:41 |
received before and pass it as the first
argument.
| | 03:44 |
Then the second argument is a callback
function.
| | 03:46 |
The callback function accepts status and
access token as two arguments.
| | 03:51 |
With the access token, we can create a
client.
| | 03:55 |
This client can make further requests
against the dropbox API.
| | 03:58 |
And once we have the client on line 30,
were direct the user back to the album.
| | 04:03 |
For now on line 35 we're just going to
display the message done.
| | 04:07 |
Now, let's watch this process in action.
I'm going to go to local host at port 3000.
| | 04:15 |
Now, I will click Allow.
It went by a bit quickly, but we were
| | 04:19 |
redirected to the axis route and then the
axis route redirected us to album.
| | 04:24 |
Our web application is now authorized to
work with the Dropbox API.
| | 04:28 |
Using a software development kit makes it
easier to work with the Dropbox API,
| | 04:32 |
especially when it comes to (UNKNOWN) .
After having the end user authenticate
| | 04:36 |
your application with Dropbox, you can
then make API calls to their account.
| | 04:40 |
| | Collapse this transcript |
| Listing photos| 00:00 |
Once an application is authorized with
Dropbox, you can get information about the
| | 00:04 |
user's folder through the Dropbox API.
Let's upload some photos and then list
| | 00:09 |
them out in our node application.
In the previous application when we
| | 00:12 |
authorize with Dropbox, it created this
Apps folder.
| | 00:17 |
Inside of this Apps folder is another
folder with the name of the app.
| | 00:23 |
This folder is currently empty.
Let's add some photos, so that our
| | 00:27 |
application has something to read.
Go to the Exercise Files.
| | 00:31 |
And load up Chapter 4 > Video 3 > Start.
Inside that folder is a photos folder.
| | 00:37 |
Select all the photos and then drag them
into Dropbox.
| | 00:44 |
All six photos are now in the folder of
your application.
| | 00:48 |
Now, let's take a look at the server.
I'm going to open up Exercise Files and go
| | 00:52 |
to Chapter 4 >Video 3 and then in the
Start folder there's an App folder.
| | 00:58 |
Copy this App folder to the Server folder.
Now, let's start editing the code.
| | 01:04 |
In app index.js there's three new lines
starting on line 14.
| | 01:10 |
Line 14 is telling express where the Views
folder is, and then line 15 is telling
| | 01:16 |
express, which view engine we want to use.
In this case, we're going to be using Jade.
| | 01:20 |
Finally, line 16 is defining a Static
folder.
| | 01:24 |
This is set to public.
Our public folder currently has a CSS
| | 01:28 |
folder, with the boot straps CSS
framework.
| | 01:33 |
Now, let's change the album route.
What we'd like to do here is get a list of
| | 01:38 |
all of the images that are in our folder,
and then display them one by one.
| | 01:41 |
To do that, we're going to use the dbox
API.
| | 01:48 |
If you scroll down, you'll find a method
named Metadata.
| | 01:51 |
The Metadata method allows us to specify
the path; and then a call back function
| | 01:56 |
where we can get the data about that path.
Let's use this method now.
| | 02:00 |
First, we're going to use the client that
was defined earlier.
| | 02:04 |
Then we're going to call the meta date
function.
| | 02:08 |
We're going to pass / as the first
argument into this function.
| | 02:13 |
The next argument is going to be a
callback function.
| | 02:17 |
The first argument of this function is
going to be status, and then the second
| | 02:22 |
argument is going to be the reply.
FInally, we're going to render the reply.
| | 02:31 |
The first argument we're going to pass
through render is layout.
| | 02:34 |
This corresponds to views layout dot Jade.
The second argument we're going to pass is reply.
| | 02:43 |
Let's take a look at what layout.Jade
goes.
| | 02:47 |
Jade is a shorthand way of writing HTML.
For instance, line 4 here is specifying
| | 02:52 |
our bootstrap file.
Line 4 is specifying a title tag with a
| | 02:57 |
value of Dropbox application.
Then online eight, were using a loop.
| | 03:03 |
The loop is going to look for a contents
variable that will pass to this view.
| | 03:07 |
For each item in the content variable, we
want to create another variable named file.
| | 03:11 |
And then on line nine, we're going to
output the path property of each file object.
| | 03:17 |
This is done using the equal sign.
Before we start this server, I'd like to
| | 03:21 |
make another route, copy everything from
line 38 to 42 and then paste it on line
| | 03:26 |
44, then change the route.
I'm going to name this album.json.
| | 03:30 |
What I'd like to do here is display the
raw data that we're getting back from the
| | 03:36 |
dropbox api.
To do this, change render to json and then
| | 03:41 |
omit the first argument.
Now, let's start the server.
| | 03:45 |
Go to Terminal and then change directory
to desktop/server.
| | 03:49 |
Then type node index.js.
Then hit Return.
| | 03:54 |
And the server will start up.
Now, let's go to localhost at port 3,000.
| | 03:58 |
I'm now going to authorize this
application.
| | 04:02 |
After the application is authorized were
redirected back to it.
| | 04:06 |
Now, were listing every file in the
folder.
| | 04:08 |
Let's take a look at the raw data that
makes this happen.
| | 04:12 |
Add .json to the end of the URL.
There's a contents property of this object.
| | 04:18 |
This matches up to the contents variable
in our jade layout.
| | 04:22 |
The contents property is set with an
array.
| | 04:25 |
Each element of the array is an object,
and each of these objects has a path property.
| | 04:31 |
This path property is what we're
displaying at the album route.
| | 04:35 |
Using a software development kit like
dbox, it makes it it possible to call and
| | 04:38 |
authenticate the Dropbox API.
Once a client is ready, the information
| | 04:43 |
about a specific folder can be fetched and
listed.
| | 04:45 |
| | Collapse this transcript |
| Searching files| 00:00 |
As folders fill up, it may be difficult to
locate a single file.
| | 00:04 |
The drop box api makes it possible for you
to search a folder and any of it's
| | 00:08 |
subfolders for file names matching a term.
I'm in my dropbox right now and I'm going
| | 00:13 |
to go to the apps folder, now I'm going to
select the folder from my application
| | 00:18 |
currently I have 6 items in this folder.
I'm going to move the cheesecake image
| | 00:23 |
into another folder called desserts.
Now let's go to the exercise files and add
| | 00:30 |
a search function to our application.
Go to chapter 4, video 4, start, and then
| | 00:37 |
copy the app folder into the server
folder.
| | 00:42 |
Now let's start editing the code.
Go to app and index dot JS.
| | 00:49 |
From here, we're going to create a
brand-new route.
| | 00:51 |
We're going to call it search.
Go to line 43 and make a couple more
| | 00:55 |
lines, and then on line 44 type app.get.
Then for the first argument, type/search.
| | 01:06 |
Then create a callback function.
The callback function takes the request
| | 01:10 |
object and the response object as
argument.
| | 01:13 |
The debox module provides search as a
method.
| | 01:17 |
To use this method, type in client.search.
The search method takes three arguments.
| | 01:26 |
The first argument is the path to start
searching at.
| | 01:28 |
Just type /.
The second argument is the term to search for.
| | 01:32 |
We're going to pull this from the request.
I'm going to use the param method of the
| | 01:39 |
request object.
And then I'm going to specify term, as the
| | 01:44 |
term that I want to search for.
Finally, the third argument is a callback function.
| | 01:50 |
This callback function has two arguments.
The first is status and the second is the reply.
| | 01:58 |
Finally, we want to render the reply.
We're going to use the layout to render this.
| | 02:04 |
We're going to supply an object as the
second argument.
| | 02:07 |
The reply on line 45 comes back as an
array.
| | 02:10 |
Since our layout is expecting an object,
we're going to need to wrap the reply.
| | 02:16 |
This object will have one property called
contents.
| | 02:19 |
Contents will be set to reply.
Before we start the server, let's create
| | 02:26 |
another route.
Copy everything from line 44 to 48, and
| | 02:31 |
then paste on line 50.
This route is going to show the raw json response.
| | 02:36 |
Change it to /search.json.
And then change the response to be a json string.
| | 02:44 |
Now save the file, and let's start the
server.
| | 02:47 |
Go to terminal and change directory to
desktop server.
| | 02:52 |
Then type, node index.js.
Now that the server is listening on port
| | 02:57 |
3000, let's start up the application.
Authorize the application and redirect it
| | 03:03 |
back to the album.
Now let's go to the search route.
| | 03:08 |
This time we're going to specify a url
parameters, and it's going to be term and
| | 03:12 |
we're going to set that to the term that
we want to search for.
| | 03:15 |
Let's search for cheese cake.
The Dropbox API searched the entire
| | 03:22 |
application folder and then found the
cheesecake image in the desserts folder.
| | 03:27 |
Let's change the route here to
search.json, so we can see the raw
| | 03:30 |
response from the Dropbox API.
The Dropbox API returned an array of objects.
| | 03:38 |
There's currently just one object that
matches.
| | 03:45 |
The search service from Dropbox, allows a
root folder to be specified.
| | 03:48 |
Once the search is complete, Dropbox
returns the results as a json array.
| | 03:53 |
| | Collapse this transcript |
| Loading thumbnails| 00:00 |
Before downloading an entire image, it's
helpful to get a thumb nail for previews.
| | 00:04 |
The Dropbox API can generate thumbnail
images automatically.
| | 00:09 |
Let's go to the exercise files and get our
application.
| | 00:11 |
Go to chapter o4, video 05, start, and
then copy the app folder into the server folder.
| | 00:18 |
Now, let's take a look at this in the Text
editor.
| | 00:21 |
First, let's go to App views layout.jade.
Starting on line nine, the layout has changed.
| | 00:28 |
We're first making sure that the file
actually has a thumbnail.
| | 00:31 |
If the file is actually a folder, it won't
have a thumbnail.
| | 00:35 |
If the file does have a thumbnail, we
start a div.
| | 00:38 |
We're applying a span three class from the
Bootstrap framework.
| | 00:42 |
Finally, on line 11, we display the
thumbnail.
| | 00:45 |
Our application needs a thumbnail route.
This thumbnail route will go to the
| | 00:49 |
Dropbox API and get the thumbnail for us.
Next, we're adding the name of the photo
| | 00:54 |
as a parameter.
We're using the file path as that parameter.
| | 00:58 |
And then finally, we're applying the image
polaroid class from the bootstrap framework.
| | 01:04 |
Let's add the route for the thumbnail.
Go to app index.js.
| | 01:09 |
Scroll down to the bottom and make some
space on line 50.
| | 01:14 |
We're going to begin by defining the
thumbnail route.
| | 01:18 |
This route takes a callback function.
Now, let's take a look at how to get the
| | 01:22 |
thumbnail from the dbox SDK.
The SDK has a thumbnails function.
| | 01:28 |
We can call this function and then get the
thumbnail directly from the Dropbox API.
| | 01:32 |
This function will be called with the
status of the API request along with the
| | 01:38 |
image for the thumbnail, and then the
metadata for the thumbnail.
| | 01:41 |
Let's add this to our route.
The first argument that thumbnails take is
| | 01:47 |
the path to the image.
We're passing this path into the request.
| | 01:52 |
The second argument for this function is
an options object.
| | 01:55 |
In this case, we want to specify the size
of the thumbnail that we get back from the
| | 01:59 |
Dropbox API.
The documentation on the Dropbox API
| | 02:03 |
website shows that the different options
that can be set.
| | 02:06 |
We can get xs, s, m, l or xl.
I'd like the medium size, the 128 by 128 pixels.
| | 02:15 |
To specify this, we're going to set the
size property...
| | 02:19 |
Finally, there's one more argument to
supply, the callback function.
| | 02:26 |
The callback function will have the
status, the thumbnail itself, and then the
| | 02:32 |
metadata about the thumbnail.
We want this route to send the thumbnail
| | 02:38 |
directly to the browser.
So, to do that, I'm going to type res.end
| | 02:41 |
and then pass in the thumbnail.
Now, let's start the server.
| | 02:48 |
I'm in terminal and I'm changing directory
to desktop/server, and now I'm typing node
| | 02:53 |
index.js and hitting Return.
This starts a server on port 3000.
| | 02:58 |
Let's go there now.
I'm going to allow this application, and
| | 03:03 |
now each of the thumbnail is loaded.
For each of these images, our request was
| | 03:07 |
made back to the node application.
The node application then contacted the
| | 03:11 |
Dropbox API and got the thumbnail.
Then the node application passed the
| | 03:15 |
thumbnail back to the browser.
One thing to note, if you're planning on
| | 03:19 |
using the thumbnail function a lot, you
may wish to cache the thumbnails locally.
| | 03:23 |
This will improve the performance of your
application, because you'll be able to
| | 03:27 |
eliminate a trip to the Dropbox API.
Dropbox returns thumbnail images directly
| | 03:32 |
from its API.
To handle these thumbnail images, create a
| | 03:36 |
route in your application where they can
be loaded individually.
| | 03:39 |
| | Collapse this transcript |
| Accessing publicly| 00:00 |
Once an application is authenticated with
a Dropbox API, it has access to all of the
| | 00:05 |
files int he Applications folder.
However there are some instances when it's
| | 00:09 |
best to serve the dropbox files directly
to the browser.
| | 00:11 |
Let's go to the exercise files.
Go to chapter 4, video 6, start and then
| | 00:18 |
copy the App folder into the Server
folder.
| | 00:21 |
Now, I'm going to go to terminal and start
the server.
| | 00:23 |
Change directory to desktop, server, and
then type node index.js, then press return.
| | 00:30 |
Now, let's load the application in the
server.
| | 00:33 |
Go to localhost at port 3000.
I'm going to click Allow to allow the application.
| | 00:38 |
Now, let's click on one of these photos.
It's currently pulling up the full size photo.
| | 00:44 |
This photo is being loaded through my
local host web server.
| | 00:47 |
Lets have a look at how it's doing this.
Go to App in index.js.
| | 00:54 |
On line 59 the route is calling the
client.get method.
| | 00:59 |
The get method simply gets the file from
the Dropbox API.
| | 01:03 |
This method calls a callback function.
This callback function has three arguments.
| | 01:07 |
The status, the reply, which is the file
itself, and then the metadata.
| | 01:12 |
That's the data about the file.
This route finishes by simply sending the
| | 01:16 |
data from the file back to the web
browser.
| | 01:20 |
However, this is not the most efficient
way of getting the file to the browser.
| | 01:24 |
There's a problem with this arrangement.
The problem is that we have the browser
| | 01:28 |
making a request to the local server, then
the local server goes to the Dropbox API
| | 01:33 |
and gets the photo.
When the photo's returned, it's coming
| | 01:36 |
back through the local server and then
going back to the web browser.
| | 01:40 |
If this file is very large, it may run
into the limits of our web server.
| | 01:44 |
Instead of retrieving the file from the
Dropbox API, a better solution would be to
| | 01:49 |
send the user a link that they can use to
download the file directly.
| | 01:53 |
There are a few different options for
this.
| | 01:55 |
The first option would be a share page,
drop box offers a share page service.
| | 02:00 |
This service offers a page where people
can share a file with other people.
| | 02:04 |
On line 65, we're defining a photo share
info route.
| | 02:09 |
This route goes to the Dropbox API and
gets links to this share pages.
| | 02:13 |
Lets load this route now.
In the location bar, replace photo with
| | 02:18 |
photo_ share_info.
This json response provides us with the
| | 02:26 |
URL to the share page.
Copy this URL and open it in another tab.
| | 02:31 |
You'll notice there's a bottom here for
downloading the file as well as one for
| | 02:37 |
sharing it.
However, sometimes you don't want to link
| | 02:40 |
to the share page, you just want a direct
link to the file from Dropbox.
| | 02:45 |
We can get this link from the media method
of the dbox sdk.
| | 02:49 |
Let's take a look at what this json
response looks like.
| | 02:51 |
Replace photoshare info in the location
bar with photo link info.
| | 02:58 |
This provides us with a URL.
Let's copy this URL and paste it into
| | 03:02 |
another tab.
This is a direct link to the file.
| | 03:06 |
There's no sharing chrome around this
file.
| | 03:08 |
Now, let's modify our application so that
the links point to the direct files.
| | 03:12 |
On line 77, we're defining the photo link
redirect route.
| | 03:18 |
This route works in a similar way to the
Photolink inforoute, except that it finds
| | 03:23 |
the URL in the response and then
automatically redirects the browser to
| | 03:27 |
that URL.
Let's modify the application template so
| | 03:31 |
that it uses Photolink redirect.
Go to Views and layout.jade.
| | 03:36 |
On line 11 replace photo with photo link
redirect, now save the file.
| | 03:41 |
Let's go back to the browser and then
let's go back to the album.
| | 03:47 |
All the photos load again.
Now, let's click on the pizza photo again.
| | 03:50 |
This time we're redirected to
dropboxusercontent.com.
| | 03:55 |
This is a direct link to the image.
It didn't go through our local host webserver.
| | 04:00 |
This is a more efficient way of getting
the file to the browser.
| | 04:02 |
The Dropbox API makes it possible to
generate public links to drop box files.
| | 04:07 |
Using these links helps avoid slowing down
your application server, and provides end
| | 04:12 |
users with a faster download.
| | 04:13 |
| | Collapse this transcript |
| Challenge: Searching thumbnails| 00:00 |
In this challenge, you'll create a route
that searches for a photo and returns a thumbnail.
| | 00:05 |
Your objectives for this challenge
include: searching for the pizza photo.
| | 00:08 |
Once you've found that photo, return the
small sized thumbnail.
| | 00:12 |
Also, don't redirect the user to another
route.
| | 00:15 |
Do the searching and the returning of the
thumbnail in one route.
| | 00:19 |
The exercise files contains a challenge
folder.
| | 00:21 |
There's an app folder with a server to get
you started, and a folder with all the photos.
| | 00:26 |
If you've uploaded the photos from a
previous video, you don't have to upload
| | 00:30 |
them again.
This challenge should take about seven
| | 00:32 |
minutes to complete.
When you're done, make sure to check out
| | 00:35 |
my solution video where I'll show how I
created this route and a pitfall I stepped into.
| | 00:40 |
| | Collapse this transcript |
| Solution: Searching thumbnails| 00:00 |
So, here's my solution to the challenge.
Once I load up the server, it asks me to
| | 00:05 |
authenticate with Dropbox.
Once I allow the Dropbox application, I
| | 00:09 |
can now go to a new route.
It's called Small_pizza.
| | 00:13 |
And then a small thumbnail of the pizza
image appears.
| | 00:15 |
Let's take a look at the code that makes
this happen.
| | 00:19 |
First, I created a route called small
pizza.
| | 00:22 |
It takes a callback function that takes a
request and a response object.
| | 00:25 |
Next, I call the search method of the
client object.
| | 00:29 |
I started a search at the root folder and
then used the term pizza.
| | 00:33 |
Then I supplied a callback function to
receive the status and reply.
| | 00:36 |
Now, here's a part that tripped me up.
I referred back to the JADE layout to
| | 00:41 |
remind myself of the response format
structure.
| | 00:43 |
However the search method returns an array
out right instead of an array that's a
| | 00:47 |
member of the contents property.
I assume that a contents property responds
| | 00:51 |
the first time around and it didn't work.
So, then I used the first element of the
| | 00:55 |
reply array and passed it's path property
into the thumbnails property.
| | 00:59 |
I also specify the small size by passing
an object with the size properties set to S.
| | 01:05 |
Finally, I created a callback function to
receive the status, the thumbnail itself,
| | 01:08 |
and the file's metadata.
I was then able to send that thumbnail
| | 01:12 |
back to the browser.
When you handle the responses from
| | 01:15 |
Dropbox, be sure that you have the correct
structure in mind.
| | 01:18 |
Then you can make as many calls as you
need to before sending a response to the browser.
| | 01:21 |
| | Collapse this transcript |
|
|
5. Other App-Driven ServicesSkyDrive| 00:00 |
SkyDrive is a cloud storage service
provided by Microsoft.
| | 00:03 |
It's designed to store all types of files
with an emphasis on photo sharing and
| | 00:08 |
office documents.
SkyDrive is similar to Dropbox in that it
| | 00:12 |
allows you to sync folders across devices.
There are clients available for Windows,
| | 00:17 |
for Mac and for mobile devices.
However one of the things that
| | 00:21 |
differentiates SkyDrive from Dropbox is
the integration with Microsoft Office.
| | 00:25 |
With SkyDrive, you can edit your Office
documents directly in the SkyDrive
| | 00:30 |
interface on the web or you can edit them
in Microsoft Office applications.
| | 00:35 |
To authenticate with the SkyDrive API, you
use OAuth version 2.0.
| | 00:41 |
Like Dropbox, SkyDrive has a file picker
API.
| | 00:46 |
You can use this file picker for your
existing web applications so that you can
| | 00:50 |
offer users the option of picking a file
from their SkyDrive.
| | 00:54 |
SkyDrive also offers a Live Software
Development Kit.
| | 00:58 |
This kit allows you to experiment with
code right on the SkyDrive website.
| | 01:02 |
In addition to the Live Software
Development Kits, there's Software
| | 01:06 |
Development Kits for Windows, Windows
Phone, dot NET, Android and IOS.
| | 01:11 |
SkyDrive is a good choice for when your
cloud storage needs involve Microsoft
| | 01:15 |
Office documents.
You can use SkyDrive's API, to access and
| | 01:19 |
modify documents in your own applications
as well.
| | 01:22 |
| | Collapse this transcript |
| Google Drive| 00:00 |
Google Drive is a popular web a
application for creating and editing
| | 00:04 |
documents in real time.
It also has an API you can use for
| | 00:07 |
creating, accessing and modifying
documents.
| | 00:11 |
It's similar to Dropbox in that there are
clients for Mac, Windows and mobile devices.
| | 00:16 |
There's also a Rest API available.
In addition to the Rest API, it also has a
| | 00:24 |
file picker API.
And like Dropbox, you can view the
| | 00:28 |
contents of your Google Drive online.
To authenticate with the Google Drive API,
| | 00:33 |
OAuth version 2.0 was used.
One of the things that distinguishes
| | 00:40 |
Google Drive from Dropbox is that Google
Drive has a real time API.
| | 00:45 |
This API allows you to interact with
Google Drive as people are making edits to documents.
| | 00:52 |
The real time API makes it possible for
you to write JavaScript that handles these interactions.
| | 00:57 |
Consequently, the real time API is only
available via JavaScript in the browser.
| | 01:02 |
Finally Google Drive has Software
Development Kits for several languages.
| | 01:07 |
Software Development Kits for Java, PHP,
JavaScript, .Net, Python, iOS, Android,
| | 01:15 |
Ruby and Go are all available.
There's also a Software Development Kit
| | 01:19 |
for the real time API.
Google Drive is an excellent choice for
| | 01:23 |
any application focusing on real time
document editing.
| | 01:27 |
Google provides client libraries for a
variety of platforms including one to
| | 01:31 |
handle real time interactions in the
browser.
| | 01:33 |
| | Collapse this transcript |
| Box.com| 00:00 |
Box.com is a cloud storage service
designed to scale up from personal to
| | 00:04 |
corporate use.
It synchronizes documents across devices
| | 00:08 |
with an emphasis on secure transfers and
storage.
| | 00:11 |
It's similar to Dropbox in that it has
applications for both desktop and mobile devices.
| | 00:17 |
And just like Dropbox, you can also view
the contents of your Box account online.
| | 00:21 |
Box.com also has a Rest based API.
You can use this API to create files,
| | 00:27 |
modify them, and delete them.
Box.com uses OAuth 2.0 for authentication.
| | 00:36 |
Box is different from Dropbox in that it
has work spaces where documents can be
| | 00:40 |
edited and versioned.
These work spaces also provide
| | 00:43 |
functionality where users can add comments
and track versions of documents over time.
| | 00:49 |
Additionally, Box has intergrations with
Google Apps, Salesforce and NetSuite.
| | 00:54 |
Box has Software Development Kits
available for IOS, Android, Java, C Sharp,
| | 01:00 |
and Ruby.
Box.com has features that primarily appeal
| | 01:04 |
to larger organizations.
As well as people working on documents in teams.
| | 01:08 |
It has Rest API's available for storing
and modifying documents.
| | 01:13 |
| | Collapse this transcript |
|
|
ConclusionFinding cloud storage services| 00:00 |
In this course, we've scratched the
surface of a few Cloud Storage services.
| | 00:05 |
There're dozens available now and new ones
being released all the time.
| | 00:09 |
How do you choose the right one for your
next project?
| | 00:12 |
Let's consider a few questions.
First, do you need to keep a folder synchronized?
| | 00:16 |
In some cases, you'll want to have a
folder that N users can use on their
| | 00:20 |
operating system.
And then you'll want to interact with
| | 00:23 |
those files programatically.
Dropbox is a good choice for this scenario.
| | 00:27 |
Next, are you going to be delivering these
files to a wide audience.
| | 00:31 |
Many cloud storage services are integrated
with content delivery networks.
| | 00:36 |
These content delivery networks can make
it easy to distribute files widely and quickly.
| | 00:41 |
Another question to consider is, whether
or not you're building the app for private
| | 00:45 |
or public use.
If you're selling an application that's
| | 00:48 |
designed to work directly with synced
folder, an app-based service is going to
| | 00:52 |
be best.
Also consider, if you're going to need
| | 00:55 |
fine grained security controls.
Some services provide access control lists
| | 00:59 |
for this purpose.
Finally, find out whether there's a
| | 01:03 |
software development kit available for
your preferred environment.
| | 01:06 |
You want to be sure that the tools you
need are available before you start programming.
| | 01:10 |
Ask yourself these questions as you look
through Cloud Storage services.
| | 01:13 |
They'll help you decide the best service
to use for your specific project.
| | 01:17 |
| | Collapse this transcript |
|
|
