Como deixar o Ubunto em tela cheia no Virtual Box
17 de março de 2017
nodejs
Crie um servidor seguro com NodeJS, Express e HTTPS
20 de abril de 2017

Criando um site com Node.js – parte 1

Muito tenho falado aqui no blog sobre NodeJS e a Stack MEAN. Ao lado dos frameworks Express e Angular, e do banco de dados NoSQL MongoDB, o NodeJS é perfeito para aplicações modernas e robustas, alguns dos motivos dessa stack estar crescendo a cada dia.

Muitos tutoriais na web ensinam a criação de aplicativos Hello World, mas não se aprofundam mais do que isso, mantendo o ensinamento a um nível bem básico. Quando procuramos algo mais aprofundado, achamos desde introdução à linguagem de programação com NodeJS até o desenvolvimento de Micro Redes Sociais, chats, entre outras aplicações mais complexas.
Decidi reunir o que tenho aprendido desta plataforma e passar os conceitos de criação de um site em Node. Nossa aplicação será um portal de notícias, e conterá uma conexão com um banco de dados MySQL.

Obs.: É comum usarmos o termo aplicação (ou aplicativo, app…), em vez de site. Então, quando você ler sobre o desenvolvimento de uma aplicação web, já sabe que este termo refere-se a um site.

Baixando os recursos necessários

Para este exemplo, é necessário que você tenha o Node e o instalador de pacotes NPM instalado em seu computador, assim como o banco de dados MySQL. Também usaremos o instalador de pacotes frontend, o bower, para baixar as dependências que usaremos no lado cliente de nossa aplicação (nosso site). Neste artigo, usaremos o Sistema Operacional Windows, mas você pode instalar ambos em qualquer Sistema Operacional, seguindo os artigos abaixo.

Instalando o NodeJS​

Acesse o site do NodeJS para efetuar o download. Se quiser, pode seguir o passo a passo que escrevi aqui no blog:

Instalar NodeJS e NPM

Instalando o MySQL

Acesse o site do MySQL para efetuar o seu download. Recomendo o tutorial de instalação do MySQL feito pelo Roniere Almeida, no Devmedia:

Instalando o MySQL -> Devmedia

Instalando o Bower

Apesar ser possível instalar as dependências do frontend e do backend com o npm, o Bower é um excelente recurso para o desenvolvedor web. Esta ferramenta possibilita concentrarmos todos os recursos de nosso frontend em um único diretório, sendo mais fácil acessarmos estes recursos em nossa aplicação.

Usaremos o npm para instalar o Bower. Com uma simples linha de código você realizará a instalação. Acesse o prompt (cmd) ou terminal de seu computador e digite o comando a seguir:

npm install bower -g

O parâmetro -g instalará o Bower globalmente, ou seja, em qualquer projeto que você venha a desenvolver em sua máquina.

Instalando o Microsoft Visual Studio Code

Com o Node, NPM, Bower e MySQL instalados e configurados, falta agora o editor de códigos. Você pode usar o Sublime Text, o Atom, o Notepad++… Ou até uma IDE, como o Eclipse e o NetBeans. Tenho usado o Microsoft Studio Code e tenho gostado muito dele, mas fique a vontade para usar seu software preferido para programar.

Se você ainda não tem um preferido, baixe o Microsoft Visual Studio Code, pois ficará mais fácil entender os exemplos.
Acesse o site do Microsoft Visual Studio Code, baixe o arquivo e efetue a instalação.

Criando o projeto e instalando as dependências

Para iniciar, abra o terminal ou prompt, e crie uma pasta com o nome heronews. Se estiver usando o Microsoft Studio Code, aperte as teclas Ctrl + ‘ e abrirá um prompt no próprio programa, o que auxilia muito. Para criar a pasta, digite o comando mkdir, abaixo, no diretório (pasta) C: ou em outro diretório que preferir.

C:\\> mkdir heronews

Pelo nome deu para perceber que nosso portal será um portal de notícias sobre heróis e etc, certo? Bom, é um tema que curto muito 😉.

Agora entre dentro das pasta com o comando cd.

C:\\ cd heronews

Seu prompt deve estar assim agora:

C:\\heronews> 

Todos os comandos do nosso projeto devem ser digitados neste diretório.

Para iniciar uma aplicação Node, use o comando npm init.

C:\\heronews> npm init

Você preencherá os campos solicitados no terminal para configurar o arquivo packpage.json, responsável pelas dependências e informações do seu projeto. 

  • Nome do projeto – Super Hero News
  • Versão do projeto – 1.0
  • Descrição do projeto – portal de notícias sobre super heróis
  • Main – arquivo responsável por startar (iniciar) sua aplicação. Digite app.js
  • Autor – seu nome
  • Licença – de enter
  • Tags – de enter
  • Git – de enter

Para finalizar, aperte enter novamente. Pronto, agora seu arquivo packpage.json está pronto. Abrindo seu Microsoft Studio Code (ou outro editor), importe o diretório do projeto para o programa. Você pode ver que um arquivo packpage.json foi criado na pasta do projeto.

Vamos instalar agora as dependências necessárias para este projeto. Usaremos módulos já desenvolvidos pela comunidade node para acelerar o desenvolvimento das nossa aplicação. 

Instalando as dependências para o backend

Usaremos o módulo Express, um framework poderoso do node que usaremos para configurar nosso servidor; o Engine de Views EJS; o middleware Consign para as rotas e arquivos estáticos; o middleware Body Parser para enviarmos e recebermos dados via Post; o Express Validator para validar os dados enviados pelo lado servidor dá aplicação; e o módulo MySQL para fazer inserções e consultas no banco de dados.

A maravilha do node, é que, através do npm, podemos instalar todos estes recursos com apenas um comando no prompt.

C:\\heronews> npm install express ejs consign body-parser express-validator mysql –save

O parâmetro –save salvará as informações das  dependências no arquivo packpage.json.

Espere o fim da instalação e pronto, todas as dependências para o backend de nossa aplicação está pronta. Se você verificar o diretório do projeto, verá que uma pasta node_modules foi criada no seu projeto. Se procurar, achará a pasta de cada recurso que instalou com o comando acima.

Instalando as dependências para o frontend

Agora, faremos a instalação das dependências de nosso frontend com o instalador de pacotes Bower. Para nosso frontend, usaremos a biblioteca JQuery e o framework Bootstrap para desenvolvermos o layout de nossa aplicação. 

No diretório do nosso projeto, use o comando a seguir.

C:\\heronews> bower install bootstrap

Eu sei, eu sei… Não instalamos o JQuery. Essa é uma das maravilhas do Bower. Como o Bootstrap necessita do JQuery para funcionar, o Bower reconhece a dependências do Bootstrap em relação ao JQuery e realiza o download da biblioteca sem a necessidade de inclui-la no comando de instalação.
Ao fim da instalação, uma pasta chamada bower_components é criada no diretório do projeto. Se você verificar, existem duas pastas dentro da pasta bower_componets: bootstrap e jquery.

Finalizando a primeira parte

Agora que todos os recursos e ferramentas estão instalados, podemos começar o desenvolvimento de nossa aplicação (site): Hero News – Portal de Notícias sobre Super Heróis.

Não perca a segunda parte desta série de desenvolvimento web com NodeJS.

Salvar

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *