Construindo uma Aplicação E-commerce com MEAN by Novatec Editora

Adrian Mejia

Novatec

Copyright © Packt Publishing 2015. First published in the English language under the title “Building an E-Commerce Application with MEAN” (9781785286551) Copyright © Packt Publishing 2015. Publicação original em inglês intitulada “Building an E-Commerce Application with MEAN” (9781785286551) Esta tradução é publicada e vendida com a permissão da Packt Publishing. © Novatec Editora Ltda. 2016. Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. É proibida a reprodução desta obra, mesmo parcial, por qualquer processo, sem prévia autorização, por escrito, do autor e da Editora. Editor: Rubens Prates PY20160606 Tradução: Henrique Cesar Ulbrich Assistente editorial: Priscila Yoshimatsu Revisão gramatical: Sandro Andretta Editoração eletrônica: Carolina Kuwabata ISBN: 978-85-7522-509-7 Histórico de impressões: Junho/2016

Primeira edição

Novatec Editora Ltda. Rua Luís Antônio dos Santos 110 02460-000 – São Paulo, SP – Brasil Tel.: +55 11 2959-6529 E-mail: novatec@novatec.com.br Site: novatec.com.br Twitter: twitter.com/novateceditora Facebook: facebook.com/novatec LinkedIn: linkedin.com/in/novatec

capítulo 1

Fundamentos do MEAN

Para construir uma aplicação de e-commerce poderosa e interativa, a lógica de negócios deve ser deslocada para os usuários, algo conhecido como thick clients1. O JavaScript presta-se muito bem para a tarefa, pois é a linguagem nativa de toda a web. Qualquer navegador em qualquer dispositivo suporta JavaScript nativamente, sem precisar de plugins. Além disso, podemos aprimorar drasticamente a interatividade e o desempenho de uma aplicação web se empregarmos nela JavaScript e HTML5. Em vez de renderizar a página toda e transferi-la por completo cada vez que o usuário clica em algo (como acontece nas linguagens tradicionais que rodam no servidor), podemos fazer chamadas assíncronas para obter dados do servidor e renderizar apenas o que for necessário. O conjunto de tecnologias MEAN (MongoDB, ExpressJS, AngularJS e NodeJS), como você já deve saber, é uma pilha completa de desenvolvimento, o que se costuma chamar de full stack. Usar uma única linguagem de programação, tanto no cliente como no servidor, no banco de dados e em todas as camadas intermediárias, oferece inúmeras vantagens, que discutiremos mais adiante. Algumas empresas, como Walmart, Groupon, Netflix e PayPal, desistiram de frameworks tradicionais de nível corporativo, enterprise, como o Spring MVC do Java e o Ruby on Rails, e abraçaram de corpo e alma o NodeJS e os thick clients em JavaScript. A mudança melhorou não apenas a produtividade, mas também o 1 N. do T.: “Thick Clients”, também chamados de “Fat Clients”, são sistemas ou aplicações cujas diversas funcionalidades e tarefas são executadas no lado do cliente e não no servidor. Por exemplo, é possível ter um sistema de contabilidade “de servidor” que faz todo o processamento no servidor e só envia ao usuário os resultados. Nesse cenário, o aplicativo que recebe os dados é chamado de “Thin Client” (cliente magro), pois é um programa bem simples que serve apenas para exibir dados. Por outro lado, pode haver outro sistema de contabilidade, de outro fornecedor, em que o processamento é todo feito no computador do usuário – o servidor existe apenas para guardar e enviar dados. Nesse caso, o aplicativo presente no computador do usuário não pode ser apenas um mero visualizador de dados, mas sim conter toda a lógica de processamento. Por isso, precisa ser muito maior, um “Fat Client” (cliente gordo).

Capítulo 1 ■ Fundamentos do MEAN

