Barcamphanoi Opensocial Application Development

OpenSocial Application Development

4 th year HUT student

Hanoi-Aptech student

Work for eXo Platform SEA

Tech events: OpenSocial Hackathon, PHP Day, BarCamp Hanoi, Tweetup, Meetup, H4, etc.,

Tags: - OpenSocial - Web Standard - Fun URLs: http://hoatle.net http://twitter.com/hoatle

Agenda

OpenSocial Introduction

How to build OpenSocial Applications

Upcoming features

Challenges

OpenSocial Introduction “ The web is better when it's social.” So what does “social” mean?

What does “social” mean? Eliette, what do you do with your friends?

What does “social” mean?

What does “social” mean? “ Talking”

What does “social” mean?

Social Networks

3 features of a social network:

Discover and Share (Search)

Create and Share (Content)

Discuss and Share (Communicate)

Social networks include:

Profiles: Who you are

Friends: Your relationships

Activities

A Social Network

Social Networks

Manage large number of users and relationships

Is slow to add new features

Social Networks

A social application:

Lets the social network manage users and relationships

Adds new features to the social network

Let users “install” the application without signing up for new accounts

Grows quickly because users are already communicating to each other

Social Networks

Need for a social API

How do we put applications in social networks???

Need for a social API

Introduction to OpenSocial

19+ implemented containers

40+ committed containers

3000+ applications

400,000,00+ users

(From Google Devfest Bangkok - 10/2008)

Where is OpenSocial live today?

Live to users

hi5

LinkedIn

MySpace

orkut

Netlog

Yahoo!

Friendster

Ning

Google Friend Connect

Live to developers

IGoogle

Gmail

imeem

Yoja

CityIN

....

Full list: http://wiki.opensocial.org/index.php?title=Containers

OpenSocial APIs

Versions

0.6 – Client-side APIs introduced

0.7 – Server-side APIs introduced

0.8.1 – Server-side APIs finalized

0.9 – current development

Client-side:

Gadgets XML

Gadgets JavaScript

OpenSocial JavaScript

Server-side: RESTful protocol, RPC protocol

How to build OpenSocial app

OpenSocial app =

Gadgets + Gadgets JavaScript + OpenSocial JavaScript

Gadgets

XML file

Meta data definition

Highly cacheable + no high performance server requirement

HTML for markup, structure

CSS for presentation

JavaScript for interactivity, behavior

Gadgets

Views?

- Gadgets can be rendered in different locations on a container

- Certain page might be pubic, some are private

- View provide a way for gadgets to provide different functionality depends on where it is rendered

Gadgets

Gadgets JavaScript

gadgets.io.makeRequest() - cross-domain ajax call

gadgets.json.parse() and gadget.json.stringify()

gadgets.util.escapeString()

gadgets.util.registerOnloadHandler()

...

It's people:

- VIEWER, OWNER?

- Persistent data

Persistent data:

Give apps key, value storage directly on the container

String only, JSON conversion for complex data

Storage per app per user – scales well

Ideal for settings, customizations

Upcoming features

Caja:

Reduces threats with a JavaScript sanitizer as an additional “sandbox” on top of Iframe protection

Prevent gadgets from being used for phising, spam, malware, etc.,

Upcoming features

Templating:

Developers need a simple way to convert OpenSocial data to HTML

DOM manipulation is slow and ugly

Templating <script type="text/os-template"> ${Viewer.displayName}'s friends:<br/> <div repeat="ViewerFriends"> <img src="${Cur.thumbnailUrl}" width="32" height="32"/> <a href="${Cur.profileUrl}" target="_new">${Cur.displayName}</a> </div> </script> See more: http://ostemplates-demo.appspot.com/

Challenges