Upgrade to Pro — share decks privately, control downloads, hide ads and more …

NYC Pyladies Talk 5.2.2013

NYC Pyladies Talk 5.2.2013

Django App connected to APIs for a picture dictionary. Talk was presented at NYC Pyladies Meetup Group
https://github.com/katychuang/django-snapbook

Kat Chuang

May 02, 2013
Tweet

More Decks by Kat Chuang

Other Decks in How-to & DIY

Transcript

  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