Chúng tôi đã trở lại với một hướng dẫn khác về API Google Dịch. Lần này chúng ta sẽ đề cập đến tính năng cá nhân hóa ngôn ngữ trên web bằng API này

Là một người không nói tiếng Anh bản ngữ, nếu bạn bắt gặp một biểu mẫu web bằng tiếng Anh mà bạn muốn điền và gửi, bạn có thể khó diễn giải ý nghĩa của từng trường trong biểu mẫu. Sử dụng API Google Dịch, chúng tôi có thể xây dựng các tính năng cá nhân hóa ngôn ngữ cho biểu mẫu web để bạn có thể chọn ngôn ngữ khi điền vào biểu mẫu

Nếu điều này nghe có vẻ thú vị, thì hãy theo dõi bài đăng trên blog này để xây dựng biểu mẫu web demo có khả năng dịch ngôn ngữ, được cung cấp bởi RapidAPI. Nhưng trước tiên, giới thiệu rất ngắn gọn về API Google Dịch

Xem danh sách API Google Dịch tốt nhất

Có API Google Dịch không?

Google Dịch không cần giới thiệu. Tất cả chúng ta đều biết về dịch vụ phổ biến này của Google và trước đây bạn đã từng sử dụng dịch vụ này thông qua ứng dụng Google Dịch. Trong RapidAPI, bạn có thể làm việc với API Google Dịch để gọi dịch vụ này theo chương trình. Kiểm tra bảng điều khiển API để biết thêm về API

Nhìn lướt qua các điểm cuối API cho chúng tôi biết rằng nó hỗ trợ hai điểm cuối

ĐĂNG Phát hiện

Điểm cuối “POST Detect” trả về mã ngôn ngữ của chuỗi văn bản được chuyển tới API làm đầu vào

ĐĂNG Dịch

Điểm cuối “POST Translate” trả về văn bản đã dịch cho một chuỗi đầu vào nhất định được chuyển tới API dưới dạng đầu vào. Cùng với chuỗi đầu vào, nó cũng mong đợi mã ngôn ngữ của ngôn ngữ được dịch

API Google Dịch có miễn phí không?

Trên RapidAPI, API Google Dịch miễn phí tới 50 yêu cầu/ngày. Mọi yêu cầu API bổ sung đều có giá $0. 05 mỗi người sau 50 cuộc gọi đầu tiên

Làm cách nào để có quyền truy cập vào API Google Dịch?

1. Đăng ký tài khoản RapidAPI miễn phí

Để bắt đầu sử dụng API Google Dịch, trước tiên bạn cần đăng ký tài khoản nhà phát triển RapidAPI miễn phí. Với tài khoản này, bạn sẽ nhận được Khóa API chung để truy cập tất cả các API được lưu trữ trong RapidAPI

RapidAPI là thị trường API lớn nhất thế giới, với hơn 10.000 API và cộng đồng hơn 1.000.000 nhà phát triển. Mục tiêu của chúng tôi là giúp các nhà phát triển tìm và kết nối với các API để giúp họ xây dựng các ứng dụng tuyệt vời

2. Đăng ký API Google Dịch

Sau khi đăng nhập, hãy đăng nhập vào tài khoản RapidAPI của bạn và truy cập bảng điều khiển API. Nhấp vào tab “Đặt giá” và chọn tham gia đăng ký cơ bản cung cấp cho bạn 50 lệnh gọi API miễn phí tới API Google Dịch mỗi ngày

3. Kiểm tra đăng ký API của bạn

Hãy thử đăng ký API Google Dịch của bạn

Chọn điểm cuối “POST Translate” trong bảng điều khiển API

Các giá trị mặc định của tham số chỉ ra rằng chúng ta sẽ dịch văn bản “Xin chào, thế giới. ” sang tiếng Tây Ban Nha (với mã ngôn ngữ ‘es’)

Kích hoạt API và bạn sẽ thấy văn bản đã dịch trong phản hồi API (định dạng JSON)

Vì vậy, “Xin chào, thế giới. ” trong tiếng Tây Ban Nha có nghĩa là “Hola Mundo. ”

Nếu bạn muốn thử dịch sang các ngôn ngữ khác thì bạn có thể kiểm tra mã ngôn ngữ được xác định theo định nghĩa mã ISO 639

Cách sử dụng API Google Dịch với JavaScript. Xây dựng biểu mẫu web với các tính năng dịch thuật

Bây giờ chúng tôi chỉ cho bạn cách tích hợp API này vào một biểu mẫu dựa trên web. Có thể là biểu mẫu được lưu trữ trên trang web hoặc ứng dụng dành cho thiết bị di động. Bạn có thể nhanh chóng tích hợp Google Dịch vào mã giao diện người dùng của mình để cung cấp các tính năng dịch ngôn ngữ

Đây là những gì một hình thức đơn giản trông giống như

Với một số phép thuật dịch thuật, đây là cách bạn có thể thêm một số tia lửa vào nó

Thực hiện theo các bước bên dưới để xây dựng trang HTML demo chứa biểu mẫu này với tính năng dịch thuật

