O documento apresenta uma introdução à linguagem JavaScript e à stack MEAN (MongoDB, Express, Angular e Node.js). Em 3 frases: 1) Apresenta os conceitos básicos de JavaScript como variáveis, tipos, operadores, funções e objetos. 2) Explica o que é Node.js e como usar JavaScript no backend para construir aplicações web fullstack. 3) Introduz os principais componentes da stack MEAN para desenvolvimento de aplicações web e mobile usando MongoDB, Express, Angular e Node.

1. MEAN Stack
Bruno Gama Catão

2. O que veremos
• Introdução à linguagem JavaScript
• Primeiros passos com NodeJS
• MEAN Stack:
• Aplicação web client-server padrão
• Aplicação RIA com AngularJS

3. Introdução a JavaScript
Esta imersão é baseada no ótimo
livro “JavaScript: The Good Parts”
de Douglas Crockford

4. História e por quê ...
• É a linguagem do browser
• A linguagem mais popular do mundo
• Feita em 1995 para o Netscape 2.0 sob
o nome de Mocha depois LiveScript e
por fim JavaScript (ECMA Script)
• A Microsoft adotou JavaScript no IE 3.0
em 1996
Brendan Eich

5. O porquê da má fama
• Sempre foi “a outra”
• Nome terrível !
• Control + C e Control + V
• APIs diferentes entre browsers
• Algumas características bem ruins (bad parts)

6. The bad parts
• Variáveis globais
• Escopo
• Inserção de ponto-e-vírgula
• Palavras reservadas
• parseInt
• +
• Valores falsos
• ==

7. ... vamos nos focar nas partes boas !

8. The good parts
• Funções como valores
• Objetos dinâmicos
• Tipos fracos
• JSON

9. ... e mais importante

10. não dá para fugir

11. Ambiente de testes
• Você vai precisar:
• Editor de texto
• Browser
• Conexão com a Internet

12. Ambiente de testes
• O que nós usaremos:
• WebStorm
• Chrome

13. WebStorm
• IDE para desenvolvimento web
• Desenvolvido pela JetBrains
• IntelliJ - PyCharm - RubyMine - ReSharper
• https://www.jetbrains.com/webstorm/
• Trial grátis por 30 dias

14. Chrome
• Browser desenvolvido pelo Google
• Ferramentas de desenvolvimento
• Console e Monitor de Rede
• Engine JavaScript rápida (V8)
• Suporte quase total aos novos padrões
• HTML5, CSS3 e ECMASCRIPT 6

15. Nosso Primeiro Projeto
1. Abra o WebStorm

16. Nosso Primeiro Projeto
2. Clique em “Create New Project"

17. Nosso Primeiro Projeto
3. Clique em “Empty Project"
4. Chame o projeto de “Projeto 1"

18. Nosso Primeiro Projeto
5. Clique com o botão direito em “Projeto 1"
6. Clique em “New"
7. Clique em “HTML File"

19. Nosso Primeiro Projeto
8. Preencha o nome com "index"
index.html é o nome padrão da
página html principal de um website

20. Nosso Primeiro Projeto
9. Modifique o título da página
10. Adicione algum conteúdo

21. Nosso Primeiro Projeto
Dica: Pressione TAB para ir do título ao corpo.
Digite o nome da tag (ex. h1) e pressione TAB.
Dica: Deixe o cursor do mouse sobre o
conteúdo para mostrar esses botões.

22. Nosso Primeiro Projeto
11. Clique com o botão direito em “Projeto 1"
12. Clique em “New"
13. Clique em “Directory"

23. Nosso Primeiro Projeto
14. Preencha o nome com "js"
É uma boa prática criar pastas para organizar
os diferentes tipos de recursos (js, css, img …)

24. Nosso Primeiro Projeto
15. Clique com o botão direito em “js"
16. Clique em “New"
17. Clique em “JavaScript File"

