Integrando aplicações com Web API

Por que eu devo ler este artigo:

Este artigo � �til para desenvolvedores que precisam aprender o funcionamento e como implementar uma aplica��o distribu�da atrav�s do uso dos recursos da plataforma .NET.

A mesma fornece as tecnologias necess�rias para o desenvolvimento de sistemas distribu�dos com uso de web services baseado em REST, aplica��es desktop, tecnologias para web sites e aplica��es para mobilidade.

Este artigo ser� dividido em tr�s partes. Ser� desenvolvida uma aplica��o distribu�da completa para for�a de vendas. Nesta primeira parte do artigo focaremos na estrutura de web services com base no REST.

O servi�o ir� expor uma interface comum para todas as entidades envolvidas seguindo as funcionalidades e opera��es CRUD para o SGDB SQL Server 2014. Ser� criado um cadastro de clientes, produtos e pedidos, sendo que a implementa��o ser� feita diretamente com a ASP.NET Web API.

Desenvolver sistemas distribu�dos n�o � uma tarefa f�cil, principalmente na hora de escolher qual tecnologia usar para realizar a integra��o entre aplica��es diversas que estar�o rodando em plataformas distintas.

At� pouco tempo atr�s os Web Services baseados em SOAP eram a melhor forma para estabelecer comunica��o entre aplica��es, por�m existe uma s�rie de fatos que tornaram esta implementa��o complexa e com custo bastante elevado, devido �s caracter�sticas que o SOAP foi ganhando com o passar dos tempos.

Boa parte dos fornecedores de tecnologias para desenvolvimento de aplica��es n�o conseguiam acompanhar a evolu��o do SOAP, desta forma era preciso escolher com bastante calma e aten��o quais solu��es e tecnologias utilizar para integrar sistemas distribu�dos utilizando como meio de comunica��o padr�o o SOAP.

O SOAP ainda est� presente na maior parte das solu��es para sistemas distribu�dos. O fator que auxilia este n�mero � a seguran�a, pois este protocolo proporciona um excelente n�vel de seguran�a para troca de informa��es entre aplica��es.

Outro ponto a destacar sobre os sistemas distribu�dos � o novo meio de troca de dados entre aplica��es rodando em qualquer plataforma. O REST � o novo padr�o arquitetural que proporciona a troca de dados entre qualquer aplica��o que fa�a uso do protocolo HTTP, ou seja, o REST tem como base a estrutura do protocolo HTTP para enviar e receber dados entre o servidor e uma aplica��o cliente.

Esta nova forma de implementa��o de Web Service vem se consolidando no mercado e existem v�rios fatores que levam o REST a ser hoje umas das melhores alternativas para solu��o de troca de dados entre sistemas distribu�dos. Veja a seguir algumas caracter�sticas do REST.

O primeiro ponto a destacar sobre o sucesso do REST � o fato do mesmo ter como base para comunica��o o protocolo HTTP, desta forma qualquer aplica��o com acesso � internet pode estabelecer comunica��o com um Web Service implementado seguindo o esse padr�o arquitetural.
A implementa��o do REST � bem simplificada, ou seja, tanto no lado do servidor como tamb�m do lado da aplica��o cliente. Isso se deve ao fato do REST usar alguns verbos do HTTP: GET, POST, PUT e DELETE. Podemos at� fazer uma breve compara��o com as opera��es de transa��es em um banco de dados, o famoso CRUD, acr�nimo de CREATE, READ, UPDATE e DELETE.
Por fim, mas n�o parando por a�, o REST possibilita a troca de dados em v�rios formatos, os mais utilizados s�o o JSON e XML.

Ap�s esta breve introdu��o sobre sistemas distribu�dos agora podemos entender e conhecer um pouco sobre a plataforma .NET e o que a mesma oferece como solu��o para esta estrutura. A Microsoft vem atualizando a plataforma .NET de acordo como os novos padr�es que v�o surgindo.

Se tratando de web service a plataforma .NET at� certo tempo atr�s tinha como principal uma tecnologia denominada WCF (Windows Comunication Foundation), que incorporava v�rias formas de comunica��o para sistemas distribu�dos e tamb�m o uso de web services ASMX.

Estas tecnologias utilizam como base para comunica��o o protocolo SOAP, ent�o com o surgimento do REST a Microsoft inovou e criou uma nova tecnologia que implementa esse padr�o, a ASP.NET Web API.

Por�m esta tecnologia n�o para por a�, ou seja, a mesma tem como base o ASP.NET MVC, ent�o toda a implementa��o de web services com base na Web API segue o padr�o MVC.

A Web API � parte do framework ASP.NET MVC, desta forma voc� pode utilizar toda a estrutura de um website ASP.NET MVC na Web API e vice-versa. A Web API pode ser hospedada em um servidor IIS normalmente como um site com ASP.NET MVC, pois sua implementa��o tem como base o REST e protocolo HTTP.

Criando o DER do projeto para o banco de dados

Como iremos criar uma aplica��o distribu�da, � interessante ter o m�ximo de documenta��o poss�vel sobre o software a ser desenvolvido.

A documenta��o serve para consulta pela equipe de desenvolvimento, sendo que uma software house com processos bem definidos pode ter equipes especializadas em determinada tecnologia e plataforma.

Pensando neste cen�rio, iremos criar um DER (Diagrama Entidade Relacionamento) que representa a estrutura de tabelas do banco de dados de nossa aplica��o referente �s entidades do mundo real que fazem parte do levantamento de requisitos funcionais do software a ser desenvolvido.

Para evitar o acoplamento do DER a um determinado SGDB, iremos utilizar uma ferramenta free denominada DBDesigner que gera script SQL para v�rios SGDBs, como o SQL Server, MySQL, Oracle, PostgreSQL, Firebird, SQLite, dentre outros. Voc� pode baixar o DBDesigner no link presente na se��o Links deste artigo.

O banco de dados da aplica��o ter� quatro tabelas: cliente, produto, cabe�alho do pedido e itens do pedido. O DER do banco de dados com todas as tabelas necess�rias para o sistema for�a de vendas pode ser visualizado na Figura 1, a mesma apresenta as tabelas juntamente aos relacionamentos necess�rios entre elas.

**Figura 1.** DER (Diagrama Entidade Relacionamento) do banco de dados.

Analisando esse DER, o mesmo merece algumas observa��es a serem destacadas, conforme a seguir.

Tabela cliente: os campos da tabela cliente s�o auto descritivos, por�m perceba que a coluna cpf_cnpj � do tipo varchar, pois se utiliz�ssemos um int n�o caberia o dado e nem poder�amos armazenar valores iniciados em zero.
Com uso do varchar � poss�vel at� mesmo gravar no campo os n�meros do CPF ou CNPJ com m�scara, apesar de essa n�o ser uma boa pr�tica, j� que existem componentes que fazem o trabalho de adicionar m�scaras em campos.
Tabela produto: na tabela produto tamb�m n�o existem segredos, por�m temos um problema: o campo pre�o de compra n�o pode ser apresentado no dispositivo m�vel com Windows Phone, pois o vendedor n�o pode saber este pre�o.
Assim sendo, temos duas solu��es: ocultar este campo na implementa��o mobile, ou criar um DTO exclusivo para consumo do servi�o pela aplica��o mobile. Em nosso cen�rio o melhor e menos dispendioso seria fazer isso no lado mobile, que � o que faremos.
Tabela pedido cabe�alho: a ideia desta tabela � armazenar as informa��es sobre o pedido como um todo, ou seja, qual cliente, valor total da venda, quantidade de itens, data da venda e status (que pode ser Finalizada, Cancelada, dentre outros status poss�veis).
Tabela itens pedido: esta tabela tamb�m � auto descritiva, por�m � importante notar as chaves estrangeiras que representam os relacionamentos com as tabelas produto e pedido cabe�alho.

Com DER do banco de dados pronto, agora � hora de criar o banco propriamente dito. Iremos utilizar o SGDB SQL Server 2014 Express e Management Studio 2014 para obter uma interface para administra��o do SQL Server.

Abra o Management Studio 2014 e crie um novo banco de dados chamado de BD_FORCA_VENDA, logo ap�s � necess�rio obter o script SQL para criar as tabelas. Abra o DBDesigner e v� at� menu File> Export> SQL Create Script. Na sequ�ncia ir� abrir uma nova janela conforme mostra a Figura 2, nela selecione SQL Server em Target Data Base e depois clique no bot�o Copy Script to Clipboard para copiar para mem�ria o script SQL para gerar as tabelas.

Realizado este procedimento, volte ao Management Studio, abra uma nova query para o banco BD_FORCA_VENDA rec�m-criado e cole o script SQL (presente na Listagem 1).

Execute o script e ter� uma estrutura conforme apresentado na Figura 3, com todas as tabelas definidas no DER do banco de dados.

Integrando aplica��es com Web API — **Figura 2.** Exportando script SQL com DBDesigner para banco BD_FORCA_VENDA.

Listagem 1. Script SQL para gerar tabelas do banco de dados BD_FORCA_VENDA.


CREATE TABLE produto (
 idproduto INTEGER  NOT NULL   IDENTITY ,
 descricao VARCHAR(100)    ,
 preco_compra DECIMAL(6,2)    ,
 preco_venda DECIMAL(6,2)    ,
 qtde_estoque INTEGER    ,
 data_cadastro DATE    ,
 status_produto VARCHAR(20)      ,
PRIMARY KEY(idproduto));
GO

CREATE TABLE cliente (
 idcliente INTEGER  NOT NULL   IDENTITY ,
 nome VARCHAR(100)    ,
 cpf_cnpj VARCHAR(18)    ,
 endereco VARCHAR(200)    ,
 bairro VARCHAR(40)    ,
 cidade VARCHAR(40)    ,
 cep VARCHAR(10)    ,
 email VARCHAR(50)    ,
 telefone VARCHAR(15)    ,
 status_cliente VARCHAR(20)    ,
 data_cadastro DATE      ,
PRIMARY KEY(idcliente));
GO

CREATE TABLE pedido_cabecalho (
 idpedido_cabecalho INTEGER  NOT NULL   IDENTITY ,
 idcliente INTEGER  NOT NULL  ,
 valor_total_pedido DECIMAL(6,2)    ,
 qtde_itens INTEGER    ,
 status_pedido VARCHAR(20)    ,
 data_pedido DATE      ,
PRIMARY KEY(idpedido_cabecalho)  ,
 FOREIGN KEY(idcliente)
   REFERENCES cliente(idcliente));
GO

CREATE INDEX pedido_cabecalho_FKIndex1 ON pedido_cabecalho (idcliente);
GO

CREATE INDEX IFK_Rel_Cliente__Ped_Cab ON pedido_cabecalho (idcliente);
GO

CREATE TABLE pedido_itens (
 idpedido_itens INTEGER  NOT NULL   IDENTITY ,
 idpedido_cabecalho INTEGER  NOT NULL  ,
 idproduto INTEGER  NOT NULL  ,
 quantidade INTEGER    ,
 valor_unitario DECIMAL(6,2)    ,
 sub_total DECIMAL(6,2)    ,
 status_item VARCHAR(20)      ,
PRIMARY KEY(idpedido_itens)    ,
 FOREIGN KEY(idpedido_cabecalho)
   REFERENCES pedido_cabecalho(idpedido_cabecalho),
 FOREIGN KEY(idproduto)
   REFERENCES produto(idproduto));
GO

CREATE INDEX pedido_itens_FKIndex1 ON pedido_itens (idpedido_cabecalho);
GO
CREATE INDEX pedido_itens_FKIndex2 ON pedido_itens (idproduto);
GO

CREATE INDEX IFK_Rel_PedCab__Ped_Itens ON pedido_itens (idpedido_cabecalho);
GO
CREATE INDEX IFK_Rel_Produto__Ped_Itens ON pedido_itens (idproduto);
GO

Com isso, o banco de dados da aplica��o j� est� pronto para receber os dados.

Criando o projeto ASP.NET Web API com Visual Studio

O primeiro projeto a ser desenvolvido ser� a Web API que funcionar� como centro do sistema, pois tanto a aplica��o ASP.NET MVC quanto a do Windows Phone ir�o consumir dados a partir deste servi�o.

Abra o Visual Studio 2013 e a partir do menu File> New> Project escolha, dentro da categoria Web, o template ASP.NET Web Application. Selecione a vers�o do .NET Framework (aqui ser� usada a 4.5.1) e nomeie o projeto como ForcaVendasWebAPI.

Em seguida clique em OK. Depois disso ser� aberta outra janela onde voc� dever� selecionar o template Web API e pressionar OK novamente para que o Visual Studio possa criar toda a estrutura de arquivos e pastas do projeto para Web API utilizando o padr�o MVC.

Ap�s o projeto ser criado pelo Visual Studio, teremos a estrutura do projeto �ForcaVendaWebAPI� conforme apresentado na Figura 4. Aparentemente parece um projeto ASP.NET MVC comum, mas n�o se engane, pois este projeto j� vem com um servi�o Web API configurado e pronto para ser executado.

Voc� pode ver esta implementa��o no arquivo ValuesController.cs, que se encontra dentro da pasta Controllers. Veja a Listagem 2 que mostra a implementa��o de um servi�o Web API seguindo o padr�o REST.

Listagem 2. Implementa��o servi�o Web API exemplo ValuesController.cs.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace ForcaVendaWebAPI.Controllers
{
   [Authorize]
   public class ValuesController : ApiController
   {
       // GET api/values
       public IEnumerable<string> Get()
       {
           return new string[] { "value1", "value2" };
       }

       // GET api/values/5
       public string Get(int id)
       {
           return "value";
       }

       // POST api/values
       public void Post([FromBody]string value)
       {
       }

       // PUT api/values/5
       public void Put(int id, [FromBody]string value)
       {
       }

       // DELETE api/values/5
       public void Delete(int id)
       {
       }
   }
}

Esta listagem merece alguns coment�rios para que voc� possa entender como trabalhar com a Web API seguindo o padr�o arquitetural REST, que por sua vez tem como base de comunica��o o protocolo HTTP. Veja a seguir mais detalhes sobre a codifica��o.

Linha 11: o primeiro ponto a destacar � o controller Values que herda de ApiController.
Em uma aplica��o ASP.NET MVC o controller herda da classe Controller, ent�o para que possamos implementar a Web API � necess�rio herdar da classe ApiController que j� tem encapsulado todos os recursos necess�rios referentes � implementa��o de servi�os com base no REST.
Linhas 14, 20, 26, 30 e 35: nestas linhas est�o implementados os m�todos que exp�em ao cliente a interface de comunica��o atrav�s da defini��o de rotas, ou seja, o endere�o que aponta para algum recurso no servidor. Perceba que cada m�todo faz refer�ncia a um verbo do protocolo HTTP, sendo: Get para solicitar uma representa��o de um recurso no servidor; Post para criar um no recurso; Put para alterar um recurso existente; e Delete para excluir um determinado recurso no servidor.
� muito importante voc� fazer uma associa��o com as opera��es de CRUD, pois o objetivo deste projeto com uso da Web API � fornecer uma interface comum para os outros dois projetos.
Os projetos que ir�o consumir o servi�o ser�o criados nas pr�ximas partes deste artigo.

Integrando o Entity Framework ao projeto

Para realizar a conex�o entre o servi�o com a Web API e banco de dados SQL Server iremos utilizar o ORM Entity Framework que � nativo da plataforma .NET. O mesmo � respons�vel por realizar o mapeamento objeto-relacional entre as tabelas do banco de dados e as classes model da aplica��o.

Tamb�m � poss�vel optar para que o Entity crie todas as classes para o modelo de dados. Seguindo este contexto o BDA pode realizar atualiza��es na estrutura do schema do banco de dados e a partir da aplica��o Web API podemos facilmente atualizar o modelo na aplica��o atrav�s do EDMX do Entity framework.

Para adicionar o Entity Framework ao projeto voc� deve selecionar a pasta Models no Solution Explorer. A mesma faz parte da estrutura do padr�o MVC. Com a pastas Models selecionada, clique nela com bot�o direito e depois na op��o Add> New item. Abrir� uma nova janela onde dever� ser selecionada a categoria Data e o template ADO.NET Entity Data Model (Entity Framework). Informe o nome �ModelForcaDeVenda� e por fim clique em Add.

Ap�s clicar em Add ser� apresentada uma nova janela, conforme a Figura 5. Esta janela � muito importante, pois � aqui onde voc� deve selecionar a forma que vai trabalhar com Entity Framework, ou seja, voc� ir� escolher como vai gerar seu modelo de dados. Tamb�m deve definir como ser� a cria��o do banco de dados, se vai gerar o banco a partir de seu modelo ou se vai gerar o modelo a partir do banco de dados. Assim sendo, � poss�vel selecionar as seguintes op��es:

Empty EF Designer Model: utilizando esta forma de trabalho voc� ir� criar um modelo visualmente atrav�s do EF Designer. A partir deste modelo visual ser� criado o banco de dados e suas classes models, sendo assim, a estrutura de ORM do Entity Framework permite facilmente a inclus�o e manuten��o de dados no banco de dados;
Empty Code First model: esta op��o cria um modelo vazio Code First a partir da linha de c�digo, ou seja, voc� ir� codificar seu modelo manualmente e em seguida poder� gerar o banco de dados a partir deste c�digo. Por este motivo que se chama Code First, primeiro o modelo e depois a gera��o do banco de dados.
Code First from database: selecionando esta op��o ser� criado um modelo Code First com base em um banco de dados j� existente, bastando apenas voc� selecionar as tabelas necess�rias para o modelo da aplica��o.
EF Designer from database: aqui ser� criado o modelo no EF Designer (EDMX) baseado em banco de dados j� existente, dessa forma voc� precisa apenas informar a conex�o com banco de dados, selecionar as tabelas e as views se necess�rio, em seguida ser� criado um arquivo EDMX.
O EF Designer � um diagrama que representa as tabelas do banco de dados transformadas em classes para seu modelo.
Esta abordagem � interessante para nosso contexto de sistema distribu�do, pois n�o temos uma depend�ncia do projeto Web API para com o banco de dados. Este cen�rio � o contr�rio da abordagem Code First, por�m em outros cen�rios o code first � mais apropriado, tudo depende do contexto e dom�nio de neg�cio onde o projeto � baseado.
Ent�o ser� esta abordagem que iremos usar no projeto com a Web API, clique no bot�o Next para avan�ar para pr�xima tela.

