[p2pu-dev] Towards a P2PU API and Plugin Architecture

[Dan Diebolt]

*Towards a P2PU API and Plugin Architecture*

This post introduces the idea of defining and developing a P2PU API and
Plugin Architecture. Since everyone is busy building out badges and streams
to support curriculums, courses and platform features that don't exist or
are under performing I created my own emulator to demonstrate these idea.

Using a modified version of our beloved Lernanatron Chrome Extension:

http://p2pu.org/en/groups/lernanatron/content/expando-roster-2/

I created a special embed code that gets inserted in the to CKEditor that
looks something like this:

*{lernanatron2:P2PU_GetUserProfile handle=jessica format=jsonp
callback=callback}*

You can see the embed code here assuming you do not have the Lernanatron
extension installed (in which case the API would automatically execute and
render):

http://p2pu.org/en/groups/lernanatron/content/p2pu-api-test/

When the page above loads, the Lernanatron Chrome extension is fired up and
the bootstrap logic within executes or loads additional javascript code to
modify the the page. We are off to the races and can make the P2PU platform
do our bidding.

Since there is no P2PU API I simply created one by dynamically loading P2PU
pages using jQuery's ajax methods and scraped the needed info. Querying a
database would o course be a lot easier but it is remarkably simple to just
scrape the data that is littered about human readable pages. More
importantly, it is vastly faster and less trouble to just use client side
methods to explore ideas and prototype.

In any event, the above embed code basically load's Jessica's profile page,
scrapes it and returns the data in a structured format (JSON). This page was
chosen merely because Jessica has a fairly complete profile. You can see the
response here:

http://jsonviewer.stack.hu/#http://pastebin.com/raw.php?i=q6TggP7D

and compare it to the information carried in actual profile page (with a lot
of filler):

http://p2pu.org/en/jessica/

There are some short branches in the response so you will want to look in
the "activities" and "user" branches where the bulk of the profile info
reside. Yes I am making this up as fast as I can type code so don't put much
stock on the structure of the data.

Here is a larger list of conceptual API methods limited to get methods since
there really isn't anything to set:

https://gist.github.com/1291496#file_conceptual+p2_pu+api+get+methods

Big deal, what you you do with it? Well consider the question of embedding
external content into the P2PU platform and integrating with external
services. In a prior missive I demonstrated how you can use HTML5's
postMessage feature to send data back and forth with an external page using
this emulated mockup of a task on P2PU's page:

https://www.quickbase.com/db/bgnbbn622?a=dbpage&pageID=4

Here are the essential guts of the above example simplified if you want to
get to the core of the code without the p2pu branding and theming:

https://www.quickbase.com/db/bgnbbn622?a=dbpage&pageID=5

http://jsfiddle.net/dandiebolt/BH76D/show/

In a nutshell, the user name is passed from the (emulated) p2pu.org page to
the external page and the answer to the math question is sent back to the
p2pu.org page. Normally you can't do this because of the same origin policy.
But you can do it because the code uses HTML5's postMessage capability. This
is bidirectional transfer of information between the (emulated)
p2pu.orgpage and jsbin /jsfiddle page which anyone could created
(without messing
with a server setup).

In this case we are passing a string between the two pages - either a name
or an answer to a question. But the postMessage feature we are using is not
limited to passing strings - it can pass an entire objecct such as the
P2PU_GetUserProfile response listed above and repeated here for emphasis:

http://jsonviewer.stack.hu/#http://pastebin.com/raw.php?i=q6TggP7D

What else could you do with this scheme beyond sending strings and API
response back and forth? Well if you developed some type of official but
lightweight protocol defining the format of the messages you could send
requests and response to the external tool that communicated things such as:

  the user's identity and profile info
  the school, course in context
  the state of the task in contenxt
  the course roster
  the position a user is in completing tasks and their progress

and either perform useful services within the external tool such as:

  administer an external survey
  generate a task completion report
  hook into external services preserving the user's identity
  link to external or local databases preserving ownership

and potentially send back to p2pu.org results such as:

  feedback
  evalutaions
  scores
  assessments

So a simple quiz such as this one embedded into p2pu:

http://p2pu.org/en/groups/lernanatron/content/simple-quiz/

could actually send the user identity and level to the external tool and
record the results back into the p2pu databases. Also worth noting is that
although these two examples above embedded content into the p2pu platform,
the same scheme will work equally well between two tabs or windows. So if
you are not an "embedder" you can be a "tabber" or a "windower" and work
with the external tool or service in its own page and still preserve the
bidirectional communications between p2pu.org and the external end point.

Well that's if - you either grok the idea or you don't.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.p2pu.org/pipermail/p2pu-dev/attachments/20111017/57c3729e/attachment.html>