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云平台共享出来吧。


目录
相关文章
|
10天前
|
开发框架 监控 .NET
Visual Basic的Web服务和REST API开发指南
【4月更文挑战第27天】本文探讨了使用Visual Basic(VB.NET)构建Web服务和RESTful API的方法。首先介绍了Web服务的基础和REST API的概念,然后阐述了.NET Framework与.NET Core/.NET 5+对VB.NET的支持,以及ASP.NET Core在Web开发中的作用。接着,详细讲解了创建RESTful API的步骤,包括控制器与路由设置、模型绑定与验证,以及返回响应。此外,还讨论了安全措施、测试方法、部署选项和监控策略。最后强调,VB.NET开发者可以通过ASP.NET Core涉足现代Web服务开发,拓宽技术领域。
|
18天前
|
安全 Java API
第7章 Spring Security 的 REST API 与微服务安全(2024 最新版)(上)
第7章 Spring Security 的 REST API 与微服务安全(2024 最新版)
35 0
第7章 Spring Security 的 REST API 与微服务安全(2024 最新版)(上)
|
7天前
|
分布式计算 DataWorks 关系型数据库
DataWorks操作报错合集之在DataWorks同步数据时,遇到乱码问题,该怎么解决(rest api数据源)
DataWorks是阿里云提供的一站式大数据开发与治理平台,支持数据集成、数据开发、数据服务、数据质量管理、数据安全管理等全流程数据处理。在使用DataWorks过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
20 0
|
9天前
|
JSON 安全 API
【专栏】浅谈 REST API 身份验证的四种方法
【4月更文挑战第28天】本文探讨了四种REST API身份验证方法:基本认证、OAuth、JSON Web Token(JWT)和API密钥。基本认证简单但不安全;OAuth适用于授权第三方应用;JWT提供安全的身份验证信息传递;API密钥适合内部使用。选择方法时需平衡安全性、用户体验和开发复杂性。
|
14天前
|
JSON JavaScript API
访问REST API:在Vue中消费和管理远程数据
【4月更文挑战第23天】本文探讨了在Vue应用中高效访问REST API的方法,包括选择合适的API、使用Axios或Fetch发送请求、封装API服务、处理响应和数据、错误管理及性能优化。关键点在于创建服务层封装请求,使用计算属性和方法处理数据,以及实施错误处理和性能提升策略。通过这些最佳实践,开发者能更好地管理和消费远程数据,构建出动态、响应式的Vue应用。
|
18天前
|
安全 Java API
第7章 Spring Security 的 REST API 与微服务安全(2024 最新版)(下)
第7章 Spring Security 的 REST API 与微服务安全(2024 最新版)
22 0
|
18天前
|
安全 Java API
第7章 Spring Security 的 REST API 与微服务安全(2024 最新版)(中)
第7章 Spring Security 的 REST API 与微服务安全(2024 最新版)
29 0
|
8月前
|
机器学习/深度学习 Kubernetes Cloud Native
SAP 云平台 (Cloud Platform) 架构概述
SAP 云平台 (Cloud Platform) 架构概述
168 1
|
8月前
|
移动开发 IDE Java
SAP 云平台从 Neo 到 Multi-Cloud 的演化历史
SAP 云平台从 Neo 到 Multi-Cloud 的演化历史
161 0
|
8月前
|
数据中心
什么是 SAP 云平台的 multi-cloud architecture
什么是 SAP 云平台的 multi-cloud architecture
62 1