desempenho! Todos esses usuários do NodeJS reportaram um aumento na taxa de solicitações por segundo e uma sensível diminuição no tempo de desenvolvimento. Espero que você esteja tão empolgado quanto eu para construir uma aplicação de e-commerce usando tecnologia no estado da arte, como é o caso do MEAN, com a ajuda deste livro. No final, não apenas teremos aprendido muito a respeito do MEAN e do e-commerce, como também conheceremos as melhores práticas para desenvolvê-los. E nos familiarizaremos com conceitos como metodologias ágeis (Agile), desenvolvimento por iteração, maratonas de desenvolvimento veloz (sprint), integração contínua, desenvolvimento guiado por testes (Test Driven Development – TDD) e implementação (deployment) da aplicação em ambiente de produção. Começaremos com uma visão geral neste primeiro capítulo e depois aprofundaremos nosso entendimento em cada um dos componentes da pilha MEAN. Os tópicos abordados neste capítulo são: • Instalação dos componentes do MEAN • Estrutura do projeto • Visão geral do aplicativo desenvolvido ao longo do livro • Requisitos básicos de aplicações para e-commerce

Introdução ao MEAN MEAN é mais que um acrônimo. Essa pilha de tecnologias oferece as seguintes vantagens sobre as alternativas tradicionais como o LAMP (Linux, Apache, MySQL e PHP) e outras soluções também baseadas em pilhas: • Programação assíncrona (I/O não blocante baseado em eventos), que se traduz em alto volume de processamento e grande escalabilidade • Uma única linguagem de programação é usada em todo o projeto, o que se traduz em desenvolvimento rápido e facilidade de aprendizado • A existência de uma comunidade vibrante e engajada no aprimoramento do MEAN – por exemplo, a quantidade de módulos instaláveis pelo NPM cresceu muito mais rapidamente do que em qualquer outra linguagem ou framework até hoje • Excelente para APIs baseadas em JSON, aplicações de uma única página (Single-Page Applications – SPAs) e aplicações em tempo real

Construindo uma Aplicação E-commerce com MEAN

Obviamente, como em qualquer outra solução, há também desvantagens, mas elas podem ser amenizadas: • Uso intensivo de CPU e threads: o NodeJS não é apropriado para aplicações que precisem lidar com uso intensivo de CPU e I/O de baixo desempenho2. Exemplos desse tipo de aplicação são codificação de vídeo e inteligência artificial, que são provavelmente melhor atendidas com C/C++. O NodeJS suporta extensões e complementos em C++ (no jargão do NodeJS, add-ons), portanto é possível integrar essas linguagens com máxima conveniência, facilidade e desempenho em projetos MEAN sempre que necessário. No geral, é assim que as SPAs (e a pilha MEAN) funcionam: quando uma solicitação do cliente, partindo do navegador, chega ao servidor, o primeiro componente a recebê-la é o servidor web do ExpressJS, que roda sobre a plataforma NodeJS e conecta-se, se necessário, ao banco de dados MongoDB. Por fim, o ExpressJS devolve, como resposta à solicitação do cliente, uma aplicação AngularJS. A partir daí, todas as solicitações subsequentes feitas pelo navegador do usuário são respondidas por um canal especial em AJAX que liga a aplicação a uma API implementada no ExpressJS. O AngularJS renderiza imediatamente qualquer novo dado e evita que a página precise ser recarregada por completo.

Figura 1.1 – Componentes do MEAN. 2 N. do T.: Embora o autor tenha passado rapidamente por esse trecho, pelo contexto entendemos que ele está se referindo tanto a dispositivos de I/O de baixo desempenho como a dispositivos de alto desempenho que estejam operando em seu limite. A propósito, neste livro usamos o termo I/O (Input/Output) pela sua aceitação, mas há um equivalente consagrado em português que, infelizmente, está caindo em desuso: E/S (Entrada/Saída).

Capítulo 1 ■ Fundamentos do MEAN

Vejamos cada um dos componentes individualmente.

