In this presentation I cover my work on developing mobile web sites using jQuery, jQTouch, and Django

1. Generalizing mobile applications
for multiple libraries
. . .my summer project & why it was
fun
Erik Mitchell, PhD
Assistant Director for Technology Services
Z. Smith Reynolds Library
Wake Forest University

2. Scope
Review the area of mobile app development - iPhone
centric view :)
Define the scope of our investigation today
Look at some interesting tools
Discuss what I learned think about next steps

3. Mobile app development
Platform centric
Browser centric
Framework centric
http://davidbcalhoun.com/tag/jqtouch

4. Scoping our investigation
iOS - a project and a sigh. . .
Dashcode - a fun beginning
jQTouch, jQuery, HTML5 - platform independence
Django - Making your app a bit more dynamic

5. iOS application
Collaborative project with CS student
The great idea - JSON
Graduation, functionality, dynamic configuration, hard-coded
logic

6. Dashcode
The greatest 5 minute tutorial ever:
– Minglu Wang on Handheld Librarian
htttp://catalog.zsr.wfu.edu/zsr_new_videos

7. PastryKit
http://davidbcalhoun.com/2009/pastrykit-
digging-into-an-apple-pie
7

8. Safari based - CSS / JS frameworks
http://jqtouch.com http://code.google.com/p/iui/

9. What makes an app useful?

10. Library equivalents
Mobile apps Library equivalents
Focused use Resources, location,
hours, contacts
Connectivity Updates, search,
browsing
Session persistence Off-line use, favorites
Information need Discovery, location, help
10

11. Experiment 1
How easy is jQTouch?
http://erikmitchell.info/lita_mobile/static_site

12. jQTouch framework

13. Adding contacts

14. Adding RSS feeds (jQuery + jQTouch)
index.html
local.js

15. Going offline (ok, that was easy)
library.manifest
http://erikmitchell.info/lita_mobile/static_site

16. Experiment 1 - Observations
Easy to write
Simple to maintain
Focused, connected, persistent
Complexity in RSS/JSON data
Content updates & delegation
Framework flexibility
Catalog search hijacks page
http://cloud.lib.wfu.edu/blog/tech/2010/09/27/creating-a-mobile-site-using-jqtouch-html-css-and-javascript/

17. Experiment 2 - Lets make it dynamic
“How can I make the app do more and be flexible enough to
work differently for each library? Can it include embedded
search, updates, and easy maintenance?”
Model -- View -- Controller (MVC)
Automatic administration interface
Simple template system
URL management
Relational database
High-level programming language

18. A (simple) look at the Django model
http://cloud.lib.wfu.edu/blog/tech/2010/09/28/using-django-to-create-complex-sites-simply/

19. Something
a bit more
accurate:

20. An admin interface in 3 lines of code?
urls.py:
admin.autodiscover()
(r'^admin/', include(admin.site.urls)),
settings.py
'django.contrib.admin',

21. A look at the Django model
Django project filesystem models.py Contains your data
model, used to
create your
database
views.py Contains your
view definitions
and logic
urls.py Maps request urls
to views
mytemplates customized
templates called by
views

22. Changes to site code
Four main Views
index - A listing of multiple libraries
details - The main application
feed - a simple rss feed api
search - a simple JSON search api (Thanks Vufind!)
Two main JavaScript processes (Thanks Kevin!)
Search ajax
Feed ajax

23. Bringing feed data to the front screen
dom = minidom.parse(urllib2.urlopen(library.defaultFeed))
title = dom.getElementsByTagName("title")[1].firstChild.data
link = dom.getElementsByTagName("link")[1].firstChild.data
news = { 'title': title, 'link': link }

24. Enabling search
def search(request):
Search_terms = request.GET['lookfor']
searchURL = 'http://cloud.lib.wfu.edu/vufind/Search/Results?
type=AllFields&submit=Find&api=json&lookfor=' +
search_terms
searchContents = urllib2.urlopen(searchURL)
return HttpResponse(searchContents) #, 'application/javascript')

25. Enhancing ‘What’s New’
def feed(request, feed_id):
feed = get_object_or_404(Feed, pk=feed_id)
feedContents = urllib2.urlopen(feed.feedURI)
return HttpResponse(feedContents, 'application/xml')
$.ajax({
type: "GET",
url: feedurl,
dataType: "xml",
success: function(xml)
{
$('#' + myFeed + ' ul').empty();
$(xml).find("item").each(function()
{
var title = $(this).find('title').text();
var pubDate = $(this).find('published').text();
var link = $(this).find('link').text();
var listItem = $('<li class="rounded">.....</li>');
$('#' + myFeed + ' ul').append(listItem);
});
},
error: errorMsg
});

26. Multi-library site happens ‘automatically’
Library list template file - called from index view
<!DOCTYPE html>
<html><head>
<css and stylesheet links. . . .>
<title>List of Libraries</title>
</head><body>
<div id="home" class="current">
<div class="toolbar"><h1>Mobile Library Sites</h1></div>
<ul class="rounded">
{% for mylibrary in libraryList %}
<li class="forward" >
<a target="_blank" href="/librware/site/
{{ mylibrary.id }}">{{ mylibrary.libraryName }}</a></li>
{% endfor %}
</ul>
<div class="info"> </div>
</div>
</body>
</html>

27. Let’s reflect - what did Django give us?
Dynamic site with automatically generated admin interfaces
A simple-to-configure data model and easily written view/
template architecture
No database connection code, lots of pre-built libraries, MVC
architecture, simple data proxy & api calls
Integrated debugging environment
Pluggable application architecture - drop this app into your
django site & go.

28. Quick tour

29. What’s Next?
Real HTML5 - Video, geo-location, chat
Better abstraction of data model and application code
A change in default css
Better integration with standard full website
Integration with digital collections
?

30. Development & debugging
iPhone & Android simulators
Safari > Preferences >Advanced > Developer > client settings
Common HTML tools - firebug, data validation (jsonlint)
Bluefish, Dashcode . . .

31. Ok - how do you get started?
1. Learn html
2. Learn html5
3. Learn a bit of javascript
4. Learn the jQuery syntax
5. Learn the jQTouch framework
6. Learn a bit of python
7. Learn just a bit of data modeling
8. Learn Django
9. Figure out how to run Django on your site/server
10. Publish!

32. Ok, some easy tutorials
Stark, Johnathan Building iPhone Apps with HTML, CSS, and
JavaScript.
http://building-iphone-apps.labs.oreilly.com
Django Project. Django development tutorial series. http://
docs.djangoproject.com/en/dev/intro/
Calhoun, David. Developer blog. http://davidbcalhoun.com/tag/jqtouch
Mitchell, Erik. Web development tutorials. http://cloud.lib.wfu.edu/blog/
tech/category/web-development/
Get the code - http://github.com/mitcheet/