25. Nosso Primeiro Projeto
18. Preencha o nome com "app"
O script principal de uma aplicação
normalmente é chamado de app.js ou main.js
NÃO escreva a
extensão do
arquivo !

26. Nosso Primeiro Projeto
19. Digite esse script

27. Nosso Primeiro Projeto
20. Clique em “index.html"
21. Adicione esse bloco

28. Nosso Primeiro Projeto
Tag “pre”: Faz com que o seu conteúdo seja
exibido obedecendo sua formatação original
Tag “script”: Carrega o script localizado no
caminho informado no atributo "src"
Use caminhos relativos !
Toda tag (<tag>) deve ser fechada (</tag>)

29. Nosso Primeiro Projeto
22. Clique com o botão direito em “js"
23. Clique em “Run ‘index.html'"

30. Nosso Primeiro Projeto
FUNCIONOU !!!
Atenção à barra de endereços.
O WebStorm inicia um servidor web para exibir nossa página.
Essa ação é necessária pois há algumas funções que o
navegador não executa localmente, devido à sua política de
segurança.

31. Um pouco de sintaxe
É importante para a sabermos como
escrever nossos programas !

32. Strings
• Aspas:
• “Fulano de Tal”
• Apóstrofos :
• ‘123 Testando’

33. Strings
• Propriedades:
• length - Quantidade de caracteres
• Métodos:
• indexOf(str)
• replace(a, b)
• split(delimitador)
• substring(inicio, fim)
• toLowerCase( )
• toUpperCase( )

34. Strings
• Conversões:
• parseInt(str) - String para inteiro
• parseFloat(str) - String para float

35. Booleanos
true e false
‣ Valores falsos:
‣ false
‣ null
‣ undefined
‣ String vazio ‘’
‣ 0
‣ NaN

36. Arrays (literais)
• Vazio:
• [ ]
• new Array( )
• Com elementos:
• [‘banana’, ‘laranja’, ‘pitomba’]

37. Arrays
• Exemplo:
var carros = new Array( );
carros[0] = “Volvo”;
carros[1] = “BMW”;
carros[2] = “Mercedes”;
• Tamanho do array:
document.writeln(carros.length);
• Acessando valores:
document.writeln(carros[1]);

38. Statements

39. COMENTÁRIOS
• De linha
• // Comentário
• De bloco
• /* Comentário de 1 ou n linhas */

40. VARIÁVEIS
• var nome = expressão;
• Exemplo:
• var idade = 20;
• var pais = ‘Brasil’;

41. IF
• Exemplo:
var saldo = 10.0;
// Verificando se o saldo é suficiente
if (saldo < 0) {
document.writeln (“Saldo insuficiente”);
} else {
document.writeln (“Operação realizada”);
}

42. Operadores Relacionais
• > Maior
• >= Maior ou igual
• < Menor
• <= Menor ou igual
• == Igual
• != Diferente
• === Igual
• !== Diferente

43. cuidado com == e !=

44. ==
'' == '0' // false
0 == '' // true
0 == '0' // true
false == 'false' // false
false == '0' // true
false == undefined // false
false == null // false
null == undefined // true
' trn ' == 0 // true

45. SEMPRE use === e !==

46. ===
'' == '0' // false
0 == '' // false
0 == '0' // false
false == 'false' // false
false == '0' // false
false == undefined // false
false == null // false
null == undefined // false
' trn ' == 0 // false

47. Operadores Lógicos
• && e lógico (AND)
• || ou lógico (OR)

48. CURTO CIRCUITO

49. Curto Circuito
• Os operadores lógicos têm curto circuito
• Assim que for possível inferir o valor da expressão,
sua avaliação é interrompida
• &&:
• Assim que um valor false for encontrado toda a
expressão será false
• ||:
• Assim que um valor true for encontrado toda a
expressão será true

50. WHILE
• Exemplo:
var contador = 10;
// Contagem regressiva
while (contador >= 0) {
document.writeln(contador);
contador--;
}

