1. BUIDING APPLICATION
for
SOCIAL NETWORKS
Đỗ Duy Trung
Hai Phong Aptech

2. Agenda
• Overview
• How to create application for Social Network?
• Social Network Architecture
• Fundamentals & requirements for building
application
• Demo
• Q&A

3. 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.

4. Advantages of Social Networking?
• Work connections
• Keeping in touch
• Get feedback
• Share multiple points of view
• Talking to other persons
• Stay in touch anywhere

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

6. 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

7. 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….

8. Example of Social Networks
1. Social Networking : 15. Social knowledge : Wiki
Facebook, Zing.Me, Go.vn, G+, Bang.vn, Ba 16. Social job : Linkedin, calavat, TVN
nbe.net … 17. Social shop : Vatgia, chodientu.vn
2. Social News : Linkhay, Newsvine, Digg, 18. Social reviews: Aha, Vatgia , agoda
3. Social Measuring : Technorati, BlogPulse 19. Social lens : Squidoo
4. Microblogging : Twitter 20. Social study : Violet.vn, Tienganh123…
5. Blogs : Opera, Yahoo+, Blogspot, WP 21. Coupons network : Grouponvietnam.com
6. Social Bookmarking : Diggo, Delicious 22. Social map :
7. Social Q&A : Google, Yahoo Wikimap, GGmap, diadiem, bando, thodia.vn
answer, Vatgia 23. Social chat : Yahoo
8. Video Sharing : Youtube, Viadeo,Clip.vn chatgroup, Bebo, Paltalk, Yola.vn , Zingchat
9. Photo Sharing : Picasa, Flickr, tamtay.vn 24. Social Game : Zing, VTC, Ongame…
10. Social Search : Google vertical search 25. Social music : Yeucahat.com…
11. Professional Networks : 26. Social bid : Chodientu.vn, daugianguoc
Calavat, Hoclamgiau 27. Social health: Bacsi.com, khamchuabenh
12. Community Groups 28. Social application/widget : Apple store
(Forum):Tinhte.vn, webtretho.com, phuot.vn
…
13. Blogging Communities
14. Document shares :
Slideshare.net, tailieu.vn
GitHub - Social Coding (for developers)

10. Users after launch
Members – March 2012
Referral Traffic January 2012

11. 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
• …

13. How to create application for
Social Network?

14. 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

15. Vocabulary
• They are not widgets?
• Or gidgets…
• They are gadgets!

16. Gadget
• Gadget is really just a mask for something
greater....
• Gadget is just one face of an application

17. 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.

18. 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.

19. 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

20. SocialSite Architecture

21. OpenSocial Architecture
Home Server/ Back-end Container Client/Front-end
Apps Social Network Gadgets

22. 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...

23. Anatomy of an Open Application

24. Fundamental of SNS
• Web API
• Protocol: HTTP, SOAP, REST
• Data Format: JSON, ATOM, XML
• Security: OpenID, OAuth

25. Web API
Google (96): Google Buzz API, Google Plus API
Facebook (8): Facebook API, Graph API, Social Plugin, Realtime
Twitter (3): Twitter API, Twitter Streamming API
….

26. 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)

28. 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

29. 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

30. REST
HTTP SQL CRUD
POST INSERT Create
GET SELECT Read
PUT UPDATE Update
DELETE DELETE Delete

31. REST API or Graph API
• Rest API
• Graph API

32. Graph API
• https://graph.facebook.com/ID
• https://graph.facebook.com/ID/CONNECTION
_TYPE
• https://graph.facebook.com/220439?access_t
oken=...

33. Social Graph API

34. OpenID vs OAuth
• OpenID is about • OAuth is about
authentication to many authorization –
sites with one application or site A has
username. permission to call site
B's ap
• Using login credentials • Allowing an application
from an OpenID (TwitPic) to act on your
provider (Google) to behalf to and access
login to another information from an
application (Stack application that you use
Overflow) (Twitter)

35. Authentication
/authorize?client_id
&redirect_uri
login
1
OK
User
permission
App Allow
access_token
2 /redirect_uri?code=
API
/access_token?code&client_id
&client_secret

37. 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] ]

38. RSS 2.0 vs Atom 1.0
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"> <feed xmlns="http://www.w3.org/2005/Atom">
<channel>
<title>Example Feed</title> <title>Example Feed</title>
<description>Insert witty or insightful remark <subtitle>Insert witty or insightful remark here</subtitle>
here</description> <link href="http://example.org/"/>
<link>http://example.org/</link> <updated>2003-12-13T18:30:02Z</updated>
<lastBuildDate>Sat, 13 Dec 2003 18:30:02 <author>
GMT</lastBuildDate> <name>John Doe</name>
<managingEditor>johndoe@example.com (John <email>johndoe@example.com</email>
Doe)</managingEditor>
</author>
<id>urn:uuid:60a76c80-d399-11d9-b93C-0003939e0af6</id>
<item>
<title>Atom-Powered Robots Run Amok</title> <entry>
<link>http://example.org/2003/12/13/atom03</link> <title>Atom-Powered Robots Run Amok</title>
<guid isPermaLink="false">urn:uuid:1225c695-cfb8- <link href="http://example.org/2003/12/13/atom03"/>
4ebb-aaaa-80da344efa6a</guid> <id>urn:uuid:1225c695-cfb8-4ebb-aaaa-
<pubDate>Sat, 13 Dec 2003 18:30:02 80da344efa6a</id>
GMT</pubDate> <updated>2003-12-13T18:30:02Z</updated>
<description>Some text.</description> <summary>Some text.</summary>
</item> </entry>
</channel> </feed>
</rss>

39. Requirements
Provider Developer
• Social Network Platform • Programming Languages
– Web API – Javascript, PHP, Java, C#,…
• Authentication • Application
– OAuth – APP_ID
– OpenID – APP_SECRET
• SDKs • Tools
• Canvas • Coding & pulishing
• Plugin • Integrating & embeding

40. I'm a developer - how do I get
involved?
Authenticate with OAuth Use the API
• REST protocol
• RPC protocol
Method Summary • Javascript API
• String getDisplayName() • Graph API
• String getField(key, opt_params)
• String getId()
• Boolean isOwner()
• Boolean isViewer() Get Information!
• ….
Including:
ABOUT_ME, ADDRESSES, CARS, FASHION
and many more

41. I'm a server
Be 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)

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

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

46. OpenSocial?
• Standard Internet technologies
(HTML, CSS, JS)
• Simple, XML definition
• Ajax
• Standard based authorization model
• Add social context to requests

47. Facebook vs OpenSocial
Facebook OpenSocial
• FBML • XHTML / XML
• FQL • JavaScript
• FBJS
• Partial support for ajax • Full support for ajax

49. The web is better when it's social
OpenSocial enables apps,containers, and other clients to
collaborate and move the social web forward.

50. A typical gadget based portal

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

52. Thank you!
Your feedback is a gift!
HPA Forum: @TrungDD
Facebook: @doduytrung
Twitter: @doduytrung
Linkedin: @doduytrung
Pinterest: @doduytrung
Google+: @doduytrung

53. 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-
comparison_b19477