Tutorial: Creating a Libapp (www.adlibris.com)

This tutorial will take you step by step through the process of creating a Libapp for adlibris.com
We will compose this application with three modules.

  1. Find the ISBN on the page
  2. Find the location on the page where it should be inserted
  3. Insert the cue into the page

Initial Setup:
This tutorial uses the following:

A LibX 2.0 edition
This tutorial assumes that you have a LibX 2.0 edition set up, and know the basics behind creating and editing feeds and modules

Firebug – Firefox extension
We will use the Javascript Console, as well as the HTML inspector abilities of Firebug to help us find the elements on the page that we need to extract.

jQuerify – bookmarklet
This bookmarklet will load jQuery into the page, enabling you to use jQuery commands from the Firebug console. Note that on some pages, such as adlibris, the $() function does not work, and you must use jQuery() instead.

Finding the ISBN on the page
This module will extract the ISBN from the page and write it to the tuple space.
First, navigate to the page which we want to modify. In this instance, we are modifying the book pages on www.adlibris.com/se. For this example, I will be using the page http://www.adlibris.com/se/product.aspx?isbn=9100120685

First, open the Firebug console

This is accomplished by clicking the Firebug icon in the lower right hand corner of the screen

Opening Firebug Console

Choose Inspect

Click on the select icon in the upper-left corner of the Firebug console

Click on the select icon in the upper-left corner of the Firebug console

Select the ISBN node on the page, a blue box should appear around the ISBN text node

Click on the ISBN within the page to highlight the corresponding element in the Firebug HTML view

Once the appropriate node is highlighted, click on it to highlight the corresponding element in the Firebug HTML view

Now examine the selected span in the Firebug HTML view

We are examining the span element that contains the ISBN, looking for something unique about it that we can use to find it within the page

Examine the span element that contains the ISBN, looking for something unique about it that we can use to find it within the page

We see that the span has an ID attribute which we can use to find it within the page.

For this next part, we need to insert jQuery into the page. Instructions for this can be found by following the jQuerify link at the top of the pageTo test this, we click on the Console Firebug tab, and enter the following command

jQuery("#ctl00_main_frame_ctrlproduct_lblIsbn")

This should produce the following result in the results pane.

The result of running the above expression

The result of running the above expression

Next, we need to get the text out of the span tag, this is accomplished by using jQuery’s text() function as follows:

jQuery("#ctl00_main_frame_ctrlproduct_lblIsbn").text()  // "ISBN10: 9100120685"

We just want the ISBN, so we will do some string manipulation to seperate it from the the rest of the text ( the following is one statement split onto multiple lines for readability )

var isbn =

jQuery("#ctl00_main_frame_ctrlproduct_lblIsbn").text() // "ISBN10: 9100120685"
.split(":")[1]     // " 9100120685"
.replace(" ", ""); // "9100120685"

Now that we know how to extract the ISBN from the page, we will create the module itself

The first part of the module is the header. This provides some metadata information about about the module, as follows:

Author-Name: LibX Team
Author-URI: http://libx.org
Author-Email: libx.org@gmail.com
Description: Adlibris ISBN Scraper
Include: /adlibris/
Require: jquery

The important parts here are the Include and the Require statements. The include statement limits which pages we want to run this module on. The require statement says that we need the jQuery library to be loaded in order to run.

Now, the body of the module. First, we will include the code from above to get the ISBN from the page.

var isbnNode = jQuery("#ctl00_main_frame_ctrlproduct_lblIsbn")
var isbn = isbnNode.text().split(":")[1].replace(" ", "");

Then we just need to write it into the tuple space:

libx.space.write ( {
isbn: isbn
} );

Now we have completed the first module. Save this module as adlibris.getisbn.mod

Author-Name: LibX Team
Author-URI: http://libx.org
Author-Email: libx.org@gmail.com
Description: adlibris ISBN Scraper
Include: /adlibris/
Require: jquery

var isbnNode = jQuery(“#ctl00_main_frame_ctrlproduct_lblIsbn”);
var isbn = isbnNode.text().split(“:”)[1].replace(” “, “”);
libx.space.write ( {
isbn: isbn
} );

Finding the position where we want to insert the cue

For this example, we are going to insert it directly after the title.
This module will write one HTML Element to the tuple space, indicating where the
cue should be inserted.

Using the “Inspect” feature of Firebug, select the book title on the page, then examine it in the Firebug Console’s HTML view. We can see that the title element also has an ID attribute. Remember that jQuery returns a wrapped HTML element, so we need to extract the HTML Element from the object before we put it into the tuple space, which is done using array syntax ( so [0] to access the first element )

Save this module as adlibris.getposition.mod

Author-Name: LibX Team
Author-URI: http://libx.org
Author-Email: libx.org@gmail.com
Description: Find Position of Title in Adlibris
Include: /adlibris/
Require: jquery

var titleNode = jQuery(“#ctl00_main_frame_ctrlproduct_lblProductTitle”)[0];
if ( titleNode ) {
libx.space.write ( {
position: titleNode
} );
}

Displaying the Cue

For displaying the cue, we will use the “searchbyisbn” module.

Putting it all together

Create the libapp: adlibris.app


Author-Name: LibX Team
Author-URI: http://libx.org
Author-Email: libx.org@gmail.com
Description: Link Adlibris By ISBN
Include: /adlibris/

adlibris.getisbn
adlibris.getposition
searchbyisbn

To enable this libapp, you will need to copy the modules, as well as the app to your root directory. You will also need to add “adlibris” to your libxcore.pkg file in order to include it.

Summary

1. Create adlibris.getisbn.mod

2. Create adlibris.getposition.mod

3. Create adlibris.app

4. Add “adlibris” to your package ( libxcore.pkg is the default )

5. Update your client ( LibX Preferences -> Developer -> Cache Control -> http://hostname/libapp -> Purge )

6. The cue should appear as below! ( With your editions icon displayed )

The final result after updating the appropriate files, and purging the libapp feed, should look something like this

After modifying your feed and purging the old one, you should now see the cue appear on the page