Arquivos da categoria: Rest

O que é: SPA – Single Page Application e REST/RESTFul

SPASPA – Single Page Application é uma novo modelo de desenvolvimento de aplicações Web e mobile que vem ganhando destaque em grandes empresas como Microsoft, Google, Twitter, Facebook, etc.

SPA basicamente significa codificar menos no server-side e mais no client-side. Ou seja, a aplicação estará contida toda ou quase toda no cliente (dentro do navegador Web). É praticamente uma aplicação Desktop rodando sob o navegador.

Vantagem:

1 – balanceamento da responsabilidade da execução entre cliente e servidor (agora não é só mais responsabilidade do servidor);
2 – menos código do servidor, e mais responsabilidade no cliente;
3 – melhorar a experiência ao usuário (UX) criando interface com usabilidade moderna e de fácil entendimento do usuário;
4 – menor consumo de banda, pois as cargas de dados são feitas por demanda e por AJAX.

O grande ator de app SPA é o código Javascript executado no cliente. Toda a aplicação pode ser construída simplesmente manipulando o DOM – Document Object Model de forma nativa, ou com o uso de bibliotecas e frameworks Javascript que auxiliam na construção da aplicação. Estas bibliotecas e frameworks fornecem recursos para manipulação dinâmica do DOM, definição de templates de tela, chamadas assincronas ao servidor, organização do código Javascript, etc. Dentres as diversas bibliotecas JS que surgem a todo momento, as mais difundidas na comunidade de progamadores estão: BACKBONE, EMBER, ANGULARJS e KNOCKOUT.

No lado servidor, temos a execução das linguagens tradicionais como PHP, ASP.NET, JSP, etc, trabalhando também de forma tradicional, servindo arquivos, acessando a banco de dados, tratando as regras de negócios que não podem estar no código JS por questões de segurança. E é neste lado (servidor) que podemos utilizar a arquitetura REST – Representational State Transfer para fornecer serviços do servidor para nossa aplicação SPA. É comum encontrar aplicação SPA utilizando serviços RESTFul. Uma aplicação no servidor que utiliza a arquitetura REST para servir serviços, então é chamada de RESTFul.

Ao construir uma aplicação utilizando a arquitetura REST, o protocolo HTTP é usado em sua essência, utilizando os verbos (ou métodos de requisição ao servidor): GET, POST, PUT e DELETE (estes são os mais comuns), e cada um deles indica uma determinada ação a ser executada em um recurso específico do servidor.

  • GET: Está requisitando ao serviço um determinado recurso, por exemplo, uma listagem de dados;
  • POST: Indica ao serviço que a ele deve receber o recurso que está sendo enviado e adicionar em algum repositório;
  • PUT: Indica que ao serviço que o recurso que está sendo enviado deve ser alterado se ele já existir, ou ainda, pode ser adicionado caso ele ainda não exista;
  • DELETE: Indica que o serviço deve excluir o recurso.

Pensando em banco de dados, temos o seguinte entendimento:

  • GET: Recupera dados [select];
  • POST: Realiza a inserção de dados [insert];
  • PUT: Realiza a alteração de dados [update];
  • DELETE: Realiza a exclusão de dados [delete].

Iniciando em Single Page Application – SPA

SPASPA – Single Page Application é uma novo modelo de desenvolvimento de aplicações Web e mobile que vem ganhando destaque em grandes empresas como Microsoft, Google, Twitter, Facebook, etc.

SPA basicamente significa codificar menos no server-side e mais no client-side. Ou seja, a aplicação estará contida toda ou quase toda no cliente (dentro do navegador Web). É praticamente uma aplicação Desktop rodando sob o navegador.

Vantagem:

1 – balanceamento da responsabilidade da execução entre cliente e servidor (agora não é só mais responsabilidade do servidor);
2 – menos código do servidor, e mais responsabilidade no cliente;
3 – melhorar a experiência ao usuário (UX) criando interface com usabilidade moderna e de fácil entendimento do usuário;
4 – menor consumo de banda, pois as cargas de dados são feitas por demanda e por AJAX.

O grande ator de app SPA é o código Javascript executado no cliente. Toda a aplicação pode ser construída simplesmente manipulando o DOM – Document Object Model de forma nativa, ou com o uso de bibliotecas e frameworks Javascript que auxiliam na construção da aplicação. Estas bibliotecas e frameworks fornecem recursos para manipulação dinâmica do DOM, definição de templates de tela, chamadas assincronas ao servidor, organização do código Javascript, etc. Dentres as diversas bibliotecas JS que surgem a todo momento, as mais difundidas na comunidade de progamadores estão: BACKBONE, EMBER, ANGULARJS e KNOCKOUT.

