SharePoint 2010 e Windows Azure: Integração Utilizando JavaScript

Overview

Neste artigo vamos ver como criar um serviço no Windows Azure para ser consumido a partir de um script JavaScript publicado no SharePoint 2010.

As técnicas utilizadas neste artigo podem ser utilizadas para o SharePoint 2010 OnPremise (local) ou para o SharePoint Online (Office 365).

 

Solução

 

Descrição da Regra de Negócio

Para um melhor entendimento, antes de iniciar a parte técnica do post, vamos falar sobre a regra de negócio e o objetivo do projeto (vamos fazer uma simulação de algo real).

O objetivo do projeto consiste em permitir que os usuários de um site SharePoint possam fazer uma simulação de qual será o valor do seu salário após o percentual de aumento. Para isso o usuário irá informar o seu salário atual e o percentual de aumento, o resultado será a aplicação desse percentual sobre o salário. Por causa da complexidade da regra de negócio e a falta de estrutura local para processar os valores de tantos funcionários, a empresa resolveu contratar e publicar um serviço no Windows Azure para permitir a entrega dessa demanda. O site SharePoint atualmente fica na estrutura local, mas pelos problemas de hardware estão planejando fazer a migração para o SharePoint Online em breve. A solução adotada deve poder ser executada no SharePoint OnPremise ou SharePoint Online, sem que nenhuma alteração seja necessária. Como o acesso ao site será acessado a partir do mundo inteiro e a partir de qualquer máquina (computadores fora do domínio), o departamento de TI solicitou que a solução funcionasse sem que fosse necessária a instalação de nenhum componente ou complemento nos computadores que acessam o site. Depois de pronto o sistema deverá ser entregue para o departamento de TI dar manutenção, como já existem pessoas que mantém o site corporativo da empresa em HTML, JavaScript e CSS, eles desejam que a solução apresentada use o máximo possível desses recursos.

Com o case definido, uma de nossas opções é resolver utilizando JavaScript. Uma outra opção seria utilizar Silverlight, mas conforme os requisitos da TI, essa opção não é mais possível. Web parts e outros códigos que executem no servidor não podem ser utilizados porque a Sandbox Solution, que é a forma de publicar aplicativosno SharePoint Online,  não permite a chamada de serviços externos ao SharePoint. Sendo assim, somentes soluções que rodem no cliente (no caso o navegador) podem ser adotadas.

Bom, entendido o problema, vamos à solução, e para isso vamos dividi-la em três etapas:

  • Criação do serviço com a regra de negócio e publicação do mesmo no Windows Azure;

  • Criação da página HTML com o script JavaScript para interagir com o usuário e consumir o serviço publicado no Windows Azure;

  • Publicação do HTML e JavaScript no SharePoint.

     
    Criando o Serviço para o Windows Azure

A primeira etapa é criar um projeto de Azure no Visual Studio 2010, no artigo Criando um Serviço para o Windows Azure no Visual Studio 2010 já mostramos como fazer isso. Depois do projeto criado, siga as instruções abaixo.

A primeira atividade a ser feita é a criação da interface do serviço. A listagem 1 mostra a implementação dela. Preste atenção ao atributo WebInvoke, que é responsável por permitir que o método seja chamado a partir do JavaScript. O UriTemplate é o nome do método que utilizaremos a partir do JavaScript, ele não irá ter acesso ao método ReajustarSalario diretamente.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.ServiceModel.Web;

namespace ServicoCalculoWRoleJS
{
    [ServiceContract]
    public interface IServicoCalculo
    {
        [OperationContract,
         WebInvoke(Method = "POST",
            BodyStyle = WebMessageBodyStyle.WrappedRequest,
            RequestFormat = WebMessageFormat.Json,
            ResponseFormat = WebMessageFormat.Json,
            UriTemplate = "reajustarSalario")]
        double ReajustarSalario(double salarioAtual, double percentualDeAumento);
    }
}

Listagem 1: Implementação da interface IServicoCalculo

 

O próximo passo é criar a classe de negócio ServicoCalculo, que deverá implementar a interface IServicoCalculo, como na listagem 2.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.ServiceModel.Activation;

