Cejs notificacoes html5

358 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
358
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \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

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

    ×