Node.js中REST API使用示例——基于云平台+云服务打造自己的在线翻译工具

gtzz4896 9年前

来自： http://blog.csdn.net/testcs_dn/article/details/50688416


做为一个程序员可能在学习技术，了解行业新动态，解决问题时经常需要阅读英文的内容；而像我这样的英文小白就只能借助翻译工具才能理解个大概；不禁经常感慨，英文对学习计算机相关知识太重要了！最近发现IBM的云平台Blumemix，并且提供语言翻译的服务，感觉不错，就拿来研究学习一下；这里就分享一下我的研究学习过程，如何使用Node.js调用REST API打造自己的在线翻译工具，并演示如何把它发布到云平台上，让每个人都可以通过网络访问使用它。

应用效果展示

您可以通过点击效果图片的链接访问它。


构建一个类似的应用程序的前提条件

一个 Bluemix 帐户，您还没有？ 点击这里注册，已经有，点击这里登录；

对 HTML（超文本标记语言）的基本了解；

对CSS （层叠样式表）的基本了解；

对JavaScript（一种直译式脚本语言）的基本了解；

对Node.js Web编程的基本了解；

我提供了所有必要代码，但对这些技术的基本了解有助于您理解有关的细节。

步骤 1. 创建您的 Node.js 应用程序

  1. 1、在 Bluemix 用户界面中，转至“仪表板”。

  3. 2、单击创建应用程序。

  5. 3、单击 Web，然后按照指导经验来选择入门模板，指定名称以及选择编码方式。

  7. 输入应用程序名称

  9. 应用程序名称是唯一的，接下来要通过它做为二级域名来访问你的应用！
  10. 点击完成之后，需要等待一会儿，然后可以看到下图的界面

  12. 这时就可以访问你刚刚创建的应用了。如下图：

步骤 2. 添加语言翻译服务

  1. 可以通过单击 Bluemix 用户界面中应用程序“概述”上的添加服务或 API，将服务添加到应用程序中。也可以使用 cf 命令行界面。请参阅处理应用程序的可用选项。

  3. 在服务列表中选择语言翻译（Language Translation）

  5. 您可以指定服务的名称，也可以使用默认的；

获取服务信息

进入自己的应用程序》概述页面，找到已经添加的服务，点击“显示凭证”，可以查看服务的具体信息：

在浏览器中访问服务URL如下图：

步骤 3. 准备开发环境

有关开发环境搭建的细节，请参考下面的文章：

《Node.js入门》Windows 7下Node.js Web开发环境搭建笔记


步骤 4.编写代码

1、下载初始Hello World示例代码

进入您的应用程序，点击左侧的开始编码，在右侧点击“下载入门模板代码”。


也可以通过添加Git来下载代码。

2、使其在本地运行

1、将下载的入门模板代码解压到一个目录，打开命令行窗口，切换到这个目录下

2、执行命令：npm install

3、执行命令：node app.js

4、在浏览器中访问：http://localhost:6001/

3、编写代码

前台主要AJAX代码：调用后台的翻译的处理程序，实现用户交互

[javascript]  view plain copy
  1. //通过AJAX调用后台翻译程序  
  2. function doExecTrans(){  
  3.     var txt = $("#InputText").val();  
  4.     if (txt == ""){  
  5.         alert("请输入要翻译的文本！");  
  6.         return;  
  7.     }  
  8.       
  9.     $("#ProgressDiv").show();  
  10.     $.ajax({  
  11.        type: "GET",  
  12.        url: "trans",  
  13.        dataType:"json",  
  14.        data: {"txt":txt},  
  15.        success: function(data){  
  16.          $("#ProgressDiv").hide();  
  17.          console.log(data);  
  18.          if (data.error){  
  19.             alert(data.error);  
  20.          }else{  
  21.             $("#OutputText").text(data.text);  
  22.          }  
  23.        },  
  24.        error: function(data){  
  25.          console.log(data);ssss  
  26.          alert( "Error Msg: " + data );  
  27.          $("#ProgressDiv").hide();  
  28.        }  
  29.     });  
  30. }  

后台主要代码：app.js，与翻译服务Web Service交互