NodeJS O NodeJS é uma plataforma que permite rodar código em JavaScript no servidor, fora do navegador, e foi desenvolvido sobre o ambiente JavaScript do navegador Google Chrome, conhecido como V8. Graças a seu modelo baseado em eventos e de I/O não blocante, é muito rápido e otimiza o uso de cada ciclo de CPU. O laço de eventos do JavaScript pode ser às vezes confuso para desenvolvedores recém-chegados à linguagem. Em muitos ambientes populares (Java, Ruby, Python), cada thread executa apenas uma linha de código por vez, tudo o mais é bloqueado. Contudo, o JavaScript foi concebido para ser responsivo o tempo todo e, portanto, faz uso intensivo de chamadas de retorno (callbacks) e do laço de eventos (event-loop). O laço de eventos é uma estrutura cíclica que executa todo o código e não fica esperando por nada em particular. Os callbacks são chamados quando um processo tiver terminado. Por exemplo, nas outras linguagens, por bloquear o I/O, um banco de dados fará a thread que o chamou esperar pelo resultado. Já o JavaScript continuará executando as linhas de código subsequentes à chamada ao banco. Quando o resultado for devolvido pelo banco de dados, será processado pela função de callback. Com isso, o I/O não é bloqueado. O NodeJS será a plataforma no servidor, e sobre ele rodará o servidor web ExpressJS.

ExpressJS O ExpressJS é um framework web para o NodeJS. É um servidor web bastante transparente que não apenas permite construir aplicações web como também expor APIs do tipo RESTful baseadas em JSON. O ExpressJS é bastante modular e processa ou modifica qualquer solicitação vinda do navegador usando um elemento chamado middleware. Existe middleware para autenticação, manipulação de cookies, registro de eventos (log), tratamento de erros e outras funções.

MongoDB O MongoDB é um banco de dados de código aberto orientado a documentos, um dos mais populares bancos NoSQL. Emprega uma estrutura de documentos semelhante ao JSON em lugar das tradicionais tabelas encontradas nos bancos de dados relacionais. Sua linguagem de query é poderosa e expressiva. Mais adiante, mostraremos a equivalência de algumas queries SQL com queries do MongoDB.

Construindo uma Aplicação E-commerce com MEAN

O MongoDB armazena todos os dados dos usuários, produtos, ordens e qualquer coisa que precise ser persistente em uma aplicação de e-commerce.

AngularJS O AngularJS é um framework MVC de código aberto desenvolvido em JavaScript (em vez de MVC, é às vezes chamado de MV* ou MVW [Whatever], ou ainda MVQ [Qualquer coisa] em português). Um de seus recursos mais interessantes é aprimorar as tags HTML existentes ou mesmo criar novas por meio das diretivas e propriedades. Ele também mantém o sincronismo das visões e modelos em tempo real. O AngularJS facilita a criação das chamadas Aplicações de Uma Única Página (Single-Page Applications – SPAs), ricas em dados.

Instalando os componentes do MEAN Chega de teoria! Vamos agora “meter as mãos na graxa” e executar alguns comandos no terminal.

Instalando o NodeJS A comunidade do NodeJS esteve muito ocupada ultimamente e criou mais pacotes instaláveis do que qualquer outra plataforma. Não apenas pacotes, mas o próprio núcleo foi dividido em projetos diferentes (o conhecido processo de fork – um exemplo é o ioJS) e depois reintegrado ao tronco principal. Uma vez que o objetivo aqui é colocar uma aplicação em produção, usaremos a versão estável mais recente na data de publicação deste livro, a v0.123. Usaremos o NVM (Node Version Manager) para atualizá-lo facilmente quando novas versões estiverem disponíveis. Usuários do Windows devem seguir as instruções no site do NVM em https://github.com/creationix/nvm. 3 N. do T.: As versões do NodeJS são um tanto confusas, então cabe uma explicação. O NodeJS foi lançado ao público em agosto de 2011 na versão 0.1.14. Em janeiro de 2015, uma dissidência (fork) criou o projeto io.js, versão 1.0. Os dois projetos continuaram em paralelo, com o io.js chegando à versão 3.3.1 em setembro de 2015. Nesse mesmo mês, o io.js foi reincorporado (fundido) ao NodeJS, criando a versão 4.0.0, tornando-se novamente um projeto só e contendo os aprimoramentos de ambos. Na época da tradução, março de 2016, a versão corrente do novo NodeJS unificado era a 5.9.0, mas o projeto ainda atualiza e mantém a versão “pura” original do NodeJS na versão 0.12.12. O autor baseou este livro na versão “pura” do NodeJS, 0.12, mas os exemplos foram testados e funcionam na última versão, 5.9, para a edição brasileira. Pode haver problemas para instalar o Yeoman e demais ferramentas na versão mais antiga, por isso procuramos testá-la nas versões mais novas.