Na pr�xima tela voc� deve criar uma nova conex�o com banco de dados clicando no bot�o New Connection. Realizado este procedimento, marque a op��o �Yes, include the sensitive data in the connection string�, logo ap�s clique em Next.

A Figura 6 mostra a nova janela onde devem ser selecionadas as tabelas necess�rias do banco de dados para o servi�o, em seguida clique em Finish. Perceba que nesta tela tamb�m � poss�vel selecionar Views e Stored Procedures caso existam no banco de dados e sejam necess�rias na aplica��o.

Ap�s finalizada a inclus�o do Entity Framework ao projeto, ser� aberto o arquivo EDMX contendo todas as classes models que representam as tabelas do banco de dados, conforme a Figura 7, ou seja, o mapeamento objeto relacional propriamente dito. Perceba que na Solution Explorer, dentro da pasta Models, � criado v�rias classes com extens�o .cs para cada entidade do mapeamento objeto relacional realizado com a base de dados.

Criando o Controller Cliente para realizar opera��es CRUD com EF

A partir deste ponto focaremos na cria��o das funcionalidades do servi�o da Web API para expor os m�todos para acesso �s funcionalidades de CRUD para as entidades cliente, produto, cabe�alho do pedido e itens do pedido.

O acesso ser� realizado via requisi��es HTTP com uso de seus verbos, sendo que cada recurso ter� uma rota especificada em forma de URI que identifica o caminho para as requisi��es de cada opera��o como a inclus�o, leitura, altera��o e exclus�o de recursos no servidor.

Como a Web API roda em cima do ASP.NET MVC, precisaremos criar um controller para cada model que ir� expor alguns m�todos. Come�aremos ent�o criando o controller para clientes.

Para adicionar um novo controller para cliente, clique com o bot�o direito na pasta Controllers localizada no Solution Explorer, em seguida clique na op��o Add> Controller. Com misso ser� aberta uma nova janela conforme mostra a Figura 8.

Selecione a op��o �Web API 2 Controller with actions, using Entity Framework�, assim o Visual Studio ir� auxiliar na cria��o do controller Cliente com base no model do Entity Framework. Desta forma ser�o gerados os m�todos que precisaremos para as opera��es de CRUD no banco de dados. Este procedimento � conhecido como Scaffold.

Essa figura apresenta v�rias possibilidades de uso do scaffold, que nada mais � que um assistente para gerar um controller automaticamente com base na Web API ou ASP.NET MVC, desta forma ele nos poupa de um grande trabalho manual de codifica��o. Nosso contexto utiliza o Entity Framework, assim sendo o scaffold gera automaticamente todos os m�todos para manuten��o de dados.

Ap�s selecionado o scaffold correto para o contexto do projeto e clicado em Add, ser� aberta uma nova janela conforme apresentado na Figura 9. Nesta janela precisamos informar o Model, o Data context e o nome do novo controller para nosso servi�o. Siga os passos descritos a seguir:

1. No campo Model class voc� deve selecionar a classe cliente que representa o model para o Entity Framework.

2. O pr�ximo passo � selecionar a classe que representa o Data Context do nosso modelo criado anteriormente. Quando foi definido o nome da connection string para acesso a dados com Entity Framework, este nome tamb�m foi usado no Data Context, sendo assim voc� deve selecionar a op��o �BD_FORCA_VENDAEntities� que est� localizado dentro da pasta Models.

3. Marque a op��o �Use async controller actions�, pois na pr�xima parte faremos o acesso aos servi�os atrav�s do AngularJS e essa op��o far� com que a aplica��o tenha um melhor rendimento atrav�s do uso de actions ass�ncronas.

4. O �ltimo passo � apenas informar o nome do controller, que neste caso ser� ClientesController. Perceba que devemos manter o sufixo Controller para que o ASP.NET possa identificar os controladores. Clique em Add para que o Visual Studio possa gerar o controller cliente e as actions automaticamente.

Ao clicar em Add o Visual Studio cria um arquivo chamado �ClientesController.cs� dentro na pasta Controllers, este arquivo por sua vez j� cont�m toda a implementa��o necess�ria para expor as funcionalidades de CRUD aos clientes consumidores do servi�o da Web API.

Antes de detalhar a implementa��o do c�digo e testar o servi�o da Web API com o novo controller Clientes, devemos realizar uma pequena configura��o no arquivo WebApiConfig.cs, que est� localizado dentro da pasta App_Start. Caso n�o fa�amos esta configura��o teremos um erro ao tentar consumir o servi�o devido a estarmos manipulando atributos do tipo Date dentro do model cliente.

Por padr�o, a Web API retorna os dados no formato XML, assim sendo � necess�rio tratar o retorno de dados do tipo Date. Vamos alterar o arquivo WebApiConfig.cs, que � o arquivo de configura��o padr�o da Web API.

Devemos definir o formato JSON como padr�o ao inv�s do XML. Veja na Listagem 3 toda a configura��o necess�ria para retornar dados no formato JSON como padr�o, o que deve ser feito no m�todo Register.

Listagem 3. Configura��o arquivo WebApiConfig para retornar JSON como padr�o.


 public static void Register(HttpConfiguration config)
 {
     // Web API configuration and services
     // Configure Web API to use only bearer token authentication.
    config.SuppressDefaultHostAuthentication();
     config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));
 
     
 
     // Web API routes
     config.MapHttpAttributeRoutes();
 
     var json = config.Formatters.JsonFormatter;
     json.SerializerSettings.PreserveReferencesHandling = Newtonsoft.Json.PreserveReferencesHandling.Objects;
     config.Formatters.Remove(config.Formatters.XmlFormatter);
 
     config.Routes.MapHttpRoute(
         name: "DefaultApi",
         routeTemplate: "api/{controller}/{id}",
         defaults: new { id = RouteParameter.Optional }
     );
 }

Na Listagem 4 temos a implementa��o gerada pelo Visual Studio para o Controller Clientes.

Listagem 4. Implementa��o do ClientesController.


using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Threading.Tasks;
using System.Web.Http;
using System.Web.Http.Description;
using ForcaVendaWebAPI.Models;

namespace ForcaVendaWebAPI.Controllers
{
   public class ClientesController : ApiController
   {
       private BD_FORCA_VENDAEntities db = new BD_FORCA_VENDAEntities();

       // GET: api/Clientes
       public IQueryable<cliente> Getcliente()
       {
           return db.cliente;
       }

       // GET: api/Clientes/5
       [ResponseType(typeof(cliente))]
       public async Task<IHttpActionResult> Getcliente(int id)
       {
           cliente cliente = await db.cliente.FindAsync(id);
           if (cliente == null)
           {
               return NotFound();
           }
           return Ok(cliente);
       }

       // PUT: api/Clientes/5
       [ResponseType(typeof(void))]
       public async Task<IHttpActionResult> Putcliente(int id, cliente cliente)
       {
           if (!ModelState.IsValid)
           {
               return BadRequest(ModelState);
           }

           if (id != cliente.idcliente)
           {
               return BadRequest();
           }

           db.Entry(cliente).State = EntityState.Modified;

           try
           {
               await db.SaveChangesAsync();
           }
           catch (DbUpdateConcurrencyException)
           {
               if (!clienteExists(id))
               {
                   return NotFound();
               }
               else
               {
                   throw;
               }
           }

           return StatusCode(HttpStatusCode.NoContent);
       }

       // POST: api/Clientes
       [ResponseType(typeof(cliente))]
       public async Task<IHttpActionResult> Postcliente(cliente cliente)
       {
           if (!ModelState.IsValid)
           {
               return BadRequest(ModelState);
           }

           db.cliente.Add(cliente);
           await db.SaveChangesAsync();

           return CreatedAtRoute("DefaultApi", new { id = cliente.idcliente }, cliente);
       }

       // DELETE: api/Clientes/5
       [ResponseType(typeof(cliente))]
       public async Task<IHttpActionResult> Deletecliente(int id)
       {
           cliente cliente = await db.cliente.FindAsync(id);
           if (cliente == null)
           {
               return NotFound();
           }

           db.cliente.Remove(cliente);
           await db.SaveChangesAsync();

            return Ok(cliente);
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }

        private bool clienteExists(int id)
        {
            return db.cliente.Count(e => e.idcliente == id) > 0;
        }
    }
 }

O c�digo implementado nessa listagem cont�m alguns detalhes que merecem ser comentados para melhor entendimento sobre seu funcionamento e como ser� o processo de requisi��o e resposta entre o cliente e o servidor.

Detalhes da action Getcliente que retorna uma listagem de clientes da base de dados:

Linha 18: aqui � declarado e inicializado um objeto privado que representa o DbContext para acesso ao banco de dados atrav�s do Entity Framework.
Neste caso foi inicializado o objeto a partir da classe BD_FORCA_VENDAEntities. Veja na Listagem 5 a implementa��o da classe BD_FORCA_VENDAEntities que herda de DbContext. Em seguida s�o definidas quatro propriedades atrav�s do DbSet para representar as tabelas do banco de dados.
Linhas 20 a 24: neste bloco de c�digo temos a implementa��o da primeira action do controller. O importante � entender que este m�todo ser� solicitado via Get atrav�s da rota http://localhost:1622/api/Clientes, sendo que voc� deve alterar a porta de acordo com o IIS de sua m�quina. Ap�s realizada a requisi��o ser� retornado um IQueryable de cliente com lista de clientes no formato JSON.
Anteriormente foi definido no arquivo WebApiConfig.cs o formato JSON como padr�o para retorno de dados ao cliente. Veja na Figura 10 o resultado da listagem de clientes no formato JSON ap�s acessar a rota �http://localhost:1622/api/Clientes� pelo browser.

Detalhes da action Getcliente que retorna um cliente especifico:

Linhas 26 a 37: neste bloco de c�digo temos a implementa��o do m�todo Getcliente(int id) para obter um cliente especifico atrav�s de uma requisi��o via GET, passando como par�metro o id do cliente.
Note que na linha 27 o m�todo foi anotado com o ResponseType informando que o tipo de resposta � um objeto tipo cliente, sendo que na linha 28 foi definido o retorno como sendo do tipo IHttpActionResult de forma ass�ncrona.
Na linha 30 � realizada uma busca pelo cliente chamando o m�todo FindAsync, que � um m�todo ass�ncrono do Entity Framework. Na sequ�ncia � passando como par�metro o id do cliente a ser pesquisado.
Por fim, nas linhas 33 e 36 � verificado se foi encontrado um cliente na base de dados, caso o objeto cliente seja null, ent�o retorna NotFound, caso contr�rio retorna o cliente atrav�s da instru��o return Ok(cliente).
A interface IHttpActionResult se responsabiliza pela mensagem de retorno do protocolo HTTP a ser retornada ao cliente solicitante.

Detalhes da action Putcliente usada para atualizar um cliente no banco:

Linha 41: � declarado o m�todo �Putcliente(int id, cliente cliente)� que recebe como par�metro o id do cliente a ser alterado e tamb�m um model cliente constando os dados a serem atualizados em um cliente especifico na base de dados, identificado pelo id informado.
Linha 43: esta linha � muito importante na implementa��o, pois temos uma condi��o if que verifica se o modelo � valido, ou seja, se realmente o ASP.NET MVC conseguiu recuperar os dados da mensagem que vindas no corpo da requisi��o do protocolo HTTP 1.1. O ASP.NET transforma os dados em um objeto do tipo cliente, ent�o caso tenha algum problema de convers�o de dados, como uma string para um int, ser� disparado um BadRequest com ModelState inv�lido, que retorna um erro, tratado na linha 44.
Linha 48: nesta linha � verificado se o id recebido como par�metro � diferente do id do objeto cliente. Caso seja diferente, ele vai disparar uma mensagem de erro HTTP 400 � BadRequest para informar ao solicitante da requisi��o que ocorreu algum erro nos dados informados no corpo da mensagem enviado ao servi�o da Web API.
Linha 53: nesta linha � chamado o m�todo Entry atrav�s context, passando como par�metro o objeto a ser modificado. Perceba que foi atribu�da � propriedade State o EntityState.Modified para informar o estado do objeto a ser modificado.
Linha 57: aqui � chamado o m�todo SaveChangesAsync para salvar as altera��es do cliente no banco de dados.
Linha 70: � retornado o c�digo de status informando o sucesso da opera��o atrav�s do HttpStatusCode.NoContent.

Detalhes da action Postcliente, que possibilita cadastro de cliente atrav�s de uma requisi��o via verbo POST.

Linha 72: nesta linha temos a defini��o do m�todo Postcliente, que recebe como par�metro um objeto do tipo cliente para cadastrar no banco. � importante mencionar que o ASP.NET MVC se responsabiliza por transformar os dados do cliente que chega ao servidor junto ao corpo da mensagem via requisi��o HTTP. Estes dados s�o transformados em um objeto v�lido do tipo cliente para que depois possa ser manipulado no c�digo.
Linha 78: verifica se o modelo � v�lido, como na action Putcliente.
Linha 83: adiciona o cliente � base de dados atrav�s do m�todo Add presente no model cliente do DbContext.
Linha 84: Salva o cliente no banco, ou seja, realiza um commit para efetua��o a inclus�o de dados permanente na base.
Linha 86: cria uma rota atrav�s do CreatedAtRoute para retornar ao cliente da requisi��o, desta forma o mesmo pode realizar uma nova consulta ao novo recurso dispon�vel no servidor.

Detalhes da action Deletecliente para excluir um cliente especifico do banco de dados.

Linha 91: defini��o do m�todo que recebe como par�metro o id do cliente a ser deletado da base de dados.
Linha 93: realiza a busca do cliente a ser exclu�do atrav�s do m�todo FindAsync, passando o id do cliente a ser retornado para a exclus�o.
Linhas 94 e 96: verifica se foi encontrado algum cliente a ser exclu�do da base, caso contr�rio retorna uma mensagem de erro NotFound.
Linha 99 e 100: deleta o cliente da base de dados atrav�s da chamada do m�todo Remove, em seguida efetua um commit da exclus�o com o m�todo SaveChangesAsync.
Linha 102: nesta linha � retornada uma mensagem informando o sucesso da exclus�o do cliente na base de dados.

Listagem 5. Implementa��o classe BD_FORCA_VENDAEntities.


 namespace ForcaVendaWebAPI.Models
 {
    using System;
    using System.Data.Entity;
    using System.Data.Entity.Infrastructure;
    
    public partial class BD_FORCA_VENDAEntities : DbContext
    {
        public BD_FORCA_VENDAEntities()
            : base("name=BD_FORCA_VENDAEntities")
        {
        }
    
        protected override void OnModelCreating(DbModelBuilder modelBuilder)
        {
            throw new UnintentionalCodeFirstException();
        }
    
        public virtual DbSet<cliente> cliente { get; set; }
        public virtual DbSet<pedido_cabecalho> pedido_cabecalho { get; set; }
        public virtual DbSet<pedido_itens> pedido_itens { get; set; }
        public virtual DbSet<produto> produto { get; set; }
    }
 }

Criando o Controller Produtos

O pr�ximo passo na constru��o do servi�o � criar o controller para o cadastro de produtos e possibilitar a realiza��o de todas as opera��es de CRUD conforme foi feito com o cadastro de clientes.

O procedimento para criar o controller de produtos � praticamente igual ao realizado anteriormente com o controller Clientes, por�m no campo Model class devemos selecionar o model produto e nomear o controller como Produtos.

A Listagem 6 a seguir apresenta a implementa��o do ProdutosController, perceba que � bem similar a codifica��o do ClientesController, ou seja, o que foi explicado anteriormente no controlador cliente tamb�m � valido para o controlador de produtos.

Listagem 6. Implementa��o ProdutosController.


 namespace ForcaVendaWebAPI.Controllers
 {
    public class ProdutosController : ApiController
    {
        private BD_FORCA_VENDAEntities db = new BD_FORCA_VENDAEntities();
 
        // GET: api/Produtos
        public IQueryable<produto> Getproduto()
        {
            return db.produto;
        }
 
        // GET: api/Produtos/5
        [ResponseType(typeof(produto))]
        public async Task<IHttpActionResult> Getproduto(int id)
        {
            produto produto = await db.produto.FindAsync(id);
            if (produto == null)
            {
                return NotFound();
            }
            return Ok(produto);
        }
 
        // PUT: api/Produtos/5
        [ResponseType(typeof(void))]
        public async Task<IHttpActionResult> Putproduto(int id, produto produto)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }
 
            if (id != produto.idproduto)
            {
                return BadRequest();
            }
 
            db.Entry(produto).State = EntityState.Modified;
 
            try
            {
                await db.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!produtoExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }
            return StatusCode(HttpStatusCode.NoContent);
        }
 
        // POST: api/Produtos
        [ResponseType(typeof(produto))]
        public async Task<IHttpActionResult> Postproduto(produto produto)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }
 
            db.produto.Add(produto);
            await db.SaveChangesAsync();
            return CreatedAtRoute("DefaultApi", new { id = produto.idproduto }, produto);
        }
 
        // DELETE: api/Produtos/5
        [ResponseType(typeof(produto))]
        public async Task<IHttpActionResult> Deleteproduto(int id)
        {
            produto produto = await db.produto.FindAsync(id);
            if (produto == null)
            {
                return NotFound();
            }
 
            db.produto.Remove(produto);
            await db.SaveChangesAsync();
            return Ok(produto);
        }
 
         protected override void Dispose(bool disposing)
         {
             if (disposing)
             {
                 db.Dispose();
             }
             base.Dispose(disposing);
         }
 
         private bool produtoExists(int id)
         {
             return db.produto.Count(e => e.idproduto == id) > 0;
         }
     }
 }

No c�digo dessa listagem n�o consta nenhuma mudan�a significativa na implementa��o para ser comentada. Execute o projeto e especifique a rota para realizar uma requisi��o no browser via GET para obter a listagem de produtos, conforme ilustra a Figura 11.

Alterando o roteamento da Web API

Sempre quando for criado um novo servi�o a ser consumido por v�rios clientes distintos � importante descrever o objetivo do mesmo na pr�pria URL de acesso ao recurso. Desta forma o cliente ter� uma ideia do se trata o recurso e o que pode obter a partir do m�todo (action) definido atrav�s do conjunto (URL + Roteamento).

Quando � criado um novo projeto ASP.NET MVC, o Visual Studio por padr�o n�o implementa o nome da action no roteamento, ou seja, n�o � necess�rio informar o nome da action (m�todo) do controller na URL de acesso ao recurso no servidor.

