Integração Web API x jQuery: acessando serviços RESTful via JavaScript

Desde o seu surgimento em 2006, a ado��o de jQuery em aplica��es Web vem crescendo vertiginosamente. Nos dias atuais, o uso desta biblioteca JavaScript em sites � quase uma unanimidade. Concebida com o intuito de simplificar a manipula��o de elementos HTML em p�ginas da Web (evitando assim a codifica��o de instru��es muito extensas), jQuery � uma alternativa que se destaca ainda pelo esfor�o em garantir um grau m�nimo de compatibilidade com os principais browsers do mercado.

Outro aspecto marcante da biblioteca jQuery est� na utiliza��o de recursos de AJAX (sigla do ingl�s �Asynchronous JavaScript and XML�) na implementa��o de eventos, anima��es e outros tipos de funcionalidades din�micas. Por este motivo, in�meros plug-ins, controles e frameworks voltados � constru��o de interfaces gr�ficas t�m sido constru�dos a partir de jQuery. H� inclusive uma vers�o desta biblioteca (o framework jQuery Mobile) concebida para o desenvolvimento em dispositivos m�veis.

Devido � forte �nfase dada � interoperabilidade, solu��es em jQuery costumam utilizar formatos abertos e de grande aceita��o na manipula��o de informa��es. Embora o uso de XML seja poss�vel, o padr�o //www.devmedia.com.br/curso/jquery-mobile/361 (abrevia��o do ingl�s �JavaScript Object Notation�) corresponde � op��o mais frequente para o tratamento de dados dentro de jQuery. A fonte de tais informa��es pode tanto ser alguma funcionalidade de uma aplica��o que utiliza esta biblioteca, quanto um servi�o acessado de maneira remota via JavaScript.

No caso espec�fico da plataforma .NET, uma das possibilidades para a constru��o de Web Services seria a utiliza��o do framework ASP.NET Web API. Tomando por base a arquitetura REST, esta tecnologia permite a implementa��o de servi�os que combinam o uso de formatos como JSON e XML � manipula��o de requisi��es HTTP.

O objetivo deste artigo � demonstrar, partindo de uma aplica��o de exemplo, como servi�os //www.devmedia.com.br/cursos/net podem ser consumidos a partir de c�digo escrito em jQuery/JavaScript. Isto ser� feito atrav�s da constru��o de uma aplica��o ASP.NET MVC que emprega a biblioteca Google Chart Tools, algo que ser� descrito nas pr�ximas se��es.

Exemplo de consumo de um servi�o Web API via jQuery

A solu��o descrita neste artigo foi constru�da empregando os seguintes recursos:

O Microsoft Visual Studio Professional 2013 Update 3 como IDE de desenvolvimento;
O .NET Framework 4.5.1;
O framework ASP.NET Web API 2.2 no servi�o que ser� consumido via jQuery;
O framework ASP.NET MVC 5.2.2 como base para a cria��o das interfaces gr�ficas de testes;
A biblioteca de scripts jQuery;
A biblioteca Google Chart Tools, a qual � formada um conjunto de plugins jQuery empregados na gera��o de gr�ficos.

A biblioteca Google Chart Tools corresponde a um conjunto de recursos baseados em jQuery/JavaScript e oferecidos gratuitamente pela Google, tendo por objetivo fornecer meios para a cria��o de gr�ficos dos mais variados tipos de uma maneira simples e flex�vel. Diversas op��es permitem customizar a apar�ncia de um gr�fico, al�m deste framework JavaScript possuir compatibilidade com os principais browsers e plataformas do mercado (Internet Explorer, Chrome, Firefox, Android, iOS). Gr�ficos montados a partir desta biblioteca podem tanto contar com a representa��o tradicional em que as informa��es s�o dispostas em eixos, quanto terem seus dados organizados na forma de tabelas (permitindo inclusive a ordena��o ascendente/descendente das respectivas colunas).

O processo de renderiza��o das imagens para a gera��o de gr�ficos emprega funcionalidades oferecidas pelas tecnologias HTML5 e SVG (sigla do ingl�s �Scalable Vector Graphics�), as quais procuram assegurar portabilidade na utiliza��o de elementos visuais pelos mais diversos browsers e plataformas.

