Conteúdo


Crie um aplicativo de tradução usando os serviços do Watson, do Eclipse e do IBM Cloud, Parte 1

Configure o ambiente

Comments

Conteúdos da série:

Esse conteúdo é a parte # de 2 na série: Crie um aplicativo de tradução usando os serviços do Watson, do Eclipse e do IBM Cloud, Parte 1

Fique ligado em conteúdos adicionais dessa série.

Esse conteúdo é parte da série:Crie um aplicativo de tradução usando os serviços do Watson, do Eclipse e do IBM Cloud, Parte 1

Fique ligado em conteúdos adicionais dessa série.

A computação cognitiva oferece ótima promessa e benefícios, mas também pode introduzir interrupção. Ela depende de um ambiente de nuvem robusto e uma forte economia de API muito mais do que a computação tradicional e os métodos que são usados para desenvolver serviços e recursos cognitivos demandam uma confiança cada vez maior na metodologia e na experimentação ágil. No entanto, independentemente do quão disruptiva uma mudança possa ser, é possível ver um caminho adiante. A interrupção a partir da computação cognitiva, com sua mudança de métodos de programação tradicionais para aqueles que dependem de língua natural, aprendizado de máquina, quantias massivas de dados não estruturados e herança nascida na nuvem, pode ser minimizada focando em quatro etapas: criação de gráficos do curso; experimentação; desenvolvimento e treinamento; e implementação, exploração e evolução.

Chart showing the 4 steps to move forward
Chart showing the 4 steps to move forward

A experimentação, em particular, é uma maneira útil e prática de desenvolver agentes e serviços que suportam computação cognitiva. Neste tutorial, eu explico um experimento que fiz sobre como criar um aplicativo de tradução simples que usa dois serviços IBM Watson: Language Translator e Speech to Text. Eu uso o Eclipse IDE e testo o aplicativo usando o host local antes de implementá-lo no IBM Cloud. A série mostra como configurar o ambiente do Eclipse e, em seguida, desenvolver o tradutor como um servlet Java que controla os dois serviços cognitivos.

Configurando o ambiente

Este tutorial, o primeiro na série, tem o objetivo simples de configurar o ambiente do Eclipse. Para realizar isto, eu desenvolvo uma experiência de usuário (UX) usando HTML e um servlet Java, testo-os usando o host local e realizo o push dos artefatos no IBM Cloud. Isto é bem-sucedido se posso ver o Translation UX no IBM Cloud. Eu crio ou uso os artefatos a seguir neste experimento:

  1. Servidor IBM Cloud usando Liberty para Java
  2. WebSphere Application Server local para teste
  3. Controlador do servlet Java
  4. Página HTML

A sequência de eventos flui a partir de alguém usando um navegador da web, por meio de cada artefato e de volta para o navegador da web, conforme a seguir.

Objective Interaction Diagram showing the flow
Objective Interaction Diagram showing the flow
1

Obtenha uma conta do IBM Cloud

Se você não tiver uma conta do IBM Cloud, será necessário obter uma. Assinar o IBM Cloud é rápido e fácil, e você pode obter uma avaliação de 30 dias para testá-lo, o que deve ser tempo suficiente para explorar os serviços que estão cobertos neste tutorial. Se você já possui uma conta, é possível pular para a próxima etapa.

IBM Cloud é uma oferta de Plataforma como Serviço (PaaS) que permite criar, implementar e executar aplicativos. Portanto, em vez de focar seu tempo na sondagem de uma infraestrutura de TI, é possível focar na importante tarefa à mão: fornecer novos recursos aos seus usuários. À medida que você explorar o IBM Cloud, verifique o estimador de custo. Você ficará surpreso com o quão barato um aplicativo PaaS pode ser. Observe que, se você decidir inscrever-se no IBM Cloud além de 30 dias, a execução deste experimento poderá incorrer um pequeno custo.

2

Instalar Eclipse

Eu desenvolvi este aplicativo usando o Eclipse Neon 1 Liberação 4.6.1, pois esta era a versão mais recente do Eclipse Java IDE. O Neon fornecido com o IBM Eclipse Tools for IBM Cloud e fornece suporte para o IBM Node.js Tools for Eclipse. Ele requer uma instalação limpa, o que significa que não instalará sobre uma versão anterior, tal como o Mars.

