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>[email protected] (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>[email protected]</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)
• 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
Top Related