O exemplo em quest�o � uma adapta��o de um projeto Web Forms.Quanto aos Web Services que servir�o de base para testes, a aplica��o correspondente (TesteWebAPI.Services) tamb�m j� foi implementada anteriormente em outro post que escrevi para o portal DevMedia.

Importante lembrar ainda que o projeto TesteWebAPI.Services faz parte de uma Solution chamada TesteWebAPI. Esta aplica��o conta com dois Web Services: cada uma destas estruturas retornar� o balan�o comercial (exporta��es e importa��es) por pa�ses ou continentes dentro de ano de refer�ncia, levando em conta para isto as opera��es de uma companhia hipot�tica.

Neste novo artigo ser� adicionada ainda � solu��o uma aplica��o MVC chamada TesteWebAPI.MVCxjQuery. Por meio deste novo site acontecer�o testes, utilizando como base os anos de 2012 e 2013.

Criando o projeto de TesteWebAPI.MVCxjQuery

O projeto TesteWebAPI.MVCxjQuery ser� do tipo �ASP.NET Web Application� (conforme indicado na Figura 1), devendo ser criado a partir da sele��o do template �MVC� sem a utiliza��o de mecanismos de autentica��o (Figura 2). A ideia principal com esta aplica��o � demonstrar de que forma servi�os RESTful criados em Web API s�o acessados a partir de c�digo escrito em jQuery.

Criando uma ASP.NET
Web Application no Visual Studio 2013

Figura 1. Criando uma ASP.NET Web Application no Visual Studio 2013

Selecionando o
template para a cria��o de uma Web Application

Figura 2. Selecionando o template para a cria��o de uma Web Application

Na Tabela 1 est�o listadas as URLs de acesso aos Web Services do projeto TesteWebAPI.Services. O valor �60913� indica um n�mero de porta que estava dispon�vel no momento em que o projeto foi gerado; j� �{ano}� se refere ao per�odo(ano) a ser considerado para a obten��o dos dados com o balan�o comercial.

Web Service	Padr�o da URL
Balan�o Comercial por Pa�s	http://localhost:60913/balanco/paises/{ano}
Balan�o Comercial por Continente	http://localhost:60913/balanco/continentes/{ano}

Tabela 1. URLs de acesso aos servi�os do projeto TesteWebAPI.Services

O pr�ximo passo agora ser� modificar o arquivo Web.config do projeto TesteWebAPI.MVCxjQuery (Listagem 1), de forma que que constem na se��o appSettings do mesmo os endere�os para consumo dos servi�os Web API.

Listagem 1. Arquivo Web.config do projeto TesteWebAPI.MVCxjQuery


  <?xml version="1.0" encoding="utf-8"?>
  <configuration>
    <appSettings>
   
      ...
   
      <add key="UrlBalancoPaises"
           value="http://localhost:60913/balanco/paises/" />
      <add key="UrlBalancoContinentes"
           value="http://localhost:60913/balanco/continentes/" />
    </appSettings>
   
    ...
   
  </configuration>

Um novo Controller chamado �BalancoController� dever� ser adicionado ao projeto TesteWebAPI.MVCxjQuery. Na Listagem 2 est� o c�digo que define essa estrutura.

Analisando o Controller BalancoController � poss�vel observar:

A exist�ncia de duas Actions (Paises e Continentes), as quais recebem como par�metros um ano de refer�ncia. Estes dois m�todos servir�o de base para a gera��o das Views em que constar�o os balan�os comerciais por pa�s e continente;
As duas Actions citadas utilizam o objeto ViewBag. Est�o sendo associadas a esta propriedade o ano de refer�ncia, al�m da URL em que se encontra o servi�o Web API respons�vel por retornar informa��es do balan�o comercial.

Listagem 2. Controller BalancoController


  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;
  using System.Configuration;
   
  namespace TesteWebAPI.MVCxjQuery.Controllers
  {
      public class BalancoController : Controller
      {
          public ActionResult Paises(int ano)
          {
              ViewBag.Ano = ano;
              ViewBag.UrlBalancoPaises =
                  ConfigurationManager.AppSettings["UrlBalancoPaises"];
              return View();
          }
   
          public ActionResult Continentes(int ano)
          {
              ViewBag.Ano = ano;
              ViewBag.UrlBalancoContinentes =
                  ConfigurationManager.AppSettings["UrlBalancoContinentes"];
              return View();
          }
      }
  }

