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

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

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

应用效果展示

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


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

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

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

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

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

对Ruby 语言的基本了解;

对Ruby On Rails 的基本了解;

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

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

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

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

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

  4. 输入应用程序名称

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

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

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

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


获取服务信息

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

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


步骤 3. 准备开发环境

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

Ruby Rails入门——windows下搭建Ruby Rails Web开发环境

步骤 4.编写代码

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

进入您的应用程序,点击左侧的开始编码,在右侧点击“下载起动器代码”。


2、使其在本地运行

1、将下载的示例代码解压到一个目录,打开命令行窗口,切换到这个目录下

2、执行命令:bundle install

期间可能会提示:Your Ruby version is 2.2.3, but your Gemfile specified 2.2.2

因为我安装的版本比示例代码的版本高,直接去Gemfile 中把版本改为:2.2.3就可以了;

3、执行命令:rails server

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

3、编写代码

前台主要AJAX代码:调用后台的翻译Servlet,实现用户交互

//通过AJAX调用后台翻译程序
function doExecTrans(){
	var txt = $("#InputText").val();
	if (txt == ""){
		alert("请输入要翻译的文本!");
		return;
	}
	
	$("#ProgressDiv").show();
	$.ajax({
	   type: "GET",
	   url: "trans",
	   dataType:"json",
	   data: {"txt":txt},
	   success: function(data){
		 $("#ProgressDiv").hide();
		 console.log(data);
		 if (data.error){
			alert(data.error);
		 }else{
			$("#OutputText").text(data.text);
		 }
	   },
	   error: function(data){
		 console.log(data);ssss
		 alert( "Error Msg: " + data );
		 $("#ProgressDiv").hide();
	   }
	});
}

后台主要代码:trans_controller.rb,与翻译服务Web Service交互

require 'json'
require "net/http"
require "open-uri"
require "uri"

# Controller and action definition for uri trans/index
# See routing configuration in config/routes.rb
class TransController < ApplicationController
  def index
	@result = nil;
    @txt = params[:txt];
	if (@txt == nil || @txt.empty?) then
		@result = "{\"error\":\"请输入要翻译的文本!\"}";
	else
		auth = "c9819718-4660-441c-9df7-07398950ea44:qUvrJPSdPgOx";
		surl = "https://" + auth + "@gateway.watsonplatform.net/language-translation/api/v2/translate?source=en&target=es&text=" + @txt;
		uri = URI.parse(surl);
		
		begin #开始
			http = Net::HTTP.new(uri.host, uri.port)
			http.use_ssl = true
			http.verify_mode = OpenSSL::SSL::VERIFY_NONE
			request = Net::HTTP::Get.new(uri.request_uri)
			request.basic_auth "c9819718-4660-441c-9df7-07398950ea44", "qUvrJPSdPgOx"
			response = http.request(request)
			@result = "{\"text\":\"#{response.body}\"}";
		rescue
			@result = "{\"error\":\"#{$!}!\"}";
		end
	end
	
  end
end
对应的视图文件index.html.erb的代码:

<%= raw @result %>
很简单,只有一句,可是暗藏玄机;你可以把 raw 移除试试!


修改routes.rb文件

RailsStarter::Application.routes.draw do
  # The priority is based upon order of creation:
  # first created -> highest priority.

  # Sample of regular route:
  #   match 'products/:id' => 'catalog#view'
  # Keep in mind you can assign values other than :controller and :action

  # Sample of named route:
  #   match 'products/:id/purchase' => 'catalog#purchase', :as => :purchase
  # This route can be invoked with purchase_url(:id => product.id)
  get ':controller(/:action(/:id))'
  root :to => 'say#hello'
  match '/trans', :to=>'trans#index'
添加一行:match '/trans', :to=>'trans#index'

步骤 5. 本地运行访问

运行

执行命令:rails server

访问

在浏览器中访问,查看效果,打开浏览器,输入:http://localhost:3000/



步骤 6. 上传应用程序

注意:上传之前要把 Gemfile 中的版本改回 2.2.2,云平台上目前还不支持2.2.3

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

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

    下载 Cloud Foundry 命令行界面


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

  4. 以下执行的命令你可以通过访问 https://www.ng.bluemix.net/docs/#starters/upload_app.html#upload_app__push
  5. 查看属于自己的命令;
  6. 2、连接到 Bluemix
  7. 打开命令提示符窗口:开始》运行,输入“cmd”,回车
  8. 执行:cf api https://api.ng.bluemix.net,如下图:

  9. 3、登录到 Bluemix
  10. 注意,这里要换成对应你自己账户的命令!
  11.     
        
    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:\ruby\rbtrans\,cf push 后面的rbtrans要替换为您在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://rbtrans.mybluemix.net/

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


