Практика использования сторонних ресурсов на примере Google Translate

Дата публикации: 2014-02-10

Google Translate

От автора: в данном уроке хотел бы показать Вам, как можно использовать различные сторонние ресурсы для решения поставленных задач на примере сервиса Translate от компании Google.

Итак, на примере сервиса Translate от компании Google мы с Вами попрактикуемся в отправке запросов на удаленный сервис. Посмотрим, как можно узнать какие данные необходимо отправить, чтобы получить правильный результат. В данном уроке мы с Вами создадим свой простенький переводчик на основе сервиса от Google.

Но опять, же повторюсь – цель урока не в создании скрипта переводчика! Я хотел бы научить Вас взаимодействовать со сторонними ресурсами. Для сегодняшнего урока я подготовил следующую страницу:

По своему коду она очень проста. Файл index.php содержит чистый html код:

<!DOCTYPE html>
<html>
  <head>
    <title>Переводчик</title>
	<script src="jquery-1.10.2.min.js"></script>
	<script src="script.js"></script>
	<link rel="stylesheet" href="style.css">
  </head>

  <body>
  <div id="content">
    <h1>Переводчик</h1>
    	<table cellpadding="5px">
			<tr>
				<td>
					Язык источник:&nbsp;
					<select id="lang_source">
						<option selected value="">Язык</option>
					</select>
				</td>
				<td>
					Язык перевода:&nbsp;
					<select id="lang_dest">
						<option selected value="">Язык</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					<textarea id="source" cols="50" rows="5"></textarea>
				</td>
				<td>
					<div id="dest" cols="50" rows="5"></div>
					<div id="res"></div>
				</td>
			</tr>
		</table>
		<h3 id="click">Перевести</h3>
	</div>	
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Переводчик</title>

</head>

<body>

<h1>Переводчик</h1>

<tr>

<td>

Язык источник: 

</select>

</td>

<td>

Язык перевода: 

</select>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

<h3 id="click">Перевести</h3>

</div>

</body>

</html>

И наконец, файл стилей style.css, который определяет оформление страницы. Его код я приводить не буду. Вы его сможете посмотреть в исходниках к уроку. Так же Вы, наверное, заметили, что я уже подключил библиотеку jQuery, которая нам в дальнейшем понадобиться. И пустой файл script.js, в котором, мы будем хранить скрипты на языке JavaScript.

Обзор сервиса

Итак, давайте посмотрим на сервис Translate от Google. Для этого перейдем на страницу //translate.google.ru/.

Это online переводчик, при помощи которого можно переводить как отдельные слова, так и словосочетания, предложения и тексты. Давайте попробуем, что то перевести. Смотрите ,как только мы вводим слово, сразу же данные отправляются на сервер, при помощи метода AJAX. И если мы откроем консоль плагина Firebug для браузера Mozilla Firefox, то мы сможем отследить отправку запроса:

То есть мы видим, что запрос отправляется на сервер по адресу translate.google.ru/translate_a/, с определенным набором данных.

Файл конфигурации

Первым делом создадим файл конфигурации, в котором будем хранить некоторые настройки. Содержимое файла config.php:

<?php

define("URL","//translate.google.ru/translate_a/t");

$lang = array
			(
			"ar"=>"Арабский",
			"da"=>"Датский",
			"en"=>"Английский",
			"fr"=>"Французский",
			"it"=>"Итальянский",
			"bg"=>"Болгарский",
			"de"=>"Немецкий",
			"es"=>"Испанский",
			"hi"=>"Хинди",
			"ja"=>"Японский",
			"no"=>"Норвежский",
			"ro"=>"Румынский",
			"zh-cn"=>"Китайский",
			"cs"=>"Чешский",
			"el"=>"Греческий",
			"fi"=>"Финский",
			"hr"=>"Хорватский",
			"ko"=>"Корейский",
			"pl"=>"Польский",
			"ru"=>"Русский",
			"zh-tw"=>"Китайский",
			"nl"=>"Голландский",
			"pt"=>"Португальский",
			"sv"=>"Шведский",
			"uk"=>"Украинский"
			);
?>

<?php