A primeira das Views a ser criada permitir� a visualiza��o dos dados de importa��es e exporta��es por pa�s. Para gerar o arquivo correspondente clicar com o bot�o direito do mouse sobre a Action Paises, selecionando no menu de atalho apresentado a op��o �Add View...�. Com a janela �Add View� ativa (Figura 3), certificar-se de que o campo �Template� est� preenchido com o valor �Empty (without model)� e que a op��o �Create as partial view� n�o tenha sido marcada.

Cria��o da View
Paises.cshtml

Figura 3. Cria��o da View Paises.cshtml

Na Listagem 3 est� a implementa��o da View Paises.cshtml, a qual tornar� poss�vel a visualiza��o de gr�ficos que consideram os totais de importa��o e exporta��o por pa�s.

A gera��o de gr�ficos com o Google Chart Tools atrav�s de dados obtidos de um servi�o Web API engloba as seguintes a��es:

O preenchimento da propriedade cors do objeto support de jQuery com o valor �true�, possibilitando com isto o envio de requisi��es ao Web Service de testes;
A invoca��o do m�todo load a partir do objeto google, de forma a carregar as bibliotecas para gera��o de gr�ficos;
A cria��o de fun��es que ser�o acionadas a partir do m�todo setOnLoadCallback do objeto google (gerarVisualizacaoMapaIntensidade e gerarVisualizacaoTabelaPaises).

Os m�todos gerarVisualizacaoMapaIntensidade e gerarVisualizacaoTabelaPaises est�o acessando a fun��o gerarVisualizacao. J� esta �ltima fun��o recebe como par�metros o tipo de gr�fico a ser gerado, assim como o id do controle HTML em que ser� renderizado o gr�fico (normalmente uma div) e um conjunto de op��es que determinam a apar�ncia deste.

Quanto � implementa��o do m�todo gerarVisualizacao, � poss�vel observar:

A cria��o de um Data Table, atrav�s da gera��o de uma nova inst�ncia do tipo google.visualization.DataTable. As colunas da tabela resultante s�o configuradas por meio do m�todo addColumn (que recebe como par�metros o tipo e a descri��o do campo);
Uma chamada via instru��o jQuery ao m�todo do servi�o Web API que fornecer� o balan�o por pa�s num determinado ano. Utilizando o comando $.ajax e uma URL em que consta o ano de refer�ncia, a opera��o Get definida no servi�o Web API de pa�s � acionada (de forma s�ncrona, ou seja, aguardando a execu��o completa do m�todo, algo indicado por meio do par�metro async). O resultado deste procedimento ser� um conjunto de informa��es no formato JSON;
Os dados retornados pelo Web Service s�o convertidos ent�o para um array, fazendo uso para isto da instru��o $.each (que permite navegar a cada objeto JSON obtido, convertendo as informa��es que comp�em o mesmo para a matriz no formato esperado pelo Data Table);
Um objeto do tipo google.visualization.NumberFormat � gerado, com intuito de se proceder com a formata��o de valores monet�rios;
Como �ltimo passo o gr�fico ser� gerado, de acordo com o tipo informado inicialmente ao se acessar a fun��o gerarVisualizacao. Tomando como exemplo a View Paises.cshtml, a inst�ncia que representa o gr�fico poder� ser de dois tipos, google.visualization.IntensityMap (um mapa de intensidade) ou google.visualization.Table (uma tabela). O resultado produzido por um objeto do Google Chart Tools ser� renderizado no elemento HTML indicado ao se acionar a fun��o gerarVisualizacao.