Para instalar o Eclipse:

  1. Acesse Eclipse.
  2. Procure por um link para fazer download do pacote. Tenha em mente que páginas da web geralmente mudam, portanto, se este link não funcionar, procure pelo mais recente.
  3. Selecione o pacote que atenda às suas necessidades. Eu selecionei o Eclipse IDE for Java EE Developers para este aplicativo. Siga as instruções de download. O download copia um arquivo compactado em seu sistema.
  4. Extraia o arquivo para um local em seu sistema. O arquivo eclipse.exe é usado para carregar o Ambiente de Desenvolvimento Interativo (IDE) do Eclipse.
  5. Após o carregamento, o Eclipse exibe um painel solicitando a área de trabalho que será usada para organizar os artefatos que você criará. Eu sugiro que você chame esta área de trabalho de workspaceBluemix. Por padrão, o Eclipse solicita esta área de trabalho cada vez que ele é carregado. Você também tem uma opção de mudar a área de trabalho posteriormente selecionando Arquivo > Trocar Área de Trabalho. Manter isto e outros laboratórios do IBM Cloud em uma área de trabalho comum simplificará a reutilização de artefatos em aplicativos subsequentes.
  6. Ao iniciar o Eclipse pela primeira vez, uma tela de boas-vindas aparece. Para prosseguir no Ambiente de Trabalho, clique no Ambiente de Trabalho no canto superior direito.
3

Crie o projeto

O Eclipse organiza artefatos de trabalho em um projeto. Como o objetivo deste tutorial é configurar o ambiente de desenvolvimento, eu começo criando um projeto chamado SimpleWebApp e o uso para testar os servidores. Para fazer isto:

  1. Selecione Novo Menu Suspenso na barra de ícones. É a seta apontando para baixo abaixo e no meio entre as opções de menu Arquivo e Editar. Em seguida, selecione Projeto Dinâmico da Web. Drop down list in icon bar
    Drop down list in icon bar

    A janela Projeto Dinâmico da Web aparece.

    New dynamic web project panel fields
    New dynamic web project panel fields
  2. Insira SampleWebApp como o nome do Projeto e selecione Concluir. (Observe que, se um servidor, por exemplo, IBM Cloud, já foi criado, ele poderá aparecer na opção de tempo de execução Destino). O painel Explorador de Projeto agora é semelhante à figura a seguir, dependendo de quaisquer outros projetos que você possa ter criado: Updated project explorer screen
    Updated project explorer screen
4

Crie o servidor IBM Cloud para Liberty

Se esta for uma instalação limpa, não haverá servidores instalados, e a guia Servidores na parte inferior do ambiente de trabalho será semelhante a isto:

Image of a tab with no servers available.
Image of a tab with no servers available.

Se o painel contiver servidores (e eles não forem IBM Cloud), crie um novo servidor IBM Cloud usando o processo para criar um novo projeto que está descrito acima, exceto que você seleciona Servidor em vez de Projeto Dinâmico da Web escolhendo Outro > Servidor > Servidor. Ambas as abordagens o levam à janela Definir um Novo Servidor.

Define a new server window
Define a new server window

Como este é um projeto do IBM Cloud, eu seleciono a opção IBM Cloud. Deixe o nome do servidor como IBM Cloud e clique em Avançar. Com base no estado de sua instância do Eclipse, pode ser necessário reiniciar o Eclipse. Faça isso e, em seguida, continue com esta etapa.

A janela de Dados da Conta do IBM Cloud aparece. São necessárias as credenciais que você usou para efetuar login no IBM Cloud. É uma boa ideia verificar a entrada clicando em Validar Conta. Após sua conta ser validada, clique em Concluir.

Validating your account
Validating your account

Este servidor é usado para executar a Web UX e, basicamente, conter informações que são produzidas pelos serviços do Watson.

Servers tab showing the IBM Cloud server
Servers tab showing the IBM Cloud server
5

Crie o servidor host local

Testar seu aplicativo localmente é uma estratégia inteligente e o Eclipse fornece diversas variações de servidores para ajudá-lo a fazer isso. Para este aplicativo, eu uso o IBM WebSphere Application Server for Liberty.

Você usará a mesma abordagem para exibir o painel Definir um Novo Servidor como você usou para o servidor IBM Cloud.

  1. Selecione IBM > WebSphere Application Server Liberty e deixe o padrão de host local para o nome do host do Servidor e o padrão para o Nome do Servidor. Clique em Avançar. Define local host on the define new server window
    Define local host on the define new server window
  2. Selecione Instalar a partir de um archive ou de um repositório e deixe o padrão para o JRE. Clique em Avançar. Liberty Runtime Environment Panel
    Liberty Runtime Environment Panel
  3. Insira um destino para o servidor, por exemplo, WASServer. Este aplicativo usou o WebSphere Application Server Liberty Runtime com sucesso. Clique em Avançar. Install the runtime
    Install the runtime
  4. Continue seguindo as instruções do assistente de instalação para concluir a instalação.
