go! go! gadgets. writing an opensocial application

Go Go Gadgets!Building an OpenSocial Application

Mark HalvorsonCommunity Member, OpenSocial Foundation BoardChief Imagineer, Atlassian Software

Email: mark.halvorson@atlassian.comTwitter: @halv0112

Monday, December 6, 2010

What is an ‘Imagineer’?Monday, December 6, 2010

Take things that exist...

...and make something different.

Agenda

•What it is a Gadget•Why Atlassian chose OpenSocial•Application Portability

•Why you should too!•Application Sharing

6Monday, December 6, 2010

What is OpenSocial?

Social Data Model

Web Service APIs

Gadgets

Our Problem

Before

FishEyeSourceCode

JIRAIssues&Tasks

ConfluenceWiki

•Enterprise Apps are Silos

Emphasize Teams, Projects & Tasks over Tools

Too Many Dashboards

Cross-Product Sharing

Integration with Non-Atlassian apps

Solution: OpenSocial Gadgets

Gadgets

are a Great Solution for Dashboard

Open standard for enterprise application connection

viewcompleteproject

singleacCvity

Not just about portals,or internal applications.

Managers Do Email

viewacCvity&status

createissues

Open Standards, Industry Support

Why Write Gadgets?

•They’re easy!

•They use stable, widely accessible and understood technologies

•Write once, display everywhere

The Obligatory Hello World Example

Anatomy of a Gadget

•XML Spec File•Metadata, HTML Content, and JavaScript

Anatomy of a Gadget

•Core JavaScript API•Access Preferences, Make Requests

Anatomy of a Gadget

•Core JavaScript API•Access Preferences, Make Requests

•Gadget Features•Additional, Optional Capabilities & APIs

XML Spec File

<?xml version="1.0" encoding="UTF-8" ?><Module> <ModulePrefs title="JIRA Issues" author="Atlassian" thumbnail="http://labs.atlassian.com/svn/GADGETS/trunk/jira-issues/basic/jira-issues-thumbnail.png" description="A list of recently created Issues">

</ModulePrefs>

</ModulePrefs>

</ModulePrefs>

Views - DEFAULT view

Views - CANVAS view

Views - DEFAULT view (in Gmail)

Views - CANVAS view (in Gmail)

Views - Custom view

Wallboards

Gadgets go beyond theJIRA Dashboardonto your wall!

Wallboards

Gadgets go beyond theJIRA Dashboardonto your wall!

JavaScript

// Create minimessage factoryvar msg = new gadgets.MiniMessage();// Show a small loading message to the uservar loadMessage = msg.createStaticMessage("loading...");

// Get configured user prefsvar prefs = new gadgets.Prefs();var showDate = prefs.getBool("show_date");var showSummary = prefs.getBool("show_summ");var numEntries = prefs.getInt("num_entries");

// Fetch issues when the gadget loadsgadgets.util.registerOnLoadHandler(fetchIssues);

JavaScript

Requesting Data from Web Services

•AJAX + DOM

•OAuth

•Request Proxy

gadgets.io.makeRequest()

What Can You Call?

•Any URL

•XML and JSON are the most useful•

Fetching Issues

function fetchIssues() { var url = "http://jira.atlassian.com/sr/" + "jira.issueviews:searchrequest-xml" + "/temp/SearchRequest.xml?" + "created%3Aprevious=-1w&resolution=-1" + "&sorter/field=issuekey&sorter/order=DESC" + "&sorter/field=created&sorter/order=DESC" + "&tempMax=20";

var params = {}; params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM;

gadgets.io.makeRequest(url, handleResponse, params);}

Handling the Response

function handleResponse(obj) { var domData = obj.data;

var jiraIssues = { title : getTitle(domData), items : getItems(domData) }; renderJiraIssues(jiraIssues);

msg.dismissMessage(loadMessage); gadgets.window.adjustHeight();}

Handling the Response

function handleResponse(obj) { var domData = obj.data;

var jiraIssues = { title : getTitle(domData), items : getItems(domData) }; renderJiraIssues(jiraIssues);

msg.dismissMessage(loadMessage); gadgets.window.adjustHeight();}

TextText

An ExampleReal World Example...Monday, December 6, 2010

TextText

The Goal

The Goal47

48The Result

49Preferences

Statistics

Let’s Take a Step Back.

Q: What is the purpose of an application?

•A: DO Something. Complete some process.

Anatomy of an Application

Context Content Ac(on

An ExampleGmail

Communica(on

ContactsMail

ReadWriteReply

Q: What is the purpose of a gadget?

•A: DO Something. Complete some process.

Gadget = ReusableMini‐ApplicaCon

Context

Content

AtomicUnitofWork

Context

Content

Example - “Mini-Application”

JIRACommentGadget

JIRA‐1234

AddComment

UsersComment

JIRACommentGadget

Context

UsersComment

AddComment

Example - Unit of Work

JIRACommentGadget

Context

UsersComment

AddComment

Example - Unit of Work

Lesson Learned over time:

•Gadgets as “Units of Work” are...

• Easier to build

• Easier to use

• Easier to reuse

Composite Application

Gadget

Context

Content

Gadget

Context

Content

Context

Gadget

Add’lContext

ContentContent

Example - Gmail

GoogleCommunicaConApplicaCon

Communica(on

ContactsMail

ReadWriteReply

GoogleTalk

ReadWriteReply

Presence

<demo>

Get Satisfaction

Gadgets?

Gadget? Gadget?

Gadget

Gadget!

Gadget

Get Satisfactionpowered by JIRA

Gadgets!

67Gadget!

Gadget!

</demo>

Summary - Why write gadgets?

•Easy!• Simple web based technologies mean anyone can write a gadget.

•Reusable!•Use in any OpenSocial Container. iGoogle, Gmail, JIVE, more every day.

•Fun!• Thinking about applications as atomic units of work add a new dimension to

application design.

Questions?

Resources• http://atlassian.com/opensocial

• http://www.opensocial.org

• http://atlassian.com/classroom

go! go! gadgets. writing an opensocial application

views default view

new gadgets

opensocial gadgets

configured user prefsvar

views canvas view31monday

minimessage factoryvar

prefsvar showdate

views custom view34monday

Technology

opensocial dashboard

opensocial codelab

go go gadgets

developing opensocial gadgets for ibm connections 4 ·...

expertmeeting opensocial portals - edukapp

myspace developer platform dive into opensocial maxwell...

opensocial & yap

data spec opensocial

getting social with opensocial

opensocial 2.0 sandbox embedded experiences, and how your...

opensocial kevin marks chris chabot agenda introduction -...

go go gadget: apps, gadgets and tools to techsy-fy your...

travel gadgets worth carrying on the go

plannen code jam opensocial gadgets

opensocial intro

building opensocial apps

opensocial gadgets at eclipse

implementing an opensocial container

barcamphanoi opensocial application development

building polargrid portal using gadgets and opensocial