Listagem 3. View Paises.cshtml (Controller BalancoController)


  <h2>Balan�o por Pa�s - @ViewBag.Ano</h2>
  <br />
  <div id="divMapaPaises">
  </div>
  <br /><br />
  <div id="divTabelaPaises">
  </div>
  <br />
   
   
  @section Scripts {
      @Scripts.Render("http://www.google.com/jsapi")
   
      <script type="text/javascript">
   
          function gerarVisualizacao(tipo, idControle, options) {
   
              var ano = '@ViewBag.Ano';
   
              var data = new google.visualization.DataTable();
              data.addColumn('string', 'Pa�s');
              data.addColumn('number', 'Exporta��es (em milh�es R$)');
              data.addColumn('number', 'Importa��es (em milh�es R$)');
   
              var urlBalanco = '@ViewBag.UrlBalancoPaises' + ano;
   
              var retornoWS;
              $.ajax(
              {
                  type: 'GET',
                  url: urlBalanco,
                  dataType: 'json',
                  crossDomain: true,
                  async: false,
                  success: function (data) {
                      retornoWS = data;
                  }
              });
   
              var dadosBalanco = [];
              $.each(retornoWS, function (i, balanco) {
                  if (tipo == 'IntensityMap') {
                      dadosBalanco.push([
                          balanco.Sigla.toString(),
                          parseFloat(balanco.ValorExportado),
                          parseFloat(balanco.ValorImportado)]);
                  }
                  else {
                      dadosBalanco.push([
                          balanco.Pais.toString(),
                          parseFloat(balanco.ValorExportado),
                          parseFloat(balanco.ValorImportado)]);
                  }
              });
              data.addRows(dadosBalanco);
   
              var formatter = new google.visualization.NumberFormat(
                  {
                      decimalSymbol: ',',
                      groupingSymbol: '.',
                      fractionDigits: 1
                  });
              formatter.format(data, 1);
              formatter.format(data, 2);
   
              var controle;
              if (tipo == 'IntensityMap') {
                  controle = new google.visualization.IntensityMap(
                      document.getElementById(idControle));
              }
              else if (tipo == 'Table') {
                  controle = new google.visualization.Table(
                      document.getElementById(idControle));
              }
              controle.draw(data, options);
          }
   
      </script>
   
      <script type="text/javascript">
   
          jQuery.support.cors = true;
   
          google.load("visualization", "1",
              { packages: ["intensitymap"] });
          google.setOnLoadCallback(gerarVisualizacaoMapaIntensidade);
   
          function gerarVisualizacaoMapaIntensidade() {
              gerarVisualizacao('IntensityMap', 'divMapaPaises', {});
          }
   
          google.load('visualization', '1', { packages: ['table'] });
          google.setOnLoadCallback(gerarVisualizacaoTabelaPaises);
   
          function gerarVisualizacaoTabelaPaises() {
              gerarVisualizacao('Table', 'divTabelaPaises',
                  {
                      width: 600
                  });
          }
   
      </script>
  }

Uma segunda View associada � Action Continentes dever� ser criada, a fim de possibilitar a visualiza��o de exporta��es/importa��es por continentes. Na Listagem 4 est� o c�digo que define esta View.

As instru��es em JavaScript/jQuery que constam no arquivo Continentes.cshtml s�o bastante similares �quelas existentes em Paises.cshtml. A �nica distin��o mais not�vel est� no uso do tipo google.visualization.PieChart: partindo desta estrutura ser�o gerados dois gr�ficos do tipo pizza, um para exporta��es e outro relativo a importa��es por continentes.

Listagem 4. View Continentes.cshtml (Controller BalancoController)


   
  <h2>Balan�o por Continente - @ViewBag.Ano</h2>
  <br />
  <div>
      <div id="divExportacoesContinentes" style="float: left;">
      </div>
      <div id="divImportacoesContinentes" style="margin-left: 450px;">
      </div>
  </div>
  <br />
   
  @section Scripts {
      @Scripts.Render("http://www.google.com/jsapi")
   
      <script type="text/javascript">
   
          function gerarVisualizacao(tipo, idControle) {
   
              var ano = '@ViewBag.Ano';
   
              var data = new google.visualization.DataTable();
              data.addColumn('string', 'Continente');
              data.addColumn('number', 'Valor');
   
              var urlBalanco = '@ViewBag.UrlBalancoContinentes' + ano;
   
              var retornoWS;
              $.ajax(
              {
                  type: 'GET',
                  url: urlBalanco,
                  dataType: 'json',
                  crossDomain: true,
                  async: false,
                  success: function (data) {
                      retornoWS = data;
                  }
              });
   
              var dadosBalanco = [];
              $.each(retornoWS, function (i, balanco) {
                  if (tipo == 'EXPORTACOES') {
                      dadosBalanco.push([
                      balanco.Continente.toString(),
                      parseFloat(balanco.ValorExportado)]);
                  } else {
                      dadosBalanco.push([
                      balanco.Continente.toString(),
                      parseFloat(balanco.ValorImportado)]);
                  }
              });
              data.addRows(dadosBalanco);
   
              var formatter = new google.visualization.NumberFormat(
              {
                  prefix: 'Rarray3
nbsp;(milh�es)',
decimalSymbol:',',
groupingSymbol:'.',
fractionDigits:1
});
formatter.format(data,1);

vartitulo;
if(tipo=='EXPORTACOES')
titulo='Exporta��esporContinente-'+ano;
else
titulo='Importa��esporContinente-'+ano;

varoptions={
title:titulo,
is3D:true,
height:300,
width:450
};

varcontrole=newgoogle.visualization.PieChart(
document.getElementById(idControle));
controle.draw(data,options);
}

</script>

<scripttype="text/javascript">

jQuery.support.cors=true;

google.load("visualization","1",
{packages:["corechart"]});


google.setOnLoadCallback(gerarVisualizacaoGraficoExportacoes);

functiongerarVisualizacaoGraficoExportacoes(){
gerarVisualizacao('EXPORTACOES','divExportacoesContinentes');
}


google.setOnLoadCallback(gerarVisualizacaoGraficoImportacoes);

functiongerarVisualizacaoGraficoImportacoes(){
gerarVisualizacao('IMPORTACOES','divImportacoesContinentes');
}
</script>
}

Por fim, a View Index do Controller HomeController precisar� ser alterada. Os ajustes indicados na Listagem 5 referem-se a links que possibilitar�o a consulta dos balan�os comerciais por pa�ses e continentes, considerando para isto os anos de 2012 e 2013. A gera��o de tais links � poss�vel gra�as a chamadas ao m�todo ActionLink, o qual � disponibilizado pelo objeto Html para uso em Views do ASP.NET MVC.

Listagem 5. View Index.cshtml (Controller HomeController)


  <div class="jumbotron">
      <h1>Integra��o ASP.NET Web API x jQuery</h1>
      <p><a href="http://www.asp.net/web-api"
            class="btn btn-primary btn-large">Saiba mais �</a></p>
  </div>
   
   
  <div style="padding-left: 50px;">
      <div>
          <h2>
              Balan�o Comercial por Pa�s
          </h2>
          <h3>
              @Html.ActionLink("2012", "Paises", "Balanco",
                  new { ano = 2012 }, new { })
                 
              @Html.ActionLink("2013", "Paises", "Balanco",
                  new { ano = 2013 }, new { })
          </h3>
      </div>
      <div>
          <h2>
              Balan�o Comercial por Continente
          </h2>
          <h3>
              @Html.ActionLink("2012", "Continentes", "Balanco",
                  new { ano = 2012 }, new { })
                 
              @Html.ActionLink("2013", "Continentes", "Balanco",
                  new { ano = 2013 }, new { })
          </h3>
      </div>
  </div>

OBSERVA��O: Por quest�es de simplifica��o, o c�digo referente �s outras Views da aplica��o de testes foi omitido, j� que no mesmo n�o constam instru��es complexas que justifiquem uma discuss�o mais aprofundada. Os arquivos correspondentes a essas Views podem ser obtidos atrav�s do download da solu��o aqui implementada, bastando acessar o link para download do material deste artigo. Este mesmo procedimento tamb�m foi adotado com a classe HomeController.

Ajustes nas configura��es do projeto TesteWebAPI.Services

Para que a utiliza��o dos controles do Google Chart Tools aconte�a sem problemas a partir do Google Chrome, o arquivo Web.config do projeto TesteWebAPI.Services tamb�m dever� ser alterado com a inclus�o de algumas configura��es na se��o �system.webServer� (conforme especificado na Listagem 6).

