Being MEVN + RESTful — Parte 0

Parte 0/3 de como construir uma aplicação MEVN + RESTful API com deploy na Heroku e GitHub Pages!

Julio Lozovei
Training Center
4 min readMay 14, 2018

--

Hoje o Node.js se tornou uma tecnologia muito utilizada no desenvolvimento web e você com certeza já ouviu falar sobre as vantagens, e das várias combinações de stacks, como o mean.js.

MEAN é um acrônimo para Mongo, Express, Angular e Node. Ou seja, é a stack com a qual sua aplicação será construída. Nos últimos anos, surgiram algumas variações dessa stack, como o MERN e mais recentemente o MEVN, onde o Angular é substituído por React e Vue, respectivamente.

Quais os benefícios de usar MEAN/MERN/MEVN?

A melhor parte de se usar essas stacks é que, tanto no server quanto no client-side, sua aplicação é construída com JavaScript; então, a manutenção não é dolorosa e um dev front-end irá saber se virar nos códigos do back-end da aplicação (e vice-versa).

Outro benefício é a agilidade e flexibilidade que você tem usando essas stacks, pois as tecnologias utilizadas são leves e já possuem o foco para o desenvolvimento ágil. Além claro da enorme comunidade de desenvolvedores que essas tecnologias possuem hoje; então é muito fácil achar diversas soluções para qualquer problema ou erro que você encontre no meio do desenvolvimento.

O que é REST e o que são web services?

Representational State Transfer, ou REST (para os íntimos), é um modelo de arquitetura para troca de informações, onde são definidas várias restrições e propriedades baseados no protocolo HTTP. Um sistema pode ser chamado de RESTful quando toda a arquitetura é aplicada e as restrições descritas pela especificação são seguidas.

Basicamente, a ideia principal do REST é a de que um recurso (documento) deve ser transferido com seu estado e relacionamentos.

Web services são soluções para comunicação e integração entre sistemas na internet. Essa arquitetura permite que as aplicações disponibilizem informações de maneira segura para outras aplicações.

Um web service sempre deverá garantir a autenticidade, privacidade e integridade da informação transitada.

Feito essa breve introdução sobre o conceito de MEAN/MERN/MEVN e RESTful APIs, agora é a hora do show!

Nesse tutorial, iremos abordar a construção de uma RESTful API em Node.js que irá transitar dados com um client-side em outro ambiente.

Nossa aplicação, como um todo, irá se comportar de forma semelhante ao Twitter — iremos publicar pequenas mensagens e mostrá-las em uma timeline. E para armazenar esses dados, iremos utilizar o MongoDB.

Para não ficar tão extenso e cansativo, dividi esse tutorial em uma introdução com mais 3 grandes partes:

  • Introdução + Requisitos (Parte 0)
  • Construir uma RESTful API em Node.js + MongoDB (Parte 1)
  • Construir o client-side utilizando Vue.js (Parte 2)
  • Fazer o deploy do client-side no GitHub Pages e do server-side na Heroku (Parte 3)

Se você nunca ouviu ou nunca utilizou alguma dessas tecnologias citadas, não tem problema! Além dos códigos e de como montar a nossa app, irei explicar algumas coisas sobre cada uma dessas tecnologias e ferramentas; também vou deixar várias referências de links úteis ao longo do texto.

Então, vamos lá!?

Requisitos

Para que gente possa começar o desenvolvimento, você precisará dos seguintes itens:

1) Node.js instalado na sua máquina

Pode ser a versão LTS (recomendada para a maioria dos usuários) ou a de desenvolvimento; você pode baixar ele nesse link: https://nodejs.org/en/download/

2) MongoDB instalado na sua máquina

Você pode baixar ele nesse link: https://www.mongodb.com/download-center na aba Community Server

3) Um Bash bacana

Eu utilizo o iTerm2 para o Mac, mas você pode escolher qualquer outro. No Windows, eu utilizava bastante do bash do próprio Git, pois ele aceita comandos UNIX — para usuários de Linux/Mac, esses comandos são nativos do próprio terminal!

4) Seu editor de texto favorito

Eu utilizo o Sublime Text 3, mas fique a vontade para utilizar qualquer outro! Se você ainda não tem um preferido, dá uma olhada nesses aqui: Atom, VS Code, Brackets; qualquer um desses será uma boa escolha!

5) Conta no GitHub

Se você ainda não tem uma conta no GitHub (como assim você não tem uma conta no GitHub?), corre lá fazer; é de graça! https://github.com/

6) GitHub Desktop instalado na sua máquina

Você pode baixar ele nesse link -> https://desktop.github.com/
Se você não quiser utilizar o GitHub Desktop, você também pode utilizar o SourceTree ou então a própria CLI do git. Esses softwares (GitHub Desktop, SourceTree) apenas servem para abstrair toda a linha de comando para uma interface amigável e mais fácil de mexer.

7) Conta na Heroku

Assim como o GitHub, a Heroku possui planos grátis para desenvolvimento. Corre lá fazer a sua: https://www.heroku.com/

Para criar a sua conta na Heroku não é preciso, mas você irá precisar de um cartão de crédito. Como iremos utilizar um add-on para o banco de dados, um dos requisitos é um cartão de crédito válido. Mas, quando chegarmos nessa parte eu explico melhor!

Se você conseguiu instalar todos os requisitos e criou suas contas no GitHub e na Heroku, parabéns; agora, estamos prontos para realmente começar a criar nosso projeto!

Nos vemos na parte 1/3!

--

--

Julio Lozovei
Training Center

Human, front-end developer, amateur musician, writer and speaker; problem solver. https://jlozovei.dev