Wyszukiwarka zdjęć z Flickr.com

14 July 2008 Comments

Niniejszy artykuł prezentuje wykonanie prostej aplikacji w Pylons - wyszukiwarki zdjęć z serwisu flickr.com

- Pobieramy bibliotekę http://jamesclarke.info/projects/flickr/flickr.py i zapisujemy ją w katalogu lib naszego projektu.
- Edytujemy templates/autohandler i zastępujemy go kodem:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Flickr!</title>
<% h.javascript_include_tag('/javascripts/effects.js', builtins=True) %>
<% h.stylesheet_link_tag('/flickr.css') %>
</head>
<body>
% m.call_next()
</body>
</html>

Powyższy kod będzie dołączany na początku każdego szablonu. Celem powyższego kodu jest dodanie potrzebnych plików JS i CSS.
- Tworzymy kontroler flickr.py o kodzie:

from NAZWAPROJEKTU.lib.base import *
import NAZWAPROJEKTU.lib.flickr as flickr

flickr.API_KEY = "KLUCZ API FLICKR.COM"

class FlickrController(BaseController):

    def index(self):
        return render_response('/flickr.myt')

    def search(self):
        photos = flickr.photos_search(
            tags = request.params['tags'],
            per_page = 24,
        )
        c.photos = [photo.getURL(size="Small", urlType='source') for photo in photos]
        return render_response('/photos.myt')

Klucz API możemy dostać ze strony flickr.com - link bezpośredni. By mieć klucz musimy mieć własne konto, rejestracja darmowa.
- Tworzymy szablon flickr.myt o kodzie:

<% h.form_remote_tag(
    url      = h.url(action="search"),
    update   = "photos",
    complete = h.visual_effect("Blind_down", "photos"),
    loading  = h.update_element_function("spinner", content="loading.."),
    loaded   = h.update_element_function("spinner", content="")
) %>
<div id="spinner"></div>
<fieldset>
    <label for="tags">Tags:</label>
    <% h.text_field("tags") %>
    <% h.submit("Find") %>
</fieldset>
<div id="photos" style="dislay:none"></div>
<% h.end_form() %>

- Oraz drugi photos.myt o kodzie:

# Ignore this comment
% for photo in c.photos:
    <img class="photo" src="<% photo %>">
% #end for

- Tworzymy public/flickr.css o kodzie:

body {
    background-color: #888;
    font-family: Lucida Grande;
    font-size: 11px;
    margin: 25px;
}
form {
    margin: 0;
    margin-bottom: 10px;
    background-color: #eee;
    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;
}

GOTOWE. Wejdź na http://127.0.0.1:5000/flickr by zobaczyć wyszukiwarkę w akcji. Po wpisaniu frazy i wysłaniu formularza rozpocznie się wyszukiwanie. Gdy zostanie wykonane w efektowny sposób pojawią się miniaturki znalezionych grafik:

Oryginalny artykuł znajduje się tutaj

RkBlog

Pylons, 14 July 2008