1. Tạo HTML tĩnh

Chúng tôi bắt đầu với trang HTML cơ bản. Giao diện người dùng dựa trên Bootstrap và chúng tôi thêm một số CSS để thêm gia vị cho các phần tử biểu mẫu

  
    
    
  	
  
  
    
    


  

  

    

      
    
    

      	

      
        Translate to
      
      

        English (default)
        Italian
        Spanish
        German
      
    
    

    		Contact Form
    
    

      

        
        
        
      
    
    
    

      
    
  

  

Nó cũng nhập JQuery để thực hiện tất cả các hoạt động giao diện người dùng mà chúng tôi mô tả sau đây

2. Thêm trình xử lý nhấp chuột thả xuống

Trình kích hoạt giao diện người dùng chính cho trang này là lựa chọn ngôn ngữ từ trình đơn thả xuống. Xác định một khối

Chúng tôi sẽ quay lại trình xử lý sự kiện này và thêm logic bên trong nó

3. Thêm lệnh gọi JQuery AJAX để gọi API Google Dịch

Bạn có thể lấy đoạn mã để gọi API từ bảng điều khiển API của API Google Dịch

Chúng tôi xác định một biến toàn cầu “settings” để chứa các tham số cuộc gọi AJAX, với một số sửa đổi. Và sau đó thêm một chức năng mới để xử lý cuộc gọi AJAX

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://google-translate1.p.rapidapi.com/language/translate/v2",
  "method": "POST",
  "headers": {
    "x-rapidapi-host": "google-translate1.p.rapidapi.com",
    "x-rapidapi-key": "",
    "content-type": "application/x-www-form-urlencoded"
  },
  "data": {
    "source": "en",
    "q": "Contact Form | Name | Contact Number | Email",
    "target": ""
  }
    
}

function fetchTranslation(){

  $.ajax(settings).done(function (response) {
        
    console.log(response);

      var translatedText = response.data.translations[0].translatedText;
        
      updatePlaceholders(translatedText);
        

  });

}

Đảm bảo thay thế trình giữ chỗ cài đặt . Biến này cũng chứa dữ liệu cho các yêu cầu API. Vì có bốn trường trong biểu mẫu cần được dịch, nên chúng tôi sử dụng một chuỗi duy nhất có bốn mã thông báo được phân tách bằng dấu ‘. ’ để nhận phản hồi đã dịch từ API trong một lệnh gọi.

Giá trị của khóa 'target' để chọn ngôn ngữ sẽ được đặt thành một phần của trình xử lý sự kiện “nhấp chuột” ở bước 6 .

5. Thêm mã cập nhật trình giữ chỗ biểu mẫu

Văn bản đã dịch do API Google Dịch trả về được giải mã dựa trên ‘. ’ và sau đó được thay thế bằng thẻ h1 cũng như văn bản giữ chỗ của các phần tử biểu mẫu. Điều này xảy ra bên trong một hàm khác updatePlaceholders( ) được gọi là một phần của xử lý phản hồi AJAX.

function updatePlaceholders(updateString){

  var comp = updateString.split('|')

  $('form > input').each(function(idx){

    $(this).prop("placeholder", comp[idx+1].trim() );

  });

  $("#formHeading").html(comp[0]);

}

6. Thêm Đăng nhập cho Trình xử lý sự kiện “nhấp chuột”

Cuối cùng, chúng tôi đã sẵn sàng thêm một số mã bên trong trình xử lý sự kiện “nhấp chuột” để hoàn thành chức năng

Ngôn ngữ mặc định là tiếng Anh. Vì vậy, logic của trình xử lý sự kiện “nhấp chuột” sẽ quyết định chỉ kích hoạt API nếu ngôn ngữ được chọn không phải là tiếng Anh. Trước khi kích hoạt, nó sẽ thay thế phím ‘mục tiêu’ trong ‘cài đặt. dữ liệu’ bằng mã ngôn ngữ của ngôn ngữ đích mà chúng tôi nhúng dưới dạng thuộc tính HTML vào thành phần menu thả xuống.

$(".dropdown-item").click(function(e){

  if($(this).attr("tolang") != 'en'){

    settings.data.target = $(this).attr("tolang");
    
    fetchTranslation();

    $('button').html($(this).html());

  } else {

    updatePlaceholders(settings.data.q);

    $('#langSel').html("Translate to");

  }	

});

Bạn đây rồi. Giờ đây, biểu mẫu của bạn có khả năng dịch văn bản giữ chỗ sang ba ngôn ngữ, tiếng Ý, tiếng Tây Ban Nha và tiếng Đức. Trong trường hợp bạn muốn giữ toàn bộ tệp HTML thì đây là

  
    
    
  	
  
  
    
    
    
  

  

  

    

      
    
    

      	

      
        Translate to
      
      

        English (default)
        Italian
        Spanish
        German
      
    
    

    		Contact Form
    
    

      

        
        
        
      
    
    
    

      
    
  

  

Copy the code, change the placeholder text with your RapidAPI subscription key, and save it as an .html file. Open it in a web browser to experience the magic of translation.