Hello again, 3270: Acesso a aplicativos z/OS por meio do iPhone

As novas tecnologias e a proliferação de dispositivos wireless inteligentes não mudaram a realidade que os aplicativos executados em z/OS® continuam a ser a espinha dorsal de muitas organizações. Mas só porque um aplicativo é mais antigo isso não significa que ele precise ter essa aparência ou ser difícil de acessar. Este artigo descreve como aproveitar a Arquitetura Orientada a Serviços para cruzar esse abismo entre gerações e acessar um aplicativo z/OS a partir de um iPhone. Este exemplo envolve a criação de um serviço da Web CICS® que é invocado por um iPhone usando conceitos da Web 2.0 para acessar um aplicativo demo CICS/COBOL. Incluir o Google Maps torna a interface do iPhone com o aplicativo de mainframe ainda mais atraente. Este conteúdo é parte do IBM WebSphere Developer Technical Journal.

Reginaldo Barosa, Executive IT Specialist, WSO2 Inc

Author photoReginaldo W. Barosa é Executivo IBM e Especialista em TI. Ele fornece suporte a vendas, ajudando os clientes com soluções de modernização corporativa e ferramentas de desenvolvimento, como o Rational Developer for System z. Antes de começar a trabalhar na IBM dos EUA há mais de nove anos, Reginaldo trabalhou na IBM Brasil por 27 anos. Ele é coautor de IBM Redbooks e escreveu dois livros, além de outros artigos e tutoriais para o IBM developerWorks. Ele é formado em engenharia elétrica pelo Instituto Mauá de Tecnologia, de São Paulo, Brasil


nível de autor Profissional do
        developerWorks

11/Nov/2009

Introdução

Recentemente eu estava no metrô de Boston e notei o grande número de pessoas que usavam algum tipo de smartphone. Alguns jogavam, outros estavam conectados à Internet e outros faziam outras coisas com seus dispositivos móveis. Embora atualmente se dê muita atenção e se quebre muito a cabeça para unir esses dispositivos eletrônicos por meio dos aplicativos mais recentes, ainda é preciso olhar para trás e criar uma ligação que permita trazer os aplicativos z/OS existentes para esses dispositivos.

Este artigo mostrará como é fácil criar um aplicativo da Web 2.0 que reutiliza um aplicativo existente do z/OS utilizando os produtos de software IBM® Rational®. Seguindo os conceitos demonstrados aqui, será possível criar um cliente da Web 2.0 que invoca um aplicativo CICS/COBOL executado em um mainframe System z, transformado em serviços da Web SOAP. Embora o exemplo neste artigo use COBOL e CICS, os mesmos princípios e tecnologia podem ser aplicados a PL/I ou IMS, RPG com System i, além de SOAP ou serviços da Web RESTful.

Este artigo descreve como criar a parte Web 2.0 deste cenário. Contudo, todo o aplicativo de amostra que resulta dessas etapas está incluído no download de arquivo para download. Esse código de amostra foi testado usando o Apple iPhone. Teste-o também com outros smartphones com navegadores que suportem JavaScript™, como Apple Safari, Microsoft® Internet Explorer, Mozilla Firefox, Opera MinI e outros.


Antes e depois

Antes de vermos como criar um aplicativo da Web 2.0 que pode acessar um aplicativo de mainframe, vamos dar uma rápida olhada no "antes" (o aplicativo z/OS) e no "depois" (o aplicativo da Web 2.0) para vermos onde começaremos e para onde vamos.

O cenário usado neste artigo supõe que você disponha de um aplicativo CICS/COBOL existente. O aplicativo de amostra descrito aqui acessará um simples aplicativo demo IBM que recupera informações fictícias de clientes.

Veja um demo do inteiro processo descrito neste artigo no YouTube.

A Figura 1 mostra a tradicional tela 3270 (o “antes”) para o aplicativo demo Client Inquiry, que mostra dados recuperados de um conjunto de dados VSAM. Nesse aplicativo típico, o usuário insere um número de cliente válido e depois pressiona Enter. Os dados recuperados de um conjunto de dados VSAM são usados para preencher os campos no painel 3270.

Figura 1. Interface de mapa 3270 do aplicativo COBOL/CICS existente
Figure 1. Existing COBOL/CICS application 3270 map interface

A Figura 2 mostra a arquitetura de alto nível desse aplicativo. Basicamente, há dois componentes:

  • O componente do cliente COBOL que exibe o mapa 3270.
  • O componente do servidor COBOL que acessa o conjunto de dados VSAM.

A comunicação entre o cliente e os componentes do servidor é obtida por meio de CICS COMMAREA.

Figura 2. Aplicativo COBOL/CICS existente
Figure 2. Existing COBOL/CICS application

O objetivo, então, é acessar os dados backend por meio desse aplicativo CICS/COBOL executado em z/OS, mas fazer isso usando o iPhone. O aplicativo CICS/COBOL real não será alterado, mas visto que queremos acessá-lo por meio do iPhone, teremos a oportunidade de criar uma interface muito melhor para ele. Para lhe dar uma ideia dos tipos de coisas que podemos fazer para melhorar a interface, o aplicativo de amostra aqui usa o popular serviço da Web Google Maps para esse fim.

Veja a nova interface em ação no sistema de demo ou em um emulador de iPhone. Use números de Cliente válidos de 1 a 9.

