使用 React 创建 IBM Watson 资源管理器（2）

look_w

第 1 步.                浏览应用程序 UI 单击这一步上方的运行应用程序按钮，浏览 Watson 服务：

• 单击开始屏幕右下角的橙色圆角按钮，启动该应用程序并转到语言识别服务。
• 以您所选的语言键入约 10 个单词，单击这个圆角按钮，可以看到 Watson 很快识别出了语言。
• 单击左侧顶部的汉堡包按钮，访问滑入菜单；选择翻译服务。
• 键入一两句话。选择来源和目标语言，并单击这个圆角按钮。Watson 将翻译您的输入。
• 单击菜单中的 Q and A 服务。选择 Travel 或                        Health care，键入一个相关的问题，然后单击该圆角按钮。Watson                    从与您的问题最相关的文档中获取文本，这些文本至少回答了您的部分问题。如果未获得任何答案，尝试调整该滑块来降低阈值。

第 2 步.                克隆并浏览项目代码 向上滚动并单击本教程的获取代码按钮。从 DevOps Services 上 singli |                    Create an IBM Watson explorer with React 项目的概述页面中，单击下载图标，将                ZIP 文件保存到本地文件系统，然后解压它。（也可将 Git URL 复制到剪贴板，通过                git clone giturl 将项目的 Git 存储库复制到您的 PC 中。）

• clientsrc 目录包含应用程序的浏览器端 React 源代码。
• bluemixdeploy 目录包含一种容易部署到 Bluemix 格式的服务器端代理和优化的客户端代码。

浏览器端 React 组件代码向服务器端的一个代理服务器发出请求。代理服务器然后将 Watson 请求公式化，并添加自己的私有凭据。该请求转发到                Watson 服务供处理。Watson 返回结果时，代理服务器会打包一个响应并将其返回给浏览器端代码：
此方法使浏览器端请求代码变得很简单（它只是一个 HTML 格式的 POST），并保护服务器端的私有访问 Watson                凭据。
开始探索的重要文件包括：

• clientsrc/src/www/index.html：浏览器端代码的起点。
• clientsrc/src/app/app.js：index.html 加载的 JavaScript                    代码的起点。

其他重要的源代码目录和文件包括：

• clientsrc/src/app/app-routes.jsx：指定相互关联的视图的分层结构的                    React 路由器规范。
• clientsrc/src/app/components/main.jsx：应用程序的最高级视图，包含外部框架。
• clientsrc/src/app/less/custom-overrides.less：覆盖                    Material-UI 中的默认样式，还包含应用程序使用的自定义 CSS 样式。
• clientsrc/src/app/components/views：该目录包含应用程序中所有有效的视图。
• clientsrc/src/app/components/stores：该目录包含应用程序中所有模拟的                    Flux 存储。采用 Flux 模式，视图将通过注册来获取存储中的数据变更的通知。在这里，存储是对 Watson 服务的代理 Ajax                    调用的补充。