Capítulo 1 ■ Fundamentos do MEAN

Para a maioria dos usuários do *nix, os comandos abaixo instalam o NVM: $ $ $ $

curl https://raw.githubusercontent.com/creationix/nvm/v0.24.1/install.sh | bash source ~/.nvm/nvm.sh nvm install 0.12 nvm use 0.12

A instalação do NodeJS já vem com o NPM (Node Package Manager). Para verificar se o node e o npm foram instalados com sucesso, use os comandos a seguir: $ node -v # v0.12.7 $ npm -v # 2.11.3

Caso mais de uma versão do NodeJS esteja instalada, é possível travar a v0.12 como default. Para que toda vez que abrir um terminal a versão seja a que se espera, use o comando nvm alias default 0.12.

Instalando o ExpressJS Para instalar o Express, use o npm num terminal: npm install -g express@4.13.3

Observe que estamos baixando uma versão específica, que é definida pelo parâmetro @4.13.34. O argumento -g significa que o pacote está sendo instalado globalmente.

Instalando o MongoDB Usuários de Mac devem instalar primeiro o instalador de software brew: ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/ install)"

Depois, o MongoDB: brew update && brew install mongodb 3.0.2

No Ubuntu Linux, a instalação é direta: sudo apt-get -y install mongodb=3.0.2 4 N. do T.: Na data de tradução, março de 2016, a versão do Express era a 4.13.3.

Construindo uma Aplicação E-commerce com MEAN Para outros sistemas operacionais, siga as instruções listadas no site oficial https://www.mongodb.org/downloads.

Instalando o AngularJS Não é necessário instalar formalmente as ferramentas do AngularJS, como fizemos com o Node e com seu módulo Express5. No caso do AngularJS, basta baixar os arquivos JavaScript apropriados, disponíveis em https://angularjs.org, salvá-los na pasta do projeto e importá-los para dentro do HTML. A outra opção seria vincular o Angular diretamente de uma Content Delivery Network (CDN). Contudo, há um detalhe que o desenvolvedor com um mínimo de experiência já deve ter percebido: cada vez que um novo projeto é iniciado, é necessário passar pelas mesmas etapas de sempre. Por exemplo, abrir um documento, escrever o doctype do HTML5 no topo, copiar o código inicial, criar uma estrutura padrão de pastas e assim por diante. Todo esse processo repetitivo pode ser automatizado com uma ferramenta chamada Yeoman. Há muitos geradores no repositório do Yeoman, cada um com capacidade de preparar a estrutura básica (“esqueletos”)6 dos frameworks JavaScript mais populares: AngularJS, BackboneJS e assemelhados. Se não existir um gerador para o framework que você usa, este pode ser criado sem dificuldade. Os mais apropriados para este livro são o angular-fullstack e o meanjs. Usaremos o primeiro deles porque oferece, imediatamente após instalado, a funcionalidade mais próxima do que precisamos. Para instalar: # Instala todas as ferramentas7 $ npm install -g generator-angular-fullstack@3.0.0-rc4 # Cria um novo repositório chamado 'meanshop' $ mkdir meanshop && cd $_

5 N. do T.: Tecnologias construídas em JavaScript costumam ter o sufixo JS em seus nomes. Todavia, não há nenhum padrão quanto a isso, e cada autor usa como lhe apetece. Ao que parece, o costume entre os desenvolvedores e autores é considerar o sufixo JS como opcional, e é comum o mesmo autor referir-se ao mesmo nome com e sem JS no mesmo parágrafo! Assim, é aceitável chamar o NodeJS tanto pelo nome oficial quanto pelo seu “apelido” informal, Node. O mesmo vale para o Angular e o Express. 6 N. do T.: O termo original em inglês é “scaffolding”, literalmente “montagem de andaimes”. 7 N. do T.: Antes de instalar o generator-angular-fullstack, é necessário instalar três ferramentas das quais o gerador depende: yo, grunt-cli e bower. Os comandos para instalá-las, na ordem, são: $ npm install -g yo $ npm install -g grunt-cli $ npm install -g bower

