Colocando Flickr on Rails
Construído por Brian Leonard
Dezembro de 2007 [Número da versão: V6.0-6]
Este tutorial descreve como criar uma aplicação Ruby on Rails que pesquisa o banco de dados
Flickr.
Observação: este tutorial requer conexão direta com a Internet e não funciona se você estiver trabalhando por trás de um proxy.
Conteúdo
Requisitos do tutorial
Este tutorial requer a seguinte tecnologia:
Obtendo uma chave de API do Flickr
Você deve ter uma chave de API par usar a API do Flickr.
- Em seu navegador da Web, vá para http://www.flickr.com/services/api/misc.api_keys.html.
- Clique em Aplicar para a sua chave online agora.
- Siga as etapas para obter a chave do Flickr.
- Copie a chave da API gerada pelo Flickr e salve-a em um arquivo de texto ou em outro local conveniente.
Instalando a biblioteca do Flickr
- No menu Ferramentas, escolha Gems Ruby.
- Na caixa de diálogo Gems Ruby, clique na aba Novos Gems.
- Digite
flickr no campo Pesquisa e pressione Enter.
- Selecione flickr e, em seguida, clique em Instalar. Clique em OK na caixa de diálogo Configurações de instalação do Gem.
- Garanta a obtenção de uma mensagem de êxito e feche as caixas de diálogo.
Criando o projeto Ruby on Rails
- Escolha Arquivo > Novo projeto.
- Selecione Ruby no campo Categorias e Aplicação Ruby on Rails no campo Projetos e clique em Avançar.
Digite flickr no campo Nome do projeto e clique em Terminar.
A biblioteca Flickr espera que você adicione a sua chave da API do Flickr diretamente a seu script. Você poderia fazer isso, entretanto, a abordagem descrita nas etapas seguintes permite que você use a biblioteca Flickr sem tocá-la.
-
Na janela Projetos, expanda o nó Configuração, em seguida, abra
environment.rb.
-
Adicione o código seguinte na parte inferior do arquivo environment.rb. Garanta a indicação da sua chave de API do Flicker na variável MY_KEY. Você precisa da chave para acessar as APIs do Flickr.
| Amostra de código 1: adicionando a sua chave da API do 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
|
- No menu principal do , escolha Arquivo > Salvar todos.
Adicionando estilo ao projeto
- Na janela Projeto, expanda o nó Visualizações, clique com o botão direito do mouse no nó layouts, e escolha Novo -> arquivo RHTML. Chame o arquivo de
application e clique em Terminar.
-
Substitua o código existente em application.rhtml pelo código seguinte:
Amostra de código 2: código para 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>
|
-
Expanda o nó Público, clique com o botão direito do mouse nas folhas de estilo e escolha Novo > Outro.
- Na caixa de diálogo Novo arquivo, defina a Categoria como
Outro e o Tipo de arquivo como Folha de estilo em cascata. Clique em Próximo.
Chame o arquivo de flickr e clique em Terminar.
O arquivo flickr.css se abre na área de edição.Adicione os seguintes estilos a flickr.css:
| Amostra de código 3: código de estilo |
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;
}
|
Criando um controlador
-
Clique com o botão direito do mouse no nó Controladores e escolha Gerar
Na caixa de diálogo Gerador do Rails, digite flickr no campo Nome e index no campo Visualizações e, em seguida, clique em OK.
Esta ação cria o arquivo flickr_controller.rb e abre o arquivo na área de edição. -
Expanda Visualizações > flickr e abra
index.rhtml.
-
Substitua o código existente em index.rhtml pelo código seguinte:
Amostra de código 4: código para 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 %>
|
Definindo o método de pesquisa
-
Abra
flickr_controller.rb.
Edite o código, excluindo o método index e substituindo-o pelo método de pesquisa mostrado em negrito:
Amostra de código 5: código FlickrController Classe |
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
|
-
No nó Visualizações, clique com o botão direito do mouse no nó flickr e escolha Novo -> arquivo RHTML. Chame o arquivo de _photo e clique em Terminar.
Substitua o conteúdo do arquivo, para que ele inclua somente a linha seguinte:
<img class='photo' src="<%= photo.sizes[0]['source'] %>">
Executando a aplicação
Aqui você configura o ambiente de forma que a execução do projeto inicie a aplicação.
-
No nó Público, exclua
index.html.
-
No nó Configuração, abra routes.rb. Encontre a linha:
# map.connect '', :controller => "welcome"
- Edite a linha removendo o sinal de comentário (#) e alterando
welcome para flickr.
-
Clique no botão Executar projeto principal na barra de ferramentas para iniciar o servidor WEBrick e inicie o navegador, como mostrado na figura seguinte.
Figura 1: Aplicação flickr
Indique uma string de pesquisa, tal como NetBeans e clique em Localizar. Espere alguns segundos para as imagens serem carregadas.
Figura 2: Carregando imagens
Aprimorando a experiência do usuário
Quando você clica no botão Localizar, não há indicação de que algo esteja ocorrendo nos bastidores. Aqui você adiciona um simples gif animado
para ajudar a lidar com esse problema e altera o efeito das imagens conforme elas são carregadas.
- Salve esse gif animado
 a partir do seu navegador para um arquivo em sua área de trabalho. Em seguida, arraste o arquivo sob Público > nó imagens na janela Projeto no NetBeans IDE.
-
Abra Visualizações > flickr > index.rhtml. Exclua o código existente e subsitua-o pelo código mostrado na amostra seguinte:
Amostra de código 6: código para 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 %>
|
-
No menu principal do , escolha Arquivo > Salvar todos. Atualize o navegador e experimente outra string de pesquisa, tal como JRuby.
Figura 3: Adicionando animação
Agora você vê uma animação simples que permite que saiba que o servidor está trabalhando em sua solicitação. Quando as imagens aparecem, elas são retiradas como um conjunto de vendas.
Próximas etapas
>> Mais documentação do NetBeans Ruby
|
|
