Putting Flickr on Rails

Contributed by Brian Leonard

June [Revision number: V6.0-3]

This tutorial describes how to create a Ruby on Rails application that searches the Flickr database. This tutorial runs with NetBeans IDE 6.0 (M10) with Ruby support.

Note: This tutorial requires direct connection to the Internet and does not work if you are working behind a proxy.

Contents

-	Tutorial Requirements
-	Obtaining a Flickr API Key
-	Installing the Flickr Library
-	Creating the Ruby on Rails Project
-	Defining the Search Method
-	Running the Application
-	Improving the User Experience

Tutorial Requirements

This tutorial requires the following resources:

Java Standard Development Kit (JDK) version 6.0
NetBeans IDE 6.0 (M10) with Ruby support

Obtaining a Flickr API Key

You must have an API key to make use of the Flickr API.

In your web browser
Click Apply for your key online now.
Follow the steps for obtaining a Flickr key.
Copy the API key that Flickr generates and save it in a text file or other convenient location.

Installing the Flickr Library

From the Tools menu, choose Ruby Gems.
In the Ruby Gems dialog box, click the New Gems tab.
Type flickr in the Search field and press Enter.
Select flickr, and then click Install. Click OK in the Gem Installation Settings dialog box.
Make sure you get a success message, and then close the dialog boxes.

Creating the Ruby on Rails Project

In this step, you create the Ruby on Rails application and a page for searching the Flickr database.

Choose File > New Project.
Select Ruby in the Categories field and Ruby on Rails Application in the Projects field and click Next.
Type Flickr in the Project Name field and click Finish.
The Flickr library expects you to add your Flickr API Key directly to its script. You could do that, however, the approach described in the following steps enables you to use the Flickr library without touching it.
In the Projects window, expand the Configuration node, then open environment.rb.

Add the following code at the bottom of the environment.rb file. Be sure to enter your Flicker API Key in the MY_KEY variable. You need the key to access the Flickr APIs.

Code Sample 1: Adding Your Flickr API Key

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="..."
    @activity_file='flickr_activity_cache.xml'
  end
end

Expand the Views node, right-click the layouts node, and choose New -> RHTML file. Name the file application and click Finish.

Add the following <head> tag and <% =yield %> tag (shown in bold) to application.rhtml:

Code Sample 2: Code for 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>

Expand the Public node, right-click stylesheets and choose New > Other. In the New File dialog box, set the Category to Other and the File Type to Empty File. Click Next.
Name the file flickr.css and click Finish.

Add the following styles to flickr.css:

Code Sample 3: Style Code

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;
}

Right-click the Controllers node and choose Generate. In the Rails Generator dialog box, type flickr in the Name field and index in the Views field, and then click OK.
Expand Views > flickr and open index.rhtml.

Replace the existing code in index.rhtml with the following code:

Code Sample 4: Code for 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 %>

Defining the Search Method

Expand the Controllers node and open flickr_controller.rb.

Edit the code by deleting the index method and replacing it with the search method shown in bold:

Code Sample 5: Code FlickrController Class

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

Under the Views node, right-click the flickr node and choose New -> RHTML file. Name the file _photo and click Finish.
Replace the contents of the file so that the file includes the following line only:
```
<img class='photo' src="<%= photo.sizes[0]['source'] %>">
```

Running the Application

Here you configure the environment so that running the project launches the application.

If the WEBrick server is running, stop the server by clicking the red X icon in the Output window, as shown in the following figure:

Figure 1: Stopping the WEBrick Server
Expand the Public node and delete index.html.
Under the Configuration node, open routes.rb and add the following code to the bottom of the file before the final end statement:
```
map.connect "", :controller => 'flickr'
```
Click the Run Main Project button in the toolbar to start the WEBrick server and launch the browser, as shown in the following figure.

Figure 2: Flickr Application
Enter a search string, such as NetBeans, and click Find. Give the images a couple of seconds to load.

Figure 3: Loading Images

Improving the User Experience

When you click the Find button, there's no feedback that something's happening behind the scenes. Here you add a simple animated gif to help address this problem as well as change the effect of the images as they load.

Save this animated gif from your browser to a file on your desktop. Then drag the file under the Public > images node in the Project window in the NetBeans IDE.

Open Views > flickr > index.rhtml. Delete the existing code, and replace it with the code shown in the following sample:

Code Sample 6: Code for index.rhtml

<%= form_remote_tag :url => {:action => 'search'}, :update => 'photos',
    :complete => visual_effect(:blind_down, 'photos'),
    :before   => %(Element.show('spinner')),
    :success  => %(Element.hide('spinner')) %>
    <%= 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_form_tag %>

Run the project, then return to your browser and try another search string, such as JRuby.

Figure 4: Adding Animation

Now you see a simple animation to let you know the server is working on your request. When the images appear, they drop down like a set of blinds.