Capítulo 1 ■ Fundamentos do MEAN

# Cria o esqueleto de uma aplicação em AngularJS $ yo angular-fullstack meanshop

Muita informação rolará pela tela enquanto os comandos estiverem sendo executados. Não se preocupe com elas – explicaremos toda a teoria por trás da mágica nos próximos capítulos. Por ora, certifique-se de que tudo está instalado.

O instalador em modo texto tem uma espécie de assistente que faz uma porção de perguntas sobre suas preferências. As mostradas a seguir são as que usaremos nos exemplos deste livro. # Client

# Cliente

? What would you like to write scripts with? ? Qual a linguagem de scripts? JavaScript + Babel JavaScript + Babel ? What would you like to write markup with? HTML

? Qual a linguagem de marcação? HTML

? What would you like to write stylesheets with? Sass ? Qual o padrão de folhas de estilo? Sass ? What Angular router would you like to use? uiRouter ? Qual o roteador do Angular? uiRouter ? Would you like to include Bootstrap? Yes

? Incluir o Bootstrap? Sim

? Would you like to include UI Bootstrap? Yes

? Incluir o UI Bootstrap? Sim

# Server

# Servidor

? 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? Google, Facebook, Twitter

? Qual a ferramenta de modelagem de dados? Mongoose (MongoDB)

? Incluir estratégias de autenticação oAuth adicionais? Google, Facebook, Twitter

? Would you like to use socket.io? Yes

? Incluir o socket.io? Sim

# Project

? Criar esqueleto de autenticação? Sim

# Projeto

? What would you like to write tests with? Mocha + ? Qual o framework de testes? Mocha + Chai + Sinon Chai + Sinon ? What would you like to write Chai assertions ? Qual a extensão de automação a ser usada com o with? Expect Chai? Expect

A instalação leva um certo tempo, uma vez que diversos pacotes de software serão instalados. Dê uma olhada nos arquivos package.json e bower.json. O Bower é um gerenciador de pacotes semelhante ao npm, mas para o frontend. Após a instalação, podemos rodar a aplicação exemplo com os comandos:

Construindo uma Aplicação E-commerce com MEAN # Monta a aplicação $ grunt # Visualiza a aplicação em modo de desenvolvimento $ grunt serve # Visualiza a aplicação em modo de produção $ grunt serve:dist

O esqueleto da aplicação (scaffolded app) pode ser visualizado em http://localhost:9000. Se surgirem erros, lembre-se de que o mongod deve necessariamente estar rodando.

Depurador do AngularJS Muitos dos navegadores modernos oferecem ferramentas de depuração para o JavaScript. Existe um plugin para o Google Chrome chamado Batarang, uma extensão para inspeção de elementos web. Recomendamos sua instalação, pois ele oferece mais contexto, informação útil e dicas:

Figura 1.2 – Tela da extensão Batarang AngularJS para o inspetor web do Chrome. no

.. .

Mais informações sobre o Batarang podem ser obtidas em https://github. com/angular/angularjs-batarang

Entendendo a estrutura do projeto Aplicações construídas com o gerador angular-fullstack possuem muitos arquivos e diretórios. Parte do código é enviada ao cliente, outra parte é executada no backend

Capítulo 1 ■ Fundamentos do MEAN