No lado servidor, temos a execução das linguagens tradicionais como PHP, ASP.NET, JSP, etc, trabalhando também de forma tradicional, servindo arquivos, acessando a banco de dados, tratando as regras de negócios que não podem estar no código JS por questões de segurança. E é neste lado (servidor) que podemos utilizar a arquitetura REST – Representational State Transfer para fornecer serviços do servidor para nossa aplicação SPA. É comum encontrar aplicação SPA utilizando serviços RESTFul. Uma aplicação no servidor que utiliza a arquitetura REST para servir serviços, então é chamada de RESTFul.

Ao construir uma aplicação utilizando a arquitetura REST, o protocolo HTTP é usado em sua essência, utilizando os verbos (ou métodos de requisição ao servidor): GET, POST, PUT e DELETE (estes são os mais comuns), e cada um deles indica uma determinada ação a ser executada em um recurso específico do servidor.

  • GET: Está requisitando ao serviço um determinado recurso, por exemplo, uma listagem de dados;
  • POST: Indica ao serviço que a ele deve receber o recurso que está sendo enviado e adicionar em algum repositório;
  • PUT: Indica que ao serviço que o recurso que está sendo enviado deve ser alterado se ele já existir, ou ainda, pode ser adicionado caso ele ainda não exista;
  • DELETE: Indica que o serviço deve excluir o recurso.

Pensando em banco de dados, temos o seguinte entendimento:

  • GET: Recupera dados [select];
  • POST: Realiza a inserção de dados [insert];
  • PUT: Realiza a alteração de dados [update];
  • DELETE: Realiza a exclusão de dados [delete].

WebAPI é o nome dado a solução da Microsoft dentro do .NET Framework para o desenvolvimento de serviços que utilizam o conceito REST.

Criando o projeto

No VisualStudio 2013, ao criar um projeto Web, está disponível opção para seleção do template WebAPI, como é a ideia deste post é relatar a criação de app SPA, então o template selecionado deverá ser Single Page Application, que é um projeto WebAPI preparado para receber as programações SPA:

projeto_tipo_spa

Sugestão da arquitetura do projeto:

spa_webapi_arqproj

 

  • pasta app: contém os arquivos que formam a aplicação que rodará no cliente, de fato a Single Page Application;
  • pasta app\controllers: controllers do angularjs;
  • pasta app\view: views do angularjs;
  • app\app.js: configuração da aplicação no cliente;
  • pasta App_Start: classes de configuração da aplicação no servidor;
  • pasta Content: CSS da aplicação utilizando nas views (app\views);
  • pasta Controllers: Classes controladoras a nível de servidor. É de fato os serviços RESTful;
  • pasta Script: Arquivos JS da aplicação;
  • index.html: Raiz da aplicação. Será o único arquivo HTML enviado do servidor ao cliente.

No arquivo WebApiConfig.cs (da pasta App_Start) contém a configuração das rotas da aplicação:

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

Toda chamada a um método terá a URL assim: http://www.meusite.com.br/api/metodohttp/parametro.

Na configuração da api é importante padronizar o tipo de entrada e saída de dados. Para padronizar como JSON fica assim:

//padronizar JSON como retorno
config.Formatters.Remove(config.Formatters.XmlFormatter);

// Use camel case para serializar/deserializar JSON data.
config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("application/json"));

Um projeto WebAPI ou SPA segue praticamente a mesma estrutura do projeto MVC. A diferença está na herança das classes Controllers, pois ao invés de ser herdadas da classe Controller, são herdadas da classe abstrata ApiController.

Esta classe dispõem dos recursos necessários para o desenvolvimento de serviços RESTful. Nela estarão os métodos implementados para receber requisições de acordo com os verbos HTTP: GET, POST, PUT e DELETE.

Criando um controller

Toda classe controller deve estar na pasta Controllers e deve ter como sufixo a palavra “controller”:

  • ClienteController
  • PessoaController
  • ProdutoController

Para usar o assistente para criar a classe controller, basta adicionar a classe a partir do menu de contexto (botão direito do mouse) da pasta Controller:

spa_webapi_controller

Exemplo de classe gerada pelo assistente (o método GET foi alterado):

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

namespace SPAWebAPI.Controllers
{
    public class ClienteController : ApiController
    {
        // GET api/cliente
        public object Get()
        {
            return new { a = 1, b = 2};
        }

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

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

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

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

Invocando um método da classe ClienteController com AngularJS

var req = $http({
    url: '/api/Cliente'
});

req.success(function (data, status, headers, config, statusText) {

    console.log(data.a);
    console.log(data.b);

});

req.error(function (data, status, headers, config, statusText) {
    console.log(status);
});