转载

使用 Watson 服务、Eclipse 和 Bluemix 创建翻译应用程序，第 1部分: 设置环境

系列内容：

此内容是该系列 2 部分中的第 # 部分：使用 Watson 服务、Eclipse 和 Bluemix 创建翻译应用程序，第 1 部分

http://www.ibm.com/developerworks/library/?series_title_by=Create+a+translation+application+using+Watson+services+Eclipse+Bluemix

敬请期待该系列的后续内容。

此内容是该系列的一部分：使用 Watson 服务、Eclipse 和 Bluemix 创建翻译应用程序，第 1 部分

敬请期待该系列的后续内容。

认知计算提供了巨大的潜力和优势，但它也有可能带来破坏。它比传统计算更依赖于稳健的云环境和强大的 API 经济，而且用于开发认知服务和能力的方法也需要越来越依赖于敏捷方法和试验。不过，无论变革具有多大的颠覆性，总能找到发展方向。认知计算带来的颠覆，以及它从传统编程方法向依赖于自然语言、机器学习、大量非结构化数据和诞生于云的传承的编程方法的转变，这种转变可通过集中精力执行 4 个步骤来最小化：指明方向；试验；开发和培训；以及部署、探索和改进。

使用 Watson 服务、Eclipse 和 Bluemix 创建翻译应用程序，第 1部分: 设置环境

尤其，试验是开发支持认知计算的代理和服务的有用且可行的方式。在本教程中，我将介绍我如何通过试验，创建一个使用两个 IBM Watson 服务的简单翻译应用程序：Language Translator 和 Speech to Text。在部署到 Bluemix 之前，我使用了 Eclipse IDE 并使用 localhost 测试该应用程序。本系列将介绍如何设置 Eclipse 环境，然后以 Java servlet 控制两个认知服务的形式开发翻译应用程序。

设置环境

本教程是本系列的第一部分，主要目的是设置 Eclipse 环境。为了实现此目的，我将使用 HTML 和 Java servlet 开发一种用户体验 (UX)，使用 localhost 测试它们，然后将工件推送到 Bluemix。如果我可以在 Bluemix 中看到 Translation UX，则任务成功完成。我在此环境中创建或使用以下工件：

使用 Liberty for Java 的 Bluemix 服务器
用于测试的本地 WebSphere Application Server
Java servlet 控制器
HTML 页面

事件序列从某个使用 Web 浏览器的用户流出，经过每个工件，然后回到 Web 浏览器，如下所示。

使用 Watson 服务、Eclipse 和 Bluemix 创建翻译应用程序，第 1部分: 设置环境

获取 Bluemix 帐户

如果您没有 Bluemix 帐户，需要获得一个帐户。Bluemix 帐户的注册方便快捷，您可以获得 30 天的试用期，这会为您提供探索本教程中涵盖的服务的足够时间。如果您已经有一个帐户，请跳到下一步。

Bluemix 是一个平台即服务 (PaaS) 产品，允许您创建、部署和运行应用程序。所以您无需将时间重点用于探究 IT 基础架构，可以专注于手头的重要工作：向您的用户提供新功能。在探索 Bluemix 的过程中，查阅成本估算器。您会惊喜地发现，PaaS 应用程序非常便宜。请注意，如果您决定注册使用 Bluemix 超过 30 天，运行此试验可能会产生少量的成本。

安装 Eclipse

我使用 Eclipse Neon 1 Release 4.6.1 开发此应用程序，因为这是 Eclipse Java IDE 的最新版本。Neon 随带了 IBM Eclipse Tools for Bluemix，提供了对 IBM Node.js Tools for Eclipse 的支持。它需要干净安装，也就是说，它不能安装在以前的版本上，比如 Mars。

安装 Eclipse：