e há ainda uma pequena porção necessária apenas durante o desenvolvimento, como, por exemplo, os conjuntos de testes. É importante entender essa estrutura para manter o código organizado. Os geradores do Yeoman ganham bastante tempo para o desenvolvedor. Criados e mantidos pela comunidade, eles seguem todas as boas práticas atualmente aceitas. Muitos diretórios e um grande número de arquivos com código inicial são gerados pelo Yeoman para que o projeto já esteja estruturado de saída. Tudo isso pode parecer opressivo, especialmente a grande quantidade de arquivos possivelmente desconhecidos. Mantenha a calma! Falaremos sobre eles aqui e nos próximos capítulos. Observe a estrutura de diretórios criada. Há três pastas principais: client, e2e e server: • client contém os arquivos e recursos do AngularJS • server contém os arquivos no NodeJS, que engloba o ExpressJS e o MongoDB • e2e contém os testes fim a fim do AngularJS

Estrutura de arquivos A seguir, apresentamos uma visão geral da estrutura de arquivos deste projeto: meanshop ├── client │ ├── app - Componentes específicos da aplicação │ ├── assets - Arquivos personalizados: fontes, imagens etc. │ └── components - Componentes reusáveis ou que não sejam específicos da aplicação │ ├── e2e - Protractor (testes fim a fim) │ └── server ├── api - API do servidor para as aplicações ├── auth - Sinalizador de autenticação ├── components - Componentes reusáveis da aplicação ├── config - Configuração da aplicação │ └── local.env.js - Variáveis de ambiente │ └── environment - Configuração de ambiente do Node └── views - Visões renderizadas pelo servidor

Construindo uma Aplicação E-commerce com MEAN

Entrando na pasta client/app, encontramos uma pasta com o nome de cada componente (main page, products page) e, dentro de cada pasta, os arquivos relacionados ao componente. Por exemplo, se olharmos dentro de main, veremos arquivos do AngularJS, CSS (scss) e HTML: meanshop/client/app/main ├── main.js ├── main.controller.js ├── main.controller.spec.js ├── main.html └── main.scss

Rotas Controladores Testes Visão Folha de estilos

A estrutura para o backend é semelhante. Há pastas com os nomes dos componentes e em cada pasta há arquivos apropriados. Encontraremos arquivos do NodeJS e do ExpressJS, eventos do SocketIO e testes do Mocha: meanshop/server/api/thing ├── index.js ├── thing.controller.js ├── thing.model.js ├── thing.socket.js └── thing.spec.js

Rotas Controladores Modelo do banco de dados Eventos de socket Testes

Componentes Há um grande número de ferramentas em uso neste projeto. Algumas podem ser familiares, dependendo da bagagem do leitor. Quando não for o caso, leia a breve descrição que daremos a seguir e, se necessário, explicaremos mais detalhadamente nos capítulos vindouros.

Testes O AngularJS vem com um disparador de testes chamado Karma. Para este livro, vamos utilizar suas opções padrão: • Karma: disparador de testes de unidade do JavaScript. • Jasmine: framework BDD para teste do código em JavaScript, que é executado com o Karma.

Capítulo 1 ■ Fundamentos do MEAN

• Protractor: usado para testes fim a fim com o AngularJS. Executa os testes de nível mais alto, que rodam no navegador e simulam um usuário interagindo com a aplicação.

Ferramentas Algumas das ferramentas e bibliotecas que usaremos para aumentar nossa produtividade são: • GruntJS: automatiza tarefas repetitivas como a minificação de CSS/JS, compilação, teste de unidades e limpeza de JS. • Yeoman (yo): ferramenta de linha de comando que constrói automaticamente as estruturas iniciais (“esqueletos”) de projetos web, criando sozinha arquivos e pastas com seus geradores e oferecendo comandos adicionais para executar tarefas comuns interativamente. • Travis CI: ferramenta de Integração Contínua (Continuous Integration – CI) que roda o conjunto de testes toda vez que há um commit ao repositório. • EditorConfig: plugin de IDE, que carrega sua configuração a partir de um arquivo, .editorconfig – por exemplo, é possível configurar indent_size = 2, escolher espaços ou tabulações etc. e, assim, economizar tempo e manter a consistência entre todos os desenvolvedores da equipe e IDEs usadas. • SocketIO: biblioteca que permite comunicação bidirecional em tempo real entre o servidor e o cliente. • Bootstrap: framework de frontend para desenvolvimento web, que será usado em nosso projeto para construir um tema consistente. • AngularJS full-stack: gerador do Yeoman que contém comandos úteis para criar rapidamente código cliente/servidor e fazer deploy no Heroku ou no OpenShift. • BabelJS: um dos compiladores js-tojs que permite o uso dos recursos encontrados apenas na última geração de JavaScript (ECMAScript 6), sem que seja necessário esperar que os navegadores tenham suporte a isso. • Git: sistema distribuído de controle de versões de código-fonte.

