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

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

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

应用效果展示

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


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

一个 Bluemix 帐户,您还没有? 点击这里注册,已经有,点击这里登录

对 HTML(超文本标记语言)的基本了解;

对CSS (层叠样式表)的基本了解;

对JavaScript(一种直译式脚本语言)的基本了解;

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

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

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

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

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

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

  4. 输入应用程序名称

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

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

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

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

  2. 在服务列表中选择语言翻译(Language Translation)

  3. 您可以指定服务的名称,也可以使用默认的;

获取服务信息

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

在浏览器中访问服务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 命令行界面


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

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

  5. 2、连接到 Bluemix
  6. 打开命令提示符窗口:开始》运行,输入“cmd”,回车
  7. 执行:cf api https://api.ng.bluemix.net,如下图:

  8. 3、登录到 Bluemix
  9. 注意,这里要换成对应你自己账户的命令!
  10.  
      
    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"是修改应用程序内存配额的,可以不带这个参数,如下图:

  3. 注意:执行cf push前将命令行当前目录切换到您刚刚创建的应用目录,例如我刚刚创建的
    C:\nodejs\jstrans\,cf push 后面的jstrans要替换为您在Bluemix上创建的应用名称。
  4. 提示: 使用 cf push 命令时,cf 命令行界面会将当前目录中的所有文件和目录复制到 Bluemix。确保应用程序目录中只包含必需的文件。
  5. cf push 命令上传应用程序并将其部署到 Bluemix。有关 cf push 的更多信息,请参阅 cf 命令。有关 buildpack 的信息,请参阅使用社区 buildpack

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

步骤 7. 做个小小的测试

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

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


结束语

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

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

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

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

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

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

目录
相关文章
|
30天前
|
JSON 数据挖掘 API
结合数据分析工具,深入挖掘淘宝API接口的商业价值
随着电子商务的蓬勃发展,淘宝作为国内领先的电商平台,不仅为消费者提供了便捷的购物环境,同时也为开发者和数据分析师提供了丰富的数据资源。通过有效地调用淘宝API接口获取商品详情,再结合数据分析工具进行深入的数据挖掘,可以为商家、市场分析师及研究人员等带来巨大的商业价值
|
1月前
|
分布式计算 JavaScript 前端开发
JS中数组22种常用API总结,slice、splice、map、reduce、shift、filter、indexOf......
JS中数组22种常用API总结,slice、splice、map、reduce、shift、filter、indexOf......
|
21天前
|
Web App开发 JavaScript NoSQL
深入浅出:构建基于Node.js的RESTful API
在当今快速发展的互联网时代,RESTful API已成为前后端分离架构中不可或缺的一部分。本文旨在为初学者和中级开发人员提供一个清晰、简洁的指南,详细介绍如何使用Node.js构建一个高效、可维护的RESTful API。通过结合实际案例,本文将从API设计理念出发,深入讲解如何利用Express框架及MongoDB数据库实现API的增删改查功能,同时探讨如何通过JWT进行安全认证,确保数据传输的安全性。此外,文章还将简要介绍如何使用Swagger生成API文档,使得API的测试和维护更加便捷。无论你是希望提升现有项目的API设计,还是想从零开始构建一个新项目,本文都将为你提供一条清晰的道路
|
23天前
|
监控 JavaScript 前端开发
Node.js:JavaScript世界的全能工具
Node.js:JavaScript世界的全能工具
72 0
|
23天前
|
NoSQL JavaScript 前端开发
深入浅出:使用Node.js和MongoDB构建RESTful API
在当今的软件开发领域,构建高效、可扩展的Web服务已成为开发者的重要任务之一。本文将引导读者通过现代JavaScript环境——Node.js,搭配流行的NoSQL数据库MongoDB,一步步构建一个RESTful API。不同于常规的摘要,我们将采用故事化的方式,通过一个虚构的应用“BookFinder”的开发旅程,带领读者理解API设计、数据库交互及安全性考量等关键知识点。无论你是前端工程师希望深化后端知识,还是后端新手寻求实践机会,本文都将提供你所需的指南和启示。
|
25天前
|
小程序 物联网 API
社区每周丨API 集成工具文档更新及开发者日上海站即将举行(6.19-6.23)
社区每周丨API 集成工具文档更新及开发者日上海站即将举行(6.19-6.23)
26 0
|
27天前
|
数据可视化 测试技术 API
Swagger--API表达工具
Swagger--API表达工具
33 2
|
27天前
|
JavaScript 前端开发 API
Node.js 工具库 yeoman 的作用介绍
Node.js 工具库 yeoman 的作用介绍
26 0
|
30天前
|
Web App开发 Rust JavaScript
Rust 笔记:WebAssembly 的 JavaScript API
Rust 笔记:WebAssembly 的 JavaScript API
88 0
|
30天前
|
JavaScript 前端开发 Unix
NodeJS文件系统遍历工具:fast-glob
NodeJS文件系统遍历工具:fast-glob
48 0

热门文章

最新文章

相关产品

  • 云迁移中心