Faremos uma altera��o no roteamento do projeto para possibilitar informar o nome da action na URL para ter uma melhor descri��o e acesso ao recurso solicitado no servidor.

Para alterar o roteamento da Web API � necess�rio abrir o arquivo WebApiConfig.cs que est� localizado dentro da pasta App_Start. Veja o trecho de c�digo presente na Figura 12, que mostra a rota padr�o para se ter acesso aos recursos dispon�veis no servidor.

Altere o trecho de c�digo mostrado nessa figura, presente no arquivo WebApiConfig.cs, para o trecho de c�digo presente na Listagem 7. Desta forma agora tamb�m pode ser informada a action do controller na URL de acesso aos recursos do servidor.

Listagem 7. Inserindo o action no roteamento da Web API.


 config.Routes.MapHttpRoute(
    name: "DefaultApi",
    routeTemplate: "api/{controller}/{Action}/{id}",
    defaults: new { id = RouteParameter.Optional }
 );

Para finalizar e conferir se a altera��o no roteamento foi realizada corretamente, veja a compara��o da URL de acesso � listagem de produtos. Perceba que na parte superior da Figura 13 n�o foi informada a action. Logo na parte inferior agora temos a presen�a do nome da action do controller na URL.

Criando o controller de cabe�alho do pedido

J� foram criados os controllers para os cadastros b�sicos da aplica��o, o cadastro de clientes e produtos, por�m agora � necess�rio criar os controllers para as entidades de movimenta��o do sistema: cabe�alho do pedido e itens do pedido.

Come�aremos pelo controller do cabe�alho do pedido e suas actions. Repita o procedimento para adi��o de um novo controller, mas dessa vez nomeie como PedidoCabecalho e em Model class selecione o model pedido_cabecalho.

A Listagem 8 apresenta toda a implementa��o necess�ria para as opera��es de CRUD do novo controller e suas respectivas actions. Esta listagem tamb�m n�o apresenta nenhuma novidade para ser comentada, assim sendo, considere como sendo a mesma estrutura de recursos utilizados e explicados nos controllers anteriores.

Listagem 8. Implementa��o PedidoCabecalhoController com uso do Scaffold.


 public class PedidoCabecalhoController : ApiController
 {
     private BD_FORCA_VENDAEntities db = new BD_FORCA_VENDAEntities();
 
     // GET: api/PedidoCabecalho
     public IQueryable<pedido_cabecalho> Getpedido_cabecalho()
     {
         return db.pedido_cabecalho;
     }
 
     // GET: api/PedidoCabecalho/5
     [ResponseType(typeof(pedido_cabecalho))]
     public async Task<IHttpActionResult> Getpedido_cabecalho(int id)
     {
         pedido_cabecalho pedido_cabecalho = await db.pedido_cabecalho.FindAsync(id);
         if (pedido_cabecalho == null)
         {
             return NotFound();
         }
 
         return Ok(pedido_cabecalho);
     }
 
     // PUT: api/PedidoCabecalho/5
     [ResponseType(typeof(void))]
     public async Task<IHttpActionResult> Putpedido_cabecalho(int id, pedido_cabecalho pedido_cabecalho)
     {
         if (!ModelState.IsValid)
         {
             return BadRequest(ModelState);
         }
 
         if (id != pedido_cabecalho.idpedido_cabecalho)
         {
             return BadRequest();
         }
 
         db.Entry(pedido_cabecalho).State = EntityState.Modified;
 
         try
         {
             await db.SaveChangesAsync();
         }
         catch (DbUpdateConcurrencyException)
         {
             if (!pedido_cabecalhoExists(id))
             {
                 return NotFound();
             }
             else
             {
                 throw;
             }
         }
 
         return StatusCode(HttpStatusCode.NoContent);
     }
 
     // POST: api/PedidoCabecalho
     [ResponseType(typeof(pedido_cabecalho))]
     public async Task<IHttpActionResult> Postpedido_cabecalho(pedido_cabecalho pedido_cabecalho)
     {
         if (!ModelState.IsValid)
         {
             return BadRequest(ModelState);
         }
 
         db.pedido_cabecalho.Add(pedido_cabecalho);
         await db.SaveChangesAsync();
 
         return CreatedAtRoute("DefaultApi", new { id = pedido_cabecalho.idpedido_cabecalho }, pedido_cabecalho);
     }
 
     // DELETE: api/PedidoCabecalho/5
     [ResponseType(typeof(pedido_cabecalho))]
     public async Task<IHttpActionResult> Deletepedido_cabecalho(int id)
     {
         pedido_cabecalho pedido_cabecalho = await db.pedido_cabecalho.FindAsync(id);
         if (pedido_cabecalho == null)
         {
             return NotFound();
         }
 
         db.pedido_cabecalho.Remove(pedido_cabecalho);
         await db.SaveChangesAsync();
 
         return Ok(pedido_cabecalho);
     }
 
     protected override void Dispose(bool disposing)
     {
         if (disposing)
         {
             db.Dispose();
         }
         base.Dispose(disposing);
     }
 
     private bool pedido_cabecalhoExists(int id)
     {
         return db.pedido_cabecalho.Count(e => e.idpedido_cabecalho == id) > 0;
     }
 }

O �nico ponto importante a destacar � o fato do model pedido_cabecalho ter relacionamentos com os models cliente e pedidos_itens, assim sendo, existe uma certa preocupa��o no consumo do servi�o exposto pelo controlador PedidoCabecalhoController.

No ato da cria��o de um novo pedido voc� ter� que passar junto com objeto pedido_cabecalho o cliente a que ele pertence, conforme pode ser visto na propriedade cliente presente na linha 29 da Listagem 9. Veja o detalhe tamb�m na linha 30, onde temos uma ICollection de pedido_itens.

Listagem 9. Model pedido cabe�alho.


namespace ForcaVendaWebAPI.Models
{
   using System;
   using System.Collections.Generic;
   
   public partial class pedido_cabecalho
   {
       public pedido_cabecalho()
       {
           this.pedido_itens = new HashSet<pedido_itens>();
       }
   
       public int idpedido_cabecalho { get; set; }
       public int idcliente { get; set; }
       public Nullable<decimal> valor_total_pedido { get; set; }
       public Nullable<int> qtde_itens { get; set; }
       public string status_pedido { get; set; }
       public Nullable<System.DateTime> data_pedido { get; set; }
   
       public virtual cliente cliente { get; set; }
       public virtual ICollection<pedido_itens> pedido_itens { get; set; }
   }
}

Criando o controller itens do pedido

Para finalizar o projeto, falta apenas criar o controller para os itens do pedido. Assim sendo, repita o processo e crie um novo controller, nomeando-o como PedidoItens e selecionando o model pedido_itens no campo Model class.

A Listagem 10 mostra como deve ficar o controller criado.

Listagem 10. Implementa��o Controller Itens Pedido.


public class PedidoItensController : ApiController
{
    private BD_FORCA_VENDAEntities db = new BD_FORCA_VENDAEntities();

    // GET: api/PedidoItens
    public IQueryable<pedido_itens> Getpedido_itens()
    {
        return db.pedido_itens;
    }

    // GET: api/PedidoItens/5
    [ResponseType(typeof(pedido_itens))]
    public async Task<IHttpActionResult> Getpedido_itens(int id)
    {
        pedido_itens pedido_itens = await db.pedido_itens.FindAsync(id);
        if (pedido_itens == null)
        {
            return NotFound();
        }

        return Ok(pedido_itens);
    }

    // PUT: api/PedidoItens/5
    [ResponseType(typeof(void))]
    public async Task<IHttpActionResult> Putpedido_itens(int id, pedido_itens pedido_itens)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        if (id != pedido_itens.idpedido_itens)
        {
            return BadRequest();
        }

        db.Entry(pedido_itens).State = EntityState.Modified;

        try
        {
            await db.SaveChangesAsync();
        }
        catch (DbUpdateConcurrencyException)
        {
            if (!pedido_itensExists(id))
            {
                return NotFound();
            }
            else
            {
                throw;
            }
        }

        return StatusCode(HttpStatusCode.NoContent);
    }

    // POST: api/PedidoItens
    [ResponseType(typeof(pedido_itens))]
    public async Task<IHttpActionResult> Postpedido_itens(pedido_itens pedido_itens)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        db.pedido_itens.Add(pedido_itens);
        await db.SaveChangesAsync();

        return CreatedAtRoute("DefaultApi", new { id = pedido_itens.idpedido_itens }, pedido_itens);
    }

    // DELETE: api/PedidoItens/5
    [ResponseType(typeof(pedido_itens))]
    public async Task<IHttpActionResult> Deletepedido_itens(int id)
    {
        pedido_itens pedido_itens = await db.pedido_itens.FindAsync(id);
        if (pedido_itens == null)
        {
            return NotFound();
        }

        db.pedido_itens.Remove(pedido_itens);
         await db.SaveChangesAsync();

         return Ok(pedido_itens);
     }

     protected override void Dispose(bool disposing)
     {
         if (disposing)
         {
             db.Dispose();
         }
         base.Dispose(disposing);
     }

     private bool pedido_itensExists(int id)
     {
         return db.pedido_itens.Count(e => e.idpedido_itens == id) > 0;
     }
}

Com isso temos o nosso servi�o Web API pronto para ser consumido pelas demais aplica��es, a serem desenvolvidas nas pr�ximas partes desta s�rie de artigos.

O modelo REST permite que clientes distintos, implementados mesmo com tecnologias diferentes, possam consumir os dados do servi�o de igual forma, bastando que haja suporte a requisi��es HTTP.

Esse tipo de arquitetura vem ganhando espa�o no desenvolvimento de grandes aplica��es, pois modulariza o sistema, deixando-o mais flex�vel e facilitando sua expans�o, inclusive para outras plataformas, caracter�stica que � foco deste artigo e ser� explorada nas pr�ximas edi��es.

Integrando aplica��es com Web API � Parte 2

Este artigo� �til para desenvolvedores front-end que precisam conhecer ou aprofundar seus conhecimentos em Bootstrap, AngularJS e ASP.NET MVC atrav�s do desenvolvimento de uma aplica��o real para For�a de Vendas.

Nesta segunda parte do artigo iremos realizar a implementa��o da aplica��o web para suporte � For�a de Vendas, que ir� dispor de cadastro cliente, produto e tamb�m uma p�gina onde seja poss�vel realizar o gerenciamento dos pedidos enviados pela aplica��o Windows Phone que ser� desenvolvida na terceira parte do artigo.

O desenvolvimento de aplica��es web se tornou um mercado totalmente din�mico, pois a maioria das empresas hoje necessitam de um website na internet, seja para apresentar seus produtos aos clientes, comunica��o com parceiros, fornecedores e principalmente para tornar-se competitiva no mercado.

Analisando este cen�rio, boa parte das aplica��es que antes rodavam apenas no desktop hoje est�o sendo migradas para web, em forma de website ou mesmo atrav�s de um servi�o na nuvem para que v�rios tipos de aplica��es cliente possam consumi-lo.

Com o crescimento da web t�m surgido v�rios frameworks para rodar no front-end da aplica��o, boa parte deles focado no uso da linguagem JavaScript, que roda no pr�prio browser do usu�rio.

Seguindo este crescimento temos a biblioteca jQuery como sendo uma das mais utilizadas, por�m hoje existem outros frameworks front-end como op��o ao jQuery ou at� mesmo para utilizar em conjunto ao jQuery.

O AngularJS � um framework front-end poderoso que disp�e de v�rios recursos interessantes para implementar e dar vida ao front-end de um website.

Introdu��o ao AngularJS

O framework AngularJS foi criado pela Google e tem como base o JavaScript, o mesmo pode ser considerado como sendo uma expans�o do HTML.

Com uso desta poderosa biblioteca podemos ter novos par�metros e interagir de forma din�mica com v�rios elementos do HTML, sendo poss�vel adicionar novos atributos do AngularJS �s tags do HTML, criando um v�nculo entre os elementos do HTML e os objetos e vari�veis do AngularJS, recurso este conhecido como Data Binding.

O AngularJS conta com v�rios recursos para melhor organizar a implementa��o da aplica��o front-end, para isso o mesmo disp�e de recursos como m�dulos, controller, servi�os, escopo de aplica��o, databind, loops em objetos complexos, rotas URI, requisi��es Ajax dentre v�rios outros recursos poderosos presentes nesta magn�fica biblioteca.

Criando o projeto no Visual Studio

Para iniciar o desenvolvimento da aplica��o web que ir� dar suporte � aplica��o For�a de Vendas Mobile, iremos criar um projeto com Visual Studio 2013. Crie um novo projeto do tipo ASP.NET Web Application (aqui ser� utilizado o .NET Framework 4.5.1) e nomeie como �ForcaDeVendaAppWeb�.

Na pr�xima tela que surge clique no bot�o Change Authentication e marque a op��o �No Authentication�, pois n�o iremos usar o sistema de autentica��o padr�o do Asp.net MVC. Logo ap�s selecione o template MVC e clique em OK.

Baixando o Bootstrap e AngularJS

Para dar prosseguimento ao projeto ser� necess�rio baixar dois os frameworks que far�o o trabalho pesado no front-end da aplica��o. Ser� baixado o Bootstrap para trabalhamos a parte estrutural e visual das p�ginas HTML e por fim ser� usado o AngularJS para realizamos a comunica��o com a aplica��o ASP.NET Web API e mostrar os dados na interface do usu�rio.

Para baixar os frameworks podemos utilizar o NuGet no Visual Studio, que � uma ferramenta que auxilia o desenvolvedor na obten��o das depend�ncias do projeto. Estas depend�ncias podem ser frameworks, plug-ins dentre outros.

Para acessar o gerenciador do NuGet basta clicar com bot�o direito no projeto e depois na op��o Manage NuGet Packages, assim ser� apresentada uma nova janela, conforme a Figura 1.

Com o NuGet aberto podemos pesquisar o nome do componente que desejamos adicionar ao projeto, logo ser�o listados todos os componentes que contenham o termo pesquisado. Basta clicar no bot�o install para adicionar o componente ao projeto.

Nesta figura � apresentado o gerenciador do NuGet com a pesquisa pelo framework do AngularJS, perceba que ap�s instalar, o mesmo fica com um �cone verde informando que o mesmo j� foi adicionado ao projeto.

Deve ser realizado o mesmo procedimento da instala��o do AngularJS para instalar o Bootstrap, pois embora o Visual Studio j� adicione por padr�o o Bootstrap no projeto, aqui iremos utilizar a vers�o mais recente.

Definindo carregamento de arquivos CSS e JavaScript

Aplica��es web necessitam de arquivos auxiliares com c�digo CSS e JavaScript para constru��o e defini��o das funcionalidades front-end da aplica��o, ou seja, n�o � uma boa pratica inserir c�digo CSS ou JavaScript juntamente ao c�digo de marca��o HTML.

Assim sendo, sempre que for necess�rio aplicar formata��es na p�gina ou mesmo criar algum c�digo JavaScript, ser� necess�rio criar arquivos auxiliares e realizar uma refer�ncia aos arquivos na p�gina principal da aplica��o.

O ASP.NET MVC tem uma forma bem simples e organizada para carregar arquivos CSS e JavaScript durante a renderiza��o da p�gina principal no browser. Existe uma classe chamada

BundleConfig que se encarrega de unificar diversos arquivos CSS e JavaScript em um s�, desta forma teremos uma carga atrav�s de um �nico arquivo, reduzindo a assim o tamanho do arquivo a ser carregado, a quantidade e tamb�m dificultando o acesso direto aos arquivos originais.

A classe BundleConfig est� presente dentro da pasta App_Start da estrutura de um projeto ASP.NET MVC. Abrindo este arquivo veremos um m�todo chamado RegisterBundles, que recebe por par�metro uma cole��o de BundleCollection. � atrav�s do abjeto bundles que iremos informar ao ASP.NET quais arquivos devem ser unificados no ato do carregamento da p�gina do browser do usu�rio.

Perceba que na estrutura de pastas do projeto ASP.NET MVC existe uma pasta chamada de �Content� para inserirmos os arquivos CSS do projeto. Tamb�m h� outra pasta chamada Scripts, que � o local onde devem ser salvos os arquivos JavaScript pertencentes ao projeto.

De posse destes detalhes sobre como definir a carga de arquivos CSS e JavaScript no projeto, agora devemos definir dentro arquivo BundleConfig.cs quais arquivos CSS e JavaScript devem ser unificados para carga de arquivos, ou seja, informar os arquivos CSS e JavaScript referentes aos frameworks que iremos utilizar, neste caso o Bootstrap e o AngularJS.

Veja na Listagem 1 as linhas de c�digo que precisam ser inseridas no arquivo BundleConfig para carregar os arquivos do AngularJS. Os arquivos do Bootstrap e demais scripts e estilos, como da jQuery, j� devem constar neste artigo por padr�o.

Listagem 1. Setando carga de arquivos CSS e Javascript no arquivo BundleConfig.cs.


     bundles.Add(new ScriptBundle("~/bundles/angularjs").Include(
                 "~/Scripts/angular.min.js"));
 
     bundles.Add(new ScriptBundle("~/bundles/angularjsControllers").Include(
             "~/Scripts/AngularJSApp/clienteController.js",
             "~/Scripts/AngularJSApp/produtoController.js",
             "~/Scripts/AngularJSApp/pedidoCabecalhoController.js"));
 }

Boa parte da carga de arquivos informada no arquivo BundleConfig.cs foi realizada automaticamente pelo Visual Studio no ato da cria��o do projeto, por�m � importante destacar outros que foram inclu�dos posteriormente. Vejamos a seguir alguns detalhes sobre essa listagem.

Linhas 01 e 02: Neste bloco de c�digo � informado o arquivo �angular.min.js�, que � n�cleo do AngularJS e ser� usado no front-end para acessamos os recursos do servi�o Web API.
Linhas 04 a 07: Aqui s�o informados alguns controller pertencentes ao AngularJS. Ser� nestes arquivos que iremos codificar o acesso ao servi�o da Web API e tamb�m manipular os elementos do HTML a serem exibidos ao usu�rio.
Perceba que os arquivos clienteController.js, produtoController.js e pedidoCabecalhoController.js ainda n�o existem no projeto, pois iremos cri�-los � medida que avan�amos no artigo.

Estruturando Layout com Bootstrap

Para que seja poss�vel estruturar um layout de p�ginas de um website de forma organizada com Bootstrap e poder compartilhar esta estrutura com as demais p�ginas do site, a melhor alternativa � usar um arquivo de layout.