Construindo uma Aplicação E-commerce com MEAN

Instaladores de pacotes de software O AngularJS vem com alguns instaladores/gerenciadores de software para instalar módulos de terceiros e de frontend: • NPM: o gerenciador de pacotes padrão do NodeJS. • Bower: gerenciador de pacotes de frontend que administra as versões e dependências das bibliotecas e itens usados em um projeto web. O arquivo bower.json contém os pacotes e versões a instalar, e o arquivo .bowerrc contém o caminho de instalação desses pacotes. O diretório padrão é ./bower_components.

Pacotes do Bower Se os passos exatos para a montagem do esqueleto da aplicação tiverem sido seguidos à risca, os componentes de frontend listados a seguir devem ter sido instalados: • angular • angular-cookies • angular-mocks • angular-resource • angular-sanitize • angular-scenario • angular-ui-router • angular-socket-io • angular-bootstrap • bootstrap • es5-shim • font-awesome • json3 • jquery • lodash No próximo capítulo, mergulharemos a fundo no AngularJS e em nossa estrutura de arquivos e pastas. A segunda parte deste capítulo descreverá a funcionalidade de nossa aplicação final.

Capítulo 1 ■ Fundamentos do MEAN

Aplicação exemplo de e-commerce Deixemos o terminal de lado por um instante. Em qualquer projeto, antes de começar a produzir código, é necessário gastar algum tempo planejando e visualizando o que se deseja criar. É exatamente o que faremos agora: desenhar alguns wireframes para nos guiarem até a aplicação pronta. Nosso site de e-commerce, chamado de MEANshop, terá três seções principais: • Capa (página inicial ou homepage) • Catálogo • Administração

Capa A capa de nosso site (mais conhecida como homepage) conterá os produtos em destaque, menus de navegação e algumas informações básicas, como podemos ver na figura 1.3:

Figura 1.3 – Wireframe da homepage.

Construindo uma Aplicação E-commerce com MEAN

Catálogo Esta seção mostrará todos os produtos, categorias e resultados de busca:

Figura 1.4 – Wireframe da página de produtos.

Capítulo 1 ■ Fundamentos do MEAN

Administração É preciso ser um usuário registrado para usar a administração.

Figura 1.5 – Wireframe da página de login.

Construindo uma Aplicação E-commerce com MEAN

Depois do login, a aplicação apresentará opções que variam dependendo de seu papel no site. Se você for um vendedor, pode criar produtos, como mostrado na na figura 1.6:

Figura 1.6 – Wireframe da página de criação de produtos.

Se for um administrador, pode fazer tudo o que o vendedor faz (criar produtos) e ainda administrar todos os usuários, bem como apagar e modificar produtos.

Capítulo 1 ■ Fundamentos do MEAN

Entendendo os requisitos das aplicações de e-commerce Não há maneira melhor de aprender novos conceitos e tecnologias do que desenvolver algo útil com eles. É por isso que construiremos uma loja eletrônica a partir do zero, ao longo do livro. Contudo, há muitos tipos de aplicações para comércio eletrônico. Na próxima seção, definiremos melhor nosso objetivo.