转到 Eclipse 。
寻找下载该包的链接。请记住，网页常常发生更改，因此，如果此链接不起作用，请寻找最新的链接。
选择能满足您的需要的包。我为此应用程序选择了 Eclipse IDE for Java EE Developers。按照下载说明进行操作。下载过程会将一个压缩文件复制到您的系统。
将该文件解压到您系统上的某个位置。eclipse.exe 文件用于加载 Eclipse 交互开发环境 (IDE)。
完成加载后，Eclipse 会显示一个面板，请求您创建可以用来组织各种工件的工作区。建议将此工作区命名为 workspaceBluemix 。默认情况下，Eclipse 每次加载时都会请求此工作区。您也可以选择在以后通过选择 File > Switch Workspace 来更改工作区。将这个实验和其他 Bluemix 实验放在一个通用工作区中，可以简化后来应用程序中的工件重用。
首次启动 Eclipse 时，会出现一个欢迎屏幕。要前进到 Workbench，可单击右上角的 Workbench 。

创建项目

Eclipse 将工作工件组织到一个项目中。因为本教程的目的是设置开发环境，所以我首先将创建一个名为 SimpleWebApp 的项目，使用它测试服务器。为此：

在图标栏中选择 New Drop Down 。它是一个指向下方的箭头，位于 File 和 Edit 菜单选项之间。然后选择 Dynamic Web Project 。

Dynamic Web Project 窗口将出现。
输入 SampleWebApp 作为项目名称，并选择 Finish 。（请注意，如果已创建一个服务器（例如 IBM Bluemix），它可能已显示在 Target runtime 选项中。）Project Explorer 面板现在看起来类似于下图，具体取决于您可能创建的其他任何项目：

为 Liberty 创建 Bluemix 服务器

如果这是一次干净安装，则没有安装任何服务器，Workbench 底部的 Servers 选项卡将类似于下图：

使用 Watson 服务、Eclipse 和 Bluemix 创建翻译应用程序，第 1部分: 设置环境

如果该面板包含服务器（而且它们不是 Bluemix），可以使用上述创建新项目的过程创建一个新的 Bluemix 服务器，除此以外，您还可以通过选择 Other > Server > Server 来选择 Server ，替代 Dynamic Web Project。这两种方法都会调出 Define a New Server 窗口。

使用 Watson 服务、Eclipse 和 Bluemix 创建翻译应用程序，第 1部分: 设置环境

因为这是一个 Bluemix 项目，所以我会选择 IBM Bluemix 选项，保留 IBM Bluemix 作为服务器名称，单击 Next 。根据您的 Eclipse 实例的状态，可能需要重新启动 Eclipse。重新启动后，继续执行此步骤。

此时将会出现 IBM Bluemix Account 信息窗口。您需要获得用于登录 Bluemix 的凭证。单击 Validate Account 来检查您的输入，这是一个不错的主意。验证您的帐户后，单击 Finish 。

使用 Watson 服务、Eclipse 和 Bluemix 创建翻译应用程序，第 1部分: 设置环境

此服务器用于运行 Web UX，最终包含 Watson 服务所生成的信息。

使用 Watson 服务、Eclipse 和 Bluemix 创建翻译应用程序，第 1部分: 设置环境

创建 local host 服务器

在本地测试应用程序是一种明智之举，Eclipse 提供了多个服务器变体来帮助您实现此操作。对于本应用程序，我使用了 IBM WebSphere Application Server for Liberty。

您将使用与用于 Bluemix 服务器的相同方法来显示 Define a New Server 面板。

选择 IBM > WebSphere Application Server Liberty ，保留默认的 localhost 作为服务器的主机名，以及默认的服务器名称。单击 Next 。
选择 Install from an archive or a repository ，然后保留 JRE 的默认设置。单击 Next 。
为服务器输入一个目标，例如 WASServer。此应用程序使用 WebSphere Application Server Liberty Runtime 取得了成功。单击 Next 。
继续按照安装向导的操作说明来完成安装。

创建示例 Web 应用程序 HTML 页面

创建示例 Web 应用程序 HTML 页面：

单击图标栏上的 Open Perspective 图标，将透视图更改为 Web Perspective。

Eclipse 提供了多个透视图，每个透视图都是为组织您手头的项目的 Workbench 而设计。例如，Debug 提供了一个调试面板，该面板对调试应用程序是不可或缺的，但在编写应用程序代码时则不需要它。
选择 Web 选项。

Eclipse Workbench 的透视图现在已针对 Web 开发进行了优化。
在 Project Explorer 面板中，右键单击 SampleWebApp 。在下拉菜单中，选择 New > HTML File 。

