Um “To Do” Fullstack Javascript, do Node ao React + Webpack (Parte 1)

É preciso ter um conhecimento mínimo de java script para seguir este tutorial, e é indicado a quem gostaria de aprender sobre o ciclo completo de uma aplicação 100% em javascript.

O NodeJS:

Vamos criar uma aplicação de micro serviço bastante simples, sem utilizar frameworks, conectando em um banco de dados MongoDB e tratando requisições CORS (quando a interface está em outro domínio, diferente da API).

IMPORTANTE: Para começar este projeto você precisa do Node instalado, minha sugestão é instala-lo via NVM, que vai te ajudar a gerenciar as versões do Node.

NVM: https://github.com/creationix/nvm

Porque React?

É uma biblioteca bastante versátil para criação de interfaces web dinâmicas, vamos ver alguns conceitos, como: containers, HOC e code spliting.

Para começar eu disponibilizei um repositório com varias branches, que contem as etapas da construção do APP.

https://github.com/arielpchara/full-sack-javascript

Vamos começar com a API

Como uma aplicação moderna de javascript ele precisa estar configurado como um módulo NPM, esta API precisa da versão 8.11.4 do Node use NVM para atualizar sua verão.

NPM é um gerenciador de pacotes para javascript

// cria uma pasta para o projeto
mkdir fullstack_javascript
// entra na pasta do projeto
cd fullstack_javascript
// cria uma pasta para a API
mkdir api 
// entra na pasta da API
cd api
// inicia a API como um módulo NPM
npm init -y

Isso deve criar um arquivo chamado package.json, este arquivo vai conter as informações sobre o modulo, como nome, versão, descrição. Além de ajudar a executar alguns scripts para você.

Agora adicione um arquivo chamado index.js

E insere o seguinte código:

Capturar
Script simples para iniciar um servidor em NodeJS

Para facilitar o desenvolvimento do nosso código é interessante utilizar o pacote nodemon, que detecta toda alteração do código e atualiza o servidor.

Instale: npm i -D nodemon

Para rodar o nodemon que foi instalado localmente, tem que adicionar um script no package.json.

"scripts": {
    "dev": "nodemon index.js"
}

Rode: npm run dev

O resultado no navegador é o seguinte:

Já tem o MongoDB instalado, maravilha!

Caso não tenha segue o site com instruções para isso: https://www.mongodb.com/download-center?jmp=nav#community.

Com o MongoDB devidamente instalado vamos fazer o servidor conectar com o banco de dados, leia os comentários e veja o que cada parte do código faz.

Primeira conexão ao banco de dados
Provavelmente quando você acessar o servidor vai ter alguma coisa assim:

Ok, agora vamos fazer nossa API adicionar novos documentos em nossa coleção, para isso vamos ter que fazer uma requisição com método POST e para nos ajudar, vamos usar o Postman, que pode ser adicionado como uma extensão do Chrome e ou instalado na sua maquina, veja em :

https://www.getpostman.com/

Ao fazer a requisição post o retorno será o mesmo que no navegador apenas um array vazio, isso porque não tratamos o método POST no nosso servidor, bora fazer isso.

Capturar

Capturar

Adicione a função parseBody e atualize o handleRequest

view raw

Agora nosso serviço vai receber o POST e colocar o body como um novo documento para nossa coleção.

Lembre-se o POST deve ter um body no formato JSON, vamos ver no Postman como fica:

Body > raw > JSON

Agora vejamos se o documento foi para nossa coleção:

Temos um array com um elemento, funcionou!

No nosso código tratamos também de casos não esperados para nosso serviço que deve retornar um JSON com uma mensagem de invalid request.

Concluímos esta primeira parte, com um servidor http bem simples, que aceita os métodos GET e POST, onde o GET retorna todos os item da coleção e o POST cria um novo documento.

Próximo artigo vamos adicionar o método PUT para editar o documento no banco.

 

Fonte: Ariel Pchara – Medium 

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s