IBM Mashup Center: Interoperabilidade OpenSocial

Este artigo descreve como é possível estender o IBM® Mashup Center para utilização e interoperação com outros modelos de componente widget, como, por exemplo, dispositivos OpenSocial.

Han Nguyen, Software Engineer, IBM

Han Nguyen é uma engenheira de software da IBM que trabalha em padrões emergentes com foco em Redes sociais através de diversos produtos e segmentos de mercado verticais. Ela trabalhou anteriormente com diversas tecnologias em ativação de software e serviços.



30/Mai/2014

Nota do editor: Conhece muito sobre esse tópico? Deseja compartilhar seu conhecimento? Participe hoje do programa de wiki do software IBM Lotus.

Wiki sobre o IBM Mashup Center

Introdução

O IBM Mashup Center é uma plataforma de aplicativos situacionais baseada em Web 2.0, com suporte à montagem rápida de aplicativos Web com segurança, controle e capacidades de gerenciamento adequadas à implementação em ambientes corporativos. Os aplicativos do Mashup Center são baseados no modelo de componente iWidget, uma especificação definida pela IBM, documentada na iWidget Specification 2.0.


Histórico

Há muito tempo como empresa líder e inovadora em tecnologias de Web 2.0, a IBM definiu uma tecnologia de componentes reutilizáveis chamados iWidgets, que permite que os clientes construam e implementem aplicativos situacionais rapidamente. Uma parte chave da tecnologia iWidget é o contêiner do iWidget. Este contêiner gerencia o ciclo de vida dos iWidgets e tem ajudado tanto a IBM, quanto os seus clientes, a agregar, de forma rápida e fácil, uma ampla variedade de conteúdos "on the glass" em poderosos aplicativos situacionais. Hoje, os iWidgets e seus contêineres (conhecidos como Mashup Enabler) são usados em uma ampla variedade de produtos da IBM, incluindo IBM WebSphere® Portal, IBM Lotus® Connections e a pilha de produtos Business Process Manager (BPM).

Uma parte chave da estratégia de negócios da IBM é providenciar produtos de alta qualidade e promover tecnologias de computação aberta, de modo que os seus clientes possam desenvolver soluções que melhor se adaptem às suas necessidades. Como parte desta estratégia, a IBM vem trabalhando com a OpenAjax Alliance, um grupo de vendedores corporativos, que inclui Tibco, Microsoft® e Adobe®, para criar tecnologias de widgets interoperáveis.

Por exemplo, no espaço do consumidor, um padrão chamado OpenSocial emergiu. Esta especificação guiada pela comunidade define um modelo de componente com base em navegadores, conhecido como dispositivos. Além disso, o OpenSocial define uma API para acessar informações sobre perfis de usuários, assim como seus gráficos sociais, como, por exemplo, seus amigos, atividades, aplicativos compartilhados, autenticação e autorização. Um projeto de código aberto na Apache Software Foundation, conhecido como Shindig, fornece uma implementação de referência do OpenSocial.

Conforme a indústria desenvolve-se, líderes como a IBM devem providenciar estratégias que permitam que os clientes escolham os modelos de componente corretos, com base em suas necessidades particulares de negócios. Como uma líder de indústria, a IBM está engajando essas comunidades abertas para adiantar essas especificações, adicionando capacidades corporativas e promovendo a interoperabilidade com todos os outros modelos de componente. Este artigo descreve alguns passos iniciais em direção à interoperabilidade entre modelos de componente através da demonstração de como é possível usar dispositivos OpenSocial no Mashup Center.


Integração entre o Mashup Center e o OpenSocial

Vários componentes Web 2.0 da interface com o usuário tem, progressivamente, tornado-se disponíveis em diferentes formatos, necessitando assim de ferramentas para montar os componentes em conjunto. Esses componentes da Web frequentemente interagem e enviam mensagens uns aos outros, resultando, às vezes, em problemas de interoperabilidade. O Mashup Center não somente fornece as ferramentas para descobrir e montar diferentes widgets na mesma página, incluindo dispositivos OpenSocial, como também fornece a capacidade de interconectar e persistir essas conexões através de vários componentes.

Páginas mashup