A Figura 3 mostra a nova interface (o “depois”) conforme exibida no iPhone. O aplicativo z/OS retornou informações de endereço do cliente, mas o Google Maps vai um passo além ao literalmente mostrar-lhe onde o cliente se encontra. Isso, é claro, seria impossível na tela 3270.

Figura 3. Nova interface do aplicativo z/OS usando o iPhone
Figure 3. The new interface for the z/OS application using an iPhone

Comece com bom código

Antes de começar qualquer implementação, é preciso se certificar de que os pedaços com os quais se está começando funcionam bem. Nesse caso, é bom se familiarizar com a operação do aplicativo de mainframe, pelo menos no que se refere aos resultados e ao desempenho. Dessa forma, será possível saber se os resultados estão corretos e verificar os tempos de resposta.

Uma das vantagens gerais dos aplicativos 3270 CICS é seu excelente tempo de resposta. Contudo, às vezes uma nova tecnologia pode ativar uma ótima solução, mas o tempo de resposta ruim às vezes se torna um empecilho à sua implementação. Essa deve ser sempre e preocupação primária. Para medir o tempo de resposta do aplicativo z/OS, foi usada uma rotina simples para começar a contar quando o serviço da Web CICS foi invocado e parar quando o dado foi retornado. Felizmente, o tempo de resposta foi menos de meio segundo, o que alivia a preocupação com o aplicativo demo. (Toda análise XML neste exemplo foi feita em COBOL.)

A Figura 4 mostra o tempo de resposta para invocar o aplicativo demo CICS COBOL a partir do cliente de Web 2.0. Nesse exemplo, o tempo de resposta para essa invocação de serviço foi de 0,140 segundo. Impressionante! (Confirme isso clicando no ícone de marca de seleção verde na interface da Web 2.0.)

Figura 4. Tempo de resposta para invocar o serviço da Web SOAP CICS
Figure 4. Response time to invoke the SOAP CICS Web service

Não se esqueça de que os tempos necessários para carregar o cliente HTML e o JavaScript não foram considerados nesse exemplo e esse ponto ainda precisa ser ajustado. Há modos de compactar os dados enviados para o navegador a fim de que tenham um desempenho melhor, mas a medição mais importante nesse caso foi o tempo de resposta total para chegar ao z/OS, executar a análise XML de SOAP, invocar o aplicativo CICS/COBOL, obter os dados VSAM e depois retornar ao Web client.


Criando um aplicativo de Web 2.0 para um aplicativo CICS/COBOL do iPhone

As seções a seguir descrevem o processo de criação do aplicativo da Web 2.0 de amostra incluído neste artigo. O processo é composto de três etapas principais:

  1. Criação do provedor de serviços da Web CICS
  2. Criação do solicitante de serviços da Web 2.0 (interface com o usuário)
  3. Extensão do código da Web 2.0 para invocar o serviço Google Maps

Para acompanhar as etapas reais descritas aqui, será preciso acessar IBM Rational Developer para System z com EGL V7.5 (ou posterior). Se estiver disponível apenas o IBM Rational Business Developer ou outro produto de software Rational que contenha EGL, siga as etapas da seção 2 em diante.

Esse artigo supõe familiaridade com o Eclipse e com o conceito de perspectivas e visualizações. Os produtos Rational mencionados acima incluem tutoriais para ajudá-lo a se familiarizar com os termos e conceitos relacionados, de modo que não é preciso muita experiência para acompanhar a explicação. Um entendimento geral da terminologia de mainframes e de conceitos da Web 2.0 também ajuda.


1. Criação do provedor de serviços da Web CICS

Nessa primeira etapa, o programa cliente COBOL e as telas de mapa 3270 (mostrados na Figura 2) são eliminados e o código do servidor CICS/COBOL é colocado em um wrapper como serviço CICS e representado pela WSDL (Web Serviced Description Language). Essa etapa é fundamental na transformação do seu aplicativo. A Figura 5 mostra a topologia dessa transformação.

Figura 5. Eliminando o mapa 3270 e o cliente COBOL para WSDL
Figure 5. Eliminating 3270 map and COBOL client for WSDL

Essa é a parte mais simples do processo inteiro, e é facilitada ainda mais pelo uso de utilitários CICS. Se usarmos o Rational Developer para System z (daqui em diante apenas Rational Developer), fica bem fácil testar o serviço criado. Há muitos tutoriais que explicam como executar essa tarefa, de modo que as etapas detalhadas não serão repetidas aqui. Basicamente, porém, deve-se aplicar os assistentes do Rational Developer Enterprise Service ao programa CICS/COBOL e eles gerarão o serviço da Web CICS SOAP e a WSDL. O código também pode ser implementado no CICS usando as facilidades do Rational Developer.

A Figura 6 mostra o CICS DFHCOMMAREA usado para invocar o programa CICS/COBOL. O valor do número de cliente inserido pelo usuário é movido para o campo CustNo. Os dados recuperados do conjunto de dados VSAM são enviados de volta para os campos restantes.

Figura 6. Programa DFHCOMMAREA CICS/COBOL
Figure 6. CICS/COBOL program DFHCOMMAREA

Lembre-se de que o serviço da Web é criado, implementado e testado usando o Rational Developer sem afetar o aplicativo CICS/COBOL existente.

A Figura 7 mostra a WSDL gerada pelo Rational Developer. A mensagem de entrada é CustNo e a de saída, todo o DFHCOMMAREA.

Figura 7. WSDL gerada pelos assistentes do Rational Developer
Figure 7. WSDL generated by Rational Developer wizards

