Cejs notificacoes html5
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Cejs notificacoes html5

on

  • 326 views

 

Statistics

Views

Total Views
326
Views on SlideShare
323
Embed Views
3

Actions

Likes
1
Downloads
2
Comments
0

1 Embed 3

http://nodeslide.herokuapp.com 3

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Cejs notificacoes html5 Presentation Transcript

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