Uma página mashup é uma marcação HTML simples que contém referências a iWidgets e outros tipos de dispositivos. A estrutura Mashup Center Livetext analisa o HTML e entrega o pedido de renderizar o widget para diferentes contêineres de widgets e dispositivos. As marcações de página contêm outros metadados, como títulos, preferências, ligações e outros componentes que atendem a um conjunto de sintaxe declarativa para colocar uma instância de um iWidget em um conjunto de marcação mais amplo, como, por exemplo, o HTML. Essa sintaxe declarativa é conhecida como iWidget microformat.

A listagem 1 é um exemplo de uma página mashup que contém iWidgets, dispositivos OpenSocial e outros metadados relacionados.

Listagem 1. Amostra de página mashup

  <span layoutdata="layout:freeForm;" 
id="ns_22f00fd0d86811deb7f591bc4648e1b3" class="mm_iWidget iWidgetSkin">
   <a href="/mum/widget-catalog/widgetPub.xml" class="mm_Definition">
   </a>
   <span style="display: none; visibility: hidden;" title="idescriptor" 
   class="mm_ItemSet">
     <a href="#icon" style="visibility: hidden; display: none;" 
     class="mm_Item" lang="en">
       <span class="mm_Value" lang="en">
      	 /mum/widget-catalog/images/widgetPub.png
       </span>
      	</a>
      	<a href="#title" style="visibility: hidden; display: none;" 
      	class="mm_Item" lang="en">
      	  <span class="mm_Value" lang="en">
      		iWidget Publisher
      	  </span>
      	</a>
     </span>
     </span>
     <span layoutdata="layout:freeForm;" id="ns_3c49ee10d86811deb7f591bc4648e1b3" 
     class="mm_iWidget iWidgetSkin">
      	<a href="/mum/widget-catalog/widgetSub.xml" class="mm_Definition">
      	</a>
      	<span style="display: none; visibility: hidden;" title="idescriptor" 
      	class="mm_ItemSet">
      		<a href="#icon" style="visibility: hidden; display: none;" 
      		class="mm_Item" lang="en">
      			<span class="mm_Value" lang="en">
      			/mum/widget-catalog/images/widgetSub.png
      			</span>
      		</a>
      		<a href="#title" style="visibility: hidden; display: none;" 
      		class="mm_Item" lang="en">
      			<span class="mm_Value" lang="en">
      				iWidget Subscriber
      			</span>
      		</a>
      	</span>
      	<span class="mm_ReceivedEvent">
      		<a href="#ns_22f00fd0d86811deb7f591bc4648e1b3" 
      		class="mm_SourceEvent">
      			random-number
      		</a>
      		<span class="mm_TargetEvent">
      			random-number
      		</span>
      	</span>
      </span>
      <span layoutdata="layout:freeForm;" id="ns_272be4c0d86811deb7f591bc4648e1b3" 
      class="mm_OSGadget iWidgetSkin">
   <a href="http://localhost:8080/gadgets/files/container/sample-pubsub-publisher.xml" 
      	class="mm_Definition">
      	</a>
      </span>
      <span layoutdata="layout:freeForm;" id="ns_30c10c90d86811deb7f591bc4648e1b3" 
      class="mm_OSGadget iWidgetSkin">
      	<a href="http://localhost:8080/gadgets/files/container/
      	sample-pubsub-subscriber.xml" class="mm_Definition">
      	</a>
      </span>

Operações de eventos

Agora, vamos dar uma olhada nos seguintes modelos de comunicação fornecidos por contêineres do modelo de componente iWidget e OpenSocial:

  • Operações de eventos em iWidgets
  • Operações de eventos em dispositivos OpenSocial

Operações de eventos em iWidgets

O modelo de componente iWidget fornece um conjunto de operações de eventos.

O Mashup Center alavanca o OpenAJAX Hub como sua implementação de comunicação base. O OpenAJAX Hub é um conjunto de APIs padrão JavaScript™ que fornecem um mecanismo de sistema de mensagens que permite segurança e interoperabilidade para bibliotecas Ajax e componentes Web 2.0 usados na mesma página. Comunicações entre esses componentes Web passam por um gerenciador de segurança hospedado, chamado Managed Hub. O Managed Hub aceita ou nega a conexão, o que permite a integração segura com os outros componentes.

