Django App connected to APIs for a picture dictionary.

1. Django-Snapbook
www.github.com/katychuang/django-snapbook
NYC Pyladies Talk, 5/2/2013
Twitter: @katychuang

2. Concept
A picture dictionary = Pictures + definitions

3. Wireframe
Search

4. Wireframe
Link to home page
word (part of speech): definition goes here
List of relevant web pages
• something
• something
• something
PICTURES OF WORD

5. APIs
Pearson Dictionary
http://developer.pearson.com/apis
Tumblr
www.tumblr.com/api
NY Times
http://developer.nytimes.com/docs

6. The code
Django Framework Files
Edited: views.py
settings.py
urls.py

7. Project/settings.py
Change the database settings
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
# Add 'postgresql_psycopg2', 'mysql', 'sqlite3' or 'oracle'.
'NAME': '../sqlite.db',
# Or path to database file if using sqlite3.
}
}

8. Project/urls.py
urlpatterns = patterns('',
url(r'^$', 'example.views.home'),
# home page
# http://localhost:8000/
url(r'^search/$', 'example.views.search'),
# search results
# http://localhost:8000/search/?q=cat
)

9. App/views.py
def home(request):
return render_to_response("example/index.html",
{
'page_title': 'django-snapbook',
'name': 'home'
}
)
def search(request):
...

10. Search Box
{% block main %}
{% if name %}
<form method="get" action="/search/">
<label>Label for box</label>
<input type="text" placeholder="Type something..."
name="q" id="id_q" size="35" />
<input type="submit" value="Search">
</form>
{% endif %}
{% endblock main %}

11. Search Results
{% block main %}
{% if definition == "DNE" %}
<h2><a href="/">&lt; Home</a></h2>
no definitions found for {{ query_string }}.
{% elif definition %}
<h2><a href="/">&lt; Home</a></h2>
<h1>{{ query_string }} ({{ pos }}) : {{ definition }}</h1>
{% else %} &nbsp; {% endif %}
{% endblock main %}

12. Images
{% if tumble %}
<ul class="photos">
{% for p in tumble %}
<li><img src="{{ p }}" height="200"></li>
{% endfor %}
</ul>
{% endif %}

13. News Articles
{% if nyt %}
<h1>Articles about {{ query_string }} from NYT</h1>
<ul class="articles">
{% for p in nyt %}
<li><a href="{{ p.url }}"><b>{{ p.title }} </b></a>
by {{ p.author }}<br /><small> {{ p.body }}</small>
</li>
{% endfor %}
</ul>
{% endif %}

14. One page template
* Display search box and button on homepage.
* Display link to home page on results page.
* If there is a definition, show it. Otherwise, let
user know message doesn't exist.
* If there are photos of word, display them.
Otherwise this section is blank.
* If there are news articles, list them. Otherwise
keep this section blank.

15. Heroku
• Free web hosting (python, ruby, php, etc)
• Demo here:
http://blooming-forest-4284.herokuapp.com
uses git command line style to deploy
$ git push heroku master

16. The End