用 Eclipse Galileo 开发一个 Facebook 应用程序

红薯 发布于 2010/01/26 19:14
阅读 2K+
收藏 11

本文适合那些想学习如何使用 Galileo 的成熟的 Web Tools Platform 版本来开发、调试和部署一个餐馆搜索 Facebook 应用程序的 Eclipse 开发人员。在这个过程中,我们将充分利用 Facebook Application API 和 Facebook Connect API 的各个方面。

在开始开发 Facebook SimpleRestaurantSearch 应用程序前,需要下载并安装 Eclipse 的 Galileo 包。本章节将介绍如何设置 Galileo。

下载 Galileo

Galileo 包代表了 Eclipse 的下一个增量发布版,因而,也就意味着要全新安装 Eclipse 平台。和所有 Eclipse 发布版一样,您可以根据自己的开发需求从大量包中进行选择。

下载 Eclipse IDE for Java™ EE Developers 版本,因为它包含了开发和部署一个 Facebook 应用程序所需的所有东西。选择适合您的操作系统的版本,选中一个适当的镜像并下载它。这个文件很大 — 将近 190 MB,下载速度与您的平台有关 — 所以要耐心。

Eclipse Web 站点提供了一个对照表,如图 1 所示。


图 1. 包对照表
Eclipse Web 站点对照表

下载完成后,将这个包解压缩到 Eclipse 将被安装到的位置,然后双击 Eclipse 图标,运行它。选择一个工作区, Eclipse 将带您进入欢迎页面。从中选择 Workbench 图标(图 2 所示的欢迎屏最右侧的箭头)。


图 2. Eclipse 欢迎屏幕
显示 Eclipse 欢迎屏幕的屏幕快照

设置 Eclipse 中的 Tomcat

Eclipse Galileo 允许集成各种不同的服务器,从而可以开发、调试和部署任何 Web 应用程序。对于当前的这个 Facebook SimpleRestaurantSearch 应用程序,我们将使用 Tomcat 作为应用服务器(参见 参 考资料)。将 Tomcat 下载到一个本地文件夹并将它解压缩。

切换到 Eclipse 并打开服务器视图(参见图 3)。


图 3. Eclipse 中的服务器视图
 Eclipse 中的服务器视图

右键单击这个服务器视图并选择 New > Server menu 选项(参见图 4)。


图 4. 新建服务器的菜单选项
新建服务器的菜单选项

通过选择适当的选项定义一个新的服务器。选择 Apache 类别下的 Tomcat V6 Server 选项。可以根据应用程序的需要给这个服务器起一个有意义的名字,比如 EclipseBook-Host,然后单击 Next(参见图 5)。


图 5. 定义一个新的服务器
图 5 显示了如何定义一个新的服务器

在下一个向导窗口中,键入 Tomcat 安装目录,选择所需的 JRE,然后单击 Finish(参见图 6)。


图 6. 设置安装目录
显示如何设置安装目录的屏幕快照

在正确配置 Tomcat 后,此服务器就会出现在服务器视图中。在默认状态下,服务器端口被设置为 8080(参见图 7)。


图 7. 显示在服务器视图中的服务器
图 7 显示了此服务器显示在服务器视图中

接下来,我们将建立 Dynamic Web Project 以便能够从 Eclipse 内处理应用程序的 Web 界面。

建立 Dynamic Web Project

单击 Project Explorer,然后右键单击并选择 Dynamic Web Project(参见图 8)。


图 8. 建立 Dynamic Web Project
建立 Dynamic Web Project

为这个项目起个名字,并将目标运行时设为这个 Tomcat Server 名称。还记得吧,我们之前已经将 Tomcat Server 命名为 EclipseBook-Host。单击 Finish 完成这个 Web 项目的创建,这个项目被配置为使用 Tomcat 服务器及默认的 Web 配置(参见图 9)。


图 9. 创建 Web 项目
图 9 显示了如何创建 Web 项目

下载并设置 Facebook Java API

截止到 2008 年 5 月,Facebook 已经终止了对其官方 Java 客户机的任何支持,那些热衷于用 Java 技术开发 Facebook 应用程序的用户被建议使用各种各样的第三方客户机。在 Google 上就可以找到一些常用的 Facebook Java API (参见 参 考资料)。因此,这个项目的目的现在变成了维护、支持和扩展这个被放弃的代码库,以为 Java 开发人员提供一个高质量的、最新版本的 Facebook API 客户机(参见图 10)