/*eslint-env node*/    //------------------------------------------------------------------------------  // node.js starter application for Bluemix  //------------------------------------------------------------------------------    // This application uses express as its web server  // for more info, see: http://expressjs.com  var express = require('express');  var http= require('https');  var qs = require('querystring');    // cfenv provides access to your Cloud Foundry environment  // for more info, see: https://www.npmjs.com/package/cfenv  var cfenv = require('cfenv');    // create a new express server  var app = express();    // serve the files out of ./public as our main files  app.use(express.static(__dirname + '/public'));    app.get('/trans', function (req, res) {      //这是需要提交的数据   params = { 'source':'en', 'target':'es', 'text':req.query.txt }   var data = qs.stringify(params);   //模拟HTTP Get请求   http.get("https://翻译服务用户名:密码@gateway.watsonplatform.net/language-translation/api/v2/translate?" + data, function(gres) {     var body = '';    gres.on('data',function(d){     body += d;     }).on('end', function(){      //console.log(gres.headers);      //console.log(body);      //输出响应内容      res.send("{\"text\":\"" + body + "\"}");     });   }).on('error', function(e) {     console.log("Got error: " + e.message);    });//.auth('c9819718-4660-441c-9df7-07398950ea44', 'qUvrJPSdPgOx', false);   //res.send(body);  });    // get the app environment from Cloud Foundry  var appEnv = cfenv.getAppEnv();    // start server on the specified port and binding host  app.listen(appEnv.port, '0.0.0.0', function() {     // print a message when the server starts listening    console.log("server starting on " + appEnv.url);  });

步骤 5. 本地运行访问

运行

1、执行命令：npm install

2、执行命令：node app.js

访问

在浏览器中访问，查看效果，打开浏览器，输入：http://localhost:6001/



步骤 6. 上传应用程序

登录到 Bluemix™ 后，可以使用 cf push 命令来上传应用程序。

开始之前，您必须：
  1. 1、安装 Cloud Foundry 命令行界面。

    下载 Cloud Foundry 命令行界面


  3. 请根据自己使用的操作系统下载对应的版本；我使用的是Windows 7 64位操作系统，
  4. 下载Binaries版本的不需要安装，直接解压到Windows目录就可以了。

  6. 依次点击仪表板》jstrans(您创建的应用程序名称)》开始编码，可以查看属于自己的命令；如下图：

  8. 2、连接到 Bluemix。
  9. 打开命令提示符窗口：开始》运行，输入“cmd”，回车
  10. 执行：cf api https://api.ng.bluemix.net，如下图：

  12. 3、登录到 Bluemix。
  13. 注意，这里要换成对应你自己账户的命令！
  14.     cf login -u ivu4e@qq.com -o ivu4e@qq.com -s ivu4e

4、发出 cf push 命令时，cf 命令行界面将提供使用 buildpack 来构建并运行应用程序的 Bluemix 环境的工作目录。

  1. 从应用程序目录中，输入带有应用程序名称的 cf push 命令。在 Bluemix 环境中，应用程序名称必须是唯一的。
  2. 后面的"-m 512m"是修改应用程序内存配额的，可以不带这个参数，如下图：

  4. 注意：执行cf push前将命令行当前目录切换到您刚刚创建的应用目录，例如我刚刚创建的
    C:\nodejs\jstrans\，cf push 后面的jstrans要替换为您在Bluemix上创建的应用名称。
  5. 提示： 使用 cf push 命令时，cf 命令行界面会将当前目录中的所有文件和目录复制到 Bluemix。确保应用程序目录中只包含必需的文件。

  6. cf push 命令上传应用程序并将其部署到 Bluemix。有关 cf push 的更多信息，请参阅 cf 命令。有关 buildpack 的信息，请参阅使用社区 buildpack。

  7. 如果更改了应用程序，可以通过再次输入 cf push 命令来上传这些更改。 cf 命令行界面会使用您先前的选项以及您对提示的响应来通过新的代码段更新应用程序的任何运行中实例。
提示： 您还可以从  Bluemix DevOps Services 上传或部署应用程序。请参阅 在 Node.js 中使用 Web IDE 开发Bluemix 应用程序。

步骤 7. 做个小小的测试

通过仪表板进入您刚刚创建的应用页面，点击左侧的开始编码，右侧顶部会显示：您的应用程序正在运行。http://jstrans.mybluemix.net/

点击后面的链接访问刚刚发布的应用。

结束语

通过IBM的Bluemix云平台，我们可以轻松的将自己的应用共享到网络上；

创建Web应用之后会自动获得一个用来访问应用的二级域名；

通过应用程序概述中的应用程序运行状况，可以方便的查看和管理应用运行状态；

这里通过一个小例子展示如何将自己的应用发布到IBM的Bluemix云平台上，

如何与IBM云平台上提供的语言翻译服务交互。

如果您有更好的应用或想法，试试通过IBM的Bluemix云平台共享出来吧。