Mean: Full stack JavaScript para aplicações web com MongoDB, Express, Angular e Node

367 Pages·2015·2.77 MB·Portuguese

by  Flávio Almeida

© CasadoCódigo
Todos os direitos reservados e protegidos pela Lei nº9.610, de
10/02/1998.
Nenhumapartedestelivropoderáserreproduzida,nemtransmitida,sem
autorização prévia por escrito da editora, sejam quais forem os meios:
fotográficos,eletrônicos,mecânicos,gravaçãoouquaisqueroutros.
CasadoCódigo
Livrosparaoprogramador
RuaVergueiro,3185-8ºandar
04101-300–VilaMariana–SãoPaulo–SP–Brasil
CasadoCódigo
Prefácio
ÉimpressionanteaquantidadedeconhecimentoqueoFláviocolocounesse
livro. Paramim,esseéomelhorresumodoquevocêestáporencontrarnas
próximaspáginas.
Você vai aprender uma solução ponta a ponta completíssima usando
JavaScriptnofront-endcomAngular,noback-endcomNodeeExpresseno
bancodedadoscomMongoDB.Masnãosó.Vocêvaivertestesdeunidadee
integraçãocontínua;vaiverbuilddefront-endcomGrunt.jseatéfazerdeploy
daaplicação.
Oconteúdomeimpressionaporquecobretodoodesenvolvimento,apre-
sentandoferramentasparatodasasetapas.Issoémuitoraroemumlivrosó.
Aomesmotempo,olivroéenxutoenamedidacerta. Todooessencialestá
aqui,massempassardopontoeserextensodemais.
SevocêtrabalhacomWeb,recomendofortementeolivro.AMEANStack
comJavaScriptemtodasaspontaséinteressantíssima.Abremuitaspossibili-
dades.Masvoualémedigoquevocêvaiaprendermuitacoisaaqui,mesmose
nãoforusaralgumapartedoMEAN.TalvezsuaaplicaçãonãoprecisedeAn-
gular;masoconhecimentodeExpresseMongopode-lheserútil. Outalvez
vocêváusaroutrobancodedados,masvaiaprendermuitodeAngular,Grunt
etestesaqui.
Conheço o Flávio há alguns anos já, trabalhando juntos na Caelum.
Seu trabalho sempre é pautado por muita seriedade, fundamentação e uma
didáticaincrível. Sempreviissoemsuasaulasepalestras. Eagoravejoessas
boascaracterísticasaindamaisacentuadasnestelivro.Éumaexcelenteobra,
garantoquevocêvaiaproveitar.Boaleitura!
SérgioLopes
i

CasadoCódigo
Agradecimentos
AgradeçoaSérgioLopesporterreservadopartedoseuescassotempoparaa
leituraeelaboraçãodoprefáciodestelivro.Aproveitotambémparaagradecer
à Casa do Código, mais notadamente ao Adriano Almeida e Vivian Matsui
peloprofissionalismoetratodespendidosdurantetodasasetapasdecriação
destelivro.
Porfim,nãopoderiadeixardeagradeceràminhaesposaCamilaAlmeida
peloapoioduranteosnovemesesdegestaçãodestelivro,especialmentepor
compreender a importância do meu silêncio durante as revisões matinais e
noturnasrealizadasduranteanossatravessiaNiterói/Rio.
iii

