天天看點

ASP.NET5 REST API使用示例——基于雲平台+雲服務打造自己的線上翻譯工具 應用效果展示 建構一個類似的應用程式的前提條件 步驟 1. 建立您的ASP.NET5應用程式 步驟 2. 添加語言翻譯服務 步驟 3. 準備開發環境 步驟 4.編寫代碼 步驟 5. 本地運作通路 步驟 6. 上傳應用程式 步驟 7. 做個小小的測試 結束語

做為一個程式員可能在學習技術,了解行業新動态,解決問題時經常需要閱讀英文的内容;而像我這樣的英文小白就隻能借助翻譯工具才能了解個大概;不禁經常感慨,英文對學習計算機相關知識太重要了!最近發現IBM的雲平台Blumemix,并且提供語言翻譯的服務,感覺不錯,就拿來研究學習一下;這裡就分享一下我的研究學習過程,如何使用ASP.NET5調用REST API打造自己的線上翻譯工具,并示範如何把它釋出到雲平台上,讓每個人都可以通過網絡通路使用它。

<a target="_blank" href="http://net5trans.mybluemix.net/"></a>

對 HTML(超文本标記語言)的基本了解;

對CSS (層疊樣式表)的基本了解;

對JavaScript(一種直譯式腳本語言)的基本了解;

對ASP.NET5 程式設計的基本了解;

對RESTful API的基本了解;

我提供了所有必要代碼,但對這些技術的基本了解有助于您了解有關的細節。

1、在 Bluemix 使用者界面中,轉至“儀表闆”。

2、單擊建立應用程式。

3、單擊 Web,然後按照指導經驗來選擇入門模闆,指定名稱以及選擇編碼方式。

輸入應用程式名稱

應用程式名稱是唯一的,接下來要通過它做為二級域名來通路你的應用!

點選完成之後,需要等待一會兒,然後可以看到下圖的界面

ASP.NET5 REST API使用示例——基于雲平台+雲服務打造自己的線上翻譯工具 應用效果展示 建構一個類似的應用程式的前提條件 步驟 1. 建立您的ASP.NET5應用程式 步驟 2. 添加語言翻譯服務 步驟 3. 準備開發環境 步驟 4.編寫代碼 步驟 5. 本地運作通路 步驟 6. 上傳應用程式 步驟 7. 做個小小的測試 結束語

這時就可以通路你剛剛建立的應用了。如下圖:

ASP.NET5 REST API使用示例——基于雲平台+雲服務打造自己的線上翻譯工具 應用效果展示 建構一個類似的應用程式的前提條件 步驟 1. 建立您的ASP.NET5應用程式 步驟 2. 添加語言翻譯服務 步驟 3. 準備開發環境 步驟 4.編寫代碼 步驟 5. 本地運作通路 步驟 6. 上傳應用程式 步驟 7. 做個小小的測試 結束語
ASP.NET5 REST API使用示例——基于雲平台+雲服務打造自己的線上翻譯工具 應用效果展示 建構一個類似的應用程式的前提條件 步驟 1. 建立您的ASP.NET5應用程式 步驟 2. 添加語言翻譯服務 步驟 3. 準備開發環境 步驟 4.編寫代碼 步驟 5. 本地運作通路 步驟 6. 上傳應用程式 步驟 7. 做個小小的測試 結束語

在服務清單中選擇語言翻譯(Language Translation)

ASP.NET5 REST API使用示例——基于雲平台+雲服務打造自己的線上翻譯工具 應用效果展示 建構一個類似的應用程式的前提條件 步驟 1. 建立您的ASP.NET5應用程式 步驟 2. 添加語言翻譯服務 步驟 3. 準備開發環境 步驟 4.編寫代碼 步驟 5. 本地運作通路 步驟 6. 上傳應用程式 步驟 7. 做個小小的測試 結束語

您可以指定服務的名稱,也可以使用預設的;

ASP.NET5 REST API使用示例——基于雲平台+雲服務打造自己的線上翻譯工具 應用效果展示 建構一個類似的應用程式的前提條件 步驟 1. 建立您的ASP.NET5應用程式 步驟 2. 添加語言翻譯服務 步驟 3. 準備開發環境 步驟 4.編寫代碼 步驟 5. 本地運作通路 步驟 6. 上傳應用程式 步驟 7. 做個小小的測試 結束語

擷取服務資訊

進入自己的應用程式》概述頁面,找到已經添加的服務,點選“顯示憑證”,可以檢視服務的具體資訊:

