buiding application for social networks

BUIDING APPLICATIONfor

SOCIAL NETWORKS

Đỗ Duy TrungHai Phong Aptech

Agenda

• Overview• How to create application for Social Network?• Social Network Architecture• Fundamentals & requirements for building

application• Demo• Q&A

What is Social Network?

• A social structure made up of actors: – Individuals– Organizations

• The dyadic ties between these actors:– Relationships– Connections– Interactions

Or in plain English:Social networks are essentially about who know who, and who know what.

Advantages of Social Networking?

• Work connections• Keeping in touch• Get feedback• Share multiple points of view• Talking to other persons• Stay in touch anywhere

How do you typically train your team to use an authoring tools?

What is Social computing?

• Social behavior:– blogs, email, instant messaging, social network

services, wikis, social bookmarking• Computation:

– collaborative filtering, online auctions, prediction markets, reputation systems, computational social choice, tagging, and verification games

How can we share?

• A social networking service (SNS) is an online service that focuses on building and reflecting of social relations among people, e.g., who share interests and/or activities

• Basic services– Profile– Friend list– Wall, status, photo, blog….

Example of Social Networks1. Social Networking : Facebook, Zing.Me, Go.vn, G+, Bang.vn, Banbe.net …2. Social News : Linkhay, Newsvine, Digg, 3. Social Measuring : Technorati, BlogPulse 4. Microblogging : Twitter5. Blogs : Opera, Yahoo+, Blogspot, WP6. Social Bookmarking : Diggo, Delicious7. Social Q&A : Google, Yahoo answer, Vatgia8. Video Sharing : Youtube, Viadeo,Clip.vn9. Photo Sharing : Picasa, Flickr, tamtay.vn10. Social Search : Google vertical search11. Professional Networks : Calavat, Hoclamgiau12. Community Groups (Forum):Tinhte.vn, webtretho.com, phuot.vn…13. Blogging Communities 14. Document shares : Slideshare.net, tailieu.vn

15. Social knowledge : Wiki16. Social job : Linkedin, calavat, TVN17. Social shop : Vatgia, chodientu.vn18. Social reviews: Aha, Vatgia , agoda 19. Social lens : Squidoo20. Social study : Violet.vn, Tienganh123…21. Coupons network : Grouponvietnam.com 22. Social map : Wikimap, GGmap, diadiem, bando, thodia.vn23. Social chat : Yahoo chatgroup, Bebo, Paltalk, Yola.vn , Zingchat24. Social Game : Zing, VTC, Ongame…25. Social music : Yeucahat.com…26. Social bid : Chodientu.vn, daugianguoc27. Social health: Bacsi.com, khamchuabenh28. Social application/widget : Apple storeGitHub - Social Coding (for developers)

Users after launch

Members – March 2012

Referral Traffic January 2012

How to build a social network(references)

• Programming Social Applications - Jonathan Le Blanc• OpenSocial Network Programming - Lynne Grewe• ASP.NET 4 Social Networking - Atul Gupta,

Sudhanshu Hate, Andrew Siemer• PHP 5 Social Networking - Michael Peacock• Drupal 7 Social Networking - Michael Peacock• Web Mining and Social Networking - Guandong Xu,

Yanchun Zhang, Lin Li• …

How to create application for Social Network?

What can applications do?

• Encourage communication & collaboration between members• Allow members to be more expressive in how they present their professional identities• Provide novel functionality that leverages a member's social network in a moment of need

Vocabulary

• They are not widgets?• Or gidgets…• They are gadgets!

Gadget

• Gadget is really just a mask for something greater....

• Gadget is just one face of an application

Meet the actors

• Viewer– Always the member currently viewing the gadget.

• Owner– The member who owns the profile being looked

at. Sometimes also the owner of a canvas page.

Meet the container

• A container is a social network that provides an environment for Javascript and REST calls, "view" for gadgets to surface on, and underlying Social Data.

Meet the view• Home Page:

– Primary point of entry for members– Owner & Viewer are always the same– Content should be focused on the Member's interaction with the application

• Profile Page– Owner is the person who owns the profile– Information displayed is seen by all who visit the profile– Content should be focused on what the member does with the application

• Canvas– Serves many purposes & contexts for an application– Owner & Viewer might not be the same. Owner is determined by how it was

navigated to– Content can be anything related to the application

SocialSite Architecture

Home Server/ Back-end Client/Front-endContainer

Apps GadgetsSocial Network

OpenSocial Architecture

Container

• Display (Core Gadget Container): – Widgets in a portal: news, weather forecast,

music, video...• Social Graph connection (Social Gadget

Container): – Gadgets with social data: friends list, groups,

activities...

Anatomy of an Open Application

Fundamental of SNS

• Web API• Protocol: HTTP, SOAP, REST• Data Format: JSON, ATOM, XML• Security: OpenID, OAuth

Web API

Google (96): Google Buzz API, Google Plus APIFacebook (8): Facebook API, Graph API, Social Plugin, RealtimeTwitter (3): Twitter API, Twitter Streamming API….

Web Services• are the key point of Integration for different applications

belonging to different – Platforms– Languages– Systems

• Protocols– SOAP (Simple Object Access Protocol). SOAP revolutionized RPC and

loose coupling beyond the restrictions posed by earlier protocols– HTTP based APIs refer to APIs that are exposed as one or more HTTP

URIs and typical responses are in XML / JSON. Response schemas are custom per object

– REST on the other hand adds an element of using standrdized URIs, and also giving importance to the HTTP verb used (ie GET / POST / PUT etc)

SOAP vs REST

• The main advantages of REST web services are:– Lightweight – not a lot of extra xml markup– Human Readable Results– Easy to build – no toolkits required

• SOAP also has some advantages:– Easy to consume – sometimes– Rigid – type checking, adheres to a contract– Development tools

RESTful web service (RESTful web API)

A simple web service implemented using HTTP and the principles of REST. It is a collection of resources, with four defined aspects:• URI http://example.com/resources/ • Media type of the data supported is often JSON,

XML , YAML or a valid Internet media type.• HTTP methods (e.g., GET, PUT, POST, or DELETE).• The API must be hypertext driven

REST

HTTP SQL CRUDPOST INSERT CreateGET SELECT ReadPUT UPDATE UpdateDELETE DELETE Delete

REST API or Graph API

• Rest API• Graph API

Graph API

• https://graph.facebook.com/ID• https://graph.facebook.com/ID/

CONNECTION_TYPE• https://graph.facebook.com/220439?

access_token=...

Social Graph API

OpenID vs OAuth

• OpenID is about authentication to many sites with one username.

• Using login credentials from an OpenID provider (Google) to login to another application (Stack Overflow)

• OAuth is about authorization – application or site A has permission to call site B's ap

• Allowing an application (TwitPic) to act on your behalf to and access information from an application that you use (Twitter)

Authentication

login

OK

permission

Allow

API

User

App

/authorize?client_id&redirect_u

ri

/redirect_uri?code=

/access_token?code&client_id&client_secret

access_token

1

2

JSON: The Fat-Free Alternative to XML

• JSON object

{

"name": "Jack (\"Bee\") Nimble", "format": {

"type": "rect", "width": 1920, "height": 1080, "interlace": false, "frame rate": 24

} }

• JSON arrays

["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

[ [0, -1, 0], [1, 0, 0], [0, 0, 1] ]

RSS 2.0 vs Atom 1.0<?xml version="1.0" encoding="utf-8"?><rss version="2.0"> <channel>

<title>Example Feed</title> <description>Insert witty or insightful remark here</description> <link>http://example.org/</link> <lastBuildDate>Sat, 13 Dec 2003 18:30:02 GMT</lastBuildDate> <managingEditor>johndoe@example.com (John Doe)</managingEditor>

<item> <title>Atom-Powered Robots Run Amok</title> <link>http://example.org/2003/12/13/atom03</link> <guid isPermaLink="false">urn:uuid:1225c695-cfb8-4ebb-aaaa-80da344efa6a</guid> <pubDate>Sat, 13 Dec 2003 18:30:02 GMT</pubDate> <description>Some text.</description> </item>

</channel></rss>

<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom">

<title>Example Feed</title> <subtitle>Insert witty or insightful remark here</subtitle> <link href="http://example.org/"/> <updated>2003-12-13T18:30:02Z</updated> <author> <name>John Doe</name> <email>johndoe@example.com</email> </author> <id>urn:uuid:60a76c80-d399-11d9-b93C-0003939e0af6</id>

<entry> <title>Atom-Powered Robots Run Amok</title> <link href="http://example.org/2003/12/13/atom03"/> <id>urn:uuid:1225c695-cfb8-4ebb-aaaa-80da344efa6a</id> <updated>2003-12-13T18:30:02Z</updated> <summary>Some text.</summary> </entry>

</feed>

Requirements

Provider• Social Network Platform

– Web API

• Authentication– OAuth– OpenID

• SDKs• Canvas• Plugin

Developer• Programming Languages

– Javascript, PHP, Java, C#,…

• Application– APP_ID– APP_SECRET

• Tools• Coding & pulishing• Integrating & embeding

I'm a developer - how do I get involved?

Use the API

• REST protocol• RPC protocol• Javascript API• Graph API

Method Summary

• String getDisplayName()• String getField(key, opt_params)• String getId()• Boolean isOwner()• Boolean isViewer()• ….

Authenticate with OAuth

Get Information! 

Including: 

ABOUT_ME, ADDRESSES, CARS, FASHION 

and many more

I'm a serverBe a Container

• - Adding and removing friends • - Adding and removing apps • - Storing activities • - Retrieving activity streams for self and friends • - Storing and retrieving per-app and per-app-per-user

data SO • Put your socialness out there for others to use• Shingdig (apache)

Facebook

• REST, JSON Open Graph protocol• OAuth 2.0 • Social Plugins• SDK: iOS, Android, PHP, JavaScript, ...

OpenSocial?

• Open, standard, application model that enables Social Web Applications• Writing applications specifically for a single API• “Write once, run everywhere”

OpenSocial?

• Standard Internet technologies (HTML, CSS, JS)

• Simple, XML definition• Ajax• Standard based authorization model• Add social context to requests

Facebook vs OpenSocial

Facebook• FBML • FQL • FBJS• Partial support for ajax

OpenSocial• XHTML / XML• JavaScript

• Full support for ajax

The web is better when it's social

OpenSocial enables apps,containers, and other clients to collaborate and move the social web forward.

A typical gadget based portal

Demo

• https://apps.facebook.com/nhip_sinh_hoc/

Thank you!

Your feedback is a gift!

HPA Forum: @TrungDDFacebook: @doduytrungTwitter: @doduytrungLinkedin: @doduytrungPinterest: @doduytrungGoogle+: @doduytrung

References

• Developer's Guide to Social Programming - Mark D. Hawker• Programming Social Applications - Johnathan LeBlanc• wikipedia.org• http://vincos.it/world-map-of-social-networks/• http://vinalink.vn/• http://developer.yahoo.com• https://developers.facebook.com/• http://opensocial.org• http://www.slideshare.net/rsandhu1/open-social-frameworks• http://www.mediabistro.com/alltwitter/pinterest-social-comp

arison_b19477