Post on 11-Jan-2016
Web Services & Widgets for the WebOPAC
IUG 2009Annette BaileyVirginia Tech
Motivation
• Enhancing the WebOPAC display with information from outside web services– Dynamic integration even without WebBridge
• Integrating real-time bibliographic and circulation information into web pages– Turning Millennium into a web service
2IUG 2009 - Annette Bailey
Overview
1. Google Book Classes– integrate data from Google Book Search
Dynamic Links into web pages
2. tictoclookup– enhance web pages with links to journal RSS
feeds
3. MAJAX 2– use real-time information from the library’s
catalog in web pages3IUG 2009 - Annette Bailey
Challenges
• Ease of Integration– should require little or no programming
• Customizability– should allow for flexible layouts and styling
• Setup and Hosting – should require minimum effort, exploit either free
or already available resources
4IUG 2009 - Annette Bailey
What’s a web service?
Definitions: "a software system designed to support interoperable
machine-to-machine interaction over a network." [1] "a computational resource that can be accessed via
the world wide web" [2]
[1] http://www.w3.org/TR/ws-gloss/
[2] http://primekinetics.org/glossary
5IUG 2009 - Annette Bailey
Web Service
Web Service
Request:http://some.domain/some/path?some=arg
Response:Data encoded in XML or JSON
JSON: JavaScript Object NotationData interchange format that uses JavaScript syntax
6IUG 2009 - Annette Bailey
GOOGLE BOOK CLASSESWeb Services & Widgets
IUG 2009 - Annette Bailey 7
Google Book Search Dynamic Links API
• Programmatic client-side access to small set of Google Book Search information– Provides thumbnails of book covers– Provides link to Google’s book information,
preview, or full text pages– Provides information on whether Google has full
text, partial preview, or no preview– Indexed by ISBN#, OCLC#, LCCN#
• Released March 2008IUG 2009 - Annette Bailey 8
Google Book Search Dynamic Links API
• Keypoints: – can access it by typing a URL in the browser and see what comes
back – response uses JSON
IUG 2009 - Annette Bailey 9
http://books.google.com/books?bibkeys=ISBN:0451526538&jscmd=viewapi&callback=process
process({ "ISBN:0451526538":{ "bib_key": "ISBN:0451526538", "info_url": "http://books.google.com/books?id=j391D4vlFfAC\x26source=gbs_ViewAPI", "preview_url": "http://books.google.com/books?id=j391D4vlFfAC\x26printsec=frontcover \x26source=gbs_ViewAPI", "thumbnail_url": "http://bks8.books.google.com/books?id=j391D4vlFfAC\x26printsec=frontcover \x26img=1\x26zoom=5\x26sig=ACfU3U33uGv6VuVsNAOfq-40BmmP64zdXQ", "preview": "partial", "embeddable": true } });
Widgets
• Data returned by web services can not be used directly in web pages– Need JavaScript to post-process it
• Enter Widgets– A snippet of HTML/CSS that controls the post-
processing and display of data obtained from a web service
– JavaScript remains “under the hood”
10IUG 2009 - Annette Bailey
Google Book Classes Widget
• A widget to access Google Book Search Dynamic Links API and integrate results into web pages.
DemoDemo
11IUG 2009 - Annette Bailey
http://laurel.lib.vt.edu/record=b2595018~S1
IUG 2009 - Annette Bailey 12
Using Google Book Classes in bib_display.html
IUG 2009 - Annette Bailey 13
<script type="text/javascript“ src="http://yourserver/yourpath/gbsclasses.js"></script><!--{recordinfo:duswxzbrnjig}--> <table style="display: none" class="bibDetail"> <tbody> <tr class="bibInfoEntry"> <td class="bibInfoLabel">Preview with Google</td> <td class="bibInfoData"> <span title="ISBN:millennium.record" class="gbs-link-to-preview gbs-if-partial-or-full"> <img src="http://www.google.com/intl/en/googlebooks/images/gbs_preview_button1.gif"> </span> </td> </tr> </tbody> </table>
Google Book Classes• Use <span> or <div>• Wrap span in a hyperlink
– gbs-link-to-preview– gbs-link-to-info– gbs-link-to-thumbnail
• Conditionals: only keep span/div if …– gbs-if-noview– gbs-if-partial-or-full– gbs-if-partial– gbs-if-full
• Thumbnails Image– gbs-thumbnail
• Embedded viewer– gbs-embed-viewer
• Remove if Google does not index book– gbs-remove-on-failure
• Multiple classes can be combined
IUG 2009 - Annette Bailey 14
More info at:http://libx.lib.vt.edu/services/googlebooks/
Using Google Book Classes in WebBridge
• Create a new resource in WebBridge
IUG 2009 - Annette Bailey 15
<span style="display:none" title="OCLC:#@OCLC#" class="gbs-link-to-preview gbs-if-partial-or-full"> <img src="http://www.google.com/intl/en/googlebooks/images/gbs_preview_button1.gif"></span>
ISBN ISBN:006073132X OCLC OCLC:57207630LCCN LCCN:2004022563
GBS Identifiers
• Alternate syntax: use * as IDENTIFIER• <span title=“*” class=“GBS-CLASSES”>
ISBN:006073132X </span>
• IDENTIFIER can refer to ISBN #, OCLC #, or LCCN#
IUG 2009 - Annette Bailey 16
<div class="briefCitPub"><table><tr><td style="text-align:left" width="65%"><!--{fieldspec:Vbp260}--></td><td width="35%"><span style="display:none" title="*" class="gbs-link-to-info gbs-if-partial gbs-remove-on-failure"><!--{fieldspec:Vbi020}--> <img src="http://code.google.com/apis/books/images/api-example2.png"></span></td></tr></table></div>
Google Book Classes Summary
IUG 2009 - Annette Bailey 17
Google Book Classes
Web Service Google Book Search Dynamic Link APIbooks.google.com
Hosted By Google, Inc.
Data Provenance Google
Additional Cost Free, but subject to Google Terms of Service
Same Domain Restriction No
Widgetization gbsclasses.js: class-based: gbs-
Requires JavaScript programming No
Requires Additional Server No
Suitable for inclusion on III Bibrecord Display
Yes
Suitable for WebBridge Integration Yes
TICTOCLOOKUP SERVICEWeb Services & Widgets
IUG 2009 - Annette Bailey 18
JISC’s Journal Table of Contents Service
• JISC released data set for Table of Contents for journals– (ISSN, Journal Title) → RSS Feed URL
• ticTOC lookup service– Based on JISC data set
• Lives in Google App Engine (“cloud”)– http://tictoclookup.appspot.com
IUG 2009 - Annette Bailey 19
tictoclookup Service
• Keypoints: – supports ISSN and optional title– runs on Google servers– stand-alone version available
IUG 2009 - Annette Bailey 20
http://tictoclookup.appspot.com/0028-0836
{"lastmod": "Wed Apr 29 05:42:36 2009", "records": [ {"title": "Nature AOP", "rssfeed": "http://www.nature.com/nature/journal/vaop/ncurrent/rss.rdf"}, {"title": "Nature", "rssfeed": "http://www.nature.com/nature/current_issue/rss"} ], "issn": "00280836"}
Tictoclookup Widget
• A widget to access the tictoclookup service and integrate those results into web pages.
DemoDemo
21IUG 2009 - Annette Bailey
http://laurel.lib.vt.edu/record=b1251610~S1
IUG 2009 - Annette Bailey 22
Using tictoclookup in bib_display.html
IUG 2009 - Annette Bailey 23
<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript“src=“http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script> <script type="text/javascript“ src="http://yourserver/yourpath/tictoc.js"></script><script type="text/javascript" src="http://libx.lib.vt.edu/services/jquery-plugins/cluetip/jquery.cluetip.js"></script>
<!--{recordinfo:duswxzbrnjig}--> <table style="display: none" class="bibDetail"> <tbody> <tr class="bibInfoEntry"> <td class="bibInfoLabel">ticTOC</td> <td class="bibInfoData"> <span title="ISSN:millennium.issnandtitle" class="tictoc-link tictoc-preview"> <img src="/screens/16px-Feed-icon.svg.png"> Click to subscribe to the Table of Contents for this journal. </span> </td> </tr> </tbody> </table>
tictoclookup Classes
• Use <span>• Wrap span in link to RSS
Feed– tictoc-link
• Show tooltip with Table of Contents– tictoc-preview– Uses Google Feeds API– Cluetip JQuery plugin
• Implemented using JQuery
• Multiple classes can be combined
• Append journal title to end of span– tictoc-append-title
IUG 2009 - Annette Bailey 24
More info at:http://libx.lib.vt.edu/services/tictoclookup/
Using tictoclookup Classes in WebBridge
• Create a new resource in WebBridge
IUG 2009 - Annette Bailey 25
<span style="display:none“ class="tictoc-link tictoc-preview tictoc-append-title" title="ISSN:#@ISSN#:#@TITLE#"> <img align="right" src="/screens/16px-Feed-icon.svg.png" /> Subscribe to Table of Contents for </span>
Summary
IUG 2009 - Annette Bailey 26
ticTOC
Web Service ticTOC Cloud Applicationtictoclookup.appspot.com
Hosted By Google, Inc. via Google App Engine
Data Provenance JISC (www.tictocs.ac.uk)
Additional Cost Generous free quota, pay per use beyond that
Same Domain Restriction No
Widgetization tictoc.js:class-based: tictoc-
Requires JavaScript programming No
Requires Additional Server No (if using GAE), else need Apache+mod_wsgi
Suitable for inclusion on III Bibrecord Display Yes
Suitable for WebBridge Integration Yes
MAJAX 2Web Services & Widgets
IUG 2009 - Annette Bailey 27
MAJAX 2 Web Service
Millennium Server
Request:http://libx.lib.vt.edu/services/majax2/isbn/1412936381
Response:MARC record in JSON
28IUG 2009 - Annette Bailey
MAJAX Web
ServiceResponse:MARC record in HTML
Request:http://addison.vt.edu/search/i1412936381/i1412936381/1,1,1,E/marc&FF=i1412936381
MAJAX 2 Web Service
• MAJAX 2 is a proxy that connects to the Millennium server– retrieves MARC and up-to-the-minute circulation
information and converts it to JSON– written in Python– requires Apache/mod_wsgi– Source code available at:
http://code.google.com/p/majax2/
IUG 2009 - Annette Bailey 29
MAJAX 2 Service
IUG 2009 - Annette Bailey 30
http://libx.lib.vt.edu/services/majax2/isbn/1412936381
{"searchterm": "i1412936381", "recordurl": "http://addison.vt.edu/search/i1412936381/i1412936381/1,1,1,E/marc&FF=i1412936381", "results": [ {"holdings": ["DUE 05-22-09"], "locations": ["Newman 2nd Floor"], "marc": … "650": [{"i1": " ", "i2": "0", "sf": {"a": ["African American families."]}}, {"i1": " ", "i2": "0“, "sf": {"a": ["African Americans"], "x": ["Social conditions."]}}, {"i1": " ", "i2": "0", "sf": {"a“: ["Family"], "z": ["United States."]}}] … "245": [{"i1": "0", "i2": "0", "sf": {"a": ["Black families /"], "c": ["Harriette Pipes McAdoo [editor].“]}}]}
MAJAX 2 Widget
• A widget to access the MAJAX 2 web service and integrate results into web pages.
DemoDemo
31IUG 2009 - Annette Bailey
http://www.lib.vt.edu/services/newbooks/new-materials.php?subject=lnl_englit
IUG 2009 - Annette Bailey 32
Using MAJAX 2
IUG 2009 - Annette Bailey 33
<script type="text/javascript"> /* adjust these variables */ var majax2ServiceUrl = "http://libx.lib.vt.edu/services/majax2/"; var majax2OpacBase = "http://yourcatalog/search"; </script> <script type="text/javascript" src="majax2.js"></script>
<table width="340"> <tr> <td><span class="majax-syndetics-vtech" title="i1843341662"> </span> </td> <td><span class="majax-harvard-reference" title="i1843341662"> </span> <br /> ISBN: <span class="majax-marc-020" title="i1843341662"> </span> <br /> <span class="majax-linktocatalog majax-showholdings" title="i1843341662"> </span> </td> </tr></table>
MAJAX 2 Classes• Use <span>• Holdings-related
– majax-showholdings– majax-showholdings-brief– majax-showholdings-div– majax-ebook – majax-showholdingslocations
• Bibliographic Information– majax-marc-???-?– majax-harvard-reference– majax-endnote– majax-endnote-switch– majax-endnote-import
• Miscellaneous– majax-linktocatalog– majax-space– majax-newline– majax-reportfailure– majax-syndetics-yourclientid
• Multiple classes can be combined
IUG 2009 - Annette Bailey 34
More info at:http://libx.lib.vt.edu/services/majax2/
MAJAX 1 vs. MAJAX 2Majax 1 Majax 2
Web Service Screen Scraping III Record Display JSON Proxy for III Record Display
Hosted By Existing Millennium Installation /screens
WSGI/Python Script on libx.lib.vt.edu
Data Provenance Your OPAC
Additional Cost N/A Can use libx.lib.vt.edu for testing, must run WSGI-enabled web server in production
Same Domain Restriction Yes No
Widgetization majax.js:class-based: majax- classes
Requires JavaScript programming
No No
Requires Additional Server No Yes (Apache+mod_wsgi)
Suitable for inclusion on III Bibrecord Display
N/A N/A
Suitable for WebBridge Integration
Yes Yes
IUG 2009 - Annette Bailey 35
Conclusion
• Presented 3 Web Services and 3 Widgets– Easy to integrate
• Include <script> tags • Place <span> tags where you want the data to display
– Customizable• Control over where and how data displays through
classes
– Require minimal resources to setup and host• Can use /screens directory, Google or own server
IUG 2009 - Annette Bailey 36
Acknowledgments
• Assistant Professor, Dr. Godmar Back• ticTOC is a service from JISC• MAJAX user community for inspiration!
IUG 2009 - Annette Bailey 37
IUG 2009 - Annette Bailey 38
Majax 1 Majax 2 Google Book Classes ticTOC
Web Service Screen Scraping III Record Display
JSON Proxy for III Record Display
Google Book Search Dynamic Link APIbooks.google.com
ticTOC Cloud Applicationtictoclookup.appspot.com
Hosted By Existing Millennium Installation /screens
WSGI/Python Script on libx.lib.vt.edu
Google, Inc. Google, Inc. via Google App Engine
Data Provenance Your OPAC Your OPAC Google JISC (www.tictocs.ac.uk)
Additional Cost N/A Can use libx.lib.vt.edu for testing, must run WSGI-enabled web server in production
Free, but subject to Google Terms of Service
Generous free quota, pay per use beyond that
Same DomainRestriction
Yes No No No
Widgetization majax.js: class-based: majax- classes gbsclasses.js:class-based: gbs-
tictoc.js:class-based: tictoc-
Requires JavaScript programming
No No No No
Requires Additional Server
No Yes (Apache+mod_wsgi)
No No (if using GAE), else need Apache+mod_wsgi
III Bibrecord Display N/A N/A Yes Yes
WebBridge Integration
Yes Yes Yes Yes