REST - YO com MEAN

Acredito que nesse último ano você não tenha vivido em uma caverna e já deve ter ouvido falar de MEAN, isso é uma abreviatura para MongoDB + ExpressJS + AngularJS + NodeJS. Todas aquelas tecnologias que temos discutido aqui neste blog e que estão concentradas na página Novas Tecnologias. A mudança ocorrida no último ano foi usar o gerador Yeoman para criar a estrutura e os artefatos necessários para usar tudo isso sem precisar gastar horas (preciosas).

Para integrar todas essas tecnologias precisamos modificar o gerado que utilizamos até o momento, nos dois artigos que postei sobre o Yo (YO facilitando a vida Angular e Criação de Rotas com o YO), que podem ser utilizados como base para nosso projeto.

Abra uma janela de terminal e instale o gerador através do NPM com o seguinte comando:

sudo npm -g install generator-angular-fullstack

Esse gerador possui, basicamente, os mesmos comandos do generator-angular visto anteriormente, recomendo que acesse sua página oficial. Na estrutura do projeto gerado existe um diferencial que serão criadas duas camadas do projeto divididas na pasta client e na server. Do que já vimos, está tudo concentrado na pasta client, então a novidade fica a cargo dessa nova pasta server.

Para gerar o projeto, vamos seguir os mesmos passos já vistos para o outro gerador. No terminal digite os seguintes comandos:

mkdir coffeshop2
cd coffeshop2
yo angular-fullstack:app coffeshop2

Agora basta seguir o passo a passo do gerador e ir responder suas perguntas escolhendo as tecnologias com que se deseja trabalhar, observe que podemos configurar muitas coisas como o banco que pode ser o MongoDB ou SQL (MySQL ou MariaDB). Segue aqui meu roteiro, para que possamos deixar as tecnologias de modo similar:

# Client

? What would you like to write scripts with? Babel
? What would you like to write markup with? HTML
? What would you like to write stylesheets with? CSS
? What Angular router would you like to use? ngRoute
? Would you like to include Bootstrap? Yes
? Would you like to include UI Bootstrap? Yes

# Server

? What would you like to use for data modeling? Mongoose (MongoDB)
? Would you scaffold out an authentication boilerplate? Yes
? Would you like to include additional oAuth strategies? No
? Would you like to use socket.io? Yes

# Project

? Would you like to use Gulp or Grunt? Grunt
? What would you like to write tests with? Jasmine

Ao término da geração, inicie o servidor do banco MongoDB, em seguida digite o comando para executar o projeto:

grunt serve

E a seguinte janela será mostrada:

Já disse uma vez que odeio ser repetitivo, toda a estrutura contida em client é a mesma vista nos artigos anteriores. Deixarei aqui um pequeno exercício, modifique-a deixando este projeto no exato ponto em que paramos. Porém como não desejo causar qualquer confusão, façamos algo mais simples: gere o projeto conforme indicado, baixe o projeto do link abaixo e sobreponha os arquivos originais.

Baixar o Projeto do CoffeShop v2

Já procedi todas as mudanças necessárias para a primeira página e a tradução dos arquivos. É possível assinar a lista de usuários bem como proceder a administração do sistema (email: admin@example.com; senha: admin). O resultado final será este:

Atenção: Este projeto não rodará sozinho pois foram retiradas as pastas node_modules e client/bower_components. Deste modo é necessário gerar o projeto, sobrepor os arquivos e iniciar o banco MongoDB. Em breve vamos dar prosseguimento e criar a página para cadastrar os locais para se achar um bom café.

Obrigado e até a próxima
Fernando Anselmo