namespace ServicoCalculoWRoleJS
{
    [ServiceBehavior(AddressFilterMode = AddressFilterMode.Any)]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class ServicoCalculo : IServicoCalculo
    {
        public double ReajustarSalario(double salarioAtual, double percentualDeAumento)
        {
            return salarioAtual * (1 + percentualDeAumento / 100);
        }
    }
}

Listagem 2: Implementação da classe ServicoCalculoWebRole

 

Agora vamos realizar as configurações no web.config do serviço. Faça isso copiando o modelo abaixo, veja que é importante que a seção system.serviceModel esteja igual ao conteúdo da listagem 3.

<system.serviceModel>
  <services>
    <service behaviorConfiguration="ServicoCalculoWRoleJS.CloudWCFServiceBehavior"
             name="ServicoCalculoWRoleJS.ServicoCalculo">
      <endpoint address=""
                binding="webHttpBinding"
                behaviorConfiguration="JsonEndpointBehavior"
                contract="ServicoCalculoWRoleJS.IServicoCalculo" />
      <endpoint address="mex"
                binding="mexHttpBinding"
                contract="IMetadataExchange" />
    </service>
  </services>
  <behaviors>
    <serviceBehaviors>
      <behavior name="ServicoCalculoWRoleJS.CloudWCFServiceBehavior">
        <useRequestHeadersForMetadataAddress>
          <defaultPorts>
            <add scheme="http" port="81"/>
            <add scheme="https" port="444"/>
          </defaultPorts>
        </useRequestHeadersForMetadataAddress>
        <serviceMetadata httpGetEnabled="true"/>
        <serviceDebug includeExceptionDetailInFaults="true"/>
      </behavior>
    </serviceBehaviors>
    <endpointBehaviors>
      <behavior name="JsonEndpointBehavior">
        <webHttp/>
      </behavior>
    </endpointBehaviors>
  </behaviors>
  <serviceHostingEnvironment multipleSiteBindingsEnabled="true" aspNetCompatibilityEnabled="true" />
</system.serviceModel>

Listagem 3: Alteração no web.config do serviço

 

Observação: por causa das configurações de endpoint que fizemos, ao executar o projeto do serviço no Visual Studio o serviço ServicoCalculo.svc não estará disponível na console do Visual Studio, mas isso não irá gerar impacto na solução.

A próxima etapa, necessária para que possamos user este serviço, é a publicação do mesmo no Windows Azure. No artigo Publicando um Serviço no Windows Azure utilizando o Portal de Gerenciamento tem a explicação detalhada de como fazer esta publicação. Depois que a publicação tiver terminado o serviço já pode ser acessado ou consumido por outros aplicativos através da url: http://servicocalculojs.cloudapp.net/ServicoCalculo.svc ou conforme a url definida na publicação do serviço.

 

Criando a Página HTML

Como iremos trabalhar apenas com HTML e JavaScript não precisamos criar um projeto no Visual Studio, dessa maneira crie um arquivo do tipo HTML e copie o conteúdo da listagem 04.  O conteúdo da página será composto pelas funções JavaScript no topo e o conteúdo HTML abaixo.

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
    //<![CDATA[
    var ServicoCalculo = {
       
        Initialize: function () {
            $("#CalcularSalario").click(null, function () {
                var salary = parseFloat($("#txtSalario").val());
                var inflation = parseFloat($("#txtPercentualAumento").val());

                // monta os parâmetros para o método
                var data = ‘{ "salarioAtual" : ‘ + salary + ‘, "percentualDeAumento": ‘ + inflation + ‘}’;

                // envia via ajax
                $.ajax({
                    data: data,
                    cache: false,
                    success: ServicoCalculo.ReceiveData,
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json",
                    url: "
http://servicocalculojs.cloudapp.net/ServicoCalculo.svc/reajustarSalario"
                });
                return false;
            });
        },

        // Quanto o resultado retornar atualiza o campo resposta
        ReceiveData: function (data, status, xhr) {
            $("#resposta").text(‘R$ ‘ + data.toFixed(2));

        }
    };

    $(document).ready(ServicoCalculo.Initialize);
