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

Cejs notificacoes html5

on

  • 316 views

 

Statistics

Views

Total Views
316
Views on SlideShare
313
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 Cejs notificacoes html5 Presentation Transcript

  • Notificações para HTML5 @rodrigodealer
  • Perguntinha
  • Quem trabalha com HTML5? View slide
  • Quem já usou? View slide
  • O que achou?
  • Notificações
  • Notifique seus usuários em tempo real
  • Opções (mostradas aqui) Socket.IO Pusher (serviço)
  • Do que vou precisar?
  • 1. NodeJS instalado;2. Socket.IO instalado;
  • 1. NodeJS instalado; 2. Socket.IO instalado;3. Algumas linhas de código, claro.
  • 1. NodeJS instalado;
  • 1. NodeJS instalado; $ brew install nodejs ougit clone https://github.com/joyent/node.gitcd node./configuremakesudo make install
  • 1. NodeJS instalado;$ curl https://npmjs.org/install.sh | sh
  • 1. NodeJS instalado; NPM - Node Package Manager$ curl https://npmjs.org/install.sh | sh
  • 1. NodeJS instalado; NPM - Node Package Manager$ curl https://npmjs.org/install.sh | sh
  • 1. NodeJS instalado;
  • 1. NodeJS instalado;2. Socket.IO instalado;
  • 1. NodeJS instalado; 2. Socket.IO instalado;$ npm install socket.io
  • 1. NodeJS instalado; 2. Socket.IO instalado;$ npm install socket.io
  • 1. NodeJS instalado; 2. Socket.IO instalado;$ npm install socket.io
  • app.js
  • app.js Importa o módulo http e cria um servidor
  • app.js Importa o módulo do socket.io
  • app.js Importa o módulo do XMl2JS
  • app.js Inicializa o servidor
  • app.js
  • app.js Faz o roteamento dos requests para index.html
  • app.js Monitora conexões
  • app.js Monitora arquivo exemple.xml
  • app.js Monitora arquivo exemple.xml Quando for modificado, será lido
  • app.js Adiciona listener Ao final da leitura do arquivo, irá notificar os clientes com o conteúdo
  • index.html Importa Socket.IO
  • index.html Importa jQuery
  • index.html Importa jQuery <3
  • index.html Abre conexão com o Socket.IO Cria Listener para uma ‘notification’
  • index.html Abre conexão com o Socket.IO Cria Listener para uma ‘notification’ Quando houver, mostra informações do XML
  • Opções (mostradas aqui) Socket.IO Pusher (serviço)
  • Pusher
  • PusherDo que vou precisar?
  • PusherDo que vou precisar?Uma conta no serviço
  • Sim, e umas linhas de código
  • PusherDo que vou precisar?Uma conta no serviço
  • PusherDo que vou precisar?Uma conta no serviço
  • Pusher Do que vou precisar? Uma conta no serviçoUma apliação cadastrada
  • Pusher Do que vou precisar? Uma conta no serviçoUma apliação cadastrada
  • Pusher
  • Pusher
  • Pusher
  • Pusher Código da sua app
  • Pusher “Login” da sua app
  • Pusher Senha da sua app
  • Pusher
  • Pusher
  • Pusher Importa o Pusher
  • Pusher Ativa o log
  • Pusher Inicia com o “login” da app
  • Pusher Cria um canal “test_channel”
  • Pusher Cria um listener para o canal “my_channel” para os eventos “my_event”
  • Pusher Vamos testar?
  • Pusher Vamos testar?
  • PusherComando para teste
  • PusherComando para teste
  • PusherComando para teste Mensagem
  • PusherComando para teste URL do pusher
  • PusherComando para teste URL do pusher Canal “test_channel”
  • PusherComando para teste Evento “my_event”
  • PusherComando para teste “Login” da app
  • PusherComando para teste
  • Prós e contras
  • Prós e contras Precisa programar mais
  • Prós e contras Precisa programar mais Possibilidade de erros
  • Prós e contras Precisa programar mais Possibilidade de erros Estrutura de servidor
  • Prós e contras Precisa programar mais Possibilidade de erros Estrutura de servidor Tudo ao teu controle
  • 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
  • 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
  • Obrigado! ?