此时将会出现创建 HTML File 面板。为项目的名称保留默认设置，输入 index.html 作为文件名，单击 Finish 。

将以下 HTML 代码复制并粘贴到 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>

本教程假设您拥有基本的 HTML 技能。因此，应该熟悉该结构。请注意，您可以针对您的标准来个性化该结构。例如，您可以更改以下方面：

图标：请注意代码中的 <img class 行。可以使用任何可用的图标。要将图标复制到项目中，需要两个步骤：

使用 New > Folder 菜单选项，在 WebContent 目录下创建一个文件夹。将该文件夹命名为 images 。
选择此文件夹，使用 Import 找到并导入新图标。

作者：像我一样尽可能宣传自己，将 John J Andersen 更改为您自己的姓名。
样式表：更改为您感觉最适合的样式表。如果没有更改这一项，屏幕看起来可能很无趣。如果想查看 myStyle.css ，可查看以下代码。

@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;
}

您应该向 WebContent 目录添加包含 css 的 theme 文件夹，结果应该类似于：

使用 Watson 服务、Eclipse 和 Bluemix 创建翻译应用程序，第 1部分: 设置环境

请注意，images/newapp-icon.png 文件也位于 WebContent 目录中。文件名必须与 HTML 文件中的 img class 名称相匹配。

创建应用程序 servlet

使用与创建新 HTML 文件相同的方法，创建一个新的 Servlet 类。此时将会出现以下窗口：

使用 Watson 服务、Eclipse 和 Bluemix 创建翻译应用程序，第 1部分: 设置环境

可以考虑使用您自己的 Java 包来包含此 servlet 类。请注意， 类 名称 SimpleServlet 必须与 HTML 文件的 form action 行中的 HTML 名称相同。可以使用以下代码：

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());
    }
}

这个 servlet 是我将在本系列第 2 部分中开发的功能更强的 servlet 的占位符。如果单击 Translate ，将会显示消息 ‘Hello World! from’。

在 localhost 上测试应用程序

一种不错的做法是，使用 WebSphere Application Server 的本地实例测试 Web 应用程序。要测试它：

在 Project Explorer 中右键单击该应用程序。然后选择 Run As > 1 Run on Server 。
在 Run On Server 窗口中选择 WebSphere Application Server，单击 Finish 。

单击 Finish 后，WebSphere Application Server 会显示以下图像。

使用 Watson 服务、Eclipse 和 Bluemix 创建翻译应用程序，第 1部分: 设置环境

Eclipse 使用的浏览器使用它的内部缓存来提高性能。如果您修改了 HTML 或 CSS，这些更改没有出现，很可能是因为浏览器的缓存中使用了过时的代码。尝试单击刷新图标，刷新浏览器来修复此问题。

在 Bluemix 服务器上测试应用程序

在 Bluemix 上测试应用程序：

在 Project Explorer 中选择该应用程序，就像您在测试 localhost 服务器时所做的一样。但是，这次选择 IBM Bluemix ，然后单击 Next 。
选择 Next 后，此时将会出现 Add and Remove 窗口。在 Available 部分，选择 SampleWebApp ，然后单击 Add 。该应用程序从 Available 部分转移到 Configured 部分。
单击 Finish 。

Bluemix 需要更多信息才能运行该应用程序。此信息会添加到剩余窗口中，并以清单文件形式提供给 Bluemix。

Application Details 窗口将打开并收集该清单文件的信息。

使用 Watson 服务、Eclipse 和 Bluemix 创建翻译应用程序，第 1部分: 设置环境

名称已提供。删除所有 Buildpack 信息，选择 Save to manifest file 复选框。单击 Next ，检查 Launch deployment 窗口。

使用 Watson 服务、Eclipse 和 Bluemix 创建翻译应用程序，第 1部分: 设置环境

如果选择了 Start application on deployment 复选框，那么单击 Finish 将会部署并启动该应用程序。要启动该应用程序，也可以在 Project Explorer 中选择该应用程序并在 Bluemix 服务器上运行它。无论使用哪种方法，当选择在 Bluemix 上运行该应用程序时，项目就会推送到 Bluemix。