结束语

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

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

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

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

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

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


目录
相关文章
|
1月前
|
API 数据库 决策智能
基于百炼平台qwen-max的api 打造一套 检索增强 图谱增强 智能工具调用决策的智能体
本文介绍了一种基于阿里云百炼平台的`qwen-max` API构建的智能体方案,该方案集成了检索增强、图谱增强及智能工具调用决策三大模块,旨在通过结合外部数据源、知识图谱和自动化决策提高智能回答的准确性和丰富度。通过具体代码示例展示了如何实现这些功能,最终形成一个能灵活应对多种查询需求的智能系统。
177 11
|
1月前
|
自然语言处理 NoSQL API
基于百炼平台qwen-max的api 打造一套 检索增强 图谱增强 基于指令的智能工具调用决策 智能体
基于百炼平台的 `qwen-max` API,设计了一套融合检索增强、图谱增强及指令驱动的智能工具调用决策系统。该系统通过解析用户指令,智能选择调用检索、图谱推理或模型生成等工具,以提高问题回答的准确性和丰富性。系统设计包括指令解析、工具调用决策、检索增强、图谱增强等模块,旨在通过多种技术手段综合提升智能体的能力。
184 5
|
13天前
|
人工智能 前端开发 API
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
Gemini Coder 是一款基于 Google Gemini API 的 AI 应用生成工具,支持通过文本描述快速生成代码,并提供实时代码编辑和预览功能,简化开发流程。
96 38
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
|
8天前
|
JSON 前端开发 搜索推荐
关于商品详情 API 接口 JSON 格式返回数据解析的示例
本文介绍商品详情API接口返回的JSON数据解析。最外层为`product`对象,包含商品基本信息(如id、name、price)、分类信息(category)、图片(images)、属性(attributes)、用户评价(reviews)、库存(stock)和卖家信息(seller)。每个字段详细描述了商品的不同方面,帮助开发者准确提取和展示数据。具体结构和字段含义需结合实际业务需求和API文档理解。
|
1天前
|
JSON 缓存 API
解析电商商品详情API接口系列,json数据示例参考
电商商品详情API接口是电商平台的重要组成部分,提供了商品的详细信息,支持用户进行商品浏览和购买决策。通过合理的API设计和优化,可以提升系统性能和用户体验。希望本文的解析和示例能够为开发者提供参考,帮助构建高效、可靠的电商系统。
20 12
|
6天前
|
XML JSON API
淘宝商品详情(item get)API接口系列,示例说明参考
淘宝商品详情(item_get)API接口是淘宝开放平台(Taobao Open Platform)提供的一个重要接口,允许开发者通过HTTP请求获取淘宝商品的详细信息。以下是对该接口系列的示例说明参考
|
1月前
|
JSON API 数据安全/隐私保护
淘宝评论API接口操作步骤详解,代码示例参考
淘宝评论API接口是淘宝开放平台提供的一项服务,通过该接口,开发者可以访问商品的用户评价和评论。这些评论通常包括评分、文字描述、图片或视频等内容。商家可以利用这些信息更好地了解消费者的需求和偏好,优化产品和服务。同时,消费者也可以从这些评论中获得准确的购买参考,做出更明智的购买决策。
|
1月前
|
API Python
【Azure Developer】分享一段Python代码调用Graph API创建用户的示例
分享一段Python代码调用Graph API创建用户的示例
60 11
|
2月前
|
API 开发工具 开发者
探究亚马逊国际获得AMAZON商品详情 API 接口功能、作用与实际应用示例
亚马逊提供的Amazon Product Advertising API或Selling Partner API,使开发者能编程访问亚马逊商品数据,包括商品标题、描述、价格等。支持跨境电商和数据分析,提供商品搜索和详情获取等功能。示例代码展示了如何使用Python和boto3库获取特定商品信息。使用时需遵守亚马逊政策并注意可能产生的费用。
|
2月前
|
JSON API 数据安全/隐私保护
拍立淘按图搜索API接口返回数据的JSON格式示例
拍立淘按图搜索API接口允许用户通过上传图片来搜索相似的商品,该接口返回的通常是一个JSON格式的响应,其中包含了与上传图片相似的商品信息。以下是一个基于淘宝平台的拍立淘按图搜索API接口返回数据的JSON格式示例,同时提供对其关键字段的解释

热门文章

最新文章