6

Crie a página HTML do aplicativo da Web de amostra

Para criar uma página HTML do aplicativo da Web de amostra:

  1. Mude a perspectiva para uma Perspectiva da Web clicando no ícone Abrir Perspectiva na Barra de Ícones. Open Perspective button
    Open Perspective button

    O Eclipse fornece várias perspectivas, cada uma projetada para organizar o ambiente de trabalho para o projeto à mão. Por exemplo, Depurar fornece um painel de depuração que é essencial para depurar um aplicativo, mas desnecessário quando você está gravando o código para ele.

  2. Selecione a opção Web . Open Perspective Drop Down Menu
    Open Perspective Drop Down Menu

    A perspectiva para o Ambiente de Trabalho do Eclipse agora está otimizada para desenvolvimento da web.

  3. No painel Explorador de Projeto, clique com o botão direito em SampleWebApp. No menu suspenso, selecione Novo > Arquivo HTML. Add New HTML File
    Add New HTML File

    O painel Criar Arquivo HTML aparece. Deixe o padrão para o nome do projeto, insira index.html como o nome do Arquivo e clique em Concluir.

    Create New HTML File
    Create New HTML File
  4. Copie e cole o código HTML a seguir no arquivo HTML.
    			<!DOCTYPE html>
    <html>
    	<head>
    		<title>The IBM Bluemix Translation Application</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<link rel="stylesheet" href="theme/myStyle.css" />
    	</head>
    	<body>
    		<table>
    			<tr>
    				<td colspan="2">
    					<img class = "eclipseIcon" src='images/WorldIcon.png'>
    				</td>
    				<td>
    					<h4> John J Andersen <span class="blue">Translation Application</span>. </h4>
    				</td>
    			</tr>
    			<tr>
    				<!-- The message comes from /TranslationServlet -->
    				<td colspan="4">
    					message
    				</td>
    			</tr>
    			<tr>
    				<th colspan="2">Enter text to be translated</th>
    				<th colspan="2">Translated text</th>
    			</tr>
    			<tr>
    				<td colspan="2">
    					<form action = "SimpleServlet">
    						<textarea rows = 12 cols = 50 autofocus name = "inputText"></textarea><br>
    						<input type="radio" name="target" value ="French" > French <br>
    						<input type="radio" name="target" value ="Spanish" checked> Spanish <br>
    						<input type="radio" name="target" value ="English"> English <br>
    						<input type="submit" name = "translate" Value = "Translate">
    						<input type="submit" name = "speech" Value = "Speech2Text">
    					</form>
    				</td>
    				<td  colspan="2" style='vertical-align:top;'>
    					<textarea id = "outPut" rows="12" cols="50" readonly name = "translatedText"></textarea>
    				</td>
    			</tr>
    			<tr>
    				<!--  This string will identify the language of the input text - it comes from /TranslateServlet -->
    				<td style='vertical-align:bottom;'>
    					<h1 id = 'inputLanguage'></h1>
    				</td>
    			</tr>
    		</table>
    	</body>
    </html>

Este tutorial supõe que você possui algumas aptidões básicas em HTML. Portanto, a estrutura deve ser familiar. Observe que é possível personalizá-la para seus padrões. Por exemplo, mude o seguinte:

  • Ícone: observe a linha <img class no código. É possível usar qualquer ícone disponível. Para copiar um ícone no projeto, são necessárias duas etapas:
  1. Crie uma pasta chamada imagens no diretório WebContent usando as opções de menu Nova > Pasta . Nomeie a pasta images.
  2. Selecione esta pasta e use Importar para localizar e importar o novo ícone.
  • Autor: o máximo que eu posso usar a publicidade, mude John J Andersen para seu próprio nome.
  • Folha de estilo: mude para uma folha de estilo que você ache mais apropriada. Se você não mudar isto, a tela será muito enfadonha. Se desejar ver myStyle.css, veja o código a seguir.
@CHARSET "ISO-8859-1";

body,html {
	background-color: #3b4b54; width : 100%;
	height: 100%;
	margin: 0 auto;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	color: #ffffff;
}

Você deve incluir a pasta de temas que contém o css no diretório WebContent, que deve ser semelhante a:

Updated WebContent Directory
Updated WebContent Directory

