.NET

19 set, 2016

ASP .NET MVC 5 – Criando uma aplicação com AngularJS e Web API – Parte 02

Publicidade

Neste artigo, eu vou mostrar como criar uma aplicação web usando os recursos da ASP .NET MVC 5, do AngularJS e da Web API.

Na primeira parte do artigo, apresentamos o nosso projeto, alguns conceitos sobre AngularJS e Web API e criamos o projeto referenciando o AngularJS via Nuget.

Neste artigo vamos definir o nosso modelo de dados e iniciar a implementação usando o SQL Server e o Entity Framework.

Definindo o modelo de dados

Vamos adotar um modelo de dados bem simples para não complicar muito o nosso projeto.

Supondo que nossa loja virtual também será um modelo simplificado de uma loja virtual real, podemos assumir que teremos dois atores atuando em nossa aplicação:

  • Consumidor: após ser registrado, este ator poderá acessar o catálogo de produtos, escolher produtos, adicionar produtos no carrinho de compras, enviar comandos e exibir o seu status;
  • Administrador: será o responsável por administrar as tabelas de produtos e do movimento gerenciando os produtos e o movimento.

Com base nessas afirmações, podemos definir o seguinte modelo de dados para o nosso projeto:

mvc_angapi21

onde a estrutura de cada tabela pode ser vista a seguir:

mvc_angapi22

mvc_angapi23

mvc_angapi24

Os campos MovimentoId e ProdutoId, além de chaves primárias, são do tipo Identity e são gerenciados pelo SGBD como campo autonumeração.

Criando um modelo de entidades com o Entity Framework

Vamos agora criar um modelo de entidades usando o Entity Framework.

Clique com o botão direito do mouse sobre a pasta Models e, a seguir, em Add -> New Item.

Selecione a guia Data e clique em ADO .NET Entity Data Model, informe o nome LojaVirtual e clique no botão Add.

A seguir, selecione a opção EF Designer from database e clique em Next>:

mvc_angapi2b

Para selecionar o banco de dados LojaVirtual.mdf que criamos, clique em New Connection.

Selecione o servidor SQL Server e o banco de dados e clique no botão OK.

mvc_angapi27

Confirme a conexão criada e salve a string de conexão no arquivo web.config clicando em Next>:

mvc_angapi28

Selecione as tabelas Movimento, Produtos e Usuarios e marque as opções conforme a figura abaixo clicando em Finish:

mvc_angapi29

Ao final teremos o nosso modelo de entidades mapeado para as tabelas gerado conforme a figura a seguir:

mvc_angapi2a

Na próxima parte do artigo vamos definir e iniciar a implementação dos serviços que atuarão entre o Cliente e o modelo de dados.