O código gerado é implementado no seu CICS usando o Rational Developer. Até mesmo os novos recursos CICS que precisam ser configurados no CICS podem ser criados usando o Rational Developer V7.5 ou posterior. Uma nova perspectiva CICS Explorer torna essa tarefa muito simples.

Após as compilações no z/OS e a criação dos recursos CICS, teste os serviços CICS criados. Para os fins deste artigo, esse serviço já foi implementado no seu sistema demo z/OS e é possível usá-lo por meio do Rational Developer Web Services Explorer. O Web Services Explorer usa um navegador da Web com interface para lhe permitir testar uma chamada simples da Web. No Web Services Explorer, indique esta URL: http://zserveros.demos.ibm.com:9046/wdz/LAB3POT para garantir que o serviço CICS esteja em operação como deve (Figura 8):

  1. Dê um clique com o botão direito do mouse em CUSTINQ.wsdl na pasta Generation/Targets e selecione Web Services => Test with Web Services Explorer.
  2. Clique em LAB3POTOperation, digite um número de cliente válido (por exemplo, 4) e por fim clique em Go. Essa é a WSDL que será usada para a criação da página da Web 2.0.

É preciso fazer um teste bem-sucedido antes de poder continuar. Nesse exemplo, o serviço CICS é implementado em um mainframe que monitora a porta 9046. Confirme se não há firewalls bloqueando sua conexão. Se não forem recebidos dados ou houver outros erros, corrija o problema e teste novamente antes de prosseguir. Se o sistema CICS estiver desativado (por exemplo, para manutenção), será preciso tentar em outra ocasião.

Figura 8. Invoque o serviço da Web CICS com o Web Services Explorer
Figure 8. Invoke the CICS Web service with the Web Services Explorer

Usando o aplicativo de exemplo

Descrever o processo de criação da WSDL e de outros componentes está fora do escopo deste artigo. Para obter detalhes sobre como executar essa atividade, consulte o artigo Wrap existing COBOL programs as Web Services with IBM Rational Developer.

Contudo, é possível agilizar essa atividade se o Rational Developer estiver instalado importando o arquivo Project Interchange e os ativos relacionados, incluindo a WSDL, incluída neste artigo. (Consulte Sobre o download para obter informações sobre materiais de amostra fornecidos com este artigo.) Para importar o projeto para o Rational Developer:

  1. Faça o download do arquivo zip que acompanha este artigo e extraia o conteúdo.
  2. Abra o Rational Developer apontando para uma área de trabalho vazia.
  3. Selecione File => Import... => Other => Project Interchange => Next.
  4. Aponte para o arquivo CICS_Services_Project.zip extraído, selecione All e clique em Finish.
  5. Abra a perspectiva Enterprise Service Tools para ver o que foi importado.

2. Criação do solicitante de serviços da Web 2.0 (interface com o usuário)

Agora, estamos prontos para criar a interface com o usuário usando os componentes Rich User Interface (Rich UI) para invocar o serviço CICS criado.

O

EGL versão 7.5.1 lhe fornece a habilidade de gerar JavaScript que é executado no navegador. Isso é importante porque torna a página da Web mais responsiva e fornece maior flexibilidade para que a experiência do usuário possa ir além de apenas enviar e receber uma página. Por exemplo, após o usuário clicar em um botão de opções, a lógica pode responder mudando o conteúdo de uma caixa de texto. A mudança ocorre rapidamente porque o JavaScript é executado localmente e, na maioria dos casos, só precisa recriar uma área da página.

Uma extensão do JavaScript do lado do cliente é o Ajax (Asynchronous JavaScript and XML), uma tecnologia que ativa a invocação do tempo de execução do código remoto e a subsequente atualização de uma parte da página da Web, mesmo que o usuário continue trabalhando em outra parte da página. Após o usuário selecionar uma ordem de compra em uma caixa de listagem, por exemplo, a lógica de JavaScript pode solicitar a transmissão de detalhes de item de pedido a partir do servidor da Web remoto e então colocar esses detalhes em uma tabela exibida para o usuário. Desse modo, o aplicativo pode acessar o conteúdo do servidor, mas ele poupa tempo selecionando -- no tempo de execução -- que conteúdo será transmitido.

É possível gravar aplicativos Rich UI que usam essa tecnologia usando a sintaxe EGL. Usando o Rational Developer com EGL, crie um projeto Rich UI EGL, importe a WSDL a ser usada, crie a interface Rich UI e a lógica EGL para invocar o serviço da Web SOAP criado na seção 1. A sequência de tarefas é a seguinte:

  1. Crie o projeto Rich UI EGL e importe a WSDL
  2. Crie o manipulador da Rich UI EGL
  3. Crie os widgets EGL Rich UI
  4. Crie o código EGL para consumir o Serviço CICS
  5. Complete o código EGL Rich UI para invocar o serviço CICS
  6. Teste o aplicativo Rich UI
  7. Meça o tempo de resposta da chamada de serviço

a. Crie o projeto Rich UI EGL e importe a WSDL

Usando o Rational Developer e a perspectiva EGL Rich UI, crie um projeto Rich UI e importe o WSDL criado (ou baixado por download) na seção 1. Para criar o projeto EGL Rich UI:

  1. Selecione File => New => Other... => EGL => EGL Project => Next.
  2. Dê um nome significativo ao projeto, selecione Rich UI Project e clique em Finish.
  3. Clique em Yes para ir para a perspectiva Rich UI.

