Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
How to Set Up a Facebook Application8:33 with Jason Seifer
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