炼数成金 门户 商业智能 Watson 查看内容

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

2016-1-26 14:35| 发布者: 炼数成金_小数| 查看: 20718| 评论: 0|原作者: Sing Li|来自: IBM

摘要: 您肯定几年前就听说过 IBM Watson 认知计算系统。如今,得益于 Bluemix™,每个人(包括加班熬夜的 JavaScript 开发人员)都可以在几分钟内在其自己的应用程序中添加上 Watson 的强大功能,使得这些强大功能可 ...

工具 存储 服务器 高性能 Watson

您肯定几年前就听说过 IBM Watson 认知计算系统。如今,得益于 Bluemix™,每个人(包括加班熬夜的 JavaScript 开发人员)都可以在几分钟内在其自己的应用程序中添加上 Watson 的强大功能,使得这些强大功能可应用于全球。

在本教程中,您将在 Bluemix 上创建一个应用程序来利用 3 个主要的 Watson 服务:
语言识别:识别用户键入的文本的语言。
问答:分析一个问题并从一个语料库 中选择一条消息— 收集的数据的一个集合。返回的信息包括与每一项相关的介于 0 和 1 之间的置信度水平(confidence level)。

机器翻译:在选定的支持语言之间翻译动态输入的文本。
您将使用 React 开源 JavaScript 创建应用程序的用户界面。如果熟悉 React,您就会知道它非常适合构建高性能的 Web UI。(如果不熟悉 React,可参阅我的 developerWorks 文章 “React:创建可维护、高性能的 UI 组件” 来获得全面了解。)

Material design 是 Android 5.x 和其他一些地方普遍使用的行业领先的移动 UI “可视语言”。
该 Watson Explorer 应用程序部署了 Material-UI:一个开源的 React 组件库,它实现了 material design 中您可集成到应用程序中的一个子集。Material design 提供了讨人喜欢的虚拟触觉式反馈,以及类似纸张和墨水的细节:
Watson Explorer UI 的屏幕截图
除了是一个高性能的 UI 创建库,React 还可提高开发人员的生产力,因为它可和与每个组件相关的所有资源一起放在单个源文件中。
阅读:React:创建可维护、高性能的 UI 组件
阅读:Material-UI 文档
阅读:react-router 概述
阅读:Watson Developer Cloud 文档
“使用 React 有助于保持 Watson Explorer 代码井然有序、整洁且容易理解。”
您需要提前准备

一个 Bluemix 帐户
Cloud Foundry 命令行接口
如果想要修改该应用程序:
node.js v0.10.36 或更高版本
gulp

第 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 返回结果时,代理服务器会打包一个响应并将其返回给浏览器端代码:
该图演示了浏览器端代码通过代理服务器发出 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 调用的补充。

第 3 步. 将您自己的 Watson Explorer 应用程序部署在 Bluemix 上
要成功地将您自己的应用程序部署在 Bluemix 上,只需要 bluemixdeploy 目录的内容即可。
登录到 Bluemix。
在仪表板中,创建一个应用程序,选择 WEB 模板,然后首先选择 SDK for Node.js。(您将在后续步骤中覆盖现有项目。)
在提示时为您的应用程序提供一个惟一名称(不要使用空白或特殊字符)。
使用 Add a service 将一个语言识别服务的实例绑定到您的应用程序。将该服务命名为 watlidserv。
添加机器翻译服务的实例并将其绑定到您的应用程序。将该服务命名为 wattransserv。
添加问答服务的实例并将其绑定到您的应用程序。将它命名为 watqaserv。
在您的本地文件系统能够中,更改到应用程序的 bluemixdeploy 目录。
编辑 manifest.xml 并将 name 值更改为您的惟一应用程序名称。
从 bluemixdeploy,运行 cf push 命令来部署您自己的 Watson Explorer 版本,然后可以从 http://您的应用程序名称.mybluemix.net/ 访问它。
接下来,您将看到如何使用 Material-UI 构件和同步的实时更新工具链来安装一个快速开发环境,以便修改或调整该应用程序。