Listagem 6: Arquivo Web.config (projeto TesteWebAPI.Services)


<?xml version="1.0" encoding="utf-8"?>
<configuration>

  ...

  <system.webServer>

    ...

    <modules runAllManagedModulesForAllRequests="true"/>
    <directoryBrowse enabled="true"/>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

Executando a aplica��o de testes

Na Figura 4 est� a tela apresentada inicialmente ao se executar a aplica��o TesteWebAPI.MVCxjQuery.

Tela inicial da
aplica��o TesteWebAPI.MVCxjQuery

Figura 4. Tela inicial da aplica��o TesteWebAPI.MVCxjQuery

Selecionando o ano de 2012 para a op��o �Balan�o Comercial por Pa�s�, ser�o exibidas duas diferentes vis�es de exporta��es e importa��es por pa�s (Figura 5).

Exporta��es e
importa��es por pa�s no ano de 2012

Figura 5. Exporta��es e importa��es por pa�s no ano de 2012

J� na Figura 6 est� a tela que ser� apresentada ao se acionar o ano de 2013, a partir da op��o �Balan�o Comercial por Continente� (na p�gina inicial do site de testes).

Exporta��es e
importa��es por continente no ano de 2013

Figura 6. Exporta��es e importa��es por continente no ano de 2013

A inten��o deste artigo foi demonstrar como servi�os RESTful podem ser consumidos via c�digo JavaScript/jQuery. Embora tenha sido empregado o framework ASP.NET Web API na implementa��o dos Web Services que foram consumidos, os procedimentos aqui descritos tamb�m s�o v�lidos no acesso a informa��es providas por aplica��es constru�das em WCF (Windows Communication Foundation) ou, at� mesmo, em outras plataformas (como Java, por exemplo).

Espero que o conte�do aqui apresentado possa ser �til no seu dia a dia.

At� uma pr�xima oportunidade!

Links

ASP.NET Web API -http://www.asp.net/web-api

Google Chart Tools -https://developers.google.com/chart/

Tecnologias:

Confira outros conte�dos:

CSS Border

HTML Icons: utilizando �cones em...

HTML hr: como utilizar a tag hr para...

Assista grátis a nossa aula inaugural

Perguntas frequentes

Quem somos?

Por que a programação se tornou a profissão mais promissora da atualidade?

Como faço para começar a estudar?

Em quanto tempo de estudo vou me tornar um programador?

Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!

O que eu irei aprender estudando pela DevMedia?

Principais diferenciais da DevMedia

Qual o investimento financeiro que preciso fazer para me tornar um programador?

Como funciona a forma de pagamento da DevMedia?

Por Renato Em 2014

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

Marcus Fernando

N�vel 0

Interessante, estamos trabalhando agora com webAPI , por�m trabalhando em cima de um projeto Web -form. Mas muito interessante a mat�ria, aqui trabalhamos mais com GenericHandlers.ashx e implementamos arquitetura RESTFULL a prinicipio foi um pouco confuso de se entender , mas conforme eu sigo pesquisando melhor a id�ia fixa.

Parabens pelo artigo

há +1 ano

Renato Groffe

N�vel 0

Ol� Marcus, agrade�o pelo feedback.

A alternativa que voc� citou (Generic Handlers) tamb�m � v�lida. No entanto, o framework Web API por si s� simplifica muito do trabalha na implementa��o da arquitetura REST.

Tempos atr�s, escrevi um artigo sobre como implementar servi�os RESTful em WCF. Esta tecnologia (WCF) tamb�m oferece este suporte, mas se voc� comparar detalhadamente, sempre chegar� � conclus�o de que o ASP.NET Web API � a melhor dessas 3 alternativas (por n�o exigir tanto esfor�o de configura��o, al�m de contar com um modelo relativamente simples para a programa��o de Web Services).

Abs.

há +1 ano

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

Integra��o Web API x jQuery: acessando servi�os RESTful via JavaScript

Veja neste artigo como implementar servi�os Web API que ser�o consumidos a partir de trechos de c�digo escritos em jQuery.