Node.js中REST API使用示例——基于云平臺+云服務打造自己的在線翻譯工具

gtzz4896 9年前發布 | 22K 次閱讀 Node.js 開發

來自: 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 用戶界面中,轉至“儀表板”。

  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云平臺共享出來吧。

 本文由用戶 gtzz4896 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!