51. FOR

52. FOR
• Exemplo:
for (var i = 0; i < 100; i++) {
document.writeln(i);
}
• Exemplo:
var nomes = ['fulano', 'cicrano', 'beltrano'];
for (var indice in nomes) {
document.writeln(nomes[indice]);
}

53. FUNÇÕES

54. FUNÇÕES
• Exemplo:
function soma(a, b) {
return a + b;
}
• Exemplo:
var maior = function(a, b) {
if (a > b) {
return a;
} else {
return b;
}
}
Uma variável com uma função !

55. OBJETOS
• Em JavaScript objetos guardam um
conjunto de duplas chave-valor
• Por exemplo, um objeto vôo pode ter a
seguinte chave: horário, com o valor:
“18:30”

56. OBJETOS
• Objeto vazio:
• Objeto com propriedades:
var candidato = {
nome: "Manoel da Silva",
idade: 28,
terceiroGrau: true,
cargoPretendido: "Analista de Sistemas"
}
var objeto = {}

57. OBJETOS
• Podem ser complexos:
var voo = {
companhia: "Oceanic",
numero: 815,
partida: {
aeroporto: "SYD",
horario: "22/09/2004 14:55",
cidade: "Sydney"
},
chegada: {
aeroporto: "LAX",
horario: "23/09/2004 10:42",
cidade: "Los Angeles"
}
}

58. Acessando valores
• candidato[“nome”]
• candidato.nome
• voo.partida.horario

59. Atribuindo valores
• candidato.idade = 29
• candidato[‘aprovado’] = false
• voo.situacao = ‘Desaparecido’

60. CONSTRUTORES
• Um construtor é uma função normal
que cria um novo objeto utilizando a
variável implícita this
• Um construtor deve ser sempre
chamado utilizando o comando new

61. CONSTRUTORES
function Conta(titular) {
this.titular = titular;
this.saldo = 0;
this.depositar = function(valor) {
this.saldo += valor;
};
this.sacar = function(valor) {
this.saldo -= valor;
};
this.transferir = function(outraConta, valor) {
this.sacar(valor);
outraConta.depositar(valor);
}
}

62. CONSTRUTORES
var c1 = new Conta("Pedro");
var c2 = new Conta("Maria");
c1.depositar(100);
c2.depositar(50);
c1.transferir(c2, 60);
document.writeln(c1.titular + " - R$ " + c1.saldo);
document.writeln(c2.titular + " - R$ " + c2.saldo);

63. PROTOTYPE
• Todos os objetos estão ligados a um
prototype
• Os objetos heram suas propriedades deste
prototype
• Alterando-se o prototype, altera-se todos os
objetos ligados a ele
• Todos os prototypes herdam de
Object.prototype

64. PROTOTYPE
Conta.prototype.toString = function() {
return this.titular + " - R$ " + this.saldo;
};
document.writeln(c1.toString());
document.writeln(c2.toString());

65. PROTOTYPE
Number.prototype.dinheiro = function() {
var valor = "" + this.toFixed(2);
valor = valor.replace(".", ",");
return "R$ " + valor;
}
var salario = 649.67;
document.writeln(salario.dinheiro());

66. REFLEXÃO
• typeof
• Retorna um String com o tipo de um
valor
• Exemplo:
document.writeln(typeof Conta);
document.writeln(typeof c1);
document.writeln(typeof c1.titular);
document.writeln(typeof c1.saldo);
document.writeln(typeof c1.sacar);

67. REFLEXÃO
• É possível utilizar um for para
percorrer as propriedades de um objeto:
document.writeln("Analisando o objeto c1 ...");
for (propriedade in c1) {
if (typeof c1[propriedade] === 'function') {
document.writeln(" Metodo: " + propriedade);
} else {
document.writeln(" Atributo: " + propriedade);
}
}

68. EXCEÇÕES
• O tratamento de exceções permite a
notificação (lançamento) e o tratamento
de situações de falha

69. EXCEÇÕES
• Lançamento de exceções:
• throw valor
• Exemplo:
...
this.sacar = function(valor) {
if (valor > this.saldo) {
throw "Saldo Insuficiente";
}
this.saldo -= valor;
};
...

70. EXCEÇÕES
• Tratamento:
var c1 = new Conta("Pedro");
try {
c1.sacar(500);
} catch (erro) {
document.writeln("Erro: " + erro);
}

72. NodeJS
• JavaScript no Servidor !
• Um único Thread
• Escala
• Velocidade

73. NodeJS - História
• Criado por Ryan Dahl em 2009
• Baseado no interpretador V8 do Google
• Código aberto, porém é mantido pela empresa Joyent
http://nodejs.org http://www.joyent.com

74. Próximos Passos
• Baixe o Git (e instale)
• Baixe o NodeJS (e instale)
• Vamos criar um projeto !

75. GIT ?!
• Sistema de controle de versões com excelente
suporte para projetos colaborativos
• Feito por Linus Torvalds
• Base da maior rede social / repositório de código
online - GitHub (https://github.com/)
• A maioria dos projetos open source atuais está
hospedada em algum repositório git

76. O que significa GIT ?
• Segundo o readme no código fonte do GIT:
GIT - the stupid content tracker
"git" can mean anything, depending on your mood.
- random three-letter combination that is pronounceable, and not
actually used by any common UNIX command. The fact that it is a
mispronounciation of "get" may or may not be relevant.
- stupid. contemptible and despicable. simple. Take your pick from
the dictionary of slang.
- "global information tracker": you're in a good mood, and it
actually works for you. Angels sing, and a light suddenly fills
the room.
- "goddamn idiotic truckload of sh*t": when it breaks

77. Baixe o GIT
https://git-scm.com/downloads

78. Instale o GIT
ATENÇÃO: Marque essa opção
na instalação !!!

79. Baixe o NodeJS

80. Vamos criar outro projeto !

81. Passo a Passo
1. No WebStorm criem um novo projeto:
• Tipo “Empty Project”
• Nome “projeto2"
2. No projeto2, crie um arquivo JavaScript:
• Nome: “index.js”
Isso vocês já sabem fazer ;)

82. É pra ficar assim
Mudei o tema de “Darkula” para “Default"
(acho que fica melhor para o datashow)
mexam nas configurações,tentem mudar os temas
Passe o mouse aqui nesse ícone ;)

83. Abram o terminal pelo
WebStorm
Clique em “Terminal"

84. npm init
Digite npm init
Pressione ENTER

85. npm init
• Esse comando vai configurar um novo projeto NodeJS
que utiliza pacotes npm
• Responda as perguntas:
• Pode pressionar ENTER em todas por enquanto ;)
• O npm irá criar um arquivo chamado package.json

86. Modifique o index.js
Digite esse código
LEMBRE-SE DE SALVAR !

87. Como executar ?
• Na janela do terminal você pode digitar:
• node index
• Porém vamos aprender como configurar o WebStorm

88. Abra o arquivo package.json
Vamos editar essa linha

89. Edite o arquivo package.json
Substitua por essa
Criamos um novo comando
chamado start

90. Testando o comando start
• Na janela do terminal digite:
• npm run start
Olha o Hello World aí !

91. Ensinando o WebStorm como
executar nosso comando
1. Clique aqui
2. Depois aqui

92. Ensinando o WebStorm como
executar nosso comando
3. Clique aqui

93. Ensinando o WebStorm como
executar nosso comando
4. Clique em npm

94. Ensinando o WebStorm como
executar nosso comando
5. Name: projeto2
6. Selecione o
package.json do
projeto
7. Selecione o
script start
8. Clique em OK

95. Ensinando o WebStorm como
executar nosso comando
Para executar, clique aqui ;)

