sexta-feira, 25 de julho de 2014

Curso de MEAN - Sessão 5: Exemplo prático

Curso de MEAN - Sessão 5: Exemplo prático

Aula de exemplo prático. Vamos criar uma aplicação real com o MEAN Stack! Aperte o cinto e prepare-se!

O trabalho Workshop de Desenvolvimento com Stack MEAN de Cleuton Sampaio de Melo Jr está licenciado com uma Licença Creative Commons - Atribuição-CompartilhaIgual 4.0 Internacional.


Isso inclui: Textos, páginas, gráficos e código-fonte.


É isso ai, pessoal! Chegou a hora de fazer um exercício final, para pôr em prática tudo o que vimos aqui.


O exercício é incremental, ou seja, você vai reutilizar o que fez na sessão anterior. Se não fez, busque a resposta lá.

Vamos criar uma aplicação que, além de mostrar a lista de artistas, e mostrar detalhes de um artista selecionado, permita incluir novos artistas.

A inclusão de novos artistas, por enquanto, só precisa ter: “nome” e “estilo”, sendo que o estilo deverá ser selecionado a partir de uma ComboBox, preenchida como os dados do esquema “Estilo”.

Deixe as músicas de lado, por enquanto. A aplicação deverá ser SPA – Single Page Application, com uma “div” oculta para incluir novos artistas, invocada a partir de um botão:

  
Ao clicar no botão “Novo artista...” a “div” oculta aparece:

  Ela já vem com a “ComboBox” de estilos preenchida. Você deve informar o nome e selecionar um estilo, caso contrário, mensagens de alerta devem aparecer. Você não deve deixar o usuário tentar incluir um Artista se o nome ou o estilo não estiverem preenchidos, ou tiverem tamanho zero.

Após a inclusão bem-sucedida, a “div” oculta deve desaparecer e a lista de artistas deve ser atualizada para conter o novo artista recém incluído.

Parte 2


Assim que a inclusão de artistas estiver funcionando, você deve tentar fazer a mesma coisa para incluir músicas de um artista selecionado.

Resposta


A respota está na “sessao5/codigo”. Porém, só tem a primeira parte, que é a inclusão de novos artistas. Eu acho que você deve tentar fazer a segunda parte sem ajuda alguma, afinal de contas, já deve ter conhecimento para isso. Eu sei que vai demorar, mas não é esperado que você faça a segunda parte agora.

Dicas


A primeira dica é rever tudo o que já fizemos. Para “div” oculta, usamos o “ng-show”, que pode ser utilizado com variáveis lógicas, ou para testar tamanho de campos. Exemplos:

html(ng-app=”modulo”,ng-init=”togglediv=false”)
…
	div(ng-show=”togglediv”)

Outro exemplo, baseado em tamanho de campos:

html(ng-app=”modulo”,ng-init=”txt1=''”)
…
	span(ng-show=”txt1.length==0”) mensagem

Você deve criar Rotas na parte servidora para:
  • Obter a página inicial;
  • Obter a lista JSON de artistas (ela também será chamada quando você incluir um novo artista);
  • Obter a lista JSON de estilos;
  • Receber um novo Artista, usando POST;

Como deve ter notado, existe um botão “Cancelar” na “div” oculta. Se ele for clicado, você deve zerar os campos (afinal, são modelos que estão no escopo), e ocultar novamente a “div”.

Após incluir um novo Artista, deve fazer a mesma coisa, porém deve também invocar novamente a lista de artistas, de modo que o recém incluído apareça.

O botão “Novo artista...”, depois de clicado, deve ficar oculto, somente aparecendo se o usuário cancelar ou incluir o novo artista.

Reveja as sessões anteriores, especialmente a de inclusão de documentos com Mongoose, e aquela sobre Angular.js.