Quando se cria um projeto ASP.NET MVC, ele automaticamente cria um arquivo de layout chamado de _Layout.cshtml, presente dentro da pasta Views>Shared, algo parecido com as Master Pages do ASP.NET Web Forms.

� neste arquivo de layout que iremos definir o menu de navega��o da aplica��o For�a de Vendas de forma simples e objetiva com uso do menu de navega��o do Bootstrap.

Para entender como deve ser constru�do um arquivo de layout com ASP.NET MVC com uso do Bootstrap, analise o c�digo presente na Listagem 2.

Listagem 2. Arquivo de layout padr�o do ASP.NET MVC - _Layout.cshtml.


 <!DOCTYPE html>
 <html data-ng-app=�app�>
 <head>
    <meta charset=�utf-8� />
    <meta name=�viewport� content=�width=device-width, initial-scale=1.0�>
    <title>@ViewBag.Title � For�a de Vendas</title>    
    @Styles.Render(�~/Content/css�)
    @Scripts.Render(�~/bundles/modernizr�)
 </head>
 <body>
    <div class=�navbar navbar-inverse navbar-fixed-top�>
        <div class=�container�>
            <div class=�navbar-header�>
                <button type=�button� class=�navbar-toggle� data-toggle=�collapse� data-target=�.navbar-collapse�>
                    <span class=�icon-bar�></span>
                    <span class=�icon-bar�></span>
                    <span class=�icon-bar�></span>
                </button>
                @Html.ActionLink(�App For�a de Vendas�, �Index�, �Home�, new { area = �� }, new { @class = �navbar-brand� })
            </div>
            <div class=�navbar-collapse collapse�>
                <ul class=�nav navbar-nav�>
                    <li>@Html.ActionLink(�Clientes�, �Index�, �Cliente�)</li>
                    <li>@Html.ActionLink(�Produtos�, �Index�, �Produto�)</li>
                    <li>@Html.ActionLink(�Pedidos�, �Index�, �PedidoCabecalho�)</li>
                </ul>
            </div>
        </div>
    </div>
    <br /><br /><br />
    <div class=�container body-content�>
        @RenderBody()
        <hr />
        <footer>
            <p>� @DateTime.Now.Year � App For�a de Vendas</p>
        </footer>
    </div>
    
    @Scripts.Render(�~/bundles/jquery�)
    @Scripts.Render(�~/bundles/bootstrap�)
    @Scripts.Render(�~/bundles/angularjs�)    
    @Scripts.Render(�~/bundles/angularjsControllers�)    

    @RenderSection(�scripts�, required: false)
 </body>
 </html>

Essa listagem tem o menu de navega��o da aplica��o, por�m existem outros detalhes que precisam de um melhor esclarecimento. Veja a seguir os detalhes da listagem.

Linha 2: Nesta linha temos a abertura da tag html, na qual foi definido o atributo �data-ng-app� do AngularJS, que � o ponto inicial para inicializar uma aplica��o com AngularJS.
Perceba que o data-ng-app recebeu como valor o �app�, ou seja, � a forma de dar nome � aplica��o. Entenda como sendo uma forma de inst�ncia do AngularJS para que possamos ter v�rios escopos de acordo com a necessidade.
Linha 5: Esta linha tem uma configura��o muito importante para uso pelo Bootstrap. Nela definimos a meta tag viewport para que se possa capturar informa��es sobre o dispositivo que est� renderizando a p�gina, como o tamanho da tela e escala.
Linhas 7 e 8: Aqui s�o utilizados o @Styles e @Scripts para renderizar os arquivos CSS e JavaScript que definimos dentro do arquivo BundleConfig.cs anteriormente.
Linha 11 a 29: Este bloco de c�digo refere-se � estrutura de menu de navega��o da aplica��o. Aqui foram utilizadas v�rias classes CSS do Boostrap para constru��o do menu.
Perceba ainda que no intervalo das linhas 23 a 25 foram definidos alguns ActionLinks que apontam para os controllers da aplica��o, controller estes que ser�o criados posteriormente.
Linha 32: Nesta linha consta o ponto chave de um arquivo de layout, o comando @RenderBody(), que � respons�vel por carregar o conte�do das p�ginas que herdam de _Layout.cshtml.
Linhas 39 a 42: Aqui � utilizado novamente o @Scripts para renderizar os arquivos JavaScript da aplica��o. Perceba que foi informado o path virtual referente aos bundles.
Veja ainda que s�o carregados a jQuery, o Bootstrap, o AngularJS e alguns Controllers que iremos utilizar na aplica��o referentes ao AngularJS.

Criando um Controller com AngularJS para o cadastro de clientes

O AngularJS � um framework que trabalha no front-end da aplica��o e para organizar o c�digo o mesmo disp�e de uma estrutura de m�dulos, servi�os, controllers, dentre outros recursos. Assim podemos dividir as responsabilidades e funcionalidades da aplica��o de forma clara, objetiva e manuten�vel.

O primeiro controller a ser criado ser� para o cadastro de clientes, para isso crie uma pasta chamada �AngularJSApp� dentro da pasta Scripts, que j� consta na estrutura do projeto.

� na pasta AngularJSApp que iremos criar todos os arquivos JavaScript que ir�o representar os controllers do AngularJS na aplica��o For�a de Vendas.

Clique com bot�o direito na pasta AngularJSApp e na op��o Add>New Item, logo ap�s ser� aberta uma nova janela onde deve ser selecionado o tipo de arquivo JavaScript File. Nomeie de clienteController.js e pressione Add para que o arquivo possa ser criado.

O arquivo clienteController.js ir� conter todo o c�digo necess�rio para dar vida � view de cadastro de cliente e tamb�m acessar o servi�o do ASP.NET Web API para realizar as opera��es de CRUD. Para melhor entendimento de como deve ficar a implementa��o do Controller Cliente com AngularJS, veja o c�digo presente na Listagem 3.

Listagem 3. Implementa��o cliente Controller para uso com AngularJS.


//Seta o m�dulo para o AngularJS
var app = angular.module('app', []);
//Cria o controller cliente
app.controller('clienteController', ['$scope', '$http', clienteController]);

//M�todo para o controller cliente do AngujarJS
function clienteController($scope, $http) {

    //Declara��o de vari�veis
    $scope.exibeformNovoCliente = false;
    $scope.ocultaTabelaListagemClientes = false;
    $scope.exibeformAlterarCliente = false;

    //Fun��o para exibir o form para cadastro do novo cliente
    $scope.funcformNovoCliente = function () {
        $scope.exibeformNovoCliente = true;
        $scope.ocultaTabelaListagemClientes = true;
    };

    //Ocultar o form de novo cliente e exibir a listagem
    $scope.funcCancelarCadastro = function () {
        $scope.exibeformNovoCliente = false;
        $scope.ocultaTabelaListagemClientes = false;
    };

    //Cadastrar cliente
    $scope.cadastrarCliente = function () {
        var dataAtual = new Date();
        this.novocliente.data_cadastro = dataAtual;
        $http.post('http://localhost/ForcaVendaWebAPI/api/Clientes/Postcliente/', this.novocliente).success(function (data) {
            alert("Cliente cadastrado com sucesso.");
            $scope.exibeformNovoCliente = false;
            $scope.ocultaTabelaListagemClientes = false;
            $scope.clientes.push(data);
            $scope.novocliente = null;
        }).error(function (data) {
            $scope.error = "Erro ao cadastrar o cliente! " + data;                
        });
    };

    //Buscar listagem de clientes
    $http.get('http://localhost/ForcaVendaWebAPI/api/Clientes/Getcliente/').success(function (data) {
        $scope.clientes = data;
    })
    .error(function () {
        $scope.error = "Erro ao carregar a listagem de clientes!";
    });

    //Fun��o para exibir o form para cadastro do novo cliente
    $scope.funcformEditarCliente = function () {
        $scope.clienteAlterar = this.cliente;
        $scope.exibeformNovoCliente = false;
        $scope.ocultaTabelaListagemClientes = true;
        $scope.exibeformAlterarCliente = true;            
    };

    //Ocultar o form de novo cliente e exibir a listagem
    $scope.funcCancelarEdicao = function () {
        $scope.exibeformNovoCliente = false;
        $scope.ocultaTabelaListagemClientes = false;
        $scope.exibeformAlterarCliente = false;
    };

    //Editar cliente
    $scope.editarCliente = function () {
        var cli = this.clienteAlterar;
        $http.put('http://localhost/ForcaVendaWebAPI/api/Clientes/Putcliente/' + cli.idcliente, cli).success(function (data) {
            alert("Cliente alterado com sucesso.");
            $scope.exibeformNovoCliente = false;
            $scope.ocultaTabelaListagemClientes = false;
            $scope.exibeformAlterarCliente = false;
        }).error(function (data) {
            $scope.error = "Erro ao alterar o cliente! " + data;
        });
    };

    //Deletar cliente
    $scope.deletarCliente = function () {
        var id = this.cliente.idcliente;
        $http.delete('http://localhost/ForcaVendaWebAPI/api/Clientes/Deletecliente/' + id).success(function (data) {
            alert("Cliente deletado com sucesso.");
            $.each($scope.clientes, function (i) {
                if ($scope.clientes[i].idcliente === id) {
                    $scope.clientes.splice(i, 1);
                    return false;
                }
            });
        }).error(function (data) {
            $scope.error = "Erro ao deletar o cliente." + data;
        });
    };

}

Essa listagem j� cont�m v�rios coment�rios b�sicos sobre as funcionalidades a serem implementadas na view de cadastro de clientes, que � o pr�ximo passo, por�m veja a seguir algumas explica��es sobre a estrutura e recursos do AngularJs utilizados nesse controller.

Linha 2: Nesta linha est� o ponto de partida para se trabalhar com o AngularJS. Aqui � criado o escopo da aplica��o, atrav�s de um objeto denominado app, que � instanciado atrav�s da chamada da fun��o module do Angular.
Perceba que foi passado como par�metro o nome do objeto �app�, que � o nome que iremos usar para adicionar novos objetos � aplica��o instanciada, que neste caso iremos inserir no contexto os controllers.
Uma boa pr�tica em aplica��es complexas seria criar um ou mais arquivo module para inicializar todos os m�dulos da aplica��o.
Linha 4: Aqui � utilizada a fun��o chamada controller do Angular para criar o controller clienteController'. Tamb�m s�o passados como par�metro os objetos $scope, $http e o nome do novo controller. O $scope � utilizado para criar vari�veis e objetos a serem acessadas pela view da aplica��o. Quanto ao $http, ser� utilizado para podemos acessar o servi�o da Web API.
Linhas 10 a 12: Nestas linhas s�o definidas algumas vari�veis booleanas que s�o utilizadas para exibir alguns conjuntos de elementos HTML da view, neste caso os formul�rios para cadastro e altera��o de clientes e tamb�m a tabela com a listagem de clientes cadastrados na base de dados. Perceba que para criar estas vari�veis n�o foi utilizado o �var�, ou seja, elas foram adicionadas diretamente ao escopo da aplica��o app do Angular atrav�s do uso do $scope.
Linhas 15 a 17: Neste bloco de c�digo � criada a fun��o funcformNovoCliente, que altera os valores das vari�veis booleanas para que seja exibido o form de cadastro de clientes ao usu�rio e depois seja ocultada a tabela de listagem dos clientes cadastros.
Linhas 21 a 23: Aqui � criada outra fun��o chamada de funcCancelarCadastro, que realiza o papel inverso � fun��o funcformNovoCliente criada anteriormente.
Linhas 27 a 39: Este bloco de c�digo corresponde � fun��o cadastrarCliente, que tem como objetivo receber os dados do novo cliente a ser cadastrado.
Para isso � criada uma vari�vel chamada novocliente, que � vinculada pelo Angular aos inputs da view que recebe os dados do cliente informados pelo usu�rio.
Perceba que na linha 30 � realizada uma requisi��o via POST ao recurso �api/Clientes/Postcliente�. Caso ocorra algum erro, o mesmo ser� apresentado na view atrav�s da vari�vel chamada error, presente na linha 37.
Linhas 42 a 47: Aqui � utilizado o $http para realizar uma requisi��o GET ao recurso �api/Clientes/Getcliente� para obter a listagem de clientes e popular a tabela na view.
Linhas 50 a 55: Aqui � criada a fun��o funcformEditarCliente para editar cadastro do cliente. Perceba que � definido na linha 51 o cliente que � selecionado para edi��o na tabela. As demais linhas exibem e ocultam alguns conjuntos de elementos HTML na p�gina.
Linha 58 a 62: Aqui temos a fun��o funcCancelarEdicao, que � chamada caso o usu�rio clique no bot�o Cancelar na edi��o do cadastro do cliente.
Linhas 65 a 74: Neste bloco de c�digo temos a fun��o editarCliente, que tem o papel de acesso ao recurso �/api/Clientes/Putcliente� atrav�s de uma requisi��o PUT, passando o objeto com os dados do cliente a ser alterado no banco de dados.
Linhas 78 a 91: Para finalizar o controller cliente, foi criada uma fun��o deletarCliente que recebe o id do cliente ser exclu�do da base de dados. Perceba que � realizada uma requisi��o com o verbo DELETE do HTTP ao recurso �api/Clientes/Deletecliente/�.

Desenvolvendo a p�gina cadastro de clientes

Para criar a p�gina de cadastro de clientes no ASP.NET MVC � necess�rio criar um controle seguindo de uma view que corresponde � p�gina com marca��o HTML. Assim sendo, o controller recebe a solicita��o do cliente via protocolo HTTP e em seguida o controller verifica a URL do recurso solicitado, bem como qual verbo do protocolo HTTP foi utilizado na requisi��o.

Ap�s o controller analisar a requisi��o, ent�o ele retorna a view correspondente para o usu�rio, ou seja, � devolvida uma resposta ao usu�rio em forma de HTML, podendo tamb�m ser retornados outros tipos de dados como o JSON, o que ser� feito nas requisi��es realizadas na aplica��o ASP.NET Web API que disp�e de recursos de acesso a dados.

O primeiro passo para criar a p�gina de cadastro de cliente � criar o controller, para isso clique com o bot�o direito em cima da pasta Controllers e depois na op��o Add>Controller. Ser� apresentada uma nova janela onde voc� deve selecionar a op��o �MVC 5 Controller � Empty� e clicar em Add.

Por fim, na pr�xima tela que surge, defina o nome do controller para �Cliente�e clique Add novamente. Ap�s realizado este procedimento ser� criado um arquivo chamado ClienteController.cs dentro da pasta Controllers do projeto, que traz por padr�o a action Index que retorna a view de mesmo nome.

Ap�s criado o controller � necess�rio criar a view referente � action Index. Para realizar este procedimento devemos clicar com bot�o direito em cima do nome da action (Index) e escolher a op��o Add View.

Logo em seguida ser� apresentada uma nova janela onde podemos alterar o nome da view ou selecionar um dos templates autom�ticos oferecidos pelo IDE. Neste caso, mantenha o template Empty (without model) e clique em Add.

O Visual Studio criou o arquivo Index.cshtml dentro da pasta Views>Cliente. Neste arquivo ainda n�o consta nenhum c�digo, desta forma precisamos implementar as fun��es de CRUD na view, vinculando aos recursos criados no controller cliente com o AngularJS. Para realizar este procedimento, a view Index deve ser codificada conforme c�digo presente na Listagem 4.

Listagem 4. Implementa��o View Index para o CRUD cadastro de clientes.


@{ ViewBag.Title = "Clientes"; }
<div data-ng-controller="clienteController">
   <div class="panel panel-default">
       <div class="panel-heading">Controle de clientes</div>
       <div class="panel-body">
           <div class="row">
               <!--row form novoCliente-->
               <div class="col-md-12">
                   <strong class="error">{{ error }}</strong>
                   <form name = "novoCliente" data-ng-show="exibeformNovoCliente">
                       <div class="form-group">
                           <div class="col-sm-12">
                               <label for="cadastro" class="col-sm-12 control-label col-md-offset-1">::CADASTRAR NOVO CLIENTE::</label>
                           </div>
                           <label for="nome" class="col-sm-2 control-label">Nome:</label>
                           <div class="col-sm-10">
                               <input type = "text" class="form-control" id="nome" data-ng-model="novocliente.nome" required />
                           </div>

                           <label for="cpf" class="col-sm-2 control-label">CPF/CNPJ:</label>
                           <div class="col-sm-10">
                               <input type = "number" class="form-control" id="cpf_cnpj" data-ng-model="novocliente.cpf_cnpj" required />
                           </div>
                           ...demais campos do cadastro do cliente  
                           <div class="form-group">
                               <div class="col-sm-offset-2 col-sm-10">
                                   <input type = "submit" value="Cadastrar" data-ng-click="cadastrarCliente()" class="btn btn-primary" />
                                   <input type = "button" value="Cancelar" data-ng-click="funcCancelarCadastro()" class="btn btn-primary" />
                               </div>
                           </div>
                       </div>
                   </form>
               </div>
           </div><!-- fim row form novoCliente-->

           <div class="row">
               <!--row table listagem de clientes-->
               <div class="col-md-12">
                   <div class="table-responsive" data-ng-hide="ocultaTabelaListagemClientes">
                      <p><a data-ng-click="funcformNovoCliente()" class="btn btn-primary">Novo cliente</a></p>
                       <table class="table table-bordered table-hover">
                           <tr>
                               <td>ID</td>
                               <th>Nome</th>
                               <th>CPF/CNPJ</th>
                               ... cabe�alho das demais colunas
                               <th></th>
                           </tr>
                           <tr data-ng-repeat= "cliente in clientes" >
                               <td>{ { cliente.idcliente } }</td>
                               <td>{{ cliente.nome }}</td>
                               <td>{{ cliente.cpf_cnpj }}</td>
                               ... demais colunas
                               <td> <a data-ng-click="funcformEditarCliente(cliente)" href="javascript:;">Editar</a>
                                   | <a data-ng-click="deletarCliente(cliente)" href="javascript:;">Deletar</a> </td>
                           </tr>
                       </table>
                   </div><!--fim div class="table-responsive"-->
               </div>
           </div><!--fim row table listagem de clientes-->
            <div class="row">
               <!--row form alterarCliente-->
               <div class="col-md-12">
                    <form name = "alterarCliente" data-ng-show="exibeformAlterarCliente">
                        <div class="form-group">
                            <div class="col-sm-12">
                                <label for="alterar" class="col-sm-12 control-label col-md-offset-1">::ALTERAR CADASTRO CLIENTE::</label>
                            </div>
                            <label for="idcliente" class="col-sm-2 control-label">ID:</label>
                            <div class="col-sm-10">
                                <input type = "number" class="form-control" id="idcliente" data-ng-model="clienteAlterar.idcliente" required />
                            </div>
                            <label for="nome" class="col-sm-2 control-label">Nome:</label>
                            <div class="col-sm-10">
                                <input type = "text" class="form-control" id="nome" data-ng-model="clienteAlterar.nome" required />
                            </div>
                            <label for="cpf" class="col-sm-2 control-label">CPF/CNPJ:</label>
                            <div class="col-sm-10">
                                <input type = "text" class="form-control" id="cpf_cnpj" data-ng-model="clienteAlterar.cpf_cnpj" required />
                            </div>
                            ... demais campos do cadastro do cliente
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <input type = "submit" value="Salvar altera��es" data-ng-click="editarCliente()" class="btn btn-primary" />
                                    <input type = "button" value="Cancelar" data-ng-click="funcCancelarEdicao()" class="btn btn-primary" />
                                </div>
                            </div>
                        </div>
                   </form>
                </div>
            </div><!-- fim row form alterarCliente-->
        </div><!--class="panel-body"-->
    </div><!--Fim class="panel panel-default"-->
 </div><!--Fim data-ng-controller="clienteController"-->

