Discover Meteor - Building Real-Time JavaScript Web Apps - Sacha Greif & Tom Coleman

1/8/2015
Discover Meteor Building Real-Time JavaScript Web Apps Sacha Greif & Tom Coleman
http://pt.discovermeteor.com/pdf
1/261
1/8/2015
DISCOVERMETEOR
BuildingRealTimeJavaScriptWebApps
TomColeman&SachaGreif
Cover photo credit
Perseid Hunting by Darren Blackburn
Commons Attribution
2.0
licensed under a Creative
Generic license
www discovermeteor com
2/261
1/8/2015
Introduo
Faa um pequeno experimento mental para mim
Imagine que voc
est abrindo uma pasta
em duas diferentes janelas do seu computador
Agora clique dentro de uma das janelas e delete um arquivo
outra janela tamb
Voc
Esse arquivo desapareceu da
no precisa realmente seguir esses passos para saber disso
algo num sistema de arquivos local
refreshes ou callbacks
Entretanto
a mudana
Quando n
s modificamos
aplicada em todo lugar sem necessidade de
Apenas acontece
vamos pensar sobre como o mesmo cenrio funcionaria na web
vamos dizer que voc
abriu o mesmo site do Wordpress como admin em duas janelas do
browser e ento criou um nova postagem numa delas
quanto voc
espere
s nos acostumamos com a id
se comunica apenas com pequenos
Mas Meteor
Ao contrrio do desktop
a outra janela no vai refletir a mudana a no ser que voc
Ao longo dos anos
Por exemplo
no importa o
a atualize
ia de um website ser algo com o qual voc
separados acessos
parte de uma nova onda de frameworks e tecnologias que esto procurando
desafiar o status quo ao fazer a web em tempo real e reativa
Oquemeteor?
Meteor
uma plataforma constru da em cima de Node js para a construo de web apps em
tempo real
o que fica entre o banco de dados do seu app e a interface do usurio e garante
que ambos mantenham sincronia
J que
. ,
constru do sobre Node js
O melhor
que Meteor tamb
O resultado disso tudo
Meteor usa JavaScript tanto no cliente quanto no servidor
m consegue compartilhar c
digo entre ambos ambientes
uma plataforma que consegue ser muito poderosa e muito simples
3/261
1/8/2015
abstraindo muitos dos aborrecimentos e armadilhas comuns ao desenvolvimento de
aplicativos web
PorqueMeteor?
Ento por que voc
framework
deveria investir seu tempo aprendendo Meteor ao inv
Deixando de lado todas as caracter sticas do Meteor
resume a uma
nica coisa
Meteor
E se voc
j fez desenvolvimento front end
j est familiarizado com JavaScript e no ser necessrio nem aprender uma
nova linguagem
.
,
Meteor pode ser o framework ideal para suas necessidades
ser
s acreditamos que tudo se
Meteor torna poss vel criar um web app em tempo
real e funcionando na web em questo de horas
voc
fcil de aprender
Mais do que qualquer outro framework
antes
s de um outro web
Mas j que voc
ou ento novamente pode no
pode se familiarizar ao longo de algumas noites or um fim de semana
por
que no tentar e descobrir por si mesmo
Porqueestelivro?
Ao longos dos
ltimos
meses
s estivemos trabalhando em Telescope
Meteor open source que permite qualquer um criar sua pr
),
em Reddit ou Hacker news
pria rede social de not cias
pense
onde pessoas podem enviar links e votar neles
um aplicativo
s aprendemos um bocado construindo esse aplicativo
mas no era sempre fcil encontrar
as respostas para as quest
em muitos casos at
es
s tivemos de encaixar as peas de muitas fontes diferentes
inventar nossas pr
de compartilhar todas essas li
es
prias solu
.
es
Ento com este livro
--
s gostar amos
e criar um simples guia passo a passo que o guiar atrav
da construo de um aplicativo em Meteor completo do zero
O aplicativo que n
Telescope
s estamos construindo
uma verso ligeiramente simplificada do
o qual chamamos de Microscope
Enquanto o construimos
iremos ver todos os
diferentes elementos necessrios na construo de um aplicativo em Meteor
de usurios
cole
es Meteor
roteamento
e mais
tais como contas
.
4/261
1/8/2015
E ap
s voc
ter terminado o livro
digo do Telescope
se voc
quiser ir adiante voc
poder facilmente entender o
j que segue os mesmos padr
es
SobreosAutores
Caso voc
esteja se perguntando quem somos n
segue um pouco sobre a experi
Tom Coleman
ncia do usurio
Meteor
rio de pacotes
s e porque voc
).
deveria confiar em n
aqui
.
,
uma loja de web development com foco em
Ele tamb
e est tamb
s dois
uma parte do Percolate Studio
qualidade e experi
reposit
ncia de n
co autor do Meteorite e da Atmosphere
m por trs de muitos outros projetos open source em
tais como o Router
Sacha Greif tem trabalhado com startups tais como Hipmunk e RubyMotion na rea de
design de produto e web
),
Telescope
e tamb
Ele tamb
criador do Telescope e Sidebar
o qual
baseado em
fundador do Folyo
CaptuloseBarrasLaterais
s queremos que este livro seja
programadores avanados
regulares
numeradores de
til tanto para novatos em Meteor quanto para
ento n
1 14
a
e barras laterais
Cap tulos regulares lhe guiaro atrav
s dividimos os cap tulos em duas categorias
(.5
).
cap tulos
meros
s da construo do aplicativo
e tentaro te deixar o
mais operacional o mais cedo poss vel explicando os mais importantes passos sem lhe
aborrecer com detalhes demais
Por outro lado
barras laterais iro mais aprofundadamente nas entranhas do Meteor
e o
ajudaro a ter uma compreenso melhor do que realmente est acontecendo por trs das
cortinas
Ento se voc
leitura
um iniciante
sinta se livre para ignorar as barras laterais na sua primeira
e volte a elas mais tarde quando voc
j tiver experimentado Meteor
5/261
1/8/2015
CommitseLiveInstances
No h nada pior do que seguir um livro de programao e de repente perceber que o seu
digo est fora de sincronia com os exemplos e que nada mais funciona como deveria
Para evitar isto
,
n
s estabelecemos um reposit
rio GitHub para o Microscope
providenciaremos links para os git commits a cada algumas mudanas de c
Adicionalmente
cada commit tamb
commit em particular
ento voc
e n
s tamb
digo
m linka para uma live instance do aplicativo nesse
pode compar la a sua c
pia local
Aqui est um exemplo
de como isso se parecer
Commit112
Display notifications in the header
Ver no GitHub
Lanar Instncia
Mas perceba que apesar de provermos esses commits isso no significa que voc
ir de um
git checkout
ao pr
ximo
Voc
tempo para digitar manualmente o c
aprender muito melhor se voc
deva apenas
aproveitar o
digo do seu aplicativo
AlgunsOutrosRecursos
Se voc
quiser aprender mais sobre um aspecto em particular do Meteor
oficial do Meteor
o melhor lugar para comear
s tamb
a documentao
m recomendamos Stack Overflow para exposio de problemas e perguntas
meteor IRC channel se voc
precisar de aux lio em tempo real
e o
6/261
1/8/2015
EuprecisodeGit?
Apesar de estar familiarizado com o Git version control no
para seguir ao longo deste livro
s recomendamos muito
estritamente necessrio
Se voc
quiser um comeo veloz
s recomendamos Nick Farina s Git Is Simpler
Than You Think
Se voc
Mac
um novato em Git
o qual permite a voc
de comando
s tamb
m recomendamos o aplicativo GitHub for
clonar e administrar reposit
rios sem precisar usar a linha
EntrandoemContato
Se voc
hello
quiser entrar em contato conosco
discovermeteor com
Adicionalmente
se voc
voc
pode nos enviar um email para
encontrar um typo ou outro erro no conte
pode nos avisar submetendo um erro neste reposit
Se voc
rio GitHub
tiver um problema com o c
no reposit
Finalmente
digo do Microscope
voc
do do livro
voc
pode submeter um error
rio do Microscope
para qualquer outra questo voc
comentrio para n
tamb
s na barra lateral deste aplicativo
m pode apenas deixar um
7/261
1/8/2015
ComeandocomMeteor
Primeiras impress
es so importantes
relativamente indolor
e o processo de instalar o Meteor deve ser
Na maioria dos casos
voc
estar em desenvolvimento em menos de
minutos
Para comear
,
n
s podemos instalar o Meteor abrindo a janela do terminal e teclando
$ curl https://install.meteor.com | sh
Isto instalar o executvel
No
meteor
no seu sistema pronto para voc
usar Meteor
InstalandoMeteor
Se voc
no pode
ou no quer
instalar Meteor localmente
s recomendamos
checar Nitrous io
Nitrous io
um servio que permite a voc
mesmos direto no seu navegador
e n
rodar aplicativos e editar o c
digo dos
s escrevemos um pequeno guia para ajud lo
a comear
Voc
pode simplesmente seguir o guia at
Meteor
&
Meteorite
segmento
e incluindo
o segmento
Instalando
e ento seguir junto com o livro novamente comeando do
Criando um Simples Aplicativo
deste cap tulo
Meteorite
Devido ao fato que Meteor no suporta pacotes de terceiros diretamente
dos autores do livro
Meteor
Tom Coleman
e alguns membros da comunidade criaram Meteorite
Meteorite tamb
m toma conta da instalao de Meteor para voc
qualquer pacote que voc
encontrar
um inv
um
lucro para
e juntando a ele
.
8/261
1/8/2015
J que n
s necessitaremos de pacotes de terceiros para algumas das funcionalidades do
Microscope
vamos instalar Meteorite
InstalandoMeteorite
Voc
precisar se assegurar que node e git estejam instalados na sua mquina
forma padro para o seu Sistema Operacional
Instale os da
ou tente os links a seguir
Node download site
Git download site
Segundo
vamos instalar Meteorite
formato padro de m
Como
),
dulo do Node
um executvel npm
Node Packaged Module
s o instalaremos com
$ npm install -g meteorite
ErrosdePermisso?
Em algunas mquinas voc
Para evitar problemas
pode precisar de root permission para instalar Meteorite
faa questo de usar
sudo -H :
$ sudo -H npm install -g meteorite
Voc
isso a
Nota
pode ler mais sobre esta questo na documentao do Meteorite
Meteorite lidar com as coisas agora
ainda no h suporte Windows para Meteorite
tutorial windows
mas voc
pode dar uma olhada no nosso
9/261
1/8/2015
### mrt
meteor
vs
Meteorite instala o executvel
nosso aplicativo
mrt , o qual ns usaremos para instalar pacotes no
Quando n
usaremos o executvel
s quisermos ativar nosso servidor
entretanto
meteor .
CriandoumSimplesAplicativo
Agora que n
s temos o Meteorite instalado
vamos criar um aplicativo
usamos a ferramenta da linha de comando do Meteorite
Para fazer isto
,
n
mrt :
$ mrt create microscope
Este comando carregar o Meteor
voc
usar
Ap
s isto
voc
e estabelecer um projeto Meteor bsico e pronto para
, microscope/ ,
poder ver um diret
rio
contendo o seguinte
microscope.css
microscope.html
microscope.js
smart.json
O aplicativo que o Meteor criou para voc
padr
um simples aplicativo clich
demonstrando alguns
es simples
Apesar do nosso aplicativo no fazer muito
s j podemos rod lo
Para rod lo
v at
terminal e digite
$ cd microscope
$ meteor
10/261
1/8/2015
Agora navegue no seu navegador para
http://0.0.0.0:3000/
e voc
http://localhost:3000/
ou o equivalente
dever ver algo assim
MeteorsHelloWorld.
Commit21
Created basic microscope project
Ver no GitHub
Parab
ns
Voc
conseguiu rodar seu primeiro aplicativo em Meteor
aplicativo tudo o que voc
rodando
Lanar Instncia
e pressionar
precisa fazer
Alis
para desativar seu
abrir a janela do terminal onde o aplicativo est
ctrl+c .
AdicionandoumPacote
s agora usaremos Meteorite para adicionar um pacote inteligente que nos permitir incluir
Bootstrap no nosso projeto
11/261
1/8/2015
$ mrt add bootstrap
Commit22
Added bootstrap package
Ver no GitHub
Lanar Instncia
UmanotasobrePacotes
Quando se fala de pacotes no contexto de Meteor
usa cinco tipos bsicos de pacotes
O n
cleo do Meteor em si
deve se ser espec fico
precisar se preocupar com eles
e voc
pode ver a lista completa com
Voc
meteor list
37
pacotes
que v
quando voc
voc
m embrulhados com
pode opcionalmente importar para o seu pr
pode adicion los at
Eles
em geral quase nunca
Os pacotes inteligentes do Meteor so um grupo de uns
O Meteor
dividido em diferentes pacotes nucleares
esto inclusos em cada aplicativo em Meteor
Meteor e que voc
prio aplicativo
no est usando Meteorite
com
meteor add packagename .
Pacotes locais so pacotes customizados que voc

diret
rio
pode criar e por no
/packages . Voc tambm no precisa usar Meteorite para us
los
Pacotes inteligentes da Atmosphere so pacotes Meteor de terceiros listados
em Atmosphere
Pacotes NPM
Meteorite
necessrio para importar e us los
Node Packaged Modules
. .
so pacotes do Node js
no funcionarem diretamente com Meteor
de pacote pr
Atmosphere
Apesar deles
eles podem ser usados pelos tipos
vios
AEstruturadeArquivosdeumAplicativoemMeteor
Antes de n
s comearmos a programar
s precisamos estabelecer nosso projeto
12/261
1/8/2015
apropriadamente
microscope
A seguir
Para assegurar que n
s tenhamos uma construo limpa
/microscope : /client , /server , /public ,
rios ra z dentro de
/lib , e /collections , e ns tambm criaremos arquivos main.html
Meteor tem algumas regras
rios so especiais
/server
roda apenas no servidor
/client
roda apenas no cliente
digo no diret
digo no diret
rio
rio
/lib
Qualquer arquivo
main.* lido aps todo resto.
fonts
images
Note que apesar do Meteor ter regras
etc
vo no diret
apenas a nossa forma de fazer as coisas
s encorajamos que voc
/public .
rio
ele realmente no fora voc
de arquivos predefinida para o seu aplicativo se voc
so lidos antes dos outros
Seus recursos estticos
Todo resto roda tanto no cliente quanto no servidor
Arquivos no
Em relao a arquivos
sugerimos
vazios
main.js
ximo cap tulo
s devemos mencionar que alguns desses diret
/client . No se preocupe se isso quebrar o aplicativo por enquanto, ns
comearemos a preencher esses arquivos no pr
rio
microscope.html , microscope.js , e microscope.css .
e delete
crie cinco diret
dentro de
abra o diret
no quiser
a usar nenhuma estrutura
Ento a estrutura que n
no uma regra absoluta
cheque a documentao oficial do Meteor se voc
quiser mais
detalhes sobre isso
13/261
1/8/2015
OMeteorMVC?
Se voc
est vindo para o Meteor de outros frameworks tais como Ruby on Rails
talvez voc
esteja se perguntando se aplicativos em Meteor adotam o padro MVC
).
Model View Controller
A resposta curta
no
Ao inv
s de Rails
predefinida para o seu aplicativo
Meteor no imp
digo de uma forma que faa mais sentido para n
acr
nimos
Ento neste livro n
e nenhuma estrutura
s simplesmente deixaremos o
sem se preocupar demais com
Nopblico?
OK
s mentimos
s no realmente precisamos do diret
de que o Microscope no usa recursos estticos
public/
rio
pela simples razo
Mas j que a maioria dos aplicativos em
Meteor iro incluir pelo menos um conjunto de imagens
,
n
s pensamos que seria importante
cobrir esse assunto
Alis
voc
pode tamb
guarda seu pr
voc
prio c
m ter notado um diret
digo
rio
.meteor
e modificar coisas aqui
nunca realmente precisar olhar este diret
.meteor/packages
rio
es do Meteor
pode ser
Aqui
geralmente um id
As
nicas excess
onde o Meteor
ia muito ruim
Alis
es a isto so os arquivos
.meteor/release , os quais costumam respectivamente listar seus
pacotes inteligentes e a verso do Meteor a se usar
vers
escondido
Quando voc
adicionar pacotes e mudar
til checar as mudanas a esses arquivos
14/261
1/8/2015
UnderscoresvsCamelCase
A
nica coisa que n
vs camelCase
que voc
( myVariable )
que realmente no importa qual voc
( my_variable )
escolha desde
permanea nele
Neste livro
s usaremos camelCase porque
fazer as coisas
As
s iremos dizer sobre o antigo debate underscore
nicas exce
underscores
at
mesmo por que
a forma JavaScript comum de ser
JavaScript e no java
es a esta regra so os nomes de arquivos
( my_file.js ),
razo para tanto
os quais usaremos
as quais usam h fens
pria sintaxe CSS j usa h fens
!).
script
e classes em CSS
que no sistema de arquivos
enquanto a pr
( .my-class ).
underscores so o mais comum
,
.
( font-family , text-align , )
etc
CuidandodasCSS
Este livro no
sobre CSS
Ento para evitar retard los com detalhes de estilizao
decidimos disponibilizar a stylesheet desde o comeo
preocupar com isto de novo
para que voc
jamais precise se
.
,
As CSS so lidas e minificadas automaticamente pelo Meteor
ento diferentemente de outros
/client , no no /public . V em frente e crie um diretrio
recursos estticos elas vo no
client/stylesheets/
agora
e ponha este arquivo
style.css
dentro dele
.grid-block, .main, .post, .comments li, .comment-form {

background: #fff;
border-radius: 3px;
padding: 10px;
margin-bottom: 10px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
body {
background: #eee;
color: #666666;
}
.navbar { margin-bottom: 10px }
.navbar .navbar-inner {
border-radius: 0px 0px 3px 3px;
15/261
1/8/2015
}
#spinner { height: 300px }
.post {
*zoom: 1;
-webkit-transition: all 300ms 0ms;
-webkit-transition-delay: ease-in;
-moz-transition: all 300ms 0ms ease-in;
-o-transition: all 300ms 0ms ease-in;
transition: all 300ms 0ms ease-in;
position: relative;
opacity: 1;
}
.post:before, .post:after {
content: "";
display: table;
}
.post:after { clear: both }
.post.invisible { opacity: 0 }
.post .upvote {
display: block;
margin: 7px 12px 0 0;
float: left;
}
.post .post-content { float: left }
.post .post-content h3 {
margin: 0;
line-height: 1.4;
font-size: 18px;
}
.post .post-content h3 a {
display: inline-block;
margin-right: 5px;
}
.post .post-content h3 span {
font-weight: normal;
font-size: 14px;
display: inline-block;
color: #aaaaaa;
}
.post .post-content p { margin: 0 }
.post .discuss {
display: block;
float: right;
margin-top: 7px;
}
.comments {
list-style-type: none;
margin: 0;
}
.comments li h4 {
font-size: 16px;
16/261
1/8/2015
margin: 0;
}
.comments li h4 .date {
font-size: 12px;
font-weight: normal;
}
.comments li h4 a { font-size: 12px }
.comments li p:last-child { margin-bottom: 0 }
.dropdown-menu span {
display: block;
padding: 3px 20px;
clear: both;
line-height: 20px;
color: #bbb;
white-space: nowrap;
}
.load-more {
display: block;
border-radius: 3px;
background: rgba(0, 0, 0, 0.05);
text-align: center;
height: 60px;
line-height: 60px;
margin-bottom: 10px;
}
.load-more:hover {
text-decoration: none;
background: rgba(0, 0, 0, 0.1);
}
client stylesheets style css
Commit23
Re arranged file structure
Ver no GitHub
Lanar Instncia
17/261
1/8/2015
UmanotasobreCoffeeScript
Neste livro n
Meteor te d cobertura
seguir
s iremos escrever em puro JavaScript
Mas se voc
preferir CoffeeScript
Apenas adicione o pacote CoffeeScript e est pronto para
mrt add coffeescript
18/261
1/8/2015
Deployment
2.5
SIDEBAR
Algumas pessoas gostam de trabalhar quietas num projeto at
ficar perfeito
no conseguem esperar para mostrar ao mundo o mais cedo poss vel
Se voc
enquanto outros
do primeiro tipo de pessoa e prefere desenvolver localmente por hora
de pular este cap tulo
Por outro lado
se voc
sinta se livre
prefere investir seu tempo aprendendo como
implementar seu aplicativo em Meteor na web
s te damos cobertura
s aprenderemos como implementar um aplicativo em Meteor de diferentes formas
livre para usar cada uma delas em qualquer estgio do seu processo de desenvolvimento
trabalhando no Microscope ou qualquer outro aplicativo em Meteor
Vamos comear
Sinta se
seja
IntroduzindoBarrasLaterais
Este
um cap tulo barra lateral
Barras laterais vo mais afundo em t
sobre Meteor independente do resto do livro
Ento se voc
picos gerais
.
,
prefere continuar construindo Microscope
voc
pode seguramente
pular isto por hora e voltar mais adiante
ImplementandocomMeteor
Implementar com um subdom nio Meteor
opo mais fcil
e a primeira que n
aplicativo em Meteor
Isto pode ser
til para mostrar seu
ou para rapidamente montar um servidor de teste
bem simples
e digite
http://meuaplicativo.meteor.com a
s vamos tentar
aplicativo para outros nos primeiros dias
Implementando em Meteor
vulgo
Apenas abra seu terminal
v ao diret
rio do seu
$ meteor deploy myapp.meteor.com
19/261
1/8/2015
Claro
voc
que ter que substituir
preferidamente um que ainda no esteja em uso
Meteor pedir a voc
ctrl+c
uma senha
meuaplicativo
Se isso ocorrer
pelo nome do seu aplicativo de escolha
Se o nome escolhido j estiver em uso
simplesmente cancele a operao com
e tente novamente com um nome diferente
Se tudo der certo
ap
s alguns segundos voc
poder acessar seu aplicativo em
http://meuaplicativo.meteor.com .
ProteocomSenha
Por padro
no h restrio para subdom nios Meteor
dom nio de sua escolha
Qualquer um pode usar o nome de
e rescrever qualquer aplicativo existente
Ento voc
ir querer por uma senha para proteger o seu nome de dom nio com a opo
provavelmente
-p , como
abaixo
$ meteor deploy myapp.meteor.com -p
Meteor ir ento pedir a voc
necessria toda vez que voc
Voc
para definir uma senha
e da
em diante esta senha ser sempre
quiser implementar este aplicativo em particular
pode checar a documentao oficial para mais informao sobre essas coisas como
acessar a instncia hospedada do banco de dados diretamente
ou como configurar um
dom nio customizado para o seu aplicativo
ImplementandoemModulus
Modulus
uma
provedores PaaS
tima opo para implementar aplicativos em NodeJS
- --
platform as a service
um dos poucos
que oficialmente suportam Meteor
e j h vrias
pessoas rodando aplicativos Meteor em produo nele
20/261
1/8/2015
Demeteorizer
Modulus liberou uma ferramenta em open source chamada demeteorizer
converte aplicativos em Meteor em aplicativos em NodeJS padro
Comece por criar uma conta
a qual
Para implementar nosso aplicativo no Modulus
s ento
precisaremos instalar a ferramenta de linha de comando Modulus
$ npm install -g modulus
E ento autentic la com
$ modulus login
s agora criaremos um projeto Modulus
(
):
note que voc
tamb
m pode fazer isso atrav
painel de instrumentos online do Modulus
$ modulus project create
O pr
ximo passo ser criar um banco de dados MongoDB para o nosso aplicativo
podemos criar um banco de dados MongoDB com o pr
prio Modulus
MongoHQ ou com
qualquer outro provedor MongoDB em nuvem
Uma vez criado o banco de dados MongoDB
banco de dados com UI online do Modulus
database
>
),
Administration
,
n
s podemos pegar a
v ao Dashboard
>
MONGO_URL
Databases
>
para o nosso
Select your
ento use o para configurar seu aplicativo assim
21/261
1/8/2015
$ modulus env set MONGO_URL "mongodb://<user>:<pass>@mongo.onmodulus.net:270

17/<database_name>"
Agora
hora de implementar seu aplicativo
to simples quanto digitar
$ modulus deploy
s implementamos nosso aplicativo no Modulus com sucesso
Modulus para mais informao sobre como acessar logs
Cheque a documentao do
configurando dom nio customizado
e SSL
MeteorUp
Apesar que novas solu
es na nuvem t
pr
m aparecido a cada dia
prias parcelas de problemas e limita
.
es
Ento at
elas costumam vir com suas
hoje
implementar no seu pr
prio
servidor permanece a melhor forma de por seu aplicativo Meteor em produo
questo
implementar voc
mesmo no
to simples
especialmente se voc
nica
est
procurando por implementao com qualidade de produo
Meteor Up
ou a abreviao
mup outra tentativa de resolver essa questo, com um
utilitrio da linha de comando que toma conta da configurao e implementao para voc
Ento vamos ver como implementar Microscope com Meteor Up
Antes de qualquer coisa
,
n
voc
s precisaremos de um servidor para enviar o conte
recomendamos o Digital Ocean
instncias de graa
o qual comea com
$5
por m
ou AWS
do
o qual prov
rapidamente vai se deparar com problemas de escalar
).
Micro
mas se voc
est procurando apenas experimentar Meteor Up ser o suficiente
Independente do servio que voc
servidor
um login
seguro
normalmente
escolher
root
ou
voc
deve ter tr
s coisas
o endereo de IP do seu
ubuntu , e uma senha. Deixe
as em algum lugar
s precisaremos delas logo
22/261
1/8/2015
IniciandoMeteorUp
Para comear
,
n
s precisaremos instalar Meteor Up via
npm
como a seguir
$ npm install -g mup
s ento criaremos um diret
rio especial
separado que ter as configura
Meteor Up para uma implementao em particular
separado por duas raz
rep
sitorio Git
Segundo
es
primeiro
especialmente se voc
usando m
s estamos usando um diret
rio
digos p
blico
rios separados
est trabalhando num banco de c
es Meteor Up em paralelo
instncias de produo e teste
es do nosso
melhor evitar incluir credenciais privadas no seu
ltiplos diret
ltiplas configura
s seremos capazes de administrar
Isso ser
til para implementao para
por exemplo
Ento vamos criar este novo diret
rio e us lo para iniciar um novo projeto Meteor Up
$ mkdir ~/microscope-deploy
$ cd ~/microscope-deploy
$ mup init
CompartilhandocomDropbox
Uma grande forma de assegurar que voc
configura
es de implementao
seu Dropbox
e seu time todos esto usando as mesmas
criar uma pasta de configurao do Meteor Up no
ou em qualquer servio similar
ConfiguraodoMeteorUp
Quando comear um novo projeto
: mup.json
Meteor Up criar dois arquivos para voc
settings.json .
23/261
1/8/2015
mup.json
ter todas as suas configura
settings.json
tokens
ximo passo
gerado por
es relacionadas ao aplicativo
..
etc
O pr
ter as configura
es relacionadas implementao
enquanto
OAuth tokens
analytics
mup.json . Aqui est um arquivo mup.json
configurar seu arquivo
padro
mup init , e tudo que voc precisa fazer preencher as lacunas:
//server authentication info

