Notificações com HTML5

Transcript

1. Notificações para HTML5 @rodrigodealer Sunday, November 11, 12
2. Sunday, November 11, 12
3. Perguntinha Sunday, November 11, 12
4. Quem trabalha com HTML5? Sunday, November 11, 12
5. Quem já usou? Sunday, November 11, 12
6. O que achou? Sunday, November 11, 12
7. Notificações Sunday, November 11, 12
8. Notifique seus usuários em tempo real Sunday, November 11, 12
9. Opções (mostradas aqui) Socket.IO Pusher (serviço) Sunday, November 11, 12
10. Do que vou precisar? Sunday, November 11, 12
11. 1. NodeJS instalado; 2. Socket.IO instalado; Sunday, November 11, 12
12. 1. NodeJS instalado; 2. Socket.IO instalado; 3. Algumas linhas de código, claro. Sunday, November 11, 12
13. 1. NodeJS instalado; Sunday, November 11, 12
14. 1. NodeJS instalado; $ brew install nodejs ou git clone https://github.com/joyent/node.git cd node ./configure make sudo make install Sunday, November 11, 12
15. 1. NodeJS instalado; $ curl https://npmjs.org/install.sh | sh Sunday, November 11, 12
16. 1. NodeJS instalado; $ curl https://npmjs.org/install.sh | sh NPM - Node Package Manager Sunday, November 11, 12
17. 1. NodeJS instalado; $ curl https://npmjs.org/install.sh | sh NPM - Node Package Manager Sunday, November 11, 12
18. 1. NodeJS instalado; Sunday, November 11, 12
19. 1. NodeJS instalado; 2. Socket.IO instalado; Sunday, November 11, 12
20. 1. NodeJS instalado; 2. Socket.IO instalado; $ npm install socket.io Sunday, November 11, 12
21. 1. NodeJS instalado; 2. Socket.IO instalado; $ npm install socket.io Sunday, November 11, 12
22. 1. NodeJS instalado; 2. Socket.IO instalado; $ npm install socket.io Sunday, November 11, 12
23. app.js Sunday, November 11, 12
24. app.js Importa o módulo http e cria um servidor Sunday, November 11, 12
25. app.js Importa o módulo do socket.io Sunday, November 11, 12
26. app.js Importa o módulo do XMl2JS Sunday, November 11, 12
27. app.js Inicializa o servidor Sunday, November 11, 12
28. app.js Sunday, November 11, 12
29. app.js Faz o roteamento dos requests para index.html Sunday, November 11, 12
30. app.js Monitora conexões Sunday, November 11, 12
31. app.js Monitora arquivo exemple.xml Sunday, November 11, 12
32. app.js Monitora arquivo exemple.xml Quando for modificado, será lido Sunday, November 11, 12
33. app.js Adiciona listener Ao final da leitura do arquivo, irá notificar os clientes com o conteúdo Sunday, November 11, 12
34. index.html Importa Socket.IO Sunday, November 11, 12
35. index.html Importa jQuery Sunday, November 11, 12
36. index.html Importa jQuery <3 Sunday, November 11, 12
37. index.html Abre conexão com o Socket.IO Cria Listener para uma ‘notification’ Sunday, November 11, 12
38. index.html Abre conexão com o Socket.IO Cria Listener para uma ‘notification’ Quando houver, mostra informações do XML Sunday, November 11, 12
39. Opções (mostradas aqui) Socket.IO Pusher (serviço) Sunday, November 11, 12
40. Pusher Sunday, November 11, 12
41. Pusher Do que vou precisar? Sunday, November 11, 12
42. Pusher Do que vou precisar? Uma conta no serviço Sunday, November 11, 12
43. Sunday, November 11, 12
44. Sim, e umas linhas de código Sunday, November 11, 12
45. Pusher Do que vou precisar? Uma conta no serviço Sunday, November 11, 12
46. Pusher Do que vou precisar? Uma conta no serviço Sunday, November 11, 12
47. Pusher Do que vou precisar? Uma conta no serviço Uma apliação cadastrada Sunday, November 11, 12
48. Pusher Do que vou precisar? Uma conta no serviço Uma apliação cadastrada Sunday, November 11, 12
49. Pusher Sunday, November 11, 12
50. Pusher Sunday, November 11, 12
51. Pusher Sunday, November 11, 12
52. Pusher Código da sua app Sunday, November 11, 12
53. Pusher “Login” da sua app Sunday, November 11, 12
54. Pusher Senha da sua app Sunday, November 11, 12
55. Pusher Sunday, November 11, 12
56. Pusher Sunday, November 11, 12
57. Pusher Importa o Pusher Sunday, November 11, 12
58. Pusher Ativa o log Sunday, November 11, 12
59. Pusher Inicia com o “login” da app Sunday, November 11, 12
60. Pusher Cria um canal “test_channel” Sunday, November 11, 12
61. Pusher Cria um listener para o canal “my_channel” para os eventos “my_event” Sunday, November 11, 12
62. Pusher Vamos testar? Sunday, November 11, 12
63. Pusher Vamos testar? Sunday, November 11, 12
64. Pusher Comando para teste Sunday, November 11, 12
65. Pusher Comando para teste Sunday, November 11, 12
66. Pusher Comando para teste Mensagem Sunday, November 11, 12
67. Pusher Comando para teste URL do pusher Sunday, November 11, 12
68. Pusher Comando para teste URL do pusher Canal “test_channel” Sunday, November 11, 12
69. Pusher Comando para teste Evento “my_event” Sunday, November 11, 12
70. Pusher Comando para teste “Login” da app Sunday, November 11, 12
71. Pusher Comando para teste Sunday, November 11, 12
72. Prós e contras Sunday, November 11, 12
73. Prós e contras Precisa programar mais Sunday, November 11, 12
74. Prós e contras Precisa programar mais Possibilidade de erros Sunday, November 11, 12
75. Prós e contras Precisa programar mais Possibilidade de erros Estrutura de servidor Sunday, November 11, 12
76. Prós e contras Precisa programar mais Possibilidade de erros Estrutura de servidor Tudo ao teu controle Sunday, November 11, 12
77. Prós e contras Precisa programar mais Possibilidade de erros Estrutura de servidor Tudo ao teu controle Menos linhas de código Sunday, November 11, 12
78. Prós e contras Precisa programar mais Possibilidade de erros Estrutura de servidor Tudo ao teu controle Menos linhas de código Serviço, fora do teu controle Sunday, November 11, 12
79. Prós e contras Precisa programar mais Possibilidade de erros Estrutura de servidor Tudo ao teu controle Menos linhas de código Serviço, fora do teu controle Sem estrutura de servidor sua Sunday, November 11, 12
80. Prós e contras Precisa programar mais Possibilidade de erros Estrutura de servidor Tudo ao teu controle Menos linhas de código Serviço, fora do teu controle Sem estrutura de servidor sua Você paga por consumo Sunday, November 11, 12
81. Prós e contras Precisa programar mais Possibilidade de erros Estrutura de servidor Tudo ao teu controle Menos linhas de código Serviço, fora do teu controle Sem estrutura de servidor sua Você paga por consumo Sunday, November 11, 12
82. Obrigado! ? Sunday, November 11, 12
83. Obrigado! ? http://www.slideshare.net/rodrigodealer https://github.com/rodrigodealer Sunday, November 11, 12