//]]>
</script>
<div>
<span id="Span1" style="font-size:large" >Cálculo de Reajuste Salarial</span>
</div>
<div style="margin: 15px">
Salário Atual:<input type="text" id="txtSalario"
        style="position: absolute; left: 150px; top: 57px;" />
</div>
<div style="margin: 15px;">
% Aumento:<input type="text" id="txtPercentualAumento" style="position: absolute; left: 150px;" />
</div>
<div style="margin: 15px;">
<button id="CalcularSalario">Calcular</button>
</div>
<div style="margin: 15px;">
Salário reajustado:<span id="resposta" style="position: absolute; left: 150px;" ></span>
</div>

Listagem 04: Conteúdo da página HTML e o script JavaScript para consumir dados do serviço publicado no Windows Azure

 

Neste ponto já é possível testar a solução, salve o arquivo HTML e abra-o no navegador de internet. A página já estará funcionando e irá trazer o resultado do cálculo, como mostra a imagem 01.

Imagem 01: Testando o script

 

Publicando no SharePoint

Depois do serviço do Windows Azure e da página HTML prontos, vamos publicar o HTML no SharePoint e ver a integração funcionando no SharePoint. Os passos abaixo podem ser feitos tanto no SharePoint OnPremise (local) quanto no SharePoint Online (Office 365), ou seja, o mesmo aplicativo serve para as duas plataformas.

Para fazer esta solução vamos utilizar uma web part padrão do SharePoint chamada Web Part de Formulário HTML, com ela podemos adicionar qualquer HTML à nossa página.

O primeiro passo é colocar a página em modo de edição, conforme a imagem 02.

Imagem 02: Editando a página no SharePoint

 

Clique em Inserir, conforme a imagem 03. Esta opção irá exibir a barra de objetos que podem ser adicionados à página.

Imagem 03: Acessando o menu para inserir objetos na página

 

Selecione a opção Web Part, conforme a imagem 04, para exibir as web parts instaladas no site.

Imagem 04: Acessando o menu para adicionar web parts na página

 

Selecione a categoria Formulários e a web part Web Part de Formulário HTML e adicione-a à página, como mostra a imagem 05.

Imagem 05: Adicionando a web part de formulário HTML na página

 

Coloque a web part de modo de edição, conforme a imagem 06. A partir deste ponto você poderá realizar várias configurações na web part, como editar o conteúdo HTML, editar o título, tamanho, etcs.

Imagem 06: Editando a web part de formulário HTML

 

Clique em Editor de Código-Fonte, conforme a imagem 07.

Imagem 07: Editando a web part de formulário HTML

 

Copie o conteúdo da sua página HTML criada no tópico Criando a Página HTML, listagem 04 e cole no conteúdo da web part, como mostra a imagem 08.

Imagem 08: Adicionando o HTML à web part

 

Para confirmar a alteração na web part, clique em Ir, conforme a imagem 09. Repare que antes de clicar em Ir a web part continua com o conteúdo antigo. Não se preocupe, é normal isso, o conteúdo será atualizado após salvar a alteração.

Imagem 09: Confirmando as alterações na web part

 

Agora o script feito em JavaScript está pronto para ser utilizado buscando informações do Windows Azure e exibindo ao cliente dentro do SharePoint. A imagem 10 mostra o resultado.

Imagem 10: Executando a função JavaScript e obtendo o resultado

 

Importante: conforme a configuração da zona do site SharePoint no seu navegador de internet, a chamada ao serviço no Windows Azure pode ser bloqueada. O artigo Erro ao Acessar Serviços Cross Domain com ECMAScript explica uma forma de resolver o problema.

 

Referências:

Anúncios

Uma resposta to “SharePoint 2010 e Windows Azure: Integração Utilizando JavaScript”

  1. SharePoint 2010 e Windows Azure: Utilizando o Poder da Nuvem no Seu Portal « Fabian André Gehrke Says:

    […] SharePoint 2010 e Windows Azure: Integração Utilizando JavaScript […]


Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: