在 Rails 上使用 Flickr

阅读更多

在 Rails 上使用 Flickr

Putting Flickr on Rails

http://www.netbeans.org/kb/60/flickr-on-rails.html

 

在 Rails 上使用 Flickr

撰稿人 ： Brian Leonard

2007 年 6 月 [ 修订号： V6.0-3]

 

本教程介绍如何创建用于搜索 Flickr 数据库的 Ruby on Rails 应用程序。本教程用于支持 Ruby 的 NetBeans IDE 6.0 (M10) 。

注意 ： 本教程要求直接连接 Internet ， 如果使用代理 ， 则无法正常工作。

内容

-	教程要求
-	获取 Flickr API 密钥
-	安装 Flickr 库
-	创建 Ruby on Rails 项目
-	定义搜索方法
-	运行应用程序
-	改进用户体验

教程要求

本教程要求拥有以下资源：

l          标准开发包 (JDK) 6.0 版

l          支持 Ruby 的 NetBeans IDE 6.0 (M10)

获取 Flickr API 密钥

您必须拥有 API 密钥才能使用 Flickr API 。

1. 使用浏览器访问 http://www.flickr.com/services/api/misc.api_keys.html。
2. 单击 立即在线申请密钥。
3. 遵循获取 Flickr 密钥的步骤。
4. 复制 Flickr 生成的 API 密钥并保存在文本文件中或者其他方便的位置。

安装 Flickr 库

1. 从 Tools 菜单中选择 Ruby Gems。
2. 在Ruby Gems对话框中，单击 New Gems 选项卡。
3. 在 Search 字段中键入flickr，然后按Enter。
4. 选择 flickr，然后单击安装。在Gem Installation Settings对话框中单击OK。
5. 确保获得安装成功的消息，然后关闭该对话框。

创建 Ruby on Rails 项目

在此步骤中 ， 您将了解如何创建 Ruby on Rails 应用程序以及一个用于搜索 Flickr 数据库的页面。

1. 选择File > New Project。
2. 在 Categories 字段中选择Ruby，在 Projects 字段中选择Ruby on Rails Application，然后单击 Next。

3.       在 Project Name 字段中键入 Flickr ， 然后单击 Finish 。

在 Flickr 库中 ， 应该将 Flickr API 密钥直接添加到脚本中。您可以通过下面的步骤中介绍的方法使用 Flickr 库，而不必直接对其进行操作。

4.       在 Projects 窗口中 ， 展开 Configuration 节点， 然后打开 environment.rb 。

5.       在 environment.rb 文件底部添加下面的代码。确保在 MY_KEY 变量中输入您的 Flicker API 密钥 。 访问 Flickr API 时需要使用该密钥。

代码示例 1 ：添加 Flickr API 密钥

require 'rubygems' require 'flickr' MY_KEY='Enter your Flicker API Key' class Flickr alias old_initialize initialize def initialize(api_key=MY_KEY, email=nil, password=nil) puts "new_initialize " + MY_KEY old_initialize(api_key, email, password) @host="http://api.flickr.com" @activity_file='flickr_activity_cache.xml' end end

 

6.       展开 Views 节点 ， 右键单击 layouts 节点 ， 然后选择 New -> RHTML 文件 。 将文件命名为 application ， 然后单击 Finish 。

7.       在 application.rhtml 中添加下面的 标记和 <% =yield %> 标记 （ 粗体 显示的部分 ） ：

代码示例 2 ：用于 application.rhtml 的代码

<%= javascript_include_tag :defaults %> <%= stylesheet_link_tag 'flickr' %> <%= yield %>

 

1. 展开Public节点，右键单击样式表，选择New > Other。在New File对话框中，将 Categories 设置为Other，将文件类型设置为Empty File。单击 Next。
2. 将文件命名为 flickr.css，然后单击 Finish。

10.   为 flickr.css 添加下面的样式：

代码示例 3 ：样式代码

body { background-color: #888; font-size:11px; margin:25px; } form { margin: 0; margin-bottom:10px; background-color:rgb(222,231,236); border:5px solid #333; padding:25px; }   fieldset { border:none; }   #spinner {     float:right;     margin:10px; } #photos img { border:1px solid #000; width:75px; height:75px; margin:5px; }

 

1. 右键单击Controllers节点，然后选择Generate。在Rails Generator对话框的Name字段中键入flickr，在Views字段中键入index，然后单击OK。
2. 展开 Views>flickr，然后打开 index.rhtml。

13.   使用下面的代码替换 index.rhtml 中的现有代码 ：

代码示例 4 ：用于 index.rhtml 的代码

<%= form_remote_tag :url => {:action => 'search'}, :update => 'photos' %> Tags:   <%= text_field_tag 'tags' %> <%= submit_tag 'Find' %> <%= end_form_tag %>

定义搜索方法

1.       展开 Controllers 节点，然后打开 flickr_controller.rb 。

2.       编辑代码 ： 删除 index 方法 ， 将其替换为粗体显示的 search 方法。

代码示例 5 ：代码 FlickrController 类

class FlickrController < ApplicationController def search flickr = Flickr.new render :partial => 'photo', :collection => flickr.photos(:tags => params[:tags], :per_page => '24') end   end

3.       在 Views 节点下，右键单击 flickr 节点，选择 New -> RHTML 文件。将文件命名为 _photo ，然后单击 Finish 。

4.       仅使用下面的这行代码替换该文件的内容：

运行应用程序

在此部分您可以了解如何对环境进行配置 ， 以便运行项目并启动应用程序。

1.    如果 WEBrick 服务器正在运行 ， 应通过单击 Output 窗口中的红色 X 图标停止该服务器 ， 如下图所示 ：

图 1 ：停止 WEBrick 服务器

 

2.       展开 Public 节点并删除 index.html 。

3.       在 Configuration 节点下 ， 打开 routes.rb ， 将下面的代码添加到文件底部最后一个 end 语句之前 ：

map.connect "", :controller => 'flickr'

4.       单击工具栏中的 Run Main Project 按钮启动 WEBrick 服务器并启动浏览器 ， 如下图所示。

图 2 ： Flickr 应用程序

 

5.    输入搜索字符串 （ 如 NetBeans ）， 然后单击 Find 。 等待几秒钟时间加载此图像。

图 3 ：加载图像

 

改进用户体验

单击 Find 按钮时 ， 操作在后台进行 ， 不会显示任何反馈。此时您可以添加一个简单的动画帮助解决此问题，并更改加载图像时的效果。

1. 在浏览器中将动画  添加到桌面上的一个文件中。然后，将该文件拖动到 NetBeans IDE 的 Projects 窗口中的Public > images节点下。