Observe que o arquivo images/newapp-icon.png também está localizado no diretório WebContent. O nome do arquivo deve corresponder ao nome img class no arquivo HTML.

7

Crie o servlet do aplicativo

Você cria uma nova classe de Servlet usando o mesmo método ao criar um novo arquivo HTML. A janela a seguir aparece:

Create Servlet window
Create Servlet window

Você pode considerar o uso de seu próprio pacote Java para conter esta classe de servlet .Observe que o nome da classe , SimpleServlet, deve ser igual ao nome do servlet na linha de ação do formato de arquivo HTML. É possível usar o código a seguir:

package jja.sample.servlet;

import java.io.IOException;

import javax.servlet.*;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;

/**
 * Servlet implementation class SimpleServlet
 */
@WebServlet("/SimpleServlet")
public class SimpleServlet
	extends HttpServlet
{
   	private static final long serialVersionUID = 1L;
    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    @Override
   	protected void doGet(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException
    {
       	response.setContentType("text/html");
       	
       	response.getWriter().print("Hello World! from " + request.getServerName());
    }
}

Este servlet é um item temporário para o servlet mais ambicioso que eu desenvolverei na Parte 2 desta série. Se você clicar em Traduzir, a mensagem 'Hello World! from' será exibida.

8

Teste o aplicativo no host local

É uma boa prática testar o aplicativo da Web usando a instância local do WebSphere Application Server. Para testá-lo:

  1. Selecione o aplicativo no Explorador de Projetos clicando com o botão direito nele. Em seguida, selecione Executar como > 1 Executar no Servidor. Run on Server Menu
    Run on Server Menu
  2. Selecione WebSphere Application Server na janela Executar no Servidor e clique em Concluir. Run on WebSphere Application Server
    Run on WebSphere Application Server

Após clicar em Concluir, o WebSphere Application Server exibe a imagem a seguir.

LocalHost Image
LocalHost Image

O navegador que é usado pelo Eclipse usa seu cache interno para melhorar o desempenho. Se você fizer modificações no HTML ou no CSS e essas mudanças não aparecerem, muito provavelmente o navegador está usando código desatualizado em seu cache. Tente atualizar o navegador para corrigir isto clicando no ícone de atualização.

9

Teste o aplicativo no servidor IBM Cloud

Para testar o aplicativo no IBM Cloud:

  1. Selecione o aplicativo no Explorador de Projetos como fez quando estava testando o servidor do host local. No entanto, desta vez selecione IBM Cloud, em seguida, clique em Avançar. Run on the IBM IBM Cloud Server
    Run on the IBM IBM Cloud Server
  2. Após selecionar Avançar, a janela Incluir e Remover aparece. Na seção Disponível, selecione SampleWebApp, em seguida, clique em Incluir. O aplicativo move da seção disponível para a seção Configurado. Add Web Application to IBM IBM Cloud Server
    Add Web Application to IBM IBM Cloud Server
  3. Clique em Concluir.

O IBM Cloud precisa de informações adicionais para executar o aplicativo. Essas informações serão incluídas nas janelas restantes e fornecidas ao IBM Cloud na forma de arquivo manifest.

A janela Detalhes do Aplicativo se abre e coleta as informações para o arquivo manifest.

IBM IBM Cloud Application Detail
IBM IBM Cloud Application Detail

O nome já foi fornecido. Remova qualquer informação de Buildpack e selecione a caixa de seleção Salvar no arquivo manifest . Clique em Avançar e revise a janela Ativar Implementação.

Launch IBM Cloud Information
Launch IBM Cloud Information

Se a caixa de seleção Iniciar aplicativo na implementação estiver selecionada, clicar em Concluir implementará e ativará o aplicativo. O aplicativo também pode ser iniciado selecionando o aplicativo no Explorador de Projetos e executando-o no servidor IBM Cloud. Em qualquer abordagem, quando o aplicativo é selecionado para execução no IBM Cloud, o projeto tem push realizado no IBM Cloud.

Conclusão

Parabéns! Agora você concluiu a Parte 1 desta série de tutoriais e deve ter seu ambiente do Eclipse configurado. No próximo tutorial na série, eu explicarei como desenvolver o tradutor como um servlet Java que controla os dois serviços cognitivos.


Recursos para download


Comentários

Acesse ou registre-se para adicionar e acompanhar os comentários.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Cognitive computing
ArticleID=1041656
ArticleTitle=Crie um aplicativo de tradução usando os serviços do Watson, do Eclipse e do IBM Cloud, Parte 1: Configure o ambiente
publish-date=12262016