<div><b>Towards a P2PU API and Plugin Architecture</b></div><div><br></div><div>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.</div>
<div><br></div><div>Using a modified version of our beloved Lernanatron Chrome Extension:</div><div><br></div><div><a href="http://p2pu.org/en/groups/lernanatron/content/expando-roster-2/">http://p2pu.org/en/groups/lernanatron/content/expando-roster-2/</a></div>
<div><br></div><div>I created a special embed code that gets inserted in the to CKEditor that looks something like this:</div><div><br></div><div><b>{lernanatron2:P2PU_GetUserProfile handle=jessica format=jsonp callback=callback}</b></div>
<div><br></div><div>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):</div><div><br></div><div><a href="http://p2pu.org/en/groups/lernanatron/content/p2pu-api-test/">http://p2pu.org/en/groups/lernanatron/content/p2pu-api-test/</a></div>
<div><br></div><div>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.</div>
<div><br></div><div>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.</div>
<div><br></div><div>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:</div>
<div><br></div><div><a href="http://jsonviewer.stack.hu/#http://pastebin.com/raw.php?i=q6TggP7D">http://jsonviewer.stack.hu/#http://pastebin.com/raw.php?i=q6TggP7D</a></div><div><br></div><div>and compare it to the information carried in actual profile page (with a lot of filler):</div>
<div><br></div><div><a href="http://p2pu.org/en/jessica/">http://p2pu.org/en/jessica/</a></div><div><br></div><div>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.</div>
<div><br></div><div>Here is a larger list of conceptual API methods limited to get methods since there really isn't anything to set:</div><div><br></div><div><a href="https://gist.github.com/1291496#file_conceptual+p2_pu+api+get+methods">https://gist.github.com/1291496#file_conceptual+p2_pu+api+get+methods</a></div>
<div><br></div><div>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:</div>
<div><br></div><div><a href="https://www.quickbase.com/db/bgnbbn622?a=dbpage&pageID=4">https://www.quickbase.com/db/bgnbbn622?a=dbpage&pageID=4</a></div><div><br></div><div>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:</div>
<div><br></div><div><a href="https://www.quickbase.com/db/bgnbbn622?a=dbpage&pageID=5">https://www.quickbase.com/db/bgnbbn622?a=dbpage&pageID=5</a></div><div><br></div><div><a href="http://jsfiddle.net/dandiebolt/BH76D/show/">http://jsfiddle.net/dandiebolt/BH76D/show/</a></div>
<div><br></div><div>In a nutshell, the user name is passed from the (emulated) <a href="http://p2pu.org">p2pu.org</a> page to the external page and the answer to the math question is sent back to the <a href="http://p2pu.org">p2pu.org</a> 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) <a href="http://p2pu.org">p2pu.org</a> page and jsbin /jsfiddle page which anyone could created (without messing with a server setup).</div>
<div><br></div><div>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:</div>
<div><br></div><div><a href="http://jsonviewer.stack.hu/#http://pastebin.com/raw.php?i=q6TggP7D">http://jsonviewer.stack.hu/#http://pastebin.com/raw.php?i=q6TggP7D</a></div><div><br></div><div>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:</div>
<div><br></div><div>  the user's identity and profile info</div><div>  the school, course in context</div><div>  the state of the task in contenxt</div><div>  the course roster</div><div>  the position a user is in completing tasks and their progress</div>
<div><br></div><div>and either perform useful services within the external tool such as:</div><div><br></div><div>  administer an external survey</div><div>  generate a task completion report</div><div>  hook into external services preserving the user's identity</div>
<div>  link to external or local databases preserving ownership</div><div><br></div><div>and potentially send back to <a href="http://p2pu.org">p2pu.org</a> results such as:</div><div><br></div><div>  feedback</div><div>  evalutaions</div>
<div>  scores</div><div>  assessments</div><div><br></div><div>So a simple quiz such as this one embedded into p2pu:</div><div><br></div><div><a href="http://p2pu.org/en/groups/lernanatron/content/simple-quiz/">http://p2pu.org/en/groups/lernanatron/content/simple-quiz/</a></div>
<div><br></div><div>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 <a href="http://p2pu.org">p2pu.org</a> and the external end point.</div>
<div><br></div><div>Well that's if - you either grok the idea or you don't.</div>