Para importar a WSDL:

  1. Dê um clique com o botão direito do mouse sobre a pasta EGLSource e selecione Import... => General => File System => Next.
  2. Navegue até o arquivo WSDL (deve estar na sua Área de Trabalho sob seu projeto de serviço e na pasta Generation/Targets) ou aponte para o arquivo WSDL fornecido (CUSTINQ.wsdl) e clique em Finish.

A Figura 9 mostra um projeto EGL Rich UI criado com a WSDL importada. A WSDL deve estar na pasta EGLSource.

Figura 9. Projeto EGL Rich UI com WSDL importada
Figure 9. EGL Rich UI project with the WSDL imported

b. Crie o manipulador da Rich UI EGL

Em EGL, um manipulador é um tipo especial de programa com funções amarradas a eventos específicos que ocorrem quando alguém usa uma interface. Um Manipulador Rich UI tem as seguintes propriedades:

  • initialUI: Especifica um conjunto de controles (widgets) que compõe a tela inicial da página da Web.
  • onConstructionFunction: Especifica uma função para chamar quando a interface for criada.
  • cssFile: Especifica uma CSS (folha de estilo em cascata) para atribuir ao arquivo. Por padrão, o EGL cria a CSS com o mesmo nome do manipulador Rich UI e define alguns estilos básicos. Para customizar a aparência da página, é possível modificar esse arquivo ou atribuir um diferente à propriedade cssFile.

Cada programa EGL Rich UI tem um ou mais manipuladores. Esse exemplo tem apenas um manipulador pela causa da simplicidade. Uma CSS que se ajusta bem ao iPhone também é fornecida nos materiais de download deste artigo.

Para criar o manipulador Rich UI:

  1. Dê um clique com o botão direito do mouse na pasta EGLSource e selecione New => Rich UI Handler.
  2. Dê o nome de handlers ao pacote, dê um nome ao arquivo de origem EGL CallCICS e clique em Finish. O editor visual será aberto com uma página em branco. Quando clicamos na guia Source, obtemos o código de origem do Rich UI EGL.
  3. Dê um clique com o botão direito do mouse na pasta css sob WebContent e selecione Import... => General => File System => Next. Aponte para o arquivo fornecido iPhoneUI.css e clique em Finish. (Talvez seja preciso atualizar para que o arquivo .css importado seja exibido na sua pasta de projeto.)
  4. Usando o editor CallCICS.egl, clique na guia Source e mude a propriedade cssFile para apontar para o iPhoneUI.css, como mostrado na Figura 8.
  5. Salve as mudanças.

A Figura 10 mostra o código modificado EGL, mas sem os widgets criados. Mais tarde será preciso acrescentar os controles (como título, campos de entrada, botões, e assim por diante).

Figura 10. Código EGL usando a CSS iPhoneUI
Figure 10. EGL code using iPhoneUI cascade style sheet

c.Crie os widgets EGL Rich UI

É fácil criar os componentes Rich UI usando a perspectiva EGL Rich UI e o editor visual de arrastar e soltar. Não deixe de gerar periodicamente o código EGL e verificar os componentes gerados. O tutorial Building Web 2.0 applications using EGL explica as técnicas básicas para fazer isso. Como opção, importe esse código a partir do material de download incluído.

Para esse exemplo, criaremos:

  • Um campo de entrada para o número do cliente.
  • Seis campos não modificáveis nos quais serão carregados os dados retornados do CICS.
  • Um botão que invocará o serviço da Web CICS.

No EGL Rich UI:

  • O campo de entrada é um widget chamado com.ibm.egl.rui.widgets.TextField
  • O campo não-modificado é um widget chamado com.ibm.egl.rui.widgets.TextLabel
  • O botão é um widget chamado com.ibm.egl.rui.widgets.Button.

Use qualquer editor de teste do Windows® para abrir o arquivo CallCICS_incomplete.egl fornecido. Copie e cole o conteúdo desse arquivo no arquivo CallCICS.egl que está sendo editado. Isso acelerará a criação do arquivo RichUI.

É possível editar simultaneamente o mesmo código EGL usando o Visual Rich UI Editor e o editor padrão EGL Rich UI. Basta clicar com o botão direito do mouse no código EGL e selecionar Open with => EGL Rich UI Editor para editar com o editor visual. Repita essa operação, mas usando Open with => EGL Editor para o editor padrão. Usando os recursos do Eclipse, é possível reorganizar a tela, como mostrado na Figura 11.

Figura 11. Código EGL Rich UI usando dois editores simultaneamente
Figure 11. EGL Rich UI code using two editors simultaneously

d. Crie o código EGL para consumir o serviço CICS

A invocação de serviço no Rich UI sempre é assíncrona, o que significa que o solicitante (o client Rich UI) continua em execução sem aguardar uma resposta do serviço. O usuário ainda pode interagir com a interface com o usuário enquanto o manipulador Rich UI aguarda o serviço responder. Após a chamada, o serviço executa algumas tarefas e, na maioria dos casos, responde ao tempo de execução do EGL, o qual, por sua vez, invoca uma função Rich UI codificada, chamada de função de retorno de chamada.

Para invocar um serviço a partir do Rich UI, é preciso criar uma parte da interface EGL que inclua propriedades indicativas de como o serviço é acessado no tempo de execução. É possível criar uma variável com base na parte da interface e usá-la em uma instrução de chamada. A instrução de chamada inclui os detalhes necessários para que o tempo de execução EGL emita um retorno de chamada.

