Oficina sobre desenvolvimento de aplicativos sociais

1. Desenvolvendo
Aplicativos Sociais
Jorge Moisés Assis
Dito Internet
jorge.moises@dito.com.br
@JorgeMA

2. Quem sou eu?
Bacharel em Ciência da Computação
Desenvolvedor de aplicativos sociais na Dito
Internet

3. Dito Internet
Startup
Foco em mídias sociais
Ruby On Rails

4. Odrible
Bolão gratuito
Orkut, Facebook e Portal
+800.000 usuários

5. Dengue Ville
Objetivo: combater a dengue
Governo de Minas Gerais
+500.000 usuários em 1 mês!
Indicado ao Cyber Cannes 2010

6. Simuladão Vestibular
PUC Minas
Público-alvo: vestibulandos
No ar há 3 vestibulares
Média de 6.000 novos usuários por vestibular

7. A Origem
Aplicativos Desktop
Sistemas WEB
Redes Sociais
Sistemas Sociais (estamos aqui!)

8. Fato!
Tanto o Facebook quanto o Orkut cresceram muito
depois que liberaram aplicativos

9. Apps Sociais
O que são?
Aplicativos WEB
Podem estar “dentro” de uma rede social

10. Porque social?
Promove interação entre os participantes

11. Como torno meu
aplicativo “social”?
INFINITAS maneiras
“Game Mechanics” dão muito certo

12. Game Mechanics
Quando estão juntas, formam um “loop” de
diversão
Geram fidelidade
Aumentam o engajamento
Podem ser incluídas em QUALQUER negócio

13. Pontos

14. Pontos
Parte essencial do “círculo”
Mapeie as ações que você quer que seu
usuário faça
Distribua pontos relativos a cada uma
E como os usuários gostam de comparar seus
pontos...

15. Ranking

16. Ranking
Maneira universal de mostrar aos usuários que um
jogo está acontecendo
A chave:
mantê-los motivados pela competição
não desmotivá-los pela dificuldade de alcançar
usuários acima no ranking
E quando o ranking não é o suficiente?

17. Badges

18. Badges
Recompensas por atividades específicas
De preferência, devem ser esteticamente
bonitas
E como saber quando dar badges?

19. Desafios

20. Desafios
Motivam o usuário
Devem ser aninhados - proponha um novo quando
um for completado
Exiba-os em uma lista, deixe que o usuário
escolha o que lhe agrada
Com tantos pontos, badges e desafios, o que
falta?

21. Níveis

22. Níveis
Podem se tornar complexos
Comece com níveis simples
Use números ou letras para nomeá-los
Aumente o nível de dificuldade para
chegar ao próximo nível gradativamente

23. Mas... isso funciona?
Depois de desenvolver vários aplicativos sociais na Dito,
percebemos um padrão
Foi criada a Plataforma Social
Pontos
Ranking
Níveis
Badges
Estatísticas Administrativas
Conta Única

24. Mas... isso funciona?
Seth Priebatsch diz:
Facebook e Twitter formam uma “camada social”
sobre o mundo real
Está sendo formada a “camada de jogos”
Seth Priebatsch gerencia SCVNGR, uma “mobile
startup”
Foi palestrante no TED - Ideas Worth Spreading

25. Então...
Porque não apenas criar um jogo?
Porque usar redes sociais?

26. Simples!
Estendem os recursos das redes sociais
Estão presentes nas grandes redes

28. MILHÕES de usuários!
Seu aplicativo já nasce com um potencial gigante!

29. Ainda não está
convencido(a)?

30. Cases de sucesso

31. Buddy Poke

32. Buddy Poke
Orkut Ning
Facebook QuePasa
MySpace Lokalisten
hi5 Friendster
Netlog Hyves

33. Buddy Poke
Jogo mais popular do Orkut
Foi desbancado por...

34. Colheita Feliz

35. Colheita Feliz

36. Colheita Feliz
Lançado em junho de 2009
22.000.000+ usuários
Costumava derrubar os servidores...

37. Enquanto isso, no

38. FarmVille

39. FarmVille
Lançado em junho de 2009
62.000.000+ usuários ATIVOS
Desenvolvido pela Zynga

40. Zynga
BlackJack
Café World
Mafia Wars
Vampire Wars
Receita de 500+ milhões de dólares por ano

41. Mais estatísticas?
http://www.appdata.com/

42. Alguns detalhes
importantes...
Um aplicativo social NÃO precisa estar dentro
de uma rede social
Aplicativos sociais NÃO são apenas jogos!
Um aplicativo NÃO é social apenas por estar
dentro de uma rede

43. Antes de entrar na parte
técnica...
The Social Network

44. Apps sociais no Twitter
Usam a Twitter API
Postar na timeline
Ler a timeline
Follow/Unfollow
Ex.: DengueVille

45. Prós/Contras
Vantagens
A API é bastante simples
Amplamente utilizado
Desvantagem
O Twitter é limitado em relação a outras
redes sociais

46. Apps sociais no Orkut
OpenSocial API
Plataforma da Google
Baseada em HTML e JavaScript
Lançada em novembro de 2007
É possível criar aplicativos nas redes Orkut,
MySpace, Friendster, Linkedin, hi5, XING,
Plaxo, Ning, Oracle, Viadeo e SalesForce

47. Apps sociais no Orkut
Outubro de 2008
600 aplicativos
Setembro de 2010
+16.000 aplicativos