96. Vamos praticar
• Edite o arquivo index.js
• Deixe como está no próximo slide

98. Exercício
• Crie um método sacar que recebe como argumento o
valor e o subtrai do saldo
• Teste esse método da seguinte forma:
• Crie uma conta c2
• Deposite 500
• Saque 75
• Exiba no console a conta c2

99. Método sacar

100. Exercício
• Crie um método transferir com os argumentos:
• valor - Valor que será transferido
• contaDestino - Conta para qual o valor será
transferido
• Crie também o código para testar o funcionamento
desse método

101. Método depositar
Por que eu chamei os métodos ao
invés de alterar o valor do saldo
diretamente ?

102. E se a conta não tiver
saldo ?
• Façam o teste, nossa classe permite sacar qualquer
quantia de dinheiro, independente do titular ter saldo
ou não;
• Como você resolveria esse problema ?

103. Método sacar 2.0

104. Leia os erros
VOCÊ deve ler e entender os erros.
Não tenha medo nem os ignore !
Arquivo e linha onde no
qual o erro foi originado
Mensagem
Local que executou o
código que acarretou
no erro

105. Módulos
• NodeJS permite organizar uma aplicação em vários
arquivos (módulos)
• Crie um nodo arquivo JavaScript chamado “conta”
• Copie a definição da classe Conta (contrutor e
métodos) para dentro desse arquivo

106. conta.js

107. index.js

108. posso executar ?
• Tente !
• Você vai ver que …
O script index não sabe o que é uma Conta.
Precisamos transformar o script conta.js em um
módulo.

109. Módulos
• Um módulo exporta seus valores, funções e objetos
utilizando:
• module.exports ou exports
• Para usar um módulo deve-se utilizar:
• require(‘caminho para o módulo’)

110. conta.js
Adicione essa linha

111. index.js Adicione essas 2 linhas

112. index.js
Use caminhos relativos

113. JSON
• JavaScript Object Notation
• Formato textual para representação de objetos
JavaScript
• Muito utilizado para troca de informações entre
aplicações
• Duas funções muito simples:
• json = JSON.stringify(obj)
• obj = JSON.parse(json)

114. Exercício
• Modifique o script index para converter o array das
contas c e c2 em um string JSON:
• Array c e c2: [c, c2]

115. Entrada e Saída
• Módulo fs
• Vamos armazenar esse string json em um arquivo
• Depois vamos carregar o array de contas desse
arquivo

116. Módulo fs
• fs = require(‘fs’)
• fs.writeFile(arquivo, conteúdo, callback)
• fs.readFile(arquivo, callback)

117. Callback ?!
• Esse é o GRANDE pulo do gato do NodeJS
• Operações demoradas, como entrada e saída, são
realizadas de modo assíncrono
• Ou seja, você diz para executar a operação e informa
uma função que será chamada quando a operação
terminar (callback)
• Essa característica torna aplicações NodeJS bastante
escaláveis

118. index.js
Arquivo contas.json criado

119. Vamos ler as contas do
arquivo ?
• Vamos modificar nosso script para carregar as contas
a partir do arquivo “contas.json"

120. index.js
Saída

122. MongoDB
• HuMONGOus (gigantesco)
• Banco NoSQL orientado a documentos
• Desenvolvido em 2007 pela 10gen

123. MongoDB - Conceitos
• Documento:
• Conjunto de dados (semelhante a um objeto)
• Os dados não precisam seguir a um esquema
• É possível criar documentos com dados simples,
compostos (outros documentos) e coleções (arrays)
• Coleções: conjunto de documentos
• Banco de Dados: conjunto de coleções

124. Próximos Passos
• Baixe o MongoDB
• https://www.mongodb.org/
• Instale o MongoDB
• Instalação simples (basta escolher o local e pronto)
• Crie a pasta padrão do banco de dados:
• C:datadb
• Execute o servidor (mongod)