Mais uma vez, usando o Rational Developer com EGL, precisamos criar as interfaces EGL que invocam o serviço CICS a partir da WSDL gerada:

  1. Usando a perspectiva EGL Rich UI, clique com o botão direito do mouse em CUSTINQ.WSDL e selecione EGL Services => Create EGL Client Interface. Confirme se Create Web Services Client Bindings está selecionado e clique em Next duas vezes.
  2. Selecione Update all existing bindings e clique em Finish.
  3. O pacote files.target (o nome padrão) será criado e o editor EGL mostrará que o código de EGL CUSTINQ.egl foi criado. Não são necessárias mudanças. O EGL gerado é mostrado na Listagem 1.
  4. Dois outros pacotes EGL são criados com variáveis que mapeiam as mensagens de entrada e de saída. Lembre-se de que a mensagem de entrada é o número de cliente (CustNo) e a mensagem de saída é o inteiro CICS DFHCOMMAREA.
Listagem 1. Serviço EGL criado a partir da WSDL
package files.target;

//@webBinding{wsdlLocation="CUSTINQ.wsdl", wsdlPort = "CUSTINQPort", 
	wsdlService = "LAB3POTService"}

interface CUSTINQPortType{@xml {name="CUSTINQPortType", namespace="file://target.files"}}

function LAB3POTOperation(DFHCOMMAREA com.LAB3POTI.www.schemas.LAB3POTIInterface.
	DFHCOMMAREA in) returns(com.LAB3POTO.www.schemas.LAB3POTOInterface.DFHCOMMAREA)
	{@xml {name="LAB3POTOperation"}};
	end

A Figura 12 mostra o código EGL gerado a partir da sequência de diálogo a fim de criar a interface do cliente EGL.

Figura 12. Projeto EGL Rich UI com código EGL gerado
Figure 12. EGL Rich UI project with EGL code generated

e. Complete o código EGL Rich UI para invocar o serviço CICS

Ainda será preciso associar o evento no Rich UI que invocará o serviço CICS. Nesse cenário, pode-se associar o botão Rich UI à invocação de serviço. Quando o botão é clicado, o código EGL invoca o serviço CICS.

Isso é feito usando um evento EGL chamado onClick. Sob a função findCustomer, uma variável chamada srv se liga ao serviço CICS e à porta. O dado é designado do Rich UI para o registro EGL, é passado como mensagem de entrada e chama o serviço CICS.

Essa é uma chamada assíncrona. Quando o serviço retorna sem erros, a função getCustomerDataCallback é executada. Quando o serviço retorna uma exceção, outra função chamada handleGetCustomersError é executada (Figura 13).

Figura 13. Código EGL para invocar a chamada de serviço da Web e processar os resultados
Figure 13. EGL code to invoke the Web Service call and process the results

Figure 13b. EGL code to invoke the Web Service call and process the results

Veja CallCICS_complete_noServiceMonitor.egl no material de download para encontrar o código completo.

f. Teste o aplicativo Rich UI

O código está pronto para ser testado. A Figura 14 mostra o modo de visualização ao testar esse código EGL Rich UI. Para testar o código:

  1. Abra callCICS.egl usando o EGL Rich UI Editor.
  2. Clique na guia Preview, digite um valor de número de cliente válido (como 4) e clique em Call CICS Service. O serviço CICS será invocado e os resultados devem ser exibidos.
Figura 14. Testando a interface EGL Rich UI
Figure 14. Testing the EGL Rich UI interface

Tente o seguinte com outros valores de número de cliente, de 1 a 9. Notou o tempo de resposta? Notou também que não há servidor de aplicativos em execução? A chamada é feita a partir do Rational Developer para o CICS que fornece um proxy Ajax, evitando qualquer requisito de servidor de aplicativos. Ao implementar esse código no WebSphere Application Server, esse proxy também é implementado.

g. Meça o tempo de resposta da chamada de serviço

É possível medir o tempo de resposta modificando um dos programas EGL fornecidos. Abra o CallCICS.egl em um editor de texto. Antes da instrução function initialization (), adicione a linha de código mostrada na Figura 15. (Note que essa linha termina em chaves { } não parênteses ().)

Também é necessário importar o arquivo Project Interchange:

  1. Selecione File => Other => Project Interchange => Next e aponte para com.ibm.service.monitor.zip. Clique em Select All e depois em Finish. Não há problema em sobrepor projetos já existentes.
  2. Ajuste as propriedades do projeto EGL Build Path para apontarem para esse novo projeto. Clique com o botão direito do mouse no seu projeto EGL RichUI e selecione Properties => EGL Build Path. Selecione com.ibm.service.monitor e clique em OK.
  3. Use o recurso Organize Imports ao editar o código (também é possível usar Ctrl + Shift + O na página do editor).
  4. Use Project => Clean => Clean all projects para corrigir possíveis erros. Não deve haver erros na visualização Problems. (Não há problema se houver avisos.)

Ao acrescentar esse código ao manipulador EGL Rich UI, aparece uma tela que monitora a invocação de serviço da Web.

Figura 15. Código EGL que monitora a chamada de serviço
Figure 15. EGL code that to monitor the service call

Execute de novo os testes de visualização e clique no ícone de seta verde no canto superior esquerdo do painel. A Figura 16 mostra esse monitor de tela em ação. Nesse exemplo, você notará que levou 265 ms de tempo de resposta para invocar o serviço da Web CICS e receber uma resposta. Isso é realmente impressionante, levando em conta que se está: enviando dados XML pela linha, que é analisada pelo adaptador COBOL, que invoca o código CICS/COBOL e retorna XML. Clique na guia Request para ver o serviço solicitado.

