[TOC]
Nesse curso, será lecionada de forma prática a metodologia de desenvolvimento de aplicações WEB com recursos modernos e amplamente utilizados no mercado de trabalho. Para tal, iremos utilizar das seguintes ferramentas:
-
Github
-
ExpressJS
-
Bootstrap 4
-
Firebase
Entre diversos outros módulos adicionados ao longo desse bootcamp.
O NodeJS pode ser baixado por meio do link: https://nodejs.org/en/. Após a sua instalação, podemos agora utilizar o Node Package Manager (NPM), que consiste no maior registro de software do mundo, sendo o gerenciador de pacotes do JavaScript. Ele será utilizado no restante do curso para gestão de dependências do nosso projeto.
O ExpressJS (http://expressjs.com/pt-br/) é um framework web minimalista, que fornece uma fina camada de recursos capazes de realizar o tratamento de requisições ao nosso sistema com máximo desempenho.
Para iniciarmos o nosso projeto, utilizaremos uma ferramenta geradora de aplicativos ExpressJS, sendo essa instalada globalmente no sistema utilizando o seguinte comando no terminal:
npm install -g express-generator Após instalada, abra o terminal na pasta que irá conter o diretório do projeto e execute o seguinte comando:
express --view=hbs --css=sass smart-management O projeto será criado com a seguinte estrutura de arquivos:
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.sass
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.hbs
├── index.hbs
└── layout.hbs
Feito isso, devemos navegar até a pasta do projeto e instalar as dependências necessárias:
cd smart-management
npm install Por fim, podemos executar o nosso novo aplicativo utilizando o comando:
npm start Esse comando irá iniciar o aplicativo NodeJS por meio de um script definido no arquivo packages.json, um arquivo de configuração contendo informações relevantes sobre a aplicação e suas dependências, tal como:
-
Nome
-
Versão
-
Privacidade
-
Dependências de Desenvolvimento
-
Dependências
-
Scripts
Nosso novo aplicativo pode ser acessado pela porta 3000 da interface de rede, ou seja, pelo endereço http://localhost:3000.
Ao realizarmos modificações nos arquivos do nosso projeto, podemos verificar que esses não estão sendo atualizados pelo ExpressJS. Para que não tenhamos que reiniciar o nosso aplicativo sempre que fizermos alterações em seu código, podemos utilizar o Nodemon (https://nodemon.io/), uma ferramenta capaz de monitorar mudanças no código-fonte de uma aplicação NodeJS e automaticamente reiniciar o servidor! Ele pode ser instalado pelo comando:
npm install -g nodemon Para que ele funcione, precisamos simplesmente alterar o script npm start de execução do nosso packages.json para:
...
"scripts": {
"start": "nodemon ./bin/www"
},
... Assim, sempre que executarmos o comando npm start ele automaticamente irá iniciar o servidor com o Nodemon.
O Bootstrap (https://getbootstrap.com/) é uma biblioteca open-source para desenvolvimento front-end de aplicações WEB, facilitando a implementação ágil e responsividade do projeto. Acesse o link https://getbootstrap.com/docs/4.0/getting-started/download/ e faça o download dos códigos-fonte (Source). Além disso, o Bootstrap tem como dependência o JQuery (https://jquery.com/), outra biblioteca JavaScript amplamente utilizada para facilitar manipulação de elementos HTML, tratamento de eventos, animações e requisições assíncronas, entre outros. Ele pode ser obtido por meio do link https://code.jquery.com/jquery-3.3.1.min.js (Clique com o botão direito na página e salve o arquivo com o nome jquery.js).
Após baixarmos esses arquivos, iremos organizá-los em nosso projeto seguindo essa estrutura:
.
├── app.js
├── bin
├── package.json
├── public
│ ├── bootstrap/
│ │ ├── js/
│ │ │ └── bootstrap.bundle.js ## Encontrado em \bootstrap-4.0.0\dist\js
│ │ │ └── bootstrap.bundle.js.map ## Encontrado em \bootstrap-4.0.0\dist\js
│ │ └── scss ## Pasta completa, encontrada encontrada em \bootstrap-
│ │ ## 4.0.0\
│ ├── images
│ ├── javascripts/
│ │ └── jquery.js
│ └── stylesheets/
│ └── styles.sass
├── routes
└── views
Por fim, devemos fazer as seguintes alterações nos arquivos styles.sass e layout.hbs:
/* styles.sass */
@import ../bootstrap/scss/bootstrap.scss
...<!-- layout.hbs -->
...
<body>
{{{body}}}
<script src="/javascripts/jquery.js" charset="utf-8"></script>
<script src="/bootstrap/js/bootstrap.bundle.min.js" charset="utf-8"></script>
</body>
... Na sua versão mais recente, a biblioteca do Bootstrap deixou de trazer consigo o pacote de ícones Glyphicon e passou a permitir que o desenvolvedor use o pacote que melhor lhe convier. Portanto, utilizaremos aqui uma das recomendações do Bootstrap, o Open Iconic (https://useiconic.com/open), que pode ser baixado em sua página principal. Após fazer o download, vamos inserí-lo em nosso projeto na seguinte estrutura:
.
├── app.js
├── bin
├── package.json
├── public
│ ├── bootstrap
│ ├── images
│ ├── javascripts
│ ├── open-iconic
│ │ ├── css ## Encontrado em \open-iconic-master\font
│ │ └── fonts ## Encontrado em \open-iconic-master\font
│ └── stylesheets
├── routes
└── views
Devemos também atualizar a folha de estilo principal styles.sass:
/* styles.sass */
@import ../open-iconic/css/open-iconic-bootstrap.min.css
@import ../bootstrap/scss/bootstrap.scss
... Em nossa aplicação, iremos utilizar o Google Firebase (https://firebase.google.com/) tanto para serviço de autenticação de usuários como banco de dados NoSQL, sendo ele uma ferramenta com free tier que irá acelerar o desenvolvimento do projeto. Para instalá-lo, execute o comando:
npm install firebase --save A partir disso, a configuração desse pacote será realizada em nosso curso presencial.
O DotEnv (https://github.com/motdotla/dotenv) é um módulo independente do NodeJS capaz de injetar variáveis de ambiente criadas em um arquivo .env em process.env, de forma que essas podem ser acessadas em qualquer ponto de nossa aplicação. Será utilizada principalmente para configuração do Firebase e constantes globais utilizadas em diversos pontos do projeto. Sua instalação é feita com:
npm install dotenv --save Após, devemos criar o arquivo .env na raiz do nosso projeto, que terá a princípio um conteúdo semelhante a:
# Server Configuration
PORT=3000
# Firebase Configuration
FIREBASE_API_KEY=Asdsfgasd312345435-Asdsfgasd312345435
FIREBASE_AUTH_DOMAIN=your-project-name-123f5.firebaseapp.com
FIREBASE_DATABASE_URL=https://your-project-name-123f5.firebaseio.com
FIREBASE_PROJECT_ID=your-project-name-123f5
FIREBASE_STORAGE_BUCKET=your-project-name-123f5.appspot.com
FIREBASE_MESSAGING_SENDER_ID=515481722589
De forma que essas constantes poderiam ser acessadas com process.env.FIREBASE_API_KEY, por exemplo. Para isso, incluímos a seguinte linha no início do arquivo app.js:
require('dotenv').config() O ESLint (https://eslint.org/) é um projeto open source que fornece uma ferramenta modular capaz de realizar o linting de códigos JavaScript, isso é, capaz de analisar o código em busca de possíveis erros de programação e evidenciar esses. Para instalá-lo, deve-se executar os seguintes comandos:
npm install --save-dev eslint eslint-plugin-import eslint-config-airbnb-base Após isso, edite o arquivo packages.json e insira as seguintes configurações:
"eslintConfig": {
"extends": "airbnb-base",
"env": {
"es6": true,
"browser": false
},
"rules": {
"no-console": [
"off"
],
"brace-style": [
"error",
"stroustrup"
],
"comma-dangle": [
"error",
"never"
],
"no-unused-vars": [
"warn"
],
"no-var": [
"off"
],
"one-var": [
"off"
],
"linebreak-style": [
"off"
]
}
} Feito isso, é preciso reiniciar a sua IDE para visualizar os efeitos do ESLint.
O body-parser (https://github.com/expressjs/body-parser) é um middleware de NodeJS responsável por fazer o parsing do corpo de requisições enviadas ao servidor ExpressJS, ou seja, de transformar o corpo das requisições em um objeto javascript utilizável. Para instalá-lo, devemos utilizar o comando:
npm install body-parser --save Após isso, dentro do arquivo app.js, devemos substituir as linhas:
app.use(express.urlencoded({ extended: false }));
app.use(express.json());por
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json()); Além de importar a biblioteca:
const bodyParser = require('body-parser'); O express-session (https://github.com/expressjs/session) é o módulo responsável por criar um middleware de sessão para nossa aplicação, onde serão armazenados dados do usuário. Para instalá-lo, execute:
npm install express-session --save Após isso, importe o módulo no arquivo base do projeto:
const session = require('express-session');
...
app.use(cookieParser());
app.use(session({
secret: 'some-private-cpe-key',
key: 'cpe'
}));
...