define("URL","//translate.google.ru/translate_a/t");

$lang = array

(

"ar"=>"Арабский",

"da"=>"Датский",

"en"=>"Английский",

"fr"=>"Французский",

"it"=>"Итальянский",

"bg"=>"Болгарский",

"de"=>"Немецкий",

"es"=>"Испанский",

"hi"=>"Хинди",

"ja"=>"Японский",

"no"=>"Норвежский",

"ro"=>"Румынский",

"zh-cn"=>"Китайский",

"cs"=>"Чешский",

"el"=>"Греческий",

"fi"=>"Финский",

"hr"=>"Хорватский",

"ko"=>"Корейский",

"pl"=>"Польский",

"ru"=>"Русский",

"zh-tw"=>"Китайский",

"nl"=>"Голландский",

"pt"=>"Португальский",

"sv"=>"Шведский",

"uk"=>"Украинский"

);

Как Вы видите, вначале определяем константу URL, в которой будет храниться адрес для запроса. И создадим массив $lang, в котором будут сохранены языки перевода и их коды. На сервер отправляется именно код языка. Теперь давайте на главной странице выведем в выпадающем списке список языков для перевода (конечно, не забываем подключить файл конфигурации в файле index.php). Язык фразы для перевода:

Язык источник:&nbsp;
<select id="lang_source">
	<?php foreach($lang as $key=>$val) :?>
		<?php if($key =='en') :?>
			<option selected value="<?php echo $key; ?>"><?php echo $val?></option>
		<?php else :?>
			<option  value="<?php echo $key; ?>"><?php echo $val?></option>
		<?php endif; ?>				
	<?php endforeach;?>
</select>

Язык источник: 

<?php foreach($lang as $key=>$val) :?>

<?php if($key =='en') :?>

<?php else :?>

<?php endif; ?>

<?php endforeach;?>

</select>

Язык, на который переводится:

Язык перевода:&nbsp;
<select id="lang_dest">
	<?php foreach($lang as $key=>$val) :?>
			<?php if($key =='ru') :?>
				<option selected value="<?php echo $key; ?>"><?php echo $val?></option>
			<?php else :?>
				<option  value="<?php echo $key; ?>"><?php echo $val?></option>
			<?php endif; ?>
	<?php endforeach;?>					
</select>

Язык перевода: 

<?php foreach($lang as $key=>$val) :?>

<?php if($key =='ru') :?>

<?php else :?>

<?php endif; ?>

<?php endforeach;?>

</select>

Создания класса отправки данных на сервер

Теперь создадим класс Translate (в отдельном файле с именем translate.php).

class translate {
	private $ku = false;
}

class translate {

private $ku = false;

}

Запросы на сервер мы будем отправлять, используя библиотеку cURL, поэтому в свойстве класса $ku, будем хранить дескриптор открытого соединения с библиотекой. Который, мы сформируем в конструкторе класса.

public function __construct() {
		$this->ku = curl_init();
		if(!$this->ku) {
			exit("Ошибка");
		}
	}
	
	public function __destruct() {
		if($this->ku) {
			curl_close($this->ku);
		}
	}

public function __construct() {

$this->ku = curl_init();

if(!$this->ku) {

exit("Ошибка");

}

public function __destruct() {

if($this->ku) {

curl_close($this->ku);

}

То есть при создании объекта данного класса, мы выполним инициализацию сURL соединения и дескриптор сохраним в свойстве класса $ku. В деструкторе класса, соответственно, соединение с библиотекой сURL, будет закрыто. Теперь опишем метод translate(), который будет отправлять запрос на сервер и получать ответ:

public function translate($s,$d,$query) {
		$query = urlencode($query);
		
		$str = "client=x&text=".$query."&sl=".$s."&tl=".$d;
		
		if(!$this->ku) {
			exit("Ошибка");
		}
		
		curl_setopt($this->ku,CURLOPT_URL,URL."?".$str);
		curl_setopt($this->ku,CURLOPT_RETURNTRANSFER,TRUE);
		curl_setopt($this->ku,CURLOPT_HTTPHEADER,array('User-Agent:'.$_SERVER['HTTP_USER_AGENT']));
		
		$result = curl_exec($this->ku);
		
		return $result;
	}

public function translate($s,$d,$query) {

$query = urlencode($query);

$str = "client=x&text=".$query."&sl=".$s."&tl=".$d;

if(!$this->ku) {

exit("Ошибка");

}

curl_setopt($this->ku,CURLOPT_URL,URL."?".$str);

curl_setopt($this->ku,CURLOPT_RETURNTRANSFER,TRUE);

curl_setopt($this->ku,CURLOPT_HTTPHEADER,array('User-Agent:'.$_SERVER['HTTP_USER_AGENT']));

$result = curl_exec($this->ku);

return $result;

}

Для начала определимся с аргументами, которые будет принимать данная функция:

$s – код языка строки для перевода;

$d – код языка, на который необходимо перевести строку;

$query – строка для перевода.

В теле метода, первым делом обработаем строку для перевода функцией urlencode(), для корректной передачи через строку запроса. Далее, так как на сервер необходимо отправить данные методом GET, значит необходимо сформировать строку с данными. Которая и будет использована для передачи.

Рассмотрим строку запроса: $str = «client=x&text=».$query.»&sl=».$s.»&tl=».$d;

Параметры:

client=x – специальный параметр, необходимый для получения ответа в формате JSON;

text=».$query – строка для перевода;

sl=».$s – код языка строки для перевода;

tl=».$d – код зыка на который необходимо перевести строку.

Далее задаем настройки cURL соединения:

CURLOPT_URL – адрес запроса;

CURLOPT_RETURNTRANSFER – данная настройка отвечает за возврат данных, если TRUE, значит данные будут возвращены;

CURLOPT_HTTPHEADER – в данной настройке описываем заголовки, которые будут отправлены. В нашем случае, для получения корректного результата, мы отправляем заголовок ‘User-Agent’. То есть сведенья о браузере пользователя.

Далее выполняем cURL соединение и возвращаем полученный результат. Таким образом, класс Translate полностью завершен. Давайте протестируем его работу, а также посмотрим, в каком виде возвращается ответ от сервера. Для этого в файл index.php, добавим следующий код:

include "translate.php";
$obj = new translate();
$res = $obj->translate('en','ru','hello');
print_r(json_decode($res));

include "translate.php";

$obj = new translate();

$res = $obj->translate('en','ru','hello');

print_r(json_decode($res));

То есть вызовем метод translate() и вручную передадим нужные параметры. При выводе данных на экран, обработаем их функцией json_decode(), так как мы знаем, что данные будут возвращены в формате json. На экране мы увидим следующее:

Как Вы видите, от сервера мы получаем достаточно большое количество данных. Это и перевод строки – свойство sentences, и дополнительные словарные данные – свойство dict. Я Вам рекомендую внимательно изучить полученный объект.

Подключаем AJAX

Итак, у нас есть форма для добавления строки, и есть файл, translate.php, который отправит данные на сервер и вернет результат. Теперь давайте определимся, как мы будем отправлять данные в файл translate.php. Я предлагаю для этих целей использовать AJAX. Поэтому, в пустой файл script.js добавим следующий код:

$(document).ready(function() {
	$("#click").click(function() {
		
		var lang = $("option:selected");
		var lang_source = $(lang[0]).val();
		var lang_dest = $(lang[1]).val();
		
		var q = $("#source").val();
		
		$.ajax({
			url:'index.php',
			data:"source="+lang_source+"&dest="+lang_dest+"&q="+q,
			type:"GET",
			dataType:"json",
			success:function(html) {
				var val = "";
				if(html['sentences']) {
					val = val + html['sentences'][0]['trans'];
					$("#dest").html(val);
				}
				var val2 = "";
				if(html['dict']) {
					for(var i = 0; i < html['dict'].length; i++) {
						var str = "";
						
						for(var j = 0; j < html['dict'][i]['terms'].length; j++) {
							str += html['dict'][i]['terms'][j] + " | ";
						}
						val2 = val2 + "<br />" + "<strong>"+ html['dict'][i]['pos'] + "</strong>: " + str;
					}
					$("#res").html(val2);
				}
			}
		});
	});
});

$(document).ready(function() {

$("#click").click(function() {

var lang = $("option:selected");

var lang_source = $(lang[0]).val();

var lang_dest = $(lang[1]).val();

var q = $("#source").val();

$.ajax({

url:'index.php',

data:"source="+lang_source+"&dest="+lang_dest+"&q="+q,

type:"GET",

dataType:"json",

success:function(html) {

var val = "";

if(html['sentences']) {

val = val + html['sentences'][0]['trans'];

$("#dest").html(val);

}

var val2 = "";

if(html['dict']) {

for(var i = 0; i < html['dict'].length; i++) {

var str = "";

for(var j = 0; j < html['dict'][i]['terms'].length; j++) {

str += html['dict'][i]['terms'][j] + " | ";

}

val2 = val2 + "<br />" + "<strong>"+ html['dict'][i]['pos'] + "</strong>: " + str;

}

$("#res").html(val2);

}

});

Итак, первым делом мы привязываем обработчик события cluck к блоку с идентификатором click (кнопка Перевести). Затем, при помощи библиотеки jQuery выбираем элементы формы (два выпадающих списка и текстовая область) и считываем их содержимое (значение атрибута value, для элемента textarea – это данные, которые содержатся между тегами). Далее вызываем метод ajax() библиотеки jQuery и указываем следующие параметры:

url:’index.php’ – адрес на сервера, куда будут отправлены данные;

data:»source=»+lang_source+»&dest=»+lang_dest+»&q=»+q – данные которые отправляются (в нашем случае отправляем данные элементов форм);

type:»GET» – тип запроса;

dataType:»json» – формат данных, которые будут присланы ответом от сервера (в нашем случае мы ожидаем данные в формате json. При этом они автоматически будут декодированы в объект).

success- функция, которая выполнится в результате успешно выполненного запроса. Данная функция принимает параметром, переменную html – это и есть данные, которые приходят от сервера. То есть это тот объект, который мы с Вами рассматривали ранее. А значит, теперь нам необходимо вывести информацию в требуемом виде.

Для вывода перевода, необходимо использовать свойство sentences, то есть html[‘sentences’][0][‘trans’], в свойстве sentences, содержится массив с одной ячейкой (с индексом 0), в данной ячейке содержится объект, у которого есть свойство trans, в нем содержится перевод указанной строки.

Для вывода словарных данных используйте свойство dict — это довольно сложное свойство в котором содержится многомерный массив. Поэтому я рекомендую Вам внимательно изучить его. В нашем случае мы используем цикл for() для обхода этого массива. В каждой ячейке данного массива, также содержится объект. И у этого объекта есть свойство terms и pos. Свойство terms представляет собой массив словарных данных (к примеру, глаголы прилагательные и т.д). Для прохода по нему я также использую цикл, что бы из содержимого его ячеек сформировать строку разделенную символом “|”. Свойство pos содержит в себе название непосредственно части речи, к которому относятся словарные данные из свойства terms.

Конечно, немного запутанно, но если внимательно изучить структуру объекта, возвращаемого сервером, то сразу станет все понятно. Теперь давайте в файл index.php добавим следующий код:

if($_GET) {
	$obj = new translate();
	$res = $obj->translate($_GET['source'],$_GET['dest'],$_GET['q']);
	echo $res;
	exit();
}

if($_GET) {

$obj = new translate();

$res = $obj->translate($_GET['source'],$_GET['dest'],$_GET['q']);

echo $res;

exit();

}

При этом предыдущий код, который мы добавляли для проверки метода translate(), необходимо удалить. Здесь как Вы видите, мы проверяем: если пришли данные методом GET (а они могут прийти только методом AJAX), то мы вызываем метод translate(). При этом, данные которые будут возвращены, сохраняются в переменной $res. Значение которое мы выводим на экран. Так как данный участок кода, сработает, только если будет обращение к данному файлу через AJAX, значит весь вывод на экран, будет ответом от сервера. А значит попадет в переменную html файла script.js. После вывода на экран переменной $res – выполняем exit().

Теперь, давайте посмотрим, что у нас получилось: