Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Once we've signed up to be a Facebook developer and created a Facebook application, we can begin coding our own application. This video walks through setting up the Facebook application and starting our own application using Express and CoffeeScript.
[?]
0:00
Now, that we have our application set up in Facebook, we can start coding.
0:05
Pay attention to the app ID and app secret parameters; we'll need those very soon.
0:10
Now, open up a terminal. We'll create a directory to hold our application. [Typing]
0:15
Now, we'll create some files to contain our application.
0:27
We're going to be using Node.js and express for this example.
0:32
Node.js requires a package.json file, so we'll create that.
0:37
We're going to house our application in a file named app.coffee,
0:45
and this is going to be an express application.
0:53
Finally, we don't want to have our configuration files
0:56
in the same application file as our main application,
1:00
so we'll put that in it's own config file. [Typing]
1:04
Now, we can get to editing this.
1:11
We're going to be using Sublime Text to edit. [Typing]
1:13
Here's our application directory right now.
1:18
Let's open up the package.json file and tell it what we need to install.
1:21
[Typing]
1:26
We're going to be writing the application in CoffeeScript,
1:39
so we use that as a dependency. [Typing]
1:42
We'll also be using ExpressJS, which is a small framework for serving applications in Node.js,
1:48
so we'll add that as a dependency as well. [Typing]
1:56
I prefer eco templates when creating these applications.
2:02
We'll add eco as well. [Typing]
2:06
And finally, we'll be using a library called Facebook JS to interface with the application.
2:10
[Typing]
2:16
Now that we've set up the package, we can install these with Node.js and npm.
2:20
So type "npm install." Npm will go out and create local copies of these libraries,
2:26
and it will place them inside of a directory in our application called Node modules.
2:41
We can see a Node modules directory has been created.
2:49
If we were using version control, such as Git,
2:54
we would want to ignore the Node modules directory.
2:57
Now that we have our modules installed, we can get started creating the application.
3:00
But first, let's create our configuration.
3:05
We'll do that inside of config.coffee.
3:08
Let's open that up in Sublime Text. [Typing]
3:12
When we import our config.coffee file inside of our main application, we have to export it.
3:16
We do that by doing the following. [Typing]
3:22
And we'll give it a URL. [Typing]
3:28
This should match what we set inside of our Facebook settings.
3:36
Now, let's also set our Facebook name space.
3:40
I'm going to call it FB for easy access.
3:45
This is where we grab the application ID and secret from Facebook. [Typing]
3:50
I'm going to copy it and paste it, and save the file.
3:59
Now that we've created our configuration, we can start coding our application,
4:10
so let's open up our application.coffee file.
4:15
The first thing we need to do is require these libraries. [Typing]
4:20
When you're coding something in Node.js,
4:30
you have to assign it to variables after you require it if you want to access them later,
4:32
so let's require our libraries, [Typing]
4:39
and finally, let's assign our configuration to a global variable called globals. [Typing]
5:01
Save the file. At this point, I've noticed that I've misspelled coffee,
5:16
so I'm going to rename it. [Typing]
5:21
Now, let's create our server. [Typing]
5:27
We do this using the create server directive. [Typing]
5:35
and there are certain middlewares that we are going to need to use when working with Facebook.
5:43
We're going to want to store different tokens inside of the session,
5:49
so we need to use express.session. [Typing]
5:53
We can give it any kind of secret parameter we want.
6:02
Express.session has a couple of dependencies that we need to include as well.
6:06
This is the body and cookieParsers, so let's include those too. [Typing]
6:10
Now, we'll tell our application that we want to use our eco templates.
6:27
You do this by using the register command. [Typing]
6:33
And we register the eco extension with the eco module we imported.
6:39
Finally, we need to create some views as well,
6:45
and we'll put those inside of the views directory. [Typing]
6:48
Here we're telling express to look for the views inside of the views directory below the current application.
7:03
Now, let's make sure that we render something on the home page. [Typing]
7:13
Finally, we need to tell our server where to listen,
7:27
and we're going to listen on Port 3000. [Typing]
7:31
Go ahead and save the file.
7:36
Open up your terminal and type "supervisor," and give it the name of our application file.
7:39
In this case, it's app.coffee. [Typing]
7:45
We can see that we have an error here,
7:49
and it can't find the module faceboo.js. Let's go ahead and fix that typo. [Typing]
7:52
Now, let's run our program again using the supervisor command.
8:03
So type "supervisor," and give it the name app.coffee.
8:07
Now, we can see it's running, so let's go ahead and load it up inside of our web browser.
8:13
We can see we failed to locate a view; that's because it's trying to render.
8:18
Instead, let's send the text "Hello, world,"
8:23
and here we can see our application is working.
8:26
In the next video, we'll set up Facebook authentication.
8:29
You need to sign up for Treehouse in order to download course files.
Sign up