© www.role-project.eu

How to Build & Develop Responsive Open Learning Environments with the ROLE SDK

Dominik Renzel, Dejan Kovachev, Ralf Klamma Chair of Computer Science 5 – Databases & Information Systems

RWTH Aachen University, Germany

8th Joint European Summer School on TEL (JTEL 2012) May 22, 2012, Estoril, Portugal

This work by Dominik Renzel is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported.

Motivation

Currently happening: significant shift in education From lecture to interactive (online) group work Learners, not institutions, own the education defining their lives Online learning tools cherry-picked or handcrafted by educators & learners DIY motto “create, disassemble, repurpose“ applied to educational products Learners & educators create mash-up learning apps, lessons & processes

More interaction, personalization, freedom, ownership More enjoyable, appealing, effective learning

© www.role-project.eu

Motivation

How does TEL support this shift? Widget-based PLE inherently support DIY Plethora of enabling technologies available, i.p. developer APIs

BUT... Often no customization to learning purposes Many domain-specific learning tools missing Domain expert ≠ hard-core programmer

Required: Easy-to-use APIs tailored to developing learning widgets Easy-to-use development environment for testing Developers!!!

The ROLE SDK and its APIs intend to solve some of the issues, but they are nothing without developers.

So let‘s get started…

© www.role-project.eu

Learning Objectives & Tools

Learning Objectives Widget Basics

How to create & deploy a widget How to build a widget-based PLE for development

Widget Programming with ROLE APIs How to make your widget manage shared resources –

The OpenApp API How to make your widget communicate in real-time –

The ROLE Interwidget Communication API

Reinforcement How to equip an existing widget with ROLE IWC

Tools ROLE SDK/Sandbox & ROLE APIs These slides Your instructor… ;)

© www.role-project.eu

Widget Basics – How to create & deploy a widget

© www.role-project.eu

Widget Basics

Widget Basics – How to create a widget

1. Point your browser to the template file athttp://dbis.rwth-aachen.de/gadgets/jtel2012/template.xml

2. Save file as widget.xml on your disk.

3. Open file widget.xml with your code editor.

4. Fill in widget metadata at the top (widget title, description, etc.).

5. Save your changes.

Done!

Now continue to deploy your widget under a public URL...

Widget Basics – How to deploy a widget

1. Open your SSH client

2. Establish a connection with the following details• Host: role-is.dbis.rwth-aachen.de• Port: 9022 (!!!)• Login: role-is• Pass: tmc4ULME

3. Once connected change to directory ./jtel12/g{X}4. Upload your widget file to this directory

Done!

Your widget is now ready to use under the URLhttp://role-is.dbis.rwth-aachen.de:9080/gadgets/ws/jtel12/g{X}/widget.xml

Widget BasicsHow to build a widget PLE with ROLE Sandbox

© www.role-project.eu

Widget Basics

© www.role-project.eu

The ROLE Sandbox (role-sandbox.eu)

Public installation of ROLE SDK for development & testing purposes ROLE Reference Container for Widget-based PLE

SpaceWidget List(add/remove)

Member List(join/leave)

Space Chat

Widgets(max/minimize)

Widget Basics – How to build a widget-based PLE

1. Copy the public URL of your widget to clipboard (CTRL-C)

2. Point your browser to the ROLE Sandbox: http://role-sandbox.eu

3. Sign in with your Google account

4. Create a space for your group, e.g. http://role-sandbox.eu/spaces/jtel12-g{X}

5. Add your widget to the space1. Click on +URL in the left sidebar

2. Paste the URL of your widget in the appearing dialog (CTRL-V)

3. Confirm the dialog to finally add the widget to your space

Done!

You can later add more widgets, either via URL or from the ROLE Widget Store (+Widget Store in left sidebar).

Widget Programming with ROLE APIsHow to make widgets manage resources – The OpenApp API

© www.role-project.eu

Widget Programming with ROLE APIs

OpenApp – Concept

API for Linked Data-style resource management Everything is a Resource

URI Representation Metadata Data

Resources can have sub-resources Access to sub-resources filtered by type or relation to parent

Special Resources Space is topmost resource in a space (shared) User is topmost personal resource (protected)

OpenApp – Client API

Get current space & user as resources

Get resource information (JSON object with key/value pairs)

   

var space = new openapp.oo.Resource(openapp.param.space());

space.getInfo(function(info) {alert(info);

});

openapp.oo.Resource create del getSubResources refresh

getInfo setInfo getMetadata setMetadata getRepresentation setRepresentation

var user = new openapp.oo.Resource(openapp.param.user());