第 4 步. 设置 Material-UI 的快速开发/构建环境
使用 Material-UI 开发和构建工具链(包含集成的 BrowserSync),您可以在应用程序显示在一个或多个浏览器中时修改代码(假设一个在显示在 Firefox 中,一个显示在移动版 Safari 中,第三个显示在 Chrome 中),这些更改会即时反映出来:
Material-UI 正处在快速开发阶段,几乎所有新版本都引入了巨大的变化。确保使用的是 v0.7.0。
从 Material-UI GitHub 存储库,下载 v0.7.0 版的 ZIP 文件。Watson Explorer 应用程序需要 v0.7.0。
在与签出的代码的根级别相同的级别上(可在这里看到文档和示例目录),复制乳整个 clientsrc 目录。
在 Material-UI 代码的根部,运行 npm install。
更改到 clientsrc 目录并运行 npm install。
从 clientsrc 目录,运行 gulp 来启动一个包含正在运行的应用程序的浏览器实例。
如果您愿意的话,启动其他指向该应用程序的 URL 的浏览器(从控制台或从正在运行的浏览器实例)。在您执行更改时,所有浏览器实例都将同步。
修改任何源文件,可以观察到快速的重新构建和浏览器更新。
完成代码更改和测试后,离开 gulp 会话。使用 gulp build 命令构建可部署的工件。
clientsrc/build 目录内是 React 代码的可部署工件。将 clientsrc/build 复制到 bluemixdeploy/public 目录(覆盖现有的文件)以供重新部署。

第 5 步. 扩展该应用程序以利用其他 Watson 服务(可选)
这个资源管理器应用程序目前仅支持 12 种可用的 Watson 服务中的 3 种。在应用程序中添加对一个或多个其他服务的支持,是一种物有所值的练习。此练习也可帮助您了解 React 如何让复杂的 UI 变得容易理解和维护 — 因为在此应用程序中添加服务的新 UI 非常简单。
如果未在第 4 步中设置一个 Material-UI 开发环境,现在可设置一个。
登录到 Bluemix,添加一个新 Watson 服务实例,将该服务绑定到您的应用程序,并为该服务提供一个名称。编辑您项目的 manifest.yml 文件,使之包含此名称。
查阅 Watson 服务 API 文档,了解如何使用新服务和如何调用它的 API。使用现有的代理代码作为参考,修改 bluemixdeploy/app.js 来添加对新服务的代理支持。
添加一个 React 视图的 JSX 代码,以便在您的服务中支持输入,将该代码放在 clientsrc/src/app/components/views 目录中。使用已存在的其他视图的代码作为参考。
在 clientsrc/src/app/less/custom-overrides.less 文件中定义您可能需要的任何新 CSS 样式。
添加一个 React 视图的 JSX 代码来呈现从 Watson 返回的结果,将该代码放在 clientsrc/src/app/components/view 目录中。以该目录中的其他结果视图作为参考。您添加的实际上是一个 React 控制器-视图,它将一个动作提交给(模拟的)Flux 存储。
在 clientsrc/src/app/components/store 中,添加一个存储来支持您的服务。必须在 clientsrc/src/app/components/store/callwatson.js 中添加一个方法来调用您服务的代理。使用其他存储的代码作为参考。
在 bluemixdeploy/app.js 文件(代理服务器)中添加一个新的路由处理函数,将从客户端传入的 POST 请求转换为对 Watson 服务的调用,并将为客户端转换来自 Watson 的结果。
在 clientsrc/src/app/app-routes.jsx 中,修改应用程序 (react-router) 路由,使之包含您的新视图。
在开发期间,您可以在本地 PC 上同时运行代理和 React 代码 — 参见 README.TXT 了解更多信息。

结束语
使用 React 有助于保持 Watson Explorer 代码井然有序、整洁且容易理解。遵守 React 的编码较佳实践,可改善代码的可维护性,使新团队成员(或这篇简短教程的读者)能够快速开展 Web 应用程序项目。高质量的 React 组件库(比如 Material-UI)的存在,使快速创建高水平的 Web 应用程序成为了现实。您可从精简的项目开始,利用 React 能增强生产力的 JSX 同一位置语法,然后扩展到更复杂(或多人协作)的项目。

欢迎加入本站公开兴趣群
商业智能与数据分析群
兴趣范围包括各种让数据产生价值的办法,实际应用案例分享与讨论,分析工具,ETL工具,数据仓库,数据挖掘工具,报表系统等全方位知识
QQ群:81035754

鲜花
1

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

热门频道

  • 大数据
  • 商业智能
  • 量化投资
  • 科学探索
  • 创业

热门文章

     

    GMT+8, 2020-10-22 05:48 , Processed in 0.182693 second(s), 23 queries .