Aqui estão algumas das APIs de operações de eventos iWidget. Para exemplos de código de transmissão, veja widgetPub.js e widgetSub.js:

  • broadcastEvent(String targetEvent, Object payload, String payloadType, String sourceid). Permite que os componentes da página transmitam um evento a todos os widgets ou componentes da página.
  • publishEvent(String topic, Object payload, String payloadType, String sourceid). Permite que componentes da página publiquem um evento global disponível para todos os outros componentes da página.
  • subscribeEvent(String event, Object object, String eventCallback, String subscribeCallback, String sourceid). Permite que os componentes da página inscrevam-se em um evento global disponível para todos os outros componentes da página.
  • unsubscribeEvent(Object subscriptionHandler, String sourceid). Permite que os componentes da página cancelem a inscrição em um evento global disponível para todos os outros componentes da página.

Operações de eventos em dispositivos OpenSocial

O OpenSocial usa Remote Procedure Call (RPC) e APIs pubsub nos seus contêineres para atingir a comunicação entre os dispositivos. Por exemplo, o Shindig rpc.js providencia o mecanismo de comunicação base para dispositivos OpenSocial e o contêiner. Em um cenário de comunicação de domínio cruzado, o rpc.js garante que o receptor da mensagem conheça o criador, e que o criador conheça o receptor.

As interfaces pubsub.js e pubsub-router.js executam as APIs RPC para comunicações de dispositivo-para-dispositivo e para o roteamento de mensagens entre o contêiner e os dispositivos.

Para habilitar o recurso pubsub em uma página de contêiner OpenSocial, é possível carregar as interfaces rpc.js e pubsub.js usando uma tag HTML <script> para apontar o local dos arquivos hospedados, como exibido na listagem 2.

Listagem 2. Tag HTML <script>

                  <script type="text/javascript" 
                  src="http://<host:port>/gadgets/js/rpc.js?c=1"></script>
                  <script type="text/javascript" 
                  src="http://<host:port>/gadgets/js/pubsub.js?c=1&debug=1">
                  </script>

Agora, vamos dar uma olhada nas APIs de publicação e assinatura em nível de dispositivo. A API gadgets.pubsub fornece operações de publicação e assinatura para dispositivos. Para habilitar as APIs, um arquivo de definição de dispositivo deve declarar o recurso de pubsub requerido (<Require feature="pubsub"/>) como um elemento-filho de <ModulePrefs>, como exibido na listagem 3.

Listagem 3. Um arquivo de definição de dispositivo

    <?xml version="1.0" encoding="UTF-8"?>
         <Module>
         <ModulePrefs title="OS Gadget Subscribe">
           <Require feature="opensocial-0.8"/>
           <Require feature="pubsub"/>
          </ModulePrefs>
          <Content type="html">
          <![CDATA[
           ]]>
            </Content>
          </Module>

Aqui estão descrições das APIs de publicação e assinatura:

OBSERVAÇÃO: Para exemplos de códigos, veja o exemplo de código osPub.xml no arquivo sampleGadgets.war da Seção de downloads deste artigo.

  • gadgets.pubsub.subscribe(channel-name, callback). Inscreve um dispositivo em um canal. callback é uma função que é chamada com a mensagem recebida.
  • gadgets.pubsub.publish(channel-name, message). Publica uma mensagem de cadeia de caractere de tipos para um canal.
  • gadgets.pubsub.unsubscribe(channel-name). Cancela a inscrição de um dispositivo em um canal.

Habilitando recursos OpenSocial para o Mashup Center

Os seguintes passos mostram como habilitar recursos OpenSocial para o Mashup Center 2.0 com o fix pack 2.0.0.1. Usa-se o Apache Shindig BETA3 com o Apache Maven para construir um arquivo WAR do Shindig.

Para fazer o download, instalar os programas necessários e construir o arquivo WAR do Shindig, siga os seguintes passos:

OBSERVAÇÃO: Se você está instalando qualquer um desses programas pela primeira vez, assegure-se de adicionar os caminhos executáveis à sua variável de caminho de sistema, de modo que você possa executá-los a partir do prompt de comandos.

  1. Faça o download e instale o Apache Maven 2.0.10.
  2. Faça o download e instale o SVN client.
  3. Faça o download e instale o JRE6.
  4. Faça o download e instale o patch para execução no Microsoft Windows®.
  5. A partir do seu prompt de comandos, altere o diretório para a pasta desejada e insira o seguinte comando para fazer o download do Shindig BETA3:

    svn co http://svn.apache.org/repos/asf/incubator/shindig/tags/shindig-project-1.1-BETA3-incubating/
  6. Importante: Em um navegador da Web, navegue até o site da Apache e faça o download do arquivo SHINDIG-1288.patch. Esse patch modifica o arquivo gadgets.js do Shindig e altera o valor do servidor seguro padrão, serverBase, para uma URL completa. Você pode desejar abrir o arquivo transferido por download em um editor de texto para visualizar as alterações.
  7. Para aplicar o SHINDIG-1228.patch, vá para um prompt de comandos, navegue até a localização do patch e insira patch -p0<SHINDIG-1228.patch. Especifique o seguinte arquivo de correção, de modo que se saiba onde aplicar o patch:

    shindig-project-1.1-BETA3-incubating location>/javascript/container/gadgets.js.
  8. Altere o diretório para <shindig-project-1.1-BETA3-incubating location> e insira o comando mvn. Esteja preparado para esperar certo tempo para o download do seu repositório maven e a construção do arquivo WAR do Shindig.
  9. Após a conclusão da construção do maven, localize o arquivo WAR no seguinte local:

    <shindig-project-1.1-BETA3-incubating location>\java\server\target\shindig-server-1.1-BETA3-incubating

Siga os seguintes passos para implementar o arquivo WAR do Shindig no Mashup Center 2.0.0.1 ou mais recente.

  1. Inicie o Mashup Center e vá para o console administrativo IBM WebSphere Application Server usando a seguinte URL:

    http://<host:port>/admin.
  2. Implemente o shindig-server-1.1-BETA3-incubating.war. Assegure-se de selecionar / como a raiz de contexto, pois o Shindig é executado em ROOT como padrão. Pode ser necessário interromper a DefaultApplication e outros aplicativos executados em ROOT para que o Shindig inicie corretamente.

Siga os seguintes passos para habilitar a autoinicialização do contêiner do Shindig:

  1. Na raiz da instalação do Mashup Center, altere o diretório para mm/config e remova o comentário da seguinte linha em configService.properties:

    com.ibm.mashups.common.js=/gadgets/files/container/../../js/core:rpc?
    debug=1,/gadgets/files/container/util.js,/gadgets/files/container/gadgets.js,
    /gadgets/files/container/../../js/rpc.js?c=1&debug=1,
    /gadgets/files/container/../../js/pubsub.js?c=1&debug=1,
    /mum/js/com/ibm/mm/enabler/opensocial.js
  2. A partir do prompt de comandos, vá para a pasta MashupCenter_install_root/Config e insira config.bat update-was-config. Essa tarefa permite que o Mashup Center autoinicialize o servidor Shindig a partir contexto Web raiz.

Siga os seguintes passos para adicionar os dispositivos OpenSocial à paleta do Mashup Center:

  1. Implemente o sampleGadgets.war no servidor Mashup Center WebSphere Application Server usando a seguinte raiz de contexto: /sampleGadgets. Esse arquivo WAR contém os widgets e os dispositivos que você usa no cenário de amostra descrito mais adiante neste artigo.
  2. Copie o catalog_os.xml para MashupCenter_install_root/mm/config/. Esse arquivo contém outras amostras de dispositivos para sua referência.
  3. Faça alterações no arquivo catalog_os.xml para refletir as URLs de definição mm_OSGadget corretas, de acordo com o seu ambiente.

    OBSERVAÇÃO: O passo 1 assume que você está implementando dispositivos em uma webapp simples, que usa a porta 9080 e um contexto Web de /sampleGadgets/. Logo, a definição do widget se parece com isso:

    http://localhost:9080/sampleGadgets/osgPub.xml
  4. Salve as alterações.
  5. Localize a pasta MashupCenter_install_root/mm/config e edite o arquivo catalog_default.xml, adicionando uma tag <include catalog="os"/> logo abaixo do elemento <resource-type>, por exemplo:

    <?xml version="1.0" encoding="UTF-8"?><catalog id="default" unique-name="optional_name"><resource-type>Catalog</resource-type><include catalog="os"/><category name="Demo">......
  6. A partir do prompt de comandos, vá para a pasta MashupCenter_install_root/config e insira config.bat update-was-config.
  7. Reinicie o Mashup Center. Efetue o login e altere para o modo de edição. Agora, você vê a categoria OpenSocial na paleta.

Agora que todos os passos nessa seção foram concluídos, você está pronto para arrastar dispositivos OpenSocial e iWidgets para a tela do Mashup Center para criar páginas.