Boa parte do c�digo dessa listagem faz apenas refer�ncia �s classes CSS do Bootstrap, por�m � necess�ria uma melhor explica��o quanto � vincula��o dos elementos HTML com o c�digo do controller Cliente do AngularJS. Veja a seguir mais alguns coment�rios sobre esse c�digo.

Linha 2: Nesta linha � criada uma div e definido o atributo data-ng-controller do AngularJS recebendo o valor �clienteController", que � justamente o nome do controller criado anteriormente na pasta �AngularJSApp�.
O uso do data-ng-controller passando o nome do controller informa ao AngularJS que tudo que estiver dentro desta div faz parte do escopo deste controller. Assim sendo, teremos acesso na view �s vari�veis, objetos e fun��es criadas no clienteController. � desta forma que iremos passar os dados do controller para a view e vice-versa.
Linha 9: Perceba que nesta linha foi feita uma refer�ncia � vari�vel error do controller cliente, inserindo {{ error }} juntamente ao c�digo HTML. Esta � forma com que se acessa e apresenta ao usu�rio o valor contido em uma vari�vel ou objeto presente em um controller do AngularJS. Desta forma fica simples mostrar na p�gina um erro, caso ocorra.
Linha 10: Aqui � criado um form referente ao cadastro de um novo cliente, que recebe uma propriedade data-ng-show do Angular cujo objetivo � exibir ou ocultar o formul�rio de acordo com os valores booleanos recebidos. Por este motivo que esse atributo � vinculado � vari�vel exibeformNovoCliente.
Linhas 11 a 24: Neste bloco de c�digo temos v�rias labels e inputs para entrada de dados com as informa��es do cliente a ser cadastrado pelo usu�rio.
Perceba que est� sendo inserido nos inputs o atributo data-ng-model do Angular. Desta forma vinculamos um objeto e suas propriedades entre o controller e a view, assim, tudo que o usu�rio digitar nestes inputs automaticamente � refletido no objeto �novocliente� em cada uma de suas propriedades.
Observe que uma parte do c�digo foi omitida para simplificar a listagem, por�m o c�digo fonte deste artigo encontra-se dispon�vel para download no site da revista.
Linhas 27 e 28: Aqui s�o criados dois bot�es com refer�ncias �s fun��es cadastrarCliente() e funcCancelarCadastro() do clienteController. Perceba que para realizar esta vincula��o foi utilizado o atributo data-ng-click do AngularJS.
Linha 40: Aqui � criado outro bot�o e vinculado � fun��o funcformNovoCliente() atrav�s do atributo data-ng-click do Angular, desta forma podemos facilmente exibir o form para cadastro de um cliente.
Linhas 41 a 57: Neste bloco de c�digo � criada uma tabela com algumas classes do Bootstrap para podemos exibir a listagem clientes.
Na linha 49 temos o c�digo principal para fazer loop na listagem de clientes: o atributo data-ng-repeat do Angular. Para esse atributo passamos a express�o "cliente in clientes� para buscar os dados de todos clientes. Nas linhas 50 a 55 acessamos e exibimos as propriedades de cada cliente.
Linhas 64 a 89: Neste intervalo � criado outro from, por�m agora para realizar a altera��o do cadastro de cliente. Perceba que nos inputs s�o utilizados atributos data-ng-model do Angular para fazer refer�ncia ao "clienteAlterar� e assim poder passar estes novos dados atrav�s da chamada da fun��o editarCliente(), presente no bot�o da linha 84.

O cadastro de cliente j� se encontra totalmente funcional, o interessante agora � testar a aplica��o e verificar o seu funcionamento, desta forma iremos precisar do servi�o do ASP.NET Web API rodando na mesma porta da aplica��o Web.

Para realizar tal procedimento podemos importar o projeto da Web API para a solution da aplica��o Web e alterar as propriedades dos projetos para rodar no servidor IIS Local ao inv�s do IIS do Visual Studio.

Voc� precisar� inicializar o Visual Studio como administrador para que o mesmo possa criar os diret�rios virtuais no IIS Local atrav�s do clique do bot�o Create Virtual Directory localizado na propriedade do projeto guia Web.

Agora rode a aplica��o cadastre alguns clientes e veja o resultado, que deve ser semelhante ao que � apresentado nas Figuras 2 a 4.

Criando o Controller do AngularJS para o cadastro de produtos

Para criar o cadastro de produtos faremos os mesmos passos usados no cadastro de clientes. Assim sendo, agora � necess�rio criar um controller para o AngularJS, ent�o clique com bot�o direito na pasta AngularJSApp e crie um novo arquivo JavaScript chamado de produtoController.js.

Este arquivo ir� ter todas as funcionalidades necess�rias para as opera��es de CRUD referente ao cadastro de produtos.

Ap�s realizado o passo anterior, devemos implementar o produtoController conforme c�digo presente na Listagem 5. Este c�digo j� est� comentado e � bem parecido com o c�digo do clienteController, o que muda � somente o contexto para o cadastro de produto, ent�o n�o teremos dificuldades para compreender esta implementa��o.

Listagem 5. Implementa��o controller Angular para cadastro de produto.


 //Cria o controller produto
 app.controller('produtoController', ['$scope', '$http', produtoController]);

 //M�todo para o controller produto do AngujarJS
 function produtoController($scope, $http) {

    //Declara��o de vari�veis
    $scope.exibeformNovoProduto = false;
    $scope.ocultaTabelaListagemProdutos = false;
    $scope.exibeformAlterarProduto = false;

    //Fun��o para exibir o form para cadastro do novo produto
    $scope.funcformNovoProduto = function () {
        $scope.exibeformNovoProduto = true;
        $scope.ocultaTabelaListagemProdutos = true;
    };

    //Ocultar o form de novo produto e exibir a listagem
    $scope.funcCancelarCadastro = function () {
        $scope.exibeformNovoProduto = false;
        $scope.ocultaTabelaListagemProdutos = false;
    };

    //Fun��o cadastrar produto
    $scope.cadastrarProduto = function () {
        var dataAtual = new Date();
        this.novoproduto.data_cadastro = dataAtual;
        $http.post('http://localhost/ForcaVendaWebAPI/api/Produtos/Postproduto/', this.novoproduto).success(function (data) {
            alert("Produto cadastrado com sucesso.");
            $scope.exibeformNovoProduto = false;
            $scope.ocultaTabelaListagemProdutos = false;
            $scope.produtos.push(data);
            $scope.novoproduto = null;
        }).error(function (data) {
            $scope.error = "Erro ao cadastrar o produto! " + data;
        });
    };

    //Buscar listagem de produtos
    $http.get('http://localhost/ForcaVendaWebAPI/api/Produtos/Getproduto/').success(function (data) {
        $scope.produtos = data;
    })
    .error(function () {
        $scope.error = "Erro ao carregar a listagem de produtos!";
    });

    //Fun��o para exibir o form para cadastro do novo produto
    $scope.funcformEditarProduto = function () {
        $scope.produtoAlterar = this.produto;
        $scope.exibeformNovoProduto = false;
        $scope.ocultaTabelaListagemProdutos = true;
        $scope.exibeformAlterarProduto = true;
    };

    //Ocultar o form de novo produto e exibir a listagem
    $scope.funcCancelarEdicao = function () {
        $scope.exibeformNovoProduto = false;
        $scope.ocultaTabelaListagemProdutos = false;
        $scope.exibeformAlterarProduto = false;
    };

    //Editar produto
    $scope.editarProduto = function () {
        var prod = this.produtoAlterar;
        $http.put('http://localhost/ForcaVendaWebAPI/api/Produtos/Putproduto/' + prod.idproduto, prod).success(function (data) {
            alert("Produto alterado com sucesso.");
            $scope.exibeformNovoProduto = false;
            $scope.ocultaTabelaListagemProdutos = false;
            $scope.exibeformAlterarProduto = false;
        }).error(function (data) {
            $scope.error = "Erro ao alterar o produto! " + data;
        });
    };

    //Deletar produto
    $scope.deletarProduto = function () {
        var id = this.produto.idproduto;
        $http.delete('http://localhost/ForcaVendaWebAPI/api/Produtos/Deleteproduto/' + id).success(function (data) {
            alert("Produto deletado com sucesso.");
            $.each($scope.produtos, function (i) {
                if ($scope.produtos[i].idproduto === id) {
                    $scope.produtos.splice(i, 1);
                    return false;
                }
            });
        }).error(function (data) {
            $scope.error = "Erro ao deletar o produto." + data;
        });
    };
 }

Criando o Controller e View ASP.NET para o cadastro de produto

Para criarmos a view para o CRUD de produtos, primeiramente precisaremos criar o controller do ASP.NET MVC, ent�o repita os passos do controller de clientes, mas nomeie agora de ProdutoController.

O pr�ximo passo � criar a view correspondente ao ProdutoController, para isso basta repetir o procedimento executado para criar a view Index do cadastro de cliente. Dessa vez a view ser� criada na pasta Produto.

A nova view criada tamb�m n�o ter� nenhuma implementa��o nova em compara��o � view do cadastro de clientes, o que muda � apenas contexto para considerar a entidade produto. A view deve ser implementada conforme c�digo presente na Listagem 6.

Listagem 6. Implementa��o View cadastro de produto.


@{ ViewBag.Title = "Produtos"; }
<div data-ng-controller="produtoController">
   <div class="panel panel-default">
       <div class="panel-heading">Controle de Produtos</div>
       <div class="panel-body">
           <div class="row"> <!--row form novoproduto-->
               <div class="col-md-12">
                   <strong class="error">{{ error }}</strong>
                   <form name = "novoproduto" data-ng-show="exibeformNovoProduto">
                       <div class="form-group">
                           <div class="col-sm-12">
                               <label for="cadastro" class="col-sm-12 control-label col-md-offset-1">::CADASTRAR NOVO PRODUTO::</label>
                           </div>
                           <label for="descricao" class="col-sm-2 control-label">Descri��o:</label>
                           <div class="col-sm-10">
                               <input type = "text" class="form-control" id="descricao" data-ng-model="novoproduto.descricao" required />
                           </div>
                           <label for="preco_compra" class="col-sm-2 control-label">Pre�o de compra:</label>
                           <div class="col-sm-10">
                               <input type = "number" class="form-control" id="preco_compra" data-ng-model="novoproduto.preco_compra" required />
                           </div>
                           ... demais campos                          
                           <div class="form-group">
                               <div class="col-sm-offset-2 col-sm-10">
                                   <input type = "submit" value="Cadastrar" data-ng-click="cadastrarProduto()" class="btn btn-primary" />
                                   <input type = "button" value="Cancelar" data-ng-click="funcCancelarCadastro()" class="btn btn-primary" />
                               </div>
                           </div>
                       </div>
                   </form>
               </div>
           </div><!-- fim row form novoproduto-->
           <div class="row"> <!--row table listagem de produtos-->
               <div class="col-md-12">
                   <div class="table-responsive" data-ng-hide="ocultaTabelaListagemProdutos">
                       <p><a data-ng-click="funcformNovoProduto()" class="btn btn-primary">Novo produto</a></p>
                       <table class="table table-bordered table-hover">
                           <tr>
                               <td>ID</td>
                               <th>Descri��o</th>
                               <th>Pre�o Compra</th>
                               ...demais campos
                               <th></th>
                           </tr>
                           <tr data-ng-repeat= "produto in produtos" >
< td >{ { produto.idproduto } }</td>
                               <td>{{ produto.descricao }}</td>
                               <td>{{ produto.preco_compra }}</td>
                               ...demais campos
                               <td> <a data-ng-click="funcformEditarProduto(produto)" href="javascript:;">Editar</a>
                                   | <a data-ng-click="deletarProduto(produto)" href="javascript:;">Deletar</a> </td>
                           </tr>
                       </table>
                   </div><!--fim div class="table-responsive"-->
               </div>
           </div><!--fim row table listagem de produtos-->
           <div class="row"> <!--row form alterarproduto-->
               <div class="col-md-12">
                   <form name = "alterarproduto" data-ng-show="exibeformAlterarProduto">
                       <div class="form-group">
                           <div class="col-sm-12">
                               <label for="alterar" class="col-sm-12 control-label col-md-offset-1">::ALTERAR CADASTRO produto::</label>
                           </div>
                           <label for="idproduto" class="col-sm-2 control-label">ID:</label>
                           <div class="col-sm-10">
                               <input type = "number" class="form-control" id="idproduto" data-ng-model="produtoAlterar.idproduto" required />
                           </div>
                           <label for="descricao" class="col-sm-2 control-label">Descri��o:</label>
                           <div class="col-sm-10">
                               <input type = "text" class="form-control" id="descricao" data-ng-model="produtoAlterar.descricao" required />
                           </div>
                           <label for="preco_compra" class="col-sm-2 control-label">Pre�o de Compra:</label>
                           <div class="col-sm-10">
                               <input type = "text" class="form-control" id="preco_compra" data-ng-model="produtoAlterar.preco_compra" required />
                           </div>
                           ... demais campos
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <input type = "submit" value="Salvar altera��es" data-ng-click="editarProduto()" class="btn btn-primary" />
                                    <input type = "button" value="Cancelar" data-ng-click="funcCancelarEdicao()" class="btn btn-primary" />
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div><!-- fim row form alterarproduto-->
        </div><!--class="panel-body"-->
    </div><!--Fim class="panel panel-default"-->
 </div><!--Fim data-ng-controller="produtoController"-->

Execute o projeto para verificar o resultado e realizar testes nas opera��es de CRUD, conforme pode ser visto na Figura 5.

Criando o Controller do AngularJS para gerenciamento de pedidos

A aplica��o Web tamb�m ter� a funcionalidade de gerenciamento de pedidos enviados pelos vendedores via app Windows Phone, assim sendo, todos os pedidos enviados ficar�o com status de bloqueado para que o respons�vel pelo faturamento possa analisar os pedidos e realizar a libera��o caso seja necess�rio, ou seja, o mesmo deve alterar o status do pedido. O administrador tamb�m poder� excluir pedidos via gerenciador.

Crie um novo arquivo na pasta AngularJSApp chamado de �pedidoCabecalhoController.js�, � neste arquivo que iremos implementar o c�digo da Listagem 7 que ir� ficar respons�vel por conter as funcionalidades do gerenciamento de pedidos.

Listagem 7. Implementa��o controller angular para gerenciamento de pedidos.


//Cria o controller pedido cabe�alho
app.controller('pedidoCabecalhoController', ['$scope', '$http', pedidoCabecalhoController]);

//M�todo para o controller pedido cabe�alho
function pedidoCabecalhoController($scope, $http) {

   //Declara��o de vari�veis
   $scope.ocultaTabelaListagempedidoCabecalhos = false;
   $scope.exibeformAlterarpedidoCabecalho = false;

   //Buscar listagem de pedido cabe�alho
   $http.get('http://localhost/ForcaVendaWebAPI/api/PedidoCabecalho/Getpedido_cabecalho/').success(function (data) {
       $scope.pedidoCabecalhos = data;
   })
   .error(function () {
       $scope.error = "Erro ao carregar a listagem de pedidos!";
   });

   //Fun��o para exibir o form para editar pedido
   $scope.funcformEditarpedidoCabecalho = function () {
       $scope.pedidoCabecalhoAlterar = this.pedidoCabecalho;
       $scope.ocultaTabelaListagempedidoCabecalhos = true;
       $scope.exibeformAlterarpedidoCabecalho = true;
   };

   //Ocultar o form de edi��o de pedido e exibir a listagem
   $scope.funcCancelarEdicao = function () {
       $scope.ocultaTabelaListagempedidoCabecalhos = false;
       $scope.exibeformAlterarpedidoCabecalho = false;
   };

   //Editar o status do pedido cabe�alho
   $scope.editarpedidoCabecalho = function () {
       var ped = this.pedidoCabecalhoAlterar;
       $http.put('http://localhost/ForcaVendaWebAPI/api/PedidoCabecalho/Putpedido_cabecalho/' + ped.idpedido_cabecalho, ped).success(function (data) {
           alert("Pedido alterado com sucesso.");
           $scope.ocultaTabelaListagempedidoCabecalhos = false;
           $scope.exibeformAlterarpedidoCabecalho = false;
       }).error(function (data) {
           $scope.error = "Erro ao alterar o pedido! " + data;
       });
   };

   //Deletar pedido
   $scope.deletarpedidoCabecalho = function () {
       var id = this.pedidoCabecalho.idpedido_cabecalho;
       $http.delete('http://localhost/ForcaVendaWebAPI/api/PedidoCabecalho/Deletepedido_cabecalho/' + id).success(function (data) {
           alert("Pedido deletado com sucesso.");
           $.each($scope.pedidoCabecalhos, function (i) {
               if ($scope.pedidoCabecalhos[i].idpedidoCabecalho === id) {
                   $scope.pedidoCabecalhos.splice(i, 1);
                   return false;
               }
           });
       }).error(function (data) {
           $scope.error = "Erro ao deletar o pedido." + data;
       });
   };

}

O c�digo dessa listagem j� se encontra comentado e � bem similar �s implementa��es dos controllers do cadastro de clientes e produtos.

Controller e View para o gerenciamento de pedidos