Figura 16. Medindo o tempo de resposta da chamada de serviço
Figure 16. Measuring the service call response time

Agora, temos um demo de uma invocação de serviço da Web CICS -- mas ainda dá para melhorar esse código. Visto que estamos usando a Web 2.0, é possível aprimorar o aplicativo com mashups. Para os fins deste exemplo, usaremos o endereço fornecido pelo programa CICS, o enviaremos para o serviço Google Maps e então exibiremos graficamente a localização do cliente em um Google Map. Tudo isso é mostrado na seção 3.


3. Extensão do código da Web 2.0 para invocar o serviço Google Maps

Uma das vantagens de usar a Web 2.0 é que é fácil integrar o EGL Rich UI com os serviços da Web existentes. Um de tais serviços comumente usados é o Google Maps, que qualquer pessoa pode usar pela Web. As principais tarefas para executar essa integração são:

  1. Importe o projeto com a interface do Google Maps
  2. Modifique o Rich UI para acrescentar mais controles e invocar o serviço Google Maps
  3. Teste usando um navegador padrão da Web
  4. Teste usando um emulador de iPhone
  5. Implemente o código em um servidor de aplicativos
  6. Modifique o HTML para evitar o redimensionamento do iPhone
  7. Implemente e teste o código usando o WebSphere Application Server
  8. Implemente o Rich UI no WebSphere Application Server
  9. Execute o código que foi implementado no System z

a. Importe o projeto com a interface do Google Maps

É preciso importar o projeto com.ibm.egl.misc para a área de trabalho. Se já estiver carregado na sua área de trabalho, pule para a etapa 3; se não:

  1. Selecione File => Import... => Other => Project Interchange e aponte para o arquivo com.ibm.egl.misc.zip fornecido.
  2. Select All e clique em Finish para importar esse projeto. Não há problema em sobrepor projetos existentes.
  3. Dê um clique com o botão direito do mouse no projeto Rich UI e mude a propriedade EGL Build Path, selecionando o projeto com.ibm.egl.misc importado. Isso lhe possibilita usar o código EGL que está incluído nesse projeto.

Also note that we have adjusted the size of the map to fit in the iPhone, this size can be modified if necessary changing the attributes located in GoogleMap.js under com.ibm.egl.misc.

b. Modifique o Rich UI para acrescentar mais controles e invocar o serviço Google Maps

É preciso mudar os controles Rich UI e criar outro botão para invocar o serviço Google Maps quando pressionado. Também é preciso acrescentar um controle para exibir o mapa. Usando a função Project Interchange, importe o arquivo CICS_Services+RichUI+Google.zip fornecido.

Além dos novos controles para o Google Maps, também é preciso definir uma nova variável EGL chamada googleMap a ser definida como ExternalType GoogleMap (Figura 17). Esse código EGL é fornecido como parte do projeto com.ibm.egl.misc.

Figura 17. Código EGL para invocar o serviço Google Map
Figure 17. EGL code to invoke the Google Map service

Após importar o arquivo Project Interchange, a solução para invocar o serviço Google Maps é localizada no projeto LAB3_EGL_RichUI. Lembre-se de executar Project => Clean => Clean all projects após importar. Nenhum erro deve estar alistado na visualização Problems (exceto avisos).

A Figura 18 mostra como o serviço Google Map é invocado quando o botão Google Map é clicado. O botão invoca a função showMap, que, por sua vez, invoca functionshowAddresses definida no pacote google.map no projeto com.ibm.egl.misc.

Figura 18. Quando o botão é clicado, ele invoca a função showMap EGL
Figure 18. When button is clicked invokes showMap EGL function

Figure 18a. When button is clicked invokes showMap EGL function

c. Teste usando um navegador padrão da Web

Para testar o aplicativo usando um navegador padrão da Web:

  1. Dê um clique com o botão direito do mouse em CallCICS.egl e selecione Open With => EGL Rich UI Editor
  2. Clique na guia Preview para se certificar de que o aplicativo esteja sendo executado adequadamente.
  3. Para exibir o Google Map, clique no botão verde Google Map.
  4. Nessa guia, clique no ícone de globo (Figura 19) para exibir a página da Web no navegador externo. O aplicativo exibirá seu navegador padrão da Web.
  5. Copie o endereço que foi retornado do aplicativo CICS/COBOL para a área de transferência do Windows e cole-o no seu navegador. Será preciso colá-lo depois no emulador do iPhone. Um exemplo desse endereço gerado é: http://localhost:5590/LAB3_EGL_RichUI/handlers/CallCICS.html?contextKey=3, embora o seu seja diferente, dependendo das suas configurações, do nome do projeto, e assim por diante.
  6. Teste o aplicativo algumas vezes mais com esse navegador usando valores de número de cliente válidos. Não feche o navegador.
Figura 19. Visualização usando um navegador externo
Figure 19. Showing the preview using an external browser

d. Teste usando um emulador de iPhone

Visto que o objetivo aqui é mostrar o aplicativo executado por meio do iPhone, é possível demonstrar esses resultados usando um navegador da Web executando um emulador de iPhone. Há vários emuladores de iPhone disponíveis na Web. Para usar um emulador:

  1. Selecione um emulador de iPhone. Para os fins deste artigo, acesse http://www.testiphone.com/.
  2. Cole o endereço http mostrado no navegador externo na linha de entrada do emulador e pressione Enter. O resultado é uma aparência mais representativa de um iPhone real (Figura 20).
  3. Teste o aplicativo novamente usando números de cliente válidos, use o botão Google Map e observe o tempo de resposta.
