电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 使用 React 创建 IBM Watson 资源管理器（4） [打印本页]

作者: look_w 时间: 2018-11-16 13:19 标题: 使用 React 创建 IBM Watson 资源管理器（4）

第 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 中，修改应用程序 ( ) 路由，使之包含您的新视图。

在开发期间，您可以在本地 PC 上同时运行代理和 React 代码 — 参见 README.TXT 了解更多信息。
结束语使用 React 有助于保持 Watson Explorer 代码井然有序、整洁且容易理解。遵守 React 的编码最佳实践，可改善代码的可维护性，使新团队成员（或这篇简短教程的读者）能够快速开展 Web 应用程序项目。高质量的 React 组件库（比如 Material-UI）的存在，使快速创建高水平的 Web 应用程序成为了现实。您可从精简的项目开始，利用 React 能增强生产力的 JSX 同一位置语法，然后扩展到更复杂（或多人协作）的项目。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)