ASP.NET5 REST API使用示例——基于雲平台+雲服務打造自己的線上翻譯工具 應用效果展示 建構一個類似的應用程式的前提條件 步驟 1. 建立您的ASP.NET5應用程式 步驟 2. 添加語言翻譯服務 步驟 3. 準備開發環境 步驟 4.編寫代碼 步驟 5. 本地運作通路 步驟 6. 上傳應用程式 步驟 7. 做個小小的測試 結束語

在浏覽器中通路服務URL如下圖:

ASP.NET5 REST API使用示例——基于雲平台+雲服務打造自己的線上翻譯工具 應用效果展示 建構一個類似的應用程式的前提條件 步驟 1. 建立您的ASP.NET5應用程式 步驟 2. 添加語言翻譯服務 步驟 3. 準備開發環境 步驟 4.編寫代碼 步驟 5. 本地運作通路 步驟 6. 上傳應用程式 步驟 7. 做個小小的測試 結束語

有關開發環境搭建的細節,請參考下面的文章:

<a target="_blank" href="http://blog.csdn.net/testcs_dn/article/details/50446108"></a>

<a target="_blank" href="http://blog.csdn.net/testcs_dn/article/details/50720544">《ASP.NET5》Windows 7下Visual Studio 2015安裝記錄</a>

<a target="_blank" href="http://blog.csdn.net/testcs_dn/article/details/50449048"></a>

進入您的應用程式,點選左側的開始編碼,在右側點選“下載下傳入門模闆代碼”。

ASP.NET5 REST API使用示例——基于雲平台+雲服務打造自己的線上翻譯工具 應用效果展示 建構一個類似的應用程式的前提條件 步驟 1. 建立您的ASP.NET5應用程式 步驟 2. 添加語言翻譯服務 步驟 3. 準備開發環境 步驟 4.編寫代碼 步驟 5. 本地運作通路 步驟 6. 上傳應用程式 步驟 7. 做個小小的測試 結束語

也可以通過添加Git來下載下傳代碼。

1、将下載下傳的入門模闆代碼解壓到一個目錄

2、輕按兩下dotnetstarter.sln檔案,預設會使用 VS2015 打開

3、按下F5鍵,或使用Debug菜單

ASP.NET5 REST API使用示例——基于雲平台+雲服務打造自己的線上翻譯工具 應用效果展示 建構一個類似的應用程式的前提條件 步驟 1. 建立您的ASP.NET5應用程式 步驟 2. 添加語言翻譯服務 步驟 3. 準備開發環境 步驟 4.編寫代碼 步驟 5. 本地運作通路 步驟 6. 上傳應用程式 步驟 7. 做個小小的測試 結束語

4、在浏覽器中通路:啟動調試後會自動打開一個浏覽器視窗

前台主要AJAX代碼:調用背景的翻譯的處理程式,實作使用者互動

//通過AJAX調用背景翻譯程式  

function doExecTrans(){  

    var txt = $("#InputText").val();  

    if (txt == ""){  

        alert("請輸入要翻譯的文本!");  

        return;  

    }  

    $("#ProgressDiv").show();  

    $.ajax({  

       type: "GET",  

       url: "/api/values/" + encodeURIComponent(txt),  

       dataType:"json",  

       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 );  

       }  

    });  

}  

背景主要代碼:ValuesController.cs,與翻譯服務Web Service互動

你可能會注意到代碼中有兩個關鍵字:async和await,.NET中引入了async和await關鍵字(VB為Async和Await)來簡化異步調用的程式設計模式,這使異步調用變得更加簡單。

1、儲存修改過的檔案

2、按下F5鍵,或使用Debug菜單

啟動調試後會自動打開浏覽器視窗:

ASP.NET5 REST API使用示例——基于雲平台+雲服務打造自己的線上翻譯工具 應用效果展示 建構一個類似的應用程式的前提條件 步驟 1. 建立您的ASP.NET5應用程式 步驟 2. 添加語言翻譯服務 步驟 3. 準備開發環境 步驟 4.編寫代碼 步驟 5. 本地運作通路 步驟 6. 上傳應用程式 步驟 7. 做個小小的測試 結束語

登入到 Bluemix™ 後,可以使用 cf push 指令來上傳應用程式。

開始之前,您必須:

1、安裝 Cloud Foundry 指令行界面。

<a target="_blank" href="https://github.com/cloudfoundry/cli/releases"></a>

ASP.NET5 REST API使用示例——基于雲平台+雲服務打造自己的線上翻譯工具 應用效果展示 建構一個類似的應用程式的前提條件 步驟 1. 建立您的ASP.NET5應用程式 步驟 2. 添加語言翻譯服務 步驟 3. 準備開發環境 步驟 4.編寫代碼 步驟 5. 本地運作通路 步驟 6. 上傳應用程式 步驟 7. 做個小小的測試 結束語