O �ltimo passo na implementa��o da aplica��o For�a de Vendas � criar o controller e view para o gerenciamento dos pedidos emitidos. Assim sendo, crie o novo controller clicando na pasta Controllers e na op��o Add>Controller. Nomeie o controller como PedidoCabecalhoController e por clique em Add.

Com o controller criado, agora ser� necess�rio criar a view para constru��o da tela de gerenciamento de pedidos. Repita o processo j� realizado anteriormente e no arquivo Index.cshtml gerado dentro da pasta Views> PedidoCabecalho, implemente o c�digo presente na Listagem 8.

Listagem 8. Implementa��o View para o gerenciamento de pedidos.


@{ ViewBag.Title = "pedidoCabecalhos"; }
<div data-ng-controller="pedidoCabecalhoController">
   <div class="panel panel-default">
       <div class="panel-heading">Controle de Pedidos</div>
       <div class="panel-body">
               <div class="row"> <!--row table listagem de pedidoCabecalhos-->
                   <div class="col-md-12">
                       <div class="table-responsive" data-ng-hide="ocultaTabelaListagempedidoCabecalhos">
                           <!--<p><a data-ng-click="funcformNovopedidoCabecalho()" class="btn btn-primary">Novo pedidoCabecalho</a></p>-->
                           <table class="table table-bordered table-hover">
                               <tr>
                                   <td>Id Pedido</td>
                                   <th>Id Cliente</th>
                                   <th>Nome cliente</th>
                                   <th>Valor total pedid16o</th>
                                   <th>Qtde itens</th>
                                   <th>Status</th>
                                   <th>Data pedido</th>
                                   <th></th>
                               </tr>
                               <tr data-ng-repeat="pedidoCabecalho in pedidoCabecalhos">
                                   <td>{{ pedidoCabecalho.idpedido_cabecalho }}</td>
                                   <td>{{ pedidoCabecalho.idcliente }}</td>
                                   <td>{{ pedidoCabecalho.cliente.nome }}</td>
                                   <td>{{ pedidoCabecalho.valor_total_pedido }}</td>
                                   <td>{{ pedidoCabecalho.qtde_itens }}</td>
                                   <td>{{ pedidoCabecalho.status_pedido }}</td>
                                   <td>{{ pedidoCabecalho.data_pedido }}</td>
                                   <td>
                                       <a data-ng-click="funcformEditarpedidoCabecalho(pedidoCabecalho)" href="javascript:;">Editar</a>
                                       | <a data-ng-click="deletarpedidoCabecalho(pedidoCabecalho)" href="javascript:;">Deletar</a>
                                   </td>
                               </tr>
                           </table>
                       </div><!--fim div class="table-responsive"-->
                   </div>
               </div><!--fim row table listagem de pedidoCabecalhos-->
               <div class="row">
                   <!--row form alterarpedidoCabecalho-->
                   <div class="col-md-12">
                       <form name="alterarpedidoCabecalho" data-ng-show="exibeformAlterarpedidoCabecalho">
                           <div class="form-group">
                               <div class="col-sm-12">
                                   <label for="alterar" class="col-sm-12 control-label col-md-offset-1">:::ALTERAR STATUS PEDIDO:::</label>
                               </div>
                               <label for="idpedido_cabecalho" class="col-sm-2 control-label">Id pedido:</label>
                               <div class="col-sm-10">
                                   <input type="number" class="form-control" id="idpedido_cabecalho" data-ng-model="pedidoCabecalhoAlterar.idpedido_cabecalho" required disabled />
                               </div>
                               <label for="idcliente" class="col-sm-2 control-label">Id cliente:</label>
                               <div class="col-sm-10">
                                   <input type="text" class="form-control" id="idcliente" data-ng-model="pedidoCabecalhoAlterar.idcliente" required disabled />
                               </div>
                               <label for="cliente.nome" class="col-sm-2 control-label">Nome cliente:</label>
                               <div class="col-sm-10">
                                   <input type="text" class="form-control" id="cliente.nome" data-ng-model="pedidoCabecalhoAlterar.cliente.nome" required disabled />
                               </div>
                               <label for="valor_total_pedido" class="col-sm-2 control-label">Valor total pedido:</label>
                               <div class="col-sm-10">
                                   <input type="text" class="form-control" id="valor_total_pedido" data-ng-model="pedidoCabecalhoAlterar.valor_total_pedido" required disabled />
                               </div>
                               <label for="qtde_itens" class="col-sm-2 control-label">Qdte Itens:</label>
                               <div class="col-sm-10">
                                   <input type="text" class="form-control" id="qtde_itens" data-ng-model="pedidoCabecalhoAlterar.qtde_itens" required disabled />
                               </div>
                               <label for="status_pedido" class="col-sm-2 control-label">Status:</label>
                               <div class="col-sm-10">                                    
                                   <select data-ng-model="pedidoCabecalhoAlterar.status_pedido" class="form-control">
                                       <option value="{{ pedidoCabecalho.status_pedido }}">{{ pedidoCabecalho.status_pedido }}</option>
                                       <option value="cancelado">cancelado</option>
                                       <option value="em aberto">em aberto</option>
                                       <option value="bloqueado">bloqueado</option>
                                       <option value="entregue">entregue</option>
                                       <option value="em transito">em transito</option>
                                   </select>
                               </div>
                               <label for="data_pedido" class="col-sm-2 control-label">Data Cadastro:</label>
                               <div class="col-sm-10">
                                   <input type="text" class="form-control" id="data_pedido" data-ng-model="pedidoCabecalhoAlterar.data_pedido" required disabled />
                               </div>
                               <div class="form-group">
                                   <div class="col-sm-offset-2 col-sm-10">
                                       <input type="submit" value="Salvar altera��es" data-ng-click="editarpedidoCabecalho()" class="btn btn-primary" />
                                       <input type="button" value="Cancelar" data-ng-click="funcCancelarEdicao()" class="btn btn-primary" />
                                   </div>
                               </div>
                           </div>
                       </form>
                   </div>
               </div><!-- fim row form alterarpedidoCabecalho-->
           </div><!--class="panel-body"-->
       </div><!--Fim class="panel panel-default"-->
   </div><!--Fim data-ng-controller="pedidoCabecalhoController"-->

Antes de executar o projeto � interessante cadastrar alguns pedidos para verificar a listagem dos mesmos no gerenciador e tamb�m testar a fun��o de altera��o e exclus�o de pedidos via gerenciador.

Ao executar o projeto podemos observar o resultado, que deve ser semelhante �s Figuras 6 e 7.

**Figura 6.** Listagem de pedidos emitidos.

**Figura 7.** Altera��o do status do pedido.

Note que n�o utilizamos aqui os helpers do Razor para criar os elementos HTML e lig�-los �s propriedades dos models. Tudo isso foi feito utilizando os atributos do AngularJS, que faz com que as views estejam ainda mais desacopladas da linguagem server-side utilizada no projeto, neste caso C# (que na verdade nem foi utilizada como geralmente vemos em projetos ASP.NET MVC).

Com um servi�o RESTful robusto atuando como back-end principal da nossa aplica��o de For�a de Vendas, a cria��o de novos m�dulos se torna bastante simples, inclusive se for necess�rio utilizar v�rias linguagens e plataformas, bastando haver suporte para o consumo de APIs REST atrav�s de requisi��es HTTP.

Integrando aplica��es com Web API � Parte 3

Este artigo � �til para desenvolvedores que visam expandir o n�mero de usu�rios de suas aplica��es, desenvolvendo solu��es para o sistema operacional Windows Phone, bem como entender na pr�tica como aplicar o padr�o de desenvolvimento MVVM associado ao padr�o Proxy para consumo de um servi�o externo.

Nesta terceira parte da s�rie, desenvolveremos uma aplica��o que funcionar� como m�dulo mobile da aplica��o e For�a de Vendas e se comunicar� com o servi�o RESTful criado na primeira parte.

Aplica��es orientadas a servi�os t�m ganhado bastante espa�o no mercado de software, devido a garantirem maior flexibilidade e escalabilidade, fatores cruciais para qualquer aplica��o atualmente.

Como a que estamos desenvolvendo nessa s�rie, boa parte da l�gica de neg�cio e do armazenamento de dados fica contida em um ou mais servi�os na internet, os quais s�o consumidos por aplica��es �front-end�, sejam elas mobile, web ou desktop.

Servi�os RESTful se mostram atualmente como a melhor op��o nesse tipo de arquitetura, uma vez que a comunica��o com esse tipo de aplica��o se d� baseada no protocolo HTTP, com requisi��es e respostas nas quais o conte�do � enviado e recebido atrav�s de m�todos GET, POST, PUT, DELETE, etc.

Para consumir esse tipo de servi�o � preciso basicamente que a tecnologia a ser utilizada ofere�a suporte a requisi��es HTTP, o que atualmente � feito pela maioria das linguagens e plataformas de programa��o.

Na parte 2 dessa s�rie vimos a aplica��o pr�tica desse conceito, onde criamos uma aplica��o com AngularJS que consumia nosso servi�o Web API.

Nesta terceira e �ltima parte seguiremos a mesma l�gica para o desenvolvimento de uma aplica��o Windows Phone que representar� mais um m�dulo da aplica��o, aquele que ser� usado pelos vendedores que atendem a seus clientes e emitem pedidos a partir de seu smartphone.

Regras de neg�cio

Este m�dulo da aplica��o ter� algumas limita��es, se comparado ao m�dulo web. Esta aplica��o ter� por objetivo funcionar como ferramenta de informatiza��o do processo de vendas a domic�lio, ou seja, aquelas que s�o feitas pelo vendedor ao visitar seus clientes.

O vendedor dever� ser capaz de visualizar os clientes cadastrados, cadastrar novos clientes, editar ou excluir seu cadastro, por�m s� poder� visualizar o cadastro de produtos, sem inserir ou editar registros, pois isso ser� feito unicamente pelo administrador no m�dulo web.

A aplica��o tamb�m permitir� ao vendedor emitir novos pedidos, selecionando o cliente que est� atendendo e os produtos que ser�o vendidos. As informa��es de total do pedido e quantidade de itens ser�o calculadas automaticamente, mantendo assim a integridade das informa��es e reduzindo a probabilidade de falha humana.

A partir do que ser� desenvolvido neste artigo o leitor poder� expandir a aplica��o, implementando novas regras de neg�cio e funcionalidades adicionais.

O padr�o MVVM

O padr�o MVVM (Model-View-ViewModel), assim como o MVC (Model-View-Controller) e MVP (Model-View-Presenter), do qual deriva, tem por objetivo dividir os componentes da aplica��o de acordo com suas responsabilidades.

Nesse padr�o, o Model representa as classes de dom�nio da aplica��o, ou seja, aquelas que modelam o neg�cio e est�o diretamente relacionadas ao banco de dados, quando existir. As Views formam a camada superior, aquela que � visualizada pelo usu�rio final para exibi��o e entrada de dados.

Em aplica��es Universais e WPF as views s�o formadas por c�digo XAML. J� os ViewModels representam o componente intermedi�rio nessa arquitetura, respons�vel por prover dados �s views com base nos models.

Esse padr�o foi desenvolvido especificamente para funcionar com aplica��es que usam XAML (WPF e Silverlight na �poca), portanto sua implementa��o eficiente est� diretamente relacionada aos recursos oferecidos pelo .NET Framework e pela linguagem XAML, como a implementa��o do padr�o Observer (BOX 1) e os mecanismos de Data Binding.

BOX 1. Padr�o Observer

O Oberver, tamb�m chamado de Publisher-Subscriber, � um padr�o de projeto que define uma rela��o de depend�ncia entre objetos, de forma que quando um dado objeto (Observable) � alterado, todos aqueles que dependem dele (Observers) s�o automaticamente notificados sobre essa mudan�a.

Para o desenvolvimento da aplica��o neste artigo ser�o utilizados o Visual Studio 2015 e a vers�o 6.0 da linguagem C#, bem como o .NET Framework 4.6, por�m, vers�es anteriores podem ser utilizadas sem grandes dificuldades, bastando algumas adapta��es em pontos onde utilizaremos recursos pr�prios do # 6.0.

Come�aremos ent�o criando uma nova aplica��o do tipo Blank App (Windows Phone) para Windows Phone 8.1, como mostra a Figura 1, j� que no momento da publica��o deste artigo, esta � a atual vers�o est�vel do sistema operacional mobile da Microsoft. Smartphones com Windows 10 Mobile tamb�m poder�o executar as aplica��es desenvolvidas para a vers�o 8.1, portanto com essa escolha, nesse momento, conseguimos atingir um maior n�mero de usu�rios.

Cria��o do projeto Windows
Phone — **Figura 1.** Cria��o do projeto Windows Phone.

Com o projeto criado, podemos criar as pastas que representar�o cada componente da aplica��o e facilitar�o a organiza��o e leitura do projeto.

Adicione ent�o as pastas Proxy, Models, ViewModels e Views clicando sobre o projeto no Solution Explorer e ent�o em Add > New Folder, deixando a estrutura do projeto como a que � vista na Figura 2.

Models

As primeiras classes a serem criadas ser�o aquelas que modelam o dom�nio da aplica��o, ou seja, as classes model. Para facilitar a convers�o dos dados que ser�o enviados e recebidos para o servi�o Web API, essas classes ter�o basicamente a mesma estrutura das que foram geradas pelo Entity Framework na parte 1 dessa s�rie. Essa n�o �, de fato, uma regra, por�m para esse contexto atende bem a nossa necessidade.

Na Listagem 1 temos o c�digo da classe Cliente, que se comparada � que foi gerada pelo mapeamento da tabela do banco de dados, � praticamente igual, mas aqui estamos utilizando o recurso de Property Initializer do C# 6.0 nas linhas 12 e 13.

Listagem 1. Classe Cliente.


 public class Cliente
 {
     public int IDCliente { get; set; }
     public string Nome { get; set; }
     public string CPF_CNPJ { get; set; }
     public string Endereco { get; set; }
     public string Bairro { get; set; }
     public string Cidade { get; set; }
     public string CEP { get; set; }
     public string Email { get; set; }
     public string Telefone { get; set; }
     public string Status_Cliente { get; set; } = "Ativo";
     public DateTime Data_Cadastro { get; set; } = DateTime.Today;
 }

Como os nomes das propriedades s�o iguais aos utilizados na parte 1 da s�rie, exceto pelo fato de aqui estarem em mai�sculo, a convers�o dos dados no formato JSON se dar� de forma autom�tica, sem a necessidade de adapta��o ou uso de objetos DTO (BOX 2).

BOX 2. DTO

DTO (Data Transfer Object) � um tipo objeto utilizado no tr�fego de dados entre processos ou aplica��es. S�o objetos POCO (Plain Old CLR Object) e possuem estrutura simples, de forma que seu envio e recebimento consuma o m�nimo de recursos (principalmente de rede, quando trafegados entre web services) poss�vel.

A segunda classe modelo, a classe Produto, pode ser vista na Listagem 2.

Listagem 2. Classe Produto.


public class Produto
{
    public int IDProduto { get; set; }
    public string Descricao { get; set; }
    public decimal Preco_Compra { get; set; }
    public decimal Preco_Venda { get; set; }
    public int Qtde_Estoque { get; set; }
    public DateTime Data_Cadastro { get; set; } = DateTime.Today;
    public string Status_Produto { get; set; } = "Ativo";
}

Nas Listagens 3 e 4 temos o c�digo das classes PedidoCabecalho e PedidoItem, respectivamente.

Listagem 3. Classe PedidoCabecalho.


 public class PedidoCabecalho
 {
     public int IDPedido_Cabecalho { get; set; }
     public int IDCliente { get; set; }
     public decimal Valor_Total_Pedido { get; set; }
     public int Qtde_Itens { get; set; }
     public string Status_Pedido { get; set; } = "Pendente";
     public DateTime Data_Pedido { get; set; } = DateTime.Today;
 }

Listagem 4. Classe PedidoItem.


public class PedidoItem
{
    public int IDPedido_Itens { get; set; }
    public int IDPedido_cabecalho { get; set; }
    public int IDProduto { get; set; }
    public int Quantidade { get; set; }
    public decimal Valor_Unitario { get; set; }
    public decimal Sub_Total { get { return Quantidade * Valor_Unitario; }}
    public string Status_Item { get; set; } = "Pendente";
}

Por fim, na Listagem 5 temos a classe ItemProduto, que servir� para simplificar a exibi��o dos itens do pedido durante a emiss�o. Essa classe conter� caracter�sticas tanto do Produto quanto do PedidoItem.

Listagem 5. Classe ItemProduto.


public class ItemProduto
{
    public int IDProduto { get; set; }
    public string Descricao { get; set; }
    public int Quantidade { get; set; }
    public decimal Subtotal { get; set; }
}

Proxy

Em uma aplica��o no padr�o MVVM que utilizasse, por exemplo, um banco de dados local, poder�amos utilizar o padr�o Repository para centralizar as cole��es de dados e essa classe poderia se comunicar diretamente com o banco de dados (usando Entity Framework Code First, por exemplo), ficando dentro da camada Model.

Por�m, neste caso os dados s�o recebidos e enviados atrav�s de requisi��es a um servi�o externo, e manter em uma �nica classe a responsabilidade de consumir todos os m�todos da API geraria um c�digo extenso e, no m�nimo, um Bad Smell chamado God Class, onde uma classe possui muitas responsabilidades. Isso tamb�m iria de encontro ao Princ�pio da Responsabilidade �nica (Single Responsibility Principle - o S dos padr�es SOLID).

Para contornar essa situa��o, trabalharemos aqui com uma camada adicional chamada Proxy (BOX 3), que ser� respons�vel por realizar as chamadas ao servi�o Web API e prover dados para as demais camadas em um formato conhecido, ou seja, utilizando as classes model.

BOX 3. Padr�o Proxy

O padr�o de projeto estrutural Proxy define um objeto cujo objetivo � funcionar como uma interface entre dois componentes, visando simplificar a comunica��o entre eles. Neste caso, o proxy est� agindo como uma interface de acesso ao servi�o HTTP.

Os controllers da Web API possuem basicamente m�todos para realizar as opera��es de CRUD nas tabelas do banco de dados, ent�o sabemos que precisaremos em nossa camada proxy consumir esses m�todos de acordo com sua assinatura.

Sendo assim, criaremos uma interface que ir� servir como modelo para as demais classes proxy. Essa interface, cujo c�digo pode ser visualizado na Listagem 6, ser� do tipo gen�rica, para que assim possamos relacionar cada classe proxy com uma classe model.