CasadoCódigo Sumário
Sumário
1 Introdução 1
1.1 MEANStack . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 UmaapostanoJavaScript . . . . . . . . . . . . . . . . . . . . . 4
1.3 Vantagensdastack . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.4 Visãogeraldanossajornada . . . . . . . . . . . . . . . . . . . 6
1.5 InstalaçãodoNode.js . . . . . . . . . . . . . . . . . . . . . . . 7
2 Express:frameworkwebparaNode.js 9
2.1 Expresseseupapel . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2 Estruturadoprojetoepackage.json . . . . . . . . . . . . . . . 11
2.3 InstalandooExpressatravésdoNpm . . . . . . . . . . . . . . 13
2.4 CriandoomódulodeconfiguraçãodoExpress . . . . . . . . 14
2.5 Entendendovariáveisdeambienteemiddlewares . . . . . . . 16
2.6 Viewetemplateengine . . . . . . . . . . . . . . . . . . . . . . 18
2.7 Configurandorotas . . . . . . . . . . . . . . . . . . . . . . . . 20
2.8 Criandocontrollers . . . . . . . . . . . . . . . . . . . . . . . . 21
2.9 Carregandodependênciascomexpress-load . . . . . . . . . . 25
2.10 Listandocontatos . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.11 UmpoucosobreRESTAPI . . . . . . . . . . . . . . . . . . . . 31
2.12 Retornandocontatodalista . . . . . . . . . . . . . . . . . . . 32
v
Sumário CasadoCódigo
3 Bower:gerenciadordedependênciasfront-end 37
3.1 Instalação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
3.2 bower.jsonenossasdependências . . . . . . . . . . . . . . . . 39
3.3 Baixandodependênciasfront-end . . . . . . . . . . . . . . . . 41
3.4 Alterandoapastadestinocom.bowerrc . . . . . . . . . . . . 42
3.5 Outroscomandos . . . . . . . . . . . . . . . . . . . . . . . . . 43
4 AngularJS:oframeworkMVCdaGoogle 47
4.1 Umvelhoconhecido:DOM . . . . . . . . . . . . . . . . . . . 48
4.2 DificuldadesquesurgemdamanipulaçãodoDOM. . . . . . 49
4.3 CaracterísticasdoAngularJS . . . . . . . . . . . . . . . . . . . 52
4.4 Preparandooambiente . . . . . . . . . . . . . . . . . . . . . . 52
4.5 HabilitandooAngularJSemnossapágina . . . . . . . . . . . 54
4.6 NossoprimeiromódulocomAngularJS . . . . . . . . . . . . 55
4.7 Angularexpression(AE) . . . . . . . . . . . . . . . . . . . . . 56
4.8 Nossoprimeirocontrolller . . . . . . . . . . . . . . . . . . . . 57
4.9 $scope:acolaentrecontrollereview . . . . . . . . . . . . . . 59
4.10 AngularJSeomodeldoMVC . . . . . . . . . . . . . . . . . . 61
4.11 Executandoaçõesnocontrolleratravésdediretiva . . . . . . 62
4.12 Amágicadodatabinding. . . . . . . . . . . . . . . . . . . . . 63
4.13 Singlepageapplication(SPA)enossoprojeto . . . . . . . . . 64
4.14 OmódulongRoute . . . . . . . . . . . . . . . . . . . . . . . . 66
4.15 Criandoviewsparciais . . . . . . . . . . . . . . . . . . . . . . 68
4.16 Configurandorotascom$routeProvider . . . . . . . . . . . . 69
4.17 Oobjeto$routeParams . . . . . . . . . . . . . . . . . . . . . . 71
4.18 Bootstrap:visualprofissionalemnossasviews . . . . . . . . . 73
4.19 Adiretivang-repeat . . . . . . . . . . . . . . . . . . . . . . . . 77
4.20 Adiretivang-modelefiltragemdalista . . . . . . . . . . . . . 80
4.21 Revisandooqueaprendemos . . . . . . . . . . . . . . . . . . 81
vi
CasadoCódigo Sumário
5 IntegrandoAngularJSeExpress 85
5.1 Oserviço$http . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
5.2 ProgramaçãoassíncronaecallbackHELL . . . . . . . . . . . 87
5.3 Promises:combatendoocallbackHELL . . . . . . . . . . . . 90
5.4 Obtendocontatoscom$http . . . . . . . . . . . . . . . . . . . 96
5.5 OmódulongResource:trabalhandoemaltonível . . . . . . 97
5.6 ConsumindoRESTEndpointscom$resource . . . . . . . . . 98
5.7 AdicionandorotadeexclusãoaoExpress . . . . . . . . . . . . 101
5.8 Express:organizandomelhornossasrotas . . . . . . . . . . . 104
5.9 Removendocontatosdalista . . . . . . . . . . . . . . . . . . . 105
5.10 Asdiretivasng-hideeng-show . . . . . . . . . . . . . . . . . 109
5.11 Exibindocontatoselecionado . . . . . . . . . . . . . . . . . . 111
5.12 Salvandoumcontato . . . . . . . . . . . . . . . . . . . . . . . 118
5.13 AdicionandorotadegravaçãoaoExpress . . . . . . . . . . . 120
5.14 Serviços:organizandomelhornossocódigo . . . . . . . . . . 122
6 MongoDB:bancodedadosbaseadoemdocumento 125
6.1 Relacionalvs.NoSQL:hábancovencedor? . . . . . . . . . . 125
6.2 Buscandoamenorimpedânciapossível:JSON“everywhere” 127
6.3 InstalaçãodoMongoDB . . . . . . . . . . . . . . . . . . . . . 128
6.4 Utilizandoomongoshell . . . . . . . . . . . . . . . . . . . . . 129
6.5 Oconceitodedocumento . . . . . . . . . . . . . . . . . . . . 129
6.6 OtipoObjectId . . . . . . . . . . . . . . . . . . . . . . . . . . 130
6.7 Criandoobancodaaplicação . . . . . . . . . . . . . . . . . . 131
6.8 Collectionseinserçãodedocumentos . . . . . . . . . . . . . 132
6.9 Buscandodocumentos . . . . . . . . . . . . . . . . . . . . . . 134
6.10 Oobjetocursor. . . . . . . . . . . . . . . . . . . . . . . . . . . 136
6.11 Buscandocomcritério . . . . . . . . . . . . . . . . . . . . . . 138
6.12 Queryselectors . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
6.13 Indexandodocumentos . . . . . . . . . . . . . . . . . . . . . . 143
6.14 Retornandodocumentosparciais . . . . . . . . . . . . . . . . 144
6.15 Removendodocumentos . . . . . . . . . . . . . . . . . . . . . 146
vii
Sumário CasadoCódigo
6.16 Atualizandodocumentos . . . . . . . . . . . . . . . . . . . . . 147
6.17 Realizandoupserts . . . . . . . . . . . . . . . . . . . . . . . . . 149
6.18 $set:modificadordeatualização . . . . . . . . . . . . . . . . . 151
6.19 Documentosembutidos(EmbeddedDocuments) . . . . . . 152
6.20 SimulandoJOINSnoladodaaplicação . . . . . . . . . . . . . 154
6.21 DBRefs:databasereferences . . . . . . . . . . . . . . . . . . . 156
7 IntegrandoExpresseMongoDB 159
7.1 MongoDriver . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
7.2 Esquemafazfalta? . . . . . . . . . . . . . . . . . . . . . . . . . 161
7.3 MongooseObject-DocumentModeler . . . . . . . . . . . . . 161
7.4 Gerenciandoaconexão . . . . . . . . . . . . . . . . . . . . . . 163
7.5 Criandoesquemas . . . . . . . . . . . . . . . . . . . . . . . . . 167
7.6 Utilizandomodelos . . . . . . . . . . . . . . . . . . . . . . . . 173
7.7 Buscandodocumentos . . . . . . . . . . . . . . . . . . . . . . 174
7.8 BuscandopeloID . . . . . . . . . . . . . . . . . . . . . . . . . 176
7.9 Removendodocumentos . . . . . . . . . . . . . . . . . . . . . 177
7.10 Atualizandodocumentos . . . . . . . . . . . . . . . . . . . . . 178
7.11 FunçõesdepersistêncianoModelounodocumento? . . . . 180
7.12 Criandoreferências . . . . . . . . . . . . . . . . . . . . . . . . 181
7.13 Modificandonossaviewparaexibiremergências . . . . . . . 182
7.14 Adiretivang-options . . . . . . . . . . . . . . . . . . . . . . . 183
7.15 Afunçãopopulateebuscadereferências . . . . . . . . . . . . 185
8 AutenticaçãocomPassport 187
8.1 OAuth2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
8.2 Registronoprovedordeautenticação . . . . . . . . . . . . . . 189
8.3 OAuth2.0comPassport . . . . . . . . . . . . . . . . . . . . . 191
8.4 Estratégiadeautenticação . . . . . . . . . . . . . . . . . . . . 193
8.5 DefinindoSchemadoUsuário . . . . . . . . . . . . . . . . . . 195
8.6 Mongooseeplugins . . . . . . . . . . . . . . . . . . . . . . . . 196
8.7 Serializaçãoedesserializaçãodousuário . . . . . . . . . . . . 198
viii