48. OpenSocial API
People & Friends
Activities
Persistence Data
3 tipos de usuário
Owner
Viewer
Guest

49. OpenSocial API
2 tipos de visualização
Canvas
Profile

50. Como funciona?
Client-side! AJAX! Server-side!
JavaScript! Ruby on Rails!
+! ou!
HTML ! Java!
+! ou!
CSS! PHP!
ou!
APIs!

51. E a segurança?
Todo aplicativo que se comunica com o Orkut
funciona como uma API
Suas requisições devem ser protegidas!
gadgets.io.AuthorizationType.SIGNED;
no server-side, valida-se a assinatura

52. Detalhe importante!
No Orkut, o cache pode ser um amigo ou um
inimigo
ByPassCache (bpc=1)
Se bem utilizado, é uma grande ajuda

53. Vantagens
Aproveitar o grafo social já criado pela
pessoa
Acesso fácil para a imensa base de usuários
do Orkut no Brasil
Não é necessário implementar os recursos já
existentes no Orkut (scraps, fotos, amizades,
etc)

54. Desvantagem
Não é nada fácil testar e achar erros no
código JavaScript (client side)

55. Fazendo uma requisição
function request() {!
var url = "http://odrible.com/confrontos";! ! !
// Dados para serem enviados por POST.!
var postData = {};postData["aposta_placar_casa"] = document.getElementById
("aposta_placar_casa").value;postData["partida_id"] = document.getElementById("partida_id").value;!
// Parâmetros que podem ser passados para a função.!
var params = {};!
params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;params
[gadgets.io.RequestParameters.POST_DATA] = gadgets.io.encodeValues(postData);! !
// Opções Content Type: DOM, TEXT, JSON!
params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM;!
gadgets.io.makeRequest(url, response, params);!
}!

56. XML de retorno
<?xml version="1.0" encoding="UTF-8" ?><odrible
stat="ok">!
<confronto id="12">! <infos>Brasileirão, 2ª rodada, no
Mineirão</infos>! <time_casa id="1">CRUZEIRO</
time_casa>! <time_visitante id="4">SÃO PAULO</
time_visitante></confronto>!
...!
</odrible>!

57. Tratando a resposta
function response(obj) {!
! var itemList = obj.data.getElementsByTagName("confronto");!
! for(var i = 0; i < itemList.length; i++ ) {!
! ! var nodeList = itemList.item(i).childNodes;!
! ! for(var j = 0; j < nodeList.length; j++) {!
! ! ! var node = nodeList.item(j);!
! ! ! if(node.nodeName == "infos" && node.firstChild != null) {!
! ! ! ! var infos = node.firstChild.nodeValue;!
! ! ! }!
...!
}!
// Cria dinamicamente o HTML!
}!

58. Quero criar um app
usando OpenSocial!
Crie uma conta no Orkut Sandbox
Utilizada para testar aplicativos
Desenvolva o aplicativo
Submeta-o ao diretório de aplicativos do
Orkut

59. Apps sociais no Facebook
Facebook Platform
Conjunto de API’s e ferramentas
Integra aplicações do Facebook ou sites
externos
Graph API
Lançada em maio de 2007

60. Estatísticas da Facebook
Platform
Maio - 2010
+ de 1 milhão de desenvolvedores e
empresas em + de 180 países
+ de 550 mil aplicativos ativos
+ de 70% dos usuários utilizam
aplicativos mensalmente
+ de 250 mil websites integrados
+ de 100 milhões de usuários usam
Facebook em outros websites
mensalmente

61. Alternativas de
desenvolvimento
IFrame
Facebook Connect
FBML (to be DIScontinued)

62. Vantagens
Base GIGANTE de usuários
Brasileiros migram cada vez mais
Excelente documentação
É possível fazer quase tudo que o próprio
Facebook faz!

63. Quero criar um
aplicativo no Facebook!
Cadastre-se como desenvolvedor
Registre seu aplicativo
Desenvolva-o
Pronto! Agora é só submetê-lo ao diretório
de aplicativos do Facebook

64. O que é possível coletar
no Facebook?
Usuários Apps
Eventos Notas
Fotos Grupos
Vídeos Status Messages

65. Como?
Graph API
Tudo tem um ID - tudo MESMO
Se um objeto possui username, pode ser
buscado também por ele
O retorno é sempre um JSON ou um
binário

66. Exemplo!
http://graph.facebook.com/jorgemoisesassis
http://graph.facebook.com/jorgemoisesassis/
picture

67. Posso acessar o que eu
quiser???
Para alguns dados, precisamos de permissão
extra
Escrita (publish_stream, create_event, sms,
offline_access, rsvp)
Leitura (user_about_me, user_photos,
email, read_stream, etc...)

68. Obtendo permissões
Registre sua aplicação (http://facebook.com/
developers)
Application ID
API Key
Application Secret

69. Obtendo permissões

70. Obtendo permissões
Oauth 2.0
Redireciona usuário para URL de
autorização
Após autorizado, redireciona para URL da
aplicação, enviando o parâmetro “code”
“code” pode ser trocado por um
access_token, que é utilizado para acessar
os dados do usuário

71. Vamos testar!
http://oauth.twoalex.com/

72. Dúvidas?
jorge.moises@dito.com.br
@JorgeMA

73. Referências
http://dev.twitter.com/
http://code.google.com/apis/opensocial/
http://developers.facebook.com/
http://mashable.com/2010/04/07/funware-
game-mechanics/
http://www.ted.com/

74. Estamos contratando!
vagas@dito.com.br