Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

24
DESENVOLVENDO COM NODE.JS Prof. Romulo Fagundes Cantanhede @romulofagundes

Transcript of Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

Page 1: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

DESENVOLVENDO COM NODE.JSProf. Romulo Fagundes Cantanhede

@romulofagundes

Page 2: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

NOSSA META

NoSQL - MongoDB

Node.JS

Express

Mongoose

Mongoose Generator

https://github.com/romulofagundes/app-teste/

Page 3: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

NOSQL

…Not Only SQL… Banco de dados não relacional, aonde os dados não estão diretamente correlacionados, ou seja, com restrição de integridade (fk).

Vamos entender o MongoDB, que armazena os dados em forma de documento.

Um exemplo prático: Preciso armazenar todas as preferências do meu usuário ‘like' facebook (dinâmico). Como diferenciar filmes, de livros, gostos e afins?

Page 4: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

MONGODB

Fundada em 2007, desenvolvido em C++.

Armazena os dados em um formato JSON, com as mesmas propriedades do JSON, com atributos dinâmicos e afins.

https://www.mongodb.com/

Page 5: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

MONGODB

Melhor na prática, para entender!

Page 6: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

NODE.JS

Baseado no V8, motor de renderização de código aberto do Google.

Possui a possibilidade de usar JS do lado do servidor, com isso é possível trabalhar com requisições HTTP’s (por exemplo).

Um linguagem simples dinâmica, e muito leve! Bem como o próprio JavaScript.

https://nodejs.org/

Page 7: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

ANTES DE CONTINUAR…

O que ambos tem em comum?

MongoDB e Node.JS?

Page 8: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

EXPRESS.JS

Framework para tratamento de requisição HTTP, que se utiliza do Node.JS.

Permite meios de tratar as requisições HTTP e trabalhar de forma simplificada com tais informações.

Mantém as mesmas características do Node.JS, simples e leve.

E como começar?

http://expressjs.com/

Page 9: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

EXPRESS.JS GENERATOR

http://expressjs.com/en/starter/generator.html

$ npm install express-generator -g

$ express app-teste$ cd app-teste && npm install $ DEBUG=app-teste:* npm start

123

Page 10: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

TECNOLOGIAS DO EXPRESS.JS

Algumas tecnologias pertinentes:

Pug (Jade) - Utiliza código HTML estilo Like Python.

Express - Responsável por tratar as requisições HTTP.

Demais complementos - Trabalhar com as requisições de forma correta.

Page 11: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

MONGOOSE

Ok, ok…creio que todos já ouviram falar de Hibernate. Quem não, é uma teoria denominada Mapeamento Objeto Relacional, em resumo:

Para cada classe, eu tenho uma tabela.

Para cada atributo, eu tenho uma coluna.

Para cada registro, eu tenho uma instância.

Qual a relação com o Mongoose?

…vamos entender…http://mongoosejs.com

Page 12: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

MONGOOSE - INSTALAÇÃOPara instalar, dentro da pasta do projeto faça a seguinte "receita de bolo”: $ npm install mongoose --save

Adicionando conexão ao projeto com Express.js (db/index.js):var mongoose = require('mongoose');

var options = { db: { safe: true }, server: { auto_reconnect: true, socketOptions: { keepAlive: 1 } }};

module.exports = function () { mongoose.connect(‘mongodb://127.0.0.1:27017/teste-app',options).connection;};

var db = require('./db')();

Chame a conexão no “app.js”:

Page 13: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

MONGOOSE GENERATOR

Complemento, utilizado de forma global, para gerar os Schemas (domínios), a cada para request(controller) e serviço.

Permite gerar código pronto, de forma simplificada, com base no mongoose.

Para instalar:

$ npm install -g express-mongoose-generator

Page 14: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

EXEMPLO DO MONGOOSE GEN.

mongoose-gen -m Grupo -f descricao -rmongoose-gen -m Contato -f nome,telefone,dataNascimento:date,preferencias:array,grupo:objectId -r

var grupoRoutes = require('./routes/GrupoRoutes.js');var contatoRoutes = require(‘./routes/ContatoRoutes.js');…app.use('/grupo', grupoRoutes);app.use('/contato', contatoRoutes);

Criado 2 schema’s: Grupo e Contato (!editar contato - rel. Grupo)

Adiciona as novas rotas, no app.js:

Page 15: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

TORNANDO O EXEMPLO MAIS PRÁTICO…VUE.JS

Page 16: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

VUE.JS

Script JS, que facilita a interação do código HTML com o servidor.

Permite com isso, converter valores de um FORM para um JSON, e facilita o envio de tais informações…e o que o MongoDB armazena? E o que o Express recebe?

https://vuejs.org/

Page 17: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

VUE.JS

O Vue.JS é principalmente dividido em 3 partes:

data - Dados que serão acessados pelo código HTML, modelos e listas.

created - Função que está no ciclo de vida do Vue, para inicializar valores.

methods - Métodos que serão acessados no código HTML.

Page 18: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

VUE.JS

Jade (Pug) fileGrupo JS

Page 19: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

VUE.JS

Init

Get List

Create

Page 20: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

VUE.JS

Update

Remove

Todas as chamadas(REST) criadas pelo Mongoose Generation!

Page 21: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

FIM?

Page 22: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

CRUD CONTATO

O arquivo JS basicamente é o mesmo de grupo.

Muda principalmente o FORM, e como os campos são mapeados.

O que fazer em seguida?

Entender a busca, como tratar os valores, e como relacionar os valores entre schema’s.

Para o CRUD de contato teve um pouco mais de código…

Page 23: Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS

FIM!