A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Criando aplicações web com Node.js Charles

Apresentações semelhantes


Apresentação em tema: "Criando aplicações web com Node.js Charles"— Transcrição da apresentação:

1 Criando aplicações web com Node.js Charles

2 Referências nodejs.org https://github.com/expressjs/body-parser https://github.com/expressjs/session Livro: Node.js: aplicações web real-time com Node.js –Caio Ribeiro –Casa do código

3 Código fonte da solução https://github.com/charlesviegas/minicurso-nodejs.git

4 INTRODUÇÃO AO NODE.JS

5 O que é o Node.js? Javascript no lado do servidor Construído sobre o engine V8 do Chrome Executa por linha de comando Projetado para alta concorrência Single thread Não bloqueante Utiliza o framework CommonsJS

6 Não bloqueia IO Esperar pedidos de I/O degrada a performance. O Node usa evento em JS para anexar retornos a chamadas de IO.

7 Exemplo BLOQUEANTE... String sql = "SELECT c FROM Contato"; Query q= em.createQuery(sql); List result = query.getResultList();... String sql = "SELECT c FROM Contato"; Query q= em.createQuery(sql); List result = query.getResultList();... NÃO BLOQUEANTE … var callback = function(err, rows) { if(err) throw err; console.log(rows); }); con.query("SELECT * FROM Contato", callback); … var callback = function(err, rows) { if(err) throw err; console.log(rows); }); con.query("SELECT * FROM Contato", callback); …

8 Event Loop Ao invés de threads, o Node usa um loop de eventos, aliviando o overhead da troca de contexto.

9 Instalação e Configuração Acesse o site Faça download do executável e instale de forma padrão Verifique se a instalação funcionou corretamente executando os comandos: –node –version –npm --version

10 Prática 1 - Olá Javaneiros Abra o terminal e navegue para a pasta: –curso\pratica1 Execute o comando: node olajavaneiros.js –Observe a saída no próprio terminal Execute o comando: node olajavaneiroshttp.js –Abra seu navegador e acesse a url impressa no terminal

11 NPM Node Package Manager –Gerencia os módulos do node, baixando da web os módulos e suas dependências Baseado em linha de comando –npm install nome_do_modulo --save –npm install – g nome_do_modulo –npm remove nome_do_modulo –npm update nome_do_modulo –npm list

12 package.json O Node utiliza o arquivo package.json para descrever os metadados do projeto. –Nome, versão, dependências Deve estar presente na pasta raiz de cada projeto.

