Перевод Flickr на Rails
Составитель Брайан Леонард (Brian Leonard)
Декабрь 2007 г. [номер версии: V6.0-6]
Это руководство посвящено созданию приложения на Ruby on Rails для поиска по базе данных Flickr.
Примечание: Для работы с этим руководством требуется прямое подключение к Интернету; работа через прокси невозможна.
Содержание
Требования для работы с руководством
Для работы с руководством требуются следующие технологии:
Получение ключа интерфейса API Flickr
Для использования интерфейса API Flickr необходимо получить ключ API.
- Перейдите в веб-обозревателе по адресу http://www.flickr.com/services/api/misc.api_keys.html.
- Щелкните ссылку "Apply for your key online now".
- Выполните процедуру получения ключа Flickr.
- Скопируйте ключ API, автоматически созданный Flickr, и сохраните его в текстовом файле или другом удобном местоположении.
Установка библиотеки Flickr
- Выберите "Ruby Gems" в меню "Tools".
- В диалоговом окне "Ruby Gems" щелкните вкладку "New Gems".
- Введите
flickr в поле "Search" и нажмите клавишу Enter.
- Выберите "flickr" и нажмите кнопку "Install". Нажмите кнопку "OK" в диалоговом окне "Gem Installation Settings".
- Убедитесь в наличии сообщения об успешном выполнении и закройте диалоговые окна.
Создание проекта Ruby on Rails
- Выберите "File > New Project".
- Выберите "Ruby" в поле "Categories" и "Ruby on Rails Application" в поле "Projects", затем нажмите кнопку "Next".
Введите flickr в поле "Project Name" и нажмите кнопку "Finish".
При работе с библиотекой Flickr предполагается, что ключ API Flickr добавляется непосредственно в сценарий. Можно так и поступить, однако методика, описанная ниже, позволяет использовать библиотеку Flickr, не внося в нее каких-либо изменений.
-
В окне "Projects" разверните узел "Configuration", затем откройте
environment.rb.
-
Добавьте следующий код в конце файла environment.rb. Убедитесь в том, что ключ API Flickr введен в переменную MY_KEY. Этот ключ требуется для доступа к интерфейсу API Flickr.
| Пример кода 1: добавление ключа API Flickr |
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
|
- Выберите в главном меню "File > Save All".
Добавление стиля к проекту
- В окне "Project" разверните узел "Views", щелкните правой кнопкой мыши узел "Layouts" и выберите "New -> RHTML file". Назовите файл
application и нажмите кнопку "Finish".
-
Замените существующий код application.rhtml на следующий:
Пример кода 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>
|
-
Разверните узел "Public", щелкните правой кнопкой мыши таблицу стилей и выберите "New > Other".
- В диалоговом окне "New File" установите в поле "Category" значение
Other, а в поле "File Type" – Cascading Style Sheet. Нажмите кнопку "Next".
Назовите файл flickr и нажмите кнопку "Finish".
Файл flickr.css откроется в области изменения.Добавьте следующие стили к flickr.css:
| Пример кода 3: код стилей |
body {
background-color: #888;
font-family: Lucida Grande;
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;
}
|
Создание контроллера
-
Щелкните правой кнопкой мыши узел "Controllers" и выберите "Generate".
В диалоговом окне "Rails Generator" введите flickr в поле "Name" и index в поле "Views", затем нажмите кнопку "OK".
Это действие приводит к созданию файла flickr_controller.rb и его открытию в области изменения.-
Выберите "Views > flickr" и откройте
index.rhtml.
-
Замените существующий код index.rhtml на следующий:
Пример кода 4: код для index.rhtml |
<% form_remote_tag :url => {:action => 'search'}, :update => 'photos' do %>
<fieldset>
<label for="tags">Tags:</label>
<%= text_field_tag 'tags' %>
<%= submit_tag 'Find' %>
</fieldset>
<div id="photos"></div>
<% end %>
|
Определение метода поиска
-
Откройте
flickr_controller.rb.
Измените код путем удаления метода index с заменой на метод search, выделенный полужирным шрифтом:
Пример кода 5: код класса FlickrController |
class FlickrController < ApplicationController
def search
flickr = Flickr.new
if params[:tags].empty?
render :text => '<h2>Please enter a search string</h2>'
else
begin
photos = flickr.photos(:tags => params[:tags], :per_page => '24')
render :partial => 'photo', :collection => photos
rescue NoMethodError
render :text => '<h2>No matching photos found</h2>'
end
end
end
end
|
-
Под узлом "Views" щелкните правой кнопкой мыши узел "flickr" и выберите "New -> RHTML file". Назовите файл _photo и нажмите кнопку "Finish".
Замените содержимое файла на следующую единственную строку.
<img class='photo' src="<%= photo.sizes[0]['source'] %>">
Выполнение приложения
На этом этапе выполняется настройка среды для запуска приложения при выполнении проекта.
-
Удалите
index.html в узле "Public".
-
В узле "Configuration" откройте routes.rb. Перейдите к строке:
# map.connect '', :controller => "welcome"
- Удалите в строке знак комментария (#) и измените
welcome на flickr.
-
Для запуска сервера WEBrick и обозревателя нажмите кнопку "Run Main Project" на панели инструментов, как показано на следующем рисунке.
Рис. 1: Приложение "flickr"
Введите строку поиска, например NetBeans, и нажмите кнопку "Find". Изображения загружаются через несколько секунд.
Рис. 2: Загрузка изображений
Повышение удобства для пользователей
При нажатии кнопки "Find" какая-либо обратная связь относительно происходящего за кадром отсутствует. На данном этапе выполняется добавление простого анимированного изображения в формате GIF, позволяющего справиться с этой проблемой, а также изменение вида изображений по мере их загрузки.
- Сохраните этот анимированный файл GIF
из обозревателя в файл на рабочем столе. Затем перетащите файл в узел "Public > images" в окне "Project" в среде IDE NetBeans.
-
Выберите "Views > flickr > index.rhtml". Удалите существующий код и замените его кодом, показанным в следующем примере:
Пример кода 6: код для index.rhtml |
<% form_remote_tag :url => {:action => 'search'}, :update => 'photos',
:complete => visual_effect(:blind_down, 'photos'),
:before => %(Element.show('spinner')),
:success => %(Element.hide('spinner')) do %>
<%= image_tag 'spinner.gif', :id => 'spinner', :style => 'display: none' %>
<fieldset>
<label for="tags">Tags:</label>
<%= text_field_tag 'tags' %>
<%= submit_tag 'Find' %>
</fieldset>
<div id="photos" style="display: none"></div>
<% end %>
|
-
Выберите в главном меню "File > Save All". Обновите страницу в обозревателе и введите другую строку поиска, например JRuby.
Рис. 3: Добавление анимации
Теперь индикация работы сервера над запросом осуществляется с помощью несложной анимации. При появлении изображений они раскрываются как жалюзи.
Что дальше?
>> Дополнительная документация по Ruby в среде NetBeans