Listagem 6. Interface AbstractProxy.


 public interface IServiceProxy<T> where T : class
 {
     List<T> ListarTodos();
     T ObterPeloID(object id);
     bool Adicionar(T objeto);
     bool Alterar(T objeto);
     bool Excluir(T objeto);
 }

A inten��o aqui � que cada um desses m�todos realize uma chamada a um dos m�todos do servi�o, mantendo a seguinte rela��o: ListarTodos (GET), ObterPeloID (GET/{id}), Adicionar (POST), Alterar (PUT), Excluir (DELETE).

Para facilitar a comunica��o com o servi�o e o tr�fego de dados no formato JSON, instalaremos uma extens�o atrav�s do gerenciador de pacotes NuGet executando a seguinte linha no Package Manager Console:

Install-Package
Microsoft.AspNet.WebApi.Client

Esse pacote nos auxiliar� na realiza��o de requisi��es ass�ncronas no formato JSON, oferecendo uma sintaxe simplificada para isso.

Criemos ent�o a classe concreta ClienteProxy, que implementar� a interface IServiceProxy e ser� respons�vel por invocar os m�todos do controller Clientes da API. O c�digo desta classe encontra-se na Listagem 7.

Listagem 7. Classe concreta ClienteProxy.


public class ClienteProxy : IServiceProxy<Cliente>
{
    private HttpClient client;

    public ClienteProxy()
    {
        client = new HttpClient();
        client.BaseAddress = new Uri(Windows.Storage.ApplicationData.Current.LocalSettings.Values["EnderecoWebAPI"].ToString());
        client.DefaultRequestHeaders.Accept.Clear();
        client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
    }

    public bool Adicionar(Cliente objeto)
    {
        HttpResponseMessage resposta = client.PostAsJsonAsync("api/Clientes/Postcliente", objeto).Result;
        return resposta.IsSuccessStatusCode;
    }

    public bool Alterar(Cliente objeto)
    {
        HttpResponseMessage resposta = client.PutAsJsonAsync($"api/Clientes/Putcliente/{objeto.IDCliente}", objeto).Result;
        return resposta.IsSuccessStatusCode;
    }

    public bool Excluir(Cliente objeto)
    {
        HttpResponseMessage resposta = client.DeleteAsync($"api/Clientes/Deletecliente/{objeto.IDCliente}").Result;
        return resposta.IsSuccessStatusCode;
    }

    public List<Cliente> ListarTodos()
    {
        HttpResponseMessage resposta = client.GetAsync("api/Clientes/Getcliente").Result;
        return resposta.Content.ReadAsAsync<List<Cliente>>().Result;
    }

    public Cliente ObterPeloID(object id)
    {
        HttpResponseMessage resposta = client.GetAsync($"/api/Clientes/Getcliente/{id}").Result;
        return resposta.Content.ReadAsAsync<Cliente>().Result;
    }
}

Aqui estamos utilizando a classe HttpClient para realizar as requisi��es HTTP ao servi�o a partir do endpoint que ser� definido nas configura��es locais da aplica��o.

Nesta classe tamb�m estamos utilizando um dos novos recursos do C# 6.0 chamado String Interpolation, que pode ser visto, por exemplo, na linha 21, onde inserimos uma propriedade de um objeto diretamente dentro de uma string sem precisar concaten�-la.

Tamb�m � necess�rio referenciar os namespaces System.Net.Http, System.Net.Http.Headers e ForcaVendas.WindowsPhone.Models para que possamos acessar todas as classes utilizadas nessa listagem.

Como implementam a mesma interface, as classes ProdutoProxy e PedidoItemProxy possuem implementa��o extremamente semelhante � ClienteProxy, portanto ser�o omitidas deste artigo, estando dispon�veis no c�digo fonte.

Apenas a classe PedidoCabecalhoProxy merece destaque aqui, pois seu m�todo Adicionar utiliza uma das informa��es retornadas pelo servi�o para preencher o ID do cabe�alho do pedido que acabou de ser inserido. Como vemos na Listagem 8, ap�s enviar o cabe�alho para o servi�o, o atributo Location contido nos Headers da resposta � retornado com a seguinte estrutura: <URL base>/api/PedidoCabecalho/Postpedido_cabecalho/{id}.

Precisamos ent�o pegar a quarta parte dessa URL, o ID do pedido inserido, e atribuir � propriedade IDPedido_Cabecalho do par�metro objeto. Como se trata de uma classe, ou seja, um tipo refer�ncia, ao alterarmos o par�metro, estamos alterando o objeto original que foi passado para o m�todo.

Listagem 8. Classe PedidoCabecalhoProxy.


 public class PedidoCabecalhoProxy : IServiceProxy<PedidoCabecalho>
 {
     private HttpClient client;
 
     public PedidoCabecalhoProxy()
     {
         client = new HttpClient();
         client.BaseAddress = new Uri(Windows.Storage.ApplicationData.Current.LocalSettings.Values["EnderecoWebAPI"].ToString());
         client.DefaultRequestHeaders.Accept.Clear();
         client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
     }
 
     public bool Adicionar(PedidoCabecalho objeto)
     {
         HttpResponseMessage resposta = client.PostAsJsonAsync("api/PedidoCabecalho/Postpedido_cabecalho", objeto).Result;
         if (resposta.IsSuccessStatusCode)
         {
             objeto.IDPedido_Cabecalho = Convert.ToInt32(resposta.Headers.Location.Segments[4]);
             return true;
         }
         return false;
     }
 
     public bool Alterar(PedidoCabecalho objeto)
     {
         HttpResponseMessage resposta = client.PutAsJsonAsync($"api/PedidoCabecalho/Putpedido_cabecalho/{objeto.IDPedido_Cabecalho}", objeto).Result;
         return resposta.IsSuccessStatusCode;
     }
 
     public bool Excluir(PedidoCabecalho objeto)
     {
         HttpResponseMessage resposta = client.DeleteAsync($"api/PedidoCabecalho/Deletepedido_cabecalho/{objeto.IDPedido_Cabecalho}").Result;
         return resposta.IsSuccessStatusCode;
     }
 
     public List<PedidoCabecalho> ListarTodos()
     {
         HttpResponseMessage resposta = client.GetAsync("api/PedidoCabecalho/Getpedido_cabecalho").Result;
         return resposta.Content.ReadAsAsync<List<PedidoCabecalho>>().Result;
     }
 
     public PedidoCabecalho ObterPeloID(object id)
     {
         HttpResponseMessage resposta = client.GetAsync($"/api/PedidoCabecalho/Getpedido_cabecalho/{id}").Result;
        return resposta.Content.ReadAsAsync<PedidoCabecalho>().Result;
     }
 }

Para que as classes proxy possam acessar o endere�o da API nas configura��es locais da aplica��o, devemos abrir o arquivo App.xaml.cs e no construtor da classe adicionar a seguinte linha, alterando apenas o endere�o onde o servi�o est� sendo executado:

Windows.Storage.ApplicationData.Current.LocalSettings.Values["EnderecoWebAPI"] = "http://localhost:1622/";

ViewModels

Os ViewModels, aqui, ter�o a responsabilidade de receber os dados de um proxy e repass�-los �s views, permitindo assim a visualiza��o e intera��o por parte do usu�rio. ViewModels podem ter estrutura e funcionamento visando atender uma determinada situa��o, como o cadastro de clientes. Aqui come�aremos criando o ClientesViewModel, que ser� utilizando tanto para listagem quanto para inser��o, exclus�o e altera��o de registros. Seu c�digo pode ser visto na Listagem 9.

Listagem 9. Classe ClientesViewModel.


public class ClientesViewModel
{
    private ClienteProxy proxy;

    public ObservableCollection<Cliente> Clientes { get; set; }

    public Cliente ClienteSelecionado { get; set; }

    public ClientesViewModel()
    {
        proxy = new ClienteProxy();
        Clientes = new ObservableCollection<Cliente>(proxy.ListarTodos());
    }

    public bool AdicionarSelecionado()
    {
        return proxy.Adicionar(ClienteSelecionado);
    }

    public bool AlterarSelecionado()
    {
        return proxy.Alterar(ClienteSelecionado);
    }

    public bool ExcluirSelecionado()
    {
        if (proxy.Excluir(ClienteSelecionado))
        {
            Clientes.Remove(ClienteSelecionado);
            return true;
        }
        return false;
    }
}

A classe ObservableCollection representa o componente Observable da implementa��o do padr�o Observer. Essa classe notifica automaticamente todos os seus observadores (neste caso, a interface gr�fica) quando sofre alguma modifica��o, desta forma n�o precisamos atualizar a fonte de dados dos componentes quando um novo item for inserido, alterado ou exclu�do.

A propriedade ClienteSelecionado tamb�m ser� ligado a um componente da interface gr�fica e ser� atualizado automaticamente quando o usu�rio selecionar um registro diferente. Ela � utilizada para adicionar, alterar e excluir um registro utilizando a classe ClienteProxy nos m�todos AdicionarSelecionado, AlterarSelecionado e ExcluirSelecionado.

O ViewModel para o cadastro de produtos � semelhante, por�m, como foi definido nas regras de neg�cio, ele n�o permitir� adicionar, alterar ou excluir produtos, contendo apenas uma lista de objetos a serem exibidos na interface gr�fica, como vemos na Listagem 10.

Listagem 10. Classe ProdutosViewModel.


public class ProdutosViewModel
{
    private ProdutoProxy proxy;

    public ObservableCollection<Produto> Produtos { get; set; }

    public Produto ProdutoSelecionado { get; set; }

    public ProdutosViewModel()
    {
        proxy = new ProdutoProxy();
        Produtos = new ObservableCollection<Produto>(proxy.ListarTodos());
    }
}

Assim como na classe ClientesViewModel, a lista de produtos � iniciada no construtor da classe a partir da lista que � recebida pelo m�todo ListarTodos da classe ProdutoProxy.

O terceiro ViewModel, e mais complexo, ser� o NovoPedidoViewModel, que ser� respons�vel por controlar a emiss�o de um novo pedido e para isso precisar� conter uma lista de clientes e produtos a serem exibidos, bem como que est� selecionado. Tamb�m haver� um campo para quantidade do produto selecionado a ser inserido e os itens do pedido propriamente ditos, conforme vemos na Listagem 11.

Listagem 11. Classe NovoPedidoViewModel.


public class NovoPedidoViewModel
{
    public ObservableCollection<Cliente> Clientes { get; set; }
    public ObservableCollection<Produto> Produtos { get; set; }
    public ObservableCollection<ItemProduto> Itens { get; set; } = new ObservableCollection<ItemProduto>();
    public Cliente ClienteSelecionado { get; set; }
    public Produto ProdutoSelecionado { get; set; }
    public ItemProduto ItemSelecionado { get; set; }
    public int QuantidadeSelecionada { get; set; } = 1;
    private ClienteProxy proxyCliente;
    private ProdutoProxy proxyProduto;
    private PedidoCabecalhoProxy proxyCabecalho;
    private PedidoItemProxy proxyItens;

    public NovoPedidoViewModel()
    {
        proxyCliente = new ClienteProxy();
        proxyProduto = new ProdutoProxy();
        proxyCabecalho = new PedidoCabecalhoProxy();
        proxyItens = new PedidoItemProxy();

        Clientes = new ObservableCollection<Cliente>(proxyCliente.ListarTodos());
        Produtos = new ObservableCollection<Produto>(proxyProduto.ListarTodos());
    }

    public void AdicionarProdutoSelecionado()
    {
        ItemProduto item = new ItemProduto()
        {
            IDProduto = ProdutoSelecionado.IDProduto,
            Descricao = ProdutoSelecionado.Descricao,
            Quantidade = QuantidadeSelecionada,
            Subtotal = ProdutoSelecionado.Preco_Venda * QuantidadeSelecionada
        };

        Itens.Add(item);
    }

    public void ExcluirItemSelecionado()
    {
        Itens.Remove(ItemSelecionado);
    }

    public bool EmitirPedido()
    {
        PedidoCabecalho cabecalho = new PedidoCabecalho()
        {
            IDCliente = ClienteSelecionado.IDCliente,
            Qtde_Itens = Itens.Count,
            Valor_Total_Pedido = Itens.Sum(i => i.Subtotal)
        };

        if (proxyCabecalho.Adicionar(cabecalho))
        {
            foreach (var item in Itens)
            {
                PedidoItem p = new PedidoItem()
                {
                    IDPedido_cabecalho = cabecalho.IDPedido_Cabecalho,
                    IDProduto = item.IDProduto,
                    Quantidade = item.Quantidade,
                    Valor_Unitario = item.Subtotal / item.Quantidade
                };
                proxyItens.Adicionar(p);
            }
            return true;
        }

        return false;
    }
}

Para emitir o pedido, utilizamos os campos que est�o selecionados na tela e geramos um Pedido_Cabecalho, classe a ser utilizada na requisi��o HTTP ao servi�o atrav�s da classe PedidoCabecalhoProxy.

Em seguida, criamos um PedidoItem para cada ItemProduto contido na lista Itens e enviamos para o servi�o atrav�s da classe PedidoItemProxy, respons�vel por fazer as requisi��es ao controller PedidoItens da API.

Views

Para melhor organizar as views da aplica��o, criaremos dentro da pasta Views as pastas Clientes, Produtos e Pedidos, separando assim os arquivos XAML de acordo com seu uso.

Antes de criar as views para cada funcionalidade, vamos trabalhar na MainPage.xaml, que dar� acesso �s demais p�ginas da aplica��o a partir de bot�es simples. O c�digo dessa p�gina pode ser visto na Listagem 12, onde vemos o componente Grid central que j� vem adicionado por padr�o nas p�ginas.

Listagem 12. P�gina MainPage.xaml.


  <Grid>
      <Grid.RowDefinitions>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="*"/>
      </Grid.RowDefinitions>
          
      <Grid.Resources>
          <Style TargetType="Button">
              <Setter Property="HorizontalAlignment" Value="Stretch"/>
              <Setter Property="Height" Value="80"/>
          </Style>
      </Grid.Resources>
          
      <TextBlock FontSize="40" Text="For�a de Vendas" Margin="10,0,10,0" Grid.Row="0"/>
  
      <StackPanel Margin="10,0,10,0" Grid.Row="1">
          <Button Name="btnClientes" Content="Clientes" />
          <Button Name="btnProdutos" Content="Produtos"/>
          <Button Name="btnPedido" Content="Novo Pedido"/>
      </StackPanel>
  </Grid>

Isso gerar� o layout que vemos na Figura 3.

Layout da
MainPage — **Figura 3.** Layout da MainPage.

Em seguida, vamos criar a p�gina ListarClientes.xaml dentro da pasta Views/Clientes. Essa p�gina ser� composta por uma ListBox e alguns bot�es na barra inferior, e seu c�digo est� contido na Listagem 13.

Listagem 13. P�gina ListarClientes.xaml.


<Page.BottomAppBar>
    <CommandBar>
        <AppBarButton Name="btnAdicionar" Icon="Add" Label="novo" Click="btnAdicionar_Click"/>
        <AppBarButton Name="btnAlterar" Icon="Edit" Label="alterar" Click="btnAlterar_Click"/>
        <AppBarButton Name="btnExcluir" Icon="Delete" Label="excluir" Click="btnExcluir_Click"/>
    </CommandBar>
</Page.BottomAppBar>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <TextBlock FontSize="40" Text="Clientes" Margin="10,0,10,0" Grid.Row="0"/>

    <ScrollViewer Margin="10,0,10,0" Grid.Row="1">
        <ListBox ItemsSource="{Binding Clientes}" SelectedItem="{Binding ClienteSelecionado, Mode=TwoWay}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Nome}" FontWeight="Bold"/>
                        <TextBlock Text="{Binding CPF_CNPJ}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </ScrollViewer>
</Grid>

A implementa��o do evento Click dos bot�es, bem como o evento Loaded da p�gina pode ser visto na Listagem 14.

Listagem 14. Implementa��o da p�gina ListarClientes.xaml.cs.


 private ClientesViewModel viewModel;
 
 private void Page_Loaded(object sender, RoutedEventArgs e)
 {
     viewModel = new ClientesViewModel();
     this.DataContext = viewModel;
 }
 
 private void btnAdicionar_Click(object sender, RoutedEventArgs e)
 {
     this.Frame.Navigate(typeof(AdicionarCliente));
 }
 
 private void btnAlterar_Click(object sender, RoutedEventArgs e)
 {
     this.Frame.Navigate(typeof(AlterarCliente), viewModel.ClienteSelecionado);
 }
 
 private async void btnExcluir_Click(object sender, RoutedEventArgs e)
 {
     var mensagem = new MessageDialog("Deseja realmente excluir esse cliente?");
     UICommand comandoSim = new UICommand("Sim", (c) => {
         if (viewModel.ExcluirSelecionado())
             new MessageDialog("Cliente exclu�do.").ShowAsync();
     });
     UICommand comandoNao = new UICommand("N�o");
     mensagem.Commands.Add(comandoSim);
     mensagem.Commands.Add(comandoNao);
     await mensagem.ShowAsync();
 }

Na linha 1 declaramos um objeto do tipo ClientesViewModel que ser� usado para preencher a ListBox na linha 6, onde o atribu�mos � propriedade DataContext da p�gina. Como foi definido atrav�s de data binding, a ListBox ir� exibir a lista Clientes do viewmodel.

Ao clicar nos bot�es novo e alterar o usu�rio ser� levado a outra p�gina (que veremos a seguir). J� no bot�o excluir, exibiremos uma mensagem (MessageDialog) solicitando a confirma��o da exclus�o e ent�o utilizaremos o m�todo ExcluirSelecionado do ViewModel para remover o registro.

Para poder testar a aplica��o sem erros, precisamos criar as p�ginas AdicionarCliente.xaml e AlterarCliente.xaml.

A p�gina AdicionarCliente.xaml ir� conter v�rios campos para que o usu�rio insira os dados do novo cliente e apenas um bot�o para salvar o registro, conforme consta na Listagem 15. Ligamos os campos �s propriedades das classes atrav�s de data binding, dessa vez utilizando o Mode=TwoWay que faz com que altera��es na interface sejam refletidas nos objetos e vice-versa.