"servers": [{
"host": "hostname",
"username": "root",
"password": "password"
//or pem file (ssh based authentication)
//"pem": "~/.ssh/id_rsa"
}],
//install MongoDB in the server
"setupMongo": true,
//location of app (local directory)
"app": "/path/to/the/app",
//configure environmental
"env": {
"ROOT_URL": "http://supersite.com"
}
mup json
Vamos checar cada uma dessas configura
es
Autentificao do Servidor
Voc
perceber que o Meteor Up suporta autenticao baseada em senha e chave privada
( ),
PEM
ento ele pode ser usado com quase qualquer provedor em nuvem
Nota Importante
voc
instalou o
se voc
sshpass
escolher uma autenticao baseada em senha
antes
).
tenha certeza que
use este guia
24/261
1/8/2015
Configurao MongoDB
O pr
ximo passo
configurar o banco de dados MongoDB para o seu aplicativo
recomendamos usar MongoHQ ou qualquer outro provedor MongoDB em nuvem
j que eles
oferecem suporte profissional e ferramentas administrativas melhores
Se voc
decidir usar MongoHQ
MONGO_URL
ambiental
Meteor Up
no bloco
apenas defina
setupMongo
defina
env
de
setupMongo
como
false
e adicione a varivel
mup.json . Se voc decidir hospedar MongoDB com
como
true
e Meteor Up cuidar do resto
Caminho Meteor Up
J que a nossa configurao do Meteor Up vive em outro diret
rio
o Meteor Up de volta para o nosso aplicativo usando a propriedade
caminho local completo
o qual voc
app . Apenas insira seu
pode conseguir usando o comando
quando localizado dentro do diret
s precisaremos apontar
pwd
pelo terminal
rio do seu aplicativo
Variveis Ambientais
Voc
pode especificar todas as variveis ambientais do seu aplicativo
MAIL_URL , MONGO_URL , etc.
dentro do bloco
env .
tais como
ROOT_URL ,
ConfigurandoeImplementando
Antes de n
s implementarmos
s precisaremos configurar o servidor para que esteja pronto
para hospedar seus aplicativos em Meteor
complexo em um
A mgica do Meteor Up captura este processo
nico comando
$ mup setup
Isto levar alguns minutos dependendo da performance do servidor e da conectividade da
rede
com
Ap
s o sucesso da instalao
s podemos finalmente implementar nosso aplicativo
25/261
1/8/2015
$ mup deploy
Isto embrulhar o aplicativo em Meteor
e o implementar no servidor que n
s configuramos
MostrandoLogs
Logs so bem importantes e o Meteor Up prov
uma maneira bem fcil de lidar com eles ao
tail -f . Apenas digite:
emular o comando
$ mup logs -f
Isto resume a viso geral do que o Meteor Up pode fazer
visitar o reposit
rio GitHub do Meteor Up
Para mais informao
,
n
s sugerimos
Estas tr
s maneiras de implementar aplicativos em Meteor deve ser o suficiente para a maioria
dos casos
Claro
,
n
s sabemos que voc
servidor Meteor do princ pio
Mas isto
prefere estar em total controle e configurar seu
um t
pico para outro dia
ou talvez outro livro
26/261
1/8/2015
Templates
Para facilitar o desenvolvimento em Meteor
dentro
s adotaremos uma abordagem de fora para
Em outras palavras
HTML JavaScript primeiro
s iremos constuir uma casca externa
burra
com
e ento associar com o funcionamento interno de nosso aplicativo
no subsequentes trabalhos
Isto significa que neste cap tulo n
dentro do diret
rio
s apenas nos preocuparemos com o que est acontecendo
client
Vamos criar um novo arquivo chamado main html dentro de nosso diret
preench
lo com o seguinte c
digo
rio
client
e vamos
<head>
<title>Microscope</title>
</head>
<body>
<div class="container">
<header class="navbar">
<div class="navbar-inner">
<a class="brand" href="/">Microscope</a>
</div>
</header>
<div id="main" class="row-fluid">
{{> postsList}}
</div>
</div>
</body>
client main html
Este ser nosso principal template do aplicativo
uma
nica tag
Como voc
pode ver
HTML puro exceto por
{{> postsList}} , a qual um ponto de insero para o template postList
como logo veremos
Por enquanto
vamos criar mais alguns templates
MeteorTemplates
27/261
1/8/2015
No seu mago
um site de not cias sociais
composto de postagens organizadas em listas
,
e
exatamente assim que iremos organizar nossos templates
Vamos criar um diret
nossos templates
dentro de
/views
/views
rio
/client . Isto ir ser onde ns colocaremos
dentro de
e para manter as coisas organizadas n
s tamb
/posts
m criaremos
apenas para nossos templates relacionados com postagens
FindingFiles
O Meteor
incr vel para encontrar arquivos
digo no diret
/client , o Meteor ir encontr
rio
Isto significa que voc
No importa onde voc
colocou o seu
lo e compil lo corretamente
nunca precisar manualmente escrever caminhos para
incluso de arquivos JavaScript ou CSS
Isto tamb
m significa que voc
mesmo diret
rio
poderia muito bem colocar todos os seus arquivos no
ou ainda todo o seu c
o Meteor vai compilar tudo em um
digo em um mesmo arquivo
Mas desde que
nico arquivo minificado de qualquer forma
melhor que mantemos as coisas bem organizadas e utilize uma estrutura clara de
arquivos
s finalmente estamos prontos para nosso segundo template
Dentro de
client/views/posts , crie posts_list.html :
<template name="postsList">
<div class="posts">
{{#each posts}}
{{> postItem}}
{{/each}}
</div>
</template>
client views posts posts
list html
post_item.html :
28/261
1/8/2015
<template name="postItem">
<div class="post">
<div class="post-content">
<h3><a href="{{url}}">{{title}}</a><span>{{domain}}</span></h3>
</div>
</div>
</template>
/ _
client views posts post
Note o atributo
item html
name="postList"
do elemento template
Este
o norme que ser utilizado
pelo Meteor para acompanhar qual template vai aonde
hora de introduzir o sistema de templating do Meteor
simplesmente HTML
blocos de ajuda
com a adio de tr
).
s coisas
parciais
partials
),
Handlebars
express
es
expressions
block helpers
As parciais usam a s ntaxe
{{> templateName}} , e simplemente dizem ao Meteor para
substituir a parcial com o template de mesmo nome
Express
o Handlebars
es tais como
{{title}}
no nosso caso
postItem .
ou chamam a propriedade do objeto atual
ou retornam o
valor de um auxiliar do template como definido no gerenciador atual do template
).
logo mais
sobre isso
Finalmente
blocos de ajuda so tags especiais que controlam o fluxo do template tais como
{{#each}}...{{\each}}
ou
{{#if}}...{{\if}} .
IndoAlm
Voc
pode visitar o site oficial de Handlebars ou este prtico tutorial se quiser
aprender mais sobre Handlebars
Armado com este conhecimento
aqui
s podemos facilmente entender o que est acontecendo
29/261
1/8/2015
Primeiro
no template
postsList , ns estamos iterando sobre um objeto posts
com o
{{#each}}...{{\each}} . Ento, para cada iterao ns incluimos o template
bloco de ajuda
postItem .
De onde este objeto
template
e n
title
Boa pergunta
Se trata na verdade de um ajudante do
em si mesmo
bem direto
Apenas usa tr
ambas retornando as propriedades do documento
ajudante do template
se origina
s iremos defini lo quando olharmos para os gerenciadores de template
postItem
O template
{{ }}
posts
s mencionamos
"
s express
{{domain}}
: {{url}}
es
que chama um
ajudantes do template
explicar o que eles fazem
bastante ao longo deste cap tulo sem realmente
Mas para consertar isso
primeiro precisamos falar sobre gerentes
GerentesdeTemplate
At
agora n
s estvamos lidando com Handlebars
algumas tags especiais
ou at
que nada mais
do que HTML acrescido de
Diferentemente de outras linguagens de programao como o PHP
mesmo pginas HTML comuns
),
que podem incluir JavaScript
templates e as l
necessrio um gerente
antes de entregar o prato finalizado ao garom
Em outras palavras
o template
Voc
gerente como um chef de cozinha que pega os ingredientes crus
o Meteor mant
gicas separadas e esses templates no fazem muita coisa por si s
Para fazer com que eles ganhem vida
gerente
m os
pode pensar em um
seus dados
e prepara eles
que o apresenta a voc
.
,
enquanto o papel do template se limita a exibir ou iterar variveis
aquele que faz todo o trabalho pesado atribuindo valores para cada uma dessas
variveis
30/261
1/8/2015
Gerentes?
Quando n
s perguntarmos por a
chamam esses
e como a sigla
Javascript
no
metade respondeu
aqueles arquivos onde eu coloco meu c
Gerentes no so de fato
gerentes de template
metade respondeu
MVC
a outros desenvolvedores Meteor como eles
e a outra
digo JavaScript
controllers
AAOECMCJ
controllers
pelo menos no no sentido de controllers do
Aqueles Arquivos Onde Eu Coloco Meu C
muito atraente
s acabamos rejeitando as duas op
digo
es
Como ainda precisvamos usar um nome para indicar aquilo a que estvamos nos
referindo
s optamos pelo termo
gerente
como uma alternativa vivel j que no
tinha um significado relacionado a nenhum outro framework web
Para simplifcar as coisas
template
s iremos adotar a mesma conveno de nomes utilizada para o
com exceo da utilizao da extenso
dentro do diret
rio
/client/views/posts
. .
js
Vamos criar o arquivo
posts_list.js
e comear a definir nosso primeiro gerente
var postsData = [
{
title: 'Introducing Telescope',
author: 'Sacha Greif',
url: 'http://sachagreif.com/introducing-telescope/'
},
{
title: 'Meteor',
author: 'Tom Coleman',
url: 'http://meteor.com'
},
{
title: 'The Meteor Book',
url: 'http://themeteorbook.com'
}
];
Template.postsList.helpers({
posts: postsData
});
list js
31/261
1/8/2015
Se voc
fez tudo certo
algo parecido com isso ir aparecer no seu navegador
Nossoprimeirotemplatecomdadosestticos
Commit31
Template de listagem de posts e dados estticos adicionados
Ver no GitHub
s estamos fazendo duas coisas aqui
array
Lanar Instncia
Primeiro estamos colocando alguns dados de teste no
postsData . Esses dados normalmente seriam provenientes de um banco de dados, mas
- (
como ainda no vimos como acess lo
trapaceando
usando alguns dados estticos
Template.myTemplate.helpers()
posts
aguarde at
posts
o pr
ximo cap tulo
s estamos
Depois estamos usando a funo
do Meteor para definir um ajudante de template chamado
que simplesmente nos retornar o array
Definir o ajudante
postsData .
significa que ele agora estar dispon vel para ser usado pelo nosso
template
32/261
1/8/2015
<div class="posts">
{{#each posts}}
{{> postItem}}
{{/each}}
</div>
</template>
list html
Agora ser poss vel que nosso template itere sobre o array
contido dentro dele para o template
postsData
e envie cada objeto
postItem .
Ovalordothis
s iremos criar agora o gerente
post_item.js
Template.postItem.helpers({
domain: function() {
var a = document.createElement('a');
a.href = this.url;
return a.hostname;
}
});
/ _
item js
Commit32
Definio do ajudante
domain
Ver no GitHub
Desse vez o valor do ajudante
pattern
muito mais comum
domain
e mais
no
til
no template
postItem
`.
Lanar Instncia
um array
mas uma funo an
nima
Esse
se comparado aos nossos exemplos com dados de
teste anteriores
33/261
1/8/2015
Exibindoosdomniosdecadalink.
O ajudante
Javascript
domain
Mas
recebe uma URL e retorna seu dom nio utilizando um pouco da mgica do
pra comear
de onde ela pega essa URL
Para responder a essa pergunta n
O ajudante
{{#each}}
s precisamos voltar ao nosso template
no apenas itera um array mas tamb
posts_list.html .
m atribui o valor do
this
dentro do bloco do objeto iterado
Isso significa que entre as duas tags
{{#each}} , cada post atribudo ao this
sucessivamente e isso tamb
Agora n
m se aplica ao gerente de template
s entendemos o porque do
s usarmos
{{title}}
sabe que isso significa
{{url}}
this.title
this.url
retornar a URL do post atual
dentro do nosso template
( post_item.js ).
this.url
E al
m disso
se
post_item.html , o Meteor
e retorna os valores corretos
34/261
1/8/2015
MgicadoJavascript
Embora isso no seja especif co do Meteor
dessa pequena
(a)
,
.
Primeiro
href
a URL do post atual
s estamos criando
ria
como n
).
s j vimos
corresponde ao objeto sob a qual a ao est acontecendo
Por
descrita acima
vazio e armazenando o na mem
Depois colocamos em seu atributo
this
mgica do Javascript
um elemento HTML de ncora
aqui vai uma breve explicao a respeito
ltimo
s aproveitamos o fato de que o elemento
especial chamada
hostname
tem uma a propriedade
para recuperar o nome de dom nio do link sem o
restante da URL
Se voc
seguiu tudo corretamente
navegador
Essa lista
dever estar vendo agora uma lista de posts no seu
composta apenas por dados estticos
vantagem dos recursos real time do Meteor
portanto ela ainda no tira
s iremos mostrar como mudar isso no pr
ximo
cap tulo
RecarregamentoAutomticodeCdigo
Voc
deve ter notado que no precisa nem recarregar a janela do seu navegador
quando altera um arquivo
Isso acontece porque o Meteor rastreia todos os arquivos dentro do diret
rio do seu
projeto e automaticamente d refresh no seu navegador sempre que detecta
mudanas em algum desses arquivos
O recarregamento automtico de c
digo do Meteor
bem esperto
Ele at
preserva o
estado da sua aplicao entre um refresh e outro
35/261
1/8/2015
UsandoGit&GitHub
GitHub
verso
tamb
rio social de projetos open source baseado no sistema Git de controle de
e sua funo principal
um reposit
3.5
SIDEBAR
um
tornar fcil compartilhar c
timo instrumento de ensino
rapidamente por algumas maneiras que voc
digo e colaborar em projetos
Nesta barra lateral
Mas
,
n
s vamos passar
pode utilizar o GitHub para acompanhar o
Descubra Meteor
Esta barra lateral sup
e que voc
confortvel com ambos
no est to familiarizado com Git e GitHub
Se voc
j est
sinta se livre para pular este cap tulo
SendoCommitted
O bloco bsico de trabalho de um reposit
rio git
um commit
Voc
pode pensar o commit
como um instantneo do estado do seu banco de c
Ao inv
s de simplesmente dar a voc
o c
instantneos a cada passo do caminho
Por exemplo
isto
o que o
digo em um dado momento no tempo
digo finalizado do Microscope
e voc
s tiramos estes
pode ver todos eles online no GitHub
ltimo commit do cap tulo pr
vio se parece com
36/261
1/8/2015
AGitcommitasshownonGitHub.
O que voc
aqui
(
diff
de
difference
as mudanas introduzidas por este commit
do princ pio
ento todo seu conte
do arquivo
post_item.js , em outras palavras
Neste caso
s criamos o arquivo
post_item.js
do est destacado em verde
Vamos comparar com um exemplo de mais adiante no livro
Modifyingcode.
Desta vez
E claro
apenas as linhas modificadas esto destacadas em verde
s vezes voc
no est adicionando ou modificando linhas de c
digo
mas deletando
as
37/261
1/8/2015
Deletingcode.
Ento n
s vimos o primeiro uso do GitHub
ver o que mudou num relance
ProcurandoumCdigodeCommit
A vista commit do Git nos mostra as mudanas inclu das neste commit
pode querer ver arquivos que no foram modificados
mas s vezes voc
apenas para ter certeza de como seus
digos devem se parecer neste estgio do processo
Mais uma vez o GitHub vem a n
.
s
Quando voc
est numa pgina commit
clique no boto
Browse code
38/261
1/8/2015
TheBrowsecodebutton.
Voc
agora ter acesso ao repo como ele est num commit espec fico
Therepositoryatcommit32.
GitHub no nos d muitas dicas visuais de que n
pode comparar com a vista master
normal
s estamos olhando um commit
mas voc
e ver num relance que a estrutura do arquivo
39/261
1/8/2015
diferente
Therepositoryatcommit142.
AcessandoUmCommitLocalmente
s acabamos de ver como procurar o c
se voc
quiser fazer o mesmo localmente
digo inteiro de um commit online no GitHub
Por exemplo
voc
Mas e
pode querer rodar o app
localmente num espec fico commit para ver como ele deveria se comportar neste ponto do
processo
Para fazer isto
s tomaremos nossos primeiros passos
utilitrio de linha de comando
instalado
Ento clone
Microscope com
bem
neste livro ao menos
com o
git . Para iniciantes, tenha certeza de que voc tem Git
em outras palavras
baixe a c
pia localmente
o reposit
rio do
$ git clone git@github.com:DiscoverMeteor/Microscope.git github_microscope
Esse
github_microscope
estar clonando o app
no final
simplesmente o nome do diret
Supondo que voc
j tem um diret
rio
rio local para o qual voc
microscope
pre existente
40/261
1/8/2015
apenas escolha qualquer nome diferente
Vamos
no precisa ter o mesmo nome do GitHub repo
cd
para dentro do reposit
linha de comando
rio para que n
).
s possamos comear a utilizar o utilirrio de
git :
$ cd github_microscope
Agora quando n
s clonamos o reposit
significa que n
Felizmente
outros
rio GitHub
s estamos olhando o c
digo do
h um jeito de voltar no tempo e
,
n
s baixamos todo o c
digo do app
o que
ltimo commit
selecionar
um commit espec fico sem afetar os
Vamos tentar isto
$ git checkout chapter3-1

Note: checking out 'chapter3-1'.
Voc est no estado 'detached HEAD'. Voc pode olhar ao redor, fazer mudana
s experimetnais e comet-las, e voc pode descartar qualquer commits que voc
fez neste estado sem afetar nenhum branch ao efetuar outro checkout.
Se voc quer criar um novo branch para preservar os commits que voc cria, v
oc pode faz-lo (agora ou mais tarde) usando -b com o comando checkout de n
ovo. Exemplo:
git checkout -b new_branch_name
HEAD is now at a004b56... Adicionado template bsicos da lista de artigos e
informao esttica.
Git nos informa que n
importa
s estamos no
detached HEAD
o que significa que at
s podemos observar commits passados mas n
Note que o Git tamb
m tem comandos que permitem voc
onde o Git se
s no podemos modific los
pode pensar nisto como um mago inspecionando o passado atrav
Voc
s de uma bola de cristal
mudar commits passados
Isto
seria mais como um viagem do tempo voltando no tempo e possivelmente pisando numa
borboleta
mas isto est al
).
m do escopo desta breve introduo
41/261
1/8/2015
A razo de porque voc
foi capaz de simplesmente digitar
todos os commits do Microscope com o marcador de cap tulo certo
voc
precisaria primeiro encontrar a hash do commit
Mais uma vez
o GitHub faz nossas vidas mais fcil
tagged
Se este no fosse o caso
ou identificador
Voc
chapter3-1 que ns pre
nico
pode encontrar a hash do commit no
canto inferior direito da caixa de cabealho azul do commit
como mostrado aqui
Findingacommithash.
Ento vamos tentar isto com a hash ao inv
s da tag
$ git checkout c7af59e425cd4e17c20cf99e51c8cd78f82c9932

Previous HEAD position was a004b56... Added basic posts list template and st
atic data.
HEAD is now at c7af59e... Augmented the postsList route to take a limit
E finalmente
presente
e se n
s quisessemos parar de olhar pela bola mgia de cristal e voltar para o
s dizemos ao Git que n
s queremos check out o master branch
$ git checkout master

42/261
1/8/2015
Note que voc
processo
update
at
pode tamb
meteor
m rodar o app com o comando
quando em estado
detached HEAD
Voc
pode precisar rodar um rpido
primeiro se o Meteor reclamar de pacotes faltando
em qualquer ponto do
j que o c
mrt
digo de pacote no est
inclu do no Git repo do Microscope
PerspectivaHistrica
Aqui mais outro cenrio comum
que voc
mudou
no tinha visto antes
Voc
voc
est olhando um arquivo e percebe algumas mudanas
A questo
voc
no pode lembrar quando um arquivo
poderia apenas olhar cada commit um a um at
uma forma mais fcil graas ao utens lio Hist
Primeiro
acesse um dos arquivos do reposit
ria do GitHub
rio no GitHub
voc
encontrar o certo
mas h
.
ento encontre o boto
History
GitHubsHistorybutton.
Voc
agora tem uma lista arrumada de todos os commits que afetaram este arquivo em
particular
43/261
1/8/2015
Displayingafileshistory.
OJogodaCulpa
Para finalizar
vamos dar uma olhada na Culpa
GitHubsBlamebutton.
44/261
1/8/2015
Esta vista arrumada nos mostra linha por linha quem modificou o arquivo
em outras palavras
e em cada commit
):
quem culpar quando as coisas no esto funcionando mais
GitHubsBlameview.
Agora
Git
uma ferramenta razoavelmente complexa
podemos esperar cobrir tudo num
superf cie do que
pouquinho ser
nico cap tulo
til assim que voc
e o GitHub tamb
Na verdade
poss vel com essas ferramentas
-,
ento n
s no
s mal arranhamos a
Mas felizmente
at
mesmo este
seguir pro resto deste livro
45/261
1/8/2015
Collections
No primeiro cap tulo
,
n
s falamos sobre a caracter stica central do Meteor
a sincronizao
automtica de informao entre o cliente e o servidor
Neste cap tulo
,
n
s olharemos mais de perto como isso funciona
da pea chave da tecnologia que permite isso
a Meteor Collection
s estamos construindo um aplicativo social de not cias
queremos
desses
ento a primeira coisa que n
fazer uma lista de links que as pessoas postaram
tens de
e observaremos a operao
.
N
s chamaremos cada um
post
Naturalmente
s precisamos armazenar esses posts em algum lugar
com um banco de dados Mongo que roda no servidor e
Ento
Meteor vem integrado
o seu banco de mem
especialmente Mongo
ou o comentrio que eles esto digitando agora
cont
s queremos dizer que
diferente
a mesma para todos usurios
atrav
por exemplo
nica
Por can
Uma coleo
s de publica
es e assinaturas
um tipo de estrutura de
toma conta de sincronizar
Vamos ver como
s queremos que nossos posts sejam permanentes e compartilhados entre usurios
o banco de
s comearemos criando uma coleo chamada
no fez isso crie uma pasta
posts.js
dentro dela
nica
cada usurio pode estar numa pgina
informao em tempo real de e para o navegador de cada usurio conectado e at
dados Mongo
a mesma para todos
armazenada no Meteor na Coleo
dados especial que
o servidor
m a fonte de informao permanente e can
mas a lista mestre de posts
Esta informao
),
ria persistente
apesar do navegador de um usurio poder conter algum tipo de estado
que pgina eles esto
collections/
Ento adicione
Posts
para armazen los
na ra z do seu aplicativo
Se voc
ento
ainda
e ento um arquivo
Posts = new Meteor.Collection('posts');
46/261
1/8/2015
collections posts js
Commit41
Added a posts collection
Ver no GitHub
digo dentro de pastas que no so
Posts
Ento a coleo
Lanar Instncia
client/
server/
ou
rodaro em ambos contextos
est dispon vel para tanto cliente quanto servidor
coleo faz em cada ambiente
Entretanto
o que a
bem diferente
UsarVarOuNoUsarVar?
Em Meteor
a palavra chave
var
s queremos fazer a coleo
limita o escopo de um objeto ao arquivo atual
Posts
dispon vel para todo nosso aplicativo
porqu
No servidor
s no estamos usando a palavra chave
de dados padro
real coleo can
Neste sentido
No cliente entretanto
nica
var .
Aqui
este
a coleo tem o trabalho de conversar com o banco de dados Mongo
escrever qualquer mudanas
e ler e
pode ser comparada a uma biblioteca de bancos
a coleo
A coleo do lado do cliente
uma c
pia segura de um subconjunto da
constantemente e
em sua maior parte
transparentemente mantida atualiza com esse subconjunto em tempo real
ConsolevsConsolevsConsole
Neste cap tulo
,
n
s comearemos a fazer uso do browser console
confundido com o terminal ou o Mongo shell
que no deve ser
Aqui est uma rpida demo sobre
cada um deles
Terminal
47/261
1/8/2015
TheTerminal
Chamado do seu sistema operacional
Lado do Servidor
console.log()
chama o output aqui
: $.
Prompt
Tamb
m conhecido por
Shell
Bash
ConsoledoNavegador
TheBrowserConsole
Chamando de dentro do navegador
Lado do Cliente
console.log()
executa c
digo JavaScript
chama o output aqui
.
48/261
1/8/2015
Prompt
Tamb
m conhecido por
JavaScript Console
DevTools Console
MongoShell
TheMongoShell
Chamado pelo terminal atrav
s de
meteor mongo .
D acesso direto ao banco de dados do seu aplicativo
: >.
Prompt
Tamb
m conhecido por
Note que em cada caso
parte do comando
prompt
voc
E voc
Mongo Console
no deve digitar o caracter prompt
( $ , ,
>
ou
como
pode assumir que qualquer linha que no comece com o
o resultado do comando anterior
ColeesdoLadodoServidor
No servidor
servidor
a coleo atua como uma API dentro do seu banco de dados Mongo
isto permite que voc
escreva comandos Mongo como
Posts.update() , e eles faro mudanas na coleo posts
Para ver dentro do banco de dados Mongo
meteor
comando
meteor mongo
Posts.insert()
),
e v at
para inicar um Mongo shell
digo do
ou
armazenada dentro do Mongo
abra uma segunda janela do terminal
ainda est rodando na sua primeira
No c
o diret
rio do aplicativo
no qual voc
enquanto o
Ento
rode o
pode digitar comandos
49/261
1/8/2015
Mongo
e como costumeiramente
exemplo
voc
vamos inserir um novo post
pode sair com o atalho de teclado
ctrl+c . Por
> db.posts.insert({title: "A new post"});

> db.posts.find();
{ "_id": ObjectId(".."), "title" : "A new post"};
The Mongo Shell
MongonoMeteor.com
*.
Note que quando hospedar um aplicato em
meteor com
acessar a Mongo shell do seu aplicativo hospedado com
E j que estamos falando disso
digitando
voc
tamb
voc
pode tamb
meteor mongo myApp .
m pode acessar os logs do seu aplicativo
meteor logs myApp .
A sintaxe do Mongo
familiar
j que utiliza uma interface JavaScript
nenhuma outra manipulao de informao na Mongo shell
.
N
s no faremos
mas n
s poderemos dar uma
olhada nela de tempos em tempos para nos assegurar do que est l
ColeesdoLadodoCliente
Cole
es se tornam mais interessantes do lado do cliente
Meteor.Collection('posts');
no cliente
o que voc
no navegador da verdadeira coleo Mongo
cliente ser um
informao
cache
est criando
Quando n
declara
Posts = new
um cache em tempo real
s falamos sobre coleo do lado do
s queremos dizer que ela cont
m um subconjunto da sua
e oferece um acesso muito veloz a mesma
importante entender este ponto j que
Em geral
Quando voc
fundamental para o modo como o Meteor funciona
a coleo do lado do cliente consiste em um subconjunto de todos os documentos
armazenados na coleo Mongo
at
mesmo porque n
s geralmente no queremos mandar
50/261
1/8/2015
todo nosso banco de dados para o cliente
Segundo
).
esses documentos esto armazenados na mem
que acess los
basicamente instantneo
ria do navegador
Ento no h viagens lentas at
banco de dados para coletar essa informao quando voc
j que a informao j est pr
o que significa
o servidor ou ao
Posts.find()
chama
no cliente
carregada
IntroduzindoMiniMongo
A implementao do Meteor para o Mongo no lado do cliente se chama MiniMongo
No
uma implementao perfeita ainda
e voc
pode encontrar ocasionalmente
caracter sticas Mongo que no funcionam no MiniMongo
De qualquer forma
todas
as caracter stcas que n
s cobrimos neste livro funcionam de modo similar tanto no
Mongo quanto no MiniMongo
ComunicaoClienteServidor
A pea chave para tudo isso
como a coleo do lado do cliente sincroniza sua informao
com a coleo do lado do servidor com o mesmo nome
Ao inv
s de explicar isto em detalhe
Ento
e acessando o console do navegador em cada
abra a Mongo shell na linha de comando
documento que n
).
no nosso caso
vamos apenas ver o que acontece
Comece abrindo duas janelas no navegador
uma
( 'posts'
Neste ponto
s criamos anteriormente em todos os tr
s devemos ver um
s contextos
nico
> db.posts.find();
{title: "A new post", _id: ObjectId("..")};
The Mongo Shell
51/261
1/8/2015
Posts.findOne();
{title: "A new post", _id: LocalCollection._ObjectID};
First browser console
Vamos criar um novo post
Em uma das janelas do navegador
rode um comando insert
Posts.find().count();
Posts.insert({title:
'xxx'
2
"A second post"});
First browser console
Sem surpresas
o post chegou na coleo local
Agora vamos checar o Mongo
db.posts.find();
{title: "A new post", _id: ObjectId("..")};

{title: "A second post", _id: 'yyy'};
The Mongo Shell
Como voc
pode ver
escrevermos uma
o post fez todo o caminho at
o banco de dados Mongo
nica linha de c
estritamente falando
s escrevemos uma
digo que conectasse o cliente at
nica linha de c
digo
o servidor
: new
sem n
bem
Meteor.Collection('posts') . Mas isto no tudo
V segunda janela do navegador e digite isto no console do navegador
52/261
1/8/2015
Second browser console
O post est l tamb
Mesmo apesar de n
com o segundo navegador
atualiza
es
tornar mais
s nunca termos atualizado ou sequer interagido
e n
s certamente no escrevemos nenhum c
Tudo aconteceu magicamente
bvio mais tarde
O que acontece
digo para empurrar
e instantaneamente tamb
apesar que isto se
que a nossa coleo do lado do servidor foi informada pela nossa coleo do
cliente quanto ao novo post
e tomou a misso de distribuir este post at
Mongo e de volta para todas as outras cole
Trazer posts no console do navegador no
esta informao nos nossos templates
to
o banco de dados
post
es
conectadas
til assim
.
N
s aprenderemos como escrever
e no processo transformar nosso simples prot
tipo
HTML em um aplicativo funcional em tempo real
MantendoemTempoReal
Olhar para os cont
udos das nossas Cole
s realmente gostar amos de mostrar
tela
es no console do browser
a informao
uma coisa
e as mundanas a esta informao
Fazendo isto n
s tornaremos nosso aplicativo de uma pgina web com cont
esttico
mas o que
em um aplicativo web em tempo real com cont
udo dinmico e mutvel
na
udo
Vamos descobrir como
PovoandooBancodeDados
A primeira coisa que n
s faremos
por alguma informao no banco de dados
como um arquivo demonstrativo que l
Posts
.
N
s o faremos
um conjunto de informao estruturada na coleo
quando o servidor inicia pela primeira vez
Primeiro
vamos ter certeza que no h nada no banco de dados
.
N
s usaremos
meteor
reset , o qual apaga seu banco de dados e reseta seu projeto. Claro, voc ir querer ser bem
cuidadoso com este comando uma vez que voc
comear a trabalhar em projeto do mundo
53/261
1/8/2015
real
Finalize o servidor Meteor
pressionando
ctrl-c
e ento
na linha de comando
rode
$ meteor reset
O comando reset completamente limpa o banco de dados Mongo
desenvolvimento
um comando
til em
onde h uma forte possibilidade do nosso banco de dados cair em um
estado inconsistente
Agora que nosso banco de dados est vazio
carregar tr
s podemos adicionar o c
s posts sempre que o servidor iniciar e encontrar a coleo
digo seguinte que ir
Posts
vazia
if (Posts.find().count() === 0) {
Posts.insert({
author: 'Sacha Greif',
url: 'http://sachagreif.com/introducing-telescope/'
});
Posts.insert({
title: 'Meteor',
url: 'http://meteor.com'
});
Posts.insert({
url: 'http://themeteorbook.com'
});
server fixtures js
54/261
1/8/2015
Commit42
Added data to the posts collection
Ver no GitHub
s colocamos este arquivo no diret
navegador de usurio
insert
chamadas
rio
Lanar Instncia
server/ , ento ele nunca ser lido em nenhum
O c
digo rodar imediatamente quando o servidor comear
no banco de dados para adicionar tr
e far
s posts simples na nossa coleo
Posts . Como ns no construmos nenhuma segurana de informao ainda, no h

diferena real entre fazer isso em um arquivo que roda no servidor ou no navegador
Agora rode seu servidor de novo com
de dados
meteor,
e estes tr
s posts sero carregados no banco
ConectandoainformaoaonossoHTMLcomajudantes
Agora
se n
s abrirmos o console do navegador
s veremos tr
s posts carregados no
MiniMongo
Posts.find().fetch();
Browser console
Para ter esses posts em HTML renderizado
Cap tulo
s podemos usar um ajudante de template
No
3
n
s vimos como o Meteor nos permite ligar um contexto de informao aos nossos
templates do Spacebars para construir vistas HTML de estruturas de dados simples
podemos ligar na nossa coleo informao do exato mesmo modo
substituiremos nosso objeto JavaScript esttico
Falando nisso
sinta se livre para deletar o c
posts_list.js
postsData
digo
.
N
s apenas
com uma coleo dinmica
postsData . Aqui est o que
deve se parecer agora
55/261
1/8/2015
posts: function() {
return Posts.find();
}
});
list js
Commit43
Wired collection into
postsList
Ver no GitHub
template
Lanar Instncia
Encontre&Traga
, find()
No Meteor
Quando n
retorna um cursor
s queremos logar seu cont
que
uma fonte de informao reativa
udo
fetch()
s podemos ento usar
no
cursor para transform lo num array
Dentro do aplicativo
o Meteor
cursores sem precisar convert
de voc
fetch()
no ver
inteligente o suficiente para saber como iterar sobre
los explicitamente em arrays primeiro
com tanta frequ
no o usarmos no exemplo acima
Agora
ao inv
).
ncia em c
digo de Meteor
Esta
razo
e o porqu
de
s de puxarmos uma lista de posts como um array esttico de uma varivel
retornamos um cursor para o nosso ajudante
nosso navegador
posts . Mas o que isto faz
Se n
s voltarmos ao
s vemos
56/261
1/8/2015
Usinglivedata
Ento n
nosso
s podemos claramente ver que o nosso ajudante
{{#each}}
iterou sobre todo o
Posts , e os mostrou na tela. A coleo do lado do servidor puxou os posts do Mongo,
passou o pelo fio at
a nossa coleo do lado do cliente
e nosso ajudante do Spacebars
passou os para o template
Agora
s tomaremos um passo adiante
vamos adicionar outro post atrav
s do console
Posts.insert({
title: 'Meteor Docs',

url: 'http://docs.meteor.com'
});
Browser console
Olhe de volta ao navegador
voc
deve ver isto
57/261
1/8/2015
Addingpostsviatheconsole
Voc
acabou de ver a reatividade em ao pela primeira vez
Spacebars para iterar sobre o cursor
quanto a mudanas
Quando n
s diss
mos ao
Posts.find() , ele sabia como observar este cursor
e remendar o HTML da forma mais simples para mostrar a informao
correta na tela
InspecionandomudanasnoDOM
Neste caso
a mudana mais simples poss vel foi a de adicionar mais outro
<div
class="post">...</div> . Se voc quer ter certeza que isto realmente o que
aconteceu
abra o inspector do DOM e selecione o
posts existentes
Agora
voc
ter o mesmo
correspondente a um dos
no console JavaScript
inspector
<div>
ver um
<div>
insira mais outro post
<div>
extra
Quando voc
voltar ao
correspondente ao novo post
existente selecionado
Isto
uma forma
mais voc
ainda
til de dizer quando
elementos foram re renderizados e quando eles foram deixados de lado
ConectandoColees:PublicaeseAssinaturas
58/261
1/8/2015
At
ento
produo
autopublish
s t nhamos o pacote
Como seu nome indica
compartilhada na
ativado
es em
este pacote simplesmente diz que cada coleo deve ser
ntegra com cada cliente conectado
que no foi feito para aplica
Isto no
o que realmente queremos
ento vamos desativ lo
Abra uma nova janela do terminal
e digite
$ meteor remove autopublish
Isto tem um efeito instantneo
nossos posts desapareceram
Se voc
Isto
ver no seu navegador agora
porque n
voc
ver que todos os
autopublish
s estvamos dependendo do
para assegurar que a nossa coleo de posts do lado do cliente fosse um espelho de todos os
posts no banco de dados
Eventualmente n
que o usurio de fato precisa ver
enquanto
,
n
s precisaremos assegurar que n
lo
s apenas configuraremos o
todos os posts
).
levando em conta coisas como paginao
Posts
Para faz
s estamos transferindo apenas os posts
s criamos uma simples funo
para ser publicado na
publish()
Mas por
ntegra
que retorna um cursor referente a
Meteor.publish('posts', function() {
});
server publications js
No cliente
ao
s precisamos assinar a publicao
.
N
s apenas adicionaremos a linha seguinte
main.js :
Meteor.subscribe('posts');
59/261
1/8/2015
client main js
Removed
Commit44
autopublish
and set up a basic publication
Ver no GitHub
Se n
s checarmos o navegador novamente
Lanar Instncia
nossos posts voltaram
Ufa
Concluso
Ento o que n
o que n
s alcanamos
s temos agora
Internet
Bem
apesar de n
s no termos uma interface do usurio ainda
um aplicativo web funcional
usando o console do navegador
s poder amos lanar este aplicativo
comear a postar novas est
rias e v
las aparecer
nos navegadores de outros usurios pelo mundo todo
60/261
1/8/2015
PublicaeseSubscries
Publica
es e subscri
dif cil ser dif cil voc
es so uns dos mais importantes conceitos no Meteor
mas pode ser
entender enquanto est comeando
Isso levou a uma s
rie de mal entendidos
as aplica
4.5
SIDEBAR
como a crena de que o Meteor
inseguro
ou que
es Meteor no podem lidar com grandes quantidades de dados
Uma grande parcela do motivo das pessoas inicialmente acharem estes conceitos um pouco
confusos
mgica
que o Meteor faz por n
Embora essa mgica seja muito
obscurecer o que est de fato acontecendo por trs das cenas
).
fazer
,
til
ela pode
o que uma mgica tende a
Ento vamos analisar as camadas dessa mgica e entender o que est acontecendo
OsVelhosTempos
Mas primeiro
vamos olhar para os bons velhos tempos em
havia sido lanado
Vamos dizer que voc
um usurio entra no site
aplicao
o cliente
pode ser a pgina
ltimos
20
quando o Meteor ainda no
est fazendo um simples aplicativo Rails
i e seu navegador
manda uma requisio para sua
12
perceber qual dado o usurio precisa de visualizar
dos resultados da busca
tweets de Bob
e por ai vai
Voc
pode nisso como sendo
Uma vez que o dado correto tenha sido selecionado
traduzir este dado em um belo e leg vel HTML
Na metfora da livraria
View Controller
Finalmente
basicamente
).
Esta
).
a parte
os
um
pediu
o segundo trabalho da aplicao
ou JSON no caso de uma API
isso seria embrulhar o livro que voc
coloc lo em uma bela bolsa
Isso
informao do perfil de usurio da Mary
atendente de livraria navegando entre os corredores para encontrar o livro que voc
Quando
que est vivendo no servidor
O primeiro trabalho da aplicao
(.
2011
View
comprou em uma embalagem e
viso vista
do famoso modelo Model
Modelo Viso Controlador
a aplicao pega o c
digo HTML e manda para o navegador
O trabalho da
61/261
1/8/2015
aplicao
finalizado
e agora que tudo est fora de suas mos virtuais voc
cerveja enquanto espera pela pr
pode pegar uma
xima requisio
OCaminhodoMeteor
Vamos rever o que faz o Meteor ser to especial em comparao
inovao do Meteor
que enquanto aplica
Como vimos
a principal
es Rails esto vivas apenas no servidor
aplicativo Meteor inclui um componente no lado do cliente que vai rodar no cliente
navegador
).
um
Colocandoumsubgrupodobancodedadosnocliente.
Isso
at
como um balconista que no apenas encontra o livro pra voc
em casa e l
o livro para voc
noite
mas tamb
m te segue
fato que vamos admitir soar um pouco assustador
).
62/261
1/8/2015
Essa arquitetura permite ao Meteor fazer vrias coisas legais
Meteor chama de database everywhere
Simplesmente
:
es
primeira
a aplicao Meteor vai mandar o real
dado na rede
).
Segundo
voc
ao inv
s de mandar c
digo HTML para o cliente
data on the
vai ser capaz de acessar o dado instantaneamente sem
).
dado puro e o cliente vai lidar com ele
ter que esperar por uma ida e volta do servidor
lat
).
banco de dados em todos os lugares
Meteor vai pegar uma parte do seu banco de dados e copi lo para o cliente
Isso tem duas grandes implica
wire
principalmente com o que o
latency compensation
compensao de
ncia
Publicao
O banco de dados de um aplicativo pode conter dez mil documentos
privados ou sens veis
sendo alguns destes
Ento obviamente no devemos simplesmente espelhar nosso banco
de dados completamente no cliente
por raz
es de segurana e escabilidade
Ento vamos precisar de uma forma de dizer ao Meteor quais subgrupos de dados podem ser
enviados ao cliente
e vamos realizar isso atrav
Vamos voltar ao Microscope
s de uma publicao
Aqui esto todos os posts do no aplicativo situados no banco de
dados
63/261
1/8/2015
Todosospostscontidosnonossobancodedados.
Embora esse recurso reconhecidamente no exista no Microscope
de nossos posts tenham sido marcados por linguagem abusiva
eles continuem em nosso banco de dados
(.
i e enviados ao cliente
).
vamos imaginar que alguns
Mesmo que queiramos que
eles no devem estar dispon veis para os usurios
Nossa primeira tarefa vai ser dizer ao Meteor qual dado n
s vamos querer enviar ao cliente
Vamos dizer ao Meteor que desejamos publicar apenas os posts sem marca
es
64/261
1/8/2015
Excluindopostsmarcados.
Aqui temos o c
digo correspondente
que deve estar no servidor
// no servidor
return Posts.find({flagged: false});
});
Isso assegura para que no exista uma forma de um cliente estar apto a acessar post
marcados
Isso
exatamente a forma que voc
assegure se de publicar dados que voc
cliente
torna uma aplicao Meteor segura
apenas
queira que estejam dispon veis para acesso no
65/261
1/8/2015
DDP
Fundamentalmente
voc
pode pensar sobre o sistema de publicao subscrio
como um funil que transfere dados de uma coleo no lado do servidor para uma
coleo no lado do cliente
O protocolo que
Protocol
utilizado neste funil
chamado DDP
).
Protocolo de Dados Distribuidos
que significa Distributed Data
Para aprender mais sobre DDP
pode assistir essa palestra da Real Time Conference por Matt DeBergalis
fundadores do Meteor
),
voc
um dos
ou este screencast por Chris Mather que conduz voc
por
este conceito com um pouco mais de detalhe
Subscrio
Mesmo que seja nossa inteno deixar qualquer publicao no marcada dispon vel para os
clientes
s no podemos simplesmente enviar milhares de publica
es de uma vez
.
N
precisamos de uma forma para os clientes especificarem qual subgrupo de dados eles
precisam em um momento em particular
Todo dado que voc
exatamente ai que as subscri
es entram
se subscrever vai ser espelhado no cliente graas ao Minimongo
implementao do MongoDB feita pelo Meteor no lado do cliente
Por exemplo
vamos dizer que estamos atualmente navegando na pgina perfil de Bob Smith
e somente queremos mostrar seus posts
66/261
1/8/2015
SubscrevendonospostsdeBobirespelhlosnocliente.
Primeiro
ir amos alterar nossa publicao para receber um parmetro
// no servidor
Meteor.publish('posts', function(author) {
return Posts.find({flagged: false, author: author});
});
E podemos ento definir este parmetro quando nos subscrevermos nesta publicao no
digo do nosso aplicativo no lado do cliente
// no cliente
Meteor.subscribe('posts', 'bob-smith');
Assim
como torna uma aplicao Meteor escalvel no lado do cliente
subscrever para todos os dados dispon veis
atualmente
Dessa forma
voc
voc
Ao inv
s de se
somente escolhe as partes que voc
precisa
vai evitar sobrecarga de mem
ria no browser no importando
o quo grande seja seu banco de dados no lado do servidor
67/261
1/8/2015
Encontrando(finding)
Agora os posts de Bob devem ser espalhados em m
JavaScript
mem
,
ria
Ruby
mas n
Nessa hora que
).
Python
tiplas categorias
( )
encontrar
find
por exemplo
Talvez ainda queiramos carregar todos os posts de Bob na
s queremos mostrar somente aqueles da categoria
aparece
JavaScript
por agora
Selecionandoumsubgrupodedocumentosnocliente.
Da mesma forma que fizemos no servidor
,
n
s vamos usar a funo
Posts.find()
para
selecionar um subgrupo de nossos dados
// no cliente
Template.posts.helpers({
posts: function(){
return Posts.find(author: 'bob-smith', category: 'JavaScript');
}
});
Agora que n
funcionam
s temos uma boa compreenso de como as publica
vamos mergulhar e rever alguns padr
es e subscri
es comuns de implementao
es
.
68/261
1/8/2015
PublicaoAutomtica(autopublishing)
Se voc
criar um projero Meteor do zero
automaticamente o pacote
(.
i e usando
autopublish
ativado
meteor create , ele vai ter
Para comear
vamos falar sobre o que ele
exatamente faz
autopublish deixar extremamente simples o incio da codificao da sua
O objetivo do
aplicao Meteor
para o cliente
e ele faz isso espelhando automaticamente todos os dados do servidor
tomando conta das publica
es e subscri
es para voc
Autopublish
Como isso funciona
Suponha que voc
tenha uma coleo chamada
'posts'
no servidor
.
69/261
1/8/2015
autopublish
Ento
vai automaticamente enviar cada post que encontrar na coleo posts no
Mongo para uma coleo chamada
Se voc
estiver usando
dados sero ub quos
existem problema
'posts'
no cliente
assumindo que exista um
).
autopublish , voc no precisa de pensar sobre publicaes. Os
),
presentes em todos os lugares
bvios de ter uma c
e as coisas se tornam simples
Claro
pia completa do banco de dados da sua aplicao
cacheada na mquina de cada usurio
Por esse motivo
autopublish
no pensou sobre as publica
apropriado somente quando voc
est comeando
e ainda
es
PublicandoColeesCompletas
Uma vez que voc
remova o
autopublish , voc vai rapidamente perceber que todos os seus
dados desapareceram do seu cliente
que o autopublish faz
Uma forma simples de t
publicando uma coleo integralmente
los novamente
Por exemplo
duplicando o
Meteor.publish('allPosts', function(){
});
70/261
1/8/2015
Publicandoumacoleocompleta
s ainda estamos publicando cole
sobre quais cole
Comments
mas
es completas
es publicamos ou no
mas ao menos agora temos controle
Neste caso
estamos publicando a coleo
Posts
no
PublicandoColeesParcialmente
O pr
ximo n vel de controle
os posts que pertencem a um certo autor
publicar somente parte de uma coleo
Por exemplo somente
71/261
1/8/2015
Meteor.publish('somePosts', function(){
return Posts.find({'author':'Tom'});
});
Publicandoumacoleoparcialmente
72/261
1/8/2015
NosBastidores
Se voc
leu a documentao do Meteor sobre publicao
sobrecarregado com as instru
es de se usar
atributos de registros no cliente
aplicativos Meteor que voc
A razo
added()
viu e nunca usam esses m
isso
talvez deve estar
para configurar os
e se deve ter se esforado para conciliar isso com os
_publishCursor() . Voc nunca viu seu uso

publicao
voc
ready()
todos
que o Meteor fornece uma importante conveni
retornar um cursor
ncia
o m
todo
Talvez no diretamente
( . . Posts.find({'author':'Tom'}) )
i e
mas se voc
em uma funo de
exatamente o que o Meteor est usando
Quando o Meteor v
_publishCursor()
tamb
voc
somePosts
que a publicao
adivinhou
retornou um cursor
ele chama
publicando este cursor
automaticamente
Aqui o que o
_publishCursor()
faz
Checa o nome da coleo no lado do servidor
Puxa e encontra documentos a partir do cursor e o envia dentro de uma
coleo no lado do cliente com o mesmo nome
).
.added()
Usando
para fazer
isso
Sempre que um documento for adicionado
estas mudanas para a coleo no lado do cliente
cursor e
.added() , .changed()
No exemplo acima
removido ou alterado
.removed()
Ele usa
ele envia
.observe()
no
).
para fazer isso
s somos capazes de assegurar que o usurio tenha somente os
posts que estiver interessado
os escritos por Tom
dispon veis em cache no lado do
cliente
PublicandoPropriedadesParciais
s vimos como publicar somente alguns de nossos posts
cortando mais coisas
Como anteriormente
mas n
s podemos continuar
Vamos ver como publicar somente propriedades espec ficas
vamos usar
find()
para retornar um cursor
mas dessa vez vamos
excluir alguns campos
73/261
1/8/2015
return Posts.find({}, {fields: {
date: false
}});
});
Publicandopropriedadesparciais
Claro
s tamb
m podemos combinar ambas as t
cnicas
Por exemplo
retornar todos os posts de Tom enquanto deixamos de lado suas datas
assim
se n
s quisermos
podemos escrever
74/261
1/8/2015
return Posts.find({'author':'Tom'}, {fields: {
date: false
}});
});
Resumindo
s vimos como publicar todas as nossas propriedades de todos os documentos e de todas as
cole
es
com
autopublish
at
documentos de algumas cole
Isso cobre o bsico do que voc
como publicar algumas propriedades de alguns
es
pode fazer com as publica
es no Meteor
e estas simples
cnicas devem ser suficientes para a vasta maioria dos casos
As vezes
voc
vai precisar ir al
cobrir isso em outro cap tulo
m combinando
linkando ou fundindo publica
es
s vamos
75/261
1/8/2015
Rotas
Agora que temos uma lista de artigos
),
utilizadores
que eventualmente podero ser criados pelos
precisamos de uma pgina individual para cada artigo onde os nossos
utilizadores podero discutir cada artigo
s gostar amos que essas pginas pudessem ser acess vel atrav
http://myapp.com/posts/xyz
no formato
nico para cada artigo
onde
s de um permalink
xyz um identificador _id
um URL
de MongoDB
Isto significa que vamos precisar de algum tipo de roteamento para ler o que est na barra de
URL do navegador e mostrar o conte
do correto
AdicionandooPacoteIronRouter
Iron Router
um pacote de roteamento que foi criado especificamente para aplica
es
Meteor
Este no s
ajuda com roteamento
tratar de filtros
associar a
ou seja
es a alguns dos caminhos
). (
.)
que caminho tem acesso a que dados
),
especificar caminhos
Nota
como tamb
e ainda gerir subscri
m permite
es
controlar
o Iron Router foi desenvolvido em parte pelo co
autor do Discover Meteor Tom Coleman
Primeiro
vamos instalar o pacote a partir da Atmosphere
$ mrt add iron-router
Consola
Este comando baixa e instala o pacote iron router na nossa aplicao
por vezes pode ser necessrio reiniciar a sua aplicao Meteor
processo
e depois
mrt
para o iniciar novamente
pronto a usar
usando
ctrl+c
Note que
para matar o
antes de o pacote poder ser utilizado
76/261
1/8/2015
Note que o Iron Router
poder instalar
um pacote de terceiros
( meteor add iron-router
ou seja
necessrio ter o Meteorite para o
).
no vai funcionar
VocabulriodeRoteador
N
s vamos falar de vrias caracter sticas diferentes do roteador neste cap tulo
tiver alguma experi
ncia com uma framework como Rails
familiarizado com a maioria desses conceitos
voc
Caso contrrio
Se
j estar
segue se um pequeno
glossrio
Rotas
Uma rota
o bloco base do roteamento
Bsicamente
um conjunto de
instru
es que dizem aplicao onde ir e o que fazer quando esta encontra
um URL
.
/terms_of_service
/posts/xyz ,
/search?keyword=meteor .
Caminhos
esttico
Um caminho
parmetros de pesquisa
Segmentos
frente
( / ).
:
Ganchos
um URL dentro da sua aplicao
ou dinmico
As diferentes partes de um caminho
Ganchos so a
es que voc
durante o processo de roteamento
Este pode ser
e ainda incluir
delimitadas por barras para a
gostaria de fazer antes
depois ou at
Um exemplo t pico seria verificar se o
utilizador tem os direitos necessrios antes de mostrar uma pgina
Filtros
Os filtros so simplesmente ganchos que pode definir globalmente
para uma ou mais rotas
Templates de Rota
especifique um
por omisso
mesmo nome da rota
Layout
cont
Cada rota precisa de apontar para um template
o roteador vai procurar por um template com o
Pode pensar num layout como uma moldura digital de fotos
m todo o c
digo HTML que envolve o template atual
mesmo quando o template muda
Controlador
Caso no
Por vezes
voc
Eles
e vai permanecer o
vai perceber que muitos dos seus templates esto
a utilizar os mesmos parmetros
Em vez de duplicar o seu c
fazer com que todas essas rotas herdem de um
roteamento que ir conter toda a l
digo
poss vel
nico controlador de
gica de roteamento
Para mais informao sobre o Iron Router
consulte a documentao completa no
GitHub
77/261
1/8/2015
Roteamento:MapearURLsparaTemplates
At
agora
,
n
s constru mos o nosso layout utilizando inclus
es de templates hard coded
tais
{{>postsList}} . Por isso, apesar de o contedo da nossa aplicao poder mudar, a
como
estrutura base da pgina
sempre a mesma
um cabealho
com uma lista de artigos por
baixo deste
O Iron Router permite nos outra abordagem ao ficar responsvel pelo que
dentro da tag HTML
s pr
prios
renderizado
<body> . Ou seja, ns no precisamos de definir o contedo dessa tag por
como far amos numa pgina HTML normal
Em vez disso
vamos apontar o
roteador para um template layout especial que contem um ajudante de template
O ajudante
{{yield}}
vai definir uma zona dinmica especial que vai automaticamente
renderizar o template correspondente rota atual
de agora
{{yield}} .
este template especial como o
como conveno
template da rota
):
vamos designar
a partir
Layoutsetemplates.
78/261
1/8/2015
Vamos comear por criar o nosso layout e adicionar o ajudante
<body>
remover a nossa tag HTML
pr
prio template
O nosso
do
{{yield}} . Primeiro, vamos
main.html , e mover o seu contedo para o seu
, layout.html .
, main.html
agora mais magro
deve ser agora algo como
<head>
<title>Microscope</title>
</head>
client main html
Enquanto que o rec
m criado
layout.html
vai agora conter o layout mais exterior da
aplicao
<template name="layout">
<a class="brand" href="/">Microscope</a>
</div>
</header>
{{yield}}
</div>
</div>
</template>
client views application layout html
Note que substitu mos a incluso do template
postsList
com uma chamada ao ajudante
yield . Repare que depois desta alterao, no vemos nada no ecr. Isto porque ainda no
dissemos ao roteador o que fazer com o URL
Para comear
o template
desta criar
/ , e neste caso mostrado um template vazio.
,
n
s podemos recuperar o comportamento antigo mapeando o URL raiz
postsList . Vamos criar uma diretoria /lib
na raiz do nosso projecto
para
e dentro
router.js :
79/261
1/8/2015
Router.configure({
layoutTemplate: 'layout'
});
Router.map(function() {
this.route('postsList', {path: '/'});
});
lib router js
Fizemos duas coisas importantes
Primeiro
dissemos ao roteador para usar o layout que
acabmos de criar como o layout por omisso para todas as rotas
postsList
nova rota chamada
e mapemo la para o caminho
Segundo
definimos uma
/.
Adiretoria /lib
Qualquer coisa que seja colocada dentro da diretoria
/lib garantidamente
carregado antes que qualquer outra coisa na sua aplicao
).
de pacotes inteligentes
Isto faz com que seja um
com a poss vel excepo
ptimo lugar para c
digo de
ajudantes que precisa de estar sempre dispon vel
:
/server ,
Um aviso
note que como a diretoria
/lib
isto significa que os seus conte
/client
no est nem dentro de
nem de
dos estaro dispon veis em ambos os
ambientes
RotascomNome
Vamos esclarecer alguma da ambiguidade
temos um template chamado
Por omisso
realidade
Chammos nossa rota
URL
postsList . O que que se est aqui a passar
ele vai at
procurar por um caminho baseado no nome da rota
ssemos definido um caminho personalizado
path
postsList , mas tambm
o Iron Roter vai procurar por um template com o mesmo nome da rota
tiv
),
na nossa definio de roteador
postsList .
ou seja
Na
se no
que fizemos ao providenciar uma opo
o nosso template no estaria acess vel por omisso no
80/261
1/8/2015
Outra d
vida poss vel
porque
que precisamos sequer de dar um note s nossas rotas
Dar
nomes a rotas permite nos utilizar algumas caracter sticas do Iron Router que tornam mais
fcil criar links dentro da nossa aplicao
O mais

til
o ajudante Handlebars
{{pathFor}} ,
que devolve o caminho URL de qualquer rota
Queremos que o nosso link principal de casa aponte para a lista de artigos
especificar um URL esttico
por isso em vez de
/ , nos podemos tambm utilizar o ajudante Handlebars. O
resultado final ser o mesmo
mas esta abordagem d nos mais flexibilidade dado que o
ajudante ir sempre fazer output do URL correto mesmo que o caminho no roteador seja
alterado
<a class="brand" href="{{pathFor 'postsList'}}">Microscope</a>
</div>
</header>
//...
Commit51
Roteamento muito bsico
Ver no GitHub
Lanar Instncia
EsperandoporDados
Caso publique a verso atual da aplicao
ou lance uma instncia utilizando o link acima
notar que a lista aparece vazia por uns momentos antes dos artigos aparecerem
quando a pgina primeiro carrega
dos
posts
Isto
),
ir
porque
no existem artigos para mostrar enquanto a subscrio
no carrega os dados dos artigos do servidor
Seria muito melhor para a experi
ncia de utilizao se pud
ssemos disponibilizar algum
81/261
1/8/2015
feedback visual que algo est a acontecer
Por sorte
e que o utilizar deve esperar alguns momentos
o Iron Router tem uma forma fcil de fazer isso
vamos
waitOn
esperar pela
subscrio
Router.configure({
layoutTemplate: 'layout',
loadingTemplate: 'loading',
waitOn: function() { return Meteor.subscribe('posts'); }
});
});
lib router js
Vamos por partes
Primeiro
modificmos o bloco
o nome do template de carregando
enquanto esperamos por dados
Segunda
tamb
que vamos criar a seguir
m adicionamos uma funo
O que isto significa
Router.configure()
para dar ao roteador
para onde se deve redirecionar
waitOn , que devolve a nossa subscrio posts .
que o roteador vai garantir que a subscrio
de mandar o utilizador pela rota que ele pediu
posts
est carregada antes
Note que como estamos a definir a nossa funo de
waitOn
globalmente ao n vel da rota
esta sequ
ncia apenas vai acontecer uma vez quando o utilizador acede sua aplicao pela
primeira vez
Depois disso
os dados vo estar na mem
precisar de esperar por eles novamente
E como n
ria do navegador e a rota no vai
s estamos a deixar o roteador gerir a nossa subscrio
com segurana do
Normalmente
utilizao
main.js
que deve agora estar vazio
).
uma boa ideia esperar pelas suas subscri
mas tamb
voc
pode agora remov
no apenas pela experi
la
ncia de
m porque isto significa que se pode assumir com segurana que os
dados vo estar dispon veis nos templates
es
Isto elimina a necessidade de lidar com templates
82/261
1/8/2015
serem renderizados antes de os dados subjacentes estarem dispon veis
coisa que
normalmente requer abordagens no ideais
A pea final do puzzle
o template de carregamento
um template de carregamento animado engraado
mrt add spin , e depois crie o template loading
Vamos usar o pacote
spin
para criar
Este pode ser adicionado com o comando
da seguinte forma
<template name="loading">
{{>spinner}}
</template>
client views includes loading html
{{>spinner}} um template parcial contido no pacote spin . Apesar de este
Note que
template parcial vir de

fora
da nossa aplicao
,
n
s podemos utiliz lo como qualquer outro
template
Commit52
Esperar na subscrio do artigo
Ver no GitHub
Lanar Instncia
83/261
1/8/2015
UmPrimeiroOlharSobreAReatividade
Reatividade
um conceito chave de Meteor
abordado o t
pico
e apesar de ainda no termos realmente
o nosso template de carregamento d nos um primeiro olhar
sobre este conceito
Redirecionar para um template de carregamento se os dados ainda no foram
carregados est muito bem
mas como
que o roteador sabe quando deve
redirecionar o utilizador de volta para a pgina correta assim que os dados foram
carregados
Por agora
por aqui
vamos apenas dizer que isto
Mas no se preocupe
exatamente onde a reatividade entra
e ficar
vai aprender mais sobre o assunto brevemente
RoteandoParaUmPostEspecfico
Agora que vimos como rotear para o template
os detalhes de um
nico artigo
Existe apenas um problema
pode haver centenas deles
postsList , vamos criar uma rota para mostrar
:
n
s no podemos prosseguir e definir uma rota por artigo
Neste caso
necessrio definir uma
essa rota mostrar qualquer artigo que queiramos
Para comear
nica rota dinmica
j que
e fazer
vamos criar um novo template que simplesmente renderiza o mesmo template
de artigo que utilizmos anteriormente na lista de artigos
<template name="postPage">
{{> postItem}}
</template>
/ _
page html
Posteriormente vamos adicionar mais elementos a este template
),
comentrios
como por exemplo
mas por agora este vai servir simplesmente como um contentor para a nossa
84/261
1/8/2015
{{> postItem}} .
incluso
Vamos criar outra rota com nome
para o template
desta vez mapeando caminhos URL na forma
/posts/<ID>
postPage :
this.route('postPage', {
path: '/posts/:_id'
});
});
lib router js
A sintaxe especial
rota na forma
:_id
indica ao roteador duas coisas
/posts/xyz/ , onde
que for que encontrar neste

xyz

xyz
primeiro
pode ser qualquer coisa
dentro de uma propriedade
para combinar qualquer
Segundo
_id
na lista
para por seja o
params
do
roteador
Note que estamos apenas a usar
forma de saber se voc
_id
por uma questo de conveniencia
O roteador no tem
_id , ou uma string aleatria de
lhe est a passar realmente um
caracteres
Estamos agora a rotear para o template correto
sabe o
como
_id
do artigo que queremos mostrar
mas ainda nos falta alguma coisa
mas o template no faz ideia de qual
o roteador
Ento
que damos a volta a este problema
Felizmente
o roteador tem uma soluo inteligente
dados do template
este deixa especificar o contexto de
Pode se pensar no contexto de dados como o recheio dentro de um bolo
delicioso feito de templates e layouts
De forma simples
o que se usa para encher o
template
85/261
1/8/2015
Ocontextodedados.
No nosso caso
_id
usando o
podemos ir buscar o contexto de dados adequado procurando pelo artigo
que obtivemos do URL
path: '/posts/:_id',
data: function() { return Posts.findOne(this.params._id); }
});
});
lib router js
Assim
cada vez que o utilizador acede a esta rota
vai pass lo ao template
uma pesquisa
Lembre se que
findOne
e que providenciar apenas um
_id
ele vai encontrar o artigo correspondente e
devolve um
nico artigo que corresponde a
como argumento
um atalho para
{_id:
86/261
1/8/2015
id} .
Dentro da funo
e podemos utilizar
data
dados em portugu
this.params
indicmos prefixando as com
, this
para uma rota
para aceder s partes com nome da rota
dentro da nossa
corresponde rota atual
path .
partes que
MaisSobreContextodeDados
Ao definir o contexto de dados de um template
pode controlar o valor de
this
dentro de um ajudante de template
Isto
{{#each}} , que
normalmente feito implicitamente com o iterador
automaticamente define o contexo de dados de cada iterao para o item atual da
interao
{{#each widgets}}
{{> widgetItem}}
{{/each}}
Mas tamb
{{#with}} , que
m o podemos fazer explicitamente utilizando
simplesmente diz
podemos escrever
toma este objecto
e aplica lhe este template
Por exemplo
{{#with myWidget}}
{{> widgetPage}}
{{/with}}
Tamb
poss vel obter o mesmo efeito passando o contexto como um argumento
da chamada ao template
Ou seja
o bloco anterior de c
digo pode ser reescrito
como
{{> widgetPage myWidget}}
87/261
1/8/2015
UtilizandoUmAjudantedeRoteadorComNomeDinmico
Por fim
temos de ter a certeza que estamos a apontar para o lugar certo quando queremos
fazer um link para um artigo individual
Novamente
podemos usar algo como
<a
href="/posts/{{_id}}"> , mas usar um ajudante de roteador mais seguro.

postPage , por isso podemos usar um ajudante {{pathFor
Chammos a rota do artigo
'postPage'}} :
<div class="post">
</div>
<a href="{{pathFor 'postPage'}}" class="discuss btn">Discuss</a>
</div>
</template>
/ _
item html
Commit53
Rotear para uma
Ver no GitHub
Mas espera
como exatamente
/posts/xyz
Na realidade
Assim
_id
xyz
em
_id .
suficientemente inteligente para perceber isso por si pr
de alguma esp
cie
o roteador vai procurar por este
dados do ajudante
Lanar Instncia
no lhe estamos a passar nenhum
estamos a dizer ao roteador para usar a rota
precisa de um
nica pgina de artigo
que o roteador sabe onde ir buscar a parte do
No final de contas
o Iron Router
prio
postPage , e o roteador sabe que esta rota
dado que foi assim que definimos a nossa
_id
no local mais l
gico dispon vel
.
N
path .
o contexto de
{{pathFor 'postPage'}} , ou notras palavras this . E acontece que o
88/261
1/8/2015
this
nosso
corresponde a um artigo
Alternativamente
tamb
procurar pela propriedade
que
!)
surpresa
tem uma propriedade
poss vel dizer explicitamente ao roteador onde
_id .
que ele deve
_id , passando um segundo argumento ao ajudante
ou seja
{{pathFor 'postPage' someOtherPost}} . Um possvel cenrio onde este padro poder ser
usado
ao construir o link para o artigo anterior ou seguinte numa lista
Para verificar se funciona corretamente
navegue para a lista de artigos e clique num dos links
Discuss . Deve ver algo como:
Umanicapginadeartigo.
89/261
1/8/2015
HTML5pushState
Uma coisa a perceber
HTML
que estas mudanas de URL esto a ser feitas utilizando
pushState
O Roteador apanha cliques em URLs que so internos ao site
navegue para fora da aplicao
estado da aplicao
es necessrias ao
Se tudo funcionar corretamente
facto
e em vez disso faz as altera
e evita que o navegador
a pgina deve mudar de forma instantnea
De
s vezes as coisas mudam to rpido que pode ser necessria uma transio de
pgina
Isto est fora do ambito deste cap tulo
interessante
mas no deixa de ser um t
pico
90/261
1/8/2015
ASesso
Meteor
5.5
SIDEBAR
um framework reativo
O que significa
que quando os dados so alterados
coisas
em sua aplicao mudam sem voc
ter que explicitamente fazer alguma coisa
s j vimos isso em ao e como nossos templates mudam quando os dados e as rotas
mudam
Vamos mergulhar fundo e saber como isso funciona nos pr
ximos cap tulos
mas por agora
gostar amos de introduzir algumas propriedades bsicas da reatividade que so
extremamente
teis para maioria das aplica
es
AMeteorSession
Agora no Microscope
o estado atual da aplicao do usurio est completamente contido na
URL que ele est procurando
Mas em vrios casos
voc
).
e o banco de dados
verso atual do usurio da aplicao
).
escondido
A Session
global
A Session
vai precisar armazenar algum estado ef
por exemplo
h uma sesso
como coisas ruins
e ela
Ele
acess vel em todo lugar
mas neste caso a sesso
relevante a
se um elemento est exposto ou
uma forma conveniente de se fazer isso
um dado reativo global armazenado
mero que s
global no sentido de um objeto singleton
Variveis globais geralmente so vistas
usada como um ve culo central de comunicao
para diferentes partes da aplicao
Mudandoa
Esta
sesso
Session
est dispon vel como
Session . Para configurar um valor de sesso, voc pode
chamar
Session.set('pageTitle',
'A different title');

91/261
1/8/2015
Browser console
Voc
pode ler o dado de volta com
reativa de dados
Session.get('mySessionProperty'); . Isso uma fonte
que significa que se voc
coloc la em um helper
voc
ver a sa da do helper
mudando reativamente quando a varivel Session for alterada
Para testar isso
adiocione o seguinte c
digo no modelo do layout
<a class="brand" href="{{pathFor 'postsList'}}">{{pageTitle}}</a>
</div>
</header>
Template.layout.helpers({
pageTitle: function() { return Session.get('pageTitle'); }
});
client views application layout js
A atualizao automatica do Meteor
varveis Session
Session.set()
m disso se n
hot code reload
A different title
HCR
conserva as
na barra de navegao
Se no
novamente
s mudarmos o valor mais uma vez
conhecida como
ento podemos agora ver
apenas digite o comando
Al
),
novamente no console do browser
vamos ver outro t tulo sendo mostrado
'A brand new title');
Browser console
92/261
1/8/2015
Session est dispon vel globalmente
lugar da aplicao
ento estas mudanas podem ser feitas em qualquer
Isso nos d muio poder
mas pode tamb
m ser uma armadilha se usado
exageradamente
MudanasIdnticas
Se voc
Session.set()
modificar uma varivel Session com
um valor id
ntico
o Meteor
evitar a chamada do m
mas configur la com
inteligente o suficiente para desviar a cadeia reativa
todo
IntroduzindooAutorun
Vimos um exmplo de fonte de dados reativa
template helper
).
modelo auxiliar
template helpers
e tamb
m vimos isso em ao dentro de um
Mas enquanto alguns contextos no Meteor
so inerentemente reativos
a maioria do nosso c
como os
digo Meteor continua
sendo o bom e velho JavaScript no reativo
Vamos supor que temos o seguinte trecho de c
digo em algum lugar de nosso aplicativo
helloWorld = function() {
alert(Session.get('message'));
}
Mesmo que estejamos chamando uma varivel Session
no
reativo
significando que n
o contexto em que a chamada
s no vamos ter um novo
alert
feita
toda as vezes que
mudarmos a varivel
Ai
onde o Autorun entra
Como o nome implica
o c
digo dentro de um bloco
autorun
vai
rodar automaticamente e continuar rodando toda vez que a fonte de dados reativa usada
mudar
Tente digitar isso dentro do console do navegador
93/261
1/8/2015
Deps.autorun(
function() { console.log('Value is: ' + Session.get('pageTit
le')); } );
Value is: A brand new title
Console do navegador
Como se poderia esperar
o bloco de c
retornando esse dado para o console
Value is: Yet another value
digo fornecido dentro de
Agora
autorun
vamos tentar mudar o t tulo
roda uma vez
'Yet another value');
Console do navegador
Mgica
Como o valor da sesso mudou
todo novamente
sabia que tinha que rodar este conte
re imprimindo o novo valor no console
Agora voltando ao exemplo anterior
do
se n
que nossa varivel Session for alterada
um bloco
autorun
s queremos disparar um novo alerta toda as vezes
tudo que temos que fazer
envolver nosso c
digo em
autorun :
Deps.autorun(function() {
alert(Session.get('message'));
});
Como acabamos de ver
autoruns pode ser muito
til para rastrear fontes de dados e reagir
imperativamente com elas
HotCodeReload
Durante nosso desenvolvimento do Microscope
propriedades do Meteor que salvam tempo
de nossos arquivos de c
digos
temos tirado proveito de uma das
Hot Code Reload
( ).
HCR
Sempre que salvamos um
o Meteor detecta a mudana e reinicia o servidor
informando
94/261
1/8/2015
a cada cliente do recarregamento da pgina
Isso
.
,
similar a uma atualizao automtica da pgina
Para saber qual
essa diferena
mas com uma importante diferena
comece reconfigurando a varivel Session que temos usado
Session.set('pageTitle', 'A
Session.get('pageTitle');
brand new title');
'A brand new title'
Browser console
Se n
naturalmente vai ser perdida
s recarregarmos nossa janela do navegador manualmente
uma vez que seria criada uma nova sesso
s dispararmos um hor code reload
a pgina vai ser recarregada
nossa varivel Session
por exemplo
).
Do outro lado
se
salvando um de nossos arquivos de c
mas a varivel session vai continuar configurada
digo
Tente agora
'A brand new title'
Browser console
Ento se estivermos usando variveis de sesso para rastrear exatamente o que o usurio est
fazendo
o HCR deve ser transparente para o usurio
as variveis de sesso
pois isso vai preservar o valor de todas
Isso nos permite fazer o deploy de novas vers
es em produo de
nossas aplica
es Meteor com a confiana de que nossos usurios vo ser minimamente
interrompidos
Considere isso por um instante
Se n
s podemos manter todo o nosso estado na URL e na
sesso
s podemos transparentemente mudar o c
digo fonte rodando por baixo de cada
aplicao do cliente com uma interrupo m nima
Vamos checar o que acontece quando n
s atualizamos a pgina manualmente
95/261
1/8/2015
null
Browser console
Quando n
s recarregamos a pgina
s perdemos a sesso
Com o HCR
o Meteor salva a
sesso em local storage no seu navegador e a carrega novamente depois do recarregamento
Entretanto
o comportamente alternativo no recarregamento expl cito faz sentido
usurio recarrega a pgina
se um
como se ele tivesse ido para a mesma URL novamente
e ele
deseja resetar ao ponto inicial que qualquer usurio vai ver quando visita a URL
As importantes li
1.
es em tudo que foi visto so
Sempre armazene esados de usurio na Session ou na URL
assim os usurios sero
minimamente interrompidos quando um HCR acontecer
2.
Armazene qualquer estado que voc
dentro da pr
queira que seja compartilhvel entre usurios
pria URL
96/261
1/8/2015
AdicionandoUsurios
At
ento
s conseguimos criar e mostrar algumas informa
de forma sensata e conectar tudo num simples prot
s at
vimos que a nossa UI
es demonstrativas e estticas
tipo
responsiva a mudanas nas informa
ou modificada aparece imediatamente
no podemos enviar informao
Vamos ver como n
Por
es
nosso site est paralisado pelo fato de que n
Na real
e informao inserida
s ainda nem temos usurios
s podemos consertar isso
Contas:usuriosdeformasimples
Na maioria dos web frameworks
voc
ainda
,
,
Por sorte
Meteor te d cobertura
uma questo familiar
to fcil quanto poderia ser
Claro
Pior
es de
Graas ao modo como os pacotes do Meteor podem
digo tanto no servidor
tem que lidar com OAuth e outros esquemas de autentica
JavaScript
quanto no cliente
JavaScript
HTML
s podemos ter um sistema de contas quase por nada
mas no
as coisas tendem a ficar feias rpido
contribuir com c
),
lo quase em cada projeto
assim que voc
terceiros
CSS
tem quer faz
adicionar contas de usurio
s poder amos apenas usar a UI nativa do Meteor para contas
mas j que n
accounts-ui-bootstrap-dropdown
).
estilizao
s constru mos todo nosso app com Bootstrap
no lugar
Na linha de comando
com
mrt add accounts-ui
s iremos usar o pacote
no se preocupe
,
a
nica diferena
na
s digitamos
$ mrt add accounts-ui-bootstrap-dropdown

$ mrt add accounts-password
Terminal
Esses dois comandos fazem os templates especiais de conta dispon veis para n
97/261
1/8/2015
podemos inclu
{{loginButtons}} . Uma dica til: voc
los no nosso site usando o ajudante
exemplo
: {{loginButtons align="right"}} .
align
pode controlar em que lado o seu log in dropdown aparece usando o atributo
s adicionaremos esses bot
comeando a ficar grande
inclu remos em
es ao nosso cabealho
).
header
E j que esse cabealho est
vamos dar mais espao a ele com um template pr
por
prio
(
n
s o
client/views/includes . Ns tambm usaremos alguma marcao extra e
classes do Bootstrap para garantir que tudo parea
timo
{{>header}}
{{yield}}
</div>
</div>
</template>
<template name="header">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-col
lapse">
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li>{{loginButtons}}</li>
</ul>
</div>
</div>
</header>
</template>
client views includes header html
98/261
1/8/2015
Agora
quando n
s navegamos para o nosso aplicativo
s vemos os bot
es de login das
contas no canto direito do nosso site
MeteorsbuiltinaccountsUI
s podemos us los para cadastrar
logar
requerir mudana de senha
site simples precisa para contas baseadas em senha
e todo resto que um
Para informar ao nosso sistema de contas que n
um username
s queremos que os usurios faam log in via
,
n
s simplesmente adicionamos um bloco de configurao
config.js
novo arquivo
dentro de
Accounts.ui
num
client/helpers :
Accounts.ui.config({
passwordSignupFields: 'USERNAME_ONLY'
});
client helpers config js
99/261
1/8/2015
Commit61
Added accounts and added template to the header
Ver no GitHub
Lanar Instncia
CriandoNossoPrimeiroUsurio
V em frente e cadastre se com uma conta
username
o boto
Sign in
mudar para mostrar o seu
Isto confirma que uma conta de usurio foi criada para voc
Mas de onde a
informao de conta de usrio est vindo
Ao adicionar o pacote
acessada com
contas , o Meteor criou uma nova coleo especial, a qual pode ser
Meteor.users . Para v
la
abra o console do seu navegador e digite
Meteor.users.findOne();
Browser console
O console dever retornar um objeto representando o seu objeto usurio
olhada
voc
pode ver que seu username est l
identifica voc
Note que voc
tamb
assim como uma
_id
se voc
der uma
que unicamente
m pode chamar o atual usurio logado com
Meteor.user() .
Agora log out e cadastre se com um novo username
segundo usurio
Mas espere
vamos rodar
. Meteor.user()
deve retornar agora um
Meteor.users.find().count();
Browser console
100/261
1/8/2015
O console retorna
1.
Espere
no deveria ser
logar com o primeiro usurio de novo
voc
O primeiro usurio foi deletado
ver que este no
o caso
Vamos ter certeza e checar o armazenamento de informao can
Mongo
s logaremos no Mongo
( meteor mongo
nico
no seu terminal
Se voc
tentar
o banco de dados
e checaremos
> db.users.count()
2
Mongo console
H definitivamente dois usurios
navegador
Ento por que n
s conseguimos ver apenas um por vez no
UmMistriodaPublicao!
Se voc
pensar de novo no Cap tulo
4,
talvez voc
se lembre que ao desativiar o
autopublish , ns paramos as colees de automaticamente enviar toda informao do
servidor para cada verso local da coleo dos clientes
s precisamos criar um par de
publicao e assinatura para conectar a informao
Ainda no configuramos nenhum tipo de publicao de usurio
Ento como podemos ver
informao de qualquer usurio que seja
A resposta
que o pacote accounts de fato
atual usurio logado sem se importar com o resto
auto publica
as informaos bsicas de conta do
Se no o fizesse
ento esse usurio nunca
conseguiria logar no site
O pacote accounts apenas publica o usurio atual alis
pode ver os detalhes da conta de outro
Isto explica porque um usurio no
Ento a publicao est apenas publicando um objeto usurio por usurio logado
quando voc
no est logado
).
e nenhum
101/261
1/8/2015
Ainda mais
documentos na nossa coleo usurios no parecem conter os mesmos campos
no servidor e no cliente
Em Mongo
um usurio tem um monte de informao nele
Para v
la
apenas v de volta ao terminal Mongo e digite
> db.users.findOne()
{
"createdAt" : 1365649830922,
"_id" : "kYdBd9hr3fWPGPcii",
"services" : {
"password" : {
"srp" : {
"identity" : "qyFCnw4MmRbmGyBdN",
"salt" : "YcBjRa7ArXn5tdCdE",
"verifier" : "df2c001edadf4e475e703fa8cd093abd4b63afccbca48f
ad1d2a0986ff2bcfba920d3f122d358c4af0c287f8eaf9690a2c7e376d701ab2fe1acd53a5bc
3e843905d5dcaf2f1c47c25bf5dd87764d1f58c8c01e4539872a9765d2b27c700dcdedadf5ac
82521467356d3f91dbeaf9848158987c6d359c5423e6b9cabf34fa0b45"
}
},
"resume" : {
"loginTokens" : [
{
"token" : "BMHipQqjfLoPz7gru",
"when" : 1365649830922
}
]
}
},
"username" : "tmeasday"
}
Mongo console
Por outro lado
no navegador o objeto usurio
digitar o comando equivalente
muito reduzido
como voc
pode ver ao
Meteor.users.findOne();
Object {_id: "kYdBd9hr3fWPGPcii", username: "tmeasday"}
Browser console
102/261
1/8/2015
Este examplo nos mostra como uma coleo local pode ser um subconjunto seguro do
verdadeiro banco de dados
para funcionar
neste caso
O usurio logado v
).
logar
Este
apenas o suficiente do conjunto de dados
um padro
til a se aprender
como voc
ver mais
adiante
Isso no significa que voc
quiser
Voc
na coleo
no possa tornar p
blica mais informao sobre o usurio se voc
pode checar o Meteor docs para ver como opcionalmente publicar mais campos
Meteor.users .
103/261
1/8/2015
Reatividade
Se as cole
es so as ferramentas centrais do Meteor
a crosta que faz o
til
es transformam radicalmente a forma como seu aplicativo lida com mudanas na
informao
Ao inv
s de ter de checar por mudanas na informao manualmente
atrav
ento reatividade
centro
Cole
6.5
SIDEBAR
s de chamadas AJAX
e ento costurar essas mudanas no HTML
vulgo
mudanas na
informao podem ento vir a qualquer momento e serem aplicadas interface do usurio
sem problemas
Tome um momento para pensar nisso direito
por trs das cortinas
o Meteor
mudar qualquer parte da interface do usurio quando uma coleo subjacente
A forma imperativa para se fazer isso seria usar
O c
atualizada
.observe() , uma funo cursor que dispara
callbacks quando documentos correspondentes ao cursor mudam
fazer mudanas ao DOM
capaz de
o HTML renderizado da nossa pgina web
digo resultante se pareceria com algo assim
s ento poder amos
atrav
s desses callbacks
Posts.find().observe({
added: function(post) {
// when 'added' callback fires, add HTML element
$('ul').append('<li id="' + post._id + '">' + post.title + '</li>');
},
changed: function(post) {
// when 'changed' callback fires, modify HTML element's text
$('ul li#' + post._id).text(post.title);
},
removed: function(post) {
// when 'removed' callback fires, remove HTML element
$('ul li#' + post._id).remove();
}
});
Voc
j pode provavelmente perceber como tal c
Imagine lidar com mudanas em cada atributo da postagem
digo ficar complexo bem rapidamente
e ter de fazer mudanas
104/261
1/8/2015
<li>
complexas ao HTML dentro dos
da postagem
fronteirios que podem surgir quando n
Sem mencionar em todos os casos
s comeamos a precisar de m
informao que todas podem mudar em tempo real
ltiplas fontes de
Usar observe() ?
Quando
devemos
Usar o padro acima
widgets de terceiros
s vezes necessrio
Por exemplo
especialmente quando se lida com
vamos imaginar que n
s queremos adicionar e
remover alfinetes de um mapa em tempo real baseado em informao de uma
Coleo
digamos
Em tais casos
conversar
exemplo
voc
es dos usurios logados agora
observe()
precisar fazer callbacks do
para fazer o mapa
com a coleo do Meteor e como reagir s mudanas da informao
voc
dropPin()
).
para mostrar as localiza
precisaria dos callbacks
removePin()
ou
added
removed
para chamar os m
Por
todos
da API do mapa
Umapproachdeclarativo
O Meteor prov
declarativo
a n
s uma forma melhor
cada poss vel mudana
reatividade
a qual
em sumo um approach
Sendo declarativo ele nos permite definir a relao entre objetos uma vez e saber
que eles permaneceram em sincronia
Este
ao inv
s de ter de especificar comportamentos para
.
,
um conceito poderoso
porque um sistema em tempo real tem muitos inputs que
podem todos mudar em momentos imprevis veis
Ao afirmar declarativamente como n
renderizamos HTML baseado em qualquer fonte de informao reativa com que nos
importamos
Meteor pode tomar conta do servio de monitorar essas fontes e
transparentemente cuidar do trabalho bagunado de manter a interface do usurio
atualizada
Tudo isso para dizer que ao inv
gente escrever
s de pensar sobre callbacks do
observe , o Meteor deixa a
105/261
1/8/2015
<ul>
{{#each posts}}
<li>{{title}}</li>
{{/each}}
</ul>
</template>
E ento pega nossa lista de postagens com
posts: function() {
}
});
Por trs das cortinas
o Meteor est armando callbacks do
observe()
para n
e re
desenhando seguimentos relevantes de HTML quando a informao reativa muda
MonitoramentodeDependnciasemMeteor:Computaes
Apesar do Meteor ser um framework reativo
aplicativo em Meteor
reativo
Se este fosse o caso
vez que qualquer coisa mudasse
digo
em tempo real
Ento
a reatividade
limitada a reas espec ficas do seu
s podemos chamar essas reas de computa
Em outras palavras
a computao
informao reativa
reativamente a ela
renderiza
digo que roda cada vez que uma das
por exemplo
voc
es
um bloco de c
fontes de informao reativa na qual ela depende muda
Note que voc
digo dentro de um
todo seu aplicativo rodaria de novo cada
e n
nem todo c
Se voc
uma varivel de Sesso
tem uma fonte de
e gostaria de responder
precisar configurar uma computao para tanto
geralmente no precisa fazer isso explicitamente porque o Meteor d s
es de cada template sua pr
pria computao
o que significa dizer que o c
).
digo
nos ajudantes de template e callbacks so reativos por padro
106/261
1/8/2015
Cada fonte de informao reativa monitora todas as computa
que poder inform las quando seu pr
invalidate()
prio valor mudar
Para tanto
ela chama a funo
na computao
Computa
es que a esto usando para
es so geralmente configuradas a simplesmente re avaliar seus conte
invalidation
e isto
).
o que ocorre nas computa
es do template
do template tamb
eficientemente
dos on
apesar que as computa
es
m fazem alguma mgica ao tentar renderizar a pgina o mais
Apesar que voc
on invalidation se voc
precisar
pode ter mais controle quanto ao que cada computao faz
na prtico isto no ser algo que voc
far com freq
ncia
ConfigurandoumaComputao
Agora que n
s entendemos a teoria por trs das computa
parecer desproporcionalmente fcil
para envolver um bloco de c
.
N
es
configurar uma de fato
Deps.autorun
s simplesmente usamos a funo
digo na computao e faz
lo reativo
Deps.autorun(function() {
console.log('There are ' + Posts.find().count() + ' posts');
});
, autorun
Por trs das cortinas
cria uma computao
fontes de informao na qual ela depende mudam
simples que simplesmente informa o n
e a configura para re avaliar quando as
.
N
s configuramos uma computao bem
mero de postagens para o console
J que
Posts.find() uma fonte de informao reativa, ela tomar conta de informar a
computao para re avaliar cada vez que o n
mero de postagens mudar
> Posts.insert({title: 'New Post'});

There are 4 posts.
O resultado em rede de tudo isso
reativa de uma forma bem natural
depend
que n
s podemos escrever c
digo que usa informao
sabendo que por trs das cortinas o sistema de
ncia toma conta de rodar novamente bem na hora certa
.
107/261
1/8/2015
108/261
1/8/2015
CriandoArtigos
s vimos como
banco de dados
fcil criar artigos atrav
s do console
usando a chamada
Posts.insert
ao
mas n
criar um novo artigo
Eventualmente
s no podemos esperar que nossos usurios abram o console para
,
n
s precisaremos construir alguma forma de interface do usurio para
permitir aos nossos usurios postar novos artigos no nosso aplicativo
ConstruindoumaNovaPginadeArtigo
s comeamos por definir a rota para a nossa nova pgina
Router.configure({
waitOn: function() { return Meteor.subscribe('posts'); }
});
});
this.route('postSubmit', {
path: '/submit'
});
});
lib router js
s estamos usando a funo
do template
data
postPage . Lembre
estar dispon vel ao
this
do roteador para configurar um contexto de informao
se que o quer que ponhamos nesse contexto de informao
de dentro dos ajudantes de template
109/261
1/8/2015
AdicionandoumLinkaoCabealho
Com essa rota definida
,
n
s podemos agora adicionar um link a nossa pgina de envio no
nosso cabealho
lapse">
</a>
<ul class="nav">
<li><a href="{{pathFor 'postSubmit'}}">New</a></li>
</ul>
</ul>
</div>
</div>
</header>
</template>
Configurar a nossa rota signifca que se o usurio procurar pela URL
mostrar o template
/submit , o Meteor
postSubmit . Ento vamos escrever esse template:
110/261
1/8/2015
<template name="postSubmit">
<form class="main">
<div class="control-group">
<label class="control-label" for="url">URL</label>
<div class="controls">
<input name="url" type="text" value="" placeholder="Your URL"/>
</div>
</div>
<label class="control-label" for="title">Title</label>
<input name="title" type="text" value="" placeholder="Name your
post"/>
</div>
</div>
<label class="control-label" for="message">Message</label>
<textarea name="message" type="text" value=""/>
</div>
</div>
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div>
</form>
</template>
/ _
Note
isto
Bootstrap
submit html
um monte de marcao
mas ela simplesmente adv
Apesar de apenas os elementos de formulrio serem essenciais
ajudar o nosso aplicativo a parecer um pouco melhor
assim
m de se usar o Twitter
a marcao extra
Agora ele dever se parecer com algo
111/261
1/8/2015
Thepostsubmitform
Este
um simples formulrio
.
N
s no precisamos nos preocupar com a ao para ele
j que
s estaremos interceptando eventos de envio no formulrio e atualizando a informao via
JavaScript
No faz sentido prover um plano reserva sem ser em JS quando se considera que
um aplicativo em Meteor
).
completamente no funcional quando o JavaScript est
desativado
CriandoArtigos
Vamos ligar um manuseador de evento ao evento
evento
submit
ao inv
s de digamos um evento
maneiras poss ves de envio
submit
click
do formulrio
),
no boto
melhor usar o
j que ele cobrir todas
).
tais como apertar enter no campo da URL por exemplo
112/261
1/8/2015
Template.postSubmit.events({
'submit form': function(e) {
e.preventDefault();
var post = {
url: $(e.target).find('[name=url]').val(),
title: $(e.target).find('[name=title]').val(),
message: $(e.target).find('[name=message]').val()
}
}
});
post._id = Posts.insert(post);
Router.go('postPage', post);
/ _
submit js
Commit71
Added a submit post page and linked to it in the header
Ver no GitHub
Lanar Instncia
Esta funo usa jQuery para analisar os valores dos vrios campos do formulrio
novo objeto artigo com os resultados
argumento do
event
.
N
e povoar o
preventDefault
s precisamos assegurar que n
no
do nosso manuseador para garantir que o navegador no v adiante e
tente enviar o formulrio
Finalmente
s podemos redirecionar a nossa nova pgina do artigo
numa coleo retorna a
funo
go()
id
insert()
gerada para o objeto que foi inserido no banco de dados
do Roteador usar para construir a URL para n
O resultado em rede
A funo
que o usurio aperta enviar
o artigo
a qual a
s navegarmos at
criado
e o usurio
instantaneamente levado pgina de discusso para este novo artigo
AdicionandoAlgumaSegurana
113/261
1/8/2015
Criar artigos est todo certo
mas n
s no queremos permitir que visitantes aleat
faam
s queremos que eles precisem estar logados para tanto
Claro
rios o
,
n
s podemos
comear escondendo dos usurios no logados o formulrio de novo artigo
Mesmo assim
um
usurio poderia concebivelmente criar um artigo no console do navegador sem estar logado
s no queremos isso
Agradecidamente a segurana de informao est inserida diretamente nas cole
a questo
que voc
que ela fica desligada por padro quando voc
cria um novo projeto
es Meteor
Isso permite
comece facilmente e construa seu aplicativo deixando a parte chata para mais tarde
Nosso aplicativo no precisa mais de rodinhas
- !
ento vamos tir las
insecure :
pacote
s removeremos o
$ meteor remove insecure
Terminal
Ap
s o faz
lo
noc
notar que o formulrio de artigo no funciona mais
insecure , inseres do lado do cliente na coleo posts
pacote
precisamos ou dar regras expl citas ao Meteor sobre quando
artigos
ou fazer todas nossas inser
Isto
porque sem o
no so mais permitidas
.
N
OK para um cliente inserir
es de artigo pelo lado do servidor
PermitindoInseresdeArtigo
Para comear
,
n
s mostraremos como permitir inser
deixar nosso formulrio funcionando de novo
terminaremos com uma t
cnica diferente
es de artigos pelo lado do cliente para
Como de costume
mas por hora
s eventualmente
o seguinte far as coisas funcionarem
de novo
114/261
1/8/2015

Posts.allow({
insert: function(userId, doc) {
// only allow posting if you are logged in
return !! userId;
}
});
Commit72
Removed insecure
and allowed certain writes to posts
Ver no GitHub
s chamamos
Lanar Instncia
Posts.allow , que diz ao Meteor
este
os clientes esto permitidos a fazer coisas coleo
dizendo
userId
retorna
clientes t
um conjunto de circunstncias onde
Posts . Neste caso, ns estamos
passada s chamadas
),
se nenhum usurio estiver logado
o que
de usurios so amarradas ao centro do Meteor
allow
quase sempre
.
til
s podemos contar com a
userId .
m permisso de inserir artigos desde que eles tenham uma
do usurio fazendo a modificao
null
and
deny
ou
E como as contas
userId
estar
sempre correta
s conseguimos garantir que voc
deslogar e criar um artigo
voc
precisar estar logado para criar um artigo
Tente
deve ver isto no console
115/261
1/8/2015
Insertfailed:Accessdenied
Entretanto
,
n
s ainda temos de lidar com algumas quest
es
Usurios no logados ainda conseguem alcanar o formulrio de criao de artigo
O artigo no est ligado ao usurio de forma alguma
).
e no h c
digo no servidor que
garanta isso
ltiplos artigos podem ser criados que apontem para a mesma URL
Vamos consertar esses problemas
ProtegendooAcessoaoFormulriodeNovoArtigo
Vamos comear prevenindo usurios no logados de ver o formulrio de envio de artigo
faremos isso no n vel do roteador
.
N
definindo um gancho de rota
Um gancho intercepta um processo de roteamento e potencialmente muda a ao que o
roteador toma
Voc
permitir que voc
pode pens lo como um segurana que checa suas credenciais antes de
entre
).
ou te recusar
116/261
1/8/2015
O que n
s precisamos fazer
renderizar o template
checar se o usurio est logado
accessDenied
ao inv
e se eles no estiverem
s do esperado template
paramos o roteador de fazer qualquer outra coisa
).
postSubmit
(
n
s ento
Vamos modificar o router js para tanto
Router.configure({
});
});
path: '/submit'
});
});
var requireLogin = function() {
if (! Meteor.user()) {
this.render('accessDenied');
this.stop();
}
}
Router.before(requireLogin, {only: 'postSubmit'});
lib router js
s tamb
m criamos o template da pgina acesso negado
<template name="accessDenied">
<div class="alert alert-error">You can't get here! Please log in.</div>
</template>
client views includes access
denied html
117/261
1/8/2015
Commit73
Denied access to new posts page when not logged in
Ver no GitHub
Se voc
tentar ir a http
//
Lanar Instncia
:3000
localhost
submit
sem estar logado
voc
deve ver isto
Theaccessdeniedtemplate
A coisa legal quanto a ganchos de roteamento
que eles so reativos
podemos ser declarativos e no precisamos pensar em callbacks
usurio loga
Quando o estado de log in do usurio muda
muda instantaneamente de
escrever nenhum c
Logue
accessDenied
para
Isso signfica que n
ou similares
quando o
a pgina de template do Roteador
postSubmit
sem que n
s precisemos
digo expl cito para tanto
e ento tente atualizar a pgina
Voc
pode ver s vezes o template negado piscar por
um breve momento antes da pgina de envio de artigo aparecer
Meteor comea renderizando templates o mais cedo poss vel
servidor e checar se o usurio atualmente
A razo para tanto
que o
antes de conversar com o
armazenado no banco local do navegador
sequer
118/261
1/8/2015
existe
Para evitar este problema
voc
que
uma classe de problemas comum que voc
),
lidar com os detalhes da lat
ncia entre cliente e servidor
tela de loading pelo breve momento em que n
ver mais quando
s apenas mostraremos uma
s esperamos para ver se o usurio tem acesso
ou no
At
mesmo porque neste estgio n
corretas
e n
s no sabemos se o usrio tem as credenciais log in
s no podemos mostrar tanto
accessDenied
ou o template
postSubmit
at
que saibamos
Ento n
s modificamos no nosso gancho para usar o nosso template loading embora
Meteor.loggingIn()
seja verdadeiro
});
path: '/submit'
});
});
if (Meteor.loggingIn())
this.render(this.loadingTemplate);
else
this.stop();
lib router js
119/261
1/8/2015
Commit74
Show a loading screen while waiting to login
Ver no GitHub
Lanar Instncia
EscondendooLink
A maneira mais fcil de prevenir que os usurios cheguem a esta pgina por engano quando
eles no esto logados
esconder o link deles
s podemos fazer isso bem facilmente
<ul class="nav">
{{#if currentUser}}<li><a href="{{pathFor 'postSubmit'}}">Submit Post</a><
/li>{{/if}}
</ul>
Commit75
Only show submit post link if logged in
Ver no GitHub
O ajudante
currentUser
nos
Lanar Instncia
provido pelo pacote
accounts
o handlebar equivalent de
Meteor.user() . J que reativo, o link ir aparecer ou desaparecer ao voc logar e deslogar

do aplicativo
MtodoMeteor:AbstraoeSeguranaMelhores
s conseguimos proteger o acesso pgina de novo artigo de usurio no logados
que tais usurios criem artigos mesmo que eles trapaceiem e usem o console
mais algumas coisas que n
s precisamos tomar conta
Por
e negar
m ainda h
:
120/261
1/8/2015
Timestamping os artigos
Assegurar que uma mesma URL no seja publicada mais que uma vez
Adicionar detalhes sobre o autor do artigo
Voc
ID
username
..
etc
talvez esteja pensando que n
s podemos fazer tudo isso no nosso manuseador de
submit , entretanto, ns rapidamente encontraramos uma srie de problemas:
evento
Para a timestamp
usurio
s ter amos de contar com a corretude do tempo do computador do
o qual nem sempre ser o caso
Clientes no saberam de todas as URLs j publicadas no site
artigos que eles podem ver atualmente
),
mais tarde
Finalmente
s veremos como isso funciona exatamente
ento no h como garantir originalidade de URL pelo lado do cliente
apesar que n
cliente
Eles apenas sabero dos
s poder amos adicionar detalhes de usurio pelo lado do
s no poder amos garantir sua acurcia
o que poderia abrir o nosso
aplicativo para os usurios trapaceando pelo console do navegador
Por todas essas raz
es
melhor manter nossos manuseadores de evento simples e
estivermos fazendo mais do que inser
es e atualiza
es bsicas coleo
se n
usemos um
todo
Um M
todo Meteor
uma funo do lado do servidor que
temos alguma familiaridade com elas
update
remove
Vamos voltar a
da
Coleo
alis
todos
chamada pelo lado do cliente
por trs das cortinas
so todos M
as fun
es
insert ,
Vamos ver como criar o nosso pr
prio
post_submit.js . Ao invs de inserir diretamente na coleo Posts , ns
chamaremos um M
todo chamado
post :
121/261
1/8/2015
e.preventDefault();
var post = {
}
Meteor.call('post', post, function(error, id) {
if (error)
return alert(error.reason);
}
});
Router.go('postPage', {_id: id});

});
/ _
Meteor.call
A funo
submit js
prover argumentos chamada
),
formulrio
todo nomeado pelo seu primeiro argumento
neste caso
o objeto
e finalmente anexar um callback
servidor estiver finalizado
problema
chama um M
post
que n
Voc
s constru mos atrav
o qual executar quando o M
pode
s do
todo do lado do
Aqui n
s simplesmente alertamos o usurio se houve algum
ou redirecionamos o usurio recentemente criada pgina de discusso do artigo
caso contrrio
s definimos o M
allow()
do
todo no nosso arquivo
posts.js
j que o M
so executados no servidor
collections/posts.js . Ns removeremos o bloco
todo Meteor ignora eles mesmo
Lembre se que M
todos
ento o Meteor assume que eles sejam confiveis
122/261
1/8/2015

Meteor.methods({
post: function(postAttributes) {
var user = Meteor.user(),
postWithSameLink = Posts.findOne({url: postAttributes.url});
// ensure the user is logged in

if (!user)
throw new Meteor.Error(401, "You need to login to post new stories");
// ensure the post has a title
if (!postAttributes.title)
throw new Meteor.Error(422, 'Please fill in a headline');
// check that there are no previous posts with the same link
if (postAttributes.url && postWithSameLink) {
throw new Meteor.Error(302,
'This link has already been posted',
postWithSameLink._id);
}
// pick out the whitelisted keys
var post = _.extend(_.pick(postAttributes, 'url', 'title', 'message'), {
userId: user._id,
author: user.username,
submitted: new Date().getTime()
});
var postId = Posts.insert(post);
}
});
return postId;
Commit76
Use a method to submit the post
Ver no GitHub
Este M
todo
um pouco complicado
Lanar Instncia
mas felizmente voc
pode seguir adiante
123/261
1/8/2015
Primeiro
existe
s definimos nossa varivel
Ento
,
n
user
e checamos se o artigo com o mesmo link j
s checamos para ver se o usurio est logado
alert
eventualmente ser
ado pelo navegador
jogando um erro
caso contrrio
o qual
s tamb
m fazemos
alguma validao simples do objeto artigo para garantir que os nossos artigos tenham t tulo
Em seguida
se h outro artigo com a mesma URL
significa redirecionar
A classe
num
e o
Error
,
n
dizendo ao usurio que n
do Meteor recebe tr
s dever amos ir e ver este artigo pr
s argumentos
302
s podemos lanar um erro
O primeiro
( error )
o qual
vio
ser o c
digo
302 , o segundo reason uma pequena explicao legvel por humanos do erro,
rico
ltimo
( details )
,
No nosso caso
pode ser qualquer informao
til adicional
s usaremos este terceiro argumento para passar a ID do artigo que n
acabamos de encontrar
usurio para o artigo pr
Spoiler alert
existente
assim como o tempo atual
,
n
),
s usaremos isso mais tarde para redirecionar o
s agarraremos os campos que n
s queremos inserir
para garantir que o usurio que esteja chamando este M
falsa no nosso banco de dados
Se todas essas checagens passarem
Finalmente
todo no possa por informao
e incluiremos alguma informao sobre o usurio que envia
ao artigo
s inserimos o artigo
e retornamos a
id
do novo artigo ao usurio
OrganizandoArtigos
Agora que n
s temos data de envio em todos os nossos artigos
estejam organizados usando esse atributo
do Mongo
faz sentido assegurar que eles
Para tanto
s podemos usar o operador
que espera um objeto feito de chaves pelas quais organizar
de forma ascendente ou descendente
sort
e um sinal indicando se
124/261
1/8/2015
posts: function() {
return Posts.find({}, {sort: {submitted: -1}});
}
});
list js
Commit77
Sort posts by submitted timestamp
Ver no GitHub
Levou um pouco de trabalho
mas n
nossos usurios adicionar conte
Lanar Instncia
s finalmente temos uma interface do usurio para deixar
do seguramente ao nosso aplicativo
Mas qualquer aplicativo que permite ao usurio criar conte
edit lo e delet lo
do tamb
Sobre isso que se tratar o cap tulo Editando Artigos
m precisa deix los
125/261
1/8/2015
CompensaodeLatncia
No
7.5
SIDEBAR
ltimo cap tulo
s introduzimos um novo conceito no mundo Meteor
:
M
todos
Withoutlatencycompensation
Um M
todo Meteor
forma estruturada
uma forma de executar uma s
No nosso exemplo
rie de comandos no servidor de uma
,
n
s usamos um M
todo porque n
s quer amos ter
certeza que os novos artigos estariam marcados com o nome do autor e id assim como o
tempo atual do servidor
Entretanto
problema
aleat
se o Meteor executasse M
Considere a seguinte seq
rios selecionados por raz
+0
ms
todos da forma mais bsica
ncia de eventos
(
):
note
s ter amos um
as timestamps so valores
es apenas ilustrativas
O usurio clica no boto de enviar e o navegador dispara uma chamada a um
126/261
1/8/2015
todo
+200
+500
ms
ms
O servidor faz mudanas ao banco de dados Mongo
O cliente recebe essas mudanas
Se esta fosse a forma como o Meteor operasse
tais a
es e ver os resultados
pr
ximo se est do servidor
).
e atualiza a UI para reflet
las
ento haveria um pequeno lag entre efetuar
esse lag sendo mais ou menos percept vel dependendo de quo
s no podemos ter isso numa aplicativo web moderno
CompensaodeLatncia
127/261
1/8/2015
Withlatencycompensation
Para evitar problemas
Quando n
diret
rio
cliente
o Meteor introduz um conceito chamado Compensao de Lat
s definimos nosso M
todo
ncia
post , ns o colocamos dentro de um arquivo no
collections/ . Isto significa que ele est disponvel tanto no servidor
quanto no
e rodar em ambos ao mesmo tempo
Quando voc
faz uma chamada a um M
todo
o cliente envia uma chamada ao servidor
mas
128/261
1/8/2015
tamb
m simultaneamente simula a ao do M
de trabalho agora se torna
+0
+0
ms
ms
todo nas cole
es do cliente
Ento nosso fluxo
O cliente simula a ao da chamada ao M
todo nas cole
todo
es do cliente e muda a
las
O servidor faz mudanas ao banco de dados Mongo
ms
O cliente recebe essas mudanas e desfaz suas mudanas simuladas
ms
as pelas mudanas do servidor
UI refletiro isso
as quais so geralmente as mesmas
Isto resulta no usurio ver mudanas instantaneamente
retorna alguns momentos mais tarde
documentos can
).
trocando
As mundanas na
Quando a responda do servidor
pode ou no haver mudanas notveis ao passo que os
nicos do servidor chegam pela conexo
O usurio clica no boto enviar e o navegador dispara uma chamada ao M
UI para reflet
+200
+500
Algo a se aprender com isto
que
s devemos tentar ter certeza que n
s simulamos os documentos reais o mais
veridicamente
ObservandoaCompensaodeLatncia
s podemos fazer uma pequena mudana chamada ao M
ao
Para tanto
s usaremos
isSimulation
invocado como um stub
paralelo
para ver isso em
enquanto o M

real
adicionamos a string
(client)
todo est sendo atualmente
uma simulao de M
todo que roda no cliente em
est rodando no servidor
s perguntamos ao Meteor se o c
adicionamos a string
Um stub
todo
futures
todo
para perguntar ao Meteor se o M
Ento n
post
s faremos alguma programao avanada com o pacote npm
para retardar a insero de objetos no nosso M
todo
digo est sendo executado no cliente
ao final do t tulo do nosso post
Caso contrrio
Se sim
,
n
,
n
(server) :
129/261
1/8/2015
Meteor.methods({
// []

var post = _.extend(_.pick(postAttributes, 'url', 'message'), {
title: postAttributes.title + (this.isSimulation ? '(client)' : '(serv
er)'),
userId: user._id,
});
// wait for 5 seconds
if (! this.isSimulation) {
var Future = Npm.require('fibers/future');
var future = new Future();
Meteor.setTimeout(function() {
future.return();
}, 5 * 1000);
future.wait();
}
}
});
return postId;
Note
caso voc
esteja se perguntando
invocao de M
todo que prov
this
em
this.isSimulation um objeto de
acesso a vrias variveis
teis
Como exatamente Futures funciona est fora do escopo deste livro
dissemos ao Meteor para esperar
mas n
s basicamente
segunos antes de tentar inserir na nossa coleo do
servidor
s tamb
m garantiremos que o envio redirecione diretamente para a list de artigos
130/261
1/8/2015
'submit form': function(event) {
event.preventDefault();
var post = {
url: $(event.target).find('[name=url]').val(),
title: $(event.target).find('[name=title]').val(),
message: $(event.target).find('[name=message]').val()
}
}
});

if (error)
return alert(error.reason);
});
Router.go('postsList');
/ _
submit js
Commit751
Demonstrate the order that posts appear using a sleep
Ver no GitHub
Se n
s criamos um artigo agora
um artigo
o GitHub
):
inserido como
Lanar Instncia
,
n
s vemos a compensao de lat
(cliente)
em seu t tulo
ncia claramente
o primeiro artigo da lista
Primeiro
linkando para
131/261
1/8/2015
Ourpostasfirststoredintheclientcollection
Ento
cinco segundos mais tarde
inserido pelo servidor
ele
claramente substitu do pelo documento real que foi
Ourpostoncetheclientreceivestheupdatefromtheservercollection
MtodonaColeodoCliente
132/261
1/8/2015
Voc
pode pensar que M
todos so complicados depois disso
bem simples
s j vimos tr
insert , update
Quando voc
definindo tr
palavras
um M
1.
s M
todos bem simples
os M
todos
quando voc
'posts' , voc est implicitamente
: posts/insert , posts/update
chama
Posts.insert()
posts/delete . Em outras
na coleo do cliente
todo de lat
todos de mutao de Coleo
remove .
define uma coleo no servidor chamada
s M
mas na real eles podem ser
voc
est chamando
ncia compensada que faz duas coisas
Checa para ver se n
s podemos fazer a mutao chamando as callbacks
).
allow
deny
entretanto isto no precisa ocorrer na simulao
2.
De fato opera a modificao ao armazenamento de informao subjacente
MtodoschamandoMtodos
Se voc
est acompanhando
chamando outro M
todo
voc
pode ter percebido que o nosso M
( posts/insert )
quando n
todo
post
s inserimos nosso post
est
Como isso
funciona
Quando a simulao
simulao do
verso do M
insert
ento n
, insert
post
do lado do servidor
j que n
est rodando
),
s inserimos na nossa coleo do cliente
chamamos o real
servidor do
todo do lado do cliente
s rodamos a
mas n
s no
s esperamos que a verso do lado do
far isso
Consequentemente
quando o M
todo
post
do lado do servidor chama
necessidade de se preocupar quanto simulao
insert
no h
e a insero ocorre suavemente
133/261
1/8/2015
EditandoArtigos
Agora que j conseguimos criar artigos
Dado que o c
o pr
digo de UI desta funcionalidade
conseguir edita los e remove los
bastante simples
falar sobre como Meteor gere permiss
ximo passo
esta
uma boa altura para
es de utilizadores
Vamos primeiro configurar o nosso roteador
Primeiro vamos adicionar uma rota para aceder
pgina de edio do artigo e vamos definir o seu contexto de dados
Router.configure({
});
});
this.route('postEdit', {
path: '/posts/:_id/edit',
});
path: '/submit'
});
});
if (Meteor.loggingIn())
this.render('loading')
else
this.stop();

134/261
1/8/2015
lib router js
OTemplateDeEdiodeArtigos
Podemo nos focar agora no template
standard
O nosso template
postEdit
vai ser um formulrio
<template name="postEdit">
<form class="main">
<label class="control-label" for="url">URL</label>
<input name="url" type="text" value="{{url}}" placeholder="Your
URL"/>
</div>
</div>
<label class="control-label" for="title">Title</label>
<input name="title" type="text" value="{{title}}" placeholder="N
ame your post"/>
</div>
</div>
<input type="submit" value="Submit" class="btn btn-primary submi
t"/>
</div>
</div>
<hr/>
<a class="btn btn-danger delete" href="#">Delete post</a>
</div>
</div>
</form>
</template>
/ _
E aqui est o gestor
edit html
post_edit.js
que acompanha o template
135/261
1/8/2015
Template.postEdit.events({
e.preventDefault();
var currentPostId = this._id;
var postProperties = {
title: $(e.target).find('[name=title]').val()
}
Posts.update(currentPostId, {$set: postProperties}, function(error) {
if (error) {
// display the error to the user
alert(error.reason);
} else {
Router.go('postPage', {_id: currentPostId});
}
});
},
'click .delete': function(e) {
e.preventDefault();
if (confirm("Delete this post?")) {
var currentPostId = this._id;
Posts.remove(currentPostId);
Router.go('postsList');
}
}
});
/ _
edit js
Por esta altura a maioria do c
digo deve parecer familiar
Primeiro
temos o nosso ajudante de
template que carrega o artigo atual e passa o ao template
Depois
temos duas callbacks de eventos do template
do formulrio
e outra para o
A callback do apagar
muito simples
utilizador para confirmar
do Template
suprimir o evento de click por omisso
submit
submeter
no link de apagar
Caso isso acontea
apaga o artigo
click
uma para o evento
e pedir ao
obt
m o ID do artigo atual do contexto de dados
e finalmente redireciona o utilizador para a pgina inicial
.
136/261
1/8/2015
A callback de edio
ligeiramente maior
mas no muito mais complicada
suprimir o evento por omisso e de ir buscar o artigo atual
lemos os novos valores dos
campos do formulrio da pgina e guardamo los num objecto
).
Depois de
postProperties
propriedades do artigo
Depois passamos este objecto para o M
todo de Meteor
a callback que ou mostra um erro se a atualizao falhou
Collection.update() , e utilizamos
ou envia o utilizador de volta para a
pgina do artigo caso a atualizao tenha sido feita com sucesso
AdicionandoLinks
Devemos ainda adicionar links de edio aos nossos artigos para que os utilizadores tenham
uma forma de aceder pgina de edio de artigos
<div class="post">
<p>
submitted by {{author}}
{{#if ownPost}}<a href="{{pathFor 'postEdit'}}">Edit</a>{{/if}}
</p>
</div>
</div>
</template>
/ _
Naturalmente
item html
no queremos mostrar links de edio para o formulrio de outra pessoa
aqui que o ajudante
ownPost
entra
137/261
1/8/2015
ownPost: function() {
return this.userId == Meteor.userId();
},
a.href = this.url;
return a.hostname;
}
});
/ _
item js
Formulriodeediodeartigo.
Commit81
Formulrio de edio de artigos adicionado
Ver no GitHub
Lanar Instncia
O nosso formulrio de edio de artigos est com bom aspeto
nada
O que
mas ainda no
poss vel editar
que se passa
138/261
1/8/2015
DefinindoPermisses
insecure , todas as modificaes feitas do
Dado que anteriormente removemos o pacote
lado do cliente esto a ser recusadas
Para corrigir isto
permissions.js
.
.
vamos definir alguma regras de permiss
dentro de
carregada primeiro
es
Primeiro
crie um novo ficheiro
lib . Isto faz com que a nossa lgica de permisses seja
e que esteja dispon vel em ambos os ambientes
):
// check that the userId specified owns the documents

ownsDocument = function(userId, doc) {
return doc && doc.userId === userId;
}
lib permissions js
No capitulo Criando Artigos
,
n
apenas a inserir novos artigos atrav
ignora o
s vimo nos livres dos M
s de um M
todos
allow()
todo de servidor
allow() .
que de qualquer forma
Mas agora que estamos a atualizar e apagar artigos a partir do cliente
posts.js
e adicionar este bloco
porque estvamos
vamos voltar ao
allow() :

Posts.allow({
update: ownsDocument,
remove: ownsDocument
});
Meteor.methods({
...
139/261
1/8/2015
Commit82
Permisso bsica que verifica o dono do artigo adicionada
Ver no GitHub
Lanar Instncia
LimitandoEdies
porque pode editar os seus pr
propriedade
no quer dizer que deva poder editar qualquer
Por exemplo
prios artigos
s no queremos que os utilizadores sejam capazes de criar um
artigo e depois associ lo a outro utilizador
A callback
deny()
do Meteor
utilizada para garantir que apenas campos espec ficos podem
ser atualizados

Posts.allow({
update: ownsDocument,
remove: ownsDocument
});
Posts.deny({
update: function(userId, post, fieldNames) {
// may only edit the following two fields:
return (_.without(fieldNames, 'url', 'title').length > 0);
}
});
Commit83
Permitir que apenas certos campos do artigo possam ser al
Ver no GitHub
Lanar Instncia
140/261
1/8/2015
Estamos a pegar na lista
todo
without()
url
que no so
fieldNames
m os campos a serem modificados e usamos o
do Underscore para devolver uma sub lista contendo apenas os campos
title .
ou
Se tudo est normal
essa lista deve estar vazia e o seu tamanho deve ser
tentar alguma coisa manhosa
true
que cont
o tamanho dessa lista ser
).
ou mais
0.
Se alguem est a
e a callback vai devolver
impedindo assim a atualizao
ChamadasaMtodosvsManipulaodeDadosNoLadodoCliente
Para criar artigos
apagar
estamos a utilizar o M
update
estamos a chamar
acesso usando
Quando
allow
todo
remove
post , enquanto que para os editar e

diretamente no cliente e limitamos o
deny .
adequado usar um e no o outro
Quando as coisas so relativamente simples e as regras podem ser exprimidas por
allow
deny , normalmente mais simples fazer as coisas diretamente no cliente.
Manipular a base de dados diretamente a partir do cliente cria uma percepo de
imediato
e pode fazer com que a experi
ncia de utilizao seja melhor desde que os
casos de erro sejam tratados adequadamente
dizendo que a operao afinal falhou
No entanto
).
a partir do momento em que
fora do controlo do utilizador
Quando
isto
quando o servidor responde
necessrio fazer coisas que devem estar
tais como dar timestamps a novos artigos ou associar
),
um artigo ao utilizador correto
Chamadas a M
provavelmente melhor usar um M
todo
todos tamb
.
:
m so mais adequadas em alguns outros casos
preciso saber ou
preciso devolver valores atrav
s de uma callback
em vez de esperar que a reatividade e sincronizao propaguem as altera
Para opera
es de base de dados pesadas que implicariam enviar uma coleo
grande para o cliente
Para sumarizar ou agregar dados
es
por exemplo
contar
dias
).
somas
141/261
1/8/2015
142/261
1/8/2015
AllowandDeny
8.5
SIDEBAR
O sistema de segurana do Meteor nos permite controlar modifica
precisarmos definir M
todos toda vez que n
es ao banco de dados sem
s queremos fazer mudanas
Por n
s necessitarmos fazer tarefas auxiliares como decorar o post com propriedades extras e
tomar uma ao especial quando o URL do post j ter sido postada
usar um M
todo
post
espec fico fazia bastante sentido ao se criar um post
Por outro lado
posts
s no precisamos realmente criar novos M
todos para atualizar e deletar
.
N
s apenas precisamos checar se o usurio tem permisso para fazer tais a
foi feito pelas callbacks
allow
,
es
e isto
deny .
Usar estas callbacks nos permite sermos mais declarativos quanto s modifica
de dados
e dizer que tipo de atualiza
sistema de contas
um b
es podem ser feitas
es ao banco
O fato delas se integrarem ao
nus adicional
Callbacksmltiplas
s podemos definir quantas callbacks
menos uma delas retorne
true
allow
),
ele no permitir o insert
no importa se
do c
encontrar uma que retorne true
e retornar um erro
403
como cada callback
insert
bem sucedido
deny insert
digo do aplicativo do lado do
insert
Se ele no encontrar nenhuma
deny . Se
true , a mudana ser cancelada e um 403
significa que para um
Ento quando
para o cliente
s podemos definir uma ou mais callbacks
callbacks retornar
s precisamos que pelo
,
n
o servidor ir em resposta chamar quaisquer checagens de
permitidas que ele puder at
Similarmente
para a dada mudana que est ocorrendo
Posts.insert chamado no navegador

cliente ou do console
quanto necessrias
ser retornado
uma ou mais callback
sero executadas
qualquer uma dessas
A l
gica disto
allow insert
assim
143/261
1/8/2015
Note:n/estandsforNotExecuted
Em outras palavras
Meteor comea a lista de callback primeiro com
deny , ento com
allow , e executa cada callback at que uma delas retorne true .
Um exemplo prtico deste padro poderia ser ter duas callbacks
o post pertence ao usurio atual
administrativos
qualquer post
allow() , uma que checa se
e a segunda que checa se o usurio atual tem direitos
Se o usurio atual
um administrador
isto garante que ele poder atualizar
j que pelo menos uma dessas callbacks retornar true
CompensaodeLatncia
Lembre que M
compensada
todos de mutao do banco de dados
assim como qualquer outro M
post que no pertence a voc
atrav
todo
s do console
tais como
Por exemplo
voc
no
se voc
tem sua lat
tentar deletar um
mas ento re aparece assim
um problema quando acionado pelo console
at
mesmo porque se os usurios estiverem tentando bagunar com informao no console
).
realmente um problema seu o que acontece no navegador deles
assegurar que isto no acontea na sua interface do usurio
cuidado para assegurar que voc
documentos que eles no t
ncia
de fato o documento no foi deletado
Claro que este comportamento no
ver que o post brevemente
desaparece ao passo que sua coleo local perde o documento
que o servidor informa que
.update()
Entretanto
Por exemplo
voc
voc
no
precisa
precisa tomar
no est mostrando aos usurios bot
es de deletar para
m permisso para tanto
144/261
1/8/2015
Felizmente
j que voc
por exemplo
e p
voc
pode compartilhar c
digo de permisso entre o cliente e o servidor
canDeletePost(user, post)
poderia escrever uma funo de biblioteca
la no diret
extra
/lib , fazer isto normalmente no requer muito cdigo
rio compartilhado
Permissesdoladodoservidor
Lembre que o sistema de permiss
iniciadas no cliente
No servidor
es se refere apenas s muta
o Meteor assume que todas opera
Isto signfica que se voc
tivesse que escrever um M
servidor que pudesse ser chamado do cliente
post
Ento voc
es do banco de dados
todo Meteor
deletePost
do lado do
qualquer um seria capaz de deletar qualquer
provavelmente no quer fazer isso a no ser que voc
do usurio dentro do M
es so permitidas
cheque as permiss
es
todo tamb
UsandoDenycomoumaCallback
Finalmente
um truque que voc
Por exemplo
voc
pode fazer com
deny us
pode conseguir uma timestamp
la como uma callbaclk
lastModified
com o c
.
onX
digo seguinte
Posts.deny({
update: function(userId, doc, fields, modifier) {
doc.lastModified = +(new Date());
return false;
},
transform: null
});
Como callbacks
deny
rodam para cada
update
bem sucedido
,
n
s sabemos que essa
callback rodar e poder fazer mudanas ao documento de uma forma estruturada
Admitidamente
usando um M
esta t
cnica
todo no lugar
ento voc
De qualquer forma
esperar que algum tipo de callback
tipo um hack
ainda
beforeUpdate
pode querer fazer atualiza
bom saber
es
e no futuro n
s podemos
esteja dispon vel
145/261
1/8/2015
146/261
1/8/2015
Erros
alert()
Usar meramente o dilogo
um problema com o envio
s podemos fazer melhor
Ao inv
padro do navegador para avisar o usurio quando h
um pouco insatisfat
rio
e certamente no produz uma boa UX
vamos construir um mecanismo de reportagem de erro mais verstil que far melhor
o trabalho de dizer ao usurio o que est acontecendo sem interromper o fluxo
IntroduzindoColeesLocais
s implementaremos um simples sistema que rastrear quais erros um usurio viu e
mostrar os novos numa rea
flash
do site
Este padro UX
til quando n
s queremos
informar ao usurio que algo aconteceu sem interromper o workflow demasiadamente
O que n
s criaremos
similar as mensagems flash costumeiramente encontradas em
aplicativos com Ruby on Rails
mas
e sabe quando um usurio viu uma mensagem
Para comear
muito mais s
til pois
,
n
implementada do lado do cliente
s criamos uma coleo para armazenar nossos erros
Dado que os erros so
apenas relevantes para a sesso atual e no precisam ser persistentes de forma alguma
faremos algo novo
e criaremos uma coleo local
apenas no navegador
Isso significa que a coleo
Errors
existir
e no far nenhuma tentativa de sincronizar com o servidor
Para conseguir isto
s simplesmente criamos o error num arquivo apenas do cliente
nome da coleo configurado para
null . Ns criamos uma funo throwError
com o
que
simplesmente insere um error na nossa nova coleo local
// Local (client-only) collection

Errors = new Meteor.Collection(null);
client helpers errors js
147/261
1/8/2015
Agora que a coleo foi criada
s podemos adicionar uma funo
chamaremos para adicionar erros a ela
deny
ou
.
N
ou qualquer outra coisa assim
banco de dados Mongo
throwError
que n
s no precisamos nos preocupar quanto a
j que isto
allow
uma coleo local e no ser salva no
throwError = function(message) {
Errors.insert({message: message})
}
A vantagem de usar uma coleo local para armazenar os errors
ela
reativa
forma que n
significando que n
que
como todas cole
es
s podemos declarativamente mostrar os erros da mesma
s mostramos informao de qualquer outra coleo
Mostrandoerros
s vamos mostrar os erros no topo do nossos layout principal
{{> header}}
{{> errors}}
{{yield}}
</div>
</div>
</template>
Vamos agora criar os templates
errors
error
em
errors.html :
148/261
1/8/2015
<template name="errors">
<div class="errors row-fluid">
{{#each errors}}
{{> error}}
{{/each}}
</div>
</template>
<template name="error">
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button
>
{{message}}
</div>
</template>
client views includes errors html
TemplatesGmeos
Voc
notar que n
s tentamos aderir conveno
se importa p
bem
um arquivo
r todos os nossos templates num
apesar que produziria um
Neste caso
s estamos pondo dois templates num mesmo arquivo
main.html
um template
mas at
onde o Meteor
).
bem confuso
j que ambos templates de error so bem curtos
s faremos uma
rio um pouco mais
agora
nico arquivo funciona igualmente
exceo e os poremos no mesmo arquivo para fazer nosso reposit
limpo
At
s apenas precisamos integrar nosso ajudante de template
e estaremos prontos para ir
Template.errors.helpers({
errors: function() {
return Errors.find();
}
});
client views includes errors js
149/261
1/8/2015
Commit91
Basic error reporting
Ver no GitHub
Lanar Instncia
Criandoerros
s agora sabemos como mostrar erros
vermos qualquer coisa
Erros prov
mas n
s ainda precisamos criar alguns antes de
m geralmente de usurios tentando enviar novo conte
ento n
s checaremos por erros na nossa callback de criao de artigo
,
do
e mostraremos uma
mensagem para qualquer erro que for levantado
Em adio
existe
),
se n
s pegarmos o erro
302
o qual indica que um artigo com a mesma URL j
s redirecionaremos o usurio para o artigo existente
artigo exitente do
error.details
terceiro argumento de
details
lembre se que n
da nossa classe
s obteremos o
s passamos o
Error
_id
no cap tulo
_id
do
do artigo como o
7.
150/261
1/8/2015
e.preventDefault();
var post = {
}
if (error) {
throwError(error.reason);
}
});
if (error.error === 302)

Router.go('postPage', {_id: error.details})
} else {
Router.go('postPage', {_id: id});
}
});
/ _
submit js
Commit92
Actually use the error reporting
Ver no GitHub
Experimente
Lanar Instncia
tente criar um artigo e entre a URL
anexada a um artigo nos preenchimentos
voc
http://meteor.com . Como essa URL j est
pode ver
151/261
1/8/2015
Triggeringanerror
LimpandoErros
Agora voc
pode ter tentando clicar no boto de fechar do error
de ver o erro desaparecer
pgina
Se voc
o fez
apenas para logo mais ele reaparecer quando voc
voc
gostaria
ler uma nova
O que est acontecendo
O boto de fechar dispara o JavaScript embutido do Twitter Bootstrap
com o Meteor
error do DOM
Ento o que est acontecendo
mas no d coleo Meteor
assim que o Meteor re rendezirar a pgina
Ento ao menos que n
no tem nada a ver
que o Bootstrap est removendo o
<div>
do
O que significa dizer que o error continuar a voltar
s quisermos que os erros incessantemente voltem dos mortos para nos
lembrar de erros passados do usurio e lentamente lev los insanidade no processo
melhor n
Primeiro
s adicionarmos uma forma de remover os erros da coleo
s modificaremos a funo
throwError
til mais tarde para sabermos se um error foi de fato visto pelo usurio
,
n
s podemos condificar uma simples funo
para incluir a propriedade
Uma vez feito
tamb
seen . Isto ser
clearErrors
que limpa esses
152/261
1/8/2015
erros
seen

Errors = new Meteor.Collection(null);
throwError = function(message) {
Errors.insert({message: message, seen: false})
}
clearErrors = function() {
Errors.remove({seen: true});
}
Em seguida
s limparemos os erros no roteador para ao se navegar para outra pgina n
garantirmos que esses erros desapaream para sempre
// ...
Router.before(requireLogin, {only: 'postSubmit'})
Router.before(function() { clearErrors() });
lib router js
clearErrors()
Para nossa funo
Para fazer isso devidamente
funcionar
os erros precisam ser marcados como
h um caso fronteirio que n
s precisamos resolver
lanamos um erro e ento redirecionamos o usurio para outro lugar
),
quando eles tentam enviar um link duplicado
instantaneamente
ser limpo
quando n
como n
s fazemos
o redirecionamento acontece
Isso significa que o usurio nunca tem a chance de ver o erro antes de este
que nossa propriedade
para
seen .
true
seen
ser
.
til
s precisamos assegurar que ela s
modificada
se o usurio de fato ter visto o erro
Para conseguir isso
executar seu callback
s usaremos o
logo depois
Meteor.defer() . Esta funo diz ao Meteor para

do que quer que esteja acontecendo
Se ajudar
voc
pode
153/261
1/8/2015
considerar que
defer() como dizer ao navegador para esperar 1 milissegundo antes de
continuar
O que n
s estamos fazendo
ap
s o template
errors
Isto
como
ter sido renderizado
redirecionamento ocorre instataneamente
antes da callback
seen
dizer ao Meteor para modificar
para
Mas lembre se como n
true 1 milissegundo
s dissemos que o
Isto significa que o redirecionamento ocorrer
defer , a qual nunca ter uma chance de ser executada.
exatamente o que n
s queremos
se no for executada nosso error no ser marcado
visto , o que significa que no ser limpo, o que significa que aparecer na pgina para
qual nosso usurio for redirecionado assim como quer amos
Template.errors.helpers({
return Errors.find();
}
});
Template.error.rendered = function() {
var error = this.data;
Meteor.defer(function() {
Errors.update(error._id, {$set: {seen: true}});
});
};
client views includes errors js
Commit93
Monitor which errors have been seen
Ver no GitHub
rendered
O callback
navegador
and clear on routing
Lanar Instncia
dispara uma vez que o nosso template ter sido renderizado no
, this
Dentro do callback
se refere instncia atual do template
this.data
nos permite acessar a informao do objeto que est atualmente sendo renderizado
caso
).
no nosso
um erro
154/261
1/8/2015
Whew
Isto
um monte de trabalho para algo que os usurios felizmente nunca vero
Ocallback rendered
rendered
O callback
Isto
claro
do template dispara toda vez que
inclui a primeira vez que ele aparece na tela
que o callback tamb
renderizado no navegador
mas
m disparar toda vez que o template
toda vez que qualquer de suas informa
importante lembrar
re renderizado
es mudar
Callbacks rendered normalmente dispararo ao menos duas vezes
o aplicativo ler pela primeira vez
coleo tiver sido lida
Ento voc
deveria ser disparado duas vezes
rastreamento de eventos
vulgo
primeiro quando
e uma segunda vez quando a informao da
deve ter cuidado ao por qualquer c
tais como um alert
digo que no
ou c
digos de anlise para
neles
155/261
1/8/2015
CriandoumPacoteMeteorite
9.5
SIDEBAR
s constru mos um padro re utilizvel com o nosso trabalho com erros
envov
ento porque no
lo num pacote inteligente e compartilh lo com o resto da comunidade Meteor
Primeiro n
s precisamos criar alguma estrutura para o nosso pacote residir
pacote num diret
symlinks no diret
rio
s pomos o
Voc
pode ter notado que o Meteorite instala pacotes atrav
s de
packages/ .
Segundo
packages/errors . Isto cria um pacote personalizado que
rio chamado
automaticamente utilizado
s criaremos
pacote deve ser utilizado
package.js
nessa pasta
o arquivo que informa ao Meteor como o
e os s mbolos que ele exporta
Package.describe({
summary: "A pattern to display application errors to the user"
});
Package.on_use(function (api, where) {
api.use(['minimongo', 'mongo-livedata', 'templating'], 'client');
api.add_files(['errors.js', 'errors_list.html', 'errors_list.js'], 'client
');
if (api.export)
api.export('Errors');
});
packages errors package js
Vamos adicionar tr
s arquivos ao pacote
s podemos puxar esses arquivos do Microscopoe
sem muita mudana exceto por algum namespacing apropriado e uma API ligeiramente mais
limpa
156/261
1/8/2015
Errors = {
collection: new Meteor.Collection(null),
};
throw: function(message) {
Errors.collection.insert({message: message, seen: false})
},
clearSeen: function() {
Errors.collection.remove({seen: true});
}
packages errors errors js
<template name="meteorErrors">
{{#each errors}}
{{> meteorError}}
{{/each}}
</template>
<template name="meteorError">
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button
>
{{message}}
</div>
</template>
packages errors errors
list html
Template.meteorErrors.helpers({
return Errors.collection.find();
}
});
Template.meteorError.rendered = function() {
var error = this.data;
Errors.collection.update(error._id, {$set: {seen: true}});
});
};
157/261
1/8/2015
list js
TestandoopacotecomMicroscope
Agora n
s testaremos as coisas localmente com Microscope para assegurar que o nosso
digo modificado funcione
Para ligar o pacote ao nosso projeto
s rodamos
meteor add
errors . Ento, ns precisamos deletar os arquivos existentes que se tornaram redudantes
devido ao novo pacote
$ rm client/helpers/errors.js
$ rm client/views/includes/errors.html
$ rm client/views/includes/errors.js
removing old files on the bash console
Uma outra coisa que n
s precisamos fazer
algumas pequenas atualiza
es para utilizar a API
correta
Router.before(function() { Errors.clearSeen(); });
lib router js
{{> header}}
{{> meteorErrors}}

if (error) {
Errors.throw(error.reason);
/ _
submit js
158/261
1/8/2015
Posts.update(currentPostId, {$set: postProperties}, function(error) {

if (error) {
Errors.throw(error.reason);
/ _
edit js
Commit951
Created basic errors package and linked it in
Ver no GitHub
Uma vez que essas mudanas forem feitas
pr
Lanar Instncia
pacote de volta
s devemos ter nosso comportamento original
Escrevendotestes
O primeiro passo em desenvolver um pacote
test lo num aplicativo
mas o pr
ximo
escrever um grupo de teste que testa propriamente o comportamento do pacote
si vem com Tinytest
pacote nativo de testagem
),
O Meteor em
que torna fcil rodar tais testes e manter a
paz espiritual ao compartilhar nosso pacote com outros
Vamos criar um arquivo de teste que usa Tinytest para rodar alguns testes contra a nossa base
de c
digo para errors
159/261
1/8/2015
Tinytest.add("Errors collection works", function(test) {

test.equal(Errors.collection.find({}).count(), 0);
Errors.throw('A new error!');
Errors.collection.remove({});
});
Tinytest.addAsync("Errors template works", function(test, done) {
Errors.throw('A new error!');
test.equal(Errors.collection.find({seen: false}).count(), 1);
// render the template

OnscreenDiv(Spark.render(function() {
return Template.meteorErrors();
}));
// wait a few milliseconds
Meteor.setTimeout(function() {
test.equal(Errors.collection.find({seen: false}).count(), 0);
Errors.clearSeen();
test.equal(Errors.collection.find({seen: true}).count(), 0);
done();
}, 500);
});
Nesses testes n
funcionando
tests js
s estamos checando se as fun
assim como checando duas vezes que o c
est funcionando
digo
rendered
esto
no template ainda
Meteor.Errors
es bsicas de
s no cobriremos as especificidades de se escrever testes para pacotes Meteor aqui
),
a API no est finalizada e sim em alto fluxo
mas felizmente
j que
bem auto explicativo como
funciona
Para dizer ao Meteor como rodar os teste em
package.js , use o cdigo seguinte:
160/261
1/8/2015
Package.on_test(function(api) {
api.use('errors', 'client');
api.use(['tinytest', 'test-helpers'], 'client');
api.add_files('errors_tests.js', 'client');
});
packages errors package js
Commit952
Added tests to the package
Ver no GitHub
Ento n
s podemos rodar os testes com
Lanar Instncia
$ meteor test-packages errors
Terminal
161/261
1/8/2015
Passingalltests
Lanandoopacote
Agora
s queremos lanar o pacote e torn lo dispon vel para o mundo
s fazemos isso
pondo o em Atmosphere
Primeiro
s precisamos adicionar um
smart.json , para dizer ao Meteorite e Atmosphere os
detalhes importantes do pacote
"name": "errors",
"description": "A pattern to display application errors to the user",
"homepage": "https://github.com/tmeasday/meteor-errors",
"author": "Tom Coleman <tom@thesnail.org>",
"version": "0.1.0",
"git": "https://github.com/tmeasday/meteor-errors.git",
"packages": {
}
packages errors smart json
Commit953
Added a smart json
Ver no GitHub
Lanar Instncia
s pomos alguma meta informao bsica para prover informao sobre o pacote
o que ele faz
a localizao git onde n
"pacotes"
e um n
para informar as depend
Uma vez que tudo isto esteja no lugar
lanar
ncias
s tamb
mero inicial de verso
Se
m podemos utilizar o
fcil
empurrar a um servidor git remote em algum lugar
s vamos hosped lo
nosso pacote necessita de outros pacotes Atmosphere
segmento
incluindo
s precisaremos criar um reposit
rio git
e linkar para essa localizao no nosso
162/261
1/8/2015
smart.json .
O processo de fazer isso para o GitHub
prtica padro para pegar o c
mrt release
comando
$ git
$ git
$ git
$ git
$ git
$ mrt
Done!
Terminal
Note
primeiro criar um novo reposit
digo do pacote de dentro do reposit
.
rio
,
rio
ento seguir a
Ento
,
n
s usamos o
para public lo
init
add -A
commit -m "Created Errors Package"
remote add origin https://github.com/tmeasday/meteor-errors.git
push origin master
release .
run from within
`)
packages errors
nome de pacotes devem ser
mesmo nome de pacote
nicos
Voc
ento voc
No futuro a Atmosphere
pode esperar que isso mude
//
- -
est seguindo palavra por palavra e usar o
precisar logar em http
senha com os quais voc
haver um conflito e no funcionar
separar os pacotes com nome de autor
Outra coisa
Se voc
atmosphere meteor com e criar um username e
entrar na linha de comando quando voc
Agora que o pacote foi lanado
chamar
mrt release . .
s podemos delet lo do nosso projeto e ento adicion lo
de volta diretamente usando Meteorite
$ rm -r packages/errors
$ mrt add errors
Terminal
run from the top level of the app
163/261
1/8/2015
Commit954
Removed package from development tree
Ver no GitHub
Agora n
Parab
Lanar Instncia
s devemos ver o Meteorite fazer download do nosso pacote pela primeira vez
ns
164/261
1/8/2015
Comentrios
10
A meta de um site social de not cias
criar uma comunidade de usurios
sem providenciar uma forma para as pessoas conversarem entre si
e ser dif cil faz
la
Ento neste cap tulo
vamos adicionar comentrios
s comearemos criando uma nova coleo para armazenar comentrios
e adicionando
alguma informao de exemplos bsica na coleo
Comments = new Meteor.Collection('comments');
collections comments js
// Fixture data
var now = new Date().getTime();
// create two users
var tomId = Meteor.users.insert({
profile: { name: 'Tom Coleman' }
});
var tom = Meteor.users.findOne(tomId);
var sachaId = Meteor.users.insert({
profile: { name: 'Sacha Greif' }
});
var sacha = Meteor.users.findOne(sachaId);
var telescopeId = Posts.insert({
userId: sacha._id,
author: sacha.profile.name,
url: 'http://sachagreif.com/introducing-telescope/',
submitted: now - 7 * 3600 * 1000
});
Comments.insert({
postId: telescopeId,
userId: tom._id,
author: tom.profile.name,
submitted: now - 5 * 3600 * 1000,
body: 'Interesting project Sacha, can I get involved?'
165/261
1/8/2015
});
Comments.insert({
userId: sacha._id,
submitted: now - 3 * 3600 * 1000,
body: 'You sure can Tom!'
});
Posts.insert({
title: 'Meteor',
userId: tom._id,
url: 'http://meteor.com',
submitted: now - 10 * 3600 * 1000
});
Posts.insert({
userId: tom._id,
url: 'http://themeteorbook.com',
submitted: now - 12 * 3600 * 1000
});
server fixtures js
No vamos nos esquecer de publicar e fazer assinatura nossa nova coleo
});
Meteor.publish('comments', function() {
return Comments.find();
});
166/261
1/8/2015
Router.configure({
waitOn: function() {
return [Meteor.subscribe('posts'), Meteor.subscribe('comments')];
}
});
lib router js
Commit101
Added comments collection
Ver no GitHub
Note que para ativar este c
o banco de dados
novo
s limpar
s criamos alguns usurios
dados e usando seus
id
voc
precisar usar
),
completamente falsos
com
,
m
s para selecion los no banco de dados mais tarde
postId , e ao usurio
com
envio e um corpo a cada comentrio
Tamb
para limpar
inserindo os no banco de
adicionamos um comentrio para cada usurio no primeiro artigo
artigo
meteor reset
no esquea de criar uma nova conta de usurio para logar de
Primeiro
Lanar Instncia
digo de exemplos
Ap
pub sub and fixtures
Ento n
ligando o comentrio ao
userId . Ns tambm adicionamos uma data de
junto com
author , um campo desnormalizado.
s melhoramos nosso roteador para esperar tanto os comentrios quanto os
artigos
Mostrandocomentrios
Est tudo certo em por comentrios no banco de dados
los na page de discusso
uma id
mas n
s tamb
m precisamos mostr
Felizmente este processo deve ser familiar a voc
agora
e voc
tem
ia dos passos envolvidos
167/261
1/8/2015
{{> postItem}}
<ul class="comments">
{{#each comments}}
{{> comment}}
{{/each}}
</ul>
</template>
/ _
page html
Template.postPage.helpers({
comments: function() {
return Comments.find({postId: this._id});
}
});
/ _
s pomos o bloco
page js
{{#each comments}}
artigo dentro do ajudante
linear
s do atributo
this um
postId .
s aprendemos sobre ajudantes e handlebars
.
N
ento
comments . Para encontrar comentrios relevantes, ns checamos
aqueles que esto ligados ao post atrav
Dado que n
dentro do template do artigo
s criaremos um novo diret
rio
comments
renderizar um comentrio
dentro de
views
bem
para armazenar toda
nossa informao de comentrio
<template name="comment">
<li>
<h4>
<span class="author">{{author}}</span>
<span class="date">on {{submittedText}}</span>
</h4>
<p>{{body}}</p>
</li>
</template>
client views comments comment html
168/261
1/8/2015
Vamos configurar um simples ajudante de template para formatar nossa informao
submitted
para um formato leg vel por humanos
pessoas que conseguem entender c
?)
a menos que voc
seja uma daquelas
digos de UNIX timestamps e cores hexadecimais
fluentemente
Template.comment.helpers({
submittedText: function() {
return new Date(this.submitted).toString();
}
});
client views comments comment js
Ento
s mostraremos o n
mero de comentrios de cada artigo
<div class="post">
<p>
submitted by {{author}},
<a href="{{pathFor 'postPage'}}">{{commentsCount}} comments</a>
</p>
</div>
</div>
</template>
/ _
item html
E adicionaremos o ajudante
commentsCount
ao nosso administrador
postItem :
169/261
1/8/2015
return this.userId == Meteor.userId();
},
a.href = this.url;
return a.hostname;
},
commentsCount: function() {
return Comments.find({postId: this._id}).count();
}
});
/ _
item js
Commit102
Display comments on
Ver no GitHub
`.
postPage
Lanar Instncia
s devemos ser capazes de mostrar nossos comentrios de exemplo e ver algo assim
170/261
1/8/2015
Displayingcomments
EnviandoComentrios
Vamos adicionar uma forma dos nossos usurios criarem comentrios
O processo que
seguiremos ser bem similar ao como n
s criamos usurios para criar novos artigos
s comearemos por adicionar uma caixa de envio no fim de cada artigo
{{> postItem}}
<ul class="comments">
{{#each comments}}
{{> comment}}
{{/each}}
</ul>
{{#if currentUser}}
{{> commentSubmit}}
{{else}}
<p>Please log in to leave a comment.</p>
{{/if}}
</template>
/ _
page html
E ento criar um template de formulrio de comentrio
171/261
1/8/2015
<template name="commentSubmit">
<form name="comment" class="comment-form">
<label for="body">Comment on this post</label>
<textarea name="body"></textarea>
</div>
</div>
<button type="submit" class="btn">Add Comment</button>
</div>
</div>
</form>
</template>
client views comments comment
submit html
Thecommentsubmitform
Para enviar nossos comentrios
commentSubmit
s chamamos um M
todo
comment
que opera de uma forma similar ao administrador
no administrador
postSubmit :
172/261
1/8/2015
Template.commentSubmit.events({
'submit form': function(e, template) {
e.preventDefault();
var $body = $(e.target).find('[name=body]');
var comment = {
body: $body.val(),
postId: template.data._id
};
}
});
Meteor.call('comment', comment, function(error, commentId) {

if (error){
throwError(error.reason);
} else {
$body.val('');
}
});
client views comments comment
submit js
Assim como n
configuraremos um M
leg timo
s previamente configuramos um M
todo Meteor
comment
todo
post
do lado do servidor
para criar nossos comentrios
,
n
cheque que tudo
e finalmente insira o novo comentrio na coleo de comentrios
173/261
1/8/2015

Meteor.methods({
comment: function(commentAttributes) {
var user = Meteor.user();
var post = Posts.findOne(commentAttributes.postId);
if (!user)
throw new Meteor.Error(401, "You need to login to make comments");
if (!commentAttributes.body)
throw new Meteor.Error(422, 'Please write some content');
if (!post)
throw new Meteor.Error(422, 'You must comment on a post');
comment = _.extend(_.pick(commentAttributes, 'postId', 'body'), {
userId: user._id,
});
}
});
return Comments.insert(comment);
Commit103
Created a form to submit comments
Ver no GitHub
Isto no est fazendo nada requintado
comentrio tem um corpo
Lanar Instncia
apenas checando se o usurio est logado
que o
e que esteja ligado a um artigo
ControlandoaAssinaturadosComentrios
Como as coisas esto
s estamos publicando todos comentrios de todos os artigos para
todos os clientes conectados
Isso
um desperd cio
J que
s estamos apenas utilizando
174/261
1/8/2015
um pequeno subconjunto da informao a qualquer momento que for
Vamos melhorar nossa
publicao e assinatura para controlar exatamente quais comentrios so publicados
Se n
s pensarmos sobre isso
publicao dos nossos
nico momento que n
s precisamos fazer a assinatura para a
comments quando o usurio acessa a pgina individual do artigo, e
s precisamos apenas ler um subconjunto dos comentrios relacionados a este artigo em
particular
O primeiro passo ser mudar a forma como n
agora
s fazemos a assinatura para os comentrios
s temos feito a assinatura no n vel do roteador
nossa informao quando o roteador
o que significa que n
s lemos toda
inicializado
Mas n
s agora queremos que a nossa assinatura dependa de um parmetro path
parmetro pode obviamente mudar a qualquer momento
nosso c
At
Ento n
e esse
s precisaremos mover
digo de assinatura do n vel do roteador para o n vel da rota
Isto tem outra conseq
ncia
ao inv
s de ler nossa informao quando n
nosso aplicativo
que voc
s agora a leremos toda vez que n
s inicializamos
s alcanamos nossa rota
Isto significa
agora ter momentos de loading enquanto navega dentro do aplicativo
vagamente negativo a no ser que voc
um ponto
queira ler de vez o seu conjunto de informao todo
para sempre
Assim que a nossa nova funo
waitOn
ao n vel da rota se parece
175/261
1/8/2015
//...
return Meteor.subscribe('comments', this.params._id);
},
});
//...
});
lib router js
Voc
perceber que n
assinatura
s estamos passando
this.params._id
como um argumento
Ento usamos essa nova informao para garantir que n
s restrinjamos nosso
conjunto de informao aos comentrio pertencentes ao artigo atual
});
Meteor.publish('comments', function(postId) {
return Comments.find({postId: postId});
});
Commit104
Made a simple publication subscription for comments
Ver no GitHub
H apenas um problema
quando n
Lanar Instncia
s retornamos pgina inicial
ela diz que todos nossos
176/261
1/8/2015
artigos tem
comentrios
Ourcommentsaregone!
ContandoComentrios
A razo para isto ficar logo clara
do artigo lido
ajudante
ento quando n
commentsCount
:
n
s apenas temos no mximo um dos nossos comentrios
s chamamos
no administrador
Comments.find({postId: this._id})
no
post_item , Meteor no consegue encontrar a
informao necessria do lado do cliente para nos prover um resultado
A melhor maneira para lidar com isto
voc
desnormalizar o n
no est certo do que isso significa no se preocupe
!).
isso
Como veremos
mero de comentrios do artigo
a pr
se
xima barra lateral cobrir
h uma pequena adio de complexidade no nosso c
de performance que n
digo
o benef cio
s ganhamos de no ter que publicar todos comentrios para mostrar a
lista de artigos vale a pena
s conseguiremos isso ao adicionar uma propriedade
estrutura do
reset
post.
los
informao de
Para comear
para rel
commentsCount
s atualizamos nossos exemplos de artigo
no esquea de recriar sua conta de usurio depois
):
meteor
177/261
1/8/2015

..
commentsCount: 2
});
Posts.insert({
title: 'Meteor',
...
commentsCount: 0
});
Posts.insert({
...
commentsCount: 0
});
server fixtures js
Ento
s garantimos que todos novos artigos comecem com
comentrio

userId: user._id,
submitted: new Date().getTime(),
commentsCount: 0
});
E ento n
s atualizamos o
commentsCount
comentrio usando o operador Mongo
relevante quando n
$inc
s fazemos um novo
o qual incrementa o campo num
rico por um
):
178/261
1/8/2015
// update the post with the number of comments

Posts.update(comment.postId, {$inc: {commentsCount: 1}});
return Comments.insert(comment);
Finalmente
s podemos apenas remover o ajudante
commentsCount
do
client/views/posts/post_item.js , j que o campo est agora diretamente disponvel no
nosso artigo
Commit105
Denormalized the number of comments into the post
Ver no GitHub
Lanar Instncia
Agora que nossos usurios podem conversar entre si
dos novos comentrios
notifica
E sabe mais
o pr
seria uma pena se eles no soubessem
ximo cap tulo mostrar a voc
como implementar
es para previnir exatamente isto
179/261
1/8/2015
Desnormalizao
10.5
SIDEBAR
Desnormalizar a informao significa no armazen la de forma
palavras
desnormalizao significa ter m
ltiplas c
normal
Em outras
pias do mesmo pedao de informao por
No
ltimo cap tulo
s desnormalizamos a contagem do n
mero de comentrios no objeto
post para evitar ter de ler todos os comentrios o tempo todo
informao isto
redundante
j que n
Num sentido de modelagem da
s pod amos apenas contar o conjunto correto de
comentrio a qualquer momento para descobrir o valor
).
deixando de lado considera
es
quanto performance
Desnormalizao geralmente significa trabalho extra para o desenvolvedor
exemplo
cada vez que n
s adicionamos ou removemos um comentrio n
No nosso
s tamb
precisamos nos lembrar de atualizar o artigo relevante para assegurar que o campo
commentsCount
continue correto
Isto
exatamente o porqu
de bancos de dados relacionais
como MySQL franzirem as sobrancelhas para isto tipo de procedimento
Entretanto
o procedimento normal tamb
m tem suas desvantagens
commentsCount , ns precisaramos mandar
apenas para sermos capazes de cont los
sem uma propriedade
todos os comentrios pela fiao todas as vezes
o que era o que estvamos fazendo no in cio
Desnormalizar nos permite evitar isso completamente
UmaPublicaoEspecial
Seria poss vel criar uma publicao especial que enviaria apenas a contagem de
comentrios que n
artigos que n
Mas
s estamos interessados
s atualmente vemos
atrav
vulgo a contagem de comentrios de
).
s de consultas agregadas no servidor
vlido considerar se a complexidade de tal c
digo de publicao no pesa mais
que as dificuldades criadas por desnormalizar
180/261
1/8/2015
Claro
tais considera
digo onde a integridade da informao
na informao
es devem ser espec ficas ao aplicativo
se voc
de suma importncia
est escrevendo um
ento evitar inconsist
bem mais importante e de uma ordem de prioridade maior para voc
ncias
do que
ganhos de performance
EmbutindoDocumentosouCriandoColeesMltiplas
Se voc
experiente em Mongo
voc
pode ter se surpreendido ao ver que n
segunda coleo apenas para os comentrios
por que no apenas imbut
s criamos uma
los numa lista
dentro do documento artigo
A questo
que vrias das ferramentas que o Meteor d funcionam bem melhor quando se
opera ao n vel da coleo
1.
O ajudante
de
Por exemplo
{{#each}} bem eficiente quando interando sobre um cursor
o resultado
collection.find() . O mesmo verdadeiro quando ele intera sobre um array de
objetos dentro de um documento maior
2. allow
deny
operam no n vel do documento
qualquer modifica
e ento torna mais fcil assegurar que
es em comentrios individuais esto corretas de uma forma que
seria mais complexa se n
3.
s operassemos no n vel do artigo
DDP opera ao n vel de atributos de n vel superior do documento
comments
no artigo
fosse uma propriedade do
isto significa se
post , cada vez que um comentrio fosse criado
o servidor enviaria a lista de comentrios inteira atualizada do artigo para
cada cliente conectado
4.
Publica
es e assinaturas so bem mais fceis de controlar no n vel dos documentos
Por exemplo
se n
s quisermos paginar os comentrios do artigo seria dif cil a no ser
que os comentrios estivessem em sua pr
pria coleo
Mongo sugere documentos embutidos para reduzir o n
pegar documentos
Entretanto
arquitetura do Meteor
cliente
isto no
tanto a questo quando se leva em considerao a
a maior parte do tempo n
onde o acesso ao banco de dados
mero de consultas despendiosas para
s estamos consultando comentrios no
essencialmente livre
181/261
1/8/2015
AsDesvantagensdaDesnormalizao
H um bom argumento a ser feito sobre porque no devemos desnormalizar nossa
informao
Para uma boa olhada sobre o caso contra a desnormalizao
recomendamos Why You Should Never Use MongoDB por Sarah Mei
182/261
1/8/2015
Notificaes
11
Agora que os usurios possam comentar nos artigos uns dos outros
seria bom permit
los
saber que uma conversa comeou
Para tanto
s notificaremos o dono do artigo de que houve um comentrio em seu artigo
providenciaremos um link para eles verem esse comentrio
Este
o tipo de utilidade onde o Meteor realmente brilha
padro
s mostraremos essas notifica
por o Meteor ser em tempo real por
es instantaneamente
s no precisamos esperar o
usurio atualizar a pgina ou checar manualmente
novas notifica
es sem precisar escrever nenhum c
s podemos simplesmente pipocar
digo especial
Criandonotificaes
s criaremos uma notificao quando algu
notifica
m comenta nos seus artigos
es podero ser estendidas para cobrir muitos outros cenrios
No futuro
mas por hora isso
seria o suficiente para manter os usurios informados do que est acontecendo
Vamos criar nossa coleo
Notifications , assim como uma funo
createCommentNotification
que inserir uma notificao correspondente a cada novo
comentrio em um de seus artigos
183/261
1/8/2015
Notifications = new Meteor.Collection('notifications');

Notifications.allow({
update: ownsDocument
});
createCommentNotification = function(comment) {
var post = Posts.findOne(comment.postId);
if (comment.userId !== post.userId) {
Notifications.insert({
userId: post.userId,
postId: post._id,
commentId: comment._id,
commenterName: comment.author,
read: false
});
}
};
collections notifications js
Assim como artigos e comentrios
pelo cliente quanto pelo servidor
que o usurio j as viu
que n
s tamb
s restrinjamos as permiss
Notifications
ser compartilhada tanto
J que n
s precisamos atualizar as notifica
m disponibilizamos atualiza
,
es
es uma vez
garantindo como sempre
es de atualizao pr
pria informao do usurio
s tamb
m criamos uma simples funo que olha para o artigo que o usurio est
comentando
descobre quem deve ser notificado a partir da
esta coleo
s j estamos criando comentrios com um M
todo do lado do servidor
apenas melhorar este M
_id
todo para chamar a nossa funo
Comments.insert(comment);
por
do rec
e insere uma nova notificao
ento n
s trocaremos
return
comment._id = Comments.insert(comment)
m criado comentrio em uma varivel
s podemos
para salvar a
ento chamamos nossa funo
createCommentNotification :
184/261
1/8/2015

Meteor.methods({
comment: function(commentAttributes) {
// [...]
// create the comment, save the id
comment._id = Comments.insert(comment);
// now create a notification, informing the user that there's been a com
ment
createCommentNotification(comment);
return comment._id;
}
});
Vamos tamb
m publicar as notifica
es
e fazer assinatura no cliente
// [...]
Meteor.publish('notifications', function() {
return Notifications.find();
});
Router.configure({
return [Meteor.subscribe('posts'), Meteor.subscribe('notifications')]
}
});
lib router js
185/261
1/8/2015
Commit111
Added basic notifications collection
Ver no GitHub
Lanar Instncia
MostrandoNotificaes
Agora n
s podemos ir em frente e adicionar uma lista de notifica
es ao cabealho
lapse">
</a>
<ul class="nav">
{{#if currentUser}}
<li>
<a href="{{pathFor 'postSubmit'}}">Submit Post</a>
</li>
<li class="dropdown">
{{> notifications}}
</li>
{{/if}}
</ul>
</ul>
</div>
</div>
</header>
</template>
E criar os templates
notifications
notification
eles compartilharo um mesmo
186/261
1/8/2015
arquivo
notifications.html :
<template name="notifications">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Notifications
{{#if notificationCount}}
<span class="badge badge-inverse">{{notificationCount}}</span>
{{/if}}
<b class="caret"></b>
</a>
<ul class="notification dropdown-menu">
{{#if notificationCount}}
{{#each notifications}}
{{> notification}}
{{/each}}
{{else}}
<li><span>No Notifications</span></li>
{{/if}}
</ul>
</template>
<template name="notification">
<li>
<a href="{{notificationPostPath}}">
<strong>{{commenterName}}</strong> commented on your post
</a>
</li>
</template>
client views notifications notifications html
s podemos ver que o plano
comentado
que cada notificao contenha um link para o artigo que foi
e o nome do usurio que comentou
Em seguida
s precisamos ter certeza que n
nosso administrador
e atualizamos as notifica
s selecionamos a lista certa de notifica
es como
lidas
es no
quando o usurio clica no
link para onde elas apontam
187/261
1/8/2015
Template.notifications.helpers({
notifications: function() {
return Notifications.find({userId: Meteor.userId(), read: false});
},
notificationCount: function(){
return Notifications.find({userId: Meteor.userId(), read: false}).count(
);
}
});
Template.notification.helpers({
notificationPostPath: function() {
return Router.routes.postPage.path({_id: this.postId});
}
})
Template.notification.events({
'click a': function() {
Notifications.update(this._id, {$set: {read: true}});
}
})
client views notifications notifications js
Commit112
Display notifications in the header
Ver no GitHub
Voc
pode pensar que notifica
estrutura deles
bem similar
lado do cliente sincronizada
que n
Lanar Instncia
es no so to diferentes de erros
,
e
verdade que a
H uma grande diferena por
Isto significa que nossas notifica
s usemos a mesma conta de usurio
s criamos uma coleo do
es so persistentes e
desde
elas existiro ao longo de atualiza
es do
navegador e diferentes dispositivos
Tente
abra um segundo navegador
comente num artigo que voc
).
Chrome
Voc
),
digamos o Firefox
crie uma nova conta de usurio
criou com sua conta principal
deve ver algo assim
a qual voc
deixou aberta no
188/261
1/8/2015
Displayingnotifications.
Controlandoacessosnotificaes
As notifica
es esto funcionando devidamente
notifica
Se voc
es so p
Entretanto h um pequeno problema
nossas
blicas
ainda tiver seu segundo navegador aberto
tente rodar o c
digo seguinte no console
do navegador
Notifications.find().count();
Browser console
Este novo usurio
aquele que comentou
que eles podem ver na coleo
no deve ter nenhuma notificao
Notifications
As notifica
es
na verdade pertencem ao nosso usurio
original
Pondo de lado quest
es de privacidade em potencial
s simplesmente no podemos ter
189/261
1/8/2015
todas notifica
es de cada usurio sendo lidas no navegador dos outros usurios
grande o suficiente
isso poderia sobrecarregar a mem
a causar s
ria dispon vel do navegador e comear
rios problemas de performance
Num site
s solucionamos essa questo com publica
es
s podemos usar nossas publica
es para
especificar precisamente que parte da nossa coleo n
navegador
s queremos compartilhar com cada
.
,
Para conseguir isso
na nossa publicao
s precisamos retornar um cursor diferente de
Notifications.find()
.
N
s queremos retornar um cursor que corresponda s notifica
es do
usurio logado
Fazer isso
em
bem linear
j que uma funo
publish
tem dispon vel a
_id
do usurio logado
this.userId :
return Notifications.find({userId: this.userId});
});
Commit113
Only sync notifications that are relevant to the user
Ver no GitHub
Agora se n
cole
Lanar Instncia
s checarmos nas nossas duas janelas de navegador
es de notifica
s devemos ver duas
es diferentes
190/261
1/8/2015
Browser console
user
Browser console
Na verdade
aplicativo
user
a lista de Notifica
Isto
usurio muda
es deve at
mudar quando o usurio logar e deslogar do
porque publica
es automaticamente re publicam toda vez que a conta de
Nosso aplicativo est se tornando cada vez mais e mais funcional
se cadastrarem e comearem a postar links n
homepage sem fim
e assim que mais usurios
s correremos o risco de terminar com uma
s checaremos isso no pr
ximo cap tulo ao implementar paginao
191/261
1/8/2015
ReatividadeAvanada
raro voc
mesmo precisar escrever c
til entend
gostaram
digo para rastrear depend
ncias
mas
certamente
s gostar amos de rastrear quantos amigos de Facebook do usurio logado
de cada artigo no Microscope
como autenticar o usurio com Facebook
informao relevante
lo para traar como funciona o caminho do fluxo de resoluo
Imagine que n
11.5
SIDEBAR
Vamos supor que n
fazer as chamadas API apropriadas
.
N
s j resolvemos os detalhes de
e anlise da
s agora temos uma funo ass ncrona do lado do cliente que retorna
, getFacebookLikeCount(user, url, callback) .
o n
mero de likes
A coisa importante a se lembrar sobre tal funo
tempo real
Ela far um pedido HTTP ao Facebook
dispon vel aplicao num callback ass ncrono
contagem mudar no Facebook
que ela
bastante no reativa e no em
trar alguma informao
e a far
mas a funo no re rodar sozinha quando a
e nossa UI no mudar quando a informao subjacente
mudar
Para consertar isso
s podemos comear por usar
setInterval
para chamar nossa funo
a cada alguns segundos
currentLikeCount = 0;
Meteor.setInterval(function() {
var postId;
if (Meteor.user() && postId = Session.get('currentPostId')) {
getFacebookLikeCount(Meteor.user(), Posts.find(postId),
function(err, count) {
if (!err)
currentLikeCount = count;
});
}
}, 5 * 1000);
A qualquer momento que n
s checarmos a varivel
o n
mero correto com uma margem de erro de
currentLikeCount , ns podemos esperar
segundos
s podemos agora usar esta
varivel num ajudante assim
192/261
1/8/2015
Template.postItem.likeCount = function() {
return currentLikeCount;
}
Entretanto
mudar
nada ainda diz ao nosso template para re desenhar quando
currentLikeCount
Apesar da varivel ser agora pseudo em tempo real j que ela muda sozinha
ela no
reativa ento ela ainda no consegue se comunicar devidamente com o resto do ecosistema
do Meteor
RastreandoReatividade:Computaes
A reatividade do Meteor
mediada por depend
ncias
estruturas de informao que rastreiam
um conjunto de computa
es
Como n
do c
s vimos anteriormente na barra lateral reatividade
digo que usa informao reativa
criada implicitamente pelo template
No nosso caso
uma computao
um segmento
h uma computao que est sendo
postItem . Cada ajudante no administrador desse
template est trabalhando dentro da computao
Voc
pode pensar na computao como o segmento de c
informao reativa
via
Quando a informao muda
digo que
se importa
quanto
esta ser a computao que ser informada
invalidate() , e a computao que decide quando algo precisa ser feito.
TransformandoumaVarivelemumaFunoReativa
Para tornar nossa varivel
currentLikeCount
precisamos rastrear todas as computa
es que a utilizam em uma depend
mud la de uma varivel em uma funo
em uma fonte de informao reativa
):
ncia
,
n
Isto requer
que retornar um valor
193/261
1/8/2015
var _currentLikeCount = 0;
var _currentLikeCountListeners = new Deps.Dependency();
currentLikeCount = function() {
_currentLikeCountListeners.depend();
return _currentLikeCount;
}
var postId;
if (Meteor.user() && postId = Session.get('currentPostId')) {
if (!err && count !== _currentLikeCount) {
_currentLikeCount = count;
_currentLikeCountListeners.changed();
}
});
}
}, 5 * 1000);
O que n
s fizemos foi configurar uma depend
rastreia todas as computa
muda
a qual invalida todas as computa
Essas computa
ncia
es dentro das quais
_currentLikeCount
valor de
_currentLikeCountListerners , a qual
currentLinkCount()
s chamamos a funo
es rastreadas
foi utilizada
changed()
Quando o
nesta depend
ncia
.
.
es podem ento ir em frente e lidarem com a mudana caso a caso
caso da computao do template
Neste
parece que o template re desenha a si mesmo
ComputaodeTemplateeControlandooRedesenhar
A razo de porque cada template tem sua pr
pria computao
para controlar a quantidade
de redesenhar que ocorre na tela
Quando n
s chamamos um template de dentro de outro
segunda computao dentro da primeira
interior muda
este template interior
intacto
Desta forma
s estamos estabelecendo uma
Ento quando a informao reativa do template
redesenhado por
m o template exterior continua
computa
es so utilizadas para controlar o escopo das mundanas
reativas
194/261
1/8/2015
O Meteor tamb
m nos d um pouco de ajuda extra para melhorar os mecanismos bsicos de
aninhar templates
Primeiro
{{#constant}}
o ajudante em bloco
qualquer informao que
mata a reatividade dentro de si
colhida pelos ajudantes dentro do bloco
E mesmo que o template exterior seja redesenhado
Isto faz das regi
Ento
apenas usada uma vez
o HTML da rea constante
lado j que seria renderizado de mesma exata forma
deixado de
es constantes uma
grande forma de adminsitrar widgets de terceiros que no esto esperando que o Meteor re
desenhe o DOM sob eles
O segundo utilitrio que pode nos ajudar a controlar a reativiadde
{{#isolate}} , o qual configura uma
palavras
o ajudante em bloco
nova computao dentro de um template
Em outras
tem o mesmo efeito de mover um segmento do template para dentro de um sub
template em termos de reatividade e redesenho
Ento se uma das fontes de informao reativa dentro do bloco isolate mudar
ser re desenhada
mas o remanecescente do template superior no
re desenhar por
a rea isolada ser redesenhada tamb
a rea isolada
Se o template superior
.
m
ComparandoDepsaAngular
Angular
uma biblioteca de renderizao reativa do lado do cliente apenas
pelo bom pessoal do Google
Meteor e do Angular
interessante comparar o modo de rastrear depend
j que os modos so bem diferentes
s vimos que o modelo do Meteor usa blocos de c
computa
ncias quando eles precisam chamar
geralmente quando informao muda
apesar que computa
reativas
fun
es
Essas
que tratam de
invalidate() . Note que apesar que isso
.
es
es usualmente apenas re rodam quando invalidadas
pode configur las para se comportar de qualquer forma que voc
es
a fonte de informao poderia potencialmente decidir
desencadear uma invalidao por outras raz
Ento a fonte de informao explicitamente informa todas as
Adicionalmente
es
ncias do
digos chamados computa
invalid las quando necessrio
voc
es so rastreadas por fontes de informa
suas depend
desenvolvida
quiser
195/261
1/8/2015
Em Angular
a reatividade
mediada pelo objeto
scope . Um escopo pode ser pensado como
um objeto JavaScript comum com alguns m
Quando voc
todos especiais
.
,
quer reativamente depender em um valor em um escopo
scope.$watch , providenciando a expresso que voc est interessado
escopo voc
Ento voc
se importa
voc
chama
vulgo quais partes do
e uma funo ouvinte que rodar cada vez que a expresso mudar
explicitamente afirma exatamente o que voc
quer que seja feito toda vez que o
valor da expresso mudar
Voltando ao nosso exemplo do Facebook
,
n
s escrever amos
$rootScope.$watch('currentLikeCount', function(likeCount) {
console.log('Current like count is ' + likeCount);
});
Claro
assim como voc
$watch
raramente configura computa
explicitamente com freq
{{expressions}}
ncia em Angular pois diretivas
no chama
ng-model
, scope.$apply()
Quando tal valor reativo mudar
cada observador do escopo
deve ento ser chamado
Isto re avalia
mas apenas chama a funo ouvinte dos observadores dos quais
o valor da expresso tenha mudado
scope.$apply() similar a dependency.changed() , exceto por agir no nvel do
escopo
voc
automaticamente configuram watches que ento cuidam de re
renderizarem quando h mudana
Ento
es em Meteor
ao inv
re avaliados
s de lhe dar o controle quanto a dizer precisamente quais ouvintes devem ser
Tendo dito isto
esta leve falta de controle d a Angular a habilidade de ser bem
inteligente e eficiente na forma como ele determina precisamente quais ouvintes precisam ser
re avaliados
.
,
Com Angular
nosso c
digo da funo
getFacebookLikeCount()
se pareceria com algo assim
196/261
1/8/2015
if (!err) {
$rootScope.currentLikeCount = count;
$rootScope.$apply();
}
});
}, 5 * 1000);
Admitidamente
o Meteor toma conta da maior parte do trabalho pesado para n
colher os benef cios da reatividade sem muito trabalho da nossa parte
aprender sobre esses padr
es se mostrar
s e nos deixa
Mas felizmente
til se alguma vez precisarmos levar as coisas mais
adiante
197/261
1/8/2015
Paginao
12
O Microscope est com muito bom aspeto
e podemos esperar uma recepo calorosa quando
este for lanado para o mundo
Assim provavelmente
boa ideia pensar um pouco sobre as implica
es de performance do
mero de artigos novos que vo ser criados no site quando este for lanado
Anteriormente falmos de como uma coleo no lado do cliente deve conter um sub conjunto
dos dados no servidor
e at
conseguimos atingir isto para as nossas cole
es de notifica
es
e comentrios
No entanto
atualmente ainda estamos a publicar todos os artigos de uma vez
utilizadores ligados
problemtico
Eventualmente
Para resolver isto
se milhares de links forem submetidos
para todos os
isto ser
precisamos de paginar os artigos
AdicionandoMaisArtigos
Primeiro
nos nossos dados de teste
faa realmente sentido
vamos carregar artigos suficientes para que a paginao
198/261
1/8/2015
// Fixture data
//...
Posts.insert({
userId: tom._id,
submitted: now - 12 * 3600 * 1000,
commentsCount: 0
});
for (var i = 0; i < 10; i++) {

Posts.insert({
title: 'Test post #' + i,
userId: sacha._id,
url: 'http://google.com/?q=test-' + i,
submitted: now - i * 3600 * 1000,
commentsCount: 0
});
}
server fixtures js
Depois de executar
meteor reset , voc deve obter algo como:
199/261
1/8/2015
Mostrandodadosdeteste.
Commit121
Foram adicionados artigos suficientes para que a pagina
Ver no GitHub
Lanar Instncia
PaginaoInfinita
Vamos implementar uma paginao estilo
que vamos primeiro mostrar
fundo
, 10
por exemplo
Clicar neste link vai adicionar mais
infinito
10
O que queremos dizer por este termo
artigos no ecr
artigos lista
com um link
carregar mais
e por ai adiante ad infinitum
significa que podemos controlar todo o sistema de paginao com um
representa o n
no
Isto
nico parmetro que
mero de artigos a mostrar no ecr
Agora vamos precisar de uma forma de comunicar este parmetro ao servidor para que ele
fique a saber quantos artigos enviar para o cliente
publicao
posts
no roteador
Acontece que j estamos a subscrever
portanto vamos tirar vantagem disto e deixar ser tamb
m o
roteador lidar com a paginao
200/261
1/8/2015
A forma mais fcil de configurar isto
parte do caminho
simplesmente fazendo o parmetro limite de artigos
dando nos URLs na forma
http://localhost:3000/25 . Um bons
adicional de usar o URL comparativamente a outros m
mostrar
ver
25
25
todos
que se estamos atualmente a
artigos e por acaso fazemos refresh ao navegador por engano
vamos continuar a
artigos quando a pgina voltar a carregar
Para fazer isto corretamente
artigos
vamos precisar de alterar a forma como subscrevemos aos
Tal como previamente fizemos no capitulo Comentrios
nosso c
vamos precisar de mover o
digo da subscrio do n vel do roteador para o n vel da rota
Isto tudo pode ser muito para interiorizar de uma vez
Primeiro
vamos parar de subscrever publicao
Basta remover
mas vai ficar mais claro vendo o c
posts
no bloco
digo
Router.configure() .
Meteor.subscribe('posts'), , deixando apenas a subscrio s
notifications :
Router.configure({
return [Meteor.subscribe('notifications')]
}
});
lib router js
Depois vamos adicionar um parmetro
postsLimit
depois do nome do parmetro significa que
combinar com
ao caminho da rota
opcional
Ou seja
Adicionar um
a nossa rota no s
vai
http://localhost:3000/50 , mas tambm com o antigo
http://localhost:3000 .
201/261
1/8/2015
//...
this.route('postsList', {
path: '/:postsLimit?'
});
});
lib router js
importante notar que um caminho na forma
caminhos poss veis
/:parameter?
vai combinar com todos os
Dado que cada rota vai ser analisada sucessivamente para ver se combina
com o caminho atual
temos de garantir que organizamos as nossas rotas por ordem de
especificidade decrescente
Noutras palavras
vir primeiro
rotas que apontem para rotas mais espec ficas como
e a nossa rota
postsList
/posts/:_id
devem
deve ser movida para o fundo do ficheiro dado que
basicamente combina com tudo
Est agora na altura de lidar com o problema dif cil de subscrever e encontrar os dados
corretos
Precisamos de lidar com o caso em que o parmetro
caso em que lhe damos um valor por defeito
brincar com a paginao
Vamos usar
postsLimit
no est presente
para podermos ter espao para
//..
path: '/:postsLimit?',
var postsLimit = parseInt(this.params.postsLimit) || 5;
return Meteor.subscribe('posts', {sort: {submitted: -1}, limit: postsL
imit});
}
});
});
lib router js
202/261
1/8/2015
Vai notar que estamos agora a passar um objecto JavaScript
com o nome da nossa publicao
options
para o c
posts
digo de servidor
).
artigos
({
limit
postsLimit
})
em conjunto
Este objecto vai servir como o parmetro
Posts.find() . Vamos passar para o nosso cdigo de
servidor para implementar isto
Meteor.publish('posts', function(options) {
return Posts.find({}, options);
});
Meteor.publish('comments', function(postId) {
return Comments.find({postId: postId});
});
return Notifications.find({userId: this.userId});
});
203/261
1/8/2015
PassandoParmetros
O nosso c
digo das publica
es est com efeito a dizer ao servidor que este pode
confiar em qualquer objecto JavaScript enviado pelo cliente
postsLimit}
options
para servir como as
da operao de
, {limit:
no nosso caso
find() . Isto torna
poss vel que utilizadores possam submeter qualquer opo que queiram atrav
s da
consola do navegador
No nosso caso
fazer
isto
relativamente segura
dado que tudo o que o utilizador pode
re ordenar artigos de forma diferente
).
ou mudar o limite
que
o que
quer amos fazer em primeiro lugar
No entanto esta abordagem no deve ser usada quando se esto a guardar dados
privados em campos no publicadas
opo
fields
para lhes aceder
argumento do selector do
dado que o utilizador poderia manipular a
e tamb
find()
m se deve evitar usar esta abordagem no
pelas mesmas raz
es de segurana
Uma abordagem mais segura poderia ser passar os parmetros individuais em vez do
objecto todo
para garantir que se tem controlo sobre os seus dados
Meteor.publish('posts', function(sort, limit) {

return Posts.find({}, {sort: sort, limit: limit});
});
Agora que estamos a subscrever ao n vel da rota
dados no mesmo lugar
funo
data
tamb
m faz sentido definir o contexto de
Vamos afastar nos um pouco da nossa abordagem anterior e fazer a
devolver um objecto JavaScript em vez de simplesmente devolver um cursor
Isto permite nos criar um contexto de dados com nome
O que isto significa
dentro do template
a que vamos chamar
posts .
simplesmente que em vez estar implicitamente dispon vel com o
o nosso contexto de dados vai estar dispon vel em
deste pequeno elemento
o c
this
posts . Para alm
digo dever ser familiar
204/261
1/8/2015
var limit = parseInt(this.params.postsLimit) || 5;
return Meteor.subscribe('posts', {sort: {submitted: -1}, limit: limit}
);
},
data: function() {
return {
posts: Posts.find({}, {sort: {submitted: -1}, limit: limit})
};
}
});
//..
});
lib router js
Agora que estamos a definir o contexto de dados ao nivel do roteador podemos com
posts
segurana vermo nos livres do ajudante de template
dentro do ficheiro
posts_list.js . E dado que chammos ao nosso contexto de dados posts
),
do ajudante
nem precisamos de tocar no template
Vamos recapitular
Aqui est como o nosso c
postsList
digo do
router.js
o mesmo nome
novo e melhorado deve
parecer
205/261
1/8/2015
Router.configure({
return [Meteor.subscribe('notifications')]
}
});
//...
);
return Meteor.subscribe('posts', {sort: {submitted: -1}, limit: limit}
},
data: function() {
return {
posts: Posts.find({}, {sort: {submitted: -1}, limit: limit})
};
}
});
});
lib router js
Commit122
Rota postsList melhorada para receber um limite
Ver no GitHub
Lanar Instncia
Vamos experimentar o nosso novo sistema de paginao
Temos agora a habilidade de
mostrar um n
mero arbitrrio de artigos na pgina inicial simplesmente mudando o
parmetro de URL
algo como isto
Por exemplo
experimente aceder a
http://localhost:3000/3 . Deve ver
206/261
1/8/2015
Controlandoonmerodeartigosnapginainicial.
207/261
1/8/2015
Porquenopginas?
Porque
que estamos a usar uma abordagem de
mostrar pginas sucessivas com
resultados de pesquisas
Isto
10
artigos cada
paginao infinita
em vez de
como o Google faz com os
na realidade devido ao paradigma de tempo real
usado por Meteor
Posts
Vamos imaginar que estamos a paginar a nossa coleo de
de resultados paginados do Google
mostra os artigos
10
10 20.
a
usando o formato
e que estamos atualmente na pgina
2,
que
O que acontece se outro utilizador apaga qualquer um dos
artigos anteriores
Dados que a nossa aplicao
O artigo
10
de tempo real
9,
seria agora o artigo
e desapareceria de vista
estaria agora dentro do intervalo
.
11
o nosso conjunto de dados iria mudar
enquanto que o artigo
O resultado final seria que o utilizador de repente
veria os artigos mudar sem razo aparente
Mesmo que tolerssemos este problema de usabilidade
complicada de implementar por motivos t
coleo
paginao tradicional
s publicamos os artigos
10 20
Posts , mas como iriamos encontrar esses artigos no cliente
selecionar os artigos
10 20,
.
at
cnicos
Vamos voltar ao nosso exemplo anterior
dados que existem apenas
10
at
da
No se pode
artigos no total no
conjunto de dados do cliente
Uma soluo simples seria simplesmente publicar esses
depois fazer um
Posts.find()
40.
Temos agora
20
,
.
es
10 20,
at
e a outra pelos artigos
artigos carregados no cliente no total
de saber quais pertencem a qual subscrio
Por todas estas raz
Mas e se comearmos a ter mais
como vai acontecer em breve
Vamos supor que uma subscrio pede os artigos
at
artigos no servidor
no cliente para apanhar todos os artigos publicados
Isto funciona se tivermos apenas uma subscrio
que uma subscrio de artigos
10
30
sem forma nenhuma
paginao tradicional simplesmente no faz muito sentido ao
trabalhar com Meteor
208/261
1/8/2015
CriandoumControladordeRota
var limit =
Pode ter reparado que estamos a repetir a linha
parseInt(this.params.postsLimit) || 5;
coded no
exatamente ideal
seguir o principio DRY
Isto no
duas vezes
ter o n
prio
Controladores de Rota
mero
sempre melhor
se tal for poss vel
hard
Um controlador de
simplesmente uma forma de agrupar caracter sticas de roteamento juntas num pacote
reutilizvel do qual qualquer rota pode herdar
mas dado que
m disso
No se repita a si pr
Vamos introduzir um novo aspeto do Iron Router
rota
Al
o fim do munda
Don t Repeat Yourself
vamos refatorizar as coisas
nica rota
mas vai ver no pr
Neste momento vamos apenas utiliz lo numa
ximo cap tulo como esta caracter stica vai ser
.
til
PostsListController = RouteController.extend({
template: 'postsList',
increment: 5,
limit: function() {
return parseInt(this.params.postsLimit) || this.increment;
},
findOptions: function() {
return {sort: {submitted: -1}, limit: this.limit()};
},
return Meteor.subscribe('posts', this.findOptions());
},
data: function() {
return {posts: Posts.find({}, this.findOptions())};
}
});
//...
controller: PostsListController
});
});
lib router js
209/261
1/8/2015
Vamos passar por cada passo
Primeiro
estamos a criar o nosso controlador estendendo de
RouteController . Depois definimos a propriedade template
limit
Depois definimos uma nova funo
extra
que vai devolver um objecto de op
definimos as nossas fun
ltima coisa a fazer
.
es
e uma funo
Isto pode parecer como um passo
waitOn
es de
data
de
tal como antes
excepto que estas
findOptions .
vo agora usar as nossa nossa funo
Uma
que vai devolver o limite atual
mas vamos fazer uso dele mais tarde
A seguir
increment .
depois uma nova propriedade
findOptions
tal como fizemos antes
dizer rota
postsList
para rotear o nosso controlador novo
com
controller .
a propriedade
Commit123
Rota postsList refatorizada num RouteController
Ver no GitHub
Lanar Instncia
AdicionandoumLinkdeCarregarMais
Temos a paginao a funcionar
e o nosso c
digo tem bom aspeto
Existe s
um problema
no
existe nenhuma forma de de facto usar essa paginao excepto alterando o URL
manualmente
Isto definitivamente no
uma boa experi
ncia de utilizao
portanto vamos
ao trabalho de corrigir isto
O que queremos fazer
bastante simples
fundo da nossa lista de artigos
por
cada vez que
clicado
Vamos adicionar um boto de
que vai aumentar o n
Ou seja
http://localhost:3000/5 , clicar
carregar mais
no
mero de artigos atualmente mostrados
se atualmente estou no URL
carregar mais
deve trazer me para
http://localhost:3000/10 . Se chegou a este ponto no livro, confiamos que pode lidar com
alguma aritm
tica
210/261
1/8/2015
Como dantes
vamos adicionar a nossa l
gica de paginao no roteador
Lembra se quando
demos um nome explicito ao nosso contexto de dados em vez de simplesmente usar um
cursor anonimo
passar cursores
Bem
no existe nenhuma regra que diga que a funo
por isso vamos usar a mesma t
data
pode apenas
cnica para gerar o URL do nosso boto
carregar mais
increment: 5,
limit: function() {
},
return {sort: {submitted: -1}, limit: this.limit()};
},
},
posts: function() {
return Posts.find({}, this.findOptions());
},
data: function() {
var hasMore = this.posts().count() === this.limit();
var nextPath = this.route.path({postsLimit: this.limit() + this.incremen
t});
return {
posts: this.posts(),
nextPath: hasMore ? nextPath : null
};
}
});
lib router js
Vamos olhar mais a fundo para este pedao de magia de roteador
postsList
que vai herdar do controlador
atualmente a trabalhar
Assim quando n
PostsListController
recebe um parmetro
s passamos
no qual estamos
postsLimit .
{postsLimit: this.limit() + this.increment}
this.route.path() , estamos a dizer rota postsList

usando esse objeto JavaScript como contexto de dados
Lembre se que a rota
ao
para construir o seu pr
prio caminho
.
211/261
1/8/2015
Noutras palavras
'postsList'}}
isto
{{pathFor
exatamente o mesmo que usar o ajudante
do Handlebars
excepto que estamos a substituir o
this
impl cito pelo nosso
contexto de dados feito medida
s estamos a usar esse caminho e a adicion lo ao contexto de dados para o nosso template
mas apenas se existirem mais artigos para mostrar
complicada
s sabemos que
mostrar
cont
this.limit()
devolve o n
que pode ou ser o valor no URL atual
algo
mero atual de artigos que gostar amos de
ou o nosso valor por omisso
(5)
se o URL no
m nenhum parmetro
, this.posts
Por outro lado
refere se ao cursor atual
se ao n
por isso
this.posts.count()
refere
mero de artigos que esto atualmente no cursor
O que estamos a dizer aqui
que se pedimos por
continuar a mostrar o boto de
que
A forma como fazemos isto
carregar mais
artigos e recebemos
Mas se pedimos por
de volta
vamos
e recebemos menos
n , ento isto significa que atingimos o limite e que temos de parar de mostrar esse
boto
Tendo dito isto
dados
o nosso sistema falha num caso
exatamente
mero de itens na nossa base de
n . Se isso acontecer, o cliente vai pedir n
volta e continuar a mostrar o boto
Infelizmente
quando o n
carregar mais
artigos e receber
artigos de
no sabendo que no existem mais itens
no existem formas simples de dar a volta a este problema
- -
e por agora vamos
ter de nos contentar com esta implementao menos que perfeita
Tudo o que resta fazer
garantindo que s
adicionar o link de
carregar mais
no funda da nossa lista de artigos
o mostramos se de facto existirem mais artigos para carregar
212/261
1/8/2015
<div class="posts">
{{#each posts}}
{{> postItem}}
{{/each}}
{{#if nextPath}}
<a class="load-more" href="{{nextPath}}">Load more</a>
{{/if}}
</div>
</template>
Isto
list html
como a sua lista de artigos deve parecer agora
Obotodecarregarmais.
()
nextPath
Commit124
foi adicionado ao controlador e
Ver no GitHub
agora usado
Lanar Instncia
213/261
1/8/2015
UmaMelhorBarradeProgresso
A nossa paginao est agora a funcionar perfeitamente
cada vez que carregamos
loading
template de
carregar mais
mas sofre de um problema irritante
e o roteador pede mais artigos
voltamos ao
enquando esperamos que os novos dados cheguem
O resultado
que
de cada vez somos enviados de novo para o topo da pgina e precisamos de fazer scroll at
ao
fundo para poder continuar a nossa navegao
Seria muito
muito melhor se pud
ssemos ficar na mesma pgina durante toda a operao
ao mesmo tempo providenciar algum tipo de indicao de que novos dados esto a ser
carregados
Felizmente
isto
precisamente o que o pacote
De forma semelhante ao Safari de iOS ou a sites como Medium e YouTube
progress
adiciona uma fina barra de carregamento ao topo do ecr
simples como adicionar o pacote sua aplicao
iron-router-progress
faz
, iron-router-
Implementar isto
to
mrt add iron-router-progress
consola bash
Atrav
s da magina dos pacotes inteligentes
perfeitamente ap
s instalar
o nosso novo indicador de progresso funciona
A barra de progresso vai ser ativada para cada rota
automaticamente completar assim que os dados de cada rota terminem de carregar
Vamos fazer apenas um pequeno ajuste
postSubmit
de contas
Vamos desligar
iron-router-progress
para a rota
dado que esta no precisa de esperar por nenhuns dados de subscrio
apenas um formulrio vazio
):
no final
214/261
1/8/2015
//...
path: '/submit',
disableProgress: true
});
});
lib router js
Commit125
Usar o pacote iron router progress para fazer a paginao
Ver no GitHub
Lanar Instncia
AcedendoQualquerArtigo
Estamos atualmente a carregar os
algu
mais recentes por omisso
mas o que acontece quando
m navega para a pgina individual de um artigo
215/261
1/8/2015
Umtemplatevazio
Se tentar
vai ver um template de artigo vazio
subscrever publicao
agora
postsList , mas no lhe dissemos o que
ao carregar a rota
tudo o que sabemos fazer
pedimos ao servidor por um
consigo
subscrever a uma lista do
nico artigo espec fico
n ltimos artigos. Como
Vamos partilhar um pequeno segredo
poss vel ter mais que uma publicao para cada coleo
Ento para obter os nossos artigos em falta de volta
publicao nova
pelo
dissemos ao roteador para
postPage .
fazer com a rota
Mas at
posts
Isto faz sentido
separada
chamada
singlePost
vamos simplesmente fazer uma
que apenas publica um artigo
identificado
_id .
});
Meteor.publish('singlePost', function(id) {
return id && Posts.find(id);
});
Agora
vamos subscrever aos artigos corretos no lado do cliente
publicao
comments
na funo
adicionar a subscrio a
nossa subscrio rota
waitOn
singlePost
ai
da rota
J estamos a subscrever
postPage , por isso podemos simplesmente
E no nos vamos esquecer de tamb
m adicionar a
postEdit , uma vez que esta precisa dos mesmo dados:
216/261
1/8/2015
//...
return [
Meteor.subscribe('singlePost', this.params._id),
Meteor.subscribe('comments', this.params._id)
];
},
});
this.route('postEdit', {
path: '/posts/:_id/edit',
return Meteor.subscribe('singlePost', this.params._id);
},
});
/...
});
lib router js
Commit126
Usar uma subscrio a um
Ver no GitHub
Com a paginao implementada
escalabilidade
nico artigo para garantir que p
Lanar Instncia
a nossa aplicao j no sofre de problemas de
pico do pr
e os utilizadores de certeza vo contribuir com ainda mais links que antes
seria ento bom ter uma forma qualquer de classificar esses links
ximo cap tulo
Votao
Isto
No
precisamente o
217/261
1/8/2015
Votao
13
Agora que o nosso site est ficando mais popular
complicado
O que n
s precisamos
encontrar os melhores links logo se tornar
de algum sistema de votao para ordenar nossos
artigos
s poder amos construir um sistema complexo de votao com karma
pontos baseado em tempo
em Telescope
e muitas outras coisas
).
o irmo mais velho do Microscope
decaimento de
muitas das quais foram implementadas
Mas para o nosso aplicativo
manteremos as coisas simples e apenas avaliaremos os artigos pelo n
,
n
mero de votos que eles
receberam
Vamos comear por dar aos usurios uma forma de votar nos artigos
ModelodeInformao
s armazenaremos a lista de upvoters de cada artigo para que n
o boto upvote para os usurios
s saibamos quando mostrar
assim como prevenir pessoas de votar duas vezes
218/261
1/8/2015
PrivacidadedaInformao&Publicaes
N
s estaremos publicando essas listas de upvoters para todos usurios
o que
tamb
m tornar automaticamente toda essa informao publicamente acess vel
atrav
s do console do navegador
Este
o tipo de problema de privacidade de informao que pode surgir da forma
como as cole
es funcionam
Por exemplo
s queremos que pessoas sejam
capazes de encontrar quem votou em seus artigos
No nosso caso fazer essa
informao publicamente dispon vel no trar qualquer conseq
ncia
mas
importante ao menos reconhecer a questo
Tamb
m note que se n
s quis
ssemos restringir parte desta informao
ter amos de garantir que o cliente no possa burlar as op
publicao
es
fields
seja removendo essa propriedade pelo lado do servidor
,
n
da nossa
ou ao no
passar o objeto options completo do cliente pro servidor
s tamb
m desnormalizaremos o n
recepo dele
Ento n
mero total de upvoters no artigo para tornar mais fcil a
s estaremos adicionando dois atributos aos nossos artigos
votes . Vamos comear por adicion
los ao nosso arquivo de exemplos
, upvoters
// Fixture data
var now = new Date().getTime();
// create two users
var tomId = Meteor.users.insert({
profile: { name: 'Tom Coleman' }
});
var tom = Meteor.users.findOne(tomId);
var sachaId = Meteor.users.insert({
profile: { name: 'Sacha Greif' }
});
var sacha = Meteor.users.findOne(sachaId);
userId: sacha._id,
url: 'http://sachagreif.com/introducing-telescope/',
219/261
1/8/2015
submitted: now - 7 * 3600 * 1000,

commentsCount: 2,
upvoters: [], votes: 0
});
Comments.insert({
userId: tom._id,
submitted: now - 5 * 3600 * 1000,
body: 'Interesting project Sacha, can I get involved?'
});
Comments.insert({
userId: sacha._id,
submitted: now - 3 * 3600 * 1000,
body: 'You sure can Tom!'
});
Posts.insert({
title: 'Meteor',
userId: tom._id,
url: 'http://meteor.com',
submitted: now - 10 * 3600 * 1000,
commentsCount: 0,
});
Posts.insert({
userId: tom._id,
submitted: now - 12 * 3600 * 1000,
commentsCount: 0,
});
for (var i = 0; i < 10; i++) {
Posts.insert({
title: 'Test post #' + i,
userId: sacha._id,
url: 'http://google.com/?q=test-' + i,
submitted: now - i * 3600 * 1000,
commentsCount: 0,
});
220/261
1/8/2015
server fixtures js
Como de costume
pare seu aplicativo
nova conta de usurio
rode
Vamos ento tamb
meteor reset , reinicie seu aplicativo, e crie uma
m garantir que essas duas propriedades sejam
inicializadas quando nossos artigos forem criados
//...
// check that there are no previous posts with the same link
if (postAttributes.url && postWithSameLink) {
throw new Meteor.Error(302,
'This link has already been posted',
postWithSameLink._id);
}
userId: user._id,
submitted: new Date().getTime(),
commentsCount: 0,
upvoters: [],
votes: 0
});
return postId;
//...
ConstruindonossosTemplatesdeVotao
Primeiro
s adicionaremos um boto upvote a nossa parcial artigo
221/261
1/8/2015
<div class="post">
<a href="#" class="upvote btn"></a>
<p>
{{votes}} Votes,
<a href="{{pathFor 'postPage'}}">{{commentsCount}} comments</a>
</p>
</div>
</div>
</template>
/ _
item html
Theupvotebutton
Em seguida
s chamaremos um M
todo upvote do servidor quando o usurio clicar no
boto
222/261
1/8/2015
//...
Template.postItem.events({
'click .upvote': function(e) {
e.preventDefault();
Meteor.call('upvote', this._id);
}
});
/ _
Finalmente
item js
s voltaremos ao nosso arquivo
collections/posts.js
todo Meteor do lado do servidor que ir upvote os artigos
e adicionaremos o
Meteor.methods({
//...
},
upvote: function(postId) {
if (!user)
throw new Meteor.Error(401, "You need to login to upvote");
var post = Posts.findOne(postId);
if (!post)
throw new Meteor.Error(422, 'Post not found');
if (_.include(post.upvoters, user._id))
throw new Meteor.Error(422, 'Already upvoted this post');
}
});
Posts.update(post._id, {
$addToSet: {upvoters: user._id},
$inc: {votes: 1}
});
223/261
1/8/2015
Commit131
Added basic upvoting algorithm
Ver no GitHub
Este M
todo
bem linear
Lanar Instncia
s fazemos algumas verifica
usurio est logado e que o artigo realmente existe
votou neste artigo
es defensivas para assegurar que o
Ento n
s checamos se o usurio j no
e se ele no o tiver feito n
s incrementamos o n
mero total de votos e
adicionamos o usurio a lista de upvoters
Este passo final
interessante
muito mais a se aprender
j que n
s usamos alguns operadores Mongo especiais
mas estes dois so extremamente
tem a uma propriedade array desde que ela j no exista
um campo de inteiro
: $addToSet
teis
$inc
adiciona um
simplesmente incrementa
TruquesnaInterfacedoUsurio
Se o usurio no est logado
refletir isso na nossa UI
classe CSS
disabled
ou j votou num artigo
eles no sero capazes de votar
Para
s usaremos um ajudante para condicionalmente adicionar uma
ao boto upvote
<div class="post">
<a href="#" class="upvote btn {{upvotedClass}}"></a>
//...
</div>
</template>
/ _
item html
224/261
1/8/2015
//...
},
//...
},
upvotedClass: function() {
var userId = Meteor.userId();
if (userId && !_.include(this.upvoters, userId)) {
return 'btn-primary upvotable';
} else {
return 'disabled';
}
}
});
'click .upvotable': function(e) {
e.preventDefault();
Meteor.call('upvote', this._id);
}
});
/ _
item js
s estamos mudando nossa classe de
.upvote
para
.upvotable , ento no se esquea de
mudar o manuseador de evento clique tamb
225/261
1/8/2015
Greyingoutupvotebuttons.
Commit132
Grey out upvote link when not logged in
Ver no GitHub
Em seguida
voc
mas por hora n
already voted
nico voto esto escritos
rico que n
votos
ento
Pluralizao pode ser um processo complicado
s faremos de uma forma razoavelmente simples
Handlebars gen
Lanar Instncia
pode notar que artigos com um
vamos cuidar de pluraliz los corretamente
s podemos usar em qualquer lugar
s faremos um ajudante
Handlebars.registerHelper('pluralize', function(n, thing) {

// fairly stupid pluralizer
if (n === 1) {
return '1 ' + thing;
} else {
return n + ' ' + thing + 's';
}
});
226/261
1/8/2015
client helpers handlebars js
Os ajudantes que n
eles se aplicavam
s criamos antes estavam ligados a um administrador e template ao qual
Mas ao utilizar
Handlebars.registerHelper , ns criamos um ajudante
global que pode ser utilizado dentro de qualquer template
//...
<p>
{{pluralize votes "Vote"}},
<a href="{{pathFor 'postPage'}}">{{pluralize commentsCount "comment"}}</a>
</p>
//...
</template>
/ _
item html
PerfectingProperPluralization(nowsaythat10times)
227/261
1/8/2015
Commit133
Added pluralize helper to format text better
Ver no GitHub
s devemos agora ver
vote
Lanar Instncia
AlgoritmodeVotaomaisinteligente
Nosso c
digo de votao est com uma cara boa
todo upvote
,
n
para atualiz lo
s fazemos duas chamadas ao Mongo
es pertinentes a isso
dados duas vezes
2.
3.
Primeiramente
Por
m ainda mais importante
estamos seguindo o seguinte algoritmo
1.
s ainda podemos fazer melhor
um para pegar o artigo
No
ento outra
H duas quest
mas n
um tanto ineficiente ir ao banco de
isso introduz uma condio de corrida
:
.
Pegar um artigo do banco de dados
Checar se o usurio votou
Caso contrrio
faa um voto pelo usurio
E se o mesmo usurio votasse de novo entre as etapas
1 3
e
para o usurio ser capaz de votar no mesmo artigo duas vezes
ser mais inteligente e combinar as etapas
13
Nosso c
digo atual abre a porta
Felizmente
Mongo nos permite
num simples comando Mongo
228/261
1/8/2015
Meteor.methods({
//...
},
upvote: function(postId) {
if (!user)
throw new Meteor.Error(401, "You need to login to upvote");
}
});
Posts.update({
_id: postId,
upvoters: {$ne: user._id}
}, {
$addToSet: {upvoters: user._id},
$inc: {votes: 1}
});
Commit134
Better upvoting algorithm
Ver no GitHub
O que n
s estamos dizendo
ainda no votou
encontre todos os artigos com este
e atualize os desta forma
encontrar o artigo com essa
nica desvantagem
onde o este usurio
j votou
e consequentemente nada ocorrer
que agora n
j que n
id
Se o usurio no votou ainda
id . Por outro lado se o usurio
encontrar nenhum documento
Lanar Instncia
claro que ele
ento a consulta no
s no podemos dizer ao usurio que ele j votou no artigo
).
s nos livramos da chamada ao banco de dados que checava isso
saber disso pelo o boto
upvote
estar desativado na interface do usurio
Mas eles devem
229/261
1/8/2015
CompensaodeLatncia
Vamos dizer que voc
tentou roubar e enviou um dos seus artigos para o topo da lista
modificando o n
mero de votos
> Posts.update(postId, {$set: {votes: 10000}});

Browser console
onde
postId a id de um seus artigos
Esta tentativa descarada de burlar o sistema seria pega pela nossa callback
em
?)
collections/posts.js , lembra
Mas se voc
olhar cuidadosamente
lat
ncia em ao
Pode ser veloz
voc
deny()
e imediatamente negada
pode ser capaz de ver a compensao de
mas o artigo brevemente saltar para o topo da
lista antes de voltar a sua posio
O que aconteceu
incidente
Na nossa coleo
Posts
Isto ocorre instantaneamente
Enquanto isso
no servidor
update
contado em milissegundos se voc
retornou um error
O resultado final
local
update
foi aplicado sem
ento o artigo disparou para o topo da lista
foi negado
Ento algum tempo mais tarde
),
est rodando Meteor na sua mquina
o servidor
deixando a coleo local se reverter sozinha
enquanto se espera o servidor responder
no pode fazer nada al
negar a modificao
m de confiar na coleo local
a interface do usurio
Assim que o servidor voltar e
a interface do usurio se atualiza para refletir isso
RanqueandoosArtigosdaPginaPrincipal
Agora que n
s temos uma pontuao para cada artigo baseada no n
mostrar uma lista dos artigos mais votados
Para tanto
assinaturas separadas contra a coleo de artigo
,
n
mero de votos
vamos
s veremos como administrar duas
e fazer no nosso template
postsList
um
pouco mais geral
Para comear
,
n
s queremos ter duas assinaturas
uma para cada organizao
O truque aqui
230/261
1/8/2015
posts , porm com
que ambas assinaturas iro assinar para a mesma publicao
argumentos diferentes
s tamb
URLs
m criaremos duas novas rotas chamadas
/new
).
/best
respecitvamente
junto com
newPosts
/new/5
bestPosts , acessvel nas
/best/5
para nossa paginao
claro
Para fazer isso
distintos
s iremos estender nosso
NewPostsListController
PostsListController
nico
BestPostsListController . Isto ns permitir re
utilizar a exata mesma opo de rota tanto para a rota
ao nos dar um
em dois controladores
home
quanto para a rota
do qual herdar
newPosts ,
E adicionalmente
apenas
uma boa ilustrao de quo flex vel o Iron Router pode ser
increment: 5,
limit: function() {
},
return {sort: this.sort, limit: this.limit()};
},
},
posts: function() {
return Posts.find({}, this.findOptions());
},
data: function() {
var hasMore = this.posts().fetch().length === this.limit();
return {
posts: this.posts(),
nextPath: hasMore ? this.nextPath() : null
};
}
});
NewPostsListController = PostsListController.extend({
sort: {submitted: -1, _id: -1},
nextPath: function() {
return Router.routes.newPosts.path({postsLimit: this.limit() + this.incr
ement})
}
});
231/261
1/8/2015
BestPostsListController = PostsListController.extend({
sort: {votes: -1, submitted: -1, _id: -1},
nextPath: function() {
return Router.routes.bestPosts.path({postsLimit: this.limit() + this.inc
rement})
}
});
this.route('home', {
path: '/',
controller: NewPostsListController
});
this.route('newPosts', {
path: '/new/:postsLimit?',
controller: NewPostsListController
});
this.route('bestPosts', {
path: '/best/:postsLimit?',
controller: BestPostsListController
});
// ..
});
lib router js
Note que agora que n
s temos mais de uma rota
PostsListController
e para dentro de
s tiramos a l
gica
nextPath
para fora do
BestPostsListController , j que o caminho ser diferente em qualquer um dos casos.
Adicionalmente
quando n
votes , ns temos uma organizao
s organizamos por
secundria por timestamp submetida para assegurar que a ordem est correta
s tamb
m adicionaremos links no cabealho
232/261
1/8/2015
lapse">
</a>
<a class="brand" href="{{pathFor 'home'}}">Microscope</a>
<ul class="nav">
<li>
<a href="{{pathFor 'newPosts'}}">New</a>
</li>
<li>
<a href="{{pathFor 'bestPosts'}}">Best</a>
</li>
{{#if currentUser}}
<li>
</li>
{{> notifications}}
</li>
{{/if}}
</ul>
</ul>
</div>
</div>
</header>
</template>
client views include header html
Com tudo isso feito
s agora ganhamos uma lista de melhores artigos
233/261
1/8/2015
Rankingbypoints
Commit135
Added routes for post lists
and pages to display them
Ver no GitHub
Lanar Instncia
UmCabealhoMelhor
Agora que n
atualmente
s temos duas pginas de artigos
Ento vamos revisitar nosso cabealho para fazer isto
header.js
administrador
A razo para n
s querermos suportar m
newPosts
mesmo template
para fazer a tag
bvio
.
N
s criaremos um
tens de navegao
ltiplas rotas nomeadas
Significando que nossa
as quais correspondem s URLs
<li>
est vendo
e criaremos um ajudante que usa o caminho atual e uma ou mais
rotas nomeadas para configurar uma classe ativa nos nossos
home
pode ser dif cil saber qual lista voc
/new
activeRouteClass
ativa em ambos os casos
que tanto nossas rotas
respectivamente
chamam o
deve ser inteligente o suficiente
234/261
1/8/2015
lapse">
</a>
<a class="brand" href="{{pathFor 'home'}}">Microscope</a>
<ul class="nav">
<li class="{{activeRouteClass 'home' 'newPosts'}}">
<a href="{{pathFor 'newPosts'}}">New</a>
</li>
<li class="{{activeRouteClass 'bestPosts'}}">
<a href="{{pathFor 'bestPosts'}}">Best</a>
</li>
{{#if currentUser}}
<li class="{{activeRouteClass 'postSubmit'}}">
</li>
{{> notifications}}
</li>
{{/if}}
</ul>
</ul>
</div>
</div>
</header>
</template>
235/261
1/8/2015
Template.header.helpers({
activeRouteClass: function(/* route names */) {
var args = Array.prototype.slice.call(arguments, 0);
args.pop();
var active = _.any(args, function(name) {
return Router.current().route.name === name
});
}
});
return active && 'active';
client views includes header js
Showingtheactivepage
236/261
1/8/2015
ArgumentosdeAjudantes
N
s no usamos esse padro espec fico at
tag de Handlerbar
E como voc
voc
tamb
receb
Neste
agora
mas assim como qualquer outra
tags de templates ajudantes podem receber argumentos
pode claro passar argumentos nomeados espec ficos para sua funo
m pode passar um n
los ao chamar o objeto
ltimo caso
voc
mero no especificado de parmetros an
arguments
nimos e
dentro de uma funo
provavelmente gostar de converter o objeto
um array JavaScript regular e ento chamar
pop()
arguments
em
para se livrar da hash adicionada
ao fim pelo Handlebars
Para cada
rota
teste
tem de navegao
e ento usa o ajudante
o ajudante
any()
activeRouteClass
recebe uma lista de nomes de
do Underscore para ver se alguma das rotas passa no
).
vulgo a URL correspondente ser igual ao caminho atual
, any()
Se qualquer uma das rotas corresponder com o caminho atual
Finalmente
&& myString
s estamos fazendo uso do padro JavaScript
retorna
false , mas true && myString
retornar
boolen && string
true .
onde
false
myString .
retorna
Commit136
Added active classes to the header
Ver no GitHub
Lanar Instncia
Agora que usurios podem votar em artigos em tempo real
e para baixo na nossa homepage quando os ranks mudam
uma forma de suavizar tudo isso com algums anima
voc
ver
tens pulando para cima
Mas no seria legal se houvesse
es no momento certo
237/261
1/8/2015
PublicaesAvanadas
Agora voc
13.5
SIDEBAR
j deve ter entendido como publica
es e assinaturas interagem
livrar das rodinhas e examinar alguns cenrios mais avanados
Ento vamos nos
PublicandoumaColeoMltiplasVezes
Na nossa primeira barra lateral sobre publica
comuns de publicao e assinatura
e n
,
es
s aprendemos como a funo
vamos lembrar o que
_publishCursor
faz para n
s exatamente
ela pega todos os
Note que o nome da publicao no est de forma alguma envolvido
s podemos ter mais de uma publicao ligando as vers
servidor de qualquer coleo
es do cliente e do
os fez
e os puxam para a coleo do lado do
Isto significa que n
_publishCursor
es mais
prios sites
documentos que combinam com um dado cursor
cliente do mesmo nome
s vimos alguns dos padr
bem fceis de implementar nos nossos pr
Primeiro
s j encontramos esse padro no nosso cap tulo sobre paginao
quando n
s publicamos
um subconjunto paginado de todos os artigos em adio ao artigo atualmente disposto
.
,
Outro caso similar seria publicar uma viso geral de um conjunto grande de documentos
assim como os detalhes completos de um
nico
tem
238/261
1/8/2015
Publishingacollectiontwice
Meteor.publish('allPosts', function() {
return Posts.find({}, {fields: {title: true, author: true}});
});
Meteor.publish('postDetail', function(postId) {
return Posts.find(postId);
});
Agora quando o cliente assina essas duas publica
postId
correto est sendo enviado assinatura
povoada por duas fontes
es
usando
autorun
para assegurar que o
postDetail , sua coleo 'posts'
fica
uma lista de t tulos e nomes de autor da primeira assinatura
e os
detalhes completos de um artigo da segunda
239/261
1/8/2015
Voc
por
pode perceber que o artigo publicado por
allPosts
postDetail
tamb
m est sendo publicado
apesar que apenas com um subconjunto de suas propriedades
).
Entretanto
Meteor toma conta de fundir os campos e assegurar que no haja nenhum artigo duplicado
Isto
timo
porque agora quando n
s renderizamos a lista de resumo dos artigos
,
n
estamos lidando com objetos de informao que que tem a exata quantidade de informao
para n
artigo
s mostrarmos o que precisamos
Entretanto
nico
quando n
s temos tudo o que precisamos para mostr la
s renderizamos a pgina de um
Claro
s precisamos tomar
conta no cliente para no se esperar todos os campos estarem dispon veis de todos os artigos
neste caso
isto
uma pegadinha comum
Deve ser notado que voc
no est limitado a variar as propriedades dos documentos
poderia normalmente publicar as mesmas propriedades em ambas publica
organizar os
es
Voc
mas
tens diferentemente
Meteor.publish('newPosts', function(limit) {
return Posts.find({}, {sort: {submitted: -1}, limit: limit});
});
Meteor.publish('bestPosts', function(limit) {
return Posts.find({}, {sort: {votes: -1, submitted: -1}, limit: limit});
});
AssinandoumaPublicaoMltiplasVezes
s acabamos de ver como voc
pode publicar uma
nica coleo mais de uma vez
pode conseguir um resultado bem similar com outro padro
assin la m
ltiplas vezes
s assinamos publicao
configura e desfaz cada assinatura para n
assinar m
nica publicao
mas
Em Microscope
criar uma
Alis voc
posts
Por
ltiplas vezes
mas Iron Router
m no h razo para que n
s no possamos
ltiplas vezes simultaneamente
240/261
1/8/2015
Por exemplo
na mem
vamos dizer que n
ria ao mesmo tempo
s gostar amos de ler ambos os artigos mais novos e melhores
Subscribingtwicetoonepublication
s estamos configurando uma
nica publicao
});
E n
s ento assinamos publicao m
ltiplas vezes
Na verdade isto
mais ou menos
exatamente o que estamos fazendo em Microscope
241/261
1/8/2015
Meteor.subscribe('posts', {submitted: -1, limit: 10});

Meteor.subscribe('posts', {baseScore: -1, submitted: -1, limit: 10});
Ento o que est acontecendo exatamente
diferentes
Cada navegador est abrindo duas assinaturas
cada uma conectando se a mesma publicao do servidor
Cada assinatura prov
um conjunto
argumentos diferentes publicao
diferente
de documentos
coleo do lado do cliente
mas fundamentalmente
puxado da coleo
posts
cada vez
e enviado pela rede
MltiplasColeesnumanicaAssinatura
Diferente de bancos de dados tradicionais relacionais como MySQL que trabalham com joins
jun
es
),
bancos de dados NoSQL como o Mongo so baseados em desnormalizao e
embutimento
Vamos ver como isso funciona no contexto do Meteor
Vamos ver um exemplo concreto
s adicionamos comentrios aos nossos artigos
agora
s estivemos contentes com publicar apenas os comentrios no artigo
e at
nico que o
usurio est observando
Entretanto
supomos que n
primeira pgina
s gostar amos de mostrar comentrio em todos os artigos da
tendo em mente que esses artigos vo mudar aos paginarmos atrav
Este cenrio de uso apresenta uma boa razo para embutir comentrios nos artigos
verdade
o que nos levou as desnormalizar a contagem de comentrios
Claro que n
coleo
Desnormalizao
Mas como n
ao fazer tanto n
com cole
de uma vez por todas
s deles
).
e na
s poder amos sempre apenas embutir os comentrios nos artigos
Comments
nos livrando da
s vimos previamente no cap tulo
s perder amos alguns dos benef cios extras de se trabalhar
es separadas
Mas alis h um truque envolvendo assinaturas que torna poss vel embutir nossos
comentrios enquanto preservamos cole
es separadas
242/261
1/8/2015
Vamos supor que junto com a nossa lista de artigos da pgina inicial
,
n
s gostar amos de
assinar a uma lista dos dois comentrios superiores de cada artigo
Seria dif cil conseguir isso com uma publicao de comentrios independente
se a lista de artigos fosse limitada de alguma forma
vamos dizer
os
10
especialmente
).
mais recentes
ter amos de escrever uma publicao que se parecesse com algo assim
Twocollectionsinonesubscription
Meteor.publish('topComments', function(topPostIds) {
return Comments.find({postId: topPostIds});
});
243/261
1/8/2015
Isso seria um problema de um ponto de vista de performance
j que a publicao precisaria
topPostIds
ser desfeita e re estabelecida cada vez que a lista de
H um jeito de se resolver isso alis
mudasse
.
N
mais de uma publicao por coleo
s apenas usamos o fato que no s
mas n
s podemos ter
s tamb
m podemos ter mais de uma coleo por
publicao
Meteor.publish('topPosts', function(limit) {
var sub = this, commentHandles = [], postHandle = null;
// send over the top two comments attached to a single post

function publishPostComments(postId) {
var commentsCursor = Comments.find({postId: postId}, {limit: 2});
commentHandles[post._id] =
Meteor.Collection._publishCursor(commentsCursor, sub, 'comments');
}
postHandle = Posts.find({}, {limit: limit}).observeChanges({
added: function(id, post) {
publishPostComments(post._id);
sub.added('posts', id, post);
},
changed: function(id, fields) {
sub.changed('posts', id, fields);
},
removed: function(id) {
// stop observing changes on the post's comments
commentHandles[id] && commentHandles[id].stop();
// delete the post
sub.removed('posts', id);
}
});
sub.ready();
// make sure we clean everything up (note `_publishCursor`

// does this for us with the comment observers)
sub.onStop(function() { postsHandle.stop(); });
});
Note que n
s no estamos retornando nada nesta publicao
enviamos mensagens ao
precisamos pedir a
sub
s mesmos
_publishCursor
via
para faz
.added()
lo por n
j que n
e amigos
).
s manualmente
Ento n
s no
s ao retornar um cursor
244/261
1/8/2015
Agora
cada vez que n
s publicamos um artigo n
dois comentrios superiores anexados a ele
s tamb
m automaticamente publicamos os
E tudo com uma
Apesar do Meteor ainda no fazer esse processo bem linear
pacote
publish-with-relations
no Atmosphere
nica chamada de assinatura
voc
pode tamb
m checar o
o qual busca fazer esse padro mais fcil
Ligandocoleesdiferentes
O que mais pode nosso conhecimento rec
se n
s no usamos o
m descoberto das assinaturas fazer por n
Bem
_publishCursor , ns no precisamos seguir as restries que a coleo
fonte no servidor precisa para ter o mesmo nome como alvo na coleo no cliente
Onecollectionfortwosubscriptions
245/261
1/8/2015
Uma razo para porque n
Suponha que n
s gostar amos de fazer isso
Herana de Tabela nica
s gostar amos de referenciar vrios tipos de objetos dos nossos artigos
cada
um deles armazenando campos em comum mas tamb
conte
do
Por exemplo
s poder amos estar construindo um mecanismo de blog como o
Tumblr onde cada artigo possui a clssica ID
tamb
m ter uma imagem
video
link
timestamp
ou apenas texto
s poder amos armazenar todas esses objetos numa
E apesar que n
mas em adio pode
nica coleo
para indicar que tipo de objeto eles so
s ter amos uma
transformar essa
'resources' , usando
. video , image , link ,
type
um atributo
e t tulo
m ligeiramente diferentes em
nica coleo
nica coleo em m
Resources
ltiplas cole
es
no servidor
..
etc
s poder amos
Videos , Images , etc. no cliente com o
tantinho de mgica seguinte
Meteor.publish('videos', function() {
var sub = this;
var videosCursor = Resources.find({type: 'video'});
Meteor.Collection._publishCursor(videosCursor, sub, 'videos');
// _publishCursor doesn't call this for us in case we do this more than

once.
sub.ready();
});
_publishCursor
s estamos dizendo ao
o cursor faria
publicar de
mas ao inv
'resources'
uma boa fazer isso
para publicar nossos v deos
s de publicar a coleo
para
resources
assim como retornar
para o cliente
s podemos
'videos' .
No cabe a nos julgar
Em qualquer caso
bom saber o que
poss vel
para se poder usar o Meteor ao mximo
246/261
1/8/2015
Animaes
14
s agora temos votao
contagem e ranque em tempo real
Entretanto
isto leva a uma
experi
ncia do usurio errtica e chocante j que os artigos pipocam na homepage
usaremos anima
es para suavizar isso
Meteor&oDOM
Antes de podermos comear a parte divertida
entender como o Meteor interage com o DOM
elementos HTML que produzem os conte
O ponto crucial a se manter em mente
apenas ser deletados e criados
).
Meteor
(
(
Document Object Model
).
s precisamos
a coleo de
que os elementos no podem ser movidos
note que isto
uma limitao do pr
prio DOM
nova posio
es
pia
( ')
B
antes do elemento A
ao mov
Para trocar os artigos A e B
j que no se pode simplesmente animar B at
sabemos que acontece instantaneamente
'
Eles podem
Meteor na
porque B desaparecer assim que o Meteor re renderizar a pgina
m criado B
no do
Ento para dar a iluso dos elementos A e B estarem trocando de lugar
Isto torna complicado fazer anima
dos de uma pgina
verdade deletar o elemento B e inserir uma nova c
o rec
),
fazer as coisas se moverem
).
graas reatividade
Ento
voc
o que
tem que animar
lo da posio do B antigo para sua nova posio antes de A
posicionados nas posi
es p
2,
e p
uma
),
respectivamente
seguir amos os seguintes passos
1.
2.
3.
4.
5.
6.
Delete B
'
Crie B
antes de A no DOM
Mova B
'
para p
Mova A para p
Anime A para p
'
Anime B para p
247/261
1/8/2015
O seguinte diagrama explica esses passos em mais detalhe
248/261
1/8/2015
Swtichingtwoposts
Note que nos passos
teletransportando
3 4
e
s no estamos animando A e B
eles para l instantaneamente
que B nunca foi deletado
'
para suas posi
J que isto
es mas
instantneo
dar a iluso de
e posicionar apropriadamente ambos elementos para serem
animados de volta a suas novas posi
Felizmente
o Meteor toma conta dos passos
preocupar quanto aos passos
Al
m disso
5 6
nos passos
devidos lugares
passos
es
3 4,
Para que a
ao
para n
ento n
s apenas precisamos nos
6.
tudo que n
1&2
s estamos fazendo
mover os elementos para seus
nica parte que n
s realmente precisemos nos preocupar seja os
vulgo enviar os elementos para o ponto de in cio da animao
TimingCerto
At
agora n
3 4,
Para os passos
no nosso caso
5 6
e
a resposta
na callback de template
no mesmo lugar
minutos
minutos
se voc
dissesse a um
e ento quando isso
ele provavelmente deduziria que j que ele terminar
ele pode simplesmente salvar energia e no andar
quer garantir que seu andr
tem de esperar at
ide ande durante os
que ele ande os primeiros
O navegador funciona de uma forma similar
simultaneamente
Pense os dessa forma
gico para andar para o norte por
terminar andar para o sul por
aconteceria
so um pouco mais complicados
do Meteor dentro do
).
ide perfeitamente l
Ento se voc
rendered
ranque
andr
post_item.js , a qual ativada toda vez que uma propriedade do artigo muda
administrador
Os passos
s falamos sobre como animar nossos artigos mas no sobre quando anim los
minutos
10
minutos completos
e ento diz
lo para voltar
se n
voc
s simplesmente dermos a ele as intru
es
as novas coordenadas simplesmente substituiriam as antigas e nada
Em outras palavras
o navegador precisa registrar as mudanas na posio como
dois pontos separados no tempo
caso contrrio ele no ser capaz de anim los
249/261
1/8/2015
O Meteor no prov
justAfterRendered , mas ns podemos falsific
uma callback
la usando
Meteor.defer() , a qual simplesmente recebe uma funo e adia sua execuo apenas o
suficiente para registr la como um evento diferente
PosicionamentoCSS
Para animar os artigos sendo reordenados na pgina
territ
rio CSS
s teremos de nos aventurar em
Um review rpido de posicionamento CSS pode ser necessrio
Elementos numa pgina usam posicionamento esttico por padro
posicionados se encaixam no fluxo da pgina
mudadas ou animadas
Elementos estaticamente
e suas coordenadas na pgina no podem ser
Posicionamento relativo por outro lado significa que o elemento tamb
da pgina
m se encaixa no fluxo
mas pode ser posicionado relativamente a sua posio original
Posicionamento absoluto vai um passo mais adiante e deixa voc
dar ao elemento
coordenadas x y espec ficas relativas ao documento ou ao primeiro elemento paterno
posicionado absoluta
relativamente
s utilizaremos posicionamento relativo para animar nossos artigos
das CSS para voc
mas se voc
seria adicionar este c
precisasse fazer voc
digo s suas folhas de estilo
.
N
s j tomamos conta
mesmo tudo que voc
precisaria fazer
.post{
position:relative;
transition:all 300ms 0ms ease-in;
}
client stylesheets style css
Isto faz os passos
5 6
seu valor padro
bem fceis
tudo que n
s precisamos fazer
configurar
e nossos artigos escorrero de volta a suas posi
es
top
para
0px
normais
250/261
1/8/2015
Isto significa que nosso
nico desafio
relao a suas novas posi
muito dif cil tamb
es
descobrir para onde anim los dos
Em outras palavras
o contrabalano correto
passos
como contrabalance los
simplesmente a posio pr
3 4
e
em
Mas isto no
via do artigo
menos sua nova
Posio:absoluta
N
s poder amos tamb
posicionar nossos elementos
absolutamente
position:absolute
m usar
com um pai relativo para
Mas a grande desvantagem de elementos posicionados
que eles esto completamente removidos do fluxo da pgina
causando o colapso de seu container paterno como se ele estivesse vazio
Isso ento significa que n
container via JavaScript
naturalmente
s precisar amos artificialmente configurar a altura do
ao inv
s de deixar o navegador refluir os elementos
Consequentemente
sempre que poss vel
melhor ficar com
posicionamento relativo
RecordaoTotal
s temos mais um problema ainda
lembrar
sua posio pr
com sua mem
via
Enquanto o elemento A persiste no DOM e pode ento
'
o elemento B experiencia reencarnao e volta vida como B
ria completamente vazia
Felizmente o Meteor vem nos resgastar nos dando acesso ao objeto instncia do template na
rendered . Como a documentao do Meteor afirma:
callback
, this
No corpo da callback
um objeto da instncia do template que
ocorr
s faremos
recriado
Desta forma
s ainda saberemos de onde n
es
encontrar a posio atual do artigo na pgina
no objeto de instncia do template
nico a esta
ncia do template e persiste ao longo de re renderiza
Ento o que n
mesmo quando o artigo
e ento armazen la
deletado e
s devemos anim lo
251/261
1/8/2015
Instncia do template tamb
m nos deixa acessar a informao da coleo atrav
s da
data . Isto ser til para pegar o ranque do artigo.
propriedade
RanqueandoArtigos
s estivemos falando sobre ranque de artigos
uma propriedade do artigo
listados na nossa coleo
j que
mas este
uma conseq
ranque
no existe de fato como
ncia da ordem na qual os artigos so
Se n
s quisermos animar os artigos de acordo com seu ranque
teremos que de alguma forma conjurar esta propriedade do nada
Note que n
o raque
s no podemos por essa propriedade
ranque
no pr
uma propriedade relativa que depende em como voc
prio banco de dados
organiza seus artigos
um artigo pode ser ranqueado primeiro quando organizado por data
organizado por pontos
).
s idealmente por amos essa propriedade nas nossas cole
es
j que
vulgo
mas terceiro quando
newPosts
topPosts , mas
o Meteor ainda no oferece um mecanismo conveniente para fazer isso
Ento
rank
s inseriremos
no
ltimo passo poss vel
o administrador de template
postList :
postsWithRank: function() {
this.posts.rewind();
return this.posts.map(function(post, index, cursor) {
post._rank = index;
return post;
});
}
});
list js
Ao inv
s de simplesmente retornar o cursor
limit: postsHandle.limit()})
como nosso ajudante pr
recebe o cursor e adiciona a propriedade
Posts.find({}, {sort: {submitted: -1},
_rank
vio
posts , postsWithRank
a cada um dos seus documentos
252/261
1/8/2015
No esquea de atualizar o template
postsList
tamb
<div class="posts">
{{#each postsWithRank}}
{{> postItem}}
{{/each}}
{{#if nextPath}}
<a class="load-more" href="{{nextPath}}">Load more</a>
{{/if}}
</div>
</template>
list html
Sejabom,Rebobine
O Meteor
um dos web frameworks mais progressistas e inovadores por a
Mas um
de seus utilitrios parece um retrocesso aos dias dos VCRs e gravadores em v deo
cassete
rewind() .
a funo
Sempre que voc
usa um cursor com
forEach() , map()
ou
fetch() , voc
precisar rebobinar o cursor depois antes que ele esteja pronto para ser utilizado de
novo
E em alguns casos
melhor estar do lado seguro e
preventivamente ao inv
rewind()
o cursor
s de arriscar um erro
Juntandotudo
s podemos agora por tudo junto ao utilizar a callback do templete
administrador do
post_item.js
para a nossa l
gica de animao
rendered
do
253/261
1/8/2015
//...
});
Template.postItem.rendered = function(){
// animate post from previous position to new position
var instance = this;
var rank = instance.data._rank;
var $this = $(this.firstNode);
var postHeight = 80;
var newPosition = rank * postHeight;
// if element has a currentPosition (i.e. it's not the first ever render)
if (typeof(instance.currentPosition) !== 'undefined') {
var previousPosition = instance.currentPosition;
// calculate difference between old position and new position and send e
lement there
var delta = previousPosition - newPosition;
$this.css("top", delta + "px");
}
};
// let it draw in the old position, then..

instance.currentPosition = newPosition;
// bring element back to its new original position
$this.css("top", "0px");
});
//...
});
/ _
item js
Commit141
Added post reordering animation
Ver no GitHub
Lanar Instncia
No deve ser muito dif cil acompanhar se voc
usar nosso diagrama pr
vio como refer
ncia
254/261
1/8/2015
Note que j que n
na callback
currentPosition
s configuramos a propriedade
na instncia do template
defer , isto significa que esta propriedade no existir na primeira renderizao
do fragmento de template
Mas isto no
um problema j que n
em animar a primeira renderizao mesmo
Agora abra seu site e comece a votar
Voc
s no estamos interessados
deve agora ver os artigos gentilmente se moverem
para cima e para baixo com uma graa de bal
AnimandoNovosArtigos
Nossos artigos agora esto se reordenando apropriadamente
uma animao
topo da nossa lista
Isto
2.
ainda
s no temos realmente
s de simplesmente ter novos artigos pipocando no
vamos fade them in
Ao inv
na verdade mais complicado do que parece
Meteor
1.
new post
mas n
disparada em dois casos separados
Quando um novo template
O problema
rendered
que a callback
do
inserido no DOM
Toda vez que a informao subjacente de um template muda
Apenas o caso
deve ser animado
a no ser que voc
queria que a interface do usurio se
ilumine como uma rvore de natal toda vez que a informao mudar
Vamos assegurar que n
s apenas animemos os artigos quando eles de fato so novos
quando eles so re renderizados porque a informao mudou
presena de uma varivel de instncia
),
renderizao
bloco
else :
ento n
a qual
e no
s j estamos testando pela
apenas definida ap
s apenas precisamos voltar a nossa callback
s a primeira
rendered
e adicionar um
255/261
1/8/2015
//...
});
Template.postItem.rendered = function(){
// anima o artigo da posio prvia para a nova posio
var instance = this;
var rank = instance.data._rank;
var $this = $(this.firstNode);
var postHeight = 80;
var newPosition = rank * postHeight;
// se o elemento tem uma currentPosition (vulgo no a primeira renderiza

o)
if (typeof(instance.currentPosition) !== 'undefined') {
var previousPosition = instance.currentPosition;
// calcule a diferena entra a posio antiga e a nova posio e envie o
elemento para l
var delta = previousPosition - newPosition;
$this.css("top", delta + "px");
} else {
// a primeira renderizao, ento esconda o elemento
$this.addClass("invisible");
}
};
// deixe desenhar na posio antiga, ento..

instance.currentPosition = newPosition;
// traga elemento de volta a sua nova posio original
$this.css("top", "0px").removeClass("invisible");
});
//...
});
/ _
item js
Commit142
Fade items in when they are drawn
Ver no GitHub
Lanar Instncia
256/261
1/8/2015
removeClass("invisible")
Note que a
para cada renderizao
presente no elemento
que n
s adicionamos na funo
defer()
.invisible
Mas apenas far alguma coisa se a classe
rodar
estiver
o que ser verdadeiro apenas a primeira vez que for renderizado
CSS&JavaScript
Voc
top .
pode ter notado que n
disparar a animao ao inv
como n
s fizemos para
.invisible
s estamos usando uma classe CSS
s de animar a propriedade CSS
Isto
porque para
opacity
para
diretamente
top , ns precisavamos animar a
propriedade para um valor espec fico que dependia da informao da instncia
Por outro lado
aqui n
s apenas queremos mostrar e esconder um elemento
.
,
independente de sua informao
seu JavaScript o mximo poss vel
classe aqui
uma boa id
ia manter sua CSS longe do
s apenas adicionaremos e removeremos a
e especificaremos os detalhes da animao na nossa stylesheet
J que
s devemos finalmente ter o comportamento de animao que n
aplicativo e experimente
.post.invisible
functions
E agora voc
para ver se voc
tamb
m pode brincar com as classes
consegue desenvolver outras transi
s quer amos
.
es
Rode seu
.post
Dica
CSS easing
um bom lugar para comear
257/261
1/8/2015
VocabulrioMeteor
Neste livro voc
14.5
SIDEBAR
ir encontrar algumas palavras que podem ser novas
ou pelo menos usadas
de uma forma nova no contexto de Meteor
Vamos usar este cap tulo para as definir
Cliente
Quando falamos do Cliente
utilizadores
estamos a referir c
digo a correr no navegador web dos
seja isso um navegador tradicional como o Firefox ou o Safari
ou algo to
complexo como uma UIWebView numa aplicao de iPhone nativa
Coleo
Uma Coleo Meteor
cliente e servidor
a entidade gestora de dados que automaticamente sincroniza entre
As Cole
es t
m um nome
existem tanto no cliente como no servidor
como por exemplo
posts , e normalmente
Apesar de terem comportamentos diferentes
elas
m uma API comum baseada na de Mongo
Computao
Uma computao
um bloco de c
que ela depende muda
Sesso
digo que corre cada vez que uma fonte de dados reativa de
Se tiver uma fonte de dados reativa
e quiser responder lhe reativamente
por exemplo
uma varivel de
vai ser necessrio estabelecer uma computao
para ela
Cursor
Um cursor
cursor no
o resultado de correr uma pesquisa numa coleo de Mongo
simplesmente uma lista de resultados
No cliente
um
mas um objecto reactivo que pode ser
observado enquanto objetos na coleo relevante so adicionados
removidos ou atualizados
DDP
DDP
o Protocolo de Dados Distribu dos
baixo n vel utilizado para sincronizar cole
Distributed Data Protocol
es e fazer chamadas a M
de Meteor
todos
o protocolo de
O DDP foi
258/261
1/8/2015
desenhado com a inteno de ser um protocolo gen
rico
que substitui o HTTP para
aplica
es de tempo real com grandes quantidades de dados
Deps
Deps
o sistema de reatividade do Meteor
Deps
usado internamente para manter o HTML
sincronizado com o modelo de dados subjacente
Documento
O Mongo
das cole
podem
uma fonte de dados baseada em documentos
es so chamados
no entanto
documentos
conter fun
es
nesse sentido os objetos que saem
Estes so objetos JavaScript simples
com uma
nica propriedade especial
utilizado pelo Meteor para gerir as suas propriedades atrav
que no
_id , que
s do DDP
Ajudante
Quando um template precisa de renderizar algo mais complexo que uma propriedade de um
documento ele pode chamar um ajudante
uma funo que
utilizada para ajudar no
processo de renderizar
CompensaodeLatncia
uma t
cnica utilizada para permitir simular chamadas a M
todos no cliente
para evitar
demoras enquanto se espera que o servidor responda
Mtodo
Um M
todo de Meteor
uma chamada a uma funo remota do cliente para o servidor
alguma l
Lat
gica especial para gerir altera
com
es nas cole
es e suportar Compensao de
ncia
MiniMongo
A coleo no lado do cliente
semelhante de Mongo
uma base de dados em mem
ria que disponibiliza uma API
A biblioteca que suporta este comportamento
chamada
259/261
1/8/2015
MiniMongo
para indicar que
completamente em mem
uma verso mais pequena do Mongo que corre
.
ria
Pacote
Um pacote Meteor pode consistir de
1.
C
digo JavaScript para correr no servidor
2.
C
3.
4.
digo JavaScript para correr no cliente
Instru
es sobre como processar recursos
).
como SASS para CSS
Recursos para serem processados
Um pacote
como uma biblioteca com super poderes
grande de pacotes base
O Meteor vem com um conjunto
Existe ainda o projecto Atmosphere
de terceiros criado pela comunidade
que
uma coleo de pacotes
Publicao
Uma publicao
um conjunto de dados com um nome e que
utilizador que o subscreve
customizado por cada
As publica
es so definidas no servidor
Servidor
O servidor Meteor
. .
um servidor HTTP e DDP que corre em node js
bibliotecas de Meteor
servidor Meteor
e do c
Consiste de todas as
digo JavaScript de servidor escrito por si
este liga se a uma base de dados Mongo
).
Quando voc
que tamb
inicia um
iniciada
automaticamente quando em desenvolvimento
Sesso
A Sesso em Meteor
uma fonte de dados reativa no cliente que
para manter o estado em que o utilizador est
usada pela sua aplicao
Subscrio
260/261
1/8/2015
Uma subscrio
uma ligao a uma publicao para um cliente espec fico
A subscrio
digo que corre no navegador que comunica com uma publicao no servidor e mant
dados sincronizados
m os
Template
Um template
Handlebars
um m
todo de gerar HTML em JavaScript
um sistema de templates sem l
gica
Por omisso
Meteor suporta
apesar de haver planos para suportar outros
no futuro
ContextodeDadosdoTemplate
Quando um template
renderizado
espec ficos para a renderizao em questo
JavaScript objects
POJOs
),
- -
Tipicamente tais objectos so plain old
normalmente documentos de uma coleo
ser mais complexos e ter fun
este baseia se num objecto JavaScript que fornece dados
apesar de poderem
.
es
261/261

Discover Meteor - Building Real-Time JavaScript Web Apps - Sacha Greif & Tom Coleman

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Discover Meteor - Building Real-Time JavaScript Web Apps - Sacha Greif & Tom Coleman

Uploaded by

Copyright:

Available Formats

1/8/2015

Cover photo credit

Perseid Hunting by Darren Blackburn

licensed under a Creative

www discovermeteor com

Faa um pequeno experimento mental para mim

Imagine que voc

est abrindo uma pasta

em duas diferentes janelas do seu computador

Agora clique dentro de uma das janelas e delete um arquivo

outra janela tamb

Esse arquivo desapareceu da

no precisa realmente seguir esses passos para saber disso

algo num sistema de arquivos local

aplicada em todo lugar sem necessidade de

vamos pensar sobre como o mesmo cenrio funcionaria na web

vamos dizer que voc

abriu o mesmo site do Wordpress como admin em duas janelas do

browser e ento criou um nova postagem numa delas

s nos acostumamos com a id

se comunica apenas com pequenos

a outra janela no vai refletir a mudana a no ser que voc

Ao longo dos anos

ia de um website ser algo com o qual voc

parte de uma nova onda de frameworks e tecnologias que esto procurando

desafiar o status quo ao fazer a web em tempo real e reativa

uma plataforma constru da em cima de Node js para a construo de web apps em

que ambos mantenham sincronia

constru do sobre Node js

que Meteor tamb

O resultado disso tudo

Meteor usa JavaScript tanto no cliente quanto no servidor

digo entre ambos ambientes

uma plataforma que consegue ser muito poderosa e muito simples

abstraindo muitos dos aborrecimentos e armadilhas comuns ao desenvolvimento de

Ento por que voc

deveria investir seu tempo aprendendo Meteor ao inv

Deixando de lado todas as caracter sticas do Meteor

j fez desenvolvimento front end

j est familiarizado com JavaScript e no ser necessrio nem aprender uma

Meteor pode ser o framework ideal para suas necessidades

s acreditamos que tudo se

Meteor torna poss vel criar um web app em tempo

real e funcionando na web em questo de horas

Mais do que qualquer outro framework

Mas j que voc

ou ento novamente pode no

pode se familiarizar ao longo de algumas noites or um fim de semana

que no tentar e descobrir por si mesmo

s estivemos trabalhando em Telescope

Meteor open source que permite qualquer um criar sua pr

em Reddit ou Hacker news

pria rede social de not cias

onde pessoas podem enviar links e votar neles

s aprendemos um bocado construindo esse aplicativo

mas no era sempre fcil encontrar

as respostas para as quest

s tivemos de encaixar as peas de muitas fontes diferentes

de compartilhar todas essas li

Ento com este livro

e criar um simples guia passo a passo que o guiar atrav

da construo de um aplicativo em Meteor completo do zero

uma verso ligeiramente simplificada do