OpenApp – Client API (Code Samples continued)

Create data sub-resource under space

Get space resource metadata

Find sub-resources via relation and type

   

space.create({relation: openapp.ns.role + "data", type: "my:data:namespace:uri", metadata: meta, callback: function(sub){

//do something with new sub-resource}

});

space.getSubResources({relation: openapp.ns.role + "data", type: "my:data:namespace:uri", onAll: function(arr) { //alternatively use onEach

//Do something with array of found subresources

}});

OpenApp – Browsing Resources with the Index Page

For any resource open index page with <RESOURCE_URI>/:index

OpenApp – Access Space Information

1. In the HTML section create a span to display the space name.<span id="sname"></span>

2. Bind a global variable to the current space‘s resourcespace = new openapp.oo.Resource(openapp.param.space());

3. Get space resource information to extract the space‘s name and display it in the previously created span.space.getInfo(function(info) { var spacename = info[openapp.ns.dcterms + "title"]; document.getElementById("uname").innerHTML = spacename;});

Done!Your widget can access space information. Now store custom data shared by all space members…

OpenApp – Store Custom User Data (e.g. Personal Notes)

1. In the HTML Section create UI elements to store a note.<input type="text" id="note" /><button onclick="storeNote()">Store</button>

2. Create a function storeNote storing the notefunction storeNote(){ var note = {"text":document.getElementById("note").value}; space.create({ relation: openapp.ns.role + "data", type: "my:ns:note", representation: note, callback: function(sub){window.location.reload();} });}

Done!Your widget can store notes as shared space data . Now read custom user data…

OpenApp – Read Custom User Data (e.g. Shared Notes)

1. In the HTML Section create a UI list to display all notes.<ul id="notes"/>

2. Create a function renderNotes rendering all notes as list items. function renderNotes(){ space.getSubResources({ relation: openapp.ns.role + "data", type: "my:ns:note", onEach: function(note) { note.getRepresentation("rdfjson",function(r){ var ne = document.createElement("li"); var ntext = document.createTextNode(r.text); ne.appendChild(ntext); document.getElementById("notes").appendChild(ne); }); } });}

3. Call function renderNotes on widget initialization.

Done! But how to make other space members aware of changes?

Widget Programming with ROLE APIsHow to make your widget communicate in real-time – The ROLE Interwidget Communication (IWC) API

© www.role-project.eu

Widget Programming with ROLE APIs

ROLE Interwidget Communication – Concept

© www.role-project.eu

Message-based communication between widgets in real-time Local: only within the same browser instance Remote: across browser instances ( multi-user)

Facilitates widget interoperation & remote learner collaboration

ROLE IWC – Client API

Function Description

connect(callback)

Connects the client to local interwidget communication. After successful call, the client is able to publish and receive intents. Received intents are passed to the callback function.

disconnect() Disconnects the client from interwidget communication.

publish(intent) Publishes a JSON-encoded intent.

Initialize ROLE IWC Client

var iwcClient = new iwc.Client(); iwcClient.connect(function(intent){

// process intent });

Publish ROLE IWC Intent

iwcClient.publish(intent);

© www.role-project.eu

ROLE IWC – Intent Message Format

Google Android-like Intents component(*) (String) - the component name of a specic recipient widget

(explicit intent) or the empty string to indicate broadcasting (implicit intent) sender (String) - sender & sender widget. action (String) - the action to be performed by receivers (e.g. ACTION_UPDATE) data(*) (String) - data in form of a URI (e.g. http://myresource.org/microblogs/1) dataType(*) (String) - the data type in MIME notation (e.g. text/html) categories (Array) - categories of widgets to process the intent (e.g. ["editor"]) flags (Array) - flags controlling intent processing (e.g. ["PUBLISH GLOBAL"]) extras (JSON) - auxiliary data (e.g. {"examplekey":"examplevalue“})

var intent = { "component": "", "sender":"bob@somewhere.org?

http://widget.org/sender.xml", "data":"http://data.org/some/data",

"dataType":"text/xml", "action":"ACTION_UPDATE", "categories":

["category1","category2"],"flags" :["PUBLISH_GLOBAL", "own_flag"],"extras":{"key1":"val1", "key2":"val2"}

};

© www.role-project.eu

ROLE IWC – Test Stub Widget

© www.role-project.eu

Test tool for developing with ROLE IWC List received intent messages Send custom intent messages to test widget behaviour

ROLE IWC – Add Test Stub Widget to Development Space

© www.role-project.eu

1. In your browser navigate to the space of your group.

2. Click "+ Widgetstore" in the left sidebar.

3. In the appearing widget store frame search for "iwc".

4. In result item "ROLE IWC Test Stub" click the "Select" button.

5. Click "+ ROLE IWC Test Stub" in the left sidebar.

6. (Add other IWC Demo widgets to see what the test stub does.)

Done!

With the ROLE IWC Test Stub widget you have a test tool allowing to trace & send IWC messages.

Now you are prepared to start actual coding…

ROLE IWC – Initialize & Receive Incoming Messages

1. Reopen your widget code file widget.xml

2. Import the libraries necessary for IWC by adding the following script elements to the beginning of the CDATA block.

<script src="http://dbis.rwth-aachen.de/gadgets/iwc/lib/iwc.js"></script>

3. Instantiate IWC client when widget is loaded1. Declare a global variable iwcClient: var iwcClient;

2. Within function init instantiate a new IWC client:iwcClient = new iwc.Client();

3. Bind a callback function to iwcClient for processing incoming messages: iwcClient.connect(iwcCallback);

4. Define the callback function (we’ll come back to this later):function iwcCallback(intent){console.log(intent);}

Done!Your widget can now receive messages. Off to publishing messages…

ROLE IWC – Publish Messages

1. Create a function for publishing a message on an updated note resource.function publishResourceUpdate(uri){}

2. Within body of function publishResourceUpdate…

1. Formulate an intent message, leaving the sender field empty:var intent = {

"component": "","data":uri,"dataType":"text/json","action":"ACTION_UPDATE", "flags" :["PUBLISH_GLOBAL"],

"extras" :{"ns":"my:ns:note"} };

2. Publish the intent message by using iwcClient method publish:iwcClient.publish(intent);

Done!

Your widget now publishes intents on note resource updates. Now react to incoming intents more precisely…

ROLE IWC – Reacting to Intent Messages

Within the iwcCallback function… 1. Filter the intents your widget understands, i.e. shared note updates.

if (intent.action == "ACTION_UPDATE" && intent.extras.ns == "my:ns:note"){ // react on filtered intent}

2. React on the filtered intent with a widget reload.// react on filtered intentwindow.location.reload();

Done!Your widget now reacts to intents on shared note updates.

Congrats! You have just completed a collaborative real-time note taking widget from scratch!

ReinforcementHow to equip an existing widget with ROLE IWC

© www.role-project.eu

Reinforcement

Widget Basics – How to create a widget

1. Point your browser to the widget file athttp://dbis.rwth-aachen.de/gadgets/jtel2012/microblog-noiwc.xml

2. Save file as microblog.xml on your disk.

3. Open file microblog.xml with your code editor.

4. Deploy the widget.

5. Add the widget to your space.

6. Solve the 6 tasks contained in the code 1. search for „TASK“ in the code to navigate

2. There is also one hint, which you find by searching for „HINT“

Done!

What else could you develop?

Collaborative Note-Taking Use OpenApp for managing shared space data Use ROLE IWC for real-time notification on shared space data updates

Real-time microblogging widget Extend widget with real-time notification on shared space data updates

Synchronized video player widget (code) Enable persistent management of time marks with OpenApp Publish & react to more types of IWC intents

Synchronized map navigation widget (code) Enable persistent storage of map views with OpenApp Publish & react to IWC intents about added/deleted map views

Collaborative sketching widget (code) Persist sketches with OpenApp Broadcast current cursor positions via IWC

Your own idea? You could win an ipad...

© www.role-project.eu

CfP – ROLE Widget Enchantment Competition

© www.role-project.eu

Evaluation

Please evaluate NOW:http://fit-bscw.fit.fraunhofer.de/bscw/bscw.cgi/39791032

© www.role-project.eu

CfP – Related JTEL 2012 Workshops

Thank you for coming & Enjoy JTEL 2012!

You are cordially invited to come to our other workshops: Thursday, May 24, 14:00 – 15:30;16:00 – 17:30

Personalised Support for Self-Regulated Learning (Nussbaumer, Kravcik, Klamma)

Friday, May 25, 09:00 – 10:30Basics of Paper Writing and Publishing in TEL – Part 2 (Derntl, Kravcik, Klamma)

© www.role-project.eu

Visit the ROLE project pagerole-project.eu

Download the ROLE SDK sourceforge.net/projects/role-project

Try the ROLE Sandboxrole-sandbox.eu

Enter the ROLE Widget Competitionrole-project.eu/WidgetCompetition

Join ROLE on LinkedInlinkedin.com/groups?gid=1590487

Share your widgets in the ROLE Widget Storerole-widgetstore.eu/

© www.role-project.eu