Listagem 15. P�gina AdicionarCliente.xaml.


 <Grid>
     <Grid.RowDefinitions>
         <RowDefinition Height="Auto"/>
         <RowDefinition Height="*"/>
     </Grid.RowDefinitions>
 
     <TextBlock FontSize="40" Text="Adicionar cliente" Margin="10,0,10,0" Grid.Row="0"/>
 
     <ScrollViewer Margin="10,0,10,0" Grid.Row="1">
         <StackPanel DataContext="{Binding ClienteSelecionado}">
             <TextBlock Text="Descri��o"/>
             <TextBox Text="{Binding Descricao, Mode=TwoWay}"/>
             <TextBlock Text="CPF/CNPJ"/>
             <TextBox Text="{Binding Preco_Venda, Mode=TwoWay}"/>
             <TextBlock Text="Endereco"/>
             <TextBox Text="{Binding Endereco, Mode=TwoWay}"/>
             <TextBlock Text="Bairro"/>
             <TextBox Text="{Binding Bairro, Mode=TwoWay}"/>
             <TextBlock Text="Cidade"/>
             <TextBox Text="{Binding Cidade, Mode=TwoWay}"/>
             <TextBlock Text="CEP"/>
             <TextBox Text="{Binding CEP, Mode=TwoWay}"/>
             <TextBlock Text="Email"/>
             <TextBox Text="{Binding Email, Mode=TwoWay}"/>
             <TextBlock Text="Telefone"/>
             <TextBox Text="{Binding Telefone, Mode=TwoWay}"/>
             <TextBlock Text="Status"/>
             <TextBox Text="{Binding Status, Mode=TwoWay}"/>
         </StackPanel>
     </ScrollViewer>
 </Grid>

Como utilizaremos a mesma classe ClientesViewModel, ligamos o StackPanel � propriedade ClienteSelecionado para que os controles em seu interior pudessem acessar as propriedades da classe Cliente.

Assim como na p�gina ListarClientes, precisamos declarar um objeto privado do tipo ClientesViewModel e instanci�-lo no evento Loaded da p�gina. Al�m disso, tamb�m precisamos instanciar a propriedade ClienteSelecionado, para que a digita��o nos TextBoxes reflita diretamente em suas propriedades. Na Listagem 16 est� o c�digo onde fazemos essa implementa��o.

Listagem 16. Implementa��o da p�gina AdicionarCliente.xaml.cs.


 private ClientesViewModel viewModel;
 
 private async void btnSalvar_Click(object sender, RoutedEventArgs e)
 {
     if (viewModel.AdicionarSelecionado())
     {
         await new MessageDialog("Cliente adicionado com sucesso.").ShowAsync();
         this.Frame.Navigate(typeof(ListarClientes));
     }
     else
     {
         await new MessageDialog("O cliente n�o foi adicionado.").ShowAsync();
     }
 }
 
 private void Page_Loaded(object sender, RoutedEventArgs e)
 {
     viewModel = new ClientesViewModel();
     viewModel.ClienteSelecionado = new Models.Cliente();
     this.DataContext = viewModel;
 }

Observe que por estarmos utilizando o recurso de data binding da linguagem XAML, n�o precisamos preencher o objeto com o conte�do dos TextBoxes. Outro ponto importante � que o m�todo btnSalvar_Click precisou ser marcado como ass�ncrono, para que pud�ssemos utilizar o operador await na chamada ao m�todo ShowAsync da classe MessageDialog.

A p�gina AlterarCliente.xaml � basicamente igual � AdicionarCliente.xaml, alterando apenas seu c�digo C#, que podemos ver na Listagem 17.

Listagem 17. Implementa��o da p�gina AlterarCliente.xaml.cs.


 private ClientesViewModel viewModel;
 protected override void OnNavigatedTo(NavigationEventArgs e)
 {
     viewModel = new ClientesViewModel();
     viewModel.ClienteSelecionado = e.Parameter as Cliente;
     this.DataContext = viewModel;
 }

 private async void btnSalvar_Click(object sender, RoutedEventArgs e)
 {
     if (viewModel.AlterarSelecionado())
     {
         await new MessageDialog("Cliente alterado com sucesso.").ShowAsync();
         this.Frame.Navigate(typeof(ListarClientes));
     }
     else
     {
         await new MessageDialog("O cliente n�o foi alterado.").ShowAsync();
     }
 }

Desta vez, ao inv�s de instanciarmos a propriedade ClienteSelecionado, atribu�mos a ela o valor recebido por par�metro na navega��o vindo da p�gina ListarClientes, que � o objeto selecionado na ListBox.

Agora devemos ir � MainPage e no evento Click do btnClientes navegar para a p�gina ListarClientes, da seguinte forma:

this.Frame.Navigate(typeof(Views.Clientes.ListarClientes));

Executando a aplica��o agora, podemos clicar no bot�o Clientes na MainPage e de l� navegaremos para as p�ginas de listagem, adi��o, edi��o e exclus�o de clientes, como vemos na Figura 4.

Telas do
cadastro de clientes — **Figura 4.** Telas do cadastro de clientes.

A pr�xima p�gina a ser criada � a ListarProdutos.xaml, dentro da pasta Views/Produtos. A estrutura dessa p�gina � semelhante � de listar clientes, apenas n�o tem os bot�es de a��o na parte inferior. Seu c�digo pode ser visto na Listagem 18.

Listagem 18. P�gina ListarProdutos.xaml.


 <Grid>
     <Grid.RowDefinitions>
         <RowDefinition Height="Auto"/>
         <RowDefinition Height="*"/>
     </Grid.RowDefinitions>
 
     <TextBlock FontSize="40" Text="Produtos" Margin="10,0,10,0" Grid.Row="0"/>
 
     <ScrollViewer Margin="10,0,10,0" Grid.Row="1">
         <ListBox ItemsSource="{Binding Produtos}" SelectedItem="{Binding ProdutoSelecionado, Mode=TwoWay}">
             <ListBox.ItemTemplate>
                 <DataTemplate>
                     <StackPanel>
                         <TextBlock Text="{Binding Descricao}" FontWeight="Bold"/>
                         <Grid>
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="100"/>
                                 <ColumnDefinition Width="100"/>
                                 <ColumnDefinition Width="100"/>
                                 <ColumnDefinition Width="100"/>
                             </Grid.ColumnDefinitions>
                             <TextBlock Text="Pre�o: " Grid.Column="0"/>
                             <TextBlock Text="{Binding Preco_Venda}" Grid.Column="1"/>
                             <TextBlock Text="Estoque: " Grid.Column="2"/>
                             <TextBlock Text="{Binding Qtde_Estoque}" Grid.Column="3"/>
                         </Grid>
                     </StackPanel>
                 </DataTemplate>
             </ListBox.ItemTemplate>
         </ListBox>
     </ScrollViewer>
 </Grid>

Nesta p�gina utilizaremos o viewmodel ProdutosViewModel, por isso ligamos a propriedade ItemsSource da ListBox � lista Produtos e o SelectedItem ao ProdutoSelecionado. Basta ent�o instanciar um ProdutosViewModel e atribu�-lo ao DataContext da p�gina no evento Loaded, como � feito na Listagem 19.

Listagem 19. Implementa��o da p�gina ListarProdutos.xaml.cs.


private ProdutosViewModel viewModel;
private void Page_Loaded(object sender, RoutedEventArgs e)
{
    viewModel = new ProdutosViewModel();
    this.DataContext = viewModel;
}

Voltando � MainPage, devemos navegar para a p�gina ListarProdutos no evento Click do btnProdutos, como fizemos para os clientes:

this.Frame.Navigate(typeof(Views.Produtos.ListarProdutos));

Com isso, podemos executar a aplica��o e clicar no bot�o Produtos, visualizando assim a listagem de produtos cadastrados, como mostra a Figura 5.

Comas p�ginas de clientes e produtos prontas, podemos ent�o desenvolver a tela de emiss�o de pedidos. Dentro da pasta Views/Pedidos, vamos adicionar a p�gina NovoPedido.xaml, que conter� os campos para selecionar o cliente e adicionar os produtos do pedido, como vemos no c�digo da Listagem 20.

Listagem 20. P�gina NovoPedido.xaml.


<Page.BottomAppBar>
    <CommandBar>
        <AppBarButton Label="emitir" Name="btnEmitir" Icon="Accept" Click="btnEmitir_Click"/>
        <AppBarButton Label="excluir item" Name="btnExcluirItem" Icon="Delete" Click="btnExcluirItem_Click"/>
    </CommandBar>
</Page.BottomAppBar>
    
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <TextBlock FontSize="40" Text="Novo pedido" Margin="10,0,10,0" Grid.Row="0"/>

    <StackPanel Grid.Row="1" Margin="10,0,10,0">
        <ComboBox ItemsSource="{Binding Clientes}" SelectedItem="{Binding ClienteSelecionado, Mode=TwoWay}" Name="comboCliente" PlaceholderText="selecione o cliente" Header="cliente">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Nome}"/>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
        <ComboBox ItemsSource="{Binding Produtos}" SelectedItem="{Binding ProdutoSelecionado, Mode=TwoWay}" Name="comboProdutos" Header="Produtos" PlaceholderText="selecione um produto">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Descricao}"/>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="120"/>
            </Grid.ColumnDefinitions>

            <TextBox HorizontalAlignment="Stretch" Grid.Column="0" Text="{Binding QuantidadeSelecionada, Mode=TwoWay}"/>

            <Button Name="btnInserir" Content="Inserir" Grid.Column="1" HorizontalAlignment="Stretch" Click="btnInserir_Click"/>
        </Grid>
    </StackPanel>

    <ScrollViewer Grid.Row="2" Margin="10,0,10,0">
        <ListBox ItemsSource="{Binding Itens}" SelectedItem="{Binding ItemSelecionado, Mode=TwoWay}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Descricao}" FontWeight="Bold"/>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition Width="100"/>
                            </Grid.ColumnDefinitions>

                            <TextBlock Text="Quantidade" Grid.Column="0"/>

                            <TextBlock Text="{Binding Quantidade}" Grid.Column="1"/>

                            <TextBlock Text="Subotal" Grid.Column="2"/>

                            <TextBlock Text="{Binding Subtotal}" Grid.Column="3"/>
                        </Grid>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </ScrollViewer>
</Grid>

Nesta view utilizamos o controle ComboBox para listar os clientes e produtos cadastrados e permitir que o cliente selecione apenas um por vez. O bot�o Inserir utilizar� a quantidade digitada no TextBox e o produto selecionado para gerar um objeto do tipo ItemProduto e adicion�-lo � lista Itens do viewmodel usando o m�todo AdicionarProdutoSelecionado.

Na CommandBar temos os bot�es �emitir�, que ir� chamar o m�todo EmitirPedido do viewmodel, e �excluir item�, que ir� remover da lista o item selecionado na ListBox.

Para testar essa p�gina, voltamos � MainPage e no evento Click do bot�o btnPedido navegamos para a p�gina NovoPedido.xaml, da seguinte forma:

this.Frame.Navigate(typeof(Views.Pedidos.NovoPedido));

Com isso, podemos executar a aplica��o e emitir um novo pedido, como ilustra a Figura 6.

A partir da� podemos visualizar os pedidos emitidos atrav�s do m�dulo gerencial desenvolvido como uma web app com AngularJS. De acordo com a necessidade, podemos adicionar novas funcionalidades, al�m de implementar regras de valida��o mais rigorosas e trabalhar melhor o layout da aplica��o.

Tomando como base a arquitetura de aplica��o e recursos que foram utilizados nesse artigo, o projeto poderia ser facilmente migrado ou adaptado para uma aplica��o universal do Windows 8.1 ou 10, bem como para WPF, tipos de projetos que tamb�m utilizam a linguagem XAML em sua camada de interface visual e tiram proveito direto do padr�o MVVM.

Confira outros conte�dos:

Teste unit�rio com NUnit

Como migrar projetos do ASP.NET MVC...

Crie relat�rios com o Stimulsoft...

Por Madson Em 2015

Coment�rios nesta publica��o Escrever um coment�rio sobre conte�do

Wilson Rafael

N�vel 0

Boa Tarde a todos, Estou com erro na minha Web api: "O recurso solicitado n�o suporta o m�todo http 'GET'."}" esse erro est� ocorrendo quando chamo as a��es post, Put e delete do meu controller produtos. Coloquei aanota��o antes do metodo httpPost e httpPut mas o erro persiste. no arquivo:"WebApiConfig.cs" a rota da api est� definida assim: config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{Action}/{id}",
defaults: new { id = RouteParameter.Optional } Por favor podem me ajudar a entender aonde estou errando ? OBS. ao apertar Shift + ENTER para pular linha no coment�rio recebo erro 404 page not found na pagina do DevMedia. Grato pela aten��o

há +1 ano

Ver coment�rios anteriores (3)

Joel Rodrigues

N�vel 3

Bom dia, Wilson. Tudo bem?

Ent�o, conforme eu comentei anteriormente, n�o me parece que o problema esteja no seu controller, mas sim na aplica��o que est� consumindo sua API.

O erro diz que "o m�todo n�o suporta GET". Ou seja, voc� est� tentando consumir o endpoint usando GET, mas ele n�o suporta. Reveja o local em que a API est� sendo consumida. Provavelmente a linha que lan�a o erro � informada na mensagem gerada pelo Visual Studio.

há +1 ano

Allan Hilgemberg

N�vel 0

Gostaria de saber como realizar esta integra��o com o android studio, ou seja, como consumir a API utilizando um tablet ou celular

há +1 ano

Ver coment�rios anteriores (2)

Lucas Lima

N�vel 19

Sim Allan, certamente.

há +1 ano

Denise Castro

N�vel 12

Bom dia!
Estou querendo saber como criar uma API para utilizar com o Angular CLI... estou precisando fazer um projeto de carrinho de compras para uma disciplina aqui da faculdade e n�o tenho a menor ideia de como fazer... e tenho que utilizar o Angular CLI... estou perdida...

há +1 ano

Rodolfo Gomes

DevMedia

Fala Denise , td bom?

Vamos te ajudar sim, vc pode conferir essa s�rie sobre API que ajudar� com o que precisa, pois la ir� aprender a criar e consumir uma api

https://www.devmedia.com.br/trabalhando-com-api/

E sobre Angular temos esses conte�dos, onde ir� aprender como desenvolver sua aplica��o utilizando o framework:

https://www.devmedia.com.br/angular/

https://www.devmedia.com.br/guia/angular/38245

E caso n�o tenha conhecimentos pr�vios em JavaScript

Confira esta s�rie que lhe dara uma boa base https://www.devmedia.com.br/aprender-javascript/

Grande abra�o!!

há +1 ano

Laudimar Brito

N�vel 0

Boa tarde!!
Gostaria de saber se funciona tamb�m para plataforma Android?

há +1 ano

Ver coment�rios anteriores (8)

Lucas Vargas

N�vel 4

Hummn, pode crer! Show

há +1 ano

�mega Ltda

N�vel 1

Boa tarde! Conte�do muito bom! Estou usando um banco que tem 2 tabelas que se relacionam e cada uma delas tem v�rios campos, gostaria de no get mostrar apenas alguns deles. Como fazer?

No meu controller estou usando linq:
var devedor = db.tbdevedor.Where(c => c.DEVEDOR_ID == id)
.Include("tbtitulo");

há +1 ano

Luis Mesa

N�vel 2

Ol�, �MEGA LTDA!

Se voc� quer mostrar apenas alguns campos, o ideal seria criar um DTO (Data Transfer Object). Voc� pode checar mais sobre ele e outros tipos neste artigo nosso https://www.devmedia.com.br/diferenca-entre-os-patterns-po-pojo-bo-dto-e-vo/28162

O DTO nada mais � que uma classe que � usada para passar dados de uma camada a outra. Ap�s criado o DTO, voc� pode retornar na API o DTO, ao inv�s do objeto completo.

Por exemplo:

var devedorDto = db.tbdevedor.Where(c => c.DEVEDOR_ID == id)
.Include("tbtitulo").Select(d=> new DevedorDto(<seus campos>)).SingleOrDefault();

Lembrando que Where vai retornar uma cole��o, por isso adiciono o SingleOrDefault no final (e voc� poderia checar se o valor � null, antes de usar esse valor).

Sobre DTOs

Um abra�o!

há +1 ano

Black November

Desconto exclusivo para as primeiras 200 matrículas!

Pagamento anual

12x no cartão

De: R$ 69,00

Por: R$ 54,90

Total: R$ 658,80

Garanta o desconto

Formação FullStack Completa
Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
+10.000 exercícios gamificados
+50 projetos reais
Comunidade com + 200 mil alunos
Estude pelo Aplicativo (Android e iOS)
Suporte online
12 meses de acesso

Pagamento recorrente

Cobrado mensalmente no cartão

De: R$ 79,00

Por: R$ 54,90 /mês

Total: R$ 658,80

Garanta o desconto

Formação FullStack Completa
Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
+10.000 exercícios gamificados
+50 projetos reais
Comunidade com + 200 mil alunos
Estude pelo Aplicativo (Android e iOS)
Suporte online
Fidelidade de 12 meses
Não compromete o limite do seu cartão

<Perguntas frequentes>

Carreira

Metodologia

Assinatura e Pagamentos

Cadastro

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso

Integrando aplica��es com Web API

Neste artigo veremos como realizar a integra��o entre aplica��es de diferentes tipos utilizando um servi�o REST com Web API como provedor central de dados.

Criando o DER do projeto para o banco de dados

Criando o projeto ASP.NET Web API com Visual Studio

Integrando o Entity Framework ao projeto

Criando o Controller Cliente para realizar opera��es CRUD com EF

Criando o Controller Produtos

Alterando o roteamento da Web API

Criando o controller de cabe�alho do pedido

Criando o controller itens do pedido

Integrando aplica��es com Web API � Parte 2

Introdu��o ao AngularJS

Criando o projeto no Visual Studio

Baixando o Bootstrap e AngularJS

Definindo carregamento de arquivos CSS e JavaScript

Estruturando Layout com Bootstrap

Criando um Controller com AngularJS para o cadastro de clientes

Desenvolvendo a p�gina cadastro de clientes

Criando o Controller do AngularJS para o cadastro de produtos

Criando o Controller e View ASP.NET para o cadastro de produto

Criando o Controller do AngularJS para gerenciamento de pedidos

Controller e View para o gerenciamento de pedidos

Integrando aplica��es com Web API � Parte 3

Regras de neg�cio

O padr�o MVVM

Models

Proxy

ViewModels

Views

Confira outros conte�dos:

Teste unit�rio com NUnit

Como migrar projetos do ASP.NET MVC...

Crie relat�rios com o Stimulsoft...

<Perguntas frequentes>

Nossos casos de sucesso