125. mongo shell
• Execute o aplicativo “mongo.exe”
• No shell vamos digitar alguns comandos

126. Criar / Usar um Banco de Dados
• use nome_do_banco_de_dados
• Ex:
• use blog

127. Inserir um documento em
uma coleção
• db.nome_da_colecao.insert(objeto)
• Ex:
db.posts.insert({autor: ‘Fulano’, texto: ‘Teste’, criado_em: new Date( )})

128. Consultando todos os
documentos de uma coleção
• db.nome_da_colecao.find( )
• Ex:
• db.posts.find( )
{ "_id" : ObjectId("56ac0bcd18608059723e7bb9"), "autor" : "Fulano", "texto" : "123
Testando", "criado_em" : ISODate("2016-01-30T01:03:09.072Z") }
id criado automaticamente

129. Consultando documentos
por valor
• db.nome_da_colecao.find(objeto)
• Ex:
• db.posts.find({autor: “Fulano”})

130. Atualizando um documento
• db.nome_da_colecao.update(obj_busca, obj_atualizacao)
• Ex:
• db.posts.update({autor: “Fulano”}, {texto: “CENSURADO”})

131. Operadores de Atualização
• Realizam operações sobre os valores de um documento
• Alguns operadores:
• $inc - Incrementa o atributo pelo valor informado
• $mul - Multiplica o atributo pelo valor informado
• $set - Atribui o valor informado ao atributo
• $min - Atualiza o valor apenas se for menor que o informado
• $max - Atualiza o valor apenas se for maior que o informado

132. Operadores de Atualização
• Exemplo:
• use estoque
• db.produtos.insert({cod: 123, nome: ‘Durex’, qtd: 10})
• db.produtos.update({cod: 123}, {$inc: {qtd: -1}})
• db.produtos.find( )
{ "_id" : ObjectId("56ac0f7018608059723e7bba"), "cod" :
123, "nome" : "Durex", "qtd" : 9 }

133. Excluindo um documento
• db.nome_da_colecao.remove(objeto)
• Ex:
• db.produtos.remove({cod: 123})

134. Fechando o shell
• Digite "exit"

135. MongooseJS
• Mapeia objetos NodeJS para documentos MongoDB
• Instalação via npm
• No seu projeto, abra a janela do terminal e digite:
• npm install --save mongoose
Não feche a janela
do mongod !

136. Abra o arquivo index.js

137. Use o módulo mongoose
• var mogoose = require(‘mongoose');

138. Abra uma conexão com o
banco de dados
• mongoose.connect(‘mongodb://localhost/estoque');
endereço do host
nome do banco de dados

139. Obtenha a conexão
• var db = mongoose.connection;

140. Defina o esquema de um
produto
var ProdutoSchema = new mongoose.Schema( {
cod: Number,
nome: String,
qtd: Number
} );

141. Crie um modelo a partir do
esquema
var Produto = mongoose.model(‘Produto’, ProdutoSchema);

142. Criando um produto quando
a conexão estiver aberta
db.once(‘open’, function ( ) {
var coca = new Produto({cod: 321, nome: “Coca Cola”, qtd: 22});
coca.save(function(err) {
if (err) throw err;
console.log(“Produto criado com sucesso !”);
} );
} );

143. index.js

144. Criando uma aplicação web
client-server padrão

145. Web Client-Server Padrão
• Cliente “burro" - Apenas exibe informação
• Todo o processamento é feito no servidor
• Tecnologias:
• MongoDB + NodeJS (Jade) + ExpressJS

146. Web Client-Server Padrão
• Crie um novo projeto do tipo Node.js Express App:
nome: web1
clique em Create

147. Seu novo projeto
Execute pra ver ;)

148. Servidor funcionando
Escutando na porta 3000
Quando quiser parar o servidor
clique aqui

149. Abra um browser
Vá até esse endereço
Funcionou !!!

150. Daqui pra frente o passo a
passo é ao vivo ;)