13 package.json { "name": “nome_do_projeto", "description": "Meu primeiro app em Node.js", "author": “Charles Viegas ", "version": "1.0.0", "private": true, "dependencies": { "modulo-1": "1.0.0", "modulo-2": "~1.0.0", "modulo-3": ">=1.0.0" }, "devDependencies": { "modulo-4": "*" }

14 Prática 2 - Criando o package.json Durante o curso iremos criar uma pequena aplicação para controlar uma lista de presentes para casamento. Crie a pasta raiz: –Nome: casalista Crie dentro da pasta o arquivo: –Nome: package.json –Conteúdo: name, description, author, version e private Execute dentro da pasta raiz o seguinte comando: –npm install

15 Prática 2 - Criando o package.json { "name": “casalista", "description": “App para lista de casamento em Node.js", "author": “Seu Nome ", "version": "1.0.0", "private": true }

16 Objetos globais global: assim como nos browsers o Node também possui um contexto de alto nível. process: contém os dados do processo de execução. console: usado para imprimir mensagens nas saídas de fluxo padrões. Buffer: usado para manipular dados binários. require: usado para importação de módulos

17 Objetos globais __filename: o nome do arquivo que está sendo executado __dirname: o nome do diretório que reside o arquivo que está sendo executado. module: uma referência para o módulo corrente.

18 CommonJS O Node utiliza nativamente o padrão CommonJS para organização e carregamento dos módulos. module.exports = function(msg){ console.log(msg); } modulo2.js var m2 = require(“./modulo2.js”); m2(“Ola Javaneiros”); modulo1.js

19 DOMINANDO EXPRESS

20 O que é o Express? Escrever código usando a API HTTP do Node é muito trabalhoso. O Express é um módulo para desenvolvimento de aplicações web de grande escala.

21 Características do Express MVR (Model-View-Routes) MVC (Model-View-Controller) Roteamento de urls via callbacks Middleware Interface RESTFul Suporte a File Uploads Integração com Template Engines

22 Módulos do Express A partir da versão 4, o Express passou a ser distribuído em vários módulos, sendo eles: –express: Módulo principal do express. –express-load: Carregamento dinâmico de arquivos JS. –express-session: Controle de sessões do usuário. –method-override: Traduz método POST para PUT e DELETE. –body-parser: Parser de campos do html para objeto JSON. –cookie-parser: Parser de cookie para objeto JSON. –ejs: Engine de template.

23 Prática 3 - Instalando o express Altere o seu package.json incluindo como dependência as últimas versões dos módulos: –express, express-load, express-session, method-override, body- parser, cookie-parser e ejs Dentro da pasta raiz execute o comando: –npm install O npm vai criar a pasta node_modules e dentro delas todos os seus módulos

24 Prática 4 – Criando as pastas do projeto Copie para a pasta raiz do seu projeto a estrutura de pastas e arquivos definida em curso\pratica4

25 Prática 4 – Criando as pastas do projeto controllers: vai conter os nossos controladores (MVC). routes: vai conter os nossos roteadores. public: vai conter os css e imagens. views: vai conter as nossas views (MVC). app.js: arquivo JS principal do nosso projeto. Atenção: por questões de simplificação não teremos o model (MVC) neste curso.

26 Iniciando um servidor Express // Importa e instancia um servidor express var express = require("express"), app = express(); // Configurações futuras // Sobe o servidor HTTP na posta 3000 app.listen(3000, function () { console.log(“Servidor está no ar."); });

27 Prática 5 – Iniciando um servidor express Conforme exemplo anterior altere o arquivo app.js Execute o comando: –node app.js Abra o navegador no endereço: Você deve receber a mensagem: Cannot GET /

28 Definindo views... // Configurações futuras // Define a pasta onde irão ficar as views app.set("views", __dirname + "/views"); // Define o template engine usado nas views app.set("view engine", "ejs");...

29 Definindo conteúdo estático // Configurações futuras... // Define a pasta public para conteúdo estático app.use(express.static(__dirname + "/public"));...

30 Definindo as rota inicial // Configurações futuras... // Responde ao acessar o localhost:3000/ app.use("/", function(req, res){ res.send("Ola Javaneiros"); });...

31 Prática 6 – Definindo views, conteúdo estático e rota inicial Altere o arquivo app.js com os passos feitos nos últimos três slides. Reinicie o node visualizar as alterações. Para ver os resultados, abra seu navegador no endereço Para testar o conteúdo estático abra também o endereço

32 Express-load Utilizaremos o express-load que carrega modulos dentro da instância do express simplementes informando a pasta onde estas scripts estão. Portanto, ao invés de usar o require(“nome_do_modulo”), nós utilizaremos o express-load para esta função.

33 Express-load // Importa o módulo express-load var express = require("express"), load = require("express-load"), app = express();... // Carrega todas as scripts da pasta controller e routes load("controllers").then("routes").into(app);

34 Prática 7 – Express-load Adicione o express-load conforme slides anteriores. Reinicie o node visualizar as alterações.

35 Criando Roteadores app.use("/", function(req, res){ res.send("Ola Javaneiros"); }); É comum que os roteamento no express fiquem separados em módulos externos para melhorar a legibilidade do código. Portanto iremos remover o código abaixo da app.js:

36 Criando Roteadores module.exports = function (app) { var home = app.controllers.home; app.get("/", home.index); app.post("/entrar", home.entrar); }; E criaremos um módulo a parte só para roteamento.

37 Criando Controladores module.exports = function (app) { var HomeController = { index: function (req, res) { res.render("home"); }, entrar: function (req, res) { } }; return HomeController; }; Os controladores controlam a sequência de execução e a navegação entre as páginas. Também é recomendável a separação da sua lógica num módulo separado.

38 Prática 8 – Roteadores e Controladores Crie os roteadores e controladores conforme slides anteriores.

39 Criando views com EJS Para criação das Views utilizaremos o EJS. O EJS permite imprimir o conteúdo de objetos JSON em partes do html Também permite a inclusão de loops, estruturas condições e includes

40 Criando views com EJS Organizaremos nosso código da seguinte forma: –header.ejs –footer.ejs –home.ejs

41 header.ejs Javaneiros - Lista de presentes de casamento

42 footer.ejs Javaneiros 2014

43 home.ejs Lista de presentes


Carregar ppt "Criando aplicações web com Node.js Charles"

Apresentações semelhantes


Anúncios Google