Subtitles of the Movie

Now, the applications that I showed you previously are fairly complex and they're designed to demonstrate a number of useful aspects of the Facebook interface that you might use in your applications. This is a very different application. It's one that you can download the source code for as soon as you've created an application name. As soon as you've registered an application name with Facebook, you can get this code and it's almost ready to run. But there are a few things you have to do to it and I'll walk you through this process. In this application there are no tabs, there are no, there's no database behind it; it's just a very, very basic application. It says hello and the user name and then it lists the ID numbers of that user's friends. That's all; no names, no nothing else. It just has a call to find out the name of the current user and it has a call that you frequently use in Facebook to get the friends of that user and you get the names. The list can go up to 20. The application won't print more than 20. Most of the time, as a user of Facebook, you don't see these numbers. You see the names of the friends. But the numbers are visible so if I go for example here, I can see the ID number of that person. That is the ID person that that sample app produced in that list. So ID numbers for people on Facebook really are visible to the public but you don't use them. As an application developer, you do use them. So this is how we develop Facebook applications. We are living as developers of Facebook applications inside this area of the window and as I scroll down, you'll see this very large area, as large as it needs to be and then at the bottom we have these links that are at the bottom of every Facebook page and at the very, very bottom we have this bar which has some icons and buttons in it. But the middle part of this here and this is Facebook itself at the moment, this is the Wall, the middle part here is where Facebook and applications functions. We always have these tabs at the top. There may be advertisements over here and there are the links and tabs at the bottom here. But we are responsible for filling this area in the middle, which is normally called the canvas. That's what an application does and you are writing code to fill that area. Now, when you go to a Facebook application, what happens is, let's get rid of this and go back to that sample application. In that sample application what happens, this URL goes to Facebook, Facebook recognizes that it's an application and it calls the applications code that you will write to construct this information to be displayed and then it places it in the window here with ads, with tools at the top, with the links and information at the bottom. So when you go to this URL in Facebook, as part of setting up your application, you will set up a URL but Facebook will call for your application to build this section. And don't worry; I'll walk you through this and I'll walk you through it several times because once you get the hang of it, it's really not hard. Here is a directory on my hard disk where I develop applications. I have several subdirectories here; Dev is for development. I also normally have another directory called Production or Prod, which is where the live versions of applications live and I switch them back and forth as I'm testing them because when you move an application into production and let people use it, you don't want to be testing it at the same time. So within the Developer Folder here, I have the two applications that I've demonstrated to you so far. I have another folder here called Sanitized Dev and Sanitized Dev is a copy of Dev but with some information removed and that's what I will be showing you, usually in this tutorial. If you are setting things up in this way, your Development Folder would be Dev but a Sanitized Dev Folder is a folder that you will normally not be creating. But this enables me to keep my development separate from this. What am I hiding from you? OK, inside this application there are two folders. There's an Images Folder, which contains images for the application if I need it and an FB Folder and the FB Folder contains, it may contain a Notes Folder, which I use. You probably have it if you're using Dreamweaver. It has the application itself, which lives inside this folder and it has client and these files are downloaded from Facebook. This is the set of Facebook's files that are referenced from the application files. In this case of the sample, there's only one file, Index and it requires the Facebook code and it requires two secret keys; the API Key and a Secret Key for your application and this is what I've sanitized. I've removed these so this file will not run because it requires these keys. So this is the structure we're going to be looking at; local files usually in two different folders; one is the folder of files that you download from Facebook and the other is the folder in which your files live. A more complex application might have the FB Folder, the Client Folder, the same files you've downloaded from Facebook but the application for a more complex application has many, many files in it.