Figura 20. Simulador de iPhone
Figure 20. iPhone simulator

e. Implemente o código em um servidor de aplicativos

Nesse ponto, está tudo pronto para implementar o EGL Rich UI no seu servidor de aplicativos. O Rational Developer suporta a publicação do Rich UI no WebSphere Application Server ou no Apache Tomcat. As etapas mostradas aqui são para o WebSphere Application Server, mas as etapas para o Tomcat seriam similares:

  1. Em qualquer perspectiva do Rational Developer, navegue até Window => Preferences => EGL => Rich UI. No menu suspenso Application Generation/Generation Mode, selecione Deployment e clique em OK. Isso forçará todas as partes usadas pelos aplicativos Rich UI na sua área de trabalho a serem regeneradas. Não deve haver erros na visualização de problemas (não há problemas se houver avisos).
  2. A partir da perspectiva EGL Rich UI, dê um clique com o botão direito do mouse em CallCICS.egl (sob o pacote de manipuladores) e selecione Deploy EGL Rich UI Application.
  3. Selecione WebSphere Application Server deployment => Next.
  4. Selecione New Web project e digite um nome para o projeto em Name, como LAB3.
  5. Selecione seu servidor de tempo de execução definido (WebSphere Application Server V6.1 ou V7) e clique em Finish. O código será implementado e um novo projeto da Web será criado. Uma caixa de diálogo (Figura 21) exibirá o HTML criado na pasta WebContent. Aqui, o arquivo criado se chama CallCICS-en_US.html.

Novamente não deve haver erros. Talvez seja preciso limpar os projetos gerados usando o processo Project => Clean.

Figura 21. Caixa de diálogo exibida quando o código é implementado
Figure 21. Dialog showed when code is deployed

f. Modifique o HTML para evitar o redimensionamento do iPhone

Nesse ponto, é possível publicar e testar o código executado no WebSphere Application Server. Se o aplicativo for executado em iPhone, a página ficará muito pequena. É possível usar o recurso de redimensionamento do iPhone, mas há uma técnica fácil que pode ser usada (provavelmente, há várias) para corrigir isso, e envolve acrescentar apenas uma linha de código ao HTML gerado:

  1. Faça uma cópia do código original antes de fazer essa modificação para preservá-lo. Clique com o botão direito do mouse em CallCICS-en_US.html (o arquivo HTML gerado) na pasta LAB3/WebContent, selecione Rename e mude o nome para CallCICS.html.
  2. Abra o arquivo renomeado com seu editor HTML e insira as linhas em negrito na Listagem 2 após as tags <html> e <-- begin-comment.
  3. Salve o código modificado.
Listagem 2. Linha a ser acrescentada ao arquivo html gerado
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www....
<html>
<head><meta name="viewport" content="width=320,
user-scalable=no"></head>
<!-- Generated at Fri Jul 31 14:56:52 EDT 2009 by EGL 1.0.0.v20090608_2230 -->
<title>CallCICS</title>

g. Implemente e teste o código usando o WebSphere Application Server

Supondo que o WebSphere Application Server esteja instalado no Rational Developer ou Rational Business Developer, basta clicar com o botão direito do mouse em CallCICS.html e selecionar Run As => Run on Server. Selecione WebSphere Application Server e clique em Finish.

Note agora que o número da porta que o WebSphere Application Server está monitorando é diferente daquele em testes anteriores. Por exemplo: http://localhost:9081/LAB3/CallCICS.html

Se estiver disponível um iPhone com conectividade Wi-Fi na mesma rede onde esse servidor de aplicativos está em execução, use o endereço IP do servidor de aplicativos em vez de localhost, por exemplo: http://192.168.1.105:9081/LAB3/CallCICS.html. Lembre-se de que o endereço faz distinção entre maiúsculas e minúsculas.

Aparecerá uma caixa de diálogo com a mensagem: O servidor de API do Google Maps rejeitou sua solicitação. Isso talvez ocorra porque a chave de API usada nesse site foi registrada para um Web site diferente. Essa mensagem significa que seu servidor não está registrado no servidor Google como nosso servidor demo está. Ignore a mensagem e clique em OK. (É possível pesquisar o Google Maps para obter instruções sobre como registrar um servidor para uso nesse serviço da Web.)

A Figura 22 mostra uma imagem de um iPhone. Note que a tela é exibida sem que a imagem precise ser redimensionada. Legal?

Figura 22. Foto tirada do iPhone executando o código Rich UI
Figure 22. Picture taken from iPhone running Rich UI code

h. Implemente o Rich UI no WebSphere Application Server

