Advertisement
  1. Code
  2. Web Development

Introdução ao Conjunto MEAN

by
Read Time:5 minsLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Construir aplicações para web involve o uso de diversas tecnologias e ferramentas, trabalhar com manipulação de bases de dados, operações do lado do servidor e, também, a manipulação e exibição de dados no lado do cliente, advindos do servidor. Antes de começar um novo projeto, todas as ferramentas e estruturas do projeto precisam ser configuradas, o que é uma tarefa bastante demorada. Usar uma framework ou um conjunto de ferramentas para esse tipo de tarefa pode acelerar e facilitar o trabalho do desenvolvedor.

O que é MEAN

"MEAN é um conjunto de soluções em JavaScript para aplicações web modernas".

É isso o que os autores do conjunto MEAN afirmam em seu site. Está bem claro que o MEAN foca em todos os tipos de desenvolvedores JavaScript (tanto do lado cliente quanto do servidor) e também mostra que, além de um conjunto, é uma plataforma, indicando que há vários componentes que o constitui.

Os componentes são:

Como pode ver, o MEAN junta quatro das tecnologias mais apreciadas no ambiente JavaScript, preparando a fundação para a construção de aplicações web mais complexas de forma mais fácil.

Instalação

O conjunto MEAN pode ser instalado de duas formas:

Instalando o MEAN Usando O Site

Visite o site mean.io e siga as instruções para o download do pacote.

Outra opção disponível a partir daqui é clonar o repositório Git. Abra seu terminal/linha de comando e digite o comando a seguir:

Instalando o MEAN Usando Yeoman

Existem vários geradores do Yeoman, criados por diferentes e diversos desenvolvedores. Usar um gerador para instalar o MEAN é um processo de dois passos. Primeiro, instale o gerador:

Então, use o comando yo para criar o app:

O exemplo acima assume que o gerador meanstack, bem como o Yeoman estejam instalados. Para uma lista de geradores MEAN, consulte esse link e filtre pelo termo "mean". Para informações sobre a instalação do Yeoman, consulte o site do Yeoman.

Addy Osmani publicou um post muito interessante sobre o conjunto MEAN e os geradores Yeoman. Recomendo, fortemente, a leitura desse post, para descobrir como instalar, sem problemas, usando os geradores.

Para os propósitos desse artigo, utilizarei a abordagem da clonagem do repositório do Git.

Pós-Instalação

Após a instalação, acesse o diretório da instalação do MEAN (ainda no terminal, use cd) e execute o comando grunt (você deve ter o grunt-cli instalado). Esse comando iniciará um servidor que rodará/escutará na porta 3000, de forma que, ao visitar o endereço http://localhost:3000 em seu navegador, você verá algo mais ou menos assim:

O Que Obtemos Após a Instalação

O conjunto MEAN é, na verdade, um sistema de blog funcional. Ele possui sistema de autenticação que pode utilizar vários meios: Facebook, GitHub, Twitter ou Google e, também, através do boa e velha dupla e-mail e senha.

Creio que já esteja curioso para ver algum código, não é? Então, vejamos. A estrutura do diretório do conjunto MEAN deve ser algo parecido com isso:

O Lado do Servidor

A parte do servidor é divida em dois diretórios e um arquivo:

  • Diretório app - conterá os controladores, modelos e visões que compõem sua aplicação
  • Diretório config - conterá os arquivos que controlam como as partes do aplicativo se comportam
  • server.js - é a "porta de entrada" da aplicação

Vejamos cada um, em detalhes:

O Arquivo server.js

Esse é o arquivo que inicializa toda sua apliação. Se não quiser usar o grunt você pode usar o comando node server.js para inicializar o servidor.

O arquivo server.js é responsável por:

  • Carregar a configuração. Os arquivos para configurar a aplicação em si, os métodos de autenticação e a conexão com base de dados são carregados.
  • Inicialização dos modelos. Se dá através leitura do diretório (e subdiretórios) dos modelos e carregando todos os arquivos existentes.
  • Inicialização do passport
  • Inicialização do express
  • Configuração do express
  • Configuração das rotas do express
  • Inicialização porta configurada a ser escutada.

O Diretório config

Esse diretório contem os arquivos de configuração da aplicação. Dentro dele você encontrará a pasta env contendo as configurações para os ambientes de desenvolvimento, testes e produção da aplicação.

Também encontrará arquivos contendo as configurações da aplicação em si, da parte do express e do passport, esse último responsável pelo sistema de autenticação e acesso.

O Diretório app

Dentro do diretório app reside todo o código do servidor. Esse diretório contem sub-pastas para os controladores, modelos e visões que compõem a aplicação MVC do servidor, além das rotas existentes.

Por padrão, há controladores para artigos, usuários e um arquivo index para a rota raiz. Também há modelos para os artigos, usuários e rota raiz que são criados durante a instalação.

Em relação às visões padrões, é criada a estrutura a seguir:

O diretório includes contém as partes relacionadas ao rodapé e cabeçalho que serão inseridas nas páginas do aplicativo. A pasta layout contém o HTML base para o layout da página. Esse layout é estendido pelo arquivo index.html da pasta views.

A pasta users contém o HTML para o login, cadastro e autenticação.

Na raiz do diretório views, vive o arquivo index.html. Também há arquivos correspondentes aos erros 404 e 500.

O Lado Cliente

O código que ficará a cargo do lado cliente fica no diretório public. Essa pasta contém uma sub-pasta chamada css para os estilos da aplicação, e uma outra, img, onde ficarão as imagens da aplicação.

Preste atenção especial ao diretório js que contém o código do Angular relativo ao lado cliente do aplicativo, o código de inicialização, algumas diretivas e filtros (no momento da criação, em branco) e os controladores e serviços para os artigos e cabeçalho da aplicação. O diretório views contém o código HTML para a criação, edição e exibição dos artigos.

Finalmente, o diretório lib contém o código da biblioteca Angular.

Testando a Aplicação

O diretório test contem os arquivos necessários para testar a aplicação. Há os testes para testar a parte relacionada ao servidor, usando Mocha, e os para testar a parte relacionada ao cliente, usando Karma.

Ferramentas Disponíveis

Sendo desenvolvedor do conjunto MEAN, você terá acesso ao npm, bower e ao grunt, que deveriam estar instalados.

Algo importante a mencionar é que o JSHint está disponível e todo o código JavaScript é verificado. além disso, ao usar o Grunt, o projeto pode ser verificado em busca de modificações e reconstruído automaticamente.

Conclusão

Esse artigo deverá ter uma continuação, onde uma aplicação completa será construída, baseada no conjunto MEAN, mostrando como podemos configurar e adaptá-lo para uso em outros tipos de aplicações.

Fique de olho pela segunda parte!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.