<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=299788&amp;fmt=gif">

Developing a Facebook application in less than a six pack - Part One

Software Development, Spring, Software Solutions

By Joel Brinkman

In a few short steps, we're going to create a minimally viable Facebook Canvas application using Spring Tool Suite (STS) and Spring Roo.

Do some stuff on Facebook

Sign up to be a Facebook developer:

  1. Go to http://developers.facebook.com/
  2. Click Register Now
  3. Once signed up as a Facebook developer, click on the Apps link on the top navigation bar and then click Create New App.
  4. On the dialog that pops up, simply enter a name for your application and click Continue. Let's name our application FriendTrend.

enterprise application development
On the page that follows, you have an opportunity to indicate the type of integration you intend to have with Facebook. For our pointless application, we should select App on Facebook. We do this by clicking the Add Platform button and hoping the resulting dialog prompts us for App on Facebook. If it does, click it. Now, we need to let Facebook know how it may forward users to our application. Since we will be running this application locally (for now), we should configure our canvas URL accordingly.
enterprise application development
This page also contains some important details we will need in our application. Specifically, note the app id and app secret - we will need these values soon.

Do some stuff on your computer

Open STS and create a new project. When presented the New Project Dialog, select Spring Roo Project. We will name our project "friendtrend" and indicate our top-level package is com.isostech.friendtrend, click next and then finish.
enterprise application development
Once finished, we should have a project in STS and an open Roo shell in the IDE. To get started, let's have Roo configure both logging and Spring MVC as this will be a web application, after all. On the Roo shell, run the following commands:
[shell]
web mvc setup
logging setup --level DEBUG
jpa setup --database HYPERSONIC_IN_MEMORY --provider HIBERNATE
[/shell]
To get our project up and running, we will need to add a few dependencies to our application. Since Roo uses Maven by default, we will open the pom.xml and in the dependencies section, add the following two entries:
[xml]
&amp;amp;lt;dependency&amp;amp;gt;
&amp;amp;lt;groupId&amp;amp;gt;com.restfb&amp;amp;lt;/groupId&amp;amp;gt;
&amp;amp;lt;artifactId&amp;amp;gt;restfb&amp;amp;lt;/artifactId&amp;amp;gt;
&amp;amp;lt;version&amp;amp;gt;1.6.12&amp;amp;lt;/version&amp;amp;gt;
&amp;amp;lt;/dependency&amp;amp;gt;
&amp;amp;lt;dependency&amp;amp;gt;
&amp;amp;lt;groupId&amp;amp;gt;com.google.code.gson&amp;amp;lt;/groupId&amp;amp;gt;
&amp;amp;lt;artifactId&amp;amp;gt;gson&amp;amp;lt;/artifactId&amp;amp;gt;
&amp;amp;lt;version&amp;amp;gt;1.6&amp;amp;lt;/version&amp;amp;gt;
&amp;amp;lt;/dependency&amp;amp;gt;
[/xml]
Since Gson is not available in the central Maven repository, we must also add the following in the repositories section of the pom.xml
[xml]
&amp;amp;lt;repository&amp;amp;gt;
&amp;amp;lt;id&amp;amp;gt;gson&amp;amp;lt;/id&amp;amp;gt;
&amp;amp;lt;url&amp;amp;gt;http://google-gson.googlecode.com/svn/mavenrepo&amp;amp;lt;/url&amp;amp;gt;
&amp;amp;lt;snapshots&amp;amp;gt;
&amp;amp;lt;enabled&amp;amp;gt;true&amp;amp;lt;/enabled&amp;amp;gt;
&amp;amp;lt;/snapshots&amp;amp;gt;
&amp;amp;lt;releases&amp;amp;gt;
&amp;amp;lt;enabled&amp;amp;gt;true&amp;amp;lt;/enabled&amp;amp;gt;
&amp;amp;lt;/releases&amp;amp;gt;
&amp;amp;lt;/repository&amp;amp;gt;
[/xml]

Handling user requests

When a user visits our application while logged into Facebook, the browser will perform a post at the canvas URL. Our application needs to handle this request. In typical Spring fashion, we will do this with a Spring MVC Controller. In the Roo shell, issue the following command:
[shell]
web mvc controller --class com.isostech.friendtrend.web.FriendTrendController --preferredMapping /trend
[/shell]
To start with, let's just push the user off to a stub view when they visit our application. Modify the controller like this (note we may remove some of the extra junk added by Roo).
[java]
package com.isostech.friendtrend.web;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
@RequestMapping(&amp;amp;quot;/trend/**&amp;amp;quot;)
@Controller
public class FriendTrendController {
@RequestMapping(method = RequestMethod.POST)
public ModelAndView post() {
return new ModelAndView(&amp;amp;quot;trend/index&amp;amp;quot;);
}
@RequestMapping
public String index() {
return &amp;amp;quot;trend/index&amp;amp;quot;;
}
}
[/java]

Add SSL support in Tomcat

If you've already setup a local keystore, you may get away with skipping this step. If you don't have a local keystore, don't even think about skipping it - thankfully, it's pretty easy. This can be created using the keystore utility shipped with your JDK. Run the tool on a command shell as follows.
[shell]
keytool -genkey -alias tomcat -keyalg RSA
[/shell]
When the keytool starts, you will be prompted for additional information with which your local certificate is generated. For example:
[shell]
keytool -genkey -alias tomcat -keyalg RSA
Enter keystore password: password
Re-enter new password: password
What is your first and last name?
[Unknown]: moo monkey
What is the name of your organizational unit?
[Unknown]: foo
What is the name of your organization?
[Unknown]: momma
What is the name of your City or Locality?
[Unknown]: phoenix
What is the name of your State or Province?
[Unknown]: az
What is the two-letter country code for this unit?
[Unknown]: us
Is CN=moo monkey, OU=foo, O=momma, L=phoenix, ST=az, C=us correct?
[no]: yes
[/shell]
With the keystore file created in the default location, make sure your Maven build is configured such that Tomcat may start supporting http and https. Ensure your Tomcat Maven plugin is configured in your pom.xml like this:
[xml]
&amp;amp;lt;plugin&amp;amp;gt;
&amp;amp;lt;groupId&amp;amp;gt;org.codehaus.mojo&amp;amp;lt;/groupId&amp;amp;gt;
&amp;amp;lt;artifactId&amp;amp;gt;tomcat-maven-plugin&amp;amp;lt;/artifactId&amp;amp;gt;
&amp;amp;lt;version&amp;amp;gt;1.1&amp;amp;lt;/version&amp;amp;gt;
&amp;amp;lt;configuration&amp;amp;gt;
&amp;amp;lt;httpsPort&amp;amp;gt;8443&amp;amp;lt;/httpsPort&amp;amp;gt;
&amp;amp;lt;keystorePass&amp;amp;gt;password&amp;amp;lt;/keystorePass&amp;amp;gt;
&amp;amp;lt;/configuration&amp;amp;gt;
&amp;amp;lt;/plugin&amp;amp;gt;
[/xml]
It's time to have maven run the goal: tomcat:run on our project. This should start our application on our local machine inside of Tomcat. Start it up and let's see if we can access our application from a facebook url. Open a browser and enter the URL:
http://apps.facebook.com/appId
where appId is the value noted when you created the application on the Facebook developer site.
You might be presented with an error about the response being insecure or an error about the certificate. If you do, this is likely due to the use of a self-signed certificate for which an exception needs to be added to your browser. If there is no option to add this exception when visiting the URL above, open a new tab or window and visit the app URL directly: https://localhost:8443/friendtrend/trend/
You should see the error and be given the option to add the key (verbiage varies by browser).
Visit the app URL again and and you should see a page like this.
enterprise application development
You now have a rather uninteresting minimally viable Facebook app.
Next, we will use the Facebook API to do something interesting with the user visiting your application. In part two, it gets personal.

TAGS: Software Development, Spring, Software Solutions

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Subscribe to Our Newsletter

Recent Blog Posts