Dê o próximo passo e inicie sua carreira
Dê o próximo passo e inicie sua carreira agora mesmo
7 minutos de leitura
Autor(a)
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Esse é o terceiro post que estou fazendo sobre JavaScript utilizando o Node.JS como plataforma. No primeiro aprendemos a e no segundo vimos . Agora veremos como criar o servidor com o HapiJS, um concorrente do ExpressJS, que gostei de usar, acho que vou adicionar um apêndice com coisas do HapiJS no . :-)
Boas práticas com JavaScript e jQuery: código não-obstrusivo
Ler mais
Conhecendo playgrounds de bibliotecas front-end
Ler mais
Como o Lazy Loading pode melhorar o desempenho da minha aplicação Angular?
Ler mais
Nesse post nos vamos criar um pequeno projeto com 3 URLs:
Para conseguirmos responder às 3 rotas que vimos acima, primeiro precisamos preparar o campo criando um servidor web. Para isso, criaremos um arquivo server.js que ficará dentro de uma pasta chamada app. Por favor, crie a pasta app no Desktop (Área de trabalho).
Dentro do nosso arquivo server.js faremos o código responsável por criar o nosso servidor HTTP com HapiJS:
const Hapi = require('hapi') const server = new Hapi.Server() const config = { port : 3000, host: 'localhost' }
server.connection(config)
server.start((err) => { if (err) { throw err }
console.log(\`Server rodando em: ${server.info.uri}\`); console.log('Para derrubar o servidor: ctrl + c'); })
Com o código finalizado e salvo, podemos pedir para o NodeJS executá-lo. Abra o terminal e execute as seguintes linhas:
~$ cd ~/Desktop/app ~/Desktop/app$ node server.js
Infelizmente após rodarmos o segundo comando receberemos uma mensagem de erro :-(
module.js:471 throw err; ^
Error: Cannot find module 'hapi' at Function.Module.\_resolveFilename (module.js:469:15) at Function.Module.\_load (module.js:417:25) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object.<anonymous> (/Users/marcobrunobr/gh/posts/teste-hapijs/server.js:1:76) at Module.\_compile (module.js:570:32) at Object.Module.\_extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module.\_load (module.js:438:3)
``` **Obs:** Talvez seja necessário você utilizar o scroll horizontal para ver toda a mensagem de erro.
Mesmo as mensagens de erro de JavaScript executados do lado do servidor não são amigáveis. Felizmente desta vez temos uma boa pista do que fizemos de errado:
```shell
Error: Cannot find module 'hapi
É isso aí, nós não instalamos e definimos o hapi como dependência do nosso projeto. Bora resolver esse problema. Primeiro precisamos criar um arquivo chamado package.json que tem a reponsabilidade de cuidar das informações do nosso projeto e suas dependências. Para criar o nosso package.json vamos rodar o comando abaixo dentro do diretório do projeto no terminal:
~/Desktop/app$ npm init
Após rodar esse comando teremos que responder à algumas perguntas como (name, version, description, entry point, test command, git repository, keywords, author and license) referente ao projeto. Após respondermos estas perguntas, teremos o package.json dentro da pasta do nosso projeto. O conteúdo do package.json deverá ser algo parecido com isso:
{ "name": "app", "version": "1.0.0", "description": "", "main": "server.js", "scripts": { "test": "echo \\"Error: no test specified\\" && exit 1", "start": "node server.js" }, "author": "Marco Bruno", "license": "ISC" }
Pronto! Com o package.json criado podemos instalar o HapiJS e defini-lo como dependência do nosso projeto. Para fazemos isso, é bem simples, basta executarmos a seguinte linha no terminal:
~/Desktop/app$ npm install hapi --save
Após a instalação ter sido finalizada, teremos 3 linhas a mais no nosso package.json: ```javascript "dependencies": { "hapi": "^16.1.1" }
Será que agora conseguimos subir o nosso servidor de boas. Volter ao terminal e execute o seguinte comando para o NodeJS executar o arquivo **server.js**:
```shell
~/Desktop/app$ node server.js
Se tudo der certo você terá a seguinte saída no terminal:
Server rodando em: http://localhost:3000 Para derrubar o servidor: ctrl + c
Se você abrir o browser (navegador) e tentar utilizar o servidor que acabamos de criar pela URL http://localhost:3000/, receberá como resposta um json elegante:
{"statusCode":404,"error":"Not Found"}
Este json aparece pois ainda não temos nenhuma rota que responda a esta URL.
Com o nosso servidor criado podemos construir as 3 rotas do nosso pequeno projeto. Vamos começar criando a rota para a Home. Abra o arquivo server.js e adicione as 7 linhas abaixo da linha que passamos as configurações do nosso servidor:
const Hapi = require('hapi') const server = new Hapi.Server() const config = { port : 3000, host: 'localhost' }
server.connection(config)
// Aqui criamos a rota server.route({ method : 'GET', path : '/', handler : (req, res) => { res('Hello!') } })
server.start((err) => { if (err) { throw err }
console.log(\`Server rodando em: ${server.info.uri}\`); console.log('Para derrubar o servidor: ctrl + c'); })
Antes de ir ao browser, precisamos derrubar o servidor apertando as teclas CTRL e c juntas, e em seguida rodar o comando abaixo para subir o servidor novamente:
~/Desktop/app$ node server.js
Agora sim, vá até o browser e acesse http://localhost:3000/, você deverá ter como resposta um texto com o conteúdo Hello!.
Show! Agora podemos criar a nossa segunda rota que irá responder para o path /contato. Precisamos novamente abrir o arquivo server.js e adicionar algumas linhas após o código responsável pela rota da home:
const Hapi = require('hapi') const server = new Hapi.Server() const config = { port : 3000, host: 'localhost' }
server.connection(config)
server.route({ method : 'GET', path : '/', handler : (req, res) => { res('Hello!') } })
// Criamos aqui a segunda rota server.route({ method : 'GET', path : '/contato', handler : (req, res) => { res(\` <h1>Contato</h1>
<form action="/contato" method="POST"> <label for="email">Email:</label> <input type="email" name="email" id="email">
<label for="mensagem">Mensagem:</label> <textarea name="mensagem" id="mensagem"></textarea>
<input type="submit" value="Enviar"> </form> \`) } })
server.start((err) => { if (err) { throw err }
console.log(\`Server rodando em: ${server.info.uri}\`); console.log('Para derrubar o servidor: ctrl + c'); })
Todas vez que nós mudarmos o arquivo server.js precisamos derrubar o servidor pressionando as teclas CTRL e c juntas, em seguida executar o comando reponsável por subir o servidor com o código atualizado:
~/Desktop/app$ node server.js
Indo até o browser e acessando a URL http://localhost:3000/contato você terá como resposta um form bem simples e com um layout feito como este:
Clicando no botão enviar do formulário seremos enviados para a mesma rota que nós estamos mas com o método POST. Como não criamos um código para responder a essa rota, veremos como resposta o elegante JSON de 404 no nosso browser: {"statusCode":404,"error":"Not Found"}
Para resolvermos esse problema precisamos criar a nossa rota dentro do arquivo server.js. Nesse arquivo vamos adicionar outras 7 linhas após o código responsável pela rota do formulário:
const Hapi = require('hapi') const server = new Hapi.Server() const config = { port : 3000, host: 'localhost' }
server.connection(config)
server.route({ method : 'GET', path : '/', handler : (req, res) => { res('Hello!') } })
server.route({ method : 'GET', path : '/contato', handler : (req, res) => { res(\` <h1>Contato</h1>
<form action="/contato" method="POST"> <label for="email">Email:</label> <input type="email" name="email" id="email">
<label for="mensagem">Mensagem:</label> <textarea name="mensagem" id="mensagem"></textarea>
<input type="submit" value="Enviar"> </form> \`) } })
// Criando a última rota server.route({ method : 'POST', path : '/contato', handler : (req, res) => { res('<h1>Precisamos aprender a pegar os valores que o usuário digitou!</h1>') } })
server.start((err) => { if (err) { throw err }
console.log(\`Server rodando em: ${server.info.uri}\`); console.log('Para derrubar o servidor: ctrl + c'); })
Se você for até o terminal e reiniciar o servidor teremos a nossa rota com o método POST criada e pronta para ser utilizada. Volte ao browser, acesse o formulário e logo em seguida clique no botão enviar. Desta vez não teremos mais o erro, nossa resposta será a seguinte mensagem:
Precisamos aprender a pegar os valores que o usuário digitou!
Ser tiver qualquer dúvida ou o seu código do post não funcionou, por favor não deixe de perguntar pelo comentário ou se preferir pode me adicionar nas redes socias da vida, você vai conseguir me achar por MarcoBrunoBR. Até o próximo post sobre KoaJS.
Avalie este artigo