請根據自己使用的作業系統下載下傳對應的版本;我使用的是Windows 7 64位作業系統,

下載下傳Binaries版本的不需要安裝,直接解壓到Windows目錄就可以了。

ASP.NET5 REST API使用示例——基于雲平台+雲服務打造自己的線上翻譯工具 應用效果展示 建構一個類似的應用程式的前提條件 步驟 1. 建立您的ASP.NET5應用程式 步驟 2. 添加語言翻譯服務 步驟 3. 準備開發環境 步驟 4.編寫代碼 步驟 5. 本地運作通路 步驟 6. 上傳應用程式 步驟 7. 做個小小的測試 結束語

依次點選儀表闆》jstrans(您建立的應用程式名稱)》開始編碼,可以檢視屬于自己的指令;如下圖:

ASP.NET5 REST API使用示例——基于雲平台+雲服務打造自己的線上翻譯工具 應用效果展示 建構一個類似的應用程式的前提條件 步驟 1. 建立您的ASP.NET5應用程式 步驟 2. 添加語言翻譯服務 步驟 3. 準備開發環境 步驟 4.編寫代碼 步驟 5. 本地運作通路 步驟 6. 上傳應用程式 步驟 7. 做個小小的測試 結束語

2、連接配接到 Bluemix。

打開指令提示符視窗:開始》運作,輸入“cmd”,回車

執行:cf api https://api.ng.bluemix.net,如下圖:

ASP.NET5 REST API使用示例——基于雲平台+雲服務打造自己的線上翻譯工具 應用效果展示 建構一個類似的應用程式的前提條件 步驟 1. 建立您的ASP.NET5應用程式 步驟 2. 添加語言翻譯服務 步驟 3. 準備開發環境 步驟 4.編寫代碼 步驟 5. 本地運作通路 步驟 6. 上傳應用程式 步驟 7. 做個小小的測試 結束語

3、登入到 Bluemix。

注意,這裡要換成對應你自己賬戶的指令!

<code>cf login -u [email protected] -o [email protected] -s ivu4e</code>

4、發出 cf push 指令時,cf 指令行界面将提供使用 buildpack 來建構并運作應用程式的 Bluemix 環境的工作目錄。

從應用程式目錄中,輸入帶有應用程式名稱的 cf push 指令。在 Bluemix 環境中,應用程式名稱必須是唯一的。

後面的"-m 512m"是修改應用程式記憶體配額的,可以不帶這個參數,如下圖:

ASP.NET5 REST API使用示例——基于雲平台+雲服務打造自己的線上翻譯工具 應用效果展示 建構一個類似的應用程式的前提條件 步驟 1. 建立您的ASP.NET5應用程式 步驟 2. 添加語言翻譯服務 步驟 3. 準備開發環境 步驟 4.編寫代碼 步驟 5. 本地運作通路 步驟 6. 上傳應用程式 步驟 7. 做個小小的測試 結束語

注意:執行cf push前将指令行目前目錄切換到您剛剛建立的應用目錄,例如我剛剛建立的

C:\nodejs\net5trans\,cf push 後面的jstrans要替換為您在Bluemix上建立的應用名稱。

提示: 使用 cf push 指令時,cf 指令行界面會将目前目錄中的所有檔案和目錄複制到 Bluemix。確定應用程式目錄中隻包含必需的檔案。

如果更改了應用程式,可以通過再次輸入 cf push 指令來上傳這些更改。 cf 指令行界面會使用您先前的選項以及您對提示的響應來通過新的代碼段更新應用程式的任何運作中執行個體。

通過儀表闆進入您剛剛建立的應用頁面,點選左側的開始編碼,右側頂部會顯示:您的應用程式正在運作。

點選後面的連結通路剛剛釋出的應用。

ASP.NET5 REST API使用示例——基于雲平台+雲服務打造自己的線上翻譯工具 應用效果展示 建構一個類似的應用程式的前提條件 步驟 1. 建立您的ASP.NET5應用程式 步驟 2. 添加語言翻譯服務 步驟 3. 準備開發環境 步驟 4.編寫代碼 步驟 5. 本地運作通路 步驟 6. 上傳應用程式 步驟 7. 做個小小的測試 結束語

通過IBM的Bluemix雲平台,我們可以輕松的将自己的應用共享到網絡上;

建立Web應用之後會自動獲得一個用來通路應用的二級域名;

通過應用程式概述中的應用程式運作狀況,可以友善的檢視和管理應用運作狀态;

這裡通過一個小例子展示如何将自己的應用釋出到IBM的Bluemix雲平台上,

如何與IBM雲平台上提供的語言翻譯服務互動。

如果您有更好的應用或想法,試試通過IBM的Bluemix雲平台共享出來吧。

繼續閱讀