Produto Minimamente Viável para um site de e-commerce Mesmo as gigantescas aplicações que vemos hoje em dia começaram de forma humilde e cresceram a partir daí. O chamado Minimum Viable Product – MVP (em português, Produto Minimamente Viável) é, como o nome diz, o mínimo obrigatório que uma aplicação precisa para funcionar. No mundo do comércio eletrônico, esses requisitos obrigatórios seriam: • Adicionar produtos com título, preço, descrição, foto e quantidade • Página de checkout (pagamento) de produtos para usuários não cadastrados (visitantes) • Uma integração de pagamento (por exemplo, PayPal) Esse é o mínimo necessário para que uma loja eletrônica possa vender alguma coisa a alguém. Começaremos com esses, mas de forma alguma pararemos por aí. Continuaremos adicionando recursos à medida que avançarmos no livro e construiremos uma estrutura tal que permita adicionar qualquer funcionalidade, a qualquer tempo, com alta qualidade.

Definindo os requisitos Começaremos a capturar os requisitos para a aplicação de e-commerce com histórias de usuário (user stories). Uma user story é uma descrição breve de um recurso do sistema, como se estivesse sendo descrito pelo próprio usuário. Nas histórias, o usuário expressa seus desejos e necessidades no seguinte formato: Como <papel>, eu quero <desejo> [porque assim eu poderia <benefício>] User stories e outros conceitos importantes foram introduzidos no seminal Manifesto para Desenvolvimento Ágil (Agile Manifesto). Saiba mais sobre ele (em inglês8) em https://en.wikipedia.org/wiki/Agile_ software_development. 8 N. do T.: O Manifesto para Desenvolvimento Ágil pode ser lido em português em http://agilemanifesto.org/iso/ptbr/. A Wikipédia traz uma explicação bastante abrangente e detalhada, com diversos links de referência, em https://pt.wikipedia.org/wiki/Desenvolvimento_%C3%A1gil_de_software.

Construindo uma Aplicação E-commerce com MEAN

Os recursos a seguir, capturados como histórias de usuário, são os que planejamos desenvolver ao longo do livro: • Como vendedor, eu quero criar produtos. • Como usuário, eu quero ver todos os produtos publicados e informações sobre eles quando clico no link correspondente. • Como usuário, eu quero buscar produtos para encontrar rapidamente o que estou procurando. • Como usuário, eu quero ter um menu por categoria para que eu possa restringir os resultados de busca. • Como usuário, eu quero ter informação em tempo real para que eu saiba imediatamente se um produto está esgotado ou se voltou a estar disponível. • Como usuário, eu quero pagar os produtos sem fazer login para que eu possa comprar alguma coisa rapidamente sem precisar me cadastrar no site. • Como usuário, eu quero criar uma conta para que eu possa salvar meus endereços de entrega, ver meu histórico de compras e mesmo vender produtos. • Como administrador, eu quero gerenciar os papéis dos usuários para que eu possa criar administradores, vendedores e também revogar permissão de vendas. • Como administrador, eu quero gerenciar todos os produtos para que eu possa banir os que não forem apropriados. • Como administrador, eu quero ver um resumo de atividades e estado dos pedidos. Todas essas histórias podem parecer extensas, mas são úteis para capturar os requisitos do sistema de forma consistente. Elas também servem muito bem para desenvolver casos de teste. Saiba mais sobre user stories em https://en.wikipedia.org/wiki/User_story.9

Os requisitos técnicos sobre deploy, escalabilidade e desempenho serão discutidos nos capítulos finais.

9 N. do T.: Em português: https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio.

Capítulo 1 ■ Fundamentos do MEAN

Resumo Neste capítulo, discutimos as razões para usar MEAN na construção de uma aplicação de e-commerce. A tecnologia não é só uma “modinha” passageira para a qual as empresas estão migrando por pura imitação – do contrário, ela proporciona um aumento gigantesco de desempenho e suaviza a curva de aprendizado ao empregar apenas uma linguagem para todo o sistema, do backend ao frontend. Descrevemos ainda a estrutura de arquivos definida para organizar o código. Por fim, exploramos os recursos do aplicativo exemplo que construiremos ao longo do livro, bem como seu comportamento e aparência. Nos próximos capítulos, trabalharemos individualmente com cada um dos componentes da pilha MEAN. Depois, começaremos a integrar todos os componentes e a fazê-los trabalhar juntos. O próximo capítulo começará com a parte visível: o catálogo online, montado sobre o AngularJS.