Generalizing mobile applications for multiple libraries

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

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

Scoping our investigation Focus Solution Platform i. OS - a project and a sigh. . . Browser Dashcode - a fun beginning Framework j. QTouch, j. Query, HTML 5 Architecture Django - dynamic, MVC

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

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

Pastry. Kit http: //davidbcalhoun. com/2009/pastrykitdigging-into-an-apple-pie

Web-kit based - CSS / JS frameworks http: //code. google. com/p/iui/ http: //davidbcalhoun. com/tag/jqtouch

What makes an app useful?

Comparing apples

Considering layout http: //davidbcalhoun. com/wp-content/uploads/2010/05/mobile-modules. png

Mobile design considerations Presentation Input Bandwidth User goal Choice of user experience Context-specific adaption Server side, media viewport http: //www. w 3. org/TR/mobile-bp

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

Experiment 1 How easy is j. QTouch? http: //erikmitchell. info/lita_mobile/static_site

j. QTouch framework

Adding hours and contacts

Adding RSS feeds (j. Query + j. QTouch) index. html local. js

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

Quick tour

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/

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

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

Something a bit more accurate:

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

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

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 Java. Script processes (Thanks Kevin!) Search ajax Feed ajax

Bringing feed data to the front screen dom = minidom. parse(urllib 2. urlopen(library. default. Feed))title = dom. get. Elements. By. Tag. Name("title")[1]. first. Child. datalink = dom. get. Elements. By. Tag. Name("link")[1]. first. Child. datanews = { 'title': title, 'link': link }

Enhancing ‘What’s New’ def feed(request, feed_id): feed = get_object_or_404(Feed, pk=feed_id) feed. Contents = urllib 2. urlopen(feed. URI) return Http. Response(feed. Contents, 'application/xml') $. ajax({ type: "GET", url: feedurl, data. Type: "xml", success: function(xml) { $('#' + my. Feed + ' ul'). empty(); $(xml). find("item"). each(function() { var title = $(this). find('title'). text(); var pub. Date = $(this). find('published'). text(); var link = $(this). find('link'). text(); var list. Item = $('<li class="rounded">. . . </li>'); $('#' + my. Feed + ' ul'). append(list. Item); }, error: error. Msg });

Enabling search def search(request): Search_terms = request. GET['lookfor'] search. URL = 'http: //cloud. lib. wfu. edu/vufind/Search/Results? type=All. Fields&submit=Find&api=json&lookfor=' + search_terms search. Contents = urllib 2. urlopen(search. URL)return Http. Response(search. Contents) #, 'application/javascript')

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

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.

Quick tour

Getting there - browser detection User-agent switching (server side) http: //detectmobilebrowsers. mobi Media queries http: //www. w 3. org/TR/css 3 -mediaqueries/ http: //plugins. jquery. com/project/Media. Que

What’s Next? Real HTML 5 - 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

Development & debugging i. Phone & Android, Palm OS SDK & simulators Safari > Preferences >Advanced > Developer > client settings Firefox add. On > User Agent Switcher Common HTML tools - firebug, data validation (jsonlint) Bluefish, Dashcode. . .

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

Ok, some easy tutorials Stark, Jonathan Building i. Phone Apps with HTML, CSS, and Java. Script. 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/