Cenário de amostra

Esse cenário de amostra fornece um simples exemplo de como iWidgets e widgets OpenSocial interoperam para enviar e receber números aleatórios.

Siga os seguintes passos:

  1. Crie uma página, como exibido na figura 1. Selecione Welcome e, a seguir, selecione Create a New Page.
    Figura 1. Criando uma nova página
  2. No modo de edição, abra a categoria OpenSocial na paleta e arraste os widgets iWidget Publisher e iWidget Subscriber para a página.
  3. No iWidget Subscriber, clique no botão Subscribe. Esta ação permite que o iWidget Subscriber escute o iWidget Publisher em um canal de evento específico, chamado random-number (número aleatório).
  4. No iWidget Publisher, clique em Publish a random number. Essa ação ativa um evento que manda um número aleatório para o canal random-number. Uma vez que o iWidget Subscriber assinou este canal, ele recebe o número e o exibe.
  5. Agora, volte à categoria OpenSocial na paleta e arraste os dispositivos OpenSocial Publisher e OpenSocial Subscriber para a página. Esses dois dispositivos publicam e assinam do mesmo modo que os iWidgets. Ambos os subscribers, iWidget e dispositivo OpenSocial, podem receber o mesmo número aleatório enviado tanto do OpenSocial Publisher, quanto do iWidget Publisher. O caso de teste, exibido na figura 2, demonstra como o Mashup Center suporta a interoperabilidade entre iWidgets e dispositivos OpenSocial.
    Figura 2. Enviando e recebendo números aleatórios
  6. Para salvar sua página, clique no ícone de Salvar, no lado direito da paleta, como exibido na figura 3.
    Figura 3. Salvando sua página

Agora que você entende como os widgets interoperam na página, é possível dar um passo adiante e criar uma situação mais complexa. Por exemplo, é possível editar o catalog_os.xml e adicionar os seus próprios iWidgets e dispositivos OpenSocial. Também é possível apontar para componentes existentes no catálogo OpenSocial para experimentar um tipo diferente de interoperabilidade entre estes componentes Web 2.0. Nesses cenários, lembre-se de interromper o Mashup Center, caso ele esteja em execução, e, a seguir, inserir config.bat update-was-config, assim a categoria OpenSocial é atualizada.

Outro aspecto importante a ser observado no cenário de exemplo é que os componentes Web 2.0 comunicam-se implicitamente. Os iWidgets e os dispositivos OpenSocial têm que publicar e assinar no mesmo canal especificado e pré-definido. Desenvolvedores de iWidget e OpenSocial necessitam chamar somente as APIs regulares de eventos e pubsub para cada tipo de componente, e a paleta do Mashup Center deve ser capaz de lidar com a comunicação entre eles.

Como exibido no exemplo anterior, os iWidgets usam as seguintes APIs iWidget para publicar e assinar.

  • com.ibm.mashups.iwidget.services.ServiceManager.getService("eventService").publishEvent("random-number", message);
  • com.ibm.mashups.iwidget.services.ServiceManager.getService("eventService").subscribeEvent("random-number",null,this.updateMessage);

Para dispositivos OpenSocial, é possível usar as seguintes APIs pubsub regulares:

  • gadgets.pubsub.publish("random-number", message);
  • gadgets.pubsub.subscribe("random-number", callback);

Agora você entende como o Mashup Center permite a interoperação e a comunicação de iWidgets e dispositivos OpenSocial.


Conclusão

Este artigo demonstra como o IBM Mashup Center pode usar outros modelos de componentes, como, por exemplo, os dispositivos OpenSocial. Usuários podem começar a experimentar com diferentes modelos de componente para aprender a melhor maneira de usá-los. A IBM continua trabalhando com as comunidades abertas, como a OpenAjax Alliance e a OpenSocial Foundation, para adiantar a indústria através da promoção das necessidades corporativas, interoperabilidade e opção do cliente.


Agradecimentos

O autor gostaria de agradecer a Mark Weitzel, Jon Ferraiolo, Anna G. O'Neal e Andy Smith por revisarem o artigo e providenciarem informações de grande valor.


Download

NomeTamanhoMétodo de download
sampleGadgets.war4.57KBHTTP

Informações sobre métodos de download

Recursos

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Lotus
ArticleID=471434
ArticleTitle=IBM Mashup Center: Interoperabilidade OpenSocial
publish-date=05302014