图 10. Facebook Java API
图 10 显示了 Facebook Java API

将最新的 Java Facebook API (V3.0.0)下载到本地文件夹并解压缩这些文件(参见图 11)。


图 11. 下载最新的 Facebook Java API
下载最新的 Facebook Java API

Facebook Java API 包含所有与 Facebook Application API 相关的库以及其他依赖 JAR(参见图 12)。我们这个示例应用程序的源代码可以在 下 载 部分找到。请注意,这些 JAR 文件并没有包含在该 ZIP 文件中,因为在这里是通过 Facebook Java API 下载的这些 JAR 文件。


图 12. 与 Facebook Application API 相关的库及其他依赖 JAR
图 12 显示了与 Facebook Application API 相关的库及其他依赖 JAR

将所有 Facebook Java Client JAR 复制到 SimpleRestaurantSearch 应用程序的 lib 文件夹中。这就使得此项目现在就可以使用 Facebook API 了(参见图 13)。


图 13.将所有 Facebook Java Client JAR 复制到 lib 文件夹中
将所有 Facebook Java Client JAR 复制到 lib 文件夹中

创建一个 Facebook 应用程序

几乎每个人都接触过 Facebook,这其中包括 Web 开发人员、业务经理和社交狂热者。在 Facebook 平台上创建利用 Facebook Application API 的应用程序会为所有用户打开一个可视窗口,无论是想要宣传产品或服务的用户,还是想要与朋友共享信息的用户。

要创建一个 Facebook 应用程序,首先需要获得一个 Facebook Platform API 键。请按照下面的步骤用 Facebook Developer 应用程序创建一个应用程序。

进入 Get Started 站点获取设置这个应用程序所需步骤的概览(参见 参 考资料)。单击 Helpful Link 中的 Developer App 进入您的用户概要文件并添加这个 Facebook Developer 应用程序。如果您还没有登录,那么会有一个登录屏提醒您登录。如果已经登录,那么这个应用程序会要求提供授权并会将这个应用程序添加到您的概要文件中(参 见图 14)。


图 14. Get Started
图 14 显示了 Get Started 站点

这个开发人员的主页包含新闻、更新及关于 Facebook Platform API 的文章。

在 Application Name 字段中输入应用程序的名称(参见图 15)。如果已经为应用程序创建了图标和徽标,那么可同时在这个屏幕中输入这些信息。接受服务条款,然后单击 Save Changes


图 15. 为应用程序命名
命名应用程序

在图 16 所示的下一个屏幕中显示了一些重要信息。记下 Application ID、API Key 及 Secret Key 对于后面应用程序的开发非常重要。


图 16. 显示了 Application ID、API Key 和 Secret Key
显示了 Application ID、API Key 和 Secret Key

在所需信息输入完毕并保存了这个新应用程序后,一个 RestaurantSearch 应用程序信息的概览就会立即显示出来(参见图 17)。


图 17. 应用程序的概览
应用程序的概览

至此,我们已经用 Facebook 创建并注册了一个名为 SimpleRestaurantSearch 的应用程序。下一步我们将创建一个简单的 servlet 并添加用来验证 Facebook API 键的功能。在 Project Explorer 中,进入 SimpleRestaurantSearch 项目,然后在 src 文件夹中创建一个 servlet。将这个 servlet 命名为 RestaurantSearch,将包命名为 com.devworks.facebook。 单击 Next 输入 servlet 初始化参数(参见图 18)。


图 18. 创建一个简单的 servlet
创建一个简单的 servlet

在图 19 显示的下一个屏幕中,输入初始化参数 API_KEY 以及在 Facebook 应用程序创建的初始步骤中作为 API 键的值。


图 19. 输入初始化参数 API_KEY
图 19 显示输入初始化参数 API_KEY

在下一个屏幕上,输入初始化参数 SECRET_KEY 以及在 Facebook 应用程序创建的初始步骤中作为 secret 键的值。

现在,就可以使用 API_KEYSECRET_KEY 来验证这个 Facebook 应用程序了,如果登录成功,就会输出一个简单的 Hello World 消息。

清单 1 是我们的 RestaurantSearch servlet 的 doGet 方法的关键片段。


清单 1. doGet 方法

				
01 protected void doGet(HttpServletRequest request,
02 HttpServletResponse response) throws ServletException,IOException {
03
04 String apiKey = getServletConfig().getInitParameter("API_KEY");
05 String secretKey = getServletConfig().getInitParameter("SECRET_KEY");
06 HttpSession session = request.getSession();
07 String sessionKey = (String) session
08 .getAttribute("restSearchAppSession");
09 String authToken = request.getParameter("auth_token");
10
11 FacebookJsonRestClient client = null;
12
13 if (sessionKey != null) {
14 client = new FacebookJsonRestClient(apiKey,
15 secretKey,
16 sessionKey);
17
18 } else if (authToken != null) {
19 client = new FacebookJsonRestClient(apiKey, secretKey);
20 client.setIsDesktop(false);
21 try {
22 sessionKey = client.auth_getSession(authToken);
23 session.setAttribute("restSearchAppSession", sessionKey);
24 } catch (Exception e) {
25 e.printStackTrace();
26 }
27 } else {
28 response.sendRedirect("http://www.facebook.com/login.php?api_key="+apiKey);
29 return;
30 }
31 response.getWriter().println("HelloWorld");
32 }

 

第 4 行和第 5 行代码从 servlet 配置中获得初始参数,比如 API_KEYSECRET_KEY

如果会话已存在,第 7 行代码将从会话中获取会话键,否则它将为 null。

第 9 行代码从请求参数中获取验证 token。如果会话没有被验证,那么它将是 null。

如果 sessionKey 存在,第 14 行代码会创建一个 FacebookJsonRestClient 并会需要 apiKeysecretKeysessionKey 作为构造函数参数(参见图 20)。


图 20. 创建一个 FacebookJsonRestClient
创建一个 FacebookJsonRestClient

如果 sessionKey 不存在,那么会创建一个仅具有 apiKeysecretKeyFacebookJsonRestClient。在第 20 行上,请确保设置了正确的客户机模式。

将应用程序设置成正确的模式,这一点很重要。如果它被设置为 “desktop mode is false”,那么当您传递一个会话 secret 时,Facebook 服务器就会理解。

借助验证 token,在第 22 和 23 行创建 sessionKey 并将它设置为会话属性 restSearchAppSession

倘若没有 sessionKey 和验证 token,就意味着用户需要登录到 Facebook 并获得一个新的会话和验证键。因而,第 28 行就重新指向到 Facebook 登录。

最后,在输出书写器上打印 Hello World ,如第 31 行代码所示。

完成 RestaurantSearch 应用程序后,就可以启动 Tomcat 服务器了。回忆一下,在创建 SimpleRestaurantSearch 应用程序的初始步骤中,我们已经将这个项目与 Tomcat 服务器 EclipseBook-Host 关联起来。从服务器的视图中,启动 Tomcat。这将在 Eclipse 中启动 Tomcat 服务器并将部署这个应用程序(参见图 21)。


图 21. 在 Eclipse 中启动 Tomcat 服务器并部署这个应用程序
在 Eclipse 中启动 Tomcat 服务器并部署这个应用程序

启运 Tomcat 服务器后,浏览到 http://localhost:8080/SimpleRestaurantSearch/RestaurantSearch。它会将您带到一个 Facebook 开发人员页面,这个页面会通知您该页面尚在建设中并提示您应用程序 Callback URL 尚未设置。单击这个应用程序的设置编辑器(参见图 22)。


图 22. 应用程序设置编辑器
应用程序设置编辑器

在这个应用程序设置编辑器中,进入 Canvas 选项卡并输入 Canvas 页面 URL(http://apps.facebook.com/devrestaurantsearch)、Canvas Callback URL(http://localhost:8080/SimpleRestaurantSearch/RestaurantSearch)和 Bookmark URL(http://apps.facebook.com/devrestaurantsearch)。保存这些设置(参见图 23)。


图 23. 应用程序设置编辑器
应用程序设置编辑器

保存新设置后,会出现一个 Application Overview 页面(参见图 24)。


图 24. Application Overview
图 24 显示了 Application Overview 页面

Eclipse 真正的优势在于 Tomcat 的集成及热部署功能。您现在就可以重启此服务器,看看保存的应用程序属性是不是生效了(参见图 25)。


图 25. 重启服务器
重启服务器

当此服务器在 Eclipse Galileo 中重启后,RestaurantSearch servlet 将把您重新引向这个应用程序的登录页面(http://www.facebook.com/login.php?api_key=< API_KEY>)。在输入了 Facebook e-mail ID 和密码后,这个 servlet 将会写出响应。

通过 Facebook 应用程序屏幕,我们知道 API_KEY 是用来让您登录到正确的应用程序的。在本例中,就是 SimpleRestaurantSearch(参见图 26)。


图 26. 应用程序登录
应用程序登录

最后,验证 Facebook 应用程序,sessionKeyauthKey 一旦生成,屏幕上就会显示 Hello World(参见图 27)。


图 27. 显示 Hello World
显示 Hello World

从 Facebook 登出并尝试在 http://www.facebook.com/apps/application.php?id=144078916555 上访问此应用程序。Facebook 会显示应用程序信息,通过登录就可以访问这些信息(参见图 28)。


图 28. 登录页面
登录页面

在接下来的步骤里,我们将使用 Google Search API 并将它集成到一个简单的 JSP。

将 Google Search API 集成到这个 Facebook 应用程序

Google Ajax Search API 让您能够用 JavaScript 将 Google Search 放入您自己的 Web 页面。您可以嵌入一个简单的动态搜索框并在您自己的 Web 页面内显示搜索结果或以独特的编程方式使用搜索结果。使用此 API 不需要键。是否在您的应用程序/站点内使用键是完全可选的。不过,使用键会非常有帮助。

进入到 http://code.google.com/apis/ajaxsearch/signup.html 并接受条款和条件。单击 Generate API Key(参见图 29)。


图 29. 生成这个 API 键
生成这个 API 键

Google 会生成 API 键并显示相应的 URL。此 Web 页还会提供一些示例以供参考(参见 图 30)。


图 30. 由 Google 生成的 API 键
图 30 显示了由 Google 生成的 API 键

将上述 Google Search 所提供的示例代码复制到 WebContent 文件夹内的 RestaurantSearch.jsp。保存此 JSP 并确保在 SimpleRestaurantSearch 内将代码要实现的功能从写出响应 Hello World 更改为将请求分派到 RestaurantSearch.jsp。

将代码从 response.getWriter().println("Hello World"); 更改为 request.getRequestDispatcher("RestaurantSearch.jsp").forward(request,response);

此 JSP 一旦保存,整个项目就会自动重新部署到 Tomcat 服务器。在之前的步骤中,我们已经设置了 Canvas URL(http://apps.facebook.com/devrestaurantsearch)和 Canvas Callback URL(http://localhost:8080/SimpleRestaurantSearch/RestaurantSearch)(参见 图 31)。


图 31. Canvas URL 和 Canvas Callback URL 的设置
Canvas URL 和 Canvas Callback URL 的设置

若访问这个 Canvas URL,成功登录后,RestaurantSearch.jsp 就会启动 RestaurantSearch 应用程序(参见 图 32)。


图 32. 启动 RestaurantSearch 应用程序
启动 RestaurantSearch 应用程序

应用程序书签位于此应用程序工具栏的左下角。您可以输入一个搜索字符串进行一次餐馆搜索(参见图 33)。


图 33. 应用程序工具栏内的应用程序书签
图 33 显示了应用程序工具栏内的应用程序书签

更改 Google Maps 内的默认位置并在 RestaurantSearch.jsp 内将默认地图视图设置为 NORMAL View(参见清单 2)。


清单 2. 更改 Google Maps 内的默认位置

				
// change the default location in the Google Maps
map.setCenter(new google.maps.LatLng(37.773,-122.417),13);

// set the Map to Normal view
map.setMapType(G_NORMAL_MAP);
map.removeMapType(G_HYBRID_MAP);
map.addMapType(G_NORMAL_MAP);

 

保存这个 JSP 来热部署和重新测试它,以确保位置和地图类型均已更改(参见图 34)。我们现在选择了 San Francisco 作为默认搜索位置。此应用程序在 Facebook 内运行后,当用户在搜索某一类餐馆时,他就可以添加此位置的 ZIP 编码,应用程序将会返回该位置内的匹配的餐馆搜索结果。


图 34. 重新部署和测试此应用程序
显示重新部署和测试此应用程序的屏幕快照

现在,通过导航到您的 Facebook 概要文件并在位于右上角的搜索框内搜索 SimpleRestaurantSearch 应用程序,还可以进行进一步的测试(参见图 35)。


图 35. 从您的 Facebook 概要文件搜索 SimpleRestaurantSearch 应用程序
从您的 Facebook 概要文件搜索                      SimpleRestaurantSearch 应用程序

应用程序搜索将会把您带到 SimpleRestaurantSearch 应用程序(参见图 36)。


图 36. 应用程序搜索把您带到 SimpleRestaurantSearch 应用程序
应用程序搜索把您带到 SimpleRestaurantSearch 应用程序

集成 Facebook Connect API

Facebook Connect 允许您为您自己的非 Facebook 应用程序使用 Facebook。您可以在您的站点上使用 Facebook connect API 并让站点的查看者得以在其各自的概要文件上共享内容。

您将需要创建一个名为 xd_receiver.htm 的跨域通信通道文件并将其放在一个与这个回调 URL 相关的目录内。您所创建的这个 xd_receiver.htm 文件所位于的目录应是您为 Connect Web 页面提供服务所在的目录(在我们的示例中为 WebContent 文件夹)。参见图 37。


图 37. 创建并保存一个跨域通信通道
创建并保存一个跨域通信通道

清单 3 所示的是一个跨域通道文件的例子。您可以复制如下的内容并在 WebContent 文件夹内创建 xd_receiver.htm 文件。如果没有一个跨域的通道文件,Facebook 将不能直接与我们的应用服务器通信(参见清单 3)。


清单 3. 一个跨域通道文件

				

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">






 

在服务器上开始使用 Facebook Connect 的最迅速的方式是使用 JavaScript API 库。要连接到这个库,必须满足的两个基本条件是设置正确的文档类型,以及在 Web 页面末尾临近 标记的位置加载 JavaScript 库。这个代码更改可以在 RestuarantSearch.jsp 文件内完成(参见清单 4)。


清单 4. 在服务器上使用 Facebook Connect

				

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

xmlns:fb="http://www.facebook.com/2008/fbml">



 

清单 5 所示的这个简单例子展示了如何让一个用户登录到 Facebook Connect 应用程序并显示该用户的 Facebook 名称和概要文件图片。


清单 5. 展示如何让一个用户登录到 Facebook Connect 应用程序的简单例子

				





 

要在您自己的服务器上测试它,需要替换清单 5 中的 API 键,如图 38 所示。


图 38. 替换 API 键
替换 API 键

此 JSP 一旦保存,它就会被热部署,而您也就可以启动 RestaurantSearch 应用程序了。请注意,在搜索结果的底部可以看到一个按钮(参见图 39)。


图 39. 搜索结果底部的按钮
搜索结果底部的按钮

如果您已经登录到了这个 Facebook 会话,单击 Facebook Connect 会将您带入到您的概要文件。这里的理念是 SimpleRestaurantSearch 用户将会在您自己的概要文件内共享他所喜爱的餐馆和相关反馈。

这个例子展示了 Facebook Connect API 的真正实力。餐馆应用程序启动后,连接到 Facebook Connect 并在您的概要文件上推荐餐馆。这些餐馆推荐可以供您的其他朋友查看。

单击 Recommendation 按钮将会打开一个小的向导,该向导可接受评论并与朋友共享(参见图 40)。


图 40. 打开一个向导接受评论
打开一个向导接受评论

要测试这个 Facebook 应用程序,可以进入此应用程序开发人员概要文件并允许它被他人查看(参见图 41)。


图 41. 共享您的信息
共享您的信息

结束语

Eclipse Galileo 已经包括了若干新的和改进了的特性,您可以利用 Galileo 开发出色的应用程序。本文使用的是 Eclipse Galileo J2EE 版本,该版本具有供 Java 开发人员用来创建 Java EE 和 Web 应用程序的工具,包括一个 Java IDE、面向 Java EE、JPA、JSF、Mylyn 的工具等。

借助 Galileo J2EE 版本,您导入了 Facebook Java 库、将 Tomcat 配置为一个内部服务器、添加了 Facebook 验证功能、添加了 Google Search API,以及向 SimpleRestaurantSearch 应用程序添加了 Facebook Connect API。

Tomcat 的集成则让您得以开发、调试、测试和部署全部 Facebook 应用程序代码。您可以充分利用 Galileo 发布版来开发一个出色的 Facebook 应用程序。有了 Facebook ID、Facebook Developer Key 和 Google Search API,您就可以使用随附的代码来测试这个 RestaurantSearch 应用程序。

下载本文示例代码

加载中
返回顶部
顶部