Por fim, execute seu código em um servidor fora do seu ambiente de desenvolvimento. Supondo que você tenha acesso a um WebSphere Application Server executado fora do seu ambiente de desenvolvimento:

  1. Usando o Rational Business Developer ou o Rational Developer para System z, selecione File => Export => Java EE => EAR file => Next. Visto que este exemplo usa o WebSphere Application Server, a caixa de diálogo de implementação criou um arquivo J2EE™ EAR. Se foi selecionado Tomcat, será exportado o arquivo WAR.
  2. Selecione o projeto EAR (LAB3EAR), o destino e clique em Finish. Isso criará um arquivo EAR chamado LAB3EAR.ear (também fornecido com este artigo).
  3. Feche qualquer Rational Developer em execução e abra o WebSphere Application Server como administrador.
  4. No console administrativo do WebSphere Application Server, expanda Applications => Install New Application => Local File System e navegue até onde o arquivo LAB3EAR.ear foi exportado. Clique em Next. A Figura 23 mostra essa sequência.
  5. Aceite todos os padrões e clique em Next. Aceite os padrões de novo e clique em Next e depois em Finish. O aplicativo será implementado, e deve-se salvar as configurações com o comando Save.
  6. Selecione Enterprise Applications => LAB3EAR e clique no botão Start. O aplicativo será iniciado e estamos prontos para começar a testar a partir do servidor.
  7. Para executar em um iPhone, aponte para esse servidor e use o endereço HTTP para executar o aplicativo para iPhone, por exemplo: http://192.168.1.105:9080/LAB3/CallCICS.html.
Figura 23. Instalando no arquivo EAR no WebSphere Application Server V6.1
Figure 23. Installing the EAR file in the WebSphere Application Server V6.1

i. Execute o código que foi implementado no System z

Aponte seu iPhone ou outro navegador para o aplicativo demo em: http://zserveros.demos.ibm.com:9080/iPhone/CICS-en_US.html. Esse código também contém um recurso de ajuda que pode ser acessado clicando no ícone de ponto de interrogação. Isso mostra a topologia usada (Figura 24). Nesse exemplo, o arquivo EAR foi implementado no WebSphere Application Server para z/OS V6.1 executado no mesmo LPAR no qual o aplicativo CICS/COBOL estava sendo executado.

Figura 24. Invocando os serviços da Web CICS a partir do iPhone
Figure 24. Invoking CICS Web services from iPhone

Resumo

O EGL Rich UI tem muitos benefícios em relação implementações de nível inferior (como JavaScript e Ajax). Entre eles, o EGL:

  • Reduz os custos de desenvolvimento, acelera o tempo de chegada ao mercado e ajuda a fornecer soluções de negócios baseadas na Web 2.0 com melhor qualidade, devido à maior produtividade e simplicidade envolvida.
  • Tem excelente desempenho com uma interface com o usuário sofisticada.
  • Tem curva de aprendizado menor e menores custos de treinamento; os desenvolvedores só precisam aprender uma linguagem (EGL) a fim de criar lógica de negócios e serviços backend, e interface com o usuário frontend.
  • Suporta múltiplos navegadores (basta escrever uma vez para executar nos navegadores mais populares).
  • Aumenta o valor e a vida de lógica de negócios confiável que reside no System z e em sistemas i ao ativar aplicativos que executam serviços transacionais dentro de aplicativos inovadores que melhoram a experiência e produtividade do usuário.
  • Integra de forma única as informações e processos corporativos com outras fontes de informações, dados e serviços por toda a empresa ou na Web para servir melhor aos usuários, clientes e parceiros (por meio de mashups).
  • Aproveita serviços verticais e emergentes do segmento de mercado baseados em SOA fornecidos por fornecedores e serviços gratuitos ou pagos (por exemplo, Google Charts, Google Maps, Xignite, e assim por diante).
  • Reduz as barreiras a qualificações avançadas e aproveita os desenvolvedores tradicionais orientados para negócios ao mesmo tempo em que fornece poderosas soluções de ponta para os negócios.

Sobre o download

Os materiais de download incluídos com este artigo contêm código que pode ser usado para implementar as ideias apresentadas aqui. Faça o download do arquivo iPhone_EGL_Assets.zip para uma unidade temporária do seu computador e descompacte-o. Em vez de criar todos os pedaços sozinho, é fornecido o código da solução de exemplo inteira, para que seja possível concentrar-se nos conceitos descritos. O arquivo de download inclui:

  • CICS_Services_Project.zip: Arquivo do Rational Developer exportado para o System z Project Interchange e que pode ser usado para testar o CICS.
  • CUSTINQ.wsdl: WSDL que invoca o serviço da Web CICS.
  • iPhoneUI.css: CSS (folha de estilo em cascata) para aplicativos da Web para iPhone.
  • CallCICS_Incomplete.egl: Código do EGL Rich UI que contém apenas os widgets, sem nenhuma lógica que invoque o serviço CICS.
  • CallCICS_complete_noServiceMonitor.egl: O código EGL necessário para a implementação da invocação de serviços CICS e dos widgets EGL Rich UI.
  • com.ibm.service.monitor.zip: Arquivo EGL Project Interchange exportado a ser usado para rastrear e medir o serviço invocado. Importe esse arquivo para a área de trabalho. Para obter mais informações sobre esse monitor de serviço, acesse Ground control to major Tom... uma entrada do blog EGL Cafe.
  • com.ibm.egl.misc.zip: O código EGL necessário ao usar o serviço da Web Google Maps.
  • CICS_Services+RichUI_noGoogle .zip: Arquivos Rational Developer Project Interchange exportados para teste do serviço da Web CICS.
  • CICS_Services+RichUI+Google .zip: Arquivo Rational Developer Project Interchange exportado que é preciso carregar usando o Google Maps.
  • LAB3EAR.ear: Arquivo J2EE EAR a ser implementado no WebSphere Application Server V6.1 ou 7.0.

Download

DescriçãoNomeTamanho
Code sampleiPhone_EGL_sample.zip9.2 MB

Recursos

Aprender

Discutir

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=WebSphere, Rational
ArticleID=445554
ArticleTitle=Hello again, 3270: Acesso a aplicativos z/OS por meio do iPhone
publish-date=11112009