1. Notificações para
HTML5
@rodrigodealer

3. Perguntinha

4. Quem trabalha com
HTML5?

5. Quem já usou?

6. O que achou?

7. Notificações

8. Notifique seus usuários
em tempo real

9. Opções (mostradas aqui)
Socket.IO
Pusher (serviço)

10. Do que vou precisar?

11. 1. NodeJS instalado;
2. Socket.IO instalado;

12. 1. NodeJS instalado;
2. Socket.IO instalado;
3. Algumas linhas de código, claro.

13. 1. NodeJS instalado;

14. 1. NodeJS instalado;
$ brew install nodejs
ou
git clone https://github.com/joyent/node.git
cd node
./configure
make
sudo make install

15. 1. NodeJS instalado;
$ curl https://npmjs.org/install.sh | sh

16. 1. NodeJS instalado;
NPM - Node Package Manager
$ curl https://npmjs.org/install.sh | sh

17. 1. NodeJS instalado;
NPM - Node Package Manager
$ curl https://npmjs.org/install.sh | sh

18. 1. NodeJS instalado;

19. 1. NodeJS instalado;
2. Socket.IO instalado;

20. 1. NodeJS instalado;
2. Socket.IO instalado;
$ npm install socket.io

21. 1. NodeJS instalado;
2. Socket.IO instalado;
$ npm install socket.io

22. 1. NodeJS instalado;
2. Socket.IO instalado;
$ npm install socket.io

23. app.js

24. app.js
Importa o módulo http e cria um servidor

25. app.js
Importa o módulo do socket.io

26. app.js
Importa o módulo do XMl2JS

27. app.js
Inicializa o servidor

28. app.js

29. app.js
Faz o roteamento dos requests para index.html

30. app.js
Monitora conexões

31. app.js
Monitora arquivo exemple.xml

32. app.js
Monitora arquivo exemple.xml
Quando for modificado, será lido

33. app.js
Adiciona listener
Ao final da leitura do arquivo, irá
notificar os clientes com o conteúdo

34. index.html
Importa Socket.IO

35. index.html
Importa jQuery

36. index.html
Importa jQuery <3

37. index.html
Abre conexão com o Socket.IO
Cria Listener para uma ‘notification’

38. index.html
Abre conexão com o Socket.IO
Cria Listener para uma ‘notification’
Quando houver, mostra informações do
XML

39. Opções (mostradas aqui)
Socket.IO
Pusher (serviço)

40. Pusher

41. Pusher
Do que vou precisar?

42. Pusher
Do que vou precisar?
Uma conta no serviço

44. Sim, e umas linhas de código

45. Pusher
Do que vou precisar?
Uma conta no serviço

46. Pusher
Do que vou precisar?
Uma conta no serviço

47. Pusher
Do que vou precisar?
Uma conta no serviço
Uma apliação cadastrada

48. Pusher
Do que vou precisar?
Uma conta no serviço
Uma apliação cadastrada

49. Pusher

50. Pusher

51. Pusher

52. Pusher
Código da sua app

53. Pusher
“Login” da sua app

54. Pusher
Senha da sua app

55. Pusher

56. Pusher

57. Pusher
Importa o Pusher

58. Pusher
Ativa o log

59. Pusher
Inicia com o “login”
da app

60. Pusher
Cria um canal “test_channel”

61. Pusher
Cria um listener para o canal
“my_channel” para os
eventos “my_event”

62. Pusher
Vamos testar?

63. Pusher
Vamos testar?

64. Pusher
Comando para teste

65. Pusher
Comando para teste

66. Pusher
Comando para teste
Mensagem

67. Pusher
Comando para teste
URL do pusher

68. Pusher
Comando para teste
URL do pusher
Canal “test_channel”

69. Pusher
Comando para teste
Evento “my_event”

70. Pusher
Comando para teste
“Login” da app

71. Pusher
Comando para teste

72. Prós e contras

73. Prós e contras
Precisa programar mais

74. Prós e contras
Precisa programar mais
Possibilidade de erros

75. Prós e contras
Precisa programar mais
Possibilidade de erros
Estrutura de servidor

76. Prós e contras
Precisa programar mais
Possibilidade de erros
Estrutura de servidor
Tudo ao teu controle

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

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
Sem estrutura de servidor sua
Você paga por consumo

79. Obrigado!
?