`

(转)在 Rails 上使用 Flickr

阅读更多
在 Rails 上使用 Flickr
Putting Flickr on Rails
 
Rails 上使用 Flickr
撰稿人Brian Leonard
2007 6 [修订号:V6.0-3]
 
 
 
本教程介绍如何创建用于搜索 Flickr 数据库的 Ruby on Rails 应用程序。本教程用于支持 Ruby NetBeans IDE 6.0 (M10)
注意本教程要求直接连接 Internet如果使用代理则无法正常工作。
内容
本教程要求拥有以下资源:
l          标准开发包 (JDK) 6.0 版
您必须拥有 API 密钥才能使用 Flickr API
  1. 使用浏览器访问 http://www.flickr.com/services/api/misc.api_keys.html
  2. 单击 立即在线申请密钥。
  3. 遵循获取 Flickr 密钥的步骤。
  4. 复制 Flickr 生成的 API 密钥并保存在文本文件中或者其他方便的位置。
  1. 从 Tools 菜单中选择 Ruby Gems
  2. Ruby Gems对话框中单击 New Gems 选项卡。
  3. Search 字段中键入flickr然后按Enter
  4. 选择 flickr,然后单击安装Gem Installation Settings对话框中单击OK
  5. 确保获得安装成功的消息然后关闭该对话框。
在此步骤中您将了解如何创建 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中添加下面的 <head> 标记和 <% =yield %> 标记粗体显示的部分
代码示例 2:用于application.rhtml的代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Flickr</title>
<%= javascript_include_tag :defaults %>
<%= stylesheet_link_tag 'flickr' %>
</head>
<body>
<%= yield %>
</body>
</html>
 
  1. 展开Public节点右键单击样式表选择New > OtherNew 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节点然后选择GenerateRails Generator对话框Name字段中键入flickrViews字段中键入index然后单击OK
  2. 展开 Views>flickr,然后打开 index.rhtml
13.   使用下面的代码替换index.rhtml中的现有代码
代码示例 4:用于index.rhtml的代码
<%= form_remote_tag :url => {:action => 'search'}, :update => 'photos' %>
<fieldset>
<label for="tags">Tags:</label>
 
<%= text_field_tag 'tags' %>
<%= submit_tag 'Find' %>
</fieldset>

<div id="photos"></div>
<%= 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.       仅使用下面的这行代码替换该文件的内容:
<img class='photo' src="<%= photo.sizes[0]['source'] %>">
在此部分您可以了解如何对环境进行配置以便运行项目并启动应用程序。
1.    如果 WEBrick 服务器正在运行应通过单击Output窗口中的红色 X 图标停止该服务器如下图所示

1:停止 WEBrick 服务器
 
2.       展开Public节点并删除index.html
3.       Configuration节点下打开routes.rb将下面的代码添加到文件底部最后一个end语句之前
map.connect "", :controller => 'flickr'
4.       单击工具栏中的Run Main Project按钮启动 WEBrick 服务器并启动浏览器如下图所示。

2Flickr 应用程序
 
5.    输入搜索字符串NetBeans),然后单击Find等待几秒钟时间加载此图像。

3:加载图像
 
单击Find按钮时操作在后台进行不会显示任何反馈。此时您可以添加一个简单的动画帮助解决此问题,并更改加载图像时的效果。
  1. 在浏览器中将动画  添加到桌面上的一个文件中。然后,将该文件拖动到 NetBeans IDE 的 Projects 窗口中的Public > images节点下。
分享到:
评论

相关推荐

    rails-flickr-api

    自述文件 该自述文件通常会记录启动和运行应用程序所需的所有步骤。 您可能要讲的内容: Ruby版本 系统依赖 配置 数据库创建 数据库初始化 如何运行测试套件 服务(作业队列,缓存服务器,搜索引擎等) ...

    flickr应用

    - 搜索照片:根据关键词、地理位置等条件在Flickr上搜索照片。 了解这些基础知识后,你可以开始探索这个"Flickr应用"的源代码,学习如何将Ruby与Flickr API结合,创建出具有实用功能的应用。这不仅可以提升你的Ruby...

    colaptes:Colaptes 使用 IIIF Image API 提供 Flickr 图像

    colaptes是概念翻译器的证明,它使用(IIIF) 呈现来自 Flickr 的。 colaptes是使用 Ruby on Rails、 、 和。 关于名字 是啄木鸟属,其中。 入门 克隆这个仓库 安装依赖项: bundle 将config/initalizers/flickr_api_...

    fullStackProj:即将克隆flickr!

    在Web开发领域,Ruby常与Ruby on Rails框架结合使用,Rails提供了强大的MVC(模型-视图-控制器)架构,简化了Web应用的开发流程。因此,我们可以预期fullStackProj项目可能基于Ruby on Rails框架进行后端开发。 在...

    odin-flickr-api

    自述文件 这是Ruby on Rails的课程的一个项目,目的是学习如何使用API​​,在这种情况下,我们使用的是Flickr API。 该项目采用简单的形式,您可以在其中引入用户的Flickr ID,并将返回用户的照片。

    flickr-search

    该项目是通过引导的。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的最新版本。 目录 自动格式化代码 更改页面&lt;title&gt; 安装依赖项 ... 在服务器上生成动态&lt;met

    Packt.Cloning.Internet.Applications.with.Ruby

    本书主要介绍了如何使用Ruby来克隆四种流行的互联网应用——TinyURL、Twitter、Flickr和Facebook,并通过这些项目帮助读者深入了解Ruby在实际Web开发中的应用。 ##### 1. TinyURL **TinyURL**是一个网址缩短服务,...

    model-findr:Flickr 风格的社交媒体,将摄影师与模特联系起来

    在技术实现上,Model-Findr可能采用了以下关键知识点: 1. **Ruby on Rails框架**:作为Ruby的主要Web开发框架,Rails提供了MVC(模型-视图-控制器)架构,简化了Web应用的构建过程。开发者可能使用它来处理路由、...

    Treehouse-TD-Project-11:技术学位项目11-React Flickr画廊

    该项目是通过引导的。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的最新版本。 目录 自动格式化代码 更改页面&lt;title&gt; 安装依赖项 ... 在服务器上生成动态&lt;met

    bickr:Flickr的论证照片

    比克尔##建立在Rails和Backbone上的论据照片网站。 你可以: 创建帐号登录和注销上传照片查看照片创建和查看相册关注其他用户查看关注的用户照片的照片流标记照片和相册通过标签和标题搜索照片和相册下载照片点赞和...

    StoryGenius:多用户故事生成社交平台。 该应用程序使用户可以根据随机提供的图像生成故事

    安装依赖项: bundle install设置数据库: rails db:setup在本地主机上服务该应用程序: rails s规格(用例场景) 用户可以使用电子邮件进行注册。 用户可以生成一个故事。 用户可以将新句子添加到任何现有故事中。...

    Fixie.js 自动填充内容的插件

    Fixie.js还提供了一个与Rails框架集成的版本——[fixie-rails](https://github.com/csexton/fixie-rails),方便在Rails项目中使用。 下面是一个使用Fixie.js的示例代码: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;Fixie....

Global site tag (gtag.js) - Google Analytics