Slides of my workshop at the QuoVadis conference about the creation of social games, based on OpenSocial

1. How to create social
games for millions of
users
Bastian Hofmann
VZnet Netzwerke Ltd.

2. • Social games at VZnet
• Introduction to OpenSocial
• Key concepts of OpenSocial
• Demo: Creating a social game

7. You?

8. Questions? Ask!

9. http://slideshare.net/bashofmann

11. Apps
and
Games
@VZnet
33
Mio.
Installs
1,8
Mio.
DAU
5,5
Mio.
MAU

12. VZ-­‐Apps
compared
to
other
gaming
sites
Daily
Unique
Visitors
(Mio) Time
on
Site
(min)
VZ-­‐Apps 1,80 10:50
jetztspielen.de 1,30 13:50
gameduell 1,10 20:00
SpieleFpps.de 1,00 09:00
king.com 1,00 28:00
BigPoint 1,00 05:40
1001spiele.de 0,46 20:00
spielkarussel 0,43 14:40
gamesload 0,29 04:30
feLspielen 0,24 14:20
spielen.de 0,18 12:30
Yahoo!
Spiele 0,16 04:30
spiele-­‐zone.de 0,12 12:00
sevengames 0,11 05:50
Google! Adplanner, Feb 2010

13. Dorfleben
(HalfQuest)

14. DEMO

15. • ... a set of APIs to access the social graph of
users
• ... a specification for including 3rd party
applications (gadgets) into social services

18. Top
Developers
at
VZnet
4.6
Mio. Beijing
ELEX
2.08
Mio. Plinga
1.33
Mio. i-­‐Jet
Media
Monthly active users within all applications

19. What is a Gadget?
• XML file with HTML and
JavaScript (and CSS,
Images, Flash, ...)
• Application based on the
Google Gadgets
specification
• Can be included on
various platforms

20. Rendering

21. CONTAINER GADGET
meinvz.net apivz.net

22. Social APIs

23. • OpenSource implementation of an OpenSocial
container
• Java and PHP versions available
• New: MySpace is currently open sourcing
their .NET implementation
http://shindig.apache.org/

24. Views

25. CANVAS

26. PROFILE

27. POPUP

28. GROUP

29. EMBED

30. PREVIEW

31. Features

32. VIEWER

33. Authentification
• Two-Legged or Three-Legged
OAuth
• Security Token for JavaScript
requests from gadget

34. Application models

35. JavaScript based
Container Shindig
vz.net apivz.net
Ajax
HTTP HTTP
Gadget Gadget Backend
apivz.net api.twitter.com

36. Proxy
Container Shindig
vz.net apivz.net
Ajax
HTTP
Gadget Gadget Backend
Ajax
apivz.net api.twitter.com

37. JavaScript RPC
Container - window.postMessage
vz.net - Iframes with relay files
Method Call
- Flash
Gadget
apivz.net

38. Flash
Container Shindig
vz.net apivz.net
Ajax
HTTP
Gadget
apivz.net HTTP Gadget Backend
api.twitter.com
Flash
HTTP

39. Redirecting
Container Shindig
vz.net apivz.net
HTTP
iframe
api.twitter. Gadget Backend
com api.twitter.com
Ajax

40. Additional Iframe
Container Shindig
vz.net apivz.net
Ajax
HTTP
Gadget
apivz.net Gadget Backend
api.twitter.com
iframe
Ajax

41. OpenSocial Templates Proxied Content
OSAPI
OAuth Proxy Requests
OpenSocial on the iPhone
DataPipelining
OEmbed
Let‘s start programming

42. https://github.com/bashofmann/opensocial_demo_game

43. DEMO

44. Proxied Content

45. DEMO

46. OAuth 1.0a Flow
+----------+ +---------------+
| -+----(B)-- Request Token -------->| |
| End-user | | Authorization |
| at |<---(C)-- User authenticates --->| Server |
| Browser | | |
| -+----(D)-- Verifier -------------<| |
+-|----|---+ +---------------+
| | ^ v
(B) (D) | |
| | | |
^ v | |
+---------+ | |
| |>---(A)-- Redirect URL ---------------| |
| Web |<---(A)-- Request Token + Secret -----| |
| Client |>---(E)-- Request Token, Verifier ----' |
| |<---(E)-- Access Token + Secret -------------'
+---------+
Every Request: Client Credentials, Nonce, Timestamp, Signature
http://oauth.net/

47. DEMO

52. DEMO

53. hSp://twiSer.com/BasWanHofmann
hSp://studivz.net/basWan
hSp://slideshare.net/bashofmann
bhofmann@vz.net
hSp://developer.studivz.net